.LoginPage {
    display: grid;
    position: absolute;
    z-index: 99;
    color: #98c1d9;
    width: 100%;
    height: 100%;

    gap: 10px;
    grid-template-rows: 100px minmax(100px, 1000px);
    background-color: #3E79D5;
}

.KniffelLogo {
    /* text-transform: uppercase; */
    text-align: center;
    width: 100%;
    font-size: 50px;
    color: red;
    font-weight: 600;
    letter-spacing: -3px;
    text-shadow: -0.6px -0.6px 0 ghostwhite, 0.6px -0.6px 0 ghostwhite, -0.6px 0.6px 0 ghostwhite, 0.6px 0.6px 0 ghostwhite;
}

.LoginTopBar {
    grid-row: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 25px;
    /* row-gap: 30px; */
    width: calc(100% - 50px);
    background-color: #4872C4;
    border-radius: 0 0 40px 40px;
}

.LoginMidBar {
    grid-row: 2;
    display: grid;
    align-content: start;
    /* background-color: #28303f; */
    row-gap: 30px;
    height: 100%;
    grid-template-rows: 1fr auto;
}

.Overlay{

    z-index: 98;
    position: absolute;
    left: 0%;
    top: 45%;
    /* width: 100%;
    height: calc(100% - 45%); */
    backdrop-filter: blur(2px);
    width: 0;
    height: 0;
    display: none;
}

.Account {
    display: grid;
    grid-template-rows: repeat(auto-fill, auto);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    gap: 20px;
}

.Credits {

    z-index: 99;
    display: flex;
    align-items: start;
    justify-content: center;
    margin-bottom: 20px;

    a {
        cursor: pointer;
        transition: color 0.3s ease-in-out;
    }
}

.Credits:hover {
    a {
        color: ghostwhite;
    }

}


.PlayerName {
    grid-row: 1;
    display: grid;
    grid-template-rows: auto auto auto;

    gap: 10px;
    width: 100%;

    input {
        border: 0;
        outline: none;
        border-radius: 3px;
        cursor: pointer;
        background-color: #88B2FF;
        color: #1f3861;
        font-weight: 600;
        font-size: 1.2rem;
        min-width: none !important;
        padding: 14px;


        text-align: center;
        width: auto;

    }

    .ErrorLogin {
        display: none;
        color: #F68525;
        font-weight: 600;
        font-size: 1rem;

    }

    label {
        text-align: center;
    }
}

.InputLoginAccount {
    display: grid;
    grid-template-columns: 50px auto 50px;
    width: 287px;
    max-width: 287px;
    overflow: hidden;


    .ShowAccount {
        display: block;
        display: none;
        padding: 0;
        margin: 0;
        grid-column: 3;
        text-align: center;

        min-width: 50px;
        min-height: 50px;

        border: 0;
        justify-self: start;
        background: transparent;
        color: #F68525;
        /* text-shadow: ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px, ghostwhite 0px 0px 1.5px; */
        font-size: 2rem;
        -webkit-text-fill-color: #F68525;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: ghostwhite;
    }

    label {

        display: none;
        text-align: center;
        line-height: 50px;
        grid-column: 2;
        color: ghostwhite;
        /* min-width: calc(287px - 100px); */
        font-size: 1.5rem;
    }

    input {
        grid-column: 1;
        min-width: 0px !important;
        max-width: calc(287px -28px);
        width: calc(287px - 28px);
    }



}


.GameSettings {
    display: grid;
    text-wrap: nowrap;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(auto-fill, auto);
    gap: 10px;
    margin: auto;
    width: 100%;

    > :nth-child(1) {
        text-align: center;
        grid-row: 1;
        grid-column: 1/3;
        color: #88B2FF;
    }

    >div {
        margin-left: 15px;
    }
}

.GameVisibility {
    grid-row: 2;
    grid-template-rows: repeat(auto-fill, auto);
}


.ServerPassword {
    grid-column: 1/3;
    grid-row: 3;

    display: none;
    border: 0;
    outline: none;
    border-radius: 3px;
    cursor: pointer;
    background-color: #88B2FF;
    color: #1f3861;
    font-weight: 600;
    font-size: 1.2rem;
    padding: 7px;
    text-align: center;
    width: calc(100% - 14px);

}

.ErrorVisibility {
    display: none;
    width: 100%;
    text-align: center;
    grid-column: 1/3;
    grid-row: 4;
    color: #F68525;
    font-weight: 600;
    font-size: 1rem;

}

.PlayerCount {
    grid-row: 3;
}

.R_BtnPlayer {

    display: flex;
    align-items: center;

    gap: 5px;
    font-size: 18px;

    label {

        color: ghostwhite;
    }


    input {
        cursor: pointer;
        margin: auto 0;
        width: 25px;
        height: 25px;
    }

    input[type='radio']:after {

        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border-radius: 15px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: relative;
        background-color: #88B2FF;

        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;

    }

    input[type='radio']:checked:after {
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border-radius: 15px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: relative;
        background-color: #F68525;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
}

.StartGame {
    grid-row: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #88B2FF;
}

.ButtonStyle {

    cursor: pointer;
    width: 100%;
    background-color: #F68525;
    color: ghostwhite;
    font-weight: 600;
    font-size: 1.2rem;
    min-height: 3rem;
    border-radius: 25px;
    border: 0;
    transition: background-color 0.3s ease-in-out;
}

.ButtonStyle:hover {
    background-color: #c76a19;
}