@charset "UTF-8";
 * {
     box-sizing: border-box;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1em
 }

 *, *:before, *:after {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -moz-tap-highlight-color: rgba(0, 0, 0, 0);
 }

 i, .main-button {
     cursor: pointer;
 }

 body {
     background: #eee;
 }

 .red {
     color: #a50133;
 }

 .main-logo {
     top: 1%;
     left: 3%;
     transform: translate(3%, 0%);
     height: 50px;
 }

 hr {
     border-top: 1px solid black;
 }

 .red-bg {
     background-color: #a50133;
     color: white;
 }

 #game {
     display: none;
 }

 #main {
     text-align: center;
 }

 .main-button {
     display: inline-block;
     border: 1px solid black;
     border-radius: 5px;
     padding: 7px;
     background: white;
     font-size: 1em;
     font-weight: bold;
     margin-right: 10px;
     color: black;
 }

 input[type="number"] {
     width: 80%;
     text-align: center;
     font-size: 24px;
     background: transparent;
     border: none;
     color: white;
     margin-top: -3px;
 }

 .row {
     height: 65px;
     border: 1px solid black;
     border-bottom: none;
     background: white;
 }

 .row.score {
     border-bottom: 1px solid black;
 }

 /* Create three unequal columns that floats next to each other */

 .column {
     float: left;
     padding-top: 5px;
     text-align: center;
     height: 100%;
     position: relative;
 }

 .left-big {
     width: 55.33%;
     padding-top: 15px;
 }

 .left, .middle2, .right {
     width: 22.33%;
 }

 .left, .middle, .middle2 {
     border-right: 1px solid black;
 }

 .middle {
     width: 33%;
 }

 .middle, .middle2 {
     font-size: 12px;
 }

 .middle2 {
     text-align: right;
     padding-right: 5px;
 }

 .left, .middle2, .right {
     padding-top: 20px;
 }

 /* Clear floats after the columns */

 .row:after {
     content: "";
     display: table;
     clear: both;
 }

 .distance-label {
     position: absolute;
     top: 5px;
     font-size: 12px;
     color: #fff;
     font-weight: bold;
     left: 5px;
 }

 .right {
     font-size: 1.5em;
 }

 .round-text {
     font-weight: bold;
 }

 button, .button {
     display: inline-block;
     padding: 10px;
     font-size: 1em;
     border-radius: 5px;
     margin-top: 5px;
 }

 h2 {
     font-size: 1.2em;
 }

 #cancel-game, #settings-menu {
     position: absolute;
     top: 13px;
     right: 10px;
     font-size: 1.5em;
 }

 #help-game, #help-menu {
     position: absolute;
     top: 13px;
     right: 45px;
     font-size: 1.5em;
 }

 #help-text, #settings-text {
     display: none;
     padding: 20px;
     border: 1px solid black;
     border-radius: 10px;
     text-align: left;
     margin-top: 5px;
     overflow: hidden;
     background: #fff;
     -webkit-overflow-scrolling: touch;
     overflow: auto;
     position: absolute;
     bottom: 20px;
     top: 100px;
     left: 10px;
     right: 10px;
 }

 #close-help {
     position: absolute;
     top: 5px;
     right: 10px;
 }

 #game-help-text {
     display: none;
     padding: 15px;
     border: 1px solid black;
     border-radius: 10px;
     text-align: left;
     margin-top: 5px;
     margin-bottom: 10px;
 }

 .list-item {
     padding: 10px 15px;
     font-size: 1.1em;
     position: relative;
     border-bottom: 1px solid #ccc;
 }

 .list-item .delete-round {
     position: absolute;
     right: 5px;
     margin-top: -37px;
 }

 .list-item .list-time {
     font-size: 0.8em;
     display: block;
     padding-left: 10px;
     padding-top: -2px;
 }

 #settings {
     display: none;
 }

 a {
     text-decoration: none;
 }

 #scores {
     background: white;
     text-align: left;
     padding: 5px;
     font-size: 0.9em;
     line-height: 1.5em;
     text-decoration: none;
     padding-left: 10px;
 }

 /* Styling Checkbox Starts */

 .styled-checkbox {
     position: absolute;
     opacity: 0;
 }

 .styled-checkbox+label {
     position: relative;
     cursor: pointer;
     padding: 0;
     top: 2px;
 }

 .styled-checkbox+label:before {
     content: '';
     margin-right: 10px;
     display: inline-block;
     vertical-align: text-top;
     width: 20px;
     height: 20px;
     background: #a50133;
     top: -2px;
     position: relative;
 }

 .styled-checkbox:hover+label:before {
     background: #a50133;
 }

 .styled-checkbox:focus+label:before {
     box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
 }

 .styled-checkbox:checked+label:before {
     background: #a50133;
 }

 .styled-checkbox:disabled+label {
     color: #b8b8b8;
     cursor: auto;
 }

 .styled-checkbox:disabled+label:before {
     box-shadow: none;
     background: #ddd;
 }

 .styled-checkbox:checked+label:after {
     content: '';
     position: absolute;
     left: 5px;
     top: 7px;
     background: white;
     width: 2px;
     height: 2px;
     box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
 }

 /** ANDROID INSTALL */

 .androidPrompt {
     position: absolute;
     bottom: 0px;
     left: 0px;
     right: 0px;
     height: 100px;
     background: white;
     padding: 10px;
     display: none;
 }

 .androidPrompt .androidClose {
     position: absolute;
     top: 5px;
     right: 5px;
 }

 .androidPrompt .main-button {
     position: absolute;
     bottom: 5px;
     right: -5px;
     border-color: #007aff;
     color: #007aff;
 }

 /** PWA */

 .noScroll {
     overflow: hidden;
 }

 .pwaPromptOverlay {
     background-color: rgba(0, 0, 0, 0.8);
     left: 0;
     min-height: 100vh;
     min-height: -webkit-fill-available;
     opacity: 0;
     position: fixed;
     top: 0;
     transition: opacity 0.2s ease-in;
     width: 100vw;
     z-index: 999999;
 }

 .pwaPromptOverlay.visible {
     opacity: 1;
     display: block;
 }

 .pwaPromptOverlay.hidden {
     pointer-events: none;
     touch-action: none;
 }

 @media (prefers-color-scheme: dark) {
     .pwaPromptOverlay.modern {
         background: rgba(0, 0, 0, 0.6);
         color: rgba(235, 235, 245, 0.6);
     }
 }

 .pwaPrompt {
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
     background-color: rgba(250, 250, 250, 0.8);
     border-radius: 10px;
     bottom: 0;
     color: black;
     filter: brightness(1.1);
     left: 0;
     margin: 0 8px 10px;
     overflow: hidden;
     position: fixed;
     transform: translateY(calc(100% + 10px));
     transition: transform 0.4s cubic-bezier(0.4, 0.24, 0.3, 1);
     width: calc(100vw - 16px);
     z-index: 999999;
 }

 .pwaPrompt.visible {
     transform: translateY(0);
     display: block;
 }

 .pwaPrompt.hidden {
     pointer-events: none;
     touch-action: none;
 }

 .pwaPrompt.modern {
     background: rgba(250, 250, 250, 0.8);
 }

 @media (prefers-color-scheme: dark) {
     .pwaPrompt.modern {
         background: rgba(120, 120, 128, 0.32);
     }
 }

 .pwaPromptHeader {
     align-items: center;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     border-top: 0px;
     border-left: 0px;
     border-right: 0px;
     border-width: 0.5px;
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;
     padding: 13px 16px;
 }

 .modern .pwaPromptHeader {
     border-color: rgba(60, 60, 67, 0.29);
 }

 @media (prefers-color-scheme: dark) {
     .modern .pwaPromptHeader {
         border-color: rgba(84, 84, 88, 0.6);
     }
 }

 .pwaPromptHeader .pwaPromptTitle {
     color: #333333;
     font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     font-size: 18px;
     font-weight: 500;
     line-height: 1.125;
     margin: 0;
     padding: 0;
 }

 .modern .pwaPromptHeader .pwaPromptTitle {
     color: black;
 }

 @media (prefers-color-scheme: dark) {
     .modern .pwaPromptHeader .pwaPromptTitle {
         color: white;
     }
 }

 .pwaPromptHeader .pwaPromptCancel {
     color: #2d7cf6;
     font-size: 16px;
     padding: 0;
     margin: 0;
     border: 0;
     background: transparent;
 }

 .modern .pwaPromptHeader .pwaPromptCancel {
     color: #007aff;
 }

 @media (prefers-color-scheme: dark) {
     .modern .pwaPromptHeader .pwaPromptCancel {
         color: #0984ff;
     }
 }

 .pwaPromptBody {
     display: flex;
     width: 100%;
 }

 .pwaPromptBody .pwaPromptDescription {
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     border-top: 0px;
     border-left: 0px;
     border-right: 0px;
     border-width: 0.5px;
     color: inherit;
     margin: 0 16px;
     padding: 16px;
     width: 100%;
 }

 .modern .pwaPromptBody .pwaPromptDescription {
     border-color: rgba(60, 60, 67, 0.29);
 }

 @media (prefers-color-scheme: dark) {
     .modern .pwaPromptBody .pwaPromptDescription {
         border-color: rgba(84, 84, 88, 0.6);
     }
 }

 .pwaPromptCopy {
     color: black;
     font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     font-size: 0.8em;
     line-height: 17px;
     margin: 0;
     padding: 0;
 }

 .pwaPromptCopy.bold {
     font-weight: 600;
 }

 .modern .pwaPromptCopy {
     color: rgba(60, 60, 67, 0.6);
 }

 @media (prefers-color-scheme: dark) {
     .modern .pwaPromptCopy {
         border-color: rgba(235, 235, 245, 0.6);
         color: rgba(235, 235, 245, 0.6);
     }
 }

 .pwaPromptInstruction {
     color: inherit;
     margin: 0 16px;
     padding: 16px;
 }

 .pwaPromptInstruction .pwaPromptInstructionStep {
     align-items: center;
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start;
     text-align: left;
     margin-bottom: 16px;
 }

 .pwaPromptInstruction .pwaPromptInstructionStep:last-of-type {
     margin-bottom: 0;
 }

 .pwaPromptInstruction .pwaPromptShareIcon, .pwaPromptInstruction .pwaPromptHomeIcon {
     flex: 0 0 auto;
     height: 30px;
     margin-right: 32px;
     width: 25px;
 }

 .pwaPromptInstruction .pwaPromptHomeIcon {
     color: #2d7cf6;
 }

 .modern .pwaPromptInstruction .pwaPromptHomeIcon {
     color: black;
     fill: black;
 }

 @media (prefers-color-scheme: dark) {
     .modern .pwaPromptInstruction .pwaPromptHomeIcon {
         color: white;
         fill: white;
     }
 }

 .pwaPromptInstruction .pwaPromptShareIcon {
     color: #2d7cf6;
     fill: #2d7cf6;
 }

 .modern .pwaPromptInstruction .pwaPromptShareIcon {
     color: #007aff;
     fill: #007aff;
 }

 @media (prefers-color-scheme: dark) {
     .modern .pwaPromptInstruction .pwaPromptShareIcon {
         color: #0984ff;
         fill: #007aff;
     }
 }

 /** UPload file button */

 .upload-btn-wrapper {
     position: relative;
     overflow: hidden;
     display: inline-block;
 }

 .btn {
     border: 2px solid gray;
     color: black;
     background-color: white;
     padding: 8px 20px;
     border-radius: 8px;
     font-size: 20px;
     font-weight: bold;
     display: inline-block;
 }

 .upload-btn-wrapper input[type=file] {
     font-size: 100px;
     position: absolute;
     left: 0;
     top: 0;
     opacity: 0;
 }