.loginForm a {
    color: transparent;
    text-decoration: none;
}
.loginForm .form-control:focus{
    border-color: #1d8cf8 !important;
    background-color: transparent;
    box-shadow: none;
}
.loginForm .btnListUser {
    border-radius: 6px;    
    background: #1d8cf8;
    background-image: linear-gradient(to bottom left,#1d8cf8,#3358f4,#1d8cf8);
    border: none;
    color: #ffffff;
}
.loginForm input {
    font-size: .75rem;
    color: white !important;
    padding: 10px 18px 10px 0px;
    background-color: transparent;
}
#input-portal {
    font-size: .75rem;
    color: white !important;
    padding: 10px 18px 10px 0px;
    background-color: transparent;
}
.loginForm .input-group-text i{
    color: #93949e;
} 
.inputBox  option{
    background-color:#1e1e2a;
}
#input-portal  option{
    background-color:#1e1e2a;
    font-size: 1rem;
}
 /* =============== 700 Screen Resolution =============== */

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

    /* =============== Login Screen Desgin Start =============== */
    
    .loginForm h1{
        font-size: 18px;
    }

    .loginBtnLeft {
        position: inherit;
        top: 0px;
        width: 100%;
        left: 0px;
    } 
    .loginLogo {
        padding-top: 17% !important;
        width: 100%;
        margin-left: 0% !important;
    }
    .loginForm{
        padding-top: 5% !important;
        position: inherit;
        /* width: 80%; */
        top: 0%;
        left: 0%;
    }
    .loginLogo .btnConVPN {
        width: 40%;
        font-size: 12px;
        font-weight: 700;
        border-radius: 2px;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
        padding: 10px 0px 10px 0px !important;
        background-color: rgb(255 255 255);
        border: 1px solid rgb(255 255 255 / 50%);
        box-shadow: 0px 5px 6px 2px #00000087;
    }
    .loginForm .btnListUser {
        width: 47%;
        font-size: 12px;
        font-weight: 700;
        padding: 10px 0px 10px 5px;
    }

    /* =============== Login Screen Desgin End =============== */
        
}

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

    /* =============== Login Screen Desgin Start =============== */
    
    .loginForm h1{
        font-size: 18px;
    }

    .loginBtnLeft {
        position: inherit;
        top: 0px;
        width: 100%;
        left: 0px;
    } 
    .loginLogo {
        padding-top: 17% !important;
        width: 100%;
        margin-left: 0% !important;
    }
    .loginForm{
        padding-top: 5% !important;
        position: inherit;
        /* width: 80%; */
        top: 0%;
        left: 0%;
    }
    .loginLogo .btnConVPN {
        width: 40%;
        font-size: 12px;
        font-weight: 700;
        border-radius: 2px;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
        padding: 10px 0px 10px 0px !important;
        background-color: rgb(255 255 255);
        border: 1px solid rgb(255 255 255 / 50%);
        box-shadow: 0px 5px 6px 2px #00000087;
    }
    .loginForm .btnListUser {
        width: 47%;
        font-size: 12px;
        font-weight: 700;
        padding: 10px 0px 10px 5px;
    }

    /* =============== Login Screen Desgin End =============== */
        
}

    /* =============== 800 Screen Resolution =============== */

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

    /* =============== Login Screen Desgin Start =============== */
    
    .loginForm h1{
        font-size: 20px;
    }

    .loginBtnLeft {
        position: inherit;
        top: 0px;
        width: 100%;
        left: 0px;
    } 
    .loginLogo {
        padding-top: 15% !important;
        width: 100%;
        margin-left: 0% !important;
    }
    .loginForm{
        padding-top: 5% !important;
        position: inherit;
        /* width: 80%; */
        top: 0%;
        left: 0%;
    }
    .loginForm label {
        font-size: 21px;
        border-radius: 3px;
        margin-bottom: 0px !important;
        padding: 6px 0px 6px 30px !important;
        background-color: transparent;
        border: none;
    }
    .loginLogo .btnConVPN {
        width: 40%;
        font-size: 12px;
        font-weight: 700;
        border-radius: 2px;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
        padding: 10px 0px 10px 0px !important;
        background-color: rgb(255 255 255);
        border: 1px solid rgb(255 255 255 / 50%);
        box-shadow: 0px 5px 6px 2px #00000087;
    }
    .loginForm .btnListUser {
        width: 47%;
        font-size: 11px;
        font-weight: 700;
        padding: 8px 0px 8px 5px;
    }

    /* =============== Login Screen Desgin End =============== */
        
}

    /* =============== 700 Screen Resolution =============== */

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

        /* =============== Login Screen Desgin Start =============== */
        
        .loginForm h1{
            font-size: 25px;
        }
    
        .loginBtnLeft {
            position: inherit;
            top: 0px;
            width: 100%;
            left: 0px;
        } 
        .loginLogo {
            padding-top: 15% !important;
            width: 100%;
            margin-left: 0% !important;
        }

        .loginForm{
            padding-top: 5% !important;
            position: inherit;
            /* width: 80%; */
            top: 0%;
            left: 0%;
        }
        .loginLogo .btnConVPN {
            width: 35%;
            font-size: 12px;
            font-weight: 700;
            border-radius: 2px;
            margin-right: 10px !important;
            margin-bottom: 10px !important;
            padding: 10px 0px 10px 0px !important;
            background-color: rgb(255 255 255);
            border: 1px solid rgb(255 255 255 / 50%);
            box-shadow: 0px 5px 6px 2px #00000087;
        }
        .loginForm .btnListUser {
            width: 47%;
            font-size: 12px;
            font-weight: 700;
            padding: 10px 0px 10px 5px;
        }
    
        /* =============== Login Screen Desgin End =============== */
            
}


    /* =============== 1100 Screen Resolution =============== */

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

    /* =============== Login Screen Desgin Start =============== */

    .loginForm h1{
        font-size: 28px;
    }
    
    .loginBtnLeft {
        position: inherit;
        top: 0px;
        width: 100%;
        left: 0px;
    } 
    .loginLogo {
        padding-top: 12% !important;
        width: 100%;
        margin-left: 0% !important;
    }
    .loginForm{
        padding-top: 0% !important;
        position: inherit;
        /* width: 80%; */
        top: 0%;
        left: 0%;
    }
    .loginLogo .btnConVPN {
        width: 26%;
        font-size: 13px;
        border-radius: 2px;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
        padding: 10px 0px 10px 0px !important;
        background-color: rgb(255 255 255);
        border: 3px solid rgb(255 255 255 / 50%);
        box-shadow: 0px 5px 6px 2px #00000087;
    }
    .loginForm .btnListUser {
        width: 47%;
        font-size: 13px;
        padding: 10px 0px 10px 0px;
    }

    /* =============== Login Screen Desgin End =============== */
        
}


    /* =============== 1300 Screen Resolution =============== */

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

    /* =============== Login Screen Desgin Start =============== */

    .loginForm h1{
        font-size: 32px;
    }
    
    .loginBtnLeft {
        position: inherit;
        top: 0px;
        width: 100%;
        left: 0px;
    } 
    .loginLogo {
        padding-top: 9% !important;
        width: 100%;
        margin-left: 0% !important;
    }
    .loginForm{
        padding-top: 0% !important;
        position: inherit;
        /* width: 80%; */
        top: 0%;
        left: 0%;
    }
    .loginForm label {
        font-size: 25px;
        border-radius: 3px;
        margin-bottom: 0px !important;
        padding: 13px 0px 7px 14px !important;
        background-color: transparent;
        border: none;
    }
    .loginLogo .btnConVPN {
        width: 29%;
        font-size: 15px;
        border-radius: 2px;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
        padding: 10px 10px 10px 10px !important;
        background-color: rgb(255 255 255);
        border: 3px solid rgb(255 255 255 / 50%);
        box-shadow: 0px 5px 6px 2px #00000087;
    }
    .loginForm .btnListUser {
        width: 48%;
        font-size: 15px;
        padding: 10px 10px 10px 10px;
    }
    
    /* =============== Login Screen Desgin End =============== */
        
}

    
    /* =============== 1400 Screen Resolution =============== */

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

    /* =============== Login Screen Desgin Start =============== */

    .loginForm h1{
        font-size: 34px;
    }

    .loginBtnLeft {
        position: inherit;
        top: 0px;
        width: 100%;
        left: 0px;
    } 
    .loginLogo {
        padding-top: 8% !important;
        width: 100%;
        margin-left: 0% !important;
    }
    .loginForm{
        padding-top: 0% !important;
        position: inherit;
        /* width: 80%; */
        top: 0%;
        left: 0%;
    }
    .loginForm label {
        font-size: 25px;
        border-radius: 3px;
        margin-bottom: 0px !important;
        padding: 17px 0px 14px 14px !important;
        background-color: transparent;
        border: none;
    }
    .loginLogo .btnConVPN {
        width: 29%;
        font-size: 15px;
        border-radius: 2px;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
        padding: 10px 10px 10px 10px !important;
        background-color: rgb(255 255 255);
        border: 3px solid rgb(255 255 255 / 50%);
        box-shadow: 0px 5px 6px 2px #00000087;
    }
    .loginForm .btnListUser {
        width: 48%;
        font-size: 15px;
        padding: 10px 10px 10px 10px;
    }

    /* =============== Login Screen Desgin End =============== */
        
}

    /* =============== 1600 Screen Resolution =============== */

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

    /* =============== Login Screen Desgin Start =============== */

    .loginForm h1{
        font-size: 34px;
    }

    .loginBtnLeft {
        position: inherit;
        top: 0px;
        width: 100%;
        left: 0px;
    } 
    .loginLogo {
        padding-top: 6% !important;
        width: 100%;
        margin-left: 0% !important;
    }
    .loginForm{
        padding-top: 0% !important;
        position: inherit;
        /* width: 80%; */
        top: 0%;
        left: 0%;
    }
    
    .loginLogo .btnConVPN {
        width: 29%;
        font-size: 18px;
        border-radius: 2px;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
        padding: 12px 10px 12px 10px !important;
        background-color: rgb(255 255 255);
        border: 3px solid rgb(255 255 255 / 50%);
        box-shadow: 0px 5px 6px 2px #00000087;
    }
    .loginForm .btnListUser {
        width: 48%;
        font-size: 18px;
        padding: 12px 10px 12px 10px;
    }

    /* =============== Login Screen Desgin End =============== */
        
}

    /* =============== 1800 Screen Resolution =============== */

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

    /* =============== Login Screen Desgin Start =============== */

    .loginForm h1{
        font-size: 34px;
    }

    .loginBtnLeft {
        position: inherit;
        top: 0px;
        width: 100%;
        left: 0px;
    } 
    .loginLogo {
        padding-top: 5% !important;
        width: 100%;
        margin-left: 0% !important;
    }
    .loginForm{
        padding-top: 0% !important;
        position: inherit;
        /* width: 80%; */
        top: 0%;
        left: 0%;
    }
    .loginLogo .btnConVPN {
        width: 29%;
        font-size: 19px;
        border-radius: 2px;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
        padding: 14px 10px 14px 10px !important;
        background-color: rgb(255 255 255);
        border: 3px solid rgb(255 255 255 / 50%);
        box-shadow: 0px 5px 6px 2px #00000087;
    }
    .loginForm .btnListUser {
        width: 48%;
        font-size: 19px;
        padding: 14px 10px 14px 10px;
    }

    /* =============== Login Screen Desgin End =============== */
        
}

    /* =============== 1900 Screen Resolution =============== */

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

    /* =============== Login Screen Desgin Start =============== */

    .loginForm h1{
        font-size: 34px;
    }

    .loginBtnLeft {
        position: inherit;
        top: 0px;
        width: 100%;
        left: 0px;
    } 
    .loginLogo {
        padding-top: 7% !important;
        width: 100%;
        margin-left: 0% !important;
    }
    .loginForm{
        padding-top: 0% !important;
        position: inherit;
        /* width: 80%; */
        top: 0%;
        left: 0%;
    }
    .loginLogo .btnConVPN {
        width: 30%;
        font-size: 20px;
        border-radius: 2px;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
        padding: 15px 10px 15px 10px !important;
        background-color: rgb(255 255 255);
        border: 3px solid rgb(255 255 255 / 50%);
        box-shadow: 0px 5px 6px 2px #00000087;
    }
    .loginForm .btnListUser {
        width: 48%;
        font-size: 20px;
        padding: 15px 10px 15px 10px;
    }
    /* =============== Login Screen Desgin End =============== */
    
}

    /* =============== 2100 Screen Resolution =============== */

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

    /* =============== Login Screen Desgin Start =============== */

    .loginForm h1{
        font-size: 40px;
    }

    .loginBtnLeft {
        position: inherit;
        top: 0px;
        width: 100%;
        left: 0px;
    } 
    .loginLogo {
        padding-top: 6% !important;
        width: 100%;
        margin-left: 0% !important;
    }
    .loginForm{
        padding-top: 0% !important;
        position: inherit;
        /* width: 80%; */
        top: 0%;
        left: 0%;
    }
    .loginLogo .btnConVPN {
        width: 30%;
        font-size: 23px;
        border-radius: 2px;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
        padding: 18px 10px 18px 10px !important;
        background-color: rgb(255 255 255);
        border: 3px solid rgb(255 255 255 / 50%);
        box-shadow: 0px 5px 6px 2px #00000087;
    }
    .loginForm .btnListUser {
        width: 48%;
        font-size: 23px;
        padding: 18px 10px 18px 10px;
    }
    /* =============== Login Screen Desgin End =============== */
    
}

/* =============== 2800 Screen Resolution =============== */

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

    /* =============== Login Screen Desgin Start =============== */

    .loginForm h1{
        font-size: 55px;
    }

    .loginBtnLeft {
        position: inherit;
        top: 0px;
        width: 100%;
        left: 0px;
    } 
    .loginLogo {
        padding-top: 5% !important;
        width: 100%;
        margin-left: 0% !important;
    }
    .loginForm{
        padding-top: 0% !important;
        position: inherit;
        /* width: 80%; */
        top: 0%;
        left: 0%;
    }
    .loginLogo .btnConVPN {
        width: 30%;
        font-size: 29px;
        border-radius: 2px;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
        padding: 21px 10px 21px 10px !important;
        background-color: rgb(255 255 255);
        border: 3px solid rgb(255 255 255 / 50%);
        box-shadow: 0px 5px 6px 2px #00000087;
    }
    .loginForm .btnListUser {
        width: 48%;
        font-size: 29px;
        padding: 21px 10px 21px 10px;
    }

    /* =============== Login Screen Desgin End =============== */
    
}