// >>-- 01 Variables css start --<<
:root {
    --font-color: #15264b;
    --font-title-color: #1c3264;
    --body-color: #f9f9f9;
    --bodybg-color: #f6f6f6;
    --font-secondary-color: #22242c;
    --font-light-color: #a0a0b0;
    --grid_color: rgba(144, 164, 246, 0.21);
    --border_color: rgba(0, 0, 0, 0.21);
    --primary: 140, 118, 240;
    --secondary: 100,100,100;
    --success: 20, 120, 52;
    --danger: 240,10,200;
    --warning: 215, 220, 65;
    --info : 46,94,231;
    --light: 215, 208, 200;
    --dark: 40, 38, 50;
    --white: 255,255,255;
    --black: 0, 0, 0;
    --border_color: #e0dfd6;

    --bs-danger: #f00ac8;

    --bs-dropdown-link-active-color: rgba(var(--primary), 1);
    --bs-dropdown-link-active-bg: rgba(var(--primary), 0.2);

    --primary-dark: 36, 17, 135;
    --secondary-dark: 106, 90, 100;
    --success-dark: 52, 50, 46;
    --danger-dark: 102, 15, 106;
    --warning-dark: 99, 89, 29;
    --info-dark: 8, 60, 128;
    --dark-dark:30, 29, 35;
    --dark-light:110, 70, 90;


    @mixin btn_css($name, $color) {
        .btn-#{$name}{
            --bs-btn-disabled-bg: rgba(var(--#{$color}), 0.8);
            --bs-btn-disabled-border-color: rgba(var(--#{$color}), 0.8);
        }
        .btn-outline-#{$name}{
            --bs-btn-color: rgba(var(--#{$color}), 1);
            --bs-btn-border-color: rgba(var(--#{$color}), 1);
            --bs-btn-hover-bg: rgba(var(--#{$color}), 1);
            --bs-btn-hover-border-color: rgba(var(--#{$color}), 1);
            --bs-btn-active-bg: rgba(var(--#{$color}), 1);
            --bs-btn-active-border-color: rgba(var(--#{$color}), 1);
            --bs-btn-disabled-color: rgba(var(--#{$color}), 1);
            --bs-btn-disabled-border-color: rgba(var(--#{$color}), 1);
        }
    }

    // Social media colors
    --facebook : 59, 89, 152;
    --twitter : 85, 172, 238;
    --pinterest : 189, 8, 28;
    --linkedin : 0, 119, 181;
    --reddit : 255, 69, 0;
    --whatsapp : 67, 216, 84;
    --gmail : 234, 67, 53;
    --telegram : 0, 64, 93;
    --youtube : 205, 32, 31;
    --vimeo : 26, 183, 234;
    --behance : 23, 105, 255;
    --github : 0, 64, 93;
    --skype : 0, 175, 240;
    --snapchat : 255, 250, 55;

    // --box-shadow: 0 0.20rem 2rem  var(--light-gray);
    --box-shadow: 0px 0px 21px 3px rgba(var(--secondary), 0.05);
    --hover-shadow: 0 0.5rem 2rem  var(--light-gray);
    --app-transition: all 0.3s ease;
    --light-gray: #f4f7f8;

    --p-line-height: 1.6;
    --link-color: var(--primary-color);


    //Typography
    --font-size: 14px;
    --p-font-size: 14px;
    --h1-font-size :  2.5rem;
    --h2-font-size : 2rem;
    --h3-font-size : 1.75rem;
    --h4-font-size : 1.25rem;
    --h5-font-size : 1.125rem;
    --h6-font-size : 1rem;
    --btn-font-size : 15px;
    --app-border-radius: 1.8rem;
    --bs-border-radius: 1.8rem;
    --bs-accordion-inner-border-radius: 0.5rem;

    --bottom-shadow: 0 8px 6px -5px var(--light-gray);
    --sidebar-width: 17rem;
    --semi-nav: 4.5rem;
    --font-sans: "Estedad-VF", sans-serif;
    --theme-body-font-color: #2b2b2b;
    --theme-body-sub-title-color: rgba(43, 43, 43, 0.7);
    --tabler-icons: tabler-icons;
}
.default{
    --primary: 140, 118, 240;
    --secondary: 100,100,100;
}
.gold{
    --primary: 192,127,0;
    --secondary: 76,61,61;
}
.warm{
    --primary: 255,103,125;
    --secondary: 111,90,126;
}
.happy{
    --primary: 36,114,145;
    --secondary: 129, 125, 141;
}
.nature{
    --primary: 127,180,20;
    --secondary: 82,80,80;
}
.cold{
    --primary: 3, 4, 94;
    //--secondary: 96, 114, 116;
}
.hot{
    --primary: 255,0,77;
    --secondary: 29, 43, 83;
}




nav.dark-sidebar,body.dark {
    --white: 32, 35, 53;
    --black: #DCE2F0;
    --bodybg-color: #272b3e;
    --bs-body-bg: #202335;
    --font-color: #fff;
    --box-shadow: 0 0.2rem 1rem #333644;
    --hover-shadow: 0 0.2rem 2rem #333644;
    --light-gray: #333644;
     --light: 71, 71, 96;
    --dark:  234, 234, 236;
    --link-color: #eaeaec;
    --border_color: #474a56;
    --bs-border-color: #474a56;
    --bs-card-border-color: #5B5E69;
    --bs-form-control-bg: #333644;
    --bs-body-color: #ffffff;
    --bs-secondary-color:#eaeaec;
    --bs-list-group-color:#eaeaec;
    --bs-body-color-rgb:#eaeaec;
    --bs-text-opacity: 0;
    --bs-card-color:#eaeaec;
    --bs-tertiary-bg: #242425;

    --primary-dark: 160, 148, 226;
    --secondary-dark:152, 137, 146;
    --success-dark: 148, 143, 135;
    --danger-dark: 208, 181, 200;
    --warning-dark: 198, 193, 167;
    --info-dark:157, 186, 224;
    --dark-dark:179, 176, 193;
    .disabled>.page-link, .page-link.disabled {
        color:#eaeaec;
        background-color: #333644;
        border-color: #474a56;
    }

}
body{
    &[text='small-text']{
        --font-size: 13px;
        --p-font-size: 13px;
        --h1-font-size :  2rem;
        --h2-font-size : 1.75rem;
        --h3-font-size : 1.25rem;
        --h4-font-size : 1.125rem;
        --h5-font-size : 1rem;
        --h6-font-size : 15px;
        --btn-font-size : 13px;
    }
    &[text='medium-text']{
        --font-size: 14px;
        --p-font-size: 14px;
        --h1-font-size :  2.81rem;
        --h2-font-size : 2.18rem;
        --h3-font-size : 1.875rem;
        --h4-font-size : 1.625rem;
        --h5-font-size : 1.25rem;
        --h6-font-size : 1rem;
        --btn-font-size : 15px;
    }
    &[text='large-text']{
        --font-size: 16px;
        --p-font-size: 16px;
        --h1-font-size :  2.75rem;
        --h2-font-size : 2.5rem;
        --h3-font-size : 2rem;
        --h4-font-size : 1.75rem;
        --h5-font-size : 1.25rem;
        --h6-font-size : 1.125rem;
        --btn-font-size : 17px;
    }
}
// >>-- 01 Variables css start --<<