body {
    background-color: #000;
    margin: 0px;
    padding: 0px;
    font-family: "Roboto", "Ubunutu", "Montserrat", "Helvetica", Arial, sans-serif;
    overflow-y: hidden;
    overflow-x: hidden;
    font-size: 16px;
}

button {
    background-color: #696867;
    border: 0.1rem solid #696867;
}

    /* Override hover and focus styles */
    button:focus, button:hover {
        background-color: #696867 !important; /* Force this color to stay using !important if necessary */
        border-color: #696867 !important; /* Ensure the border color stays consistent */
        outline: 0; /* Remove focus outline */
    }

    .button[disabled], button[disabled], input[type='button'][disabled], input[type='reset'][disabled], input[type='submit'][disabled] {
        background-color: #696867 !important; /* Force this color to stay using !important if necessary */
        border-color: #696867 !important; /* Ensure the border color stays consistent */
    }

        .button[disabled]:focus, .button[disabled]:hover, button[disabled]:focus, button[disabled]:hover, input[type='button'][disabled]:focus, input[type='button'][disabled]:hover, input[type='reset'][disabled]:focus, input[type='reset'][disabled]:hover, input[type='submit'][disabled]:focus, input[type='submit'][disabled]:hover {
            background-color: #696867 !important; /* Force this color to stay using !important if necessary */
            border-color: #696867 !important; /* Ensure the border color stays consistent */
        }


#install-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

    #install-button:hover {
        transform: scale(1.05);
    }

slsw-register {
    margin: 0;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: space-between; /* Ensure space between top and bottom sections */
    height: 100vh;
    background-image: url('../img/pool.jpg'); /* Use your pool image */
    background-size: cover;
    background-position: center;
    color: white;
    position: relative;
}

    /* Adding the overlay */
    slsw-register::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3); /* Apply semi-transparent overlay */
        z-index: 0; /* Make sure this is behind the content */
    }

    slsw-register .container,
    slsw-register .keypad {
        position: relative;
        z-index: 1; /* Ensure the content is on top of the overlay */
    }

    slsw-register .container {
        text-align: center;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }

    slsw-register h1 {
        font-size: 2rem;
        font-weight: bold;
        margin: 20px 0px;
    }

    slsw-register p {
        font-size: 1.0rem;
        margin-bottom: 30px;
    }

    slsw-register .error {
        font-size: 1.0rem;
        font-weight:bold;
        margin-top: 100px;
        color: red;
        
    }

    slsw-register .code-input {
        display: flex;
        justify-content: space-between;
        max-width: 300px; 
        margin: 0 auto; 
        width: 100%; 
        padding: 0 10px;
    }

    slsw-register .circle {
        width: 25px;
        height: 25px;
        border: 1px solid white;
        border-radius: 50%;
        display: inline-block;
    }
        slsw-register .circle.filled {
            background-color: white; /* Change the fill color when filled */
        }

    slsw-register .keypad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 5px;
        box-sizing: border-box;
        width: 100%;
        background-color: transparent; /* Make sure this is transparent */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

        slsw-register .keypad .number {
            background-color: rgba(255, 255, 255, 0.4);
            color: white;
            font-size: 1.5rem;
            padding: 20px;
            cursor: pointer;
        }

            slsw-register .keypad .number.pressed {
                background-color: rgba(255, 255, 255, 0.8); /* Lighter color on press */
                transform: scale(0.9); /* Scale down to give a pressed effect */
                transition: transform 0.1s ease, background-color 0.1s ease;
            }

        slsw-register .keypad .backspace {
            grid-column: 1 / 2;
            font-size: 1.5rem;
            background-color: rgba(255, 255, 255, 0.4);
            padding-top: 20px;
        }

        slsw-register .keypad .empty {
            grid-column: 3 / 4;
            background-color: rgba(255, 255, 255, 0.4);
        }

    slsw-register .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 1rem;
        text-align: center;
        z-index: 9999; /* Make sure it sits above everything else */
        visibility: hidden; /* Initially hidden */
    }

        slsw-register .overlay.visible {
            visibility: visible; /* Show the overlay when there's no connection */
        }

    slsw-register .overlay-text {
        display: inline-block;
        padding: 20px;
        margin-bottom: 100px;
        
       
    }


/* Container to hold all elements */
slsw-timing {
    text-align: center;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: space-between; /* Ensure space between top and bottom sections */
    align-items: center; /* Horizontally center all child elements */
    height: 100vh;
}

/* Logo styling */
    slsw-timing .logo {
        width: 300px;
        margin: 0 auto;
        display: block;
        margin-top: 30px;
    }

/* Club Name styling */
    slsw-timing .club-name {
        margin-top: 10px 0px;
        font-size: 1.5rem;
        color: #fff;
    }
/* Lane number styling */
    slsw-timing .lane-number {
        line-height: 4rem;
        font-size: 2rem;
        background-color: #1976D2;
        color: white;
        display: inline-block;
        border-radius: 10px;
        font-weight: bold;
        width: 4rem;
        height: 4rem;
        border: 1px solid #fff;
    }

    slsw-timing .event-number {
        margin-bottom: 10px;
        font-size: 1.4rem;
        font-weight: normal;
        color: #fff;
    }
    slsw-timing .event-name {
        font-size: 1.4rem;
        font-weight: normal;
        color: #fff;
    }

    slsw-timing .timer-display {
        font-size: 5rem;
        letter-spacing: 5px;
        font-weight: bold;
        color: #fff;
    }

/* Start button styling */
    slsw-timing .start-button {
        background-color: forestgreen !important;
        width: calc(100% - 40px); 
        cursor: pointer;
        height: 200px;
        font-size: 1.5rem;
        margin-bottom: 30px;
    }

        slsw-timing .start-button.running {
            background-color: red !important;
        }
        slsw-timing .start-button.resume {
            background-color: orange !important;
        }




/* Container to hold all elements */
slsw-starter {
    text-align: center;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: space-between; /* Ensure space between top and bottom sections */
    align-items: center; /* Horizontally center all child elements */
    height: 100vh;
}

    /* Logo styling */
    slsw-starter .logo {
        width: 300px;
        margin: 0 auto;
        display: block;
        margin-top: 30px;
    }

    /* Club Name styling */
    slsw-starter .club-name {
        margin: 10px 0px;
        font-size: 1.5rem;
        color: #fff;
    }

    slsw-starter .lane-number {
        line-height: 4rem;
        font-size: 2rem;
        background-color: #1976D2;
        color: white;
        display: inline-block;
        border-radius: 10px;
        font-weight: bold;
        width: 4rem;
        height: 4rem;
        border: 1px solid #fff;
    }
        slsw-starter .lane-number.pulse {
            animation: pulse 1.5s infinite; /* Infinite pulse effect */
        }

        @keyframes pulse {
            0% {
                transform: scale(1); /* Original size */
            }

            50% {
                transform: scale(1.4); /* Grow 10% */
            }

            100% {
                transform: scale(1); /* Back to original size */
            }
        }
    /* Status message styling */
    slsw-starter .event-number {
        font-size: 1.4rem;
        font-weight: normal;
        color: #fff;
        margin-bottom: 10px;
    }

    slsw-starter .event-name {
        font-size: 1.4rem;
        font-weight: normal;
        color: #fff;
    }

    /* Timer display styling */
    slsw-starter .timer-display {
        margin-top: 20px;
        font-size: 5rem;
        letter-spacing: 5px;
        font-weight: bold;
        color: #fff;
    }

    /* Disabled button */
    slsw-starter button:disabled {
        background-color: #696867;
    }
        slsw-starter button:disabled:focus {
            background-color: #696867;
        }

    /* Default start-button styling */
    slsw-starter .start-button {
        color: white;
        border: none;
        border-radius: 10px;
        border: 1px solid #fff;
        width: calc(100% - 40px); /* Subtract margins from 100% width */
        cursor: pointer;
        height: 200px;
        font-size: 1.5rem;
        margin-bottom: 30px;
    }

        /* Start button in 'ready' state */
        slsw-starter .start-button.ready {
            background-color: forestgreen !important;
        }

slsw-starter .lanes {
    display: flex;
    justify-content: space-between; /* Evenly space out the children */
    align-items: center; /* Align the items vertically if needed */
    width: 100%; /* Full width of the parent container */
    gap: 10px;
    padding: 0px 20px;
}

    slsw-starter .lanes .lane {
        flex: 1;
        line-height: 3rem;
        font-size: 1rem;
        background-color: #000000;
        color: #4a4a4a;
        display: inline-block;
        border-radius: 5px;
        font-weight: bold;
        width: 2rem;
        height: 3rem;
        border: 1px solid #4a4a4a;
       
    }

        slsw-starter .lanes .lane.connected {
            background-color: #1976D2 !important;
            color: #fff;
            border: 1px solid #fff;
        }

     


slsw-betatest {

}

    slsw-betatest .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

slsw-betatest .dialog {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 90%;
}

    slsw-betatest .dialog p {
        margin-bottom: 15px;
    }

    slsw-betatest .dialog input {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    slsw-betatest .buttons {
        display: flex; /* Enable Flexbox */
        justify-content: space-between; /* Space between the buttons */
        gap: 10px;
    }

        slsw-betatest .buttons button {
            flex: 1; /* Each button takes equal space */
        }



slsw-appstore {
}

    slsw-appstore .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    slsw-appstore .dialog {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        max-width: 400px;
        width: 90%;
    }

        slsw-appstore .dialog p {
            margin-bottom: 15px;
        }

        slsw-appstore .dialog input {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

    slsw-appstore .buttons {
        display: flex; /* Enable Flexbox */
        justify-content: space-between; /* Space between the buttons */
        gap: 10px;
    }

        slsw-appstore .buttons button {
            flex: 1; /* Each button takes equal space */
        }