@charset "UTF-8";
/*-----------------------------------------------------------------------------------

        [Master Stylesheet]
    Template Name: Dashnix - HTML5 Bootstrap Dashboard Template
    Author: Topylo
    Support: https://support.topylo.com
    Description: E-commerce, CRM, HRM and Job based admin dashboard template
    Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

        -----------------
    01. THEME SCSS
        -----------------
                1.1 theme
        -----------------------
    02. COMPONENTS SCSS
        -----------------------
                2.1 accordion
                2.2 alert
                2.3 animation
                2.4 avatar
                2.5 background
                2.6 backtotop
                2.7 badge
                2.8 breadcrumb
                2.9 buttons
                2.10 carousel
                2.11 color
                2.12 forms
                2.13 modal
                2.14 pagination
                2.15 preloader
                2.16 pricing
                2.17 progress-bar
                2.18 ribbon
                2.19 shortcodes
                2.20 steps
                2.21 tab
                2.22 table
                2.23 timeline
                2.24 tooltip

        -----------------------
    03. layout
        -----------------------
                3.1 announcement
                3.2 app-footer
                3.3 app-header
                3.4 app-sidebar
                3.5 authentication
                3.6 card
                3.7 chat
                3.8 company
                3.9 ecommerce
                3.10 email
                3.11 holiday
                3.12 invoice
                3.13 payslip
                3.14 project
                3.15 seller
                3.16 settings

        -----------------------
    04. plugins
        -----------------------
                4.1 apexcharts
                4.2 dropzone
                4.3 filepond
                4.4 flatpickr
                4.5 full-calender
                4.6 intl-tel-input
                4.7 nice-selector
                4.8 nouislider
                4.9 quill-editor
                4.10 rating
                4.11 select2
                4.12 shepherd
                4.13 slimselect
                4.14 sortable
                4.15 sweetalert2
                4.16 swiper
                4.17 tagify


/*---------------------------------
        1.1 Theme SCSS
---------------------------------*/
/* Google Fonts  */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
a,
.btn,
button,
span,
sub,
sup,
p,
input,
select,
textarea,
img,
svg,
.transition-3,
li,
h1,
h2,
h3,
h4,
h5,
h6, .body__overlay {
    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}

:root {
    /** @color declaration */
    --custom-white: #FBFAF9;
    --color-white: #FFFFFF;
    --color-black: #0E1726;
    --color-placeholder: #4d4d4d;
    --color-light: #F6F5F2;
    --color-light-1: #888EA8;
    --color-heading: #08062d;
    --color-body: #08062d;
    --color-menu: #61748f;
    --color-body-secondary: #acaab1;
    --color-text-muted: #8d9eb5;
    --color-card-bg: #FFFFFF;
    --color-body-bg: #F8F7FA;
    --primary-rgb: 79, 70, 229;
    --secondary-rgb: 254, 187, 123;
    --success-rgb: 40, 167, 69;
    --info-rgb: 20, 147, 255;
    --warning-rgb: 255, 131, 15;
    --danger-rgb: 230, 50, 50;
    --purple-rgb: 128, 0, 128;
    --slateblue-rgb: 106, 90, 205;
    --teal-rgb: 0, 128, 128;
    --pink-rgb: 255, 105, 180;
    --orange-rgb: 254, 124, 88;
    --light-rgb: 136, 142, 168;
    --dark-rgb: 10, 27, 24;
    --rating-rgb: 255, 226, 52;
    --color-primary: rgba(var(--primary-rgb), 1);
    --color-secondary: rgb(var(--secondary-rgb));
    --color-success: rgb(var(--success-rgb));
    --color-info: rgb(var(--info-rgb));
    --color-warning: rgb(var(--warning-rgb));
    --color-danger: rgb(var(--danger-rgb));
    --color-purple: rgb(var(--purple-rgb));
    --color-slateblue: rgb(var(--slateblue-rgb));
    --color-teal: rgb(var(--teal-rgb));
    --color-pink: rgb(var(--pink-rgb));
    --color-orange: rgb(var(--orange-rgb));
    --color-light: rgb(var(--light-rgb));
    --color-dark: rgb(var(--dark-rgb));
    --color-rating: rgb(var(--rating-rgb));
    --primary-rgba: rgba(var(--primary-rgb), 1);
    --primary-rgba-1: rgba(var(--primary-rgb), .1);
    --primary-rgba-15: rgba(var(--primary-rgb), 0.15);
    --primary-rgba-2: rgba(var(--primary-rgb), .2);
    --primary-rgba-3: rgba(var(--primary-rgb), .3);
    --primary-rgba-4: rgba(var(--primary-rgb), .4);
    --primary-rgba-5: rgba(var(--primary-rgb), .5);
    --primary-rgba-6: rgba(var(--primary-rgb), .6);
    --primary-rgba-7: rgba(var(--primary-rgb), .7);
    --primary-rgba-8: rgba(var(--primary-rgb), .8);
    --primary-rgba-9: rgba(var(--primary-rgb), .9);
    --primary-rgba-05: rgba(var(--primary-rgb), 0.05);
    --secondary-rgba-1: rgba(var(--secondary-rgb), 0.1);
    --secondary-rgba-15: rgba(var(--secondary-rgb), 0.15);
    --secondary-rgba-5: rgba(var(--secondary-rgb), 0.5);
    --success-rgba-1: rgba(var(--success-rgb), 0.1);
    --success-rgba-15: rgba(var(--success-rgb), 0.15);
    --success-rgba-5: rgba(var(--success-rgb), 0.5);
    --info-rgba-1: rgba(var(--info-rgb), 0.1);
    --info-rgba-15: rgba(var(--info-rgb), 0.15);
    --warning-rgba-1: rgba(var(--warning-rgb), 0.1);
    --warning-rgba-15: rgba(var(--warning-rgb), 0.15);
    --danger-rgba-1: rgba(var(--danger-rgb), 0.1);
    --danger-rgba-15: rgba(var(--danger-rgb), 0.15);
    --purple-rgba-1: rgba(var(--purple-rgb), 0.1);
    --purple-rgba-15: rgba(var(--purple-rgb), 0.15);
    --purple-rgba-5: rgba(var(--purple-rgb), 0.5);
    --slateblue-rgba-1: rgba(var(--slateblue-rgb), 0.1);
    --slateblue-rgba-15: rgba(var(--slateblue-rgb), 0.15);
    --slateblue-rgba-5: rgba(var(--slateblue-rgb), 0.5);
    --teal-rgba-1: rgba(var(--teal-rgb), 0.1);
    --teal-rgba-15: rgba(var(--teal-rgb), 0.15);
    --teal-rgba-5: rgba(var(--teal-rgb), 0.5);
    --pink-rgba-1: rgba(var(--pink-rgb), 0.1);
    --pink-rgba-15: rgba(var(--pink-rgb), 0.15);
    --pink-rgba-5: rgba(var(--pink-rgb), 0.5);
    --orange-rgba-1: rgba(var(--orange-rgb), 0.1);
    --orange-rgba-15: rgba(var(--orange-rgb), 0.15);
    --orange-rgba-5: rgba(var(--orange-rgb), 0.5);
    --light-rgba-1: rgba(var(--light-rgb), 0.1);
    --light-rgba-15: rgba(var(--light-rgb), 0.15);
    --light-rgba-5: rgba(var(--light-rgb), 0.5);
    --dark-rgba-1: rgba(var(--dark-rgb), 0.1);
    --dark-rgba-15: rgba(var(--dark-rgb), 0.15);
    --dark-rgba-5: rgba(var(--dark-rgb), 0.5);
    --color-bg-primary: #160b32;
    --color-bg-secondary: #191426;
    --color-border: #DDE4E3;
    --color-border-2: #595564;
    --shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
    /* Gray set */
    --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 set */
    --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 set */
    --black-1: rgba(14, 23, 38, 0.1);
    --black-15: rgba(14, 23, 38, 0.15);
    --black-2: rgba(14, 23, 38, 0.2);
    --black-3: rgba(14, 23, 38, 0.3);
    --black-4: rgba(14, 23, 38, 0.4);
    --black-5: rgba(14, 23, 38, 0.5);
    --black-6: rgba(14, 23, 38, 0.6);
    --black-7: rgba(14, 23, 38, 0.7);
    --black-8: rgba(14, 23, 38, 0.8);
    --black-9: rgba(14, 23, 38, 0.9);
    /**  @font family declaration */
    --ff-body: "Nunito Sans", sans-serif;
    --ff-title: "Nunito Sans", sans-serif;
    --ff-p: "Nunito Sans", sans-serif;
    --ff-remixicon: "remixicon";
    --ff-line-awesome: "Line Awesome Free";
    --ff-tabler: "tabler-icons";
    /** @font weight declaration */
    --fw-normal: normal;
    --fw-thin: 100;
    --fw-elight: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-sbold: 600;
    --fw-bold: 700;
    --fw-ebold: 800;
    --fw-black: 900;
    /** @font size declaration */
    --fs-body: 14px;
    --fs-p: 14px;
    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h3: 22px;
    --fs-h4: 20px;
    --fs-h5: 18px;
    --fs-h6: 16px;
    --fs-b1: 14px;
    --fs-b2: 15px;
    --fs-b3: 20px;
    --fs-b4: 24px;
    /** @transition value declaration */
    --transition: all .3s ease-in-out;
    --transition-5: all .5s ease-in-out;
    --transition-cubic: all 1.1s cubic-bezier(0, 0, 0.2, 1);
}
:root[data-theme-mode=dark] {
    --color-white: #0E1726;
    --color-black: #FFFFFF;
    --dark-rgb: 185, 185, 185;
    --color-placeholder: #909090;
    --color-text-muted: #9aa7b3;
    --color-heading: #BABFBE;
    --color-body: #BABFBE;
    --color-body-bg: #020109;
    --color-card-bg: #05041b;
    --color-border: #202C29;
    --shadow: 0px 2px 1px -1px rgba(255, 255, 255, 0.05);
    --gray-1: #1a1a2e;
    --gray-2: #24243d;
    --gray-3: #2e2e4a;
    --gray-4: #383857;
    --gray-5: #5a5a7d;
    --gray-6: #7a7a9e;
    --gray-7: #9d9dbf;
    --gray-8: #c1c1d9;
    --gray-9: #e0e0ed;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

/* Typography css start  */
body {
    color: var(--color-body);
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: 1.6;
    background: var(--color-body-bg);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h5,
h5,
.h5,
h6,
.h6 {
    color: var(--color-heading);
    margin-top: 0px;
    line-height: 1.2;
    margin-bottom: 0;
    font-weight: var(--fw-medium);
    word-break: break-word;
    font-family: var(--ff-title);
}

h1,
.h1 {
    font-size: var(--fs-h1);
}

h2,
.h2 {
    font-size: var(--fs-h2);
}

h3,
.h3 {
    font-size: var(--fs-h3);
}

h4,
.h4 {
    font-size: var(--fs-h4);
}

h5,
.h5 {
    font-size: var(--fs-h5);
}

h6,
.h6 {
    font-size: var(--fs-h6);
}

p {
    font-size: var(--fs-p);
    font-family: var(--ff-p);
    font-weight: var(--fw-normal);
    color: var(--color-body);
    margin-bottom: 15px;
    line-height: 1.6;
}
p.b1 {
    font-size: var(--fs-b1);
}
p.b2 {
    font-size: var(--fs-b2);
}
p.b3 {
    font-size: var(--fs-b3);
}
p.b4 {
    font-size: var(--fs-b4);
}
p:last-child {
    margin-bottom: 0;
}

.b1 {
    font-size: var(--fs-b1);
}

.b2 {
    font-size: var(--fs-b2);
}

.b3 {
    font-size: var(--fs-b3);
}

.b4 {
    font-size: var(--fs-b4);
}

.small,
small {
    font-size: 12px;
}

a {
    text-decoration: none;
}

ul,
ol {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

a:focus,
.button:focus {
    text-decoration: none;
    outline: none;
}

a,
button {
    color: inherit;
    outline: none;
    border: none;
    background: transparent;
}

img {
    max-width: 100%;
    object-fit: cover;
}

button:hover {
    cursor: pointer;
}

button:focus {
    outline: 0;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

hr:not([size]) {
    margin: 0;
    border-color: var(--color-border);
    opacity: 1;
    border-width: 1px;
}

textarea {
    padding: 14px 24px;
    min-height: 200px;
}
textarea:focus {
    border-color: var(--color-primary);
}

*::-moz-selection {
    background: var(--color-primary);
    color: var(--color-white);
    text-shadow: none;
}
[data-theme-mode=dark] *::-moz-selection {
    color: var(--color-black);
}

::-moz-selection {
    background: var(--color-primary);
    color: var(--color-white);
    text-shadow: none;
}
[data-theme-mode=dark] ::-moz-selection {
    color: var(--color-black);
}

::selection {
    background: var(--color-primary);
    color: var(--color-white);
    text-shadow: none;
}
[data-theme-mode=dark] ::selection {
    color: var(--color-black);
}

*::-moz-placeholder {
    opacity: 1;
    font-size: 16px;
    color: var(--color-placeholder);
}

*::placeholder {
    opacity: 1;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--ff-title);
    color: var(--color-placeholder);
}

/*----------------------------------------
   Bootstrap customize
-----------------------------------------*/
@media (min-width: 992px) {
    body {
        padding-inline-end: 0 !important;
        overflow: auto !important;
    }
}
.container {
    padding-inline-start: 15px;
    padding-inline-end: 15px;
}

.row {
    --bs-gutter-x: 23px;
}

.g-15,
.gy-15 {
    --bs-gutter-y: 15px;
}

.g-25,
.gy-25 {
    --bs-gutter-y: 25px;
}

/*---------------------------------
    1.2 Common Classes
---------------------------------*/
.w-img img {
    width: 100%;
}

.m-img img {
    max-width: 100%;
}

.fix {
    overflow: hidden;
}

.clear {
    clear: both;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.z-index-1 {
    z-index: 1;
}

.z-index-11 {
    z-index: 11;
}

.opacity-05 {
    opacity: 0.5;
}

.overflow-y-visible {
    overflow-x: hidden;
    overflow-y: visible;
}

.p-relative {
    position: relative;
}

.position-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.position-absolute {
    position: absolute;
}

.include-bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hr-1 {
    border-top: 1px solid rgb(232, 232, 232);
}

.x-clip {
    overflow-x: clip;
}

@media (max-width: 575px) {
    .o-xs {
        overflow-x: hidden;
    }
}

.overflow-visible {
    overflow: visible;
}

/*----------------------------------------
    Body Overlay
-----------------------------------------*/
.body__overlay {
    background-color: var(--color-black);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    inset-inline-start: 0;
    opacity: 0;
    visibility: hidden;
}

.body__overlay.opened {
    opacity: 0.7;
    visibility: visible;
}

.image-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.image-overly {
    position: relative;
    z-index: 5;
}
.image-overly::before {
    position: absolute;
    content: "";
    inset-inline-start: 0;
    inset-block-start: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

/*----------------------------------------
   Mfp customize
-----------------------------------------*/
.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 1280px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .mfp-iframe-holder .mfp-content {
        max-width: 1000px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .mfp-iframe-holder .mfp-content {
        max-width: 850px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .mfp-iframe-holder .mfp-content {
        max-width: 820px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .mfp-iframe-holder .mfp-content {
        max-width: 750px;
    }
}

.mfp-close {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
.mfp-close:hover {
    color: var(--color-white);
}
.mfp-close::after {
    position: absolute;
    content: "\f4c7";
    height: 100%;
    width: 100%;
    font-family: var(--ff-remixicon);
    font-size: 31px;
    font-weight: 200;
    inset-inline-end: -20px;
    margin-top: -25px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
    .mfp-close::after {
        inset-inline-end: 15px;
        margin-top: -30px;
    }
}

.mfp-arrow-left {
    inset-inline-start: 15px;
}

.mfp-arrow-right {
    inset-inline-end: 15px;
}

.change-theme {
    cursor: pointer;
}

.dropdown-menu {
    animation-duration: 0.2s;
    -webkit-animation-duration: 0.2s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    animation-name: slideIn;
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
    }
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
}
.custom-scrollbar {
    overflow-x: scroll;
    -ms-overflow-style: thin;
    /* for Internet Explorer, Edge */
    scrollbar-width: thin;
    /* for Firefox */
    /* Set the width of the scrollbar */
    /* Set the color of the scrollbar thumb (the draggable part) */
    /* Set the color of the scrollbar track when the thumb is being dragged */
    /* Set the color of the scrollbar track (the area the thumb moves on) */
    /* Set the border-radius of the scrollbar thumb */
}
.custom-scrollbar::-webkit-scrollbar-width {
    scrollbar-width: thin;
    /* for Chrome, Safari, and Opera */
}
.custom-scrollbar::-webkit-scrollbar {
    width: 50px !important;
    /* Adjust as needed */
    height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #A6A6A6;
    /* Adjust as needed */
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #606060;
    /* Adjust as needed */
}
.custom-scrollbar::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    /* Adjust as needed */
}
.custom-scrollbar::-webkit-scrollbar-thumb:vertical {
    border-radius: 2px;
    /* Adjust as needed */
}

/*----------------------------------------*/
/*  2.1 accordion
/*----------------------------------------*/
.accordion-item {
    border-radius: 4px;
    color: var(--color-black);
    background-color: transparent;
    border: 1px solid var(--color-border);
}

.accordion-body {
    padding: 25px 25px;
    font-size: 16px;
    color: var(--color-black);
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 4px 4px;
}

.accordion-button {
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    color: var(--color-black);
    background-color: var(--color-white);
    border-bottom: 0 none;
    box-shadow: none;
    padding: 15px 15px;
    margin-bottom: 0;
    padding-inline-end: 50px;
}
@media (max-width:450px) {
    .accordion-button {
        padding: 20px 20px;
        padding-inline-end: 60px;
    }
}
.accordion-button span {
    color: var(--color-black);
    min-width: 35px;
    padding-inline-end: 15px;
    display: inline-block;
}
.accordion-button span i {
    color: var(--color-black);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 50px;
    height: 50px;
    background-color: var(--color-white);
    border-radius: 50%;
    font-size: 29px;
}
.accordion-button:not(.collapsed) {
    color: var(--color-black);
    background-color: var(--color-white);
    box-shadow: none;
    border-radius: 4px 4px 0 0 !important;
}
.accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none;
}
.accordion-button::after {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: auto;
    height: auto;
    border-radius: 50%;
    margin-inline-start: auto;
    content: "\ea4e";
    font-family: var(--ff-remixicon);
    font-size: 18px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    position: absolute;
    inset-inline-end: 25px;
    top: 50%;
    transform: translateY(-50%);
    background-image: none !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.accordion-button:not(.collapsed)::after {
    content: "\ea78";
    font-family: var(--ff-remixicon);
}

.accordion-button-title p {
    font-size: 14px;
    color: var(--color-text-muted);
}

.accordion-common-style .accordion-item {
    border-radius: 4px;
    color: var(--color-black);
    background-color: transparent;
    border: 1px solid var(--color-border);
}
.accordion-common-style .accordion-body {
    padding: 25px 25px;
    font-size: 16px;
    color: var(--color-black);
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 4px 4px;
}
.accordion-common-style .accordion-button-title p {
    font-size: 14px;
    color: var(--color-text-muted);
}
.accordion-common-style.accordion-transparent .accordion-button {
    background-color: transparent;
}
.accordion-common-style.accordion-transparent .accordion-button:not(.collapsed) {
    background-color: transparent;
}
.accordion-common-style.accordion-transparent .accordion-body {
    background-color: transparent;
}
.accordion-common-style.accordion-icon-left .accordion-button {
    padding-inline-end: 0px !important;
    padding-inline-start: 38px !important;
    border-radius: 0;
}
.accordion-common-style.accordion-icon-left .accordion-button::before {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-inline-start: auto;
    content: "+";
    font-family: var(--ff-remixicon);
    font-size: 18px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    position: absolute;
    inset-inline-start: 0;
    top: 32px;
    transform: translateY(-50%);
    background-image: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.accordion-common-style.accordion-icon-left .accordion-button:not(.collapsed)::before {
    content: "\f1ae";
    font-family: var(--ff-remixicon);
}
.accordion-common-style.accordion-icon-left .accordion-button::after {
    display: none;
}
.accordion-common-style.accordion-icon-left .accordion-button:not(.collapsed)::after {
    display: none;
}
.accordion-common-style.accordion-item-margin .accordion-item:not(:last-child) {
    margin-bottom: 25px;
}
.accordion-common-style.accordion-style-one .accordion-item {
    margin-bottom: 25px;
    overflow: inherit;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
}
.accordion-common-style.accordion-style-one .accordion-item:last-child {
    margin-bottom: 0;
}
.accordion-common-style.accordion-style-one .accordion-button::after {
    content: "\ea6e";
    font-family: var(--ff-remixicon);
    transform: translateY(-50%);
}
.accordion-common-style.accordion-style-one .accordion-button:not(.collapsed)::after {
    content: "\ea4e";
    font-family: var(--ff-remixicon);
}
.accordion-common-style.accordion-style-one .accordion-body {
    border-top: none;
    padding: 0px 15px 15px;
}
.accordion-common-style.accordion-style-two .accordion-item {
    border: none;
    border-radius: 0;
}
.accordion-common-style.accordion-style-two .accordion-item:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}
.accordion-common-style.accordion-style-two .accordion-button {
    padding: 20px 0;
    margin-bottom: 0;
    padding-inline-end: 38px;
}
.accordion-common-style.accordion-style-two .accordion-button span {
    width: auto;
    padding-inline-end: 15px;
}
.accordion-common-style.accordion-style-two .accordion-body {
    padding: 0 0 25px;
    border-top: none;
}
.accordion-common-style.accordion-sl-number {
    counter-reset: count;
    overflow: hidden;
}
.accordion-common-style.accordion-sl-number .accordion-button {
    padding-inline-end: 0px;
    padding-inline-start: 60px;
    position: relative;
    border-radius: 0;
}
.accordion-common-style.accordion-sl-number .accordion-button::before {
    position: absolute;
    content: "";
    inset-inline-start: -15px;
    top: 50%;
    font-size: 48px;
    font-weight: 600;
    counter-increment: count;
    content: "0" counter(count);
    transition: all 500ms ease;
    display: inline-block;
    color: var(--color-primary);
    -webkit-text-stroke: 2px transparent;
    line-height: 1;
    transform: translateY(-50%);
    z-index: 10;
}
.accordion-common-style.accordion-sl-number .accordion-button::after {
    display: none;
}
.accordion-common-style.accordion-sl-number .accordion-button:not(.collapsed)::after {
    display: none;
}
.accordion-common-style.accordion-sl-number .accordion-button.collapsed::before {
    color: transparent;
    -webkit-text-stroke: 2px var(--color-primary);
}
.accordion-common-style.accordion-sl-number .accordion-body {
    padding: 20px 60px 25px;
}
.accordion-common-style.accordion-bg .accordion-item {
    border: none;
}
.accordion-common-style.accordion-bg .accordion-button {
    color: var(--color-black);
    background-color: var(--gray-3);
    border-radius: 4px !important;
}
.accordion-common-style.accordion-bg .accordion-body {
    color: var(--color-body);
    background-color: transparent;
    border-top: 1px solid var(--color-border);
    border: none;
    padding-bottom: 0;
}
.accordion-common-style.accordion-bg.accordion-primary .accordion-button {
    color: var(--color-white);
    background-color: var(--color-primary);
}
.accordion-common-style.accordion-bg.accordion-secondary .accordion-button {
    color: var(--color-white);
    background-color: var(--color-secondary);
}
.accordion-common-style.accordion-bg.accordion-info .accordion-button {
    color: var(--color-white);
    background-color: var(--color-info);
}
.accordion-common-style.accordion-bg.accordion-success .accordion-button {
    color: var(--color-white);
    background-color: var(--color-success);
}
.accordion-common-style.accordion-bg.accordion-warning .accordion-button {
    color: var(--color-white);
    background-color: var(--color-warning);
}
.accordion-common-style.accordion-bg.accordion-danger .accordion-button {
    color: var(--color-white);
    background-color: var(--color-danger);
}
.accordion-common-style .accordion-button {
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    color: var(--color-black);
    background-color: var(--color-white);
    border-bottom: 0 none;
    box-shadow: none;
    padding: 15px 15px;
    margin-bottom: 0;
    padding-inline-end: 50px;
}
@media (max-width:450px) {
    .accordion-common-style .accordion-button {
        padding: 20px 20px;
        padding-inline-end: 60px;
    }
}
.accordion-common-style .accordion-button span {
    color: var(--color-black);
    min-width: 35px;
    padding-inline-end: 15px;
    display: inline-block;
}
.accordion-common-style .accordion-button span i {
    color: var(--color-black);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 50px;
    height: 50px;
    background-color: var(--gray-3);
    border-radius: 50%;
    font-size: 29px;
}
.accordion-common-style .accordion-button:not(.collapsed) {
    color: var(--color-black);
    background-color: var(--gray-3);
    box-shadow: none;
    border-radius: 4px 4px 0 0 !important;
}
.accordion-common-style .accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: none;
}
.accordion-common-style .accordion-button::after {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: auto;
    height: auto;
    border-radius: 50%;
    margin-inline-start: auto;
    content: "\ea4e";
    font-family: var(--ff-remixicon);
    font-size: 18px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    position: absolute;
    inset-inline-end: 25px;
    top: 50%;
    transform: translateY(-50%);
    background-image: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.accordion-common-style .accordion-button:not(.collapsed)::after {
    content: "\ea78";
    font-family: var(--ff-remixicon);
}

/*----------------------------------------*/
/*  accordion end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.2 alert
/*----------------------------------------*/
.alert {
    position: relative;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 5px;
}
.alert.alert-primary {
    background-color: var(--primary-rgba-15);
    color: var(--color-primary);
    border-color: var(--primary-rgba-15);
}
.alert.alert-secondary {
    background-color: var(--secondary-rgba-15);
    color: var(--color-secondary);
    border-color: var(--secondary-rgba-15);
}
.alert.alert-success {
    background-color: var(--success-rgba-15);
    color: var(--color-success);
    border-color: var(--success-rgba-15);
}
.alert.alert-danger {
    background-color: var(--danger-rgba-15);
    color: var(--color-danger);
    border-color: var(--danger-rgba-15);
}
.alert.alert-warning {
    background-color: var(--warning-rgba-15);
    color: var(--color-warning);
    border-color: var(--warning-rgba-15);
}
.alert.alert-info {
    background-color: var(--info-rgba-15);
    color: var(--color-info);
    border-color: var(--info-rgba-15);
}
.alert.alert-light {
    background-color: var(--light-rgba-15);
    color: var(--color-light);
    border-color: var(--light-rgba-15);
}
.alert.alert-dark {
    background-color: var(--dark-rgba-15);
    color: var(--color-dark);
    border-color: var(--dark-rgba-15);
}
.alert.alert-solid-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
[data-theme-mode=dark] .alert.alert-solid-primary {
    color: var(--color-black);
}
.alert.alert-solid-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
}
.alert.alert-solid-success {
    background-color: var(--color-success);
    color: var(--color-white);
    border-color: var(--color-success);
}
.alert.alert-solid-danger {
    background-color: var(--color-danger);
    color: var(--color-white);
    border-color: var(--color-danger);
}
.alert.alert-solid-warning {
    background-color: var(--color-warning);
    color: var(--color-white);
    border-color: var(--color-warning);
}
.alert.alert-solid-info {
    background-color: var(--color-info);
    color: var(--color-white);
    border-color: var(--color-info);
}
.alert.alert-solid-light {
    background-color: var(--color-light);
    color: var(--color-white);
    border-color: var(--color-light);
}
.alert.alert-solid-dark {
    background-color: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-dark);
}
.alert.alert-outline-primary {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.alert.alert-outline-secondary {
    background-color: var(--color-white);
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.alert.alert-outline-success {
    background-color: var(--color-white);
    color: var(--color-success);
    border-color: var(--color-success);
}
.alert.alert-outline-danger {
    background-color: var(--color-white);
    color: var(--color-danger);
    border-color: var(--color-danger);
}
.alert.alert-outline-warning {
    background-color: var(--color-white);
    color: var(--color-warning);
    border-color: var(--color-warning);
}
.alert.alert-outline-info {
    background-color: var(--color-white);
    color: var(--color-info);
    border-color: var(--color-info);
}
.alert.alert-outline-light {
    background-color: var(--color-white);
    color: var(--color-light);
    border-color: var(--color-light);
}
.alert.alert-outline-dark {
    background-color: var(--color-white);
    color: var(--color-dark);
    border-color: var(--color-dark);
}
.alert.rounded-pill {
    border-radius: 50px !important;
}
.alert .btn-close {
    background-image: none;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}
[data-theme-mode=dark] .alert .btn-close {
    color: var(--color-black);
}
.alert .btn-close:hover {
    opacity: 1;
}
.alert .btn-close i {
    font-size: 16px;
}

.alert-link {
    font-weight: 700;
    color: var(--color-heading);
    text-decoration: underline;
}

.btn-close:focus {
    outline: 0;
    box-shadow: none;
}

.alert-icon-label {
    position: relative;
    padding-inline-start: 60px;
    border: 0;
}

.label-icon-solid {
    position: absolute;
    width: 45px;
    height: 100%;
    inset-inline-start: 0;
    top: 0;
    color: var(--color-white);
    background-color: var(--color-primary);
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 4px 0 0 4px;
}

.alert-primary .label-icon-solid {
    background-color: var(--color-primary);
}

.alert-secondary .label-icon-solid {
    background-color: var(--color-secondary);
}

.alert-success .label-icon-solid {
    background-color: var(--color-success);
}

.alert-danger .label-icon-solid {
    background-color: var(--color-danger);
}

.alert-warning .label-icon-solid {
    background-color: var(--color-warning);
}

.alert-info .label-icon-solid {
    background-color: var(--color-info);
}

.alert-light .label-icon-solid {
    background-color: var(--color-light);
}

.alert-dark .label-icon-solid {
    background-color: var(--color-dark);
}

.label-icon {
    position: absolute;
    width: 45px;
    height: 100%;
    inset-inline-start: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.25);
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 4px 0 0 4px;
}

/* Animation for appearing */
@keyframes alertFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.alert {
    animation: alertFadeIn 0.3s ease-out;
}

.popover-header {
    padding: 8px 16px;
    margin-bottom: 0;
    font-size: 16px;
    color: var(--color-heading);
    background-color: var(--gray-2);
    border-bottom: 1px solid var(--color-border);
}

.popover-body {
    padding: 8px 16px;
    color: var(--color-black);
    font-size: 14px;
}

.toast-header {
    padding: 8px 16px;
    margin-bottom: 0;
    font-size: 16px;
    color: var(--color-heading);
    background-color: var(--gray-2);
    border-bottom: 1px solid var(--color-border);
}
.toast-header .btn-close {
    background-image: none;
    font-size: 20px;
    color: var(--color-black);
    margin-top: -10px;
}

.toast-body {
    padding: 8px 16px;
    color: var(--color-black);
    font-size: 14px;
    font-weight: var(--fw-medium);
}
[data-theme-mode=dark] .toast-body {
    color: var(--color-white);
}

.toast-placement .bd-example-toasts {
    min-height: 360px;
}

.toastify {
    padding: 12px 20px;
    color: #ffffff;
    display: inline-block;
    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
    background: -webkit-linear-gradient(315deg, var(--color-secondary), var(--color-primary));
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    position: fixed;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    max-width: calc(50% - 20px);
    z-index: 2147483647;
}

/* Custom positions for "middle" toasts */
.toast-middle {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 9999;
    width: fit-content;
}

.left {
    inset-inline-start: 1rem !important;
    width: fit-content;
}

.center {
    inset-inline-start: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: fit-content;
}

.right {
    inset-inline-end: 1rem !important;
    width: fit-content;
}

/*----------------------------------------*/
/*  alert end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.3 Animations
/*----------------------------------------*/
.blink {
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes shine {
    100% {
        left: 125%;
    }
}
@-webkit-keyframes btnMarqueeTextX {
    100% {
        transform: translateX(-200%);
    }
}
@keyframes btnMarqueeTextX {
    100% {
        transform: translateX(-200%);
    }
}
@-webkit-keyframes btnMarqueeTextY {
    100% {
        transform: translateY(-200%);
    }
}
@keyframes btnMarqueeTextY {
    100% {
        transform: translateY(-200%);
    }
}
@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(0, 108, 228, 0.5);
        box-shadow: 0 0 0 0 rgba(0, 108, 228, 0.5);
    }
    70% {
        -moz-box-shadow: 0 0 0 45px rgba(0, 108, 228, 0);
        box-shadow: 0 0 0 45px rgba(0, 108, 228, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(0, 108, 228, 0);
        box-shadow: 0 0 0 0 rgba(0, 108, 228, 0);
    }
}
.pulse-white {
    animation: pulse-white 2s infinite;
}

@keyframes pulse-white {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
.animate-play {
    position: relative;
    z-index: 5;
}
.animate-play::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    border: 1px solid rgb(134, 134, 134);
    top: 0;
    left: 0;
    right: 0px;
    bottom: 0px;
    z-index: 0;
    animation-name: popupBtn;
    animation-duration: 1.6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: -1;
}
.animate-play::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    border: 1px solid rgb(134, 134, 134);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    z-index: 0;
    animation-name: popupBtn;
    animation-duration: 1.8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: -1;
}

@keyframes popupBtn {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.4);
        opacity: 0.3;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
@keyframes ripple {
    0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        opacity: 1;
    }
    75% {
        -webkit-transform: scale(1.9);
        transform: scale(1.9);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: scale(2.3);
        transform: scale(2.3);
        opacity: 0;
    }
}
@keyframes slide-left {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@keyframes iconBounce {
    0% {
        animation-timing-function: ease-in;
        opacity: 1;
        transform: translateY(-25px);
    }
    24% {
        opacity: 1;
    }
    40% {
        animation-timing-function: ease-in;
        transform: translateY(-24px);
    }
    65% {
        animation-timing-function: ease-in;
        transform: translateY(-12px);
    }
    82% {
        animation-timing-function: ease-in;
        transform: translateY(-6px);
    }
    93% {
        animation-timing-function: ease-in;
        transform: translateY(-4px);
    }
    25%, 55%, 75%, 87% {
        animation-timing-function: ease-out;
        transform: translateY(0px);
    }
    100% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: translateY(0px);
    }
}
.line-dash {
    stroke-dasharray: 4;
    stroke-dashoffset: 350;
    -webkit-animation: line-dash 30s linear backwards alternate-reverse infinite;
    animation: line-dash 30s linear backwards alternate-reverse infinite;
}

@keyframes line-dash {
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes planeRight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}
@keyframes scaleZeroOne {
    0% {
        transform: scale(0.6);
        opacity: 0.3;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes stoneSlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100px);
    }
}
@-moz-keyframes badgeSpin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes badgeSpin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes badgeSpin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes plane3Scale {
    0% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1);
    }
}
@-webkit-keyframes rotate-infinite {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@-moz-keyframes rotate-infinite {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@-ms-keyframes rotate-infinite {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotate-infinite {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* Right To Left */
@keyframes right-2-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100px);
    }
}
.upDown {
    animation: upDown 1.3S infinite alternate;
}

@keyframes upDown {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(-15px);
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -o-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
.spin {
    animation: spin 15s linear infinite;
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes qode-draw {
    0%, 100% {
        -webkit-clip-path: inset(-2px 0);
        clip-path: inset(-2px 0);
    }
    42% {
        -webkit-clip-path: inset(-2px 0 -2px 100%);
        clip-path: inset(-2px 0 -2px 100%);
    }
    43% {
        -webkit-clip-path: inset(-2px 100% -2px 0);
        clip-path: inset(-2px 100% -2px 0);
    }
}
@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(16px);
        -moz-transform: translateY(16px);
        -ms-transform: translateY(16px);
        -o-transform: translateY(16px);
        transform: translateY(16px);
    }
}
@-moz-keyframes scroll {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(16px);
        -moz-transform: translateY(16px);
        -ms-transform: translateY(16px);
        -o-transform: translateY(16px);
        transform: translateY(16px);
    }
}
@-ms-keyframes scroll {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(16px);
        -moz-transform: translateY(16px);
        -ms-transform: translateY(16px);
        -o-transform: translateY(16px);
        transform: translateY(16px);
    }
}
@keyframes scroll {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(16px);
        -moz-transform: translateY(16px);
        -ms-transform: translateY(16px);
        -o-transform: translateY(16px);
        transform: translateY(16px);
    }
}
@keyframes bubble {
    0% {
        -webkit-transform: rotate(0deg) translateX(-50px);
        -moz-transform: rotate(0deg) translateX(-50px);
        -ms-transform: rotate(0deg) translateX(-50px);
        transform: rotate(0deg) translateX(-50px);
    }
    100% {
        -webkit-transform: rotate(360deg) translateY(100px);
        -moz-transform: rotate(360deg) translateY(100px);
        -ms-transform: rotate(360deg) translateY(100px);
        transform: rotate(360deg) translateY(100px);
    }
}
@-webkit-keyframes leftright {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        transform: translateX(-20px);
    }
}
@-moz-keyframes leftright {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        transform: translateX(-20px);
    }
}
@-ms-keyframes leftright {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        transform: translateX(-20px);
    }
}
@keyframes leftright {
    0% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        transform: translateX(-20px);
    }
}
@keyframes bounce {
    0%, 10%, 100%, 20%, 50%, 80% {
        transform: translateX(0);
    }
    40%, 60% {
        transform: translateX(-15px);
    }
}
@keyframes top-image-bounce {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
    50% {
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
    }
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}
@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(16px);
        -moz-transform: translateY(16px);
        -ms-transform: translateY(16px);
        -o-transform: translateY(16px);
        transform: translateY(16px);
    }
}
@-moz-keyframes scroll {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(16px);
        -moz-transform: translateY(16px);
        -ms-transform: translateY(16px);
        -o-transform: translateY(16px);
        transform: translateY(16px);
    }
}
@-ms-keyframes scroll {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(16px);
        -moz-transform: translateY(16px);
        -ms-transform: translateY(16px);
        -o-transform: translateY(16px);
        transform: translateY(16px);
    }
}
@keyframes scroll {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(16px);
        -moz-transform: translateY(16px);
        -ms-transform: translateY(16px);
        -o-transform: translateY(16px);
        transform: translateY(16px);
    }
}
@keyframes pulse-blur {
    from, to {
        scale: 1;
        filter: blur(0px);
    }
    50% {
        scale: 1.05;
        filter: blur(2px);
    }
}
.cd-words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left;
}
.cd-words-wrapper b {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
    font-weight: inherit;
}
.cd-words-wrapper b.is-visible {
    position: relative;
}

.no-js .cd-words-wrapper b {
    opacity: 0;
}
.no-js .cd-words-wrapper b.is-visible {
    opacity: 1;
}

.cd-headline.clip span {
    display: inline-block;
    transition: none;
}
.cd-headline.clip .cd-words-wrapper {
    overflow: hidden;
    vertical-align: top;
}
.cd-headline.clip .cd-words-wrapper::after {
    top: 0;
    right: 0;
    width: 2px;
    content: "";
    height: 100%;
    position: absolute;
    background: -webkit-linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}
.cd-headline.clip b {
    opacity: 0;
}
.cd-headline.clip b.is-visible {
    opacity: 1;
}

@keyframes line1 {
    0% {
        top: 0px;
        opacity: 1;
    }
    50% {
        top: 50%;
    }
    100% {
        top: 100%;
        opacity: 1;
    }
}
@keyframes line2 {
    0% {
        opacity: 1;
        bottom: 0px;
    }
    50% {
        bottom: 50%;
    }
    100% {
        bottom: 100%;
        opacity: 1;
    }
}
@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
    }
    100% {
        -webkit-transform: translateX(7px);
        -moz-transform: translateX(7px);
        -ms-transform: translateX(7px);
        -o-transform: translateX(7px);
        transform: translateX(7px);
    }
}
@-moz-keyframes scroll {
    0% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
    }
    100% {
        -webkit-transform: translateX(7px);
        -moz-transform: translateX(7px);
        -ms-transform: translateX(7px);
        -o-transform: translateX(7px);
        transform: translateX(7px);
    }
}
@-ms-keyframes scroll {
    0% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
    }
    100% {
        -webkit-transform: translateX(7px);
        -moz-transform: translateX(7px);
        -ms-transform: translateX(7px);
        -o-transform: translateX(7px);
        transform: translateX(7px);
    }
}
@keyframes scroll {
    0% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
    }
    100% {
        -webkit-transform: translateX(7px);
        -moz-transform: translateX(7px);
        -ms-transform: translateX(7px);
        -o-transform: translateX(7px);
        transform: translateX(7px);
    }
}
@keyframes bannerAnimationOne {
    0% {
        transform: translate(0px, 0px);
    }
    20% {
        transform: translate(20px, -5px);
    }
    40% {
        transform: translate(50px, 20px);
    }
    60% {
        transform: translate(20px, 50px);
    }
    80% {
        transform: translate(-20px, 30px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}
@-webkit-keyframes about-text {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@-moz-keyframes about-text {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@-ms-keyframes about-text {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@keyframes about-text {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
/*----------------------------------------*/
/*  Animations end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.4 avatar
/*----------------------------------------*/
.avatar {
    position: relative;
    height: 36px;
    width: 36px;
    min-width: 36px;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flexbox;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: 500;
}
.avatar.avatar-xs {
    height: 22px;
    width: 22px;
    min-width: 22px;
}
.avatar.avatar-sm {
    height: 30px;
    width: 30px;
    min-width: 30px;
}
.avatar.avatar-md {
    height: 42px;
    width: 42px;
    min-width: 42px;
}
.avatar.avatar-50 {
    height: 50px;
    width: 50px;
    min-width: 50px;
}
.avatar.avatar-lg {
    height: 70px;
    width: 70px;
    min-width: 70px;
}
.avatar.avatar-xl {
    height: 80px;
    width: 80px;
    min-width: 80px;
}
.avatar.avatar-xxl {
    height: 100px;
    width: 100px;
    min-width: 100px;
}
.avatar.avatar-big {
    height: 122px;
    width: 122px;
    min-width: 122px;
}
.avatar.border {
    padding: 2px;
    border: 1px solid var(--color-border);
}
.avatar img {
    width: 100%;
    height: 100%;
}

.avatar-group {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding-inline-start: 10px;
}
.avatar-group .avatar-group-item {
    margin-inline-start: -10px;
    border-radius: 100%;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.avatar-group .avatar-group-item:hover {
    position: relative;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    z-index: 1;
}

.avatar-badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 28px;
    min-width: 28px;
    height: 28px;
    font-size: 12px;
    border: 2px solid var(--color-white);
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
}
.avatar-badge.avatar-xs {
    height: 20px;
    width: 20px;
    min-width: 20px;
    font-size: 10px;
}

.op-0 {
    opacity: 0;
}

/*----------------------------------------*/
/*  avatar end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.5 Background
/*----------------------------------------*/
.bg-primary {
    background-color: var(--color-primary) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-transparent {
    background-color: transparent !important;
}

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

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

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

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

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

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

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

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

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

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

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

.bg-slateblue-transparent {
    background-color: var(--slateblue-rgba-15) !important;
}

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

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

.gradient-color {
    background: linear-gradient(135deg, #1c4b42 0%, #FEBB7B 100%);
}

.text-bg-primary {
    color: var(--color-white) !important;
    background-color: var(--color-primary) !important;
}
[data-theme-mode=dark] .text-bg-primary {
    color: var(--color-black) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

/*----------------------------------------*/
/*  Background end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.6 Back to top
/*----------------------------------------*/
.progress-wrap {
    position: fixed;
    inset-inline-end: 50px;
    bottom: 100px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px var(--gray-3);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transition: all 200ms linear;
    transition: all ease 0.5s;
    background: var(--gray-1);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .progress-wrap {
        height: 36px;
        width: 36px;
        inset-inline-end: 30px;
        bottom: 30px;
    }
}
@media (max-width: 575px) {
    .progress-wrap.mobile-right {
        bottom: 100px;
    }
}
.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    bottom: 50px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .progress-wrap.active-progress {
        bottom: 30px;
    }
}
.progress-wrap::after {
    position: absolute;
    font-family: var(--ff-remixicon);
    content: "\ea77";
    text-align: center;
    font-size: 20px;
    color: var(--color-black);
    inset-inline-start: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .progress-wrap::after {
        height: 36px;
        width: 36px;
    }
}
[data-theme-mode=dark] .progress-wrap::after {
    color: var(--color-black);
}
.progress-wrap svg path {
    fill: none;
}
.progress-wrap svg.progress-circle path {
    stroke: var(--color-primary);
    stroke-width: 4;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

/*----------------------------------------*/
/*  Back to top end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.7 badge
/*----------------------------------------*/
.badge {
    font-size: 12px !important;
    font-weight: var(--fw-medium) !important;
    padding: 7px 11px 7px 10px !important;
    color: var(--custom-white);
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flexbox;
    display: inline-flex;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 4px;
    gap: 6px !important;
    line-height: 1 !important;
}
.badge.p-1 {
    padding: 4px !important;
}
.badge.badge-circle {
    padding: 0 0;
    width: 25px;
    height: 25px;
    min-width: auto;
    border-radius: 50%;
    margin-inline-start: 10px;
    color: var(--color-black);
}
.badge.badge-circle i {
    font-size: 14px;
    margin-inline-end: 0;
}
.badge.square {
    padding: 10px !important;
}
.badge.small {
    font-size: 12px !important;
    padding: 4px 5px !important;
}

.bg-label-primary {
    background-color: var(--primary-rgba-15);
    color: var(--color-primary);
}

.bg-label-secondary {
    background-color: var(--secondary-rgba-15);
    color: var(--color-secondary);
}

.bg-label-success {
    background-color: var(--success-rgba-15);
    color: var(--color-success);
}

.bg-label-info {
    background-color: var(--info-rgba-15);
    color: var(--color-info);
}

.bg-label-warning {
    background-color: var(--warning-rgba-15);
    color: var(--color-warning);
}

.bg-label-danger {
    background-color: var(--danger-rgba-15);
    color: var(--color-danger);
}

.bg-label-purple {
    background-color: var(--purple-rgba-15);
    color: var(--color-purple);
}

.bg-label-slateblue {
    background-color: var(--slateblue-rgba-15);
    color: var(--color-slateblue);
}

.bg-label-teal {
    background-color: var(--teal-rgba-15);
    color: var(--color-teal);
}

.bg-label-pink {
    background-color: var(--pink-rgba-15);
    color: var(--color-pink);
}

.bg-label-orange {
    background-color: var(--orange-rgba-15);
    color: var(--color-orange);
}

.bg-label-light {
    background-color: var(--light-rgba-15);
    color: var(--color-light);
}

.bg-label-dark {
    background-color: var(--dark-rgba-15);
    color: var(--color-dark);
}
[data-theme-mode=dark] .bg-label-dark {
    background-color: var(--light-rgba-15);
    color: var(--color-light);
}

/* alert-badge */
.alert-badge {
    font-size: 12px;
    font-weight: var(--fw-regular);
    padding: 4px 10px 4px 10px;
    color: var(--color-black);
    height: 26px;
    min-width: 75px;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flexbox;
    display: inline-flex;
    text-align: center;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
}
.alert-badge.border-none {
    border-radius: 0 !important;
}

/* tag badge */
.tag-badge {
    font-size: 12px;
    padding: 4px 10px 4px 10px;
    line-height: 1;
    color: var(--color-black);
    background-color: var(--gray-3);
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flexbox;
    display: inline-flex;
    text-align: center;
    justify-content: center;
    border-radius: 3px;
}
[data-theme-mode=dark] .tag-badge {
    background-color: var(--gray-5);
    color: var(--color-black);
}

/* dot badge */
.bullet {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    display: block;
}

.rating-badge {
    display: inline-flex;
    align-items: center;
    color: var(--color-heading);
    background-color: var(--gray-3);
    text-align: center;
    justify-content: center;
    border-radius: 4px;
    padding: 1px 8px 2px 8px;
    font-size: 12px;
    gap: 4px;
}

/*----------------------------------------*/
/*  badge end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.8 Breadcrumb
/*----------------------------------------*/
.page-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider, "\f2e5");
    font-family: var(--ff-remixicon) !important;
}
[dir=rtl] .page-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider, "\f2e3");
}

.breadcrumb .breadcrumb-item a {
    color: var(--color-primary);
    font-weight: var(--fw-sbold);
}
.breadcrumb .breadcrumb-item.active {
    color: var(--color-text-muted);
    font-weight: var(--fw-sbold);
}

.page-header-breadcrumb .breadcrumb-icon svg {
    width: 16px;
    height: 16px;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-text-muted);
}

.breadcrumb-example1 .breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-text-muted);
    content: var(--bs-breadcrumb-divider, "\f2e5");
    font-family: var(--ff-remixicon) !important;
}
[dir=rtl] .breadcrumb-example1 .breadcrumb-item + .breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider, "\f2e3");
}

.breadcrumb-style1 .breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-text-muted);
    content: var(--bs-breadcrumb-divider, "\f054");
    font-family: var(--ff-remixicon) !important;
}

[dir=rtl] .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-left: var(--bs-breadcrumb-item-padding-x);
}

.breadcrumb-item + .breadcrumb-item {
    padding-inline-start: var(--bs-breadcrumb-item-padding-x) !important;
}

/*----------------------------------------*/
/*  Breadcrumb end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.9 Buttons
/*----------------------------------------*/
.btn {
    font-size: 14px !important;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flexbox;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 7.5px 20px;
    transition: all 0.3s linear !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;
    white-space: nowrap !important;
    gap: 0 6px !important;
    font-weight: var(--fw-medium) !important;
    border: none !important;
    color: var(--custom-white);
}
.btn.active {
    color: var(--color-primary) !important;
    background-color: var(--color-secondary) !important;
}
.btn.btn-xs {
    padding: 3px 15px 2px 15px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}
.btn.btn-sm {
    padding: 4px 15px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    border-radius: 4px !important;
}
.btn.btn-small {
    padding: 0 26px;
    height: 40px;
}
.btn.btn-medium {
    padding: 0 30px;
    height: 56px;
}
.btn.btn-large {
    padding: 0 34px !important;
    height: 60px !important;
    font-size: 20px !important;
}
.btn.btn-extra-large {
    padding: 0 46px;
    height: 76px;
    font-size: 24px;
}
.btn .left-icon {
    margin-inline-end: 10px;
}
.btn .right-icon {
    margin-inline-start: 10px;
}
.btn:hover .fa-spinner {
    animation-name: fa-spin;
    animation-duration: var(--fa-animation-duration, 5s) !important;
    animation-iteration-count: var(--fa-animation-iteration-count, infinite) !important;
    animation-timing-function: var(--fa-animation-timing, linear) !important;
    animation-direction: alternate;
}
.btn .thumb {
    margin-inline-end: 10px;
    width: 20px;
    height: 20px;
    line-height: 20px;
}

.dropdown-toggle-split {
    padding-inline-end: 9px !important;
    padding-inline-start: 9px !important;
}

.btn-label {
    position: relative;
    padding-inline-start: 46px !important;
}
.btn-label .icon {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 36px;
    min-width: 36px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 6px 0 0 6px;
}
.btn-label .icon.solid {
    inset-inline-start: -1px;
}

.btn-check:checked + .btn,
.btn.active,
.btn:first-child:active,
.btn.show,
:not(.btn-check) + .btn:active {
    color: var(--custom-white) !important;
    background-color: var(--color-primary);
    border-color: var(--color-border) !important;
}

.btn-icon {
    font-weight: 500;
    text-transform: uppercase;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flexbox;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    width: 28px;
    min-width: 28px;
    height: 28px;
}
.btn-icon.btn-sm {
    width: 36px;
    min-width: 36px;
    height: 36px;
}
.btn-icon.btn-md {
    width: 42px;
    min-width: 42px;
    height: 42px;
    font-size: 16px;
}
.btn-icon.btn-medium {
    width: 52px;
    height: 52px;
    min-width: 52px;
    font-size: 20px;
}
.btn-icon.btn-large {
    width: 60px;
    min-width: 60px;
    height: 60px;
    font-size: 22px;
}
.btn-icon.btn-extra-large {
    width: 72px;
    min-width: 72px;
    height: 72px;
    font-size: 42px;
}
.btn-icon.primary {
    background-color: var(--primary-rgba-15) !important;
    color: var(--color-primary) !important;
}
.btn-icon.primary:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-primary) !important;
}
.btn-icon.outline-secondary:hover {
    color: var(--color-secondary) !important;
    background-color: transparent;
    border: 1px solid var(--color-secondary) !important;
}
.btn-icon.outline-success:hover {
    color: var(--color-success) !important;
    background-color: transparent;
    border: 1px solid var(--color-success) !important;
}
.btn-icon.outline-warning:hover {
    color: var(--color-warning) !important;
    background-color: transparent;
    border: 1px solid var(--color-warning) !important;
}
.btn-icon.outline-info:hover {
    color: var(--color-info) !important;
    background-color: transparent;
    border: 1px solid var(--color-info) !important;
}
.btn-icon.outline-danger:hover {
    color: var(--color-danger) !important;
    background-color: transparent;
    border: 1px solid var(--color-danger) !important;
}

.btn-primary {
    color: var(--custom-white) !important;
    background-color: var(--color-primary) !important;
}
.btn-primary:hover {
    color: var(--color-primary) !important;
    background-color: var(--color-secondary) !important;
}

.btn-secondary {
    color: var(--custom-white) !important;
    background-color: var(--color-secondary) !important;
}
.btn-secondary:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-primary) !important;
}

.btn-secondary-white {
    background-color: var(--color-secondary) !important;
}
.btn-secondary-white:hover {
    color: var(--color-black) !important;
    background-color: var(--custom-white) !important;
}

.btn-success {
    background-color: var(--color-success) !important;
    color: var(--custom-white) !important;
}
.btn-success:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-primary) !important;
}

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

.btn-danger {
    background-color: var(--color-danger) !important;
    color: var(--custom-white) !important;
}
.btn-danger:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-primary) !important;
}

.btn-info {
    background-color: var(--color-info) !important;
    color: var(--custom-white) !important;
}
.btn-info:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-primary) !important;
}

.btn-purple {
    background-color: var(--color-purple) !important;
    color: var(--custom-white) !important;
}
.btn-purple:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-primary) !important;
}

.btn-slateblue {
    background-color: var(--color-slateblue) !important;
    color: var(--custom-white) !important;
}
.btn-slateblue:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-primary) !important;
}

.btn-teal {
    background-color: var(--color-teal) !important;
    color: var(--custom-white) !important;
}
.btn-teal:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-primary) !important;
}

.btn-pink {
    background-color: var(--color-pink) !important;
    color: var(--custom-white) !important;
}
.btn-pink:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-primary) !important;
}

.btn-light {
    background-color: var(--gray-3) !important;
    color: var(--color-black) !important;
}
.btn-light:hover {
    color: var(--color-primary) !important;
    background-color: var(--gray-4) !important;
}

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

.btn-dark {
    background-color: var(--color-black) !important;
    color: var(--custom-white) !important;
}
[data-theme-mode=dark] .btn-dark {
    color: var(--color-white) !important;
}
.btn-dark:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-primary) !important;
}

.btn-primary-light {
    background-color: var(--primary-rgba-15) !important;
    color: var(--color-primary) !important;
}
.btn-primary-light:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-primary) !important;
}

.btn-secondary-light {
    background-color: var(--secondary-rgba-15) !important;
    color: var(--color-secondary) !important;
}
.btn-secondary-light:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-secondary) !important;
}

.btn-success-light {
    background-color: var(--success-rgba-15) !important;
    color: var(--color-success) !important;
}
.btn-success-light:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-success) !important;
}

.btn-warning-light {
    background-color: var(--warning-rgba-15) !important;
    color: var(--color-warning) !important;
}
.btn-warning-light:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-warning) !important;
}

.btn-danger-light {
    background-color: var(--danger-rgba-15) !important;
    color: var(--color-danger) !important;
}
.btn-danger-light:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-danger) !important;
}

.btn-info-light {
    background-color: var(--info-rgba-15) !important;
    color: var(--color-info) !important;
}
.btn-info-light:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-info) !important;
}

.btn-teal-light {
    background-color: var(--teal-rgba-15) !important;
    color: var(--color-teal) !important;
}
.btn-teal-light:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-teal) !important;
}

.btn-dark-light {
    background-color: var(--black-15) !important;
    color: var(--color-black) !important;
}
.btn-dark-light:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-black) !important;
}

.btn-outline-primary {
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
}
.btn-outline-primary:hover {
    color: var(--custom-white) !important;
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
}
.btn-outline-primary.active {
    color: var(--custom-white) !important;
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
}
.btn-outline-primary.btn-label .icon.solid {
    color: var(--custom-white);
    background-color: var(--color-primary);
}

.btn-outline-secondary {
    border: 1px solid var(--color-secondary) !important;
    color: var(--color-secondary) !important;
}
.btn-outline-secondary:hover {
    color: var(--custom-white) !important;
    border-color: var(--color-secondary) !important;
    background-color: var(--color-secondary) !important;
}
.btn-outline-secondary.btn-label .icon.solid {
    color: var(--custom-white);
    background-color: var(--color-secondary);
}

.btn-outline-success {
    border: 1px solid var(--color-success) !important;
    color: var(--color-success) !important;
}
.btn-outline-success:hover {
    color: var(--custom-white) !important;
    border-color: var(--color-success) !important;
    background-color: var(--color-success) !important;
}
.btn-outline-success.btn-label .icon.solid {
    color: var(--custom-white);
    background-color: var(--color-success);
}

.btn-outline-warning {
    border: 1px solid var(--color-warning) !important;
    color: var(--color-warning) !important;
}
.btn-outline-warning:hover {
    color: var(--custom-white) !important;
    border-color: var(--color-warning) !important;
    background-color: var(--color-warning) !important;
}
.btn-outline-warning.btn-label .icon.solid {
    color: var(--custom-white);
    background-color: var(--color-warning);
}

.btn-outline-danger {
    border: 1px solid var(--color-danger) !important;
    color: var(--color-danger) !important;
}
.btn-outline-danger:hover {
    color: var(--custom-white) !important;
    border-color: var(--color-danger) !important;
    background-color: var(--color-danger) !important;
}
.btn-outline-danger ~ .btn-check:checked + .btn, .btn-outline-danger ~ .btn.active, .btn-outline-danger ~ .btn.show, .btn-outline-danger ~ .btn:first-child:active, .btn-outline-danger ~ :not(.btn-check) + .btn:active {
    color: var(--custom-white) !important;
    border-color: var(--color-danger) !important;
    background-color: var(--color-danger) !important;
}
.btn-outline-danger.btn-label .icon.solid {
    color: var(--custom-white);
    background-color: var(--color-danger);
}

.btn.btn-outline-danger:first-child:active {
    color: var(--custom-white) !important;
    border-color: var(--color-danger) !important;
    background-color: var(--color-danger) !important;
}

.btn-outline-info {
    border: 1px solid var(--color-info) !important;
    color: var(--color-info) !important;
}
.btn-outline-info:hover {
    color: var(--custom-white) !important;
    border-color: var(--color-info) !important;
    background-color: var(--color-info) !important;
}
.btn-outline-info.btn-label .icon.solid {
    color: var(--custom-white);
    background-color: var(--color-info);
}

.btn-outline-purple {
    border: 1px solid var(--color-purple) !important;
    color: var(--color-purple) !important;
}
.btn-outline-purple:hover {
    color: var(--custom-white) !important;
    border-color: var(--color-purple) !important;
    background-color: var(--color-purple) !important;
}
.btn-outline-purple.btn-label .icon.solid {
    color: var(--custom-white);
    background-color: var(--color-purple);
}

.btn-outline-light {
    border: 1px solid var(--color-light) !important;
    color: var(--color-light) !important;
}
.btn-outline-light:hover {
    color: var(--custom-white) !important;
    border-color: var(--color-light) !important;
    background-color: var(--color-light) !important;
}
.btn-outline-light.btn-label .icon.solid {
    color: var(--custom-white);
    background-color: var(--color-light);
}

.btn-outline-white {
    border: 1px solid var(--custom-white) !important;
    color: var(--custom-white) !important;
}
.btn-outline-white:hover {
    color: var(--color-primary) !important;
    border-color: var(--custom-white) !important;
    background-color: var(--custom-white) !important;
}
.btn-outline-white.active {
    color: var(--color-black) !important;
    border-color: var(--custom-white) !important;
    background-color: var(--custom-white) !important;
}

.btn-outline-dark {
    border: 1px solid var(--color-black) !important;
    color: var(--color-black) !important;
}
.btn-outline-dark:hover {
    color: var(--custom-white) !important;
    border-color: var(--color-black) !important;
    background-color: var(--color-black) !important;
}
[data-theme-mode=dark] .btn-outline-dark:hover {
    color: var(--color-white) !important;
}
.btn-outline-dark.active {
    color: var(--color-black) !important;
    border-color: var(--custom-white) !important;
    background-color: var(--custom-white) !important;
}
.btn-outline-dark.btn-label .icon.solid {
    color: var(--custom-white);
    background-color: var(--color-black);
}
[data-theme-mode=dark] .btn-outline-dark.btn-label .icon.solid {
    color: var(--color-white);
}

.btn-outline-border-primary {
    background-color: var(--color-primary) !important;
    color: var(--custom-white) !important;
    border: 1px solid var(--color-primary) !important;
}
.btn-outline-border-primary:hover {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-color: transparent;
}
.btn-outline-border-secondary {
    background-color: var(--color-secondary) !important;
    color: var(--custom-white) !important;
    border: 1px solid var(--color-secondary) !important;
}
.btn-outline-border-secondary:hover {
    color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    background-color: transparent;
}
.btn-outline-border-secondary.h-white:hover {
    color: var(--custom-white) !important;
    border-color: var(--custom-white) !important;
    background-color: transparent;
}
.btn-outline-border-success {
    background-color: var(--color-success) !important;
    color: var(--custom-white) !important;
    border: 1px solid var(--color-success) !important;
}
.btn-outline-border-success:hover {
    color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    background-color: transparent;
}
.btn-outline-border-warning {
    background-color: var(--color-warning) !important;
    color: var(--custom-white) !important;
    border: 1px solid var(--color-warning) !important;
}
.btn-outline-border-warning:hover {
    color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
    background-color: transparent;
}
.btn-outline-border-danger {
    background-color: var(--color-danger) !important;
    color: var(--custom-white) !important;
    border: 1px solid var(--color-danger) !important;
}
.btn-outline-border-danger:hover {
    color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    background-color: transparent;
}
.btn-outline-border-info {
    background-color: var(--color-info) !important;
    color: var(--custom-white) !important;
    border: 1px solid var(--color-info) !important;
}
.btn-outline-border-info:hover {
    color: var(--color-info) !important;
    border-color: var(--color-info) !important;
    background-color: transparent;
}
.btn-outline-border-light {
    background-color: var(--color-light) !important;
    color: var(--custom-white) !important;
    border: 1px solid var(--color-light) !important;
}
.btn-outline-border-light:hover {
    color: var(--color-light) !important;
    border-color: var(--color-light) !important;
    background-color: transparent;
}
.btn-outline-border-dark {
    background-color: var(--color-black) !important;
    color: var(--custom-white) !important;
    border: 1px solid var(--color-black) !important;
}
.btn-outline-border-dark:hover {
    color: var(--color-black) !important;
    border-color: var(--color-black) !important;
    background-color: transparent;
}
.btn-outline-border-white {
    background-color: var(--custom-white) !important;
    color: var(--color-black) !important;
    border: 1px solid var(--custom-white) !important;
}
.btn-outline-border-white:hover {
    color: var(--custom-white) !important;
    border-color: var(--custom-white) !important;
    background-color: transparent;
}

.btn-gradient-primary {
    background-image: linear-gradient(to right, #5758df, #f77991, #5758df) !important;
    background-size: 200% auto;
}
.btn-gradient-primary:hover {
    color: var(--custom-white) !important;
    background-position: right center;
}

.btn-gradient-sky-blue-pink {
    background-image: linear-gradient(to right, #7ec8e3, #f77991, #7ec8e3) !important;
    background-size: 200% auto;
}
.btn-gradient-sky-blue-pink:hover {
    color: var(--custom-white) !important;
    background-position: right center;
}

.btn-gradient-purple-pink {
    background-image: linear-gradient(to right, #8b14b1, #d53d6e, #8b14b1) !important;
    background-size: 200% auto;
}
.btn-gradient-purple-pink:hover {
    color: var(--custom-white) !important;
    background-position: right center;
}

.btn-gradient-fast-pink-light-yellow {
    background-image: linear-gradient(to right, #f7567f, #ffba83, #f7567f) !important;
    background-size: 200% auto;
}
.btn-gradient-fast-pink-light-yellow:hover {
    color: var(--custom-white) !important;
    background-position: right center;
}

.btn-gradient-pink-orange {
    background-image: linear-gradient(to right, #de347f, #ff7b3c, #de347f) !important;
    background-size: 200% auto;
}
.btn-gradient-pink-orange:hover {
    color: var(--custom-white) !important;
    background-position: right center;
}

.btn-gradient-fast-blue-purple {
    background-image: linear-gradient(to right, #2a46f4, #7d3cff, #2a46f4) !important;
    background-size: 200% auto;
}
.btn-gradient-fast-blue-purple:hover {
    color: var(--custom-white) !important;
    background-position: right center;
}

.btn-gradient-green-lime {
    background-image: linear-gradient(to right, #28a745, #a3e635, #28a745) !important;
    background-size: 200% auto;
}
.btn-gradient-green-lime:hover {
    color: var(--custom-white) !important;
    background-position: right center;
}

.bd-default-tooltip {
    color: var(--custom-white) !important;
    transition: all 0.3s linear;
    border-radius: 100%;
    font-size: 14px;
    width: 30px;
    height: 30px;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flexbox;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bd-default-tooltip.view {
    color: var(--color-primary) !important;
    background: rgba(79, 70, 229, 0.15) !important;
}
.bd-default-tooltip.view:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-primary) !important;
}
.bd-default-tooltip.edit {
    color: var(--color-warning) !important;
    background: rgba(254, 187, 123, 0.15) !important;
}
.bd-default-tooltip.edit:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-warning) !important;
}
.bd-default-tooltip.delete {
    color: var(--color-danger) !important;
    background: rgba(230, 50, 50, 0.15) !important;
}
.bd-default-tooltip.delete:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-danger) !important;
}
.bd-default-tooltip.reply {
    color: var(--color-info) !important;
    background: rgba(20, 147, 255, 0.15) !important;
}
.bd-default-tooltip.reply:hover {
    color: var(--custom-white) !important;
    background-color: var(--color-info) !important;
}

.remove-item-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
    background-color: var(--danger-rgba-15) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--color-danger) !important;
    font-size: 18px;
    transition: var(--transition) !important;
    cursor: pointer;
}
.remove-item-btn:hover {
    background-color: var(--color-danger) !important;
    color: var(--custom-white) !important;
}

#more {
    display: none;
}

.read__more-btn {
    font-size: 16px;
    color: var(--color-primary) !important;
    transition: all 0.3s ease;
}
.read__more-btn:hover {
    color: var(--color-secondary) !important;
}

.btn-loader.btn {
    position: relative;
}

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    gap: 6px;
    height: 16px;
    position: absolute;
    top: 50%;
    inset-inline-end: 5px;
    transform: translateY(-50%);
}

.btn-loader i {
    animation: loader 1000ms infinite linear;
}

@keyframes loader {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.btn-group-lg > .btn,
.btn-lg {
    padding: 8px 16px !important;
    font-size: 20px !important;
    border-radius: 8px !important;
}

.btn-group-sm > .btn,
.btn-sm {
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 3px !important;
}

[dir=rtl] .btn-group > .btn-group:not(:first-child) > .btn,
[dir=rtl] .btn-group > .btn:nth-child(n+3),
[dir=rtl] .btn-group > :not(.btn-check) + .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

[dir=rtl] .btn-group > .btn-group:not(:last-child) > .btn,
[dir=rtl] .btn-group > .btn.dropdown-toggle-split:first-child,
[dir=rtl] .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-check + .btn:hover {
    color: var(--custom-white);
}

/*----------------------------------------*/
/*  Buttons end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.10 Carousel
/*----------------------------------------*/
.carousel-control-next-icon,
.carousel-control-prev-icon {
    display: inline-block;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
}

/*----------------------------------------*/
/*  Carousel end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.11 Color
/*----------------------------------------*/
.text-heading {
    color: var(--color-heading) !important;
}

.text-white {
    color: var(--color-white) !important;
}
[data-theme-mode=dark] .text-white {
    color: var(--color-black) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.border {
    border: 1px solid var(--color-border) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.border-primary-subtle {
    border-color: var(--primary-rgba-15) !important;
}

.border-secondary-subtle {
    border-color: var(--secondary-rgba-15) !important;
}

.border-success-subtle {
    border-color: var(--success-rgba-15) !important;
}

.border-info-subtle {
    border-color: var(--info-rgba-15) !important;
}

.border-warning-subtle {
    border-color: var(--warning-rgba-15) !important;
}

.border-danger-subtle {
    border-color: var(--danger-rgba-15) !important;
}

.border-light-subtle {
    border-color: var(--light-rgba-15) !important;
}

.border-dark-subtle {
    border-color: var(--dark-rgba-15) !important;
}

.link-opacity-10 {
    opacity: 0.1;
}

.link-opacity-10-hover:hover {
    opacity: 0.1;
}

.link-opacity-25 {
    opacity: 0.25;
}

.link-opacity-25-hover:hover {
    opacity: 0.25;
}

.link-opacity-50 {
    opacity: 0.5;
}

.link-opacity-50-hover:hover {
    opacity: 0.5;
}

.link-opacity-75 {
    opacity: 0.75;
}

.link-opacity-75-hover:hover {
    opacity: 0.75;
}

.link-opacity-100 {
    opacity: 1;
}

.link-opacity-100-hover:hover {
    opacity: 1;
}

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

.link-underline-secondary {
    opacity: 1;
    -webkit-text-decoration-color: var(--color-secondary) !important;
    text-decoration-color: var(--color-secondary) !important;
}

.link-underline-success {
    opacity: 1;
    -webkit-text-decoration-color: var(--color-success) !important;
    text-decoration-color: var(--color-success) !important;
}

.link-underline-info {
    opacity: 1;
    -webkit-text-decoration-color: var(--color-info) !important;
    text-decoration-color: var(--color-info) !important;
}

.link-underline-warning {
    opacity: 1;
    -webkit-text-decoration-color: var(--color-warning) !important;
    text-decoration-color: var(--color-warning) !important;
}

.link-underline-danger {
    opacity: 1;
    -webkit-text-decoration-color: var(--color-danger) !important;
    text-decoration-color: var(--color-danger) !important;
}

.link-underline-light {
    opacity: 1;
    -webkit-text-decoration-color: var(--color-light) !important;
    text-decoration-color: var(--color-light) !important;
}

.link-underline-dark {
    opacity: 1;
    -webkit-text-decoration-color: var(--color-dark) !important;
    text-decoration-color: var(--color-dark) !important;
}

/*----------------------------------------*/
/*  Color end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.12 forms
/*----------------------------------------*/
/* Custom Form Option */
.form-custom {
    padding-inline-start: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.form-custom-label {
    padding: 10px 20px 10px 20px;
    cursor: pointer;
    width: 100%;
}

.checked {
    border: 1px solid var(--color-primary) !important;
}

.form-custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
}

.form-check-bg {
    background-color: var(--primary-rgba-15);
}

.form-custom-icon .form-custom-label {
    text-align: center;
    padding: 1.07em;
}
.form-custom-icon .form-custom-body {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-body);
}
.form-custom-icon .form-custom-body .icon {
    font-size: 30px;
    margin: 0 auto;
    margin-bottom: 10px;
    width: 60px;
    height: 60px;
    background-color: var(--primary-rgba-1);
    display: flex;
    text-align: center;
    align-content: center;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-primary);
}
.form-custom-icon .form-check-input {
    float: none !important;
    margin: 0 !important;
}

.custom-option.form-custom-thumb {
    border: 1px solid transparent;
    border-radius: 6px;
    padding-inline-start: 0;
}

.form-custom-thumb .form-custom-label {
    padding: 0;
}
.form-custom-thumb .form-custom-body img {
    height: 100%;
    width: 100%;
    border-radius: 6px;
}
.form-custom-thumb.radio-thumb .form-check-input {
    display: none;
}
.form-custom-thumb.form-custom-thumb-check {
    position: relative;
}
.form-custom-thumb.form-custom-thumb-check .form-check-input {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    margin: 0;
    border: 0;
    opacity: 0;
    z-index: 9;
}
.form-custom-thumb.form-custom-thumb-check .form-check-input:checked {
    opacity: 1;
}

.form-label {
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: var(--color-heading);
    margin-bottom: 6px;
}

.form-control {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: var(--fw-regular);
    line-height: 22px;
    color: var(--color-heading);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:disabled {
    color: var(--color-body);
    background-color: var(--gray-2);
    border-color: var(--color-border);
    opacity: 1;
}

.form-control-plaintext {
    color: var(--color-body);
}

.form-control::placeholder {
    color: var(--color-placeholder);
    opacity: 1;
}

.form-control-lg {
    font-size: 16px;
    padding: 8px 16px;
}

.form-control-sm {
    font-size: 14px !important;
    padding: 6px 12px;
    line-height: inherit;
    border-radius: 4px;
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: 6px 6px 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 12px center;
    /* .75rem */
    background-size: 16px 12px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-select:focus {
    border-color: none;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-control:focus {
    border-color: var(--primary-rgba-5);
    background-color: var(--color-white);
    box-shadow: 0 0 4px var(--primary-rgba-5);
    color: var(--color-heading);
}

.form-select {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    color: var(--color-heading);
    font-size: 14px;
    background-image: none;
    background-size: 20px;
}

.form-select:disabled {
    background-color: var(--color-body-bg);
}

.form-select-lg {
    font-size: 16px;
    padding: 8px 16px;
}

.form-select-sm {
    font-size: 14px !important;
    padding: 6px 12px;
    line-height: inherit;
    border-radius: 4px;
}

.input-group-text {
    border-color: var(--color-border);
    font-size: 14px;
    border-radius: 4px;
    background-color: var(--gray-3);
    color: var(--color-heading);
    letter-spacing: 0;
    padding: 6px 12px;
    padding: 2px 7px;
}

.form-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background-color: var(--color-primary) !important;
}

.form-range:disabled::-moz-range-thumb {
    background-color: var(--color-light) !important;
}

.form-range:focus::-moz-range-thumb {
    box-shadow: none !important;
}

/* basic checkbox */
.form-check label {
    cursor: pointer;
}

.form-check-label {
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: var(--color-heading);
}

.form-check {
    min-height: inherit !important;
    display: block;
    min-height: 1.5rem;
    padding-inline-start: 1.5em;
    margin-bottom: 0.125rem;
}

.form-check-input {
    width: 1.1em;
    height: 1.1em;
    background-color: var(--custom-white);
    border: 1px solid var(--color-border);
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check-input[type=checkbox] {
    border-radius: 0.25em;
}

.form-check .form-check-input {
    float: left;
    margin-inline-start: -1.5em;
}

.form-check-input {
    width: 1.1em;
    height: 1.1em;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
}

.form-check-input.form-checked-outline:checked {
    background-color: transparent;
    border-color: var(--color-primary);
}
.form-check-input.form-checked-gray:checked {
    background-color: var(--gray-3);
    border-color: var(--gray-3);
}
.form-check-input.form-checked-secondary:checked {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.form-check-input.form-checked-warning:checked {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}
.form-check-input.form-checked-info:checked {
    background-color: var(--color-info);
    border-color: var(--color-info);
}
.form-check-input.form-checked-success:checked {
    background-color: var(--color-success);
    border-color: var(--color-success);
}
.form-check-input.form-checked-danger:checked {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.form-check-input.form-checked-light:checked {
    background-color: var(--color-light);
    border-color: var(--color-light);
}
.form-check-input.form-checked-dark:checked {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}
.form-check-input.form-checked-purple:checked {
    background-color: var(--color-purple);
    border-color: var(--color-purple);
}
.form-check-input.form-checked-slateblue:checked {
    background-color: var(--color-slateblue);
    border-color: var(--color-slateblue);
}
.form-check-input.form-checked-teal:checked {
    background-color: var(--color-teal);
    border-color: var(--color-teal);
}
.form-check-input.form-checked-pink:checked {
    background-color: var(--color-pink);
    border-color: var(--color-pink);
}
.form-check-input.form-checked-orange:checked {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

.form-check-input:focus {
    box-shadow: none;
}

.form-check-reverse {
    padding-inline-end: 1.5em;
    padding-inline-start: 0;
    text-align: start;
    display: flex;
    flex-direction: row-reverse;
    gap: 0 30px;
}

.form-check-inline {
    display: inline-block !important;
    margin-inline-end: 1rem;
}

.form-checked-outline:checked[type=checkbox] {
    background-image: none;
    position: relative;
    background-color: transparent;
}
.form-checked-outline:checked[type=checkbox]::before {
    content: "\eb7a";
    font-family: var(--ff-remixicon) !important;
    position: absolute;
    color: var(--color-primary);
    inset-block-start: 50%;
    inset-inline-start: 48%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: var(--fw-bold);
}
[dir=rtl] .form-checked-outline:checked[type=checkbox]::before {
    inset-inline-start: auto;
    inset-inline-end: 48%;
}
.form-checked-outline:checked[type=checkbox].form-checked-secondary:before {
    color: var(--color-secondary);
}
.form-checked-outline:checked[type=checkbox].form-checked-warning:before {
    color: var(--color-warning);
}
.form-checked-outline:checked[type=checkbox].form-checked-info:before {
    color: var(--color-info);
}
.form-checked-outline:checked[type=checkbox].form-checked-success:before {
    color: var(--color-success);
}
.form-checked-outline:checked[type=checkbox].form-checked-danger:before {
    color: var(--color-danger);
}
.form-checked-outline:checked[type=checkbox].form-checked-purple:before {
    color: var(--color-purple);
}
.form-checked-outline:checked[type=checkbox].form-checked-slateblue:before {
    color: var(--color-slateblue);
}
.form-checked-outline:checked[type=checkbox].form-checked-teal:before {
    color: var(--color-teal);
}
.form-checked-outline:checked[type=checkbox].form-checked-orange:before {
    color: var(--color-orange);
}
.form-checked-outline:checked[type=checkbox].form-checked-light:before {
    color: var(--color-light);
}
.form-checked-outline:checked[type=checkbox].form-checked-dark:before {
    color: var(--color-dark);
}

.form-checked-outline:checked[type=radio] {
    background-image: none;
    position: relative;
    background-color: transparent;
}
.form-checked-outline:checked[type=radio]::before {
    content: "\eb7c";
    font-family: var(--ff-remixicon) !important;
    position: absolute;
    color: var(--color-primary);
    inset-block-start: 50%;
    inset-inline-start: 48%;
    transform: translate(-50%, -50%);
    font-size: 6px;
    font-weight: var(--fw-bold);
}
[dir=rtl] .form-checked-outline:checked[type=radio]::before {
    inset-inline-start: auto;
    inset-inline-end: 48%;
}

.form-switch {
    padding-inline-start: 2.5em !important;
}
.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    width: 2em;
    margin-inline-start: -2.5em;
    background-image: var(--bs-form-switch-bg);
    background-position: left center;
    border-radius: 2em;
    transition: background-position 0.15s ease-in-out;
}

.input-group-lg > .btn,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
    padding: 8px 16px;
    font-size: 20px;
    border-radius: 6px;
}

.input-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
    padding: 4px 8px;
    font-size: 14px;
    border-radius: 4px;
}

/* Custom checkbox button */
.custom-checkbox label {
    font-size: 16px;
    color: var(--color-black);
    position: relative;
    padding-inline-start: 26px;
    z-index: 1;
}
.custom-checkbox input[type=checkbox] {
    display: none;
}
.custom-checkbox input[type=checkbox]:checked ~ label::before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.custom-checkbox input[type=checkbox]:checked ~ label::after {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.custom-checkbox input[type=checkbox]:checked ~ label.secondary::after {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.custom-checkbox input[type=checkbox]:checked ~ label::before {
    visibility: visible;
    opacity: 1;
}
.custom-checkbox input[type=checkbox] ~ label {
    position: relative;
    padding-inline-start: 30px;
}
.custom-checkbox input[type=checkbox] ~ label::after {
    position: absolute;
    content: "";
    top: 2px;
    inset-inline-start: 0;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border: 1px solid var(--color-border);
    z-index: -1;
    transition: all 0.2s linear;
    border-radius: 3px;
}
.custom-checkbox input[type=checkbox] ~ label::before {
    position: absolute;
    content: "\eb7a";
    top: 3px;
    inset-inline-start: 0px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    color: var(--color-white);
    transition: all 0.2s linear;
    font-family: var(--ff-remixicon);
    font-size: 14px;
}
.custom-checkbox input[type=checkbox] ~ label:hover {
    cursor: pointer;
}

.credit-card-logo {
    position: absolute;
    top: 50%;
    inset-inline-end: 15px;
    transform: translateY(-50%);
}

.credit-card-logo img {
    width: 36px;
}

.payment-card-tab .nav-pills {
    background-color: var(--success-rgba-15);
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .payment-card-tab .nav-pills {
        display: flex !important;
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: auto;
    }
}
.payment-card-tab .nav-pills .nav-link.active,
.payment-card-tab .nav-pills .show > .nav-link {
    color: var(--color-white);
    background-color: var(--color-success);
    border-radius: 4px;
}
[data-theme-mode=dark] .payment-card-tab .nav-pills .nav-link.active,
[data-theme-mode=dark] .payment-card-tab .nav-pills .show > .nav-link {
    color: var(--color-black);
}
.payment-card-tab .nav-link {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-success);
    padding: 10px 10px;
    border-radius: 0;
    cursor: pointer;
}
.payment-card-tab .nav-link:hover {
    color: var(--color-primary);
}
[data-theme-mode=dark] .payment-card-tab .nav-link:hover {
    color: var(--color-black);
}

/* floating labels */
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: var(--color-body);
}

.form-floating > label {
    padding: 6px 6px;
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
    height: 55px;
}

.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown),
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 2.2rem;
    padding-bottom: 0.625rem;
}

.form-floating.floating-primary label {
    color: var(--color-primary);
    opacity: 1;
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext {
    padding: 1rem 0.75rem;
}

.form-floating.floating-primary input {
    border: 1px solid var(--color-primary);
}

.form-floating.floating-primary > .form-control:focus ~ label {
    color: var(--color-primary) !important;
}

.form-floating.floating-secondary label {
    color: var(--color-secondary);
    opacity: 1;
}

.form-floating.floating-secondary input {
    border: 1px solid var(--color-secondary);
}

.form-floating.floating-secondary > .form-control:focus ~ label {
    color: var(--color-secondary) !important;
}

.form-floating.floating-warning label {
    color: var(--color-warning);
    opacity: 1;
}

.form-floating.floating-warning input {
    border: 1px solid var(--color-warning);
}

.form-floating.floating-warning > .form-control:focus ~ label {
    color: var(--color-warning) !important;
}

.form-floating.floating-info label {
    color: var(--color-info);
    opacity: 1;
}

.form-floating.floating-info input {
    border: 1px solid var(--color-info);
}

.form-floating.floating-info > .form-control:focus ~ label {
    color: var(--color-info) !important;
}

.form-floating.floating-success label {
    color: var(--color-success);
    opacity: 1;
}

.form-floating.floating-success input {
    border: 1px solid var(--color-success);
}

.form-floating.floating-success > .form-control:focus ~ label {
    color: var(--color-success) !important;
}

.form-floating.floating-danger label {
    color: var(--color-danger);
    opacity: 1;
}

.form-floating.floating-danger input {
    border: 1px solid var(--color-danger);
}

.form-floating.floating-danger > .form-control:focus ~ label {
    color: var(--color-danger) !important;
}

.form-floating.floating-purple label {
    color: var(--color-purple);
    opacity: 1;
}

.form-floating.floating-purple input {
    border: 1px solid var(--color-purple);
}

.form-floating.floating-purple > .form-control:focus ~ label {
    color: var(--color-purple) !important;
}

.form-floating.floating-slateblue label {
    color: var(--color-slateblue);
    opacity: 1;
}

.form-floating.floating-slateblue input {
    border: 1px solid var(--color-slateblue);
}

.form-floating.floating-slateblue > .form-control:focus ~ label {
    color: var(--color-slateblue) !important;
}

.form-floating.floating-pink label {
    color: var(--color-pink);
    opacity: 1;
}

.form-floating.floating-pink input {
    border: 1px solid var(--color-pink);
}

.form-floating.floating-pink > .form-control:focus ~ label {
    color: var(--color-pink) !important;
}

.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
    background-color: var(--color-white);
    border-radius: 6px;
}

.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
    background-color: var(--color-white);
    border-radius: 6px;
}

/* floating labels end */
.form-control::file-selector-button {
    padding: 3.5rem 1.5rem;
    margin: -7.5rem -1.75rem;
    margin-inline-end: 0.75rem !important;
    background-color: var(--gray-2) !important;
}
[data-theme-mode=dark] .form-control::file-selector-button {
    background-color: var(--gray-7) !important;
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--gray-3) !important;
}
[data-theme-mode=dark] .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--gray-9) !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--color-danger);
}

.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-color: var(--color-danger);
}

.valid-tooltip {
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: 4px 8px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--color-white);
    background-color: var(--color-success);
    border-radius: 4px;
}

.invalid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: 4px 8px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--color-white);
    background-color: var(--color-danger);
    border-radius: 4px;
}

[dir=rtl] .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
[dir=rtl] .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
[dir=rtl] .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select,
[dir=rtl] .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-inline-start: calc(var(--bs-border-width) * -1);
}
[dir=rtl] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

[dir=rtl] .form-control.is-invalid,
[dir=rtl] .was-validated .form-control:invalid {
    padding-right: 0.5em;
    padding-left: calc(1.5em + 0.75rem);
}

/*----------------------------------------*/
/*  forms end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.13 modal
/*----------------------------------------*/
.modal-content {
    color: var(--color-body);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.modal-header {
    padding: 16px 20px;
    border-block-end: 1px solid var(--color-border);
    border-top-left-radius: 4.8px;
    border-top-right-radius: 4.8px;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 16px 24px;
}

.modal-footer {
    padding: 16px 20px;
    border-block-start: 1px solid var(--color-border);
}

.modal-header .btn-close {
    position: absolute;
    inset-inline-end: 20px;
}

.offcanvas-header .btn-close {
    position: absolute;
    inset-inline-end: 20px;
    color: var(--color-black) !important;
    background-image: none;
    font-size: 20px;
}

.offcanvas {
    color: var(--color-body) !important;
    background-color: var(--color-white) !important;
}

/*----------------------------------------*/
/*  modal end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.14 pagination
/*----------------------------------------*/
.bd-pagination .swiper-pagination-bullet {
    width: 20px;
    height: 5px;
    background: var(--white-5);
    opacity: 1;
    border-radius: 14px;
    margin-inline-start: 0 !important;
}
.bd-pagination .swiper-pagination-bullet-active {
    background: var(--color-secondary);
}
.bd-pagination.primary .swiper-pagination-bullet {
    background: var(--gray-3);
}
.bd-pagination.primary .swiper-pagination-bullet-active {
    background: var(--color-primary);
}

.page-link {
    position: relative;
    display: block;
    padding: 4px 12px;
    font-size: 16px;
    color: var(--color-heading);
    text-decoration: none;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.page-link {
    color: var(--color-heading);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
}
.page-link:focus {
    color: var(--color-heading);
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
}
.page-link:hover {
    color: var(--color-heading);
    background-color: var(--gray-3);
    border-color: var(--color-border);
}

.page-item.active .page-link {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
[data-theme-mode=dark] .page-item.active .page-link {
    color: var(--color-black);
}

.disabled > .page-link,
.page-link.disabled {
    opacity: 0.7;
}

.basic-pagination ul {
    display: inline-flex;
    gap: 15px;
}
.basic-pagination ul li {
    list-style: none;
}
.basic-pagination ul li a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-weight: 600;
    font-size: 16px;
    background-color: transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    background-color: var(--color-white);
    color: var(--color-primary);
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.basic-pagination ul li a:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.basic-pagination ul li .current {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.basic-pagination ul li .prev,
.basic-pagination ul li .next {
    font-size: 20px;
}

/*----------------------------------------*/
/*  pagination end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.15 Preloader
/*----------------------------------------*/
#loading {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999999;
    margin-top: 0px;
    top: 0px;
    background: var(--color-white);
}
#loading-center {
    width: 100%;
    height: 100%;
    position: relative;
}
#loading-center-absolute {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    #loading-center-absolute {
        width: 40%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    #loading-center-absolute {
        width: 45%;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    #loading-center-absolute {
        width: 50%;
    }
}
@media (max-width: 575px) {
    #loading-center-absolute {
        width: 90%;
    }
}

.bd-preloader-logo {
    width: 80px;
    height: 80px;
    line-height: 80px;
    position: relative;
    text-align: center;
    margin: auto;
}
.bd-preloader-logo img {
    vertical-align: middle;
}
.bd-preloader-circle {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
}
.bd-preloader-circle svg {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: bd-rotate 5s linear infinite;
    -moz-animation: bd-rotate 5s linear infinite;
    -ms-animation: bd-rotate 5s linear infinite;
    -o-animation: bd-rotate 5s linear infinite;
    animation: bd-rotate 5s linear infinite;
}
.bd-preloader-circle svg circle:last-child {
    stroke: var(--color-primary);
    stroke-dashoffset: 0;
    stroke-dasharray: 1128, 3150;
    -webkit-animation: bd-loading 4s linear infinite;
    -moz-animation: bd-loading 4s linear infinite;
    -ms-animation: bd-loading 4s linear infinite;
    -o-animation: bd-loading 4s linear infinite;
    animation: bd-loading 4s linear infinite;
    transform-origin: center center;
}
@-webkit-keyframes bd-loading {
    0% {
        stroke-dashoffset: 0;
        stroke-dasharray: 0, 3150;
    }
    100% {
        stroke-dashoffset: -1131;
        stroke-dasharray: 1128, 3138;
    }
}
@-moz-keyframes bd-loading {
    0% {
        stroke-dashoffset: 0;
        stroke-dasharray: 0, 3150;
    }
    100% {
        stroke-dashoffset: -1131;
        stroke-dasharray: 1128, 3138;
    }
}
@-ms-keyframes bd-loading {
    0% {
        stroke-dashoffset: 0;
        stroke-dasharray: 0, 3150;
    }
    100% {
        stroke-dashoffset: -1131;
        stroke-dasharray: 1128, 3138;
    }
}
@keyframes bd-loading {
    0% {
        stroke-dashoffset: 0;
        stroke-dasharray: 0, 3150;
    }
    100% {
        stroke-dashoffset: -1131;
        stroke-dasharray: 1128, 3138;
    }
}
@-webkit-keyframes bd-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes bd-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-ms-keyframes bd-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes bd-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.bd-preloader-content {
    text-align: center;
}
.bd-preloader-subtitle {
    font-size: 20px;
    margin-bottom: 0;
    color: var(--color-white);
    margin-top: 20px;
}
[data-theme-mode=dark] .bd-preloader-subtitle {
    color: var(--color-black);
}

/*----------------------------------------*/
/*  Preloader end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.16 pricing
/*----------------------------------------*/
.pricing-plan-wrap {
    position: relative;
    background-size: cover;
    padding: 25px 25px;
    background-repeat: no-repeat;
    background-position: center top;
    border: 1px solid var(--color-border);
    background-color: var(--color-white);
    box-shadow: var(--shadow);
}
.pricing-plan-wrap .title {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 15px;
    color: var(--color-heading);
}
.pricing-plan-wrap .price-wrap {
    margin-bottom: 20px;
}
.pricing-plan-wrap .price-wrap .common-price {
    position: relative;
    margin-inline-start: 10px;
}
.pricing-plan-wrap .price-wrap .common-price .dollar {
    font-size: 18px;
    color: var(--color-white);
    line-height: 26px;
    position: absolute;
    top: 0;
    inset-inline-start: -13px;
    color: var(--color-primary);
}
.pricing-plan-wrap .price-wrap .common-price .amount {
    font-size: 58px;
    display: inline-block;
    line-height: 1;
    margin-bottom: 0;
    color: var(--color-primary);
}
.pricing-plan-wrap p {
    font-size: 17px;
    line-height: 27px;
    margin-bottom: 30px;
    color: var(--color-body);
}
.pricing-plan-wrap .pricing-plan-list {
    margin-bottom: 40px;
}
.pricing-plan-wrap .pricing-plan-list > li:not(:last-child) {
    margin-bottom: 8px;
}
.pricing-plan-wrap .pricing-plan-list .list-title {
    font-weight: 500;
}
.pricing-plan-wrap.redemanded_item {
    color: var(--color-white);
    background-color: var(--color-primary);
}
[data-theme-mode=dark] .pricing-plan-wrap.redemanded_item {
    color: var(--color-black);
}
.pricing-plan-wrap.redemanded_item:before {
    top: -6px;
    inset-inline-end: -5px;
    z-index: 1;
    content: "";
    width: 99px;
    height: 99px;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: right top;
    background-image: url("../images/shape/badge_recomanded.html");
}
[dir=rtl] .pricing-plan-wrap.redemanded_item:before {
    transform: rotate(-90deg);
}
.pricing-plan-wrap.redemanded_item p {
    color: var(--color-white);
}
[data-theme-mode=dark] .pricing-plan-wrap.redemanded_item p {
    color: var(--color-black);
}
.pricing-plan-wrap.redemanded_item .title {
    color: var(--color-white);
}
[data-theme-mode=dark] .pricing-plan-wrap.redemanded_item .title {
    color: var(--color-black);
}
.pricing-plan-wrap.redemanded_item .list-title {
    color: rgba(220, 229, 240, 0.85);
}
.pricing-plan-wrap.redemanded_item .price-wrap .common-price .amount {
    color: var(--color-white);
}
[data-theme-mode=dark] .pricing-plan-wrap.redemanded_item .price-wrap .common-price .amount {
    color: var(--color-black);
}
.pricing-plan-wrap.redemanded_item .price-wrap .common-price .dollar {
    color: var(--color-white);
}
[data-theme-mode=dark] .pricing-plan-wrap.redemanded_item .price-wrap .common-price .dollar {
    color: var(--color-black);
}
.pricing-plan-wrap.redemanded_item .separator-animated {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(180, 231, 23, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
}
.pricing-plan-wrap.redemanded_item .pricing-plan-list li {
    color: rgba(220, 229, 240, 0.85);
}
.pricing-plan-wrap.redemanded_item .pricing-plan-list li i {
    color: var(--color-secondary);
}
.pricing-plan-list li {
    list-style: none;
    color: var(--color-body);
    display: flex;
    align-items: center;
    gap: 0 10px;
}
.pricing-plan-list i {
    font-size: 18px;
    color: var(--color-success);
}
.pricing-plan-items-group {
    margin: 0;
    padding: 0.5px;
}
.pricing-plan-items-group > .col {
    padding: 0;
    margin: -0.5px;
}
.pricing-plan-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 0 10px;
    background-color: var(--color-body-bg);
    padding: 6px 6px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
}
.pricing-plan-btn-group button {
    font-weight: 500;
    font-size: 16px;
    color: var(--color-heading);
    border: none;
    background: var(--primary-rgba-15);
    border-radius: 4px;
    transition: var(--transition);
    padding: 2px 15px;
}
.pricing-plan-btn-group button.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.separator-animated {
    position: relative;
    overflow: hidden;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(28, 75, 66, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
}

.plan-compare-table {
    text-align: start;
}
.plan-compare-table .title {
    color: var(--color-heading);
    font-size: 14px;
}
.plan-compare-table .icon {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    color: var(--color-success);
    background-color: var(--success-rgba-15);
    font-size: 14px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.plan-compare-table .icon.false {
    color: var(--color-danger);
    background-color: var(--danger-rgba-15);
}
.plan-compare-table .table > :not(caption) > * > *:nth-child(4) {
    color: var(--color-heading) !important;
    background-color: var(--primary-rgba-05);
}
.plan-compare-table .table-bordered > :not(caption) > * > *:nth-child(3) {
    border-inline-end: 1px solid var(--color-primary);
}
.plan-compare-table .table-bordered > :not(caption) > * > *:nth-child(4) {
    border: 1px solid var(--color-primary);
}

.bd-price {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    gap: 0 10px;
    align-items: center;
}
.bd-price .current-price {
    font-weight: 600;
    color: var(--white-8);
}
.bd-price .old-price {
    color: var(--color-body-secondary);
    text-decoration-line: line-through;
}

/*----------------------------------------*/
/*  pricing end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.17 progressbar
/*----------------------------------------*/
.single-progress {
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}
.single-progress:last-child {
    margin-bottom: 0;
}

.progress {
    height: 7px;
    width: 100%;
    overflow: visible;
    background-color: var(--gray-3);
    border-radius: 10px;
    font-size: 12px;
    font-weight: var(--fw-medium);
    overflow: hidden;
}
.progress.h15 {
    height: 15px;
}

.progress-bar {
    width: 0;
    height: 100%;
    transition: width 0.5s ease;
    overflow: visible;
    background-color: var(--color-primary);
}

.progress-style-2 .progress {
    height: 15px;
}
.progress-style-2 .progress-number {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-black);
}

.progress-style-3 .single-progress .title {
    margin-bottom: 0;
    position: absolute;
    inset-inline-start: 20px;
    z-index: 5;
    color: var(--color-white);
    line-height: 1;
    top: 50%;
    transform: translateY(-50%);
}
.progress-style-3 .progress {
    height: 30px;
    overflow: hidden;
    border-radius: 50px;
    background: linear-gradient(to right, var(--color-primary) 10%, rgba(255, 255, 255, 0) 95%);
}
[dir=rtl] .progress-style-3 .progress {
    background: linear-gradient(to left, var(--color-primary) 10%, rgba(255, 255, 255, 0) 95%);
}
.progress-style-3 .progress-bar {
    border-radius: 50px;
    background-color: transparent;
}
.progress-style-3 .progress-number {
    font-size: 16px;
    position: absolute;
    top: auto;
    inset-inline-end: 20px;
    bottom: 4px;
    font-weight: 500;
    color: var(--color-primary);
}
.progress-style-3 .bg-gradient-2 .progress {
    background: linear-gradient(to right, var(--color-secondary) 10%, rgba(255, 255, 255, 0) 95%);
}
[dir=rtl] .progress-style-3 .bg-gradient-2 .progress {
    background: linear-gradient(to left, var(--color-secondary) 10%, rgba(255, 255, 255, 0) 95%);
}
.progress-style-3 .bg-gradient-2 .progress-number {
    color: var(--color-secondary);
}
.progress-style-3 .bg-gradient-3 .progress {
    background: linear-gradient(to right, var(--color-success) 10%, rgba(255, 255, 255, 0) 95%);
}
[dir=rtl] .progress-style-3 .bg-gradient-3 .progress {
    background: linear-gradient(to left, var(--color-success) 10%, rgba(255, 255, 255, 0) 95%);
}
.progress-style-3 .bg-gradient-3 .progress-number {
    color: var(--color-success);
}
.progress-style-3 .bg-gradient-4 .progress {
    background: linear-gradient(to right, var(--color-warning) 10%, rgba(255, 255, 255, 0) 95%);
}
[dir=rtl] .progress-style-3 .bg-gradient-4 .progress {
    background: linear-gradient(to left, var(--color-warning) 10%, rgba(255, 255, 255, 0) 95%);
}
.progress-style-3 .bg-gradient-4 .progress-number {
    color: var(--color-warning);
}
.progress-style-3 .bg-gradient-4 .progress {
    background: linear-gradient(to right, var(--color-info) 10%, rgba(255, 255, 255, 0) 95%);
}
[dir=rtl] .progress-style-3 .bg-gradient-4 .progress {
    background: linear-gradient(to left, var(--color-info) 10%, rgba(255, 255, 255, 0) 95%);
}
.progress-style-3 .bg-gradient-4 .progress-number {
    color: var(--color-info);
}
.progress-style-3 .bg-gradient-5 .progress {
    background: linear-gradient(to right, var(--color-danger) 10%, rgba(255, 255, 255, 0) 95%);
}
[dir=rtl] .progress-style-3 .bg-gradient-5 .progress {
    background: linear-gradient(to left, var(--color-danger) 10%, rgba(255, 255, 255, 0) 95%);
}
.progress-style-3 .bg-gradient-5 .progress-number {
    color: var(--color-danger);
}

.progress-style-4 .progress-number {
    font-size: 14px;
    z-index: 1;
    background-color: var(--color-black);
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 6px 0px 6px;
    color: var(--color-white);
    position: relative;
}
.progress-style-4 .progress-number::after {
    position: absolute;
    content: "";
    top: 100%;
    inset-inline-start: 50%;
    height: 0;
    width: 0;
    z-index: 9;
    margin-inline-start: -5px;
    pointer-events: none;
    border: 5px solid transparent;
    border-top-color: var(--color-black);
}

.radial-progress {
    position: relative;
}
.radial-progress-single {
    text-align: center;
}
.radial-progress-single .circle-info {
    padding-top: 20px;
    text-align: center;
}
.radial-progress-single .circle-info .title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}
.radial-progress-single .circle-info .subtitle {
    font-style: italic;
    margin-bottom: 0;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: var(--color-body);
}
.radial-progress .circle-text {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}
.radial-progress .circle-text .count {
    font-size: 24px;
    line-height: 1;
    font-weight: 600;
    color: var(--color-black);
    position: relative;
    margin-inline-start: -14px;
}
.radial-progress .circle-text .count::after {
    position: absolute;
    content: "%";
    inset-inline-start: 100%;
    color: var(--color-black);
}

.skill-progress .progress {
    height: 16px;
    border-radius: 4px;
}
.skill-progress .progress-bar {
    border-radius: 4px;
    position: relative;
}
.skill-progress .progress-percent {
    position: absolute;
    inset-inline-end: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-white);
    font-size: 12px;
}
[data-theme-mode=dark] .skill-progress .progress-percent {
    color: var(--color-black);
}

.project-progress .progress-item:not(:last-child) {
    margin-bottom: 20px;
}
.project-progress .progress {
    height: 16px;
    border-radius: 4px;
}
.project-progress .progress-bar {
    border-radius: 4px;
}

/*----------------------------------------*/
/*  progressbar end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.18 ribbon
/*----------------------------------------*/
.ribbon-wrapper {
    margin-bottom: 20px;
}

.ribbon {
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    clear: left;
    position: absolute;
    top: 0px;
    inset-inline-start: 0px;
    color: var(--color-white);
    z-index: 2;
}
[data-theme-mode=dark] .ribbon {
    color: var(--color-black);
}

.ribbon-clip {
    inset-inline-start: -14px;
}
.ribbon-clip:before {
    position: absolute;
    top: 30px;
    inset-inline-start: 0;
    width: 0;
    height: 0;
    content: "";
    border: 7px solid transparent;
    border-top-color: var(--color-primary);
    border-inline-end-color: var(--color-primary);
}
.ribbon-clip.ribbon-primary:before {
    border-top-color: var(--color-primary);
    border-inline-end-color: var(--color-primary);
}
.ribbon-clip.ribbon-secondary:before {
    border-top-color: var(--color-secondary);
    border-inline-end-color: var(--color-secondary);
}
.ribbon-clip.ribbon-success:before {
    border-top-color: var(--color-success);
    border-inline-end-color: var(--color-success);
}
.ribbon-clip.ribbon-info:before {
    border-top-color: var(--color-info);
    border-inline-end-color: var(--color-info);
}
.ribbon-clip.ribbon-warning:before {
    border-top-color: var(--color-warning);
    border-inline-end-color: var(--color-warning);
}
.ribbon-clip.ribbon-danger:before {
    border-top-color: var(--color-danger);
    border-inline-end-color: var(--color-danger);
}
.ribbon-clip.ribbon-light:before {
    border-top-color: var(--color-light);
    border-inline-end-color: var(--color-light);
}
.ribbon-clip.ribbon-dark:before {
    border-top-color: var(--color-dark);
    border-inline-end-color: var(--color-dark);
}

.ribbon-bookmark:before {
    position: absolute;
    top: 0;
    inset-inline-start: 100%;
    display: block;
    width: 0;
    height: 0;
    content: "";
    border: 15px solid var(--color-primary);
    border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-primary:before {
    border-color: var(--color-primary);
    border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-secondary:before {
    border-color: var(--color-secondary);
    border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-success:before {
    border-color: var(--color-success);
    border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-info:before {
    border-color: var(--color-info);
    border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-warning:before {
    border-color: var(--color-warning);
    border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-danger:before {
    border-color: var(--color-danger);
    border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-light:before {
    border-color: var(--color-light);
    border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-dark:before {
    border-color: var(--color-dark);
    border-inline-end: 10px solid transparent;
}

.ribbon-bookmark.ribbon-vertical-left:before, .ribbon-bookmark.ribbon-vertical-right:before {
    top: 100%;
    inset-inline-start: 0;
    margin-top: -14px;
    border-inline-end: 15px solid var(--color-danger);
    border-bottom: 10px solid transparent;
}

.ribbon-primary {
    background-color: var(--color-primary);
}

.ribbon-secondary {
    background-color: var(--color-secondary);
}

.ribbon-success {
    background-color: var(--color-success);
}

.ribbon-info {
    background-color: var(--color-info);
}

.ribbon-warning {
    background-color: var(--color-warning);
}

.ribbon-danger {
    background-color: var(--color-danger);
}

.ribbon-light {
    background-color: var(--color-light);
}

.ribbon-dark {
    background-color: var(--color-dark);
}

/*----------------------------------------*/
/*  ribbon end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.19 short codes
/*----------------------------------------*/
#world-map {
    height: 450px;
}

#marker-map,
#marker-image-map,
#lines-map,
#us-map,
#russia-map,
#brasil-map {
    height: 350px;
}

#map,
#map1,
#map-popup,
#map-custom-icon,
#interactive-map {
    height: 350px;
    z-index: 10;
}

#salesWorldMap {
    height: 200px;
    width: 100%;
}

#salesWorldMap #jvm-regions-group path {
    fill: var(--gray-3) !important;
}

#salesWorldMap circle:nth-child(1) {
    fill: var(--color-primary);
    stroke: rgba(var(--primary-rgb), 0.5);
    stroke-width: 20;
}

#salesWorldMap circle:nth-child(2) {
    fill: var(--color-success);
    stroke: rgba(var(--success-rgb), 0.5);
    stroke-width: 20;
}

#salesWorldMap circle:nth-child(3) {
    fill: var(--color-danger);
    stroke: rgba(var(--danger-rgb), 0.2);
    stroke-width: 20;
}

#salesWorldMap circle:nth-child(4) {
    fill: var(--color-info);
    stroke: rgba(var(--info-rgb), 0.2);
    stroke-width: 20;
}

#salesWorldMap circle:nth-child(5) {
    fill: var(--color-warning);
    stroke: rgba(var(--warning-rgb), 0.2);
    stroke-width: 20;
}

#seles-countries {
    height: 200px;
    width: 100%;
}

#seles-countries #jvm-regions-group path {
    fill: var(--gray-3) !important;
}

#seles-countries circle:nth-child(1) {
    fill: var(--color-primary);
    stroke: rgba(var(--primary-rgb), 0.5);
    stroke-width: 20;
}

#seles-countries circle:nth-child(2) {
    fill: var(--color-success);
    stroke: rgba(var(--success-rgb), 0.5);
    stroke-width: 20;
}

#seles-countries circle:nth-child(3) {
    fill: var(--color-danger);
    stroke: rgba(var(--danger-rgb), 0.2);
    stroke-width: 20;
}

#seles-countries circle:nth-child(4) {
    fill: var(--color-info);
    stroke: rgba(var(--info-rgb), 0.2);
    stroke-width: 20;
}

#seles-countries circle:nth-child(5) {
    fill: var(--color-warning);
    stroke: rgba(var(--warning-rgb), 0.2);
    stroke-width: 20;
}

[data-theme-mode=dark] #jvm-markers-labels-group text {
    fill: var(--color-black);
}

.icons ul {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.icons ul li {
    width: 127px;
    display: inline-block;
    text-align: center;
    background-color: var(--color-card-bg);
    box-shadow: var(--shadow);
    border-radius: 3px;
    padding: 15px 0 15px 0;
    transition: all 0.6s ease;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .icons ul li {
        width: 137px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .icons ul li {
        width: 125px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .icons ul li {
        width: 150px;
    }
}
@media (max-width: 575px) {
    .icons ul li {
        width: 150px;
    }
}
.icons ul li:hover {
    color: var(--color-primary);
    background-color: var(--gray-2);
}
.icons ul .class-icon {
    font-size: 21px;
    line-height: 21px;
}
.icons ul .class-icon [class^=ri-] {
    font-size: 26px;
    margin-bottom: 5px;
    display: block;
}
.icons ul .class-icon p {
    font-size: 12px;
}
.icons ul .class-icon.match {
    background-color: var(--gray-2);
}
.icons ul .class-icon.match .name {
    color: var(--color-info);
}

.tabler-icons {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.tabler-icon {
    width: 158px;
    display: flex;
    text-align: center;
    background-color: var(--color-card-bg);
    box-shadow: var(--shadow);
    border-radius: 3px;
    padding: 15px 0px;
    transition: all 0.6s ease;
    flex-direction: column;
    justify-content: center;
    gap: 5px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tabler-icon {
        width: 157px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .tabler-icon {
        width: 150px;
    }
}
.tabler-icon strong {
    font-weight: var(--fw-regular);
    margin-bottom: 5px;
}
.tabler-icon i {
    font-size: 26px;
}
.tabler-icon .tabler-icon-codes code {
    font-size: 14px;
    color: var(--color-body);
}
.tabler-icon .tabler-icon-codes code:first-child {
    display: none;
}
.tabler-icon .tabler-icon-codes code:last-child {
    padding: 2px 5px;
    border: 1px solid var(--color-border);
}
.tabler-icon .tabler-icon-codes br {
    display: none;
}

.line-awesome-icon > div {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--color-body);
}
.line-awesome-icon > div i {
    color: var(--color-black);
    font-size: 36px;
    transition: all 0.3s ease-in-out;
}
.line-awesome-icon > div:hover i {
    color: var(--color-primary);
    transform: scale(1.5);
}

.bd-details-content-title {
    font-size: 28px;
    margin-bottom: 15px;
}
@media (max-width: 575px) {
    .bd-details-content-title {
        font-size: 24px;
    }
}

.list-bullet li {
    position: relative;
    margin-inline-start: 20px;
}
[data-theme-mode=dark] .list-bullet li {
    color: var(--color-body);
}
.list-bullet li:not(:last-child) {
    margin-bottom: 0px;
}
.list-bullet li::before {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    background-color: var(--color-primary);
    border-radius: 50%;
    inset-inline-start: -20px;
    top: 7px;
}

.sidebar-sticky {
    position: sticky;
    top: 100px;
    margin-bottom: 25px;
}

.pos-center {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/*----------------------------------------
   Text Underline
-----------------------------------------*/
.underline a {
    display: inline;
    background-image: linear-gradient(var(--color-primary), var(--color-primary)), linear-gradient(var(--color-primary), var(--color-primary));
    background-size: 0% 1px, 0 1px;
    background-position: 100% 100%, 0 83%;
    background-repeat: no-repeat;
    transition: background-size 0.4s linear;
    padding: 0 0 1% 0;
}
.underline a:hover {
    background-size: 0 1px, 100% 1px;
    color: var(--color-primary) !important;
}

.underline-two a {
    display: inline;
    background-image: linear-gradient(var(--color-secondary), var(--color-secondary)), linear-gradient(var(--color-secondary), var(--color-secondary));
    background-size: 0% 1px, 0 1px;
    background-position: 100% 100%, 0 83%;
    background-repeat: no-repeat;
    transition: background-size 0.4s linear;
    padding: 0 0 2% 0;
}
.underline-two a:hover {
    background-size: 0 1px, 100% 1px;
    color: var(--color-secondary) !important;
}

.underline-white a {
    display: inline;
    background-image: linear-gradient(var(--color-white), var(--color-white)), linear-gradient(var(--color-white), var(--color-white));
    background-size: 0% 1px, 0 1px;
    background-position: 100% 100%, 0 83%;
    background-repeat: no-repeat;
    transition: background-size 0.4s linear;
    padding: 0 0 1% 0;
}
.underline-white a:hover {
    background-size: 0 1px, 100% 1px;
    color: var(--color-white) !important;
}

/* display grid */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .grid-2 {
        grid-template-columns: repeat(1, 1fr);
    }
}

.grid-5 {
    grid-template-columns: repeat(5, 1fr);
    justify-content: space-between;
    gap: 25px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .grid-5 {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* display flex */
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .flex-wrap-small {
        flex-wrap: wrap !important;
    }
}

@media (max-width:450px) {
    .flex-xxs-wrap {
        flex-wrap: wrap !important;
    }
}

.d-flex-between {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.d-flex-center {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.d-flex-start {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: start;
}

.d-flex-items {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.d-flex-column {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.direction-column {
    flex-direction: column;
}

/* justify align */
.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: end !important;
}

.align-center {
    align-items: center;
}

.align-start {
    align-items: start !important;
}

.align-end {
    align-items: end !important;
}

/* justify align end */
.has-separator {
    margin-inline-end: 15px;
    padding-inline-end: 15px;
    position: relative;
}
.has-separator::before {
    position: absolute;
    content: " ";
    width: 1px;
    height: 20px;
    inset-inline-end: 0px;
    top: 50%;
    background: var(--color-border-2);
    transform: translateY(-50%);
}

.has-separator-black {
    margin-inline-end: 15px;
    padding-inline-end: 15px;
    position: relative;
}
.has-separator-black::before {
    position: absolute;
    content: " ";
    width: 1px;
    height: 20px;
    inset-inline-end: 0px;
    top: 50%;
    background: var(--color-black);
    transform: translateY(-50%);
}

.img-hover:hover img {
    transform: scale3d(1.07, 1.07, 1.07);
}

.has-position {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 1;
}

/* gap */
.gap-5 {
    gap: 5px !important;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px !important;
}

.gap-16 {
    gap: 16px;
}

.gap-20 {
    gap: 20px;
}

.gap-25 {
    gap: 25px;
}

.gap-30 {
    gap: 30px;
}

.gap-35 {
    gap: 35px;
}

.b-color-primary {
    border-color: var(--color-primary);
}

.b-bottom {
    border-bottom: 1px solid var(--color-border);
}

.b-top {
    border-top: 1px solid var(--color-border);
}

.b-bottom2px {
    border-bottom: 2px solid;
}

.border-top {
    border-top: 1px solid var(--color-border) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--color-border) !important;
}

/* Border Radius Short Code */
.radius-0 {
    border-radius: 0px !important;
}

.radius-3 {
    border-radius: 3px !important;
}

.radius-4 {
    border-radius: 4px !important;
}

.radius-5 {
    border-radius: 5px !important;
}

.radius-6 {
    border-radius: 6px !important;
}

.radius-8 {
    border-radius: 8px !important;
}

.radius-10 {
    border-radius: 10px !important;
}

.radius-12 {
    border-radius: 12px !important;
}

.radius-16 {
    border-radius: 16px !important;
}

.radius-24 {
    border-radius: 16px !important;
}

.radius-50 {
    border-radius: 50px !important;
}

.radius-100 {
    border-radius: 100% !important;
}

code {
    color: var(--color-danger);
    word-wrap: break-word;
}

.text-border-highlights {
    position: relative;
    z-index: 1;
}
.text-border-highlights span {
    position: absolute;
    inset-inline-start: 0;
    display: inline-block;
    z-index: -1;
    width: calc(100% - 3px);
}

/* width Short code */
.w-5 {
    width: 5% !important;
}

.w-10 {
    width: 10% !important;
}

/* Height Short code */
.lh-1 {
    line-height: 1;
}

.h100vh {
    height: 100vh;
}

.h100p {
    height: 100%;
}

.h-1px {
    height: 1px;
}

.h-2px {
    height: 2px;
}

.h-3px {
    height: 3px;
}

.h-4px {
    height: 4px;
}

.h-5px {
    height: 5px;
}

.h-6px {
    height: 6px;
}

.h-7px {
    height: 7px;
}

.h-8px {
    height: 8px;
}

.h-9px {
    height: 9px;
}

.h-10px {
    height: 10px;
}

.h-15px {
    height: 15px;
}

.h-20px {
    height: 20px;
}

.h-40px {
    height: 40px;
}

/* Bottom Short Code */
.bottom-0 {
    inset-block-end: 0;
}

.bottom-5 {
    inset-block-end: 5px;
}

.bottom-6 {
    inset-block-end: 6px;
}

.bottom-7 {
    inset-block-end: 7px;
}

.bottom-8 {
    inset-block-end: 8px;
}

.bottom-9 {
    inset-block-end: 9px;
}

.bottom-10 {
    inset-block-end: 10px;
}

.bottom-15 {
    inset-block-end: 15px;
}

.bottom-20 {
    inset-block-end: 20px;
}

.bottom-25 {
    inset-block-end: 25px;
}

/* List Style None */
.list-none ul {
    list-style: none;
}

/* Font Size */
.fs-8 {
    font-size: 8px;
}

.fs-9 {
    font-size: 9px;
}

.fs-10 {
    font-size: 10px;
}

.fs-11 {
    font-size: 11px;
}

.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}

.fs-16 {
    font-size: 16px;
}

.fs-17 {
    font-size: 17px;
}

.fs-18 {
    font-size: 18px;
}

.fs-19 {
    font-size: 19px;
}

.fs-20 {
    font-size: 20px;
}

.fs-21 {
    font-size: 21px;
}

.fs-22 {
    font-size: 22px;
}

.fs-23 {
    font-size: 23px;
}

.fs-24 {
    font-size: 24px;
}

.fs-25 {
    font-size: 25px;
}

.fs-26 {
    font-size: 26px;
}

.fs-27 {
    font-size: 27px;
}

.fs-28 {
    font-size: 28px;
}

.fs-29 {
    font-size: 29px;
}

.fs-30 {
    font-size: 30px;
}

.fs-31 {
    font-size: 31px;
}

.fs-32 {
    font-size: 32px;
}

.fs-33 {
    font-size: 33px;
}

.fs-34 {
    font-size: 34px;
}

.fs-35 {
    font-size: 35px;
}

.fs-36 {
    font-size: 36px;
}

.fs-37 {
    font-size: 37px;
}

.fs-38 {
    font-size: 38px;
}

.fs-39 {
    font-size: 39px;
}

.fs-40 {
    font-size: 40px;
}

.fs-41 {
    font-size: 41px;
}

.fs-42 {
    font-size: 42px;
}

.fs-43 {
    font-size: 43px;
}

.fs-44 {
    font-size: 44px;
}

.fs-45 {
    font-size: 45px;
}

.fs-46 {
    font-size: 46px;
}

.fs-47 {
    font-size: 47px;
}

.fs-48 {
    font-size: 48px;
}

.fs-49 {
    font-size: 49px;
}

.fs-50 {
    font-size: 50px;
}

.fs-51 {
    font-size: 51px;
}

.fs-52 {
    font-size: 52px;
}

.fs-53 {
    font-size: 53px;
}

.fs-54 {
    font-size: 54px;
}

.fs-55 {
    font-size: 55px;
}

.fs-56 {
    font-size: 56px;
}

.fs-57 {
    font-size: 57px;
}

.fs-58 {
    font-size: 58px;
}

.fs-59 {
    font-size: 59px;
}

.fs-60 {
    font-size: 60px;
}

.fs-61 {
    font-size: 61px;
}

.fs-62 {
    font-size: 62px;
}

.fs-63 {
    font-size: 63px;
}

.fs-64 {
    font-size: 64px;
}

.fs-65 {
    font-size: 65px;
}

.fs-66 {
    font-size: 66px;
}

.fs-67 {
    font-size: 67px;
}

.fs-68 {
    font-size: 68px;
}

.fs-69 {
    font-size: 69px;
}

.fs-70 {
    font-size: 70px;
}

.fs-71 {
    font-size: 71px;
}

.fs-72 {
    font-size: 72px;
}

.fs-150 {
    font-size: 150px;
}

.fs-140 {
    font-size: 140px;
}

.fs-190 {
    font-size: 190px;
}

.fs-200 {
    font-size: 200px;
}

/* Font Weight */
.fw-1 {
    font-weight: var(--fw-thin) !important;
}

.fw-2 {
    font-weight: var(--fw-elight) !important;
}

.fw-3 {
    font-weight: var(--fw-light) !important;
}

.fw-4 {
    font-weight: var(--fw-regular) !important;
}

.fw-5 {
    font-weight: var(--fw-medium) !important;
}

.fw-6 {
    font-weight: var(--fw-sbold) !important;
}

.fw-7 {
    font-weight: var(--fw-bold) !important;
}

.fw-8 {
    font-weight: var(--fw-ebold) !important;
}

.fw-9 {
    font-weight: var(--fw-black) !important;
}

.swiper-shadow-add {
    padding: 15px 15px !important;
    margin: -15px -15px !important;
}

.table-head-bg thead tr th {
    background-color: var(--color-bg-primary);
}

.latter-sp-2 {
    letter-spacing: 2px;
}

.filter-shadow {
    filter: drop-shadow(7px 10px 0px var(--color-light));
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .device-scroll {
        overflow-x: scroll;
        overflow-y: hidden !important;
        overflow: scroll;
        overflow-y: scroll;
        overflow-y: scroll;
        flex-wrap: nowrap !important;
        padding-bottom: 10px;
        padding-bottom: 10px;
    }
}

.content-divider {
    border-top: 1px solid var(--color-border);
}

.sl-number-counts {
    counter-reset: count;
    list-style: none;
}
.sl-number-counts li::before {
    counter-increment: count;
    content: counter(count) ". ";
    transition: all 500ms ease;
    display: inline-block;
}

.opacity-1 {
    opacity: 1;
}

.opacity-5 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.cursor-pointer {
    cursor: pointer;
}

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

.vertical-align-top {
    vertical-align: top !important;
}

@media (max-width: 575px) {
    .mobile-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: auto;
        padding-bottom: 5px;
    }
}

.width-90 {
    width: 90%;
}

@media (max-width: 575px) {
    .text-xs-start {
        text-align: start !important;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .text-xs-center {
        text-align: center;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .justify-xs-center {
        justify-content: center;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .d-m-none {
        display: none;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .flex-xxl-wrap {
        flex-wrap: wrap !important;
        white-space: nowrap;
    }
}

.mr-auto {
    margin-inline-end: auto !important;
}

.pl-0 {
    padding-inline-start: 0 !important;
}

.pr-0 {
    padding-inline-end: 0 !important;
}

.mt_1 {
    margin-top: 1px;
}

.mt_2 {
    margin-top: 2px;
}

.mt_3 {
    margin-top: 3px;
}

.mt_4 {
    margin-top: 4px;
}

.mt_5 {
    margin-top: 5px;
}

/* Padding Y-axis */
.py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.py-9 {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

.py-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.py-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.py-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.py-25 {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}

/* Padding X-axis */
.px-6 {
    padding-inline-start: 6px !important;
    padding-inline-end: 6px !important;
}

.px-10 {
    padding-inline-start: 10px !important;
    padding-inline-end: 10px !important;
}

.px-15 {
    padding-inline-start: 15px !important;
    padding-inline-end: 15px !important;
}

.px-20 {
    padding-inline-start: 20px !important;
    padding-inline-end: 20px !important;
}

.px-25 {
    padding-inline-start: 25px !important;
    padding-inline-end: 25px !important;
}

/* Padding All Sides */
.p-6 {
    padding: 6px !important;
}

.p-7 {
    padding: 7px !important;
}

.p-8 {
    padding: 8px !important;
}

.p-9 {
    padding: 9px !important;
}

.p-10 {
    padding: 10px !important;
}

.p-11 {
    padding: 11px !important;
}

.p-12 {
    padding: 12px !important;
}

.p-13 {
    padding: 13px !important;
}

.p-14 {
    padding: 14px !important;
}

.p-15 {
    padding: 15px !important;
}

.p-16 {
    padding: 16px !important;
}

.p-17 {
    padding: 17px !important;
}

.p-18 {
    padding: 18px !important;
}

.p-19 {
    padding: 19px !important;
}

.p-20 {
    padding: 20px !important;
}

.p-21 {
    padding: 21px !important;
}

.p-22 {
    padding: 22px !important;
}

.p-23 {
    padding: 23px !important;
}

.p-24 {
    padding: 24px !important;
}

.p-25 {
    padding: 25px !important;
}

.p-50 {
    padding: 50px !important;
}

.p-100 {
    padding: 100px !important;
}

.ml-0 {
    margin-inline-start: 0 !important;
}

/*----------------------------------------*/
/*  short codes end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.20 step
/*----------------------------------------*/
.step-active {
    color: var(--color-primary) !important;
}

.steps-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-black);
}
.steps-title:hover {
    color: var(--color-primary);
}

.steps-form {
    width: 100%;
    position: relative;
}

.steps-row::before {
    top: 50%;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 99%;
    height: 2px;
    background-color: var(--gray-3);
    z-index: 1;
    inset-inline-start: 2px;
    transform: translateY(-50%);
}
.steps-row.style_two::before {
    display: none;
}

.steps-step {
    text-align: center;
    position: relative;
    z-index: 9;
}
.steps-step.style_two {
    display: block;
    text-align: start;
}
.steps-step.style_two:not(:last-child) {
    margin-bottom: 20px;
}

.step-active span {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.step-grid {
    display: grid;
    grid-template-columns: 250px auto;
    align-items: center;
    gap: 25px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .step-grid {
        grid-template-columns: auto;
    }
}

.bg-steps {
    padding: 10px 0px;
}

.btn-blue-grey {
    background-color: var(--primary-rgba-15);
    padding: 10px 10px;
}
.btn-blue-grey.step-active-bg {
    background-color: var(--color-primary);
    color: var(--color-white) !important;
}

.setup-panel-4 {
    display: flex;
    justify-content: space-between;
    border-radius: 4px;
    overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .setup-panel-4 {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: auto;
        white-space: nowrap;
    }
}
.setup-panel-4.steps-row::before {
    display: none;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .setup-panel-4 .steps-step {
        display: grid;
        text-align: center;
    }
    .setup-panel-4 .steps-step:not(:last-child) {
        margin-inline-end: 10px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .setup-panel-4 .steps-step {
        display: grid;
        text-align: center;
        margin-inline-end: 0;
        margin-bottom: 10px;
    }
}
.setup-panel-4 .steps-title {
    color: var(--color-black);
}
.setup-panel-4 .steps-title:hover {
    color: var(--color-black);
}

.step__btn-end {
    text-align: end;
}
@media (max-width: 575px) {
    .step__btn-end {
        text-align: start;
    }
}

.step-circle span {
    width: 70px;
    height: 70px;
    font-size: 22px;
    color: var(--color-primary);
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border);
}
.step-circle.step-active span {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.steps-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.steps-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.steps-item {
    position: relative;
    padding: 12px 20px;
    margin: 0;
    font-size: inherit;
    color: var(--clr-text-label);
    vertical-align: top;
    background-color: var(--primary-rgba-1);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.steps-item.current {
    color: var(--color-white);
    background-color: var(--color-primary);
}
.steps-item.current .steps-number {
    color: var(--color-primary);
    background-color: var(--color-white);
}
.steps-item.current .steps-title {
    color: var(--color-white);
}
.steps-item.current p {
    color: var(--color-white);
}
.steps-item.done {
    color: var(--color-white);
    background-color: var(--color-primary);
}
.steps-item.done .steps-number {
    color: var(--color-primary);
    background-color: var(--color-white);
}
.steps-item.done .steps-title {
    color: var(--color-white);
}
.steps-item.done p {
    color: var(--color-white);
}
.steps-item.error {
    color: var(--color-white);
    background-color: var(--color-warning);
}
.steps-item.error .steps-number {
    color: var(--color-warning);
    background-color: var(--color-white);
}
.steps-item.error .steps-title {
    color: var(--color-white);
}
.steps-item.error p {
    color: var(--color-white);
}
.steps-item.active {
    color: var(--color-white);
    background-color: var(--color-success);
}
.steps-item.active .steps-number {
    color: var(--color-success);
    background-color: var(--color-white);
}
.steps-item.active .steps-title {
    color: var(--color-white);
}
.steps-item.active p {
    color: var(--color-white);
}
.steps-item.disabled {
    color: var(--color-white);
    pointer-events: none;
    cursor: auto;
}
.steps-number {
    position: absolute;
    top: 50%;
    inset-inline-start: 20px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    text-align: center;
    background: var(--color-primary);
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.steps-content {
    min-height: 40px;
    margin-inline-start: 50px;
    text-align: left;
}
.steps-title {
    margin-bottom: 0;
    font-size: 20px;
    color: var(--color-heading);
    font-weight: 600;
}

/* steps btn */
.steps-btn {
    width: 100%;
}
.steps-btn a {
    padding: 10px 15px;
    font-size: 16px;
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    background-color: var(--primary-rgba-15);
    width: 100%;
    display: block;
    text-align: center;
}
.steps-btn a.active {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: 4px;
}
[data-theme-mode=dark] .steps-btn a.active {
    color: var(--color-black);
}

.form-custom-content {
    padding: 10px 20px 10px 20px;
    cursor: pointer;
    width: 100%;
}

/*----------------------------------------*/
/*  step end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.21 tab
/*----------------------------------------*/
.nav-tabs .nav-link {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.nav-link {
    display: block;
    padding: 11px 16px;
    font-size: 14px;
    color: var(--color-heading);
    text-decoration: none;
    background: 0 0;
    border: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

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

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
[data-theme-mode=dark] .nav-tabs .nav-item.show .nav-link,
[data-theme-mode=dark] .nav-tabs .nav-link.active {
    color: var(--color-black);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--color-white);
    background-color: var(--color-primary);
}
[data-theme-mode=dark] .nav-pills .nav-link.active,
[data-theme-mode=dark] .nav-pills .show > .nav-link {
    color: var(--color-black);
}

.nav-primary .nav-link.active,
.nav-primary .show > .nav-link,
.nav-pills.nav-primary .nav-link.active,
.nav-pills.nav-primary .show > .nav-link {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 6px;
}
[data-theme-mode=dark] .nav-primary .nav-link.active,
[data-theme-mode=dark] .nav-primary .show > .nav-link,
[data-theme-mode=dark] .nav-pills.nav-primary .nav-link.active,
[data-theme-mode=dark] .nav-pills.nav-primary .show > .nav-link {
    color: var(--color-black);
}

.nav-primary .nav-link,
.nav-pills.nav-primary .nav-link {
    color: var(--color-heading);
    border-radius: 6px;
}

.nav-secondary .nav-link.active,
.nav-secondary .show > .nav-link,
.nav-pills.nav-secondary .nav-link.active,
.nav-pills.nav-secondary .show > .nav-link {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border: none;
}

.nav-secondary .nav-link,
.nav-pills.nav-secondary .nav-link {
    color: var(--color-secondary);
}

.nav-success .nav-link.active,
.nav-success .show > .nav-link,
.nav-pills.nav-success .nav-link.active,
.nav-pills.nav-success .show > .nav-link {
    background-color: var(--color-success);
    color: var(--color-white);
    border: none;
}
[data-theme-mode=dark] .nav-success .nav-link.active,
[data-theme-mode=dark] .nav-success .show > .nav-link,
[data-theme-mode=dark] .nav-pills.nav-success .nav-link.active,
[data-theme-mode=dark] .nav-pills.nav-success .show > .nav-link {
    color: var(--color-black);
}

.nav-success .nav-link,
.nav-pills.nav-success .nav-link {
    color: var(--color-success);
}

.nav-info .nav-link.active,
.nav-info .show > .nav-link,
.nav-pills.nav-info .nav-link.active,
.nav-pills.nav-info .show > .nav-link {
    background-color: var(--color-info);
    color: var(--color-white);
    border: none;
}
[data-theme-mode=dark] .nav-info .nav-link.active,
[data-theme-mode=dark] .nav-info .show > .nav-link,
[data-theme-mode=dark] .nav-pills.nav-info .nav-link.active,
[data-theme-mode=dark] .nav-pills.nav-info .show > .nav-link {
    color: var(--color-black);
}

.nav-info .nav-link,
.nav-pills.nav-info .nav-link {
    color: var(--color-info);
}

.nav-warning .nav-link.active,
.nav-warning .show > .nav-link,
.nav-pills.nav-warning .nav-link.active,
.nav-pills.nav-warning .show > .nav-link {
    background-color: var(--color-warning);
    color: var(--color-white);
    border: none;
}
[data-theme-mode=dark] .nav-warning .nav-link.active,
[data-theme-mode=dark] .nav-warning .show > .nav-link,
[data-theme-mode=dark] .nav-pills.nav-warning .nav-link.active,
[data-theme-mode=dark] .nav-pills.nav-warning .show > .nav-link {
    color: var(--color-black);
}

.nav-warning .nav-link,
.nav-pills.nav-warning .nav-link {
    color: var(--color-warning);
}

.nav-danger .nav-link.active,
.nav-danger .show > .nav-link,
.nav-pills.nav-danger .nav-link.active,
.nav-pills.nav-danger .show > .nav-link {
    background-color: var(--color-danger);
    color: var(--color-white);
    border: none;
}
[data-theme-mode=dark] .nav-danger .nav-link.active,
[data-theme-mode=dark] .nav-danger .show > .nav-link,
[data-theme-mode=dark] .nav-pills.nav-danger .nav-link.active,
[data-theme-mode=dark] .nav-pills.nav-danger .show > .nav-link {
    color: var(--color-black);
}

.nav-danger .nav-link,
.nav-pills.nav-danger .nav-link {
    color: var(--color-danger);
}

.nav-light .nav-link.active,
.nav-light .show > .nav-link,
.nav-pills.nav-light .nav-link.active,
.nav-pills.nav-light .show > .nav-link {
    background-color: var(--color-light);
    color: var(--color-white);
    border: none;
}

.nav-light .nav-link,
.nav-pills.nav-light .nav-link {
    color: var(--color-heading);
}

.nav-dark .nav-link,
.nav-pills.nav-dark .nav-link {
    color: var(--color-heading);
    border-radius: 6px;
}

.nav-dark .nav-link.active,
.nav-dark .show > .nav-link,
.nav-pills.nav-dark .nav-link.active,
.nav-pills.nav-dark .show > .nav-link {
    background-color: var(--color-heading);
    color: var(--color-white);
    border-radius: 6px;
}

.tab-style-one .nav-pills {
    margin-bottom: 30px;
    justify-content: center;
}
.tab-style-one .nav-item {
    padding: 0 4px;
}
.tab-style-one .nav-link {
    border: none;
    color: var(--color-body);
    border-radius: 6px;
    padding: 7.8px 20px;
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
}
.tab-style-one .nav-link:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.tab-style-one .nav-link.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.tab-style-two .nav-pills {
    margin-bottom: 30px;
    justify-content: center;
    border-bottom: 1px solid var(--color-border);
    gap: 25px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tab-style-two .nav-pills {
        margin-bottom: 15px;
    }
}
@media (max-width: 575px) {
    .tab-style-two .nav-pills {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
}
.tab-style-two .nav-item {
    padding: 0 35px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .tab-style-two .nav-item {
        padding: 0 0px;
    }
}
.tab-style-two .nav-link {
    padding: 0;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    color: var(--color-black);
    background-color: transparent;
    padding-bottom: 15px;
}
.tab-style-two .nav-link:hover {
    background-color: transparent;
    color: var(--color-primary);
}
.tab-style-two .nav-link:hover::before {
    transform: scaleX(1);
}
.tab-style-two .nav-link.active {
    background-color: transparent;
    color: var(--color-primary);
}
.tab-style-two .nav-link.active::before {
    transform: scaleX(1);
}
.tab-style-two .nav-link::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    transform: scaleX(0);
    -webkit-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
    background-color: var(--color-primary);
    inset-inline-start: 0;
    bottom: -1px;
}
.tab-style-two.boder-b-none .nav-pills {
    border-bottom: none;
}
.tab-style-two.boder-b-none .nav-link::before {
    bottom: 10px;
}
.tab-style-three .nav-tabs {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
}
.tab-style-three .nav-link {
    border-radius: 6px 6px 0 0;
    border: none;
    border-bottom: none;
    display: block;
    padding: 7.8px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black);
    text-decoration: none;
}
.tab-style-three .nav-link:hover {
    color: var(--color-primary);
    background-color: var(--gray-3);
    border-color: var(--gray-3);
}
.tab-style-three .nav-link.active {
    color: var(--color-primary);
    background-color: var(--gray-3);
    border-color: var(--gray-3);
}
.tab-style-three .tab-pane {
    background-color: transparent;
}
.tab-style-three.tab-bg .nav-tabs {
    margin-bottom: 0px;
    border-bottom: none;
}
.tab-style-three.tab-bg .nav-link {
    border: none;
}
.tab-style-three.tab-bg .nav-link.active {
    border: none;
}
.tab-style-three.tab-bg .tab-pane {
    background-color: var(--color-bg-primary);
    padding: 30px 30px;
}
.tab-style-three.tab-column {
    display: flex;
}
.tab-style-three.tab-column .nav-tabs {
    flex-direction: column;
    background: var(--color-bg-primary);
    margin-bottom: 0;
    border-bottom: none;
    min-height: 470px;
}
.tab-style-three.tab-column .nav-link {
    width: 180px;
    text-align: start;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tab-style-three.tab-column .nav-link.active {
    color: var(--color-primary);
    background-color: var(--color-white);
    border-color: transparent;
}
.tab-style-three.tab-column .tab-content {
    width: 100%;
}
.tab-style-three.tab-column .tab-pane {
    background-color: var(--color-white);
    padding-inline-start: 30px;
}
.tab-style-four .nav-item:not(:last-child) {
    margin-bottom: 10px;
}
.tab-style-four .nav-pills {
    display: block;
}
.tab-style-four .nav-link {
    background-color: var(--primary-rgba-15);
    color: var(--color-black);
    border: 0;
    border-radius: 4px;
    display: flex;
    align-items: start;
    font-size: 16px;
    font-weight: var(--fw-medium);
    width: 100%;
    gap: 15px;
    text-align: start;
    justify-content: start;
    padding: 9.3px 30px;
    transition: all 0.3s ease-in-out;
}
[data-theme-mode=dark] .tab-style-four .nav-link {
    color: var(--color-black);
}
.tab-style-four .nav-link:hover {
    color: var(--color-white);
    background-color: var(--color-primary);
}
[data-theme-mode=dark] .tab-style-four .nav-link:hover {
    color: var(--color-black);
}
.tab-style-four .nav-link.active {
    color: var(--color-white);
    background-color: var(--color-primary);
}
[data-theme-mode=dark] .tab-style-four .nav-link.active {
    color: var(--color-black);
}
.tab-style-four .tab-pane-content-thumb img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
}
.tab-style-four .tab-pane.active .tab-pane-content {
    animation: tab-right 0.4s linear;
}
@-webkit-keyframes tab-right {
    from {
        transform: translateX(35px);
    }
    to {
        transform: translateX(0);
    }
}
@-moz-keyframes tab-right {
    from {
        transform: translateX(35px);
    }
    to {
        transform: translateX(0);
    }
}
@-ms-keyframes tab-right {
    from {
        transform: translateX(35px);
    }
    to {
        transform: translateX(0);
    }
}
@keyframes tab-right {
    from {
        transform: translateX(35px);
    }
    to {
        transform: translateX(0);
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .tab-style-four.tab-flex .nav-item {
        width: 100%;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .tab-style-four.tab-flex .nav-item:not(:last-child) {
        margin-bottom: 0;
    }
}
.tab-style-four.tab-flex .nav-pills {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 30px;
    align-items: center;
    margin-bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .tab-style-four.tab-flex .nav-pills {
        flex-direction: column;
    }
}
.tab-style-four.tab-flex .tab-pane.active .tab-pane-content {
    animation: tab-bottom 0.4s linear;
}
@-webkit-keyframes tab-bottom {
    from {
        transform: translateY(30px);
    }
    to {
        transform: translateY(0);
    }
}
@-moz-keyframes tab-bottom {
    from {
        transform: translateY(30px);
    }
    to {
        transform: translateY(0);
    }
}
@-ms-keyframes tab-bottom {
    from {
        transform: translateY(30px);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes tab-bottom {
    from {
        transform: translateY(30px);
    }
    to {
        transform: translateY(0);
    }
}
.tab-style-four.tab-pane-left-anim .tab-pane.active .tab-pane-content {
    animation: tab-left 0.4s linear;
}
@-webkit-keyframes tab-left {
    from {
        transform: translateX(-35px);
    }
    to {
        transform: translateX(0);
    }
}
@-moz-keyframes tab-left {
    from {
        transform: translateX(-35px);
    }
    to {
        transform: translateX(0);
    }
}
@-ms-keyframes tab-left {
    from {
        transform: translateX(-35px);
    }
    to {
        transform: translateX(0);
    }
}
@keyframes tab-left {
    from {
        transform: translateX(-35px);
    }
    to {
        transform: translateX(0);
    }
}
.tab-style-five .nav-link {
    border: 1px solid var(--color-body);
    border-radius: 6px;
    padding: 0 20px;
    color: var(--color-body);
    font-size: 16px;
    font-weight: 500;
    transition: var(--transition);
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tab-style-five .nav-link.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.tab-style-five .nav-link.active:hover {
    color: var(--color-white);
}
.tab-style-five .nav-link:hover {
    color: var(--color-primary);
}
.tab-style-five .nav-pills {
    gap: 10px;
}
.tab-style-six .nav-pills {
    margin-bottom: 25px;
    border-bottom: 1px solid var(--color-border);
    gap: 25px;
}
.tab-style-six .nav-link {
    padding: 0;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    color: var(--color-black);
    background-color: transparent;
    padding-bottom: 15px;
}
.tab-style-six .nav-link:hover {
    background-color: transparent;
    color: var(--color-primary);
}
.tab-style-six .nav-link:hover::before {
    transform: scaleX(1);
}
.tab-style-six .nav-link.active {
    background-color: transparent;
    color: var(--color-primary);
}
.tab-style-six .nav-link.active::before {
    transform: scaleX(1);
}
.tab-style-six .nav-link::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    transform: scaleX(0);
    -webkit-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
    background-color: var(--color-primary);
    inset-inline-start: 0;
    bottom: -1px;
}

/*----------------------------------------*/
/*  tab end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.22 table
/*----------------------------------------*/
.table-card {
    margin: 0 -25px -25px;
}

.table {
    margin-bottom: 0;
    border-color: var(--color-border) !important;
    color: var(--color-body);
}

.tables-info {
    color: var(--color-heading);
}

/* Bootstrap Table */
.table > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
}
.table > thead {
    background-color: var(--gray-3);
    color: var(--color-heading);
}

.table-light {
    color: var(--color-black);
}

.table thead tr:last-child th {
    border-bottom-width: 0;
}

.table.tfoot-b-none tfoot tr:last-child th {
    border-bottom-width: 0;
}
.table.tbody-b-none tbody tr:last-child td {
    border-bottom-width: 0;
}

.table thead tr th {
    font-weight: var(--fw-bold);
    font-size: 14px;
}

.table th,
.table td {
    padding: 12px 18.4px;
    padding: 10.5px 10px;
    vertical-align: middle;
    line-height: 1.462;
    font-size: 14px;
    font-weight: 500;
}

.table-active {
    background-color: var(--gray-3);
    color: var(--color-heading);
}

/* dataTables */
.dt-button {
    font-size: 14px !important;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flexbox;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 6.8px 20px !important;
    transition: all 0.3s linear !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;
    white-space: nowrap !important;
    gap: 0 6px !important;
    font-weight: var(--fw-medium) !important;
    border: none !important;
    color: var(--color-white) !important;
    background-color: var(--color-primary) !important;
}
.dt-button:hover {
    color: var(--color-primary) !important;
    background-color: var(--color-secondary) !important;
}

div.dataTables_wrapper div.dataTables_length label {
    color: var(--color-body) !important;
}

div.dataTables_wrapper div.dataTables_filter label {
    color: var(--color-body) !important;
}

.dataTables_info {
    padding-top: 0 !important;
    color: var(--color-body) !important;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .dataTables_info {
        text-align: start !important;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: start !important;
        margin-inline-start: -10px;
    }
}

div.dataTables_wrapper > div.row:first-child {
    margin-top: 15px;
    align-items: center;
    padding-bottom: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    div.dataTables_wrapper > div.row:first-child {
        gap: 25px;
    }
}
div.dataTables_wrapper > div.row:last-child {
    align-items: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    div.dataTables_wrapper > div.row:last-child {
        gap: 25px;
        display: inline-grid;
    }
}

table.dataTable {
    margin-top: 0px !important;
    margin-bottom: 10px !important;
}

@media (min-width: 768px) {
    .data-table-btn {
        position: absolute;
        inset-inline-start: 200px;
        z-index: 1;
        top: 15px;
    }
}
table.dataTable.display tbody tr.odd > .sorting_1 {
    background-color: rgba(108, 95, 252, 0.1);
}

@media (max-width:450px) {
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        flex-wrap: wrap;
    }
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-inline-start: 0.5em !important;
}

[dir=rtl] div.dataTables_wrapper div.dataTables_filter {
    text-align: end;
}

/*----------------------------------------*/
/*  table end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.23 timeline
/*----------------------------------------*/
.timeline {
    border-inline-start: 2px solid var(--color-border);
    padding-inline-start: 30px;
    position: relative;
}
.timeline .timeline-item {
    position: relative;
    padding-bottom: 25px;
}
.timeline .timeline-item:last-child {
    padding-bottom: 0;
}
.timeline .timeline-item::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: -37px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 3px solid var(--color-white);
    box-shadow: 0 0 0 2px var(--color-primary);
}
.timeline .timeline-item.pending::before {
    background: var(--gray-5);
    box-shadow: 0 0 0 2px var(--gray-3);
}
@media (max-width: 575px) {
    .timeline .timeline-content {
        flex-direction: column;
        justify-content: start !important;
        text-align: start !important;
        align-items: start;
        gap: 0px;
    }
}

.timeline-two {
    display: flex;
    justify-content: space-between;
    position: relative;
}
@media (max-width: 575px) {
    .timeline-two {
        justify-content: center;
        flex-direction: column;
        gap: 25px;
        align-items: start;
    }
}
.timeline-two:before {
    content: "";
    position: absolute;
    top: 15px;
    inset-inline-start: 30px;
    inset-inline-end: 30px;
    height: 2px;
    background: var(--color-border);
    z-index: 1;
}
@media (max-width: 575px) {
    .timeline-two:before {
        inset-inline-start: 17px;
        height: 85%;
        width: 1px;
    }
}

.timeline-step {
    display: flex;
    text-align: center;
    position: relative;
    z-index: 2;
    flex-direction: column;
    align-items: center;
}
@media (max-width: 575px) {
    .timeline-step {
        flex-direction: row;
        align-items: start;
        gap: 25px;
    }
    .timeline-step .text-center {
        text-align: start !important;
    }
    .timeline-step .avatar {
        margin: inherit !important;
    }
}
.timeline-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    width: 36px;
    height: 36px;
    background-color: var(--color-body);
    border-radius: 50%;
    margin-bottom: 15px;
}
@media (max-width: 575px) {
    .timeline-step span {
        margin-bottom: 0px;
    }
}
.timeline-step span.completed {
    color: var(--color-white);
    background-color: var(--color-success);
}
.timeline-step span.upcoming {
    color: var(--color-white);
    background-color: var(--color-warning);
}

.payment-icon {
    border: 1px solid var(--color-border);
    border-radius: 4px;
}
.payment-icon img {
    border-radius: 4px;
}
.payment-info {
    flex: 1;
}
.payment-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}
.payment-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.payment-switch input:checked + .slider {
    background-color: #2ecc71;
}
.payment-switch input:checked + .slider:before {
    transform: translateX(26px);
}
.payment-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}
.payment-switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    inset-inline-start: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.payment-details {
    display: none;
}

.bd-timeline-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .bd-timeline-wrapper {
        flex-direction: column;
        gap: 25px;
    }
}
.bd-timeline-item {
    padding: 0 2px;
    position: relative;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .bd-timeline-item {
        width: 100%;
    }
}
.bd-timeline-item:hover .bd-timeline-icon i {
    background: var(--color-primary);
}
.bd-timeline-item:hover .bd-timeline-icon:before {
    background: var(--color-primary);
}
.bd-timeline-item:hover .border {
    background: var(--color-primary);
}
.bd-timeline-item:hover .bd-timeline-content {
    background: var(--color-primary);
}
.bd-timeline-item:hover .title {
    color: var(--color-white);
}
[data-theme-mode=dark] .bd-timeline-item:hover .title {
    color: var(--color-black);
}
.bd-timeline-item:hover .description {
    color: var(--color-white);
}
[data-theme-mode=dark] .bd-timeline-item:hover .description {
    color: var(--color-black);
}
.bd-timeline-item .border {
    height: 15px;
    background: var(--color-secondary);
    margin-bottom: 20px;
    transition: all 0.3s ease 0s;
}
.bd-timeline-item:nth-child(2n) .bd-timeline-icon {
    padding: 55px 0 20px 0;
}
.bd-timeline-item:nth-child(2n) .bd-timeline-icon:before {
    bottom: auto;
    top: 0;
}
.bd-timeline-item:nth-child(2n) .border {
    margin: 38px 0 0 0;
}
.bd-timeline-item:first-child .border {
    border-radius: 4px 0 0 4px;
}
.bd-timeline-item:last-child.border {
    border-radius: 0 4px 4px 0;
}
.bd-timeline-icon {
    display: block;
    text-align: center;
    padding: 10px 0 55px 0;
    z-index: 1;
    position: relative;
}
.bd-timeline-icon:before {
    content: "";
    width: 1px;
    height: 75%;
    background: var(--color-secondary);
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: -1;
    transition: all 0.3s ease 0s;
}
.bd-timeline-icon i {
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50%;
    background: var(--color-secondary);
    font-size: 14px;
    color: var(--color-white);
    transition: all 0.3s ease 0s;
    display: inline-block;
}
[data-theme-mode=dark] .bd-timeline-icon i {
    color: var(--color-black);
}
.bd-timeline-content {
    padding: 15px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    border-radius: 3px;
    transition: all 0.3s ease 0s;
}
.bd-timeline-content .title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-secondary);
    text-transform: uppercase;
    margin: 0 0 10px 0;
    transition: all 0.3s ease 0s;
}
.bd-timeline-content .description {
    font-size: 14px;
    color: var(--color-body);
    margin: 0;
    transition: all 0.3s ease 0s;
}

/* timeline 2 */
.bd-timeline-item-2:not(:last-child) {
    margin-bottom: 30px;
}
.bd-timeline-item-2:nth-child(4n+2) .bd-timeline-content-2 {
    border-color: var(--color-secondary);
}
.bd-timeline-item-2:nth-child(4n+2) .bd-timeline-content-2:before {
    border-color: var(--color-secondary);
}
.bd-timeline-item-2:nth-child(4n+2) .bd-timeline-step {
    color: var(--color-secondary);
}
.bd-timeline-item-2:nth-child(4n+2) .bd-timeline-icon-2 {
    color: var(--color-secondary);
}
.bd-timeline-item-2:nth-child(4n+3) .bd-timeline-content-2 {
    border-color: var(--color-warning);
}
.bd-timeline-item-2:nth-child(4n+3) .bd-timeline-content-2:before {
    border-color: var(--color-warning);
}
.bd-timeline-item-2:nth-child(4n+3) .bd-timeline-step {
    color: var(--color-warning);
}
.bd-timeline-item-2:nth-child(4n+3) .bd-timeline-icon-2 {
    color: var(--color-warning);
}
.bd-timeline-item-2:nth-child(4n+4) .bd-timeline-content-2 {
    border-color: var(--color-success);
}
.bd-timeline-item-2:nth-child(4n+4) .bd-timeline-content-2:before {
    border-color: var(--color-success);
}
.bd-timeline-item-2:nth-child(4n+4) .bd-timeline-step {
    color: var(--color-success);
}
.bd-timeline-item-2:nth-child(4n+4) .bd-timeline-icon-2 {
    color: var(--color-success);
}
.bd-timeline-content-2 {
    color: var(--color-body);
    background: var(--color-white);
    text-align: center;
    min-height: 140px;
    padding: 40px 120px;
    border: 12px solid var(--color-primary);
    border-top: none;
    border-radius: 0 0 40px 40px;
    box-shadow: 0 10px 15px -15px rgba(0, 0, 0, 0.5) inset;
    display: block;
    position: relative;
}
[data-theme-mode=dark] .bd-timeline-content-2 {
    background: var(--color-white);
}
.bd-timeline-content-2:hover {
    text-decoration: none;
}
.bd-timeline-content-2:before {
    content: "";
    border: 3px dashed var(--color-primary);
    border-top: none;
    border-radius: 0 0 30px 30px;
    position: absolute;
    top: 0;
    inset-inline-start: 5px;
    inset-inline-end: 5px;
    bottom: 4px;
}
.bd-timeline-content-2 .title {
    font-size: 28px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0 0 8px;
    color: var(--color-black);
}
.bd-timeline-content-2 .description {
    font-size: 16px;
    margin: 0;
}
.bd-timeline-icon-2 {
    color: var(--color-primary);
    font-size: 50px;
    line-height: 50px;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    inset-inline-start: 35px;
}
.bd-timeline-step {
    color: var(--color-primary);
    font-size: 50px;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    inset-inline-end: 35px;
}
.bd-timeline-step span {
    font-size: 22px;
    font-weight: 400;
    line-height: 25px;
    text-transform: uppercase;
    display: block;
}

@media screen and (max-width: 576px) {
    .bd-timeline-item-2 .bd-timeline-content-2,
    .bd-timeline-item-2:nth-child(even) .bd-timeline-content-2 {
        padding: 110px 25px 25px;
    }
    .bd-timeline-icon-2 {
        transform: translateY(0);
        top: 32px;
    }
    .bd-timeline-step {
        transform: translateY(0);
        top: 17px;
    }
    .title {
        font-size: 22px;
    }
}
/* timeline 3 */
.bd-timeline-3 {
    position: relative;
    width: 100%;
    padding: 30px 0;
}

.bd-timeline-container {
    position: relative;
    width: 100%;
}

.bd-timeline-start,
.bd-timeline-year,
.bd-timeline-end {
    position: relative;
    width: 100%;
    text-align: center;
    z-index: 1;
}

.bd-timeline-start p,
.bd-timeline-year p,
.bd-timeline-end p {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 0;
    padding: 30px 0;
    text-align: center;
    background: var(--color-primary);
    border-radius: 100px;
    color: var(--color-white);
    font-size: 14px;
    text-transform: uppercase;
}
[data-theme-mode=dark] .bd-timeline-start p,
[data-theme-mode=dark] .bd-timeline-year p,
[data-theme-mode=dark] .bd-timeline-end p {
    color: var(--color-black);
}

.bd-timeline-year {
    margin: 30px 0;
}

.bd-timeline-continue {
    position: relative;
    width: 100%;
    padding: 60px 0;
}
.bd-timeline-continue::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    top: 0;
    inset-inline-start: 50%;
    margin-inline-start: -1px;
    background: var(--color-primary);
}

.bd-timeline-left,
.bd-timeline-right .bd-timeline-date {
    text-align: right;
}
[dir=rtl] .bd-timeline-left,
[dir=rtl] .bd-timeline-right .bd-timeline-date {
    text-align: left;
}

.bd-timeline-right,
.bd-timeline-left .bd-timeline-date {
    text-align: left;
}
[dir=rtl] .bd-timeline-right,
[dir=rtl] .bd-timeline-left .bd-timeline-date {
    text-align: right;
}

.bd-timeline-date {
    font-size: 14px;
    font-weight: 600;
    margin: 41px 0 0 0;
    position: relative;
}
.bd-timeline-date::after {
    content: "";
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    top: 3px;
    background: var(--color-primary);
    border-radius: 15px;
    z-index: 1;
}

.bd-timeline-left .bd-timeline-date::after {
    inset-inline-start: -20px;
}

.bd-timeline-right .bd-timeline-date::after {
    inset-inline-end: -20px;
}

.bd-timeline-box {
    position: relative;
    display: inline-block;
    margin: 15px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
}

.bd-timeline-launch {
    width: 100%;
    margin: 15px 0;
    padding: 0;
    border: none;
    text-align: center;
    background: transparent;
}
.bd-timeline-launch .bd-timeline-text {
    width: 100%;
}
.bd-timeline-launch .bd-timeline-box::after,
.bd-timeline-launch .bd-timeline-box::before {
    inset-inline-start: 50%;
    margin-inline-start: -10px;
    border-color: var(--color-border) transparent transparent transparent;
    top: 85px;
}

.bd-timeline-box::after,
.bd-timeline-box::before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.bd-timeline-left .bd-timeline-box::after,
.bd-timeline-left .bd-timeline-box::before {
    inset-inline-start: 100%;
}

.bd-timeline-right .bd-timeline-box::after,
.bd-timeline-right .bd-timeline-box::before {
    inset-inline-end: 100%;
}

.bd-timeline-box::after {
    top: 26px;
    border-color: transparent transparent transparent var(--color-border);
    border-width: 10px;
}
[dir=rtl] .bd-timeline-box::after {
    border-color: transparent var(--color-border) transparent transparent;
}
.bd-timeline-box::before {
    top: 25px;
    border-color: transparent transparent transparent var(--color-border);
    border-width: 11px;
}
[dir=rtl] .bd-timeline-box::before {
    border-color: transparent var(--color-border) transparent transparent;
}

.bd-timeline-right .bd-timeline-box::after {
    border-color: transparent var(--color-border) transparent transparent;
}
[dir=rtl] .bd-timeline-right .bd-timeline-box::after {
    border-color: transparent transparent transparent var(--color-border);
}
.bd-timeline-right .bd-timeline-box::before {
    border-color: transparent var(--color-border) transparent transparent;
}
[dir=rtl] .bd-timeline-right .bd-timeline-box::before {
    border-color: transparent transparent transparent var(--color-border);
}

.bd-timeline-icon-3 {
    position: relative;
    width: 40px;
    height: auto;
    float: left;
}
[dir=rtl] .bd-timeline-icon-3 {
    float: right;
}
.bd-timeline-icon-3 i {
    font-size: 25px;
    color: var(--color-primary);
}

.bd-timeline-text {
    position: relative;
    width: calc(100% - 40px);
    float: left;
}
[dir=rtl] .bd-timeline-text {
    float: right;
}
.bd-timeline-text h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--color-black);
}
[data-theme-mode=dark] .bd-timeline-text h3 {
    color: var(--color-black);
}
.bd-timeline-text p {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .bd-timeline-continue::after {
        inset-inline-start: 40px;
    }
    .bd-timeline-end,
    .bd-timeline-start,
    .bd-timeline-year,
    .bd-timeline-left,
    .bd-timeline-right .bd-timeline-date,
    .bd-timeline-right,
    .bd-timeline-left .bd-timeline-date,
    .bd-timeline-launch {
        text-align: left;
    }
    .bd-timeline-left .bd-timeline-date::after,
    .bd-timeline-right .bd-timeline-date::after {
        inset-inline-start: 47px;
    }
    .bd-timeline-box,
    .bd-timeline-right .bd-timeline-date,
    .bd-timeline-left .bd-timeline-date {
        margin-inline-start: 55px;
    }
    .bd-timeline-launch .bd-timeline-box {
        margin-inline-start: 0;
    }
    .bd-timeline-left .bd-timeline-box::after {
        inset-inline-start: -20px;
        border-color: transparent var(--color-white) transparent transparent;
    }
    .bd-timeline-left .bd-timeline-box::before {
        inset-inline-start: -22px;
        border-color: transparent var(--color-border) transparent transparent;
    }
    .bd-timeline-launch .bd-timeline-box::after,
    .bd-timeline-launch .bd-timeline-box::before {
        inset-inline-start: 30px;
        margin-inline-start: 0;
    }
}
.success {
    background: #29DA82 !important;
}

#bdTimeline .bd-timeline-item-4:after,
#bdTimeline .bd-timeline-item-4:before {
    content: "";
    display: block;
    width: 100%;
    clear: both;
}

#bdTimeline {
    width: 100%;
    margin: 30px auto;
    position: relative;
    padding: 0 20px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#bdTimeline:before {
    content: "";
    width: 3px;
    height: 100%;
    background: var(--color-primary);
    inset-inline-start: 50%;
    top: 0;
    position: absolute;
}

#bdTimeline:after {
    content: "";
    clear: both;
    display: table;
    width: 100%;
}

#bdTimeline .bd-timeline-item-4 {
    margin-bottom: 50px;
    position: relative;
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-icon-4 {
    background: var(--color-primary);
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    inset-inline-start: 50%;
    overflow: hidden;
    margin-inline-start: -23px;
    border-radius: 50%;
    display: inline-flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-icon-4 svg,
#bdTimeline .bd-timeline-item-4 .bd-timeline-icon-4 i {
    font-size: 24px;
    color: var(--color-white);
}
[data-theme-mode=dark] #bdTimeline .bd-timeline-item-4 .bd-timeline-icon-4 svg,
[data-theme-mode=dark] #bdTimeline .bd-timeline-item-4 .bd-timeline-icon-4 i {
    color: var(--color-black);
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-content-4 {
    width: 45%;
    background: var(--color-card-bg);
    padding: 20px;
    border-radius: 5px;
    transition: all 0.3s ease;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
[data-theme-mode=dark] #bdTimeline .bd-timeline-item-4 .bd-timeline-content-4 {
    box-shadow: rgba(75, 75, 75, 0.2) 0px 8px 24px;
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-content-4 h2 {
    padding: 15px;
    background: var(--color-primary);
    color: var(--color-white);
    margin: -20px -20px 0 -20px;
    font-weight: 300;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -ms-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    font-size: 22px;
}
[data-theme-mode=dark] #bdTimeline .bd-timeline-item-4 .bd-timeline-content-4 h2 {
    color: var(--color-black);
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-content-4 p {
    padding-top: 10px;
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-content-4:before {
    content: "";
    position: absolute;
    inset-inline-start: 45%;
    top: 20px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-inline-start: 7px solid var(--color-primary);
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-content-4.right {
    float: right;
}
[dir=rtl] #bdTimeline .bd-timeline-item-4 .bd-timeline-content-4.right {
    float: left;
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-content-4.right:before {
    content: "";
    inset-inline-end: 45%;
    inset-inline-start: inherit;
    border-inline-start: 0;
    border-inline-end: 7px solid var(--color-primary);
}

@media screen and (max-width: 768px) {
    #bdTimeline {
        margin: 30px;
        padding: 0px;
        width: 90%;
    }
    #bdTimeline:before {
        inset-inline-start: 0;
    }
    #bdTimeline .bd-timeline-item-4 .bd-timeline-content-4 {
        width: 90%;
        float: right;
    }
    [dir=rtl] #bdTimeline .bd-timeline-item-4 .bd-timeline-content-4 {
        float: left;
    }
    #bdTimeline .bd-timeline-item-4 .bd-timeline-content-4:before,
    #bdTimeline .bd-timeline-item-4 .bd-timeline-content-4.right:before {
        inset-inline-start: 10%;
        margin-inline-start: -6px;
        border-inline-start: 0;
        border-inline-end: 7px solid var(--color-primary);
    }
    #bdTimeline .bd-timeline-item-4 .bd-timeline-icon-4 {
        inset-inline-start: 0;
    }
}
/* Animation CSS */
/* icon animation */
.bd-timeline-icon-4.is-hidden {
    visibility: hidden;
}

.bd-timeline-icon-4.animate-it {
    visibility: visible;
    -webkit-animation: bounce-1 0.6s;
    -moz-animation: bounce-1 0.6s;
    animation: bounce-1 0.6s;
}

/* content block animation */
.bd-timeline-content-4.is-hidden {
    visibility: hidden;
}

.bd-timeline-content-4.animate-it {
    visibility: visible;
    -webkit-animation: bounce-2 0.6s;
    -moz-animation: bounce-2 0.6s;
    animation: bounce-2 0.6s;
}

@media only screen and (min-width: 769px) {
    /* Inverse bounce effect on even content blocks */
    .bd-timeline-content-4.right.animate-it {
        -webkit-animation: bounce-2-inverse 0.6s;
        -moz-animation: bounce-2-inverse 0.6s;
        animation: bounce-2-inverse 0.6s;
    }
}
@media only screen and (max-width: 768px) {
    /* Inverse bounce effect on all content blocks */
    .bd-timeline-content-4.animate-it,
    .bd-timeline-content-4.right.animate-it {
        animation: bounce-2-inverse 0.6s;
    }
}
/* ALL animation types called */
@-webkit-keyframes bounce-1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes bounce-1 {
    0% {
        opacity: 0;
        -moz-transform: scale(0.5);
    }
    60% {
        opacity: 1;
        -moz-transform: scale(1.2);
    }
    100% {
        -moz-transform: scale(1);
    }
}
@keyframes bounce-1 {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    60% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
@-webkit-keyframes bounce-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(20px);
    }
    100% {
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes bounce-2 {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100px);
    }
    60% {
        opacity: 1;
        -moz-transform: translateX(20px);
    }
    100% {
        -moz-transform: translateX(0);
    }
}
@keyframes bounce-2 {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    60% {
        opacity: 1;
        transform: translateX(20px);
    }
    100% {
        transform: translateX(0);
    }
}
@-webkit-keyframes bounce-2-inverse {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
    }
    100% {
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes bounce-2-inverse {
    0% {
        opacity: 0;
        -moz-transform: translateX(100px);
    }
    60% {
        opacity: 1;
        -moz-transform: translateX(-20px);
    }
    100% {
        -moz-transform: translateX(0);
    }
}
@keyframes bounce-2-inverse {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    60% {
        opacity: 1;
        transform: translateX(-20px);
    }
    100% {
        transform: translateX(0);
    }
}
/*----------------------------------------*/
/*  timeline end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.24 tooltip
/*----------------------------------------*/
.bd-tooltip-show {
    position: relative;
}
.bd-tooltip-show:hover .bd-tooltip {
    visibility: visible;
    opacity: 1;
    bottom: 45px;
}
.bd-tooltip-show:hover .bd-tooltip.bottom {
    bottom: auto;
    top: 45px;
}

.bd-tooltip {
    position: absolute;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    font-size: 12px;
    color: var(--color-white);
    background-color: var(--color-primary);
    padding: 5px 8px 5px 8px;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    transition: all 0.3s linear;
    width: max-content;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flexbox;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 6px;
}
.bd-tooltip::before {
    position: absolute;
    content: "";
    inset-inline-start: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid var(--color-primary);
    border-inline-start: 8px solid transparent;
    border-inline-end: 8px solid transparent;
}
.bd-tooltip.bottom {
    top: 100%;
    bottom: auto;
}
.bd-tooltip.bottom::before {
    top: -8px;
    bottom: auto;
    border-bottom: 8px solid var(--color-primary);
    border-top: none;
}

.tooltip {
    border-radius: 6px;
    z-index: 1080;
    display: block;
    font-style: normal;
    font-weight: var(--fw-normal);
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;
    font-size: 14px;
    word-wrap: break-word;
    opacity: 0;
    color: var(--color-white);
    background-color: var(--color-primary);
}

.tooltip.show {
    opacity: 1;
}

.tooltip .tooltip-arrow {
    display: block;
    width: 10px;
    height: 8px;
}

.tooltip .tooltip-arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}

.tooltip-inner {
    width: max-content;
    padding: 4px 8px 5px 8px;
    border-radius: 6px;
    text-align: center;
    color: var(--color-white);
    background-color: var(--color-primary);
}
[data-theme-mode=dark] .tooltip-inner {
    color: var(--color-black);
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,
.bs-tooltip-top .tooltip-arrow {
    bottom: -8px;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    top: -1px;
    border-width: 8px 5px 0;
    border-top-color: var(--color-primary);
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow,
.bs-tooltip-end .tooltip-arrow {
    inset-inline-start: -8px;
    width: 8px;
    height: 10px;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before {
    inset-inline-end: -1px;
    border-width: 5px 8px 5px 0;
    border-inline-end-color: var(--color-primary);
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow,
.bs-tooltip-bottom .tooltip-arrow {
    top: -8px;
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 5px 8px;
    border-bottom-color: var(--color-primary);
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow,
.bs-tooltip-start .tooltip-arrow {
    inset-inline-end: -8px;
    width: 8px;
    height: 10px;
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before {
    inset-inline-start: -1px;
    border-width: 5px 0 5px 8px;
    border-inline-start-color: var(--color-primary);
}

/*----------------------------------------*/
/*  tooltip end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.1 Announcement css
/*----------------------------------------*/
.announcement-list {
    height: 331px;
    margin-bottom: 15px;
}
.announcement-list.style-2 {
    height: 373px;
}
.announcement-item {
    padding: 16px 20px;
    display: flex;
    gap: 12px;
    border-bottom: 1px solid var(--color-border);
}
.announcement-content {
    flex: 1;
}

/*----------------------------------------*/
/*  announcement css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.2 app footer css
/*----------------------------------------*/
.app-footer-area {
    background-color: var(--color-card-bg);
    padding: 15px 0px;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease-in-out;
    z-index: 10;
    padding-inline-start: 280px;
    overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .app-footer-area {
        padding-inline-start: 0;
    }
}
@media (max-width:450px) {
    .app-footer-area {
        padding: 15px 15px;
    }
}

/*----------------------------------------*/
/*  app footer css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.3 app header css
/*----------------------------------------*/
.app-content-area {
    padding-inline-start: 260px;
    min-height: calc(100vh - 146px);
    margin-top: 93px;
    transition: all 0.3s ease-in-out;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
    .app-content-area {
        padding-inline-start: 0;
    }
}
@media (max-width: 575px) {
    .app-content-area {
        padding-inline-start: 0;
        margin-top: 90px;
    }
}
.app-content-wrap {
    width: 100%;
    padding: 0px 15px;
}
@media (max-width:450px) {
    .app-content-wrap {
        padding: 0px 5px;
    }
}

.app-header-area {
    background-color: var(--color-card-bg);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
    position: fixed;
    transition: all 0.3s ease-in-out;
    top: 0;
    z-index: 19;
    width: 100%;
    padding-inline-start: 260px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .app-header-area {
        padding-inline-start: 0px;
    }
}
[data-theme-mode=dark] .app-header-area {
    box-shadow: 0px 1px 2px rgba(255, 255, 255, 0.24), 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.app-header-inner {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 25px;
    padding: 0 25px;
    height: 70px;
    transition: all 0.3s ease-in-out;
}
@media (max-width: 575px) {
    .app-header-inner {
        height: 60px;
    }
}
@media (max-width:450px) {
    .app-header-inner {
        gap: 0 15px;
        padding: 0 15px;
    }
}
.app-header-left {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 0 15px;
}
.app-header-right {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 0 15px;
}
@media (max-width:450px) {
    .app-header-right {
        gap: 0 10px;
    }
}
.app-header-search {
    position: relative;
}
.app-header-search input {
    width: 100%;
    min-width: 300px;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
}
.app-header-search button {
    position: absolute;
    top: 50%;
    inset-inline-end: 10px;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--color-primary);
}
.app-header-search-modal {
    display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .app-header-search-modal {
        display: block;
    }
}
.app-header-ls-logo {
    display: none;
    width: 180px;
    max-width: 180px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
    .app-header-ls-logo {
        display: block;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .app-header-ls-logo {
        display: block;
        max-width: 150px;
        width: 150px;
    }
}
[data-theme-mode=dark] .app-header-ls-dark-logo {
    display: none;
}
.app-header-ls-light-logo {
    display: none;
}
[data-theme-mode=dark] .app-header-ls-light-logo {
    display: block;
}
.app-header-mobile-logo {
    width: 35px;
    display: none;
}
@media (max-width: 575px) {
    .app-header-mobile-logo {
        display: block;
    }
}
.app-header-mobile-logo img {
    width: 35px;
    height: 35px;
}
[data-theme-mode=dark] .app-header-dark-logo {
    display: none;
}
.app-header-light-logo {
    display: none;
}
[data-theme-mode=dark] .app-header-light-logo {
    display: block;
}
.app-header-user .dropdown-toggle::after {
    display: none;
}
.app-header-user .dropdown-menu {
    background-color: var(--color-white);
    box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
    color: var(--color-black);
    padding: 15px;
    width: 220px;
}
[data-theme-mode=dark] .app-header-user .dropdown-menu {
    color: var(--color-black);
}
.app-header-user .dropdown-menu.show {
    top: 15px !important;
}
.app-header-link .dropdown-toggle::after {
    display: none;
}
.app-header-link .dropdown-menu {
    box-shadow: none;
    border: none;
    padding: 0;
    width: 150px;
}
.app-header-link .dropdown-menu.show {
    top: 15px !important;
}
.app-header-link .dropdown-menu .dropdown-lang {
    font-size: 16px;
    font-weight: 400;
    padding: 8px 14px;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 0 10px;
    background-color: var(--gray-2);
    border-bottom: 1px solid var(--color-border);
    transition: all 0.3s ease-in-out;
    color: var(--color-black);
}
.app-header-link .dropdown-menu .dropdown-lang:hover {
    background-color: var(--gray-3);
}
.app-header-link .dropdown-menu .dropdown-lang img {
    width: 20px;
    height: 20px;
    border-radius: 100%;
}
.app-header-circle {
    width: 36px;
    height: 36px;
    color: var(--color-heading);
    background-color: var(--gray-3);
    border-radius: 100%;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
@media (max-width:450px) {
    .app-header-circle {
        width: 26px;
        height: 26px;
        font-size: 16px;
    }
}
.app-header-notification .dropdown-toggle::after {
    display: none;
}
.app-header-notification .dropdown-menu {
    box-shadow: none;
    border: none;
    padding: 0;
    width: 350px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
    background-color: var(--color-body-bg);
}
.app-header-notification .dropdown-menu.show {
    position: absolute !important;
    top: 15px !important;
}
.app-header-notification .dropdown-menu-header {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid var(--color-border);
}
.app-header-notification .dropdown-notifications-list {
    height: 380px;
    overflow: hidden;
    overflow-y: scroll;
}
.app-header-notification .dropdown-notifications-list-item {
    list-style: none;
    padding: 10px 15px;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-shrink: 0;
    flex-grow: 1;
    gap: 15px;
    border-bottom: 1px solid var(--color-border);
}
.app-header-notification .dropdown-notifications-list-item:hover .dropdown-notifications-archive {
    opacity: 1;
    visibility: visible;
}
.app-header-notification .dropdown-notifications-archive {
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}
.app-header-notification .dropdown-notifications-btn {
    padding: 10px 15px;
}

.sidebar-menu-bar {
    width: 20px;
    height: 18px;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    cursor: pointer;
}
.sidebar-menu-bar span {
    width: 100%;
    height: 2px;
    background: var(--color-heading);
    display: inline-block;
}
.sidebar-menu-bar span:nth-child(2) {
    margin-inline-start: -10px;
    transition: all 0.3s ease-in-out;
}
.sidebar-menu-bar:hover span:nth-child(2) {
    margin-inline-start: 0;
}

.app-sidebar.collapsed ~ .app-header {
    inset-inline-start: 0;
    width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .app-offcanvas-overlay.overlay-open {
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0px;
        inset-inline-start: 0px;
        inset-inline-end: 0px;
        bottom: 0px;
        z-index: 30;
    }
}

.app-sidebar.collapsed ~ .app-header-area {
    padding-inline-start: 0px;
}

.app-sidebar.collapsed ~ .app-footer-area {
    padding-inline-start: 0px;
}

.app-sidebar.collapsed ~ .app-content-area {
    margin-inline-start: -260px;
}

/* Header author css start */
.author {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    position: relative;
    gap: 0 10px;
}
.author-thumb {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 100%;
}
@media (max-width:450px) {
    .author-thumb {
        width: 26px;
        height: 26px;
        min-width: 26px;
    }
}
.author-thumb img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .author-name {
        display: none;
    }
}

.bd-user-info-list {
    font-size: 16px;
    color: var(--color-black);
    transition: all 0.3s ease-in-out;
    font-weight: var(--fw-regular);
}
[data-theme-mode=dark] .bd-user-info-list {
    color: var(--color-white);
}
.bd-user-info-list:not(:last-child) {
    margin-bottom: 5px;
}
.bd-user-info-list i {
    margin-inline-end: 12px;
}
.bd-user-info-list:hover {
    color: var(--color-primary);
}

/*----------------------------------------*/
/*  app header css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.4 app header css
/*----------------------------------------*/
[data-theme-mode=dark] .app-sidebar-dark-logo {
    display: none;
}

.app-sidebar-light-logo {
    display: none;
}
[data-theme-mode=dark] .app-sidebar-light-logo {
    display: block;
}

.app-sidebar {
    width: 260px;
    height: 100%;
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 103;
    transition: all 0.3s ease-in-out;
}
.app-sidebar-wrapper {
    margin-block-start: 70px;
    height: 100vh;
    position: relative;
    overflow: auto;
    background-color: var(--color-white);
    padding-bottom: 80px !important;
    border-inline-end: 1px solid var(--color-border);
    padding: 0 12px;
}
[data-theme-mode=dark] .app-sidebar-wrapper {
    background-color: var(--color-card-bg);
}
@media (max-width: 575px) {
    .app-sidebar-wrapper {
        margin-block-start: 0px;
    }
}
.app-sidebar-header {
    height: 71px;
    width: 260px;
    position: fixed;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    background-color: var(--color-white);
    z-index: 9;
    align-items: center;
    justify-content: start;
    padding: 15px 20px;
    transition: all 0.05s ease;
    border-bottom: 1px solid var(--color-border);
    border-inline-end: 1px solid var(--color-border);
}
[data-theme-mode=dark] .app-sidebar-header {
    background-color: var(--color-card-bg);
}
@media (max-width: 575px) {
    .app-sidebar-header {
        display: none;
    }
}
[data-theme-mode=dark] .app-sidebar-header .desktop-logo {
    display: none;
}
.app-sidebar-header .desktop-dark {
    display: none;
}
[data-theme-mode=dark] .app-sidebar-header .desktop-dark {
    display: block;
}
.app-sidebar .sidebar-menu.child1 .sidebar-menu-item:hover,
.app-sidebar .sidebar-menu.child2 .sidebar-menu-item:hover,
.app-sidebar .sidebar-menu.child3 .sidebar-menu-item:hover {
    color: var(--color-primary);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu.child1 .sidebar-menu-item:hover,
[data-theme-mode=dark] .app-sidebar .sidebar-menu.child2 .sidebar-menu-item:hover,
[data-theme-mode=dark] .app-sidebar .sidebar-menu.child3 .sidebar-menu-item:hover {
    color: var(--color-black);
}
.app-sidebar .sidebar-menu-category {
    color: var(--color-light);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 20px;
    white-space: nowrap;
    position: relative;
}
.app-sidebar .sidebar-menu-item {
    padding: 10px 15px;
    position: relative;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 14px;
    color: var(--color-menu);
    font-weight: 500;
    transition: all 0.3s ease-in-out;
    border-radius: 4px;
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item {
    color: var(--color-heading);
}
.app-sidebar .sidebar-menu-item.active {
    color: var(--color-primary);
    background-color: var(--primary-rgba-1);
}
.app-sidebar .sidebar-menu-item.active .sidebar-menu-label,
.app-sidebar .sidebar-menu-item.active .side-menu-angle {
    color: var(--color-primary);
}
.app-sidebar .sidebar-menu-item.active .side-menu-icon {
    color: var(--color-primary);
}
.app-sidebar .sidebar-menu-item.active .side-menu-icon svg * {
    fill: var(--color-primary);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item.active {
    color: var(--color-black);
    background-color: var(--primary-rgba-2);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item.active .sidebar-menu-label,
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item.active .side-menu-angle {
    color: var(--color-black);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item.active .side-menu-icon {
    color: var(--color-black);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item.active .side-menu-icon svg * {
    fill: var(--color-black);
}
.app-sidebar .sidebar-menu-item:hover {
    color: var(--color-primary);
    background-color: var(--primary-rgba-1);
}
.app-sidebar .sidebar-menu-item:hover .sidebar-menu-label,
.app-sidebar .sidebar-menu-item:hover .side-menu-angle {
    color: var(--color-primary);
}
.app-sidebar .sidebar-menu-item:hover .side-menu-icon {
    color: var(--color-primary);
}
.app-sidebar .sidebar-menu-item:hover .side-menu-icon svg * {
    fill: var(--color-primary);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item:hover {
    color: var(--color-black);
    background-color: var(--primary-rgba-2);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item:hover .sidebar-menu-label,
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item:hover .side-menu-angle {
    color: var(--color-black);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item:hover .side-menu-icon {
    color: var(--color-black);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item:hover .side-menu-icon svg * {
    fill: var(--color-black);
}
.app-sidebar .sidebar-menu.child1 .sidebar-menu-item, .app-sidebar .sidebar-menu.child2 .sidebar-menu-item, .app-sidebar .sidebar-menu.child3 .sidebar-menu-item {
    background-color: transparent !important;
}
.app-sidebar .sidebar-menu.child1 .sidebar-menu-item.active, .app-sidebar .sidebar-menu.child2 .sidebar-menu-item.active, .app-sidebar .sidebar-menu.child3 .sidebar-menu-item.active {
    background-color: transparent !important;
    color: var(--color-primary);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu.child1 .sidebar-menu-item.active, [data-theme-mode=dark] .app-sidebar .sidebar-menu.child2 .sidebar-menu-item.active, [data-theme-mode=dark] .app-sidebar .sidebar-menu.child3 .sidebar-menu-item.active {
    color: var(--color-black);
}
.app-sidebar .sidebar-menu.child1 .sidebar-menu-item.active .side-menu-angle, .app-sidebar .sidebar-menu.child2 .sidebar-menu-item.active .side-menu-angle, .app-sidebar .sidebar-menu.child3 .sidebar-menu-item.active .side-menu-angle {
    color: var(--color-primary);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu.child1 .sidebar-menu-item.active .side-menu-angle, [data-theme-mode=dark] .app-sidebar .sidebar-menu.child2 .sidebar-menu-item.active .side-menu-angle, [data-theme-mode=dark] .app-sidebar .sidebar-menu.child3 .sidebar-menu-item.active .side-menu-angle {
    color: var(--color-black);
}
.app-sidebar .sidebar-menu {
    padding: 0;
}
.app-sidebar .sidebar-menu.child1 .sidebar-menu-item, .app-sidebar .sidebar-menu.child2 .sidebar-menu-item, .app-sidebar .sidebar-menu.child3 .sidebar-menu-item {
    padding: 7px 15px;
}
.app-sidebar .sidebar-menu.child1 .sidebar-menu-item:before, .app-sidebar .sidebar-menu.child2 .sidebar-menu-item:before, .app-sidebar .sidebar-menu.child3 .sidebar-menu-item:before {
    position: absolute;
    content: "\f5dc";
    font-family: var(--ff-remixicon);
    font-size: 12px;
    inset-inline-start: -10px;
    opacity: 0.8;
}
[dir=rtl] .app-sidebar .sidebar-menu.child1 .sidebar-menu-item:before, [dir=rtl] .app-sidebar .sidebar-menu.child2 .sidebar-menu-item:before, [dir=rtl] .app-sidebar .sidebar-menu.child3 .sidebar-menu-item:before {
    content: "\f5d5";
}
.app-sidebar .sidebar-menu.child1 li, .app-sidebar .sidebar-menu.child2 li, .app-sidebar .sidebar-menu.child3 li {
    padding: 0;
    position: relative;
}
.app-sidebar .sidebar-menu.child1 li {
    padding-inline-start: 30px;
}
.app-sidebar .sidebar-menu.child2 li {
    padding-inline-start: 20px;
}
.app-sidebar .sidebar-menu.child3 li {
    padding-inline-start: 25px;
}
.app-sidebar .sidebar-menu-label {
    white-space: nowrap;
    position: relative;
    font-size: 14px;
    color: var(--color-menu);
    font-weight: var(--fw-regular);
    line-height: 1;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    text-transform: capitalize;
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-label {
    color: var(--color-heading);
}
.app-sidebar .side-menu-icon {
    margin-inline-end: 10px;
    line-height: 0;
    font-size: 14px;
    text-align: center;
    color: var(--color-primary);
    border-radius: 4px;
    line-height: 1;
}
.app-sidebar .side-menu-icon svg {
    width: 18px;
    height: 18px;
}
.app-sidebar .side-menu-icon svg * {
    fill: var(--color-menu);
    transition: all 0.3s ease-in-out;
}
[data-theme-mode=dark] .app-sidebar .side-menu-icon svg * {
    fill: var(--color-heading);
}
.app-sidebar .side-menu-angle {
    transform-origin: center;
    position: absolute;
    inset-inline-end: 10px;
    line-height: 1;
    font-size: 20px;
    color: var(--color-primary);
    transition: all 0.05s ease;
    opacity: 0.8;
}
[data-theme-mode=dark] .app-sidebar .side-menu-angle {
    color: var(--color-heading);
}
.app-sidebar.collapsed {
    inset-inline-start: -260px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .app-sidebar {
        inset-inline-start: -300px;
    }
}

.slide.has-sub .sidebar-menu {
    transform: translate(0, 0) !important;
    visibility: visible !important;
}

.nav ul li {
    list-style-type: none;
}

.nav > ul {
    padding-inline-start: 0px;
}

.sidebar-menu {
    display: none;
}

.slide.has-sub {
    display: grid;
}
.slide.has-sub.open > .sidebar-menu-item .side-menu-angle {
    transform: rotate(180deg);
}

@media (max-width: 991.98px) {
    .app-sidebar-main-menu {
        margin: 0 !important;
    }
}
.sidebar-left,
.sidebar-right {
    display: none;
}

.app-sidebar-main-menu > .slide.active .sidebar-menu .sidebar-menu-item:hover .side-menu-angle, .app-sidebar-main-menu > .slide:hover .sidebar-menu .sidebar-menu-item:hover .side-menu-angle {
    color: var(--color-primary);
}
[data-theme-mode=dark] .app-sidebar-main-menu > .slide.active .sidebar-menu .sidebar-menu-item:hover .side-menu-angle, [data-theme-mode=dark] .app-sidebar-main-menu > .slide:hover .sidebar-menu .sidebar-menu-item:hover .side-menu-angle {
    color: var(--color-black);
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .close_sidebar.app-sidebar {
        inset-inline-start: 0px;
    }
}

/*----------------------------------------*/
/*  app header css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.5 authentication css
/*----------------------------------------*/
.authentication-wrapper {
    display: flex;
    flex-basis: 100%;
    min-height: 100vh;
    width: 100%;
}
.authentication-wrapper.basic-authentication {
    align-items: center;
    justify-content: center;
}
.authentication-wrapper.cover-authentication {
    align-items: flex-start;
}
.authentication-wrapper.cover-authentication .authentication-inner {
    width: 100%;
    height: 100%;
    margin: auto 0;
}
.authentication-wrapper.cover-authentication .authentication-inner .authentication-image {
    width: 100%;
    height: 100vh;
    height: calc(100vh - 4rem);
    position: relative;
}
.authentication-wrapper.cover-authentication .authentication-inner .authentication-image::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 35%;
    inset-inline-start: 0;
    inset-block-end: -20px;
    background-color: var(--gray-4);
    z-index: -1;
    border-radius: 500px 300px 150px 0px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .authentication-wrapper.cover-authentication .authentication-inner .authentication-image::before {
        border-radius: 150px 150px 150px 0px;
    }
}

.authentication-inner .card {
    width: 400px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .authentication-inner .card {
        width: 400px;
        margin: 0 auto;
    }
}
@media (max-width:450px) {
    .authentication-inner .card {
        width: 95%;
    }
}

.authentication-logo {
    text-align: center;
    display: inline-block;
    margin-bottom: 15px;
}
.authentication-logo img {
    max-width: 160px;
}
.authentication-logo.logo-white img {
    display: none;
}
[data-theme-mode=dark] .authentication-logo.logo-white img {
    display: block;
}
[data-theme-mode=dark] .authentication-logo.logo-black img {
    display: none;
}

.coming-soon-form {
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: center;
    gap: 0 10px;
}
@media (max-width: 575px) {
    .coming-soon-form {
        flex-wrap: wrap;
    }
    .coming-soon-form button {
        width: 100%;
        margin-top: 10px;
    }
}
.coming-soon-form .form-control {
    width: 360px;
}

.countdown {
    margin-bottom: 30px;
}
.countdown-title {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 30px;
    color: var(--color-black);
}
@media (max-width: 575px) {
    .countdown-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
}
.countdown span {
    font-size: 50px;
    font-weight: 500;
    color: var(--color-primary);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .countdown span {
        font-size: 30px;
    }
}

.coming-soon .card {
    width: 100%;
}

.divider-wrapper {
    display: flex;
    position: relative;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
}
.divider-line {
    position: relative;
    background-image: linear-gradient(90deg, #46494D, rgba(33, 38, 45, 0));
    width: 100%;
    height: 1px;
    inset-inline-start: 0%;
    top: 0%;
    inset-inline-end: 0%;
    bottom: auto;
}
.divider-line.left-line {
    background-image: linear-gradient(-90deg, #46494D, rgba(33, 38, 45, 0));
}
.divider-title {
    position: relative;
    padding: 0 15px;
    text-align: center;
    font-size: 16px;
    color: var(--color-black);
}

.countdown-timer div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 80px;
    height: 80px;
    background-color: var(--color-white);
    box-shadow: var(--shadow);
    border-radius: 4px;
}
.countdown-timer div .time {
    font-size: 26px;
    font-weight: var(--fw-medium);
    color: var(--color-heading);
}
.countdown-timer div span {
    font-size: 18px;
    color: var(--color-body);
}

.authentication-error {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
}

/*----------------------------------------*/
/*  authentication css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.6 card css
/*----------------------------------------*/
.card {
    background-color: var(--color-card-bg);
    padding: 25px 25px !important;
    box-shadow: var(--shadow) !important;
    border-radius: 6px !important;
    position: relative !important;
    margin-bottom: 25px !important;
    border: none !important;
}
.card.custom-card {
    box-shadow: none !important;
}
.card.custom-card.bg-1 {
    background: linear-gradient(270deg, var(--primary-rgba-15) 33.18%, rgba(255, 255, 255, 0.15) 100%);
    border: 1px solid var(--color-primary) !important;
}
.card.custom-card.bg-2 {
    background: linear-gradient(270deg, var(--warning-rgba-15) 33.18%, rgba(255, 255, 255, 0.15) 100%);
    border: 1px solid var(--color-warning) !important;
}
.card.custom-card.bg-3 {
    background: linear-gradient(270deg, var(--danger-rgba-15) 33.18%, rgba(255, 255, 255, 0.15) 100%);
    border: 1px solid var(--color-danger) !important;
}
.card.custom-card.bg-4 {
    background: linear-gradient(270deg, var(--success-rgba-15) 33.18%, rgba(255, 255, 255, 0.15) 100%);
    border: 1px solid var(--color-success) !important;
}
.card.custom-card .card-shape {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
}
[dir=rtl] .card.custom-card .card-shape {
    transform: rotate(-90deg);
}
.card.custom-card .card-icon {
    padding: 10px 20px;
    border: 1px solid var(--white-3);
    border-radius: 4px;
}

.p-0 {
    padding: 0 0 !important;
}

.card-header {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid var(--color-border) !important;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center !important;
    position: relative !important;
    flex-wrap: wrap !important;
    gap: 25px !important;
    background-color: transparent;
}
.card-header.border-0 {
    border: 0 !important;
}

.card-title {
    color: var(--color-heading);
    margin-bottom: 0;
}

.card-body {
    padding: 0 0;
    color: var(--color-body);
}

.card-content {
    color: var(--color-body);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .card-column {
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 25px;
        overflow: hidden;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .mini-card-body {
        flex-direction: column;
        align-items: start;
    }
    .mini-card-body .avatar.avatar-xl {
        height: 50px;
        width: 50px;
        min-width: 50px;
    }
    .mini-card-body .avatar.avatar-xl .fs-42 {
        font-size: 30px;
    }
}

.card-footer {
    border-radius: 0 !important;
    padding: 0 !important;
    border-top: none !important;
    background-color: transparent !important;
}
.card-footer p {
    color: var(--color-text-muted);
}
.card-footer a {
    color: var(--color-primary);
}

.card-dropdown-icon {
    font-size: 15px;
    width: 36px;
    height: 36px;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flexbox;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    color: var(--color-body);
    background-color: var(--gray-2);
    transition: all 0.3s ease-in-out;
}
[data-theme-mode=dark] .card-dropdown-icon {
    background-color: var(--gray-5);
}
.card-dropdown-icon:hover {
    background-color: var(--gray-3);
}
.card-dropdown-icon.show {
    background-color: var(--gray-3);
}
.card-dropdown .dropdown-menu {
    background-color: var(--color-white);
    border: none;
    box-shadow: var(--shadow);
    color: var(--color-black);
    padding: 0 0;
    max-width: fit-content;
    z-index: 99;
}
.card-dropdown .dropdown-menu .dropdown-item {
    padding: 8px 15px;
    border-radius: 0;
    font-size: 14px;
    font-weight: var(--fw-medium);
    transition: all 0.3s ease-in-out;
}
.card-dropdown .dropdown-menu .dropdown-item:hover {
    background-color: var(--primary-rgba-15);
    color: var(--color-primary);
}
.card-dropdown .dropdown-menu .dropdown-item.active {
    background-color: var(--primary-rgba-15);
    color: var(--color-primary);
}
.card-dropdown-box {
    font-size: 13px;
    font-weight: var(--fw-medium);
    padding: 7.8px 20px;
    color: var(--color-body);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease-in-out;
}
.card-dropdown-box:hover {
    background-color: var(--gray-3);
    border-color: var(--gray-3);
}
.card-dropdown-box ~ .dropdown-menu.show {
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
}
.card-dropdown-box.square {
    width: 36px;
    height: 36px;
    padding: initial;
    justify-content: center;
}
.card-dropdown-box.square.small {
    width: 26px;
    height: 26px;
}

.card-carousel {
    background-color: var(--color-card-bg);
    box-shadow: var(--shadow);
    border-radius: 6px;
}

.card-slide-wrapper {
    border-radius: 6px;
}
.card-slide-top {
    position: absolute;
    top: 20px;
    inset-inline-start: 20px;
    z-index: 2;
}
.card-slide-thumb {
    position: relative;
    width: 100%;
    height: 484px;
    border-radius: 6px;
    padding: 80px 50px;
}
.card-slide-thumb::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 90px;
    inset-inline-start: 0px;
    bottom: 0px;
    border-radius: 0px 0px 6px 6px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 6px;
}
.card-slide-thumb img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: var(--color-card-bg);
}
.card-slide-bottom {
    position: absolute;
    bottom: 20px;
    inset-inline-start: 20px;
}
.card-slide-pagination.tranding {
    position: absolute;
    z-index: 1;
    inset-inline-end: 20px;
    bottom: 20px;
}

.card-img,
.card-img-top,
.card-video iframe {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.list-group-item {
    color: var(--color-black);
    border: var(--bs-list-group-border-width) solid var(--color-border);
    padding: 12px 16px;
    background-color: transparent !important;
}
.list-group-item .handle {
    font-size: 20px;
    cursor: pointer;
}

.list-group-item.active {
    z-index: 2;
    color: var(--color-black);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
[data-theme-mode=dark] .list-group-item.active {
    color: var(--color-black);
}

.trendingProduct {
    border-radius: 6px;
}

.page-title-box {
    padding: 10px 16px;
    background-color: var(--color-card-bg);
    box-shadow: var(--shadow) !important;
    margin-bottom: 25px;
    border-radius: 6px;
}

.lead-card {
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 16px;
}
.lead-card .call-details {
    padding: 15px 15px;
    color: var(--color-body);
    background-color: var(--gray-1);
    border-radius: 6px;
}

/* Email Card Base Styles */
.email-body {
    padding: 15px 15px;
    background-color: var(--gray-1);
    border-radius: 6px;
}
.email-body .email-content p {
    margin-bottom: 15px;
}
.email-body .email-highlight,
.email-body .email-cta,
.email-body .meeting-details {
    background: var(--gray-1);
    border-inline-start: 3px solid var(--color-info);
    padding: 12px 15px;
    margin: 15px 0;
    border-radius: 6px;
}
[data-theme-mode=dark] .email-body .email-highlight,
[data-theme-mode=dark] .email-body .email-cta,
[data-theme-mode=dark] .email-body .meeting-details {
    background: var(--gray-5);
    color: var(--custom-white);
}
.email-body .email-cta {
    border-inline-start-color: var(--color-success);
}
.email-body .meeting-details {
    border-inline-start-color: var(--color-teal);
}
.email-body .attachment-tag {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Task Card */
.task-card {
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 16px;
}
.task-card.overdue {
    border-inline-start: 3px solid var(--color-danger);
}
.task-card.completed {
    opacity: 0.8;
    background: var(--gray-1);
}
.task-card .checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}
.task-card .checklist-item.completed {
    color: #6b7280;
    text-decoration: line-through;
}
.task-card .document-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--gray-1);
    border-radius: 6px;
}
[data-theme-mode=dark] .task-card .document-preview {
    background: var(--gray-5);
    color: var(--custom-white);
}

/* File Card */
.file-card {
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 16px;
}

.task-list {
    height: 372px;
}

.task-item {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
}

.exp-timeline-item {
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 16px;
    display: flex;
    align-items: start;
    gap: 15px;
}
.exp-timeline-item .job-description {
    margin-bottom: 15px;
}

.edu-timeline-item {
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 16px;
}
.edu-timeline-item .edu-timeline-date {
    min-width: 85px;
}

.info-label {
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 5px;
}

.info-value {
    color: var(--color-heading);
    text-align: end;
    font-weight: var(--fw-medium);
}

.account-number {
    letter-spacing: 1px;
}
.account-number .btn-eye {
    background: transparent;
    border: none;
    color: #6c757d;
    padding: 0;
    font-size: 16px;
    cursor: pointer;
}
.account-number .btn-eye:hover {
    color: #0d6efd;
}

.paypal-card .paypal-header {
    background: var(--color-info);
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;
    margin-bottom: 10px;
}
.paypal-card .paypal-logo {
    height: 25px;
    width: auto;
}
.paypal-card .paypal-badge {
    background: var(--color-white);
    color: var(--color-info);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}
.paypal-card .paypal-item {
    display: flex;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--color-border);
}
.paypal-card .paypal-label {
    color: var(--color-body);
    font-size: 14px;
}
.paypal-card .paypal-value {
    color: var(--color-heading);
    text-align: end;
    font-weight: var(--fw-medium);
}
.paypal-card .paypal-footer {
    background: var(--gray-2);
    padding: 6px 15px;
    text-align: center;
    color: var(--color-body);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 4px;
}
.paypal-card .paypal-footer i {
    font-size: 16px;
    color: var(--color-success);
}

.login-access .info-group {
    margin-bottom: 10px;
}
.login-access .ip-address {
    color: var(--color-text-muted);
    font-size: 13px;
}
.login-access .password-display {
    letter-spacing: 2px;
}
.login-access .icon-btn {
    background: none;
    border: none;
    color: var(--color-light);
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 4px;
    transition: all 0.2s;
}
.login-access .icon-btn:hover {
    background: var(--gray-3);
    color: var(--color-primary);
}
.login-access .info-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.login-access .info-value span {
    color: var(--color-heading);
}
.login-access .access-footer {
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
}
.login-access .security-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--color-body);
}
.login-access .meter-bar {
    flex: 1;
    height: 6px;
    background: var(--gray-3);
    border-radius: 3px;
    overflow: hidden;
}
.login-access .meter-fill {
    height: 100%;
}
.login-access .meter-fill.high {
    background: var(--color-success);
    width: 85%;
}

.fullcalendar-events-activity li:not(:last-child) {
    margin-bottom: 15px;
}

.dropdown-menu {
    padding: 0 0;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    color: var(--color-heading);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: var(--fw-medium);
    transition: all 0.3s ease-in-out;
    border-radius: 0;
}
.dropdown-item:hover {
    background-color: var(--primary-rgba-15);
    color: var(--color-primary);
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--primary-rgba-15);
    color: var(--color-primary);
}

.blog-list {
    display: grid;
    grid-template-columns: 370px auto;
    gap: 25px;
    align-items: center;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 768px) and (max-width: 991px) {
    .blog-list {
        align-items: start;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .blog-list {
        grid-template-columns: auto;
    }
}

.search-icon-btn {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background-color: var(--gray-3);
    color: var(--color-black);
    border-radius: 0 6px 6px 0;
    font-size: 20px;
    transition: var(--transition);
}
.search-icon-btn:hover {
    background-color: var(--gray-4);
}

.widget-list ul li {
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.widget-list ul li a {
    color: var(--color-black);
    font-weight: 500;
}

.blockquote-primary {
    border-top: 5px solid;
    padding: 15px 15px;
    background-color: var(--primary-rgba-15);
}

.bd-example-row [class^=col],
.bd-example-cols [class^=col] > *,
.bd-example-cssgrid [class*=grid] > * {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: rgba(var(--slateblue-rgb), 0.15);
    border: 1px solid rgba(var(--slateblue-rgb), 0.3);
}

.token.tag {
    color: var(--color-danger);
}

.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: var(--color-info);
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: var(--color-danger);
}

.grid-showcase span {
    display: block;
    border: 1px solid var(--color-border);
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
    background-color: var(--color-white);
}

.animation-bg {
    width: 500px;
    margin: 0 auto;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .animation-bg {
        width: 450px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .animation-bg {
        width: 350px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .animation-bg {
        width: 100%;
    }
}
.animation-bg img {
    width: 100%;
    height: 100%;
}

/*----------------------------------------*/
/*  card css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.7 chat css
/*----------------------------------------*/
.app-chat-contacts-box {
    width: 380px;
    min-width: 380px;
    background-color: var(--color-white);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px 0px 0px 6px;
    border-inline-end: 1px solid var(--color-border);
}
@media (max-width: 575px) {
    .app-chat-contacts-box {
        width: 350px;
        min-width: 350px;
    }
}
.app-chat-header {
    padding: 10px 12px;
    width: 100%;
}
.app-chat-header .app-header-search input {
    min-width: 298px;
}
.app-chat-search {
    position: relative;
    width: 100%;
}
.app-chat-search button {
    position: absolute;
    top: 50%;
    inset-inline-end: 10px;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--color-primary);
}
.app-chat-contact .nav-pills {
    margin-bottom: 5px;
    justify-content: center;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.app-chat-contact .nav-link {
    padding: 10px 40px;
    border: none;
    background-color: transparent;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    color: var(--color-heading);
}
@media (max-width: 575px) {
    .app-chat-contact .nav-link {
        padding: 10px 30px;
    }
}
.app-chat-contact .nav-link:hover {
    background-color: transparent;
    color: var(--color-primary);
}
.app-chat-contact .nav-link:hover::before {
    transform: scaleX(1);
}
.app-chat-contact .nav-link.active {
    background-color: transparent;
    color: var(--color-primary);
}
.app-chat-contact .nav-link.active::before {
    transform: scaleX(1);
}
.app-chat-contact .nav-link::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    transform: scaleX(0);
    -webkit-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
    background-color: var(--color-primary);
    inset-inline-start: 0;
    bottom: -1px;
}
.app-chat-list {
    overflow: hidden;
    height: 642px;
    overflow-y: scroll;
}
.app-chat-list li {
    border-bottom: 1px solid var(--color-border);
    padding: 10px 12px 10px 12px;
    transition: var(--transition);
}
.app-chat-list li:last-child {
    border-bottom: none;
}
.app-chat-list li:hover {
    background-color: var(--gray-1);
}
.app-chat-main-area {
    width: 100%;
}
.app-chat-wrapper {
    position: relative;
    display: flex;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.app-chat-user {
    display: flex;
    align-items: center;
    position: relative;
    margin-inline-end: 10px;
}
.app-chat-main-header {
    background-color: var(--color-white);
    padding: 10px 12px;
    border-radius: 0 6px 0 0;
    border-top: 1px solid var(--color-border);
}
@media (max-width: 575px) {
    .app-chat-main-header h6 {
        display: none;
    }
}
.app-chat-day-label {
    text-align: center;
    margin-bottom: 15px;
}
.app-chat-day-label span {
    padding: 6px 10px;
    font-size: 12px;
    background-color: var(--primary-rgba-15);
    border-radius: 4px;
    color: var(--color-primary);
}
.app-chat-item-start {
    display: flex;
}
.app-chat-item-start .app-chat-messages div {
    background-color: var(--color-info);
    color: var(--color-white);
    border-start-start-radius: 0px;
    border-start-end-radius: 6px;
    border-end-end-radius: 6px;
    border-end-start-radius: 6px;
    font-weight: 500;
}
.app-chat-item-end {
    display: flex;
    justify-content: end;
    text-align: end;
}
.app-chat-item-end:last-child {
    padding-bottom: 25px;
}
.app-chat-item-end .app-chat-messages div {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-start-start-radius: 6px;
    border-start-end-radius: 0px;
    border-end-end-radius: 6px;
    border-end-start-radius: 6px;
    font-weight: 500;
}
.app-chat-history-body {
    height: 627px;
    overflow: hidden;
    overflow-y: scroll;
    padding: 15px 12px 15px 12px;
    background-color: var(--gray-2);
}
.app-chat-history-body li:not(:last-child) {
    margin-bottom: 10px;
}
.app-chat-messages div {
    margin-bottom: 10px;
    padding: 10px 12px;
    width: -moz-fit-content;
    width: fit-content;
}
.app-chat-messages div p {
    color: var(--color-white);
}
.app-chat-list-inner {
    display: flex;
    align-items: top;
    max-width: 75%;
    gap: 0 10px;
}
.app-chat-messages-time {
    display: block;
    line-height: 1;
    color: var(--color-text-muted);
}
.app-chat-read-time {
    font-size: 14px;
    color: var(--color-text-muted);
}
.app-chat-read-time i {
    margin-inline-end: 5px;
    color: var(--color-success);
}
.app-chat-main-footer {
    padding: 10px 12px;
    background-color: var(--color-white);
}

.status {
    position: absolute;
    bottom: 0px;
    inset-inline-end: 0;
    width: 12px;
    min-width: 12px;
    height: 12px;
    border-radius: 100%;
    border: 2px solid var(--color-white);
}
.status.online {
    background-color: var(--color-success);
}
.status.offline {
    background-color: var(--color-danger);
}
.status.busy {
    background-color: var(--color-warning);
}

.short-msg {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unread-msg {
    width: 20px;
    min-width: 20px;
    height: 20px;
    background-color: var(--color-info);
    display: inline-flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    border-radius: 100%;
    color: var(--color-white);
    font-size: 12px;
}

/*----------------------------------------*/
/*  chat css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.8 company css
/*----------------------------------------*/
.company-logo {
    width: 150px;
    min-width: 150px;
    height: 150px;
    margin: 0 auto;
    margin-bottom: 10px;
}
.company-logo img {
    width: 100%;
    height: 100%;
}
.company-info-list i {
    font-size: 14px;
    width: 30px;
    height: 30px;
    color: var(--color-body);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: var(--transition);
}
.company-info-list i:hover {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.company-info-list ul li {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 25px;
    flex-wrap: wrap;
    color: var(--color-body);
}
.company-info-list ul li:not(:last-child) {
    margin-bottom: 10px;
}
.company-info-list ul li:hover i {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/*----------------------------------------*/
/*  company css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.9 Ecommerce css
/*----------------------------------------*/
.app-ecommerce-slider {
    margin-bottom: 33px;
}
.app-ecommerce-slider .swiper {
    border-radius: 8px;
}
.app-ecommerce-slider img {
    border-radius: 8px;
    background-color: var(--color-body-bg);
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.app-ecommerce-slider-thumbs .swiper {
    border-radius: 6px;
}
.app-ecommerce-slider-thumbs .swiper-slide {
    cursor: pointer;
}
.app-ecommerce-slider-thumbs img {
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background-color: var(--color-white);
}
.app-ecommerce-slider-thumbs .swiper-slide-thumb-active img {
    border-color: var(--color-primary);
    background-color: var(--color-body-bg);
}
.app-ecommerce-slider-btn .ecommerce-button-next,
.app-ecommerce-slider-btn .ecommerce-button-prev {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black);
    background: var(--color-white);
    box-shadow: var(--shadow);
    position: absolute;
    inset-inline-start: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 26px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    transition: var(--transition);
    z-index: 9;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .app-ecommerce-slider-btn .ecommerce-button-next,
    .app-ecommerce-slider-btn .ecommerce-button-prev {
        inset-inline-start: 0;
    }
}
.app-ecommerce-slider-btn .ecommerce-button-next:hover,
.app-ecommerce-slider-btn .ecommerce-button-prev:hover {
    color: var(--color-white);
    background: var(--color-primary);
}
.app-ecommerce-slider-btn .ecommerce-button-next.swiper-button-disabled,
.app-ecommerce-slider-btn .ecommerce-button-prev.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.app-ecommerce-slider-btn .ecommerce-button-next {
    inset-inline-start: auto;
    inset-inline-end: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .app-ecommerce-slider-btn .ecommerce-button-next {
        inset-inline-end: 0;
    }
}

.product-colors-size .form-check {
    position: relative;
}
[dir=rtl] .product-colors-size .form-check {
    padding-inline-start: 1em;
}
.product-colors-size .form-check .form-check-input {
    float: left;
    margin-inline-start: -1.5em;
    border: none;
    position: relative;
    z-index: 5;
    cursor: pointer;
}
.product-colors-size .color-input {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.product-colors-size .color-input.form-check-input:checked {
    border: none;
    position: relative;
    box-shadow: none;
}
.product-colors-size .color-input.form-check-input:checked::before {
    position: absolute;
    content: "\ea5e";
    font-family: tabler-icons !important;
    color: var(--color-white);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 400;
}
.product-colors-size .form-check-input:checked[type=radio] {
    background-image: none;
}
.product-colors-size .form-check-input:focus {
    border: none;
    outline: 0;
    box-shadow: none;
}
.product-colors-size .size-check {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
}
.product-colors-size .size-check.form-check-input:checked {
    border: none;
    position: relative;
    box-shadow: none;
}
.product-colors-size .size-check.form-check-input:checked::before {
    position: absolute;
    content: "";
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 400;
    background-color: var(--color-danger);
    border-radius: 50%;
}
.product-colors-size .size {
    position: absolute;
    inset-inline-start: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    color: var(--custom-white);
    line-height: 1;
    z-index: 6;
    font-size: 12px;
    font-weight: var(--fw-medium);
}
[dir=rtl] .product-colors-size .size {
    inset-inline-start: auto;
    inset-inline-end: 50%;
}
.product-colors-size.small .color-input {
    width: 20px;
    height: 20px;
}
.product-colors-size.small .color-input.form-check-input:checked::before {
    font-size: 16px;
}

.product-quantity {
    display: flex;
    align-items: center;
    gap: 8px;
}
.product-quantity .increase,
.product-quantity .decrease {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: inline-flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: var(--color-primary);
    cursor: pointer;
    border: 1px solid var(--color-border);
    transition: all 0.3s ease-in-out;
}
.product-quantity .increase:hover,
.product-quantity .decrease:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.product-quantity .product-quantity-input[type=text] {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    border: 1px solid transparent;
    background-color: var(--primary-rgba-15);
    padding: 4px;
    color: var(--color-primary);
}

.product-review-rating-wrapper {
    display: grid;
    grid-template-columns: 170px auto;
    align-content: center;
}
@media (max-width: 575px) {
    .product-review-rating-wrapper {
        grid-template-columns: auto;
        justify-content: center;
        gap: 25px;
    }
}

.product-rating-box {
    border: 1.5px solid var(--color-border);
    width: 145px;
    height: 131px;
    text-align: center;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .product-rating-box {
        width: 110px;
    }
}
@media (max-width: 575px) {
    .product-rating-box {
        margin: 0 auto;
    }
}
.product-rating-box-number {
    font-size: 48px;
    line-height: 1;
    color: var(--color-black);
    font-weight: var(--fw-bold);
}
.product-rating-box-icon i {
    font-size: 13px;
    color: var(--color-rating);
}

.product-review-progress-bar {
    display: inline-flex;
    width: 100%;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
}
.product-review-progress-bar:not(:last-child) {
    margin-bottom: 5px;
}
.product-review-progress-bar .single-progress {
    margin-bottom: 0px;
    width: 100%;
}
.product-review-progress-bar .progress {
    border-radius: 0;
}
.product-review-progress-bar .progress-bar {
    border-radius: 0;
}
.product-review-text {
    color: var(--color-black);
    font-weight: var(--fw-medium);
    min-height: 10px;
}
.product-review-meta {
    min-width: 75px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.product-review-percent {
    color: var(--color-heading);
    font-weight: var(--fw-medium);
    width: 38px;
}
.product-review-number {
    color: var(--color-body-secondary);
    font-weight: var(--fw-medium);
}

.product-comment ul .children {
    margin-top: 25px;
    margin-inline-start: 50px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .product-comment ul .children {
        margin-inline-start: 30px;
    }
}
@media (max-width: 575px) {
    .product-comment ul .children {
        margin-inline-start: 0;
    }
}
.product-comment ul li {
    margin-bottom: 30px;
    list-style: none;
}
.product-comment ul li:last-child {
    margin-bottom: 0px;
}
.product-comment-box {
    padding: 15px 15px;
    border-radius: 4px;
    background-color: var(--color-white);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .product-comment-box {
        flex-direction: column;
        gap: 15px 0;
    }
}
.product-comment-info {
    flex: 0 0 auto;
}
.product-comment-avatar img {
    width: 100px;
    height: 100px;
    margin-inline-end: 20px;
    border-radius: 6px;
}
.product-comment-avatar.thumb-radius img {
    border-radius: 100%;
}
.product-comment-text {
    width: 100%;
}

/* Product card */
.product-card {
    background-color: var(--color-card-bg);
    box-shadow: var(--shadow);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
}
.product-card:hover .thumb-1 {
    visibility: hidden;
    opacity: 0;
}
.product-card:hover .thumb-2 {
    opacity: 1;
    visibility: visible;
}
.product-card:hover .product-action-btn li {
    transform: translateY(0);
    opacity: 1;
}
.product-thumbs {
    position: relative;
}
.product-thumbs img {
    width: 100%;
    height: auto;
    border-radius: 6px 6px 0 0;
    background-color: var(--color-card-bg);
}
.product-thumbs .thumb-1 {
    visibility: visible;
    transition: all 0.5s ease-in-out 0s;
    opacity: 1;
}
.product-thumbs .thumb-2 {
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    transition: all 0.5s ease-in-out 0s;
}
.product-badge {
    position: absolute;
    inset-inline-end: 10px;
    top: 10px;
}
.product-action-btn {
    text-align: center;
    padding: 0;
    margin: 0 auto;
    list-style: none;
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
}
.product-action-btn li {
    margin: 0 -2px;
    opacity: 0;
    display: inline-block;
    transform: translateY(60px);
    transition: all 0.3s ease 0.3s;
}
.product-action-btn li:nth-child(2) {
    transition: all 0.3s ease 0.2s;
}
.product-action-btn li:nth-child(3) {
    transition: all 0.3s ease 0.1s;
}
.product-action-btn li:nth-child(4) {
    transition: all 0.3s ease 0s;
}
.product-action-btn li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    color: var(--color-black);
    background-color: var(--gray-2);
    font-size: 16px;
    transition: var(--transition);
}
.product-action-btn li a:hover {
    color: var(--color-primary);
    background-color: var(--gray-3);
}
.product-content {
    background-color: var(--color-card-bg);
    padding: 15px;
    position: relative;
    box-shadow: var(--shadow);
}
[data-theme-mode=dark] .product-content {
    background-color: #0b092e;
}
.product-content .rating {
    list-style: none;
    padding: 0;
    margin: 0 0 5px;
}
.product-content .rating li {
    color: #ffd200;
    font-size: 13px;
    display: inline-block;
}
.product-content .rating li.disable {
    color: #dcdcdc;
}
.product-content .price {
    color: var(--color-primary);
    font-size: 18px;
    font-weight: 400;
}
.product-content .price span {
    color: #999;
    font-size: 14px;
    text-decoration: line-through;
    margin-inline-end: 6px;
}

/*----------------------------------------*/
/*  Ecommerce css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.10 Email css
/*----------------------------------------*/
.app-mail-wrapper {
    display: flex;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
}

.app-mail-sidebar {
    width: 320px;
    height: 756px;
    background-color: var(--color-white);
    padding: 15px 0;
    border-radius: 6px 0px 0px 6px;
    border-inline-end: 1px solid var(--color-border);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
    .app-mail-sidebar {
        width: 280px;
    }
}

.app-mail-compose {
    padding: 0 24px 15px 24px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 15px;
}

.app-mail-menu li {
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.app-mail-menu li a {
    color: var(--color-heading);
    transition: var(--transition);
}
.app-mail-menu li a.active {
    color: var(--color-primary);
}
.app-mail-menu li a:hover {
    color: var(--color-heading);
}

.app-mail-label-list a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-between;
    color: var(--color-body);
    font-weight: var(--fw-medium);
    padding: 6px 24px;
}

.app-mail-main-area {
    width: 100%;
}

.app-mail-main-header {
    padding: 13px 16px 13px 8px;
    border-radius: 0 6px 0 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    gap: 15px;
}
@media (max-width: 575px) {
    .app-mail-main-header {
        flex-direction: column;
        justify-content: start;
        align-items: start;
    }
}
.app-mail-main-header .input-group-text {
    border-color: var(--color-border);
    font-size: 14px;
    border-radius: 4px;
    background-color: transparent;
    color: var(--color-heading);
    letter-spacing: 0;
    border: none;
}
.app-mail-main-header .form-control {
    border: none;
}
.app-mail-main-header .form-control:focus {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
    color: var(--color-heading);
}

.app-mail-search-form .form-label {
    margin-bottom: 0px;
    min-width: 93px;
}

.app-mail-main-middle {
    padding: 8px 16px;
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px;
    border-bottom: 1px solid var(--color-border);
}
@media (max-width: 575px) {
    .app-mail-main-middle {
        display: none;
    }
}

.app-mail-list-body {
    height: 660px;
    overflow: hidden;
    overflow-y: scroll;
    padding-bottom: 15px;
    background-color: var(--color-white);
}

.email-intro {
    display: flex;
    gap: 10px;
    align-content: center;
    cursor: pointer;
}
@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .email-intro {
        flex-direction: column;
    }
}
@media (max-width: 575px) {
    .email-intro h6 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 200px;
    }
}
.email-intro p {
    width: 750px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .email-intro p {
        width: 590px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .email-intro p {
        width: 400px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .email-intro p {
        width: 400px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .email-intro p {
        width: 500px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .email-intro p {
        width: 310px;
    }
}
@media (max-width: 575px) {
    .email-intro p {
        width: 200px;
    }
}

.app-mail-meta {
    display: inline-flex;
    justify-content: end;
    width: 110px;
    min-width: 110px;
}
.app-mail-meta .date {
    color: var(--color-heading);
    font-weight: var(--fw-medium);
}

.app-mail-meta-action {
    display: none;
}

.mail-list-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition);
}
@media (max-width: 575px) {
    .mail-list-item .d-flex-between {
        align-items: start;
    }
}
.mail-list-item:hover {
    box-shadow: var(--shadow);
}
.mail-list-item:hover .app-mail-meta .date {
    display: none;
}
.mail-list-item:hover .app-mail-meta-action {
    display: block;
}
@media (max-width: 575px) {
    .mail-list-item .email-check,
    .mail-list-item .email-starred {
        display: none;
    }
}

.email-check {
    width: 15px;
    min-width: 15px;
}

.email-starred {
    width: 20px;
    min-width: 20px;
}

/* inbox */
.mail-inbox-body {
    padding: 15px 0;
}

.attachment ul {
    display: flex;
    gap: 10px;
}
.attachment ul li {
    width: 60px;
    height: 60px;
    border-radius: 6px;
}
.attachment ul li img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.inner-sidebar-toggle {
    display: none;
}
@media only screen and (max-width: 991px) {
    .inner-sidebar-toggle {
        display: block;
    }
}

@media only screen and (max-width: 991px) {
    .app-content-wrap .inner-sidebar-wrapper .inner-sidebar-main {
        position: absolute;
        top: 0;
        inset-inline-start: 0;
        opacity: 0;
        visibility: hidden;
        z-index: 10;
        transition: all 0.5s ease;
        box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3);
    }
}
@media only screen and (max-width: 991px) {
    .app-content-wrap .inner-sidebar-wrapper .inner-sidebar-main.open {
        visibility: visible;
        opacity: 1;
        z-index: 10;
    }
}
.email-sidebar-overlay {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.email-sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/*----------------------------------------*/
/*  Email css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.11 Holiday css
/*----------------------------------------*/
.holiday-card {
    background-color: var(--color-primary);
    padding: 25px 25px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    margin-bottom: 25px;
    text-align: center;
}

.birthday-card {
    text-align: center;
}

/*----------------------------------------*/
/*  Holiday css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.12 invoice css
/*----------------------------------------*/
.invoice-header {
    padding: 25px 25px;
    background-color: var(--color-body-bg);
    border-radius: 8px;
    margin-bottom: 25px;
}

.invoice-logo {
    width: 220px;
    min-width: 220px;
}
.invoice-logo img {
    width: 100%;
    height: 100%;
}
.invoice-logo .dark-logo {
    display: none;
}
[data-theme-mode=dark] .invoice-logo .light-logo {
    display: none;
}
[data-theme-mode=dark] .invoice-logo .dark-logo {
    display: block;
}

.invoice-input-item {
    display: grid;
    grid-template-columns: 150px auto;
    gap: 6px 30px;
    align-items: center;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
    .invoice-input-item {
        grid-template-columns: auto;
        text-align: start;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
    .invoice-input-item {
        text-align: start;
    }
}
@media (max-width: 575px) {
    .invoice-input-item {
        grid-template-columns: auto;
        text-align: start;
    }
}
.invoice-input-item .form-label {
    margin-bottom: 0px;
}

.invoice-table td {
    vertical-align: top;
}

/*----------------------------------------*/
/*  invoice css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.13 payslip css
/*----------------------------------------*/
.payslip-wrapper {
    position: relative;
    z-index: 5;
}
.payslip-wrapper .payslip-header {
    display: grid;
    align-items: start;
    justify-content: space-between;
    grid-template-columns: repeat(2, 1fr);
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: 25px;
    padding-bottom: 15px;
}
@media (max-width: 575px) {
    .payslip-wrapper .payslip-header {
        grid-template-columns: repeat(1, 1fr);
        gap: 25px;
    }
}
.payslip-wrapper .payslip-logo {
    width: 220px;
    min-width: 220px;
}
.payslip-wrapper .payslip-logo img {
    width: 100%;
    height: 100%;
}
.payslip-wrapper .payslip-logo .dark-logo {
    display: none;
}
[data-theme-mode=dark] .payslip-wrapper .payslip-logo .light-logo {
    display: none;
}
[data-theme-mode=dark] .payslip-wrapper .payslip-logo .dark-logo {
    display: block;
}
.payslip-wrapper .table {
    position: relative;
    z-index: 5;
}
.payslip-wrapper .total-row {
    background-color: var(--color-body-bg) !important;
}
.payslip-wrapper .total-row td {
    font-weight: var(--fw-sbold) !important;
    color: var(--gray-7);
    font-size: 15px;
}
.payslip-wrapper .table-total td,
.payslip-wrapper .table-total th {
    font-weight: var(--fw-sbold) !important;
    color: var(--gray-7);
    font-size: 15px;
}
.payslip-wrapper .signature-area {
    margin-top: 50px;
}
.payslip-wrapper .watermark {
    position: absolute;
    opacity: 0.03;
    font-size: 150px;
    color: var(--color-primary);
    transform: translate(-50%, -50%);
    inset-inline-start: 50%;
    top: 50%;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .payslip-wrapper .watermark {
        font-size: 120px;
        top: 45%;
    }
}
@media (max-width: 575px) {
    .payslip-wrapper .watermark {
        font-size: 90px;
        top: 45%;
    }
}

/*----------------------------------------*/
/*  payslip css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.14 project css
/*----------------------------------------*/
.discussion-list {
    list-style: none;
}
.discussion-item {
    padding: 15px 0;
    border-bottom: 1px solid var(--color-border);
}
.discussion-item a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition);
}
.discussion-item a:hover {
    text-decoration: underline;
}

.milestone-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}
.milestone-item p {
    margin: 0;
    flex-grow: 1;
}
.milestone-icon {
    font-size: 20px;
    color: var(--color-primary);
    margin-inline-end: 10px;
}
.milestone-date {
    color: var(--color-light);
    font-weight: var(--fw-medium);
}

/*----------------------------------------*/
/*  project css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.15 seller css
/*----------------------------------------*/
.sellers-card {
    background-color: var(--color-white);
    box-shadow: var(--shadow);
    padding-top: 25px;
    margin-bottom: 25px;
    position: relative;
}
.sellers-card .sellers-info {
    padding-inline-start: 25px;
    padding-inline-end: 25px;
}

.vendor-box-wrap {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    gap: 20px;
    padding-bottom: 15px;
}

.vendor-box {
    min-width: 350px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    border-radius: 6px;
}
@media (max-width:450px) {
    .vendor-box {
        min-width: 310px;
    }
}

.vendor-content {
    padding: 20px 20px 0 20px;
    color: var(--color-body);
}

.vendor-thumb img {
    max-width: 48px;
    border-radius: 50%;
}

/*----------------------------------------*/
/*  seller css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.16 settings css
/*----------------------------------------*/
.bd-theme-settings-area {
    position: fixed;
    top: 50%;
    right: 0px;
    width: 240px;
    background-color: #FFF;
    box-shadow: var(--shadow);
    border: 1px solid #000;
    -webkit-transform: translateY(-50%) translateX(100%);
    -moz-transform: translateY(-50%) translateX(100%);
    -ms-transform: translateY(-50%) translateX(100%);
    -o-transform: translateY(-50%) translateX(100%);
    transform: translateY(-50%) translateX(100%);
    z-index: 991;
    border-bottom-right-radius: 4px;
}
[dir=rtl] .bd-theme-settings-area {
    -webkit-transform: translateY(-50%) translateX(-100%);
    -moz-transform: translateY(-50%) translateX(-100%);
    -ms-transform: translateY(-50%) translateX(-100%);
    -o-transform: translateY(-50%) translateX(-100%);
    transform: translateY(-50%) translateX(-100%);
    left: 0px;
    right: auto;
}
.bd-theme-settings-area.settings-opened {
    -webkit-transform: translateY(-50%) translateX(0%);
    -moz-transform: translateY(-50%) translateX(0%);
    -ms-transform: translateY(-50%) translateX(0%);
    -o-transform: translateY(-50%) translateX(0%);
    transform: translateY(-50%) translateX(0%);
}

.bd-theme-wrapper {
    padding: 20px 30px 30px;
}

.bd-theme-header-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #000;
}

.bd-theme-settings-open {
    position: absolute;
    top: -1px;
    inset-inline-end: 100%;
}

.bd-theme-settings-open button {
    background-color: #FFF;
    border: 1px solid #000;
    border-inline-end: 0;
    width: 36px;
    height: 36px;
    text-align: center;
    font-size: 18px;
    color: #000;
    position: relative;
    border-start-start-radius: 4px;
    border-bottom-left-radius: 4px;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bd-theme-settings-gear {
    display: inline-block;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

.bd-theme-settings-close {
    display: inline-block;
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
}
[dir=rtl] .bd-theme-settings-close {
    inset-inline-start: 10%;
}

.bd-theme-settings-area.settings-opened .bd-theme-settings-gear {
    opacity: 0;
}

.bd-theme-settings-area.settings-opened .bd-theme-settings-close {
    opacity: 1;
}

.theme-switcher-radio .form-check-label,
.direction-switcher .form-check-label {
    color: #000;
}

/*----------------------------------------*/
/*  settings css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.1 apexcharts css
/*----------------------------------------*/
#donut-pattern .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label,
#donut-pattern .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value {
    fill: var(--color-body) !important;
}

#radialbar-multiple .apexcharts-radialbar .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
    fill: var(--color-body);
}

.apexcharts-menu-item {
    font-size: 11px !important;
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    color: var(--color-body) !important;
    border-radius: 0.25rem !important;
    background: var(--color-white) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.05) !important;
}

.apexcharts-xaxistooltip-bottom:before {
    border-bottom-color: var(--color-border) !important;
}

.apexcharts-yaxistooltip-left:before {
    border-inline-start-color: var(--color-border) !important;
}

#marketCap .apexcharts-canvas line {
    stroke: var(--color-border);
}

.apexcharts-legend {
    padding: 0 1.25rem !important;
}

.apexcharts-tooltip {
    box-shadow: none !important;
}

.apexcharts-tooltip-marker {
    margin-inline-end: 0.625rem;
}

.apexcharts-tooltip.apexcharts-theme-light {
    border: 1px solid var(--color-border) !important;
    background: var(--color-white) !important;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--color-white) !important;
    border-block-end: 1px solid var(--color-border) !important;
}

.apexcharts-xaxis line,
.apexcharts-grid-borders line {
    stroke: var(--color-border);
}

.apexcharts-radialbar-track.apexcharts-track path {
    stroke: rgb(var(--light-rgb));
}

.apexcharts-selection-rect {
    fill: var(--color-black);
}

.apexcharts-menu {
    background: var(--color-white) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0.3rem !important;
}

.apexcharts-menu-item {
    padding: 6px !important;
}

.apexcharts-theme-light .apexcharts-menu-item:hover {
    background: rgb(var(--light-rgb)) !important;
}

.apexcharts-inner.apexcharts-graphical line.apexcharts-xaxis-tick {
    stroke: transparent !important;
}

#column-rotated-labels .apexcharts-xaxis-texts-g {
    transform: translateY(2.5rem);
}

#chart-year,
#chart-quarter {
    background: var(--color-white) !important;
    border: 1px solid var(--color-border) !important;
}

.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series .apexcharts-bar-area {
    stroke: transparent !important;
}

.apexcharts-treemap .apexcharts-series.apexcharts-treemap-series rect {
    stroke: var(--color-white) !important;
}

.apexcharts-series.apexcharts-pie-series .apexcharts-pie-area {
    stroke: var(--color-white) !important;
}

.apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value {
    fill: var(--color-body);
}

.apexcharts-radialbar-hollow {
    fill: var(--color-white);
}

.apexcharts-radar-series.apexcharts-plot-series polygon,
.apexcharts-radar-series.apexcharts-plot-series line {
    stroke: var(--color-border);
}

.apexcharts-pie line,
.apexcharts-pie circle {
    stroke: var(--color-border);
}

.apexcharts-pie text {
    fill: #fff !important;
}

.apexcharts-canvas .apexcharts-toolbar {
    z-index: 1;
}

.apexcharts-subtitle-text {
    fill: var(--color-text-muted);
}

#polararea-basic .apexcharts-pie text {
    fill: var(--color-black) !important;
}

.apexcharts-pie .apexcharts-datalabels rect {
    fill: transparent;
}

[dir=rtl] .apexcharts-canvas {
    direction: ltr;
}

.apexcharts-boxPlot-area {
    stroke: var(--color-body) !important;
}

.apexcharts-gridline {
    stroke: var(--color-border);
}

.apexcharts-legend-text {
    font-family: var(--ff-body) !important;
    font-weight: 500 !important;
    color: var(--color-body) !important;
}

.apexcharts-radialbar-track.apexcharts-track path {
    stroke: var(--gray-3);
}

#taskOverview .apexcharts-datalabel,
#taskOverview .apexcharts-datalabel-label,
#taskOverview .apexcharts-datalabel-value,
#taskOverview .apexcharts-datalabels,
#taskOverview .apexcharts-pie-label {
    fill: var(--color-heading) !important;
}

#taskOverview .apexcharts-datalabel,
#taskOverview .apexcharts-datalabel-label,
#taskOverview .apexcharts-datalabel-value,
#taskOverview .apexcharts-datalabels,
#taskOverview .apexcharts-pie-label {
    fill: var(--color-heading) !important;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-white) !important;
    color: var(--color-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.apexcharts-tooltip.apexcharts-theme-light {
    border: 1px solid var(--color-border) !important;
    background: rgba(255, 255, 255, 0.96) !important;
}

.apexcharts-tooltip.apexcharts-theme-dark {
    border: 1px solid var(--color-border) !important;
    background: rgba(255, 255, 255, 0.96) !important;
}

.apexcharts-legend {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    overflow: hidden !important;
    padding: 0 10px;
}

[data-theme-mode=dark] .apexcharts-menu {
    background: var(--color-body) !important;
    border-color: var(--color-border) !important;
}

.apexcharts-theme-light .apexcharts-menu-item:hover {
    color: var(--color-white) !important;
    background-color: rgba(108, 95, 252, 0.15) !important;
}

/*----------------------------------------*/
/*  apexcharts css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.2 dropzone css
/*----------------------------------------*/
.dropzone {
    border: 2px dashed var(--color-border) !important;
    background-color: transparent !important;
}

.dropzone .dz-message .dz-button {
    font-size: 20px !important;
    color: var(--color-body) !important;
}

.dropzone .dz-preview {
    border-radius: 16px;
    z-index: 5;
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark,
.dropzone .dz-preview .dz-progress {
    z-index: 10 !important;
}

/*----------------------------------------*/
/*  dropzone css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.3 filepond css
/*----------------------------------------*/
.filepond--drop-label {
    color: var(--color-body) !important;
    border-radius: 6px !important;
    border: 2px dashed var(--color-border);
}

.filepond--credits {
    display: none;
}

.filepond--panel-root {
    background-color: var(--color-white) !important;
}

.filepond--drop-label.filepond--drop-label label {
    padding: 10px 15px !important;
    font-size: 14px;
}

.filepond--root {
    margin-block-end: 0 !important;
}

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

.single-fileupload {
    width: 128px !important;
    height: 128px !important;
    margin: 0 auto !important;
}

.filepond--file-action-button.filepond--file-action-button {
    font-size: 18px !important;
    width: 30px !important;
    height: 30px !important;
}

.filepond--file-info .filepond--file-info-main {
    font-size: 18px !important;
}

.filepond--file-info .filepond--file-info-sub {
    font-size: 16px !important;
}

.filepond--file-info {
    margin-inline-start: 10px !important;
    margin-inline-end: 10px !important;
}

.filepond--list {
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    width: 100% !important;
}

/*----------------------------------------*/
/*  filepond css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.4 flatpickr css
/*----------------------------------------*/
.flatpickr-months,
.flatpickr-weekdays {
    background-color: var(--primary-rgba-1) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    border-radius: 0.25rem !important;
    border: 1px dashed var(--primary-rgba-3) !important;
}

.flatpickr-months .flatpickr-month {
    color: var(--color-primary) !important;
    fill: var(--color-primary) !important;
}

.flatpickr-monthDropdown-months,
.numInput {
    color: var(--color-primary) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    inset-block-start: 0 !important;
    padding-block-start: 0.313rem !important;
    padding-inline: 0.313rem !important;
    padding-block-end: 0 !important;
    color: var(--color-primary) !important;
    fill: var(--color-primary) !important;
}

span.flatpickr-weekday {
    color: var(--primary-rgba-8) !important;
    font-weight: 700 !important;
}

.flatpickr-day {
    border-radius: 6px;
}

.flatpickr-day.today {
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: #fff !important;
}

.flatpickr-calendar.hasTime .flatpickr-time {
    border-top: 1px solid var(--color-border) !important;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
    background: var(--gray-3) !important;
    border-color: var(--color-border) !important;
}

.flatpickr-day.nextMonthDay,
.flatpickr-day.prevMonthDay {
    opacity: 0.5 !important;
}

/*----------------------------------------*/
/*  flatpickr css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.5 Full Calendar css
/*----------------------------------------*/
#external-events .fc-event {
    cursor: move;
    padding: 7.8px 20px;
    font-size: 14px;
    border-radius: 6px;
}

#calendar-container {
    position: relative;
    z-index: 1;
}

.fc-v-event .fc-event-main {
    color: var(--color-primary);
}

.fc-event-selected,
.fc-event:focus {
    box-shadow: none !important;
}

.fc-daygrid-event {
    padding: 4px;
}
.fc-daygrid-event .fc-event-title {
    font-size: 13px;
    font-weight: 300;
}

.fc-h-event.bg-primary-transparent .fc-event-title,
.fc-h-event.bg-primary-transparent .fc-event-time {
    color: #4F46E5;
}
.fc-h-event.bg-secondary-transparent .fc-event-title,
.fc-h-event.bg-secondary-transparent .fc-event-time {
    color: #FEBB7B;
}
.fc-h-event.bg-warning-transparent .fc-event-title,
.fc-h-event.bg-warning-transparent .fc-event-time {
    color: #FF830F;
}
.fc-h-event.bg-info-transparent .fc-event-title,
.fc-h-event.bg-info-transparent .fc-event-time {
    color: #1493FF;
}
.fc-h-event.bg-success-transparent .fc-event-title,
.fc-h-event.bg-success-transparent .fc-event-time {
    color: #29DA82;
}
.fc-h-event.bg-danger-transparent .fc-event-title,
.fc-h-event.bg-danger-transparent .fc-event-time {
    color: #E63232;
}

.fc-h-event {
    background-color: var(--primary-rgba-1);
}
.fc-h-event .fc-event-title {
    color: #4F46E5;
}

.fc-theme-standard .fc-scrollgrid.fc-scrollgrid-liquid {
    border: 0px !important;
    border-top: 1px solid var(--color-border) !important;
}

.fc .fc-scrollgrid-section-footer > *,
.fc .fc-scrollgrid-section-header > * {
    border-bottom-width: 0 !important;
}

.fc-daygrid-block-event .fc-event-time,
.fc-daygrid-block-event .fc-event-title {
    padding: 0 4px !important;
}

.fc .fc-button-primary {
    background-color: #4F46E5 !important;
    border-color: #4F46E5 !important;
}

.fc .fc-non-business {
    background: var(--color-white) !important;
}

.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    color: #fff;
    background-color: #4F46E5;
    border-color: #4F46E5;
    opacity: 0.9;
}

.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus,
.fc .fc-button-primary:not(:disabled):active:focus {
    box-shadow: none !important;
}

.fc-theme-standard td,
.fc-theme-standard th {
    border: 1px solid var(--color-border) !important;
    border-top: 0px !important;
}

.fc-list-table td,
.fc-list-table th {
    border-inline-start: 0 !important;
    border-inline-end: 0 !important;
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: var(--primary-rgba-1) !important;
}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    color: var(--color-primary);
}

.fc-theme-standard .fc-list {
    border: 1px solid var(--color-border) !important;
}

.fc .fc-list-event:hover td {
    background-color: #C8C8C8 !important;
}

.fc-timegrid-event-harness-inset .fc-timegrid-event,
.fc-timegrid-event.fc-event-mirror,
.fc-timegrid-more-link {
    box-shadow: none !important;
}

.fc-theme-standard .fc-list-day-cushion {
    background-color: #C8C8C8 !important;
}

.fc-theme-standard .fc-scrollgrid {
    border: 1px solid var(--color-border) !important;
}

.fc-theme-bootstrap5 .fc-list,
.fc-theme-bootstrap5 .fc-scrollgrid,
.fc-theme-bootstrap5 td,
.fc-theme-bootstrap5 th {
    border: 1px solid var(--color-border) !important;
}

@media (max-width: 420px) {
    .fc-scroller.fc-scroller-liquid {
        overflow: scroll !important;
    }
}
@media (max-width: 380px) {
    .fc .fc-daygrid-day-bottom {
        font-size: 12px !important;
        padding: 0px 3px 0 !important;
    }
    .fc .fc-daygrid-more-link {
        z-index: 99 !important;
    }
}
@media (max-width: 767.98px) {
    .fc .fc-toolbar {
        display: block !important;
    }
    .fc-toolbar-chunk {
        margin-block-start: 8px;
    }
}
.fc-daygrid-block-event {
    color: #fff !important;
    border: 0 !important;
}
.fc-daygrid-block-event .fc-list-event-dot {
    border-color: #fff !important;
}
.fc-daygrid-block-event:hover {
    color: #000 !important;
}
.fc-daygrid-block-event:hover .fc-list-event-dot {
    border-color: #000 !important;
}

.fc-event-time {
    color: var(--color-primary);
}

.fc .fc-daygrid-day-number {
    font-size: 16px;
    color: var(--color-heading);
    font-weight: var(--fw-medium);
}

.fc-daygrid-more-link.fc-more-link {
    color: var(--color-black);
}

/*----------------------------------------*/
/*  Full Calendar css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.6 intl-tel-input css
/*----------------------------------------*/
@media (min-width: 367px) {
    .telephone-input-btn {
        margin-inline-start: 8px;
    }
}
@media (max-width: 366.98px) {
    .telephone-input-btn {
        margin-block-start: 8px;
    }
}
.hide {
    display: none;
}

input.error {
    border: 1px solid var(--color-danger);
}

#error-msg {
    color: var(--color-danger);
}

#valid-msg {
    color: var(--color-success);
}

.iti__search-input:focus-visible {
    outline: none;
}

.iti__search-input {
    background-color: var(--color-white) !important;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: var(--fw-regular);
    line-height: 22px;
    color: var(--color-heading);
}

.iti__search-input + .iti__country-list {
    border-top: 1px solid var(--color-border) !important;
}

.iti--inline-dropdown .iti__dropdown-content {
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow) !important;
}

.iti__dropdown-content {
    background-color: var(--color-white) !important;
}

.iti__country.iti__highlight {
    background-color: var(--primary-rgba-1) !important;
}

.iti--show-selected-dial-code .iti__selected-flag {
    background-color: var(--color-light) !important;
}

.iti__selected-country-primary {
    background: var(--gray-2);
    padding: 0.5rem 1.5rem !important;
    border-radius: 6px 0px 0px 6px;
}

/*----------------------------------------*/
/*  intl-tel-input css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.7 nice-select css
/*----------------------------------------*/
.nice-select {
    -webkit-tap-highlight-color: transparent;
    color: var(--color-white);
    background-color: transparent;
    border-radius: 6px;
    border: solid 1px var(--color-border);
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 16px;
    font-weight: normal;
    height: 50px;
    line-height: 50px;
    outline: none;
    padding-inline-start: 25px;
    padding-inline-end: 44px;
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto;
}
[data-theme-mode=dark] .nice-select {
    color: var(--color-black);
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
    border-color: 0;
}

.nice-select:after {
    display: block;
    height: auto;
    pointer-events: none;
    position: absolute;
    inset-inline-end: 20px;
    top: 50%;
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    content: "\e905";
    font-family: var(--ff-remixicon);
    font-size: 18px;
    transform: translateY(-50%);
    margin-top: 0;
    height: auto;
    width: auto;
    color: var(--color-white);
    transition: 0.3s;
}
[data-theme-mode=dark] .nice-select:after {
    color: var(--color-black);
}

.nice-select.open:after {
    -webkit-transform: translateY(-50%) rotate(-180deg);
    -moz-transform: translateY(-50%) rotate(-180deg);
    -ms-transform: translateY(-50%) rotate(-180deg);
    -o-transform: translateY(-50%) rotate(-180deg);
    transform: translateY(-50%) rotate(-180deg);
}

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    width: 100%;
}

.df-input-field .nice-select.open .list {
    width: 100%;
}

.nice-select.disabled {
    border-color: var(--color-text-muted);
    color: var(--color-text-muted);
    pointer-events: none;
}

.nice-select.disabled:after {
    border-color: var(--color-text-muted);
}

.nice-select.wide {
    width: 100%;
}

.nice-select.wide .list {
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
}

.nice-select.right {
    float: right;
}

.nice-select.right .list {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px;
}

.nice-select.small:after {
    height: 4px;
    width: 4px;
}

.nice-select.small .option {
    line-height: 34px;
    min-height: 34px;
}

.nice-select .list {
    color: var(--color-white);
    background-color: var(--color-bg-primary);
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 0px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 101%;
    inset-inline-start: 0;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9;
}
[data-theme-mode=dark] .nice-select .list {
    color: var(--color-black);
}

.nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important;
}

.nice-select .option {
    cursor: pointer;
    font-weight: var(--fw-regular);
    list-style: none;
    line-height: 26px;
    min-height: 26px;
    outline: none;
    padding-inline-start: 10px;
    padding-inline-end: 10px;
    margin-inline-start: 5px;
    margin-inline-end: 5px;
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    color: var(--color-white);
}
[data-theme-mode=dark] .nice-select .option {
    color: var(--color-black);
}
.nice-select .option:hover {
    color: var(--color-primary);
}
.nice-select .option:first-child {
    margin-top: 5px;
}
.nice-select .option:last-child {
    margin-bottom: 5px;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: transparent;
}

.nice-select .option.selected {
    font-weight: var(--fw-regular);
}

.nice-select .option.disabled {
    background-color: transparent;
    color: var(--color-text-muted);
    cursor: default;
}

.no-csspointerevents .nice-select .list {
    display: none;
}

.no-csspointerevents .nice-select.open .list {
    display: block;
}

/*----------------------------------------*/
/*  nice-select css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.8 nouislider css
/*----------------------------------------*/
.noUi-horizontal .noUi-handle {
    width: 16px !important;
    height: 16px !important;
    inset-inline-end: -1px !important;
    top: -6px !important;
}

.noUi-handle:after,
.noUi-handle:before {
    height: 6px !important;
    width: 1px !important;
    inset-inline-start: 5px !important;
    top: 4px !important;
}

.noUi-handle:after {
    inset-inline-start: 8px !important;
}

.noUi-horizontal {
    height: 6px !important;
}

.noUi-vertical {
    width: 6px !important;
}

.noUi-vertical .noUi-handle {
    width: 16px !important;
    height: 16px !important;
}

.noUi-target {
    background: var(--color-border) !important;
}

.noUi-handle {
    border: 1px solid var(--color-border) !important;
    background: var(--color-white) !important;
    box-shadow: var(--shadow) !important;
}

.noUi-handle:after,
.noUi-handle:before {
    background: var(--color-black) !important;
}

.noUi-marker {
    position: absolute;
    background: var(--color-border) !important;
}

.noUi-tooltip {
    border: 1px solid var(--color-border) !important;
    border-radius: 4px !important;
    background: var(--color-white) !important;
    color: var(--color-body) !important;
    padding: 4px 12px !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

#slider-fit {
    padding: 0 16px;
}

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

.noUi-vertical .noUi-handle {
    bottom: -5px !important;
    inset-inline-end: -6px;
}

#secondary-colored-slider .noUi-connect {
    background-color: var(--color-secondary) !important;
}

#warning-colored-slider .noUi-connect {
    background-color: var(--color-warning) !important;
}

#info-colored-slider .noUi-connect {
    background-color: var(--color-info) !important;
}

#success-colored-slider .noUi-connect {
    background-color: var(--color-success) !important;
}

#danger-colored-slider .noUi-connect {
    background-color: var(--color-danger) !important;
}

#purple-colored-slider .noUi-connect {
    background-color: var(--color-purple) !important;
}

#slateblue-colored-slider .noUi-connect {
    background-color: var(--color-slateblue) !important;
}

#teal-colored-slider .noUi-connect {
    background-color: var(--color-teal) !important;
}

#orange-colored-slider .noUi-connect {
    background-color: var(--color-orange) !important;
}

#light-colored-slider .noUi-connect {
    background-color: var(--color-light) !important;
}

#dark-colored-slider .noUi-connect {
    background-color: var(--color-dark) !important;
}

#slider-round {
    height: 10px !important;
}
#slider-round .noUi-handle {
    height: 18px !important;
    width: 18px !important;
    inset-block-start: -5px !important;
    inset-inline-end: -9px;
    /* half the width */
    border-radius: 50px !important;
    background-color: var(--color-primary) !important;
    border: 1px solid var(--color-white) !important;
}
#slider-round .noUi-handle:before, #slider-round .noUi-handle:after {
    display: none !important;
}

#slider-square {
    border-radius: 0 !important;
}
#slider-square .noUi-handle {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: var(--color-primary) !important;
    height: 18px !important;
    width: 18px !important;
    inset-block-start: -8px !important;
    inset-inline-end: -9px !important;
}
#slider-square .noUi-handle:before, #slider-square .noUi-handle:after {
    display: none !important;
}

#color1,
#color2,
#color3 {
    margin: 10px !important;
    display: inline-block !important;
    height: 200px !important;
}

#colorpicker {
    height: 240px !important;
    width: 310px !important;
    margin: 0 auto !important;
    padding: 10px !important;
    border: 1px solid var(--color-border) !important;
}

#result {
    margin: 68px 0 68px 64px;
    height: 100px;
    width: 100px;
    display: inline-block;
    vertical-align: top;
    color: var(--gray-5);
    background: var(--gray-5);
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 0 10px;
}
[dir=rtl] #result {
    margin: 68px 64px 68px 0;
}

#color1 .noUi-connect {
    background: var(--color-danger) !important;
}

#color2 .noUi-connect {
    background: var(--color-secondary) !important;
}

#color3 .noUi-connect {
    background: var(--color-primary) !important;
}

#slider-hide .noUi-tooltip {
    display: none;
}

#slider-hide .noUi-active .noUi-tooltip {
    display: block;
}

.c-1-color {
    background: var(--color-secondary) !important;
}

.c-2-color {
    background: var(--color-warning) !important;
}

.c-3-color {
    background: var(--color-info) !important;
}

.c-4-color {
    background: var(--color-danger) !important;
}

.c-5-color {
    background: var(--color-purple) !important;
}

#slider-toggle {
    height: 50px;
}

#slider-toggle.off .noUi-handle {
    border-color: var(--color-success) !important;
}

/*----------------------------------------*/
/*  nouislider css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.9 quill editor css
/*----------------------------------------*/
.ql-container {
    font-size: 14px;
    height: auto;
}

.ql-container.ql-bubble .ql-editor {
    overflow-y: auto !important;
}

.ql-bubble .ql-editor blockquote {
    border-inline-start: 4px solid var(--color-black-bg) !important;
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border: 1px solid var(--color-border) !important;
}

.ql-snow .ql-picker {
    color: var(--color-black) !important;
}

.ql-snow .ql-stroke,
.ql-snow .ql-stroke.ql-fill {
    stroke: var(--color-black) !important;
}

.ql-snow .ql-fill {
    fill: var(--color-black) !important;
}

.ql-toolbar.ql-snow + .ql-container.ql-snow {
    border-top: 0px !important;
}

.ql-snow .ql-picker-options .ql-picker-item {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ql-editor {
    min-height: 150px !important;
    overflow: visible !important;
}

.ql-snow .ql-formats {
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: var(--color-border) !important;
    border-radius: 8px !important;
}

.ql-snow .ql-picker-options {
    background-color: var(--color-white) !important;
}

.ql-snow .ql-tooltip {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05) !important;
    color: var(--color-black) !important;
}

.ql-snow .ql-tooltip input[type=text] {
    border: 1px solid var(--color-border) !important;
    background-color: var(--color-black-bg) !important;
    color: var(--color-black) !important;
    outline: 0;
}

.ql-snow .ql-tooltip {
    transform: translatex(200px) !important;
    z-index: 100 !important;
}

.ql-toolbar.ql-snow {
    border-radius: 4.8px 4.8px 0 0 !important;
}

.ql-snow .ql-picker-label {
    padding-inline-start: 8px !important;
    padding-inline-end: 2px !important;
    color: var(--color-black) !important;
}

.ql-snow .ql-formats .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
}

.ql-container {
    border-radius: 0 0 4.8px 4.8px !important;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: var(--color-black) !important;
}

.ql-editor {
    text-align: start !important;
}

.ql-editor .ql-align-right {
    text-align: end !important;
}

.ql-container {
    font-family: var(--ff-body) !important;
}

.ql-snow .ql-editor {
    padding: 20px;
}

.ql-bubble {
    border: 1px solid var(--color-border) !important;
    border-radius: 4.8px !important;
}

.ql-editor li:not(.ql-direction-rtl)::before {
    margin-inline-start: -24px !important;
    margin-inline-end: 4.8px !important;
    text-align: start !important;
}

.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
    padding-inline-start: 24px !important;
}

.ql-toolbar.ql-snow .ql-formats {
    margin: 4px;
}

[dir=rtl] .ql-tooltip.ql-editing {
    inset-inline-start: 0 !important;
    top: 0 !important;
}

[dir=rtl] .ql-bubble .ql-toolbar .ql-formats:first-child {
    margin-inline-end: 12px;
}

[dir=rtl] .ql-bubble .ql-toolbar .ql-formats {
    margin: 8px 0px 8px 12px;
}

/*----------------------------------------*/
/*   quill editor css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.10 rating css
/*----------------------------------------*/
.antennaio {
    background-image: url("file-1x.html");
    background-repeat: no-repeat;
    color: #cecece;
    width: 280px;
    height: 60px;
    display: block;
    margin: auto;
    font-weight: 400;
    font-size: 0.6em;
    line-height: 5.5;
    letter-spacing: 2px;
    margin-bottom: 7em;
    -webkit-transition: color 2s;
    transition: color 2s;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .antennaio {
        background-image: url("file-2x.html");
        background-size: 60px 60px;
    }
}
.antennaio:hover {
    color: #757575;
}

.antennaio span {
    padding: 0 0 0 70px;
}

.bars {
    background-image: url("file-1x.html");
    width: 80px;
    height: 80px;
    display: block;
    margin: auto;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .bars {
        background-image: url("file-2x.html");
        background-size: 80px 80px;
    }
}
.section-intro {
    text-align: center;
    margin: 3em 0 4em 0;
    max-height: 9999px;
}

.section-intro h1 {
    line-height: 2.4;
}

.section-intro p {
    max-width: 560px;
    margin: auto;
}

.section-intro p.tagline {
    font-size: 0.8em;
    color: #a8a8a8;
    margin-bottom: 3em;
}

.section-examples {
    position: relative;
    background: #f8f8f8;
}

.section-docs {
    margin: 3em 0;
}

.docs {
    width: 800px;
    margin: auto;
    max-height: 9999px;
}

.docs .how-to-use header,
.docs .callbacks header,
.docs .download header {
    background: #4278F5;
}

.docs .how-to-use strong,
.docs .callbacks strong,
.docs .download strong {
    color: #4278F5;
}

.docs .how-to-use a,
.docs .callbacks a,
.docs .download a {
    color: #4278F5;
}

.docs .how-to-use a:hover,
.docs .callbacks a:hover,
.docs .download a:hover {
    color: #0b43c6;
}

.docs .how-to-use pre,
.docs .callbacks pre,
.docs .download pre {
    background: var(--color-white);
    border-inline-start: 2px solid #4278F5;
    padding: 0 2em;
}

.docs .how-to-use code,
.docs .callbacks code,
.docs .download code {
    font-family: "Source Code Pro", sans-serif;
    font-size: 0.9em;
    color: #4278F5;
}

.docs .configuration header,
.docs .faq header {
    background: #50E3C2;
}

.docs .configuration strong,
.docs .faq strong {
    color: #50E3C2;
}

.docs .configuration a,
.docs .faq a {
    color: #50E3C2;
}

.docs .configuration a:hover,
.docs .faq a:hover {
    color: #1cb18f;
}

.docs .configuration pre,
.docs .faq pre {
    background: var(--color-white);
    border-inline-start: 2px solid #50E3C2;
    padding: 0 2em;
}

.docs .configuration code,
.docs .faq code {
    font-family: "Source Code Pro", sans-serif;
    font-size: 0.9em;
    color: #50E3C2;
}

.docs .license header,
.docs .methods header {
    background: #EDB867;
}

.docs .license strong,
.docs .methods strong {
    color: #EDB867;
}

.docs .license a,
.docs .methods a {
    color: #EDB867;
}

.docs .license a:hover,
.docs .methods a:hover {
    color: #d58b19;
}

.docs .license pre,
.docs .methods pre {
    background: var(--color-white);
    border-inline-start: 2px solid #EDB867;
    padding: 0 2em;
}

.docs .license code,
.docs .methods code {
    font-family: "Source Code Pro", sans-serif;
    font-size: 0.9em;
    color: #EDB867;
}

.docs .instructions {
    padding: 2em 3em;
    background: #f8f8f8;
}

.docs .faq p {
    margin: 0 0 0.5em 0;
}

.docs .faq .question {
    margin-bottom: 2em;
}

.docs .faq .question:last-child {
    margin-bottom: 0;
}

.controls {
    position: absolute;
    top: -23px;
    inset-inline-start: 50%;
    margin-inline-start: -190px;
}

.controls a {
    display: block;
    width: 150px;
    background-color: #50E3C2;
    color: var(--color-white);
    float: left;
    padding: 0.3em 1em 0.5em 1em;
    text-decoration: none;
    text-align: center;
    font-weight: 400;
    -webkit-transition: background-color 2s;
    transition: background-color 2s;
}

.controls a:hover {
    background-color: #3adfba;
}

.controls a:focus {
    color: #d4f8f0;
    background-color: #199b7e;
}

.controls a.rating-enable {
    -webkit-border-top-left-radius: 999px;
    -webkit-border-bottom-left-radius: 999px;
    -moz-border-radius-topleft: 999px;
    -moz-border-radius-bottomleft: 999px;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.controls a.rating-disable {
    -webkit-border-top-right-radius: 999px;
    -webkit-border-bottom-right-radius: 999px;
    -moz-border-radius-topright: 999px;
    -moz-border-radius-bottomright: 999px;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.controls a:last-child {
    border-inline-start: 0;
}

.controls a.deactivated {
    background: #20c7a1;
    color: var(--color-white);
}

@media print {
    .controls,
    .github,
    .antennaio {
        display: none;
    }
    .section-intro {
        margin: 1em 0 2em 0;
    }
    .section-intro p.tagline {
        color: var(--color-black);
    }
    .section-examples {
        background: transparent;
    }
    .section-examples .examples {
        padding: 1em 0;
    }
    .section-docs {
        margin: 1em 0;
    }
    .docs .how-to-use a,
    .docs .callbacks a,
    .docs .download a,
    .docs .configuration a,
    .docs .faq a,
    .docs .license a,
    .docs .methods a {
        color: var(--color-black);
        text-decoration: none;
    }
    .docs .how-to-use a:hover,
    .docs .callbacks a:hover,
    .docs .download a:hover,
    .docs .configuration a:hover,
    .docs .faq a:hover,
    .docs .license a:hover,
    .docs .methods a:hover {
        color: var(--color-black);
    }
    .docs .how-to-use header,
    .docs .callbacks header,
    .docs .download header,
    .docs .configuration header,
    .docs .faq header,
    .docs .license header,
    .docs .methods header {
        background: transparent;
        color: var(--color-black);
    }
    .docs .how-to-use code,
    .docs .how-to-use strong,
    .docs .callbacks code,
    .docs .callbacks strong,
    .docs .download code,
    .docs .download strong,
    .docs .configuration code,
    .docs .configuration strong,
    .docs .faq code,
    .docs .faq strong,
    .docs .license code,
    .docs .license strong,
    .docs .methods code,
    .docs .methods strong {
        color: var(--color-black);
    }
    .docs .how-to-use pre,
    .docs .callbacks pre,
    .docs .download pre,
    .docs .configuration pre,
    .docs .faq pre,
    .docs .license pre,
    .docs .methods pre {
        border: none;
        padding: 0;
    }
    .docs .how-to-use .instructions,
    .docs .callbacks .instructions,
    .docs .download .instructions,
    .docs .configuration .instructions,
    .docs .faq .instructions,
    .docs .license .instructions,
    .docs .methods .instructions {
        background: transparent;
    }
}
.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.box-example-1to10 .bd-wrapper {
    width: 210px;
    position: absolute;
    margin: 0px 0 0 -105px;
    inset-inline-start: 50%;
}

.box-example-movie .bd-wrapper {
    width: 250px;
    position: absolute;
    margin: 0px 0 0 -125px;
    inset-inline-start: 50%;
}

.box-example-square .bd-wrapper {
    width: 190px;
    position: absolute;
    margin: 0px 0 0 -95px;
    inset-inline-start: 50%;
}

.box-example-pill .bd-wrapper {
    width: 232px;
    position: absolute;
    margin: 0px 0 0 -116px;
    inset-inline-start: 50%;
}

.box-example-reversed .bd-wrapper {
    padding-top: 1.3em;
    width: 356px;
    position: absolute;
    margin: 0px 0 0 -178px;
    inset-inline-start: 50%;
}

.box-example-horizontal .bd-wrapper {
    width: 120px;
    position: absolute;
    margin: 0px 0 0 -60px;
    inset-inline-start: 50%;
}

.star-ratings h1 {
    font-size: 1.5em;
    line-height: 2;
    margin-top: 3em;
    color: #757575;
}

.star-ratings p {
    margin-bottom: 3em;
    line-height: 1.2;
}

.star-ratings h1,
.star-ratings p {
    text-align: center;
}

.star-ratings .stars {
    width: 220px;
    text-align: center;
}

.star-ratings .stars .title {
    font-size: 14px;
    color: var(--color-primary);
    line-height: 3;
}

.star-ratings .stars .clear-rating {
    padding-inline-start: 5px;
}

.star-ratings .stars select {
    width: 120px;
    font-size: 16px;
}

.star-ratings .stars-example-fontawesome,
.star-ratings .stars-example-css,
.star-ratings .stars-example-bootstrap {
    float: left;
}

.star-ratings .stars-example-fontawesome-o select {
    width: 200px;
}

.start-ratings-main {
    margin-bottom: 3em;
}

.box {
    width: 100%;
    float: left;
    margin: 1em 0;
}

.box .box-header {
    text-align: center;
    font-weight: 400;
    padding: 0.5em 0;
}

.box .box-body {
    padding-top: 2em;
    height: 85px;
    position: relative;
}

.box select {
    width: 120px;
    margin: 10px auto 0 auto;
    display: block;
    font-size: 16px;
}

.box-large .box-body {
    padding-top: 2em;
    height: 120px;
}

.box-orange .box-header {
    background-color: #EDB867;
    color: var(--color-white);
}

.box-orange .box-body {
    background-color: var(--color-white);
    border: 2px solid #f5d8ab;
    border-top: 0;
}

.box-green .box-header {
    background-color: #50E3C2;
    color: var(--color-white);
}

.box-green .box-body {
    background-color: var(--color-white);
    border: 2px solid #92eed9;
    border-top: 0;
}

.box-blue .box-header {
    background-color: #4278F5;
    color: var(--color-white);
}

.box-blue .box-body {
    background-color: var(--color-white);
    border: 2px solid #8bacf9;
    border-top: 0;
}

@media print {
    .star-ratings h1 {
        color: var(--color-black);
    }
    .star-ratings .stars .title {
        color: var(--color-black);
    }
    .box-orange .box-header,
    .box-green .box-header,
    .box-blue .box-header {
        background-color: transparent;
        color: var(--color-black);
    }
    .box-orange .box-body,
    .box-green .box-body,
    .box-blue .box-body {
        background-color: transparent;
        border: none;
    }
}
.bd-theme-fontawesome-stars .bd-widget {
    height: 28px;
    white-space: nowrap;
}

.bd-theme-fontawesome-stars .bd-widget a {
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    margin-inline-end: 2px;
    font-size: 26px;
}

.bd-theme-fontawesome-stars .bd-widget a:after {
    content: "\f186";
    color: #d2d2d2;
    font-family: var(--ff-remixicon);
}

.bd-theme-fontawesome-stars .bd-widget a.bd-active:after {
    color: var(--color-rating);
}

.bd-theme-fontawesome-stars .bd-widget a.bd-selected:after {
    color: var(--color-rating);
}

.bd-theme-fontawesome-stars .bd-widget .bd-current-rating {
    display: none;
}

.bd-theme-fontawesome-stars .bd-readonly a {
    cursor: default;
}

@media print {
    .bd-theme-fontawesome-stars .bd-widget a:after {
        content: "\f18b";
        color: var(--color-black);
        font-family: var(--ff-remixicon);
    }
    .bd-theme-fontawesome-stars .bd-widget a.bd-active:after,
    .bd-theme-fontawesome-stars .bd-widget a.bd-selected:after {
        content: "\f186";
        color: var(--color-black);
        font-family: var(--ff-remixicon);
    }
}
.bd-theme-bars-1to10 .bd-widget {
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.bd-theme-bars-1to10 .bd-widget a {
    display: block;
    width: 12px;
    padding: 5px 0;
    height: 28px;
    float: left;
    background-color: var(--gray-2);
    margin: 1px;
    text-align: center;
}

.bd-theme-bars-1to10 .bd-widget a.bd-active,
.bd-theme-bars-1to10 .bd-widget a.bd-selected {
    background-color: var(--color-rating);
}

.bd-theme-bars-1to10 .bd-widget .bd-current-rating {
    font-size: 20px;
    float: left;
    padding: 4px 20px 3px 20px;
    color: var(--color-black);
    font-weight: 400;
}

.bd-theme-bars-1to10 .bd-readonly a {
    cursor: default;
}

.bd-theme-bars-1to10 .bd-readonly a.bd-active,
.bd-theme-bars-1to10 .bd-readonly a.bd-selected {
    background-color: #8f8eee;
}

.bd-theme-bars-1to10 .bd-readonly .bd-current-rating {
    color: #8f8eee;
}

@media print {
    .bd-theme-bars-1to10 .bd-widget a {
        border: 1px solid var(--color-border);
        background: var(--color-white);
        height: 38px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .bd-theme-bars-1to10 .bd-widget a.bd-active,
    .bd-theme-bars-1to10 .bd-widget a.bd-selected {
        border: 1px solid var(--color-black);
        background: var(--color-white);
    }
    .bd-theme-bars-1to10 .bd-widget .bd-current-rating {
        color: var(--color-black);
    }
}
.bd-theme-bars-horizontal .bd-widget {
    width: 120px;
    white-space: nowrap;
}

.bd-theme-bars-horizontal .bd-widget a {
    display: block;
    width: 120px;
    height: 15px;
    background-color: var(--color-primary);
    margin: 1px;
}

.bd-theme-bars-horizontal .bd-widget a.bd-active,
.bd-theme-bars-horizontal .bd-widget a.bd-selected {
    background-color: var(--color-rating);
}

.bd-theme-bars-horizontal .bd-widget .bd-current-rating {
    width: 120px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    color: var(--color-rating);
}

.bd-theme-bars-horizontal .bd-readonly a {
    cursor: default;
}

.bd-theme-bars-horizontal .bd-readonly a.bd-active,
.bd-theme-bars-horizontal .bd-readonly a.bd-selected {
    background-color: #8f8eee;
}

.bd-theme-bars-horizontal .bd-readonly .bd-current-rating {
    color: #8f8eee;
}

@media print {
    .bd-theme-bars-horizontal .bd-widget a {
        border: 1px solid var(--color-border);
        background: var(--color-white);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .bd-theme-bars-horizontal .bd-widget a.bd-active,
    .bd-theme-bars-horizontal .bd-widget a.bd-selected {
        border: 1px solid var(--color-black);
        background: var(--color-white);
    }
    .bd-theme-bars-horizontal .bd-widget .bd-current-rating {
        color: var(--color-black);
    }
}
.bd-theme-bars-movie .bd-widget {
    height: 35px;
    white-space: nowrap;
}

.bd-theme-bars-movie .bd-widget a {
    display: block;
    width: 58px;
    height: 8px;
    float: left;
    background-color: var(--gray-2);
    margin: 1px;
}

.bd-theme-bars-movie .bd-widget a.bd-active,
.bd-theme-bars-movie .bd-widget a.bd-selected {
    background-color: var(--color-rating);
}

.bd-theme-bars-movie .bd-widget .bd-current-rating {
    clear: both;
    width: 240px;
    text-align: center;
    display: block;
    padding: 0.5em 0 0;
    color: var(--color-primary);
    font-weight: 400;
    font-size: 16px;
}

.bd-theme-bars-movie .bd-readonly a {
    cursor: default;
}

.bd-theme-bars-movie .bd-readonly a.bd-active,
.bd-theme-bars-movie .bd-readonly a.bd-selected {
    background-color: #8f8eee;
}

.bd-theme-bars-movie .bd-readonly .bd-current-rating {
    color: #8f8eee;
}

@media print {
    .bd-theme-bars-movie .bd-widget a {
        border: 1px solid var(--color-border);
        background: var(--color-white);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .bd-theme-bars-movie .bd-widget a.bd-active,
    .bd-theme-bars-movie .bd-widget a.bd-selected {
        border: 1px solid var(--color-black);
        background: var(--color-white);
    }
    .bd-theme-bars-movie .bd-widget .bd-current-rating {
        color: var(--color-black);
    }
}
.bd-theme-bars-pill .bd-widget {
    white-space: nowrap;
}

.bd-theme-bars-pill .bd-widget a {
    padding: 7px 15px;
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    font-size: 14px;
    line-height: 3;
    text-align: center;
    font-weight: 400;
}

.bd-theme-bars-pill .bd-widget a:first-child {
    -webkit-border-top-left-radius: 999px;
    -webkit-border-bottom-left-radius: 999px;
    -moz-border-radius-topleft: 999px;
    -moz-border-radius-bottomleft: 999px;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.bd-theme-bars-pill .bd-widget a:last-child {
    -webkit-border-top-right-radius: 999px;
    -webkit-border-bottom-right-radius: 999px;
    -moz-border-radius-topright: 999px;
    -moz-border-radius-bottomright: 999px;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.bd-theme-bars-pill .bd-widget a.bd-active,
.bd-theme-bars-pill .bd-widget a.bd-selected {
    background-color: var(--color-rating);
    color: var(--color-white);
}

.bd-theme-bars-pill .bd-readonly a {
    cursor: default;
}

.bd-theme-bars-pill .bd-readonly a.bd-active,
.bd-theme-bars-pill .bd-readonly a.bd-selected {
    background-color: #8f8eee;
}

@media print {
    .bd-theme-bars-pill .bd-widget a {
        border: 1px solid var(--color-border);
        border-inline-start: none;
        background: var(--color-white);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .bd-theme-bars-pill .bd-widget a.bd-active,
    .bd-theme-bars-pill .bd-widget a.bd-selected {
        border: 1px solid var(--color-black);
        border-inline-start: none;
        background: var(--color-white);
        color: var(--color-black);
    }
    .bd-theme-bars-pill .bd-widget a:first-child {
        border-inline-start: 1px solid var(--color-black);
    }
}
.bd-theme-bars-reversed .bd-widget {
    height: 25px;
    white-space: nowrap;
}

.bd-theme-bars-reversed .bd-widget a {
    display: block;
    width: 22px;
    height: 22px;
    float: left;
    background-color: var(--gray-2);
    margin: 1px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-rating);
    text-align: center;
}

.bd-theme-bars-reversed .bd-widget a.bd-active,
.bd-theme-bars-reversed .bd-widget a.bd-selected {
    background-color: var(--color-rating);
    color: var(--color-white);
}

.bd-theme-bars-reversed .bd-widget .bd-current-rating {
    line-height: 1.3;
    float: left;
    padding: 0 20px 0 20px;
    color: var(--color-primary);
    font-size: 17px;
    font-weight: 400;
}

.bd-theme-bars-reversed .bd-readonly a {
    cursor: default;
}

.bd-theme-bars-reversed .bd-readonly a.bd-active,
.bd-theme-bars-reversed .bd-readonly a.bd-selected {
    background-color: #8f8eee;
}

.bd-theme-bars-reversed .bd-readonly .bd-current-rating {
    color: #8f8eee;
}

@media print {
    .bd-theme-bars-reversed .bd-widget a {
        border: 1px solid var(--color-border);
        background: var(--color-white);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .bd-theme-bars-reversed .bd-widget a.bd-active,
    .bd-theme-bars-reversed .bd-widget a.bd-selected {
        border: 1px solid var(--color-black);
        background: var(--color-white);
    }
    .bd-theme-bars-reversed .bd-widget .bd-current-rating {
        color: var(--color-black);
    }
}
.bd-theme-bars-square .bd-widget {
    height: 40px;
    white-space: nowrap;
}

.bd-theme-bars-square .bd-widget a {
    display: block;
    width: 30px;
    height: 30px;
    float: left;
    border: 2px solid var(--color-border);
    background-color: var(--color-white);
    margin: 2px;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
    color: var(--color-black);
    font-weight: 600;
}

.bd-theme-bars-square .bd-widget a.bd-active,
.bd-theme-bars-square .bd-widget a.bd-selected {
    border: 2px solid var(--color-rating);
    color: var(--color-black);
    background-color: var(--color-rating);
}

.bd-theme-bars-square .bd-widget .bd-current-rating {
    clear: both;
    width: 330px;
    text-align: center;
    font-weight: 600;
    display: block;
    padding: 0.5em 0;
    color: var(--color-black);
}

.bd-theme-bars-square .bd-readonly a {
    cursor: default;
}

.bd-theme-bars-square .bd-readonly a.bd-active,
.bd-theme-bars-square .bd-readonly a.bd-selected {
    border: 2px solid var(--color-rating);
    color: #8f8eee;
}

@media print {
    .bd-theme-bars-square .bd-widget a {
        border: 2px solid var(--color-border);
        color: var(--color-border);
    }
    .bd-theme-bars-square .bd-widget a.bd-active,
    .bd-theme-bars-square .bd-widget a.bd-selected {
        border: 2px solid var(--color-black);
        color: var(--color-black);
    }
}
.bd-theme-bootstrap-stars .bd-widget {
    height: 28px;
    white-space: nowrap;
}

.bd-theme-bootstrap-stars .bd-widget a {
    font: normal normal normal 18px/1 "Glyphicons Halflings";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    margin-inline-end: 2px;
}

.bd-theme-bootstrap-stars .bd-widget a:after {
    content: "\e006";
    color: #d2d2d2;
}

.bd-theme-bootstrap-stars .bd-widget a.bd-active:after {
    color: #EDB867;
}

.bd-theme-bootstrap-stars .bd-widget a.bd-selected:after {
    color: #EDB867;
}

.bd-theme-bootstrap-stars .bd-widget .bd-current-rating {
    display: none;
}

.bd-theme-bootstrap-stars .bd-readonly a {
    cursor: default;
}

@media print {
    .bd-theme-bootstrap-stars .bd-widget a:after {
        content: "\e007";
        color: var(--color-black);
    }
    .bd-theme-bootstrap-stars .bd-widget a.bd-active:after,
    .bd-theme-bootstrap-stars .bd-widget a.bd-selected:after {
        content: "\e006";
        color: var(--color-black);
    }
}
.bd-theme-css-stars .bd-widget {
    height: 28px;
    white-space: nowrap;
}

.bd-theme-css-stars .bd-widget a {
    text-decoration: none;
    height: 18px;
    width: 18px;
    float: left;
    font-size: 23px;
    margin-inline-end: 5px;
}

.bd-theme-css-stars .bd-widget a:after {
    content: "★";
    color: #d2d2d2;
}

.bd-theme-css-stars .bd-widget a.bd-active:after {
    color: #EDB867;
}

.bd-theme-css-stars .bd-widget a.bd-selected:after {
    color: #EDB867;
}

.bd-theme-css-stars .bd-widget .bd-current-rating {
    display: none;
}

.bd-theme-css-stars .bd-readonly a {
    cursor: default;
}

@media print {
    .bd-theme-css-stars .bd-widget a:after {
        content: "☆";
        color: var(--color-black);
    }
    .bd-theme-css-stars .bd-widget a.bd-active:after,
    .bd-theme-css-stars .bd-widget a.bd-selected:after {
        content: "★";
        color: var(--color-black);
    }
}
.bd-theme-fontawesome-stars-o .bd-widget {
    height: 28px;
    white-space: nowrap;
}

.bd-theme-fontawesome-stars-o .bd-widget a {
    font: normal normal normal 20px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    margin-inline-end: 2px;
    font-size: 26px;
}

.bd-theme-fontawesome-stars-o .bd-widget a:after {
    content: "\f18b";
    color: #d2d2d2;
    font-family: var(--ff-remixicon);
}

.bd-theme-fontawesome-stars-o .bd-widget a.bd-active:after {
    content: "\f186";
    color: var(--color-rating);
    font-family: var(--ff-remixicon);
}

.bd-theme-fontawesome-stars-o .bd-widget a.bd-selected:after {
    content: "\f186";
    color: var(--color-rating);
    font-family: var(--ff-remixicon);
}

.bd-theme-fontawesome-stars-o .bd-widget a.bd-fractional:after {
    /* content: '\f123'; */
    color: var(--color-rating);
}

.bd-theme-fontawesome-stars-o .bd-widget .bd-current-rating {
    display: none;
}

.bd-theme-fontawesome-stars-o .bd-readonly a {
    cursor: default;
}

.bd-theme-fontawesome-stars-o .bd-reverse a.bd-fractional {
    display: inline-block;
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -webkit-filter: FlipH;
    filter: FlipH;
    -ms-filter: "FlipH";
}

@media print {
    .bd-theme-fontawesome-stars-o .bd-widget a:after {
        content: "\f18b";
        color: var(--color-black);
        font-family: var(--ff-remixicon);
    }
    .bd-theme-fontawesome-stars-o .bd-widget a.bd-active:after,
    .bd-theme-fontawesome-stars-o .bd-widget a.bd-selected:after {
        content: "\f186";
        color: var(--color-black);
        font-family: var(--ff-remixicon);
    }
    .bd-theme-fontawesome-stars-o .bd-widget a.bd-fractional:after {
        content: "\f123";
        color: var(--color-black);
    }
}
/*----------------------------------------*/
/*  rating css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.11 select2 css
/*----------------------------------------*/
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 6px 12px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    padding-inline-end: 4px !important;
    margin-inline-end: 6px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-inline-start: 5px !important;
}

.select2.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-inline-start: 12px !important;
    padding-inline-end: 20px !important;
    color: var(--color-heading) !important;
    line-height: 36px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    height: 36px !important;
}

.select2-container--default .select2-selection--single {
    background-color: var(--color-card-bg) !important;
    border: 0px solid var(--color-border) !important;
    border-radius: 6px !important;
}

.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

.select2-dropdown {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--gray-3) !important;
    color: var(--color-heading) !important;
}

.select2-results__option--selectable {
    font-size: 14px;
    color: var(--color-heading);
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}
.select2-container--default .select2-results__option--selected.select2-results__option--highlighted {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.select2-search__field {
    background-color: var(--color-white) !important;
    color: var(--color-heading) !important;
}
.select2-search__field:focus-visible {
    outline: none !important;
}

.select2-container--default .select2-selection--multiple {
    background-color: var(--color-card-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    height: 36px;
}

.select2-container .select2-selection--multiple {
    min-height: 36px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary-rgba-3) !important;
    color: var(--color-heading) !important;
    border: none !important;
    border-radius: 4px !important;
    margin-top: 0 !important;
    height: 24px;
    display: flex;
    align-items: center;
    font-size: 12px;
}

.select2-selection--multiple .select2-search__field {
    background-color: transparent !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-inline-end: 1px solid var(--color-border) !important;
    color: var(--color-heading) !important;
    top: -4.8px !important;
    font-weight: 500 !important;
    font-size: 18px !important;
}

.select2-selection--multiple .select2-selection__choice__display {
    font-size: 12px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    color: var(--color-danger) !important;
}

.select2-results__option span img,
.select2-selection__rendered span img {
    width: 23.2px;
    height: 23.2px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    margin-top: -3px;
}

.select2-container .select2-search--inline .select2-search__field {
    margin-top: 0 !important;
}

.select2-container--disabled.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--disabled .select2-selection.select2-selection--multiple {
    background-color: var(--color-body-bg) !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    font-weight: 400 !important;
    height: 20px !important;
    font-size: 25px !important;
    width: 20px !important;
    position: absolute !important;
    right: 30px !important;
}

.select2-selection__clear {
    color: var(--color-body);
}

.select2-dropdown {
    z-index: 99999 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 10px !important;
}

.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow {
    left: 10px !important;
    right: auto !important;
}

.select2-container--open .select2-dropdown--above {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    overflow: hidden;
}

.select2-container--open .select2-dropdown--below {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    overflow: hidden;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    transform: translateY(-50%) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--gray-3);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary);
    color: var(--color-white);
}

[dir=rtl] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    right: 0 !important;
    left: inherit !important;
}

[dir=rtl] .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-inline-end: 5px !important;
    padding-inline-start: inherit !important;
}

[dir=rtl] .select2-container--default .select2-selection--single .select2-selection__clear {
    margin-inline-start: 20px !important;
    padding-inline-start: 0px !important;
}

/*----------------------------------------*/
/*  select2 css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.12 shepherd css
/*----------------------------------------*/
.shepherd-logo {
    width: 220px;
    min-width: 220px;
    margin: 0 auto;
}
.shepherd-logo img {
    width: 100%;
    height: 100%;
}
.shepherd-logo .dark-logo {
    display: none;
}
[data-theme-mode=dark] .shepherd-logo .light-logo {
    display: none;
}
[data-theme-mode=dark] .shepherd-logo .dark-logo {
    display: block;
}

.shepherd-modal-overlay-container.shepherd-modal-is-visible {
    opacity: 0.15 !important;
}

.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
    color: var(--custom-black) !important;
}

.shepherd-button {
    background: rgb(var(--success-rgb)) !important;
    color: #fff !important;
    padding: 8px 16px !important;
}

.shepherd-element {
    background: var(--color-white) !important;
}

.shepherd-header {
    background-color: var(--gray-2) !important;
    padding: 15px 12px 8px 12px !important;
}

.shepherd-title {
    font-weight: 500 !important;
}

.shepherd-text {
    font-size: 13px !important;
}

.shepherd-title {
    font-size: 16px;
    color: var(--color-heading) !important;
}

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

.shepherd-arrow:before {
    background: var(--color-white) !important;
}

.shepherd-arrow,
.shepherd-arrow::before {
    content: "\ea75";
    font-family: remixicon;
    font-size: 24px;
    z-index: 1;
    background-color: transparent !important;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    color: var(--color-primary);
}

.shepherd-element[data-popper-placement^=bottom] > .shepherd-arrow {
    top: -15px;
}

.shepherd-enabled,
.shepherd-target {
    color: var(--color-black) !important;
    background-color: var(--color-white) !important;
}

.shepherd-element[data-popper-placement^=top] > .shepherd-arrow {
    bottom: 5px !important;
}
.shepherd-element[data-popper-placement^=top] > .shepherd-arrow::before {
    content: "\ea4b" !important;
    font-family: remixicon;
    font-size: 24px;
    z-index: 1;
    background-color: transparent !important;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    color: var(--color-primary);
}

/*----------------------------------------*/
/*  shepherd css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.13 slim select css
/*----------------------------------------*/
.ss-main {
    padding: inherit !important;
    min-height: 36px !important;
    background-color: transparent !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-placeholder) !important;
}

.ss-content .ss-list .ss-option {
    transition: var(--transition) !important;
}

.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
    color: var(--color-white) !important;
    background-color: var(--color-primary) !important;
}

.ss-content .ss-list .ss-option:hover {
    color: var(--color-heading) !important;
    background-color: var(--gray-3) !important;
}

.ss-content .ss-search input:focus {
    box-shadow: none !important;
}

.ss-content .ss-search {
    padding: 0 !important;
    margin-bottom: 10px;
}

.ss-main:focus {
    border-color: var(--primary-rgba-5) !important;
    background-color: var(--color-white) !important;
    box-shadow: 0 0 4px var(--primary-rgba-5) !important;
    color: var(--color-heading) !important;
}

.ss-content .ss-list .ss-option {
    padding: 6px 12px !important;
}

.ss-main .ss-arrow {
    width: 10px !important;
    height: 10px !important;
}

.ss-main .ss-values {
    align-items: center !important;
}

.ss-main .ss-values .ss-value {
    color: var(--color-heading) !important;
}

.ss-main .ss-values .ss-value {
    background-color: var(--gray-3) !important;
    height: 26px !important;
    color: var(--color-heading) !important;
}

.ss-main .ss-values .ss-value .ss-value-text {
    color: var(--color-heading) !important;
}

.ss-main .ss-values .ss-value .ss-value-delete {
    border-inline-start: solid 1px var(--color-border) !important;
}

.ss-main .ss-values .ss-value .ss-value-delete svg path {
    stroke: var(--color-heading) !important;
    transition: all 0.3s ease-in-out;
}

.ss-main .ss-values .ss-value .ss-value-delete:hover svg path {
    stroke: var(--color-danger) !important;
}

/*----------------------------------------*/
/*  slim select css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.14 sortable css
/*----------------------------------------*/
.tinted {
    background-color: var(--color-primary);
    color: var(--color-black);
}
[data-theme-mode=dark] .tinted {
    color: var(--color-black);
}

.filtered {
    color: var(--color-black);
}
[data-theme-mode=dark] .filtered {
    color: var(--color-black);
}

.grid-example {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.grid-square {
    text-align: center;
    width: 127px;
    height: 127px;
    background-color: var(--color-card-bg);
    box-shadow: var(--shadow);
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
[data-theme-mode=dark] .grid-square {
    color: var(--color-white);
    background-color: var(--color-black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .grid-square {
        width: 98px;
        height: 98px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .grid-square {
        width: 100px;
        height: 100px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .grid-square {
        width: 110px;
        height: 110px;
    }
}
@media (max-width: 575px) {
    .grid-square {
        width: 98px;
        height: 98px;
    }
}

.nested-sortable,
.nested-1,
.nested-2,
.nested-3 {
    margin-top: 5px;
}

.nested-1 {
    background-color: var(--gray-4);
}

.nested-2 {
    background-color: var(--gray-3);
}

.nested-3 {
    background-color: var(--gray-2);
}

/*----------------------------------------*/
/*  sortable css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.15 sweetalert2 css
/*----------------------------------------*/
.swal2-confirm {
    font-size: 14px !important;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flexbox;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 7.5px 20px !important;
    transition: all 0.3s linear !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;
    white-space: nowrap !important;
    gap: 0 6px !important;
    font-weight: var(--fw-medium) !important;
    border: none !important;
    background-color: var(--color-primary);
}
.swal2-confirm:hover {
    background-color: var(--color-secondary);
}

.swal2-cancel.swal2-styled {
    font-size: 14px !important;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flexbox;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 7.5px 20px !important;
    transition: all 0.3s linear !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;
    white-space: nowrap !important;
    gap: 0 6px !important;
    font-weight: var(--fw-medium) !important;
    border: none !important;
    background-color: var(--color-danger);
}

.swal2-container .swal2-title {
    font-size: 22px;
    font-weight: var(--fw-medium);
    color: var(--color-heading);
}
.swal2-container .swal2-html-container {
    color: var(--color-black) !important;
}
.swal2-container .swal2-popup {
    background-color: var(--color-white);
}

.swal2-modal {
    font-size: 14px;
}

.swal2-icon.swal2-question {
    border-color: #1493FF;
    color: #1493FF;
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: #29DA82;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(41, 218, 130, 0.3);
}
.swal2-icon.swal2-warning {
    border-color: #FF830F;
    color: #FF830F;
}

.swal2-styled:focus {
    box-shadow: none;
}

.swal2-progress-steps .swal2-progress-step {
    background: #4F46E5;
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
    background: #4F46E5;
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step, .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
    background: rgba(79, 70, 229, 0.3);
}
.swal2-progress-steps .swal2-progress-step-line {
    background: #4F46E5;
}

.swal2-loader {
    border-color: #4F46E5 transparent #4F46E5 transparent;
}

/*----------------------------------------*/
/*  sweetalert2 css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.16 swiper css
/*----------------------------------------*/
.swiper-button-next::after,
.swiper-button-prev::after {
    font-family: remixicon;
    font-size: 26px;
    transition: var(--transition);
}

.swiper-button-next::after {
    content: "\ea6e" !important;
}

.swiper-button-prev::after {
    content: "\ea64" !important;
}

.swiper-button-next,
.swiper-button-prev {
    height: 32px;
    width: 32px;
    color: var(--color-white);
    background-color: var(--primary-rgba-3);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 8px;
    transition: var(--transition);
}
[data-theme-mode=dark] .swiper-button-next,
[data-theme-mode=dark] .swiper-button-prev {
    color: var(--color-black);
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: var(--color-primary);
}

.swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background-color: var(--gray-5);
    opacity: 1;
    border-radius: 10px;
}

.swiper-pagination-bullet-active {
    background: var(--color-primary);
    width: 20px;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--color-info);
}

.swiper-pagination-fraction {
    color: var(--color-white);
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.swiper-pagination-fraction .swiper-pagination-current {
    font-size: 20px;
}

.swiperPaginationCustom .swiper-pagination-bullet {
    height: 25px;
    width: 25px;
    line-height: 25px;
    border-radius: 50px;
    background-color: var(--color-white);
    opacity: 0.5;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.swiperPaginationCustom .swiper-pagination-bullet-active {
    opacity: 1;
}

.swiper-scrollbar {
    background-color: rgba(220, 229, 240, 0.4);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding: 1.2px;
    height: 6px !important;
}
.swiper-scrollbar .swiper-scrollbar-drag {
    background-color: var(--color-white);
}

.swiperPaginationVertical {
    height: 300px;
}

.swiperNestedVertical {
    height: 300px;
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    width: 25px;
}

.swiperScrollContainer .swiper-slide {
    font-size: 18px;
    height: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 30px;
}

.slidesPerViewAuto .swiper-slide {
    width: 80%;
}

.swiperCenteredSlidesAuto .swiper-slide {
    width: 60%;
}

.swiperGrid.swiper {
    width: 100%;
    height: 100%;
    margin-inline-start: auto;
    margin-inline-end: auto;
}
.swiperGrid .swiper-slide {
    text-align: center !important;
    font-size: 18px !important;
    background: #333 !important;
    height: calc((100% - 30px) / 2) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.swiperEffectFade .swiper-slide img {
    width: 100%;
}

.swiperEffectCube .swiper-slide {
    width: 300px;
    height: 492px;
}
.swiperEffectCube .swiper-slide img {
    width: 100%;
    height: 100%;
}

.swiperEffectCoverFlow .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;
}
.swiperEffectCoverFlow .swiper-slide img {
    width: 100%;
    height: 100%;
}

.swiperEffectFlip .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 320px;
    height: 320px;
}
.swiperEffectFlip .swiper-slide img {
    width: 100%;
    height: 100%;
}

.swiperEffectCards.swiper {
    width: 240px;
    height: 320px;
}
.swiperEffectCards .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: var(--color-white);
}
.swiperEffectCards .swiper-slide:nth-child(1n) {
    background-color: rgb(206, 17, 17);
}
.swiperEffectCards .swiper-slide:nth-child(2n) {
    background-color: rgb(0, 140, 255);
}
.swiperEffectCards .swiper-slide:nth-child(3n) {
    background-color: rgb(10, 184, 111);
}
.swiperEffectCards .swiper-slide:nth-child(4n) {
    background-color: rgb(211, 122, 7);
}
.swiperEffectCards .swiper-slide:nth-child(5n) {
    background-color: rgb(118, 163, 12);
}
.swiperEffectCards .swiper-slide:nth-child(6n) {
    background-color: rgb(180, 10, 47);
}
.swiperEffectCards .swiper-slide:nth-child(7n) {
    background-color: rgb(35, 99, 19);
}
.swiperEffectCards .swiper-slide:nth-child(8n) {
    background-color: rgb(0, 68, 255);
}
.swiperEffectCards .swiper-slide:nth-child(9n) {
    background-color: rgb(218, 12, 218);
}
.swiperEffectCards .swiper-slide:nth-child(10n) {
    background-color: rgb(54, 94, 77);
}

.swiperEffectCreative.swiper {
    margin: 40px auto;
    width: 320px;
    height: 240px;
}
.swiperEffectCreative .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    color: var(--color-white);
}
.swiperEffectCreative .swiper-slide:nth-child(1n) {
    background-color: rgb(206, 17, 17);
}
.swiperEffectCreative .swiper-slide:nth-child(2n) {
    background-color: rgb(0, 140, 255);
}
.swiperEffectCreative .swiper-slide:nth-child(3n) {
    background-color: rgb(10, 184, 111);
}
.swiperEffectCreative .swiper-slide:nth-child(4n) {
    background-color: rgb(211, 122, 7);
}
.swiperEffectCreative .swiper-slide:nth-child(5n) {
    background-color: rgb(118, 163, 12);
}
.swiperEffectCreative .swiper-slide:nth-child(6n) {
    background-color: rgb(180, 10, 47);
}
.swiperEffectCreative .swiper-slide:nth-child(7n) {
    background-color: rgb(35, 99, 19);
}
.swiperEffectCreative .swiper-slide:nth-child(8n) {
    background-color: rgb(0, 68, 255);
}
.swiperEffectCreative .swiper-slide:nth-child(9n) {
    background-color: rgb(218, 12, 218);
}
.swiperEffectCreative .swiper-slide:nth-child(10n) {
    background-color: rgb(54, 94, 77);
}

.mousewheelControl {
    height: 300px;
}

.autoplay-progress {
    position: absolute;
    inset-inline-end: 16px;
    bottom: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--color-primary);
}

.autoplay-progress svg {
    --progress: 0;
    position: absolute;
    inset-inline-start: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: var(--color-primary);
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
}

.thumbsGalleryThumb .swiper-slide {
    width: 100%;
    height: 100%;
    opacity: 0.4;
    cursor: pointer;
    border: 1px solid var(--color-primary);
    padding: 5px;
}
.thumbsGalleryThumb .swiper-slide img {
    width: 100%;
    height: 100%;
}
.thumbsGalleryThumb .swiper-slide-thumb-active {
    opacity: 1;
}

.swiperParallax .swiper-slide {
    font-size: 18px;
    color: var(--color-white);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 60px;
    height: 720px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .swiperParallax .swiper-slide {
        height: 500px;
        padding: 20px 30px;
    }
}
.swiperParallax .parallax-bg {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 130%;
    height: 720px;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .swiperParallax .parallax-bg {
        height: 500px;
    }
}
.swiperParallax .swiper-slide .title {
    font-size: 41px;
    font-weight: 300;
}
.swiperParallax .swiper-slide .align-center {
    font-size: 21px;
}
.swiperParallax .swiper-slide .text {
    font-size: 14px;
    max-width: 400px;
    line-height: 1.3;
}
.swiperParallax .swiper-slide p {
    color: var(--color-white);
}

.swiperZoom .swiper-slide {
    overflow: hidden;
}
.swiperZoom .swiper-slide img {
    width: 80%;
}

/*----------------------------------------*/
/*  swiper css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.17 tagify css
/*----------------------------------------*/
.tagify {
    --tag-inset-shadow-size: 0 !important;
    padding: 0px 8px !important;
    height: 36px !important;
}

.tagify__tag {
    background-color: var(--gray-3);
    border-radius: 4px !important;
}

.tagify.tagify--mix.form-control {
    padding: 8px;
}

.tagify__tag > div::before {
    box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--gray-3) inset !important;
}

.tagify:hover:not(.tagify--focus):not(.tagify--invalid) {
    border-color: var(--color-border) !important;
}

.tagify {
    border-color: var(--color-border) !important;
}
.tagify.tagify--focus {
    border-color: var(--primary-rgba-5) !important;
    box-shadow: 0 0 4px var(--primary-rgba-5) !important;
}

.tagify__tag {
    margin-inline: 5px 0 !important;
    margin-block: 5px !important;
}

.tagify__tag > div {
    font-size: 12px;
    padding: 2px 5px;
}

.tagify__input {
    margin: 2px !important;
}

.tagify {
    --tags-disabled-bg: var(--gray-3) !important;
    --tag-bg: var(--gray-3) !important;
    --tag-hover: rgba(var(--primary-rgb), 0.15) !important;
    --tag-text-color: var(--color-heading) !important;
    --tag-text-color--edit: var(--color-heading) !important;
    --tag-invalid-color: rgba(var(--danger-rgb), 0.5) !important;
    --tag-invalid-bg: rgba(var(--danger-rgb), 0.2) !important;
    --tag-remove-bg: rgba(var(--danger-rgb), 0.1) !important;
    --tag-remove-btn-color: var(--color-heading) !important;
    --tag-remove-btn-bg--hover: rgba(var(--danger-rgb), 0.3) !important;
    --tag-pad: 4px 8px !important;
}

.tagify__tag__removeBtn {
    margin: 0 4px !important;
}

.tagify__tag:focus div::before,
.tagify__tag:hover:not([readonly]) div::before {
    --tag-bg-inset: 0px !important;
}

.tagify__tag-text {
    padding: 2px;
}

.tags-look {
    border: 1px solid var(--color-border) !important;
    background-color: var(--color-white) !important;
}
.tags-look .tagify__dropdown__item {
    display: inline-block;
    vertical-align: middle;
    border-radius: 3px;
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    margin: 4px;
    font-size: 14px;
    color: var(--color-body);
    transition: 0s;
}

.tags-look .tagify__dropdown__item--active {
    color: var(--color-body);
}

.tags-look .tagify__dropdown__item:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.tags-look .tagify__dropdown__item--hidden {
    max-width: 0;
    max-height: initial;
    padding: 5px 0;
    margin: 4px 0;
    white-space: nowrap;
    text-indent: -20px;
    border: 0;
}

.tagify__dropdown {
    border-top: 1px solid var(--color-primary) !important;
}

/* Suggestions items */
.tagify__tag .tagify__tag__avatar-wrap {
    width: 22px;
    height: 22px;
    white-space: normal;
    border-radius: 50%;
    margin-inline-end: 5px;
    transition: 0.12s ease-out;
    vertical-align: middle;
}

.tagify__tag img {
    width: 100%;
    vertical-align: top;
}

.tagify__dropdown.users-list .tagify__dropdown__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 16px;
    grid-template-areas: "avatar name" "avatar email";
}

.tagify__dropdown.users-list header.tagify__dropdown__item {
    grid-template-areas: "add remove-tags" "remaning .";
}

.tagify__dropdown.users-list .tagify__dropdown__item:hover .tagify__dropdown__item__avatar-wrap {
    transform: scale(1.2);
}

.tagify__dropdown.users-list .tagify__dropdown__item__avatar-wrap {
    grid-area: avatar;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--gray-3);
    transition: 0.1s ease-out;
}

.tagify__dropdown.users-list img {
    width: 100%;
    vertical-align: top;
}

.tagify__dropdown.users-list header.tagify__dropdown__item > div,
.tagify__dropdown.users-list .tagify__dropdown__item strong {
    grid-area: name;
    width: 100%;
    align-self: center;
}

.tagify__dropdown.users-list span {
    grid-area: email;
    width: 100%;
    font-size: 14px;
    opacity: 0.6;
}

.tagify__dropdown.users-list .tagify__dropdown__item__addAll {
    border-bottom: 1px solid var(--color-border);
    gap: 0;
}

.tagify__dropdown.users-list .remove-all-tags {
    grid-area: remove-tags;
    justify-self: self-end;
    font-size: 14px;
    padding: 4px 5px;
    border-radius: 3px;
    user-select: none;
}

.tagify__dropdown.users-list .remove-all-tags:hover {
    color: var(--color-white);
    background: var(--color-warning);
}

/* Tags items */
#users-list .tagify__tag {
    white-space: nowrap;
}

#users-list .tagify__tag img {
    width: 100%;
    vertical-align: top;
    pointer-events: none;
}

#users-list .tagify__tag:hover .tagify__tag__avatar-wrap {
    transform: scale(1.6) translateX(-10%);
}

#users-list .tagify__tag .tagify__tag__avatar-wrap {
    width: 16px;
    height: 16px;
    white-space: normal;
    border-radius: 50%;
    background: var(--gray-3);
    margin-inline-end: 5px;
    transition: 0.12s ease-out;
}

.users-list .tagify__dropdown__itemsGroup:empty {
    display: none;
}

.users-list .tagify__dropdown__itemsGroup::before {
    content: attr(data-title);
    display: inline-block;
    font-size: 14px;
    padding: 4px 6px;
    margin: var(--tagify-dd-item-pad);
    font-style: italic;
    border-radius: 4px;
    background: #29DA82;
    color: var(--color-white);
    font-weight: 600;
}

.users-list .tagify__dropdown__itemsGroup:not(:first-of-type) {
    border-top: 1px solid var(--color-border);
}

.tagify__dropdown__wrapper {
    border: 0 !important;
    box-shadow: none !important;
    background-color: var(--color-white) !important;
}

.tagify__dropdown {
    padding: 4px !important;
    border-bottom-width: 0;
    background: var(--color-white) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow) !important;
    border-radius: 6px !important;
}

.tagify__dropdown__item--active {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.remove-all-tags {
    color: var(--color-white);
}

.tagify--mix .tagify__input {
    padding: 0 !important;
    margin: 0 !important;
}

.tagify__input::before {
    color: var(--color-body) !important;
}

/*----------------------------------------*/
/*  tagify css end
/*----------------------------------------*/
/*# sourceMappingURL=../maps/main.css.map */