@font-face {
    font-family: 'Cairo-Regular';
    src: url('/fonts/Cairo-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Cairo-Bold';
    src: url('/fonts/Cairo-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'ReemKufiInk-Regular';
    src: url('/fonts/ReemKufiInk-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Tajawal-Regular';
    src: url('/fonts/Tajawal-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Tajawal-Bold';
    src: url('/fonts/Tajawal-Bold.ttf') format('truetype');
}

* {
    box-sizing: border-box;
    font-family: Cairo-Regular, sans-serif;
}

div {
    user-select: none;
}

:root {
    --forecolor1: #2c4f6b;
    --forecolor2: var(--forecolor1);
    --bcolor1: #2071ad;
    --lblbackground: #15202c;
    --lblcolor: #ff6a00;
    --hovercolor: #ff6a00;
}

::placeholder {
    font-size: 0.87em;
}

body {
    margin: 0;
    background-color: white;
    font-size: clamp(2px, 1.2vw, 40px);
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

    body::-webkit-scrollbar {
        width: .75em;
        background: #15202c;
    }

    body::-webkit-scrollbar-thumb {
        background-color: #46abf6;
        border-radius: 20%;
    }

.Userlogin-Container {
    width: 32%;
    text-align: center;
    margin: 5em auto 0;
    padding: 2em 1em;
    border-radius: 1.5em;
    box-shadow: 0 4px 10px #999;
}

.UserLogin-login-card {
    max-width: 95%;
    margin: auto;
}

.UserLogin-logo {
    width: 10em;
}

.UserLogin-login-card p {
    margin: .3em;
}

.UserLogin-login-card h2 {
    margin: 0;
    font-size: 1.5em;
    color: #003d66;
    margin-bottom: 1em;
}

.UserLogin-form-group {
    position: relative;
    margin-bottom: 1em;
    text-align: right;
}

    .UserLogin-form-group i {
        position: absolute;
        left: 1em;
        top: 50%;
        transform: translateY(-50%);
        color: #003d66;
    }

    .UserLogin-form-group input {
        width: 100%;
        padding: 0.7em 1em 0.7em 2.5em;
        border: 0.0625em solid #ccc; /* 1px */
        border-radius: 0.5em;
        font-size: 1em;
        text-align: center;
        transition: border 0.3s;
    }

        .UserLogin-form-group input:focus {
            border-color: #007bff;
            outline: none;
        }

.UserLogin-login-btn {
    display: block;
    text-decoration: none;
    /*    width: 100%;*/
    background: linear-gradient(to right,#1f84cf, #2c4f6b, #204972);
    color: white;
    padding: 0.9em;
    /*border: none;*/
    border-radius: 0.5em;
    font-size: 1.1em;
    font-weight: bold;
    transition: background 0.5s ease;
    margin-top: 1em;
}

    .UserLogin-login-btn:hover {
        background-position: right center;
        background-image: linear-gradient(to right, #1f84cf, #007bff, #2c4f6b);
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0,0,0,0.3);
    }

    .UserLogin-login-btn:active {
        transform: scale(0.98);
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        transition: transform 0.05s ease;
    }

.UserLogin-extras {
    font-size: 0.9em;
    color: #555;
    margin-top: .5em;
}

    .UserLogin-extras a {
        color: #003d66;
        font-weight: bold;
        text-decoration: none;
    }

.UserLogin-support {
    margin-top: 1em;
    font-size: 0.85em;
    background: #f1f1f1;
    padding: 0.8em;
    border-radius: 0.5em;
    color: #333;
}

    .UserLogin-support i {
        margin-left: 0.3em;
        color: #007bff;
    }

@media (max-width: 800px) {
    body {
        font-size: 20px;
    }

    .Userlogin-Container {
        width: 62%;
    }
}