/*************************************
  Hello Admin Console - Login MODAL
**************************************/


html[data-theme='light'] {
    --hac-modal-header: rgb(36,154,254);
}

html[data-theme='dark'] {
    --hac-modal-header: rgb(36,154,254);
}

.hac_modal-logo {
    width: 200px;
    margin: 10px auto;
    fill: dodgerblue;
}

.hac_modal-close {
    padding: 0 !important;
    margin: 0 !important;
}

.hac_modal-header {
    border-bottom: none;
    position: relative;
}

    .hac_modal-header::after {
        content: "";
        position: absolute;
        height: 1px;
        background: rgba(211,211,211, .3);
        width: 85%;
        bottom: 0;
        transform: translateX(5%);
    }

.login-modal_content > .modal-body{
    margin: 0 40px;
}


.hac_modal-title {
    text-align: center;
    margin-bottom: 35px;
}

.hac_modal-title_mobile {
    display: none;
}

.hac_modal-input {
    background: transparent;
    border: none;
    filter: none;
}

    .hac_modal-input:focus {
        box-shadow: none;
        background: transparent;
    }

.hac_input-login {
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,.2);
    display: flex;
}

    .hac_input-login::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background: rgba(255,255,255,.7);
        bottom: -1px;
        transform: scaleX(0);
        transition: transform .4s ease-in;
    }

    .hac_input-login:focus-within::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    .hac_input-login > svg {
        width: 20px;
    }

.hac_modal-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px var(--console-items-bg) inset;
    box-shadow: 0 0 0px 1000px var(--console-items-bg) inset;
    -webkit-text-fill-color: black !important;
}

.hac_modal-title,
.hac_modal-forgot_password {
    color: var(--hac-modal-header);
    opacity: .7;
}


    .hac_modal-input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px var(--console-modal-bg) inset;
        -webkit-text-fill-color: var(--console-text-color) !important;
    }

.hac_modal-label {
    color: gray;
}

.hac_modal-forgot_password {
    font-weight: 500;
    font-style: italic;
    font-size: 13px;
    position: absolute;
    right: 15px;
}

.hac_modal-login_btn {
    display: flex;
    justify-content: center;
    width: 100%;
    text-transform: uppercase;
    color: white;
    background: var(--hac-modal-header);
    padding: 10px;
    margin: 45px 0 20px !important;
    opacity: .7;
}

    .hac_modal-login_btn:hover {
        color: lightgray;
    }

    .hac_modal-login_btn:hover.hac_modal-login_btn > svg{
        transform: translateX(5px);
        transition: transform .3s ease-in-out;
    }

    .hac_modal-login_btn > svg {
        fill: white;
        width: 13px;
        margin-left: 10px;
    }


    /*******************************
        HAC MODAL COSTUM CHECKBOX
    *******************************/

.hac_modal-chckbox_container {
    display: flex;
}

.hac_modal-chckbox {
    display: none;
}

.hac_modal-chckbox_label {
    font-size: 16px;
    cursor: pointer;
    padding-left: 20px;
    position: relative;
    display: flex;
    align-items: center;
    color: gray;
}

/* Checkbox circle */
.hac_modal-chckbox_btn {
    height: 14px;
    width: 14px;
    border: 2px solid var(--hac-modal-header);
    display: inline-block;
    position: absolute;
    left: 0;
}

    /* Checkbox inner circle */
    .hac_modal-chckbox_btn::after {
        content: "";
        display: block;
        height: 6px;
        width: 6px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: var(--hac-modal-header);
        opacity: 0;
        transition: opacity .2s;
    }

/* If Checkbox is checked show inner circle */
.hac_modal-chckbox:checked ~ .hac_modal-chckbox_label .hac_modal-chckbox_btn::after {
    opacity: 1;
}


.password-cls,
.email-cls {
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
}



@media (max-width: 768px) {
    .hac_modal-header {
        border-radius: 0;
        display: none;
    }


    .hac_modal-title_mobile {
        display: block;
        margin: 25px 0 30px;
        color: var(--console-titles);
    }

        .hac_modal-title_mobile > h1 {
            font-size: 40px;
            font-weight: 400;
        }

        .hac_modal-title_mobile > p {
            margin-top: 7px;
            font-size: 16px;
            font-weight: 500;
        }

    .hac_modal-title {
        display: none;
    }

    .hac_modal-forgot_password{
        font-style:normal;
        font-size: 16px;
        margin-top: 10px;
    }
    .hac_modal-chckbox_container{
        margin-top: 50px;
    }

    .hac_navbar_collapse {
        position: absolute;
        top: 50px;
        left: 0px;
        z-index: 99999;
        width: 100%;
        background: orange;
    }

    #loginModal {
        display: block;
        position: static;
        width: 100%;
        padding: 0;
    }

        #loginModal > div {
            margin: 0;
            max-width: 100% !important;
        }

    .hac_modal-content {
        height: 100vh;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border: none;
    }

    .hac_modal-body {
        margin: 10px;
    }

    .modal-backdrop {
        display: none;
    }

    .modal-dialog {
        margin: 0;
    }

    .console-front {
        display: none;
    }
}