@import url('../vendors/libs/fonts/GoogleFonts/Outfit/outfit.css');
@import url('../vendors/libs/fonts/GoogleFonts/Montserrat/montserrat.css');

:root {

    --theme-deafult:            #FC7A03;
    --theme-secondary:          #48A3D7;
    --light-background:         rgba(242, 243, 247, 0.7);
    --body-font-color:          #2F2F3B;
    --chart-border:             #ECF3FA;
    --recent-chart-bg:          #FCFCFD;
    --light-bg:                 #EEF1F6;
    --white:                    #fff;
    --light2:                   #F5F6F9;
    --sidebar-border:           rgba(0, 0, 0, 0.1);
    --chart-text-color:         rgba(82, 82, 108, 0.8);
    --recent-dashed-border:     rgba(82, 82, 108, 0.3);
    --chart-dashed-border:      rgba(82, 82, 108, 0.2);
    --chart-progress-light:     rgba(82, 82, 108, 0.1);
    --recent-box-bg:            #F2F4F7;
    --recent-border:            rgba(97, 101, 122, 0.25);
    --course-light-btn:         #F2F3F7;
    --course-bg:                #F7F7F7;
    --balance-profie-bg:        #E0DFEF;
    --view-grid-bg:             #ECF3FA80;
    --view-border-marker:       #cfcdfc;
    --light-slate:              #F5F6F9;
    --text-gray:                rgba(82, 82, 108, 0.8);
    --product-shadow:           0px 1px 0px rgba(82, 82, 108, 0.15);
    --light-shade-primary:      rgba(245, 244, 255);

    --fc-button-bg-color:               var(--theme-deafult);
    --fc-button-active-bg-color:        var(--theme-deafult);
    --fc-button-active-border-color:    var(--theme-deafult);
    --fc-button-border-color:           var(--theme-deafult);
    --fc-button-hover-bg-color:         var(--theme-deafult);
    --fc-button-hover-border-color:     var(--theme-deafult);

    --bs-heading-color:         #3D434A;
    /* --bs-body-color:         #6A7185;*/
    --bs-secondary-color:       rgba(33, 37, 41, 0.75);

    /* RATING  */
    --normal:                   #ECEAF3;
    --normal-shadow:            #D9D8E3;
    --normal-mouth:             #9795A4;
    --normal-eye:               #595861;
    --active:                   #F8DA69;
    --active-shadow:            #F4B555;
    --active-mouth:             #F05136;
    --active-eye:               #313036;
    --active-tear:              #76b5e7;
    --active-shadow-angry:      #E94F1D;

    --radio-inputs-border-radius: 0.5rem;

    /* Tagify */
    .customLook {
        --tag-bg:                   var(--theme-deafult);
        --tag-hover:                var(--theme-secondary);
        --tag-text-color:           var(--white);
        --tags-border-color:        silver;
        --tag-border-radius:        25px;
        --tag-text-color--edit:     #111;
        --tag-remove-bg:            var(--tag-hover);
        --tag-pad:                  .6em 1em;
        --tag-inset-shadow-size:    1.35em;
        --tag-remove-btn-bg--hover: #000;
        --tagify-dd-color-primary:  var(var(--theme-deafult));
        --tagify-dd-bg-color:       var(--course-light-btn);
    }

}

body {
    font-size: 14px;
    overflow-x: hidden;
    font-family: "Outfit", sans-serif, sans-serif;
    color: #3D434A;
    background-color: #F4F7F9;
}

.hide {
    display: none;
}

.pace .pace-progress {
    background: var(--theme-deafult);
}

.text-muted {
    --bs-text-opacity: 1;
    color: var(--bs-secondary-color) !important;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

h4 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.6px;
}

h6 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.6px;
}

input {
    cursor: pointer;
}

    [type=radio], 
    [type=checkbox] { 
        box-sizing: border-box;
        padding: 0;
    }

    .checkbox input[type=checkbox] {
        opacity: 0;
    }

.btn {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3rem;
    padding: 0.375rem 1.75rem;
}

.btn-primary {
    background-color: var(--theme-deafult) !important;
    border-color: var(--theme-deafult) !important;
}

.btn-outline-light {
    --tw-text-opacity: 1;
    --tw-border-opacity: 1;
    border-width: 1px;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
    background-color: transparent;
    color: rgb(17 24 39 / var(--tw-text-opacity));
}

    .btn-login img {
        --btn-login-img-size: 1.25rem;
        height: var(--btn-login-img-size);
        width: var(--btn-login-img-size);
        margin-right: 3px;
    }

    .social>div:not(:last-child) {
        margin-right: 15px; 
    }

.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .form-control {
        border: 1px dashed rgba(106, 113, 133, 0.3);
    }

        .theme-form select, 
        .theme-form textarea, 
        .theme-form input[type=url], 
        .theme-form input[type=tel], 
        .theme-form input[type=text], 
        .theme-form input[type=date], 
        .theme-form input[type=time], 
        .theme-form input[type=week], 
        .theme-form input[type=file], 
        .theme-form input[type=email], 
        .theme-form input[type=month], 
        .theme-form input[type=search], 
        .theme-form input[type=number], 
        .theme-form input[type=password], 
        .theme-form input[type=datetime-local], 
        .theme-form input[type=datetime-local] {
            border-color: rgba(106, 113, 133, 0.3);
            border-style: solid;
            background-color: #fff;
            font-size: 14px;
            color: #898989;
            padding: 12px 10px;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

.checkbox label {
    display: inline-block;
    position: relative;
    padding-left: 16px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .theme-form .checkbox label {
        padding-left: 10px;
    }

        .checkbox label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 19px;
            height: 19px;
            left: 0;
            margin-left: -16px;
            border: 1px solid #EFEFEF;
            border-radius: 3px;
            background-color: #FFF;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        }

            .login-card .login-main .theme-form .checkbox label::before {
                background-color: #F9F9FA;
                border: 1px dashed #DFDFDF;
            }

        .checkbox input[type=checkbox]:checked + label::before {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            text-align: center;
            line-height: 1.2;
        }

    .login-card .login-main .theme-form label {
        font-size: 15px;
        letter-spacing: 0.4px;
    }

    .login-card .login-main .theme-form label {
        font-size: 14px;
    }

.col-form-label {
    padding-bottom: 4px;
}

body .logo .for-light {
    display: block;
}
body .logo .for-dark {
    display: none;
}

.login-card {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    background: url("../img/login_bg-gray.jpg");
    background-position: center;
    padding: 30px 12px;
}

    .login-card .logo {
        display: block;
        grid-gap: 10px;
        margin-bottom: 30px;
        text-align: center;
        text-decoration: none;
    }

        .login-card .logo img {
            margin: 0 auto;
        }

        .login-card .logo h3 {
            font-family: "Montserrat", sans-serif;
            font-size: 1.82rem;
            font-weight: 500;
        }

    .login-card .login-main {
        background-color: #FFF;
        border-radius: 10px;
        box-shadow: 0 0 37px rgba(8, 21, 66, 0.05);
        -webkit-box-shadow: 0 0 37px rgba(8, 21, 66, 0.05);
        filter: opacity(1);
        margin: 0 auto;
        padding: 40px;
        width: 450px;
    }

    .alert.alert-warning.alert-dismissible > div > div {
        margin-bottom: 5px;
    }

        .alert.alert-warning.alert-dismissible > div > div i {
            font-size: 1.4rem;
            margin-right: 5px;
        }
    
    .login-card .login-main .theme-form .form-group {
        margin-bottom: 10px;
        position: relative;
    }

    .login-card .login-main .theme-form label {
        font-size: 15px;
        letter-spacing: 0.4px;
    }

    .login-card .login-main .theme-form label {
        font-size: 14px;
    }

    .login-card .login-main .theme-form input {
        background-color: #F3F3FF;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        /*border-color: var(--theme-deafult) !important;*/
    }

    .login-card .login-main .theme-form .or {
        position: relative;
    }

        .login-card .login-main .theme-form .or:before {
            content: "";
            position: absolute;
            width: 65%;
            height: 2px;
            background-color: #f3f3ff;
            top: 9px;
            z-index: 0;
            right: 0;
        }

.radio-inputs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    border-radius: var(--radio-inputs-border-radius);
    background-color: #FAFAFC;
    box-sizing: border-box;
    box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
    padding: 0.25rem;
    width: 300px;
}

    .login-card .login-main .theme-form .radio-inputs label {
        font-size: .85rem;
    }

    .radio-inputs .radio {
        flex: 1 1 auto;
        text-align: center;
    }

    .radio-inputs .radio input {
        display: none;
    }

    .radio-inputs .radio .name {
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        border-radius: var(--radio-inputs-border-radius);
        border: none;
        padding: .3rem 0;
        transition: all .15s ease-in-out;
    }

        .radio-inputs .radio .name .fi {
            margin-right: 5px;
        }

    .radio-inputs .radio input + .name {
        filter: opacity(0.3) grayscale(1);
        cursor: default;
    }

    .radio-inputs .radio input:checked + .name {
        background-color: #fff;
        cursor: pointer;
        filter: opacity(1) grayscale(0);
        font-weight: 600;
    }

    .theme-form #toggle_pwd {
        color: #7A7A7A;
        padding: 10px;
        position: absolute;
        right: 10px;
        width: 37px;
        top: 6px;
        display: flex;
    }

    .theme-form .alert {
        background-color: #F52A2A;
        border: 0;
        border-radius: 0.256rem;
        padding: 0.6rem 0.8rem;
    }

        .theme-form .alert, 
        .theme-form .alert h4 {
            color: #FFF;
        }

        .theme-form .alert .btn.close {
            border-radius: 20px;
            box-shadow: 0px 0px 14px -5px rgba(0 0 0 / 80%);
            font-size: 1.0rem;
            font-weight: 400;
            line-height: 1.3rem;
            margin: -35px 0 0 -5px;
            padding: 0.1rem 0.5rem;
            position: absolute;
        }

            .theme-form .alert ul {
                margin: 5px auto 0;
                width: 90%;
            }

            .theme-form .alert ul li i {
                margin: 0 5px 0 0;
            }