@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/*:root {*/
/*    --font-inter: "Inter", sans-serif;*/


/*    --brand-primary: #E77D29;*/
/*    --brand-primary-strong: #e3761f;*/
/*    --brand-primary-rgb: 231, 125, 41;*/


    /*--brand-secondary: #F2543F;*/
    /*--brand-secondary-rgb: 242, 84, 63;*/
    /*--brand-secondary-strong: #e9432d;*/


/*    --brand-info: #26D6EB;*/
/*    --brand-info-strong: #1fc8dc;*/

/*    --brand-success: #28C76F;*/
/*    --brand-success-strong: #24c46b;*/

/*    --brand-warning: #FFAD5F;*/
/*    --brand-warning-strong: #f8a85a;*/

/*    --brand-danger: #EA5455;*/
/*    --brand-danger-strong: #ea5152;*/

/*    --brand-light: #F0F5F5;*/
/*    --brand-light-strong: #f0f0f0;*/

/*    --brand-dark: #232323;*/
/*    --brand-dark-strong: #202020;*/

/*    --brand-muted: #6c757d;*/

/*    --brand-white: #ffffff;*/
/*}*/

:root {
    --font-inter: "Inter", sans-serif;

    --brand-primary: #FF6600;
    --brand-primary-strong: #D04A0A;
    --soft-primary: #f8f4f1;

    --brand-secondary: #1E9788;
    --brand-secondary-strong: #09C097;
    --soft-secondary: #f2fbf9;

    --brand-dark: #222;
    --brand-dark-strong: #111111;
    --soft-dark: #eef1f6;

    --brand-success: #219653;
    --brand-success-strong: #1c7d46;
    --soft-success: #e0f6d5;

    --brand-info: #26D6EB;
    --brand-info-strong: #1fc8dc;
    --soft-info: #e4f6f8;

    --brand-danger: #EB5757;
    --brand-danger-strong: #e73232;
    --soft-danger: #fce8e8;

    --brand-warning: #F2994A;
    --brand-warning-strong: #f08628;
    --soft-warning: #fdf2e7;

    --brand-light: #E5E5E5;
    --brand-light-strong: #cccccc;

    --brand-dark-navy: #0C213A;
    --brand-dark-navy-strong: #09182a;
    --soft-dark-navy: #eaf1fb;

    --brand-muted: #999999;
    --brand-muted-strong: #6c7578;

    --brand-white: #ffffff;


    /*======= Global ==========*/
    --bg: #F3F8FD;
    --brand-border: #eeeeee;
    --border: #d5e4f6;
    --full-black: #000000;

    --aside-nav-text: #b3cbf4;
    --aside-nav-text-strong: #8fb3ef;
    --aside-nav-icon: #b3cbf4;
    --aside-secondary: #445580;


    /*======= z-index==========*/
    --z-index-navbar: 1199;
    --z-index-aside: 1200;
    --z-index-dropdown: 1201;
    --z-index-modal: 1250;
    --z-index-modal-backdrop: 1249;
    --z-index-tooltip: 1500;

    --common-shadow: 0px 0px 35px 0px rgba(154, 161, 171, 0.15);
    --popup-shadow: 0 1px 1px 0 rgba(23, 97, 253, 0.08), 0 1px 3px 1px rgba(23, 97, 253, 0.16);

    /*==== Text / Link Color ========*/
    --text-link: var(--brand-primary);

    --theme-bg: #f5f5f5;
}


body {
    font-family: var(--font-inter), sans-serif;
}

@media screen and (min-width: 1600px) {
    .container {
        max-width: 1440px;
    }
}
/*========= Custom bs ratio ==========*/
@media screen and (max-width: 767px) {
    .mobile-ratio-4x3{--bs-aspect-ratio: 75% !important;}
}



/*=========== btn size ===============*/
a {
    text-decoration: none;
    color: var(--brand-dark);
}
a:hover {
    color: var(--brand-primary);
}

.overlay-link {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.btn {
    --bs-btn-font-size: 14px;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.5rem;
}


.btn-sm {
    --bs-btn-font-size: 13px;
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: 0.35rem;
}

.btn-slim {
    --bs-btn-padding-x: .5rem;
    --bs-btn-padding-y: 0.15rem;
}

.btn-lg {
    --bs-btn-font-size: 15px;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.75rem;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

p {
    line-height: 180%;
}

/* BUTTONS */
.btn-brand-primary { background-color: var(--brand-primary); color: var(--brand-white); border: none; }
.btn-brand-primary:hover, .btn-brand-primary:active { background-color: var(--brand-primary-strong) !important; color: var(--brand-white) !important; }

.btn-brand-secondary { background-color: var(--brand-secondary); color: var(--brand-white); border: none; }
.btn-brand-secondary:hover, .btn-brand-secondary:active { background-color: var(--brand-secondary-strong) !important; color: var(--brand-white) !important; }

.btn-brand-info { background-color: var(--brand-info); color: var(--brand-white); border: none; }
.btn-brand-info:hover, .btn-brand-info:active { background-color: var(--brand-info-strong) !important; color: var(--brand-white) !important; }

.btn-brand-success { background-color: var(--brand-success); color: var(--brand-white); border: none; }
.btn-brand-success:hover, .btn-brand-success:active { background-color: var(--brand-success-strong) !important;  color: var(--brand-white) !important;}

.btn-brand-warning { background-color: var(--brand-warning); color: var(--brand-dark); border: none; }
.btn-brand-warning:hover, .btn-brand-warning:active { background-color: var(--brand-warning-strong) !important;  color: var(--brand-white) !important;}

.btn-brand-danger { background-color: var(--brand-danger); color: var(--brand-white); border: none; }
.btn-brand-danger:hover, .btn-brand-danger:active { background-color: var(--brand-danger-strong) !important;  color: var(--brand-white) !important;}

.btn-brand-light { background-color: var(--brand-light); color: var(--brand-dark); border: 1px solid var(--brand-light-strong); }
.btn-brand-light:hover, .btn-brand-light:active { background-color: var(--brand-light-strong) !important; color: var(--brand-dark) !important;}

.btn-brand-dark { background-color: var(--brand-dark); color: var(--brand-white); border: none; }
.btn-brand-dark:hover, .btn-brand-dark:active { background-color: var(--brand-dark-strong) !important;  color: var(--brand-white) !important;}

.btn-brand-white { background-color: var(--brand-white); color: var(--brand-dark); border: 1px solid #ddd; }
.btn-brand-white:hover, .btn-brand-white:active { background-color: #f0f0f0 !important;  color: var(--brand-dark) !important;}

.btn-soft-primary:hover, .btn-soft-primary:focus, .btn-soft-primary:active, .btn-soft-primary {
    background-color: var(--soft-primary) !important;
    color: var(--brand-primary);
    border: none !important;
}
.btn-soft-secondary:hover,
.btn-soft-secondary:focus,
.btn-soft-secondary:active,
.btn-soft-secondary {
    background-color: var(--soft-secondary) !important;
    color: var(--brand-secondary);
    border: none !important;
}

.btn-soft-dark:hover,
.btn-soft-dark:focus,
.btn-soft-dark:active,
.btn-soft-dark {
    background-color: var(--soft-dark) !important;
    color: var(--brand-dark);
    border: none !important;
}
.btn-soft-success:hover,
.btn-soft-success:focus,
.btn-soft-success:active,
.btn-soft-success {
    background-color: var(--soft-success) !important;
    color: var(--brand-success);
    border: none !important;
}
.btn-soft-danger:hover,
.btn-soft-danger:focus,
.btn-soft-danger:active,
.btn-soft-danger {
    background-color: var(--soft-danger) !important;
    color: var(--brand-danger);
    border: none !important;
}
.btn-soft-warning:hover,
.btn-soft-warning:focus,
.btn-soft-warning:active,
.btn-soft-warning {
    background-color: var(--soft-warning) !important;
    color: var(--brand-warning) !important;
    border: none !important;
}
.btn-soft-dark-navy:hover,
.btn-soft-dark-navy:focus,
.btn-soft-dark-navy:active,
.btn-soft-dark-navy {
    background-color: var(--soft-dark-navy) !important;
    color: var(--brand-dark-navy);
    border: none !important;
}
.btn-soft-info:hover,
.btn-soft-info:focus,
.btn-soft-info:active,
.btn-soft-info {
    background-color: var(--soft-info) !important;
    color: var(--brand-info);
    border: none !important;
}

/*=============== Badge ================*/
.custom-badge {
    padding: 3px 12px;
    font-size: 13px;
    display: inline-block;
    border-radius: 5px;
    text-align: center;
}
a.badge-soft-primary:hover,
.badge-soft-primary {
    background-color: var(--soft-primary);
    color: var(--brand-primary);
}

a.badge-soft-secondary:hover,
.badge-soft-secondary {
    background-color: var(--soft-secondary);
    color: var(--brand-secondary);
}

a.badge-soft-success:hover,
.badge-soft-success {
    background-color: var(--soft-success);
    color: var(--brand-success);
}

a.badge-soft-warning:hover,
.badge-soft-warning {
    background-color: var(--soft-warning);
    color: var(--brand-warning);
}

a.badge-soft-danger:hover,
.badge-soft-danger {
    background-color: var(--soft-danger);
    color: var(--brand-danger);
}

/*============ Font Size ================*/
.extra-small {
    font-size: 12px !important;
}
.small {
    font-size: 13px !important;
}
.medium {
    font-size: 14px !important;
}

    /* TEXT */
.text-brand-primary { color: var(--brand-primary); }
.text-brand-primary-strong { color: var(--brand-primary-strong); }

.text-brand-secondary { color: var(--brand-secondary); }
.text-brand-secondary-strong { color: var(--brand-secondary-strong); }

.text-brand-info { color: var(--brand-info); }
.text-brand-info-strong { color: var(--brand-info-strong); }

.text-brand-success { color: var(--brand-success); }
.text-brand-success-strong { color: var(--brand-success-strong); }

.text-brand-warning { color: var(--brand-warning); }
.text-brand-warning-strong { color: var(--brand-warning-strong); }

.text-brand-danger { color: var(--brand-danger); }
.text-brand-danger-strong { color: var(--brand-danger-strong); }

.text-brand-light { color: var(--brand-light); }
.text-brand-light-strong { color: var(--brand-light-strong); }

.text-brand-dark { color: var(--brand-dark); }
.text-brand-dark-strong { color: var(--brand-dark-strong); }

.text-brand-white { color: var(--brand-white); }

/*========= Text ==========*/
.text-ellipsis {
    text-overflow: ellipsis;
    /* Needed to make it work */
    overflow: hidden;
    white-space: nowrap;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* BACKGROUNDS */
.bg-brand-primary { background-color: var(--brand-primary) !important; color: var(--brand-white); }
.bg-brand-primary-strong { background-color: var(--brand-primary-strong) !important; color: var(--brand-white); }

.bg-brand-secondary { background-color: var(--brand-secondary) !important; color: var(--brand-white); }
.bg-brand-secondary-strong { background-color: var(--brand-secondary-strong) !important; color: var(--brand-white); }

.bg-brand-info { background-color: var(--brand-info) !important; color: var(--brand-white); }
.bg-brand-info-strong { background-color: var(--brand-info-strong) !important; color: var(--brand-white); }

.bg-brand-success { background-color: var(--brand-success) !important; color: var(--brand-white); }
.bg-brand-success-strong { background-color: var(--brand-success-strong) !important; color: var(--brand-white); }

.bg-brand-warning { background-color: var(--brand-warning) !important; color: var(--brand-dark); }
.bg-brand-warning-strong { background-color: var(--brand-warning-strong) !important; color: var(--brand-dark); }

.bg-brand-danger { background-color: var(--brand-danger) !important; color: var(--brand-white); }
.bg-brand-danger-strong { background-color: var(--brand-danger-strong) !important; color: var(--brand-white); }

.bg-brand-light { background-color: var(--brand-light) !important; color: var(--brand-dark); }
.bg-brand-light-strong { background-color: var(--brand-light-strong) !important; color: var(--brand-dark); }

.bg-brand-dark { background-color: var(--brand-dark) !important; color: var(--brand-white); }
.bg-brand-dark-strong { background-color: var(--brand-dark-strong) !important; color: var(--brand-white); }

.bg-brand-white { background-color: var(--brand-white) !important; color: var(--brand-dark); }

.bg-soft-primary {background-color: var(--soft-primary) !important;}
.bg-soft-secondary {background-color: var(--soft-secondary) !important;}
.bg-soft-dark {background-color: var(--soft-dark) !important;}
.bg-soft-success {background-color: var(--soft-success) !important;}
.bg-soft-info {background-color: var(--soft-info) !important;}
.bg-soft-danger {background-color: var(--soft-danger) !important;}
.bg-soft-warning {background-color: var(--soft-warning) !important;}
.bg-soft-dark-navy {background-color: var(--soft-dark-navy) !important;}

/* -------------------- BORDER UTILITIES -------------------- */
.border-brand-primary { border-color: var(--brand-primary) !important; }
.border-brand-primary-strong { border-color: var(--brand-primary-strong) !important; }

.border-brand-secondary { border-color: var(--brand-secondary) !important; }
.border-brand-secondary-strong { border-color: var(--brand-secondary-strong) !important; }

.border-brand-info { border-color: var(--brand-info) !important; }
.border-brand-info-strong { border-color: var(--brand-info-strong) !important; }

.border-brand-success { border-color: var(--brand-success) !important; }
.border-brand-success-strong { border-color: var(--brand-success-strong) !important; }

.border-brand-warning { border-color: var(--brand-warning) !important; }
.border-brand-warning-strong { border-color: var(--brand-warning-strong) !important; }

.border-brand-danger { border-color: var(--brand-danger) !important; }
.border-brand-danger-strong { border-color: var(--brand-danger-strong) !important; }

.border-brand-light { border-color: var(--brand-light) !important; }
.border-brand-light-strong { border-color: var(--brand-light-strong) !important; }

.border-brand-dark { border-color: var(--brand-dark) !important; }
.border-brand-dark-strong { border-color: var(--brand-dark-strong) !important; }

.border-brand-white { border-color: var(--brand-white) !important; }

/*=========== paragraph =============*/
.paragraph-sm {
    font-size: 14px;
}

/*============ Form Customize ==============*/
.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-error-text {
    font-size: 14px;
    color: var(--brand-danger);
}



/*======== Height ========*/
.h-5px   { height: 5px;   }
.h-10px  { height: 10px;  }
.h-15px  { height: 15px;  }
.h-20px  { height: 20px;  }
.h-25px  { height: 25px;  }
.h-30px  { height: 30px;  }
.h-35px  { height: 35px;  }
.h-40px  { height: 40px;  }
.h-45px  { height: 45px;  }
.h-50px  { height: 50px;  }
.h-55px  { height: 55px;  }
.h-60px  { height: 60px;  }
.h-65px  { height: 65px;  }
.h-70px  { height: 70px;  }
.h-75px  { height: 75px;  }
.h-80px  { height: 80px;  }
.h-85px  { height: 85px;  }
.h-90px  { height: 90px;  }
.h-95px  { height: 95px;  }
.h-100px { height: 100px; }
/*===== max height ========*/
.max-h-5px    { max-height: 5px;    }
.max-h-10px   { max-height: 10px;   }
.max-h-15px   { max-height: 15px;   }
.max-h-20px   { max-height: 20px;   }
.max-h-25px   { max-height: 25px;   }
.max-h-30px   { max-height: 30px;   }
.max-h-35px   { max-height: 35px;   }
.max-h-40px   { max-height: 40px;   }
.max-h-45px   { max-height: 45px;   }
.max-h-50px   { max-height: 50px;   }
.max-h-55px   { max-height: 55px;   }
.max-h-60px   { max-height: 60px;   }
.max-h-65px   { max-height: 65px;   }
.max-h-70px   { max-height: 70px;   }
.max-h-75px   { max-height: 75px;   }
.max-h-80px   { max-height: 80px;   }
.max-h-85px   { max-height: 85px;   }
.max-h-90px   { max-height: 90px;   }
.max-h-95px   { max-height: 95px;   }
.max-h-100px  { max-height: 100px;  }

/*======= Min Height =================*/
.min-h-5px    { min-height: 5px;    }
.min-h-10px   { min-height: 10px;   }
.min-h-15px   { min-height: 15px;   }
.min-h-20px   { min-height: 20px;   }
.min-h-25px   { min-height: 25px;   }
.min-h-30px   { min-height: 30px;   }
.min-h-35px   { min-height: 35px;   }
.min-h-40px   { min-height: 40px;   }
.min-h-45px   { min-height: 45px;   }
.min-h-50px   { min-height: 50px;   }
.min-h-55px   { min-height: 55px;   }
.min-h-60px   { min-height: 60px;   }
.min-h-65px   { min-height: 65px;   }
.min-h-70px   { min-height: 70px;   }
.min-h-75px   { min-height: 75px;   }
.min-h-80px   { min-height: 80px;   }
.min-h-85px   { min-height: 85px;   }
.min-h-90px   { min-height: 90px;   }
.min-h-95px   { min-height: 95px;   }
.min-h-100px  { min-height: 100px;  }



/*======== Fixed Width ========*/
.w-5px   { width: 5px; }
.w-10px  { width: 10px; }
.w-15px  { width: 15px; }
.w-20px  { width: 20px; }
.w-25px  { width: 25px; }
.w-30px  { width: 30px; }
.w-35px  { width: 35px; }
.w-40px  { width: 40px; }
.w-45px  { width: 45px; }
.w-50px  { width: 50px; }
.w-55px  { width: 55px; }
.w-60px  { width: 60px; }
.w-65px  { width: 65px; }
.w-70px  { width: 70px; }
.w-75px  { width: 75px; }
.w-80px  { width: 80px; }
.w-85px  { width: 85px; }
.w-90px  { width: 90px; }
.w-95px  { width: 95px; }
.w-100px { width: 100px; }

/*==== Max Fixed Width ======*/
.max-w-5px   { max-width: 5px;   }
.max-w-10px  { max-width: 10px;  }
.max-w-15px  { max-width: 15px;  }
.max-w-20px  { max-width: 20px;  }
.max-w-25px  { max-width: 25px;  }
.max-w-30px  { max-width: 30px;  }
.max-w-35px  { max-width: 35px;  }
.max-w-40px  { max-width: 40px;  }
.max-w-45px  { max-width: 45px;  }
.max-w-50px  { max-width: 50px;  }
.max-w-55px  { max-width: 55px;  }
.max-w-60px  { max-width: 60px;  }
.max-w-65px  { max-width: 65px;  }
.max-w-70px  { max-width: 70px;  }
.max-w-75px  { max-width: 75px;  }
.max-w-80px  { max-width: 80px;  }
.max-w-85px  { max-width: 85px;  }
.max-w-90px  { max-width: 90px;  }
.max-w-95px  { max-width: 95px;  }
.max-w-100px { max-width: 100px; }

/*== Min Fixed Width ==========*/
.min-w-5px   { min-width: 5px;   }
.min-w-10px  { min-width: 10px;  }
.min-w-15px  { min-width: 15px;  }
.min-w-20px  { min-width: 20px;  }
.min-w-25px  { min-width: 25px;  }
.min-w-30px  { min-width: 30px;  }
.min-w-35px  { min-width: 35px;  }
.min-w-40px  { min-width: 40px;  }
.min-w-45px  { min-width: 45px;  }
.min-w-50px  { min-width: 50px;  }
.min-w-55px  { min-width: 55px;  }
.min-w-60px  { min-width: 60px;  }
.min-w-65px  { min-width: 65px;  }
.min-w-70px  { min-width: 70px;  }
.min-w-75px  { min-width: 75px;  }
.min-w-80px  { min-width: 80px;  }
.min-w-85px  { min-width: 85px;  }
.min-w-90px  { min-width: 90px;  }
.min-w-95px  { min-width: 95px;  }
.min-w-100px { min-width: 100px; }
.min-w-150px { min-width: 150px; }



.min-w-600px {
    min-width: 600px;
}
.min-w-768px {
    min-width: 768px;
}

/*========== Margin =============*/
@media screen and (min-width: 1200px) {
    .mt-xl-n6 {
        margin-top: -4.5rem;
    }
}





/*========= Square Box =============*/
.square-box-10 { width: 10px; height: 10px; display: inline-block; }
.square-box-15 { width: 15px; height: 15px; display: inline-block; }
.square-box-20 { width: 20px; height: 20px; display: inline-block; }
.square-box-25 { width: 25px; height: 25px; display: inline-block; }
.square-box-30 { width: 30px; height: 30px; display: inline-block; }
.square-box-35 { width: 35px; height: 35px; display: inline-block; }
.square-box-40 { width: 40px; height: 40px; display: inline-block; }
.square-box-45 { width: 45px; height: 45px; display: inline-block; }
.square-box-50 { width: 50px; height: 50px; display: inline-block; }
.square-box-55 { width: 55px; height: 55px; display: inline-block; }
.square-box-60 { width: 60px; height: 60px; display: inline-block; }
.square-box-65 { width: 65px; height: 65px; display: inline-block; }
.square-box-70 { width: 70px; height: 70px; display: inline-block; }
.square-box-75 { width: 75px; height: 75px; display: inline-block; }
.square-box-80 { width: 80px; height: 80px; display: inline-block; }
.square-box-85 { width: 85px; height: 85px; display: inline-block; }
.square-box-90 { width: 90px; height: 90px; display: inline-block; }
.square-box-95 { width: 95px; height: 95px; display: inline-block; }
.square-box-100 { width: 100px; height: 100px; display: inline-block; }
.square-box-105 { width: 105px; height: 105px; display: inline-block; }
.square-box-110 { width: 110px; height: 110px; display: inline-block; }
.square-box-115 { width: 115px; height: 115px; display: inline-block; }
.square-box-120 { width: 120px; height: 120px; display: inline-block; }
.square-box-125 { width: 125px; height: 125px; display: inline-block; }
.square-box-130 { width: 130px; height: 130px; display: inline-block; }
.square-box-135 { width: 135px; height: 135px; display: inline-block; }
.square-box-140 { width: 140px; height: 140px; display: inline-block; }
.square-box-145 { width: 145px; height: 145px; display: inline-block; }
.square-box-150 { width: 150px; height: 150px; display: inline-block; }
.square-box-155 { width: 155px; height: 155px; display: inline-block; }
.square-box-160 { width: 160px; height: 160px; display: inline-block; }
.square-box-165 { width: 165px; height: 165px; display: inline-block; }
.square-box-170 { width: 170px; height: 170px; display: inline-block; }
.square-box-175 { width: 175px; height: 175px; display: inline-block; }
.square-box-180 { width: 180px; height: 180px; display: inline-block; }
.square-box-185 { width: 185px; height: 185px; display: inline-block; }
.square-box-190 { width: 190px; height: 190px; display: inline-block; }
.square-box-195 { width: 195px; height: 195px; display: inline-block; }
.square-box-200 { width: 200px; height: 200px; display: inline-block; }

.box-content-center {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/*========= Head tag On Mobile ============*/
@media screen and (max-width: 992px) {
    h1, .h1 {
        font-size: 28px;
    }
}
@media screen and (max-width: 575px) {
    h1, .h1 {
        font-size: 24px;
    }
    h2, .h2 {
        font-size: 22px;
    }
    h3, .h3 {
        font-size: 20px;
    }
    h4, .h4 {
        font-size: 18px;
    }
}
@media screen and (max-width: 400px) {
    h1, .h1 {
        font-size: 22px;
    }
    h2, .h2 {
        font-size: 20px;
    }
    h3, .h3 {
        font-size: 18px;
    }
    h4, .h4 {
        font-size: 17px;
    }
}

/*===== Custom font size ==========*/
.display-7 {
    font-size: 2.25rem;
}
.display-8 {
    font-size: 2rem;
}

/*============= Card ============*/
.card {
    border-color: #eeeeee;
}
.border {
    border-color: #eeeeee !important;
}

/*======== Form ============*/
.form-label {
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--brand-dark)
}
::placeholder {
    color: #999999 !important;
    font-size: 13px;
}


select option {
    font-size: 14px;
}
.note-btn {
    font-size: 12px !important;
    padding: 1px 6px !important;
}

.note-toolbar {
    position: sticky;
    top: 0;
    background-color: #f5f5f5;
    z-index: 1;
}


/*============= Preloader ====================*/
.preloader {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, .75);
    display: none;
}

.fixed-preloader.preloader {
    position: fixed;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
}

.preloader.show {
    display: block;
}


.loader {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--brand-primary);
    width: 70px;
    height: 70px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); }
    100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes  spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}




/*=============== Single Image Preview =====================*/
.upload-with-preview {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center;
    border: 2px dashed var(--brand-primary);
    border-radius: 0.375rem;
    background-color: #FFFFFF;
    cursor: pointer;
    overflow: hidden;
}

.upload-with-preview.dragover {
    border-width: 3px;
    background-color: var(--brand-primary);
}

.upload-with-preview input {
    display: none;
}

.upload-with-preview .preview-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 2;
    color: transparent;
}

.preview-label-text {
    text-align: center;
    font-size: 14px;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: center;
    align-items: center;
}
.preview-label-text >*:not(:last-child),
.preview-label-text >*:not(:last-child) {
    margin-bottom: 3px;
}
.upload-btn {
    display: inline-block;
    padding: 1px 16px;
    color: var(--brand-dark);
    border: 1px solid var(--bs-primary);
    font-size: 13px;
    font-weight: 500;
    border-radius: 3px;
    margin-top: 6px;
}

.upload-with-preview.file-uploaded .preview-label-text {
    display: none;
}
.upload-with-preview:not(.file-uploaded) .preview-image {
    display: none;
}

/*============== Chat ===============*/
.chat-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat-nav-item {
    position: relative;
    padding: .75rem 1rem;
    border-bottom: 1px solid #eeeeee;
}

.chat {
    position: relative;
    overflow: auto;
    /*height: 60vh;*/
    /*padding: 1.5rem;*/
}

.chat-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    padding: 0 8px;
}

.chat-nav-item.unread {
    font-weight: 600;
    color: #010101;
    background-color: #fafafa;
}
.chat-nav-item.active {
    background-color: #f5f5f5;
}

.chat-item >* {
    margin-bottom: 4px;
}

.chat-item time {
    font-size: 12px;
    color: #6c757d;
}
.chat-item time {
    margin-left: 56px;
}
.chat-item.outgoing time {
    margin-left: auto;
    margin-right: 56px;
}

.chat-content-group {
    display: inline-flex;
    display: -webkit-inline-flex;
}

.outgoing .chat-content-group {
    justify-content: end;
}

.chat-avatar-group {
    padding-right: 24px;
}
.outgoing .chat-avatar-group {
    order: 1;
    padding-right: 0;
    padding-left: 24px;
}

.chat-avatar {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    --webkit-flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    --webkit-border-radius: 50%;
    overflow: hidden;
    background-color: #f0f0f0;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
    --webkit-border-radius: 50%;
    padding: 2px;
}


.chat-content {
    position: relative;
    background-color: #eff4fd;
    color: #000000;
    margin-top: 4px;
    width: auto;
    max-width: calc(100% - 120px);
    display: inline-block;
    font-size: 13px;
    padding: .5rem 1rem;
    border-radius: 0 6px 6px 6px;
    --webkit-border-radius: 0 6px 6px 6px;
    text-align: left !important;
    /*box-shadow: 0 2px 2px rgba(0, 0, 0, .1);*/
}

@media screen and (max-width: 767px) {
    .chat-content {
        max-width: calc(100% - 60px);
    }
}

.chat-content::before {
    position: absolute;
    content: '';
    border-bottom: 16px solid transparent;
    border-right: 16px solid #eff4fd;
    top: 0;
    left: -15px;
}

.outgoing .chat-content {
    border-radius: 6px 0 6px 6px;
    --webkit-border-radius: 6px 0 6px 6px;
    background-color: var(--brand-primary);
    color: #ffffff;
}

.outgoing .chat-content::before {
    top: 0;
    left: auto;
    right: -15px;
    border-top: 16px solid var(--brand-primary);
    border-right: 16px solid transparent;
    border-left: 0;
    border-bottom: 0;
}

.attach-icon-group {
    height: 28px;
    width: 28px;
    background-color: #f0f0f0;
    color: #3c353d;
    border-radius: 50%;
    --webkit-border-radius: 50%;
    display: -webkit-inline-flex;
    display: inline-flex;
    flex-direction: column;
    --webkit-flex-direction: column;
    justify-content: center;
    --webkit-justify-content: center;
    align-items: center;
    cursor: pointer;
}
.attach-icon-group:hover {
    background-color: #e0e0e0;
}

.chat-form-group {
    background-color: #FFFFFF;
    padding: .5rem 0;
}

.chat-input-group {
    display: flex;
    display: -webkit-flex;
    align-items: end;
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding: 4px;
}
.chat-input {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    border: none;
    resize: none;
}

.chat-input:focus {
    box-shadow: none;
}

.chat-input-element {
    padding: .5rem .75rem;
}

/*== Chatbox filter ========*/
.chat-list-filter {
    position: relative;
    padding: .5rem 1rem;
    background-color: #f5f5f5;
}

.chat-filter-input-group {
    position: relative;
}

.chat-filter-input-group input{
    min-width: 60px;
    padding-left: 1rem;
    padding-right: 30px;
    border-radius: 1.5rem;
    color: #888888;
    font-weight: 500;
}
.chat-filter-input-group input:focus {
    box-shadow: none;
    border-color: var(--brand-primary);
}

.chat-filter-input-group .chat-contact-filter-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: #888888;
    padding: 4px 8px;
}


/*========== Dropdown Menu ================*/
.dropdown-menu {
    box-shadow: 0 0.25rem 1rem rgba(165,163,174,.45);
    border: none;
    border-radius: 0.375rem;
    position: absolute;
    overflow: hidden;
}


@keyframes dropUpIn {
    from {
        transform: translateY(10px);
    }
}

.main-navbar .dropdown-menu.show {
    -webkit-animation-name: dropUpIn;
    animation-name: dropUpIn;
    animation-duration: .1s;
    animation-iteration-count: 1;
}


.dropdown-menu:not(.datepicker-dropdown) {
    padding: 0;
}

.dropdown-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    font-size: 17px;
}

.dropdown-header.auth-dropdown-header {
    background-color: var(--brand-primary);
    border-bottom: none;
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.dropdown-header.auth-dropdown-header * {
    color: #FFFFFF;
}

.dropdown-footer {
    padding: .75rem 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
}

.dropdown-title {
    margin-bottom: 0;
    color: var(--brand-dark);
    font-weight: 400;
    font-size: 16px;
}

.dropdown-menu.custom-dropdown-menu {
    min-width: 280px;
}

.notification-dropdown-menu {
    max-width: 330px;
    width: 100vw;
    overflow: hidden;
}

.dropdown-content {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    max-height: 75vh;
}


.dropdown-content .dropdown-body {
    flex-grow: 1;
    overflow: auto;
}

.main-navbar .custom-dropdown-menu .dropdown-body {
    padding: .5rem;
    min-height: 160px;
}

.dropdown-item {
    font-size: 14px;
    color: var(--brand-dark);
}

.custom-dropdown-item {
    display: flex;
    display: -webkit-flex;
    white-space: initial;
    padding: .75rem .75rem;
    -webkit-align-items: center;
    align-items: center;
}

.custom-dropdown-menu .dropdown-item {
    padding: .6rem .8rem;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.custom-dropdown-item:not(:last-child) {
    border-bottom: 1px solid var(--border);
}


.dropdown-icon-circle {
    display: inline-flex;
    display: -webkit-inline-flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: var(--soft-primary);
    color: var(--brand-primary);
}

.dropdown-time {
    color: var(--brand-muted);
    font-size: 13px;
}
.dropdown-notification-details {
    display: block;
    color: var(--brand-dark);
    font-size: 14px;
    margin-bottom: 2px;
}
.nav-avatar {
    position: relative;
    height: 28px;
    width: 28px;
    display: inline-block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: var(--brand-light);
    overflow: hidden;
}

.nav-avatar .nav-avatar-img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


.avatar-box {
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 6px solid rgba(23, 92,253, .1);
    overflow: hidden;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.avatar-box img {
    -webkit-border-radius: 50%;
    border-radius: 50%;
}


/*=========== Bg Transparent ================*/
.bg-transparent-1 { background-color: rgba(0, 0, 0, .1); }
.bg-transparent-2 { background-color: rgba(0, 0, 0, .2); }
.bg-transparent-3 { background-color: rgba(0, 0, 0, .3); }
.bg-transparent-4 { background-color: rgba(0, 0, 0, .4); }
.bg-transparent-5 { background-color: rgba(0, 0, 0, .5); }
.bg-transparent-6 { background-color: rgba(0, 0, 0, .6); }
.bg-transparent-7 { background-color: rgba(0, 0, 0, .7); }
.bg-transparent-8 { background-color: rgba(0, 0, 0, .8); }
.bg-transparent-9{ background-color: rgba(0, 0, 0, .7); }

.bg-light-transparent-1 { background-color: rgba(255, 255, 255, .1); }
.bg-light-transparent-2 { background-color: rgba(255, 255, 255, .2); }
.bg-light-transparent-3 { background-color: rgba(255, 255, 255, .3); }
.bg-light-transparent-4 { background-color: rgba(255, 255, 255, .4); }
.bg-light-transparent-5 { background-color: rgba(255, 255, 255, .5); }
.bg-light-transparent-6 { background-color: rgba(255, 255, 255, .6); }
.bg-light-transparent-7 { background-color: rgba(255, 255, 255, .7); }
.bg-light-transparent-8 { background-color: rgba(255, 255, 255, .8); }
.bg-light-transparent-9 { background-color: rgba(255, 255, 255, .9); }


/*================ Icon Hover SVG Color Change =================*/
.hover-icon-to-primary img,
.hover-icon-to-primary svg {
    transition: filter 0.3s ease;
}
.hover-icon-to-primary:hover img,
.hover-icon-to-primary:hover svg {
    filter: invert(48%) sepia(92%) saturate(2843%) hue-rotate(4deg) brightness(102%) contrast(105%);
}

.icon-self-hover-to-primary {
    transition: filter 0.3s ease;
}
.icon-self-hover-to-primary:hover {
    filter: invert(48%) sepia(92%) saturate(2843%) hue-rotate(4deg) brightness(102%) contrast(105%);
}


/*=============== message-box =================*/
.message-box {
    display: flex;
    display: -webkit-flex;
    background-color: #FFFFFF;
    background-image: url("../global/image/chat-bg.jpg");
    border: 1px solid #dddddd;
    border-radius: 1rem;
    font-size: 14px;
    height: calc(100vh - 120px);
    position: relative;
}



.message-box-nav {
    width: calc(var(--aside-width) + 80px);
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    border-right: 1px solid #dddddd;
    background-color: #FFFFFF;
}

@media screen and (max-width: 991px) {
    .message-box-nav {
        border-radius: 1rem;
    }
}

.message-box-nav-header {
    padding: 1rem 1rem;
    border-bottom: 1px solid #eeeeee;
}

@media screen and (max-width: 991px) {
    .message-box-nav-header {
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }
}

.message-box-nav-body {
    flex-grow: 1;
    overflow: auto;
}

.message-box-body {
    width: var(--body-width);
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

@media screen and (max-width: 991px) {
    .message-box-nav {
        position: absolute;
        background-color: #FFFFFF;
        border: 1px solid #cccccc;
        height: calc(100vh - 120px);
        z-index: 2;
    }

    .message-box:not(.show) .message-box-nav {
        display: none !important;
    }

    .message-box-body {
        width: 100%;
    }

    .message-box-content-body:only-child {
        border-radius: 1rem;
    }
}

@media screen and (max-width: 991px) {
    .message-box-nav {
        width: 100%;
    }
}


.message-box-content-header {
    border-bottom: 1px solid #dddddd;
    padding: .75rem 1rem;
    background-color: #ffffff;
    border-top-right-radius: 1rem;
}
@media screen and (max-width: 991px) {
    .message-box-content-header {
        border-top-left-radius: 1rem;
    }
}
.message-box-content-body {
    position: relative;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    padding: 1rem;
    z-index: 1;
    background-color: rgba(255, 255, 255, .9);
    overflow: auto;
}
.message-box-content-footer {
    border-top: 1px solid #dddddd;
    padding: .75rem 1rem;
    border-bottom-right-radius: 1rem;
    background-color: #FFFFFF;
}
@media screen and (max-width: 991px) {
    .message-box-content-footer {
        border-bottom-left-radius: 1rem;
    }
}

/*=========== page Error code ================*/
.error-code{
    font-size: 130px;
    color: var(--brand-primary);
    text-shadow:
        1px 1px 1px #fac8a7,
        2px 2px 1px #fac8a7,
        3px 3px 1px #fac8a7,
        4px 4px 1px #fac8a7,
        5px 5px 1px #fac8a7,
        6px 6px 1px #fac8a7,
        7px 7px 1px #fac8a7,
        8px 8px 1px #fac8a7,
        25px 25px 8px rgba(0,0,0, 0.2);
}