@font-face {
    font-family: 'Gotham';
    src: url('/Content/fonts/GOTHAM-PRO-REGULAR-58F76FD72C959.OTF') format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: 'Gotham';
    src: url('/Content/fonts/GOTHAM-PRO-MEDIUM-58F77063AB32C.OTF') format('opentype');
    font-weight: 500;
}

@font-face {
    font-family: 'Gotham';
    src: url('/Content/fonts/GOTHAM-PRO-BOLD-58F76F46C982B.OTF') format('opentype');
    font-weight: 700;
}

:root {
    --uthgra-blue: #4e5381;
    --uthgra-cyan: #0090cc;
    --uthgra-gray: #5b5b5f;
    --uthgra-white: #ffffff;
}

body,
input,
button,
textarea,
select,
a,
label {
    font-family: 'Gotham', Arial, sans-serif !important;
}

body {
    color: var(--uthgra-gray);
}

.container-login100 {
    background: linear-gradient(135deg, rgba(78, 83, 129, 0.15), rgba(0, 144, 204, 0.10)) !important;
    position: relative;
    overflow: hidden;
}

.wrap-login100 {
    position: relative;
    z-index: 10;
}

.wrap-login100 {
    background: rgba(255, 255, 255, 0.96) !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 45px rgba(78, 83, 129, 0.30) !important;
    padding-top: 42px !important;
}

/*logiin image*/
.login-background {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient( rgba(255,255,255,.35), rgba(255,255,255,.35) ), url('/login/images/uthgra-background-modern.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
/*fin*/

.login-brand-logo {
    display: block;
    max-width: 285px;
    width: 82%;
    margin: 0 auto 18px auto;
}

.login100-form-title {
    color: var(--uthgra-blue) !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px;
    margin-bottom: 20px !important;
}

#loop-text {
    height: 32px;
}

    #loop-text li {
        font-weight: 700;
        text-transform: uppercase;
    }

.wrap-input100 {
    border-bottom: 2px solid rgba(78, 83, 129, 0.28) !important;
    margin-bottom: 28px !important;
}

.input100 {
    color: var(--uthgra-gray) !important;
    font-weight: 400 !important;
}

    .input100::placeholder {
        color: rgba(91, 91, 95, 0.65) !important;
    }

.focus-input100::before {
    background: var(--uthgra-cyan) !important;
}

.focus-input100::after {
    color: var(--uthgra-blue) !important;
}

.login100-form-btn {
    background: linear-gradient(135deg, var(--uthgra-blue), var(--uthgra-cyan)) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border: none !important;
    min-width: 180px !important;
    height: 48px !important;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 18px rgba(0, 144, 204, 0.28);
    position: relative !important;
    z-index: 2 !important;
}

    .login100-form-btn span {
        color: #fff !important;
        position: relative;
        z-index: 3;
    }

    .login100-form-btn:before {
        opacity: 0 !important;
    }

    .login100-form-btn:hover {
        background: linear-gradient(135deg, var(--uthgra-cyan), var(--uthgra-blue)) !important;
        transform: translateY(-1px);
    }

.txt1 {
    color: var(--uthgra-blue) !important;
    font-weight: 500;
}

    .txt1:hover {
        color: var(--uthgra-cyan) !important;
    }

.labelError {
    color: #a32222 !important;
}

.labelSuccess {
    color: #2b7a3d !important;
}

.uthgra-modal-content {
    background: var(--uthgra-white) !important;
    border-radius: 18px;
    border: 0;
    box-shadow: 0 18px 40px rgba(78, 83, 129, 0.28);
}

    .uthgra-modal-content .modal-header {
        background: linear-gradient(135deg, var(--uthgra-blue), var(--uthgra-cyan));
        color: var(--uthgra-white);
        border-radius: 18px 18px 0 0;
    }

    .uthgra-modal-content .modal-title {
        color: var(--uthgra-white) !important;
        font-weight: 700;
    }

    .uthgra-modal-content .close {
        color: #fff;
        opacity: 1;
    }

    .uthgra-modal-content .form-control {
        border-radius: 10px;
        border: 1px solid rgba(78, 83, 129, 0.25);
    }

    .uthgra-modal-content .btn-primary {
        background-color: var(--uthgra-blue);
        border-color: var(--uthgra-blue);
    }

        .uthgra-modal-content .btn-primary:hover {
            background-color: var(--uthgra-cyan);
            border-color: var(--uthgra-cyan);
        }
.container-login100::before {
    display: none !important;
    content: none !important;
}