* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: Arial ;
}
:root {
    --Surface1: #0F0E09;
    --Surface2: #15130E;
    --Surface3: #1D1B16;
    --Offwhite: #CBC6BD;
    --PrimaryYellow: #F2C300;
    --Border: #2C2A24;
    --InputFieldBorder: #3B3933;
}
body {
    /* background-color: #3C3C3B;*/
    background-color: #2B2A2B;
    font-size: 15px;
    font-family: Arial !important;
}

.mainCard {
    min-width: 1336px;
    min-height: 650px;
    width: 100%;
    height: 100vh;
    background-color: var(--Surface1);
}

.header-login {
    width:100%;
    padding: 2.1rem 2rem 1rem 2.2rem;
}
    .header-login img {
        width: 183px;
        min-width: 120px;
        min-height: 20px;
    }

.div-loginContainer {
    min-height: 470px;
    max-height: 800px;
    position: relative;
    width: 383px;
    height: 477px;
    color: #ffffff;
    border-radius: 1.4rem;
    padding: 2rem;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--Surface2);
    border: 1px solid var(--Border);
    border-radius: 16px;
    box-shadow: 0px 6px 60px rgba(0, 0, 0, 0.1);
}

.lbl-login {
    font-size: 1.7rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.6rem;
    margin-top:.3rem;
}

.subHeader {
    font-size: 1rem;
    margin: .85rem;
    margin-bottom:18px; 
    color: #D1CFCF;
    text-align: center;
    font-weight: 300;
    line-height: 20.2px;
}

.login-details {
    margin-top: 2.6rem;

}

.userInput {
    background-color: var(--Surface3);
    margin-bottom: .95rem;
    display: flex;
    border: 1px solid var(--InputFieldBorder);
    border-radius: 8px;
    padding: 1rem .85rem;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}

    .userInput .inputTypesImage {
        width: 1.3rem;
        height: 17px;
        margin-right: .95rem;
        
    }

        .userInput .inputTypesImage img {
            width: 100%;
            height: 100%;
        }

    .userInput input {
        font-size: .85rem;
        background: none;
        outline: none;
        border: none;
        color: white;
        width:80%;
        margin-right:.3rem;
    }

        .userInput input::placeholder {
            color: rgba(255, 255, 255, 0.5);
            
        }

.bottomSection {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: .83rem;
    color: #FFFFFF;
    margin-top:-5px;
}

.btn-login {
    background-color: var(--PrimaryYellow);
    width: 82%;
    height: auto;
    padding: .85rem;
    color: black;
    font-weight: 700;
    position: absolute;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    border-radius: 80px;
    margin-bottom:10px;
}

.termsAndCondition {
    width: 1300px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .8rem;
    color: var(--Offwhite);
    text-align: center;
    padding: 15px;
    border-top: 1px solid #1E1E1E;
}

    .termsAndCondition a {
        font-weight: 700;
        color: var(--Offwhite);
        text-decoration: underline;
        letter-spacing: .8px;
    }

.loginError-close {
    padding: 1.3rem 2rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.2rem;
    background-color: var(--Surface2);
    color: #fff;
    border:1px solid var(--Border);
}

    .loginError-close h1 {
        width: 100%;
        text-align: center;
        font-size: 1rem;
        margin-bottom: 2.2rem;
    }

    .loginError-close div {
        display: flex;
        justify-content: flex-end;
    }

        .loginError-close div button {
            font-size: 0.8rem;
            color: #BCBCBC;
        }

            .loginError-close div button:first-child {
                margin-right: 0px;
            }

/*@media only screen and (max-width:1200px) {

    .div-loginContainer {
        width: 27vw;
        height: 63vh;
    }

    .termsAndCondition {
        width: 20%;
    }
}

@media only screen and (max-width:1024px) {

    .div-loginContainer {
        width: 35vw;
        height: 63vh;
    }

    .termsAndCondition {
        width: 20%;
    }
}

@media only screen and (max-width:867px) {

    .div-loginContainer {
        width: 40vw;
        height: 63vh;
    }

    .termsAndCondition {
        width: 26%;
    }
}

@media only screen and (max-width:768px) {

    .div-loginContainer {
        width: 45vw;
        height: 63vh;
    }

    .termsAndCondition {
        width: 38%;
    }
}


@media only screen and (max-width:595px) {

    .div-loginContainer {
        width: 56vw;
        height: 63vh;
    }
}

@media only screen and (max-width:480px) {

    .div-loginContainer {
        width: 76vw;
        height: 63vh;
    }

    .termsAndCondition {
        width: 64%;
    }
}

@media only screen and (max-width:370px) {
    .div-loginContainer {
        width: 90vw;
        height: 63vh;
    }

    .termsAndCondition {
        width: 83%;
    }
}

@media only screen and (max-width:280px) {
    .div-loginContainer {
        width: 98vw;
        height: 63vh;
    }

    .termsAndCondition {
        width: 90%;
    }
}


@media only screen and (max-width:280px) {
    .div-loginContainer {
        width: 98vw;
        height: 63vh;
    }

    .termsAndCondition {
        width: 90%;
    }
}


@media only screen and ( min-width:1800px) {

   

    .subHeader, .termsAndCondition {
        line-height: 1rem;
    }
}

@media only screen and ( max-height:650px) {
    .termsAndCondition {
        width: 90%;
    }
}

@media only screen and ( max-height:550px) {


    .termsAndCondition {
        width: 98%;
        bottom: 0%;
    }
}


@media only screen and (max-height:450px) {
   
    .mainCard {
        height: 150vh;
    }

    .termsAndCondition {
        bottom: -10%;
    }
}*/


@media only screen and (max-width:1336px) {
    .div-loginContainer {
        top: 270px;
        left: 668px;
    }

    .termsAndCondition {
        top: 600px;
        left: 668px;
    }
}

@media only screen and (max-height:650px) {
    .div-loginContainer {
        top: 270px;
        left: 668px;
    }

    .termsAndCondition {
        top: 600px;
        left: 668px;
    }
}

#dvTable {
    max-height: 1900px;
}

    #dvTable td, #dvTable th {
        padding: 3px 10px 10px 1px;
        color: black;
    }

    #dvTable th {
        background-color: rgb(212 212 212);
    }

    #dvTable tr:nth-child(even) {
        background-color: #eaeaea;
    }