/*
 * Media Kit Template.
 */

.layout-media_login .logo-item .img-container {
    aspect-ratio: 170 / 98;
    background: var(--color-white);
    border-radius: 8px;
}
.layout-media_login .logo-item .img-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: 110px;
    max-height: 50px;
    object-fit: contain;
    object-position: center;
    will-change: transform;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease-in-out;
}
.layout-media_login .logo-item:hover .img-container img {
    transform: translate(-50%, -50%) scale(1.05);
}
@media (min-width: 768px) {
    .layout-media_login .logo-item .img-container {
        aspect-ratio: 164 / 94;
    }
    .layout-media_login .logo-item .img-container img {
        max-width: 130px;
        max-height: 45px;
    }
}
@media (min-width: 992px) {
    .layout-media_login .logo-item .img-container {
        aspect-ratio: 164 / 94;
    }
    .layout-media_login .logo-item .img-container img {
        max-width: 130px;
        max-height: 54px;
    }
}
@media (min-width: 1200px) {
    .layout-media_login .logo-item .img-container {
        aspect-ratio: 416 / 200;
    }
    .layout-media_login .logo-item .img-container img {
        max-width: 240px;
        max-height: 80px;
    }
}
/* Feedback Messages */
.layout-media_login .login-feedback {
    margin-top: 15px;
    padding: 12px 15px;
    border-radius: 6px;
    display: none;
    font-size: 14px;
    line-height: 1.4;
    animation: fadeIn 0.5s ease-in-out;
}
.layout-media_login .login-feedback.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.layout-media_login .login-feedback.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.layout-media_login .login-feedback.loading {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Form Disabled State */
.layout-media_login .login-form-disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Form Styles */
#LoginForm, #ForgotPasswordForm {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#LoginForm.active, #ForgotPasswordForm.active {
    opacity: 1;
    visibility: visible;
}
#ForgotPasswordForm {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
#LoginForm .form-control, #ForgotPasswordForm .form-control {
    background: var(--color-white-60);
    border: none;
    box-shadow: none !important;
    color: var(--color-blue) !important;
    padding: 20px;
    transition: background-color 0.2s ease;
}
#LoginForm .form-control, #ForgotPasswordForm .form-control[type="password"] {
    padding: 20px 50px 20px 20px;
}
#LoginForm .form-control:focus, #ForgotPasswordForm .form-control:focus {
    background: var(--color-white);
    color: var(--color-blue);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--color-blue) !important; /* your text color */
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important; /* background color */
    box-shadow: 0 0 0px 1000px #fff inset !important;
    caret-color: var(--color-blue) !important; /* caret matches your text */
    transition: background-color 5000s ease-in-out 0s; /* prevent flash */
}
@media (min-width: 768px) {
    #LoginForm .form-control, #ForgotPasswordForm .form-control {
        padding: 30px;
    }
    #LoginForm .form-control, #ForgotPasswordForm .form-control[type="password"] {
        padding: 30px 60px 30px 30px;
    }
}
/* Remember Me Checkbox */
.layout-media_login .form-check {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0;
    margin: 0;
}

.layout-media_login .form-check-input {
    width: 40px;
    height: 40px;
    border: none !important;
    border-radius: 50%;
    /* background: var(--color-white-20) url("data:image/svg+xml,%3Csvg width='20' height='14' viewBox='0 0 20 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.3' d='M18.36 0L6.71 11.64L1.65 6.58L0.5 7.79L6.71 14L19.44 1.28L19.5 1.21L18.36 0Z' fill='white'/%3E%3C/svg%3E") no-repeat center / 19px; */
    background: var(--color-white) center;
    margin: 0;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

.layout-media_login .form-check-input:checked {
    background: var(--color-orange) url("data:image/svg+xml,%3Csvg width='20' height='14' viewBox='0 0 20 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='1' d='M18.36 0L6.71 11.64L1.65 6.58L0.5 7.79L6.71 14L19.44 1.28L19.5 1.21L18.36 0Z' fill='white'/%3E%3C/svg%3E") no-repeat center / 19px;
}

.layout-media_login .form-check-input:focus {
    box-shadow: 0 0 0 2px rgba(21, 21, 119, 0.2);
    border-color: var(--color-blue);
}

.layout-media_login .form-check-label {
    margin: 0;
    cursor: pointer;
    user-select: none;
}
@media (min-width: 768px) {
    .layout-media_login .form-check-input {
        width: 50px;
        height: 50px;
    }
}
/* Buttons */
.layout-media_login .btn-link {
    color: var(--color-blue);
    text-decoration: underline !important;
    border: none;
    background: none;
    padding: 0;
    font-size: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.layout-media_login .btn-link:hover {
    opacity: 0.8;
    color: var(--color-blue);
}

@media(max-width: 767px) {
    .layout-media_login .btn-main {
        width: 100%;
    }
    #mediaKitDropdown {
        width: 100%;
    }
}
/* Form Titles */
.layout-media_login .form-title h5 {
    margin-bottom: 8px;
}

.layout-media_login .form-title p {
    margin-bottom: 0;
}

/* Password Toggle Button */
#LoginForm .btn-password-toggle, #ForgotPasswordForm .btn-password-toggle {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: url("data:image/svg+xml,%3Csvg width='19' height='10' viewBox='0 0 19 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5 0.731915L16.961 0L16.5954 0.765957C15.4561 3.15745 13.696 4.83404 11.6639 5.53192L11.4939 5.58298C10.8477 5.78723 10.1845 5.89787 9.50425 5.89787C6.58786 5.89787 3.93505 3.97447 2.40458 0.765957L2.03897 0L0.5 0.731915L0.865612 1.49787C1.37577 2.57021 2.00496 3.5234 2.71068 4.34043L0.831601 6.22128L2.03047 7.42128L3.92655 5.5234C4.69178 6.15319 5.52504 6.65532 6.40931 7.00426L5.67808 9.5234L7.31058 10L8.0418 7.46383C8.51795 7.54894 9.0026 7.59149 9.49575 7.59149C9.96339 7.59149 10.431 7.54894 10.8817 7.47234L11.6129 9.99149L13.2454 9.51489L12.5227 7.01277C13.4154 6.67234 14.2572 6.17872 15.0309 5.54043L16.893 7.40426L18.0919 6.20426L16.2468 4.35745C16.9695 3.53191 17.6072 2.57021 18.1259 1.48085L18.4915 0.714894L18.5 0.731915Z' fill='%23151577'/%3E%3C/svg%3E") no-repeat center / 80% 80%;
    display: inline-block;
    width: 24px;
    height: 24px;
    right: 16px;
    aspect-ratio: 1 / 1;
}

#LoginForm .btn-password-toggle.active, #ForgotPasswordForm .btn-password-toggle.active {
    /* background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.5 17.5'%3E%3Cpath d='M23.42,8.41c-.17-.34-4.29-8.41-11.67-8.41S.25,8.07,.08,8.41c-.1,.21-.1,.46,0,.67,.17,.34,4.29,8.41,11.67,8.41s11.5-8.07,11.67-8.41c.11-.21,.11-.46,0-.67Zm-11.67,7.59c-5.66,0-9.31-5.78-10.15-7.25C2.44,7.28,6.08,1.5,11.75,1.5s9.31,5.78,10.15,7.25c-.83,1.47-4.48,7.25-10.15,7.25Z' fill='%23151577'/%3E%3Cpath d='M11.75,5c-2.07,0-3.75,1.68-3.75,3.75s1.68,3.75,3.75,3.75,3.75-1.68,3.75-3.75-1.68-3.75-3.75-3.75Zm0,6c-1.24,0-2.25-1.01-2.25-2.25s1.01-2.25,2.25-2.25,2.25,1.01,2.25,2.25-1.01,2.25-2.25,2.25Z' fill='%23151577'/%3E%3C/svg%3E") no-repeat center / 80% 80%; */
    background: url("data:image/svg+xml,%3Csvg width='20' height='17' viewBox='0 0 20 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_22_6557)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0C14.14 0 17.85 2.9 19.94 7.76C20.02 7.95 20.02 8.16 19.94 8.35C17.86 13.2 14.14 16.1 10 16.11C5.86 16.11 2.15 13.21 0.06 8.35C-0.02 8.16 -0.02 7.95 0.06 7.76C2.15 2.9 5.86 0 10 0ZM10 1.5C6.56 1.5 3.43 3.94 1.57 8.05C3.43 12.16 6.56 14.6 10 14.6C13.44 14.6 16.57 12.16 18.43 8.05C16.57 3.94 13.44 1.5 10 1.5ZM10 4.14C12.16 4.14 13.91 5.89 13.91 8.05C13.91 10.21 12.15 11.96 10 11.96C7.85 11.96 6.09 10.21 6.09 8.05C6.09 5.89 7.84 4.14 10 4.14ZM10 5.64C8.67 5.64 7.59 6.72 7.59 8.05C7.59 9.38 8.67 10.46 10 10.46C11.33 10.46 12.41 9.38 12.41 8.05C12.41 6.72 11.33 5.64 10 5.64Z' fill='%23151577'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_22_6557'%3E%3Crect width='20' height='16.1' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center / 80% 80%;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (min-width: 768px) {
    #LoginForm .btn-password-toggle, #ForgotPasswordForm .btn-password-toggle {
        right: 20px;
    }
    .layout-media_login .d-flex.justify-content-between {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start !important;
    }
    .layout-media_login .form-title p {
        font-size: 14px;
    }
}
@media (min-width: 1200px) {
    #LoginForm .btn-password-toggle, #ForgotPasswordForm .btn-password-toggle {
        right: 30px;
        width: 26px;
        height: 26px;
    }
}