/* Google Fonts Nunito */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Google Fonts Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Bootstrap font icons */
/* @font-face {
    font-family: "bootstrap-icons";
    src: url("./fonts/bootstrap-icons.woff2?48804dbfe98a9c8a08858a0de0b0e3db") format("woff2"),
        url("./fonts/bootstrap-icons.woff?48804dbfe98a9c8a08858a0de0b0e3db") format("woff");
} */

/* Variable CSS */
:root {

    --header-height: 3rem;
    --nav-width: 68px;

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    * Font and typography
    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

    /* icon Bootstrap */
    --icon-bootstrap: "bootstrap-icons";

    /* Headline */
    --headline-1-font-size: 40px;
    --headline-1-font-line-height: 40px;

    --headline-2-font-size: 32px;
    --headline-2-font-line-height: 44px;

    --headline-3-font-size: 28px;
    --headline-3-font-line-height: 38px;

    --headline-4-font-size: 24px;
    --headline-4-font-line-height: 32px;

    --headline-5-font-size: 20px;
    --headline-5-font-line-height: 28px;

    --headline-6-font-size: 16px;
    --headline-6-font-line-height: 22px;

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    * Body
    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

    --body-font: 'Nunito', sans-serif;
    --normal-font-size: 1rem;

    --font-weight-bold: 700;
    --font-weight-medium: 500;
    --font-weight-regular: 400;

    --double-extra-large-text-medium-font-size: 20px;
    --double-extra-large-text-medium-font-line-height: 130%;

    --extra-large-text-medium-font-size: 18px;
    --extra-large-text-medium-font-line-height: 145%;

    --large-text-medium-font-size: 16px;
    --large-text-medium-font-line-height: 140%;


    --text-medium-font-size: 14px;
    --text-medium-font-line-height-text-medium: 145%;
    --text-medium-font-line-height-text-regular: 180%;

    --small-text-medium-font-size: 12px;
    --small-text-medium-font-line-height: 150%;

    --extra-small-text-medium-font-size: 10px;
    --extra-small-text-medium-font-line-height: 160%;



    /* z index */
    --z-fixed: 100;

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    * Colors
    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

    /* Primary Color */
    --primary-50: #E7E2FF;
    --primary-100: #E4DEFF;
    --primary-200: #B4A3F9;
    --primary-300: #886CFF;
    --primary-400: #624AFF;
    --primary-500: #551CFF;
    --primary-600: #4518F9;
    --primary-700: #3B14DA;
    --primary-800: #3411C0;
    --primary-900: #2D129B;

    /* Secondary Color */
    --secondary-50: #F7FAFC;
    --secondary-100: #EDF2F7;
    --secondary-200: #E2E8F0;
    --secondary-300: #CBD5E0;
    --secondary-400: #A0AEC0;
    --secondary-500: #718096;
    --secondary-600: #4A5568;
    --secondary-700: #1F2733;
    --secondary-800: #1A202C;
    --secondary-900: #171923;

    /* Success Color */
    --success-50: #f0fdf4;
    --success-100: #dcfce7;
    --success-200: #bbf7d0;
    --success-300: #86efac;
    --success-400: #4ade80;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;
    --success-800: #166534;
    --success-900: #14532d;

    /* Danger Color */
    --danger-50: #FFF5F5;
    --danger-100: #FED7D7;
    --danger-200: #FED7D7;
    --danger-300: #FC8181;
    --danger-400: #F56565;
    --danger-500: #E53E3E;
    --danger-600: #C53030;
    --danger-700: #9B2C2C;
    --danger-800: #822727;
    --danger-900: #63171B;


    /* Warning Color */
    --warning-50: #FFFFF0;
    --warning-100: #FEFCBF;
    --warning-200: #FAF089;
    --warning-300: #F6E05E;
    --warning-400: #FACC15;
    --warning-500: #EAB308;
    --warning-600: #CA8A04;
    --warning-700: #A16207;
    --warning-800: #854D0E;
    --warning-900: #713F12;

    /* Info Color */
    --info-50: #EBF8FF;
    --info-100: #BEE3F8;
    --info-200: #90CDF4;
    --info-300: #63B2EC;
    --info-400: #4299E1;
    --info-500: #3182CE;
    --info-600: #2B6CB0;
    --info-700: #2C5282;
    --info-800: #2A4365;
    --info-900: #1A365D;

    /* Black & White Color */
    --black: #000000;
    --white: #FFFFFF;

    /* Blur Light & Dark */

    /* -- Blur light 1 */
    --blur-light-1-background: rgba(255, 255, 255, 0.8);
    --blur-light-1-backdrop-filter: blur(44px);

    /* -- Blur light 2 */
    --blur-light-2-background: rgba(255, 255, 255, 0.7);
    --blur-light-2-backdrop-filter: blur(44px);

    /* -- Blur light 3 */
    --blur-light-3-background: rgba(255, 255, 255, 0.5);
    --blur-light-3-backdrop-filter: blur(77px);

    /* Shadow */
    --shadow-xs: 0px 0px 1px rgba(40, 41, 61, 0.08), 0px 0.5px 2px rgba(96, 97, 112, 0.16);
    --shadow-sm: 0px 0px 1px rgba(40, 41, 61, 0.04), 0px 2px 4px rgba(96, 97, 112, 0.16);
    --shadow-md: 0px 0px 2px rgba(40, 41, 61, 0.04), 0px 4px 8px rgba(96, 97, 112, 0.16);
    --shadow-lg: 0px 2px 4px rgba(40, 41, 61, 0.04), 0px 8px 16px rgba(96, 97, 112, 0.16);
    --shadow-xl: 0px 2px 8px rgba(40, 41, 61, 0.04), 0px 16px 24px rgba(96, 97, 112, 0.16);
    --shadow2xl: 0px 2px 8px rgba(40, 41, 61, 0.08), 0px 20px 32px rgba(96, 97, 112, 0.24);
    --shadow-smooth: rgba(112, 144, 176, 0.08) 14px 17px 40px 4px;

    /* Rounded */
    --rounded-1: 5px;
    --rounded-2: 10px;
    --rounded-3: 15px;
    --rounded-4: 20px;
    --rounded-5: 25px;
    --rounded-6: 30px;
    --rounded-7: 35px;
    --rounded-100: 100%;

    /* --animate-duration: 2s;
    --animate-delay: 0.4s; */

}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Custom Scrollbar
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar:hover {
    width: 10px !important;
}

/* Track */

::-webkit-scrollbar-track {
    background: var(--secondary-100);
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: var(--secondary-300);
    border-radius: var(--rounded-7);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-400);
}

.colors {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
}




.colors .color {
    border-radius: var(--rounded-2);
    width: calc((100% / 4) - 10px);
    padding: 10px;
    height: 60px;
    line-height: 40px;
    text-align: center;
    margin: 5px;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Card
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.card {
    border-radius: var(--rounded-3);
    overflow: hidden;
    background-color: var(--blur-light-1-background);
    backdrop-filter: var(--blur-light-1-backdrop-filter);
    border: none;
    box-shadow: var(--shadow-smooth)
}


.card-header {
    background-color: transparent;
    border: 1px solid var(--secondary-100);
    padding: 15px;
    font-weight: var(--font-weight-bold);
}

.card-footer {
    background-color: transparent;
    border: 1px solid var(--secondary-100);
    padding: 15px;
}

.card-text {
    font-size: var(--text-medium-font-size);
}

.card-link {
    font-size: var(--text-medium-font-size);
}

.bg-whitesmoke {
    background-color: var(--secondary-50);
}


.card-body.notif {
    max-height: 200px;
    overflow-y: auto;
}

.icon-card i {
    font-size: 24px;
}


.icon-card-notification {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 20px;
    border-radius: 100%;
}

.icon-card.left i {
    padding: 8px;
}

.label-card {
    padding-top: 14px;
    margin-bottom: 17px;
    font-size: var(--text-medium-font-size);
    font-weight: var(--font-weight-regular);
}

/* ===== Card border color */
.card.border-primary {
    border: 1px solid var(--primary-500);
}

.card.border-secondary {
    border: 1px solid var(--secondary-500);
}

.card.border-success {
    border: 1px solid var(--success-500);
}

.card.border-danger {
    border: 1px solid var(--danger-500);
}

.card.border-warning {
    border: 1px solid var(--warning-500);
}

.card.border-info {
    border: 1px solid var(--info-500);
}

.card.border-dark {
    border: 1px solid var(--secondary-500);
}

.card-header {
    border-top: none;
    border-left: none;
    border-right: none;
}

.card-footer {
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.card .range {
    font-size: var(--text-medium-font-size);
    font-weight: var(--font-weight-regular);
}

/*===== card custom ===== */

/* Card blog */

.inline-blog img {
    width: 100%;
    height: 150px !important;
    object-fit: cover;
}

.single-blog img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.single-blog-outline img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Progress
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.progress-rounded {
    width: 150px;
    height: 150px;
    background: none;
    position: relative;
}

.progress-rounded::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid var(--secondary-200);
    position: absolute;
    top: 0;
    left: 0;
}

.progress-rounded>span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}

.progress-rounded .progress-left {
    left: 0;
}

.progress-rounded .progress-bar-rounded {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 6px;
    border-style: solid;
    position: absolute;
    top: 0;
}

.progress-rounded .progress-left .progress-bar-rounded {
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}

.progress-rounded .progress-right {
    right: 0;
}

.progress-rounded .progress-right .progress-bar-rounded {
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
}

.progress-rounded .progress-value {
    position: absolute;
    top: 0;
    left: 0;
}

.progress {
    border-radius: var(--rounded-5);
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Toast
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.toast {
    border: none;
    border-radius: var(--rounded-3);
    overflow: hidden;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Form input
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


label {
    font-size: var(--small-text-medium-font-size);
}

input,
select,
textarea {
    border-radius: 7px !important;
    border: 1px solid var(--secondary-200) !important;
    font-size: var(--text-medium-font-size);
    font-weight: var(--font-weight-regular);

}

input::placeholder,
select::placeholder,
textarea::placeholder {
    font-size: var(--text-medium-font-size);
    font-weight: var(--font-weight-regular);
}

input:focus,
select:focus,
textarea:focus {
    /* color: var(--primary-500) !important; */
}

input:hover,
textarea:hover,
select:hover {
    /* border: 1px solid var(--primary-500) !important; */
}

input[type="range"] {
    border: none !important;
}

input[type="range"]:hover {
    border: none !important;
}

.form-control,
.form-select {
    padding: 10px;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Rounded pill
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.rounded-1 {
    border-radius: var(--rounded-1) !important;
}

.rounded-2 {
    border-radius: var(--rounded-2) !important;
}

.rounded-3 {
    border-radius: var(--rounded-3) !important;
}

.rounded-4 {
    border-radius: var(--rounded-4) !important;
}

.rounded-5 {
    border-radius: var(--rounded-5) !important;
}

.rounded-6 {
    border-radius: var(--rounded-6) !important;
}

.rounded-7 {
    border-radius: var(--rounded-7) !important;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Elevation
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.shadow-xs {
    box-shadow: var(--shadow-xs);
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

.shadow-xxl {
    box-shadow: var(--shadow2xl);
}

.shadow-smooth {
    box-shadow: var(--shadow-smooth);
}

.no-shadow {
    box-shadow: none !important;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Buttons
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.btn {
    border-radius: 0.375rem;
    /* padding: 10px 20px 10px 20px; */
}

/* .btn {
    border-radius: 0.375rem !important;
    border: none;
    font-weight: 600;
    padding: 10px 20px 10px 20px !important;
    font-size: 16px;
} */

/* Button image */
.btn-img-auth img {
    width: 24px;
}

/* Button rounded icons */

.btn-circle {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    padding: 0;
    border-radius: 50%;
}

.btn-circle i {
    position: relative;
    top: 1.5px;
}

.btn-circle-sm {
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 20px;
    color: var(--primary-500);
}

/* Button otline primary */
.btn-outline-primary:hover {
    color: var(--white);
}

.btn-outline-secondary:hover {
    color: var(--white);
}

.btn-outline-success:hover {
    color: var(--white);
}

.btn-outline-danger:hover {
    color: var(--white);
}

.btn-outline-warning:hover {
    color: var(--white);
}

.btn-outline-info:hover {
    color: var(--white);
}

.btn-outline-light {
    color: var(--secondary-400);
    border: 1px solid var(--secondary-200);
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Button size
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* .btn-sm {
    padding: 3px 25px;
    border-radius: 6px;
    font-size: var(--small-text-medium-font-size);
    font-weight: var(--font-weight-regular);
}

.btn-md {
    padding: 5px 39px;
    border-radius: 8px;
    font-size: var(--text-medium-font-size);
}

.btn-lg {
    padding: 10px 57px;
    border-radius: 10px;
    font-size: var(--large-text-medium-font-size);
    font-weight: var(--font-weight-medium);
} */

.btn-group .btn {
    border-radius: 8px;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Button Color
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


.btn-secondary {
    color: var(--white);
}

.btn-secondary:hover {
    color: var(--white);
}

.btn-secondary:focus {
    color: var(--white);
}

.btn-success {
    color: var(--white);
}

.btn-success:hover {
    color: var(--white);
}

.btn-success:focus {
    color: var(--white);
}

.btn-success {
    color: var(--white);
}

.btn-danger {
    color: var(--white);
}

.btn-danger:hover {
    color: var(--white);
}

.btn-danger:focus {
    color: var(--white);
}

.btn-warning {
    color: var(--white);
}

.btn-warning:hover {
    color: var(--white);
}

.btn-warning:focus {
    color: var(--white);
}

.btn-info {
    color: var(--white);
}

.btn-info:hover {
    color: var(--white);
}

.btn-info:focus {
    color: var(--white);
}

.btn-outline-secondary-300 {
    border: 1px solid var(--secondary-300);
}

.btn-outline-secondary-300:hover {
    background-color: var(--primary-500);
    color: var(--primary-50);
    transition: 0.5s;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Text colors
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Text color white */
.text-white-all li a {
    color: white !important;
}

.text-white-all *:before,
.text-white-all *:after {
    color: #ffffff !important;
}

/* primary */
.text-primary-50 {
    color: var(--primary-50) !important;
}

.text-primary-100 {
    color: var(--primary-100) !important;
}

.text-primary-200 {
    color: var(--primary-200) !important;
}

.text-primary-300 {
    color: var(--primary-300) !important;
}

.text-primary-400 {
    color: var(--primary-400) !important;
}

.text-primary-500 {
    color: var(--primary-500) !important;
}

.text-primary-600 {
    color: var(--primary-600) !important;
}

.text-primary-700 {
    color: var(--primary-700) !important;
}

.text-primary-800 {
    color: var(--primary-800) !important;
}

/* secondary */
.text-secondary-900 {
    color: var(--secondary-900) !important;
}

.text-secondary-50 {
    color: var(--secondary-50) !important;
}

.text-secondary-100 {
    color: var(--secondary-100) !important;
}

.text-secondary-200 {
    color: var(--secondary-200) !important;
}

.text-secondary-300 {
    color: var(--secondary-300) !important;
}

.text-secondary-400 {
    color: var(--secondary-400) !important;
}

.text-secondary-500 {
    color: var(--secondary-500) !important;
}

.text-secondary-600 {
    color: var(--secondary-600) !important;
}

.text-secondary-700 {
    color: var(--secondary-700) !important;
}

.text-secondary-800 {
    color: var(--secondary-800) !important;
}

.text-secondary-900 {
    color: var(--secondary-900) !important;
}

/* success */
.text-success-900 {
    color: var(--success-900) !important;
}

.text-success-50 {
    color: var(--success-50) !important;
}

.text-success-100 {
    color: var(--success-100) !important;
}

.text-success-200 {
    color: var(--success-200) !important;
}

.text-success-300 {
    color: var(--success-300) !important;
}

.text-success-400 {
    color: var(--success-400) !important;
}

.text-success-500 {
    color: var(--success-500) !important;
}

.text-success-600 {
    color: var(--success-600) !important;
}

.text-success-700 {
    color: var(--success-700) !important;
}

.text-success-800 {
    color: var(--success-800) !important;
}

.text-success-900 {
    color: var(--success-900) !important;
}

/* danger */
.text-danger-900 {
    color: var(--danger-900) !important;
}

.text-danger-50 {
    color: var(--danger-50) !important;
}

.text-danger-100 {
    color: var(--danger-100) !important;
}

.text-danger-200 {
    color: var(--danger-200) !important;
}

.text-danger-300 {
    color: var(--danger-300) !important;
}

.text-danger-400 {
    color: var(--danger-400) !important;
}

.text-danger-500 {
    color: var(--danger-500) !important;
}

.text-danger-600 {
    color: var(--danger-600) !important;
}

.text-danger-700 {
    color: var(--danger-700) !important;
}

.text-danger-800 {
    color: var(--danger-800) !important;
}

.text-danger-900 {
    color: var(--danger-900) !important;
}

/* warning */
.text-warning-900 {
    color: var(--warning-900) !important;
}

.text-warning-50 {
    color: var(--warning-50) !important;
}

.text-warning-100 {
    color: var(--warning-100) !important;
}

.text-warning-200 {
    color: var(--warning-200) !important;
}

.text-warning-300 {
    color: var(--warning-300) !important;
}

.text-warning-400 {
    color: var(--warning-400) !important;
}

.text-warning-500 {
    color: var(--warning-500) !important;
}

.text-warning-600 {
    color: var(--warning-600) !important;
}

.text-warning-700 {
    color: var(--warning-700) !important;
}

.text-warning-800 {
    color: var(--warning-800) !important;
}

.text-warning-900 {
    color: var(--warning-900) !important;
}

/* info */
.text-info-900 {
    color: var(--info-900) !important;
}

.text-info-50 {
    color: var(--info-50) !important;
}

.text-info-100 {
    color: var(--info-100) !important;
}

.text-info-200 {
    color: var(--info-200) !important;
}

.text-info-300 {
    color: var(--info-300) !important;
}

.text-info-400 {
    color: var(--info-400) !important;
}

.text-info-500 {
    color: var(--info-500) !important;
}

.text-info-600 {
    color: var(--info-600) !important;
}

.text-info-700 {
    color: var(--info-700) !important;
}

.text-info-800 {
    color: var(--info-800) !important;
}

.text-info-900 {
    color: var(--info-900) !important;
}

/* Text light & dark */
.text-dark {
    color: var(--secondary-700) !important;
}

.text-light {
    color: var(--secondary-400) !important;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Text size
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.xxl-text-md {
    font-size: var(--double-extra-large-text-medium-font-size);
    font-weight: var(--font-weight-medium);
}

.xxl-text-rg {
    font-size: var(--double-extra-large-text-medium-font-size);
    font-weight: var(--font-weight-regular);
}

.xl-text-md {
    font-size: var(--extra-large-text-medium-font-size);
    font-weight: var(--font-weight-medium);
}

.xl-text-rg {
    font-size: var(--extra-large-text-medium-font-size);
    font-weight: var(--font-weight-regular);
}

.lg-text-md {
    font-size: var(--large-text-medium-font-size);
    font-weight: var(--font-weight-medium);
}

.lg-text-rg {
    font-size: var(--large-text-medium-font-size);
    font-weight: var(--font-weight-regular);
}

.md-text-md {
    font-size: var(--text-medium-font-size);
    font-weight: var(--font-weight-medium);
}

.md-text-rg {
    font-size: var(--text-medium-font-size);
    font-weight: var(--font-weight-regular);
}

.sm-text-md {
    font-size: var(--small-text-medium-font-size);
    font-weight: var(--font-weight-medium);
}

.sm-text-rg {
    font-size: var(--small-text-medium-font-size);
    font-weight: var(--font-weight-regular);
}

.xs-text-md {
    font-size: var(--extra-small-text-medium-font-size);
    font-weight: var(--font-weight-medium);
}

.xs-text-rg {
    font-size: var(--extra-small-text-medium-font-size);
    font-weight: var(--font-weight-regular);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Main content
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.main-content {
    min-height: 522px;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Dropdown menu
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.dropdown-header {
    font-size: var(--small-text-medium-font-size) !important;
}

.dropdown-menu {
    border-radius: 12px !important;
    font-size: var(--text-medium-font-size);
}

.dropdown-menu li {
    margin-bottom: 0.5rem;
}

.dropdown-item {
    color: var(--secondary-900);
    border: none;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--primary-500);
    text-decoration: none;
    background-color: var(--white);
}

.dropdown-card .dropdown-menu {
    height: auto !important;
    position: relative !important;
    transform: translate3d(0, 0, 90px) !important;
}

.dropdown-menu {
    border: none;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Base
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

*,
::before,
::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    transition: 0.5s;
}

body {
    position: relative;
    margin: var(--header-fheight) 0 0 0;
    /* padding: 0 1rem; */
    transition: .5s;
    font-family: var(--body-font);
    /* background-color: var(--white);
    background-image: url('../img/background/bg-body-compress.jpg');
    background-size: cover;
    background-position: center; */

    /* background-color: hsla(0, 0%, 100%, 1);
    background-image:
        radial-gradient(at 20% 30%, hsla(240, 100%, 60%, 0.178) 0px, transparent 50%),
        radial-gradient(at 77% 89%, hsla(289, 67%, 53%, 0.100) 0px, transparent 60%),
        radial-gradient(at 81% 5%, hsla(219, 93%, 50%, 0.100) 0px, transparent 60%); */
    background-color: var(--secondary-50);
}


/* Link */
a {
    text-decoration: none;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Header
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* .header {
    width: 100vw;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    backdrop-filter: blur(53px);
    z-index: var(--z-fixed);
    transition: .5s;
} */

.header__page i {
    font-size: 10px;
}

.header__toggle {
    font-size: 1.5rem;
    cursor: pointer;
}


.header__img {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
}


.header__content img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center right;
}

.header__content .btn {
    display: inline-block !important;
    text-align: center !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    /* padding: 0.375rem 0.75rem; */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}




/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Accordion
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.nav__item.accordion-collapse {
    background-color: var(--white);
    border-radius: 10px;
    transition: all 500ms cubic-bezier(.47, 1.64, .41, .8);
    transform: scale(1);
}

/* #accordion-container-components {
    overflow-x: hidden;
} */

#accordion-container-components::-webkit-scrollbar {
    width: 10 !important;
    /* display: none; */
}




.accordion-body a.accordion-items {
    font-size: var(--text-medium-font-size);
    font-weight: var(--font-weight-regular);
    color: var(--secondary-900);
}

.accordion-body a.accordion-items:hover {
    color: var(--primary-500);
    font-weight: var(--font-weight-medium);
}


.nav .dropdown-toggle:after {
    float: right !important;
    content: "\F282";
    position: absolute;
    top: 25%;
    right: 1%;
    border: 0;
    vertical-align: 0;
    font-family: 'bootstrap-icons';
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Nav
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.bg-sidenav-primary-fill {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--primary-800);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed);
}

.bg-sidenav-secondary-fill {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--secondary-500);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed);
}

.bg-sidenav-success-fill {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--success-900);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed);
}

.bg-sidenav-danger-fill {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--danger-500);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed);
}

.bg-sidenav-warning-fill {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--warning-500);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed);
}

.bg-sidenav-info-fill {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--info-500);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed);
}

.bg-sidenav-light-fill {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--secondary-400);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed);
}

.bg-sidenav-dark-fill {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--secondary-700);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed);
}

.nav {
    height: 100%;
    display: flex;
    /* overflow: auto; */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.nav-content {
    flex-direction: column !important;
    justify-content: space-between;
    overflow: auto !important;
}

.nav::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}



.nav__logo,
.nav__link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: .5rem 0 .5rem 1.5rem;
}

.nav__logo {
    margin-bottom: 2rem;
}

.nav__logo-icon {
    font-size: 1.25rem;
    color: var(--white);
}

.nav__logo-name {
    color: var(--white);
    font-weight: 700;
}

.nav__link {
    position: relative;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.5rem;
    transition: .3s;
    font-size: var(--text-medium-font-size);
    font-weight: var(--font-weight-medium);
}


.nav__link:hover {
    color: var(--white);
}

.nav__icon {
    font-size: 1.25rem;
}

/* Pills */
.nav-pills .nav-item .active {
    border-radius: 8px !important;
}

/*Show navbar movil*/
/* .show {
    left: 0;
} */

/*Add padding body movil*/
.body-pd {
    padding-left: calc(var(--nav-width) + 1rem);
}

/*Active links*/
.nav__link.active {
    color: var(--white);
}

.nav__link.active::before {
    content: '';
    position: absolute;
    left: 0;
    width: 2px;
    height: 32px;
    background-color: var(--white);
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Alert
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.alert {
    border: none;
    border-radius: 0.8rem;
    box-shadow: var(--shadow-smooth);
}

.alert-primary.dark {
    background-color: var(--primary-500);
    color: white;
}

.alert-primary.dark a {
    color: white;
}

.badge {
    border-radius: 1rem;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Text bg white
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.text-bg-white {
    background-color: var(--white);
    color: var(--secondary-700);
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Text bg primary
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.text-bg-primary-50 {
    background-color: var(--primary-50);
    color: var(--primary-500);
}

.text-bg-primary-100 {
    background-color: var(--primary-100);
    color: var(--primary-500);
}

.text-bg-primary-200 {
    background-color: var(--primary-200);
    color: var(--primary-900);
}

.text-bg-primary-300 {
    background-color: var(--primary-300);
    color: var(--primary-100);
}

.text-bg-primary-400 {
    background-color: var(--primary-400);
    color: var(--white);
}

.text-bg-primary-500 {
    background-color: var(--primary-500);
    color: var(--white);
}

.text-bg-primary-600 {
    background-color: var(--primary-600);
    color: var(--white);
}

.text-bg-primary-700 {
    background-color: var(--primary-700);
    color: var(--white);
}

.text-bg-primary-800 {
    background-color: var(--primary-800);
    color: var(--white);
}

.text-bg-primary-900 {
    background-color: var(--primary-900);
    color: var(--white);
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Text bg secondary
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.text-bg-secondary-50 {
    background-color: var(--secondary-50);
    color: var(--secondary-500);
}

.text-bg-secondary-100 {
    background-color: var(--secondary-100);
    color: var(--secondary-500);
}

.text-bg-secondary-200 {
    background-color: var(--secondary-200);
    color: var(--secondary-900);
}

.text-bg-secondary-300 {
    background-color: var(--secondary-300);
    color: var(--secondary-900);
}

.text-bg-secondary-400 {
    background-color: var(--secondary-400);
    color: var(--white);
}

.text-bg-secondary-500 {
    background-color: var(--secondary-500);
    color: var(--white);
}

.text-bg-secondary-600 {
    background-color: var(--secondary-600);
    color: var(--white);
}

.text-bg-secondary-700 {
    background-color: var(--secondary-700);
    color: var(--white);
}

.text-bg-secondary-800 {
    background-color: var(--secondary-800);
    color: var(--white);
}

.text-bg-secondary-900 {
    background-color: var(--secondary-900);
    color: var(--white);
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Text bg success
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.text-bg-success-50 {
    background-color: var(--success-50);
    color: var(--success-500);
}

.text-bg-success-100 {
    background-color: var(--success-100);
    color: var(--success-500);
}

.text-bg-success-200 {
    background-color: var(--success-200);
    color: var(--success-900);
}

.text-bg-success-300 {
    background-color: var(--success-300);
    color: var(--success-900);
}

.text-bg-success-400 {
    background-color: var(--success-400);
    color: var(--white);
}

.text-bg-success-500 {
    background-color: var(--success-500);
    color: var(--white);
}

.text-bg-success-600 {
    background-color: var(--success-600);
    color: var(--white);
}

.text-bg-success-700 {
    background-color: var(--success-700);
    color: var(--white);
}

.text-bg-success-800 {
    background-color: var(--success-800);
    color: var(--white);
}

.text-bg-success-900 {
    background-color: var(--success-900);
    color: var(--white);
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Text bg danger
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.text-bg-danger-50 {
    background-color: var(--danger-50);
    color: var(--danger-500);
}

.text-bg-danger-100 {
    background-color: var(--danger-100);
    color: var(--danger-500);
}

.text-bg-danger-200 {
    background-color: var(--danger-200);
    color: var(--danger-900);
}

.text-bg-danger-300 {
    background-color: var(--danger-300);
    color: var(--danger-900);
}

.text-bg-danger-400 {
    background-color: var(--danger-400);
    color: var(--white);
}

.text-bg-danger-500 {
    background-color: var(--danger-500);
    color: var(--white);
}

.text-bg-danger-600 {
    background-color: var(--danger-600);
    color: var(--white);
}

.text-bg-danger-700 {
    background-color: var(--danger-700);
    color: var(--white);
}

.text-bg-danger-800 {
    background-color: var(--danger-800);
    color: var(--white);
}

.text-bg-danger-900 {
    background-color: var(--danger-900);
    color: var(--white);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Text bg warning
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.text-bg-warning-50 {
    background-color: var(--warning-50);
    color: var(--warning-500);
}

.text-bg-warning-100 {
    background-color: var(--warning-100);
    color: var(--warning-500);
}

.text-bg-warning-200 {
    background-color: var(--warning-200);
    color: var(--warning-900);
}

.text-bg-warning-300 {
    background-color: var(--warning-300);
    color: var(--warning-900);
}

.text-bg-warning-400 {
    background-color: var(--warning-400);
    color: var(--white);
}

.text-bg-warning-500 {
    background-color: var(--warning-500);
    color: var(--white);
}

.text-bg-warning-600 {
    background-color: var(--warning-600);
    color: var(--white);
}

.text-bg-warning-700 {
    background-color: var(--warning-700);
    color: var(--white);
}

.text-bg-warning-800 {
    background-color: var(--warning-800);
    color: var(--white);
}

.text-bg-warning-900 {
    background-color: var(--warning-900);
    color: var(--white);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Text bg info
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.text-bg-info-50 {
    background-color: var(--info-50);
    color: var(--info-500);
}

.text-bg-info-100 {
    background-color: var(--info-100);
    color: var(--info-500);
}

.text-bg-info-200 {
    background-color: var(--info-200);
    color: var(--info-900);
}

.text-bg-info-300 {
    background-color: var(--info-300);
    color: var(--info-900);
}

.text-bg-info-400 {
    background-color: var(--info-400);
    color: var(--white);
}

.text-bg-info-500 {
    background-color: var(--info-500);
    color: var(--white);
}

.text-bg-info-600 {
    background-color: var(--info-600);
    color: var(--white);
}

.text-bg-info-700 {
    background-color: var(--info-700);
    color: var(--white);
}

.text-bg-info-800 {
    background-color: var(--info-800);
    color: var(--white);
}

.text-bg-info-900 {
    background-color: var(--info-900);
    color: var(--white);
}

.text-bg-primary {
    background-color: var(--primary-500);
    color: var(--white);
}

.text-bg-secondary {
    background-color: var(--secondary-500);
    color: var(--white);
}

.text-bg-success {
    background-color: var(--success-500);
    color: white;
}

.text-bg-danger {
    background-color: var(--danger-500);
    color: var(--white);
}

.text-bg-warning {
    background-color: var(--warning-500);
    color: var(--white);
}

.text-bg-info {
    background-color: var(--info-500);
    color: var(--white);
}

.text-bg-light {
    background-color: var(--secondary-200);
    color: var(--secondary-500);
}

.text-bg-dark {
    background-color: var(--secondary-700);
    color: var(--white);
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Search
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

input[type="search"] {
    padding: .2em .4em;
    border-radius: .2em;
}


input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1em;
    width: 1em;
    border-radius: 50em;
    background: url('../img/icons/x-circle.svg') no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
    opacity: .5;
    pointer-events: all;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Table
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

thead,
tbody,
tfoot,
tr,
td,
th {
    border-color: var(--secondary-200);
}

/* Size height table */
.tb-vh-25 {
    height: 25px;
}

.tb-vh-50 {
    height: 50px;
}

.tb-vh-75 {
    height: 75px;
}

.tb-vh-100 {
    height: 100px;
}

img.thumbnail-table-rounded {
    width: 44px;
    height: 44px;
    object-fit: cover;
    overflow: hidden;
    border-radius: var(--rounded-100);
}

.img-table {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: var(--rounded-2);
}


table.bullet,
.slash {
    display: inline;
    margin: 0 4px;
}

table.bullet:after {
    content: '\2022';
}

#dataTable_length .form-select {
    padding: 10px 20px;
    margin-top: 0.5rem;
}

.dataTables_filter {
    margin-top: 0.5rem;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Popover
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.popover .popover-header {
    background: none !important;
}

.popover {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: var(--shadow-lg);
    border-radius: var(--rounded-2);
}

.popover.right>.arrow:after {
    left: 8px;
    bottom: -10px;
}

.popover.right>.arrow {
    left: -16px;
    margin-top: -12px;
    border-right-color: none;
}

.popover>.arrow {
    border-width: 12px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Code editor
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
pre[class*=language-] {
    border: none !important;
    border-radius: var(--rounded-2) !important;
    background-color: var(--secondary-900) !important;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Timeline
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.timeline_area {
    position: relative;
    z-index: 1;
}

.single-timeline-area {
    position: relative;
    z-index: 1;
    padding-left: 180px;
}

.single-timeline-area .timeline-date {
    position: absolute;
    width: 180px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-right: 60px;
}

.single-timeline-area .timeline-date::after {
    position: absolute;
    width: 3px;
    height: 100%;
    content: "";
    background-color: var(--secondary-200);
    top: 0;
    right: 30px;
    z-index: 1;
}

.single-timeline-area .timeline-date::before {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--primary-500);
    border: 5px solid var(--primary-200);
    padding: 5px;
    content: "";
    top: 50%;
    right: 22px;
    z-index: 5;
    margin-top: -5.5px;
}

.single-timeline-area .timeline-date p {
    margin-bottom: 0;
    color: var(--secondary-800);
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
}

.single-timeline-area .single-timeline-content {
    position: relative;
    z-index: 1;
    padding: 30px 30px 25px;
    border-radius: var(--rounded-2);
    margin-bottom: 15px;
    margin-top: 15px;
    border: none;
    background-color: var(--white);
    box-shadow: var(--shadow-smooth);
}

.single-timeline-area .single-timeline-content .timeline-icon {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    width: 30px;
    height: 30px;
    background-color: var(--primary-500);
    -webkit-box-flex: 0;
    -ms-flex: 0 0 30px;
    flex: 0 0 30px;
    text-align: center;
    max-width: 30px;
    border-radius: 50%;
    margin-right: 15px;
}

.single-timeline-area .single-timeline-content .timeline-icon i {
    color: var(--white);
    line-height: 30px;
}

.single-timeline-area .single-timeline-content .timeline-text h6 {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.single-timeline-area .single-timeline-content .timeline-text p {
    font-size: 13px;
    margin-bottom: 0;
}

.single-timeline-area .single-timeline-content:hover .timeline-icon,
.single-timeline-area .single-timeline-content:focus .timeline-icon {
    background-color: var(--secondary-800);
}

.single-timeline-area .single-timeline-content:hover .timeline-text h6,
.single-timeline-area .single-timeline-content:focus .timeline-text h6 {
    color: var(--primary-500);
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Blocquote
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.blockquote {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    padding: 20px;
    padding-left: 40px;
    font-style: oblique;
    background-color: var(--secondary-100);
    border-radius: var(--rounded-2);
    position: relative;
    font-family: 'Time new Romans';
    font-size: 16px;
    letter-spacing: .3px;
}

blockquote:before {
    content: '"';
    font-size: 30px;
    position: absolute;
    top: 10px;
    left: 20px;
    opacity: .2;
}

blockquote .blockquote-footer {
    margin-top: 10px;
}

.blockquote-footer {
    display: block;
    font-size: 80%;
    color: var(--secondary-500);
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* charts custom
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

#chartdiv {
    width: 100%;
    height: 500px;
    background-color: white;
    border-radius: 14px;
    box-shadow: var(--shadow-smooth);
}

.amcharts-graph-g2 .amcharts-graph-stroke {
    stroke-dasharray: 3px 3px;
    stroke-linejoin: round;
    stroke-linecap: round;
    -webkit-animation: am-moving-dashes 1s linear infinite;
    animation: am-moving-dashes 1s linear infinite;
}

@-webkit-keyframes am-moving-dashes {
    100% {
        stroke-dashoffset: -31px;
    }
}

@keyframes am-moving-dashes {
    100% {
        stroke-dashoffset: -31px;
    }
}


.lastBullet {
    -webkit-animation: am-pulsating 1s ease-out infinite;
    animation: am-pulsating 1s ease-out infinite;
}

@-webkit-keyframes am-pulsating {
    0% {
        stroke-opacity: 1;
        stroke-width: 0px;
    }

    100% {
        stroke-opacity: 0;
        stroke-width: 50px;
    }
}

@keyframes am-pulsating {
    0% {
        stroke-opacity: 1;
        stroke-width: 0px;
    }

    100% {
        stroke-opacity: 0;
        stroke-width: 50px;
    }
}

.amcharts-graph-column-front {
    -webkit-transition: all .3s .3s ease-out;
    transition: all .3s .3s ease-out;
}

.amcharts-graph-column-front:hover {
    fill: var(--primary-500);
    stroke: var(--primary-500);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.amcharts-graph-g3 {
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 500%;
    stroke-dasharray: 0 \0;
    /* fixes IE prob */
    stroke-dashoffset: 0 \0;
    /* fixes IE prob */
    -webkit-animation: am-draw 40s;
    animation: am-draw 40s;
}

@-webkit-keyframes am-draw {
    0% {
        stroke-dashoffset: 500%;
    }

    100% {
        stroke-dashoffset: 0%;
    }
}

@keyframes am-draw {
    0% {
        stroke-dashoffset: 500%;
    }

    100% {
        stroke-dashoffset: 0%;
    }
}


.content-area {
    max-width: 1070px;
    margin: 0 auto;
}


/* .box {
    max-height: 555px !important;
} */


.box {
    background-color: var(--blur-light-1-background);
    backdrop-filter: var(--blur-light-1-backdrop-filter);
    border-radius: var(--rounded-2);
    padding: 25px 35px 25px 30px;
    overflow: hidden;
}

#monthly-earnings-chart #apexcharts-canvas {
    position: relative;
}

#monthly-earnings-chart #apexcharts-canvas:after {
    content: "";
    position: absolute;
    left: 0;
    right: 58%;
    top: 0;
    bottom: 0;
    background: #24bdd3;
    opacity: 0.65;
}

#monthly-earnings-chart #apexcharts-title-text {
    font-weight: 600;
}

#monthly-earnings-chart #apexcharts-subtitle-text {
    font-weight: 700;
}

.monthly-earnings-text {
    position: absolute;
    left: 70px;
    top: 187px;
    color: #fff;
    z-index: 10;
}

.monthly-earnings-text h6 {
    font-size: 16px;
}

.chart-title h5 {
    font-size: 18px;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 38px;
}


@media screen and (max-width:760px) {
    .monthly-earnings-text {
        left: 30px;
    }

    .box {
        padding: 25px 0;
    }
}

.sparkboxes .box {
    padding: 3px 0 0 0;
    position: relative;
}

#spark1,
#spark2,
#spark3,
#spark4 {
    position: relative;
    padding-top: 15px;
}


/* overrides */
.sparkboxes #apexcharts-subtitle-text {
    fill: #8799a2 !important;
}




/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Editor
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.editorjs {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h2.ce-header {
    font-weight: bold;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Validation
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.invalid-feedback {
    font-size: var(--small-text-medium-font-size);
}

.valid-tooltip {
    color: var(--white);
    border-radius: var(--rounded-2);
    box-shadow: var(--shadow-lg);
}

.valid-tooltip::before {
    content: '\F321';
    font-family: var(--icon-bootstrap);
    vertical-align: middle;
}

.invalid-tooltip {
    color: var(--white);
    border-radius: var(--rounded-2);
    box-shadow: var(--shadow-lg);
}

.invalid-tooltip::before {
    content: '\F31D';
    font-family: var(--icon-bootstrap);
    vertical-align: middle;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Account
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

section.profile .card-header img {
    height: 129px;
    object-fit: cover;
    background-repeat: no-repeat;
}

.px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.mt-n10 {
    margin-top: -4rem !important;
}

.profil-img img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.profil-img img {
    border: 2px dashed var(--secondary-200);
    padding: 0.5rem;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Settings
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
section.settings .card-body {
    margin-bottom: -1.5rem !important;
}

section.settings .card-footer {
    padding-top: 10px;
    padding-bottom: 10px;
}


section.settings .btn-outline-light {
    border: 1px solid var(--secondary-200);
    font-size: var(--text-medium-font-size);
    padding: 5px 8px;
}

section.settings input {
    border-radius: 70px !important;
    border: 1px solid var(--secondary-200) !important;
    font-size: 22px;
    font-weight: var(--font-weight-regular);
}

section.settings .card-body a:hover {
    color: var(--primary-500) !important;
    text-decoration: underline;
}

.form-switch .form-check-input {
    width: 1.6em;
    margin-left: auto;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Pagination
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


.pagination .page-link {
    border: none;
}

.page-item a {
    border-radius: var(--rounded-2) !important;
    margin: 0.5rem;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Carousel custom
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.carousel-indicators [data-bs-target] {
    position: relative;
    width: 15px;
    height: 5px;
    border: none;
    border-radius: 24px;
}

.carousel-indicators [data-bs-target] span {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #7952b3;
    border-radius: inherit;
}

.carousel-caption h5 {
    font-size: 20px;
    font-weight: bold;
}

.carousel-caption p {
    font-size: 15px;
    font-weight: 300;
    color: white;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Modal custom
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.modal-header,
.modal-footer {
    border: none;
}

.modal-content {
    border-radius: var(--rounded-2);
    border: none;
    /* transition: all 500ms cubic-bezier(.47, 1.64, .41, .8);
    transform: scale(1); */

}

.modal-content.custom i {
    font-size: 2rem;
}

.btn.close {
    box-shadow: none;
}

.modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
}

.close {
    float: right !important;
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--secondary-500);
}

.close::after {
    content: '\F62A';
    font-family: var(--icon-bootstrap);
}

.modal-search input[type=text] {
    border: none !important;
    background-color: none;
    outline: 0;
    font-size: var(--headline-1-font-size) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--secondary-700) !important;
    font-family: 'Arial' !important;
    height: 70vh;
}

.modal-search input[type=text]:focus {
    border: none !important;
    background-color: none;
    outline: 0;
    height: 70vh;
}

.modal-search input[type=text]::placeholder {
    color: var(--secondary-300) !important;
    font-size: var(--headline-1-font-size) !important;
    font-weight: var(--font-weight-bold) !important;
}

.modal-search.center {
    height: 70vh;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Alert components
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.accordion,
.accordion-button {
    border-radius: 9px;
    overflow: hidden;
}

.accordion-item {
    border: none;
    background-color: transparent;
}

.accordion-item:last-of-type .accordion-button.collapsed {
    border-radius: 9px;
}

.accordion-button:focus {
    border-color: #aa8eff;
    box-shadow: none;
}

.accordion-button {
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}

.accordion-button:not(.collapsed) {
    color: var(--primary-500);
    font-size: var(--large-text-medium-font-size);
    font-weight: bold;
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Tabs border bottom
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
section.tab .nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    font-size: var(--text-medium-font-size);
}

section.tab .nav-borders .nav-link.active {
    color: var(--primary-700);
    border-bottom-color: var(--primary-500);
    font-weight: var(--font-weight-bold);
}

section.tab .nav-borders .nav-link {
    color: var(--secondary-500);
    border-bottom-width: 0.125rem;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0;
    padding-right: 0;
    margin-left: 1rem;
    margin-right: 1rem;
}


section.tab hr:not([size]) {
    height: 1px;
}

section.tab hr {
    margin: 1rem 0;
    color: inherit;
    background-color: #969696;
    border: 0;
    opacity: 0.25;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Errors
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
section.error__page span {
    font-size: 128px;
    font-weight: bold;
    font-family: 'Poppins';
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Footer
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.main-footer {
    padding: 20px 30px 20px 0px;
    margin-top: 40px;
    color: var(--primary-300);
    border-top: 1px solid var(--secondary-200);
    display: inline-block;
    width: 100%;
    font-size: var(--text-medium-font-size);
    font-weight: var(--text-medium-font-line-height-text-regular);
}


.bullet,
.slash {
    display: inline;
    margin: 0 4px;
}

.bullet:after {
    content: '\2022';
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Template for layout UI
| Note: Not important for your project
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.buttons a {
    margin: 0.5rem 0 0.5rem 0;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Media queries
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media screen and (min-width: 768px) {
    body {
        margin: calc(var(--header-height) + 1rem) 0 0 0;
        /* padding-left: calc(var(--nav-width) + 2rem); */
    }

    .header {
        height: calc(var(--header-height) + 1rem);
        /* padding: 0 2rem 0 calc(var(--nav-width) + 2rem); */
    }

    .header__img {
        width: 40px;
        height: 40px;
    }

    .header__img img {
        width: 45px;
    }

    .l-navbar {
        left: 0;
        padding: 1rem 1rem 0 0;
    }

    /*Show navbar desktop*/
    .l-navbar.show {
        width: calc(var(--nav-width) + 156px);
    }

    /*Add padding body desktop*/
    .body-pd {
        padding-left: calc(var(--nav-width) + 188px);
    }
}



@media (max-width: 768px) {

    /* Acccordion */
    .nav__item.accordion-collapse {
        z-index: 1 !important;
        position: absolute;
        box-shadow: var(--shadow-lg);
        margin-left: 56px;
    }

    /* Errors responsive */
    section.error__page {
        padding: 3rem 0;
        text-align: center;
    }
}

@media only screen and (max-width: 575px) {

    /* Timeline responsive */
    .single-timeline-area {
        padding-left: 100px;
    }

    .single-timeline-area .timeline-date {
        width: 100px;
    }

    .single-timeline-area .single-timeline-content {
        padding: 20px;
    }
}