:root {
    --note-bg-color: rgb(255, 250, 234);
    --muted-color: #b8b8b8;
    --bs-bg-opacity: 1;
    --bs-border-color: #ececec;
    --border-color: #ececec;
    --white: #fff;
    --warning: #ffc107;
    --indigo: #6610f2;
    --primary: #00aaf0;
    --secondary: #637381;
    --success: #34ab84;
    --info: #0dcaf0;
    --danger: #ff4842;
    --light: #f8f9fa;
    --dark: #212529;
    --round-default: 10px;
    --round-10: 10px;
    --transition-duration: .25s;
    --jumbotron: #dae3ef;
    --base-color: #f9f9f9;
    --navbar-bg: #fff;
    --sidebar-bg: #fff;
    --font-color: #323232;
    --font-hover-color: darken(#323232, 5%);
    --menubar-font-color: #505050;
    --input-search-box-border: #f5f8ff;
    --dropdown-menu-bg: #fff;
    --dropdown-item-hover-bg: var(--base-color);
    --card-color: #fff;
    --box-shadow: 0px 0px 15px rgba(0, 0, 0, .05);
    --navbar-box-shadow: 9px 2px 10px rgba(0, 0, 0, .05);
    --navbar-primary-bg: #fff;
    --sidebar-box-shadow: 0px 0px 15px rgba(0, 0, 0, .05);
    --vertical-tab-header-bg: #fbfcff;
    --vertical-tab-icon-shadow: none;
    --vertical-tab-icon-bg: #fff;
    --form-control-bg: #f9f9f9;
    --select-items-hover-bg: rgb(236.25, 236.25, 236.25);
    --accordion-header-bg: #f9f9f9;
    --default-custom-control-bg: #fff;
    --btn-light-bg: #fff;
    --btn-secondary-bg: #9397a0;
    --btn-secondary-hover-bg: rgb(119.8669950739, 124.8719211823, 136.1330049261);
    --icon-hover-bg: rgb(163.5, 228.3125, 255);
    --authentication-form-bg: #fff;
    --btn-filter-bg: #fff;
    --range-slider-baseline-bg: #9397a0;
    --calendar-bg: #fff;
    --bg-x-icon: rgb(163.5, 228.3125, 255);
    --shadow-x-icon: none;
    --search-box-bg: #fff;
    --bg-input-readonly: #e9ecef;
    --chips-bg: rgb(231.15, 231.15, 231.15);
    --tab-step-before-bg: #fff;
    --time-picker-bg: #fff;
    --modal-header-footer-bg: #fff;
    --modal-body-bg: #fff;
    --avaters-border-color: #fff;
    --avatars-box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, .2);
    --success-toast-bg: #2b303b;
    --scrollbar-thumb-color: rgb(138, 220.875, 255);
    --scrollbar-thumb-hover-color: #57ceff;
    --menu-title-shadow: none;
    --submenu-shadow: none;
    --select-arrow: url(/build/assets/chevron-down-69912409.svg);
    --select-arrow-btn-secondary: url(/build/assets/chevron-down-69912409.svg);
    --close-cursore: url(/build/assets/close-cursor-light-1c264877.png);
    --modal-close-icon: url(/build/assets/x-light-891da901.svg);
    --not-found-opacity: 1;
    --search-result-dropdown-shadow: 0px 5px 5px 0px rgba(0, 0, 0, .05);
    --kanban-scrollbar-track: rgb(240.25, 241.5, 244.25);
    --kanban-scrollbar-thumb: rgb(210.75, 214.5, 222.75);
    --vue-toaster-bg: rgba(0, 0, 0, .8);
    --table-striped-bg: rgb(251.55, 251.55, 251.55);
    --secondary-button-color: rgb(196.4407894737, 203.7039473684, 210.0592105263);
    --secondary-button-font-color: var(--black);
    --product-search-bg: #fcfcfc;
    --product-search-control-bg: var(--white);
    --notification-color: var(--dark);
    --date-time: var(--btn-secondary-bg);
    --template-variables: #f5f7fe;
    --import-board: #f5f7fe;
    --sidebar-open-overlay-color: linear-gradient( 70deg, rgb(22 28 36 / 45%), #161c24c9 );
    --table-th-font-color: rgb(99, 115, 129);
    --table-thead-bg-color: rgb(244, 246, 248);
    --top-bar: rgba(255, 255, 255, .8);
    --dropzone-bg-color: #f1faff;
    --icon-shadow: rgba(0, 0, 0, .1);
}

.login-left {
    background-color: #fff;
}

.login-right {
    background-position: center;
    background-size: cover;
}

.status-card {
    background: var(--card-color);
    padding: 20px;
    border-radius: var(--round-default);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px
}

.status-card .items:nth-child(1) {
    flex: 1 1 auto
}

.status-card .items:nth-child(1) .title {
    font-size: 16px;
    font-weight: 700;
    color: var(--font-color)
}

.status-card .items:nth-child(1) .sub-title {
    font-size: 13px;
    font-weight: normal;
    text-transform: capitalize;
    color: var(--primary)
}

.status-card .items:nth-child(2) {
    border-radius: var(--round-default);
    background-color: #00aaf0cc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    color: #fff;
    flex-basis: 60px;
    height: 60px
}

.status-card .items:nth-child(2) i {
    font-size: 2.1rem
}

.status-card-square {
    margin-bottom: 15px;
    flex-direction: column-reverse;
    background: var(--card-color);
    text-align: center;
    padding: 20px;
    border-radius: var(--round-default);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px
}

.status-card-square .items:nth-child(1) {
    flex: 1 1 auto
}

.status-card-square .items:nth-child(1) .title {
    font-size: 16px;
    font-weight: 700;
    color: var(--font-color)
}

.status-card-square .items:nth-child(1) .sub-title {
    font-size: 12px;
    font-weight: lighter;
    text-transform: capitalize;
    color: var(--primary)
}

.status-card-square .items:nth-child(2) {
    border-radius: 50%;
    background-color: #00aaf01a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    color: var(--primary);
    height: 75px;
    width: 75px
}

.status-card-square .items:nth-child(2).violet {
    background-color: #00aaf01a
}

.status-card-square .items:nth-child(2).violet i {
    color: #fff
}

.status-card-square .items:nth-child(2).lightgreen {
    background-color: #4bccb81a
}

.status-card-square .items:nth-child(2).lightgreen i {
    color: #4bccb8
}

.status-card-square .items:nth-child(2).lightpink {
    background-color: #f36fad1a
}

.status-card-square .items:nth-child(2).lightpink i {
    color: #f36fad
}

.status-card-square .items:nth-child(2).lightblue {
    background-color: #36b9f51a
}

.status-card-square .items:nth-child(2).lightblue i {
    color: #36b9f5
}

.status-card-square .items:nth-child(2) i {
    font-size: 2.5rem
}

body .mb-21px {
    margin-bottom: 21px;
}