@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";

/* src/assets/scss/styles.scss */
:root {
    --body-bg-rgb:
        249,
        250,
        252;
    --primary-rgb:
        92,
        103,
        247;
    --primary-tint1-rgb:
        227,
        84,
        212;
    --primary-tint2-rgb:
        255,
        93,
        159;
    --primary-tint3-rgb:
        255,
        142,
        111;
    --secondary-rgb:
        158,
        92,
        247;
    --warning-rgb:
        255,
        198,
        88;
    --info-rgb:
        14,
        165,
        232;
    --success-rgb:
        33,
        206,
        158;
    --danger-rgb:
        251,
        66,
        66;
    --light-rgb:
        249,
        249,
        250;
    --dark-rgb:
        10,
        10,
        10;
    --orange-rgb:
        254,
        124,
        88;
    --pink-rgb:
        254,
        84,
        155;
    --teal-rgb:
        0,
        216,
        216;
    --purple-rgb:
        123,
        118,
        254;
    --green-rgb:
        1,
        239,
        140;
    --default-body-bg-color: rgb(var(--body-bg-rgb));
    --primary-color: rgb(255,255,255);
    --tab-color:rgb(64,191,185);
    --primary-tint1-color: rgb(var(--primary-tint1-rgb));
    --primary-tint2-color: rgb(var(--primary-tint2-rgb));
    --primary-tint3-color: rgb(var(--primary-tint3-rgb));
    --primary-border: rgb(var(--primary-rgb));
    --primary01: rgb(64,191,185);
    --primary02: rgba(var(--primary-rgb), 0.2);
    --primary03: rgba(var(--primary-rgb), 0.3);
    --primary04: rgba(var(--primary-rgb), 0.4);
    --primary05: rgba(var(--primary-rgb), 0.5);
    --primary06: rgba(var(--primary-rgb), 0.6);
    --primary07: rgba(var(--primary-rgb), 0.7);
    --primary08: rgba(var(--primary-rgb), 0.8);
    --primary09: rgba(var(--primary-rgb), 0.9);
    --primary005: rgba(var(--primary-rgb), 0.05);
    --default-font-family: "Poppins", sans-serif;
    --default-font-weight: 400;
    --default-text-color: #212b37;
    --default-border: #ecf3fb;
    --default-background: #f9fafb;
    --menu-bg: #fff;
    --menu-prime-color: #61748f;
    --menu-border-color: #e2e6f1;
    --header-bg: #fff;
    --header-prime-color: #61748f;
    --header-border-color: #e2e6f1;
    --custom-white: #fff;
    --custom-black: #000;
    --bootstrap-card-border: #ecf3fb;
    --list-hover-focus-bg: #f5f6f7;
    --text-muted: #6e829f;
    --input-border: #dee7f1;
    --form-control-bg: #ffffff;
    --bs-link-color-rgb: var(--default-text-color);
    --gray-1: #f9fafb;
    --gray-2: #f2f4f5;
    --gray-3: #e6eaeb;
    --gray-4: #dbdfe1;
    --gray-5: #949eb7;
    --gray-6: #7987a1;
    --gray-7: #4d5875;
    --gray-8: #383853;
    --gray-9: #323251;
    --white-1: rgba(255, 255, 255, 0.1);
    --white-2: rgba(255, 255, 255, 0.2);
    --white-3: rgba(255, 255, 255, 0.3);
    --white-4: rgba(255, 255, 255, 0.4);
    --white-5: rgba(255, 255, 255, 0.5);
    --white-6: rgba(255, 255, 255, 0.6);
    --white-7: rgba(255, 255, 255, 0.7);
    --white-8: rgba(255, 255, 255, 0.8);
    --white-9: rgba(255, 255, 255, 0.9);
    --black-1: rgba(0, 0, 0, 0.1);
    --black-2: rgba(0, 0, 0, 0.2);
    --black-3: rgba(0, 0, 0, 0.3);
    --black-4: rgba(0, 0, 0, 0.4);
    --black-5: rgba(0, 0, 0, 0.5);
    --black-6: rgba(0, 0, 0, 0.6);
    --black-7: rgba(0, 0, 0, 0.7);
    --black-8: rgba(0, 0, 0, 0.8);
    --black-9: rgba(0, 0, 0, 0.9);
}

[data-theme-mode=dark] {
    --body-bg-rgb:
        25,
        25,
        28;
    --body-bg-rgb2:
        45,
        45,
        48;
    --menu-bg: rgb(var(--body-bg-rgb));
    --menu-border-color: rgba(255, 255, 255, 0.1);
    --menu-prime-color: rgba(255, 255, 255, 0.4);
    --header-bg: rgb(var(--body-bg-rgb));
    --header-prime-color: rgba(255, 255, 255, 0.4);
    --header-border-color: rgba(255, 255, 255, 0.1);
    --custom-white: rgb(var(--body-bg-rgb));
    --custom-black: #fff;
    --default-border: rgba(255, 255, 255, 0.1);
    --default-text-color: rgba(255, 255, 255, 0.8);
    --light-rgb:
        43,
        46,
        49;
    --dark-rgb:
        240,
        245,
        248;
    --bootstrap-card-border: rgba(255, 255, 255, 0.1);
    --list-hover-focus-bg: rgba(255, 255, 255, 0.1);
    --default-background: rgb(var(--body-bg-rgb2));
    --default-body-bg-color: rgb(var(--body-bg-rgb2));
    --text-muted: rgba(255, 255, 255, 0.5);
    --input-border: rgba(255, 255, 255, 0.1);
    --form-control-bg: rgb(var(--body-bg-rgb));
    color-scheme: dark;
    --gray-1: #110f0f;
    --gray-2: rgba(255, 255, 255, 0.1);
    --gray-3: #393946;
    --gray-4: rgba(255, 255, 255, 0.2);
    --gray-5: #73738c;
    --gray-6: #8f8fa3;
    --gray-7: #ababba;
    --gray-8: #c7c7d1;
    --gray-9: #e3e3e8;
    --white-1: rgba(0, 0, 0, 0.1);
    --white-2: rgba(0, 0, 0, 0.2);
    --white-3: rgba(0, 0, 0, 0.3);
    --white-4: rgba(0, 0, 0, 0.4);
    --white-5: rgba(0, 0, 0, 0.5);
    --white-6: rgba(0, 0, 0, 0.6);
    --white-7: rgba(0, 0, 0, 0.7);
    --white-8: rgba(0, 0, 0, 0.8);
    --white-9: rgba(0, 0, 0, 0.9);
    --black-1: rgba(255, 255, 255, 0.1);
    --black-2: rgba(255, 255, 255, 0.2);
    --black-3: rgba(255, 255, 255, 0.3);
    --black-4: rgba(255, 255, 255, 0.4);
    --black-5: rgba(255, 255, 255, 0.5);
    --black-6: rgba(255, 255, 255, 0.6);
    --black-7: rgba(255, 255, 255, 0.7);
    --black-8: rgba(255, 255, 255, 0.8);
    --black-9: rgba(255, 255, 255, 0.9);
}

a {
    text-decoration: none;
    color: rgba(10, 10, 10, 1);
    font-weight: 400;
}

.card {
    margin-block-end: 1.5rem;
}

.card .card-header,
.card .card-footer {
    background-color: var(--custom-white) !important;
    color: var(--default-text-color);
}

.card {
    background-color: var(--custom-white);
    border: 1px solid var(--bootstrap-card-border);
}

.card-style-2 {
    overflow: hidden;
}

.card-style-2 .img-box-2 {
    transition: transform ease 1.5s;
    display: flex;
    justify-content: center;
}

.card-style-2 .img-box-2:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset-inline-start: 0;
    inset-block-start: 0;
    background-color: rgba(0, 0, 0, 0.03);
}

.card-style-2 .card-img-top {
    position: relative;
}

.card-style-2 .btn-style-1 {
    position: absolute;
    inset-inline-end: 1rem;
    inset-block-end: 1rem;
    box-shadow: none !important;
}

.card-style-2:hover {
    border-color: var(--primary02);
}

.card-style-2:hover .btns-container-1 {
    bottom: 30%;
    z-index: 2;
}

.card-style-2:hover .img-box-2 .bg-primary-transparent {
    background-color: var(--primary02) !important;
}

.card-style-2 .btns-container-1 {
    position: absolute;
    inset-inline-start: 0;
    text-align: center;
    justify-content: center;
    bottom: -10%;
    display: flex;
    width: 100%;
    z-index: -1;
    transition: all 0.5s;
}

.card-style-6 .card-style-6-avatar .avatar {
    border: 1px solid var(--default-border);
    color: var(--default-text-color);
}

.card-style-6:has(.form-check-input:checked) {
    border-color: var(--primary05);
    background-color: rgba(var(--secondary-rgb), 0.08);
    border-style: dashed;
}

.card-style-6:has(.form-check-input:checked) .card-style-6-avatar .avatar {
    background-color: var(--primary-color);
    color: #fff;
}

.card.ladderseo-cards {
    border-radius: 0.5rem;
    background-color: var(--custom-white);
    box-shadow: 0px 6px 16px 2px rgba(0, 0, 0, 0.05);
    border: 0;
    position: relative;
    margin-block-end: 1.5rem;
    width: 100%;
    max-width: 100%;
}

.card.ladderseo-cards .card-header {
    padding: 1rem 1rem 0.5rem 1rem;
    background-color: transparent !important;
    border-block-end: 0 solid var(--default-border);
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.card.ladderseo-cards .card-header:first-child {
    border-radius: 0.625rem 0.625rem 0 0;
}

.card.ladderseo-cards .card-header .card-title {
    position: relative;
    margin-block-end: 0;
    font-size: 0.95rem;
    font-weight: 500;
}

.card.ladderseo-cards .card-header .card-title .subtitle {
    margin-block-end: 0;
    text-transform: initial;
}

.card.ladderseo-cards .card-footer {
    background-color: transparent !important;
    border-block-start: 1px solid var(--default-border);
    padding: 1rem 1rem;
    font-size: 0.8125rem;
}

.card.ladderseo-cards .card-body {
    padding: 1rem;
    color: var(--default-text-color);
}

.card.ladderseo-cards .card-link {
    font-size: 0.75rem;
}

.card.ladderseo-cards .card-text {
    font-size: 0.813rem;
}

.card.ladderseo-cards .footer-card-icon {
    width: 60px;
    height: 60px;
}

.card.ladderseo-cards.overlay-card {
    position: relative;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.9);
}

.card.ladderseo-cards.overlay-card .card-header {
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.overlay-card .card-footer {
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.overlay-card .over-content-bottom {
    top: auto;
}

.card.ladderseo-cards.overlay-card:before {
    content: "";
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-start: 0;
    inset-block-end: 0;
    background-color: rgba(0, 0, 0, 0.25);
    position: absolute;
    border-radius: 0.3rem;
}

.card.ladderseo-cards.card-bg-primary {
    background-color: var(--primary-color);
    color: #fff;
}

.card.ladderseo-cards.card-bg-primary .card-header {
    color: #fff;
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-primary .card-header:before {
    background-color: #fff;
}

.card.ladderseo-cards.card-bg-primary .card-body {
    color: #fff;
}

.card.ladderseo-cards.card-bg-primary .card-footer {
    color: #fff;
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-primary1 {
    background-color: var(--primary-tint1-color);
    color: #fff;
}

.card.ladderseo-cards.card-bg-primary1 .card-header {
    color: #fff;
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-primary1 .card-header:before {
    background-color: #fff;
}

.card.ladderseo-cards.card-bg-primary1 .card-body {
    color: #fff;
}

.card.ladderseo-cards.card-bg-primary1 .card-footer {
    color: #fff;
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-primary2 {
    background-color: var(--primary-tint2-color);
    color: #fff;
}

.card.ladderseo-cards.card-bg-primary2 .card-header {
    color: #fff;
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-primary2 .card-header:before {
    background-color: #fff;
}

.card.ladderseo-cards.card-bg-primary2 .card-body {
    color: #fff;
}

.card.ladderseo-cards.card-bg-primary2 .card-footer {
    color: #fff;
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-primary3 {
    background-color: var(--primary-tint3-color);
    color: #fff;
}

.card.ladderseo-cards.card-bg-primary3 .card-header {
    color: #fff;
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-primary3 .card-header:before {
    background-color: #fff;
}

.card.ladderseo-cards.card-bg-primary3 .card-body {
    color: #fff;
}

.card.ladderseo-cards.card-bg-primary3 .card-footer {
    color: #fff;
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-secondary {
    background-color: rgb(var(--secondary-rgb));
    color: #fff;
}

.card.ladderseo-cards.card-bg-secondary .card-header {
    color: #fff;
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-secondary .card-header:before {
    background-color: #fff;
}

.card.ladderseo-cards.card-bg-secondary .card-body {
    color: #fff;
}

.card.ladderseo-cards.card-bg-secondary .card-footer {
    color: #fff;
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-warning {
    background-color: rgb(var(--warning-rgb));
    color: #fff;
}

.card.ladderseo-cards.card-bg-warning .card-header {
    color: #fff;
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-warning .card-header:before {
    background-color: #fff;
}

.card.ladderseo-cards.card-bg-warning .card-body {
    color: #fff;
}

.card.ladderseo-cards.card-bg-warning .card-footer {
    color: #fff;
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-info {
    background-color: rgb(var(--info-rgb));
    color: #fff;
}

.card.ladderseo-cards.card-bg-info .card-header {
    color: #fff;
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-info .card-header:before {
    background-color: #fff;
}

.card.ladderseo-cards.card-bg-info .card-body {
    color: #fff;
}

.card.ladderseo-cards.card-bg-info .card-footer {
    color: #fff;
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-success {
    background-color: rgb(var(--success-rgb));
    color: #fff;
}

.card.ladderseo-cards.card-bg-success .card-header {
    color: #fff;
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-success .card-header:before {
    background-color: #fff;
}

.card.ladderseo-cards.card-bg-success .card-body {
    color: #fff;
}

.card.ladderseo-cards.card-bg-success .card-footer {
    color: #fff;
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-danger {
    background-color: rgb(var(--danger-rgb));
    color: #fff;
}

.card.ladderseo-cards.card-bg-danger .card-header {
    color: #fff;
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-danger .card-header:before {
    background-color: #fff;
}

.card.ladderseo-cards.card-bg-danger .card-body {
    color: #fff;
}

.card.ladderseo-cards.card-bg-danger .card-footer {
    color: #fff;
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-orange {
    background-color: rgb(var(--orange-rgb));
    color: #fff;
}

.card.ladderseo-cards.card-bg-orange .card-header {
    color: #fff;
    border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-orange .card-header:before {
    background-color: #fff;
}

.card.ladderseo-cards.card-bg-orange .card-body {
    color: #fff;
}

.card.ladderseo-cards.card-bg-orange .card-footer {
    color: #fff;
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.card.ladderseo-cards.card-bg-light {
    background-color: rgb(var(--light-rgb));
    color: var(--default-text-color);
}

.card.ladderseo-cards.card-bg-light .card-header {
    color: var(--default-text-color);
    border-block-end: var(--default-border);
}

.card.ladderseo-cards.card-bg-light .card-body {
    color: var(--default-text-color);
}

.card.ladderseo-cards.card-bg-light .card-footer {
    color: var(--default-text-color);
    border-block-start: var(--default-border);
}

.card.ladderseo-cards.card-bg-dark {
    background-color: rgb(var(--dark-rgb));
    color: var(--custom-white);
}

.card.ladderseo-cards.card-bg-dark .card-header {
    color: #fff;
    border-block-end: 1px solid rgba(255, 255, 255, 0.2);
}

.card.ladderseo-cards.card-bg-dark .card-header:before {
    background-color: var(--custom-white);
}

.card.ladderseo-cards.card-bg-dark .card-body {
    color: #fff;
}

.card.ladderseo-cards.card-bg-dark .card-footer {
    color: #fff;
    border-block-start: 1px solid rgba(255, 255, 255, 0.2);
}

.card.ladderseo-cards .card-anchor {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    bottom: 0;
    inset-inline-start: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
}

.card.ladderseo-cards .collapse-close {
    display: none;
}

.card.ladderseo-cards.card .collapsed .collapse-close {
    display: block;
}

.card.ladderseo-cards.card .collapsed .collapse-open {
    display: none;
}

.card.ladderseo-cards.card-fullscreen {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-start: 0;
    bottom: 0;
    z-index: 9999;
    margin: 0;
}

.card.ladderseo-cards {
    color: var(--default-text-color) !important;
}

.card.ladderseo-cards.main-dashboard-banner {
    z-index: 1;
    box-shadow: none;
    border: 0;
}

.card.ladderseo-cards.main-dashboard-banner:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(to right top,
            #ff9794,
            #fd8dac,
            #e58cc6,
            #bf7cdc,
            #6f78f4);
    z-index: -1;
}

.card.ladderseo-cards.main-dashboard-banner:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("./media-87-MJVL2VA5.png");
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    z-index: -1;
    opacity: 0.1;
}

.card.ladderseo-cards.main-dashboard-banner img {
    position: absolute;
    inset-inline-end: 10px;
    width: 200px;
    height: 200px;
    inset-block-end: -30px;
}

.card.ladderseo-cards.main-dashboard-banner.main-dashboard-banner2:before {
    background-color: var(--primary-color);
    background-image: none;
}

.card.ladderseo-cards.main-dashboard-banner.main-dashboard-banner2:after {
    background-image: url("./media-87-MJVL2VA5.png");
}

.card.ladderseo-cards.main-dashboard-banner.main-dashboard-banner2 img {
    width: 170px;
    height: 170px;
    inset-block-end: -9px;
}

.card.ladderseo-cards.main-dashboard-banner.project-dashboard-banner:before {
    background-color: var(--primary-color);
    background-image: none;
}

.card.ladderseo-cards.main-dashboard-banner.project-dashboard-banner:after {
    background-image: url("./media-82-JP4UDPYT.jpg");
    opacity: 0.35;
}

.card.ladderseo-cards.main-dashboard-banner.project-dashboard-banner img {
    width: 197px;
    height: 168px;
    inset-block-end: -4px;
    inset-inline-end: -5px;
    filter: saturate(0.9);
    opacity: 0.95;
}

.daily-tasks-time {
    width: 4.5rem;
    padding: 0.25rem;
    background: rgb(var(--light-rgb));
    text-align: center;
    font-size: 13px;
    border-radius: 7px;
}

.card.ladderseo-cards.course-main {
    z-index: 1;
}

.card.ladderseo-cards.course-main:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: repeat;
    z-index: -1;
    background-position: bottom;
    opacity: 0.2;
    transform: scaleX(-1);
    background-image: url("./media-80-XSQK7UY5.jpg");
}

.card.ladderseo-cards.course-main:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: repeat;
    z-index: -1;
    right: 0;
    transform: scaleX(-1);
    background-color: rgba(0, 0, 0, 0.06);
}

.pos-category .card.ladderseo-cards.active,
.pos-category .card.ladderseo-cards:hover {
    border: 1px solid var(--primary03);
    background-color: var(--primary005);
}

.pos-category .card.ladderseo-cards {
    border: 1px solid transparent;
}

.pos-category .card.ladderseo-cards .categorymenu-icon {
    background-color: var(--primary04);
}

.pos-category .card.ladderseo-cards .avatar svg {
    width: 4.25rem;
    height: 4.25rem;
    fill: var(--primary-color);
}

.card.ladderseo-cards.card-style-2:hover {
    box-shadow: 0 3px 10px 0px var(--black-1);
}

.card.ladderseo-cards.card-style-3:hover {
    box-shadow: 0 3px 10px 0px var(--black-1);
}



.navbar {
    border-radius: 0.3rem;
}

.navbar .navbar-nav .nav-link {
    line-height: 1;
    padding: 0.4rem 1rem;
    font-weight: 500;
}

.navbar .navbar-toggler {
    padding: 0.4rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--custom-black);
    border: 1px solid var(--default-border);
    border-radius: 0.3rem;
}

.navbar .navbar-toggler .navbar-toggler-icon {
    width: 1rem;
    height: 1rem;
    position: relative;
    background-image: none;
}

.navbar .navbar-toggler .navbar-toggler-icon:before {
    content: "\f479";
    font-family: bootstrap-icons !important;
    position: absolute;
    font-size: 1rem;
    color: var(--default-text-color);
    inset-inline-start: 0;
}

.navbar .navbar-toggler:focus {
    box-shadow: none;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--custom-black);
}

.navbar-brand {
    margin-inline-end: 1.5rem;
}

.navbar-brand img {
    height: 1.5rem;
    line-height: 1.5rem;
}

.navbar-brand:focus,
.navbar-brand:hover {
    color: var(--default-text-color);
}

.navbar-primary-transparent {
    background-color: var(--primary01);
    color: var(--default-text-color);
}

.navbar-primary-transparent .nav-link.active {
    background-color: var(--primary-color);
    color: #fff !important;
}

.navbar-primary-transparent .nav-link:hover {
    color: var(--default-text-color);
}

.navbar-primary-transparent .form-control:focus {
    border-color: var(--primary-color);
}

.navbar-secondary-transparent {
    background-color: rgba(var(--secondary-rgb), 0.1);
    color: var(--default-text-color);
}

.navbar-secondary-transparent .nav-link.active {
    background-color: rgb(var(--secondary-rgb));
    color: #fff !important;
}

.navbar-secondary-transparent .nav-link:hover {
    color: var(--default-text-color);
}

.navbar-secondary-transparent .form-control:focus {
    border-color: rgb(var(--secondary-rgb));
}

.navbar-warning-transparent {
    background-color: rgba(var(--warning-rgb), 0.1);
    color: var(--default-text-color);
}

.navbar-warning-transparent .nav-link.active {
    background-color: rgb(var(--warning-rgb));
    color: #fff !important;
}

.navbar-warning-transparent .nav-link:hover {
    color: var(--default-text-color);
}

.navbar-warning-transparent .form-control:focus {
    border-color: rgb(var(--warning-rgb));
}

.navbar-info-transparent {
    background-color: rgba(var(--info-rgb), 0.1);
    color: var(--default-text-color);
}

.navbar-info-transparent .nav-link.active {
    background-color: rgb(var(--info-rgb));
    color: #fff !important;
}

.navbar-info-transparent .nav-link:hover {
    color: var(--default-text-color);
}

.navbar-info-transparent .form-control:focus {
    border-color: rgb(var(--info-rgb));
}

.navbar-success-transparent {
    background-color: rgba(var(--success-rgb), 0.1);
    color: var(--default-text-color);
}

.navbar-success-transparent .nav-link.active {
    background-color: rgb(var(--success-rgb));
    color: #fff !important;
}

.navbar-success-transparent .nav-link:hover {
    color: var(--default-text-color);
}

.navbar-success-transparent .form-control:focus {
    border-color: rgb(var(--success-rgb));
}

.navbar-danger-transparent {
    background-color: rgba(var(--danger-rgb), 0.1);
    color: var(--default-text-color);
}

.navbar-danger-transparent .nav-link.active {
    background-color: rgb(var(--danger-rgb));
    color: #fff !important;
}

.navbar-danger-transparent .nav-link:hover {
    color: var(--default-text-color);
}

.navbar-danger-transparent .form-control:focus {
    border-color: rgb(var(--danger-rgb));
}

.navbar-dark-transparent {
    background-color: rgba(var(--dark-rgb), 0.1);
    color: var(--default-text-color);
}

.navbar-dark-transparent .nav-link.active {
    background-color: var(--custom-black);
    color: var(--custom-white) !important;
}

.navbar-dark-transparent .nav-link:hover {
    color: var(--default-text-color);
}

.navbar-dark-transparent .form-control:focus {
    border-color: rgb(var(--dark-rgb));
}

.navbar-primary {
    background-color: var(--primary-color);
    color: #fff;
}

.navbar-primary .nav-link {
    color: #fff !important;
}

.navbar-primary .nav-link.active {
    background-color: var(--white-2);
    color: #fff !important;
}

.navbar-primary .nav-link:hover {
    color: #fff !important;
}

.navbar-primary .form-control:focus {
    border-color: var(--white-2);
}

.navbar-primary .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.navbar-primary .navbar-toggler .navbar-toggler-icon:before {
    color: #fff;
}

.navbar-secondary {
    background-color: rgb(var(--secondary-rgb));
    color: #fff;
}

.navbar-secondary .nav-link {
    color: #fff !important;
}

.navbar-secondary .nav-link.active {
    background-color: var(--white-2);
    color: #fff !important;
}

.navbar-secondary .nav-link:hover {
    color: #fff !important;
}

.navbar-secondary .form-control:focus {
    border-color: var(--white-2);
}

.navbar-secondary .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.navbar-secondary .navbar-toggler .navbar-toggler-icon:before {
    color: #fff;
}

.navbar-warning {
    background-color: rgb(var(--warning-rgb));
    color: #fff;
}

.navbar-warning .nav-link {
    color: #fff !important;
}

.navbar-warning .nav-link.active {
    background-color: var(--white-2);
    color: #fff !important;
}

.navbar-warning .nav-link:hover {
    color: #fff !important;
}

.navbar-warning .form-control:focus {
    border-color: var(--white-2);
}

.navbar-warning .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.navbar-warning .navbar-toggler .navbar-toggler-icon:before {
    color: #fff;
}

.navbar-info {
    background-color: rgb(var(--info-rgb));
    color: #fff;
}

.navbar-info .nav-link {
    color: #fff !important;
}

.navbar-info .nav-link.active {
    background-color: var(--white-2);
    color: #fff !important;
}

.navbar-info .nav-link:hover {
    color: #fff !important;
}

.navbar-info .form-control:focus {
    border-color: var(--white-2);
}

.navbar-info .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.navbar-info .navbar-toggler .navbar-toggler-icon:before {
    color: #fff;
}

.navbar-success {
    background-color: rgb(var(--success-rgb));
    color: #fff;
}

.navbar-success .nav-link {
    color: #fff !important;
}

.navbar-success .nav-link.active {
    background-color: var(--white-2);
    color: #fff !important;
}

.navbar-success .nav-link:hover {
    color: #fff !important;
}

.navbar-success .form-control:focus {
    border-color: var(--white-2);
}

.navbar-success .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.navbar-success .navbar-toggler .navbar-toggler-icon:before {
    color: #fff;
}

.navbar-danger {
    background-color: rgb(var(--danger-rgb));
    color: #fff;
}

.navbar-danger .nav-link {
    color: #fff !important;
}

.navbar-danger .nav-link.active {
    background-color: var(--white-2);
    color: #fff !important;
}

.navbar-danger .nav-link:hover {
    color: #fff !important;
}

.navbar-danger .form-control:focus {
    border-color: var(--white-2);
}

.navbar-danger .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.navbar-danger .navbar-toggler .navbar-toggler-icon:before {
    color: #fff;
}

.navbar-dark {
    background-color: rgb(var(--dark-rgb));
    color: var(--custom-white);
}

.navbar-dark .nav-link {
    color: var(--custom-white) !important;
}

.navbar-dark .nav-link.active {
    background-color: var(--white-2);
    color: var(--custom-white) !important;
}

.navbar-dark .nav-link:hover {
    color: var(--custom-white) !important;
}

.navbar-dark .form-control:focus {
    border-color: var(--white-2);
}

.navbar-dark .navbar-toggler {
    border: 1px solid var(--white-1);
}

.navbar-dark .navbar-toggler .navbar-toggler-icon:before {
    color: var(--custom-white);
}

.nav-item {
    margin-inline-end: 0.5rem;
}

.nav-item:last-child {
    margin-inline-end: 0;
}

.nav-link {
    color: var(--default-text-color);
    border-radius: 0.375rem;
    font-weight: 500;
}

.nav-link.active {
    background-color: var(--primary01);
    color: var(--primary-color);
}

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

.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
    color: var(--primary-color);
}

.nav-link.disabled {
    color: var(--default-text-color);
    opacity: 0.3;
}

.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link:disabled {
    color: rgba(var(--dark-rgb), 0.5);
}

.navbar-text {
    color: var(--default-text-color);
}

.navbar-dark.bg-dark .nav-link,
.navbar-dark.bg-dark .navbar-brand {
    color: #fff;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show>.nav-link {
    color: #fff;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: var(--primary-color);
}

.nav.nav-style-1 {
    border: 0;
}

.nav.nav-style-1 .nav-item {
    margin-inline-end: 0.25rem;
}

.nav.nav-style-1 .nav-item:last-child {
    margin-inline-end: 0;
}

.nav.nav-style-1 .nav-link.active {
    background-color: var(--primary-color);
    color: #fff;
}

.nav.nav-style-2 .nav-item .nav-link {
    border-block-start: 3px solid transparent;
}

.nav.nav-style-2 .nav-item .nav-link.active {
    background-color: var(--primary01);
    border-block-start: 3px solid var(--primary-color);
    color: var(--primary-color);
}

.nav.nav-style-3 .nav-link {
    border-radius: 0;
}

.nav.nav-style-3 .nav-link {
    border-block-end: 3px solid transparent;
}

.nav.nav-style-3 .nav-link.active {
    background-color: transparent;
    border-block-end: 3px solid var(--primary-color);
    color: var(--primary-color);
}

.nav.nav-style-4 {
    border: 0;
}

.nav.nav-style-4 .nav-link {
    color: var(--text-muted);
    border: 0;
}

.nav.nav-style-4 .nav-link.active {
    background-color: rgb(var(--light-rgb));
    color: var(--default-text-color);
    border: 0;
}

.nav.nav-style-4 .nav-link:hover,
.nav.nav-style-4 .nav-link:focus {
    border: 0;
}

.nav-tabs.nav-style-5 {
    border: 0;
}

.nav-tabs.nav-style-5 .nav-link {
    color: var(--text-muted);
    border: 0;
}

.nav-tabs.nav-style-5 .nav-link.active {
    background-color: var(--primary-color);
    color: #fff;
    border: 0;
}

.nav-tabs.nav-style-5 .nav-link:hover,
.nav-tabs.nav-style-5 .nav-link:focus {
    border: 0;
}

.nav-style-6 {
    border: 0;
}

.nav-style-6.nav-pills .nav-link.active {
    border: 1px solid var(--primary-color);
    border-block-end: 2px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
}

.nav-tabs-header {
    border: 0;
}

.nav-tabs-header .nav-item {
    margin-inline-end: 0.5rem;
}

.nav-tabs-header .nav-item:last-child {
    margin-inline-end: 0;
}

.nav-tabs-header .nav-item .nav-link {
    border: 1px solid transparent;
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
    font-weight: 500;
}

.nav-tabs-header .nav-item .nav-link.active {
    background: var(--primary01);
    color: var(--primary-color);
    border: 1px solid transparent;
}

.nav-tabs-header .nav-item .nav-link:hover,
.nav-tabs-header .nav-item .nav-link:focus {
    border: 1px solid transparent;
}

.nav-tabs-footer {
    border: 0;
}

.nav-tabs-footer .nav-item {
    margin-inline-end: 0.5rem;
}

.nav-tabs-footer .nav-item:last-child {
    margin-inline-end: 0;
}

.nav-tabs-footer .nav-item .nav-link {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    font-size: 0.8rem;
}

.nav-tabs-footer .nav-item .nav-link.active {
    background: var(--primary-color);
    color: #fff;
    border: 1px solid var(--primary-color);
}

.nav-tabs-footer .nav-item .nav-link:hover,
.nav-tabs-footer .nav-item .nav-link:focus {
    border: 1px solid var(--primary-color);
}

.vertical-tabs-2 {
    border: 0;
    margin-block-end: 1rem;
}

.vertical-tabs-2 .nav-item {
    margin-inline-end: 0.5rem;
}

.vertical-tabs-2 .nav-item:last-child {
    margin-inline-end: 0;
}

.vertical-tabs-2 .nav-item .nav-link {
    text-align: center;
    border: 1px solid var(--default-border);
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    background-color: rgb(var(--light-rgb));
}

.vertical-tabs-2 .nav-item .nav-link i {
    font-size: 1rem;
}

.vertical-tabs-2 .nav-item .nav-link.active {
    background-color: var(--primary-color);
    color: #fff;
    position: relative;
}

.vertical-tabs-2 .nav-item .nav-link.active:before {
    content: "";
    position: absolute;
    inset-inline-end: -0.5rem;
    inset-block-start: 38%;
    transform: rotate(45deg);
    width: 1rem;
    height: 1rem;
    background-color: var(--primary-color);
}

@media (min-width: 768px) {
    .vertical-tabs-2 {
        margin-block-end: 0;
    }

    .vertical-tabs-2 .nav-item .nav-link {
        min-width: 7.5rem;
        max-width: 7.5rem;
    }
}

.vertical-tabs-3 {
    border: 0;
}

.vertical-tabs-3 .nav-item {
    border: 0;
    margin-inline-end: 0.5rem;
}

.vertical-tabs-3 .nav-item:last-child {
    margin-inline-end: 0;
}

.vertical-tabs-3 .nav-item .nav-link {
    min-width: 160px;
    max-width: 160px;
    border: 1px solid var(--primary-color);
    padding: 1.3rem;
    margin-block-end: 0.5rem;
}

.vertical-tabs-3 .nav-item .nav-link i {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    font-size: 1rem;
    background: var(--primary-color);
    color: #fff;
    border-radius: 3.125rem;
    font-weight: 500;
}

.vertical-tabs-3 .nav-item .nav-link.active {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #fff;
}

.vertical-tabs-3 .nav-item .nav-link.active i {
    background: #fff;
    color: var(--primary-color);
}

.vertical-tabs-3 .nav-item .nav-link:hover,
.vertical-tabs-3 .nav-item .nav-link:focus {
    border: 1px solid var(--primary-color);
}

@media screen and (max-width: 767px) {
    .vertical-tabs-3 .nav-item {
        margin-inline-end: 0rem;
    }

    .vertical-tabs-3 .nav-item .nav-link {
        min-width: auto;
        max-width: inherit;
        width: 100%;
    }
}

.nav-link:focus,
.nav-link:hover {
    color: var(--primary-color);
}

.nav-tabs {
    border-color: var(--default-border);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--default-text-color);
    background-color: rgb(var(--light-rgb));
    border-color: var(--default-border);
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: var(--default-border);
}

.nav.tab-style-1 {
    border-block-end: 0;
    padding: 0.65rem;
    background-color: rgb(var(--light-rgb));
    border-radius: 0.3rem;
    margin-block-end: 1rem;
}

.nav.tab-style-1 .nav-item {
    margin-inline-end: 0.5rem;
}

.nav.tab-style-1 .nav-item:last-child {
    margin-inline-end: 0;
}

.nav.tab-style-1 .nav-link {
    border-radius: 0.3rem;
    padding: 0.35rem 1rem;
}

.nav.tab-style-1 .nav-link.active {
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
    transition: color 0.15s ease-in;
}

.tab-content .tab-pane {
    border-radius: 0.3rem;
    color: var(--default-text-color);
}

.tab-style-2 {
    border-block-end: 0;
}

.tab-style-2 .nav-item {
    margin-inline-end: 0.5rem;
}

.tab-style-2 .nav-item:last-child {
    margin-inline-end: 0;
}

.tab-style-2 .nav-item .nav-link {
    border: 0;
}

.tab-style-2 .nav-item .nav-link i {
    width: 1.875rem;
    height: 1.875rem;
    padding: 0.35rem;
    border-radius: 50px;
    background-color: rgb(var(--light-rgb));
    color: var(--default-text-color);
    display: inline-block;
}

.tab-style-2 .nav-item .nav-link:hover {
    border: 0;
}

.tab-style-2 .nav-item .nav-link.active {
    background-color: transparent;
    position: relative;
    border: 0;
    color: var(--primary-color);
}

.tab-style-2 .nav-item .nav-link.active i {
    background-color: var(--primary01);
    color: var(--primary-color);
}

.tab-style-2 .nav-item .nav-link.active:before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    width: 100%;
    height: 0.175rem;
    background-color: var(--primary-color);
    border-radius: 50px;
}

.tab-style-3 {
    border-block-end: 0;
}

.tab-style-3 .nav-item {
    position: relative;
    margin-inline-end: 0.5rem;
}

.tab-style-3 .nav-item:last-child {
    margin-inline-end: 0;
}

.tab-style-3 .nav-item .nav-link {
    position: relative;
    border: 0;
    font-size: 0.75rem;
}

.tab-style-3 .nav-item .nav-link:before {
    position: absolute;
    content: "";
    inset-block-end: -1.063rem;
    inset-inline-end: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 0.1rem;
    background-color: rgb(var(--light-rgb));
    border-radius: 50%;
}

.tab-style-3 .nav-item .nav-link:after {
    position: absolute;
    content: "";
    inset-block-end: -2rem;
    inset-inline-start: 1.75rem;
    inset-inline-end: 0;
    inset-inline-start: 30%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--custom-white);
    border-radius: 50%;
    border: 2px solid var(--default-border);
}

.tab-style-3 .nav-item .nav-link.home:after {
    content: "1";
}

.tab-style-3 .nav-item .nav-link.about:after {
    content: "2";
}

.tab-style-3 .nav-item .nav-link.services:after {
    content: "3";
}

.tab-style-3 .nav-item .nav-link:hover {
    border: 0;
}

.tab-style-3 .nav-item .nav-link.active {
    background-color: transparent;
    border: 0;
    color: var(--primary-color);
}

.tab-style-3 .nav-item .nav-link.active:before {
    background-color: var(--primary-color);
}

.tab-style-3 .nav-item .nav-link.active:after {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.tab-style-4.nav-tabs {
    border: 0;
}

.tab-style-4.nav-tabs .nav-item {
    margin-inline-end: 0.5rem;
}

.tab-style-4.nav-tabs .nav-item:last-child {
    margin-inline-end: 0;
}

.tab-style-4.nav-tabs .nav-link {
    border: 0;
}

.tab-style-4.nav-tabs .nav-link:hover {
    border: 0;
}

.tab-style-4.nav-tabs .nav-link.active {
    background-color: transparent;
    border: 0;
    color: var(--primary-color);
    position: relative;
    overflow: hidden;
}

.tab-style-4.nav-tabs .nav-link.active::before {
    position: absolute;
    content: "";
    width: 0.75rem;
    inset-block-start: 31px;
    transform: rotate(45deg);
    inset-inline-start: 47%;
    overflow: hidden;
    z-index: 1;
    height: 0.75rem;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.tab-style-4.nav-tabs .nav-link.active:after {
    position: absolute;
    content: "";
    width: 40%;
    height: 1px;
    inset-inline-start: 30%;
    inset-block-end: 0;
    background-color: var(--primary-color);
}

#tab-style-4 .tab-pane.active {
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    color: #fff;
}

.tab-style-5 .nav-item {
    margin-inline-end: 0.5rem;
}

.tab-style-5 .nav-item:last-child {
    margin-inline-end: 0;
}

.tab-style-5 .nav-item .nav-link.active {
    background: var(--primary-color);
}

.tab-style-6 {
    border: 0;
    background-color: var(--custom-white);
    border-radius: 0.3rem;
    color: var(--primary-color);
    padding: 0.5rem;
}

.tab-style-6 .nav-item {
    border: 0;
    margin-inline-end: 0.5rem;
}

.tab-style-6 .nav-item:last-child {
    margin-inline-end: 0;
}

.tab-style-6 .nav-item .nav-link {
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    font-size: 0.813rem;
    border: 0;
    font-weight: 500;
}

.tab-style-6 .nav-item .nav-link.active {
    border: 0;
    background-color: var(--primary-color);
    color: #fff;
    border: 0;
    box-shadow: 0px 3px 10px 0px rgba(var(--dark-rgb), 0.05);
}

.tab-style-6 .nav-item .nav-link:hover,
.tab-style-6 .nav-item .nav-link:focus {
    border: 0;
}

.tab-style-7 .nav-link {
    margin-block-end: 0.5rem;
    font-size: 0.813rem;
    color: var(--text-muted);
    text-align: left;
}

.tab-style-7 .nav-link:active,
.tab-style-7 .nav-link.active {
    background-color: var(--primary01);
    color: var(--primary-color);
}

.tab-style-8.nav-tabs {
    border-bottom: none;
    padding: 0px !important;
}

.tab-style-8.nav-tabs>.nav-item>.nav-link {
    border-bottom: 3px solid transparent;
    color: var(--default-text-color);
}

.tab-style-8.nav-tabs>.nav-item>.nav-link:not(.active):hover,
.tab-style-8.nav-tabs>.nav-item>.nav-link:not(.active):focus {
    color: var(--tab-color);
    background: none;
    border-color: transparent;
    border-bottom-color: transparent;
}

.tab-style-8.nav-tabs>.nav-item>.nav-link.active {
    color: var(--tab-color);
    background-color: transparent;
    border-color: transparent transparent var(--primary-color) transparent;
}

.tab-style-8.nav-tabs.scaleX.nav-tabs>.nav-item>.nav-link {
    position: relative;
    border-bottom: none;
    padding: 0.5rem;
}

.tab-style-8.nav-tabs.scaleX.nav-tabs>.nav-item>.nav-link:focus::before,
.tab-style-8.nav-tabs.scaleX.nav-tabs>.nav-item>.nav-link.active::before {
    transform: scaleX(1);
}

.tab-style-8.nav-tabs.scaleX.nav-tabs>.nav-item>.nav-link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0%;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: center;
    background-color: var(--tab-color);
    transition: transform ease 300ms;
}

.nav-style-1 .nav-item .nav-link.active {
    background-color: var(--primary01);
    color: var(--primary-color);
}

.profile-settings-tab.tab-style-8.nav-tabs.scaleX.nav-tabs>.nav-item>.nav-link {
    border: 0;
}

.profile-settings-tab.tab-style-8.nav-tabs.scaleX.nav-tabs>.nav-item>.nav-link.active {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    border: 0;
}

.profile-settings-tab.tab-style-8.nav-tabs.scaleX.nav-tabs>.nav-item>.nav-link.active:before {
    inset-block-end: 1px;
}

.profile-settings-tab.tab-style-8.nav-tabs.scaleX.nav-tabs>.nav-item>.nav-link:hover,
.profile-settings-tab.tab-style-8.nav-tabs.scaleX.nav-tabs>.nav-item>.nav-link:focus {
    border: 0;
}


.avatar {
    position: relative;
    height: 2.625rem;
    width: 2.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    color: #fff;
    font-weight: 500;
}

.avatar a.badge:hover {
    color: #fff;
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 0.25rem;
}

.avatar svg {
    width: 1.5rem;
    height: 1.5rem;
}

.avatar.avatar-rounded {
    border-radius: 50%;
}

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

.avatar.avatar-radius-0 {
    border-radius: 0;
}

.avatar.avatar-radius-0 img {
    border-radius: 0;
}

.avatar .avatar-badge {
    position: absolute;
    inset-block-start: -4%;
    inset-inline-end: -0.375rem;
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0.625rem;
    border: 2px solid var(--custom-white);
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar.online:before,
.avatar.offline:before {
    position: absolute;
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    inset-inline-end: 0;
    inset-block-end: 0;
    border: 2px solid var(--custom-white);
}

.avatar.online:before {
    background-color: rgb(var(--success-rgb));
}

.avatar.offline:before {
    background-color: var(--gray-5);
}

.avatar.avatar-xs {
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.65rem;
}

.avatar.avatar-xs .avatar-badge {
    padding: 0.25rem;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.5rem;
    inset-block-start: -25%;
    inset-inline-end: -0.5rem;
}

.avatar.avatar-sm {
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    font-size: 0.75rem;
}

.avatar.avatar-sm .avatar-badge {
    padding: 0.3rem;
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1.1rem;
    font-size: 0.5rem;
    inset-block-start: -38%;
    inset-inline-end: -0.5rem;
}

.avatar.avatar-sm.online:before,
.avatar.avatar-sm.offline:before {
    width: 0.5rem;
    height: 0.5rem;
}

.avatar.avatar-sm svg {
    width: 1rem;
    height: 1rem;
}

.avatar.avatar-md {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.8rem;
}

.avatar.avatar-md .avatar-badge {
    padding: 0.4rem;
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.65rem;
    inset-block-start: -6%;
    inset-inline-end: -13%;
}

.avatar.avatar-md.online:before,
.avatar.avatar-md.offline:before {
    width: 0.75rem;
    height: 0.75rem;
}

.avatar.avatar-md svg {
    width: 1.25rem;
    height: 1.25rem;
}

.avatar.avatar-lg {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1rem;
}

.avatar.avatar-lg .avatar-badge {
    inset-block-start: -15%;
    inset-inline-end: -0.25%;
}

.avatar.avatar-lg.online:before,
.avatar.avatar-lg.offline:before {
    width: 0.8rem;
    height: 0.8rem;
}

.avatar.avatar-lg svg {
    width: 1.5rem;
    height: 1.5rem;
}

.avatar.avatar-xl {
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    font-size: 1.25rem;
}

.avatar.avatar-xl .avatar-badge {
    inset-block-start: -8%;
    inset-inline-end: -0.2%;
}

.avatar.avatar-xl.online:before,
.avatar.avatar-xl.offline:before {
    width: 0.95rem;
    height: 0.95rem;
}

.avatar.avatar-xxl {
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
    font-size: 1.5rem;
}

.avatar.avatar-xxl .avatar-badge {
    inset-block-start: -4%;
    inset-inline-end: 0rem;
}

.avatar.avatar-xxl.online:before,
.avatar.avatar-xxl.offline:before {
    width: 1.05rem;
    height: 1.05rem;
    inset-block-end: 0.25rem;
}

.avatar-list-stacked {
    padding: 0;
}

.avatar-list-stacked .avatar {
    margin-inline-end: -0.65rem !important;
    border: 2px solid transparent;
    vertical-align: middle;
    transition: transform ease 200ms;
}

.avatar-list-stacked .avatar:last-child {
    margin-inline-end: 0 !important;
}

.avatar-list-stacked .avatar:hover {
    z-index: 1;
    transform: scale(1.15);
    border: 2px solid var(--custom-white);
}

[dir=rtl] .avatar-list-stacked .ri-arrow-right-s-line {
    transform: rotate(180deg);
}


.main-content-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid var(--default-border);
    padding: 0.2rem;
}

.main-content-card:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-start: 0;
    inset-block-end: 0;
    background-image: url("../images/stats-bg.png");
    background-position: center;
    background-repeat: repeat;
    z-index: -1;
    opacity: 0.6;
    background-size: cover;
}

[data-theme-mode=dark] .main-content-card:before {
    filter: invert(1);
    opacity: 0;
}

.offer-card {
    z-index: 1;
    background-image: url("./1-6YN2QKZ7.jpg");
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: bottom;
}

.offer-card::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--primary07);
    z-index: -1;
}

.offer-card-details .offer-item-img {
    position: absolute;
    inset-inline-end: -2px;
    inset-block-end: 18px;
    height: 12rem;
}

@media (max-width: 380px) {
    .offer-card-details .offer-item-img {
        display: none;
    }
}

.op-1-1 {
    opacity: 1;
}

.op-0 {
    opacity: 0;
}

.op-1 {
    opacity: 0.1;
}

.op-2 {
    opacity: 0.2;
}

.op-3 {
    opacity: 0.3;
}

.op-4 {
    opacity: 0.4;
}

.op-5 {
    opacity: 0.5;
}

.op-6 {
    opacity: 0.6;
}

.op-7 {
    opacity: 0.7;
}

.op-8 {
    opacity: 0.8;
}

.op-9 {
    opacity: 0.9;
}

.fs-sm {
    font-size: 0.6875rem;
}

.fs-base {
    font-size: 0.875rem;
}

.fs-lg {
    font-size: 1.125rem;
}

.fs-1 {
    font-size: 0.0625rem;
}

.fs-2 {
    font-size: 0.125rem;
}

.fs-3 {
    font-size: 0.1875rem;
}

.fs-4 {
    font-size: 0.25rem;
}

.fs-5 {
    font-size: 0.3125rem;
}

.fs-6 {
    font-size: 0.375rem;
}

.fs-7 {
    font-size: 0.4375rem;
}

.fs-8 {
    font-size: 0.5rem;
}

.fs-9 {
    font-size: 0.5625rem;
}

.fs-10 {
    font-size: 0.625rem;
}

.fs-11 {
    font-size: 0.6875rem;
}

.fs-12 {
    font-size: 0.75rem;
}

.fs-13 {
    font-size: 0.8125rem;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-15 {
    font-size: 0.9375rem;
}

.fs-16 {
    font-size: 1rem;
}

.fs-17 {
    font-size: 1.0625rem;
}

.fs-18 {
    font-size: 1.125rem;
}

.fs-19 {
    font-size: 1.1875rem;
}

.fs-20 {
    font-size: 1.25rem;
}

.fs-21 {
    font-size: 1.3125rem;
}

.fs-22 {
    font-size: 1.375rem;
}

.fs-23 {
    font-size: 1.4375rem;
}

.fs-24 {
    font-size: 1.5rem;
}

.fs-25 {
    font-size: 1.5625rem;
}

.fs-26 {
    font-size: 1.625rem;
}

.fs-27 {
    font-size: 1.6875rem;
}

.fs-28 {
    font-size: 1.75rem;
}

.fs-29 {
    font-size: 1.8125rem;
}

.fs-30 {
    font-size: 1.875rem;
}

.fs-32 {
    font-size: 2rem;
}

.fs-34 {
    font-size: 2.125rem;
}

.fs-36 {
    font-size: 2.25rem;
}

.fs-38 {
    font-size: 2.375rem;
}

.fs-40 {
    font-size: 2.5rem;
}

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

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

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

.text-primary.text-opacity-75 {
    color: var(--primary08) !important;
}

.text-primary.text-opacity-25 {
    color: var(--primary03) !important;
}

.text-primary.text-opacity-50 {
    color: var(--primary05) !important;
}

.text-primary1 {
    color: var(--primary-tint1-color) !important;
    opacity: 1;
}

.text-primary1.text-opacity-75 {
    color: var(--primary08) !important;
}

.text-primary1.text-opacity-25 {
    color: var(--primary03) !important;
}

.text-primary1.text-opacity-50 {
    color: var(--primary05) !important;
}

.text-primary2 {
    color: var(--primary-tint2-color) !important;
    opacity: 1;
}

.text-primary2.text-opacity-75 {
    color: rgba(var(--primary-tint1-rgb), 0.75) !important;
}

.text-primary2.text-opacity-25 {
    color: rgba(var(--primary-tint1-rgb), 0.25) !important;
}

.text-primary2.text-opacity-50 {
    color: rgba(var(--primary-tint1-rgb), 0.5) !important;
}

.text-primary3 {
    color: var(--primary-tint3-color) !important;
    opacity: 1;
}

.text-primary3.text-opacity-75 {
    color: rgba(var(--primary-tint2-rgb), 0.75) !important;
}

.text-primary3.text-opacity-25 {
    color: rgba(var(--primary-tint2-rgb), 0.25) !important;
}

.text-primary3.text-opacity-50 {
    color: rgba(var(--primary-tint2-rgb), 0.5) !important;
}

.text-secondary {
    color: rgb(var(--secondary-rgb)) !important;
    opacity: 1;
}

.text-secondary.text-opacity-75 {
    color: rgba(var(--primary-tint3-rgb), 0.75) !important;
}

.text-secondary.text-opacity-25 {
    color: rgba(var(--primary-tint3-rgb), 0.25) !important;
}

.text-secondary.text-opacity-50 {
    color: rgba(var(--primary-tint3-rgb), 0.5) !important;
}

.text-info {
    color: rgb(var(--info-rgb)) !important;
    opacity: 1;
}

.text-info.text-opacity-75 {
    color: rgba(var(--info-rgb), 0.75) !important;
}

.text-info.text-opacity-25 {
    color: rgba(var(--info-rgb), 0.25) !important;
}

.text-info.text-opacity-50 {
    color: rgba(var(--info-rgb), 0.5) !important;
}

.text-success {
    color: rgb(var(--success-rgb)) !important;
    opacity: 1;
}

.text-success.text-opacity-75 {
    color: rgba(var(--success-rgb), 0.75) !important;
}

.text-success.text-opacity-25 {
    color: rgba(var(--success-rgb), 0.25) !important;
}

.text-success.text-opacity-50 {
    color: rgba(var(--success-rgb), 0.5) !important;
}

.text-warning {
    color: rgb(var(--warning-rgb)) !important;
    opacity: 1;
}

.text-warning.text-opacity-75 {
    color: rgba(var(--warning-rgb), 0.75) !important;
}

.text-warning.text-opacity-25 {
    color: rgba(var(--warning-rgb), 0.25) !important;
}

.text-warning.text-opacity-50 {
    color: rgba(var(--warning-rgb), 0.5) !important;
}

.text-danger {
    color: rgb(var(--danger-rgb)) !important;
    opacity: 1;
}

.text-danger.text-opacity-75 {
    color: rgba(var(--danger-rgb), 0.75) !important;
}

.text-danger.text-opacity-25 {
    color: rgba(var(--danger-rgb), 0.25) !important;
}

.text-danger.text-opacity-50 {
    color: rgba(var(--danger-rgb), 0.5) !important;
}

.text-blue {
    color: #0082FF !important;
}

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

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

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

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

.text-indigo {
    color: #4d5ddb !important;
}

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

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

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

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

.text-yellow {
    color: #fff621 !important;
}

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

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

.text-fixed-white {
    color: #fff !important;
}

.text-fixed-black {
    color: #000 !important;
}

.text-gray-1 {
    color: var(--gray-1);
}

.text-gray-2 {
    color: var(--gray-2);
}

.text-gray-3 {
    color: var(--gray-3);
}

.text-gray-4 {
    color: var(--gray-4);
}

.text-gray-5 {
    color: var(--gray-5);
}

.text-gray-6 {
    color: var(--gray-6);
}

.text-gray-7 {
    color: var(--gray-7);
}

.text-gray-8 {
    color: var(--gray-8);
}

.text-gray-9 {
    color: var(--gray-9);
}

.recent-activity-list {
    margin-block-end: 0;
    position: relative;
}

.recent-activity-list:before {
    position: absolute;
    content: "";
    width: 1px;
    background-color: var(--default-border);
    height: 82%;
    inset-inline-start: 65px;
    inset-block-start: 12px;
}

.recent-activity-list li {
    position: relative;
    margin-block-end: 1.1rem;
    padding-inline-start: 5.75rem;
}

.recent-activity-list li .activity-time {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 2px;
}

.recent-activity-list li:nth-child(1):before {
    background-color: rgba(var(--primary-rgb), 1);
    box-shadow: 0px 0px 0px 4px rgba(var(--primary-rgb), 0.15);
}

.recent-activity-list li:nth-child(2):before {
    background-color: rgba(var(--primary-tint1-rgb), 1);
    box-shadow: 0px 0px 0px 4px rgba(var(--primary-tint1-rgb), 0.15);
}

.recent-activity-list li:nth-child(3):before {
    background-color: rgba(var(--primary-tint2-rgb), 1);
    box-shadow: 0px 0px 0px 4px rgba(var(--primary-tint2-rgb), 0.15);
}

.recent-activity-list li:nth-child(4):before {
    background-color: rgba(var(--primary-tint3-rgb), 1);
    box-shadow: 0px 0px 0px 4px rgba(var(--primary-tint3-rgb), 0.15);
}

.recent-activity-list li:nth-child(5):before {
    background-color: rgba(var(--secondary-rgb), 1);
    box-shadow: 0px 0px 0px 4px rgba(var(--secondary-rgb), 0.15);
}

.recent-activity-list li:nth-child(6):before {
    background-color: rgba(var(--warning-rgb), 1);
    box-shadow: 0px 0px 0px 4px rgba(var(--warning-rgb), 0.15);
}

.recent-activity-list li:before {
    position: absolute;
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--custom-white);
    inset-inline-start: 62px;
    inset-block-start: 7px;
}

.recent-activity-list li:last-child {
    margin-block-end: 0;
}

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

.bg-primary.bg-opacity-10 {
    background-color: var(--primary01) !important;
}

.bg-primary.bg-opacity-25 {
    background-color: var(--primary03) !important;
}

.bg-primary.bg-opacity-50 {
    background-color: var(--primary05) !important;
}

.bg-primary.bg-opacity-75 {
    background-color: var(--primary08) !important;
}

.bg-primary.bg-opacity-100 {
    background-color: var(--primary-color) !important;
}

.bg-primary1 {
    background-color: var(--primary-tint1-color) !important;
}

.bg-primary1.bg-opacity-10 {
    background-color: rgba(var(--primary-tint1-rgb), 0.1) !important;
}

.bg-primary1.bg-opacity-25 {
    background-color: rgba(var(--primary-tint1-rgb), 0.25) !important;
}

.bg-primary1.bg-opacity-50 {
    background-color: rgba(var(--primary-tint1-rgb), 0.5) !important;
}

.bg-primary1.bg-opacity-75 {
    background-color: rgba(var(--primary-tint1-rgb), 0.75) !important;
}

.bg-primary1.bg-opacity-100 {
    background-color: rgba(var(--primary-tint1-rgb), 1) !important;
}

.bg-primary2 {
    background-color: var(--primary-tint2-color) !important;
}

.bg-primary2.bg-opacity-10 {
    background-color: rgba(var(--primary-tint2-rgb), 0.1) !important;
}

.bg-primary2.bg-opacity-25 {
    background-color: rgba(var(--primary-tint2-rgb), 0.25) !important;
}

.bg-primary2.bg-opacity-50 {
    background-color: rgba(var(--primary-tint2-rgb), 0.5) !important;
}

.bg-primary2.bg-opacity-75 {
    background-color: rgba(var(--primary-tint2-rgb), 0.75) !important;
}

.bg-primary2.bg-opacity-100 {
    background-color: rgba(var(--primary-tint2-rgb), 1) !important;
}

.bg-primary3 {
    background-color: var(--primary-tint3-color) !important;
}

.bg-primary3.bg-opacity-10 {
    background-color: rgba(var(--primary-tint3-rgb), 0.1) !important;
}

.bg-primary3.bg-opacity-25 {
    background-color: rgba(var(--primary-tint3-rgb), 0.25) !important;
}

.bg-primary3.bg-opacity-50 {
    background-color: rgba(var(--primary-tint3-rgb), 0.5) !important;
}

.bg-primary3.bg-opacity-75 {
    background-color: rgba(var(--primary-tint3-rgb), 0.75) !important;
}

.bg-primary3.bg-opacity-100 {
    background-color: rgba(var(--primary-tint3-rgb), 1) !important;
}

.bg-secondary {
    background-color: rgb(var(--secondary-rgb)) !important;
}

.bg-secondary.bg-opacity-10 {
    background-color: rgba(var(--secondary-rgb), 0.1) !important;
}

.bg-secondary.bg-opacity-25 {
    background-color: rgba(var(--secondary-rgb), 0.25) !important;
}

.bg-secondary.bg-opacity-50 {
    background-color: rgba(var(--secondary-rgb), 0.5) !important;
}

.bg-secondary.bg-opacity-75 {
    background-color: rgba(var(--secondary-rgb), 0.75) !important;
}

.bg-secondary.bg-opacity-100 {
    background-color: rgba(var(--secondary-rgb), 1) !important;
}

.bg-info {
    background-color: rgb(var(--info-rgb)) !important;
}

.bg-info.bg-opacity-10 {
    background-color: rgba(var(--info-rgb), 0.1) !important;
}

.bg-info.bg-opacity-25 {
    background-color: rgba(var(--info-rgb), 0.25) !important;
}

.bg-info.bg-opacity-50 {
    background-color: rgba(var(--info-rgb), 0.5) !important;
}

.bg-info.bg-opacity-75 {
    background-color: rgba(var(--info-rgb), 0.75) !important;
}

.bg-info.bg-opacity-100 {
    background-color: rgba(var(--info-rgb), 1) !important;
}

.bg-success {
    background-color: rgb(var(--success-rgb)) !important;
}

.bg-success.bg-opacity-10 {
    background-color: rgba(var(--success-rgb), 0.1) !important;
}

.bg-success.bg-opacity-25 {
    background-color: rgba(var(--success-rgb), 0.25) !important;
}

.bg-success.bg-opacity-50 {
    background-color: rgba(var(--success-rgb), 0.5) !important;
}

.bg-success.bg-opacity-75 {
    background-color: rgba(var(--success-rgb), 0.75) !important;
}

.bg-success.bg-opacity-100 {
    background-color: rgba(var(--success-rgb), 1) !important;
}

.bg-warning {
    background-color: rgb(var(--warning-rgb)) !important;
}

.bg-warning.bg-opacity-10 {
    background-color: rgba(var(--warning-rgb), 0.1) !important;
}

.bg-warning.bg-opacity-25 {
    background-color: rgba(var(--warning-rgb), 0.25) !important;
}

.bg-warning.bg-opacity-50 {
    background-color: rgba(var(--warning-rgb), 0.5) !important;
}

.bg-warning.bg-opacity-75 {
    background-color: rgba(var(--warning-rgb), 0.75) !important;
}

.bg-warning.bg-opacity-100 {
    background-color: rgba(var(--warning-rgb), 1) !important;
}

.bg-danger {
    background-color: rgb(var(--danger-rgb)) !important;
}

.bg-danger.bg-opacity-10 {
    background-color: rgba(var(--danger-rgb), 0.1) !important;
}

.bg-danger.bg-opacity-25 {
    background-color: rgba(var(--danger-rgb), 0.25) !important;
}

.bg-danger.bg-opacity-50 {
    background-color: rgba(var(--danger-rgb), 0.5) !important;
}

.bg-danger.bg-opacity-75 {
    background-color: rgba(var(--danger-rgb), 0.75) !important;
}

.bg-danger.bg-opacity-100 {
    background-color: rgba(var(--danger-rgb), 1) !important;
}

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

.bg-dark.bg-opacity-10 {
    background-color: rgba(var(--dark-rgb), 0.1) !important;
}

.bg-dark.bg-opacity-25 {
    background-color: rgba(var(--dark-rgb), 0.25) !important;
}

.bg-dark.bg-opacity-50 {
    background-color: rgba(var(--dark-rgb), 0.5) !important;
}

.bg-dark.bg-opacity-75 {
    background-color: rgba(var(--dark-rgb), 0.75) !important;
}

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

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

.bg-light.bg-opacity-10 {
    background-color: rgba(var(--light-rgb), 0.1) !important;
}

.bg-light.bg-opacity-25 {
    background-color: rgba(var(--light-rgb), 0.25) !important;
}

.bg-light.bg-opacity-50 {
    background-color: rgba(var(--light-rgb), 0.5) !important;
}

.bg-light.bg-opacity-75 {
    background-color: rgba(var(--light-rgb), 0.75) !important;
}

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

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

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

.bg-orange {
    background-color: rgb(var(--orange-rgb)) !important;
}

.bg-purple {
    background-color: rgb(var(--purple-rgb)) !important;
}

.bg-green {
    background-color: rgb(var(--green-rgb)) !important;
}

.bg-teal {
    background-color: rgb(var(--teal-rgb)) !important;
}

.bg-blue {
    background-color: #0082FF !important;
}

.bg-indigo {
    background-color: #4d5ddb !important;
}

.bg-yellow {
    background-color: #fff621 !important;
}

.bg-primary-gradient {
    background:
        linear-gradient(to bottom right,
            var(--primary-color) 0%,
            rgb(var(--secondary-rgb)) 100%) !important;
    color: #fff;
}

.bg-primary1-gradient {
    background:
        linear-gradient(to bottom right,
            var(--primary-tint1-color) 0%,
            #AB54E3 100%) !important;
    color: #fff;
}

.bg-primary2-gradient {
    background:
        linear-gradient(to bottom right,
            var(--primary-tint2-color) 0%,
            #FF6C5D 100%) !important;
    color: #fff;
}

.bg-primary3-gradient {
    background:
        linear-gradient(to bottom right,
            var(--primary-tint3-color) 0%,
            #FF663C 100%) !important;
    color: #fff;
}

.bg-secondary-gradient {
    background:
        linear-gradient(to bottom right,
            rgb(var(--secondary-rgb)) 0%,
            #7289FF 100%) !important;
    color: #fff;
}

.bg-warning-gradient {
    background:
        linear-gradient(to bottom right,
            rgb(var(--warning-rgb)) 0%,
            #9EA53C 100%) !important;
    color: #fff;
}

.bg-info-gradient {
    background:
        linear-gradient(to bottom right,
            rgb(var(--info-rgb)) 0%,
            #4990E1 100%) !important;
    color: #fff;
}

.bg-success-gradient {
    background:
        linear-gradient(to bottom right,
            rgb(var(--success-rgb)) 0%,
            #009CA4 100%) !important;
    color: #fff;
}

.bg-danger-gradient {
    background:
        linear-gradient(to bottom right,
            rgb(var(--danger-rgb)) 0%,
            #DE4980 100%) !important;
    color: #fff;
}

.bg-orange-gradient {
    background:
        linear-gradient(to bottom right,
            rgb(var(--orange-rgb)) 0%,
            #E5647E 100%) !important;
    color: #fff;
}

.bg-purple-gradient {
    background:
        linear-gradient(to bottom right,
            rgb(var(--purple-rgb)) 0%,
            #0086FF 100%) !important;
    color: #fff;
}

.bg-teal-gradient {
    background:
        linear-gradient(to bottom right,
            rgb(var(--teal-rgb)) 0%,
            #3AE3C7 100%) !important;
    color: #fff;
}

.bg-light-gradient {
    background:
        linear-gradient(to bottom right,
            rgb(var(--light-rgb)) 0%,
            #D7FCFF 100%) !important;
    color: #000;
}

.bg-dark-gradient {
    background:
        linear-gradient(to bottom right,
            rgb(var(--dark-rgb)) 0%,
            #16657A 100%) !important;
    color: #fff;
}

.bg-outline-primary {
    background-color: var(--custom-white);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.bg-outline-primary1 {
    background-color: var(--custom-white);
    border: 1px solid var(--primary-tint1-color);
    color: var(--primary-tint1-color);
}

.bg-outline-primary2 {
    background-color: var(--custom-white);
    border: 1px solid var(--primary-tint2-color);
    color: var(--primary-tint2-color);
}

.bg-outline-primary3 {
    background-color: var(--custom-white);
    border: 1px solid var(--primary-tint3-color);
    color: var(--primary-tint3-color);
}

.bg-outline-secondary {
    background-color: var(--custom-white);
    border: 1px solid rgb(var(--secondary-rgb));
    color: rgb(var(--secondary-rgb));
}

.bg-outline-warning {
    background-color: var(--custom-white);
    border: 1px solid rgb(var(--warning-rgb));
    color: rgb(var(--warning-rgb));
}

.bg-outline-info {
    background-color: var(--custom-white);
    border: 1px solid rgb(var(--info-rgb));
    color: rgb(var(--info-rgb));
}

.bg-outline-success {
    background-color: var(--custom-white);
    border: 1px solid rgb(var(--success-rgb));
    color: rgb(var(--success-rgb));
}

.bg-outline-danger {
    background-color: var(--custom-white);
    border: 1px solid rgb(var(--danger-rgb));
    color: rgb(var(--danger-rgb));
}

.bg-outline-dark {
    background-color: var(--custom-white);
    border: 1px solid rgb(var(--dark-rgb));
    color: rgb(var(--dark-rgb));
}

.bg-outline-light {
    background-color: var(--custom-white);
    border: 1px solid rgb(var(--light-rgb));
    color: var(--custom-black);
}

.bg-gray-100 {
    background-color: var(--gray-1);
}

.bg-gray-200 {
    background-color: var(--gray-2);
}

.bg-gray-300 {
    background-color: var(--gray-3);
}

.bg-gray-400 {
    background-color: var(--gray-4);
}

.bg-gray-500 {
    background-color: var(--gray-5);
}

.bg-gray-600 {
    background-color: var(--gray-6);
}

.bg-gray-700 {
    background-color: var(--gray-7);
}

.bg-gray-800 {
    background-color: var(--gray-8);
}

.bg-gray-900 {
    background-color: var(--gray-9);
}

.bg-primary-transparent {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary-color) !important;
}

.bg-primary-transparent:hover {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary-color) !important;
}

.bg-primary1-transparent {
    background-color: rgba(var(--primary-tint1-rgb), 0.1) !important;
    color: var(--primary-tint1-color) !important;
}

.bg-primary1-transparent:hover {
    background-color: rgba(var(--primary-tint1-rgb), 0.1) !important;
    color: var(--primary-tint1-color) !important;
}

.bg-primary2-transparent {
    background-color: rgba(var(--primary-tint2-rgb), 0.1) !important;
    color: var(--primary-tint2-color) !important;
}

.bg-primary2-transparent:hover {
    background-color: rgba(var(--primary-tint2-rgb), 0.1) !important;
    color: var(--primary-tint2-color) !important;
}

.bg-primary3-transparent {
    background-color: rgba(var(--primary-tint3-rgb), 0.1) !important;
    color: var(--primary-tint3-color) !important;
}

.bg-primary3-transparent:hover {
    background-color: rgba(var(--primary-tint3-rgb), 0.1) !important;
    color: var(--primary-tint3-color) !important;
}

.bg-secondary-transparent {
    background-color: rgba(var(--secondary-rgb), 0.1) !important;
    color: rgb(var(--secondary-rgb)) !important;
}

.bg-secondary-transparent:hover {
    background-color: rgba(var(--secondary-rgb), 0.1) !important;
    color: rgb(var(--secondary-rgb)) !important;
}

.bg-info-transparent {
    background-color: rgba(var(--info-rgb), 0.1) !important;
    color: rgb(var(--info-rgb)) !important;
}

.bg-info-transparent:hover {
    background-color: rgba(var(--info-rgb), 0.1) !important;
    color: rgb(var(--info-rgb)) !important;
}

.bg-success-transparent {
    background-color: rgba(var(--success-rgb), 0.1) !important;
    color: rgb(var(--success-rgb)) !important;
}

.bg-success-transparent:hover {
    background-color: rgba(var(--success-rgb), 0.1) !important;
    color: rgb(var(--success-rgb)) !important;
}

.bg-warning-transparent {
    background-color: rgba(var(--warning-rgb), 0.1) !important;
    color: rgb(var(--warning-rgb)) !important;
}

.bg-warning-transparent:hover {
    background-color: rgba(var(--warning-rgb), 0.1) !important;
    color: rgb(var(--warning-rgb)) !important;
}

.bg-danger-transparent {
    background-color: rgba(var(--danger-rgb), 0.1) !important;
    color: rgb(var(--danger-rgb)) !important;
}

.bg-danger-transparent:hover {
    background-color: rgba(var(--danger-rgb), 0.1) !important;
    color: rgb(var(--danger-rgb)) !important;
}

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

.bg-light-transparent:hover {
    background-color: rgba(var(--light-rgb), 0.1) !important;
    color: var(--default-text-color) !important;
}

.bg-dark-transparent {
    background-color: rgba(var(--dark-rgb), 0.1) !important;
    color: rgb(var(--dark-rgb)) !important;
}

.bg-dark-transparent:hover {
    background-color: rgba(var(--dark-rgb), 0.1) !important;
    color: rgb(var(--dark-rgb)) !important;
}

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

.bg-pink-transparent:hover {
    background-color: rgba(var(--pink-rgb), 0.1) !important;
    color: rgb(var(--pink-rgb)) !important;
}

.bg-orange-transparent {
    background-color: rgba(var(--orange-rgb), 0.1) !important;
    color: rgb(var(--orange-rgb)) !important;
}

.bg-orange-transparent:hover {
    background-color: rgba(var(--orange-rgb), 0.1) !important;
    color: rgb(var(--orange-rgb)) !important;
}

.bg-purple-transparent {
    background-color: rgba(var(--purple-rgb), 0.1) !important;
    color: rgb(var(--purple-rgb)) !important;
}

.bg-purple-transparent:hover {
    background-color: rgba(var(--purple-rgb), 0.1) !important;
    color: rgb(var(--purple-rgb)) !important;
}

.bg-teal-transparent {
    background-color: rgba(var(--teal-rgb), 0.1) !important;
    color: rgb(var(--teal-rgb)) !important;
}

.bg-teal-transparent:hover {
    background-color: rgba(var(--teal-rgb), 0.1) !important;
    color: rgb(var(--teal-rgb)) !important;
}

.bg-green-transparent {
    background-color: rgba(var(--green-rgb), 0.1) !important;
    color: rgb(var(--green-rgb)) !important;
}

.bg-green-transparent:hover {
    background-color: rgba(var(--green-rgb), 0.1) !important;
    color: rgb(var(--green-rgb)) !important;
}

.bg-indigo-transparent {
    background-color: rgba(77, 93, 219, 0.1) !important;
    color: #4d5ddb !important;
}

.bg-indigo-transparent:hover {
    background-color: rgba(77, 93, 219, 0.1) !important;
    color: #4d5ddb !important;
}

.bg-yellow-transparent {
    background-color: rgba(255, 246, 33, 0.1) !important;
    color: #fff621 !important;
}

.bg-yellow-transparent:hover {
    background-color: rgba(255, 246, 33, 0.1) !important;
    color: #fff621 !important;
}

.bg-blue-transparent {
    background-color: rgba(0, 130, 255, 0.1) !important;
    color: #0082FF !important;
}

.bg-blue-transparent:hover {
    background-color: rgba(0, 130, 255, 0.1) !important;
    color: #0082FF !important;
}

.bg-white-transparent {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: rgb(255, 255, 255) !important;
}

.bg-white-transparent:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: rgb(255, 255, 255) !important;
}

.bg-black-transparent {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: rgb(0, 0, 0) !important;
}

.bg-black-transparent:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: rgb(0, 0, 0) !important;
}

.text-bg-primary {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.text-bg-primary1 {
    background-color: var(--primary-tint1-color) !important;
    color: #fff !important;
}

.text-bg-primary2 {
    background-color: var(--primary-tint2-color) !important;
    color: #fff !important;
}

.text-bg-primary3 {
    background-color: var(--primary-tint3-color) !important;
    color: #fff !important;
}

.text-bg-secondary {
    background-color: rgb(var(--secondary-rgb)) !important;
    color: #fff !important;
}

.text-bg-warning {
    background-color: rgb(var(--warning-rgb)) !important;
    color: #fff !important;
}

.text-bg-info {
    background-color: rgb(var(--info-rgb)) !important;
    color: #fff !important;
}

.text-bg-success {
    background-color: rgb(var(--success-rgb)) !important;
    color: #fff !important;
}

.text-bg-danger {
    background-color: rgb(var(--danger-rgb)) !important;
    color: #fff !important;
}

.text-bg-light {
    background-color: rgb(var(--light-rgb)) !important;
    color: #000 !important;
}

.text-bg-dark {
    background-color: rgb(var(--dark-rgb)) !important;
    color: #fff !important;
}

.svg-primary svg {
    fill: var(--primary-color);
}

.svg-primary1 svg {
    fill: var(--primary-tint1-color);
}

.svg-primary2 svg {
    fill: var(--primary-tint2-color);
}

.svg-primary3 svg {
    fill: var(--primary-tint3-color);
}

.svg-secondary svg {
    fill: rgb(var(--secondary-rgb));
}

.svg-success svg {
    fill: rgb(var(--success-rgb));
}

.svg-danger svg {
    fill: rgb(var(--danger-rgb));
}

.svg-warning svg {
    fill: rgb(var(--warning-rgb));
}

.svg-white svg {
    fill: #fff;
}

.svg-black svg {
    fill: #000;
}

.svg-pink svg {
    fill: rgb(var(--pink-rgb));
}

.svg-orange svg {
    fill: rgb(var(--orange-rgb));
}

.svg-purple svg {
    fill: rgb(var(--purple-rgb));
}

.svg-indigo svg {
    fill: #4d5ddb;
}

.svg-info svg {
    fill: rgb(var(--info-rgb));
}

.svg-yellow svg {
    fill: #fff621;
}

.svg-light svg {
    fill: rgb(var(--light-rgb));
}

.svg-dark svg {
    fill: rgb(var(--dark-rgb));
}

.svg-teal svg {
    fill: rgb(var(--teal-rgb));
}

.svg-default svg {
    fill: var(--default-text-color);
}