/*
*   Hesta 2023
*   Bootstrap v5
*   Last edit : 15/05/2024
*
*   1.0 CONTENT
*   --- 1.1 Typography
*   --- 1.2 Images
*   --- 1.3 Tables
*   --- 1.4 Figures
*
*   2.0 FORMS
*   --- 2.1 Form control
*   --- 2.2 Select
*   --- 2.3 Checks & radios
*   --- 2.4 Range
*   --- 2.5 Input group
*   --- 2.6 Floating labels
*   --- 2.7 Layout
*   --- 2.8 Validation
*
*   3.0 COMPONENTS
*   --- 3.1 Accordion
*   --- 3.2 Alerts
*   --- 3.3 Badge
*   --- 3.4 Breadcrumb
*   --- 3.5 Buttons
*   --- 3.6 Button group
*   --- 3.7 Card
*   --- 3.8 Carousel
*   --- 3.9 Close button
*   --- 3.10 Collapse
*   --- 3.11 Dropdowns
*   --- 3.12 List group
*   --- 3.13 Modal
*   --- 3.14 Navs & tabs
*   --- 3.15 Navbar
*   --- 3.16 Offcanvas
*   --- 3.17 Pagination
*   --- 3.18 Popovers
*   --- 3.19 Progress
*   --- 3.20 Scrollspy
*   --- 3.21 Spinners
*   --- 3.22 Toasts
*   --- 3.23 Tooltips
*   --- 3.24 Chip
*
*   4.0 UTILITIES
*
*/

:root {
    --bs-blue: #283380;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ff8d65;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fafbfc;
    --bs-gray: #6d718c;
    --bs-gray-dark: #363846;
    --bs-gray-100: #e7e8ef;
    --bs-gray-200: #cfd1df;
    --bs-gray-300: #b8bbcf;
    --bs-gray-400: #a0a4bf;
    --bs-gray-500: #888daf;
    --bs-gray-600: #6d718c;
    --bs-gray-700: #525569;
    --bs-gray-800: #363846;
    --bs-gray-900: #1b1c23;
    --bs-primary: #283380;
    --bs-primary-hover: #161e54;
    --bs-secondary: #6d718c;
    --bs-success: #19B195;
    --bs-info: #17A2B8;
    --bs-warning: #F8A233;
    --bs-danger: #dc3545;
    --bs-bg-danger: #ffd2d6;
    --bs-light: #d7d8e2;
    --bs-light-hover: #cecfd9;
    --bs-dark: #343A30;
    --bs-indigo: #727dc5;
    --bs-purple: #5d3e82;
    --bs-pink: #f9809a;
    --bs-primary-rgb: 40,51,128;
    --bs-secondary-rgb: 109,113,140;
    --bs-success-rgb: 25,135,84;
    --bs-info-rgb: 13,202,240;
    --bs-info-text-emphasis: #182c8e;
    --bs-warning-rgb: 255,141,101;
    --bs-danger-rgb: 220,53,69;
    --bs-light-rgb: 231,232,239;
    --bs-dark-rgb: 27,28,35;
    --bs-indigo-rgb: 114,125,197;
    --bs-purple-rgb: 93,62,130;
    --bs-pink-rgb: 249,128,154;
    --bs-white-rgb: 250,251,252;
    --bs-black-rgb: 14,15,16;
    --bs-body-color-rgb: 54,56,70;
    --bs-body-bg-rgb: 231,232,239;
    --bs-font-sans-serif: "Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg,rgba(250,251,252,.15),rgba(250,251,252,0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #363846;
    --bs-body-bg: #f1f2f7;
    --bs-link-color-rgb: 40,51,128;
    --bs-link-decoration: none;
    --bs-info-bg-subtle: #d1e6fb;
    --bs-info-text: #034e81;
    --bs-alert-link-color: #1e72b9;

    --headings-color: #363846;
    --h1-color: #5a65a9;
    --h2-color: var(--bs-primary);
    --h2-weight: 500;
    --text-muted: #6d6f77;
    --blue: #1d2c97;
    --blue-rgb: 29,44,151;
    --purple: #6931ad;
    --purple-rgb:105,49,173;
    --purple-hover: #3c235a;
    --pink: #f74d6c;
    --pink-rgb: 247,77,108;
    --grey: #6d718c;
    --grey-rgb: 109,113,140;
    --dark-purple: #5d3e82;
    --ultra-light: #f6f6f9;

    --bs-success-text: #116f69;
    --bs-success-bg-subtle: #dbf7f3;
    --bs-info-text: #414ea7;
    --bs-info-bg-subtle: #dfe3f7;
    --bs-light-text: #60656d;
    --bs-light-bg-subtle: #f0eff5;

    --bs-btn-sm-padding-y: .3rem;
    --bs-btn-sm-padding-x: .5rem;

    --window-width: 100vw;
    --bs-border-radius-lg: .75rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-transition-base: all .15s ease-in-out;
    --bs-breadcrumb-font-size: .85rem;
    --shadow: 0px 0px 20px 5px rgba(0,0,0,0.01);
}

body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(14,15,16,0);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    margin: 0;
    text-align: var(--bs-body-text-align)
}

hr {
    background-color: currentColor;
    border: 0;
    color: inherit;
    margin: 1rem 0;
    opacity: .25
}

hr:not([size]) {
    height: 1px
}

/*   1.0 CONTENT */

/*  --- 1.1 Typography */

.h1, .h2, .h3, .h4, .h5, .h6, 
h1, h2, h3, h4, h5, h6 {
    color: var(--headings-color);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 1rem;
    margin-top: 0;
}

.h1, h1 {
    font-size: calc(1.375rem + 1.5vw);
    color: var(--h1-color);
    margin-bottom: 1.5rem;
}

@media (min-width: 1200px) {
    .h1, h1 {
        font-size: 2.2rem;
    }
}

.h2, h2 {
    font-size: calc(1.325rem + .9vw);
    color: var(--h2-color);
    font-weight: var(--h2-weight);
}

@media (min-width: 1200px) {
    .h2, h2 {
        font-size: 1.7rem;
    }
}

.h3, h3 {
    font-size: calc(1.3rem + .6vw)
}

@media (min-width: 1200px) {
    .h3, h3 {
        font-size: 1.4rem;
    }
}

.h4, h4 {
    font-size: calc(1.275rem + .3vw)
}

@media (min-width: 1200px) {
    .h4,h4 {
        font-size:1.5rem;
    }
}

.h5, h5 {
    font-size: 1.25rem;
}

.h6, h6 {
    font-size: 1rem;
}

.subtitle {
    font-size: .9rem;
    color: var(--h1-color);
    font-weight: 500;
    text-transform: uppercase;
}

p {
    margin-bottom: 1rem;
    margin-top: 0;
}

a.stretched-link {
    text-decoration: none;
}

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

.number {
    font-size: 2.4rem;
    letter-spacing: 0px;
    line-height: 1;
    font-weight: 400;
}

.number.number-lg {
    font-size: 3.2rem;
}
.number.number-sm {
    font-size: 1.8rem;
    font-weight: 600;
}

/*  --- 1.2 Images */

/*  --- 1.3 Tables */

.table {
    font-size: .8rem;
    font-weight: 500;
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #363846;
    --bs-table-striped-bg: rgba(231,232,239,.3);
    --bs-table-active-color: #363846;
    --bs-table-active-bg: rgba(231,232,239,.1);
    --bs-table-hover-color: #363846;
    --bs-table-hover-bg: rgba(231,232,239,.5);
    border-color: #b8bbcf;
    color: #363846;
    margin-bottom: 1rem;
    vertical-align: middle;
    width: 100%
}

.table>:not(caption)>*>* {
    padding-left: 1rem;
    padding-right: 1rem
}

.table>:not(caption)>*>* {
    border-bottom-width: 0;
}

.table>:not(:first-child) {
    border-top-color: #283380
}

.table th {
    color: #283380
}

.table th a{
    text-decoration: none;
}

.table-actions {
    text-align: right;
    white-space: nowrap;
    width: 0
}


table.dataTable th {
    cursor: move;
    /* height: 3rem; */
    padding: 1rem;
    position: relative
}

/*table.dataTable>:not(caption)>*>* {
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
    padding: .5rem
}*/
/*table.dataTable td {
    text-align: center;
}*/

#tableResults th:after {
    border-top: 5px dotted #b8bbcf;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 1.5rem
}

table.dataTable th a {
    align-items: center;
    display: flex;
    height: 100%;
/*    padding: 0 1rem;
    text-align: center*/
}

/*table.dataTable.table-striped>tbody>tr.odd>* {
    box-shadow: none !important;
    background-color: #E7E8EF80;
    cursor: pointer;
}


table.dataTable.table-striped>tbody>tr.odd:hover {
    box-shadow: none !important;
    background-color: #e7e8ef61;
}

table.dataTable.table-striped>tbody>tr.even:hover {
    box-shadow: none !important;
    background-color: #e7e8ef61;
}*/

.table-lg>:not(caption)>*>* {
    padding: 1rem 0.75rem;
}

/*  --- 1.4 Figures */

/*   2.0 FORMS */

/*  --- 2.1 Form control */

.form-control {
    --bs-border-width: 1px;
    --bs-border-color: #cfd1df;
    --bs-border-radius: .375rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none !important;
    background-clip: padding-box !important;
    background-color: #fafbfc !important;
    color: #363846 !important;
    display: block;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    padding: .375rem .75rem !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    width: 100%
}

.form-control:focus {
    background-color: #fafbfc;
    border-color: #9499c0;
    box-shadow: 0 0 0 .15rem rgba(40,51,128,.1);
    color: #363846;
    outline: 0 ;
}

.form-control-sm {
    padding: var(--bs-btn-sm-padding-y) var(--bs-btn-sm-padding-x)!important;
}


/*  --- 2.2 Select */

.form-select {
    --bs-form-control-bg: #fff;
}

/*  --- 2.3 Checks & radios */

.form-check-input{
    background-color: white;
}

.form-check-input:focus {
    border-color: #9499c0;
    box-shadow: 0 0 0 .25rem rgba(40,51,128,.25);
    outline: 0
}

.form-check-input:checked {
    background-color: #283380;
    border-color: #283380;
}

/*  --- 2.4 Range */

/*  --- 2.5 Input group */

.form-group {
    margin-bottom: 1rem
}

.input-group-text {
    align-items: center;
    background-color: #cfd1df;
    border: 1px solid #cfd1df;
    border-radius: 0.25rem;
    color: #363846;
    display: flex;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    text-align: center;
    white-space: nowrap;
}

/*  --- 2.6 Floating labels */

/*  --- 2.7 Layout */

/*  --- 2.8 Validation */

/*   3.0 COMPONENTS  */

/*  --- 3.1 Accordion */

/*  --- 3.2 Alerts */

.alert {
    --bs-alert-border: none;
    border: var(--bs-alert-border);
}


/*  --- 3.3 Badge */

/*  --- 3.4 Breadcrumb */

.breadcrumb a{
    text-decoration: none;
}

/*  --- 3.5 Buttons */

.btn-success {
    background-color: var(--bs-green) !important;
    border-color: var(--bs-green) !important;
    color: var(--bs-white) !important
}

.btn-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: var(--bs-white) !important
}

.btn-bg-danger {
    background-color: var(--bs-bg-danger) !important;
    border-color: var(--bs-bg-danger) !important;
    color: var(--bs-danger) !important
}

.btn-bg-danger:hover {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: var(--bs-white) !important
}

.btn-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: white;
}
.btn-warning:hover {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: white;
}

.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-white) !important
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

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

.btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: var(--bs-white) !important
}
.btn-group-sm>.btn, .btn-sm {
    padding: var(--bs-btn-sm-padding-y) var(--bs-btn-sm-padding-x);
}

.btn-light {
    background-color: var(--bs-light) !important;
    border-color: var(--bs-light) !important;
    color: #0e0f10
}
.btn-light:hover {
    background-color: var(--bs-light-hover) !important;
    border-color: var(--bs-light-hover) !important;
}

.btn-success-light {
    background-color: #CDF5ED;
    border-color: #CDF5ED;
    color: #0F8B74;
}

.btn-success-light:hover {
    background-color: #CDF5ED !important;
    border-color: #CDF5ED !important;
    color: #0F8B74 !important;
}

.btn-chip {
    border-radius: 50%
}

.btn-chip ion-icon,.btn-square ion-icon {
    margin-right: 0
}

.btn-chip.btn-sm,.btn-group-sm>.btn-chip.btn,.btn-group-sm>.btn-square.btn,.btn-square.btn-sm {
    padding-left: .25rem;
    padding-right: .25rem;
    width: calc(1.5em + .5rem + 2px)
}

.btn-chip.btn-lg,.btn-group-lg>.btn-chip.btn,.btn-group-lg>.btn-square.btn,.btn-square.btn-lg {
    height: 4rem;
    width: 4rem
}


.btn-chip,.btn-square {
    padding-left: .375rem;
    padding-right: .375rem;
    width: calc(1.5em + .75rem + 2px)
}

.btn.filter{
    --bs-btn-color: #643997;
    --bs-btn-border-color: #643997;
    --bs-btn-hover-color: #643997;
    --bs-btn-hover-bg: #E6D9F6;
    --bs-btn-hover-border-color: #643997;
    --bs-btn-active-color: #643997;
    --bs-btn-active-bg: #E6D9F6;
    --bs-btn-active-border-color: #643997;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-padding-y: 0.375rem; 
    font-size: .9rem;  
}

/*  --- 3.6 Button group */

.btn-group-lg>.btn,.btn-lg {
    border-radius: .3rem;
    font-size: 18px !important;
    padding: .5rem 1rem
}

.btn-group-sm>.btn,.btn-sm {
    border-radius: .2rem;
    font-size: .875rem !important;
}

/*  --- 3.7 Card */

.card {
    --bs-card-border-width: 0;
    --bs-card-border-radius: var(--bs-border-radius-xl); 
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-box-shadow: var(--shadow);
    --bs-card-hover-box-shadow: 0px 0px 20px 5px rgba(0,0,0,.1);
    --bs-card-bg: #fff;
    box-shadow: var(--bs-card-box-shadow);  
}

.card > hr {
    margin-left: 0;
    margin-right: 0
}

.card > .list-group {
    border-bottom: inherit;
    border-top: inherit
}

.card>.list-group:first-child {
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
    border-top-width: 0
}

.card>.list-group:last-child {
    border-bottom-left-radius: calc(.25rem - 1px);
    border-bottom-right-radius: calc(.25rem - 1px);
    border-bottom-width: 0
}

.card>.card-header+.list-group,.card>.list-group+.card-footer {
    border-top: 0
}


.card-title {
    margin-bottom: .5rem
}

.card-subtitle {
    margin-top: -.25rem
}

.card-subtitle,.card-text:last-child {
    margin-bottom: 0
}

.card-link:hover {
    text-decoration: none
}

.card-link+.card-link {
    margin-left: 1rem
}

.card-header {
    background-color: rgba(14,15,16,.03);
    border-bottom: 1px solid rgba(14,15,16,.125);
    margin-bottom: 0;
    padding: .5rem 1rem
}

.card-header:first-child {
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0
}

.card-footer {
    background-color: rgba(14,15,16,.03);
    border-top: 1px solid rgba(14,15,16,.125);
    padding: .5rem 1rem
}

.card-footer:last-child {
    border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px)
}

.card-header-tabs {
    border-bottom: 0;
    margin-bottom: -.5rem;
    margin-left: -.5rem;
    margin-right: -.5rem
}

.card-header-tabs .nav-link.active {
    background-color: #fafbfc;
    border-bottom-color: #fafbfc
}

.card-header-pills {
    margin-left: -.5rem;
    margin-right: -.5rem
}

.card-img-overlay {
    border-radius: calc(.25rem - 1px);
    bottom: 0;
    left: 0;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 0
}

.card-img,.card-img-bottom,.card-img-top {
    width: 100%
}

.card-img,.card-img-top {
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px)
}

.card-img,.card-img-bottom {
    border-bottom-left-radius: calc(.25rem - 1px);
    border-bottom-right-radius: calc(.25rem - 1px)
}

.card-group>.card {
    margin-bottom: .75rem
}

.card.card-hover{
    transition: all ease .24s;
}

.card.card-hover:hover{
    box-shadow: var(--bs-card-hover-box-shadow);
}
.card-hover.bg-dark-purple:hover{
    background-color: var(--purple-hover)!important;
}

@media (min-width: 576px) {
    .card-group {
        display:flex;
        flex-flow: row wrap
    }

    .card-group>.card {
        flex: 1 0 0%;
        margin-bottom: 0
    }

    .card-group>.card+.card {
        border-left: 0;
        margin-left: 0
    }

    .card-group>.card:not(:last-child) {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0
    }

    .card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top {
        border-top-right-radius: 0
    }

    .card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom {
        border-bottom-right-radius: 0
    }

    .card-group>.card:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0
    }

    .card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top {
        border-top-left-radius: 0
    }

    .card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom {
        border-bottom-left-radius: 0
    }
}

.card-table {
    --bs-card-border-radius: .6rem; 
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.02);
    --bs-card-bg: #fff;
    box-shadow: var(--bs-card-box-shadow);
    background-color: var(--bs-card-bg); 
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    border-radius: var(--bs-card-border-radius); 
    border-collapse: separate !important;
    border-spacing: 0; 
}

/*  --- 3.8 Carousel */

/*  --- 3.9 Close button */

/*  --- 3.10 Collapse */

/*  --- 3.11 Dropdowns */

/*  --- 3.12 List group */

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-item-padding-y: 1rem;
}

/*  --- 3.13 Modal */

@media (min-width: 992px) and (max-width: 1200px) {
    .modal-xl, .modal-lg {
        --bs-modal-width: 920px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .modal-xl, .modal-lg {
        --bs-modal-width: 700px;
    }
}

.modal {
    --bs-modal-padding: 2rem;
}

/*  --- 3.14 Navs & tabs */

.card-top-tabs.nav-tabs{
    border-bottom: none;
    margin-bottom: -1px;
}

.card-top-tabs.nav-tabs + .card{
    --bs-card-box-shadow: 0px 20px 20px 5px rgba(0,0,0,0.02);
}

.card-top-tabs.nav-tabs .nav-item:first-child{
    margin-left: 1.5rem;
}

.card-top-tabs.nav-tabs .nav-item .nav-link{
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    padding: 0.75rem 1.25rem;    
}

.card-top-tabs.nav-tabs .nav-item .nav-link.active,
.card-top-tabs.nav-tabs .nav-item.show .nav-link{
    --bs-card-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.02);
    background-color: #fff;    
    border: none;
    box-shadow: var(--bs-card-box-shadow);
}

@media (max-width: 991px){
    .card-top-tabs.nav-tabs{
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .card-top-tabs.nav-tabs .nav-item .nav-link{
        border-radius: 0.5rem; 
        border-style: solid;
        border-color: #c0c5c9;   
    } 

    .card-top-tabs.nav-tabs .nav-item:first-child{
        margin-left: 0;
    }   
}

/*  --- 3.15 Navbar */

/*  --- 3.16 Offcanvas */

/*  --- 3.17 Pagination */

/*  --- 3.18 Popovers */

/*  --- 3.19 Progress */

/*  --- 3.20 Scrollspy */

/*  --- 3.21 Spinners */

/*  --- 3.22 Toasts */

/*  --- 3.23 Tooltips */

/*  --- 3.24 chip */
.chip {
    align-items: center;
    background-color: #fafbfc;
    border-radius: 50%;
    display: inline-flex;
    font-size: 1rem;
    height: 2rem;
    justify-content: center;
    overflow: hidden;
    vertical-align: middle;
    width: 2rem
}

.chip img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.chip.chip-md {
    font-size: 1.5rem;
    height: 3rem;
    width: 3rem
}

.chip.chip-lg {
    font-size: 2rem;
    height: 4rem;
    width: 4rem
}

.chip-primary {
    background-color: #bfc2d9;
    color: #283380
}

.chip-secondary {
    background-color: #d3d4dd;
    color: #6d718c
}

.chip-success {
    background-color: #badbcc;
    color: #198754
}

.chip-info {
    background-color: #b6effb;
    color: #0dcaf0
}

.chip-warning {
    background-color: #ffddd1;
    color: #ff8d65
}

.chip-danger {
    background-color: #f5c2c7;
    color: #dc3545
}

.chip-light {
    background-color: #f8f8fa;
    color: #e7e8ef
}

.chip-dark {
    background-color: #bbbbbd;
    color: #1b1c23
}

.chip-indigo {
    background-color: #d5d8ee;
    color: #727dc5
}

.chip-purple {
    background-color: #cec5da;
    color: #5d3e82
}

.chip-pink {
    background-color: #fdd9e1;
    color: #f9809a
}

/*  --- 3.25 Icon */

table .close {
    --ionicon-stroke-width: 30px;
    font-size: 1.7rem;
    color:#DC3545;
}
table .checkmark {
    --ionicon-stroke-width: 24px;
    font-size: 1.7rem;
    color:#19B195;
}

td .bg-primary {
    --bs-bg-opacity: 0.15;
    background-color: rgba(var(--bs-primary-rgb),var(--bs-bg-opacity))!important;
    color:var(--bs-primary);
    font-size:0.8rem;
    border-radius: 3px;
}

td .bg-success {
    --bs-bg-opacity: 0.15;
    background-color: rgba(var(--bs-success-rgb),var(--bs-bg-opacity))!important;
    color:var(--bs-success);
    font-size:0.8rem;
    border-radius: 3px;
}

td .bg-danger {
    --bs-bg-opacity: 0.15;
    background-color: rgba(var(--bs-danger-rgb),var(--bs-bg-opacity))!important;
    color:var(--bs-danger);
    font-size:0.8rem;
    border-radius: 3px;
}


/*   4.0 UTILITIES  */

/* fit-cover */

.fit-cover{
    width: 100%;
    height: 100%;
    object-fit: cover;   
}

.row-link {
    cursor: pointer
}
.large-icon {
    font-size: 40px !important;
}

/* color */

.blue{
    color: var(--blue)!important;
}
.bg-blue{
    background-color: var(--blue)!important;
}
.light-blue-bg{
    background-color: rgba(var(--blue-rgb), .1);
}

/**/

.purple{
    color: var(--purple)!important;    
}
.bg-purple{
    background-color: var(--purple)!important;    
}
.light-purple-bg{
    background-color: rgba(var(--purple-rgb), .1);
}
.bg-dark-purple{
    background-color: var(--dark-purple)!important;    
}
.dark-purple{
    color: var(--dark-purple)!important;    
}

/**/

.pink{
    color: var(--pink)!important;    
}
.bg-pink{
    background-color: var(--pink)!important;    
}
.light-pink-bg{
    background-color: rgba(var(--pink-rgb), .1);
}

/**/

.grey{
    color: var(--grey)!important;    
}
.bg-grey{
    background-color: var(--grey)!important;    
}
.light-grey-bg{
    background-color: rgba(var(--grey-rgb), .1);
}

/*  */


.bg-ultra-light{
    background-color: var(--ultra-light)!important;    
}


/* progress bar */

.bar-container{
    display: flex;
    width: 210px;
    padding-top: 25px;
    border-radius: 8px;
    background: #fff;
    row-gap: 30px;
    flex-direction: column;
    align-items: center;
}
.circular-progress{
    position: relative;
    height: 125px;
    width: 125px;
    border-radius: 50%;
    background: conic-gradient(#7d2ae8 3.6deg, #ededed 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.circular-progress::before{
    content: "";
    position: absolute;
    height: 105px;
    width: 105px;
    border-radius: 50%;
    background-color: #fff;
}
.progress-value{
    position: relative;
    font-size: 1.8rem;
    font-weight: 700;
    color: #7d2ae8;
}
.text{
    font-size: 14px;
    font-weight: 600;
    color: #363846;
}
.spinner-border{
    border: 0.25em solid #283380 !important;
    border-right-color: transparent !important;
}


/* tags */

.tag {
    border-radius: 4px;
    padding: 3px 2px;
    font-size: 11px;
}

.tag-warning {
    background-color: #F8A233;
}

.tag-success {
    background-color: #19B195;
}

.tag-danger {
    background-color: #DC3545;
}

.tag-info {
    background-color: #17A2B8;
}

.tag-primary {
    background-color: #283380;
}

.tag-light {
    background-color: #e5e6ed;
}

/* border */

.border {
    border: 1px solid #b8bbcf!important
}

.border-0 {
    border: 0!important
}

.border-top {
    border-top: 1px solid #b8bbcf!important
}

.border-top-0 {
    border-top: 0!important
}

.border-end {
    border-right: 1px solid #b8bbcf!important
}

.border-end-0 {
    border-right: 0!important
}

.border-bottom {
    border-bottom: 1px solid #dddee5!important
}

.border-bottom-0 {
    border-bottom: 0!important
}

.border-start {
    border-left: 1px solid #b8bbcf!important
}

.border-start-0 {
    border-left: 0!important
}

.border-primary {
    border-color: #283380!important
}

.border-secondary {
    border-color: #6d718c!important
}

.border-success {
    border-color: #198754!important
}

.border-info {
    border-color: #0dcaf0!important
}

.border-warning {
    border-color: #ff8d65!important
}

.border-danger {
    border-color: #dc3545!important
}

.border-light {
    border-color: #e7e8ef!important
}

.border-dark {
    border-color: #1b1c23!important
}

.border-indigo {
    border-color: #727dc5!important
}

.border-purple {
    border-color: #5d3e82!important
}

.border-pink {
    border-color: #f9809a!important
}

.border-white {
    border-color: #fafbfc!important
}

.list-overlap {
    display: flex;
    list-style: none;
    padding-left: 0
}

.list-overlap>li {
    position: relative
}

.list-overlap>li:not(:first-child) {
    margin-left: -1rem
}

.list-overlap>li>* {
    border: 4px solid #e7e8ef
}

.table-centered th,
.table-centered td {
    text-align: center;
}

.border-none {
    border: none!important
}

/*  badge */

.badge-purple {
    color: #5D3E82;
    background-color: #F0E6FF;
}

.badge-success {
    color: #3f823e;
    background-color: #e8ffe6;
}

.cursor-pointer{
    cursor: pointer;
}

.ribbon-icon{
    cursor: pointer;
}