@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: bold;
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebBoldfanum.eot');
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebBoldfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff/IRANYekanWebBoldfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff2/IRANYekanWebBoldfanum.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/ttf/IRANYekanWebBoldfanum.ttf') format('truetype');
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 100;
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebThinfanum.eot');
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebThinfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff/IRANYekanWebThinfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff2/IRANYekanWebThinfanum.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/ttf/IRANYekanWebThinfanum.ttf') format('truetype');
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 300;
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebLightfanum.eot');
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebLightfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff/IRANYekanWebLightfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff2/IRANYekanWebLightfanum.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/ttf/IRANYekanWebLightfanum.ttf') format('truetype');
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: normal;
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebRegularfanum.eot');
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebRegularfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff/IRANYekanWebRegularfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff2/IRANYekanWebRegularfanum.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/ttf/IRANYekanWebRegularfanum.ttf') format('truetype');
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 500;
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebMediumfanum.eot');
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebMediumfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff/IRANYekanWebMediumfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff2/IRANYekanWebMediumfanum.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/ttf/IRANYekanWebMediumfanum.ttf') format('truetype');
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 800;
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebExtraBoldfanum.eot');
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebExtraBoldfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff/IRANYekanWebExtraBoldfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff2/IRANYekanWebExtraBoldfanum.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/ttf/IRANYekanWebExtraBoldfanum.ttf') format('truetype');
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 850;
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebBlackfanum.eot');
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebBlackfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff/IRANYekanWebBlackfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff2/IRANYekanWebBlackfanum.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/ttf/IRANYekanWebBlackfanum.ttf') format('truetype');
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 900;
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebExtraBlackfanum.eot');
    src: url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/eot/IRANYekanWebExtraBlackfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff/IRANYekanWebExtraBlackfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/woff2/IRANYekanWebExtraBlackfanum.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/assets/fonts/IRANYekan/Farsi_numerals/WebFonts/fonts/ttf/IRANYekanWebExtraBlackfanum.ttf') format('truetype');
}

@font-face {
    font-family: Miricon;
    src: url("/assets/fonts/mir_hacinhaceb/mir_hacinhaceb.woff") format("woff"), url("/assets/fonts/mir_hacinhaceb/mir_hacinhaceb.ttf") format("truetype"), url("/assets/fonts/mir_hacinhaceb/mir_hacinhaceb.eot") format("embedded-opentype"), url("/assets/fonts/mir_hacinhaceb/mir_hacinhaceb.svg") format("svg");
}
     :root {
    --dark: #242A33;
    --orange: #F68922;
    --orange-dark: #FF6405;
    --secondary: #707886;
    --gray-light: #DDDFE1;
    --white: #FFFFFF;
    --antique-white: #FFECDB;
    --blue: #0066FF;
    --blue-46: #4651E1;
    --blue-60: #6051E1;
    --blue-46-light: #4650e1;
    --mute-color: #808B9C;
    --cadet-blue: #ADB5BD;
    --very-pale-cyan: #DAF9FF;
    --very-pale-cyan-100: #F5F9FF;
    --very-pale-orange: #FFF3DA;
    --very-pale-violet: #F1DAFF;
    --very-pale-lime-green: #DAFFE1;
    --gray-light-2: #E0E2EA;
    --gray-dark: #4B5361;
    --team-header-background-color-1: var(--very-pale-cyan);
    --team-header-background-color-2: var(--very-pale-orange);
    --team-header-background-color-3: var(--very-pale-violet);
    --team-header-background-color-4: var(--very-pale-lime-green);
    --team-header-background-color-5: var(--very-pale-cyan-100);
    --team-header-background-color-6: var(--very-pale-orange);
    --team-header-background-color-7: var(--very-pale-violet);
    --team-header-background-color-8: var(--very-pale-lime-green);
    --silver-light: #D9D9D9;
    --white-ghost: #F8F8FA;
    --pink: #FF2E5B;
    --soft-pink: #E14668;
    --red: #ff0000;
    --main-border-color: #E0E2EA;
    --success: #28a745;
    --success-light: #1fbc8a;
    --danger: #dc3545;
    --primary: #4651E1;
    --warning: #ffc107;
    --body-main-text-color: var(--dark);
    --body-bg: var(--white);
    --border-color-translucent: rgba(0, 0, 0, 0.175);
    --border-color: #F1F1F2;
    --modal-zindex: 1055;
    --modal-width: 500px;
    --modal-padding: 1rem;
    --modal-margin: 0.5rem;
    --modal-color: var(--body-main-text-color);
    --modal-bg: var(--body-bg);
    --modal-border-color: var(--border-color-translucent);
    --modal-border-width: 0;
    --modal-border-radius: 1rem;
    --modal-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    --modal-header-padding: 0.80rem 0.80rem;
    --modal-header-border-color: var(--border-color);
    --modal-header-border-width: 1px;
    --modal-title-line-height: 1.5;
    --modal-footer-gap: 0.5rem;
    --modal-footer-bg:;
    --modal-footer-border-color: var(--border-color);
    --modal-footer-border-width: 1px;
    --drawer-bg: var(--white);
    --drawer-zindex: 1000;
    --input-label-mute-color: #808B9C;
    --input-effect-border-color: var(--orange);
    --input-border-color: var(--main-border-color);
    --input-border-radius: 4px;
    --input-select-padding: 12.5px 14px;
    --table-border-color: var(--main-border-color);
    --tabel-border-radius: 4px;
    --card-border: var(--gray-light);
    --card-border-radius: 8px;
    --card-header-padding: 16px;
    --main-border-radius: 4px;
    --input-checkbox-border-color: #5865F2;
    --input-radio-border-color: #5865F2;
    --input-radio-background-color: #5865F2;
    --body-font-family: iranyekan;
    --bs-blue: #559bfb;
    --bs-indigo: #2c3782;
    --bs-purple: #816bff;
    --bs-pink: #ff63a5;
    --bs-red: #e85347;
    --bs-orange: #ffa353;
    --bs-yellow: #f4bd0e;
    --bs-green: #1ee0ac;
    --bs-teal: #20c997;
    --bs-cyan: #09c2de;
    --bs-white: #fff;
    --bs-gray: #8091a7;
    --bs-gray-dark: #2b3748;
    --bs-gray-100: #ebeef2;
    --bs-gray-200: #e5e9f2;
    --bs-gray-300: #dbdfea;
    --bs-gray-400: #b7c2d0;
    --bs-gray-500: #8091a7;
    --bs-gray-600: #3c4d62;
    --bs-gray-700: #344357;
    --bs-gray-800: #2b3748;
    --bs-gray-900: #1f2b3a;
    --bs-primary: #6576ff;
    --bs-secondary: #364a63;
    --bs-success: #1ee0ac;
    --bs-info: #09c2de;
    --bs-warning: #f4bd0e;
    --bs-danger: #e85347;
    --bs-light: #e5e9f2;
    --bs-dark: #1f2b3a;
    --bs-gray: #8091a7;
    --bs-lighter: #f5f6fa;
    --bs-primary-rgb: 101, 118, 255;
    --bs-secondary-rgb: 54, 74, 99;
    --bs-success-rgb: 30, 224, 172;
    --bs-info-rgb: 9, 194, 222;
    --bs-warning-rgb: 244, 189, 14;
    --bs-danger-rgb: 232, 83, 71;
    --bs-light-rgb: 229, 233, 242;
    --bs-dark-rgb: 31, 43, 58;
    --bs-gray-rgb: 128, 145, 167;
    --bs-lighter-rgb: 245, 246, 250;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 82, 100, 132;
    --bs-body-bg-rgb: 255, 255, 255;
}


*, ::after, ::before {
    box-sizing: inherit
}


.fw-light {
    font-weight: 100 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-normal {
    font-weight: normal !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-bold {
    font-weight: 800 !important;
}

.fw-bolder {
    font-weight: 850 !important;
}

.fw-lighter {
    font-weight: 900 !important;
}


.fs-1 {
    font-size: 2.5rem !important;
}

.fs-2 {
    font-size: 2rem !important;
}

.fs-3 {
    font-size: 1.75rem !important;
}

.fs-4 {
    font-size: 1.5rem !important;
}

.fs-5 {
    font-size: 1.25rem !important;
}

.fs-6 {
    font-size: 1rem !important;
}

.fs-7 {
    font-size: 0.875rem !important;
}

.fs-75 {
    font-size: 0.8125rem !important;
}

.fs-8 {
    font-size: 0.75rem !important;
}

.fs-9 {
    font-size: 0.688rem !important;
}

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

.fs-11 {
    font-size: 0.5625rem !important;
}

.fs-12 {
    font-size: 0.5rem !important;
}


i[class*=mir-], i[class^=mir-] {
    font-family: miricon !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    position: relative;
    display: inline-flex;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--body-font-family);
    background: #fff;
    direction: rtl;
 
    margin: 0px;
    padding: 0px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 12px;
    font-weight: 400;
    color: var(--body-main-text-color);
}

a {
    text-decoration-line: none;
}

h1, h2, h3, h4, h5, h6, input, textarea, select, button {
    font-family: iranyekan !important;
    margin: 0;
    padding: 0;
}


h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

input, textarea, select {
    font-size: 12px !important;
}

.mir-arrow-up-left2:before {
    content: "\ea39";
}

.mir-arrow-up2:before {
    content: "\ea3a";
}

.mir-arrow-up-right2:before {
    content: "\ea3b";
}

.mir-arrow-right2:before {
    content: "\ea3c";
}

.mir-arrow-down-right2:before {
    content: "\ea3d";
}

.mir-arrow-down2:before {
    content: "\ea3e";
}

.mir-arrow-down-left2:before {
    content: "\ea3f";
}

.mir-arrow-left2:before {
    content: "\ea40";
}

.mir-checkmark:before {
    content: "\ea10";
}

.mir-play-circle:before {
    content: "\e93c";
}

.mir-office-work-link:before {
    content: "\e93b";
}

.mir-thunder-lightning-cross:before {
    content: "\e939";
}

.mir-medal-sport:before {
    content: "\e93a";
}


.mir-list-check-svgrepo:before {
    content: "\e936";
}

.mir-arrow-up-down:before {
    content: "\e937";
}

.mir-fallowup:before {
    content: "\e938";
}

.mir-pen-edit2:before {
    content: "\e931";
}

.mir-table-chart:before {
    content: "\e932";
}

.mir-notification-status-circle:before {
    content: "\e933";
}

.mir-menu-burger-square2:before {
    content: "\e934";
}

.mir-menu-burge-sqaure:before {
    content: "\e935";
}

.mir-tick-square .path1:before {
    content: "\e929";
    color: rgb(41, 45, 50);
    opacity: 0.4;
}

.mir-tick-square .path2:before {
    content: "\e92a";
    margin-left: -1em;
    color: rgb(41, 45, 50);
}

.mir-add-pluse:before {
    content: "\e92b";
}

.mir-circle:before {
    content: "\e92c";
}

.mir-tick-circle .path1:before {
    content: "\e92d";
    color: rgb(41, 45, 50);
    opacity: 0.4;
}

.mir-tick-circle .path2:before {
    content: "\e92e";
    margin-left: -1em;
    color: rgb(41, 45, 50);
}

.mir-eye:before {
    content: "\e92f";
}

.mir-download-arrow:before {
    content: "\e930";
}

.mir-pen-edit:before {
    content: "\e928";
}

.mir-trash:before {
    content: "\e927";
}

.mir-plus:before {
    content: "\ea0a";
}

.mir-home1 .path1:before {
    content: "\e91f";
    color: rgb(41, 45, 50);
    opacity: 0.4;
}

.mir-home1 .path2:before {
    content: "\e920";
    margin-left: -1em;
    color: rgb(41, 45, 50);
}

.mir-notification-status .path1:before {
    content: "\e921";
    color: rgb(41, 45, 50);
    opacity: 0.4;
}

.mir-notification-status .path2:before {
    content: "\e922";
    margin-left: -1em;
    color: rgb(41, 45, 50);
    opacity: 0.4;
}

.mir-notification-status .path3:before {
    content: "\e923";
    margin-left: -1em;
    color: rgb(41, 45, 50);
}

.mir-notification-status .path4:before {
    content: "\e924";
    margin-left: -1em;
    color: rgb(41, 45, 50);
}

.mir-setting-2 .path1:before {
    content: "\e925";
    color: rgb(41, 45, 50);
    opacity: 0.4;
}

.mir-setting-2 .path2:before {
    content: "\e926";
    margin-left: -1em;
    color: rgb(41, 45, 50);
}

.mir-receipt-2:before {
    content: "\e914";
}

.mir-empty-wallet:before {
    content: "\e915";
}

.mir-danger:before {
    content: "\e916";
}

.mir-discount-shape:before {
    content: "\e917";
}

.mir-message-question:before {
    content: "\e918";
}

.mir-messages-3:before {
    content: "\e919";
}

.mir-task-square:before {
    content: "\e91a";
}

.mir-book:before {
    content: "\e91b";
}

.mir-note:before {
    content: "\e91c";
}

.mir-menu-board:before {
    content: "\e91d";
}

.mir-video-square:before {
    content: "\e91e";
}

.mir-BiChevronUp:before {
    content: "\e908";
}

.mir-BiChevronDown:before {
    content: "\e911";
}

.mir-BiChevronRight:before {
    content: "\e912";
}

.mir-BiChevronLeft:before {
    content: "\e913";
}

.mir-world:before {
    content: "\e909";
}

.mir-calendar-filled:before {
    content: "\e90a";
}

.mir-phone-call-filled:before {
    content: "\e90b";
}

.mir-pin-filled:before {
    content: "\e90c";
}

.mir-notification:before {
    content: "\e90d";
}

.mir-share-1:before {
    content: "\e90e";
}

.mir-more:before {
    content: "\e90f";
}

.mir-more-vertical:before {
    content: "\e910";
}

.mir-undo:before {
    content: "\e905";
}

.mir-dislike:before {
    content: "\e906";
}

.mir-share:before {
    content: "\e907";
}

.mir-iconly:before {
    content: "\e900";
}

.mir-chevron-updown-1:before {
    content: "\e901";
}

.mir-like:before {
    content: "\e902";
}

.mir-arrow-right:before {
    content: "\e904";
}

.mir-arrow-left:before {
    content: "\e903";
}

.mir-user:before {
    content: "\f101";
}

.mir-customer-service-headset:before {
    content: "\f102";
}

.mir-search:before {
    content: "\f103";
}

.mir-down-arrow:before {
    content: "\f104";
}

.mir-heart:before {
    content: "\f105";
}

.mir-heart-1:before {
    content: "\f106";
}

.mir-verify:before {
    content: "\f107";
}

.mir-messenger:before {
    content: "\f108";
}

.mir-document:before {
    content: "\f109";
}

.mir-trophy:before {
    content: "\f10a";
}

.mir-online-lernen:before {
    content: "\f10b";
}

.mir-education:before {
    content: "\f10c";
}

.mir-reward:before {
    content: "\f10d";
}

.mir-clock:before {
    content: "\f10e";
}

.mir-money:before {
    content: "\f10f";
}

.mir-telegram:before {
    content: "\f110";
}

.mir-whatsapp:before {
    content: "\f111";
}

.mir-instagram:before {
    content: "\f112";
}

.mir-menu:before {
    content: "\f113";
}

.mir-panel:before {
    content: "\f114";
}

.mir-menu-1:before {
    content: "\f115";
}

.mir-bags-shopping:before {
    content: "\f116";
}

.mir-category:before {
    content: "\f118";
}

.mir-right-arrows:before {
    content: "\f119";
}

.mir-calendar:before {
    content: "\f11a";
}

.mir-pin-map:before {
    content: "\f11b";
}

.mir-email:before {
    content: "\f11c";
}

.mir-comment:before {
    content: "\f11d";
}

.mir-email-1:before {
    content: "\f11e";
}

.mir-user-1:before {
    content: "\f11f";
}

.mir-sitemap:before {
    content: "\f120";
}

.mir-pin:before {
    content: "\f121";
}

.mir-phone-call:before {
    content: "\f122";
}

.mir-home:before {
    content: "\f123";
}

.mir-back-left:before {
    content: "\f124";
}

.mir-star:before {
    content: "\f125";
}

.mir-conversation:before {
    content: "\f126";
}

.mir-diamond:before {
    content: "\f127";
}

.mir-archives:before {
    content: "\f128";
}

.mir-coin:before {
    content: "\f129";
}

.mir-ctrl:before {
    content: "\ea50";
}

.mir-play3:before {
    content: "\ea1c";
}



/*!
* Bootstrap Grid v5.3.3 (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container-sm, .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container-md, .container-sm, .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1130px;
    }
}

@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1156px;
    }
}

:root {
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
}

    .row > * {
        box-sizing: border-box;
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        margin-top: var(--bs-gutter-y);
    }

.col {
    flex: 1 0 0%;
}

.row-cols-auto > * {
    flex: 0 0 auto;
    width: auto;
}

.row-cols-1 > * {
    flex: 0 0 auto;
    width: 100%;
}

.row-cols-2 > * {
    flex: 0 0 auto;
    width: 50%;
}

.row-cols-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.row-cols-4 > * {
    flex: 0 0 auto;
    width: 25%;
}

.row-cols-5 > * {
    flex: 0 0 auto;
    width: 20%;
}

.row-cols-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.col-9 {
    flex: 0 0 auto;
    width: 75%;
}

.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

.offset-1 {
    margin-left: 8.33333333%;
}

.offset-2 {
    margin-left: 16.66666667%;
}

.offset-3 {
    margin-left: 25%;
}

.offset-4 {
    margin-left: 33.33333333%;
}

.offset-5 {
    margin-left: 41.66666667%;
}

.offset-6 {
    margin-left: 50%;
}

.offset-7 {
    margin-left: 58.33333333%;
}

.offset-8 {
    margin-left: 66.66666667%;
}

.offset-9 {
    margin-left: 75%;
}

.offset-10 {
    margin-left: 83.33333333%;
}

.offset-11 {
    margin-left: 91.66666667%;
}

.g-0,
.gx-0 {
    --bs-gutter-x: 0;
}

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

.g-1,
.gx-1 {
    --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
    --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
    --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
    --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
    --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
    --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
    --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
    --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
    --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
    --bs-gutter-y: 3rem;
}

@media (min-width: 576px) {
    .col-sm {
        flex: 1 0 0%;
    }

    .row-cols-sm-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-sm-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-sm-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-sm-3 > * {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .row-cols-sm-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-sm-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-sm-6 > * {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .offset-sm-0 {
        margin-left: 0;
    }

    .offset-sm-1 {
        margin-left: 8.33333333%;
    }

    .offset-sm-2 {
        margin-left: 16.66666667%;
    }

    .offset-sm-3 {
        margin-left: 25%;
    }

    .offset-sm-4 {
        margin-left: 33.33333333%;
    }

    .offset-sm-5 {
        margin-left: 41.66666667%;
    }

    .offset-sm-6 {
        margin-left: 50%;
    }

    .offset-sm-7 {
        margin-left: 58.33333333%;
    }

    .offset-sm-8 {
        margin-left: 66.66666667%;
    }

    .offset-sm-9 {
        margin-left: 75%;
    }

    .offset-sm-10 {
        margin-left: 83.33333333%;
    }

    .offset-sm-11 {
        margin-left: 91.66666667%;
    }

    .g-sm-0,
    .gx-sm-0 {
        --bs-gutter-x: 0;
    }

    .g-sm-0,
    .gy-sm-0 {
        --bs-gutter-y: 0;
    }

    .g-sm-1,
    .gx-sm-1 {
        --bs-gutter-x: 0.25rem;
    }

    .g-sm-1,
    .gy-sm-1 {
        --bs-gutter-y: 0.25rem;
    }

    .g-sm-2,
    .gx-sm-2 {
        --bs-gutter-x: 0.5rem;
    }

    .g-sm-2,
    .gy-sm-2 {
        --bs-gutter-y: 0.5rem;
    }

    .g-sm-3,
    .gx-sm-3 {
        --bs-gutter-x: 1rem;
    }

    .g-sm-3,
    .gy-sm-3 {
        --bs-gutter-y: 1rem;
    }

    .g-sm-4,
    .gx-sm-4 {
        --bs-gutter-x: 1.5rem;
    }

    .g-sm-4,
    .gy-sm-4 {
        --bs-gutter-y: 1.5rem;
    }

    .g-sm-5,
    .gx-sm-5 {
        --bs-gutter-x: 3rem;
    }

    .g-sm-5,
    .gy-sm-5 {
        --bs-gutter-y: 3rem;
    }
}

@media (min-width: 768px) {
    .col-md {
        flex: 1 0 0%;
    }

    .row-cols-md-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-md-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-md-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-md-3 > * {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .row-cols-md-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-md-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-md-6 > * {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }

     .col-md-1 {
          flex: 0 0 auto;
          width: 8.33333333%;
	     margin: 5px 0px;
     }

     .col-md-2 {
          flex: 0 0 auto;
          width: 16.66666667%;
	     margin: 5px 0px;
     }

     .col-md-3 {
          flex: 0 0 auto;
          width: 25%;
	     margin: 5px 0px;
     }

     .col-md-4 {
          flex: 0 0 auto;
          width: 33.33333333%;
	     margin: 5px 0px;
     }

     .col-md-5 {
          flex: 0 0 auto;
          width: 41.66666667%;
	     margin: 5px 0px;
     }

     .col-md-6 {
          flex: 0 0 auto;
          width: 50%;
	     margin: 5px 0px;
     }

     .col-md-7 {
          flex: 0 0 auto;
          width: 58.33333333%;
	     margin: 5px 0px;
     }

     .col-md-8 {
          flex: 0 0 auto;
          width: 66.66666667%;
	     margin: 5px 0px;
     }

     .col-md-9 {
          flex: 0 0 auto;
          width: 75%;
	     margin: 5px 0px;
     }

     .col-md-10 {
          flex: 0 0 auto;
          width: 83.33333333%;
	     margin: 5px 0px;
     }

     .col-md-11 {
          flex: 0 0 auto;
          width: 91.66666667%;
	     margin: 5px 0px;
     }

     .col-md-12 {
          flex: 0 0 auto;
          width: 100%;
	     margin: 5px 0px;
     }

    .offset-md-0 {
        margin-left: 0;
    }

    .offset-md-1 {
        margin-left: 8.33333333%;
    }

    .offset-md-2 {
        margin-left: 16.66666667%;
    }

    .offset-md-3 {
        margin-left: 25%;
    }

    .offset-md-4 {
        margin-left: 33.33333333%;
    }

    .offset-md-5 {
        margin-left: 41.66666667%;
    }

    .offset-md-6 {
        margin-left: 50%;
    }

    .offset-md-7 {
        margin-left: 58.33333333%;
    }

    .offset-md-8 {
        margin-left: 66.66666667%;
    }

    .offset-md-9 {
        margin-left: 75%;
    }

    .offset-md-10 {
        margin-left: 83.33333333%;
    }

    .offset-md-11 {
        margin-left: 91.66666667%;
    }

    .g-md-0,
    .gx-md-0 {
        --bs-gutter-x: 0;
    }

    .g-md-0,
    .gy-md-0 {
        --bs-gutter-y: 0;
    }

    .g-md-1,
    .gx-md-1 {
        --bs-gutter-x: 0.25rem;
    }

    .g-md-1,
    .gy-md-1 {
        --bs-gutter-y: 0.25rem;
    }

    .g-md-2,
    .gx-md-2 {
        --bs-gutter-x: 0.5rem;
    }

    .g-md-2,
    .gy-md-2 {
        --bs-gutter-y: 0.5rem;
    }

    .g-md-3,
    .gx-md-3 {
        --bs-gutter-x: 1rem;
    }

    .g-md-3,
    .gy-md-3 {
        --bs-gutter-y: 1rem;
    }

    .g-md-4,
    .gx-md-4 {
        --bs-gutter-x: 1.5rem;
    }

    .g-md-4,
    .gy-md-4 {
        --bs-gutter-y: 1.5rem;
    }

    .g-md-5,
    .gx-md-5 {
        --bs-gutter-x: 3rem;
    }

    .g-md-5,
    .gy-md-5 {
        --bs-gutter-y: 3rem;
    }
}

@media (min-width: 992px) {
    .col-lg {
        flex: 1 0 0%;
    }

    .row-cols-lg-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-lg-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-lg-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-lg-3 > * {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .row-cols-lg-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-lg-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-lg-6 > * {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }

     .col-lg-1 {
          flex: 0 0 auto;
          width: 8.33333333%;
	     margin: 5px 0px;
     }

     .col-lg-2 {
          flex: 0 0 auto;
          width: 16.66666667%;
	     margin: 5px 0px;
     }

     .col-lg-3 {
          flex: 0 0 auto;
          width: 25%;
	     margin: 5px 0px;
     }

     .col-lg-4 {
          flex: 0 0 auto;
          width: 33.33333333%;
	     margin: 5px 0px;
     }

     .col-lg-5 {
          flex: 0 0 auto;
          width: 41.66666667%;
	     margin: 5px 0px;
     }

     .col-lg-6 {
          flex: 0 0 auto;
          width: 50%;
	     margin: 5px 0px;
     }

     .col-lg-7 {
          flex: 0 0 auto;
          width: 58.33333333%;
	     margin: 5px 0px;
     }

     .col-lg-8 {
          flex: 0 0 auto;
          width: 66.66666667%;
	     margin: 5px 0px;
     }

     .col-lg-9 {
          flex: 0 0 auto;
          width: 75%;
	     margin: 5px 0px;
     }

     .col-lg-10 {
          flex: 0 0 auto;
          width: 83.33333333%;
	     margin: 5px 0px;
     }

     .col-lg-11 {
          flex: 0 0 auto;
          width: 91.66666667%;
	     margin: 5px 0px;
     }

     .col-lg-12 {
          flex: 0 0 auto;
          width: 100%;
	     margin: 5px 0px;
     }

    .offset-lg-0 {
        margin-left: 0;
    }

    .offset-lg-1 {
        margin-left: 8.33333333%;
    }

    .offset-lg-2 {
        margin-left: 16.66666667%;
    }

    .offset-lg-3 {
        margin-left: 25%;
    }

    .offset-lg-4 {
        margin-left: 33.33333333%;
    }

    .offset-lg-5 {
        margin-left: 41.66666667%;
    }

    .offset-lg-6 {
        margin-left: 50%;
    }

    .offset-lg-7 {
        margin-left: 58.33333333%;
    }

    .offset-lg-8 {
        margin-left: 66.66666667%;
    }

    .offset-lg-9 {
        margin-left: 75%;
    }

    .offset-lg-10 {
        margin-left: 83.33333333%;
    }

    .offset-lg-11 {
        margin-left: 91.66666667%;
    }

    .g-lg-0,
    .gx-lg-0 {
        --bs-gutter-x: 0;
    }

    .g-lg-0,
    .gy-lg-0 {
        --bs-gutter-y: 0;
    }

    .g-lg-1,
    .gx-lg-1 {
        --bs-gutter-x: 0.25rem;
    }

    .g-lg-1,
    .gy-lg-1 {
        --bs-gutter-y: 0.25rem;
    }

    .g-lg-2,
    .gx-lg-2 {
        --bs-gutter-x: 0.5rem;
    }

    .g-lg-2,
    .gy-lg-2 {
        --bs-gutter-y: 0.5rem;
    }

    .g-lg-3,
    .gx-lg-3 {
        --bs-gutter-x: 1rem;
    }

    .g-lg-3,
    .gy-lg-3 {
        --bs-gutter-y: 1rem;
    }

    .g-lg-4,
    .gx-lg-4 {
        --bs-gutter-x: 1.5rem;
    }

    .g-lg-4,
    .gy-lg-4 {
        --bs-gutter-y: 1.5rem;
    }

    .g-lg-5,
    .gx-lg-5 {
        --bs-gutter-x: 3rem;
    }

    .g-lg-5,
    .gy-lg-5 {
        --bs-gutter-y: 3rem;
    }
}

@media (min-width: 1200px) {
    .col-xl {
        flex: 1 0 0%;
    }

    .row-cols-xl-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-xl-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-xl-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-xl-3 > * {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .row-cols-xl-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-xl-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-xl-6 > * {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .offset-xl-0 {
        margin-left: 0;
    }

    .offset-xl-1 {
        margin-left: 8.33333333%;
    }

    .offset-xl-2 {
        margin-left: 16.66666667%;
    }

    .offset-xl-3 {
        margin-left: 25%;
    }

    .offset-xl-4 {
        margin-left: 33.33333333%;
    }

    .offset-xl-5 {
        margin-left: 41.66666667%;
    }

    .offset-xl-6 {
        margin-left: 50%;
    }

    .offset-xl-7 {
        margin-left: 58.33333333%;
    }

    .offset-xl-8 {
        margin-left: 66.66666667%;
    }

    .offset-xl-9 {
        margin-left: 75%;
    }

    .offset-xl-10 {
        margin-left: 83.33333333%;
    }

    .offset-xl-11 {
        margin-left: 91.66666667%;
    }

    .g-xl-0,
    .gx-xl-0 {
        --bs-gutter-x: 0;
    }

    .g-xl-0,
    .gy-xl-0 {
        --bs-gutter-y: 0;
    }

    .g-xl-1,
    .gx-xl-1 {
        --bs-gutter-x: 0.25rem;
    }

    .g-xl-1,
    .gy-xl-1 {
        --bs-gutter-y: 0.25rem;
    }

    .g-xl-2,
    .gx-xl-2 {
        --bs-gutter-x: 0.5rem;
    }

    .g-xl-2,
    .gy-xl-2 {
        --bs-gutter-y: 0.5rem;
    }

    .g-xl-3,
    .gx-xl-3 {
        --bs-gutter-x: 1rem;
    }

    .g-xl-3,
    .gy-xl-3 {
        --bs-gutter-y: 1rem;
    }

    .g-xl-4,
    .gx-xl-4 {
        --bs-gutter-x: 1.5rem;
    }

    .g-xl-4,
    .gy-xl-4 {
        --bs-gutter-y: 1.5rem;
    }

    .g-xl-5,
    .gx-xl-5 {
        --bs-gutter-x: 3rem;
    }

    .g-xl-5,
    .gy-xl-5 {
        --bs-gutter-y: 3rem;
    }
}

@media (min-width: 1400px) {
    .col-xxl {
        flex: 1 0 0%;
    }

    .row-cols-xxl-auto > * {
        flex: 0 0 auto;
        width: auto;
    }

    .row-cols-xxl-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    .row-cols-xxl-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }

    .row-cols-xxl-3 > * {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .row-cols-xxl-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }

    .row-cols-xxl-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }

    .row-cols-xxl-6 > * {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .offset-xxl-0 {
        margin-left: 0;
    }

    .offset-xxl-1 {
        margin-left: 8.33333333%;
    }

    .offset-xxl-2 {
        margin-left: 16.66666667%;
    }

    .offset-xxl-3 {
        margin-left: 25%;
    }

    .offset-xxl-4 {
        margin-left: 33.33333333%;
    }

    .offset-xxl-5 {
        margin-left: 41.66666667%;
    }

    .offset-xxl-6 {
        margin-left: 50%;
    }

    .offset-xxl-7 {
        margin-left: 58.33333333%;
    }

    .offset-xxl-8 {
        margin-left: 66.66666667%;
    }

    .offset-xxl-9 {
        margin-left: 75%;
    }

    .offset-xxl-10 {
        margin-left: 83.33333333%;
    }

    .offset-xxl-11 {
        margin-left: 91.66666667%;
    }

    .g-xxl-0,
    .gx-xxl-0 {
        --bs-gutter-x: 0;
    }

    .g-xxl-0,
    .gy-xxl-0 {
        --bs-gutter-y: 0;
    }

    .g-xxl-1,
    .gx-xxl-1 {
        --bs-gutter-x: 0.25rem;
    }

    .g-xxl-1,
    .gy-xxl-1 {
        --bs-gutter-y: 0.25rem;
    }

    .g-xxl-2,
    .gx-xxl-2 {
        --bs-gutter-x: 0.5rem;
    }

    .g-xxl-2,
    .gy-xxl-2 {
        --bs-gutter-y: 0.5rem;
    }

    .g-xxl-3,
    .gx-xxl-3 {
        --bs-gutter-x: 1rem;
    }

    .g-xxl-3,
    .gy-xxl-3 {
        --bs-gutter-y: 1rem;
    }

    .g-xxl-4,
    .gx-xxl-4 {
        --bs-gutter-x: 1.5rem;
    }

    .g-xxl-4,
    .gy-xxl-4 {
        --bs-gutter-y: 1.5rem;
    }

    .g-xxl-5,
    .gx-xxl-5 {
        --bs-gutter-x: 3rem;
    }

    .g-xxl-5,
    .gy-xxl-5 {
        --bs-gutter-y: 3rem;
    }
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-block {
    display: block !important;
}

.d-grid {
    display: grid !important;
}

.d-inline-grid {
    display: inline-grid !important;
}

.d-table {
    display: table !important;
}

.d-table-row {
    display: table-row !important;
}

.d-table-cell {
    display: table-cell !important;
}

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.d-none {
    display: none !important;
}

.flex-fill {
    flex: 1 1 auto !important;
}

.flex-row {
    flex-direction: row !important;
}

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

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-column-reverse {
    flex-direction: column-reverse !important;
}

.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

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

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

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.justify-content-evenly {
    justify-content: space-evenly !important;
}

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

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

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

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

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

.align-content-start {
    align-content: flex-start !important;
}

.align-content-end {
    align-content: flex-end !important;
}

.align-content-center {
    align-content: center !important;
}

.align-content-between {
    align-content: space-between !important;
}

.align-content-around {
    align-content: space-around !important;
}

.align-content-stretch {
    align-content: stretch !important;
}

.align-self-auto {
    align-self: auto !important;
}

.align-self-start {
    align-self: flex-start !important;
}

.align-self-end {
    align-self: flex-end !important;
}

.align-self-center {
    align-self: center !important;
}

.align-self-baseline {
    align-self: baseline !important;
}

.align-self-stretch {
    align-self: stretch !important;
}

.order-first {
    order: -1 !important;
}

.order-0 {
    order: 0 !important;
}

.order-1 {
    order: 1 !important;
}

.order-2 {
    order: 2 !important;
}

.order-3 {
    order: 3 !important;
}

.order-4 {
    order: 4 !important;
}

.order-5 {
    order: 5 !important;
}

.order-last {
    order: 6 !important;
}

.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.m-auto {
    margin: auto !important;
}

.mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mx-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
}

.mx-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
}

.mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.mx-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
}

.mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mt-auto {
    margin-top: auto !important;
}

.me-0 {
    margin-right: 0 !important;
}

.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}

.me-4 {
    margin-right: 1.5rem !important;
}

.me-5 {
    margin-right: 3rem !important;
}

.me-auto {
    margin-right: auto !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

.ms-0 {
    margin-left: 0 !important;
}

.ms-1 {
    margin-left: 0.25rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.ms-3 {
    margin-left: 1rem !important;
}

.ms-4 {
    margin-left: 1.5rem !important;
}

.ms-5 {
    margin-left: 3rem !important;
}

.ms-auto {
    margin-left: auto !important;
}

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.px-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.px-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
}

.px-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

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

.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: 0.25rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.pe-0 {
    padding-right: 0 !important;
}

.pe-1 {
    padding-right: 0.25rem !important;
}

.pe-2 {
    padding-right: 0.5rem !important;
}

.pe-3 {
    padding-right: 1rem !important;
}

.pe-4 {
    padding-right: 1.5rem !important;
}

.pe-5 {
    padding-right: 3rem !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-1 {
    padding-bottom: 0.25rem !important;
}

.pb-2 {
    padding-bottom: 0.5rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.pb-5 {
    padding-bottom: 3rem !important;
}

.ps-0 {
    padding-left: 0 !important;
}

.ps-1 {
    padding-left: 0.25rem !important;
}

.ps-2 {
    padding-left: 0.5rem !important;
}

.ps-3 {
    padding-left: 1rem !important;
}

.ps-4 {
    padding-left: 1.5rem !important;
}

.ps-5 {
    padding-left: 3rem !important;
}

@media (min-width: 576px) {
    .d-sm-inline {
        display: inline !important;
    }

    .d-sm-inline-block {
        display: inline-block !important;
    }

    .d-sm-block {
        display: block !important;
    }

    .d-sm-grid {
        display: grid !important;
    }

    .d-sm-inline-grid {
        display: inline-grid !important;
    }

    .d-sm-table {
        display: table !important;
    }

    .d-sm-table-row {
        display: table-row !important;
    }

    .d-sm-table-cell {
        display: table-cell !important;
    }

    .d-sm-flex {
        display: flex !important;
    }

    .d-sm-inline-flex {
        display: inline-flex !important;
    }

    .d-sm-none {
        display: none !important;
    }

    .flex-sm-fill {
        flex: 1 1 auto !important;
    }

    .flex-sm-row {
        flex-direction: row !important;
    }

    .flex-sm-column {
        flex-direction: column !important;
    }

    .flex-sm-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-sm-column-reverse {
        flex-direction: column-reverse !important;
    }

    .flex-sm-grow-0 {
        flex-grow: 0 !important;
    }

    .flex-sm-grow-1 {
        flex-grow: 1 !important;
    }

    .flex-sm-shrink-0 {
        flex-shrink: 0 !important;
    }

    .flex-sm-shrink-1 {
        flex-shrink: 1 !important;
    }

    .flex-sm-wrap {
        flex-wrap: wrap !important;
    }

    .flex-sm-nowrap {
        flex-wrap: nowrap !important;
    }

    .flex-sm-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .justify-content-sm-start {
        justify-content: flex-start !important;
    }

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

    .justify-content-sm-center {
        justify-content: center !important;
    }

    .justify-content-sm-between {
        justify-content: space-between !important;
    }

    .justify-content-sm-around {
        justify-content: space-around !important;
    }

    .justify-content-sm-evenly {
        justify-content: space-evenly !important;
    }

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

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

    .align-items-sm-center {
        align-items: center !important;
    }

    .align-items-sm-baseline {
        align-items: baseline !important;
    }

    .align-items-sm-stretch {
        align-items: stretch !important;
    }

    .align-content-sm-start {
        align-content: flex-start !important;
    }

    .align-content-sm-end {
        align-content: flex-end !important;
    }

    .align-content-sm-center {
        align-content: center !important;
    }

    .align-content-sm-between {
        align-content: space-between !important;
    }

    .align-content-sm-around {
        align-content: space-around !important;
    }

    .align-content-sm-stretch {
        align-content: stretch !important;
    }

    .align-self-sm-auto {
        align-self: auto !important;
    }

    .align-self-sm-start {
        align-self: flex-start !important;
    }

    .align-self-sm-end {
        align-self: flex-end !important;
    }

    .align-self-sm-center {
        align-self: center !important;
    }

    .align-self-sm-baseline {
        align-self: baseline !important;
    }

    .align-self-sm-stretch {
        align-self: stretch !important;
    }

    .order-sm-first {
        order: -1 !important;
    }

    .order-sm-0 {
        order: 0 !important;
    }

    .order-sm-1 {
        order: 1 !important;
    }

    .order-sm-2 {
        order: 2 !important;
    }

    .order-sm-3 {
        order: 3 !important;
    }

    .order-sm-4 {
        order: 4 !important;
    }

    .order-sm-5 {
        order: 5 !important;
    }

    .order-sm-last {
        order: 6 !important;
    }

    .m-sm-0 {
        margin: 0 !important;
    }

    .m-sm-1 {
        margin: 0.25rem !important;
    }

    .m-sm-2 {
        margin: 0.5rem !important;
    }

    .m-sm-3 {
        margin: 1rem !important;
    }

    .m-sm-4 {
        margin: 1.5rem !important;
    }

    .m-sm-5 {
        margin: 3rem !important;
    }

    .m-sm-auto {
        margin: auto !important;
    }

    .mx-sm-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .mx-sm-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .mx-sm-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .mx-sm-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .mx-sm-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .mx-sm-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .mx-sm-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .my-sm-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .my-sm-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .my-sm-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .my-sm-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .my-sm-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .my-sm-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .my-sm-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .mt-sm-0 {
        margin-top: 0 !important;
    }

    .mt-sm-1 {
        margin-top: 0.25rem !important;
    }

    .mt-sm-2 {
        margin-top: 0.5rem !important;
    }

    .mt-sm-3 {
        margin-top: 1rem !important;
    }

    .mt-sm-4 {
        margin-top: 1.5rem !important;
    }

    .mt-sm-5 {
        margin-top: 3rem !important;
    }

    .mt-sm-auto {
        margin-top: auto !important;
    }

    .me-sm-0 {
        margin-right: 0 !important;
    }

    .me-sm-1 {
        margin-right: 0.25rem !important;
    }

    .me-sm-2 {
        margin-right: 0.5rem !important;
    }

    .me-sm-3 {
        margin-right: 1rem !important;
    }

    .me-sm-4 {
        margin-right: 1.5rem !important;
    }

    .me-sm-5 {
        margin-right: 3rem !important;
    }

    .me-sm-auto {
        margin-right: auto !important;
    }

    .mb-sm-0 {
        margin-bottom: 0 !important;
    }

    .mb-sm-1 {
        margin-bottom: 0.25rem !important;
    }

    .mb-sm-2 {
        margin-bottom: 0.5rem !important;
    }

    .mb-sm-3 {
        margin-bottom: 1rem !important;
    }

    .mb-sm-4 {
        margin-bottom: 1.5rem !important;
    }

    .mb-sm-5 {
        margin-bottom: 3rem !important;
    }

    .mb-sm-auto {
        margin-bottom: auto !important;
    }

    .ms-sm-0 {
        margin-left: 0 !important;
    }

    .ms-sm-1 {
        margin-left: 0.25rem !important;
    }

    .ms-sm-2 {
        margin-left: 0.5rem !important;
    }

    .ms-sm-3 {
        margin-left: 1rem !important;
    }

    .ms-sm-4 {
        margin-left: 1.5rem !important;
    }

    .ms-sm-5 {
        margin-left: 3rem !important;
    }

    .ms-sm-auto {
        margin-left: auto !important;
    }

    .p-sm-0 {
        padding: 0 !important;
    }

    .p-sm-1 {
        padding: 0.25rem !important;
    }

    .p-sm-2 {
        padding: 0.5rem !important;
    }

    .p-sm-3 {
        padding: 1rem !important;
    }

    .p-sm-4 {
        padding: 1.5rem !important;
    }

    .p-sm-5 {
        padding: 3rem !important;
    }

    .px-sm-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .px-sm-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .px-sm-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .px-sm-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .px-sm-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .px-sm-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .py-sm-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .py-sm-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .py-sm-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .py-sm-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-sm-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .py-sm-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .pt-sm-0 {
        padding-top: 0 !important;
    }

    .pt-sm-1 {
        padding-top: 0.25rem !important;
    }

    .pt-sm-2 {
        padding-top: 0.5rem !important;
    }

    .pt-sm-3 {
        padding-top: 1rem !important;
    }

    .pt-sm-4 {
        padding-top: 1.5rem !important;
    }

    .pt-sm-5 {
        padding-top: 3rem !important;
    }

    .pe-sm-0 {
        padding-right: 0 !important;
    }

    .pe-sm-1 {
        padding-right: 0.25rem !important;
    }

    .pe-sm-2 {
        padding-right: 0.5rem !important;
    }

    .pe-sm-3 {
        padding-right: 1rem !important;
    }

    .pe-sm-4 {
        padding-right: 1.5rem !important;
    }

    .pe-sm-5 {
        padding-right: 3rem !important;
    }

    .pb-sm-0 {
        padding-bottom: 0 !important;
    }

    .pb-sm-1 {
        padding-bottom: 0.25rem !important;
    }

    .pb-sm-2 {
        padding-bottom: 0.5rem !important;
    }

    .pb-sm-3 {
        padding-bottom: 1rem !important;
    }

    .pb-sm-4 {
        padding-bottom: 1.5rem !important;
    }

    .pb-sm-5 {
        padding-bottom: 3rem !important;
    }

    .ps-sm-0 {
        padding-left: 0 !important;
    }

    .ps-sm-1 {
        padding-left: 0.25rem !important;
    }

    .ps-sm-2 {
        padding-left: 0.5rem !important;
    }

    .ps-sm-3 {
        padding-left: 1rem !important;
    }

    .ps-sm-4 {
        padding-left: 1.5rem !important;
    }

    .ps-sm-5 {
        padding-left: 3rem !important;
    }
}

@media (min-width: 768px) {
    .d-md-inline {
        display: inline !important;
    }

    .d-md-inline-block {
        display: inline-block !important;
    }

    .d-md-block {
        display: block !important;
    }

    .d-md-grid {
        display: grid !important;
    }

    .d-md-inline-grid {
        display: inline-grid !important;
    }

    .d-md-table {
        display: table !important;
    }

    .d-md-table-row {
        display: table-row !important;
    }

    .d-md-table-cell {
        display: table-cell !important;
    }

    .d-md-flex {
        display: flex !important;
    }

    .d-md-inline-flex {
        display: inline-flex !important;
    }

    .d-md-none {
        display: none !important;
    }

    .flex-md-fill {
        flex: 1 1 auto !important;
    }

    .flex-md-row {
        flex-direction: row !important;
    }

    .flex-md-column {
        flex-direction: column !important;
    }

    .flex-md-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-md-column-reverse {
        flex-direction: column-reverse !important;
    }

    .flex-md-grow-0 {
        flex-grow: 0 !important;
    }

    .flex-md-grow-1 {
        flex-grow: 1 !important;
    }

    .flex-md-shrink-0 {
        flex-shrink: 0 !important;
    }

    .flex-md-shrink-1 {
        flex-shrink: 1 !important;
    }

    .flex-md-wrap {
        flex-wrap: wrap !important;
    }

    .flex-md-nowrap {
        flex-wrap: nowrap !important;
    }

    .flex-md-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .justify-content-md-start {
        justify-content: flex-start !important;
    }

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

    .justify-content-md-center {
        justify-content: center !important;
    }

    .justify-content-md-between {
        justify-content: space-between !important;
    }

    .justify-content-md-around {
        justify-content: space-around !important;
    }

    .justify-content-md-evenly {
        justify-content: space-evenly !important;
    }

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

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

    .align-items-md-center {
        align-items: center !important;
    }

    .align-items-md-baseline {
        align-items: baseline !important;
    }

    .align-items-md-stretch {
        align-items: stretch !important;
    }

    .align-content-md-start {
        align-content: flex-start !important;
    }

    .align-content-md-end {
        align-content: flex-end !important;
    }

    .align-content-md-center {
        align-content: center !important;
    }

    .align-content-md-between {
        align-content: space-between !important;
    }

    .align-content-md-around {
        align-content: space-around !important;
    }

    .align-content-md-stretch {
        align-content: stretch !important;
    }

    .align-self-md-auto {
        align-self: auto !important;
    }

    .align-self-md-start {
        align-self: flex-start !important;
    }

    .align-self-md-end {
        align-self: flex-end !important;
    }

    .align-self-md-center {
        align-self: center !important;
    }

    .align-self-md-baseline {
        align-self: baseline !important;
    }

    .align-self-md-stretch {
        align-self: stretch !important;
    }

    .order-md-first {
        order: -1 !important;
    }

    .order-md-0 {
        order: 0 !important;
    }

    .order-md-1 {
        order: 1 !important;
    }

    .order-md-2 {
        order: 2 !important;
    }

    .order-md-3 {
        order: 3 !important;
    }

    .order-md-4 {
        order: 4 !important;
    }

    .order-md-5 {
        order: 5 !important;
    }

    .order-md-last {
        order: 6 !important;
    }

    .m-md-0 {
        margin: 0 !important;
    }

    .m-md-1 {
        margin: 0.25rem !important;
    }

    .m-md-2 {
        margin: 0.5rem !important;
    }

    .m-md-3 {
        margin: 1rem !important;
    }

    .m-md-4 {
        margin: 1.5rem !important;
    }

    .m-md-5 {
        margin: 3rem !important;
    }

    .m-md-auto {
        margin: auto !important;
    }

    .mx-md-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .mx-md-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .mx-md-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .mx-md-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .mx-md-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .mx-md-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .mx-md-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .my-md-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .my-md-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .my-md-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .my-md-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .my-md-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .my-md-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .my-md-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .mt-md-0 {
        margin-top: 0 !important;
    }

    .mt-md-1 {
        margin-top: 0.25rem !important;
    }

    .mt-md-2 {
        margin-top: 0.5rem !important;
    }

    .mt-md-3 {
        margin-top: 1rem !important;
    }

    .mt-md-4 {
        margin-top: 1.5rem !important;
    }

    .mt-md-5 {
        margin-top: 3rem !important;
    }

    .mt-md-auto {
        margin-top: auto !important;
    }

    .me-md-0 {
        margin-right: 0 !important;
    }

    .me-md-1 {
        margin-right: 0.25rem !important;
    }

    .me-md-2 {
        margin-right: 0.5rem !important;
    }

    .me-md-3 {
        margin-right: 1rem !important;
    }

    .me-md-4 {
        margin-right: 1.5rem !important;
    }

    .me-md-5 {
        margin-right: 3rem !important;
    }

    .me-md-auto {
        margin-right: auto !important;
    }

    .mb-md-0 {
        margin-bottom: 0 !important;
    }

    .mb-md-1 {
        margin-bottom: 0.25rem !important;
    }

    .mb-md-2 {
        margin-bottom: 0.5rem !important;
    }

    .mb-md-3 {
        margin-bottom: 1rem !important;
    }

    .mb-md-4 {
        margin-bottom: 1.5rem !important;
    }

    .mb-md-5 {
        margin-bottom: 3rem !important;
    }

    .mb-md-auto {
        margin-bottom: auto !important;
    }

    .ms-md-0 {
        margin-left: 0 !important;
    }

    .ms-md-1 {
        margin-left: 0.25rem !important;
    }

    .ms-md-2 {
        margin-left: 0.5rem !important;
    }

    .ms-md-3 {
        margin-left: 1rem !important;
    }

    .ms-md-4 {
        margin-left: 1.5rem !important;
    }

    .ms-md-5 {
        margin-left: 3rem !important;
    }

    .ms-md-auto {
        margin-left: auto !important;
    }

    .p-md-0 {
        padding: 0 !important;
    }

    .p-md-1 {
        padding: 0.25rem !important;
    }

    .p-md-2 {
        padding: 0.5rem !important;
    }

    .p-md-3 {
        padding: 1rem !important;
    }

    .p-md-4 {
        padding: 1.5rem !important;
    }

    .p-md-5 {
        padding: 3rem !important;
    }

    .px-md-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .px-md-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .px-md-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .px-md-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .px-md-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .px-md-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .py-md-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .py-md-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .py-md-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .py-md-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-md-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .py-md-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .pt-md-0 {
        padding-top: 0 !important;
    }

    .pt-md-1 {
        padding-top: 0.25rem !important;
    }

    .pt-md-2 {
        padding-top: 0.5rem !important;
    }

    .pt-md-3 {
        padding-top: 1rem !important;
    }

    .pt-md-4 {
        padding-top: 1.5rem !important;
    }

    .pt-md-5 {
        padding-top: 3rem !important;
    }

    .pe-md-0 {
        padding-right: 0 !important;
    }

    .pe-md-1 {
        padding-right: 0.25rem !important;
    }

    .pe-md-2 {
        padding-right: 0.5rem !important;
    }

    .pe-md-3 {
        padding-right: 1rem !important;
    }

    .pe-md-4 {
        padding-right: 1.5rem !important;
    }

    .pe-md-5 {
        padding-right: 3rem !important;
    }

    .pb-md-0 {
        padding-bottom: 0 !important;
    }

    .pb-md-1 {
        padding-bottom: 0.25rem !important;
    }

    .pb-md-2 {
        padding-bottom: 0.5rem !important;
    }

    .pb-md-3 {
        padding-bottom: 1rem !important;
    }

    .pb-md-4 {
        padding-bottom: 1.5rem !important;
    }

    .pb-md-5 {
        padding-bottom: 3rem !important;
    }

    .ps-md-0 {
        padding-left: 0 !important;
    }

    .ps-md-1 {
        padding-left: 0.25rem !important;
    }

    .ps-md-2 {
        padding-left: 0.5rem !important;
    }

    .ps-md-3 {
        padding-left: 1rem !important;
    }

    .ps-md-4 {
        padding-left: 1.5rem !important;
    }

    .ps-md-5 {
        padding-left: 3rem !important;
    }
}

@media (min-width: 992px) {
    .d-lg-inline {
        display: inline !important;
    }

    .d-lg-inline-block {
        display: inline-block !important;
    }

    .d-lg-block {
        display: block !important;
    }

    .d-lg-grid {
        display: grid !important;
    }

    .d-lg-inline-grid {
        display: inline-grid !important;
    }

    .d-lg-table {
        display: table !important;
    }

    .d-lg-table-row {
        display: table-row !important;
    }

    .d-lg-table-cell {
        display: table-cell !important;
    }

    .d-lg-flex {
        display: flex !important;
    }

    .d-lg-inline-flex {
        display: inline-flex !important;
    }

    .d-lg-none {
        display: none !important;
    }

    .flex-lg-fill {
        flex: 1 1 auto !important;
    }

    .flex-lg-row {
        flex-direction: row !important;
    }

    .flex-lg-column {
        flex-direction: column !important;
    }

    .flex-lg-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-lg-column-reverse {
        flex-direction: column-reverse !important;
    }

    .flex-lg-grow-0 {
        flex-grow: 0 !important;
    }

    .flex-lg-grow-1 {
        flex-grow: 1 !important;
    }

    .flex-lg-shrink-0 {
        flex-shrink: 0 !important;
    }

    .flex-lg-shrink-1 {
        flex-shrink: 1 !important;
    }

    .flex-lg-wrap {
        flex-wrap: wrap !important;
    }

    .flex-lg-nowrap {
        flex-wrap: nowrap !important;
    }

    .flex-lg-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .justify-content-lg-start {
        justify-content: flex-start !important;
    }

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

    .justify-content-lg-center {
        justify-content: center !important;
    }

    .justify-content-lg-between {
        justify-content: space-between !important;
    }

    .justify-content-lg-around {
        justify-content: space-around !important;
    }

    .justify-content-lg-evenly {
        justify-content: space-evenly !important;
    }

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

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

    .align-items-lg-center {
        align-items: center !important;
    }

    .align-items-lg-baseline {
        align-items: baseline !important;
    }

    .align-items-lg-stretch {
        align-items: stretch !important;
    }

    .align-content-lg-start {
        align-content: flex-start !important;
    }

    .align-content-lg-end {
        align-content: flex-end !important;
    }

    .align-content-lg-center {
        align-content: center !important;
    }

    .align-content-lg-between {
        align-content: space-between !important;
    }

    .align-content-lg-around {
        align-content: space-around !important;
    }

    .align-content-lg-stretch {
        align-content: stretch !important;
    }

    .align-self-lg-auto {
        align-self: auto !important;
    }

    .align-self-lg-start {
        align-self: flex-start !important;
    }

    .align-self-lg-end {
        align-self: flex-end !important;
    }

    .align-self-lg-center {
        align-self: center !important;
    }

    .align-self-lg-baseline {
        align-self: baseline !important;
    }

    .align-self-lg-stretch {
        align-self: stretch !important;
    }

    .order-lg-first {
        order: -1 !important;
    }

    .order-lg-0 {
        order: 0 !important;
    }

    .order-lg-1 {
        order: 1 !important;
    }

    .order-lg-2 {
        order: 2 !important;
    }

    .order-lg-3 {
        order: 3 !important;
    }

    .order-lg-4 {
        order: 4 !important;
    }

    .order-lg-5 {
        order: 5 !important;
    }

    .order-lg-last {
        order: 6 !important;
    }

    .m-lg-0 {
        margin: 0 !important;
    }

    .m-lg-1 {
        margin: 0.25rem !important;
    }

    .m-lg-2 {
        margin: 0.5rem !important;
    }

    .m-lg-3 {
        margin: 1rem !important;
    }

    .m-lg-4 {
        margin: 1.5rem !important;
    }

    .m-lg-5 {
        margin: 3rem !important;
    }

    .m-lg-auto {
        margin: auto !important;
    }

    .mx-lg-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .mx-lg-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .mx-lg-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .mx-lg-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .mx-lg-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .mx-lg-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .mx-lg-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .my-lg-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .my-lg-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .my-lg-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .my-lg-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .my-lg-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .my-lg-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .my-lg-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .mt-lg-0 {
        margin-top: 0 !important;
    }

    .mt-lg-1 {
        margin-top: 0.25rem !important;
    }

    .mt-lg-2 {
        margin-top: 0.5rem !important;
    }

    .mt-lg-3 {
        margin-top: 1rem !important;
    }

    .mt-lg-4 {
        margin-top: 1.5rem !important;
    }

    .mt-lg-5 {
        margin-top: 3rem !important;
    }

    .mt-lg-auto {
        margin-top: auto !important;
    }

    .me-lg-0 {
        margin-right: 0 !important;
    }

    .me-lg-1 {
        margin-right: 0.25rem !important;
    }

    .me-lg-2 {
        margin-right: 0.5rem !important;
    }

    .me-lg-3 {
        margin-right: 1rem !important;
    }

    .me-lg-4 {
        margin-right: 1.5rem !important;
    }

    .me-lg-5 {
        margin-right: 3rem !important;
    }

    .me-lg-auto {
        margin-right: auto !important;
    }

    .mb-lg-0 {
        margin-bottom: 0 !important;
    }

    .mb-lg-1 {
        margin-bottom: 0.25rem !important;
    }

    .mb-lg-2 {
        margin-bottom: 0.5rem !important;
    }

    .mb-lg-3 {
        margin-bottom: 1rem !important;
    }

    .mb-lg-4 {
        margin-bottom: 1.5rem !important;
    }

    .mb-lg-5 {
        margin-bottom: 3rem !important;
    }

    .mb-lg-auto {
        margin-bottom: auto !important;
    }

    .ms-lg-0 {
        margin-left: 0 !important;
    }

    .ms-lg-1 {
        margin-left: 0.25rem !important;
    }

    .ms-lg-2 {
        margin-left: 0.5rem !important;
    }

    .ms-lg-3 {
        margin-left: 1rem !important;
    }

    .ms-lg-4 {
        margin-left: 1.5rem !important;
    }

    .ms-lg-5 {
        margin-left: 3rem !important;
    }

    .ms-lg-auto {
        margin-left: auto !important;
    }

    .p-lg-0 {
        padding: 0 !important;
    }

    .p-lg-1 {
        padding: 0.25rem !important;
    }

    .p-lg-2 {
        padding: 0.5rem !important;
    }

    .p-lg-3 {
        padding: 1rem !important;
    }

    .p-lg-4 {
        padding: 1.5rem !important;
    }

    .p-lg-5 {
        padding: 3rem !important;
    }

    .px-lg-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .px-lg-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .px-lg-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .px-lg-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .px-lg-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .px-lg-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .py-lg-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .py-lg-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .py-lg-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .py-lg-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-lg-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .py-lg-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .pt-lg-0 {
        padding-top: 0 !important;
    }

    .pt-lg-1 {
        padding-top: 0.25rem !important;
    }

    .pt-lg-2 {
        padding-top: 0.5rem !important;
    }

    .pt-lg-3 {
        padding-top: 1rem !important;
    }

    .pt-lg-4 {
        padding-top: 1.5rem !important;
    }

    .pt-lg-5 {
        padding-top: 3rem !important;
    }

    .pe-lg-0 {
        padding-right: 0 !important;
    }

    .pe-lg-1 {
        padding-right: 0.25rem !important;
    }

    .pe-lg-2 {
        padding-right: 0.5rem !important;
    }

    .pe-lg-3 {
        padding-right: 1rem !important;
    }

    .pe-lg-4 {
        padding-right: 1.5rem !important;
    }

    .pe-lg-5 {
        padding-right: 3rem !important;
    }

    .pb-lg-0 {
        padding-bottom: 0 !important;
    }

    .pb-lg-1 {
        padding-bottom: 0.25rem !important;
    }

    .pb-lg-2 {
        padding-bottom: 0.5rem !important;
    }

    .pb-lg-3 {
        padding-bottom: 1rem !important;
    }

    .pb-lg-4 {
        padding-bottom: 1.5rem !important;
    }

    .pb-lg-5 {
        padding-bottom: 3rem !important;
    }

    .ps-lg-0 {
        padding-left: 0 !important;
    }

    .ps-lg-1 {
        padding-left: 0.25rem !important;
    }

    .ps-lg-2 {
        padding-left: 0.5rem !important;
    }

    .ps-lg-3 {
        padding-left: 1rem !important;
    }

    .ps-lg-4 {
        padding-left: 1.5rem !important;
    }

    .ps-lg-5 {
        padding-left: 3rem !important;
    }
}

@media (min-width: 1200px) {
    .d-xl-inline {
        display: inline !important;
    }

    .d-xl-inline-block {
        display: inline-block !important;
    }

    .d-xl-block {
        display: block !important;
    }

    .d-xl-grid {
        display: grid !important;
    }

    .d-xl-inline-grid {
        display: inline-grid !important;
    }

    .d-xl-table {
        display: table !important;
    }

    .d-xl-table-row {
        display: table-row !important;
    }

    .d-xl-table-cell {
        display: table-cell !important;
    }

    .d-xl-flex {
        display: flex !important;
    }

    .d-xl-inline-flex {
        display: inline-flex !important;
    }

    .d-xl-none {
        display: none !important;
    }

    .flex-xl-fill {
        flex: 1 1 auto !important;
    }

    .flex-xl-row {
        flex-direction: row !important;
    }

    .flex-xl-column {
        flex-direction: column !important;
    }

    .flex-xl-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-xl-column-reverse {
        flex-direction: column-reverse !important;
    }

    .flex-xl-grow-0 {
        flex-grow: 0 !important;
    }

    .flex-xl-grow-1 {
        flex-grow: 1 !important;
    }

    .flex-xl-shrink-0 {
        flex-shrink: 0 !important;
    }

    .flex-xl-shrink-1 {
        flex-shrink: 1 !important;
    }

    .flex-xl-wrap {
        flex-wrap: wrap !important;
    }

    .flex-xl-nowrap {
        flex-wrap: nowrap !important;
    }

    .flex-xl-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .justify-content-xl-start {
        justify-content: flex-start !important;
    }

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

    .justify-content-xl-center {
        justify-content: center !important;
    }

    .justify-content-xl-between {
        justify-content: space-between !important;
    }

    .justify-content-xl-around {
        justify-content: space-around !important;
    }

    .justify-content-xl-evenly {
        justify-content: space-evenly !important;
    }

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

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

    .align-items-xl-center {
        align-items: center !important;
    }

    .align-items-xl-baseline {
        align-items: baseline !important;
    }

    .align-items-xl-stretch {
        align-items: stretch !important;
    }

    .align-content-xl-start {
        align-content: flex-start !important;
    }

    .align-content-xl-end {
        align-content: flex-end !important;
    }

    .align-content-xl-center {
        align-content: center !important;
    }

    .align-content-xl-between {
        align-content: space-between !important;
    }

    .align-content-xl-around {
        align-content: space-around !important;
    }

    .align-content-xl-stretch {
        align-content: stretch !important;
    }

    .align-self-xl-auto {
        align-self: auto !important;
    }

    .align-self-xl-start {
        align-self: flex-start !important;
    }

    .align-self-xl-end {
        align-self: flex-end !important;
    }

    .align-self-xl-center {
        align-self: center !important;
    }

    .align-self-xl-baseline {
        align-self: baseline !important;
    }

    .align-self-xl-stretch {
        align-self: stretch !important;
    }

    .order-xl-first {
        order: -1 !important;
    }

    .order-xl-0 {
        order: 0 !important;
    }

    .order-xl-1 {
        order: 1 !important;
    }

    .order-xl-2 {
        order: 2 !important;
    }

    .order-xl-3 {
        order: 3 !important;
    }

    .order-xl-4 {
        order: 4 !important;
    }

    .order-xl-5 {
        order: 5 !important;
    }

    .order-xl-last {
        order: 6 !important;
    }

    .m-xl-0 {
        margin: 0 !important;
    }

    .m-xl-1 {
        margin: 0.25rem !important;
    }

    .m-xl-2 {
        margin: 0.5rem !important;
    }

    .m-xl-3 {
        margin: 1rem !important;
    }

    .m-xl-4 {
        margin: 1.5rem !important;
    }

    .m-xl-5 {
        margin: 3rem !important;
    }

    .m-xl-auto {
        margin: auto !important;
    }

    .mx-xl-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .mx-xl-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .mx-xl-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .mx-xl-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .mx-xl-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .mx-xl-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .mx-xl-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .my-xl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .my-xl-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .my-xl-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .my-xl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .my-xl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .my-xl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .my-xl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .mt-xl-0 {
        margin-top: 0 !important;
    }

    .mt-xl-1 {
        margin-top: 0.25rem !important;
    }

    .mt-xl-2 {
        margin-top: 0.5rem !important;
    }

    .mt-xl-3 {
        margin-top: 1rem !important;
    }

    .mt-xl-4 {
        margin-top: 1.5rem !important;
    }

    .mt-xl-5 {
        margin-top: 3rem !important;
    }

    .mt-xl-auto {
        margin-top: auto !important;
    }

    .me-xl-0 {
        margin-right: 0 !important;
    }

    .me-xl-1 {
        margin-right: 0.25rem !important;
    }

    .me-xl-2 {
        margin-right: 0.5rem !important;
    }

    .me-xl-3 {
        margin-right: 1rem !important;
    }

    .me-xl-4 {
        margin-right: 1.5rem !important;
    }

    .me-xl-5 {
        margin-right: 3rem !important;
    }

    .me-xl-auto {
        margin-right: auto !important;
    }

    .mb-xl-0 {
        margin-bottom: 0 !important;
    }

    .mb-xl-1 {
        margin-bottom: 0.25rem !important;
    }

    .mb-xl-2 {
        margin-bottom: 0.5rem !important;
    }

    .mb-xl-3 {
        margin-bottom: 1rem !important;
    }

    .mb-xl-4 {
        margin-bottom: 1.5rem !important;
    }

    .mb-xl-5 {
        margin-bottom: 3rem !important;
    }

    .mb-xl-auto {
        margin-bottom: auto !important;
    }

    .ms-xl-0 {
        margin-left: 0 !important;
    }

    .ms-xl-1 {
        margin-left: 0.25rem !important;
    }

    .ms-xl-2 {
        margin-left: 0.5rem !important;
    }

    .ms-xl-3 {
        margin-left: 1rem !important;
    }

    .ms-xl-4 {
        margin-left: 1.5rem !important;
    }

    .ms-xl-5 {
        margin-left: 3rem !important;
    }

    .ms-xl-auto {
        margin-left: auto !important;
    }

    .p-xl-0 {
        padding: 0 !important;
    }

    .p-xl-1 {
        padding: 0.25rem !important;
    }

    .p-xl-2 {
        padding: 0.5rem !important;
    }

    .p-xl-3 {
        padding: 1rem !important;
    }

    .p-xl-4 {
        padding: 1.5rem !important;
    }

    .p-xl-5 {
        padding: 3rem !important;
    }

    .px-xl-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .px-xl-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .px-xl-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .px-xl-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .px-xl-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .px-xl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .py-xl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .py-xl-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .py-xl-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .py-xl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-xl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .py-xl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .pt-xl-0 {
        padding-top: 0 !important;
    }

    .pt-xl-1 {
        padding-top: 0.25rem !important;
    }

    .pt-xl-2 {
        padding-top: 0.5rem !important;
    }

    .pt-xl-3 {
        padding-top: 1rem !important;
    }

    .pt-xl-4 {
        padding-top: 1.5rem !important;
    }

    .pt-xl-5 {
        padding-top: 3rem !important;
    }

    .pe-xl-0 {
        padding-right: 0 !important;
    }

    .pe-xl-1 {
        padding-right: 0.25rem !important;
    }

    .pe-xl-2 {
        padding-right: 0.5rem !important;
    }

    .pe-xl-3 {
        padding-right: 1rem !important;
    }

    .pe-xl-4 {
        padding-right: 1.5rem !important;
    }

    .pe-xl-5 {
        padding-right: 3rem !important;
    }

    .pb-xl-0 {
        padding-bottom: 0 !important;
    }

    .pb-xl-1 {
        padding-bottom: 0.25rem !important;
    }

    .pb-xl-2 {
        padding-bottom: 0.5rem !important;
    }

    .pb-xl-3 {
        padding-bottom: 1rem !important;
    }

    .pb-xl-4 {
        padding-bottom: 1.5rem !important;
    }

    .pb-xl-5 {
        padding-bottom: 3rem !important;
    }

    .ps-xl-0 {
        padding-left: 0 !important;
    }

    .ps-xl-1 {
        padding-left: 0.25rem !important;
    }

    .ps-xl-2 {
        padding-left: 0.5rem !important;
    }

    .ps-xl-3 {
        padding-left: 1rem !important;
    }

    .ps-xl-4 {
        padding-left: 1.5rem !important;
    }

    .ps-xl-5 {
        padding-left: 3rem !important;
    }
}

@media (min-width: 1400px) {
    .d-xxl-inline {
        display: inline !important;
    }

    .d-xxl-inline-block {
        display: inline-block !important;
    }

    .d-xxl-block {
        display: block !important;
    }

    .d-xxl-grid {
        display: grid !important;
    }

    .d-xxl-inline-grid {
        display: inline-grid !important;
    }

    .d-xxl-table {
        display: table !important;
    }

    .d-xxl-table-row {
        display: table-row !important;
    }

    .d-xxl-table-cell {
        display: table-cell !important;
    }

    .d-xxl-flex {
        display: flex !important;
    }

    .d-xxl-inline-flex {
        display: inline-flex !important;
    }

    .d-xxl-none {
        display: none !important;
    }

    .flex-xxl-fill {
        flex: 1 1 auto !important;
    }

    .flex-xxl-row {
        flex-direction: row !important;
    }

    .flex-xxl-column {
        flex-direction: column !important;
    }

    .flex-xxl-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-xxl-column-reverse {
        flex-direction: column-reverse !important;
    }

    .flex-xxl-grow-0 {
        flex-grow: 0 !important;
    }

    .flex-xxl-grow-1 {
        flex-grow: 1 !important;
    }

    .flex-xxl-shrink-0 {
        flex-shrink: 0 !important;
    }

    .flex-xxl-shrink-1 {
        flex-shrink: 1 !important;
    }

    .flex-xxl-wrap {
        flex-wrap: wrap !important;
    }

    .flex-xxl-nowrap {
        flex-wrap: nowrap !important;
    }

    .flex-xxl-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .justify-content-xxl-start {
        justify-content: flex-start !important;
    }

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

    .justify-content-xxl-center {
        justify-content: center !important;
    }

    .justify-content-xxl-between {
        justify-content: space-between !important;
    }

    .justify-content-xxl-around {
        justify-content: space-around !important;
    }

    .justify-content-xxl-evenly {
        justify-content: space-evenly !important;
    }

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

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

    .align-items-xxl-center {
        align-items: center !important;
    }

    .align-items-xxl-baseline {
        align-items: baseline !important;
    }

    .align-items-xxl-stretch {
        align-items: stretch !important;
    }

    .align-content-xxl-start {
        align-content: flex-start !important;
    }

    .align-content-xxl-end {
        align-content: flex-end !important;
    }

    .align-content-xxl-center {
        align-content: center !important;
    }

    .align-content-xxl-between {
        align-content: space-between !important;
    }

    .align-content-xxl-around {
        align-content: space-around !important;
    }

    .align-content-xxl-stretch {
        align-content: stretch !important;
    }

    .align-self-xxl-auto {
        align-self: auto !important;
    }

    .align-self-xxl-start {
        align-self: flex-start !important;
    }

    .align-self-xxl-end {
        align-self: flex-end !important;
    }

    .align-self-xxl-center {
        align-self: center !important;
    }

    .align-self-xxl-baseline {
        align-self: baseline !important;
    }

    .align-self-xxl-stretch {
        align-self: stretch !important;
    }

    .order-xxl-first {
        order: -1 !important;
    }

    .order-xxl-0 {
        order: 0 !important;
    }

    .order-xxl-1 {
        order: 1 !important;
    }

    .order-xxl-2 {
        order: 2 !important;
    }

    .order-xxl-3 {
        order: 3 !important;
    }

    .order-xxl-4 {
        order: 4 !important;
    }

    .order-xxl-5 {
        order: 5 !important;
    }

    .order-xxl-last {
        order: 6 !important;
    }

    .m-xxl-0 {
        margin: 0 !important;
    }

    .m-xxl-1 {
        margin: 0.25rem !important;
    }

    .m-xxl-2 {
        margin: 0.5rem !important;
    }

    .m-xxl-3 {
        margin: 1rem !important;
    }

    .m-xxl-4 {
        margin: 1.5rem !important;
    }

    .m-xxl-5 {
        margin: 3rem !important;
    }

    .m-xxl-auto {
        margin: auto !important;
    }

    .mx-xxl-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .mx-xxl-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    .mx-xxl-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }

    .mx-xxl-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }

    .mx-xxl-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }

    .mx-xxl-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }

    .mx-xxl-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .my-xxl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .my-xxl-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .my-xxl-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .my-xxl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .my-xxl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .my-xxl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .my-xxl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .mt-xxl-0 {
        margin-top: 0 !important;
    }

    .mt-xxl-1 {
        margin-top: 0.25rem !important;
    }

    .mt-xxl-2 {
        margin-top: 0.5rem !important;
    }

    .mt-xxl-3 {
        margin-top: 1rem !important;
    }

    .mt-xxl-4 {
        margin-top: 1.5rem !important;
    }

    .mt-xxl-5 {
        margin-top: 3rem !important;
    }

    .mt-xxl-auto {
        margin-top: auto !important;
    }

    .me-xxl-0 {
        margin-right: 0 !important;
    }

    .me-xxl-1 {
        margin-right: 0.25rem !important;
    }

    .me-xxl-2 {
        margin-right: 0.5rem !important;
    }

    .me-xxl-3 {
        margin-right: 1rem !important;
    }

    .me-xxl-4 {
        margin-right: 1.5rem !important;
    }

    .me-xxl-5 {
        margin-right: 3rem !important;
    }

    .me-xxl-auto {
        margin-right: auto !important;
    }

    .mb-xxl-0 {
        margin-bottom: 0 !important;
    }

    .mb-xxl-1 {
        margin-bottom: 0.25rem !important;
    }

    .mb-xxl-2 {
        margin-bottom: 0.5rem !important;
    }

    .mb-xxl-3 {
        margin-bottom: 1rem !important;
    }

    .mb-xxl-4 {
        margin-bottom: 1.5rem !important;
    }

    .mb-xxl-5 {
        margin-bottom: 3rem !important;
    }

    .mb-xxl-auto {
        margin-bottom: auto !important;
    }

    .ms-xxl-0 {
        margin-left: 0 !important;
    }

    .ms-xxl-1 {
        margin-left: 0.25rem !important;
    }

    .ms-xxl-2 {
        margin-left: 0.5rem !important;
    }

    .ms-xxl-3 {
        margin-left: 1rem !important;
    }

    .ms-xxl-4 {
        margin-left: 1.5rem !important;
    }

    .ms-xxl-5 {
        margin-left: 3rem !important;
    }

    .ms-xxl-auto {
        margin-left: auto !important;
    }

    .p-xxl-0 {
        padding: 0 !important;
    }

    .p-xxl-1 {
        padding: 0.25rem !important;
    }

    .p-xxl-2 {
        padding: 0.5rem !important;
    }

    .p-xxl-3 {
        padding: 1rem !important;
    }

    .p-xxl-4 {
        padding: 1.5rem !important;
    }

    .p-xxl-5 {
        padding: 3rem !important;
    }

    .px-xxl-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .px-xxl-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    .px-xxl-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .px-xxl-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .px-xxl-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .px-xxl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }

    .py-xxl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .py-xxl-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .py-xxl-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .py-xxl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-xxl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .py-xxl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .pt-xxl-0 {
        padding-top: 0 !important;
    }

    .pt-xxl-1 {
        padding-top: 0.25rem !important;
    }

    .pt-xxl-2 {
        padding-top: 0.5rem !important;
    }

    .pt-xxl-3 {
        padding-top: 1rem !important;
    }

    .pt-xxl-4 {
        padding-top: 1.5rem !important;
    }

    .pt-xxl-5 {
        padding-top: 3rem !important;
    }

    .pe-xxl-0 {
        padding-right: 0 !important;
    }

    .pe-xxl-1 {
        padding-right: 0.25rem !important;
    }

    .pe-xxl-2 {
        padding-right: 0.5rem !important;
    }

    .pe-xxl-3 {
        padding-right: 1rem !important;
    }

    .pe-xxl-4 {
        padding-right: 1.5rem !important;
    }

    .pe-xxl-5 {
        padding-right: 3rem !important;
    }

    .pb-xxl-0 {
        padding-bottom: 0 !important;
    }

    .pb-xxl-1 {
        padding-bottom: 0.25rem !important;
    }

    .pb-xxl-2 {
        padding-bottom: 0.5rem !important;
    }

    .pb-xxl-3 {
        padding-bottom: 1rem !important;
    }

    .pb-xxl-4 {
        padding-bottom: 1.5rem !important;
    }

    .pb-xxl-5 {
        padding-bottom: 3rem !important;
    }

    .ps-xxl-0 {
        padding-left: 0 !important;
    }

    .ps-xxl-1 {
        padding-left: 0.25rem !important;
    }

    .ps-xxl-2 {
        padding-left: 0.5rem !important;
    }

    .ps-xxl-3 {
        padding-left: 1rem !important;
    }

    .ps-xxl-4 {
        padding-left: 1.5rem !important;
    }

    .ps-xxl-5 {
        padding-left: 3rem !important;
    }
}

@media print {
    .d-print-inline {
        display: inline !important;
    }

    .d-print-inline-block {
        display: inline-block !important;
    }

    .d-print-block {
        display: block !important;
    }

    .d-print-grid {
        display: grid !important;
    }

    .d-print-inline-grid {
        display: inline-grid !important;
    }

    .d-print-table {
        display: table !important;
    }

    .d-print-table-row {
        display: table-row !important;
    }

    .d-print-table-cell {
        display: table-cell !important;
    }

    .d-print-flex {
        display: flex !important;
    }

    .d-print-inline-flex {
        display: inline-flex !important;
    }

    .d-print-none {
        display: none !important;
    }
}

/*# sourceMappingURL=bootstrap-grid.css.map */



.btn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    transition: background-color 0.3s;
    border-radius: 5px;
    border: none;
    font-family: var(--body-font-family);
    padding: 10px 20px;
    cursor: pointer;
}

    .btn.btn-blue {
        background-color: var(--blue-46);
        color: white;
    }

        .btn.btn-blue:hover {
            background-color: var(--blue-60);
        }

.modal {
    position: fixed;
    top: 2%;
    right: 2%;
    z-index: var(--modal-zindex);
    display: none;
    width: 96%;
    height: 96%;
    outline: 0;
    justify-items: center;
    align-content: center;
    overflow: auto;

    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox, Safari 18.2+, Chromium 121+ */
}

    .modal::-webkit-scrollbar {
        display: none; /* Older Safari and Chromium */
    }
.modal-dialog {
    position: relative;
    width: auto;
    margin: var(--modal-margin);
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none;
    }
}

.modal.show .modal-dialog {
    transform: none;
}

.modal.modal-static .modal-dialog {
    transform: scale(1.02);
}

.modal-dialog-scrollable {
    height: calc(100% - var(--modal-margin) * 2);
}

    .modal-dialog-scrollable .modal-content {
        max-height: 100%;
        overflow: hidden;
    }

   

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--modal-margin) * 2);
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--modal-color);
    pointer-events: auto;
    background-color: var(--modal-bg);
    background-clip: padding-box;
    border: var(--modal-border-width) solid var(--modal-border-color);
    border-radius: var(--modal-border-radius);
    box-shadow: var(--modal-box-shadow);
    outline: 0;
}

.modal-backdrop {
    --backdrop-zindex: 1050;
    --backdrop-bg: #000000;
    --backdrop-opacity: 0.4;
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--backdrop-zindex);
    width: 100vw;
    height: 100vh;
    background-color: var(--backdrop-bg);
}

    .modal-backdrop.fade {
        opacity: 0;
    }

    .modal-backdrop.show {
        opacity: var(--backdrop-opacity);
    }

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: var(--modal-header-padding);
    border-bottom: var(--modal-header-border-width) solid var(--modal-header-border-color);
    border-top-right-radius: var(--modal-inner-border-radius);
    border-top-left-radius: var(--modal-inner-border-radius);
}

    .modal-header .btn-close {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 3px solid;
        background-color: var(--white);
        color: var(--gray-light);
        font-size: 24px;
        text-align: center;
        cursor: pointer;
        transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        border-color: var(--gray-light);
        padding: calc(var(--modal-header-padding-y) * 0.5) calc(var(--modal-header-padding-x) * 0.5);
        margin: calc(-0.5 * var(--modal-header-padding-y)) auto calc(-0.5 * var(--modal-header-padding-y)) calc(-0.5 * var(--modal-header-padding-x));
    }



        .modal-header .btn-close:hover {
            border-color: var(--white);
            transform: rotate(360deg);
            border-color: var(--pink) !important;
        }

            .modal-header .btn-close:hover span {
                color: var(--pink) !important;
            }

.modal-title {
    margin-bottom: 0;
    line-height: var(--modal-title-line-height);
    font-size: 1rem;
}

.modal-body {
	position: relative;
	flex: 1 1 auto;
	padding: var(--modal-padding);
 
}

.modal-footer {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: calc(var(--modal-padding) - var(--modal-footer-gap) * 0.5);
    background-color: var(--modal-footer-bg);
    border-top: var(--modal-footer-border-width) solid var(--modal-footer-border-color);
    border-bottom-left-radius: var(--modal-inner-border-radius);
    border-bottom-right-radius: var(--modal-inner-border-radius);
}


@media (min-width: 576px) {
    .modal {
        --modal-margin: 1.75rem;
        --modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }

    .modal-dialog {
        max-width: var(--modal-width);
        margin-left: auto;
        margin-right: auto;
    }

    .modal-sm {
        --modal-width: 300px;
    }
}

@media (min-width: 992px) {
    .modal-lg,
    .modal-xl {
        --modal-width: 800px;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        --modal-width: 1140px;
    }
}

.modal-full-w .modal-dialog{
    width: 100vw;
    max-width: none;
    margin: 0;
}

.modal-full-96 .modal-dialog {
	width: 96vw;
	max-width: none;
	margin: 0;
}

.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}

    .modal-fullscreen .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal-fullscreen .modal-header,
    .modal-fullscreen .modal-footer {
        border-radius: 0;
    }

   

@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

        .modal-fullscreen-sm-down .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen-sm-down .modal-header,
        .modal-fullscreen-sm-down .modal-footer {
            border-radius: 0;
        }

      
}

@media (max-width: 767.98px) {
    .modal-fullscreen-md-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

        .modal-fullscreen-md-down .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen-md-down .modal-header,
        .modal-fullscreen-md-down .modal-footer {
            border-radius: 0;
        }

        
}

@media (max-width: 991.98px) {
    .modal-fullscreen-lg-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

        .modal-fullscreen-lg-down .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen-lg-down .modal-header,
        .modal-fullscreen-lg-down .modal-footer {
            border-radius: 0;
        }

         
}

@media (max-width: 1199.98px) {
    .modal-fullscreen-xl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

        .modal-fullscreen-xl-down .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen-xl-down .modal-header,
        .modal-fullscreen-xl-down .modal-footer {
            border-radius: 0;
        }

      
}

@media (max-width: 1399.98px) {
    .modal-fullscreen-xxl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

        .modal-fullscreen-xxl-down .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen-xxl-down .modal-header,
        .modal-fullscreen-xxl-down .modal-footer {
            border-radius: 0;
        }

     
}


.textarea-effect {
    padding: 0 !important;
}

.input-effect {
    padding: 0 !important;
}

    .input-effect input[type="text"] {
        color: var(--input-label-mute-color);
        width: 100%;
        box-sizing: border-box;
        letter-spacing: 1px;
        border-radius: 4px;
    }

:focus {
    outline: none;
}


.textarea-effect textarea[type="text"] {
    color: var(--input-label-mute-color);
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 1px;
    border-radius: 4px;
}

:focus {
    outline: none;
}


.input-effect {
    position: relative;
}
    /* necessary to give position: relative to parent. */
    .input-effect input[type="text"] {
        color: var(--body-main-text-color);
        width: 100%;
        box-sizing: border-box;
        letter-spacing: 1px;
    }


.textarea-effect {
    position: relative;
}
    /* necessary to give position: relative to parent. */
    .textarea-effect textarea[type="text"] {
        color: var(--body-main-text-color);
        width: 100%;
        box-sizing: border-box;
        letter-spacing: 1px;
        resize: none;
    }


.effect-1,
.effect-2,
.effect-3 {
    border: 1px solid var(--input-border-color);
    padding: var(--input-select-padding);
    transition: 0.4s;
    background: transparent;
}

.input-effect input:not(:placeholder-shown) ~ label {
    top: -18px;
    left: 0;
    font-size: 12px;
    color: var( --input-effect-border-color);
    transition: 0.3s;
}

.textarea-effect textarea:not(:placeholder-shown) ~ label {
    top: -18px;
    left: 0;
    font-size: 12px;
    color: var( --input-effect-border-color);
    transition: 0.3s;
}


.effect-1 ~ .focus-border:before,
.effect-1 ~ .focus-border:after {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var( --input-effect-border-color);
    transition: 0.4s;
}

.effect-1 ~ .focus-border:after {
    top: auto;
    bottom: 0;
}

.effect-1 ~ .focus-border i:before,
.effect-1 ~ .focus-border i:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 2px;
    height: 0;
    background-color: var( --input-effect-border-color);
    transition: 0.6s;
}

.effect-1 ~ .focus-border i:after {
    left: auto;
    right: 0;
}

.effect-1:focus ~ .focus-border:before,
.effect-1:focus ~ .focus-border:after,
.has-content.effect-1 ~ .focus-border:before,
.has-content.effect-1 ~ .focus-border:after {
    left: 0;
    width: 100%;
    transition: 0.4s;
}

.effect-1:focus ~ .focus-border i:before,
.effect-1:focus ~ .focus-border i:after,
.has-content.effect-1 ~ .focus-border i:before,
.has-content.effect-1 ~ .focus-border i:after {
    top: -1px;
    height: 100%;
    transition: 0.6s;
}

.effect-1 ~ label {
    position: absolute;
    right: 14px;
    text-align: right;
    width: 100%;
    top: 10px;
    color: var(--input-label-mute-color);
    transition: 0.3s;
    pointer-events: none;
    letter-spacing: 0.5px;
}

.effect-1:focus ~ label, .has-content.effect-1 ~ label {
    top: -18px;
    left: 0;
    font-size: 12px;
    color: var( --input-effect-border-color);
    transition: 0.3s;
}

.effect-2 ~ .focus-border:before,
.effect-2 ~ .focus-border:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var( --input-effect-border-color);
    transition: 0.3s;
}

.effect-2 ~ .focus-border:after {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
}

.effect-2 ~ .focus-border i:before,
.effect-2 ~ .focus-border i:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 0;
    background-color: var( --input-effect-border-color);
    transition: 0.4s;
}

.effect-2 ~ .focus-border i:after {
    left: auto;
    right: 0;
    top: auto;
    bottom: 0;
}

.effect-2:focus ~ .focus-border:before,
.effect-2:focus ~ .focus-border:after,
.has-content.effect-2 ~ .focus-border:before,
.has-content.effect-2 ~ .focus-border:after {
    width: 100%;
    transition: 0.3s;
}

.effect-2:focus ~ .focus-border i:before,
.effect-2:focus ~ .focus-border i:after,
.has-content.effect-2 ~ .focus-border i:before,
.has-content.effect-2 ~ .focus-border i:after {
    height: 100%;
    transition: 0.4s;
}

.effect-2 ~ label {
    position: absolute;
    right: 14px;
    width: 100%;
    top: 10px;
    color: var(--input-label-mute-color);
    transition: 0.3s;
    pointer-events: none;
    letter-spacing: 0.5px;
    text-align: right;
}

.effect-2:focus ~ label, .has-content.effect-2 ~ label {
    top: -18px;
    left: 0;
    font-size: 12px;
    color: var( --input-effect-border-color);
    transition: 0.3s;
}





.effect-3 ~ .focus-border:before,
.effect-3 ~ .focus-border:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 2px;
    background-color: var( --input-effect-border-color);
    transition: 0.2s;
    transition-delay: 0.2s;
}

.effect-3 ~ .focus-border:after {
    top: auto;
    bottom: 0;
    right: auto;
    left: 0;
    transition-delay: 0.6s;
}

.effect-3 ~ .focus-border i:before,
.effect-3 ~ .focus-border i:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 0;
    background-color: var( --input-effect-border-color);
    transition: 0.2s;
}

.effect-3 ~ .focus-border i:after {
    left: auto;
    right: 0;
    top: auto;
    bottom: 0;
    transition-delay: 0.4s;
}

.effect-3:focus ~ .focus-border:before,
.effect-3:focus ~ .focus-border:after,
.has-content.effect-3 ~ .focus-border:before,
.has-content.effect-3 ~ .focus-border:after {
    width: 100%;
    transition: 0.2s;
    transition-delay: 0.6s;
}

.effect-3:focus ~ .focus-border:after,
.has-content.effect-3 ~ .focus-border:after {
    transition-delay: 0.2s;
}

.effect-3:focus ~ .focus-border i:before,
.effect-3:focus ~ .focus-border i:after,
.has-content.effect-3 ~ .focus-border i:before,
.has-content.effect-3 ~ .focus-border i:after {
    height: 100%;
    transition: 0.2s;
}

.effect-3:focus ~ .focus-border i:after,
.has-content.effect-3 ~ .focus-border i:after {
    transition-delay: 0.4s;
}

.effect-3 ~ label {
    position: absolute;
    right: 14px;
    width: 100%;
    top: 10px;
    color: var(--input-label-mute-color);
    transition: 0.3s;
    pointer-events: none;
    letter-spacing: 0.5px;
    text-align: right;
}

.effect-3:focus ~ label,
.effect-3:not(:placeholder-shown) ~ label,
.has-content.effect-3 ~ label {
    top: -18px;
    left: 0;
    font-size: 12px;
    color: var( --input-effect-border-color);
    transition: 0.3s;
}


.border-plus {
    display: flex;
    border: 2px solid var(--blue-46);
    border-radius: 4px;
    width: 16px;
    height: 16px;
    text-align: center;
    align-items: center;
    justify-content: center;
}


.border-plus-white {
    display: flex;
    border: 1px solid var(--white);
    border-radius: 4px;
    width: 20px;
    height: 20px;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .border-plus-white i {
        font-size: 8px;
    }



.curser-pointer {
    cursor: pointer;
}

.avatar-upload {
    width: 24px;
    position: relative;
    border-radius: 50%;
    height: 24px;
}

    .avatar-upload img {
        width: inherit;
        height: inherit;
        border-radius: inherit;
    }


.dashboard-title {
    font-size: 24px;
    font-weight: bold;
}

.breadcrumb {
    font-size: 12px;
    color: var(--secondary);
    cursor: pointer;
}

    .breadcrumb a {
        font-size: 12px;
        color: var(--secondary);
        cursor: pointer;
    }

        .breadcrumb a:hover {
            color: var(--dark);
        }

        .breadcrumb a:not(:last-child)::after {
            content: " / ";
            margin: 0 1px;
        }

        .breadcrumb a:last-child {
            color: var(--dark);
        }

.text-center {
    text-align: center !important;
}

.w-100 {
    width: 100%
}

.text-color-blue-46 {
    color: var(--blue-46);
}

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


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

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

.text-left {
    text-align: left;
}

.dashboard-header {
    margin-top: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.header-top {
     display: flex;
     justify-content: left;
     align-items: center;
     padding: 17px 24px;
     flex-direction: row;
     flex-wrap: wrap;
}

.logo-container {
    display: flex;
    align-items: center;
    margin-left: 24px;
    margin-top: 5px;
}

.logo {
    height: 28px;
    width: 100px;
}

.date-time {
    font-size: 12px;
    color: #666;
}

.top-nav {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .top-nav a {
        color: var(--dark);
        text-decoration: none;
        font-size: 12px;
    }

.app-navbar {
    display: flex;
 
    align-items: baseline;
}

   .app-select-group {
    padding: 0px 20px;
   }

    .app-navbar .app-line-div {
   
        position: relative;
        border-right: 0.5px solid var(--gray-light);
        box-sizing: border-box;
        height: 20.5px;
        margin: 0px 8px 0px 16px;
    }

    .app-navbar .app-icon {
        margin: 0px 16px 0px 8px;
        align-content: center !important;
    }

        .app-navbar .app-icon:hover {
            transform: scale(1.5);
            transition: transform 0.2s ease, color 0.2s ease;
            cursor: pointer;
        }

        .app-navbar .app-icon i {
            font-size: 16px;
        }

        .app-navbar .app-icon .mir-notification-status .path1::before {
            color: var(--red);
        }



    .app-navbar .app-profile {
        width: 24px;
        position: relative;
        border-radius: 50%;
        height: 24px;
    }

        .app-navbar .app-profile img {
            width: inherit;
            height: inherit;
            border-radius: inherit;
        }

.main-nav {
    background-color: var(--white-ghost);
    border: 0.5px solid var( --cadet-blue);
    padding: 17px 20px;
    display: flex;
    align-items: center;
}

.nav-items {
    display: flex;
    gap: 7px;
    flex-direction: row;
    flex-wrap: wrap;
}

    .nav-items a {
        text-decoration: none;
        font-size: 11px;
        line-height: 12px;
        font-weight: 600;
        color: var(--dark);
        text-align: right;
    }

        .nav-items a:hover {
            color: #f39c12;
        }

.dashboard-icon {
    color: var(---secondary);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
}

    .dashboard-icon i {
        font-size: 16px;
    }

    .dashboard-icon:hover span, .dashboard-icon:hover span::before {
        color: var(--success) !important;
        transform: scale(1.2);
        transition: transform 0.2s ease, color 0.2s ease;
        cursor: pointer;
    }








/* Cards Grid */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.card {
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.03);
    border-radius: var(--card-border-radius);
    background-color: var(--white);
    border: 0.5px solid var(--gray-light);
    box-sizing: border-box;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    color: var(--dark);
}



.card-icon {
    width: 32px;
    height: 32px;
    background-color: var(--antique-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

    .card-icon svg {
        width: 20px;
        height: 20px;
        fill: var(--orange);
    }

.card-title {
    font-size: 12px;
    font-weight: bold;
    color: var(--dark);
    margin-bottom: 4px;
    margin-top: 0px;
}

.card-description {
    font-size: 12px;
    color: var(--secondary);
    line-height: 16px;
    margin: 0;
}

.card-header {
    border-bottom: 1px solid var(--card-border);
    width: 100%;
    padding: var( --card-header-padding);
}


/* Responsive styles */
@media (max-width: 768px) {
    .nav-items {
        gap: 15px;
        flex-wrap: wrap;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .top-header {
        flex-direction: column;
        gap: 10px;
    }
}



.drawer {
    position: fixed;
    top: 0;
    right: -100vw;
    width: 100vw;
    height: 100vh;
    background-color: var(--drawer-bg);
    transition: left 0.3s ease-in-out;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    z-index: var(--drawer-zindex);
}

    .drawer.small {
        width: 20vw;
        right: -20vw;
    }

    .drawer.medium {
        width: 40vw;
        right: -40vw;
    }

    .drawer.large {
        width: 60vw;
        right: -60vw;
    }

    .drawer.xlarge {
        width: 80vw;
        right: -80vw;
    }

    .drawer.xxlarge {
        width: 90vw;
        right: -90vw;
    }

    .drawer.open {
        right: 0;
    }

.drawer-toggle {
    position: fixed;
    top: 15px;
    right: 15px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 4px;
    z-index: 1001;
}

.drawer-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    color: var(--modal-color);
    pointer-events: auto;
    background-color: var(--modal-bg);
    background-clip: padding-box;
    outline: 0;
}




.drawer-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 999;
}

    .drawer-overlay.active {
        display: block;
    }

.drawer-footer {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    background-color: var(--modal-footer-bg);
    flex-direction: column;
}

    .drawer-footer .btn {
        margin-left: 0.5rem;
    }

.drawer-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: var(--modal-header-padding);
    border-bottom: var(--modal-header-border-width) solid var(--modal-header-border-color);
    border-top-right-radius: var(--modal-inner-border-radius);
    border-top-left-radius: var(--modal-inner-border-radius);
}

    .drawer-header .drawer-btn-close {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 3px solid;
        background-color: #fff;
        color: var(--gray-light);
        font-size: 24px;
        text-align: center;
        cursor: pointer;
        transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        border-color: var(--gray-light);
        padding: calc(var(--modal-header-padding-y) * 0.5) calc(var(--modal-header-padding-x) * 0.5);
        margin: calc(-0.5 * var(--modal-header-padding-y)) auto calc(-0.5 * var(--modal-header-padding-y)) calc(-0.5 * var(--modal-header-padding-x));
    }

        .drawer-header .drawer-btn-close:hover {
            border-color: #fff;
            transform: rotate(360deg);
            border-color: var(--pink) !important;
        }

            .drawer-header .drawer-btn-close:hover span {
                color: var(--pink) !important;
            }

.drawer-title {
    margin-bottom: 0;
    line-height: var(--modal-title-line-height);
    font-size: 1rem;
    font-weight: 500;
}

.drawer-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--modal-padding);
    overflow: auto;
}



.form-input-select {
    display: block;
    padding: 0;
    position: relative;
    color: var(--body-main-text-color);
    display: block;
    border-radius: var(--input-border-radius);
    box-shadow: none;
    box-sizing: border-box;
}

    .form-input-select::before {
        content: "";
        display: block;
        position: absolute;
        pointer-events: none;
        z-index: 2;
    }



    .form-input-select select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: none;
        width: 100%;
        margin: 0;
        border: 1px solid transparent;
        outline: none;
        box-sizing: border-box;
        /* Focus style */
    }

        .form-input-select select:focus {
            background-color: transparent;
            outline: none;
        }

    .form-input-select option {
        font-weight: normal;
    }

    .form-input-select x:-o-prefocus, .form-input-select::after {
        display: none;
    }

@media (forced-colors: active) {
    .form-input-select select {
        forced-color-adjust: none;
    }

        .form-input-select select:focus {
            background: transparent;
            color: CanvasText;
        }
}

@-moz-document url-prefix() {
    .form-input-select {
        overflow: hidden;
    }

        .form-input-select select {
            width: 120%;
            width: calc(100% + 3em);
            /* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
        }

    @supports (-moz-appearance: none) {
        .form-input-select select {
            width: 100%;
        }
    }

    .form-input-select select:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #000;
    }
}

@supports (-moz-appearance: none) {
    .form-input-select {
        width: 100%;
    }
}

.form-input-select::before {
    content: "\e911";
    font-family: miricon !important;
    display: block;
    position: absolute;
    pointer-events: none;
    width: 0;
    height: 0;
    left: 30px;
    bottom: 73%;
    font-size: 20px;
    color: var(--input-label-mute-color);
}


@-moz-document url-prefix() {
    .form-input-select {
        border-right: 3px solid var(--input-border-color);
    }

        .form-input-select:hover {
            border-right: 3px solid var(--orange);
        }
}

.form-input-select:hover select {
    box-shadow: 0 2px 3px rgba(255, 165, 0, 0.1) inset;
    border-color: var(--orange);
}

    .form-input-select:hover select:focus {
        outline-color: transparent;
    }

.form-input-select:hover::before {
    border-bottom-color: var(--orange);
}

.form-input-select:hover::after {
    border-top-color: var(--orange);
}

.form-input-select select {
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    color: inherit;
    padding: var(--input-select-padding);
    line-height: normal;
    transition: border-color 0.2s ease, outline 0.2s ease;
    box-sizing: border-box;
}

    .form-input-select select:focus {
        box-shadow: 0 3px 4px rgba(255, 165, 0, 0.3) inset;
        outline: 3px solid var(--orange);
        outline-offset: -3px;
    }

    .form-input-select select[disabled], .form-input-select select:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .form-input-select select:not(:focus):invalid {
        color: var(--input-label-mute-color);
    }

    .form-input-select select:not(:focus):invalid {
        color: var(--input-label-mute-color);
    }

    .form-input-select select[required]span:not(:focus):invalid {
        color: var(--red);
    }


label.required::after {
    content: " *";
    color: var(--red);
}


th.required::after {
    content: " *";
    color: var(--red);
}

span.required::after {
    content: " *";
    color: var(--red);
}



.table {
    width: 100%;
    color: var(--body-main-text-color);
    border-collapse: separate;
    border-spacing: 0;
    margin: 5px 0px;
}

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

.table.table-recorded tr td:first-child,
     .table.table-recorded tr th:first-child {
          text-align: center !important;
          padding: 10px 8px 10px 8px;
     }

    .table th,
    .table td {
       

        border-top: 1px solid var(--table-border-color);
        text-align: right;
    }
.table tbody tr td:first-child{
     text-align:center;
}
     .table tbody tr td:first-child .mir-arrow-down2 {
          position: absolute;
	     top: 60%;
	    
          cursor:pointer;
     }

     .table tbody tr td:first-child .mir-arrow-up2 {
          position: absolute;
          top: 15%;
	 
	     cursor: pointer;
     }
     .table thead th {
          vertical-align: bottom;
          border-bottom: 1px solid var(--table-border-color);
          padding: 8px;
     }

    .table.table-bordered {
        border: 1px solid var(--table-border-color);
    }

        .table.table-bordered.border-radius {
            border: none !important;
        }

            .table.table-bordered.border-radius th,
            .table.table-bordered.border-radius td {
                border: 1px solid var(--table-border-color);
            }

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--table-border-color);
    text-align: center;
}

.table-hover tbody tr:hover {
    background-color: var(--table-hover-bg);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-striped-bg);
}

.table th {
    font-weight: bold;
}

.table-hover tbody tr:hover > * {
    color: var(--table-hover-text-color);
}


.table thead.border-radius tr:first-child td:first-child {
    border-top-right-radius: var(--tabel-border-radius)
}

.table thead.border-radius tr:first-child td:last-child {
    border-top-left-radius: var(--tabel-border-radius);
}

.table thead.border-radius tr:first-child th:first-child {
    border-top-right-radius: var(--tabel-border-radius)
}

.table thead.border-radius tr:first-child th:last-child {
    border-top-left-radius: var(--tabel-border-radius);
}

.table tbody.border-radius tr:last-child td:first-child {
    border-bottom-right-radius: var(--tabel-border-radius);
}

.table tbody.border-radius tr:last-child td:last-child {
    border-bottom-left-radius: var(--tabel-border-radius);
}

.table tfoot.border-radius tr:last-child td:first-child {
    border-bottom-right-radius: var(--tabel-border-radius);
}

.table tfoot.border-radius tr:last-child td:last-child {
    border-bottom-left-radius: var(--tabel-border-radius);
}

td.td-icon {
    padding: 0;
    position: relative;
    box-shadow: none;
    box-sizing: border-box;
    align-content: center;
}

    td.td-icon button {
        width: 20px;
        height: 20px;
        font-size: 14px;
    }




td.td-select {
    padding: 0;
    position: relative;
    box-shadow: none;
    box-sizing: border-box;
}

    td.td-select select {
        width: 100%;
        height: 38px;
        padding: 0 10px 0 10px;
        border: none;
        border-radius: 4px;
        background-color: white;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right calc(100% - 10px) center;
        color: var(--input-label-mute-color);
        ;
        outline: none;
        transition: border-color 0.2s ease;
    }

        /* Hover state */
        td.td-select select:hover {
            border-color: var(--input-label-mute-color);
        }

        /* Focus state */
        td.td-select select:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
        }

        /* Placeholder-like effect for first option */
        td.td-select select option:first-child {
            color: var(--input-label-mute-color);
        }

        /* Removes default dropdown arrow in IE10+ */
        td.td-select select::-ms-expand {
            display: none;
        }

     td.td-input ,tbody td {
         padding: 0;
         position: relative;
         box-shadow: none;
         box-sizing: border-box;
     }

     td .css-qbdosj-Input input {
          min-height: 26px !important;
     }

td .css-13cymwt-control   {
     border:none !important;
}

.table tbody td select {
    min-height:38px;
    border: none !important;
}
    td .td-input input, .table tbody td input {
               width: 100% !important;
               min-height: 38px  ;
             /*  padding: 0 10px !important;*/
               border: none !important;
               border-radius: 4px !important;
                text-align:center;
               color: var(--body-main-text-color) !important;
               outline: none !important;
               transition: border-color 0.2s ease !important;
          }  

        /* Removes default browser styling for number inputs */
        td.td-input input[type="number"] {
            -moz-appearance: textfield;
        }

            td.td-input input[type="number"]::-webkit-inner-spin-button,
            td.td-input input[type="number"]::-webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

.btn-primary {
    background-color: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

    .btn-primary:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
    }

    .btn-primary:disabled {
        background-color: #007bff;
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-danger {
    background-color: #dc3545;
    color: #fff;
    border: 1px solid #dc3545;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-danger:hover {
        background-color: #a71d2a;
        border-color: #a71d2a;
    }

    .btn-danger:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5);
    }

    .btn-danger:disabled {
        background-color: #dc3545;
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-pink {
    background-color: #FF2E5B;
    color: #fff;
    border: 1px solid #FF2E5B;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-pink:hover {
        background-color: #cc2347;
        border-color: #cc2347;
    }

    .btn-pink:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255, 46, 91, 0.5);
    }

    .btn-pink:disabled {
        background-color: #FF2E5B;
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-warning{
    background-color: #ffc107;
    color: #fff;
    border: 1px solid #ffc107;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn-warning:hover{
    background-color: #e0a800;
    border-color: #e0a800;
}
.btn-warning:focus{
    outline: none;
}


.btn-success {
    background-color: #28a745;
    color: #fff;
    border: 1px solid #28a745;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-success:hover {
        background-color: #1e7e34;
        border-color: #1e7e34;
    }

    .btn-success:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.5);
    }

    .btn-success:disabled {
        background-color: #28a745;
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0 !important;
    font-size: 1.25rem;
    line-height: 1;
    border-radius: 50% !important;
    border: none;
    color: var(--btn-icon-color, #fff);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

    .btn-icon:hover {
        color: var(--btn-icon-hover-color, #fff);
        transform: scale(1.1);
    }

    .btn-icon:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
    }

    .btn-icon:active {
        transform: scale(0.95);
    }

    .btn-icon.disabled,
    .btn-icon:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }


.btn-outline-danger {
    background-color: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-outline-danger:hover {
        background-color: #dc3545;
        color: #fff;
        border-color: #dc3545;
    }

    .btn-outline-danger:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5);
    }

    .btn-outline-danger:disabled {
        background-color: transparent;
        color: #dc3545;
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-outline-primary {
    background-color: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-outline-primary:hover {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
    }

    .btn-outline-primary:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
    }

    .btn-outline-primary:disabled {
        background-color: transparent;
        color: #007bff;
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-outline-success {
    background-color: transparent;
    color: #28a745;
    border: 1px solid #28a745;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-outline-success:hover {
        background-color: #28a745;
        color: #fff;
        border-color: #28a745;
    }

    .btn-outline-success:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.5);
    }

    .btn-outline-success:disabled {
        background-color: transparent;
        color: #28a745;
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-outline-warning {
    background-color: transparent;
    color: #ffc107;
    border: 1px solid #ffc107;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-outline-warning:hover {
        background-color: #ffc107;
        color: #212529;
        border-color: #ffc107;
    }

    .btn-outline-warning:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.5);
    }

    .btn-outline-warning:disabled {
        background-color: transparent;
        color: #ffc107;
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-outline-info {
    background-color: transparent;
    color: #17a2b8;
    border: 1px solid #17a2b8;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-outline-info:hover {
        background-color: #17a2b8;
        color: #fff;
        border-color: #17a2b8;
    }

    .btn-outline-info:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.5);
    }

    .btn-outline-info:disabled {
        background-color: transparent;
        color: #17a2b8;
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-outline-dark {
    background-color: transparent;
    color: #343a40;
    border: 1px solid #343a40;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-outline-dark:hover {
        background-color: #343a40;
        color: #fff;
        border-color: #343a40;
    }

    .btn-outline-dark:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(52, 58, 64, 0.5);
    }

    .btn-outline-dark:disabled {
        background-color: transparent;
        color: #343a40;
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-orange-dark {
    background-color: var(--orange-dark);
    color: #fff;
    border: 1px solid var(--orange-dark);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-orange-dark:hover {
        background-color: #cc5204;
        border-color: #cc5204;
    }

    .btn-orange-dark:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255, 100, 5, 0.5);
    }

    .btn-orange-dark:disabled {
        background-color: var(--orange-dark);
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-secondary {
    background-color: var(--white-ghost);
    color: var(--dark);
    border: 1px solid var(--white-ghost);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #5a6268;
    }

    .btn-secondary:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.5);
    }

    .btn-secondary:disabled {
        background-color: #6c757d;
        opacity: 0.6;
        cursor: not-allowed;
    }





.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    justify-content: center;
}

    .pagination li {
        margin: 0 0.25rem;
    }

        .pagination li a {
            display: block;
            padding: 0.3rem 0.45rem;
            border: 1px solid var(--pagination-border-color, #ddd);
            border-radius: 4px;
            text-decoration: none;
            color: var(--pagination-text-color, #007bff);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

            .pagination li a:hover {
                background-color: var(--pagination-hover-bg, #f1f1f1);
                color: var(--pagination-hover-text-color, #0056b3);
            }

        .pagination li.active a {
            background-color: var(--pagination-active-bg, #007bff);
            color: var(--pagination-active-text-color, #fff);
            border-color: var(--pagination-active-border-color, #007bff);
        }

        .pagination li.disabled a {
            color: var(--pagination-disabled-text-color, #ccc);
            pointer-events: none;
            cursor: not-allowed;
        }

.table-action {
    position: relative;
}

    .table-action .tabel-info {
        position: absolute;
        top: 5px;
    }

.resume-form {
    display: none;
    padding-bottom: 20px;
}

    .resume-form.show {
        display: block;
    }

.tmplate-resume-img {
    width: fit-content;
    margin-bottom: 3px;
}

.tmplate-resume span {
    font-weight: 800;
}

.tmplate-resume {
    justify-items: center;
    cursor: pointer;
}

    .tmplate-resume:hover .tmplate-resume-img {
        border: 2px solid var(--blue-46);
        border-radius: var(--main-border-radius);
    }

    .tmplate-resume:hover span {
        color: var(--blue-46);
    }

    .tmplate-resume.selected .tmplate-resume-img {
        border: 2px solid var(--blue-46);
        border-radius: var(--main-border-radius);
    }

    .tmplate-resume.selected span {
        color: var(--blue-46);
    }

.resume-btn-action {
    padding: 0px 6px;
}

    .resume-btn-action .card:hover {
        background-color: var(--blue-46);
        color: var(--white) !important;
        cursor: pointer;
        border: 1px solid var(--blue-46);
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

        .resume-btn-action .card:hover i {
            color: var(--white) !important;
        }


    .resume-btn-action .card i {
        color: var(--blue-46);
    }


.step-progress-container {
    padding: 17px 16px 5px 16px;
    background-color: var(--body-bg);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.step-progress {
    display: flex;
    justify-content: space-between;
    position: relative;
    counter-reset: step;
}



.step-item {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.step-circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--body-bg);
    border: 2px solid var(--cadet-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.step-label {
    font-size: 0.56rem;
    color: var(--cadet-blue);
    text-align: center;
    max-width: 90px;
    white-space: normal;
    min-height: 32px;
    word-wrap: break-word;
    line-height: 1.2;
}

.step-item.active .step-circle {
    border-color: var(--blue-46);
}

.step-item.compelted::before {
    color: #4B9FAB;
    position: absolute;
    content: '\e92e';
    font-family: miricon;
    background: #B7D9DD;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 16px;
    z-index: 1;
}

.step-item.compelted .step-label {
    color: var(--dark);
    font-weight: 600;
}



.step-item.active .step-label {
    color: var(--dark);
    font-weight: 600;
}

@media (max-width: 992px) {
    .step-label {
        font-size: 0.7rem;
        max-width: 70px;
    }
}

@media (max-width: 768px) {
    .step-label {
        font-size: 0.65rem;
        max-width: 60px;
    }
}

@media (max-width: 576px) {
    .step-progress-container {
        overflow-x: auto;
    }

    .step-progress {
        min-width: 800px;
    }

    .step-label {
        font-size: 0.7rem;
        max-width: 80px;
    }
}



.form-group {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}

input.form-input {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--body-main-text-color);
    background-color: var(--body-bg);
    background-clip: padding-box;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input.form-input:focus {
        color: var(--body-main-text-color);
        background-color: var(--body-bg);
        outline: 0;
        border-color: var(--blue-46);
    }

.form-input3 {
    padding: 8px 0px;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--body-main-text-color);
    background-color: var(--body-bg);
    background-clip: padding-box;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: -webkit-fill-available;
}

    .form-input3:focus {
        color: var(--body-main-text-color);
        background-color: var(--body-bg);
        outline: 0;
        border-color: var(--blue-46);
    }

.form-label {
    margin-bottom: 0.5rem;
    color: var(--input-label-mute-color);
}

    .form-label.required::after {
        content: " *";
        color: var(--red);
    }

.form-select , select.form-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.5rem;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--body-main-text-color);
    background-color: var(--body-bg);
    background-clip: padding-box;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(100% - 10px) center;
}

    .form-select:focus , select.form-input:focus {
        color: var(--body-main-text-color);
        background-color: var(--body-bg);
        outline: 0;
        border-color: var(--blue-46) !important;
    }

    .form-select option {
        color: var(--body-main-text-color);
    }

    .form-select[disabled], .form-select:disabled , select.form-input[disabled], select.form-input:disabled {
        background-color: var(--gray-light);
        opacity: 0.6;
        cursor: not-allowed;
    }



    .form-select option:first-child , select.form-input option:first-child {
        color: #808B9C !important;
    }

.form-select , select.form-input {
    color: var(--body-main-text-color);
}

    .form-select:invalid , select.form-input:invalid {
        color: #808B9C !important;
    }

.form-select2 {
    display: block;
    width: -webkit-fill-available;
    padding: 0.5rem 0.5rem;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--body-main-text-color);
    background-color: var(--body-bg);
    background-clip: padding-box;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(100% - 10px) center;
}

    .form-select2:focus {
        color: var(--body-main-text-color);
        background-color: var(--body-bg);
        outline: 0;
        border-color: var(--blue-46) !important;
    }

    .form-select2 option {
        color: var(--body-main-text-color);
    }

    .form-select2[disabled], .form-select2:disabled {
        background-color: var(--gray-light);
        opacity: 0.6;
        cursor: not-allowed;
    }



    .form-select2 option:first-child {
        color: var(--input-label-mute-color) !important;
    }

.form-textarea , textarea.form-input {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--body-main-text-color);
    background-color: var(--body-bg);
    background-clip: padding-box;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    resize: none;
    min-height: 120px;
}

    .form-textarea:focus , textarea.form-input:focus {
        color: var(--body-main-text-color);
        background-color: var(--body-bg);
        outline: 0;
        border-color: var(--blue-46);
    }

    .form-textarea[disabled], .form-textarea:disabled , textarea.form-input[disabled], textarea.form-input:disabled {
        background-color: var(--gray-light);
        opacity: 0.6;
        cursor: not-allowed;
    }

    .form-textarea::placeholder , textarea.form-input::placeholder {
        color: var(--input-label-mute-color);
    }

[data-drawer-tab] {
    min-height: 43vh;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    display: none;
}

    [data-drawer-tab].show {
        animation: none;
        display: flex;
        opacity: 1;
        visibility: visible;
    }

@keyframes sectionChange {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1.05);
    }
}



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

.col-35 {
    flex: 0 0 auto;
    width: 20%;
}

@media (min-width: 992px) {
    .col-lg-35 {
        flex: 0 0 auto;
        width: 20%;
    }
}

.resume-skill {
    border: 2px dashed var(--main-border-color);
    padding: 14px 8px 6px 8px;
    border-radius: 4px;
    text-align: center !important;
    align-content: center !important;
    color: var(--cadet-blue);
    font-size: 1rem;
}

    .resume-skill:hover {
        border-color: var(--blue-46);
        background-color: var(--white-ghost);
        color: var(--blue-46);
        transition: all 0.3s ease;
        cursor: pointer;
    }

.resume-skill-section > * {
    margin-top: 20px;
}

.text-right {
    text-align: right !important;
}

.checkbox-container {
    display: flex;
    align-items: center;
}


    .checkbox-container input {
        appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid var(--input-checkbox-border-color);
        border-radius: 4px;
        position: relative;
        cursor: pointer;
    }

        .checkbox-container input:checked {
            background-color: var(--input-checkbox-border-color);
        }

            .checkbox-container input:checked::after {
                content: '✔';
                color: white;
                position: absolute;
                left: 25%;
                top: 0;
                font-size: 11px;
                font-weight: bold;
            }

    .checkbox-container label {
        margin-right: 5px;
        cursor: pointer;
    }

.checkbox-container2 {
    display: flex;
    align-items: center;
}

    .checkbox-container2 input {
        appearance: none;
        width: 14px;
        height: 14px;
        border: 1.5px solid var(--gray-dark);
        border-radius: 4px;
        position: relative;
        cursor: pointer;
    }

        .checkbox-container2 input:checked {
            background-color: var(--blue-46-light);
        }

    .checkbox-container2 label {
        margin-right: 5px;
        cursor: pointer;
        color: var(--gray-dark);
        font-size: 12px;
        font-weight: 500;
    }

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cadet-blue);
}

.radio-group input[type="radio"] {
    appearance: none;
    width: 12px;
    height: 12px;
    border: 1px solid var( --input-radio-border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

    .radio-group input[type="radio"]:checked {
        background-color: var(--input-radio-border-color);
        border: none;
    }

        .radio-group input[type="radio"]:checked + .radio-label {
            font-weight: bold;
            color: var(--body-main-text-color);
        }

        .radio-group input[type="radio"]:checked::after {
            content: '';
            width: 7px;
            height: 7px;
            background: var(--body-bg);
            border-radius: 50%;
            position: absolute;
        }

.radio-group .radio-label[for="no"] {
    color: #bbb;
}

.radio-group-group {
    display: flex;
    gap: 10px;
}

.radio-group-item {
    display: flex;
    gap: 3px;
}

.resume-identity {
    border: 2px dashed var(--main-border-color);
    padding: 48px 0px;
    border-radius: 4px;
    text-align: center !important;
    align-content: center !important;
    color: var(--cadet-blue);
    font-size: 1rem;
}

    .resume-identity:hover {
        border-color: var(--blue-46);
        background-color: var(--white-ghost);
        color: var(--blue-46);
        transition: all 0.3s ease;
        cursor: pointer;
    }

.resume-identity-section > * {
    margin-top: 20px;
}


.vertical-line {
    width: 1px;
    position: relative;
    border-right: 0.5px solid var(--gray-light);
    box-sizing: border-box;
    height: auto;
    padding: 0;
}

.search-container {
    position: relative;
    margin-right: 0;
    width: 100%;
    margin-left: auto;
}

.search-input {
    width: 100%;
    padding: 5px 35px 0px 0px;
    border: none;
    height: 100%;
    border-radius: 5px;
    outline: none;
    font-size: 18px !important;
    text-align: right;
    direction: rtl;
    background-color: transparent;
}

    .search-input:focus {
        border-color: #3498db;
    }

.search-label {
    position: absolute;
    right: 30px;
    top: 5px;
    transition: 0.2s ease all;
    pointer-events: none;
    color: var(--dark);
    font-size: 14px;
}

.search-input:focus ~ .search-label,
.search-input:not(:placeholder-shown) ~ .search-label {
    top: -10px;
    right: 20px;
    font-size: 12px;
    color: var(--blue-46);
    background-color: var(--body-bg);
    padding: 0 5px;
}

.search-icon {
    position: absolute;
    right: 5px;
    top: 8px;
    color: var(--dark);
    font-size: 18px;
}

.search-input:focus ~ .search-icon {
    color: var(--blue-46);
}
/* This ensures the placeholder is invisible but the element still exists for CSS selectors */
.search-input::placeholder {
    color: transparent;
}


.form-group2 {
    position: relative;
    padding: 15px 16px;
    margin-right: 0;
    margin-left: auto;
}

.form-input2 {
    width: 100%;
    padding: 20px 10px 5px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
    font-size: 14px;
    text-align: right;
    direction: rtl;
    background-color: transparent;
}

    .form-input2:focus {
        border-color: var(--blue-46);
    }

.form-label2 {
    position: absolute;
    right: 25px;
    top: 40%;
    transition: 0.2s ease all;
    pointer-events: none;
    color: #999;
    font-size: 12px;
}

.form-input2:focus ~ .form-label2,
.form-input2:not(:placeholder-shown) ~ .form-label2 {
    top: 26%;
    right: 23px;
    font-size: 12px;
    color: var(--blue-46);
    background-color: white;
    padding: 0 5px;
}

.form-icon2 {
    position: absolute;
    right: 25px;
    top: 25px;
    color: #999;
    font: 25px;
}

.form-input2:focus ~ .form-icon2 {
    color: var(--blue-46);
}

.form-input2::placeholder {
    color: transparent;
}

.team-header-section-icon {
    font-size: 20px;
    padding-top: 3px;
}

    .team-header-section-icon i.active {
        color: var(--blue-46);
    }

    .team-header-section-icon i:hover {
        color: var(--blue-46);
        cursor: pointer;
    }
.team-card-place {
    overflow-y: scroll;
    max-height: 60vh;
    direction: ltr;
    margin-right: -17px;
    padding-right: 10px;
}
    /* width */
    .team-card-place::-webkit-scrollbar {
        -ms-overflow-style: -ms-autohiding-scrollbar;
        width: 3px;
        scrollbar-width: thin;
        scrollbar-color: var(--dark) var(--gray-light);
        height: 8px;
    }

    /* Track */
    .team-card-place::-webkit-scrollbar-track {
        background: var(--gray-light);
        padding-left: 10px;
        border-radius: 10px; /* Rounded corners for the track */
    }

    /* Handle */
    .team-card-place::-webkit-scrollbar-thumb {
        background: var(--dark);
        border-radius: 10px; /* Rounded corners for the thumb */
    }

        /* Handle on hover */
        .team-card-place ::-webkit-scrollbar-thumb:hover {
            background: var(--dark);
        }
.team-card {
    direction: rtl;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: white;
    margin-top: 15px;
}

.team-card-header.bg-color-1 {
    background-color: var(--team-header-background-color-1) !important;
}

.team-card-header.bg-color-2 {
    background-color: var(--team-header-background-color-2) !important;
}

.team-card-header.bg-color-3 {
    background-color: var(--team-header-background-color-3) !important;
}

.team-card-header.bg-color-4 {
    background-color: var(--team-header-background-color-4) !important;
}

.team-card-header.bg-color-5 {
    background-color: var(--team-header-background-color-5) !important;
}

.team-card-header.bg-color-6 {
    background-color: var(--team-header-background-color-6) !important;
}

.team-card-header.bg-color-7 {
    background-color: var(--team-header-background-color-7) !important;
}

.team-card-header.bg-color-8 {
    background-color: var(--team-header-background-color-8) !important;
}

.team-card-header {
    position: relative;
    background-color: #e1f5fe;
    padding: 16px 16px;
    display: flex;
    align-items: center;
}

    .team-card-header div:first-child {
         position: absolute;
    }

    .team-card-header div:last-child {
       
        text-align: center;
        width: 100%;
    }



.team-card-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.edit-icon {
    color: var(--dark);
    cursor: pointer;
    font-size: 16px;
}

.team-card-info {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

.team-info-label {
    font-size: 8px;
    color: var(--dark);
}

.team-info-value {
    font-size: 7px;
    color: var(--gray-dark);
}

.info-value {
    color: #666;
}

.team-card-actions {
    display: flex;
    justify-content: space-between;
}

.list-task .team-card-actions {
    padding: 12px 16px;
}

.list-team .team-action-button {
    padding: 12px 10px;
    white-space:nowrap;
}

.list-team, .list-task {
    display: none;
}

    .list-team.show, .list-task.show {
        display: flex;
    }

.team-action-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}

    .team-action-button i {
        font-size: 12px;
    }

.team-delete-btn {
    color: var(--pink);
}



.team-status-btn {
    color: var(--blue);
}

.team-board-btn {
    color: var(--success-light);
}

.team-follow-up-task-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.team-follow-up-task-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

    .team-follow-up-task-body.show {
        max-height: fit-content;
        opacity: 1;
    }

.team-follow-up-task-header i {
    transition: transform 0.3s ease, color 0.3s ease;
}

    .team-follow-up-task-header i.rotate {
        transform: rotate(180deg);
    }

.text-muted {
    color: var(--cadet-blue);
}

.team-follow-up-task-item {
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.03);
    border-radius: var(--card-border-radius);
    background-color: var(--white);
    border: 0.5px solid var(--gray-light);
    box-sizing: border-box;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    color: var(--dark);
    margin-top: 12px;
}

.team-follow-up-task-item-header {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
}

.team-follow-up-task-item hr {
    margin: 0px 12px;
    border-color: #adb5bd38;
}

.team-follow-up-task-item-icons {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
}

    .team-follow-up-task-item-icons > * {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: space-around;
        align-items: center;
    }

        .team-follow-up-task-item-icons > * i {
            font-size: 15px;
            margin-left: 4px;
        }

        .team-follow-up-task-item-icons > *:hover {
            transform: scale(1.2);
            transition: transform 0.2s ease, color 0.2s ease;
            cursor: pointer;
        }

.text-blue {
    color: var(--blue-46);
}

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

.pagination-2 {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .pagination-2 a {
        margin: 0 5px;
        font-size: 12px;
        font-weight: 500;
        color: var( --secondary);
        cursor: pointer;
    }

        .pagination-2 a.active {
            color: var(--dark);
        }

        .pagination-2 a i {
            padding-top: 1px;
            font-size: 15px;
            color: var(--dark);
        }




.custom-scroll-place {
    overflow-y: scroll;
    max-height: 30vh;
    direction: ltr;
    margin-right: -17px;
    padding-right: 10px;
}



    .custom-scroll-place::-webkit-scrollbar {
        -ms-overflow-style: -ms-autohiding-scrollbar;
        width: 3px;
        scrollbar-width: thin;
        scrollbar-color: var(--dark) var(--gray-light);
        height: 8px;
    }

    /* Track */
    .custom-scroll-place::-webkit-scrollbar-track {
        background: var(--gray-light);
        padding-left: 10px;
        border-radius: 10px; /* Rounded corners for the track */
    }

    /* Handle */
    .custom-scroll-place::-webkit-scrollbar-thumb {
        background: var(--dark);
        border-radius: 10px; /* Rounded corners for the thumb */
    }

        /* Handle on hover */
        .custom-scroll-place::-webkit-scrollbar-thumb:hover {
            background: var(--dark);
        }

.bord-task-item {
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.03);
    border-radius: var(--card-border-radius);
    background-color: #f5f5f5;
    border: 0.5px solid var(--gray-light);
    box-sizing: border-box;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    color: var(--dark);
    margin-top: 12px;
    direction: rtl;
}

.bord-task-item-header {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
}

.bord-task-item hr {
    margin: 0px 12px;
    border-color: #adb5bd38;
}

.bord-task-item-icons {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 11px;
}

    .bord-task-item-icons > * {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: space-around;
        align-items: center;
    }

        .bord-task-item-icons > * i, .bord-task-item-icons > * img {
            font-size: 12px;
            margin-left: 4px;
        }

        .bord-task-item-icons > *:hover {
            transform: scale(1.2);
            transition: transform 0.2s ease, color 0.2s ease;
            cursor: pointer;
        }

.bord-task-item-header i {
    font-size: 12px;
}


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


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

.rounded {
    border-radius: var(--main-border-radius);
}

.cursor-pointer {
    cursor: pointer;
}

.border {
    border: 1px solid;
}

.border-bottom {
    border-bottom: 1px solid;
}

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


.surprise-mark {
    border: 2px solid;
    border-radius: 50px;
    padding: 0px 8px;
    font-weight: 800;
    margin-left: 5px;
}

/* New Navigation Menu Styles */
.nav-items {
    display: flex;
    gap: 5px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.nav-item {
    position: relative;
    padding: 8px 0;
}

    .nav-item > a {
        text-decoration: none;
        font-size: 11px;
        line-height: 12px;
        font-weight: 500;
        color: var(--dark);
        text-align: right;
        display: flex;
        align-items: center;
        transition: color 0.3s ease;
    }

        .nav-item > a::after {
            content: "\e911";
            font-family: miricon;
            margin-right: 5px;
            font-size: 12px;
            transition: transform 0.3s ease;
        }

    .nav-item:hover > a {
        color: var(--blue-46);
    }

        .nav-item:hover > a::after {
            transform: rotate(180deg);
        }

.nav-submenu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: var(--main-border-radius);
    min-width: 200px;
    padding: 8px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.nav-items .nav-item:first-child .nav-submenu {
    right: 0 !important;
}

.nav-item:hover .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-submenu a {
    display: block;
    padding: 8px 16px;
    color: var(--dark);
    text-decoration: none;
    font-size: 12px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .nav-submenu a:hover {
        background-color: var(--white-ghost);
        color: var(--blue-46);
    }

/* Responsive styles for navigation */
@media (max-width: 992px) {
    .nav-items {
        flex-direction: column;
        gap: 10px;
    }

    .nav-item {
        width: 100%;
    }

    .nav-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background-color: transparent;
        padding-right: 20px;
        display: none;
    }
}

/* Navigation Badge Styles */
.nav-item .nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 15px;
    padding: 1px 4px 0px 4px;
    background-color: var(--red);
    color: var(--white);
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    position: absolute;
    top: -5px;
    left: -15px;
}

.nav-item:hover .nav-badge {
    background-color: var(--blue-46);
    transition: background-color 0.3s ease;
}

.nav-submenu .nav-badge {
    position: relative;
    float: inline-end;
    margin-left: 10px;
}

/* Update nav-item > a to accommodate badge */
.nav-item > a {
    text-decoration: none;
    font-size: 11px;
    line-height: 12px;
    font-weight: 600;
    color: var(--dark);
    text-align: right;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
    padding-left: 10px; /* Add padding for badge */
}

    .nav-item > a::after {
        margin-right: auto; /* Push arrow to the left */
        order: 2; /* Reorder to put arrow at the end */
    }

.nav-badge {
    order: 1; /* Keep badge before arrow */
}

/* Responsive adjustments for badges */
@media (max-width: 992px) {
    .nav-badge {
        margin-right: auto;
        margin-left: 8px;
    }
}

.card-education img {
    width: -webkit-fill-available;
    height: 100%;
}

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


.rotate-30 {
    transform: rotate(30deg);
}

.rotate-45 {
    transform: rotate(45deg);
}


.rotate-90 {
    transform: rotate(90deg);
}

.rotate-135 {
    transform: rotate(135deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.rotate-225 {
    transform: rotate(225deg);
}

.rotate-270 {
    transform: rotate(270deg);
}

.rotate-315 {
    transform: rotate(315deg);
}

.badge {
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px 3px 6px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
}

.badge-danger {
    background-color: var(--red);
    color: var(--white);
}

.badge-blue {
    background-color: var(--blue-46);
    color: var(--white);
}

.card-education .badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

.card-education {
    position: relative;
}

    .card-education:hover {
        transform: scale(1.05);
        transition: transform 0.3s ease;
        cursor: pointer;
    }


.page-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--dark);
}

.course-title {
    font-size: 28px;
    font-weight: bold;
    color: var(--dark);
}

/* Course Information Styles */
.course-info {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    margin-bottom: 48px;
}

.instructor-card {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--card-border-radius);
}

    .instructor-card .card-header {
        padding: var(--card-header-padding);
        border-bottom: 1px solid var(--card-border);
    }

        .instructor-card .card-header h3 {
            font-size: 18px;
            font-weight: 500;
            color: var(--dark);
        }

    .instructor-card .card-body {
        padding: 24px;
    }

.instructor-profile {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.profile-info h4 {
    font-size: 16px;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 4px;
}

.profile-info span {
    color: var(--secondary);
    font-size: 14px;
}

.profile-info {
    margin-right: 10px;
}

.profile-image img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.course-details-img {
    object-fit: cover;
    max-height: 470px;
}

    .course-details-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

.instructor-bio p {
    color: var(--secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.instructor-bio {
    height: 290px;
    overflow: auto;
}

    .instructor-bio p:first-child {
        font-style: italic;
        color: var(--dark);
        font-weight: 500;
    }

/* Course Details Styles */
.course-details {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--card-border-radius);
    padding: 32px;
}

    .course-details h3 {
        font-size: 18px;
        font-weight: 500;
        color: var(--dark);
        margin-bottom: 16px;
    }

.course-intro, .course-audience, .course-syllabus {
    margin-bottom: 32px;
    max-height: 550px;
    overflow: auto;
    padding-top: 10px;
}

    .course-intro p, .course-audience p, .course-audience li, .course-benefits li {
        width: 100%;
        position: relative;
        font-size: 12px;
        line-height: 20px;
        display: inline-block;
        color: var( --gray-dark);
        text-align: right;
    }

    .course-intro h2, .course-audience h2 {
        font-size: 16px;
        line-height: 16px;
        display: inline-block;
        color: var(--dark);
        text-align: right;
    }

    .course-audience ul {
        list-style: none;
        padding: 0;
    }



.syllabus-content {
}

.syllabus-section h4 {
    font-size: 16px;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 12px;
}

.syllabus-section ul {
    padding: 0;
}

.syllabus-section li {
    color: var(--secondary);
    margin-bottom: 8px;
    line-height: 1.6;
}

.course-benefits ul {
    list-style: none;
    padding: 0;
    margin-bottom: 24px;
}



.course-info-footer {
    margin-bottom: 24px;
}

    .course-info-footer p {
        color: var(--gray-dark);
        font-size: 12px;
        line-height: 20px;
    }


.start-course-btn:hover {
    background: var(--orange-dark);
}


.section-header {
    margin-bottom: 24px;
}

    .section-header h3 {
        font-size: 15px;
        font-weight: 500;
        color: var(--dark);
    }

.courses-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.course-card {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--card-border-radius);
    overflow: hidden;
}


.card-content {
    padding: 16px;
}

.card-header {
    margin-bottom: 12px;
}

.prerequisite-badge {
    display: inline-block;
    background: var(--very-pale-orange);
    color: var(--orange);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 8px;
}

.card-header h4 {
    font-size: 16px;
    font-weight: 500;
    color: var(--dark);
    line-height: 1.4;
}

.card-info {
    display: flex;
    justify-content: space-between;
    color: var(--secondary);
    font-size: 14px;
    margin-bottom: 16px;
}

.card-progress {
    border-top: 1px solid var(--card-border);
    padding-top: 12px;
}

.progress-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--secondary);
    font-size: 14px;
}

.pagination-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    background: var(--gray-light);
    border-radius: 50%;
    cursor: pointer;
}

    .dot.active {
        background: var(--orange);
    }

/* Responsive Styles */
@media (max-width: 1200px) {
    .courses-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .course-info {
        grid-template-columns: 1fr;
    }

    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .course-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .breadcrumb-section {
        text-align: left;
    }

    .syllabus-content {
        grid-template-columns: 1fr;
    }

    .courses-grid {
        grid-template-columns: 1fr;
    }
}



.course-header {
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
}


.course-info-body {
    height: 355px;
    overflow-y: auto;
}

.lesson-item {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

.lesson-content {
    padding-right: 20px;
    display: none;
}

.content-item {
    padding: 0px 5px 0px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
    cursor: pointer;
}

    .content-item.active {
        color: #4d88ff;
    }

.lesson-item.active {
    background-color: #f8f9fa;
}

.lesson-item i {
    transition: transform 0.3s;
}

.lesson-item.expanded i.mir-BiChevronDown {
    transform: rotate(180deg);
}

.main-content {
     padding: 0;
     display: flex;
     flex-direction: column;
     padding-bottom: 80px;
     margin-top: 40px;
	margin-top: 6%;
}

.video-container {
    flex-grow: 1;
    background-color: #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

    .video-container img {
        border-radius: 10px;
    }

.play-button {
    background-color: rgba(255,255,255,0.4);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
}

.progress-container {
    background-color: white;
    padding: 15px;
    border-top: 1px solid #e9ecef;
}

.progress-bar {
    height: 2px;
    background-color: #e9ecef;
    border-radius: 3px;
    margin: 15px 6px;
    position: relative;
}

.progress-points {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.progress-point {
    width: 9px;
    height: 9px;
    background-color: #e9ecef;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    cursor: pointer;
}

    .progress-point.active {
        background-color: var(--blue-46);
    }

.progress-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    color: #707886;
    font-size: 14px;
}

    .progress-labels div {
        font-size: 12px;
        width: 24px;
    }

        .progress-labels div.active {
            color: var(--dark)
        }

.status-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-left: 10px;
}

    .status-icon.completed {
        background-color: #28a745;
        color: white;
    }

    .status-icon.in-progress {
        background-color: #ffc107;
        color: white;
    }

    .status-icon.pending {
        border: 1px solid #6c757d;
        color: #6c757d;
    }

.practice-tag {
    color: #ff2e5b;
    font-size: 8px;
}

.progress-fill {
    height: 100%;
    background-color: var(--blue-46);
    border-radius: 3px;
}

.add-note {
    padding-bottom: 15px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    color: var(--blue-46);
}

.course-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-info {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dark);
}

.lesson-icon-status {
    height: 16px;
    width: 16px;
    text-align: center;
    margin-left: 5px;
}

    .lesson-icon-status i {
        font-size: 16px;
    }

.education-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .education-tabs .tab-item {
        font-size: 12px;
    }

.tab-item {
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    min-width: 90px;
    text-align: center;
}

    .tab-item:hover {
        background-color: var(--blue-60);
        color: var(--white);
    }

    .tab-item.active {
        background-color: var(--blue-46);
        color: var(--white);
    }

.education-content-item {
    border-radius: 10px;
    border: 1px solid var(--gray-light);
    margin-bottom: 15px;
    padding: 16px;
}

.education-content-item-body {
    padding-right: 20px;
    font-weight: 500;
    padding-bottom: 10px;
    font-size: 8px;
    line-height: 16px;
    color: var( --gray-dark);
}

    .education-content-item-body button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

.education-content-item-info {
    background-color: var(--very-pale-cyan-100);
}

    .education-content-item-info .education-content-item-header {
        color: var(--blue);
    }

.education-content-item-header {
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .education-content-item-header img {
        width: 16px;
        height: 16px;
    }

.education-content-body {
    max-height: 500px;
    overflow-y: auto;
}

.education-content {
    display: none;
}

    .education-content.show {
        display: block;
    }



.user-info {
    display: flex;
    align-items: center;
}

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-left: 10px;
    overflow: hidden;
}

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

.time-ago {
    font-size: 12px;
    line-height: 17px;
    font-weight: 500;
    color: var(--dark);
    text-align: left;
}

.user-name {
    color: var(--blue-46);
    margin-bottom: 0;
    font-size: 16px;
}

.user-info-content {
    display: flex;
    flex-direction: row;
    gap: 7px;
    justify-content: center;
    align-items: center;
}

.comment-actions {
    font-size: 12px;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    padding-right: 40px;
}

.comment-content {
    padding-right: 40px;
    margin-top: 5px;
    width: 100%;
    font-size: 12px;
    line-height: 24px;
    font-weight: 500;
    color: var(--gray-dark);
    text-align: right;
    display: inline-block;
}

.comment-replay-content {
    padding: 10px;
    border: 1px solid var(--main-border-color);
    border-radius: 5px;
    width: 100%;
}

    .comment-replay-content input {
        width: 100%;
        border: none;
        outline: none;
        padding: 10px;
        border-radius: 5px;
    }

.comment-replay-item {
    margin-top: 32px;
}

.comment-replay {
    margin-top: 32px;
    margin-right: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comment-add-replay {
    display: flex;
    flex-direction: row;
    gap: 5px;
    width: 100%;
    margin-top: 48px;
}

.comment-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}



/* width */
.education-content-body::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.education-content-body::-webkit-scrollbar-track {
    border-radius: 10px;
}

/* Handle */
.education-content-body::-webkit-scrollbar-thumb {
    background: grey;
    border-radius: 10px;
}



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


/* Invoice Tab Styles based on Figma Design - Updated */
.invoice-tab-container {
    margin-top: 32px;
    width: 100%;
}

.invoice-arrow-container {    
    min-width: 15px;
    position: relative;
}

    .invoice-arrow-container i.mir-arrow-down2 {
        position: absolute;
        left: 0px;
        top: 0.5px;
    }

.tab-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #FFFFFF;
    padding: 16px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    margin-bottom: 5px;
}

.tab-left {
    display: flex;
    gap: 24px;
    align-items: center;
}

.tab-item {
    background: transparent;
    border: none;
    color: #242A33;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 4px;
}

    .tab-item.active {
        background-color: var( --blue-46);
        color: #FFFFFF;
    }

.pdf-download-btn {
    background-color: #FF2E5B;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 12px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    font-size: 8px;
    font-weight: 500;
    height: 100%;
}

    .pdf-download-btn i {
        font-size: 12px;
    }

.tab-content {
    padding: 40px 0;
}

.tab-pane {
    display: none;
}

    .tab-pane.active {
        display: block;
    }


.invoice-info-container {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    border: 0.5px solid #DDDFE1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.invoice-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 12px;
}

.invoice-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 4px;
}

.invoice-checkbox-text {
    font-size: 12px;
    font-weight: 500;
    color: #242A33;
    line-height: 1.6;
    text-align: right;
}

.invoice-checkbox-item.active .invoice-checkbox-text {
    color: var( --gray-dark);
}

.custom-checkbox {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1.5px solid var( --gray-dark);
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .custom-checkbox.checked {
        background-color: var( --blue-46);
        border-color: var( --blue-46);
    }

.checkmark {
    display: none;
    color: white;
    font-size: 12px;
}

.custom-checkbox.checked .checkmark {
    display: block;
}


.invoice-items-container {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    border: 0.5px solid #DDDFE1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.invoice-items-table-container {
    width: 100%;
}

.invoice-items-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
    border-radius: 4px;
}

    .invoice-items-table th span, .invoice-items-table tfoot td span {
        background-color: #F4F6F8;
        padding: 10px 8px;
        font-size: 12px;
        font-weight: 500;
        color: #242A33;
        border: 0.5px solid #E0E2EA;
        white-space: nowrap;
        display: block;
    }

    .invoice-items-table th:nth-child(1) span {
        border-radius: 0 5px 5px 0;
    }

    .invoice-items-table th:last-child span {
        border-radius: 5px 0 0 5px;
    }

    .invoice-items-table th {
        padding: 0;
    }


    .invoice-items-table tbody tr:nth-child(1) td {
        padding-top: 8px;
    }


    .invoice-items-table tbody tr:last-child td {
        padding-bottom: 8px;
    }

    .invoice-items-table th:nth-child(1),
    .invoice-items-table td:nth-child(1) {
        width: 36px;
        min-width: 36px;
    }

    .invoice-items-table th:nth-child(6),
    .invoice-items-table td:nth-child(6) {
        width: 78px;
        min-width: 78px;
        max-width: 78px;
    }

    .invoice-items-table th:nth-child(8),
    .invoice-items-table td:nth-child(8) {
        width: 78px;
        min-width: 78px;
        max-width: 78px;
    }



    .invoice-items-table th:nth-child(2),
    .invoice-items-table td:nth-child(2) {
        width: 376px;
        min-width: 376px;
        max-width: 376px;
    }

    .invoice-items-table th:nth-child(3),
    .invoice-items-table td:nth-child(3) {
        width: 90px;
        min-width: 90px;
    }

    .invoice-items-table th:last-child,
    .invoice-items-table td:last-child {
        width: 88px;
        min-width: 88px;
    }

    .invoice-items-table th,
    .invoice-items-table td {
        width: 56px;
        min-width: 56px;
        max-width: 56px;
    }

    .invoice-items-table td {
        padding: 4px 2px;
        font-size: 12px;
        border: none;
        text-align: center;
    }

    .invoice-items-table tfoot td span {
        padding: 10px 8px;
        font-size: 12px;
    }

    .invoice-items-table td input {
        text-align: center;
    }

    .invoice-items-table tbody td:first-child,
    .invoice-items-table tfoot td:first-child {
        text-align: center;
    }

    .invoice-items-table tbody td:nth-child(2),
    .invoice-items-table tfoot td:nth-child(2) {
        text-align: right;
    }



    .invoice-items-table tfoot td:last-child span {
        border-radius: 5px 0 0 5px;
    }

    .invoice-items-table tfoot td:first-child span {
        border-radius: 0 5px 5px 0;
    }



.item-actions {
	display: flex;
	justify-content: center;
	gap: 5px;
 
}

.item-copy-btn,
.item-delete-btn,
.item-edit-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--pink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
}


    .item-delete-btn.mute {
        color: var(--mute-color);
    }

    .item-copy-btn:hover,
    .item-delete-btn:hover {
        opacity: 0.8;
    }

/* دکمه افزودن آیتم در جدول با زمینه سیاه */
.add-item-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.add-invoice-peyment-btn {
    background-color: var( --blue-46);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

    .add-invoice-peyment-btn i {
        font-size: 14px;
    }



.invoice-peyment-container {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    border: 0.5px solid #DDDFE1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.invoice-peyment-table-container {
    width: 100%;
}

.invoice-peyment-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
    border-radius: 4px;
}

    .invoice-peyment-table th span, .invoice-peyment-table tfoot td span {
        background-color: #F4F6F8;
        padding: 10px 8px;
        font-size: 12px;
        font-weight: 500;
        color: #242A33;
        border: 0.5px solid #E0E2EA;
        white-space: nowrap;
        display: block;
    }

    .invoice-peyment-table th:nth-child(1) span {
        border-radius: 0 5px 5px 0;
    }

    .invoice-peyment-table th:last-child span {
        border-radius: 5px 0 0 5px;
    }

    .invoice-peyment-table th {
        padding: 0;
    }


    .invoice-peyment-table tbody tr:nth-child(1) td {
        padding-top: 8px;
    }

    .invoice-peyment-table tr:nth-child(1) td .invoice-arrow-container-td i.mir-arrow-down2 {
        left: 2px;
    }

    .invoice-peyment-table tr:last-child td .invoice-arrow-container-td i.mir-arrow-up2 {
        right: 4px;
    }




.invoice-arrow-container-td {
    gap: 4px;
    margin-left: 8px;
}

.invoice-peyment-table tbody tr:last-child td {
    padding-bottom: 8px;
}


.invoice-peyment-table td {
    padding: 4px 2px;
    font-size: 12px;
    border: none;
    text-align: center;
}

.invoice-peyment-table tfoot td span {
    padding: 10px 8px;
    font-size: 12px;
}

.invoice-peyment-table td input {
    text-align: center;
}

.invoice-peyment-table tbody td:first-child,
.invoice-peyment-table tfoot td:first-child {
    text-align: center;
}

.invoice-peyment-table tbody td:nth-child(2),
.invoice-peyment-table tfoot td:nth-child(2) {
    text-align: right;
}



.invoice-peyment-table tfoot td:last-child span {
    border-radius: 5px 0 0 5px;
}

.invoice-peyment-table tfoot td:first-child span {
    border-radius: 0 5px 5px 0;
}



.invoices-container {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    border: 0.5px solid #DDDFE1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.invoices-table-container {
    width: 100%;
}

.invoices-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
    border-radius: 4px;
}

    .invoices-table th span, .invoices-table tfoot td span {
        background-color: #F4F6F8;
        padding: 10px 8px;
        font-size: 12px;
        color: #242A33;
        border: 0.5px solid #E0E2EA;
        white-space: nowrap;
        display: block;
        text-align:center;
    }

    .invoices-table th:nth-child(1) span {
        border-radius: 0 5px 0 0;
    }

    .invoices-table th:last-child span {
        border-radius: 5px 0 0 0;
    }

    .invoices-table th {
        padding: 0;
    }


    .invoices-table td {
        border: none;
        padding: 0;
        border: 0.5px solid #e0e2ea;
        text-align: center;
    }

        .invoices-table td span {
            padding: 10px 8px;
            display: block;
            font-weight: 500;
            text-align:center;
        }

    .invoices-table tfoot td {
        padding: 10px 8px;
        font-size: 12px;
    }


        .invoices-table tbody td:first-child,
        .invoices-table tfoot td:first-child {
            text-align: center;
        }

    .invoices-table .item-actions {
        justify-content: center;
    }

    .invoices-table tfoot td:last-child {
        border-radius: 5px 0 0 5px;
    }

    .invoices-table tfoot td:first-child {
        border-radius: 0 5px 5px 0;
    }

.text-blue-ff {
    color: var(--blue);
}




.add-invoice-container {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    border: 0.5px solid #DDDFE1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.add-invoice-table-container {
    width: 100%;
}

.add-invoice-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
    border-radius: 4px;
}

    .add-invoice-table th span, .add-invoice-table tfoot td span {
        padding: 10px 8px;
        font-size: 12px;
        color: #242A33;
        border: 0.5px solid #E0E2EA;
        white-space: nowrap;
        display: block;
    }

    .add-invoice-table th:nth-child(1) span {
        border-radius: 0 5px 0 0;
    }

    .add-invoice-table th:last-child span {
        border-radius: 5px 0 0 0;
    }

    .add-invoice-table th {
        padding: 0;
    }


    .add-invoice-table td {
        border: none;
        padding: 0;
    }

    .add-invoice-table td {
        border: 0.5px solid #e0e2ea;
        padding: 5px 4px;
        font-size: 12px;
        font-weight: 500;
    }

    .add-invoice-table tfoot td {
        padding: 10px 8px;
        font-size: 12px;
    }


        .add-invoice-table tbody td:first-child,
        .add-invoice-table tfoot td:first-child {
            text-align: center;
        }




        .add-invoice-table tfoot td:last-child {
            border-radius: 5px 0 0 5px;
        }

        .add-invoice-table tfoot td:first-child {
            border-radius: 0 5px 5px 0;
        }



    .add-invoice-table tbody input {
        font-weight: 500;
    }


.total-price-section {
    padding: 24px;
    background-color: #f4f6f8;
    border-radius: 8px;
}

    .total-price-section .des {
        color: var(--gray-dark);
        font-size: 12px;
    }

    .total-price-section .total-price-section-row {
        display: flex;
        flex-direction: row;
        gap: 24px;
        padding: 16px 0 16px 0;
    }

    .total-price-section .total-price-section-row-reverse {
        display: flex;
        flex-direction: row-reverse;
        gap: 24px;
        padding: 16px 0 16px 0;
    }

.border-bottom-gray {
    border-bottom: 1px solid #DDDFE1;
}


.badge-green {
    background-color: #F0FFDA;
}

.gap-4 {
    gap: 4px;
}

.gap-16 {
    gap: 16px;
}

.drawer-tabs {
    display: flex;
    justify-content: space-around;
    gap: 4px;
    padding: 16px 0px;
    background-color: var(--body-bg);
    border-bottom: 1px solid var(--border-color);
}

.drawer-tab {
    padding: 8px 16px;
    border: none;
    background: none;
    color: var(--dark);
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-weight: 500;
}

    .drawer-tab:hover {
        color: var(--blue-46);
    }

    .drawer-tab.active {
        background-color: var(--blue-46);
        color: white;
    }

.custom-checkbox-2 {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 16px;
    color: #1F2937;
    background-color: #F9FAFB;
    padding: 8px 12px;
    border-radius: 8px;
    width: fit-content;
}

    .custom-checkbox-2 input[type="checkbox"] {
        display: none;
    }

    .custom-checkbox-2 span::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-left: 8px;
        border: 2px solid #4F46E5;
        border-radius: 4px;
        background-color: white;
        vertical-align: middle;
        transition: all 0.2s ease;
    }

    .custom-checkbox-2 input[type="checkbox"]:checked + span::before {
        background-color: #4F46E5;
        box-shadow: inset 0 0 0 4px white;
    }

.badge.bg-blue-ff {
    background: #e6eaff !important;
    color: var( --blue-46) !important;
}

.badge.bg-purple-ff {
    background: #e9e6ff !important;
    color: #7b61ff !important;
}

.badge.bg-pink-ff {
    background: #ffe6e6 !important;
    color: #ff6161 !important;
}


[data-tab] {
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    display: none;
}

    [data-tab].show {
        animation: none;
        display: flex;
        opacity: 1;
        visibility: visible;
    }


.tabs {
    display: flex;
    justify-content: space-around;
    gap: 4px;
    padding: 16px 0px;
    background-color: var(--body-bg);
    border-bottom: 1px solid var(--border-color);
}

.tab {
    padding: 8px 16px;
    border: none;
    background: none;
    color: var(--dark);
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-weight: 500;
}

    .tab:hover {
        color: var(--blue-46);
    }

    .tab.active {
        background-color: var(--blue-46);
        color: white;
    }


.custom-checkbox-2 {
    display: inline-flex;
    align-items: center;
    background: #f8f8fa;
    border: none;
    border-radius: 4px;
    padding: 14px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s;
    min-width: fit-content;
    margin-bottom: 4px;
}

    .custom-checkbox-2 input[type="checkbox"] {
        accent-color: var( --blue-46);
        width: 18px;
        height: 18px;
        margin-left: 8px;
    }

        .custom-checkbox-2 input[type="checkbox"]:checked + span {
            font-weight: bold;
            color: var( --blue-46);
        }

    .custom-checkbox-2 span {
        user-select: none;
    }



.custom-checkbox-3 {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #1F2937;
    padding: 8px 12px;
    border-radius: 8px;
    width: fit-content;
}

    .custom-checkbox-3 input[type="checkbox"] {
        display: none;
    }

    .custom-checkbox-3 span::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-left: 4px;
        border: 2px solid #4F46E5;
        border-radius: 4px;
        background-color: white;
        vertical-align: middle;
        transition: all 0.2s ease;
    }

    .custom-checkbox-3 input[type="checkbox"]:checked + span::before {
        background-color: #4F46E5;
        box-shadow: inset 0 0 0 4px white;
    }


.delete-btn {
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    font-weight: 500;
}


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

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

hr.border-gray {
    border-top: 0px solid;
}


.badge.badge-buy {
    background: #e9e6ff;
    color: #7b61ff;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 12px;
}

.badge.badge-upgrade {
    background: #FFF2E0;
    color: #A87631;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 12px;
}

.item-delete-btn {
    background: none;
    border: none;
    color: #ff6161;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.module-box {
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    background-color: #fff;
    border: 0.5px solid #dddfe1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
}

    .module-box:hover {
        box-shadow: 0 2px 8px #e6eaff;
    }

.summary-item {
    padding: 12px;
    background-color: var(--white-ghost);
    border-radius: 8px;
    margin: 8px 0px;
}

.rounded-pill {
    border-radius: 100px;
}




.chat-container [data-tab] {
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    display: none;
}

    .chat-container [data-tab].show {
        animation: none;
        display: flex;
        opacity: 1;
        visibility: visible;
    }


.chat-container .tabs {
    display: flex;
    justify-content: space-around;
    gap: 4px;
    padding: 16px 0px;
    background-color: var(--body-bg);
    border-bottom: 1px solid var(--border-color);
    overflow: auto;
}

.chat-container .tab {
    padding: 8px 12px;
    border: none;
    background: none;
    color: var(--blue-46-light);
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-weight: 800;
}

    .chat-container .tab:hover {
        background-color: var(--blue-46);
        color: var(--white);
    }

    .chat-container .tab.active {
        background-color: var(--blue-46);
        color: white;
    }


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


.chat-container {
    min-height: 600px
}

.contacts-header {
    font-size: 18px;
    font-weight: 700;
}

.contacts-tabs {
    background: #fff;
}

.contacts-tab {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 500;
    color: #4651E1;
    padding: 16px 0;
    border-bottom: 2px solid transparent;
    transition: border 0.2s, color 0.2s;
    cursor: pointer;
}

    .contacts-tab.active {
        color: #fff;
        background: #4651E1;
        border-radius: 8px 8px 0 0;
        border-bottom: 2px solid #4651E1;
    }

.contact-list-item {
    border-radius: 12px;
    transition: background 0.2s;
    cursor: pointer;
    padding: 12px;
    gap: 8px;
}

    .contact-list-item.active, .contact-list-item:hover {
        background: #F4F6F8;
    }

.contact-avatar-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px #e6eaff;
}

.chat-header-avatar, .chat-footer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px #e6eaff;
}

.badge-danger {
    background: #FF2E5B;
    color: #fff;
    font-size: 12px;
    padding: 2px 10px;
    min-width: 22px;
    text-align: center;
}


.chat-message {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.chat-message-in {
    align-items: flex-end;
}

.chat-message-out {
    align-items: flex-start;
}

.chat-meta {
    font-size: 12px;
    color: #4B5361;
}

.chat-quick-replies {
    background: #fff;
    border-top: 1px solid #F4F6F8;
}

.quick-reply {
    background: #242A33;
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: 6px 18px;
    font-size: 14px;
    margin-left: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

    .quick-reply:hover {
        background: #4651E1;
    }

.chat-badge {
    background-color: var(--pink);
    color: var(--white);
    font-size: 8px;
    text-align: center;
    border-radius: 100px;
    padding: 0px 4px;
    float: left;
    margin-top: 5px;
}

.chat-contacts {
    width: 30.5%;
    padding: 0px 12px;
}

.chat-contacts-section {
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    border: 0.5px solid #dddfe1;
}

.chat-window {
    padding: 0px 12px;
}

.chat-window-section {
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    border: 0.5px solid #dddfe1;
    height: 100%;
    padding: 16px;
}


.chat-bubble-out {
    background: var(--blue-46);
    color: var(--white);
    border-radius: 12px;
    padding: 12px;
    max-width: 70%;
    align-self: flex-start;
    font-size: 11px;
}


.chat-bubble-in {
    background: #F4F6F8;
    color: #242A33;
    border-radius: 12px;
    padding: 12px;
    line-height: 16px;
    max-width: 70%;
    font-size: 11px;
}

.chat-body {
    height: 484px;
    overflow-y: auto;
    padding: 20px 12px;
}

.chat-header {
    padding-bottom: 12px;
    border-bottom: 0.5px solid var(--gray-light);
    gap: 8px;
}


.chat-footer .form-input {
    border: none;
    background: none;
}

.chat-footer .btn {
    border-radius: 8px;
    padding: 4px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.chat-footer .btn-attachment {
    background: none;
    border: none;
}

.chat-footer .btn-send-message {
    background-color: var(--blue-46);
    color: white;
}

.chat-footer {
    padding: 8px;
    gap: 8px;
}

.chat-footer-send-section {
    flex: 1;
    width: 100%;
    position: relative;
    border-radius: 4px;
    border: 1px solid #dddfe1;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 8px;
    gap: 4px;
    text-align: right;
    font-size: 12px;
    color: #4b5361;
}
.modal.opened {
    display: block;
    z-index: 1070
}

.modal-backdrop {
    z-index: 1069;
}

.btn-close {
    color: #808B9C80;
    border-color: #808B9C80;
}

    .btn-close span {
        color: #808B9C80;
    }

.lockBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #00000014;
    z-index: 999999;
}

    .lockBox .preview-item {
        margin: 6% 0;
    }
    .hand{
        cursor:pointer;
    }
.question-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
}

.option {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--white-ghost);
    padding: 10px;
    border-radius: 5px;
}

.end-test {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}


.app-footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--white);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.app-footer-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    gap: 10px;
 
}

 

.app-footer-content-item select{
       width: 100%;
       padding: 5px;
       border: none;
       border-bottom: solid 1px;
}

.text-primary{
     color:var(--blue-46);
     cursor:pointer;
}

.app-profile {
	position: relative;
}

.app-profile img {
	width: 40px;
	height: 40px;
	border-radius: 100%;
	cursor: pointer;
}

/* منوی بازشونده */
.profile-dropdown {
     position: absolute;
	top: 30px;
	left: -18px;
     width: 260px;
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
     padding: 15px;
     z-index: 1000;
     animation: fadeSlide 0.3s ease forwards;
     transform-origin: top right;
}

/* کارت کاربر */
.profile-user-card {
	display: flex;
 
	margin-bottom: 12px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	flex-direction: column;
}
.profile-user-name-avatar {
     display: flex;
     flex-direction: row;
	align-items: center;
     justify-content: space-around;
}

.profile-avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #f2f2f2;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 18px;
	color: #333;
	overflow: hidden;
}

.profile-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.profile-avatar span {
	font-size: 16px;
}

.profile-user-info {
	display: flex;
	flex-wrap: wrap;
}
 
     .profile-menu-item {
	margin-top: 10px;
}

.profile-menu-item a {
	font-size: 14px;
	color: #333;
	text-decoration: none;
	cursor: pointer;
	display: block;
	padding: 6px 8px;
	border-radius: 8px;
	transition: background 0.2s;
}

.profile-menu-item a:hover {
	background-color: #f5f5f5;
}

/* انیمیشن */
@keyframes fadeSlide {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.app-footer-content-item-new {
     border: 1px dashed var(--primary);
     display: inline-block;
     padding: 10px 20px;
     border-radius: 16px;
     background-color: transparent;
     color: var(--primary);
     font-size: 13px;
     font-weight: bold;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     box-shadow: 0 0 0 0 rgb(70 81 225);
     animation: pulse 2s infinite;
}
 

@keyframes pulse {
     0% {
	     box-shadow: 0 0 0 0 rgb(70 81 225);
     }

     70% {
	     box-shadow: 0 0 0 15px rgba(70 ,81 ,225 ,0);
     }

     100% {
	     box-shadow: 0 0 0 0 rgba(70,81,225,0);
     }
}

.app-footer-content-item-new:hover {
     color: #fff;
     background-color: var(--primary);
	box-shadow: 0 0 0 0 rgb(70 81 225);
     animation: none;
}

.app-footer-content-item-new span {
     position: relative;
     z-index: 2;
}


.custom-file-uploader-box {
    border: 2px dashed #1976d2;
    border-radius: 10px;
    padding: 18px 0 10px 0;
    text-align: center;
    cursor: pointer;
    background: #f8fafd;
    transition: border 0.2s;
    min-height: 120px;
    position: relative;
    margin-bottom: 12px;
        text-align: -webkit-center;
  }
  .custom-file-uploader-box:hover {
    border-color: #125ea2;
  }
  .uploader-preview-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
  }
  .uploader-edit-btn {
    display: inline-block;
    margin-top: 8px;
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 4px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
    margin-left: 6px;
  }
  .uploader-edit-btn:hover {
    background: #125ea2;
  }
  .uploader-delete-btn {
    display: inline-block;
    margin-top: 8px;
    background: #e53935;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 4px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .uploader-delete-btn:hover {
    background: #b71c1c;
  }
  .uploader-filename {
    font-size: 13px;
    color: #555;
    direction: ltr;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 6px;
  }

  [class*=ag-theme-]{
    font-family: var(--font-family) !important;
  }

  .card.task-card {
 
    border-radius: 12px 12px 18px 18px;
    box-shadow: 0 4px 18px 0 rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.04);
    border: none;
    margin-bottom: 22px;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    overflow: visible;
    min-height: 90px;
   
    padding-top: 28px;
    padding-bottom: 18px;
    padding-left: 18px;
    padding-right: 18px;
   
  }
  .card.task-card:hover {
    transform: scale(1.05);
  }
  .sticky-pin {
    width: 32px;
    height: 32px;
    background: var(--pin-color, #FFD600);
    border-radius: 50%;
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
    border: 2.5px solid #fffde7;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sticky-pin-inner {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
   
  }
  .sticky-top-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    border-radius: 12px 12px 0 0;
    background: var(--pin-color, #FFD600);
    z-index: 2;
  }
   

  .project-head {
    flex: 1 1 0%;
    min-width: 0;
  }
  .project-info-summary {
    font-size: 13px;
    color: #333;
    margin-bottom: 8px;
   
    white-space: pre-line;
    word-break: break-word;
  }
  .project-info-bar {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 2px;
    justify-content: space-between;
  }
  .project-info-pill {
   
    color: var(--white);
    border-radius: 5px;
    padding: 4px;
    padding: 2px 14px 2px 14px;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
    white-space: nowrap;
    box-shadow: 0 1px 3px 0 rgba(255, 193, 7, 0.04);
  }
  .project-title {
    font-weight: 600;
    font-size: 14px;
    color: #222;
    text-decoration: none;
    transition: color 0.2s;
  }
  .project-title:hover {
    color: #bfa600;
  }
  .project-meta {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .project-meta .nk-menu-text {
    background: #FFD600;
    color: #fff;
    border-radius: 5px;
    padding: 5px 13px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 1px 4px 0 rgba(255, 193, 7, 0.07);
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .project-meta .nk-menu-text:hover {
    background: #bfa600;
  }

  .building-card {
    border-radius: 18px;
    box-shadow: 0 4px 18px 0 rgba(25, 118, 210, 0.07), 1px 1px 12px 14px rgba(0, 0, 0, 0.03);
    border: none;
    background: #fafdff;
    margin-bottom: 28px;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
    height: 90%;
}
.building-card:hover {
    box-shadow: 0 8px 32px 0 rgba(25, 118, 210, 0.13), 0 3px 12px 0 rgba(0,0,0,0.08);
    transform: translateY(-4px) scale(1.02);
    z-index: 2;
}
.building-card-inner {
    padding: 28px 28px 18px 28px;
}
.building-card-accent {
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 100%;
    background: linear-gradient(180deg, #1976d2 0%, #43a047 100%);
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}
.building-title {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}
.building-date {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
}
.building-address {
 font-size: 14px;
  color: #1976d2;
  font-weight: 500;
  border-bottom: 1px solid var(--gray-light);
  padding-bottom: 20px;
}
.building-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.building-action-pill {
   border-radius: 16px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 3px 0 rgba(25, 118, 210, 0.04);
    cursor: pointer;
    border: none;
    transition: background 0.18s, color 0.18s;
}
.building-action-pill i {
    font-size: 18px;
    margin-left: 4px;
    vertical-align: middle;
}
.pill-bill {
    background: #e3f2fd;
    color: #1976d2;
}
.pill-bill i { color: #1976d2; }
.pill-bill:hover {
    background: #1976d2;
    color: #fff;
}
.pill-bill:hover i { color: #fff; }

.pill-notif {
    background: #fff3e0;
    color: #ff9800;
}
.pill-notif i { color: #ff9800; }
.pill-notif:hover {
    background: #ff9800;
    color: #fff;
}
.pill-notif:hover i { color: #fff; }

.pill-assembly {
    background: #e8f5e9;
    color: #43a047;
}
.pill-assembly i { color: #43a047; }
.pill-assembly:hover {
    background: #388e3c;
    color: #fff;
}
.pill-assembly:hover i { color: #fff; }

.pill-money {
    background: #ffebee;
    color: #e53935;
}
.pill-money i { color: #e53935; }
.pill-money:hover {
    background: #b71c1c;
    color: #fff;
}
.pill-money:hover i { color: #fff; }

.pill-units {
    background: #ede7f6;
    color: #8e24aa;
}
.pill-units i { color: #8e24aa; }
.pill-units:hover {
    background: #5e35b1;
    color: #fff;
}
.pill-units:hover i { color: #fff; }
.icon-bill { color: #1976d2; }
.icon-notif { color: #ff9800; }
.icon-assembly { color: #43a047; }
.icon-money { color: #e53935; }
.icon-units { color: #8e24aa; }
.building-action-pill:hover .icon-bill,
.building-action-pill:hover .icon-notif,
.building-action-pill:hover .icon-assembly,
.building-action-pill:hover .icon-money,
.building-action-pill:hover .icon-units {
    color: #fff;
}
.building-dropdown {
    position: absolute;
    top: 18px;
    right: 18px;
}
.building-dropdown .dropdown-toggle {
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    padding: 0;
}
.building-dropdown .dropdown-toggle:hover {
    color: #1976d2;
}
.building-delete-btn {
    background: #e53935;
    color: #fff !important;
    border-radius: 8px;
   padding: 8px 10px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 3px 0 rgba(229, 57, 53, 0.08);
    cursor: pointer;
    border: none;
    transition: background 0.18s, color 0.18s;
}
.building-delete-btn:hover {
    background: #b71c1c;
    color: #fff !important;
}
.building-delete-btn em {
    color: #fff !important;
}
/* .alert.alert-pro.alert-warning {
    background: #fffde7;
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 8px 0 rgba(255, 193, 7, 0.08);
    padding: 24px 28px 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    position: relative;
 
    border-left: 7px solid #FFD600;
}
.alert.alert-pro.alert-warning:before {
    content: '\e916';
    font-family: 'miricon' !important;
    font-size: 32px;
    color: #FFD600;
 
    display: block;
}
.alert.alert-pro.alert-warning .alert-text {
    font-size: 15px;
    color: #795548;
}
.alert.alert-pro.alert-warning h6 {
    color: #bfa600;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}
.alert.alert-pro.alert-warning p {
    margin-bottom: 0;
    color: #795548;
    font-size: 14px;
} */

.alert-text {
    background: #fffde7;
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 8px 0 rgba(255, 193, 7, 0.08);
    padding: 24px 61px 24px 24px;
    display: flex;
    align-items: flex-start;
 
    position: relative;
 
    font-size: 15px;
    color: #795548;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-left: 7px solid #FFD600;
    flex-direction: column;
}
.alert-text:before {
    content: '\e916';
    font-family: 'miricon' !important;
    font-size: 32px;
    color: #FFD600;
 
    display: block;
    position: absolute;
    right: 15px;
    top: 30%;
}
.alert-text h6 {
    color: #bfa600;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}
.alert-text p {
    margin-bottom: 0;
    color: #795548;
    font-size: 14px;
    margin-top: 0;
}

.case-card{
    max-height: 483px;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
   
}
.case-card .card-body{
    padding-bottom: 0;
}

 .card-body{
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
 }

 .case-card .card-footer{
    text-align: center;
    padding-bottom: 10px;
    border-top: 1px solid;
    border-top-color: var(--gray-light);
 }
 
 /* AccountsTree.css */

.accounts-tree-list {
    list-style: none;
    padding-right: 0;
    margin: 0;
    direction: rtl;
   
    position: relative;
  }
  
  .account-level-1 {
    background: linear-gradient(90deg, #e3f0ff 80%, #f8fafc 100%);
    color: #1565c0;
    border-radius: 16px;
    margin-bottom: 16px;
    padding: 18px 28px 18px 12px;
    font-weight: 500;
    font-size: 1.15rem;
    box-shadow: 0 4px 16px #e3f0ff80;
    position: relative;
    display: flex;
    align-items: center;
  }
  .account-level-2 {
    background: linear-gradient(90deg, #e8f5e9 80%, #f8fafc 100%);
    color: #388e3c;
    border-radius: 12px;
    margin-bottom: 10px;
   
    padding: 14px 22px 14px 10px;
    font-weight: 500;
    font-size: 1.05rem;
    position: relative;
    display: flex;
    align-items: center;
  }
  .account-level-3 {
    background: linear-gradient(90deg, #f5f5f5 80%, #f8fafc 100%);
    color: #222;
    border-radius: 10px;
    margin-bottom: 7px;
    margin-right: 64px;
    padding: 10px 18px 10px 8px;
    font-weight: 500;
    font-size: 1rem;
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .account-level-1::before,
  .account-level-2::before {
    content: '';
    position: absolute;
    top: 0;
    right: 18px;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #b3c6e7 0%, #e3f0ff 100%);
    z-index: 0;
  }
  .account-level-2::before {
    right: 14px;
    background: linear-gradient(to bottom, #b7e1cd 0%, #e8f5e9 100%);
  }
  .account-level-3::before {
    display: none;
  }
  
  .account-icon {
    margin-left: 10px;
    font-size: 1.4em;
    vertical-align: middle;
    opacity: 0.85;
  }
  .account-level-1 .account-icon {
    color: #1976d2;
  }
  .account-level-2 .account-icon {
    color: #43a047;
  }
  .account-level-3 .account-icon {
    color: #757575;
  }
  
  .account-actions {
    display: inline-flex;
    gap: 10px;
    margin-left: 12px;
    vertical-align: middle;
    z-index: 1;
  }
  .account-actions .icon {
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    font-size: 20px;
    border-radius: 50%;
    padding: 2px;
  }
  .account-actions .icon.text-danger:hover {
    color: #fff;
    background: #d32f2f;
    transform: scale(1.18);
  }
  .account-actions .icon.text-primary:hover {
    color: #fff;
    background: #1976d2;
    transform: scale(1.18);
  }
  .account-actions .icon[title]:hover::after {
    content: attr(title);
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: #222;
    color: #fff;
    font-size: 0.85em;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    margin-right: 8px;
    z-index: 10;
  }
  
  .accounts-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    margin-top: 0.5rem;
  }
  
  .btn-modern {
    background: linear-gradient(90deg, #1976d2 80%, #42a5f5 100%);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 8px 22px 8px 16px;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 2px 8px #1976d230;
    transition: background 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  .btn-modern:hover {
    background: linear-gradient(90deg, #1565c0 80%, #1976d2 100%);
    box-shadow: 0 4px 16px #1976d250;
  }
  
  .import-dropdown {
    position: relative;
    display: inline-block;
  }
  .import-dropdown .dropdown-toggle {
    background: linear-gradient(90deg, #43a047 80%, #66bb6a 100%);
    color: #fff !important;
    border-radius: 8px;
    padding: 8px 18px 8px 12px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    box-shadow: 0 2px 8px #43a04730;
    transition: background 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .import-dropdown .dropdown-toggle:hover {
    background: linear-gradient(90deg, #388e3c 80%, #43a047 100%);
    box-shadow: 0 4px 16px #43a04750;
  }
  .import-dropdown .dropdown-menu {
    min-width: 242px;
    border-radius: 10px;
    box-shadow: 0 8px 32px #0002;
    border: none;
    margin-top: 8px;
    padding: 0.5rem 0;
    background: #fff;
    position: absolute;
    right: 0;
    left: auto;
    z-index: 23;
  }
  .import-dropdown .dropdown-menu li {
    padding: 0;
  }
  .import-dropdown .dropdown-menu .hand {
    display: block;
    padding: 10px 18px;
    color: #1976d2;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
  }
  .import-dropdown .dropdown-menu .hand:hover {
    background: #e3f0ff;
    color: #0d47a1;
  }
  
  @media (max-width: 600px) {
    .account-level-1, .account-level-2, .account-level-3 {
      padding: 8px 8px 8px 4px;
      font-size: 0.98rem;
      border-radius: 8px;
    }
   
    .account-level-3 { margin-right: 20px; }
  } 

  /* BalanceReport.css */

.balance-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 8px 0 8px;
   
  }
  .balance-header {
    text-align: center;
    color: #1976d2;
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 32px;
    letter-spacing: 1px;
  }
  .balance-row {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }
  .balance-col {
    flex: 1 1 350px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .balance-box {
    background: #f8fafc;
    border-radius: 18px;
    box-shadow: 0 4px 24px #1976d210;
    padding: 24px 18px 18px 18px;
    margin-bottom: 8px;
    border: 1.5px solid #e3f0ff;
  }
  .balance-box-success {
    background: linear-gradient(90deg, #e8f5e9 80%, #f8fafc 100%);
    border-color: #abdeab;
  }
  .balance-box-danger {
    background: linear-gradient(90deg, #fff1f2 80%, #f8fafc 100%);
    border-color: #f8bbd0;
  }
  .balance-box-info {
    background: linear-gradient(90deg, #f4fdff 80%, #f8fafc 100%);
    border-color: #b3e5fc;
  }
  .balance-section-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 12px;
    margin-top: 0;
  }
  .balance-row-header {
    display: flex;
    font-weight: 500;
    color: #555;
    border-bottom: 1.5px solid #e0e0e0;
    padding-bottom: 6px;
    margin-bottom: 8px;
  }
  .balance-row-header > div {
    flex: 1;
    text-align: right;
  }
  .balance-row-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    padding: 7px 0;
  }
  .balance-row-item:last-child {
    border-bottom: none;
  }
  .balance-row-item > div {
    flex: 1;
    text-align: right;
  }
  .balance-row-item .balance-mono {
    direction: ltr;
    text-align: left;
  }
  .balance-row-group-title {
    font-weight: 500;
    background: #e3f0ff;
    border-radius: 8px;
    padding: 7px 10px;
    margin: 10px 0 4px 0;
    color: #1976d2;
    font-size: 1.05rem;
  }
  .balance-total-row {
    display: flex;
    align-items: center;
    background: #1976d2;
    color: #fff;
    font-weight: 500;
    border-radius: 10px;
    margin-top: 18px;
    margin-bottom: 0;
    padding: 10px 5px 10px 5px;
  }
  .balance-total-row > div {
    flex: 1;
    text-align: right;
  }
  .balance-total-row.red {
    background: #d32f2f;
  }
  .balance-total-row.info {
    background: #0288d1;
  }
  .balance-summary {
    display: flex;
    gap: 18px;
    background: #333;
    color: #fff;
    border-radius: 12px;
    padding: 18px 12px;
    margin: 24px 0 0 0;
    font-weight: 500;
    justify-content: space-between;
    flex-direction:column;
  }
  .balance-summary > div {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  @media (max-width: 900px) {
    .balance-row {
      flex-direction: column;
      gap: 12px;
    }
    .balance-col {
      min-width: 0;
    }
  }

#nk-chat-panel {
    max-height: 350px;
    min-height: 220px;
    overflow-y: auto;
    padding: 24px 0 80px 0;
    background: #f4f7fa;
    border-radius: 16px;
    border: 1px solid #ececec;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.course_chat,
.course_chat_me {
    display: flex;
    align-items: flex-end;
    margin-bottom: 12px;
}

.course_chat {
    flex-direction: row;
    justify-content: flex-end;
    text-align: left;
}

.course_chat_me {
    flex-direction: row;
    justify-content: flex-start;
}

.chat_avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e0e7ef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #4650e1;
    margin: 0 8px;
    flex-shrink: 0;
}

.chat_bubble {
    max-width: 70%;
    padding: 12px 18px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.7;
    word-break: break-word;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    position: relative;
    margin-bottom: 2px;
    background: #fff;
    color: #222;
    transition: background 0.2s;
}

.course_chat_me .chat_bubble {
    background: #4650e1;
    color: #fff;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 18px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    max-width: 300px;
}

.course_chat .chat_bubble {
    background: #f1f2f6;
    color: #222;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 18px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.course_chat p, .course_chat_me p {
    margin: 0 0 4px 0;
    font-weight: 500;
    font-size: 13px;
}

.chat_message_input {
    width: 100%;
    min-height: 48px;
    height: auto;
    border-radius: 30px;
    border: 1px solid #d1d5db;
    padding: 20px 14px 10px 14px;
    font-size: 15px;
    outline: none;
    margin-bottom: 0;
    background: #f9f9fb;
    transition: border 0.2s;
    box-sizing: border-box;
    resize: none;
}

    .chat_message_input:focus {
        border: 1.5px solid #4650e1;
        background: #fff;
    }

.send-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
    position: absolute;
    left: 20px;
    top: 18px;
}

    .send-btn:active {
        transform: scale(0.95);
    }

.chat_input_area {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 12px 16px 12px 16px;
    display: flex;
    align-items: center;
    z-index: 2;
    border-radius: 0 0 16px 16px;
}

.chat_input_area {
    position: relative;
}

.project-title {
    position: relative;
}

.accounts-tree-list {
    list-style: none;
    padding-right: 0;
    margin-bottom: 0;
}

    .accounts-tree-list .account-row {
        padding: 4px 0;
        border-radius: 4px;
        transition: background 0.2s;
    }

        .accounts-tree-list .account-row:hover {
            cursor: pointer;
        }

.tree-toggle {
    color: #888;
    user-select: none;
}
/* Animation for children */
.tree-children {
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
    max-height: 0;
    opacity: 0;
}

    .tree-children.open {
        max-height: 1000px;
        opacity: 1;
        transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
    }

    .tree-children.closed {
        max-height: 0;
        opacity: 0;
        transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
    }
/* Tree levels */

.account-level-2 > .account-row {
    color: #2b7a78;
}

.account-level-3 > .account-row {
    color: #22223b;
}
.badge {
    position: relative;
    border: 1px solid currentColor;
    line-height: 1.125rem;
    font-size: 0.675rem;
    vertical-align: middle;
    display: inline-flex;
    color: white;
}

    .badge .icon + span, .badge span + .icon {
        padding-right: 4px;
    }

    .badge.rounded-pill {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

.badge-sm {
    padding: 0.3125rem 0.75rem;
    font-size: 0.75rem;
}

    .badge-sm.rounded-pill {
        padding: 0.3125rem 0.875rem;
    }

.badge-md {
    padding: 0.47rem 1rem;
    font-size: 0.8125rem !important;
}

    .badge-md.rounded-pill {
        padding: 0.47rem 1rem;
    }

.badge-lg {
    padding: 0.75rem 1.25rem;
    font-size: 0.93rem !important;
}

    .badge-lg.rounded-pill {
        padding: 0.75rem 1.25rem;
    }

.badge-xl {
    padding: 0.875rem 1.5rem;
    font-size: 1.125rem !important;
}

    .badge-xl.rounded-pill {
        padding: 0.875rem 1.5rem;
    }

.badge.bg-light {
    color: #364a63;
}

.badge-lighter {
    color: #526484;
}

.badge .icon {
    font-size: 1rem;
}

.bg-primary {
    border-color: #6576ff;
}

.bg-secondary {
    border-color: #364a63;
}

.bg-success {
    border-color: #1ee0ac;
}

.bg-info {
    border-color: #09c2de;
}

.bg-warning {
    border-color: #f4bd0e;
}

.bg-danger {
    border-color: #e85347;
}

.bg-light {
    border-color: #e5e9f2;
}

.bg-dark {
    border-color: #1f2b3a;
}

.bg-gray {
    border-color: #8091a7;
}

.bg-lighter, .dual-listbox .dual-listbox__item:hover {
    border-color: #f5f6fa;
}

.bg-outline-primary {
    color: #6576ff;
    border-color: #a3adff;
}

.bg-outline-secondary {
    color: #364a63;
    border-color: #8692a1;
}

.bg-outline-success {
    color: #1ee0ac;
    border-color: #78eccd;
}

.bg-outline-info {
    color: #09c2de;
    border-color: #6bdaeb;
}

.bg-outline-warning {
    color: #f4bd0e;
    border-color: #f8d76e;
}

.bg-outline-danger {
    color: #e85347;
    border-color: #f19891;
}

.bg-outline-light {
    color: #b7c2d0;
    border-color: #d4dae3;
}

.bg-outline-dark {
    color: #1f2b3a;
    border-color: #798089;
}

.bg-outline-gray {
    color: #8091a7;
    border-color: #b3bdca;
}

.bg-outline-lighter {
    color: #e5e9f2;
    border-color: #eff2f7;
}

.badge-dim.bg-primary {
    color: #6576ff;
    background-color: #eef0ff !important;
    border-color: #eef0ff;
}

.badge-dim.bg-outline-primary {
    color: #6576ff;
    background-color: #eef0ff;
    border-color: #c1c8ff;
}

.badge-dim.bg-secondary {
    color: #364a63;
    background-color: #e9ebee !important;
    border-color: #e9ebee;
}

.badge-dim.bg-outline-secondary {
    color: #364a63;
    background-color: #e9ebee;
    border-color: #afb7c1;
}

.badge-dim.bg-success {
    color: #1ee0ac;
    background-color: #e6fcf6 !important;
    border-color: #e6fcf6;
}

.badge-dim.bg-outline-success {
    color: #1ee0ac;
    background-color: #e6fcf6;
    border-color: #a5f3de;
}

.badge-dim.bg-info {
    color: #09c2de;
    background-color: #e4f8fb !important;
    border-color: #e4f8fb;
}

.badge-dim.bg-outline-info {
    color: #09c2de;
    background-color: #e4f8fb;
    border-color: #9de7f2;
}

.badge-dim.bg-warning {
    color: #f4bd0e;
    background-color: #fef8e4 !important;
    border-color: #fef8e4;
}

.badge-dim.bg-outline-warning {
    color: #f4bd0e;
    background-color: #fef8e4;
    border-color: #fbe59f;
}

.badge-dim.bg-danger {
    color: #e85347;
    background-color: #fceceb !important;
    border-color: #fceceb;
}

.badge-dim.bg-outline-danger {
    color: #e85347;
    background-color: #fceceb;
    border-color: #f6bab5;
}

.badge-dim.bg-light {
    color: #b7c2d0;
    background-color: #f7f8fa !important;
    border-color: #f7f8fa;
}

.badge-dim.bg-outline-light {
    color: #b7c2d0;
    background-color: #f7f8fa;
    border-color: #e2e7ec;
}

.badge-dim.bg-dark {
    color: #1f2b3a;
    background-color: #e6e8e9 !important;
    border-color: #e6e8e9;
}

.badge-dim.bg-outline-dark {
    color: #1f2b3a;
    background-color: #e6e8e9;
    border-color: #a5aab0;
}

.badge-dim.bg-gray {
    color: #8091a7;
    background-color: #f1f3f5 !important;
    border-color: #f1f3f5;
}

.badge-dim.bg-outline-gray {
    color: #8091a7;
    background-color: #f1f3f5;
    border-color: #ccd3dc;
}

.badge-dim.bg-lighter, .dual-listbox .badge-dim.dual-listbox__item:hover {
    color: #e5e9f2;
    background-color: #fcfdfe !important;
    border-color: #fcfdfe;
}

.badge-dim.bg-outline-lighter {
    color: #e5e9f2;
    background-color: #fcfdfe;
    border-color: #f5f6fa;
}

.badge-dot {
    display: inline-flex;
    align-items: center;
    background-color: transparent !important;
    border: none;
    padding-right: 12px;
    padding-left: 0;
    font-size: 12px;
}

    .badge-dot:before {
        position: absolute;
        content: "";
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        height: 6px;
        width: 6px;
        margin-top: -1px;
        border-radius: 50%;
        background: currentColor;
    }

    .badge-dot.badge-sm, .badge-dot.badge-md {
        padding-right: 16px;
    }

        .badge-dot.badge-sm:before, .badge-dot.badge-md:before {
            height: 8px;
            width: 8px;
            margin-top: 0;
        }

    .badge-dot.badge-lg, .badge-dot.badge-xl {
        padding-right: 24px;
    }

        .badge-dot.badge-lg:before, .badge-dot.badge-xl:before {
            height: 12px;
            width: 12px;
            margin-top: 0;
        }

    .badge-dot.bg-primary {
        color: #6576ff;
    }

    .badge-dot.bg-secondary {
        color: #364a63;
    }

    .badge-dot.bg-success {
        color: #1ee0ac;
    }

    .badge-dot.bg-info {
        color: #09c2de;
    }

    .badge-dot.bg-warning {
        color: #f4bd0e;
    }

    .badge-dot.bg-danger {
        color: #e85347;
    }

    .badge-dot.bg-light {
        color: #b7c2d0;
    }

    .badge-dot.bg-dark {
        color: #1f2b3a;
    }

    .badge-dot.bg-gray {
        color: #8091a7;
    }

    .badge-dot.bg-lighter, .dual-listbox .badge-dot.dual-listbox__item:hover {
        color: #e5e9f2;
    }

@media (max-width: 767.98px) {
    .badge-dot-sm {
        width: 0;
        overflow: hidden;
    }
}

@media (max-width: 413px) {
    .badge-dot-mb {
        width: 0;
        overflow: hidden;
    }
}

@media (max-width: 369px) {
    .badge-dot-xs {
        width: 0;
        overflow: hidden;
    }
}

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

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

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

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

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

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

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

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

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

.bg-lighter, .dual-listbox .dual-listbox__item:hover {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-lighter-rgb), var(--bs-bg-opacity)) !important;
}

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

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

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

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

.bg-opacity-10 {
    --bs-bg-opacity: 0.1;
}

.bg-opacity-25 {
    --bs-bg-opacity: 0.25;
}

.bg-opacity-50 {
    --bs-bg-opacity: 0.5;
}

.bg-opacity-75 {
    --bs-bg-opacity: 0.75;
}

.bg-opacity-100 {
    --bs-bg-opacity: 1;
}

.bg-gradient {
    background-image: var(--bs-gradient) !important;
}
.ag-cell-value{
    font-size: 12px;
}
.hidden{
    display: none !important;
}
/* begin ag grid styles */
    
.ag-header-cell, .ag-header-group-cell {
    padding-left: 0;
    padding-right: 5px;
}
.ag-invisible {
    display: none !important
}
.ag-rtl .ag-cell {
    padding-left: 0 !important;
    padding-right: 2px !important;
}
.ag-header-cell, .ag-header-group-cell {
    padding-right: 2px !important;
    padding-left: 2px !important;
}

.ag-header-cell-text {
    font-size: 0.8rem !important;
}
.ag-cell-value, .ag-header-cell-text {
    font-size: 12px !important;
}

.ag-rtl .ag-floating-filter-button {
    margin-right: 0 !important;
}

.ag-header-cell-menu-button {
    display: none !important;
}
.ag-header-cell, .ag-header-group-cell {
    padding-left: 0;
    padding-right: 5px;
}

.ag-invisible {
    display: none !important
}

.ag-rtl .ag-cell {
    padding-left: 0 !important;
    padding-right: 2px !important;
}
.ag-header-cell, .ag-header-group-cell {
    padding-right: 2px !important;
    padding-left: 2px !important;
}

/* end ag grid styles*/
/* start question template */
.w-4 {
    width: 1rem;
}

.h-4 {
    height: 1rem;
}

.inline {
    display: inline;
}

.step-box-icon {
    display: block;
}

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

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-bottom: calc(.75rem * var(--tw-space-y-reverse));
    margin-top: calc(.75rem * (1 - var(--tw-space-y-reverse)));
}

.grid {
    display: grid;
}

.flex {
    display: flex;
}

.questionnaire_side {
    background-color: #f3f4f6;
    display: flex;
    font-size: .8rem;
    height: 100%;
    padding: 10px 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 110px;
}

.questionnaire_content {
    padding-right: 115px;
    min-height: 400px;
    padding-top: 0;
}

.circle-picker span div span div {
    border: solid 1px #8d8d8d40;
}

.image_filter_cover {
    background-repeat: no-repeat;
    background-size: cover;
}

.image_filter {
    background-image: inherit;
    background-color: rgb(233 233 233 / 40%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

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

.no-drag {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.drag-item {
    display: flex;
    flex-direction: row;
    padding: 0.375rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

    .drag-item:hover {
        background-color: #f7f8fa;
    }

.q-input-wrapper {
    border-radius: 0.25rem;
    background-color: rgb(240, 242, 245);
    padding: 0px;
}

    .q-input-wrapper span {
        line-height: 26px;
        padding-left: 5px;
        padding-right: 5px;
    }

.border-1 {
    border-width: 1px;
}

.ck-content {
    direction: rtl !important;
    text-align: right !important;
}

.ck .ck-toolbar__items {
    direction: rtl !important;
}

.calendarContainerForQ {
    position: relative;
}

.calendarContainer {
    padding: 8px 12px !important;
    border-color: #d1d5db !important;
    box-shadow: none !important;
}

.move {
    cursor: move;
}

.q-template-item {
    position: relative;
}

.q-template-item-picker {
    display: none;
}

.q-template-item-picker {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #b5b2b28a;
    align-items: center;
    place-content: center;
}

.q-template-item:hover .q-template-item-picker {
    display: flex;
}

.q-template-item-picker a {
    color: white;
    padding: 1rem;
    font-size: 1.5rem;
    background-color: black;
    border-radius: 7px;
}

.q-template-item-picker.selected {
    display: flex;
}

    .q-template-item-picker.selected a {
        background-color: #4caf50;
    }

.q-ready-list {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 33px;
    background-color: black;
    left: 0;
    width: 100%;
}

    .q-ready-list a {
        cursor: pointer;
        padding: 0.3rem;
        text-align: center;
        width: 100%;
    }

.q-avatar-selector {
    position: relative;
    cursor: pointer;
}

    .q-avatar-selector div {
        display: none;
        position: absolute;
        bottom: 0;
        background-color: white;
        border: solid 1px #d1d5db;
        width: 320px;
        height: 320px;
        overflow: scroll;
    }

        .q-avatar-selector div img {
            width: 20px;
            max-width: 20px;
            height: 20px;
        }

    .q-avatar-selector:hover div {
        display: grid;
    }

.overly-tools {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #e5e7eb;
    display: none;
    flex-direction: row;
    place-content: center;
    align-items: center;
}

.q-item {
    position: relative;
}

    .q-item:hover .overly-tools {
        display: flex;
    }

.q-tour {
    direction: ltr;
    text-align: right;
}

.reactour__close {
    top: 12px;
    right: 12px;
}
/* start flowchart-react */
.flowchart-container {
    position: relative;
}

    .flowchart-container text {
        moz-user-select: -moz-none;
        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

.flowchart-toolbar {
    width: 48px;
    height: 100%;
    border-left: 1px solid #dfdfdf;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
}

.flowchart-toolbar-item {
    width: 48px;
    height: 24px;
}

.flowchart-svg {
    height: 100%;
    width: 100%;
    border: 1px solid #dfdfdf;
    background-color: #f3f3f3;
}

.circle {
    fill: white;
    stroke-width: 1px;
    stroke: #bbbbbb;
    cursor: crosshair;
    opacity: 0;
}

    .circle:hover {
        opacity: 1;
    }

.g:hover .circle {
    opacity: 1;
}

.pointer-events-none {
    pointer-events: none
}

.top-2 {
    top: 0.5rem
}

.right-2 {
    right: 0.5rem
}

.cursor-nw-resize {
    cursor: nw-resize
}

.cursor-sw-resize {
    cursor: sw-resize
}

.cursor-ne-resize {
    cursor: ne-resize
}

.cursor-se-resize {
    cursor: se-resize
}

.border-none {
    border-style: none
}

.bg-transparent {
    background-color: transparent
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

/* finish flowchart-react */
.relative {
    position: relative;
}

.fill-current {
    fill: currentColor;
}

.w-6 {
    width: 1.5rem;
}

.h-6 {
    height: 1.5rem;
}

.left-0 {
    left: 0;
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem;
}

.bg-green-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}

.bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

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

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:flex-row {
        flex-direction: row;
    }
}

.mr-4 {
    margin-right: 1rem;
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem;
}

.bg-green-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(187 247 208 / var(--tw-bg-opacity));
}

.rounded-full {
    border-radius: 9999px;
}

.mt-8 {
    margin-top: 2rem;
}
/* finish question template */
/*begin login page*/
.left-section {
    padding-top: 2rem !important;
    flex: 1;
    color: white;
    position: relative;
}

    .left-section h3 {
        font-size: 16px;
    }


.title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}

.description {
    font-size: 13px;
    line-height: 24px;
    margin-bottom: 30px;
}

.dashboard-preview {
    width: 100%;
    position: relative;
    text-align: center;
}

.dashboard-image {
    width: 100%;
    border-radius: 8px;
}



.right-section {
    background-color: #fff;
    padding: 0 12vw;
    border-radius: 8px;
    height: 96vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-left: 0 !important;
}

.logo {
    height: 28px !important;
    width: 108px !important;
    margin-left: 10px;
}

.logo-text {
    font-weight: bold;
    color: #3f4cc1;
}

.welcome-text {
    font-size: 28px;
    font-weight: bold;
    color: var(--dark);
    text-align: center;
    margin-bottom: 30px;
}

.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    height: 100%;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    position: relative;
}

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

.slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 20px;
}

.slide-title {
    font-size: 24px;
    margin-bottom: 10px;
}

.slide-description {
    font-size: 16px;
}

.prev-btn, .next-btn {
    position: absolute;
    top: 3rem;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.5);
    color: #333;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .prev-btn:hover, .next-btn:hover {
        background: rgba(255, 255, 255, 0.8);
    }

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

.dots-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background 0.3s;
}

    .dot.active {
        background: var(--white);
    }


@media screen and (max-width: 480px) {
    .right-section {
        padding: 10px !important;
    }
}


@media (max-width: 768px) {
    .slider-container {
        width: 95%;
    }

    .slide-title {
        font-size: 20px;
    }

    .slide-description {
        font-size: 14px;
    }
}

/*end login page*/
/* چیدمان‌های خاص پنل‌ها */
#gjs .gjs-block-label {
    text-align: right !important;
}

#gjs .gjs-trt-trait {
    direction: rtl !important;
    text-align: right !important;
}

#gjs .gjs-clm-label,
#gjs .gjs-sm-property {
    text-align: right !important;
}

.gjs-pn-panel {
    direction: rtl;
}

.gjs-title {
    text-align: right !important;
}

.gjs-block {
    min-height: 40px !important;
}
.gjs-cv-canvas {
    width: 100% !important;
}
.gjs-sm-sector, .gjs-layer, .gjs-traits-c {
    direction: ltr !important
}
.gjs-trt-trait{
    flex-direction: column !important;
}
.gjs-label-wrp {
    width: 100% !important;
}
/* finish grapes */
.monaco-container * {
    font-family: monospace !important;
    line-height: normal !important;
}

/* start sproduction calendar */
.calendar-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.switch-btn {
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: #1976d2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

    .switch-btn:hover {
        background-color: #125aa3;
    }

.rmdp-wrapper {
    width: 100% !important;
}

.rmdp-calendar {
    width: 100% !important;
}

.day-circles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.line-circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 1px;
}

/* 📱 موبایل */
@media (max-width: 600px) {
    .rmdp-day {
        font-size: 0.7rem !important;
        padding: 2px !important;
    }

    .line-circle {
        width: 6px;
        height: 6px;
    }
}
/* بزرگ کردن اندازه سلول‌های روز */
.rmdp-day {
    width: 60px !important; /* عرض هر روز */
    height: 60px !important; /* ارتفاع هر روز */
    font-size: 1rem !important;
}

    /* تنظیم محتوا وسط‌چین */
    .rmdp-day span {
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* بزرگ‌تر کردن دایره‌های رنگی */
.day-circles {
    margin-top: 4px;
}

.line-circle {
    width: 10px;
    height: 10px;
}

@media (max-width: 600px) {
    .rmdp-day {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.8rem !important;
    }

    .line-circle {
        width: 6px;
        height: 6px;
    }
}

.rmdp-day-picker {
    width: 100% !important;
    display: block !important;
}

.rmdp-day, .rmdp-week-day {
    width: 16% !important;
}

    .rmdp-day span {
        border-radius: 8px !important;
    }
/* finish production calendar*/
.userDashboadrLayout {
    position: relative;
    overflow: visible !important;
    direction: ltr !important;
}
.newBtnHolder{
    width: 16%;
}
.filterIconHolder{
    width: 13%;
}
.filterFields{
    width: 87%;
}
.mobile-table{
    display: none;
}
.paginationBox {
    text-align: center;
    justify-content: space-between;
    align-items: center;
}
.submenu-container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
@media (max-width: 992px) {
    .p-3 {
        padding: 0.5rem !important;
    }
    .modal-footer {
        flex-direction: column-reverse !important;
    }
    .modal-dialog {
        max-width: 100%;
    }
    .personCategoriesCheckBoxes {
        display: flex;
        flex-direction: column;
    }
    .accounts-toolbar {
        flex-direction: column;
    }
    .btn-modern{width:100%}
    .total-price-section .total-price-section-row {
        flex-direction: column;
    }
    .total-price-section-row-item {
        flex-direction: row;
        display: flex;
        justify-content: space-between;
    }
    .submenu-container {
        flex-direction: column;
        gap: 8px;
    }
    .newBtnHolder, .filterIconHolder, .filterFields {
        width: 100%;
    }

    .app-footer-content {
        flex-direction: column;
        padding: 3px;
    }

    .app-footer {
        padding: 20px;
        box-sizing: border-box;
    }

    .footer-copyright {
        display: none !important;
    }

    .row {
        gap: 15px;
        flex-direction: column;
    }

    .app-footer {
        padding: 5px;
    }

    .main-content {
        padding: 10px 10px 120px 10px;
        box-sizing: border-box;
        margin-top: 120px;
    }

    .d-flex {
        flex-direction: column;
    }
    /*حداقل تا عرض 320 پیکسل این شرایط عادی هستش*/
    .flex {
        flex-direction: column !important;
    }

    .invoices-table, .ag-theme-quartz, .table {
        display: none !important;
    }

    .mobile-table {
        display: block;
    }

    /*نمایش اسکرول افقی تبها در موبال*/
    .tab-section {
        box-shadow: none;
        margin: 5px 0;
        padding: 0;
        border: none;
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; /* برای اسکرول نرم در iOS */
        scrollbar-width: none; /* مخفی کردن اسکرول‌بار در فایرفاکس */
    }

        .tab-section::-webkit-scrollbar {
            display: none; /* مخفی کردن اسکرول‌بار در کروم و سافاری */
        }

        .tab-section .tab-item {
            flex: 0 0 auto;
            padding: 6px 10px;
            margin: 0 4px;
            background-color: #f4f4f4;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
        }

            .tab-section .tab-item.active {
                background-color: #007bff;
                color: white;
            }
    /*نمایش اسکرول افقی منوها در موبایل*/
    .menu-items-container {
        width: 100%;
        margin-bottom: 5px;
        gap: 5px;
    }

    .header-top .menu-items-container .nav-items {
        padding: 0;
        border: none;
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; /* برای اسکرول نرم در iOS */
        scrollbar-width: none; /* مخفی کردن اسکرول‌بار در فایرفاکس */
        flex-wrap: initial !important;
        flex-direction: row !important;
    }

        .header-top .menu-items-container .nav-items::-webkit-scrollbar {
            display: none; /* مخفی کردن اسکرول‌بار در کروم و سافاری */
        }


        .header-top .menu-items-container .nav-items .nav-item {
            flex: 0 0 auto;
            padding: 10px 16px;
            margin: 0 4px;
            background-color: #f4f4f4;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            width: unset !important;
        }

            .header-top .menu-items-container .nav-items .nav-item.active {
                background-color: #007bff;
                color: white;
            }

    .header-top {
        padding: 10px;
    }

    .nav-submenu {
        height: 100vh;
        min-width: unset !important;
    }

        .nav-submenu .submenu-container {
            overflow-y: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch; /* برای اسکرول نرم در iOS */
            scrollbar-width: none; /* مخفی کردن اسکرول‌بار در فایرفاکس */
            flex-wrap: initial !important;
            height: 100%
        }

            .nav-submenu .submenu-container::-webkit-scrollbar {
                display: none; /* مخفی کردن اسکرول‌بار در کروم و سافاری */
            }

        .nav-submenu.active {
            max-height: calc(100vh - 75px);
            position: fixed;
            top: 75px;
            background-color: #f4f4f4;
            width: 100%;
            display: block;
        }
    nav-item.active {
        background-color: #007bff;
    }
    .nav-item.active a.hand {
        color: white;
    }
}

.solution-board-kanban {
    display: flex;
    flex-direction: row;
    gap: 50px;
    padding-bottom: 24px;
    border-radius: 18px;
    padding: 32px 16px 24px 16px;
    flex-wrap: wrap;
}

.kanban-column-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 45%;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0px 1px 14px 14px rgba(60, 60, 60, 0.07);
    border: 7.5px solid var(--gray-light);
    padding: 11px 10px;
}

.kanban-column {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px 0 rgba(60,60,60,0.07);
    display: flex;
    flex-direction: column;
    max-height: 480px;
    margin-bottom: 20px;
}

.kanban-header {
    padding: 18px 20px 12px 20px;
    border-radius: 16px 16px 0 0;
    font-weight: 700;
    font-size: 1.1rem;
    background: var(--orange, #f8a602);
    color: #fff;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kanban-tasks {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px 12px 12px;
}

.kanban-task-card {
    background: #f9fafb;
    border-radius: 12px;
    box-shadow: 0 1px 4px 0 rgba(60,60,60,0.04);
    margin-bottom: 16px;
    padding: 16px 14px 10px 14px;
    transition: box-shadow 0.2s;
    cursor: pointer;
    border: 1px solid #f1f1f2;
}

    .kanban-task-card:hover {
        box-shadow: 0 4px 16px 0 rgba(60,60,60,0.10);
        background: #fff;
    }

.kanban-task-title {
    font-size: 1rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 6px;
}

.kanban-task-meta {
    font-size: 0.92rem;
    color: #888;
    margin-bottom: 4px;
}

.kanban-task-priority {
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 2px;
}

.kanban-task-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.kanban-badge {
    display: inline-block;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--orange, #f8a602);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    margin-right: 8px;
}

.kanban-sort-select {
    border: 1px solid #e0e2ea;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.98rem;
    margin-left: 8px;
    background: #f7f8fa;
}

.kanban-add-btn {
    background: var(--primary, #4651E1);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 18px;
    font-size: 0.98rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s;
}

    .kanban-add-btn:hover {
        background: #222;
    }

@media (max-width: 900px) {
    .solution-board-kanban {
        flex-direction: column;
        padding: 16px 2px 12px 2px;
    }

    .kanban-column {
        min-width: 95vw;
        max-width: 100vw;
        height: auto;
    }
}