@charset "UTF-8";
/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&display=swap");
:root {
  --sidenav-width: 240px;
  --sidenav-width-sm: 70px;
  --topbar-height: 56px;
  --topbar-bg: #fff;
  --topbar-item-bg: #F7F8F9;
  --topbar-item-border: #E8E8E8;
  --topbar-item-color: #1F2020;
  --topbar-item-hover-color: var(--primary);
  --topbar-item-hover-bg: #CDCDCD;
  --topbar-item-shadow: 0px 4px 4px 0px #DBDBDB40;
  --menu-bg: #fff;
  --menu-icon-bg: #F7F8F9;
  --menu-title-color: #707070;
  --menu-item-heading: #1F2020;
  --menu-item-color: #707070;
  --menu-item-hover-color: var(--primary);
  --menu-item-hover-bg: rgba(var(--primary-rgb), 0.1);
  --menu-item-active-color: var(--primary);
  --menu-item-border: #E8E8E8;
  --menu-item-active-bg: var(--danger-transparent);
  --menu-active-color: var(--primary);
  --submenu-active-color: var(--primary);
  --menu-active-color: var(--primary);
  --menu-active-bg: var(--primary-transparent);
  --primary: #E41F07;
  --secondary: #FFA201;
  --light: #F7F8F9;
  --dark: #0A0C0C;
  --white: #fff;
  --success: #1ABE17;
  --info: #2F80ED;
  --danger: #EF1E1E;
  --indigo: #3538CD;
  --cyan: #067D98;
  --orange: #EF5E25;
  --pink: #DD2590;
  --purple: #800080;
  --teal: #0E9384;
  --warning: #f9b801;
  --black: #000;
  --indigo-400: #6595FF;
  --info-400: #D096FA;
  --success-400: #74D398;
  --danger-400: #FF9265;
  --gray-100: #CDCDCD;
  --gray-200: #B5B5B5;
  --gray-300: #9D9D9D;
  --gray-400: #868787;
  --gray-500: #707070;
  --gray-600: #5A5B5B;
  --gray-700: #454646;
  --gray-800: #323333;
  --gray-900: #1F2020;
  --gray-hover: #080A0B;
  --light-100: #FAFBFC;
  --light-200: #F8FAFB;
  --light-300: #F5F8FA;
  --light-400: #F3F6F9;
  --light-500: #F1F4F7;
  --light-600: #EEF2F6;
  --light-700: #ECF1F5;
  --light-800: #E9EFF3;
  --light-900: #E7EDF2;
  --teal-100: #cfe9e6;
  --indigo-100: #d7d7f5;
  --white-300: #FFFFFF4D;
  --white-200: #FFFFFF33;
  --light-hover: #dee0e1;
  --primary-hover: #c11a06;
  --secondary-hover: #e08f01;
  --info-hover: #2972d5;
  --warning-hover: #e0a701;
  --success-hover: #179f14;
  --danger-hover: #d81a1a;
  --indigo-hover: #2f31b4;
  --purple-hover: #730073;
  --pink-hover: #c02180;
  --orange-hover: #056c85;
  --teal-hover: #0c7c71;
  --cyan-hover: #056c85;
  --dark-hover: #090a0a;
  --cyan-transparent: #EBF3F6;
  --danger-transparent: #fde9e9;
  --gray-transparent: #868787;
  --dark-transparent: #868787;
  --indigo-transparent: #EAEDF7;
  --info-transparent: #eaf2fd;
  --light-transparent: #E8E8E8;
  --orange-transparent: #FFF0EB;
  --pink-transparent: #FDEDF8;
  --primary-transparent: #fce9e6;
  --purple-transparent: #F1EBF7;
  --secondary-transparent: #fff6e6;
  --success-transparent: #e8f9e8;
  --teal-transparent: #EBF2F1;
  --warning-transparent: #fef8e6;
  --heading-color: #1F2020;
  --border-color: #E2E8F0;
  --body-color: #707070;
  /* Sếp's own request: the plain --light (#F7F8F9) tried first for the
     table header background read as basically indistinguishable from white
     in practice, and --border-color (#E2E8F0) as the row divider all but
     disappeared against the theme's own zebra-stripe row background
     (background:#EBF2F6, hardcoded inline per-row in every list view) since
     the two colors are only a few units apart. Two dedicated variables
     instead of reusing either: --table-header-bg is deliberately darker
     than --light so it reads as a real header band, and --table-
     divider-color is deliberately darker than --border-color so it stays
     visible on both a plain white row and a #EBF2F6 striped one. */
  --table-header-bg: #ededed;
  --table-divider-color: #D5DEE7;
  --primary-rgb: 228, 31, 7;
  --secondary-rgb: 255, 162, 1;
  --success-rgb: 26, 190, 23;
  --info-rgb: 47, 128, 237;
  --warning-rgb: 249, 184, 1;
  --danger-rgb: 239, 30, 30;
  --dark-rgb: 10, 12, 12;
  --light-rgb: 247, 248, 249;
  --orange-rgb: 239, 94, 37;
  --purple-rgb: 128, 0, 128;
  --pink-rgb: 221, 37, 144;
  --indigo-rgb: 53, 56, 205;
  --teal-rgb: 14, 147, 132;
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;
  --body-color-rgb: 112, 112, 112;
  --box-shadow: 0px 4px 4px 0px rgba(219, 219, 219, 0.25);
  --box-shadow-sm: 0px 4px 74px 0px rgba(208, 208, 208, 0.25);
  --box-shadow-lg: 0px 4.4px 12px -1px rgba(222, 222, 222, 0.36);
  --shadow-inset-indigo: 0px 0px 5px 0px #155DFC inset;
  --shadow-inset-success: 0px 0px 5px 0px #00A63E inset;
  --shadow-inset-info: 0px 0px 5px 0px #9810FA inset;
  --shadow-inset-danger: 0px 0px 5px 0px #F54900 inset;
  --box-shadow-lg: 0px 4.4px 12px -1px rgba(222, 222, 222, 0.36);
  --linear-gradient: linear-gradient(180deg, #E41F07 0%, #FFA201 100%);
  --primary-gradient-100: linear-gradient(180deg, #E41F07 0%, #FF5641 100%);
  --info-gradient-100: linear-gradient(180deg, #3538CD 0%, #575AFF 100%);
  --pink-gradient-100: linear-gradient(180deg, #DD2590 0%, #FE57B8 100%);
  --purple-gradient-100: linear-gradient(180deg, #800080 0%, #800080 100%);
  --warning-gradient-100: linear-gradient(180deg, #FFA201 0%, #EA9D19 100%);
  --purple-gradient-200: linear-gradient(174.05deg, #D400D4 5.17%, #800080 96.72%);
  --indigo-gradient-200: linear-gradient(174.05deg, #6D53FF 5.17%, #090080 96.72%);
  --success-gradient-200: linear-gradient(180deg, #27AE60 0%, #104828 100%);
  --pink-gradient-200: linear-gradient(180deg, #F55AB4 0%, #DD2590 100%);
  --danger-gradient-200: linear-gradient(180deg, #EF1E1E 0%, #891111 100%);
}

:root[data-bs-theme=dark] {
  --menu-icon-bg: #090C2A;
  --menu-item-heading: #D9DCFF;
  --menu-bg: #030318;
  --menu-item-color: #97aac1;
  --menu-item-hover-color: var(--primary);
  --menu-item-hover-bg: var(--primary);
  --menu-item-active-color: var(--primary);
  --submenu-active-color: var(--primary);
  --menu-item-active-bg: var(--danger-transparent);
  --menu-item-border: #161641;
  --topbar-bg: #030318;
  --topbar-item-color: #11112f;
  --topbar-item-color: #dbe0e6;
  --topbar-item-hover-color: #bccee4;
  --topbar-item-hover-bg: rgba(255, 255, 255, 0.1);
  --topbar-item-border: #11112f;
  --box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, 0.75);
  --box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.75);
  --box-shadow-lg: 0px 4.4px 12px -1px rgba(0, 0, 0, 0.75);
  --light: #0C0C20;
  --dark: #F0F0F3;
  --white: #030318;
  --gray-300: #08081A;
  --gray-500: #828997;
  --gray-600: #D9DCFF;
  --gray-900: #D9DCFF;
  --gray-hover: #DADFE2;
  --light-100: #171D22;
  --light-200: #172024;
  --light-300: #172128;
  --light-400: #182129;
  --light-500: #1B222A;
  --light-600: #1B242D;
  --light-700: #1C262E;
  --light-800: #1E2930;
  --light-900: #1F2932;
  --light-hover: #3C4249;
  --dark-hover: #DADFE2;
  --cyan-transparent: #112B33;
  --danger-transparent: #2c0b0e;
  --gray-transparent: #1a1d20;
  --dark-transparent: #1a1d20;
  --indigo-transparent: #172238;
  --orange-transparent: #3C1407;
  --pink-transparent: #3A061C;
  --purple-transparent: #311B2F;
  --teal-transparent: #1C2E2A;
  --primary-transparent: #1a1d20;
  --secondary-transparent: #161719;
  --success-transparent: #051b11;
  --info-transparent: #032830;
  --warning-transparent: #332701;
  --light-transparent: #343a40;
  --heading-color: #D9DCFF;
  --border-color: #161641;
  --body-color: #828997;
  --body-color-rgb: 130, 137, 151;
  --light-rgb: 12, 12, 32;
  --table-header-bg: #1B242D;
  --table-divider-color: #232B45;
}

:root[data-sidebar=sidebar2],
:root[data-sidebar=sidebar2][data-bs-theme=dark] {
  --menu-bg: #F7F8F9;
  --menu-item-color: #323333;
  --menu-item-hover-color: #FFA201;
  --menu-item-hover-bg: rgba(255, 162, 1, 0.1);
  --menu-item-active-color: var(--primary);
  --menu-item-active-bg: var(--danger-transparent);
  --menu-active-color: var(--primary);
  --submenu-active-color: var(--primary);
  --menu-active-bg: var(--primary-transparent);
  --menu-item-heading: #1F2020;
  --menu-item-border: #B5B5B5;
  --menu-icon-bg: rgba(255, 255, 255, 0.5);
}

:root[data-sidebar=sidebar3] {
  --menu-bg: #0A0C0C;
  --menu-item-color: #97aac1;
  --menu-item-border: rgba(255, 255, 255, 0.1);
  --menu-item-hover-color: var(--primary);
  --menu-item-hover-bg: var(--primary);
  --menu-item-active-color: var(--primary);
  --menu-item-active-bg: var(--danger-transparent);
  --menu-active-color: var(--primary);
  --submenu-active-color: var(--primary);
  --menu-active-bg: var(--primary-transparent);
  --menu-item-heading: #fff;
  --menu-icon-bg: rgba(255, 255, 255, 0.05);
}

:root[data-sidebar=sidebar4] {
  --menu-bg: #E41F07;
  --menu-item-color: #B5B5B5;
  --menu-item-hover-color: #FFA201;
  --menu-item-border: rgba(255, 255, 255, 0.1);
  --menu-item-hover-bg: #FFA201;
  --menu-item-active-color: #B5B5B5;
  --menu-item-active-bg: #FFA201;
  --menu-active-color: #FFA201;
  --submenu-active-color: #fff;
  --menu-active-bg: var(--primary-transparent);
  --menu-title-color: #fff;
  --menu-item-heading: #fff;
  --menu-icon-bg: rgba(255, 255, 255, 0.1);
}

:root[data-sidebar=sidebar5] {
  --menu-bg: #FFA201;
  --menu-item-color: #e0e0e0;
  --menu-item-hover-color: var(--primary);
  --menu-item-border: rgba(255, 255, 255, 0.1);
  --menu-item-hover-bg: var(--primary);
  --menu-item-active-color: var(--primary);
  --menu-item-active-bg: var(--danger-transparent);
  --menu-active-color: var(--primary);
  --submenu-active-color: #fff;
  --menu-active-bg: var(--primary-transparent);
  --menu-title-color: #fff;
  --menu-item-heading: #fff;
  --menu-icon-bg: rgba(255, 255, 255, 0.1);
}

:root[data-sidebar=sidebar6] {
  --menu-bg: #2F80ED;
  --menu-item-color: rgba(255, 255, 255, 0.8);
  --menu-item-hover-color: #fff;
  --menu-item-border: rgba(255, 255, 255, 0.1);
  --menu-item-hover-bg: var(--primary);
  --menu-item-active-color: var(--primary);
  --menu-item-active-bg: var(--danger-transparent);
  --menu-active-color: var(--primary);
  --submenu-active-color: #fff;
  --menu-active-bg: var(--primary-transparent);
  --menu-title-color: #fff;
  --menu-item-heading: #fff;
  --menu-icon-bg: rgba(255, 255, 255, 0.1);
}

:root[data-sidebar=sidebar7] {
  --menu-bg: #3538CD;
  --menu-item-color: rgba(255, 255, 255, 0.8);
  --menu-item-hover-color: var(--primary);
  --menu-item-border: rgba(255, 255, 255, 0.1);
  --menu-item-hover-bg: var(--primary);
  --menu-item-active-color: var(--primary);
  --menu-item-active-bg: var(--danger-transparent);
  --menu-active-color: var(--primary);
  --submenu-active-color: var(--primary);
  --menu-active-bg: var(--primary-transparent);
  --menu-title-color: #fff;
  --menu-item-heading: #fff;
  --menu-icon-bg: rgba(255, 255, 255, 0.1);
}

:root[data-sidebar=gradientsidebar1] {
  --menu-bg: linear-gradient(180deg, #8351FD 0%, #5112A9 100%);
  --menu-item-color: rgba(255, 255, 255, 0.8);
  --menu-item-hover-color: #fff;
  --menu-item-hover-bg: rgba(255, 255, 255, 0.1);
  --menu-item-active-color: var(--primary);
  --menu-item-active-bg: var(--danger-transparent);
  --menu-active-color: var(--primary);
  --submenu-active-color: #fff;
  --menu-active-bg: var(--primary-transparent);
  --menu-title-color: #fff;
  --menu-item-heading: #fff;
  --menu-item-border: rgba(255, 255, 255, 0.1);
  --menu-icon-bg: rgba(255, 255, 255, 0.1);
}

:root[data-sidebar=gradientsidebar2] {
  --menu-bg: linear-gradient(180deg, #18ACCF 0%, #0F59AD 100%);
  --menu-item-color: rgba(255, 255, 255, 0.8);
  --menu-item-hover-color: #fff;
  --menu-item-hover-bg: rgba(255, 255, 255, 0.1);
  --menu-item-active-color: var(--primary);
  --menu-item-active-bg: var(--danger-transparent);
  --menu-active-color: var(--primary);
  --submenu-active-color: #fff;
  --menu-active-bg: var(--primary-transparent);
  --menu-title-color: #fff;
  --menu-item-heading: #fff;
  --menu-item-border: rgba(255, 255, 255, 0.1);
  --menu-icon-bg: rgba(255, 255, 255, 0.1);
}

:root[data-sidebar=gradientsidebar3] {
  --menu-bg: linear-gradient(180deg, #309F92 0%, #0C5666 100%);
  --menu-item-color: rgba(255, 255, 255, 0.8);
  --menu-item-hover-color: #fff;
  --menu-item-hover-bg: rgba(255, 255, 255, 0.1);
  --menu-item-active-color: var(--primary);
  --menu-item-active-bg: var(--danger-transparent);
  --menu-active-color: var(--primary);
  --submenu-active-color: #fff;
  --menu-active-bg: var(--primary-transparent);
  --menu-title-color: #fff;
  --menu-item-border: rgba(255, 255, 255, 0.1);
  --menu-item-heading: #fff;
  --menu-icon-bg: rgba(255, 255, 255, 0.1);
}

:root[data-sidebar=gradientsidebar4] {
  --menu-bg: linear-gradient(180deg, #4B749F 0%, #243748 100%);
  --menu-item-color: rgba(255, 255, 255, 0.8);
  --menu-item-hover-color: #fff;
  --menu-item-hover-bg: rgba(255, 255, 255, 0.1);
  --menu-item-active-color: var(--primary);
  --menu-item-active-bg: var(--danger-transparent);
  --menu-active-color: var(--primary);
  --submenu-active-color: #fff;
  --menu-active-bg: var(--primary-transparent);
  --menu-title-color: #fff;
  --menu-item-heading: #fff;
  --menu-item-border: rgba(255, 255, 255, 0.1);
  --menu-icon-bg: rgba(255, 255, 255, 0.1);
}

:root[data-sidebar=gradientsidebar5] {
  --menu-bg: linear-gradient(180deg, #AF1FAF 0%, #800080 100%);
  --menu-item-color: rgba(255, 255, 255, 0.8);
  --menu-item-hover-color: #fff;
  --menu-item-hover-bg: rgba(255, 255, 255, 0.1);
  --menu-item-active-color: var(--primary);
  --menu-item-active-bg: var(--danger-transparent);
  --menu-active-color: var(--primary);
  --submenu-active-color: #fff;
  --menu-active-bg: var(--primary-transparent);
  --menu-title-color: #fff;
  --menu-item-heading: #fff;
  --menu-item-border: rgba(255, 255, 255, 0.1);
  --menu-icon-bg: rgba(255, 255, 255, 0.1);
}

:root[data-sidebar=gradientsidebar6] {
  --menu-bg: linear-gradient(180deg, #F99D6F 0%, #FA6D70 100%);
  --menu-item-color: rgba(255, 255, 255, 0.8);
  --menu-item-hover-color: #fff;
  --menu-item-hover-bg: rgba(255, 255, 255, 0.1);
  --menu-item-active-color: var(--primary);
  --menu-item-active-bg: var(--danger-transparent);
  --menu-active-color: var(--primary);
  --submenu-active-color: #fff;
  --menu-active-bg: var(--primary-transparent);
  --menu-title-color: #fff;
  --menu-item-heading: #fff;
  --menu-item-border: rgba(255, 255, 255, 0.1);
  --menu-icon-bg: rgba(255, 255, 255, 0.1);
}

:root[data-sidebar=gradientsidebar7] {
  --menu-bg: linear-gradient(180deg, #4F84F4 0%, #320F84 100%);
  --menu-item-color: rgba(255, 255, 255, 0.8);
  --menu-item-hover-color: #fff;
  --menu-item-hover-bg: rgba(255, 255, 255, 0.1);
  --menu-item-active-color: var(--primary);
  --menu-item-active-bg: var(--danger-transparent);
  --menu-active-color: var(--primary);
  --submenu-active-color: #fff;
  --menu-active-bg: var(--primary-transparent);
  --menu-title-color: #fff;
  --menu-item-heading: #fff;
  --menu-item-border: rgba(255, 255, 255, 0.1);
  --menu-icon-bg: rgba(255, 255, 255, 0.1);
}

:root[data-bs-theme=dark][data-topbar=white] {
  --topbar-bg: #030318;
  --topbar-item-color: #dbe0e6;
  --topbar-item-hover-color: #bccee4;
  --topbar-item-hover-bg: rgba(255, 255, 255, 0.1);
  --topbar-item-border: #161641;
  --topbar-item-bg: #11112f;
  --box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.75);
  --topbar-item-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
}

:root[data-topbar=white] {
  --topbar-bg: #fff;
  --topbar-item-color: #1F2020;
  --topbar-item-hover-color: var(--primary);
  --topbar-item-hover-bg: #F7F8F9;
}

:root[data-topbar=topbar1] {
  --topbar-bg: #F7F8F9;
  --topbar-item-color: #454646;
  --topbar-item-hover-color: var(--primary);
  --topbar-item-hover-bg: #CDCDCD;
  --topbar-item-border: #e6e2e2;
  --topbar-item-bg: #F7F8F9;
  --menu-item-heading: #1F2020;
}

:root[data-topbar=topbar2] {
  --topbar-bg: #0A0C0C;
  --topbar-item-color: #dbe0e6;
  --topbar-item-hover-color: #bccee4;
  --topbar-item-hover-bg: rgba(255, 255, 255, 0.1);
  --topbar-item-border: rgba(255, 255, 255, 0.1);
  --topbar-item-bg: #11112f;
  --topbar-item-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
}

:root[data-topbar=topbar3] {
  --topbar-bg: #E41F07;
  --topbar-item-color: #fff;
  --topbar-item-hover-color: #F7F8F9;
  --topbar-item-hover-bg: rgba(10, 12, 12, 0.1);
  --topbar-item-border: rgba(255, 255, 255, 0.1);
  --topbar-item-bg: rgba(255, 255, 255, 0.1);
  --topbar-item-shadow: 0px 4px 4px 0px rgba(169, 6, 6, 0.15);
}

:root[data-topbar=topbar4] {
  --topbar-bg: #FFA201;
  --topbar-item-color: #fff;
  --topbar-item-hover-color: #1F2020;
  --topbar-item-hover-bg: rgba(10, 12, 12, 0.1);
  --topbar-item-border: rgba(255, 255, 255, 0.1);
  --topbar-item-bg: rgba(255, 255, 255, 0.1);
  --topbar-item-shadow: 0px 4px 4px 0px rgba(171, 134, 0, 0.15);
}

:root[data-topbar=topbar5] {
  --topbar-bg: #2F80ED;
  --topbar-item-color: #fff;
  --topbar-item-hover-color: #1F2020;
  --topbar-item-hover-bg: rgba(10, 12, 12, 0.1);
  --topbar-item-border: rgba(255, 255, 255, 0.1);
  --topbar-item-bg: rgba(255, 255, 255, 0.1);
  --topbar-item-shadow: 0px 4px 4px 0px rgba(4, 72, 128, 0.15);
}

:root[data-topbar=topbar6] {
  --topbar-bg: #3538CD;
  --topbar-item-color: #fff;
  --topbar-item-hover-color: #1F2020;
  --topbar-item-hover-bg: rgba(10, 12, 12, 0.1);
  --topbar-item-border: rgba(255, 255, 255, 0.1);
  --topbar-item-bg: rgba(255, 255, 255, 0.1);
  --topbar-item-shadow: 0px 4px 4px 0px rgba(19, 2, 112, 0.15);
}

:root[data-topbar=gradienttopbar1] {
  --topbar-bg: linear-gradient(90deg, #8351FD 0%, #5112A9 100%);
  --topbar-item-color: #fff;
  --topbar-item-hover-color: #1F2020;
  --topbar-item-hover-bg: rgba(10, 12, 12, 0.1);
  --topbar-item-border: rgba(255, 255, 255, 0.1);
  --topbar-item-bg: rgba(255, 255, 255, 0.1);
  --topbar-item-shadow: 0px 4px 4px 0px rgba(93, 67, 154, 0.15);
}

:root[data-topbar=gradienttopbar2] {
  --topbar-bg: linear-gradient(90deg, #18ACCF 0%, #0F59AD 100%);
  --topbar-item-color: #fff;
  --topbar-item-hover-color: #1F2020;
  --topbar-item-hover-bg: rgba(10, 12, 12, 0.1);
  --topbar-item-border: rgba(255, 255, 255, 0.1);
  --topbar-item-bg: rgba(255, 255, 255, 0.1);
  --topbar-item-shadow: 0px 4px 4px 0px rgba(31, 102, 145, 0.15);
}

:root[data-topbar=gradienttopbar3] {
  --topbar-bg: linear-gradient(90deg, #309F92 0%, #0C5666 100%);
  --topbar-item-color: #fff;
  --topbar-item-hover-color: #1F2020;
  --topbar-item-hover-bg: rgba(10, 12, 12, 0.1);
  --topbar-item-border: rgba(255, 255, 255, 0.1);
  --topbar-item-bg: rgba(255, 255, 255, 0.1);
  --topbar-item-shadow: 0px 4px 4px 0px rgba(19, 82, 67, 0.15);
}

:root[data-topbar=gradienttopbar4] {
  --topbar-bg: linear-gradient(90deg, #4B749F 0%, #243748 100%);
  --topbar-item-color: #fff;
  --topbar-item-hover-color: #1F2020;
  --topbar-item-hover-bg: rgba(10, 12, 12, 0.1);
  --topbar-item-border: rgba(255, 255, 255, 0.1);
  --topbar-item-bg: rgba(255, 255, 255, 0.1);
  --topbar-item-shadow: 0px 4px 4px 0px rgba(28, 60, 80, 0.15);
}

:root[data-topbar=gradienttopbar5] {
  --topbar-bg: linear-gradient(90deg, #AF1FAF 0%, #800080 100%);
  --topbar-item-color: #fff;
  --topbar-item-hover-color: #1F2020;
  --topbar-item-hover-bg: rgba(10, 12, 12, 0.1);
  --topbar-item-border: rgba(255, 255, 255, 0.1);
  --topbar-item-bg: rgba(255, 255, 255, 0.1);
  --topbar-item-shadow: 0px 4px 4px 0px rgba(94, 39, 85, 0.15);
}

:root[data-topbar=gradienttopbar6] {
  --topbar-bg: linear-gradient(90deg, #F99D6F 0%, #FA6D70 100%);
  --topbar-item-color: #fff;
  --topbar-item-hover-color: #1F2020;
  --topbar-item-hover-bg: rgba(10, 12, 12, 0.1);
  --topbar-item-border: rgba(255, 255, 255, 0.1);
  --topbar-item-bg: rgba(255, 255, 255, 0.1);
  --topbar-item-shadow: 0px 4px 4px 0px rgba(156, 117, 90, 0.15);
}

:root[data-topbar=gradienttopbar7] {
  --topbar-bg: linear-gradient(90deg, #4F84F4 0%, #320F84 100%);
  --topbar-item-color: #fff;
  --topbar-item-hover-color: #1F2020;
  --topbar-item-hover-bg: rgba(10, 12, 12, 0.1);
  --topbar-item-border: rgba(255, 255, 255, 0.1);
  --topbar-item-bg: rgba(255, 255, 255, 0.1);
  --topbar-item-shadow: 0px 4px 4px 0px rgba(18, 53, 75, 0.15);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.navbar-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--topbar-bg);
  min-height: var(--topbar-height);
  margin-left: var(--sidenav-width);
  border-bottom: 1px solid var(--border-color);
  padding: 0 1.25rem;
  box-sizing: border-box;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
@media (max-width: 991.98px) {
  .navbar-header {
    margin-left: 0;
  }
}
.navbar-header #toggle_btn2 {
  display: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--menu-item-heading);
}
.navbar-header .dropdown-menu .dropdown-item.form-switch {
  padding: 0.4rem 0.9375rem;
}
.navbar-header .profile-dropdown label {
  font-weight: 400;
}
.navbar-header .profile-dropdown label i {
  margin-right: 8px;
}
.navbar-header .header-line {
  background-color: var(--topbar-item-border);
  height: 20px;
  width: 1px;
  margin: 0 12px 0 0;
}
.navbar-header .header-search .header-search-icon {
  position: absolute;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-header .header-search .input-icon-addon {
  color: var(--topbar-item-color);
}
.navbar-header .header-search .form-control {
  background: transparent;
  height: 38px;
  font-size: 14px;
  color: var(--topbar-item-color);
  border-color: var(--topbar-item-border);
  box-shadow: var(--topbar-item-shadow);
}
.navbar-header .topbar-menu {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.navbar-header .topbar-menu.page-container {
  margin: 0;
  padding: 0;
}
.navbar-header .topbar-menu .header-link {
  width: 32px;
  height: 32px;
}
.navbar-header .topbar-menu .header-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--topbar-height);
}
/* Sếp's own request: the avatar/profile toggle should have the same
   white boxed-icon look as the truck/bell icons next to it - its <a>
   already carries the topbar-link class, but the boxed style below was
   originally scoped to `.header-item .topbar-link` and the avatar's own
   wrapper is `.profile-dropdown`, not `.header-item`, so it never
   matched. Added as a second selector rather than reclassing the
   wrapper, to avoid touching whatever else keys off `.profile-dropdown`
   (Bootstrap's dropdown JS, other layout rules). */
.navbar-header .topbar-menu .header-item .topbar-link,
.navbar-header .topbar-menu .profile-dropdown .topbar-link {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 5px;
  color: var(--topbar-item-color);
  border: 1px solid var(--topbar-item-border);
  box-shadow: var(--topbar-item-shadow);
  padding: 5px;
  position: relative;
}
.navbar-header .topbar-menu .header-item .topbar-link:hover,
.navbar-header .topbar-menu .profile-dropdown .topbar-link:hover {
  background-color: var(--topbar-item-hover-bg);
  border-color: var(--topbar-item-hover-bg);
}
.navbar-header .topbar-menu .header-item .topbar-link i {
  font-size: 18px;
}
.navbar-header .topbar-menu .header-item .topbar-link.topbar-teal-link {
  background-color: var(--teal-100);
  color: var(--teal);
  border: none;
}
.navbar-header .topbar-menu .header-item .topbar-link.topbar-teal-link:hover {
  background-color: var(--teal);
  color: #fff;
}
.navbar-header .topbar-menu .header-item .topbar-link.topbar-indigo-link {
  background-color: var(--indigo-100);
  color: var(--indigo);
  border: none;
}
.navbar-header .topbar-menu .header-item .topbar-link.topbar-indigo-link:hover {
  background-color: var(--indigo);
  color: #fff;
}
.navbar-header .topbar-menu .header-item .topbar-link.topbar-warning-link {
  background-color: var(--warning-transparent);
  color: var(--warning);
  border: none;
}
.navbar-header .topbar-menu .header-item .topbar-link.topbar-warning-link:hover {
  background-color: var(--warning);
  color: #fff;
}
.navbar-header .topbar-menu .header-item .topbar-link .badge {
  color: #fff;
  font-weight: 700;
  position: absolute;
  top: 8px;
  right: 9px;
  background: var(--primary);
  width: 8px;
  height: 8px;
  font-weight: 400;
  padding: 0;
  font-size: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
.navbar-header ul {
  list-style-type: none;
  margin-bottom: 0;
}
.navbar-header .logo {
  display: none;
}

.sidenav-toggle-btn:hover {
  color: var(--primary);
}
@media (max-width: 991.98px) {
  .sidenav-toggle-btn {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .mobile-btn {
    display: none;
  }
}

html[data-bs-theme=dark] #light-dark-mode .ti-moon::before {
  content: "\eb30";
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-color);
  padding: 10px;
  transition: none;
}

.header-search .input-group-sm > .form-control,
.header-search .input-group-sm > .form-select,
.header-search .input-group-sm > .input-group-text,
.header-search .input-group-sm > .btn {
  padding: 0.3rem 0.5rem;
}

.notification-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  background-color: #FD5812;
  border-radius: 50px;
}

.notification-body {
  min-height: 280px;
  max-height: 280px;
}

.notification-item {
  background-color: var(--white);
  position: relative;
  cursor: pointer;
  border-radius: 0 !important;
}
.notification-item .notification-item-close {
  position: absolute;
  right: 0;
  display: none;
  top: 0;
  bottom: 0;
  padding: 15px;
  background-color: var(--light);
}
.notification-item .notification-action {
  display: none !important;
}
.notification-item .notification-read {
  display: block;
  width: 8px;
  height: 8px;
}
.notification-item .notification-badge {
  height: 22px;
  width: 22px;
  text-align: center;
  color: var(--white);
  top: -12px;
  right: -8px;
  border: 2px solid var(--white);
  line-height: 18px;
  font-size: 11px;
}
.notification-item:hover .notification-item-close {
  display: block;
}
.notification-item:hover .notification-action {
  display: flex !important;
}

.animate-ring {
  animation: tada 1.5s ease infinite;
}

@keyframes tada {
  0% {
    transform: scaleZ(1);
  }
  10%, 20% {
    transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg);
  }
  30%, 50%, 70%, 90% {
    transform: scaleZ(1) rotate3d(0, 0, 1, 10deg);
  }
  40%, 60%, 80% {
    transform: rotate3d(0, 0, 1, -10deg);
  }
  to {
    transform: scaleZ(1);
  }
}
@media (max-width: 575.98px) {
  .navbar-header .topbar-menu {
    position: initial;
  }
  .navbar-header .dropdown {
    position: static;
  }
  .navbar-header .dropdown .dropdown-menu {
    width: 100%;
    left: 0 !important;
    right: 0 !important;
  }
}
@media (max-width: 767.98px) {
  .navbar-header {
    padding: 0 0.625rem;
  }
}
[data-layout=hidden] #toggle_btn2 {
  display: block;
}
[data-layout=hidden] .hidden-layout #toggle_btn2 {
  display: none;
}

.header-collapse .navbar-header {
  display: none;
  height: 0;
}
.header-collapse #collapse-header i {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}
.header-collapse .page-wrapper .content {
  padding: 1.25rem;
  min-height: calc(100vh - 39px);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.sidebar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: var(--menu-bg);
  border-right: 1px solid var(--menu-item-border);
  margin-top: 0;
  z-index: 99;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  transition: all 0.25s ease-in-out;
  width: var(--sidenav-width);
}
@media (max-width: 991.98px) {
  .sidebar {
    margin-left: -575px;
    transition: all 0.4s ease;
    z-index: 9999;
    top: 0;
  }
}
.sidebar .sidebar-logo {
  position: fixed;
  line-height: var(--topbar-height);
  width: var(--sidenav-width);
  padding: 0 16px;
  border-bottom: 1px solid var(--menu-item-border);
}
.sidebar .sidebar-logo .logo {
  display: block;
}
.sidebar .sidebar-logo .logo-small, .sidebar .sidebar-logo .dark-logo {
  display: none;
}
/* The DHQC admin logo (logo.png, ported from ZF1's logo-bl.png) is a
   colored mark with dark navy text - unreadable on the dark theme's
   near-black sidebar/topbar background. There's no separate white logo
   asset (ZF1 never had a dark mode), so the same file is reused for the
   ".logo-dark"/"dark-logo" slots with this filter converting every
   non-transparent pixel to solid white while keeping the alpha channel. */
.logo-dark-filter {
  filter: brightness(0) invert(1);
}
/* The theme's own logo.svg was a tiny 111x16 wordmark, so the sidebar/topbar
   never needed an explicit size constraint on the logo <img> - it just
   rendered at its (already small) native size. Our ported logo.png is
   222x64, much bigger natively, and renders oversized without a cap.
   logo-small.png (the collapsed-sidebar icon) is 256x256 for the same
   reason. */
.sidebar-logo .logo img,
.sidebar-logo .dark-logo img {
  max-height: 40px;
  width: auto;
}
.sidebar-logo .logo-small img {
  max-height: 28px;
  width: auto;
}
@media (min-width: 992px) {
  .sidebar .sidebar-logo #toggle_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 16px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--menu-item-heading);
    font-size: 16px;
  }
}
.sidebar [data-simplebar] {
  top: var(--topbar-height);
  height: calc(100% - var(--topbar-height));
}
@media (max-width: 575.98px) {
  .sidebar [data-simplebar] {
    width: 100% !important;
  }
}
@media (max-width: 991.98px) {
  .sidebar [data-simplebar] {
    height: 100%;
  }
}
.sidebar [data-simplebar] .sidebar-menu {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.sidebar .sidebar-inner {
  width: 100%;
}
.sidebar .sidebar-menu {
  margin-top: var(--topbar-height);
  padding: 16px;
}
.sidebar .sidebar-menu ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.sidebar .sidebar-menu > ul > li {
  margin-bottom: 10px;
}
.sidebar .sidebar-menu > ul > li:last-child {
  margin-bottom: 0;
}
.sidebar .sidebar-menu > ul > li:first-child.menu-title {
  margin-top: 0;
}
.sidebar .sidebar-menu > ul > li > ul > li > a .count {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--danger);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
  margin-left: auto;
  font-weight: 400;
}
.sidebar .sidebar-menu > ul > li > ul > li > a:hover {
  background: var(--menu-item-active-bg);
  color: var(--primary);
}
.sidebar .sidebar-menu > ul > li > ul > li > a:hover i {
  color: var(--primary);
  background-color: transparent;
}
.sidebar .sidebar-menu > ul > li > ul > li > a:hover .menu-arrow::before {
  border-color: var(--white);
}
.sidebar .sidebar-menu > ul > li:last-child ul {
  margin-bottom: 0;
}
.sidebar .sidebar-menu > ul > li.active a {
  color: var(--white);
}
.sidebar .sidebar-menu > ul > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  padding: 10px 15px;
  position: relative;
  color: var(--gray-900);
  border-bottom: none;
}
.sidebar .sidebar-menu > ul > li > a.active {
  background: var(--light);
  border-radius: 50px;
  border-left: 2px solid var(--menu-item-active-color);
}
.sidebar .sidebar-menu > ul > li > a span {
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-600);
}
.sidebar .sidebar-menu > ul > li.submenu ul {
  display: none;
}
/* Hover menu cha -> tự xổ danh sách menu con (chỉ sidebar thường, không áp mini-sidebar).
   Cấu trúc thật: #sidebar-menu > ul > li > ul > li.submenu > ul (submenu con là ul trực tiếp). */
body:not(.mini-sidebar) #sidebar-menu li.submenu:hover > ul {
  display: flex !important;
}
.sidebar .sidebar-menu > ul > li.submenu ul li a {
  font-weight: 500;
  font-size: 14px;
  position: relative;
  display: block;
  padding: 8px 8px 8px 40px;
  padding-left: 30px;
}
.sidebar .sidebar-menu > ul > li ul {
  display: flex;
  flex-direction: column;
}
.sidebar .sidebar-menu > ul > li ul li {
  overflow: hidden;
  margin-bottom: 5px;
}
.sidebar .sidebar-menu > ul > li ul li a {
  display: -webkit-box;
  border-radius: 50px;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  font-size: 14px;
  color: var(--menu-item-heading);
  font-weight: 500;
  position: relative;
  width: 100%;
  padding: 4px 4px;
}
.sidebar .sidebar-menu > ul > li ul li a i {
  font-size: 16px;
  width: 28px;
  height: 28px;
  background-color: var(--menu-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  flex-shrink: 0;
}
.sidebar .sidebar-menu > ul > li ul li a span {
  white-space: nowrap;
  margin-left: 8px;
}
.sidebar .sidebar-menu > ul > li ul li a.active {
  color: var(--menu-item-hover-color);
}
.sidebar .sidebar-menu > ul > li ul li a.active .menu-arrow::before {
  border-color: var(--white);
}
.sidebar .sidebar-menu > ul > li ul li a.active::before {
  opacity: 1;
}
.sidebar .sidebar-menu > ul > li ul > li.active a {
  background: var(--menu-item-active-bg);
  border-radius: 50px;
  color: var(--primary);
}
.sidebar .sidebar-menu > ul > li ul > li.active a i {
  color: var(--primary);
  background-color: transparent;
}
.sidebar .sidebar-menu > ul > li ul > li.active a .menu-arrow::before {
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
}
.sidebar .sidebar-menu > ul > li ul > li.active a.subdrop {
  background: var(--primary-transparent);
  border-radius: 50px;
  color: var(--primary);
}
.sidebar .sidebar-menu > ul > li ul > li.active a.subdrop i {
  color: var(--primary);
  background-color: transparent;
}
.sidebar .sidebar-menu > ul > li ul > li.active a.subdrop span {
  color: var(--primary);
}
.sidebar .sidebar-menu > ul > li .submenu ul {
  display: none;
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}
.sidebar .sidebar-menu > ul > li .submenu ul li {
  margin: 0;
}
.sidebar .sidebar-menu > ul li.menu-title {
  font-weight: 500;
  letter-spacing: 0;
  font-size: 13px;
  margin: 8px 0 12px;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  border: 0;
  color: var(--menu-title-color);
}
.sidebar .sidebar-menu > ul li.menu-title span {
  flex-shrink: 0;
}
.sidebar .sidebar-menu > ul li .submenu > ul {
  margin: 4px 0 0;
  position: relative;
}
.sidebar .sidebar-menu > ul li .submenu > ul li a {
  padding: 8px 4px 8px 36px;
  font-size: 13px;
  position: relative;
  color: var(--menu-item-color);
  font-weight: 400;
}
.sidebar .sidebar-menu > ul li .submenu > ul li a.active {
  color: var(--submenu-active-color);
}
.sidebar .sidebar-menu > ul li .submenu > ul li a.active::before {
  opacity: 1;
}
.sidebar .sidebar-menu > ul li .submenu > ul li a.active::after {
  background-color: var(--submenu-active-color);
}
.sidebar .sidebar-menu > ul li .submenu > ul li a:hover {
  color: var(--submenu-active-color);
}
.sidebar .sidebar-menu > ul li .submenu > ul li a:hover::after {
  background-color: var(--submenu-active-color);
}
.sidebar .sidebar-menu > ul li .submenu > ul li a:hover .menu-arrow::before {
  border-color: var(--menu-item-hover-color);
}
.sidebar .sidebar-menu > ul li .submenu > ul li a::after {
  position: absolute;
  content: "";
  background-color: var(--menu-item-color);
  width: 8px;
  height: 8px;
  left: 20px;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.sidebar .sidebar-menu > ul li .submenu > ul li a::before {
  position: absolute;
  content: "";
  background-color: var(--menu-item-border);
  width: 0.5px;
  height: 8px;
  left: 22.5px;
  top: -2px;
}
.sidebar .sidebar-menu > ul li .submenu > a.subdrop {
  background: var(--menu-item-active-bg);
  border-radius: 50px;
  color: var(--primary);
}
.sidebar .sidebar-menu > ul li .submenu > a.subdrop i {
  color: var(--primary);
  background-color: transparent;
}
.sidebar .sidebar-menu > ul li .submenu > a.subdrop .menu-arrow::before {
  border-color: var(--primary);
}
.sidebar .sidebar-menu > ul li .submenu > a.active {
  background: var(--menu-item-active-bg);
  border-radius: 50px;
  color: var(--primary);
}
.sidebar .sidebar-menu > ul li .submenu > a.active i {
  color: var(--primary);
  background-color: transparent;
}
.sidebar .sidebar-menu > ul li .submenu.submenu-two a.subdrop {
  background: transparent;
  color: var(--menu-item-active-color);
  border: 0;
}
.sidebar .sidebar-menu > ul li .submenu.submenu-two a.subdrop .menu-arrow::before {
  border-color: var(--menu-item-active-color);
}
.sidebar .sidebar-menu > ul li .submenu.submenu-two a.active {
  background: transparent;
  color: var(--menu-active-color);
  border: 0;
}
.sidebar .sidebar-menu > ul li .submenu.submenu-two a.active .menu-arrow::before {
  border-color: var(--menu-active-color);
}
.sidebar .sidebar-menu > ul li .submenu.submenu-two ul {
  margin-top: 0;
}
.sidebar .sidebar-menu > ul li .submenu.submenu-two ul li {
  margin-left: 20px;
}
.sidebar .sidebar-menu > ul li .submenu.submenu-two.submenu-three ul li {
  margin-left: 20px;
}
.sidebar .sidebar-menu .menu-arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  text-rendering: auto;
  line-height: 40px;
  font-size: 18px;
  line-height: 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translatey(-50%);
  transition: all 0.2s ease;
}
.sidebar .sidebar-menu .menu-arrow::before {
  position: absolute;
  right: 0;
  top: 50%;
  content: "\ea5f";
  font-family: "tabler-icons";
  margin-right: 0;
  font-size: 14px;
  display: inline-block;
  transform: translateY(-50%);
}
.sidebar .sidebar-menu .menu-arrow.inside-submenu {
  right: 10px;
}
.sidebar .sidebar-menu.subdrop .menu-arrow {
  transform: translateY(-50%) rotate(90deg);
  background: #FFEDDC;
}
.sidebar li a.subdrop .menu-arrow::before {
  content: "\ea62";
}

@media (min-width: 992px) {
  .mini-sidebar .page-wrapper {
    margin-left: var(--sidenav-width-sm);
  }
  .mini-sidebar .header-left #toggle_btn {
    opacity: 1;
    transform: rotate(180deg);
  }
  .mini-sidebar .header-left #toggle_btn:after {
    border: 0;
  }
  .mini-sidebar .sidebar .sidebar-menu .clinicdropdown > a {
    padding: 5px;
  }
  .mini-sidebar.expand-menu .header-left #toggle_btn {
    opacity: 1;
    transform: rotate(180deg);
  }
  .mini-sidebar.expand-menu .sidebar .sidebar-menu .clinicdropdown > a {
    padding: 10px 15px;
  }
  .mini-sidebar .sidebar-right {
    display: none;
  }
  .mini-sidebar .sidebar {
    width: var(--sidenav-width-sm);
    overflow: hidden;
  }
  .mini-sidebar .sidebar .sidebar-menu ul li a span, .mini-sidebar .sidebar .sidebar-menu ul li a .count {
    display: none;
  }
  /* Sếp's own request: the "Tỷ giá Vốn"/"Hàng lô về kho" sidebar widgets
     (layout.html.twig) are text-heavy (rates, counts, timestamps) with no
     sensible icon-only version, unlike the menu items above which just
     drop their text label and keep an icon - hidden outright in collapsed/
     icons-only mode instead. */
  .mini-sidebar .sidebar .header-widgets-sidebar {
    display: none;
  }
  .mini-sidebar .sidebar .sidebar-menu ul li .menu-title {
    font-size: 0;
  }
  .mini-sidebar .sidebar .sidebar-menu ul li .menu-title::after {
    margin-left: 0;
  }
  .mini-sidebar .sidebar .sidebar-menu ul li svg {
    margin-right: 0;
  }
  .expand-menu.mini-sidebar .navbar-header {
    margin-left: var(--sidenav-width);
  }
}
@media (min-width: 992px) and (min-width: 992px) {
  .expand-menu.mini-sidebar .navbar-header #toggle_btn {
    left: -32px;
    background: transparent;
    color: var(--gray-900);
  }
}
@media (min-width: 992px) {
  .expand-menu.mini-sidebar #toggle_btn {
    opacity: 1;
  }
  .expand-menu.mini-sidebar #toggle_btn i {
    transform: rotate(180deg);
  }
  .expand-menu.mini-sidebar .sidebar {
    width: var(--sidenav-width);
  }
  .expand-menu.mini-sidebar .sidebar .sidebar-logo {
    width: var(--sidenav-width);
  }
  .expand-menu.mini-sidebar .sidebar .sidebar-logo .logo {
    display: block;
  }
  .expand-menu.mini-sidebar .sidebar .sidebar-logo .logo-small {
    display: none;
    text-align: center;
  }
  .expand-menu.mini-sidebar .sidebar .sidebar-menu ul li a .count {
    display: flex;
  }
  .expand-menu.mini-sidebar .sidebar .sidebar-menu .menu-title {
    display: flex;
  }
  /* Sếp's own follow-up: hovering a collapsed (mini) sidebar adds
     .expand-menu, which this theme uses to temporarily re-show text the
     plain .mini-sidebar rule above hides (.count, .menu-title) - same
     treatment for the header widgets, so they reappear on hover too
     instead of staying hidden until the sidebar is pinned open. */
  .expand-menu.mini-sidebar .sidebar .header-widgets-sidebar {
    display: block;
  }
  .expand-menu.mini-sidebar .sidebar .sidebar-menu .menu-title::after {
    margin-left: 8px;
  }
  .expand-menu.mini-sidebar .sidebar .user-names {
    display: none;
  }
  .expand-menu .sidebar-right {
    display: block;
    transition: all 0.2s ease;
  }
  .expand-menu .sidebar {
    width: var(--sidenav-width);
  }
  .expand-menu .sidebar .sidebar-menu ul > li > a span {
    display: inline-block;
  }
  .expand-menu .sidebar .sidebar-menu .menu-title {
    display: flex;
  }
  #toggle_btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    color: var(--topbar-item-color);
  }
  #toggle_btn.active {
    border: 0;
    background: transparent;
  }
  #toggle_btn:hover {
    color: var(--topbar-item-hover-color);
  }
}
.mini-sidebar .navbar-header {
  margin-left: var(--sidenav-width-sm);
}
@media (max-width: 991.98px) {
  .mini-sidebar .navbar-header {
    left: 0;
    margin-left: 0;
  }
}
.mini-sidebar #toggle_btn {
  opacity: 0;
}
.mini-sidebar .sidebar .sidebar-logo {
  width: var(--sidenav-width-sm);
}
.mini-sidebar .sidebar .sidebar-logo .logo {
  display: none;
}
.mini-sidebar .sidebar .sidebar-logo .logo-small {
  display: block;
  text-align: center;
}
@media (max-width: 991.98px) {
  .mini-sidebar .sidebar .sidebar-logo {
    width: 240px;
  }
  .mini-sidebar .sidebar .sidebar-logo .logo-small {
    display: none;
  }
  .mini-sidebar .sidebar .sidebar-logo .logo {
    display: block;
  }
}
.mini-sidebar .sidebar .sidebar-menu > ul li {
  position: relative;
}
.mini-sidebar .sidebar .sidebar-menu > ul li.menu-title {
  display: none;
}
@media (min-width: 992px) {
  .mini-sidebar .sidebar .sidebar-menu > ul li.menu-title span {
    display: none;
  }
}
.mini-sidebar .sidebar .sidebar-menu > ul li:first-child.menu-title::before {
  content: none;
}
.mini-sidebar .sidebar .sidebar-menu > ul li a {
  justify-content: center;
  height: 38px;
}
.mini-sidebar.expand-menu .sidebar .sidebar-menu > ul > li.submenu-open ul li a {
  justify-content: left;
  -webkit-justify-content: left;
  -ms-flex-pack: left;
  padding-left: 18px;
}
.mini-sidebar.expand-menu .sidebar .sidebar-menu > ul > li ul > li.active a {
  justify-content: start;
}
.mini-sidebar.expand-menu .sidebar .user-names {
  display: block !important;
}
.mini-sidebar.expand-menu .sidebar .sidebar-menu > ul li.menu-title::before {
  content: none;
}
.mini-sidebar.expand-menu .sidebar .sidebar-menu > ul li.menu-title span {
  display: block;
}
.mini-sidebar.expand-menu .sidebar .sidebar-menu > ul li a {
  justify-content: start;
}

.slide-nav .sidebar {
  margin-left: 0;
}

.mini-sidebar .slide-nav .sidebar .sidebar-menu > ul li a {
  justify-content: start;
}
.mini-sidebar .slide-nav .active.subdrop ~ ul {
  display: block !important;
}

.sidebar-overlay {
  display: none;
  height: 100%;
  width: 100%;
  z-index: 1050;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
}
.sidebar-overlay.opened {
  display: block;
}

.mini-sidebar .active.subdrop ~ ul {
  display: none !important;
}

.mini-sidebar.expand-menu .active.subdrop ~ ul {
  display: block !important;
}

.active.subdrop ~ ul {
  display: block !important;
}

.mini-sidebar.expand-menu .navbar-header #toggle_btn {
  opacity: 1;
}

.sidebar-close {
  display: none;
  z-index: 1;
  position: absolute;
  background: transparent;
  border: none;
  top: 0;
  right: 10px;
  cursor: pointer;
  color: var(--menu-item-color);
  line-height: var(--topbar-height);
  font-size: 20px;
}
.sidebar-close:hover, .sidebar-close:focus, .sidebar-close:active {
  color: var(--menu-item-hover-color);
}
@media (max-width: 991.98px) {
  .sidebar-close {
    display: block;
  }
}

[data-layout=full-width] .mobile-btn {
  display: block;
}
[data-layout=full-width] .slide-nav .sidebar {
  margin-left: 0;
  transition: all 0.4s ease;
  z-index: 9999;
  top: 0;
  opacity: 1;
}
[data-layout=full-width] .sidenav-toggle-btn {
  display: none !important;
}
[data-layout=full-width] .sidebar-close {
  display: block;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.page-wrapper {
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  margin: 0 0 0 var(--sidenav-width);
  display: flex;
  flex-direction: column;
  position: relative;
  left: 0;
  min-height: calc(100vh - (var(--topbar-height) + 1px));
  -webkit-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
@media (max-width: 991.98px) {
  .page-wrapper {
    margin: 0;
  }
}
.page-wrapper .content {
  padding: 1.25rem;
  min-height: calc(100vh - 96px);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  color: var(--gray-500);
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border-top: 1px solid var(--border-color);
  background-color: var(--white);
}
.footer .footer-links a {
  color: var(--gray-500);
  transition: all 0.4s;
}
.footer .footer-links a:hover {
  color: var(--primary);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.sidebar-contact {
  position: fixed;
  top: 50%;
  right: -350px;
  width: 350px;
  height: auto;
  background: var(--white);
  box-sizing: border-box;
  transition: 0.5s;
  z-index: 9999;
}
.sidebar-contact .toggle-theme {
  position: absolute;
  width: 48px;
  text-align: center;
  cursor: pointer;
  background: var(--primary);
  top: 0;
  right: 350px;
  padding: 6px;
  height: 48px;
  font-size: 20px;
  color: #fff;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-contact .toggle-theme .ti-spin {
  -webkit-animation: rotate 2s infinite linear;
  animation: rotate 2s linear infinite;
  display: inline-block;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

#theme-settings {
  width: 26px;
  height: 26px;
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
}

.input-themeselect label {
  width: 100%;
}

.sidebar-themesettings {
  transition: all 0.5s;
  width: 400px !important;
  height: 100vh;
  z-index: 99999;
  overflow: auto;
  max-width: 100%;
}
.sidebar-themesettings.open {
  right: 0;
}
.sidebar-themesettings .offcanvas-header {
  position: relative;
}
.sidebar-themesettings .offcanvas-header h5 {
  color: #fff;
}
.sidebar-themesettings .offcanvas-header .close {
  color: #fff;
  font-size: 20px;
}
.sidebar-themesettings .offcanvas-header .close:hover {
  color: var(--danger);
}
.sidebar-themesettings .offcanvas-body .bg-dark {
  background: #0A0C0C !important;
}
.sidebar-themesettings .offcanvas-body .bg-light {
  background: #F7F8F9 !important;
}
.sidebar-themesettings .offcanvas-body .bg-white {
  background: #fff !important;
}
.sidebar-themesettings .offcanvas-body .bg-primary {
  background: #E41F07 !important;
}
.sidebar-themesettings .offcanvas-body .bg-primary-gradient {
  background-image: linear-gradient(180deg, #18ACCF 0%, #0F59AD 100%) !important;
}
.sidebar-themesettings .themesettings-inner .accordion-button {
  background-color: transparent;
  font-size: 16px;
  font-weight: 600;
}
.sidebar-themesettings .input-themeselect {
  background: var(--light);
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--gray-200);
  margin-bottom: 15px;
}
.sidebar-themesettings .input-themeselect input[type=radio] {
  display: none;
}
.sidebar-themesettings .input-themeselect input[type=radio]:checked ~ label .checkboxs-theme:after {
  background-color: var(--purple);
  border-color: var(--purple);
  content: "";
}
.sidebar-themesettings .input-themeselect input[type=radio]:checked ~ label .checkboxs-theme::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  color: var(--white);
  font-weight: 700;
  font-size: 10px;
  right: 4px;
  position: absolute;
  top: -14px;
  z-index: 9;
}
.sidebar-themesettings .input-themeselect img {
  height: 80px;
}
.sidebar-themesettings .input-themeselect .checkboxs-theme {
  position: relative;
  width: 100%;
  display: block;
}
.sidebar-themesettings .input-themeselect .checkboxs-theme:after {
  position: absolute;
  content: "";
  border: 1px solid var(--border-color);
  width: 16px;
  height: 16px;
  border-radius: 5px;
  right: 0;
  top: -17px;
}

.sidebar-themeoverlay {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(var(--dark-rgb), 0.75);
  top: 0;
  left: -100%;
  z-index: 10000;
}
.sidebar-themeoverlay.open {
  left: 0;
}

.sidebar-themesettings.offcanvas.offcanvas-end {
  width: 400px !important;
}

.theme-colorsset {
  line-height: 0;
}
.theme-colorsset label {
  width: 45px;
  height: 45px;
  border-radius: 6px;
  position: relative;
  border: 1px solid var(--gray-200);
}
.theme-colorsset label::before {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  transform: translate(-50%, -50%);
  border-radius: 6px;
}
.theme-colorsset label.primary-clr::before {
  background: var(--primary);
}
.theme-colorsset label.secondary-clr::before {
  background: var(--secondary);
}
.theme-colorsset label.purple-clr::before {
  background: var(--purple);
}
.theme-colorsset label.indigo-clr::before {
  background: var(--indigo);
}
.theme-colorsset label.pink-clr::before {
  background: var(--pink);
}
.theme-colorsset label.info-clr::before {
  background: var(--info);
}
.theme-colorsset label.teal-clr::before {
  background: var(--teal);
}
.theme-colorsset label.orange-clr::before {
  background: var(--orange);
}
.theme-colorsset label.warning-clr::before {
  background: var(--warning);
}
.theme-colorsset label.success-clr::before {
  background: var(--success);
}
.theme-colorsset label.danger-clr::before {
  background: var(--danger);
}
.theme-colorsset input[type=radio] {
  display: none;
}
.theme-colorsset input[type=radio]:checked ~ label {
  border-color: var(--primary);
}
.theme-colorsset input[type=radio]:checked ~ label:after {
  content: "\ea5e";
  font-family: "tabler-icons" !important;
  color: var(--primary);
  font-weight: 700;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 50%;
}

.theme-layout {
  text-align: center;
}
.theme-layout.active img {
  border: 1px solid var(--primary);
  border-radius: 5px;
}
.theme-layout input[type=radio] {
  display: none;
}
.theme-layout input[type=radio]:checked ~ label .layout-img .theme-check {
  display: block;
}
.theme-layout input[type=radio]:checked ~ label .layout-type {
  position: relative;
}
.theme-layout label .layout-img {
  position: relative;
}
.theme-layout label .layout-img .theme-check {
  width: 18px;
  height: 18px;
  background-color: var(--success);
  color: #fff;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.theme-layout label .layout-img img {
  border-radius: 5px;
}
.theme-layout label .layout-type {
  color: var(--gray-900);
  font-weight: 500;
}
.theme-layout label:after {
  display: none;
}
.theme-layout .layout-img img {
  border: 1px solid var(--gray-200);
  border-radius: 5px;
}

.theme-sidebarcolor input[type=radio] {
  display: none;
}
.theme-sidebarcolor input[type=radio]:checked ~ label {
  border-color: var(--primary) !important;
  position: relative;
}
.theme-sidebarcolor input[type=radio]:checked ~ label:after {
  content: "\f058";
  font-family: "Fontawesome";
  color: var(--primary);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.theme-sidebarcolor input[type=radio]:checked ~ label.bg-dark:after {
  color: #fff;
}
.theme-sidebarcolor label {
  width: 29px;
  height: 46px;
  border: 1px solid var(--gray-200);
}

.theme-colorselect {
  line-height: 0;
}
.theme-colorselect input[type=radio] {
  display: none;
}
.theme-colorselect input[type=radio]:checked ~ label .theme-check {
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-colorselect input[type=radio]:checked ~ label::after {
  display: none;
}
.theme-colorselect input[type=radio]:checked ~ label.primary-topbar:after, .theme-colorselect input[type=radio]:checked ~ label.dark-topbar:after {
  color: #fff;
}
.theme-colorselect label {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  position: relative;
  outline-offset: 3px;
  outline: 1px solid var(--border-color);
}
.theme-colorselect label.white-topbar {
  background: var(--white);
  border: 1px solid var(--light);
}
.theme-colorselect label .theme-check {
  width: 18px;
  height: 18px;
  background-color: var(--success);
  color: var(--white);
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.topbar-background .theme-colorselect input[type=radio]:checked ~ label .theme-check {
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar-background .theme-colorselect input[type=radio]:checked ~ label::after {
  display: none;
}

.invoice-logo-white {
  display: none;
}

#compose-close {
  opacity: 1;
}

[data-layout=full-width] .full-width .sidebar {
  margin-left: 0;
  opacity: 1;
  width: var(--sidenav-width);
  z-index: 9999;
}
[data-layout=full-width] .full-width .sidebar .sidebar-close {
  display: block;
}
[data-layout=full-width] .full-width .slide-nav .sidebar {
  margin-left: 0;
}
[data-layout=full-width] .navbar-header {
  margin-left: 0;
}
@media (min-width: 992px) {
  [data-layout=full-width] .sidebar {
    margin-left: calc(var(--sidenav-width) * -1);
    opacity: 0;
  }
}
[data-layout=full-width] .page-wrapper {
  margin-left: 0;
}

[data-layout=hidden] .hidden-layout .sidebar {
  margin-left: 0;
  opacity: 1;
  width: var(--sidenav-width);
}
[data-layout=hidden] .hidden-layout .navbar-header {
  margin-left: var(--sidenav-width);
}
[data-layout=hidden] .hidden-layout .page-wrapper {
  margin-left: var(--sidenav-width);
}
[data-layout=hidden] .navbar-header {
  margin-left: 0;
}
@media (min-width: 992px) {
  [data-layout=hidden] .sidebar {
    margin-left: calc(var(--sidenav-width) * -1);
    opacity: 0;
  }
}
[data-layout=hidden] .page-wrapper {
  margin-left: 0;
}

[data-sidebar=sidebar3] .sidebar .dark-logo, [data-sidebar=sidebar4] .sidebar .dark-logo, [data-sidebar=sidebar5] .sidebar .dark-logo,
[data-sidebar=sidebar6] .sidebar .dark-logo, [data-sidebar=sidebar7] .sidebar .dark-logo, [data-sidebar=sidebar8] .sidebar .dark-logo, [data-sidebar=gradientsidebar1] .sidebar .dark-logo,
[data-sidebar=gradientsidebar2] .sidebar .dark-logo, [data-sidebar=gradientsidebar3] .sidebar .dark-logo, [data-sidebar=gradientsidebar4] .sidebar .dark-logo,
[data-sidebar=gradientsidebar5] .sidebar .dark-logo, [data-sidebar=gradientsidebar6] .sidebar .dark-logo, [data-sidebar=gradientsidebar7] .sidebar .dark-logo {
  display: block;
}
[data-sidebar=sidebar3] .sidebar .logo, [data-sidebar=sidebar4] .sidebar .logo, [data-sidebar=sidebar5] .sidebar .logo,
[data-sidebar=sidebar6] .sidebar .logo, [data-sidebar=sidebar7] .sidebar .logo, [data-sidebar=sidebar8] .sidebar .logo, [data-sidebar=gradientsidebar1] .sidebar .logo,
[data-sidebar=gradientsidebar2] .sidebar .logo, [data-sidebar=gradientsidebar3] .sidebar .logo, [data-sidebar=gradientsidebar4] .sidebar .logo,
[data-sidebar=gradientsidebar5] .sidebar .logo, [data-sidebar=gradientsidebar6] .sidebar .logo, [data-sidebar=gradientsidebar7] .sidebar .logo {
  display: none;
}
@media (min-width: 992px) {
  [data-sidebar=sidebar3] .mini-sidebar .sidebar .sidebar-logo .dark-logo, [data-sidebar=sidebar4] .mini-sidebar .sidebar .sidebar-logo .dark-logo, [data-sidebar=sidebar5] .mini-sidebar .sidebar .sidebar-logo .dark-logo,
  [data-sidebar=sidebar6] .mini-sidebar .sidebar .sidebar-logo .dark-logo, [data-sidebar=sidebar7] .mini-sidebar .sidebar .sidebar-logo .dark-logo, [data-sidebar=sidebar8] .mini-sidebar .sidebar .sidebar-logo .dark-logo, [data-sidebar=gradientsidebar1] .mini-sidebar .sidebar .sidebar-logo .dark-logo,
  [data-sidebar=gradientsidebar2] .mini-sidebar .sidebar .sidebar-logo .dark-logo, [data-sidebar=gradientsidebar3] .mini-sidebar .sidebar .sidebar-logo .dark-logo, [data-sidebar=gradientsidebar4] .mini-sidebar .sidebar .sidebar-logo .dark-logo,
  [data-sidebar=gradientsidebar5] .mini-sidebar .sidebar .sidebar-logo .dark-logo, [data-sidebar=gradientsidebar6] .mini-sidebar .sidebar .sidebar-logo .dark-logo, [data-sidebar=gradientsidebar7] .mini-sidebar .sidebar .sidebar-logo .dark-logo {
    display: none !important;
  }
  [data-sidebar=sidebar3] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo, [data-sidebar=sidebar4] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo, [data-sidebar=sidebar5] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo,
  [data-sidebar=sidebar6] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo, [data-sidebar=sidebar7] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo, [data-sidebar=sidebar8] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo, [data-sidebar=gradientsidebar1] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo,
  [data-sidebar=gradientsidebar2] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo, [data-sidebar=gradientsidebar3] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo, [data-sidebar=gradientsidebar4] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo,
  [data-sidebar=gradientsidebar5] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo, [data-sidebar=gradientsidebar6] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo, [data-sidebar=gradientsidebar7] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo {
    display: none !important;
  }
  [data-sidebar=sidebar3] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo, [data-sidebar=sidebar4] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo, [data-sidebar=sidebar5] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo,
  [data-sidebar=sidebar6] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo, [data-sidebar=sidebar7] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo, [data-sidebar=sidebar8] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo, [data-sidebar=gradientsidebar1] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo,
  [data-sidebar=gradientsidebar2] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo, [data-sidebar=gradientsidebar3] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo, [data-sidebar=gradientsidebar4] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo,
  [data-sidebar=gradientsidebar5] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo, [data-sidebar=gradientsidebar6] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo, [data-sidebar=gradientsidebar7] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo {
    display: block !important;
  }
}

[data-bs-theme=dark] .header .header-left .logo {
  display: none;
}
[data-bs-theme=dark] .header .header-left .dark-logo {
  display: block;
}
[data-bs-theme=dark] .sidebar .sidebar-logo .logo {
  display: none;
}
[data-bs-theme=dark] .sidebar .sidebar-logo .dark-logo {
  display: block;
}
[data-bs-theme=dark] .mini-sidebar .sidebar .sidebar-logo .dark-logo {
  display: none;
}
[data-bs-theme=dark] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo {
  display: block;
}
[data-bs-theme=dark] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo-small, [data-bs-theme=dark] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo {
  display: none;
}
[data-bs-theme=dark] .offcanvas-backdrop, [data-bs-theme=dark] .modal-backdrop.show, [data-bs-theme=dark] .sidebar-overlay {
  background-color: rgba(0, 0, 0, 0.75);
}
[data-bs-theme=dark] .auth-brand .logo-dark {
  display: none;
}
[data-bs-theme=dark] .auth-brand .logo-light {
  display: block;
}
[data-bs-theme=dark] .badge.bg-dark {
  color: var(--gray-900);
}
[data-bs-theme=dark] .table .table-dark th {
  background-color: var(--white);
}
[data-bs-theme=dark] .signature {
  filter: invert(1) brightness(2);
}
[data-bs-theme=dark] .invoice-logo-white {
  display: block;
}
[data-bs-theme=dark] .invoice-logo {
  display: none;
}
[data-bs-theme=dark] #compose-close {
  filter: invert(0) grayscale(100%) brightness(0%);
}
[data-bs-theme=dark] .fc-event.bg-dark .fc-event-time, [data-bs-theme=dark] .fc-event.bg-dark .fc-event-title {
  color: #000 !important;
}
[data-bs-theme=dark] .alert.alert-dark {
  background: #0A0C0C !important;
  border-color: #0A0C0C !important;
  color: var(--gray-900);
}
[data-bs-theme=dark] .btn-outline-light:hover, [data-bs-theme=dark] .btn-outline-light.disabled, [data-bs-theme=dark] .btn-outline-light:disabled {
  background-color: #084298;
}
[data-bs-theme=dark] .dropdown-menu .dropdown-item {
  color: #d9dcff;
}
[data-bs-theme=dark] .bg-soft-dark {
  background-color: #272738 !important;
}
[data-bs-theme=dark] .topbar-warning-link {
  background-color: #fef8e6 !important;
}
[data-bs-theme=dark] .offcanvas-header .btn-close {
  background-color: transparent;
}
[data-bs-theme=dark] .offcanvas-header .btn-close::before {
  background-color: #000;
}
[data-bs-theme=dark] .filter-header .btn-close {
  background-color: transparent;
}
[data-bs-theme=dark] .filter-header .btn-close::before {
  background-color: #000;
}
[data-bs-theme=dark] .modal-header .btn-close {
  background-color: transparent;
}
[data-bs-theme=dark] .modal-header .btn-close::before {
  background-color: #000;
}
[data-bs-theme=dark] .btn-close.btn-close-white {
  background-color: #fff;
}
[data-bs-theme=dark] .btn-close.btn-close-white::before {
  background-color: #000;
}
[data-bs-theme=dark] .bg-dark.text-white, [data-bs-theme=dark] .bg-danger.text-white {
  color: #fff !important;
}

[data-sidebar=sidebar2][data-bs-theme=dark] .sidebar .dark-logo {
  display: none;
}
[data-sidebar=sidebar2][data-bs-theme=dark] .sidebar .logo {
  display: block;
}
@media (min-width: 992px) {
  [data-sidebar=sidebar2][data-bs-theme=dark] .mini-sidebar .sidebar .sidebar-logo .dark-logo, [data-sidebar=sidebar2][data-bs-theme=dark] .mini-sidebar .sidebar .sidebar-logo .logo {
    display: none !important;
  }
  [data-sidebar=sidebar2][data-bs-theme=dark] .mini-sidebar .sidebar .dark-logo, [data-sidebar=sidebar2][data-bs-theme=dark] .mini-sidebar .sidebar .logo {
    display: none !important;
  }
  [data-sidebar=sidebar2][data-bs-theme=dark] .mini-sidebar.expand-menu .sidebar .sidebar-logo .logo {
    display: block !important;
  }
  [data-sidebar=sidebar2][data-bs-theme=dark] .mini-sidebar.expand-menu .sidebar .sidebar-logo .dark-logo {
    display: none !important;
  }
}

.dark-logo {
  display: none;
}

[data-bs-theme=dark] .btn:active, [data-bs-theme=dark] .btn:focus, [data-bs-theme=dark] .btn.hover {
  color: #fff;
}
[data-bs-theme=dark] .btn.active {
  color: #fff !important;
  border-color: var(--primary) !important;
}
[data-bs-theme=dark] .dark-logo {
  display: block;
}
[data-bs-theme=dark] .invoice-light-logo {
  display: none;
}
[data-bs-theme=dark] .welcome-wrap .bg-dark {
  background: var(--black) !important;
}
[data-bs-theme=dark] .welcome-wrap h2, [data-bs-theme=dark] .welcome-wrap p {
  color: var(--white) !important;
}
[data-bs-theme=dark] .bg-soft-indigo {
  color: var(--indigo);
}
[data-bs-theme=dark] .bg-soft-indigo:hover {
  color: var(--white);
}
[data-bs-theme=dark] .border {
  border-color: var(--border-color) !important;
}
[data-bs-theme=dark] .dropdown-menu .form-check-reverse .form-check-label {
  color: var(--gray-900);
}
[data-bs-theme=dark] .dropdown-menu .form-check-reverse:hover .form-check-label {
  color: var(--body-color);
}
[data-bs-theme=dark] .avatar.bg-primary.text-white {
  color: var(--white) !important;
}
[data-bs-theme=dark] #preview .offcanvas-body .bg-light {
  background: var(--light) !important;
}
[data-bs-theme=dark] .bg-light-gradient {
  background-image: linear-gradient(177deg, #0f172a 0%, #111827 60%, #1e293b 100%);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
[dir=rtl] .navbar-header .header-search .header-search-icon {
  right: auto;
  left: 5px;
}
[dir=rtl] .navbar-header .profile-dropdown label i {
  margin-right: 0;
  margin-left: 8px;
}
[dir=rtl] .dropdown-item, [dir=rtl] .dropdown-menu {
  text-align: right;
}
[dir=rtl] .input-group-flat .form-control:not(:last-child) {
  border-left: 0;
  border-right: 1px solid;
}
[dir=rtl] .input-group-flat .form-control:not(:first-child) {
  border-right: 0;
  border-left: 1px solid;
}
[dir=rtl] .input-group-flat .input-group-text:first-child {
  padding-left: 0;
  padding-right: 0.5rem;
}
[dir=rtl] .input-group-flat .input-group-text:last-child {
  padding-right: 0;
  padding-left: 0.5rem;
}
[dir=rtl] .simplebar-track {
  left: 0;
  right: auto;
}
[dir=rtl] .sidebar-close {
  left: 10px;
  right: auto;
}
[dir=rtl] .dataTables_length {
  float: right;
}
[dir=rtl] .breadcrumb-item + .breadcrumb-item::before {
  float: right;
  padding-right: 0;
  padding-left: 0.25rem;
}
[dir=rtl] .breadcrumb-item + .breadcrumb-item {
  padding-left: 0;
  padding-right: 0.25rem;
}
[dir=rtl] .slide-nav .sidebar {
  margin-right: 0;
}
[dir=rtl] .header #toggle_btn {
  left: auto;
  right: -12px;
}
@media (min-width: 992px) {
  [dir=rtl] .header .dropdown-menu {
    left: 0 !important;
    right: unset !important;
  }
}
[dir=rtl] .sidebar {
  right: 0;
  border-right: 0;
  border-left: 1px solid var(--border-color);
}
@media (max-width: 991.98px) {
  [dir=rtl] .sidebar {
    right: 0;
  }
}
[dir=rtl] .sidebar .sidebar-logo #toggle_btn {
  right: auto;
  left: 16px;
}
[dir=rtl] .sidebar .sidebar-menu ul {
  padding-right: 0;
}
[dir=rtl] .sidebar .sidebar-menu > ul > li ul > li.active a {
  border-left: 0;
  border-right: 2px solid var(--primary);
}
[dir=rtl] .sidebar .sidebar-menu > ul > li .submenu ul::before {
  right: 14px;
  left: unset;
}
[dir=rtl] .sidebar .sidebar-menu > ul > li .submenu > ul li a {
  padding: 8px 36px 8px 16px;
}
[dir=rtl] .sidebar .sidebar-menu > ul > li .submenu > ul li a::before {
  right: 13px;
  left: unset;
}
[dir=rtl] .sidebar .sidebar-menu > ul > li .submenu > ul li a::after {
  left: 0;
  right: 10px;
}
[dir=rtl] .sidebar .sidebar-menu > ul li .submenu.submenu-two ul li {
  margin: 0 20px 0 0;
}
[dir=rtl] .sidebar .sidebar-menu > ul ul li a span {
  margin-right: 8px;
  margin-left: 0;
}
[dir=rtl] .sidebar .sidebar-menu .menu-arrow {
  left: 10px;
  right: unset;
}
[dir=rtl] .sidebar .sidebar-menu > ul > li .submenu-hdr::after {
  margin-right: 8px;
  margin-left: 0;
}
@media (max-width: 991.98px) {
  [dir=rtl] .sidebar {
    margin-right: -575px;
  }
}
[dir=rtl] .page-wrapper {
  margin-right: var(--sidenav-width);
  margin-left: 0;
}
@media (max-width: 991.98px) {
  [dir=rtl] .page-wrapper {
    margin-right: 0;
  }
}
@media (min-width: 992px) {
  [dir=rtl] .navbar-header {
    margin-right: var(--sidenav-width);
    margin-left: 0;
  }
}
[dir=rtl] .navbar-header .input-group input {
  border-right: 1px solid var(--border-color) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
  border-left: 0 !important;
}
[dir=rtl] .navbar-header .input-group .input-group-text {
  border-right: 0;
  border-radius: 5px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-left: 1px solid var(--gray-200);
}
@media (max-width: 991.98px) {
  [dir=rtl] .navbar-header .mobile_btn {
    right: 0;
    left: unset;
  }
}
[dir=rtl] .navbar-header .mobile-user-menu {
  left: 0;
  right: auto;
  text-align: left;
}
[dir=rtl] .mini-sidebar.expand-menu .header {
  right: 252px;
  left: 0;
}
[dir=rtl] .dropdown-toggle::after {
  margin-left: 0;
  margin-right: 0.255em;
}
@media (min-width: 992px) {
  [dir=rtl] .mini-sidebar .page-wrapper {
    margin-right: var(--sidenav-width-sm);
    margin-left: 0;
  }
  [dir=rtl] .mini-sidebar .navbar-header {
    margin-right: var(--sidenav-width-sm);
    margin-left: 0;
  }
  [dir=rtl] .mini-sidebar.expand-menu .navbar-header {
    margin-right: var(--sidenav-width);
    margin-left: 0;
  }
  [dir=rtl] .mini-sidebar.expand-menu .page-wrapper {
    margin-right: var(--sidenav-width);
    margin-left: 0;
  }
}
[dir=rtl] .input-group-text {
  border-right: none;
}
[dir=rtl] .modal-header .btn-close.btn-close-modal {
  margin-left: 0;
}

.accordion-item {
  background-color: var(--white);
  border: 1px solid var(--border-color);
}

.accordion-button {
  font-size: 14px;
  font-weight: 500;
  color: var(--body-color);
  padding: 16px 20px;
  box-shadow: none !important;
  background-color: transparent;
}
.accordion-button::after {
  height: 0.75rem;
  width: 0.75rem;
  background-size: 0.75rem;
}
.accordion-button:not(.collapsed) {
  background-color: var(--light);
  color: var(--body-color);
}

.accordion-body {
  padding: 20px 20px;
  color: var(--body-color);
}

.accordion-bordered .accordion-item {
  border-top: 1px solid var(--border-color);
  border-radius: 6px;
}
.accordion-bordered .accordion-item:not(:first-of-type) {
  margin-top: 0.5rem;
}
.accordion-bordered .accordion-item .accordion-header {
  background-color: transparent !important;
}
.accordion-bordered .accordion-item .accordion-button {
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500 !important;
  color: var(--gray-900);
  background-color: transparent;
}
.accordion-bordered .accordion-item .accordion-button.accordion-custom-button .avatar {
  color: var(--gray-900);
  width: 30px;
  height: 30px;
  font-size: 14px;
  transition: 0.4s;
}
.accordion-bordered .accordion-item .accordion-button.accordion-custom-button:not(.collapsed) .avatar {
  background-color: var(--primary);
  color: #fff;
}
.accordion-bordered .accordion-item .accordion-button:not(.collapsed) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background-color: transparent;
}
.accordion-bordered .accordion-item .accordion-button:not(.collapsed)::after {
  content: "";
}

.accordion-arrow-none .accordion-button::after {
  background-image: none;
}

.accordion-custom-icon .accordion-icon {
  position: absolute;
  right: 1.25rem;
}
.accordion-custom-icon .accordion-icon-off {
  display: none;
}
.accordion-custom-icon [aria-expanded=true] .accordion-icon-off {
  display: block;
}
.accordion-custom-icon [aria-expanded=true] .accordion-icon-on {
  display: none;
}

.accordions-items-seperate .accordion-item:not(:first-of-type) {
  margin-block-start: 1rem;
}
.accordions-items-seperate .accordion-item {
  border-block-start: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.accordion.accordion-primary .accordion-button {
  background-color: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}
.accordion.accordion-primary .accordion-button.collapsed {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-primary .accordion-button.collapsed:after {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-secondary .accordion-button {
  background-color: rgba(var(--secondary-rgb), 0.1);
  color: var(--secondary);
}
.accordion.accordion-secondary .accordion-button.collapsed {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-secondary .accordion-button.collapsed:after {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-success .accordion-button {
  background-color: rgba(var(--success-rgb), 0.1);
  color: var(--success);
}
.accordion.accordion-success .accordion-button.collapsed {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-success .accordion-button.collapsed:after {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-danger .accordion-button {
  background-color: rgba(var(--danger-rgb), 0.1);
  color: var(--danger);
}
.accordion.accordion-danger .accordion-button.collapsed {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-danger .accordion-button.collapsed:after {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-warning .accordion-button {
  background-color: rgba(var(--warning-rgb), 0.1);
  color: var(--warning);
}
.accordion.accordion-warning .accordion-button.collapsed {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-warning .accordion-button.collapsed:after {
  background-color: var(--white);
}
.accordion.accordion-info .accordion-button {
  background-color: rgba(var(--info-rgb), 0.1);
  color: var(--info);
}
.accordion.accordion-info .accordion-button.collapsed {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-info .accordion-button.collapsed:after {
  background-color: var(--white);
  color: var(--body-color);
}

.accordion.accordion-solid-primary .accordion-button {
  background-color: var(--primary);
  color: var(--white);
}
.accordion.accordion-solid-primary .accordion-button:after {
  background-color: transparent;
  color: var(--white);
  content: "\ea5f";
  font-family: "tabler-icons";
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
}
.accordion.accordion-solid-primary .accordion-button.collapsed {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-solid-primary .accordion-button.collapsed:after {
  color: var(--body-color);
}
.accordion.accordion-solid-secondary .accordion-button {
  background-color: var(--secondary);
  color: var(--white);
}
.accordion.accordion-solid-secondary .accordion-button:after {
  background-color: transparent;
  color: var(--white);
  content: "\ea5f";
  font-family: "tabler-icons";
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
}
.accordion.accordion-solid-secondary .accordion-button.collapsed {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-solid-secondary .accordion-button.collapsed:after {
  color: var(--body-color);
}
.accordion.accordion-solid-success .accordion-button {
  background-color: var(--success);
  color: var(--white);
}
.accordion.accordion-solid-success .accordion-button:after {
  background-color: transparent;
  color: var(--white);
  content: "\ea5f";
  font-family: "tabler-icons";
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
}
.accordion.accordion-solid-success .accordion-button.collapsed {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-solid-success .accordion-button.collapsed:after {
  color: var(--body-color);
}
.accordion.accordion-solid-danger .accordion-button {
  background-color: var(--danger);
  color: var(--white);
}
.accordion.accordion-solid-danger .accordion-button:after {
  background-color: transparent;
  color: var(--white);
  content: "\ea5f";
  font-family: "tabler-icons";
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
}
.accordion.accordion-solid-danger .accordion-button.collapsed {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-solid-danger .accordion-button.collapsed:after {
  color: var(--body-color);
}
.accordion.accordion-solid-warning .accordion-button {
  background-color: var(--warning);
  color: var(--white);
}
.accordion.accordion-solid-warning .accordion-button:after {
  background-color: transparent;
  color: var(--white);
  content: "\ea5f";
  font-family: "tabler-icons";
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
}
.accordion.accordion-solid-warning .accordion-button.collapsed {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-solid-warning .accordion-button.collapsed:after {
  color: var(--body-color);
}
.accordion.accordion-solid-info .accordion-button {
  background-color: var(--info);
  color: var(--white);
}
.accordion.accordion-solid-info .accordion-button:after {
  background-color: transparent;
  color: var(--white);
  content: "\ea5f";
  font-family: "tabler-icons";
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
}
.accordion.accordion-solid-info .accordion-button.collapsed {
  background-color: var(--white);
  color: var(--body-color);
}
.accordion.accordion-solid-info .accordion-button.collapsed:after {
  color: var(--body-color);
}

.accordion.accordion-border-primary .accordion-item {
  border: 1px solid var(--primary);
}
.accordion.accordion-border-primary .accordion-button {
  background-color: var(--white);
  color: var(--primary);
  border-block-end: 0px;
}
.accordion.accordion-border-primary .accordion-button:after {
  background-color: var(--white);
  color: var(--primary);
  content: "\ea5f";
  font-family: "tabler-icons";
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
}
.accordion.accordion-border-primary .accordion-button:not(.collapsed) {
  border-block-end: 1px solid var(--primary);
}
.accordion.accordion-border-secondary .accordion-item {
  border: 1px solid var(--secondary);
}
.accordion.accordion-border-secondary .accordion-button {
  background-color: var(--white);
  color: var(--secondary);
  border-block-end: 0px;
}
.accordion.accordion-border-secondary .accordion-button:after {
  background-color: var(--white);
  color: var(--secondary);
  content: "\ea5f";
  font-family: "tabler-icons";
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
}
.accordion.accordion-border-secondary .accordion-button:not(.collapsed) {
  border-block-end: 1px solid var(--secondary);
}
.accordion.accordion-border-success .accordion-item {
  border: 1px solid var(--success);
}
.accordion.accordion-border-success .accordion-button {
  background-color: var(--white);
  color: var(--success);
  border-block-end: 0px;
}
.accordion.accordion-border-success .accordion-button:after {
  background-color: var(--white);
  color: var(--success);
  content: "\ea5f";
  font-family: "tabler-icons";
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
}
.accordion.accordion-border-success .accordion-button:not(.collapsed) {
  border-block-end: 1px solid var(--success);
}
.accordion.accordion-border-danger .accordion-item {
  border: 1px solid var(--danger);
}
.accordion.accordion-border-danger .accordion-button {
  background-color: var(--white);
  color: var(--danger);
  border-block-end: 0px;
}
.accordion.accordion-border-danger .accordion-button:after {
  background-color: var(--white);
  color: var(--danger);
  content: "\ea5f";
  font-family: "tabler-icons";
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
}
.accordion.accordion-border-danger .accordion-button:not(.collapsed) {
  border-block-end: 1px solid var(--danger);
}
.accordion.accordion-border-warning .accordion-item {
  border: 1px solid var(--warning);
}
.accordion.accordion-border-warning .accordion-button {
  background-color: var(--white);
  color: var(--warning);
  border-block-end: 0px;
}
.accordion.accordion-border-warning .accordion-button:after {
  background-color: var(--white);
  color: var(--warning);
  content: "\ea5f";
  font-family: "tabler-icons";
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
}
.accordion.accordion-border-warning .accordion-button:not(.collapsed) {
  border-block-end: 1px solid var(--warning);
}
.accordion.accordion-border-info .accordion-item {
  border: 1px solid var(--info);
}
.accordion.accordion-border-info .accordion-button {
  background-color: var(--white);
  color: var(--info);
  border-block-end: 0px;
}
.accordion.accordion-border-info .accordion-button:after {
  background-color: var(--white);
  color: var(--info);
  content: "\ea5f";
  font-family: "tabler-icons";
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
}
.accordion.accordion-border-info .accordion-button:not(.collapsed) {
  border-block-end: 1px solid var(--info);
}

.accordion-bordered .accordion-item {
  border: 1px solid var(--border-color) !important;
  border-radius: 5px;
}
.accordion-bordered .accordion-item .accordion-button {
  border: none !important;
  outline: none;
  box-shadow: none;
  border-radius: 5px !important;
  background-color: transparent;
  color: var(--gray-900);
  font-weight: 700;
}
.accordion-bordered .accordion-item .accordion-button::after {
  color: var(--gray-900);
}
.accordion-bordered .accordion-item .accordion-body {
  border-top: 1px solid var(--border-color);
}
.accordion-bordered .accordion-item .accordion-body label.btn {
  padding: 0.537rem 0.77rem;
}

.alert-primary {
  color: var(--primary);
  background-color: var(--primary-transparent);
  border-color: var(--primary-transparent);
}

.alert-primary.bg-text-primary {
  color: #fff;
  border-color: var(--primary);
}

.alert.alert-primary .alert-link {
  color: var(--primary);
}

.alert-secondary {
  color: var(--secondary);
  background-color: var(--secondary-transparent);
  border-color: var(--secondary-transparent);
}

.alert-secondary.bg-text-secondary {
  color: #fff;
  border-color: var(--secondary);
}

.alert.alert-secondary .alert-link {
  color: var(--secondary);
}

.alert-success {
  color: var(--success);
  background-color: var(--success-transparent);
  border-color: var(--success-transparent);
}

.alert-success.bg-text-success {
  color: #fff;
  border-color: var(--success);
}

.alert.alert-success .alert-link {
  color: var(--success);
}

.alert-info {
  color: var(--info);
  background-color: var(--info-transparent);
  border-color: var(--info-transparent);
}

.alert-info.bg-text-info {
  color: #fff;
  border-color: var(--info);
}

.alert.alert-info .alert-link {
  color: var(--info);
}

.alert-warning {
  color: var(--warning);
  background-color: var(--warning-transparent);
  border-color: var(--warning-transparent);
}

.alert-warning.bg-text-warning {
  color: #fff;
  border-color: var(--warning);
}

.alert.alert-warning .alert-link {
  color: var(--warning);
}

.alert-danger {
  color: var(--danger);
  background-color: var(--danger-transparent);
  border-color: var(--danger-transparent);
}

.alert-danger.bg-text-danger {
  color: #fff;
  border-color: var(--danger);
}

.alert.alert-danger .alert-link {
  color: var(--danger);
}

.alert-dark {
  color: var(--dark);
  background-color: var(--dark-transparent);
  border-color: var(--dark-transparent);
}

.alert-dark.bg-text-dark {
  color: #fff;
  border-color: var(--dark);
}

.alert.alert-dark .alert-link {
  color: var(--dark);
}

.alert-light {
  color: var(--light);
  background-color: var(--light-transparent);
  border-color: var(--light-transparent);
}

.alert-light.bg-text-light {
  color: #fff;
  border-color: var(--light);
}

.alert.alert-light .alert-link {
  color: var(--light);
}

.alert-orange {
  color: var(--orange);
  background-color: var(--orange-transparent);
  border-color: var(--orange-transparent);
}

.alert-orange.bg-text-orange {
  color: #fff;
  border-color: var(--orange);
}

.alert.alert-orange .alert-link {
  color: var(--orange);
}

.alert-purple {
  color: var(--purple);
  background-color: var(--purple-transparent);
  border-color: var(--purple-transparent);
}

.alert-purple.bg-text-purple {
  color: #fff;
  border-color: var(--purple);
}

.alert.alert-purple .alert-link {
  color: var(--purple);
}

.alert-pink {
  color: var(--pink);
  background-color: var(--pink-transparent);
  border-color: var(--pink-transparent);
}

.alert-pink.bg-text-pink {
  color: #fff;
  border-color: var(--pink);
}

.alert.alert-pink .alert-link {
  color: var(--pink);
}

.alert-indigo {
  color: var(--indigo);
  background-color: var(--indigo-transparent);
  border-color: var(--indigo-transparent);
}

.alert-indigo.bg-text-indigo {
  color: #fff;
  border-color: var(--indigo);
}

.alert.alert-indigo .alert-link {
  color: var(--indigo);
}

.alert-teal {
  color: var(--teal);
  background-color: var(--teal-transparent);
  border-color: var(--teal-transparent);
}

.alert-teal.bg-text-teal {
  color: #fff;
  border-color: var(--teal);
}

.alert.alert-teal .alert-link {
  color: var(--teal);
}

.alert-light, .alert.alert-light .alert-link {
  color: var(--gray-500) !important;
}

.alert {
  padding: 12px 16px;
}
.alert.alert-primary {
  color: var(--primary);
  background-color: var(--primary-transparent);
  border-color: var(--primary-transparent);
}
.alert.alert-primary.text-bg-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary);
}
.alert.alert-primary .alert-link {
  color: var(--primary);
}
.alert.alert-secondary {
  color: var(--secondary);
  background-color: var(--secondary-transparent);
  border-color: var(--secondary-transparent);
}
.alert.alert-secondary.text-bg-secondary {
  background-color: var(--secondary) !important;
  border-color: var(--secondary);
}
.alert.alert-secondary .alert-link {
  color: var(--secondary);
}
.alert.alert-success {
  color: var(--success);
  background-color: var(--success-transparent);
  border-color: var(--success-transparent);
}
.alert.alert-success.text-bg-success {
  background-color: var(--success) !important;
  border-color: var(--success);
}
.alert.alert-success .alert-link {
  color: var(--success);
}
.alert.alert-danger {
  color: var(--danger);
  background-color: var(--danger-transparent);
  border-color: var(--danger-transparent);
}
.alert.alert-danger.text-bg-danger {
  background-color: var(--danger) !important;
  border-color: var(--danger);
}
.alert.alert-danger .alert-link {
  color: var(--danger);
}
.alert.alert-warning {
  /* Sếp's request: alert-warning dùng màu text body thay vì màu warning cam, áp dụng toàn hệ thống */
  color: var(--body-color);
  background-color: var(--warning-transparent);
  border-color: var(--warning-transparent);
}
.alert.alert-warning.text-bg-warning {
  background-color: var(--warning) !important;
  border-color: var(--warning);
  color: var(--white) !important;
}
.alert.alert-warning .alert-link {
  color: var(--warning);
}
.alert.alert-info {
  color: var(--info);
  background-color: var(--info-transparent);
  border-color: var(--info-transparent);
}
.alert.alert-info.text-bg-info {
  background-color: var(--info) !important;
  border-color: var(--info);
  color: var(--white) !important;
}
.alert.alert-info .alert-link {
  color: var(--info);
}
.alert.alert-light {
  color: var(--gray-500);
  background-color: var(--light-transparent);
  border-color: var(--light-transparent);
}
.alert.alert-dark {
  color: var(--dark);
  background-color: var(--gray-200);
  border-color: var(--gray-200);
}
.alert.alert-dismissible .btn-close {
  padding: 1rem 1rem;
}

.avatar-xxs {
  height: 1.3rem;
  width: 1.3rem;
}

.avatar-xs {
  height: 1.5rem;
  width: 1.5rem;
}

.avatar-sm {
  height: 2rem;
  width: 2rem;
}

.avatar-md {
  height: 2.5rem;
  width: 2.5rem;
}

.avatar-lg {
  height: 3rem;
  width: 3rem;
}

.avatar-xl {
  height: 3.5rem;
  width: 3.5rem;
}

.avatar-title {
  align-items: center;
  color: var(--white);
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.avatar-group {
  padding-left: 0.75rem;
  line-height: 1;
}
.avatar-group .avatar {
  margin-left: -0.75rem;
  transition: all 0.2s;
  line-height: 1;
}
.avatar-group .avatar:hover {
  position: relative;
  transform: translateY(-3px);
  z-index: 1;
}
.avatar-group.avatar-group-sm .avatar {
  margin-left: -0.8rem;
}

.user-img {
  height: 1em;
  width: 1em;
}

.avatar {
  position: relative;
  height: 2.5rem;
  width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--white);
  font-weight: 500;
}
.avatar:hover {
  color: var(--white);
}
.avatar a.badge:hover {
  color: var(--white);
}
.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.avatar.avatar-rounded {
  border-radius: 50%;
}
.avatar.avatar-rounded img {
  border-radius: 50%;
}
.avatar.avatar-radius-0 {
  border-radius: 0;
}
.avatar.avatar-radius-0 img {
  border-radius: 0;
}
.avatar .avatar-notification {
  position: absolute;
  width: 22px;
  height: 22px;
  font-size: 10px;
  border: 2px solid var(--white) !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  inset-block-start: -4%;
  inset-inline-end: -0.375rem;
}
.avatar.online:before, .avatar.offline:before, .avatar.away:before {
  position: absolute;
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  inset-inline-end: 0;
  inset-block-end: 0;
  border: 2px solid var(--white) !important;
  z-index: 1;
}
.avatar.online:before {
  background-color: var(--success);
}
.avatar.offline:before {
  background-color: var(--danger);
}
.avatar.away:before {
  background-color: var(--warning);
}
.avatar.avatar-xss {
  width: 1.3rem;
  height: 1.3rem;
  line-height: 1.3rem;
  font-size: 0.65rem;
}
.avatar.avatar-xss .avatar-notification {
  padding: 0.25rem;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.5rem;
  inset-block-start: -25%;
  inset-inline-end: -0.5rem;
}
.avatar.avatar-xss.online:before, .avatar.avatar-xss.offline:before {
  width: 0.5rem;
  height: 0.5rem;
}
.avatar.avatar-xs {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 0.65rem;
}
.avatar.avatar-xs .avatar-notification {
  padding: 4px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 8px;
  inset-block-start: -25%;
  inset-inline-end: -0.8px;
}
.avatar.avatar-xs.online:before, .avatar.avatar-xs.offline:before {
  width: 0.5rem;
  height: 0.5rem;
}
.avatar.avatar-sm {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 0.65rem;
}
.avatar.avatar-sm .avatar-notification {
  padding: 0.3rem;
  width: 1.1rem;
  height: 1.1rem;
  line-height: 1.1rem;
  font-size: 0.5rem;
  inset-block-start: -28%;
  inset-inline-end: -0.45rem;
}
.avatar.avatar-sm.online:before, .avatar.avatar-sm.offline:before {
  width: 0.5rem;
  height: 0.5rem;
}
.avatar.avatar-md {
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  font-size: 0.8rem;
}
.avatar.avatar-md .avatar-notification {
  padding: 0.4rem;
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.65rem;
  inset-block-start: -6%;
  inset-inline-end: -13%;
}
.avatar.avatar-md.online:before, .avatar.avatar-md.offline:before {
  width: 0.5rem;
  height: 0.5rem;
}
.avatar.avatar-md svg {
  width: 1.5rem;
  height: 1.5rem;
}
.avatar.avatar-lg {
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  font-size: 1rem;
}
.avatar.avatar-lg .avatar-notification {
  inset-block-start: -15%;
  inset-inline-end: -0.25%;
}
.avatar.avatar-lg.online:before, .avatar.avatar-lg.offline:before {
  width: 0.8rem;
  height: 0.8rem;
}
.avatar.avatar-lg svg {
  width: 1.8rem;
  height: 1.8rem;
}
.avatar.avatar-xl {
  width: 3.5rem;
  height: 3.5rem;
  line-height: 3.5rem;
  font-size: 1.25rem;
}
.avatar.avatar-xl .avatar-notification {
  inset-block-start: -8%;
  inset-inline-end: -0.2%;
}
.avatar.avatar-xl.online:before, .avatar.avatar-xl.offline:before {
  width: 0.95rem;
  height: 0.95rem;
}
.avatar.avatar-xxl {
  width: 5rem;
  height: 5rem;
  line-height: 5rem;
  font-size: 1.5rem;
}
.avatar.avatar-xxl .avatar-notification {
  inset-block-start: -4%;
  inset-inline-end: 0rem;
}
.avatar.avatar-xxl.online:before, .avatar.avatar-xxl.offline:before {
  width: 1.05rem;
  height: 1.05rem;
  inset-block-end: 0.25rem;
}
.avatar.avatar-xxxl {
  width: 6rem;
  height: 6rem;
  line-height: 6rem;
  font-size: 1.75rem;
}
.avatar.avatar-xxxl .avatar-notification {
  inset-block-start: -4%;
  inset-inline-end: 0rem;
}
.avatar.avatar-xxxl.online:before, .avatar.avatar-xxxl.offline:before {
  width: 1.05rem;
  height: 1.05rem;
  inset-block-end: 0.25rem;
}

.avatar-list-stacked {
  padding: 0;
}
.avatar-list-stacked.avatar-group-overlapped .avatar {
  margin-right: -0.875rem;
}
.avatar-list-stacked.avatar-group-overlapped .avatar:hover {
  z-index: 1;
}
.avatar-list-stacked.avatar-group-lg .avatar {
  width: 3.25rem;
  height: 3.25rem;
}
.avatar-list-stacked.avatar-group-lg .avatar > .initial-wrap {
  font-size: 0.95rem;
}
.avatar-list-stacked.avatar-group-lg.avatar-group-overlapped .avatar {
  margin-right: -1rem;
}
.avatar-list-stacked.avatar-group-sm .avatar {
  width: 1.5rem;
  height: 1.5rem;
}
.avatar-list-stacked.avatar-group-sm .avatar > .initial-wrap {
  font-size: 0.6rem;
}
.avatar-list-stacked.avatar-group-sm.avatar-group-overlapped .avatar {
  margin-right: -0.625rem;
}
.avatar-list-stacked.avatar-group-xs .avatar {
  width: 1rem;
  height: 1rem;
  margin-inline-end: -6px !important;
}
.avatar-list-stacked.avatar-group-xs .avatar > .initial-wrap {
  font-size: 0.6rem;
}
.avatar-list-stacked.avatar-group-xs.avatar-group-overlapped .avatar {
  margin-right: -6px;
}
.avatar-list-stacked .avatar {
  margin-inline-end: -1.2rem !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: middle;
  transition: transform ease 200ms;
}
.avatar-list-stacked .avatar:last-child {
  margin-inline-end: 0 !important;
}
.avatar-list-stacked .avatar:hover {
  z-index: 1;
  transform: translateY(-0.188rem);
}

.avatar-group {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.avatar-group .avatar {
  width: 2.625rem;
  height: 2.625rem;
}
.avatar-group .avatar .avatar-img,
.avatar-group .avatar > .initial-wrap {
  border: 2px solid var(--white);
  font-size: 0.9rem;
}
.avatar-group.avatar-group-overlapped .avatar {
  margin-right: -0.875rem;
}
.avatar-group.avatar-group-overlapped .avatar:hover {
  z-index: 1;
}
.avatar-group.avatar-group-lg .avatar {
  width: 3.25rem;
  height: 3.25rem;
}
.avatar-group.avatar-group-lg .avatar > .initial-wrap {
  font-size: 0.95rem;
}
.avatar-group.avatar-group-lg.avatar-group-overlapped .avatar {
  margin-right: -1rem;
}
.avatar-group.avatar-group-sm .avatar {
  width: 2rem;
  height: 2rem;
}
.avatar-group.avatar-group-sm .avatar > .initial-wrap {
  font-size: 0.6rem;
}
.avatar-group.avatar-group-sm.avatar-group-overlapped .avatar {
  margin-right: -0.625rem;
}

.avatar.avatar-xl.border.online::before {
  width: 10px;
  height: 10px;
  inset-inline-end: 5px;
}

.avatar.avatar-icon {
  width: 44px;
  height: 44px;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.badge-soft-primary {
  color: var(--primary);
  background-color: var(--primary-transparent);
  border-bottom: 1px solid var(--primary);
}
.badge-soft-primary[href] {
  color: var(--primary);
  text-decoration: none;
  background-color: var(--primary-transparent);
}
.badge-soft-primary[href]:is(:hover, :focus) {
  color: var(--primary);
  text-decoration: none;
  background-color: var(--primary-transparent);
}

.badge-soft-secondary {
  color: var(--secondary);
  background-color: var(--secondary-transparent);
  border-bottom: 1px solid var(--secondary);
}
.badge-soft-secondary[href] {
  color: var(--secondary);
  text-decoration: none;
  background-color: var(--secondary-transparent);
}
.badge-soft-secondary[href]:is(:hover, :focus) {
  color: var(--secondary);
  text-decoration: none;
  background-color: var(--secondary-transparent);
}

.badge-soft-success {
  color: var(--success);
  background-color: var(--success-transparent);
  border-bottom: 1px solid var(--success);
}
.badge-soft-success[href] {
  color: var(--success);
  text-decoration: none;
  background-color: var(--success-transparent);
}
.badge-soft-success[href]:is(:hover, :focus) {
  color: var(--success);
  text-decoration: none;
  background-color: var(--success-transparent);
}

.badge-soft-info {
  color: var(--info);
  background-color: var(--info-transparent);
  border-bottom: 1px solid var(--info);
}
.badge-soft-info[href] {
  color: var(--info);
  text-decoration: none;
  background-color: var(--info-transparent);
}
.badge-soft-info[href]:is(:hover, :focus) {
  color: var(--info);
  text-decoration: none;
  background-color: var(--info-transparent);
}

.badge-soft-warning {
  color: var(--warning);
  background-color: var(--warning-transparent);
  border-bottom: 1px solid var(--warning);
}
.badge-soft-warning[href] {
  color: var(--warning);
  text-decoration: none;
  background-color: var(--warning-transparent);
}
.badge-soft-warning[href]:is(:hover, :focus) {
  color: var(--warning);
  text-decoration: none;
  background-color: var(--warning-transparent);
}

.badge-soft-danger {
  color: var(--danger);
  background-color: var(--danger-transparent);
  border-bottom: 1px solid var(--danger);
}
.badge-soft-danger[href] {
  color: var(--danger);
  text-decoration: none;
  background-color: var(--danger-transparent);
}
.badge-soft-danger[href]:is(:hover, :focus) {
  color: var(--danger);
  text-decoration: none;
  background-color: var(--danger-transparent);
}

.badge-soft-dark {
  color: var(--dark);
  background-color: var(--dark-transparent);
  border-bottom: 1px solid var(--dark);
}
.badge-soft-dark[href] {
  color: var(--dark);
  text-decoration: none;
  background-color: var(--dark-transparent);
}
.badge-soft-dark[href]:is(:hover, :focus) {
  color: var(--dark);
  text-decoration: none;
  background-color: var(--dark-transparent);
}

.badge-soft-light {
  color: var(--light);
  background-color: var(--light-transparent);
  border-bottom: 1px solid var(--light);
}
.badge-soft-light[href] {
  color: var(--light);
  text-decoration: none;
  background-color: var(--light-transparent);
}
.badge-soft-light[href]:is(:hover, :focus) {
  color: var(--light);
  text-decoration: none;
  background-color: var(--light-transparent);
}

.badge-soft-orange {
  color: var(--orange);
  background-color: var(--orange-transparent);
  border-bottom: 1px solid var(--orange);
}
.badge-soft-orange[href] {
  color: var(--orange);
  text-decoration: none;
  background-color: var(--orange-transparent);
}
.badge-soft-orange[href]:is(:hover, :focus) {
  color: var(--orange);
  text-decoration: none;
  background-color: var(--orange-transparent);
}

.badge-soft-purple {
  color: var(--purple);
  background-color: var(--purple-transparent);
  border-bottom: 1px solid var(--purple);
}
.badge-soft-purple[href] {
  color: var(--purple);
  text-decoration: none;
  background-color: var(--purple-transparent);
}
.badge-soft-purple[href]:is(:hover, :focus) {
  color: var(--purple);
  text-decoration: none;
  background-color: var(--purple-transparent);
}

.badge-soft-pink {
  color: var(--pink);
  background-color: var(--pink-transparent);
  border-bottom: 1px solid var(--pink);
}
.badge-soft-pink[href] {
  color: var(--pink);
  text-decoration: none;
  background-color: var(--pink-transparent);
}
.badge-soft-pink[href]:is(:hover, :focus) {
  color: var(--pink);
  text-decoration: none;
  background-color: var(--pink-transparent);
}

.badge-soft-indigo {
  color: var(--indigo);
  background-color: var(--indigo-transparent);
  border-bottom: 1px solid var(--indigo);
}
.badge-soft-indigo[href] {
  color: var(--indigo);
  text-decoration: none;
  background-color: var(--indigo-transparent);
}
.badge-soft-indigo[href]:is(:hover, :focus) {
  color: var(--indigo);
  text-decoration: none;
  background-color: var(--indigo-transparent);
}

.badge-soft-teal {
  color: var(--teal);
  background-color: var(--teal-transparent);
  border-bottom: 1px solid var(--teal);
}
.badge-soft-teal[href] {
  color: var(--teal);
  text-decoration: none;
  background-color: var(--teal-transparent);
}
.badge-soft-teal[href]:is(:hover, :focus) {
  color: var(--teal);
  text-decoration: none;
  background-color: var(--teal-transparent);
}

.badge-soft-purple {
  background-color: var(--purple-transparent);
  color: var(--purple);
}

.badge-soft-pink {
  background-color: var(--pink-transparent);
  color: var(--pink);
}

.badge-soft-teal {
  background-color: var(--teal-transparent);
  color: var(--teal);
}

.badge-soft-orange {
  background-color: var(--orange-transparent);
  color: var(--orange);
}

.badge-soft-cyan {
  background-color: var(--cyan-transparent);
  color: var(--cyan);
  border-bottom: 1px solid var(--cyan);
}

.badge-soft-dark {
  color: var(--white);
}

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

.badge-soft-light {
  color: var(--gray-900) !important;
}

.badge-outline-primary {
  color: var(--primary);
  border: 1px solid var(--primary);
  background-color: transparent;
}
.badge-outline-primary[href] {
  color: var(--primary);
  text-decoration: none;
  background-color: var(--primary-transparent);
}
.badge-outline-primary[href]:is(:hover, :focus) {
  color: var(--primary);
  text-decoration: none;
  background-color: var(--primary-transparent);
}

.badge-outline-secondary {
  color: var(--secondary);
  border: 1px solid var(--secondary);
  background-color: transparent;
}
.badge-outline-secondary[href] {
  color: var(--secondary);
  text-decoration: none;
  background-color: var(--secondary-transparent);
}
.badge-outline-secondary[href]:is(:hover, :focus) {
  color: var(--secondary);
  text-decoration: none;
  background-color: var(--secondary-transparent);
}

.badge-outline-success {
  color: var(--success);
  border: 1px solid var(--success);
  background-color: transparent;
}
.badge-outline-success[href] {
  color: var(--success);
  text-decoration: none;
  background-color: var(--success-transparent);
}
.badge-outline-success[href]:is(:hover, :focus) {
  color: var(--success);
  text-decoration: none;
  background-color: var(--success-transparent);
}

.badge-outline-info {
  color: var(--info);
  border: 1px solid var(--info);
  background-color: transparent;
}
.badge-outline-info[href] {
  color: var(--info);
  text-decoration: none;
  background-color: var(--info-transparent);
}
.badge-outline-info[href]:is(:hover, :focus) {
  color: var(--info);
  text-decoration: none;
  background-color: var(--info-transparent);
}

.badge-outline-warning {
  color: var(--warning);
  border: 1px solid var(--warning);
  background-color: transparent;
}
.badge-outline-warning[href] {
  color: var(--warning);
  text-decoration: none;
  background-color: var(--warning-transparent);
}
.badge-outline-warning[href]:is(:hover, :focus) {
  color: var(--warning);
  text-decoration: none;
  background-color: var(--warning-transparent);
}

.badge-outline-danger {
  color: var(--danger);
  border: 1px solid var(--danger);
  background-color: transparent;
}
.badge-outline-danger[href] {
  color: var(--danger);
  text-decoration: none;
  background-color: var(--danger-transparent);
}
.badge-outline-danger[href]:is(:hover, :focus) {
  color: var(--danger);
  text-decoration: none;
  background-color: var(--danger-transparent);
}

.badge-outline-dark {
  color: var(--dark);
  border: 1px solid var(--dark);
  background-color: transparent;
}
.badge-outline-dark[href] {
  color: var(--dark);
  text-decoration: none;
  background-color: var(--dark-transparent);
}
.badge-outline-dark[href]:is(:hover, :focus) {
  color: var(--dark);
  text-decoration: none;
  background-color: var(--dark-transparent);
}

.badge-outline-light {
  color: var(--light);
  border: 1px solid var(--light);
  background-color: transparent;
}
.badge-outline-light[href] {
  color: var(--light);
  text-decoration: none;
  background-color: var(--light-transparent);
}
.badge-outline-light[href]:is(:hover, :focus) {
  color: var(--light);
  text-decoration: none;
  background-color: var(--light-transparent);
}

.badge-outline-orange {
  color: var(--orange);
  border: 1px solid var(--orange);
  background-color: transparent;
}
.badge-outline-orange[href] {
  color: var(--orange);
  text-decoration: none;
  background-color: var(--orange-transparent);
}
.badge-outline-orange[href]:is(:hover, :focus) {
  color: var(--orange);
  text-decoration: none;
  background-color: var(--orange-transparent);
}

.badge-outline-purple {
  color: var(--purple);
  border: 1px solid var(--purple);
  background-color: transparent;
}
.badge-outline-purple[href] {
  color: var(--purple);
  text-decoration: none;
  background-color: var(--purple-transparent);
}
.badge-outline-purple[href]:is(:hover, :focus) {
  color: var(--purple);
  text-decoration: none;
  background-color: var(--purple-transparent);
}

.badge-outline-pink {
  color: var(--pink);
  border: 1px solid var(--pink);
  background-color: transparent;
}
.badge-outline-pink[href] {
  color: var(--pink);
  text-decoration: none;
  background-color: var(--pink-transparent);
}
.badge-outline-pink[href]:is(:hover, :focus) {
  color: var(--pink);
  text-decoration: none;
  background-color: var(--pink-transparent);
}

.badge-outline-indigo {
  color: var(--indigo);
  border: 1px solid var(--indigo);
  background-color: transparent;
}
.badge-outline-indigo[href] {
  color: var(--indigo);
  text-decoration: none;
  background-color: var(--indigo-transparent);
}
.badge-outline-indigo[href]:is(:hover, :focus) {
  color: var(--indigo);
  text-decoration: none;
  background-color: var(--indigo-transparent);
}

.badge-outline-teal {
  color: var(--teal);
  border: 1px solid var(--teal);
  background-color: transparent;
}
.badge-outline-teal[href] {
  color: var(--teal);
  text-decoration: none;
  background-color: var(--teal-transparent);
}
.badge-outline-teal[href]:is(:hover, :focus) {
  color: var(--teal);
  text-decoration: none;
  background-color: var(--teal-transparent);
}

.badge {
  vertical-align: middle;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 6px;
  border-radius: 6px;
}

.badge.badge-md {
  font-size: 13px;
  padding: 0.375rem 0.5rem;
}

.badge.badge-lg {
  font-size: 14px;
  padding: 0.5rem 0.75rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.border-indigo-subtle {
  border-color: var(--indigo-transparent) !important;
}

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

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

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

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

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

.border-opacity-10 {
  --border-opacity: 0.10;
}

.border-primary {
  border-color: rgba(var(--primary-rgb), var(--border-opacity, 1)) !important;
}

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

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

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

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

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

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

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

.border-orange {
  border-color: rgba(var(--orange-rgb), var(--border-opacity, 1)) !important;
}

.border-purple {
  border-color: rgba(var(--purple-rgb), var(--border-opacity, 1)) !important;
}

.border-pink {
  border-color: rgba(var(--pink-rgb), var(--border-opacity, 1)) !important;
}

.border-indigo {
  border-color: rgba(var(--indigo-rgb), var(--border-opacity, 1)) !important;
}

.border-teal {
  border-color: rgba(var(--teal-rgb), var(--border-opacity, 1)) !important;
}

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

.shadow {
  box-shadow: var(--box-shadow) !important;
}

.shadow-sm {
  box-shadow: var(--box-shadow-sm) !important;
}

.shadow-lg {
  box-shadow: var(--box-shadow-lg) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

.link-underline-opacity-10 {
  --link-underline-opacity: 0.10;
}

.link-underline-opacity-0 {
  --link-underline-opacity: 0;
}

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

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

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

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

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

.fs-10 {
  font-size: 0.75em !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fs-42 {
  font-size: 2.625rem;
}

.fs-44 {
  font-size: 2.75rem;
}

.fs-46 {
  font-size: 2.875rem;
}

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

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

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

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.breadcrumb-item a {
  color: var(--body-color);
  font-weight: 400;
}
.breadcrumb-item a:hover {
  color: var(--primary);
}
.breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, "\ea61");
  font-family: "tabler-icons";
}

.page-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, "\ea65");
  font-family: "tabler-icons" !important;
}

[dir=rtl] .page-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, "\ea64");
  font-family: "tabler-icons" !important;
}

.breadcrumb .breadcrumb-item {
  color: var(--gray-500);
  font-weight: 500;
}
.breadcrumb .breadcrumb-item a:hover {
  color: var(--primary);
}
.breadcrumb .breadcrumb-item.active {
  color: var(--gray-900);
}

.breadcrumb-arrow .breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, "\ea65");
  font-family: "tabler-icons" !important;
}

.breadcrumb-pipe .breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, "\ea1f");
  font-family: "tabler-icons" !important;
}

.breadcrumb-line .breadcrumb-item + .breadcrumb-item::before {
  content: "-";
  opacity: 1;
}

.breadcrumb-dot .breadcrumb-item + .breadcrumb-item::before {
  content: "•";
  opacity: 1;
}

.breadcrumb-divide .breadcrumb-item + .breadcrumb-item::before {
  content: "\f054";
  content: var(--bs-breadcrumb-divider, "\ea1f");
  font-family: "tabler-icons" !important;
}

.breadcrumb-separatorless .breadcrumb-item + .breadcrumb-item::before {
  content: "";
  display: none;
}

.breadcrumb-colored {
  padding: 12px 15px;
  border-radius: 6px;
}
.breadcrumb-colored li a {
  color: var(--white);
}
.breadcrumb-colored .breadcrumb-item a {
  color: var(--white);
}
.breadcrumb-colored .breadcrumb-item.active {
  color: var(--white);
  opacity: 0.8;
}
.breadcrumb-colored .breadcrumb-item + .breadcrumb-item a {
  color: var(--white);
}
.breadcrumb-colored .breadcrumb-item + .breadcrumb-item::before {
  color: var(--white);
}

.embedded-breadcrumb:before {
  opacity: 0.7;
}

[data-theme-mode=dark] .embedded-breadcrumb:before {
  filter: invert(1);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 50px;
  box-shadow: none;
}
.btn-icon {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 38px;
  width: 38px;
  padding: 0;
  font-size: 16px;
}
.btn-icon :is(i, svg, img) {
  vertical-align: middle;
}
.btn-icon.btn-xs {
  height: 20px;
  width: 20px;
}
.btn-icon.btn-sm {
  height: calc(0.6rem + 1.5em + 2px);
  width: calc(0.6rem + 1.5em + 2px);
}
.btn-icon.btn-lg {
  height: calc(1.3rem + 1.5em + 2px);
  width: calc(1.3rem + 1.5em + 2px);
}
.btn.btn-sm {
  font-size: 13px;
  padding: 6px 10px;
}
.btn.btn-xs {
  font-size: 12px;
  padding: 4px 8px;
}
.btn.btn-lg {
  font-size: 18px;
  padding: 8px 12px;
}
.btn.btn-outline-white {
  border-color: var(--border-color);
}
/* Sếp's own catch: order-status action buttons (orderkilo/view's Hủy đơn,
   Chờ mua hàng, etc.) get their background painted via an inline
   style="background:..." from a PHP color table but most instances never
   also set an explicit text color, so the button fell back to the page's
   own dark body text - unreadable against a colorful background. One
   instance (monitorshops.html.twig) already hardcodes color:#fff inline,
   confirming white text is the intended look; applied here for every
   .act_button instead of patching each template's inline style by hand. */
.act_button {
  color: #fff;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
  background-color: var(--white);
  border-color: var(--border-color);
  color: var(--gray-900);
}

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

.btn-primary {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary:disabled, .btn-primary.show {
  color: #fff;
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-check:checked + .btn-primary, .btn-primary:first-child:active, :not(.btn-check) + .btn-primary:active, .btn-check + .btn-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}

.btn-secondary {
  color: #fff;
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary.active, .btn-secondary.disabled, .btn-secondary:disabled, .btn-secondary.show {
  color: #fff;
  background-color: var(--secondary-hover);
  border-color: var(--secondary-hover);
}

.btn-check:checked + .btn-secondary, .btn-secondary:first-child:active, :not(.btn-check) + .btn-secondary:active, .btn-check + .btn-secondary:hover {
  background-color: var(--secondary-hover);
  border-color: var(--secondary-hover);
  color: #fff;
}

.btn-success {
  color: #fff;
  background-color: var(--success);
  border-color: var(--success);
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success:disabled, .btn-success.show {
  color: #fff;
  background-color: var(--success-hover);
  border-color: var(--success-hover);
}

.btn-check:checked + .btn-success, .btn-success:first-child:active, :not(.btn-check) + .btn-success:active, .btn-check + .btn-success:hover {
  background-color: var(--success-hover);
  border-color: var(--success-hover);
  color: #fff;
}

.btn-info {
  color: #fff;
  background-color: var(--info);
  border-color: var(--info);
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info:disabled, .btn-info.show {
  color: #fff;
  background-color: var(--info-hover);
  border-color: var(--info-hover);
}

.btn-check:checked + .btn-info, .btn-info:first-child:active, :not(.btn-check) + .btn-info:active, .btn-check + .btn-info:hover {
  background-color: var(--info-hover);
  border-color: var(--info-hover);
  color: #fff;
}

.btn-warning {
  color: #fff;
  background-color: var(--warning);
  border-color: var(--warning);
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning:disabled, .btn-warning.show {
  color: #fff;
  background-color: var(--warning-hover);
  border-color: var(--warning-hover);
}

.btn-check:checked + .btn-warning, .btn-warning:first-child:active, :not(.btn-check) + .btn-warning:active, .btn-check + .btn-warning:hover {
  background-color: var(--warning-hover);
  border-color: var(--warning-hover);
  color: #fff;
}

.btn-danger {
  color: #fff;
  background-color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger:disabled, .btn-danger.show {
  color: #fff;
  background-color: var(--danger-hover);
  border-color: var(--danger-hover);
}

.btn-check:checked + .btn-danger, .btn-danger:first-child:active, :not(.btn-check) + .btn-danger:active, .btn-check + .btn-danger:hover {
  background-color: var(--danger-hover);
  border-color: var(--danger-hover);
  color: #fff;
}

.btn-dark {
  color: #fff;
  background-color: var(--dark);
  border-color: var(--dark);
}
.btn-dark:hover, .btn-dark:active, .btn-dark.active, .btn-dark.disabled, .btn-dark:disabled, .btn-dark.show {
  color: #fff;
  background-color: var(--dark-hover);
  border-color: var(--dark-hover);
}

.btn-check:checked + .btn-dark, .btn-dark:first-child:active, :not(.btn-check) + .btn-dark:active, .btn-check + .btn-dark:hover {
  background-color: var(--dark-hover);
  border-color: var(--dark-hover);
  color: #fff;
}

.btn-light {
  color: #fff;
  background-color: var(--light);
  border-color: var(--light);
}
.btn-light:hover, .btn-light:active, .btn-light.active, .btn-light.disabled, .btn-light:disabled, .btn-light.show {
  color: #fff;
  background-color: var(--light-hover);
  border-color: var(--light-hover);
}

.btn-check:checked + .btn-light, .btn-light:first-child:active, :not(.btn-check) + .btn-light:active, .btn-check + .btn-light:hover {
  background-color: var(--light-hover);
  border-color: var(--light-hover);
  color: #fff;
}

.btn-orange {
  color: #fff;
  background-color: var(--orange);
  border-color: var(--orange);
}
.btn-orange:hover, .btn-orange:active, .btn-orange.active, .btn-orange.disabled, .btn-orange:disabled, .btn-orange.show {
  color: #fff;
  background-color: var(--orange-hover);
  border-color: var(--orange-hover);
}

.btn-check:checked + .btn-orange, .btn-orange:first-child:active, :not(.btn-check) + .btn-orange:active, .btn-check + .btn-orange:hover {
  background-color: var(--orange-hover);
  border-color: var(--orange-hover);
  color: #fff;
}

.btn-purple {
  color: #fff;
  background-color: var(--purple);
  border-color: var(--purple);
}
.btn-purple:hover, .btn-purple:active, .btn-purple.active, .btn-purple.disabled, .btn-purple:disabled, .btn-purple.show {
  color: #fff;
  background-color: var(--purple-hover);
  border-color: var(--purple-hover);
}

.btn-check:checked + .btn-purple, .btn-purple:first-child:active, :not(.btn-check) + .btn-purple:active, .btn-check + .btn-purple:hover {
  background-color: var(--purple-hover);
  border-color: var(--purple-hover);
  color: #fff;
}

.btn-pink {
  color: #fff;
  background-color: var(--pink);
  border-color: var(--pink);
}
.btn-pink:hover, .btn-pink:active, .btn-pink.active, .btn-pink.disabled, .btn-pink:disabled, .btn-pink.show {
  color: #fff;
  background-color: var(--pink-hover);
  border-color: var(--pink-hover);
}

.btn-check:checked + .btn-pink, .btn-pink:first-child:active, :not(.btn-check) + .btn-pink:active, .btn-check + .btn-pink:hover {
  background-color: var(--pink-hover);
  border-color: var(--pink-hover);
  color: #fff;
}

.btn-indigo {
  color: #fff;
  background-color: var(--indigo);
  border-color: var(--indigo);
}
.btn-indigo:hover, .btn-indigo:active, .btn-indigo.active, .btn-indigo.disabled, .btn-indigo:disabled, .btn-indigo.show {
  color: #fff;
  background-color: var(--indigo-hover);
  border-color: var(--indigo-hover);
}

.btn-check:checked + .btn-indigo, .btn-indigo:first-child:active, :not(.btn-check) + .btn-indigo:active, .btn-check + .btn-indigo:hover {
  background-color: var(--indigo-hover);
  border-color: var(--indigo-hover);
  color: #fff;
}

.btn-teal {
  color: #fff;
  background-color: var(--teal);
  border-color: var(--teal);
}
.btn-teal:hover, .btn-teal:active, .btn-teal.active, .btn-teal.disabled, .btn-teal:disabled, .btn-teal.show {
  color: #fff;
  background-color: var(--teal-hover);
  border-color: var(--teal-hover);
}

.btn-check:checked + .btn-teal, .btn-teal:first-child:active, :not(.btn-check) + .btn-teal:active, .btn-check + .btn-teal:hover {
  background-color: var(--teal-hover);
  border-color: var(--teal-hover);
  color: #fff;
}

.btn-light {
  color: var(--gray-900) !important;
}
.btn-light:hover, .btn-light:active, .btn-light.active, .btn-light.disabled, .btn-light:disabled {
  color: var(--gray-900) !important;
}

.btn-dark {
  background-color: #0A0C0C;
  border-color: #0A0C0C;
}
.btn-dark:hover {
  background-color: var(--gray-700);
  border-color: var(--gray-700);
}

.btn-white {
  background-color: var(--white);
  border-color: var(--border-color);
  color: var(--gray-900);
}
.btn-white:hover, .btn-white.disabled, .btn-white:disabled {
  color: var(--gray-900);
  background-color: var(--light);
  border-color: var(--border-color);
}
.btn-white:active, .btn-white.active {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary {
  color: var(--primary);
  background-color: var(--white);
  border-color: var(--primary);
}
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-check:checked + .btn-outline-primary, .btn-outline-primary:first-child:active, :not(.btn-check) + .btn-outline-primary:active,
.btn-check + .btn-outline-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--white);
}

.btn-outline-secondary {
  color: var(--secondary);
  background-color: var(--white);
  border-color: var(--secondary);
}
.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
  color: var(--white);
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.btn-check:checked + .btn-outline-secondary, .btn-outline-secondary:first-child:active, :not(.btn-check) + .btn-outline-secondary:active,
.btn-check + .btn-outline-secondary:hover {
  background-color: var(--secondary-hover);
  border-color: var(--secondary-hover);
  color: var(--white);
}

.btn-outline-success {
  color: var(--success);
  background-color: var(--white);
  border-color: var(--success);
}
.btn-outline-success:hover, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.disabled, .btn-outline-success:disabled {
  color: var(--white);
  background-color: var(--success);
  border-color: var(--success);
}

.btn-check:checked + .btn-outline-success, .btn-outline-success:first-child:active, :not(.btn-check) + .btn-outline-success:active,
.btn-check + .btn-outline-success:hover {
  background-color: var(--success-hover);
  border-color: var(--success-hover);
  color: var(--white);
}

.btn-outline-info {
  color: var(--info);
  background-color: var(--white);
  border-color: var(--info);
}
.btn-outline-info:hover, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.disabled, .btn-outline-info:disabled {
  color: var(--white);
  background-color: var(--info);
  border-color: var(--info);
}

.btn-check:checked + .btn-outline-info, .btn-outline-info:first-child:active, :not(.btn-check) + .btn-outline-info:active,
.btn-check + .btn-outline-info:hover {
  background-color: var(--info-hover);
  border-color: var(--info-hover);
  color: var(--white);
}

.btn-outline-warning {
  color: var(--warning);
  background-color: var(--white);
  border-color: var(--warning);
}
.btn-outline-warning:hover, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.disabled, .btn-outline-warning:disabled {
  color: var(--white);
  background-color: var(--warning);
  border-color: var(--warning);
}

.btn-check:checked + .btn-outline-warning, .btn-outline-warning:first-child:active, :not(.btn-check) + .btn-outline-warning:active,
.btn-check + .btn-outline-warning:hover {
  background-color: var(--warning-hover);
  border-color: var(--warning-hover);
  color: var(--white);
}

.btn-outline-danger {
  color: var(--danger);
  background-color: var(--white);
  border-color: var(--danger);
}
.btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.disabled, .btn-outline-danger:disabled {
  color: var(--white);
  background-color: var(--danger);
  border-color: var(--danger);
}

.btn-check:checked + .btn-outline-danger, .btn-outline-danger:first-child:active, :not(.btn-check) + .btn-outline-danger:active,
.btn-check + .btn-outline-danger:hover {
  background-color: var(--danger-hover);
  border-color: var(--danger-hover);
  color: var(--white);
}

.btn-outline-dark {
  color: var(--dark);
  background-color: var(--white);
  border-color: var(--dark);
}
.btn-outline-dark:hover, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark.disabled, .btn-outline-dark:disabled {
  color: var(--white);
  background-color: var(--dark);
  border-color: var(--dark);
}

.btn-check:checked + .btn-outline-dark, .btn-outline-dark:first-child:active, :not(.btn-check) + .btn-outline-dark:active,
.btn-check + .btn-outline-dark:hover {
  background-color: var(--dark-hover);
  border-color: var(--dark-hover);
  color: var(--white);
}

.btn-outline-light {
  color: var(--light);
  background-color: var(--white);
  border-color: var(--light);
}
.btn-outline-light:hover, .btn-outline-light:active, .btn-outline-light.active, .btn-outline-light.disabled, .btn-outline-light:disabled {
  color: var(--white);
  background-color: var(--light);
  border-color: var(--light);
}

.btn-check:checked + .btn-outline-light, .btn-outline-light:first-child:active, :not(.btn-check) + .btn-outline-light:active,
.btn-check + .btn-outline-light:hover {
  background-color: var(--light-hover);
  border-color: var(--light-hover);
  color: var(--white);
}

.btn-outline-orange {
  color: var(--orange);
  background-color: var(--white);
  border-color: var(--orange);
}
.btn-outline-orange:hover, .btn-outline-orange:active, .btn-outline-orange.active, .btn-outline-orange.disabled, .btn-outline-orange:disabled {
  color: var(--white);
  background-color: var(--orange);
  border-color: var(--orange);
}

.btn-check:checked + .btn-outline-orange, .btn-outline-orange:first-child:active, :not(.btn-check) + .btn-outline-orange:active,
.btn-check + .btn-outline-orange:hover {
  background-color: var(--orange-hover);
  border-color: var(--orange-hover);
  color: var(--white);
}

.btn-outline-purple {
  color: var(--purple);
  background-color: var(--white);
  border-color: var(--purple);
}
.btn-outline-purple:hover, .btn-outline-purple:active, .btn-outline-purple.active, .btn-outline-purple.disabled, .btn-outline-purple:disabled {
  color: var(--white);
  background-color: var(--purple);
  border-color: var(--purple);
}

.btn-check:checked + .btn-outline-purple, .btn-outline-purple:first-child:active, :not(.btn-check) + .btn-outline-purple:active,
.btn-check + .btn-outline-purple:hover {
  background-color: var(--purple-hover);
  border-color: var(--purple-hover);
  color: var(--white);
}

.btn-outline-pink {
  color: var(--pink);
  background-color: var(--white);
  border-color: var(--pink);
}
.btn-outline-pink:hover, .btn-outline-pink:active, .btn-outline-pink.active, .btn-outline-pink.disabled, .btn-outline-pink:disabled {
  color: var(--white);
  background-color: var(--pink);
  border-color: var(--pink);
}

.btn-check:checked + .btn-outline-pink, .btn-outline-pink:first-child:active, :not(.btn-check) + .btn-outline-pink:active,
.btn-check + .btn-outline-pink:hover {
  background-color: var(--pink-hover);
  border-color: var(--pink-hover);
  color: var(--white);
}

.btn-outline-indigo {
  color: var(--indigo);
  background-color: var(--white);
  border-color: var(--indigo);
}
.btn-outline-indigo:hover, .btn-outline-indigo:active, .btn-outline-indigo.active, .btn-outline-indigo.disabled, .btn-outline-indigo:disabled {
  color: var(--white);
  background-color: var(--indigo);
  border-color: var(--indigo);
}

.btn-check:checked + .btn-outline-indigo, .btn-outline-indigo:first-child:active, :not(.btn-check) + .btn-outline-indigo:active,
.btn-check + .btn-outline-indigo:hover {
  background-color: var(--indigo-hover);
  border-color: var(--indigo-hover);
  color: var(--white);
}

.btn-outline-teal {
  color: var(--teal);
  background-color: var(--white);
  border-color: var(--teal);
}
.btn-outline-teal:hover, .btn-outline-teal:active, .btn-outline-teal.active, .btn-outline-teal.disabled, .btn-outline-teal:disabled {
  color: var(--white);
  background-color: var(--teal);
  border-color: var(--teal);
}

.btn-check:checked + .btn-outline-teal, .btn-outline-teal:first-child:active, :not(.btn-check) + .btn-outline-teal:active,
.btn-check + .btn-outline-teal:hover {
  background-color: var(--teal-hover);
  border-color: var(--teal-hover);
  color: var(--white);
}

.btn-outline-light {
  color: var(--gray-900) !important;
  border-color: var(--border-color);
}
.btn-outline-light:hover, .btn-outline-light.disabled, .btn-outline-light:disabled {
  color: var(--gray-900) !important;
  background-color: var(--primary-transparent);
}
.btn-outline-light:active, .btn-outline-light.active, .btn-outline-light.show {
  color: #fff !important;
  background-color: var(--primary) !important;
}

.btn-soft-primary {
  color: var(--primary);
  background-color: var(--primary-transparent);
  border-color: var(--primary);
}
.btn-soft-primary:hover, .btn-soft-primary:active, .btn-soft-primary.active, .btn-soft-primary.disabled, .btn-soft-primary:disabled {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-soft-secondary {
  color: var(--secondary);
  background-color: var(--secondary-transparent);
  border-color: var(--secondary);
}
.btn-soft-secondary:hover, .btn-soft-secondary:active, .btn-soft-secondary.active, .btn-soft-secondary.disabled, .btn-soft-secondary:disabled {
  color: var(--white);
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.btn-soft-success {
  color: var(--success);
  background-color: var(--success-transparent);
  border-color: var(--success);
}
.btn-soft-success:hover, .btn-soft-success:active, .btn-soft-success.active, .btn-soft-success.disabled, .btn-soft-success:disabled {
  color: var(--white);
  background-color: var(--success);
  border-color: var(--success);
}

.btn-soft-info {
  color: var(--info);
  background-color: var(--info-transparent);
  border-color: var(--info);
}
.btn-soft-info:hover, .btn-soft-info:active, .btn-soft-info.active, .btn-soft-info.disabled, .btn-soft-info:disabled {
  color: var(--white);
  background-color: var(--info);
  border-color: var(--info);
}

.btn-soft-warning {
  color: var(--warning);
  background-color: var(--warning-transparent);
  border-color: var(--warning);
}
.btn-soft-warning:hover, .btn-soft-warning:active, .btn-soft-warning.active, .btn-soft-warning.disabled, .btn-soft-warning:disabled {
  color: var(--white);
  background-color: var(--warning);
  border-color: var(--warning);
}

.btn-soft-danger {
  color: var(--danger);
  background-color: var(--danger-transparent);
  border-color: var(--danger);
}
.btn-soft-danger:hover, .btn-soft-danger:active, .btn-soft-danger.active, .btn-soft-danger.disabled, .btn-soft-danger:disabled {
  color: var(--white);
  background-color: var(--danger);
  border-color: var(--danger);
}

.btn-soft-dark {
  color: var(--dark);
  background-color: var(--dark-transparent);
  border-color: var(--dark);
}
.btn-soft-dark:hover, .btn-soft-dark:active, .btn-soft-dark.active, .btn-soft-dark.disabled, .btn-soft-dark:disabled {
  color: var(--white);
  background-color: var(--dark);
  border-color: var(--dark);
}

.btn-soft-light {
  color: var(--light);
  background-color: var(--light-transparent);
  border-color: var(--light);
}
.btn-soft-light:hover, .btn-soft-light:active, .btn-soft-light.active, .btn-soft-light.disabled, .btn-soft-light:disabled {
  color: var(--white);
  background-color: var(--light);
  border-color: var(--light);
}

.btn-soft-orange {
  color: var(--orange);
  background-color: var(--orange-transparent);
  border-color: var(--orange);
}
.btn-soft-orange:hover, .btn-soft-orange:active, .btn-soft-orange.active, .btn-soft-orange.disabled, .btn-soft-orange:disabled {
  color: var(--white);
  background-color: var(--orange);
  border-color: var(--orange);
}

.btn-soft-purple {
  color: var(--purple);
  background-color: var(--purple-transparent);
  border-color: var(--purple);
}
.btn-soft-purple:hover, .btn-soft-purple:active, .btn-soft-purple.active, .btn-soft-purple.disabled, .btn-soft-purple:disabled {
  color: var(--white);
  background-color: var(--purple);
  border-color: var(--purple);
}

.btn-soft-pink {
  color: var(--pink);
  background-color: var(--pink-transparent);
  border-color: var(--pink);
}
.btn-soft-pink:hover, .btn-soft-pink:active, .btn-soft-pink.active, .btn-soft-pink.disabled, .btn-soft-pink:disabled {
  color: var(--white);
  background-color: var(--pink);
  border-color: var(--pink);
}

.btn-soft-indigo {
  color: var(--indigo);
  background-color: var(--indigo-transparent);
  border-color: var(--indigo);
}
.btn-soft-indigo:hover, .btn-soft-indigo:active, .btn-soft-indigo.active, .btn-soft-indigo.disabled, .btn-soft-indigo:disabled {
  color: var(--white);
  background-color: var(--indigo);
  border-color: var(--indigo);
}

.btn-soft-teal {
  color: var(--teal);
  background-color: var(--teal-transparent);
  border-color: var(--teal);
}
.btn-soft-teal:hover, .btn-soft-teal:active, .btn-soft-teal.active, .btn-soft-teal.disabled, .btn-soft-teal:disabled {
  color: var(--white);
  background-color: var(--teal);
  border-color: var(--teal);
}

.btn-soft-light {
  color: var(--gray-900) !important;
}
.btn-soft-light:hover, .btn-soft-light:active, .btn-soft-light.active, .btn-soft-light.disabled, .btn-soft-light:disabled {
  color: var(--gray-900) !important;
}

.btn-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-animation {
  overflow: hidden;
  -webkit-transition: border-color 0.3s, background-color 0.3s;
  transition: border-color 0.3s, background-color 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  position: relative;
}
.btn-animation::after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transform: translate3d(0, 25%, 0);
  transform: translate3d(0, 25%, 0);
  padding: 0.5rem 0.85rem;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.btn-animation > span {
  display: block;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.btn-animation:hover::after {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.btn-animation:hover > span {
  opacity: 0;
  -webkit-transform: translate3d(0, -25%, 0);
  transform: translate3d(0, -25%, 0);
}

.btn-primary.btn-animation:is(:hover, :focus, :active, :focus-visible) {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background-color: rgba(var(--primary-rgb), 0.1);
}

.btn-secondary.btn-animation:is(:hover, :focus, :active, :focus-visible) {
  color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  background-color: rgba(var(--secondary-rgb), 0.1);
}

.btn-warning.btn-animation:is(:hover, :focus, :active, :focus-visible) {
  color: var(--warning) !important;
  background-color: rgba(var(--warning-rgb), 0.1);
}

.btn-danger.btn-animation:is(:hover, :focus, :active, :focus-visible) {
  color: var(--danger) !important;
  background-color: rgba(var(--danger-rgb), 0.1);
}

.btn-info.btn-animation:is(:hover, :focus, :active, :focus-visible) {
  color: var(--info) !important;
  background-color: rgba(var(--info-rgb), 0.1);
}

.btn-success.btn-animation:is(:hover, :focus, :active, :focus-visible) {
  color: var(--success) !important;
  background-color: rgba(var(--success-rgb), 0.1);
}

.btn-dark.btn-animation:is(:hover, :focus, :active, :focus-visible) {
  color: var(--dark) !important;
  background-color: rgba(var(--dark-rgb), 0.1);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.fill-primary {
  fill: rgba(var(--primary-rgb), 0.1);
}

.fill-secondary {
  fill: rgba(var(--secondary-rgb), 0.1);
}

.fill-success {
  fill: rgba(var(--success-rgb), 0.1);
}

.fill-info {
  fill: rgba(var(--info-rgb), 0.1);
}

.fill-warning {
  fill: rgba(var(--warning-rgb), 0.1);
}

.fill-danger {
  fill: rgba(var(--danger-rgb), 0.1);
}

.fill-dark {
  fill: rgba(var(--dark-rgb), 0.1);
}

.fill-light {
  fill: rgba(var(--light-rgb), 0.1);
}

.fill-orange {
  fill: rgba(var(--orange-rgb), 0.1);
}

.fill-purple {
  fill: rgba(var(--purple-rgb), 0.1);
}

.fill-pink {
  fill: rgba(var(--pink-rgb), 0.1);
}

.fill-indigo {
  fill: rgba(var(--indigo-rgb), 0.1);
}

.fill-teal {
  fill: rgba(var(--teal-rgb), 0.1);
}

.bg-opacity-100 {
  --bg-opacity: 1 !important;
}

.bg-opacity-75 {
  --bg-opacity: 0.75 !important;
}

.bg-opacity-50 {
  --bg-opacity: 0.5 !important;
}

.bg-opacity-25 {
  --bg-opacity: 0.25 !important;
}

.bg-opacity-10 {
  --bg-opacity: 0.10 !important;
}

.bg-primary:not([class*=bg-opacity-]) {
  --bg-opacity: 1;
}

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

.bg-secondary:not([class*=bg-opacity-]) {
  --bg-opacity: 1;
}

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

.bg-success:not([class*=bg-opacity-]) {
  --bg-opacity: 1;
}

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

.bg-info:not([class*=bg-opacity-]) {
  --bg-opacity: 1;
}

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

.bg-warning:not([class*=bg-opacity-]) {
  --bg-opacity: 1;
}

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

.bg-danger:not([class*=bg-opacity-]) {
  --bg-opacity: 1;
}

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

.bg-dark:not([class*=bg-opacity-]) {
  --bg-opacity: 1;
}

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

.bg-light:not([class*=bg-opacity-]) {
  --bg-opacity: 1;
}

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

.bg-orange:not([class*=bg-opacity-]) {
  --bg-opacity: 1;
}

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

.bg-purple:not([class*=bg-opacity-]) {
  --bg-opacity: 1;
}

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

.bg-pink:not([class*=bg-opacity-]) {
  --bg-opacity: 1;
}

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

.bg-indigo:not([class*=bg-opacity-]) {
  --bg-opacity: 1;
}

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

.bg-teal:not([class*=bg-opacity-]) {
  --bg-opacity: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-soft-pink {
  background-color: var(--pink-transparent);
}

.bg-soft-indigo {
  background-color: var(--indigo-transparent);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-indigo-emphasis {
  color: var(--indigo-hover) !important;
}

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

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

.link-primary {
  color: var(--primary) !important;
}
.link-primary:hover, .link-primary:focus {
  color: var(--primary-hover) !important;
}
.link-primary.text-decoration-underline {
  text-decoration-color: var(--primary) !important;
}

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

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

.link-secondary {
  color: var(--secondary) !important;
}
.link-secondary:hover, .link-secondary:focus {
  color: var(--secondary-hover) !important;
}
.link-secondary.text-decoration-underline {
  text-decoration-color: var(--secondary) !important;
}

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

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

.link-success {
  color: var(--success) !important;
}
.link-success:hover, .link-success:focus {
  color: var(--success-hover) !important;
}
.link-success.text-decoration-underline {
  text-decoration-color: var(--success) !important;
}

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

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

.link-info {
  color: var(--info) !important;
}
.link-info:hover, .link-info:focus {
  color: var(--info-hover) !important;
}
.link-info.text-decoration-underline {
  text-decoration-color: var(--info) !important;
}

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

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

.link-warning {
  color: var(--warning) !important;
}
.link-warning:hover, .link-warning:focus {
  color: var(--warning-hover) !important;
}
.link-warning.text-decoration-underline {
  text-decoration-color: var(--warning) !important;
}

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

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

.link-danger {
  color: var(--danger) !important;
}
.link-danger:hover, .link-danger:focus {
  color: var(--danger-hover) !important;
}
.link-danger.text-decoration-underline {
  text-decoration-color: var(--danger) !important;
}

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

.text-dark {
  color: var(--dark) !important;
}
.text-dark.text-opacity-75 {
  opacity: 0.75 !important;
}

.link-dark {
  color: var(--dark) !important;
}
.link-dark:hover, .link-dark:focus {
  color: var(--dark-hover) !important;
}
.link-dark.text-decoration-underline {
  text-decoration-color: var(--dark) !important;
}

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

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

.link-light {
  color: var(--light) !important;
}
.link-light:hover, .link-light:focus {
  color: var(--light-hover) !important;
}
.link-light.text-decoration-underline {
  text-decoration-color: var(--light) !important;
}

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

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

.link-orange {
  color: var(--orange) !important;
}
.link-orange:hover, .link-orange:focus {
  color: var(--orange-hover) !important;
}
.link-orange.text-decoration-underline {
  text-decoration-color: var(--orange) !important;
}

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

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

.link-purple {
  color: var(--purple) !important;
}
.link-purple:hover, .link-purple:focus {
  color: var(--purple-hover) !important;
}
.link-purple.text-decoration-underline {
  text-decoration-color: var(--purple) !important;
}

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

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

.link-pink {
  color: var(--pink) !important;
}
.link-pink:hover, .link-pink:focus {
  color: var(--pink-hover) !important;
}
.link-pink.text-decoration-underline {
  text-decoration-color: var(--pink) !important;
}

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

.text-indigo {
  color: var(--indigo) !important;
}
.text-indigo.text-opacity-75 {
  opacity: 0.75 !important;
}

.link-indigo {
  color: var(--indigo) !important;
}
.link-indigo:hover, .link-indigo:focus {
  color: var(--indigo-hover) !important;
}
.link-indigo.text-decoration-underline {
  text-decoration-color: var(--indigo) !important;
}

.link-underline-indigo {
  text-decoration-color: var(--indigo) !important;
}

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

.link-teal {
  color: var(--teal) !important;
}
.link-teal:hover, .link-teal:focus {
  color: var(--teal-hover) !important;
}
.link-teal.text-decoration-underline {
  text-decoration-color: var(--teal) !important;
}

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

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

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

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

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

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

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

/* Sếp's own catch: this was mapped to var(--body-color) - the exact
   same shade as regular text - so nothing styled .text-muted ever
   actually looked muted anywhere in the app. #9E9E9E matches .text-time's
   own muted-timestamp gray, for one consistent "muted" tone site-wide. */
.text-muted {
  color: #9E9E9E !important;
}

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

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

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

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

.bg-indigo-gradient {
  background-image: linear-gradient(180deg, #8351FD 0%, #5112A9 100%) !important;
}

.bg-primary-gradient {
  background-image: linear-gradient(180deg, #18ACCF 0%, #0F59AD 100%) !important;
}

.bg-secondary-gradient {
  background-image: linear-gradient(180deg, #309F92 0%, #0C5666 100%) !important;
}

.bg-dark-gradient {
  background-image: linear-gradient(180deg, #4B749F 0%, #243748 100%) !important;
}

.bg-purple-gradient {
  background-image: linear-gradient(180deg, #AF1FAF 0%, #800080 100%) !important;
}

.bg-purple-gradient-6 {
  background: linear-gradient(282deg, #DDBEDD 1.58%, #FFFFFF 98.93%);
}

.bg-orange-gradient {
  background-image: linear-gradient(180deg, #F99D6F 0%, #FA6D70 100%) !important;
}

.bg-info-gradient {
  background-image: linear-gradient(180deg, #4F84F4 0%, #320F84 100%) !important;
}

.bg-info-gradient-5 {
  background: linear-gradient(135deg, #80B3FF 0%, #0D6EFD 100%);
}

.bg-info-gradient-6 {
  background: linear-gradient(281.9deg, #C7D4EF 0.56%, #EAF2FF 97.4%);
}

.bg-teal-gradient {
  background-image: linear-gradient(180deg, #18C3B0 0%, #0E9384 100%) !important;
}

.bg-success-gradient {
  background-image: linear-gradient(120deg, #138710 0%, #18ac15 60%, #1abe17 100%);
}

.bg-success-gradient-6 {
  background: linear-gradient(281.89deg, #BFE1CE 0.81%, #FFFFFF 98.93%);
}

.bg-success-gradient-5 {
  background: linear-gradient(135deg, #67BE8C 0%, #27AE60 100%);
}

.bg-warning-gradient {
  background-image: linear-gradient(120deg, #bc8b01 0%, #e5a901 60%, #f9b801 100%);
}

.bg-warning-gradient-5 {
  background: linear-gradient(95.08deg, #FFC36F 3.47%, #FF9500 97.91%);
}

.bg-danger-gradient {
  background-image: linear-gradient(120deg, #c20000 0%, #eb0000 60%, red 100%);
}

.bg-danger-gradient-5 {
  background: linear-gradient(180deg, #F68B7E 0%, #E41F07 100%);
}

.bg-danger-gradient-6 {
  background: linear-gradient(281.91deg, #F3C8C6 0%, #FFFFFF 100%);
}

.bg-light-gradient {
  background-image: linear-gradient(177deg, #dadada 0%, #efefef 60%, #f9f9f9 100%);
}

.bg-primary-gradient-100 {
  background-image: var(--primary-gradient-100);
}

.bg-info-gradient-100 {
  background-image: var(--info-gradient-100);
}

.bg-pink-gradient-100 {
  background-image: var(--pink-gradient-100);
}

.bg-purple-gradient-100 {
  background-image: linear-gradient(270deg, #C594FA 0%, #7F24E3 100%);
}

[data-color=primary] {
  --primary: #E41F07;
  --primary-rgb: 228,
  31,
  7;
}

[data-color=secondary] {
  --primary: #FFA201;
  --primary-rgb: 255,
  162,
  1;
}

[data-color=success] {
  --primary: #1ABE17;
  --primary-rgb: 26,
  190,
  23;
}

[data-color=info] {
  --primary: #2F80ED;
  --primary-rgb: 47,
  128,
  237;
}

[data-color=warning] {
  --primary: #f9b801;
  --primary-rgb: 249,
  184,
  1;
}

[data-color=danger] {
  --primary: #EF1E1E;
  --primary-rgb: 239,
  30,
  30;
}

[data-color=dark] {
  --primary: #0A0C0C;
  --primary-rgb: 10,
  12,
  12;
}

[data-color=light] {
  --primary: #F7F8F9;
  --primary-rgb: 247,
  248,
  249;
}

[data-color=orange] {
  --primary: #EF5E25;
  --primary-rgb: 239,
  94,
  37;
}

[data-color=purple] {
  --primary: #800080;
  --primary-rgb: 128,
  0,
  128;
}

[data-color=pink] {
  --primary: #DD2590;
  --primary-rgb: 221,
  37,
  144;
}

[data-color=indigo] {
  --primary: #3538CD;
  --primary-rgb: 53,
  56,
  205;
}

[data-color=teal] {
  --primary: #0E9384;
  --primary-rgb: 14,
  147,
  132;
}

.text-success-gradient {
  background-image: linear-gradient(120deg, #138710 0%, #18ac15 60%, #1abe17 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-purple-gradient {
  background-image: linear-gradient(270deg, #C594FA 0%, #7F24E3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Danger - Red Gradient */
.text-danger-gradient {
  background-image: linear-gradient(270deg, #ff6a6a 0%, #dc3545 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Warning - Orange/Yellow Gradient */
.text-warning-gradient {
  background-image: linear-gradient(270deg, #ffc107 0%, #ff9800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Info - Blue Gradient */
.text-info-gradient {
  background-image: linear-gradient(270deg, #5bc0ff 0%, #0dcaf0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-cyan {
  background-color: #06AED4 !important;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.card {
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  color: inherit;
  box-shadow: var(--box-shadow);
  background-color: var(--white);
}
.card .header-title {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
/* Typography hierarchy pass: plain <b>/<strong> inside content cards - with
   no color class and no inline color style - are almost always field labels
   ("Họ tên:", "ID:", "UTM Campaign:"...) ported verbatim from ZF1's .phtml
   views, some carrying a harmless inline font-size only (e.g. `style=
   "font-size:10px"` on "ID"). De-emphasized to a plain, non-bold caption so
   labels read as secondary instead of shouting at the same bold-black
   weight as the actual data. Matching on [style*="color"] (not just
   [style]) so a font-size-only inline style doesn't accidentally exempt a
   label from this rule. <b class="text-danger/text-success/...">  and any
   inline *color* style are left untouched - those already carry real
   meaning (money, status, warnings) and shouldn't be muted. */
.card-body b:not([class]):not([style*="color"]),
.card-body strong:not([class]):not([style*="color"]) {
  font-weight: 400;
  color: var(--gray-500);
}
/* ...except when that same plain <b> is itself the clickable text of an
   action link (e.g. <a style="color:red"><b>Hủy Cho Phép Kho HN Kiểm</b></a>)
   - those must keep the link's own color and still look clickable, not fade
   into the label styling above. */
.card-body a b:not([class]):not([style*="color"]),
.card-body a strong:not([class]):not([style*="color"]) {
  font-weight: 500;
  color: inherit;
}
/* Explicit label marker for views where the ZF1-ported markup does the
   OPPOSITE of the pattern above - bare label text with the real value
   wrapped in <b> (e.g. users/carecustomer.html.twig: "Admin: <b>{{ staff
   }}</b>"). The blanket b:not([class]) rule above can't be used there
   without also muting the real data, so those views get their labels
   explicitly wrapped in <span class="field-label"> instead. */
.field-label {
  font-weight: 400;
  color: var(--gray-500);
  font-size: 0.85em;
}
.card .card-title {
  color: var(--gray-900);
  margin-bottom: 0;
  font-weight: 600;
  font-size: 16px;
}
.card .card-header {
  padding: 15px 20px;
  margin-bottom: 0;
  border-color: var(--border-color);
  background: transparent;
}
.card .card-body {
  padding: 20px;
}
.card .card-footer {
  padding: 0.75rem 1.25rem;
  background: transparent;
  border-color: var(--border-color);
}
.card .card-drop {
  font-size: 20px;
  color: inherit;
}
.card .card-drop:hover {
  color: var(--primary);
}
.card .card-widgets {
  float: right;
  height: 16px;
}
.card .card-widgets > a {
  color: inherit;
  font-size: 18px;
  display: inline-block;
  line-height: 1;
  margin: 0 3px;
}
.card .card-widgets > a.collapsed i:before {
  content: "\eb0b";
}

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

.card-disabled {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  background: var(--light);
  opacity: 0.8;
  cursor: progress;
}
.card-disabled .card-portlets-loader {
  background-color: var(--dark);
  animation: rotatebox 1.2s infinite ease-in-out;
  height: 30px;
  width: 30px;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -0.625rem;
  margin-top: -0.625rem;
}

@keyframes rotatebox {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
.card-h-100 {
  height: calc(100% - 1.25rem);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.dropdown-menu {
  box-shadow: var(--box-shadow);
  animation-name: DropDownSlideUp;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  will-change: transform;
  position: absolute;
  z-index: 1000;
  border-color: var(--border-color);
  padding: 4px;
  font-size: 14px;
  border-radius: 5px;
  background-color: var(--white);
}
.dropdown-menu[data-popper-placement=top-start], .dropdown-menu[data-popper-placement=top] {
  animation-name: DropDownSlideDown;
}
.dropdown-menu .dropdown-item {
  border-radius: 6px;
  font-size: 14px;
  color: var(--body-color);
  padding: 0.4rem 0.9375rem;
  background-color: transparent;
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item.active {
  background: var(--light);
}

.dropdown-divider {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

@media (min-width: 576px) {
  .hover-dropdown:hover > .dropdown-menu {
    display: block;
  }
}
@keyframes DropDownSlideUp {
  100% {
    margin-top: -1px;
  }
  0% {
    margin-top: 5px;
  }
}
@keyframes DropDownSlideDown {
  100% {
    margin-bottom: 0;
  }
  0% {
    margin-bottom: 5px;
  }
}
@media (min-width: 768px) {
  .dropdown-menu-xxl {
    width: 740px;
  }
  .dropdown-menu-xl {
    width: 430px;
  }
}
@media (min-width: 576px) {
  .dropdown-menu-lg {
    width: 320px;
  }
  .dropdown-menu-md {
    width: 250px;
  }
  .dropdown-menu-full {
    width: auto;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
  }
}
.drop-arrow-none:after {
  display: none;
  content: none !important;
}

.dropdown-toggle::after {
  display: inline-block;
  vertical-align: 0;
  content: "\ea5f";
  font-family: "tabler-icons" !important;
  border: 0;
  font-size: 14px;
  position: relative;
}

.dropdown-toggle-split:before {
  content: "";
  position: absolute;
  background-color: rgba(var(--white-rgb), 0.12);
  top: -1px;
  bottom: -1px;
  right: -1px;
  left: 0;
  border-radius: 0 6px 6px 0;
}

.dropstart .dropdown-toggle-split::before {
  inset: auto;
  border-radius: 0;
  position: relative;
  z-index: 1;
}
.dropstart .dropdown-toggle-split::after {
  content: "";
  display: inline-block;
  position: absolute;
  background-color: rgba(var(--dark-rgb), 0.1);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border-radius: 6px 0 0 6px;
  border: none;
  margin-left: 0;
}

.dropdown-icon-item {
  display: block;
  border-radius: 3px;
  text-align: center;
  padding: 15px;
  display: block;
  color: var(--body-color);
  margin: 7px 0;
}
.dropdown-icon-item img {
  height: 24px;
}
.dropdown-icon-item span {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-icon-item:hover {
  background-color: var(--light);
  color: var(--body-color);
}

.dropdown-menu.dropdown-menu-primary {
  background-color: var(--primary);
}
.dropdown-menu.dropdown-menu-primary li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-primary .dropdown-item:hover, .dropdown-menu.dropdown-menu-primary .dropdown-item:focus, .dropdown-menu.dropdown-menu-primary .dropdown-item:active, .dropdown-menu.dropdown-menu-primary .dropdown-item.active {
  color: var(--white);
}
.dropdown-menu.dropdown-menu-secondary {
  background-color: var(--secondary);
}
.dropdown-menu.dropdown-menu-secondary li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-secondary .dropdown-item:hover, .dropdown-menu.dropdown-menu-secondary .dropdown-item:focus, .dropdown-menu.dropdown-menu-secondary .dropdown-item:active, .dropdown-menu.dropdown-menu-secondary .dropdown-item.active {
  color: var(--white);
}
.dropdown-menu.dropdown-menu-warning {
  background-color: var(--warning);
}
.dropdown-menu.dropdown-menu-warning li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-warning .dropdown-item:hover, .dropdown-menu.dropdown-menu-warning .dropdown-item:focus, .dropdown-menu.dropdown-menu-warning .dropdown-item:active, .dropdown-menu.dropdown-menu-warning .dropdown-item.active {
  color: var(--white);
}
.dropdown-menu.dropdown-menu-info {
  background-color: var(--info);
}
.dropdown-menu.dropdown-menu-info li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-info .dropdown-item:hover, .dropdown-menu.dropdown-menu-info .dropdown-item:focus, .dropdown-menu.dropdown-menu-info .dropdown-item:active, .dropdown-menu.dropdown-menu-info .dropdown-item.active {
  color: var(--white);
}
.dropdown-menu.dropdown-menu-success {
  background-color: var(--success);
}
.dropdown-menu.dropdown-menu-success li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-success .dropdown-item:hover, .dropdown-menu.dropdown-menu-success .dropdown-item:focus, .dropdown-menu.dropdown-menu-success .dropdown-item:active, .dropdown-menu.dropdown-menu-success .dropdown-item.active {
  color: var(--white);
}
.dropdown-menu.dropdown-menu-danger {
  background-color: var(--danger);
}
.dropdown-menu.dropdown-menu-danger li a {
  color: rgba(255, 255, 255, 0.9);
}
.dropdown-menu.dropdown-menu-danger .dropdown-item:hover, .dropdown-menu.dropdown-menu-danger .dropdown-item:focus, .dropdown-menu.dropdown-menu-danger .dropdown-item:active, .dropdown-menu.dropdown-menu-danger .dropdown-item.active {
  color: var(--white);
}

.dropdown-menu.dropmenu-item-primary .dropdown-item:hover, .dropdown-menu.dropmenu-item-primary .dropdown-item:focus, .dropdown-menu.dropmenu-item-primary .dropdown-item:active, .dropdown-menu.dropmenu-item-primary .dropdown-item.active {
  background-color: rgba(var(--primary-rgb), 0.1) !important;
  color: var(--primary);
}
.dropdown-menu.dropmenu-item-secondary .dropdown-item:hover, .dropdown-menu.dropmenu-item-secondary .dropdown-item:focus, .dropdown-menu.dropmenu-item-secondary .dropdown-item:active, .dropdown-menu.dropmenu-item-secondary .dropdown-item.active {
  background-color: rgba(var(--secondary-rgb), 0.1) !important;
  color: var(--secondary);
}
.dropdown-menu.dropmenu-item-warning .dropdown-item:hover, .dropdown-menu.dropmenu-item-warning .dropdown-item:focus, .dropdown-menu.dropmenu-item-warning .dropdown-item:active, .dropdown-menu.dropmenu-item-warning .dropdown-item.active {
  background-color: rgba(var(--warning-rgb), 0.1) !important;
  color: var(--warning);
}
.dropdown-menu.dropmenu-item-info .dropdown-item:hover, .dropdown-menu.dropmenu-item-info .dropdown-item:focus, .dropdown-menu.dropmenu-item-info .dropdown-item:active, .dropdown-menu.dropmenu-item-info .dropdown-item.active {
  background-color: rgba(var(--info-rgb), 0.1) !important;
  color: var(--info);
}
.dropdown-menu.dropmenu-item-success .dropdown-item:hover, .dropdown-menu.dropmenu-item-success .dropdown-item:focus, .dropdown-menu.dropmenu-item-success .dropdown-item:active, .dropdown-menu.dropmenu-item-success .dropdown-item.active {
  background-color: rgba(var(--success-rgb), 0.1) !important;
  color: var(--success);
}
.dropdown-menu.dropmenu-item-danger .dropdown-item:hover, .dropdown-menu.dropmenu-item-danger .dropdown-item:focus, .dropdown-menu.dropmenu-item-danger .dropdown-item:active, .dropdown-menu.dropmenu-item-danger .dropdown-item.active {
  background-color: rgba(var(--danger-rgb), 0.1) !important;
  color: var(--danger);
}

.dropdown-menu.dropmenu-light-primary {
  background-color: rgba(var(--secondary-rgb), 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-primary .dropdown-item:hover, .dropdown-menu.dropmenu-light-primary .dropdown-item:focus, .dropdown-menu.dropmenu-light-primary .dropdown-item:active, .dropdown-menu.dropmenu-light-primary .dropdown-item.active {
  color: var(--white);
  background-color: var(--primary) !important;
}
.dropdown-menu.dropmenu-light-secondary {
  background-color: rgba(var(--secondary-rgb), 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-secondary .dropdown-item:hover, .dropdown-menu.dropmenu-light-secondary .dropdown-item:focus, .dropdown-menu.dropmenu-light-secondary .dropdown-item:active, .dropdown-menu.dropmenu-light-secondary .dropdown-item.active {
  color: var(--white);
  background-color: var(--secondary) !important;
}
.dropdown-menu.dropmenu-light-info {
  background-color: rgba(var(--info-rgb), 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-info .dropdown-item:hover, .dropdown-menu.dropmenu-light-info .dropdown-item:focus, .dropdown-menu.dropmenu-light-info .dropdown-item:active, .dropdown-menu.dropmenu-light-info .dropdown-item.active {
  color: var(--white);
  background-color: var(--info) !important;
}
.dropdown-menu.dropmenu-light-warning {
  background-color: rgba(var(--warning-rgb), 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-warning .dropdown-item:hover, .dropdown-menu.dropmenu-light-warning .dropdown-item:focus, .dropdown-menu.dropmenu-light-warning .dropdown-item:active, .dropdown-menu.dropmenu-light-warning .dropdown-item.active {
  color: var(--white);
  background-color: var(--warning) !important;
}
.dropdown-menu.dropmenu-light-success {
  background-color: rgba(var(--success-rgb), 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-success .dropdown-item:hover, .dropdown-menu.dropmenu-light-success .dropdown-item:focus, .dropdown-menu.dropmenu-light-success .dropdown-item:active, .dropdown-menu.dropmenu-light-success .dropdown-item.active {
  color: var(--white);
  background-color: var(--success) !important;
}
.dropdown-menu.dropmenu-light-danger {
  background-color: rgba(var(--danger-rgb), 0.1);
  backdrop-filter: blur(2rem);
}
.dropdown-menu.dropmenu-light-danger .dropdown-item:hover, .dropdown-menu.dropmenu-light-danger .dropdown-item:focus, .dropdown-menu.dropmenu-light-danger .dropdown-item:active, .dropdown-menu.dropmenu-light-danger .dropdown-item.active {
  color: var(--white);
  background-color: var(--danger) !important;
}

.dropdown .online {
  position: absolute;
  font-size: 8px;
  right: -3px;
  bottom: -1px;
  z-index: 1;
}
.dropdown .btn {
  font-weight: normal;
}

.filter-dropdown-menu .filter-header {
  padding: 16px 20px;
}
.filter-dropdown-menu .filter-set-content {
  margin-bottom: 16px;
}
.filter-dropdown-menu .filter-set-content .filter-set-content-head a {
  font-weight: 600;
  position: relative;
  padding-left: 20px;
  display: block;
}
.filter-dropdown-menu .filter-set-content .filter-set-content-head a::before {
  content: "\ea61";
  font-family: "tabler-icons";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  font-size: 14px;
}
.filter-dropdown-menu .filter-set-content .filter-set-content-head a:not(.collapsed)::before {
  content: "\ea5f";
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.form-control {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--body-color);
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  box-shadow: var(--box-shadow);
}
/* Many list views embed a <select> with only a JS-hook class (e.g.
   class="changelevel"/"re-assign" - no Bootstrap form-select/form-control
   styling class) for quick inline row edits - those render with the
   browser's native unstyled dropdown, clashing with the pill-shaped
   inputs/buttons everywhere else. Give any select that isn't already
   Bootstrap-styled the same pill treatment as .form-control. Excluding by
   .form-select/.form-control specifically (not :not([class]), which would
   wrongly skip every select that merely has an unrelated JS-hook class). */
select:not(.form-select):not(.form-control) {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--body-color);
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  box-shadow: var(--box-shadow);
  cursor: pointer;
}
/* Sếp's own request: textareas were either too round (inheriting
   .form-control's 50px pill radius, meant for single-line inputs, which
   looks odd on a taller multi-line box) or not round at all (a plain
   <textarea class="chat">/"content_care" with no Bootstrap class renders
   with the browser's own near-square default). A light, consistent
   radius for both cases - .form-control's own radius overridden down for
   textareas specifically, and any unstyled textarea given the same
   border/background theme treatment already given to unstyled <select>
   above. */
textarea.form-control {
  border-radius: 10px;
}
textarea:not(.form-control) {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--body-color);
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: var(--box-shadow);
}
/* Sếp's own request: ZF1 header.phtml's "Tỷ giá Vốn hôm nay"/"Hàng lô về
   kho Việt Nam" widgets, ported to the top of the sidebar (layout.html.
   twig) instead of the header - v3's header has no spare room for ZF1's
   two 300px bordered boxes, and Sếp wanted these always-visible rather
   than tucked behind a click-to-open dropdown. Compact equivalent of
   ZF1's own green-bordered-box look, sized for the sidebar's width. */
/* Sếp's own follow-up: #sidebar-menu (the parent this lives in) already
   has padding:16px on all sides - this widget's own 16px horizontal
   padding on top of that inset the box an extra 16px past the menu
   items below it (which only get their own padding from <a>'s 15px,
   inside that SAME single 16px container inset). Dropping the
   horizontal padding here lets the box use the parent's inset only, so
   its left/right edges line up with the menu's own row width. */
.header-widgets-sidebar {
  padding: 4px 0 8px;
}
.header-widget-box {
  border: 1px solid var(--success);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 12px;
}
.header-widget-title {
  color: var(--success);
  font-weight: 600;
  margin-bottom: 4px;
}
.header-widget-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.header-widget-row .edit_tygiavon {
  border-bottom: 1px dotted var(--success);
  cursor: pointer;
}
/* Sếp's own request: every timestamp shown as supplementary info next to
   (above/below) a main piece of text or a link, system-wide, should share
   one class/color so it reads as secondary rather than competing with the
   text next to it - same #9E9E9E already used for the sidebar widgets'
   own "last updated" line above. Deliberately just a color, no font-size/
   weight - each call site keeps whatever size it already had. */
.text-time {
  color: #9E9E9E;
  white-space: nowrap;
}
/* Sếp's own request: setting/alertlist's filter popup (fancybox) had 6
   fields side by side in one row, each sized to its own content
   (date inputs narrower than a "Chờ chuyển cho CSKH" select) - uneven
   widths, and the row's total width forced the popup wider than it
   needed to be. Split into 2 rows in the template; this gives every
   field the same width regardless of type, so the two rows line up
   cleanly instead of a ragged mix of narrow/wide controls. */
.alertlist-filter-field {
  width: 150px;
}
/* Sếp's own follow-up: rate value and its "last updated" timestamp now
   sit on the same row (moved from its own block-level div below into an
   inline flex sibling next to the value) - nowrap so the date itself
   never wraps mid-text inside that narrower shared row. */
.header-widget-time {
  font-size: 10px;
  color: #9E9E9E;
  white-space: nowrap;
}
/* Sếp's own request: "Hàng lô về kho Việt Nam" - only the count itself
   (the nested .text-danger span) should stand out; the surrounding
   "mã Order"/"mã Ký gửi" wording is still part of the same <a> (so the
   whole thing stays one click target) but shouldn't pick up the site-
   wide link color, or the count no longer reads as the one highlighted
   part of the sentence. */
.header-widget-count-link {
  color: var(--body-color);
}
/* Sếp's own follow-up: the topbar's "phiếu xuất hàng"/"thông báo" count
   badges used Bootstrap's .badge class name, which this theme's OWN
   .topbar-link .badge rule also targets - that rule is designed as a
   plain unread-indicator DOT (width/height:8px, font-size:0, no room for
   digits), not a real number badge, so the count text was getting
   squashed down to invisible inside an 8px circle. Own class name
   instead of .badge, sized to actually fit 1-2 digits. */
.header-count-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.form-control:focus {
  border-color: var(--border-color);
  background-color: var(--white);
  outline: 0;
  box-shadow: none;
}

.form-control-sm {
  font-size: 12px;
  padding: 5px 12px;
}

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

/* Sếp's own request: inputs embedded directly in table cells (weight/price/
   quantity/fee/shop-code inline editors, jeditable's own auto-generated
   <input> - many with only a JS-hook class, no Bootstrap form-control) get
   the same pill shape as .form-control above, sized like .form-control-sm
   to fit a table row's tighter vertical rhythm. Scoped to inputs actually
   inside a .table; excludes checkbox/radio/file/button/submit/hidden
   (native widgets that shouldn't be pill-styled) and anything already
   Bootstrap-classed (avoid doubling up), same exclusion pattern as the
   unstyled-<select> rule above. */
.table input:not(.form-control):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=button]):not([type=submit]):not([type=hidden]) {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--body-color);
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  box-shadow: var(--box-shadow);
  height: auto;
}

/* Sếp's own request: buttons/selects/inputs sitting inside a listing
   table's <table> markup should always render "xs"-small, no matter
   what Bootstrap size class (sm, or none = full size) they were given
   - a control sized for a filter form above the table looks oversized
   once it's dropped into a dense table row. */
.table .btn {
  font-size: 12px !important;
  padding: 4px 8px !important;
}
.table input.form-control,
.table textarea.form-control {
  font-size: 12px !important;
  padding: 4px 8px !important;
}
/* .form-select keeps 26px on the right - its Bootstrap background-image
   caret sits at "right .75rem" (12px) and is 16px wide, so anything
   tighter than ~28px would let the text run under the arrow. Bare
   selects use the browser's own native arrow (not a background-image),
   which reserves its own space regardless of our padding, so they can
   go tight on both sides. */
.table .form-select {
  font-size: 12px !important;
  padding: 2px 26px 2px 8px !important;
}
.table select:not(.form-select):not(.form-control) {
  font-size: 12px !important;
  padding: 2px 8px !important;
}

input.form-control[type=color],
input.form-control[type=range] {
  min-height: 39px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-check-label {
  font-weight: 400;
}

.custom-select.is-invalid:focus,
.form-control.is-invalid:focus,
.custom-select:invalid:focus,
.form-control:invalid:focus,
.custom-select.is-valid:focus,
.form-control.is-valid:focus,
.custom-select:valid:focus,
.form-control:valid:focus {
  box-shadow: none !important;
}

select.form-control:not([size]):not([multiple]) {
  height: 2.375rem;
}

select.form-control-sm:not([size]):not([multiple]) {
  height: 2rem;
}

.form-select {
  font-size: 14px;
  border-radius: 50px;
}
.form-select:focus {
  box-shadow: none;
}

.form-label {
  color: var(--heading-color);
}

.password-eye {
  cursor: pointer;
}
.password-eye:before {
  font-family: tabler-icons;
  content: "\ea9a";
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  vertical-align: middle;
  line-height: 1.2;
  font-size: 16px;
}

.show-password .password-eye:before {
  content: "\f06d1";
}

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

.form-checkbox-secondary .form-check-input:checked,
.form-radio-secondary .form-check-input:checked {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.form-checkbox-success .form-check-input:checked,
.form-radio-success .form-check-input:checked {
  background-color: var(--success);
  border-color: var(--success);
}

.form-checkbox-info .form-check-input:checked,
.form-radio-info .form-check-input:checked {
  background-color: var(--info);
  border-color: var(--info);
}

.form-checkbox-warning .form-check-input:checked,
.form-radio-warning .form-check-input:checked {
  background-color: var(--warning);
  border-color: var(--warning);
}

.form-checkbox-danger .form-check-input:checked,
.form-radio-danger .form-check-input:checked {
  background-color: var(--danger);
  border-color: var(--danger);
}

.form-checkbox-dark .form-check-input:checked,
.form-radio-dark .form-check-input:checked {
  background-color: var(--dark);
  border-color: var(--dark);
}

.form-checkbox-light .form-check-input:checked,
.form-radio-light .form-check-input:checked {
  background-color: var(--light);
  border-color: var(--light);
}

.form-checkbox-orange .form-check-input:checked,
.form-radio-orange .form-check-input:checked {
  background-color: var(--orange);
  border-color: var(--orange);
}

.form-checkbox-purple .form-check-input:checked,
.form-radio-purple .form-check-input:checked {
  background-color: var(--purple);
  border-color: var(--purple);
}

.form-checkbox-pink .form-check-input:checked,
.form-radio-pink .form-check-input:checked {
  background-color: var(--pink);
  border-color: var(--pink);
}

.form-checkbox-indigo .form-check-input:checked,
.form-radio-indigo .form-check-input:checked {
  background-color: var(--indigo);
  border-color: var(--indigo);
}

.form-checkbox-teal .form-check-input:checked,
.form-radio-teal .form-check-input:checked {
  background-color: var(--teal);
  border-color: var(--teal);
}

.form-check .form-check-input {
  border: 1px solid var(--border-color) !important;
  background-color: var(--white);
}

/* Sếp's own request: switch bị lệch vị trí so với label ké bên. Bootstrap's
   .form-check-input{margin-top:.25em} is a nudge designed for the OLD
   float-based .form-check layout - once the wrapper is switched to
   d-flex/d-inline-flex + align-items-center (done for every switch+label
   pair ported to Bootstrap Switch, all tagged with gap-1), that margin-top
   just adds on top of the already-centered flex position and pushes the
   switch a few px below the label instead of level with it. Zero it out
   only for these flex-converted switches. */
.form-switch.gap-1 .form-check-input {
  margin-top: 0;
}

.card-radio {
  padding: 0;
}
.card-radio .form-check-label {
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  position: relative;
  padding-right: 32px;
}
.card-radio .form-check-label:hover {
  cursor: pointer;
}
.card-radio .form-check-input {
  display: none;
}
.card-radio .form-check-input:checked + .form-check-label:before {
  content: "\f704";
  font-family: tabler-icons;
  position: absolute;
  top: 7px;
  right: 6px;
  font-size: 16px;
  color: var(--secondary);
}
.card-radio.dark .form-check-input:checked + .form-check-label:before {
  color: var(--white);
}

/* Input Group */
.input-group-flat:focus-within {
  border-radius: 6px;
}
.input-group-flat:focus-within .form-control,
.input-group-flat:focus-within .input-group-text {
  border-color: var(--border-color) !important;
  background-color: var(--white);
}
.input-group-flat .form-control:focus {
  border-color: var(--border-color);
  box-shadow: none;
}
.input-group-flat .form-control:not(:last-child) {
  border-right: 0;
}
.input-group-flat .form-control:not(:first-child) {
  border-left: 0;
}
.input-group-flat .input-group-text {
  background-color: var(--white);
  border-color: var(--border-color);
  color: var(--heading-color);
}
.input-group-flat .input-group-text:first-child {
  padding-right: 0;
}
.input-group-flat .input-group-text:last-child {
  padding-left: 0;
}

.input-icon-addon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  pointer-events: none;
  font-size: 14px;
  padding: 0 12px 0 12px;
}
.input-icon-addon:last-child {
  right: 0;
  left: auto;
}

.input-icon-start .form-control {
  padding-left: 32px;
}

.input-icon-end .input-icon-addon {
  right: 0;
  left: auto;
}
.input-icon-end .form-control {
  padding-right: 32px;
}

.input-group-text,
.col-form-label {
  color: var(--heading-color);
  background-color: transparent;
}

.form-control::placeholder {
  color: var(--gray-400);
  font-weight: 400;
  opacity: 1;
}

.form-control:disabled {
  background-color: var(--light);
  opacity: 1;
}

.form-control::file-selector-button {
  padding: 0.5rem 0.77rem;
  margin: -0.5rem -0.77rem;
  margin-inline-end: 0.77rem;
  color: var(--body-color);
  background-color: var(--light);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.choices {
  margin-bottom: 0;
}
.choices[data-type*=select-one] {
  cursor: pointer;
}
.choices[data-type*=select-one] .choices__input {
  padding: 0.5rem 0.77rem !important;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  font-size: 0.875rem;
  border-radius: 5px;
  color: var(--body-color);
  margin-bottom: 10px;
}
.choices[data-type*=select-one]:after {
  content: "\ea5f";
  position: absolute;
  border: 0;
  top: 18px;
  right: 12px;
  left: auto;
  font-size: 20px;
  font-family: tabler-icons;
  width: auto;
  height: auto;
  margin-top: 0;
  transform: translateY(-50%);
  transition: transform 0.2s ease-in-out;
  pointer-events: none;
}
.choices[data-type*=select-one].is-open:after {
  margin-top: 0;
  transform: translateY(-50%) rotate(-180deg);
}
.choices[data-type*=select-one] .choices__button {
  right: 20px;
}
.choices[data-type*=select-multiple] .choices__inner, .choices[data-type*=text] .choices__inner {
  cursor: text;
  padding: 0.5rem 0.75rem !important;
  min-height: 38px;
  display: flex;
  align-items: center;
  overflow-x: auto;
}
.choices[data-type*=select-multiple] .choices__button, .choices[data-type*=text] .choices__button {
  border-left: 0;
  border-right: 0;
  filter: brightness(0);
  margin-left: 4px;
}
.choices[data-type*=select-multiple] .choices__list--dropdown, .choices[data-type*=text] .choices__list--dropdown {
  padding-bottom: 10px;
}
.choices[data-type*=select-multiple] .choices__list--dropdown .choices__list, .choices[data-type*=text] .choices__list--dropdown .choices__list {
  margin-bottom: 0;
}
.choices[data-type*=select-multiple] .choices__input {
  padding-top: 3px;
}
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
  background-color: var(--light);
  cursor: not-allowed;
  -webkit-user-select: none;
  user-select: none;
}

.input-light .choices__inner {
  background-color: var(--light);
  border: none;
}

.choices__inner {
  display: inline-block;
  padding: 0.5rem 0.77rem !important;
  vertical-align: middle;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 5px !important;
  font-size: 0.875rem;
  min-height: auto;
  overflow: hidden;
}
.choices__inner .choices__list--single {
  padding: 0 !important;
}

.is-focused .choices__inner,
.is-open .choices__inner {
  border-color: var(--border-color);
}

.choices__list--multiple {
  display: inline-flex;
}
.choices__list--multiple .choices__item {
  display: inline-block;
  vertical-align: initial;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 13px;
  font-weight: 500;
  margin: 0 5px 0 0;
  color: var(--gray-900);
  background-color: var(--light);
  border: 1px solid var(--border-color);
  word-break: break-all;
  box-sizing: border-box;
  white-space: nowrap;
}
.choices__list--multiple .choices__item.is-highlighted {
  background-color: var(--primary);
  border: 1px solid var(--primary);
}
.choices__list--multiple .choices__item[data-deletable] {
  padding-right: 5px;
}

.is-disabled .choices__list--multiple .choices__item {
  background-color: var(--light-transparent);
  border: 1px solid var(--white);
}

.choices__list--dropdown {
  padding: 10px 10px 20px 10px;
  background-color: var(--white) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--box-shadow);
  margin-top: 0 !important;
  border-radius: 5px;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  transform: translateY(1px);
  max-height: 300px;
}
.choices__list--dropdown.is-active {
  animation-name: DropDownSlide;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--light) !important;
}
.choices__list--dropdown .choices__list {
  margin: 0 -10px -16px;
}
.choices__list--dropdown .choices__list::-webkit-scrollbar {
  -webkit-appearance: none;
}
.choices__list--dropdown .choices__list::-webkit-scrollbar-thumb {
  background-color: var(--gray-100);
  border-radius: 5px;
  border: 2px solid var(--white);
}
.choices__list--dropdown .choices__list::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: var(--white);
}
.choices__list--dropdown .has-no-results {
  font-style: italic;
  font-weight: 500;
}
.choices__list--dropdown .choices__item--selectable:after {
  display: none;
}
.choices__list--dropdown .choices__item {
  font-size: 0.875rem;
  padding: 0.4rem 0.9375rem 0.4rem 16px;
}

.is-open .choices__list--dropdown {
  border-color: transparent;
}

.is-flipped .choices__list--dropdown.is-active {
  border-radius: 5px;
  animation-name: DropDownSlideDown;
  transform: translateY(-1px);
}

.choices__heading {
  font-weight: 600;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--gray-500);
  font-size: 12px;
}

.choices__input {
  display: inline-block;
  background-color: var(--white);
  color: var(--body-color);
  font-size: 0.875rem;
  margin-bottom: 0;
  padding: 0 0 0 2px;
  vertical-align: baseline;
  border: 0;
  border-radius: 0;
  max-width: 100%;
}
.choices__input::placeholder {
  color: var(--gray-400);
}

.choices__placeholder {
  color: var(--gray-400);
  opacity: 1;
}

[data-bs-theme=dark] .choices[data-type*=select-one] .choices__button {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[dir=rtl] .choices[data-type*=select-one]:after {
  left: 12px;
  right: auto;
}

.select2-container {
  width: 100% !important;
}
.select2-container .select2-selection--single {
  border: 1px solid var(--border-color);
  height: calc(1.5em + 1rem + 2px);
  background-color: var(--white);
  outline: none;
  border-radius: 5px;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 38px;
  padding-left: 12px;
  padding-right: 28px;
  color: var(--body-color);
}
.select2-container .select2-selection--single .select2-selection__arrow {
  height: 34px;
  width: 38px;
  position: absolute;
  top: 1px;
  right: 3px;
}
.select2-container .select2-selection--multiple {
  min-height: calc(1.5em + 1rem + 2px);
  border: 1px solid var(--border-color) !important;
  background-color: var(--white);
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
  padding: 1px 12px;
}
.select2-container .select2-selection--multiple .select2-search__field {
  border: 0;
  color: var(--body-color);
}
.select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: var(--primary);
  border: none;
  color: var(--white);
  border-radius: 5px;
  padding: 0px 7px 0 0;
  margin-top: 6px;
}
.select2-container .select2-search--inline .select2-search__field {
  margin-top: 7px;
  font-family: "Inter", sans-serif;
}
.select2-container .select2-search textarea::placeholder {
  color: var(--gray-400);
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: var(--gray-900);
  border-width: 1px 0 0 1px !important;
  margin-top: 3px;
}
.select2-container--default .select2-results__option--selected {
  background-color: var(--light);
}
.select2-container--default .select2-search--dropdown {
  padding: 10px;
  background-color: var(--white);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  outline: none;
  border: 1px solid var(--border-color);
  background-color: var(--white);
  color: var(--body-color);
  border-radius: 5px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary);
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--white);
  color: var(--body-color);
}
.select2-container--default .select2-results__option[aria-selected=true]:hover {
  background-color: var(--primary);
  color: var(--white);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  cursor: text;
  right: 1px;
  left: auto;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 36px;
  padding-right: 5px;
}

.select2-results__option {
  padding: 6px 12px;
}

.select2-dropdown {
  border: 1px solid var(--border-color);
  box-shadow: var(--box-shadow);
  background-color: var(--white);
  z-index: 1056;
}

.select2-results__options {
  scrollbar-width: thin;
}

[dir=rtl] .select2-container .select2-selection--multiple .select2-selection__choice {
  padding: 0 0 0 7px;
}

.form-wizard-header {
  margin-left: -20px;
  margin-right: -20px;
  background-color: var(--light);
}

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

.form-checkbox-secondary .form-check-input:checked,
.form-radio-secondary .form-check-input:checked {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.form-checkbox-success .form-check-input:checked,
.form-radio-success .form-check-input:checked {
  background-color: var(--success);
  border-color: var(--success);
}

.form-checkbox-info .form-check-input:checked,
.form-radio-info .form-check-input:checked {
  background-color: var(--info);
  border-color: var(--info);
}

.form-checkbox-warning .form-check-input:checked,
.form-radio-warning .form-check-input:checked {
  background-color: var(--warning);
  border-color: var(--warning);
}

.form-checkbox-danger .form-check-input:checked,
.form-radio-danger .form-check-input:checked {
  background-color: var(--danger);
  border-color: var(--danger);
}

.form-checkbox-light .form-check-input:checked,
.form-radio-light .form-check-input:checked {
  background-color: var(--light);
  border-color: var(--light);
}

.form-checkbox-dark .form-check-input:checked,
.form-radio-dark .form-check-input:checked {
  background-color: var(--dark);
  border-color: var(--dark);
}

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

.dataTables_length {
  padding: 20px 0 0;
  float: left;
}

.dataTables_paginate {
  margin-top: 20px !important;
}

.dataTables_info {
  display: none;
}

.input-group-text {
  background: var(--white);
  border: 1px solid var(--border-color) !important;
}
.input-group-text i {
  font-size: 14px;
}

.form-check-input:focus {
  border-color: var(--border-color);
  outline: 0;
  box-shadow: none;
}

.reportrange-picker {
  padding: 8px 12px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  background-color: transparent;
  color: var(--heading-color);
  background-color: var(--white);
}

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

.status-radio:checked,
.status-radio:not(:checked) {
  position: absolute;
  left: -9999px;
}

.status-radio:checked + label,
.status-radio:not(:checked) + label {
  position: relative;
  padding-left: 24px;
  cursor: pointer;
  line-height: 16px;
  display: inline-block;
  color: var(--gray-900);
}

.status-radio:checked + label:before,
.status-radio:not(:checked) + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-color);
  border-radius: 100%;
  background: var(--light);
}

.status-radio:checked + label:before {
  background: var(--primary);
  border-color: var(--primary);
}

.status-radio[type=radio]:checked + label:after,
.status-radio[type=radio]:not(:checked) + label:after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--white);
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.modal-content {
  box-shadow: var(--box-shadow);
  background-color: var(--white);
  border-color: var(--border-color);
}

.modal-title {
  color: var(--heading-color);
  font-size: 18px;
}

.modal-full-width {
  width: 95%;
  max-width: none;
}

.modal-top {
  margin: 0 auto;
}

.modal.show .modal-right,
.modal.show .modal-left {
  transform: translate(0, 0) !important;
}

.modal-bottom {
  display: flex;
  flex-flow: column nowrap;
  -ms-flex-pack: end;
  justify-content: flex-end;
  height: 100%;
  margin: 0 auto;
  align-content: center;
}

.modal-filled {
  color: var(--white);
}
.modal-filled .modal-header {
  background-color: rgba(var(--white-rgb), 0.1);
}
.modal-filled .modal-title {
  color: var(--white);
}
.modal-filled .modal-header,
.modal-filled .modal-footer {
  border: none;
}

.modal-backdrop {
  backdrop-filter: blur(10px);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
.modal-header .btn-close {
  background-color: var(--danger-transparent);
  border-color: var(--danger-transparent) !important;
  font-size: 10px;
  padding: 8px !important;
  border-radius: 50%;
  color: var(--danger);
  opacity: 1;
  position: relative;
}
.modal-header .btn-close::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--danger); /* icon color */
  mask: var(--bs-btn-close-bg) center/1em auto no-repeat;
  -webkit-mask: var(--bs-btn-close-bg) center/1em auto no-repeat;
}
.modal-header .btn-close:focus {
  box-shadow: none !important;
}
.modal-header .btn-close.btn-close-modal {
  background: none;
  color: var(--body-color);
  opacity: 1;
  font-size: 24px;
  display: flex;
  align-items: center;
}
.modal-header .btn-close.btn-close-modal:hover {
  color: var(--danger);
}

.filter-header .btn-close {
  background-color: var(--danger-transparent);
  font-size: 8px;
  padding: 8px;
  border-radius: 50%;
  color: var(--danger) !important;
  opacity: 1;
  position: relative;
}
.filter-header .btn-close::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--danger); /* icon color */
  mask: var(--bs-btn-close-bg) center/1em auto no-repeat;
  -webkit-mask: var(--bs-btn-close-bg) center/1em auto no-repeat;
}
.filter-header .btn-close:focus {
  box-shadow: none !important;
}

.modal-sm {
  min-width: 400px;
}

.auth-brand .logo-dark {
  display: block;
}
.auth-brand .logo-light {
  display: none;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.nav-tabs > li > a,
.nav-pills > li > a {
  font-weight: 500;
  color: var(--gray-600);
}
/* Sếp's own request: the status-filter pill row (e.g. orderkilo/list's
   Tất cả/Đã hủy/...) should look like an actual rounded pill/capsule when
   active, not the near-square corner Bootstrap ships by default
   (--bs-nav-pills-border-radius defaults to the plain --bs-border-radius,
   ~6px). Overriding the variable itself here - not .nav-link's own
   border-radius property directly - since Bootstrap's `.nav-pills .nav-link
   { border-radius: var(--bs-nav-pills-border-radius) }` is (0,2,0)
   specificity, higher than a plain `.nav-pills > li > a` override would be. */
.nav-pills {
  --bs-nav-pills-border-radius: 50rem;
}
/* Sếp's own request: the status-filter pill row sat right against
   whatever came before/after it - some views used mb-0, others mb-3,
   none had any top margin at all. !important needed to beat Bootstrap's
   own mb-N / mt-N utility classes (also !important) that templates
   already carry, without having to touch all 10 view files. */
.nav-pills {
  margin: 1.25rem 0 !important;
}
/* Sếp's own request: uppercase every status-filter pill's label. */
.nav-pills .nav-link {
  text-transform: uppercase;
}

.bg-nav-pills {
  background-color: var(--light);
}

/* Sếp's own request: pill active dùng --table-header-bg (#ededed) quá sát nền
   body (#f7f8f9) nên bị lẫn - đổi sang tông xám đậm hơn rõ rệt (#d6d9df) để pill
   đang chọn nổi hẳn. Không sửa --table-header-bg vì header table dùng chung biến
   đó, chỉ override riêng bg của pill. */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #d6d9df;
  color: var(--heading-color);
}

.nav-tabs.nav-bordered {
  border-bottom: 1px solid var(--border-color);
}
.nav-tabs.nav-bordered .nav-item .nav-link {
  border: 0;
  color: var(--gray-600);
}
.nav-tabs.nav-bordered .nav-item .nav-link.active {
  color: var(--gray-900);
  border-bottom: 2px solid var(--primary);
  color: var(--primary);
}
.nav-tabs.nav-border .nav-item .nav-link {
  border: 1px solid var(--border-color);
  border-radius: 6px;
}
.nav-tabs.nav-border .nav-item .nav-link.active {
  border-color: var(--primary);
}

.nav-tabs.nav-bordered-primary.nav-tabs-top .nav-item .nav-link:hover, .nav-tabs.nav-bordered-primary.nav-tabs-top .nav-item .nav-link:focus {
  color: #E41F07;
}
.nav-tabs.nav-bordered-primary.nav-tabs-top .nav-item .nav-link.active {
  border-top: 2px solid #E41F07;
  border-bottom: 0;
  color: #E41F07;
}
.nav-tabs.nav-bordered-primary.nav-tabs-top li a {
  border-width: 0 0 2px 0;
}
.nav-tabs.nav-bordered-primary.nav-tabs-top li a.active, .nav-tabs.nav-bordered-primary.nav-tabs-top li a:hover {
  border-bottom-color: var(--primary);
  background: transparent;
  border-radius: 0;
  color: var(--primary);
}
.nav-tabs.nav-bordered-primary .nav-item .nav-link:hover, .nav-tabs.nav-bordered-primary .nav-item .nav-link:focus {
  color: #E41F07;
}
.nav-tabs.nav-bordered-primary .nav-item .nav-link.active {
  border-bottom: 2px solid #E41F07;
  color: #E41F07;
}
.nav-tabs.nav-solid-primary {
  border: 0;
}
.nav-tabs.nav-solid-primary.nav-tabs-rounded li a {
  border-radius: 50px;
}
.nav-tabs.nav-solid-primary.nav-tabs-rounded li a:hover {
  border-color: transparent;
  color: #E41F07;
}
.nav-tabs.nav-solid-primary.nav-tabs-rounded li a.active {
  background-color: #E41F07;
  border-color: #E41F07;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-primary.nav-tabs-rounded-fill li a {
  border-color: var(--border-color);
}
.nav-tabs.nav-solid-primary.nav-tabs-rounded-fill li a.active {
  background-color: #E41F07;
  border-color: #E41F07;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-primary li a:hover {
  border-color: transparent;
  color: #E41F07;
}
.nav-tabs.nav-solid-primary li a.active {
  background-color: #E41F07;
  border-color: #E41F07;
  color: var(--white);
  border-radius: 0;
}
.nav-tabs.nav-solid-primary li a.active:hover {
  color: var(--white);
}

.nav-tabs.nav-bordered-secondary.nav-tabs-top .nav-item .nav-link:hover, .nav-tabs.nav-bordered-secondary.nav-tabs-top .nav-item .nav-link:focus {
  color: #FFA201;
}
.nav-tabs.nav-bordered-secondary.nav-tabs-top .nav-item .nav-link.active {
  border-top: 2px solid #FFA201;
  border-bottom: 0;
  color: #FFA201;
}
.nav-tabs.nav-bordered-secondary.nav-tabs-top li a {
  border-width: 0 0 2px 0;
}
.nav-tabs.nav-bordered-secondary.nav-tabs-top li a.active, .nav-tabs.nav-bordered-secondary.nav-tabs-top li a:hover {
  border-bottom-color: var(--primary);
  background: transparent;
  border-radius: 0;
  color: var(--primary);
}
.nav-tabs.nav-bordered-secondary .nav-item .nav-link:hover, .nav-tabs.nav-bordered-secondary .nav-item .nav-link:focus {
  color: #FFA201;
}
.nav-tabs.nav-bordered-secondary .nav-item .nav-link.active {
  border-bottom: 2px solid #FFA201;
  color: #FFA201;
}
.nav-tabs.nav-solid-secondary {
  border: 0;
}
.nav-tabs.nav-solid-secondary.nav-tabs-rounded li a {
  border-radius: 50px;
}
.nav-tabs.nav-solid-secondary.nav-tabs-rounded li a:hover {
  border-color: transparent;
  color: #FFA201;
}
.nav-tabs.nav-solid-secondary.nav-tabs-rounded li a.active {
  background-color: #FFA201;
  border-color: #FFA201;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-secondary.nav-tabs-rounded-fill li a {
  border-color: var(--border-color);
}
.nav-tabs.nav-solid-secondary.nav-tabs-rounded-fill li a.active {
  background-color: #FFA201;
  border-color: #FFA201;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-secondary li a:hover {
  border-color: transparent;
  color: #FFA201;
}
.nav-tabs.nav-solid-secondary li a.active {
  background-color: #FFA201;
  border-color: #FFA201;
  color: var(--white);
  border-radius: 0;
}
.nav-tabs.nav-solid-secondary li a.active:hover {
  color: var(--white);
}

.nav-tabs.nav-bordered-success.nav-tabs-top .nav-item .nav-link:hover, .nav-tabs.nav-bordered-success.nav-tabs-top .nav-item .nav-link:focus {
  color: #1ABE17;
}
.nav-tabs.nav-bordered-success.nav-tabs-top .nav-item .nav-link.active {
  border-top: 2px solid #1ABE17;
  border-bottom: 0;
  color: #1ABE17;
}
.nav-tabs.nav-bordered-success.nav-tabs-top li a {
  border-width: 0 0 2px 0;
}
.nav-tabs.nav-bordered-success.nav-tabs-top li a.active, .nav-tabs.nav-bordered-success.nav-tabs-top li a:hover {
  border-bottom-color: var(--primary);
  background: transparent;
  border-radius: 0;
  color: var(--primary);
}
.nav-tabs.nav-bordered-success .nav-item .nav-link:hover, .nav-tabs.nav-bordered-success .nav-item .nav-link:focus {
  color: #1ABE17;
}
.nav-tabs.nav-bordered-success .nav-item .nav-link.active {
  border-bottom: 2px solid #1ABE17;
  color: #1ABE17;
}
.nav-tabs.nav-solid-success {
  border: 0;
}
.nav-tabs.nav-solid-success.nav-tabs-rounded li a {
  border-radius: 50px;
}
.nav-tabs.nav-solid-success.nav-tabs-rounded li a:hover {
  border-color: transparent;
  color: #1ABE17;
}
.nav-tabs.nav-solid-success.nav-tabs-rounded li a.active {
  background-color: #1ABE17;
  border-color: #1ABE17;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-success.nav-tabs-rounded-fill li a {
  border-color: var(--border-color);
}
.nav-tabs.nav-solid-success.nav-tabs-rounded-fill li a.active {
  background-color: #1ABE17;
  border-color: #1ABE17;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-success li a:hover {
  border-color: transparent;
  color: #1ABE17;
}
.nav-tabs.nav-solid-success li a.active {
  background-color: #1ABE17;
  border-color: #1ABE17;
  color: var(--white);
  border-radius: 0;
}
.nav-tabs.nav-solid-success li a.active:hover {
  color: var(--white);
}

.nav-tabs.nav-bordered-info.nav-tabs-top .nav-item .nav-link:hover, .nav-tabs.nav-bordered-info.nav-tabs-top .nav-item .nav-link:focus {
  color: #2F80ED;
}
.nav-tabs.nav-bordered-info.nav-tabs-top .nav-item .nav-link.active {
  border-top: 2px solid #2F80ED;
  border-bottom: 0;
  color: #2F80ED;
}
.nav-tabs.nav-bordered-info.nav-tabs-top li a {
  border-width: 0 0 2px 0;
}
.nav-tabs.nav-bordered-info.nav-tabs-top li a.active, .nav-tabs.nav-bordered-info.nav-tabs-top li a:hover {
  border-bottom-color: var(--primary);
  background: transparent;
  border-radius: 0;
  color: var(--primary);
}
.nav-tabs.nav-bordered-info .nav-item .nav-link:hover, .nav-tabs.nav-bordered-info .nav-item .nav-link:focus {
  color: #2F80ED;
}
.nav-tabs.nav-bordered-info .nav-item .nav-link.active {
  border-bottom: 2px solid #2F80ED;
  color: #2F80ED;
}
.nav-tabs.nav-solid-info {
  border: 0;
}
.nav-tabs.nav-solid-info.nav-tabs-rounded li a {
  border-radius: 50px;
}
.nav-tabs.nav-solid-info.nav-tabs-rounded li a:hover {
  border-color: transparent;
  color: #2F80ED;
}
.nav-tabs.nav-solid-info.nav-tabs-rounded li a.active {
  background-color: #2F80ED;
  border-color: #2F80ED;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-info.nav-tabs-rounded-fill li a {
  border-color: var(--border-color);
}
.nav-tabs.nav-solid-info.nav-tabs-rounded-fill li a.active {
  background-color: #2F80ED;
  border-color: #2F80ED;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-info li a:hover {
  border-color: transparent;
  color: #2F80ED;
}
.nav-tabs.nav-solid-info li a.active {
  background-color: #2F80ED;
  border-color: #2F80ED;
  color: var(--white);
  border-radius: 0;
}
.nav-tabs.nav-solid-info li a.active:hover {
  color: var(--white);
}

.nav-tabs.nav-bordered-warning.nav-tabs-top .nav-item .nav-link:hover, .nav-tabs.nav-bordered-warning.nav-tabs-top .nav-item .nav-link:focus {
  color: #f9b801;
}
.nav-tabs.nav-bordered-warning.nav-tabs-top .nav-item .nav-link.active {
  border-top: 2px solid #f9b801;
  border-bottom: 0;
  color: #f9b801;
}
.nav-tabs.nav-bordered-warning.nav-tabs-top li a {
  border-width: 0 0 2px 0;
}
.nav-tabs.nav-bordered-warning.nav-tabs-top li a.active, .nav-tabs.nav-bordered-warning.nav-tabs-top li a:hover {
  border-bottom-color: var(--primary);
  background: transparent;
  border-radius: 0;
  color: var(--primary);
}
.nav-tabs.nav-bordered-warning .nav-item .nav-link:hover, .nav-tabs.nav-bordered-warning .nav-item .nav-link:focus {
  color: #f9b801;
}
.nav-tabs.nav-bordered-warning .nav-item .nav-link.active {
  border-bottom: 2px solid #f9b801;
  color: #f9b801;
}
.nav-tabs.nav-solid-warning {
  border: 0;
}
.nav-tabs.nav-solid-warning.nav-tabs-rounded li a {
  border-radius: 50px;
}
.nav-tabs.nav-solid-warning.nav-tabs-rounded li a:hover {
  border-color: transparent;
  color: #f9b801;
}
.nav-tabs.nav-solid-warning.nav-tabs-rounded li a.active {
  background-color: #f9b801;
  border-color: #f9b801;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-warning.nav-tabs-rounded-fill li a {
  border-color: var(--border-color);
}
.nav-tabs.nav-solid-warning.nav-tabs-rounded-fill li a.active {
  background-color: #f9b801;
  border-color: #f9b801;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-warning li a:hover {
  border-color: transparent;
  color: #f9b801;
}
.nav-tabs.nav-solid-warning li a.active {
  background-color: #f9b801;
  border-color: #f9b801;
  color: var(--white);
  border-radius: 0;
}
.nav-tabs.nav-solid-warning li a.active:hover {
  color: var(--white);
}

.nav-tabs.nav-bordered-danger.nav-tabs-top .nav-item .nav-link:hover, .nav-tabs.nav-bordered-danger.nav-tabs-top .nav-item .nav-link:focus {
  color: #EF1E1E;
}
.nav-tabs.nav-bordered-danger.nav-tabs-top .nav-item .nav-link.active {
  border-top: 2px solid #EF1E1E;
  border-bottom: 0;
  color: #EF1E1E;
}
.nav-tabs.nav-bordered-danger.nav-tabs-top li a {
  border-width: 0 0 2px 0;
}
.nav-tabs.nav-bordered-danger.nav-tabs-top li a.active, .nav-tabs.nav-bordered-danger.nav-tabs-top li a:hover {
  border-bottom-color: var(--primary);
  background: transparent;
  border-radius: 0;
  color: var(--primary);
}
.nav-tabs.nav-bordered-danger .nav-item .nav-link:hover, .nav-tabs.nav-bordered-danger .nav-item .nav-link:focus {
  color: #EF1E1E;
}
.nav-tabs.nav-bordered-danger .nav-item .nav-link.active {
  border-bottom: 2px solid #EF1E1E;
  color: #EF1E1E;
}
.nav-tabs.nav-solid-danger {
  border: 0;
}
.nav-tabs.nav-solid-danger.nav-tabs-rounded li a {
  border-radius: 50px;
}
.nav-tabs.nav-solid-danger.nav-tabs-rounded li a:hover {
  border-color: transparent;
  color: #EF1E1E;
}
.nav-tabs.nav-solid-danger.nav-tabs-rounded li a.active {
  background-color: #EF1E1E;
  border-color: #EF1E1E;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-danger.nav-tabs-rounded-fill li a {
  border-color: var(--border-color);
}
.nav-tabs.nav-solid-danger.nav-tabs-rounded-fill li a.active {
  background-color: #EF1E1E;
  border-color: #EF1E1E;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-danger li a:hover {
  border-color: transparent;
  color: #EF1E1E;
}
.nav-tabs.nav-solid-danger li a.active {
  background-color: #EF1E1E;
  border-color: #EF1E1E;
  color: var(--white);
  border-radius: 0;
}
.nav-tabs.nav-solid-danger li a.active:hover {
  color: var(--white);
}

.nav-tabs.nav-bordered-dark.nav-tabs-top .nav-item .nav-link:hover, .nav-tabs.nav-bordered-dark.nav-tabs-top .nav-item .nav-link:focus {
  color: #0A0C0C;
}
.nav-tabs.nav-bordered-dark.nav-tabs-top .nav-item .nav-link.active {
  border-top: 2px solid #0A0C0C;
  border-bottom: 0;
  color: #0A0C0C;
}
.nav-tabs.nav-bordered-dark.nav-tabs-top li a {
  border-width: 0 0 2px 0;
}
.nav-tabs.nav-bordered-dark.nav-tabs-top li a.active, .nav-tabs.nav-bordered-dark.nav-tabs-top li a:hover {
  border-bottom-color: var(--primary);
  background: transparent;
  border-radius: 0;
  color: var(--primary);
}
.nav-tabs.nav-bordered-dark .nav-item .nav-link:hover, .nav-tabs.nav-bordered-dark .nav-item .nav-link:focus {
  color: #0A0C0C;
}
.nav-tabs.nav-bordered-dark .nav-item .nav-link.active {
  border-bottom: 2px solid #0A0C0C;
  color: #0A0C0C;
}
.nav-tabs.nav-solid-dark {
  border: 0;
}
.nav-tabs.nav-solid-dark.nav-tabs-rounded li a {
  border-radius: 50px;
}
.nav-tabs.nav-solid-dark.nav-tabs-rounded li a:hover {
  border-color: transparent;
  color: #0A0C0C;
}
.nav-tabs.nav-solid-dark.nav-tabs-rounded li a.active {
  background-color: #0A0C0C;
  border-color: #0A0C0C;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-dark.nav-tabs-rounded-fill li a {
  border-color: var(--border-color);
}
.nav-tabs.nav-solid-dark.nav-tabs-rounded-fill li a.active {
  background-color: #0A0C0C;
  border-color: #0A0C0C;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-dark li a:hover {
  border-color: transparent;
  color: #0A0C0C;
}
.nav-tabs.nav-solid-dark li a.active {
  background-color: #0A0C0C;
  border-color: #0A0C0C;
  color: var(--white);
  border-radius: 0;
}
.nav-tabs.nav-solid-dark li a.active:hover {
  color: var(--white);
}

.nav-tabs.nav-bordered-light.nav-tabs-top .nav-item .nav-link:hover, .nav-tabs.nav-bordered-light.nav-tabs-top .nav-item .nav-link:focus {
  color: #F7F8F9;
}
.nav-tabs.nav-bordered-light.nav-tabs-top .nav-item .nav-link.active {
  border-top: 2px solid #F7F8F9;
  border-bottom: 0;
  color: #F7F8F9;
}
.nav-tabs.nav-bordered-light.nav-tabs-top li a {
  border-width: 0 0 2px 0;
}
.nav-tabs.nav-bordered-light.nav-tabs-top li a.active, .nav-tabs.nav-bordered-light.nav-tabs-top li a:hover {
  border-bottom-color: var(--primary);
  background: transparent;
  border-radius: 0;
  color: var(--primary);
}
.nav-tabs.nav-bordered-light .nav-item .nav-link:hover, .nav-tabs.nav-bordered-light .nav-item .nav-link:focus {
  color: #F7F8F9;
}
.nav-tabs.nav-bordered-light .nav-item .nav-link.active {
  border-bottom: 2px solid #F7F8F9;
  color: #F7F8F9;
}
.nav-tabs.nav-solid-light {
  border: 0;
}
.nav-tabs.nav-solid-light.nav-tabs-rounded li a {
  border-radius: 50px;
}
.nav-tabs.nav-solid-light.nav-tabs-rounded li a:hover {
  border-color: transparent;
  color: #F7F8F9;
}
.nav-tabs.nav-solid-light.nav-tabs-rounded li a.active {
  background-color: #F7F8F9;
  border-color: #F7F8F9;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-light.nav-tabs-rounded-fill li a {
  border-color: var(--border-color);
}
.nav-tabs.nav-solid-light.nav-tabs-rounded-fill li a.active {
  background-color: #F7F8F9;
  border-color: #F7F8F9;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-light li a:hover {
  border-color: transparent;
  color: #F7F8F9;
}
.nav-tabs.nav-solid-light li a.active {
  background-color: #F7F8F9;
  border-color: #F7F8F9;
  color: var(--white);
  border-radius: 0;
}
.nav-tabs.nav-solid-light li a.active:hover {
  color: var(--white);
}

.nav-tabs.nav-bordered-orange.nav-tabs-top .nav-item .nav-link:hover, .nav-tabs.nav-bordered-orange.nav-tabs-top .nav-item .nav-link:focus {
  color: #EF5E25;
}
.nav-tabs.nav-bordered-orange.nav-tabs-top .nav-item .nav-link.active {
  border-top: 2px solid #EF5E25;
  border-bottom: 0;
  color: #EF5E25;
}
.nav-tabs.nav-bordered-orange.nav-tabs-top li a {
  border-width: 0 0 2px 0;
}
.nav-tabs.nav-bordered-orange.nav-tabs-top li a.active, .nav-tabs.nav-bordered-orange.nav-tabs-top li a:hover {
  border-bottom-color: var(--primary);
  background: transparent;
  border-radius: 0;
  color: var(--primary);
}
.nav-tabs.nav-bordered-orange .nav-item .nav-link:hover, .nav-tabs.nav-bordered-orange .nav-item .nav-link:focus {
  color: #EF5E25;
}
.nav-tabs.nav-bordered-orange .nav-item .nav-link.active {
  border-bottom: 2px solid #EF5E25;
  color: #EF5E25;
}
.nav-tabs.nav-solid-orange {
  border: 0;
}
.nav-tabs.nav-solid-orange.nav-tabs-rounded li a {
  border-radius: 50px;
}
.nav-tabs.nav-solid-orange.nav-tabs-rounded li a:hover {
  border-color: transparent;
  color: #EF5E25;
}
.nav-tabs.nav-solid-orange.nav-tabs-rounded li a.active {
  background-color: #EF5E25;
  border-color: #EF5E25;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-orange.nav-tabs-rounded-fill li a {
  border-color: var(--border-color);
}
.nav-tabs.nav-solid-orange.nav-tabs-rounded-fill li a.active {
  background-color: #EF5E25;
  border-color: #EF5E25;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-orange li a:hover {
  border-color: transparent;
  color: #EF5E25;
}
.nav-tabs.nav-solid-orange li a.active {
  background-color: #EF5E25;
  border-color: #EF5E25;
  color: var(--white);
  border-radius: 0;
}
.nav-tabs.nav-solid-orange li a.active:hover {
  color: var(--white);
}

.nav-tabs.nav-bordered-purple.nav-tabs-top .nav-item .nav-link:hover, .nav-tabs.nav-bordered-purple.nav-tabs-top .nav-item .nav-link:focus {
  color: #800080;
}
.nav-tabs.nav-bordered-purple.nav-tabs-top .nav-item .nav-link.active {
  border-top: 2px solid #800080;
  border-bottom: 0;
  color: #800080;
}
.nav-tabs.nav-bordered-purple.nav-tabs-top li a {
  border-width: 0 0 2px 0;
}
.nav-tabs.nav-bordered-purple.nav-tabs-top li a.active, .nav-tabs.nav-bordered-purple.nav-tabs-top li a:hover {
  border-bottom-color: var(--primary);
  background: transparent;
  border-radius: 0;
  color: var(--primary);
}
.nav-tabs.nav-bordered-purple .nav-item .nav-link:hover, .nav-tabs.nav-bordered-purple .nav-item .nav-link:focus {
  color: #800080;
}
.nav-tabs.nav-bordered-purple .nav-item .nav-link.active {
  border-bottom: 2px solid #800080;
  color: #800080;
}
.nav-tabs.nav-solid-purple {
  border: 0;
}
.nav-tabs.nav-solid-purple.nav-tabs-rounded li a {
  border-radius: 50px;
}
.nav-tabs.nav-solid-purple.nav-tabs-rounded li a:hover {
  border-color: transparent;
  color: #800080;
}
.nav-tabs.nav-solid-purple.nav-tabs-rounded li a.active {
  background-color: #800080;
  border-color: #800080;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-purple.nav-tabs-rounded-fill li a {
  border-color: var(--border-color);
}
.nav-tabs.nav-solid-purple.nav-tabs-rounded-fill li a.active {
  background-color: #800080;
  border-color: #800080;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-purple li a:hover {
  border-color: transparent;
  color: #800080;
}
.nav-tabs.nav-solid-purple li a.active {
  background-color: #800080;
  border-color: #800080;
  color: var(--white);
  border-radius: 0;
}
.nav-tabs.nav-solid-purple li a.active:hover {
  color: var(--white);
}

.nav-tabs.nav-bordered-pink.nav-tabs-top .nav-item .nav-link:hover, .nav-tabs.nav-bordered-pink.nav-tabs-top .nav-item .nav-link:focus {
  color: #DD2590;
}
.nav-tabs.nav-bordered-pink.nav-tabs-top .nav-item .nav-link.active {
  border-top: 2px solid #DD2590;
  border-bottom: 0;
  color: #DD2590;
}
.nav-tabs.nav-bordered-pink.nav-tabs-top li a {
  border-width: 0 0 2px 0;
}
.nav-tabs.nav-bordered-pink.nav-tabs-top li a.active, .nav-tabs.nav-bordered-pink.nav-tabs-top li a:hover {
  border-bottom-color: var(--primary);
  background: transparent;
  border-radius: 0;
  color: var(--primary);
}
.nav-tabs.nav-bordered-pink .nav-item .nav-link:hover, .nav-tabs.nav-bordered-pink .nav-item .nav-link:focus {
  color: #DD2590;
}
.nav-tabs.nav-bordered-pink .nav-item .nav-link.active {
  border-bottom: 2px solid #DD2590;
  color: #DD2590;
}
.nav-tabs.nav-solid-pink {
  border: 0;
}
.nav-tabs.nav-solid-pink.nav-tabs-rounded li a {
  border-radius: 50px;
}
.nav-tabs.nav-solid-pink.nav-tabs-rounded li a:hover {
  border-color: transparent;
  color: #DD2590;
}
.nav-tabs.nav-solid-pink.nav-tabs-rounded li a.active {
  background-color: #DD2590;
  border-color: #DD2590;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-pink.nav-tabs-rounded-fill li a {
  border-color: var(--border-color);
}
.nav-tabs.nav-solid-pink.nav-tabs-rounded-fill li a.active {
  background-color: #DD2590;
  border-color: #DD2590;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-pink li a:hover {
  border-color: transparent;
  color: #DD2590;
}
.nav-tabs.nav-solid-pink li a.active {
  background-color: #DD2590;
  border-color: #DD2590;
  color: var(--white);
  border-radius: 0;
}
.nav-tabs.nav-solid-pink li a.active:hover {
  color: var(--white);
}

.nav-tabs.nav-bordered-indigo.nav-tabs-top .nav-item .nav-link:hover, .nav-tabs.nav-bordered-indigo.nav-tabs-top .nav-item .nav-link:focus {
  color: #3538CD;
}
.nav-tabs.nav-bordered-indigo.nav-tabs-top .nav-item .nav-link.active {
  border-top: 2px solid #3538CD;
  border-bottom: 0;
  color: #3538CD;
}
.nav-tabs.nav-bordered-indigo.nav-tabs-top li a {
  border-width: 0 0 2px 0;
}
.nav-tabs.nav-bordered-indigo.nav-tabs-top li a.active, .nav-tabs.nav-bordered-indigo.nav-tabs-top li a:hover {
  border-bottom-color: var(--primary);
  background: transparent;
  border-radius: 0;
  color: var(--primary);
}
.nav-tabs.nav-bordered-indigo .nav-item .nav-link:hover, .nav-tabs.nav-bordered-indigo .nav-item .nav-link:focus {
  color: #3538CD;
}
.nav-tabs.nav-bordered-indigo .nav-item .nav-link.active {
  border-bottom: 2px solid #3538CD;
  color: #3538CD;
}
.nav-tabs.nav-solid-indigo {
  border: 0;
}
.nav-tabs.nav-solid-indigo.nav-tabs-rounded li a {
  border-radius: 50px;
}
.nav-tabs.nav-solid-indigo.nav-tabs-rounded li a:hover {
  border-color: transparent;
  color: #3538CD;
}
.nav-tabs.nav-solid-indigo.nav-tabs-rounded li a.active {
  background-color: #3538CD;
  border-color: #3538CD;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-indigo.nav-tabs-rounded-fill li a {
  border-color: var(--border-color);
}
.nav-tabs.nav-solid-indigo.nav-tabs-rounded-fill li a.active {
  background-color: #3538CD;
  border-color: #3538CD;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-indigo li a:hover {
  border-color: transparent;
  color: #3538CD;
}
.nav-tabs.nav-solid-indigo li a.active {
  background-color: #3538CD;
  border-color: #3538CD;
  color: var(--white);
  border-radius: 0;
}
.nav-tabs.nav-solid-indigo li a.active:hover {
  color: var(--white);
}

.nav-tabs.nav-bordered-teal.nav-tabs-top .nav-item .nav-link:hover, .nav-tabs.nav-bordered-teal.nav-tabs-top .nav-item .nav-link:focus {
  color: #0E9384;
}
.nav-tabs.nav-bordered-teal.nav-tabs-top .nav-item .nav-link.active {
  border-top: 2px solid #0E9384;
  border-bottom: 0;
  color: #0E9384;
}
.nav-tabs.nav-bordered-teal.nav-tabs-top li a {
  border-width: 0 0 2px 0;
}
.nav-tabs.nav-bordered-teal.nav-tabs-top li a.active, .nav-tabs.nav-bordered-teal.nav-tabs-top li a:hover {
  border-bottom-color: var(--primary);
  background: transparent;
  border-radius: 0;
  color: var(--primary);
}
.nav-tabs.nav-bordered-teal .nav-item .nav-link:hover, .nav-tabs.nav-bordered-teal .nav-item .nav-link:focus {
  color: #0E9384;
}
.nav-tabs.nav-bordered-teal .nav-item .nav-link.active {
  border-bottom: 2px solid #0E9384;
  color: #0E9384;
}
.nav-tabs.nav-solid-teal {
  border: 0;
}
.nav-tabs.nav-solid-teal.nav-tabs-rounded li a {
  border-radius: 50px;
}
.nav-tabs.nav-solid-teal.nav-tabs-rounded li a:hover {
  border-color: transparent;
  color: #0E9384;
}
.nav-tabs.nav-solid-teal.nav-tabs-rounded li a.active {
  background-color: #0E9384;
  border-color: #0E9384;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-teal.nav-tabs-rounded-fill li a {
  border-color: var(--border-color);
}
.nav-tabs.nav-solid-teal.nav-tabs-rounded-fill li a.active {
  background-color: #0E9384;
  border-color: #0E9384;
  color: var(--white);
  border-radius: 50px;
}
.nav-tabs.nav-solid-teal li a:hover {
  border-color: transparent;
  color: #0E9384;
}
.nav-tabs.nav-solid-teal li a.active {
  background-color: #0E9384;
  border-color: #0E9384;
  color: var(--white);
  border-radius: 0;
}
.nav-tabs.nav-solid-teal li a.active:hover {
  color: var(--white);
}

.nav-pills .nav-link {
  color: var(--gray-600);
}

.nav-tabs.nav-item-primary li a {
  border-color: var(--border-color);
  color: var(--gray-900);
  background-color: var(--white);
}
.nav-tabs.nav-item-primary li a:hover {
  border-color: transparent;
  color: var(--white);
  background-color: var(--primary);
}
.nav-tabs.nav-item-primary li a.active {
  background-color: var(--primary) !important;
  border-color: var(--primary);
  color: var(--white);
  border-radius: 0;
}
.nav-tabs.nav-item-primary li a.active:hover {
  color: var(--white);
}

.page-link:focus {
  box-shadow: none;
}

.list-group-item {
  padding: 0.625rem 1rem;
  background-color: var(--white);
  border-color: var(--border-color);
}
.list-group-item.active {
  background: var(--primary);
  border-color: var(--primary);
}
.list-group-item-primary {
  background: var(--primary-transparent);
  border-color: var(--primary-transparent);
  color: var(--primary);
}
.list-group-item-secondary {
  background: var(--secondary-transparent);
  border-color: var(--secondary-transparent);
  color: var(--secondary);
}
.list-group-item-success {
  background: var(--success-transparent);
  border-color: var(--success-transparent);
  color: var(--success);
}
.list-group-item-danger {
  background: var(--danger-transparent);
  border-color: var(--danger-transparent);
  color: var(--danger);
}
.list-group-item-info {
  background: var(--info-transparent);
  border-color: var(--info-transparent);
  color: var(--info);
}
.list-group-item-warning {
  background: var(--warning-transparent);
  border-color: var(--warning-transparent);
  color: var(--warning);
}
.list-group-item-light {
  background: var(--light-transparent);
  border-color: var(--light);
  color: var(--dark);
}
.list-group-item-dark {
  background: var(--gray-transparent);
  border-color: var(--gray-100);
  color: var(--dark);
}
.list-group-item-action {
  color: var(--body-color);
}
.list-group-item-action.list-group-item-primary:hover {
  background: var(--primary-transparent);
}
.list-group-item-action.list-group-item-secondary:hover {
  background: var(--secondary-transparent);
}
.list-group-item-action.list-group-item-warning:hover {
  background: var(--warning-transparent);
}
.list-group-item-action.list-group-item-success:hover {
  background: var(--success-transparent);
}
.list-group-item-action.list-group-item-danger:hover {
  background: var(--danger-transparent);
}
.list-group-item-action.list-group-item-info:hover {
  background: var(--info-transparent);
}
.list-group-item-action.list-group-item-light:hover {
  background: var(--light-transparent);
}
.list-group-item-action.list-group-item-dark:hover {
  background: var(--gray-100);
}

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

.list-group-item-dark {
  color: var(--white);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.offcanvas-header {
  border-bottom: 1px solid var(--border-color);
  padding: 16px 20px;
}
.offcanvas-header .btn-close {
  background-color: var(--danger-transparent);
  font-size: 8px;
  padding: 8px;
  border-radius: 50%;
  margin-right: 0;
  color: var(--danger);
  opacity: 1;
  position: relative;
}
.offcanvas-header .btn-close::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--danger); /* icon color */
  mask: var(--bs-btn-close-bg) center/1em auto no-repeat;
  -webkit-mask: var(--bs-btn-close-bg) center/1em auto no-repeat;
}
.offcanvas-header .btn-close:focus {
  box-shadow: none !important;
}

.offcanvas-body {
  padding: 20px;
}

.offcanvas {
  max-width: 800px;
  width: 100% !important;
  background-color: var(--white);
  border-left: var(--border-color) !important;
}
.offcanvas.offcanvas-bottom, .offcanvas.offcanvas-top {
  max-width: 100%;
}

.pagination .page-link {
  color: var(--gray-900);
  border-color: var(--border-color);
  font-size: 14px;
}
.pagination .page-link svg {
  height: 14px;
}
.pagination .page-link:hover, .pagination .page-link:focus {
  background-color: var(--light);
  box-shadow: none;
  color: var(--primary);
}
.pagination .disabled > .page-link, .pagination .page-link.disabled {
  background: transparent;
}

.active > .page-link, .page-link.active {
  background-color: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.pagination-boxed .page-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.35rem !important;
  height: 35px;
  width: 35px;
  padding: 0;
  border-radius: 5px;
}
.pagination-boxed.pagination-sm .page-link {
  height: 31px;
  width: 31px;
}
.pagination-boxed.pagination-lg .page-link {
  height: 47px;
  width: 47px;
}

.pagination-rounded .page-link {
  border-radius: 50% !important;
}

.pagination-primary .page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
}
.pagination-primary .page-item.active .page-link:hover {
  color: var(--white);
}

.pagination-secondary .page-item.active .page-link {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.pagination-secondary .page-item.active .page-link:hover {
  color: var(--white);
}

.pagination-success .page-item.active .page-link {
  background-color: var(--success);
  border-color: var(--success);
}
.pagination-success .page-item.active .page-link:hover {
  color: var(--white);
}

.pagination-info .page-item.active .page-link {
  background-color: var(--info);
  border-color: var(--info);
}
.pagination-info .page-item.active .page-link:hover {
  color: var(--white);
}

.pagination-warning .page-item.active .page-link {
  background-color: var(--warning);
  border-color: var(--warning);
}
.pagination-warning .page-item.active .page-link:hover {
  color: var(--white);
}

.pagination-danger .page-item.active .page-link {
  background-color: var(--danger);
  border-color: var(--danger);
}
.pagination-danger .page-item.active .page-link:hover {
  color: var(--white);
}

.pagination-dark .page-item.active .page-link {
  background-color: var(--dark);
  border-color: var(--dark);
}
.pagination-dark .page-item.active .page-link:hover {
  color: var(--white);
}

.pagination-light .page-item.active .page-link {
  background-color: var(--light);
  border-color: var(--light);
}
.pagination-light .page-item.active .page-link:hover {
  color: var(--white);
}

.pagination-orange .page-item.active .page-link {
  background-color: var(--orange);
  border-color: var(--orange);
}
.pagination-orange .page-item.active .page-link:hover {
  color: var(--white);
}

.pagination-purple .page-item.active .page-link {
  background-color: var(--purple);
  border-color: var(--purple);
}
.pagination-purple .page-item.active .page-link:hover {
  color: var(--white);
}

.pagination-pink .page-item.active .page-link {
  background-color: var(--pink);
  border-color: var(--pink);
}
.pagination-pink .page-item.active .page-link:hover {
  color: var(--white);
}

.pagination-indigo .page-item.active .page-link {
  background-color: var(--indigo);
  border-color: var(--indigo);
}
.pagination-indigo .page-item.active .page-link:hover {
  color: var(--white);
}

.pagination-teal .page-item.active .page-link {
  background-color: var(--teal);
  border-color: var(--teal);
}
.pagination-teal .page-item.active .page-link:hover {
  color: var(--white);
}

.pagination-gradient .page-link {
  background-image: var(--bs-gradient);
}

.pagination-soft-primary .page-item.active .page-link {
  background-color: var(--primary-transparent);
  border-color: transparent;
  color: var(--primary);
}
.pagination-soft-primary .page-item.active .page-link:hover {
  color: var(--primary);
}

.pagination-soft-secondary .page-item.active .page-link {
  background-color: var(--secondary-transparent);
  border-color: transparent;
  color: var(--secondary);
}
.pagination-soft-secondary .page-item.active .page-link:hover {
  color: var(--secondary);
}

.pagination-soft-success .page-item.active .page-link {
  background-color: var(--success-transparent);
  border-color: transparent;
  color: var(--success);
}
.pagination-soft-success .page-item.active .page-link:hover {
  color: var(--success);
}

.pagination-soft-info .page-item.active .page-link {
  background-color: var(--info-transparent);
  border-color: transparent;
  color: var(--info);
}
.pagination-soft-info .page-item.active .page-link:hover {
  color: var(--info);
}

.pagination-soft-warning .page-item.active .page-link {
  background-color: var(--warning-transparent);
  border-color: transparent;
  color: var(--warning);
}
.pagination-soft-warning .page-item.active .page-link:hover {
  color: var(--warning);
}

.pagination-soft-danger .page-item.active .page-link {
  background-color: var(--danger-transparent);
  border-color: transparent;
  color: var(--danger);
}
.pagination-soft-danger .page-item.active .page-link:hover {
  color: var(--danger);
}

.pagination-soft-dark .page-item.active .page-link {
  background-color: var(--dark-transparent);
  border-color: transparent;
  color: var(--dark);
}
.pagination-soft-dark .page-item.active .page-link:hover {
  color: var(--dark);
}

.pagination-soft-light .page-item.active .page-link {
  background-color: var(--light-transparent);
  border-color: transparent;
  color: var(--light);
}
.pagination-soft-light .page-item.active .page-link:hover {
  color: var(--light);
}

.pagination-soft-orange .page-item.active .page-link {
  background-color: var(--orange-transparent);
  border-color: transparent;
  color: var(--orange);
}
.pagination-soft-orange .page-item.active .page-link:hover {
  color: var(--orange);
}

.pagination-soft-purple .page-item.active .page-link {
  background-color: var(--purple-transparent);
  border-color: transparent;
  color: var(--purple);
}
.pagination-soft-purple .page-item.active .page-link:hover {
  color: var(--purple);
}

.pagination-soft-pink .page-item.active .page-link {
  background-color: var(--pink-transparent);
  border-color: transparent;
  color: var(--pink);
}
.pagination-soft-pink .page-item.active .page-link:hover {
  color: var(--pink);
}

.pagination-soft-indigo .page-item.active .page-link {
  background-color: var(--indigo-transparent);
  border-color: transparent;
  color: var(--indigo);
}
.pagination-soft-indigo .page-item.active .page-link:hover {
  color: var(--indigo);
}

.pagination-soft-teal .page-item.active .page-link {
  background-color: var(--teal-transparent);
  border-color: transparent;
  color: var(--teal);
}
.pagination-soft-teal .page-item.active .page-link:hover {
  color: var(--teal);
}

.popover {
  border-color: var(--border-color);
  border-radius: 5px;
}

.popover-header {
  padding: 0.7rem 0.8rem;
  font-size: 0.875rem;
  color: var(--heading-color);
  border-color: var(--border-color);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: var(--light);
}

.popover-body {
  padding: 0.5rem 0.75rem;
  color: var(--body-color);
}

.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before,
.bs-popover-end > .popover-arrow::before {
  border-right-color: var(--border-color);
}

.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before,
.bs-popover-start > .popover-arrow::before {
  border-left-color: var(--border-color);
}

.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before,
.bs-popover-top > .popover-arrow::before {
  border-top-color: var(--border-color);
}

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before,
.bs-popover-bottom > .popover-arrow::before {
  border-bottom-color: var(--border-color);
}

.popover-primary {
  border-color: var(--primary);
  background-color: var(--primary);
}
.popover-primary .popover-header {
  color: #fff;
  border-color: var(--primary);
  background-color: var(--primary);
}
.popover-primary .popover-body {
  color: #fff;
}
.popover-primary.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-primary.bs-popover-end > .popover-arrow::before {
  border-right-color: var(--primary);
}
.popover-primary.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.popover-primary .popover-primary .bs-popover-end > .popover-arrow::after {
  border-right-color: var(--primary);
}
.popover-primary.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-primary.bs-popover-start > .popover-arrow::before, .popover-primary.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-primary.bs-popover-start > .popover-arrow::after {
  border-left-color: var(--primary);
}
.popover-primary.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-primary.bs-popover-top > .popover-arrow::before, .popover-primary.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-primary.bs-popover-top > .popover-arrow::after {
  border-top-color: var(--primary);
}
.popover-primary.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-primary.bs-popover-bottom > .popover-arrow::before, .popover-primary.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-primary.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--primary);
}

.popover-secondary {
  border-color: var(--secondary);
  background-color: var(--secondary);
}
.popover-secondary .popover-header {
  color: #fff;
  border-color: var(--secondary);
  background-color: var(--secondary);
}
.popover-secondary .popover-body {
  color: #fff;
}
.popover-secondary.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-secondary.bs-popover-end > .popover-arrow::before {
  border-right-color: var(--secondary);
}
.popover-secondary.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.popover-secondary .popover-primary .bs-popover-end > .popover-arrow::after {
  border-right-color: var(--secondary);
}
.popover-secondary.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-secondary.bs-popover-start > .popover-arrow::before, .popover-secondary.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-secondary.bs-popover-start > .popover-arrow::after {
  border-left-color: var(--secondary);
}
.popover-secondary.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-secondary.bs-popover-top > .popover-arrow::before, .popover-secondary.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-secondary.bs-popover-top > .popover-arrow::after {
  border-top-color: var(--secondary);
}
.popover-secondary.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-secondary.bs-popover-bottom > .popover-arrow::before, .popover-secondary.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-secondary.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--secondary);
}

.popover-success {
  border-color: var(--success);
  background-color: var(--success);
}
.popover-success .popover-header {
  color: #fff;
  border-color: var(--success);
  background-color: var(--success);
}
.popover-success .popover-body {
  color: #fff;
}
.popover-success.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-success.bs-popover-end > .popover-arrow::before {
  border-right-color: var(--success);
}
.popover-success.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.popover-success .popover-primary .bs-popover-end > .popover-arrow::after {
  border-right-color: var(--success);
}
.popover-success.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-success.bs-popover-start > .popover-arrow::before, .popover-success.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-success.bs-popover-start > .popover-arrow::after {
  border-left-color: var(--success);
}
.popover-success.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-success.bs-popover-top > .popover-arrow::before, .popover-success.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-success.bs-popover-top > .popover-arrow::after {
  border-top-color: var(--success);
}
.popover-success.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-success.bs-popover-bottom > .popover-arrow::before, .popover-success.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-success.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--success);
}

.popover-info {
  border-color: var(--info);
  background-color: var(--info);
}
.popover-info .popover-header {
  color: #fff;
  border-color: var(--info);
  background-color: var(--info);
}
.popover-info .popover-body {
  color: #fff;
}
.popover-info.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-info.bs-popover-end > .popover-arrow::before {
  border-right-color: var(--info);
}
.popover-info.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.popover-info .popover-primary .bs-popover-end > .popover-arrow::after {
  border-right-color: var(--info);
}
.popover-info.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-info.bs-popover-start > .popover-arrow::before, .popover-info.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-info.bs-popover-start > .popover-arrow::after {
  border-left-color: var(--info);
}
.popover-info.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-info.bs-popover-top > .popover-arrow::before, .popover-info.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-info.bs-popover-top > .popover-arrow::after {
  border-top-color: var(--info);
}
.popover-info.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-info.bs-popover-bottom > .popover-arrow::before, .popover-info.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-info.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--info);
}

.popover-warning {
  border-color: var(--warning);
  background-color: var(--warning);
}
.popover-warning .popover-header {
  color: #fff;
  border-color: var(--warning);
  background-color: var(--warning);
}
.popover-warning .popover-body {
  color: #fff;
}
.popover-warning.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-warning.bs-popover-end > .popover-arrow::before {
  border-right-color: var(--warning);
}
.popover-warning.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.popover-warning .popover-primary .bs-popover-end > .popover-arrow::after {
  border-right-color: var(--warning);
}
.popover-warning.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-warning.bs-popover-start > .popover-arrow::before, .popover-warning.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-warning.bs-popover-start > .popover-arrow::after {
  border-left-color: var(--warning);
}
.popover-warning.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-warning.bs-popover-top > .popover-arrow::before, .popover-warning.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-warning.bs-popover-top > .popover-arrow::after {
  border-top-color: var(--warning);
}
.popover-warning.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-warning.bs-popover-bottom > .popover-arrow::before, .popover-warning.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-warning.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--warning);
}

.popover-danger {
  border-color: var(--danger);
  background-color: var(--danger);
}
.popover-danger .popover-header {
  color: #fff;
  border-color: var(--danger);
  background-color: var(--danger);
}
.popover-danger .popover-body {
  color: #fff;
}
.popover-danger.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-danger.bs-popover-end > .popover-arrow::before {
  border-right-color: var(--danger);
}
.popover-danger.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.popover-danger .popover-primary .bs-popover-end > .popover-arrow::after {
  border-right-color: var(--danger);
}
.popover-danger.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-danger.bs-popover-start > .popover-arrow::before, .popover-danger.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-danger.bs-popover-start > .popover-arrow::after {
  border-left-color: var(--danger);
}
.popover-danger.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-danger.bs-popover-top > .popover-arrow::before, .popover-danger.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-danger.bs-popover-top > .popover-arrow::after {
  border-top-color: var(--danger);
}
.popover-danger.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-danger.bs-popover-bottom > .popover-arrow::before, .popover-danger.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-danger.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--danger);
}

.popover-dark {
  border-color: var(--dark);
  background-color: var(--dark);
}
.popover-dark .popover-header {
  color: #fff;
  border-color: var(--dark);
  background-color: var(--dark);
}
.popover-dark .popover-body {
  color: #fff;
}
.popover-dark.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-dark.bs-popover-end > .popover-arrow::before {
  border-right-color: var(--dark);
}
.popover-dark.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.popover-dark .popover-primary .bs-popover-end > .popover-arrow::after {
  border-right-color: var(--dark);
}
.popover-dark.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-dark.bs-popover-start > .popover-arrow::before, .popover-dark.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-dark.bs-popover-start > .popover-arrow::after {
  border-left-color: var(--dark);
}
.popover-dark.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-dark.bs-popover-top > .popover-arrow::before, .popover-dark.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-dark.bs-popover-top > .popover-arrow::after {
  border-top-color: var(--dark);
}
.popover-dark.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-dark.bs-popover-bottom > .popover-arrow::before, .popover-dark.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-dark.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--dark);
}

.popover-light {
  border-color: var(--light);
  background-color: var(--light);
}
.popover-light .popover-header {
  color: #fff;
  border-color: var(--light);
  background-color: var(--light);
}
.popover-light .popover-body {
  color: #fff;
}
.popover-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-light.bs-popover-end > .popover-arrow::before {
  border-right-color: var(--light);
}
.popover-light.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.popover-light .popover-primary .bs-popover-end > .popover-arrow::after {
  border-right-color: var(--light);
}
.popover-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-light.bs-popover-start > .popover-arrow::before, .popover-light.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-light.bs-popover-start > .popover-arrow::after {
  border-left-color: var(--light);
}
.popover-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-light.bs-popover-top > .popover-arrow::before, .popover-light.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-light.bs-popover-top > .popover-arrow::after {
  border-top-color: var(--light);
}
.popover-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-light.bs-popover-bottom > .popover-arrow::before, .popover-light.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-light.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--light);
}

.popover-orange {
  border-color: var(--orange);
  background-color: var(--orange);
}
.popover-orange .popover-header {
  color: #fff;
  border-color: var(--orange);
  background-color: var(--orange);
}
.popover-orange .popover-body {
  color: #fff;
}
.popover-orange.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-orange.bs-popover-end > .popover-arrow::before {
  border-right-color: var(--orange);
}
.popover-orange.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.popover-orange .popover-primary .bs-popover-end > .popover-arrow::after {
  border-right-color: var(--orange);
}
.popover-orange.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-orange.bs-popover-start > .popover-arrow::before, .popover-orange.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-orange.bs-popover-start > .popover-arrow::after {
  border-left-color: var(--orange);
}
.popover-orange.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-orange.bs-popover-top > .popover-arrow::before, .popover-orange.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-orange.bs-popover-top > .popover-arrow::after {
  border-top-color: var(--orange);
}
.popover-orange.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-orange.bs-popover-bottom > .popover-arrow::before, .popover-orange.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-orange.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--orange);
}

.popover-purple {
  border-color: var(--purple);
  background-color: var(--purple);
}
.popover-purple .popover-header {
  color: #fff;
  border-color: var(--purple);
  background-color: var(--purple);
}
.popover-purple .popover-body {
  color: #fff;
}
.popover-purple.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-purple.bs-popover-end > .popover-arrow::before {
  border-right-color: var(--purple);
}
.popover-purple.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.popover-purple .popover-primary .bs-popover-end > .popover-arrow::after {
  border-right-color: var(--purple);
}
.popover-purple.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-purple.bs-popover-start > .popover-arrow::before, .popover-purple.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-purple.bs-popover-start > .popover-arrow::after {
  border-left-color: var(--purple);
}
.popover-purple.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-purple.bs-popover-top > .popover-arrow::before, .popover-purple.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-purple.bs-popover-top > .popover-arrow::after {
  border-top-color: var(--purple);
}
.popover-purple.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-purple.bs-popover-bottom > .popover-arrow::before, .popover-purple.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-purple.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--purple);
}

.popover-pink {
  border-color: var(--pink);
  background-color: var(--pink);
}
.popover-pink .popover-header {
  color: #fff;
  border-color: var(--pink);
  background-color: var(--pink);
}
.popover-pink .popover-body {
  color: #fff;
}
.popover-pink.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-pink.bs-popover-end > .popover-arrow::before {
  border-right-color: var(--pink);
}
.popover-pink.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.popover-pink .popover-primary .bs-popover-end > .popover-arrow::after {
  border-right-color: var(--pink);
}
.popover-pink.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-pink.bs-popover-start > .popover-arrow::before, .popover-pink.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-pink.bs-popover-start > .popover-arrow::after {
  border-left-color: var(--pink);
}
.popover-pink.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-pink.bs-popover-top > .popover-arrow::before, .popover-pink.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-pink.bs-popover-top > .popover-arrow::after {
  border-top-color: var(--pink);
}
.popover-pink.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-pink.bs-popover-bottom > .popover-arrow::before, .popover-pink.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-pink.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--pink);
}

.popover-indigo {
  border-color: var(--indigo);
  background-color: var(--indigo);
}
.popover-indigo .popover-header {
  color: #fff;
  border-color: var(--indigo);
  background-color: var(--indigo);
}
.popover-indigo .popover-body {
  color: #fff;
}
.popover-indigo.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-indigo.bs-popover-end > .popover-arrow::before {
  border-right-color: var(--indigo);
}
.popover-indigo.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.popover-indigo .popover-primary .bs-popover-end > .popover-arrow::after {
  border-right-color: var(--indigo);
}
.popover-indigo.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-indigo.bs-popover-start > .popover-arrow::before, .popover-indigo.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-indigo.bs-popover-start > .popover-arrow::after {
  border-left-color: var(--indigo);
}
.popover-indigo.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-indigo.bs-popover-top > .popover-arrow::before, .popover-indigo.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-indigo.bs-popover-top > .popover-arrow::after {
  border-top-color: var(--indigo);
}
.popover-indigo.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-indigo.bs-popover-bottom > .popover-arrow::before, .popover-indigo.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-indigo.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--indigo);
}

.popover-teal {
  border-color: var(--teal);
  background-color: var(--teal);
}
.popover-teal .popover-header {
  color: #fff;
  border-color: var(--teal);
  background-color: var(--teal);
}
.popover-teal .popover-body {
  color: #fff;
}
.popover-teal.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .popover-teal.bs-popover-end > .popover-arrow::before {
  border-right-color: var(--teal);
}
.popover-teal.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after,
.popover-teal .popover-primary .bs-popover-end > .popover-arrow::after {
  border-right-color: var(--teal);
}
.popover-teal.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .popover-teal.bs-popover-start > .popover-arrow::before, .popover-teal.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .popover-teal.bs-popover-start > .popover-arrow::after {
  border-left-color: var(--teal);
}
.popover-teal.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .popover-teal.bs-popover-top > .popover-arrow::before, .popover-teal.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .popover-teal.bs-popover-top > .popover-arrow::after {
  border-top-color: var(--teal);
}
.popover-teal.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .popover-teal.bs-popover-bottom > .popover-arrow::before, .popover-teal.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .popover-teal.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--teal);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Golos Text", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--body-color);
  background-color: var(--light);
  overflow-x: hidden;
}

::selection {
  background: var(--primary);
  color: var(--white);
}

button,
a {
  outline: none !important;
}

/* Sếp's own request: plain <a> links (no button/nav/pill class, just
   inline text - "Danh sách mã >>", "Xem chi tiết", etc.) were the same
   near-black color as ordinary text (--gray-900), only turning
   --primary on hover - meaning a link gave no visual signal it was
   clickable until the cursor was already on it. --primary (already this
   admin's established "clickable" color everywhere else - buttons,
   text-primary labels like "Đổi kho"/"Sửa") is now the link's own
   resting color, always-on, instead of only appearing on hover.

   Sếp's own follow-up: an earlier version of this also added
   text-decoration:underline on a:hover for extra affordance - reverted,
   since a bare a:hover with no scoping applies to every already-styled
   <a> site-wide (sidebar menu rows, nav-pills, dropdown items,
   pagination, button-styled links...) that never expected an underline
   and had no reason to override one. The resting-color change alone
   already solves the original "link blends into text" complaint.

   Sếp's own second follow-up: --primary (bright red-orange) was too
   loud once applied everywhere a plain navigation link appears (order
   codes, usernames, "Xem chi tiết"...) - those repeat dozens of times
   per list page, reading as visual noise/alarm rather than "clickable".
   Action-style plain links (inline "Đồng ý"/"Sửa"/delete-confirm links)
   staying whatever color this same change gives them is fine - the
   complaint is specifically about navigation links dominating a page in
   red. --info (a calmer blue, the conventional "this is a link" color)
   instead of --primary for the same always-on resting color. */
a {
  text-decoration: none;
  color: var(--info);
}

label {
  font-weight: 500;
}

b,
strong {
  font-weight: 600;
}

.border-dashed {
  border-style: dashed;
}

.border-bottom-dashed {
  border-style: dashed !important;
}

h1,
.h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--heading-color);
}
@media (max-width: 991.98px) {
  h1,
  .h1 {
    font-size: 28px;
  }
}
@media (max-width: 767.98px) {
  h1,
  .h1 {
    font-size: 24px;
  }
}

h2,
.h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--heading-color);
}
@media (max-width: 991.98px) {
  h2,
  .h2 {
    font-size: 22px;
  }
}
@media (max-width: 767.98px) {
  h2,
  .h2 {
    font-size: 20px;
  }
}

h3,
.h3, .custom-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--heading-color);
}
@media (max-width: 991.98px) {
  h3,
  .h3, .custom-title {
    font-size: 20px;
  }
}
@media (max-width: 767.98px) {
  h3,
  .h3, .custom-title {
    font-size: 18px;
  }
}

h4,
.h4, .main-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--heading-color);
}
@media (max-width: 991.98px) {
  h4,
  .h4, .main-title {
    font-size: 18px;
  }
}
@media (max-width: 767.98px) {
  h4,
  .h4, .main-title {
    font-size: 17px;
  }
}

h5,
.h5, .card-subtitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--heading-color);
}
@media (max-width: 767.98px) {
  h5,
  .h5, .card-subtitle {
    font-size: 17px;
  }
}

h6,
.h6, .sub-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--heading-color);
}

.display-1 {
  font-size: 80px;
}
@media (max-width: 1199.98px) {
  .display-1 {
    font-size: 70px;
  }
}

.display-2 {
  font-size: 72px;
}
@media (max-width: 1199.98px) {
  .display-2 {
    font-size: 64px;
  }
}
@media (max-width: 991.98px) {
  .display-2 {
    font-size: 50px;
  }
}

.display-3 {
  font-size: 64px;
}
@media (max-width: 1199.98px) {
  .display-3 {
    font-size: 58px;
  }
}
@media (max-width: 991.98px) {
  .display-3 {
    font-size: 42px;
  }
}

.display-4 {
  font-size: 56px;
}
@media (max-width: 1199.98px) {
  .display-4 {
    font-size: 50px;
  }
}
@media (max-width: 991.98px) {
  .display-4 {
    font-size: 38px;
  }
}

.display-5 {
  font-size: 48px;
}
@media (max-width: 1199.98px) {
  .display-5 {
    font-size: 44px;
  }
}
@media (max-width: 991.98px) {
  .display-5 {
    font-size: 34px;
  }
}

.display-6 {
  font-size: 40px;
}
@media (max-width: 1199.98px) {
  .display-6 {
    font-size: 36px;
  }
}
@media (max-width: 991.98px) {
  .display-6 {
    font-size: 28px;
  }
}

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

@media (min-width: 768px) {
  .page-title-head {
    height: 85px;
  }
}
@media (max-width: 767.98px) {
  .page-title-head {
    padding: 1.25rem 0;
  }
}
.link-reset {
  color: inherit;
  transition: all 0.25s ease-in-out;
}
.link-reset:hover {
  color: var(--primary);
}

.slick-next {
  z-index: 99;
  background: transparent;
  border: 1px solid var(--border-color);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  right: 10px;
  top: -45px;
}
.slick-next::before {
  font-family: "tabler-icons";
  content: "\ea61";
  color: var(--gray-900);
  font-size: 12px;
  font-weight: 900;
}
.slick-next:hover {
  background-color: var(--light);
}

.slick-prev {
  z-index: 99;
  background: transparent;
  border: 1px solid var(--border-color);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  left: auto;
  right: 40px;
  top: -45px;
}
.slick-prev::before {
  font-family: "tabler-icons";
  content: "\ea60";
  color: var(--gray-900);
  font-size: 12px;
  font-weight: 900;
}
.slick-prev:hover {
  background-color: var(--light);
}

.visit-slider .slick-prev {
  left: 132px;
  right: auto;
  top: -51px;
}
.visit-slider .slick-next {
  left: 162px;
  right: auto;
  top: -51px;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
/* Sếp's own request: the theme's stock full border on .table itself plus a
   full border on every single <tr> (thead and tbody both) stacks into a
   dense boxed grid across every list page in AdminBundle - reduced to a
   single hairline divider between rows (no outer box, no border on the
   header row's own box) for a flatter, more "borderless" list look. Scoped
   to the base .table class so this applies system-wide, not per-view.

   The divider itself is set on the CELLS (.table > :not(caption) > * > *,
   Bootstrap's own selector for this - see below), not on <tr> - table's
   border-collapse:collapse (Reboot's base `table{border-collapse:collapse}`)
   resolves a shared edge's border by cell > row > row-group > table
   priority, so a <tr>-level border here would have lost to Bootstrap's own
   per-cell border-bottom-width rule anyway, and a <tr> whose own cells don't
   fully fill their column (nowrap content, auto layout) can end up with a
   divider that visibly doesn't reach the row's own right edge. Setting it
   on the cells instead is what Bootstrap itself uses for this exact reason
   - always spans the true full 100% table width, no matter the content.

   !important here: 78 AdminBundle views add Bootstrap's own .table-bordered
   class on top of .table (orderkilo/list, doanhthusalev2, summarycskh...),
   which sets border-width on this SAME cell selector (0 var(--bs-border-
   width), i.e. left/right only, but also implicitly zeroing top/bottom -
   see bootstrap.min.css) at equal (0,1,1) specificity - a plain override
   here would only reliably win on tables using the bare .table class,
   leaving the two rules fighting to a coin-flip (source order per property)
   on any of the 78 .table-bordered ones. !important sidesteps that outright
   rather than chasing which one currently happens to be zeroing what. */
.table {
  background-color: var(--white);
  margin-bottom: 0 !important;
  border: none;
}
/* .table-bordered's own <tr>-level rule (bootstrap.min.css:
   `.table-bordered > :not(caption) > * { border-width: var(--bs-border-
   width) 0 }`) gives every row, including the header's, a top+bottom
   border using Bootstrap's own default color - unrelated to and untouched
   by the cell-level override below, so the header still showed a border
   above and below its own gray background. Zeroed here instead. */
.table-bordered > :not(caption) > * {
  border-width: 0 !important;
}
.table > :not(caption) > * > * {
  border: none !important;
  border-bottom: 1px solid var(--table-divider-color) !important;
}
/* Sếp's own request: setting/buyshoporder's product-list table needs a
   real full grid (every cell, all 4 sides) instead of the borderless-
   with-just-a-divider look every other .table-bordered gets above -
   overrides both the row-level border-width zero and the cell-level
   border:none, scoped to this one table via its own class. */
.full-grid-table.table-bordered > :not(caption) > * {
  border-width: 1px !important;
}
.full-grid-table > :not(caption) > * > * {
  border: 1px solid var(--table-divider-color) !important;
}
/* Sếp's own follow-up: round the corners of that table (it is not
   inside a .card, so the usual .card-body > .table-responsive bleed
   trick does not apply) - rounded on its own wrapper instead, with
   overflow clipping the now-square cell corners into the curve. */
.rounded-table-wrap {
  border-radius: 13px;
  overflow-x: auto;
  overflow-y: hidden;
}
/* Sếp's own request: a small label:value micro-table (table-borderless
   table-sm, used for e.g. "Khách hàng: x / Tổng cân: y" rows) nested
   inside another table's own <td> still inherits the divider-line rule
   above (it's just ".table", same as its parent), so each of its 3-6
   rows drew its own border-bottom - a cramped stack of thin lines for
   what's meant to read as one compact block. Dropped the divider and
   tightened row padding, scoped to a .table that's actually nested
   inside another .table's cell (not standalone tables). */
.table td .table > :not(caption) > * > * {
  border-bottom: none !important;
  padding: 2px 6px !important;
}
/* Sếp's own request: right-align the value column of these nested
   label:value tables. Every row is exactly 2 cells (text-secondary
   label, then value), so the value cell is always :last-child. */
.table td .table > :not(caption) > tr > td:last-child {
  text-align: right;
}
/* Sếp's own follow-up: .text-secondary maps to var(--secondary), which
   in this theme is an orange accent color (#FFA201), not a neutral
   gray - fine for its original uses elsewhere, but wrong for these
   plain "Nhãn:" labels. Reset back to the normal body text color in
   every table context (not just nested-in-nested), and drop the label
   cell's own left padding so "Nhãn" text sits flush against the outer
   table cell's own edge instead of getting an extra indent. */
.table td.text-secondary {
  color: var(--body-color) !important;
}
.table td .table td.text-secondary {
  padding-left: 0 !important;
}
/* Sếp's own request: no hover background color on any table row, system-
   wide. Bootstrap's .table-hover paints the highlight via an inset
   box-shadow driven by the --bs-table-bg-state custom property (bootstrap.
   min.css: `.table>:not(caption)>*>*{box-shadow:inset 0 0 0 9999px
   var(--bs-table-bg-state,...)}`), not background-color - overriding just
   background-color here would have had no visible effect. Resetting the
   variable to transparent on the exact same .table-hover>tbody>tr:hover>*
   selector Bootstrap itself uses neutralizes it without needing
   !important (this file loads after bootstrap.min.css, so equal
   specificity here already wins by source order). */
.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: transparent;
}
.table thead tr th {
  font-weight: 600;
  padding: 8px 10px;
  color: var(--heading-color);
  background-color: var(--table-header-bg);
  border: none !important;
  vertical-align: middle;
}
/* Sếp's own follow-up: setting/buyshoporder's full-grid-table header
   should have no border at all (top/left/right/bottom) - same
   (0,1,3) specificity as .table thead tr th above, placed AFTER it
   so source order actually wins this time (an earlier attempt placed
   this rule BEFORE that one and lost the tie). The bottom divider was
   tried first but in dark mode --table-divider-color is #232B45 (near
   black), which read as an unwanted black line under the header - so
   dropped it entirely instead of trying to recolor it per-theme. */
.full-grid-table thead > tr > th {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
}
/* Sếp report: orderkilo/view - the header-no-border rule above (added for
   buyshoporder) leaves this table header with no vertical dividers between
   columns while its body cells have the full grid, so the body column lines
   stop dead at the header and the gray header row floats disconnected. This
   per-shop table WANTS a uniform grid, so restore the full cell border on its
   header - same var(--table-divider-color) as the body so header and body
   match in both light and dark themes. Scoped to the .shop-items-table
   wrapper only (NOT buyshoporder), (0,2,3) beats the (0,1,3) rule above. */
.shop-items-table .full-grid-table thead > tr > th {
  border: 1px solid var(--table-divider-color) !important;
}
/* Sếp choice: this table bleeds flush to the card edge like every other list
   table, but it is full-grid (cells have side borders) so its outermost cell
   borders would sit ~1px from the card border and read as a doubled edge. So
   strip the OUTER edge borders of the grid (top of header, left of first
   column, right of the last column, bottom of the last row) and let the
   card's own rounded 1px border be the table frame - single clean line, no
   double, full grid still shown inside. The right edge is the rowspan Vận
   chuyển cell (not always td:last-child because of the rowspan), so it is
   tagged with .last-edge-col in the twig instead of relying on :last-child.
   Placed AFTER the header-border rule above so the border-top:none wins the
   (0,2,3) tie; :first-child / .last-edge-col variants are already higher.
   Verified via isolated render + getComputedStyle: outer cell borders 0px,
   card border is the sole 1px frame, no doubling. */
.shop-items-table .full-grid-table > thead > tr > th {
  border-top: none !important;
}
.shop-items-table .full-grid-table > tbody > tr > td:first-child,
.shop-items-table .full-grid-table > thead > tr > th:first-child {
  border-left: none !important;
}
.shop-items-table .full-grid-table .last-edge-col {
  border-right: none !important;
}
.shop-items-table .full-grid-table > tbody > tr:last-child > * {
  border-bottom: none !important;
}
/* Sếp request: no rounded corners on this table - square it off, overriding
   the shared .card-body.table-responsive border-radius:13px. (0,3,0) beats
   (0,2,0); overflow-x/y from the shared rule still apply so horizontal scroll
   is kept. */
.card-body.table-responsive.shop-items-table {
  border-radius: 0;
}
/* Sếp's own request: _summarybyshoporder's 2 report tables use a plain
   <tr style="background:gray;color:#fff"> for their header row (no real
   <thead>). That never painted - table background layers stack
   table < row-group < row < cell, and .table > :not(caption) > * > *
   already gives every <td> its own solid white background, which sits
   on TOP of the row's own background and hides it completely regardless
   of the inline style's specificity (this is cell-vs-row paint order,
   not a cascade fight - the inline style genuinely does win the
   background-color declaration for the <tr>, it just never gets painted
   over the cell). Class-based fix targets the actual <td> (and the <b>
   inside it, which has its own gray text color from elsewhere) instead. */
.grid-header-row > td,
.grid-header-row > td > b {
  background-color: gray !important;
  color: #fff !important;
}
/* Sếp's own request: 2-tier headers (ship/list, shiphostore/feepackages -
   rowspan="2" simple columns alongside colspan="2" groups like "Theo cân"
   split into "Cân nặng"/"Đơn giá" sub-columns) need real dividers between
   columns and between the two header rows. The plain "no border, just gray
   background" treatment above reads fine for a single header row, but once
   cells span multiple rows/columns there's nothing left to show where one
   column group ends and the next begins, or where row 1 ends and row 2
   starts - :has(tr + tr) scopes this to thead elements with 2+ rows only,
   so ordinary single-row headers keep the flat borderless look untouched.
   (0,1,4) specificity - beats the plain .table thead tr th rule above
   (0,1,3) even with matching !important, no source-order reliance needed. */
.table thead:has(tr + tr) th {
  border: 1px solid var(--table-divider-color) !important;
}
/* Sếp's own follow-up: the border above goes on all 4 sides of every <th>,
   including the header's own OUTER perimeter (row 1's top edge, "No."'s
   left edge, the last rowspan="2" column's right edge) - which sits right
   on top of the table/card-body's own bleed-to-the-card-edge boundary
   (the negative-margin trick above), so the same visual edge got drawn
   twice, 1px apart, reading as a doubled/blurry line. row1's <th> are the
   only ones touching that outer edge (row2's cells only fill the middle
   columns under the colspan groups, per this table's rowspan="2" layout -
   see ship/list.html.twig), so it's enough to zero the outer-facing side
   on just row 1's cells; the internal dividers (between the two rows,
   between columns) are untouched. */
.table thead:has(tr + tr) tr:first-child th {
  border-top: none !important;
}
.table thead:has(tr + tr) tr:first-child th:first-child {
  border-left: none !important;
}
.table thead:has(tr + tr) tr:first-child th:last-child {
  border-right: none !important;
}
.table tbody tr td {
  padding: 10px 8px !important;
  white-space: normal;
  word-break: break-word;
}
/* Sếp's own request: price/list's Tính theo Kg/Tính theo M3 columns
   hold 3 nested price tables each - drop the outer cell's own padding
   (the nested tables already have their own row/cell spacing) so the
   nested tables sit flush inside the outer cell instead of doubling
   up on whitespace. */
.table tbody tr td.price-detail-td {
  padding: 0 !important;
}
/* Sếp's own catch: word-break: break-word above wraps a <button>'s own
   label one syllable per line when its table cell is narrow (e.g. a
   rowspan cell shared with a checkbox column), making the text look
   vertical/rotated. Buttons should keep their label on one line. */
.table tbody tr td .btn {
  white-space: nowrap;
}
/* Sếp's own follow-up: the flush-to-edge pass below removed the card-body's
   20px padding, which used to be every first/last cell's only real side
   breathing room too (cell padding itself is just 8-10px) - restored here,
   just on the two outer edges, so the header background/divider still
   bleeds all the way to the rounded corner but the actual text inside the
   first/last column doesn't sit flush against it. !important needed to
   beat .table tbody tr td's own padding shorthand above (also !important). */
.table > :not(caption) > * > *:first-child {
  padding-left: 20px !important;
}
.table > :not(caption) > * > *:last-child {
  padding-right: 20px !important;
}
/* Sếp's own request: the "Lên đơn ngày" table's 2nd row per staff uses
   rowspan=2 on the first column so its own 2nd <tr> starts one column
   short - that row's own first <td> (total_shop_taobao) is the DOM
   :first-child of ITS row even though it visually sits in the 2nd
   column, so it wrongly inherited the first-column 20px gutter padding
   above instead of the plain 8px every middle column gets. Reset back
   to 8px, scoped to just this cell via its own marker class - same
   (0,2,1) specificity as the rule above, placed AFTER it so source
   order actually wins (a mid-file placement earlier lost this exact
   tie the same way the header-border override once did - see the
   .full-grid-table thead > tr > th comment above for the precedent). */
.full-grid-table td.mid-col-pad {
  padding-left: 8px !important;
}
/* Sếp's own request: sale/doanhthusalev2's "Tỷ giá, phí dịch vụ" and
   "Cước vận chuyển" tables (marked with this class) - tight 5px
   horizontal cell padding to squeeze more content into the width
   freed up by dropping their column's own gutter padding earlier.
   Placed after the two rules above (same specificity, so source
   order decides) so the 20px first/last-cell rule doesn't win here. */
.dtsl-compact-table th,
.dtsl-compact-table td,
.dtsl-compact-table > :not(caption) > * > *:first-child,
.dtsl-compact-table > :not(caption) > * > *:last-child {
  padding-left: 5px !important;
  padding-right: 5px !important;
}
/* Sếp's own request: setting/checkitems's Tên khách/Kho hàng label:value
   table - no divider line between the two rows, and text flush to the
   table's own left edge instead of the usual 20px first-cell breathing
   room above. Same specificity as the two general rules above, placed
   after so source order wins. */
.tight-label-table > :not(caption) > * > * {
  border-bottom: none !important;
}
.tight-label-table > :not(caption) > * > *:first-child {
  padding-left: 0 !important;
}
/* Sếp's own request: table content (header background + row dividers)
   should bleed flush to the card's own rounded edges instead of leaving
   the card-body's usual 20px padding (.card .card-body above) as a visible
   gap around it. Scoped to the .table itself (negative margin pulling it
   out to the wrapper's true edge, width increased to compensate) rather
   than zeroing the wrapper's own padding - .card-body.table-responsive (44
   AdminBundle list views use this exact combo class) often holds real
   content AFTER the table too (pagination, "Tổng đơn..." summary
   paragraphs) that still needs its normal padding; zeroing the wrapper
   would flush that trailing content against the card edge as well. */
.card-body.table-responsive > .table {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
}
.card-body.table-responsive > .table:first-child {
  margin-top: -20px;
}
/* Sếp's own follow-up: "all tables in Admin" also covers the ~20 views that
   spell the same wrapper as two separate nested divs instead of one combo
   class (<div class="card-body"><div class="table-responsive">...
   shiphostore/orderlist, setting/leadinfo, setting/checkitems...) - same
   fix, on the .table-responsive div itself this time since .card-body's
   own 20px padding isn't on the same element as the table-responsive here.
   Deliberately a direct-child selector (card-body > table-responsive, not
   just "any table-responsive inside a card-body somewhere") - a few views
   (doanhthusalev2's 2 side-by-side rate tables, setting/exportstock(shipho)
   's picker table) nest table-responsive inside a .row > .col-* grid
   column first for a genuinely narrower, non-full-width layout; the direct-
   child form only matches when table-responsive is the card-body's
   immediate content, i.e. an actual full-width single list table.

   Sếp's own follow-up #2: the -20px TOP pull needs the same :first-child
   guard the plain table.table variant already has below - shiphostore/
   feepackages puts a "Thêm mới" filter row before the table-responsive in
   the same card-body, and this rule was pulling the table up under that
   row regardless of what came before it. */
.card-body > .table-responsive {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
}
.card-body > .table-responsive:first-child {
  margin-top: -20px;
}
.card-body > .table-responsive > .table {
  width: 100%;
  margin: 0;
}
/* border-radius here + overflow-y so the now edge-to-edge table's square
   header/footer corners get clipped to the card's rounded shape -
   overflow-x stays auto (not hidden) so a table wider than the card still
   scrolls horizontally same as before.

   Sếp's own follow-up: radius is 13px, not .card's own 14px, on purpose.
   .card-body sits 1px inside .card's own border (.card has `border:1px
   solid`), so a card-body clipped to the SAME 14px radius as the outer
   card doesn't actually nest inside that outer curve - two circles of
   equal radius with offset centers (one pushed in 1px by the border)
   diverge right at the corner, leaving a thin sliver where the card's
   background peeks through the gap between the two curves, reading as a
   faded/blurry edge exactly at the rounded corner. Standard fix for
   nesting rounded corners inside a bordered box: inner-radius =
   outer-radius - border-width (14 - 1 = 13), so the inner curve is
   concentric with the outer one instead of merely equal. (An earlier
   attempt blamed this on double-rounding from a separate per-<th>
   border-radius and reverted to this single-clip mechanism - that revert
   was fine to keep, but didn't address the actual radius-mismatch cause,
   which is fixed here instead.) */
.card-body.table-responsive,
.card-body > .table-responsive {
  border-radius: 13px;
  overflow-x: auto;
  overflow-y: hidden;
}
/* Sếp's own request: setting/checkitems' "Đơn hàng về muộn" table should
   not have its header corners clipped round like every other bleed-to-edge
   table above - opt this one table-responsive back out via source order
   (this rule comes after the general one, so it wins at equal specificity). */
.card-body > .table-responsive.no-header-radius {
  border-radius: 0;
}
/* Sếp's own request: shiphostore/feepackages' table (the "Thêm mới" filter
   row above it means the table no longer bleeds flush to the card's own
   rounded top edge, per the :first-child guard above) still shows a
   rounded header background not meeting the table's own straight border -
   square it off same as shop-items-table above, just on the two-nested-div
   .table-responsive form this page uses instead of the combo class. */
.card-body > .table-responsive.square-header-table {
  border-radius: 0;
}
/* Sếp's own request: orderkilo/view's "Up Ảnh" (thương lượng photo
   upload) button, matching ZF1's original look - an attach icon + orange
   bold text, with the real <input type=file> invisibly covering the same
   area so a click anywhere on it opens the file picker natively (no JS
   click-forwarding needed, the page's own 'change' handler on
   .uploadthuongluong is untouched). */
.upload-thuongluong-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: orange;
  cursor: pointer;
}
.upload-thuongluong-btn input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
/* Sếp's own follow-up: same flush-edge treatment for tables that skip
   .table-responsive entirely (users/carecustomer's 6 small side-by-side
   report tables, each just <div class="col-lg-6"><div class="card">
   <div class="card-body"><table>...) - the negative margin is still
   relative to each table's own immediate .card-body, so this is safe even
   though these cards are only half-width in a 2-column row; it bleeds to
   that card's own edge, not the page's. :has() (not a wrapper div, since
   there isn't one here) rounds+clips the card-body itself to match.

   Left/right bleed applies to every such table, but the -20px TOP pull is
   :first-child only - several of these same cards put a heading line
   ("Doanh thu hôm nay...", "Thống kê gọi khách...") directly above the
   table inside the same card-body, and a top pull meant for a table sitting
   flush against the card-body's own top padding instead dragged the table
   up into that heading text, overlapping it. A table with a heading above
   it isn't touching the top edge in the first place, so it doesn't need
   (or want) that pull. */
.card-body > table.table {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
}
.card-body > table.table:first-child {
  margin-top: -20px;
}
/* 13px, not .card's own 14px - see the .card-body.table-responsive rule
   above for why (card-body sits 1px inside .card's own border, so it
   needs the border width subtracted to nest its curve concentrically
   instead of leaving a faded gap at the corner). */
.card-body:has(> table.table) {
  border-radius: 13px;
  /* overflow-x PHẢI auto (không phải shorthand "overflow:hidden") để bảng rộng
     cuộn ngang được - nhất là mobile. overflow:hidden shorthand cắt luôn trục
     ngang; và vì Chrome tái áp shorthand này theo pha :has-invalidation nên
     override từ rule khác không ăn -> buộc sửa tại nguồn. overflow-y vẫn hidden
     để bo góc trên/dưới. Desktop bảng vừa khung nên auto không hiện thanh cuộn. */
  overflow-x: auto;
  overflow-y: hidden;
}
/* Sếp's own request: a divider between the table's last row and the
   pagination/record-count row that follows it. partials/pagination.html.
   twig now always renders its own single, dedicated `.pagination-row`
   wrapper (nav + "Tổng: X" count together) regardless of which of the 38
   listing views includes it or how deeply nested their own card-body/
   table-responsive markup is - a plain descendant selector is enough,
   replacing the 4 separate markup-shape selectors this used to need before
   the partial owned its own wrapper (each caller previously built its own
   ad-hoc wrapping div/bare <nav>, some nested, some siblings, some with no
   wrapper at all - see git history if that ever needs revisiting).
   .table tbody tr:last-child td below explicitly zeroes the last row's own
   bottom border, so nothing was left separating the two without this.

   Width: 100%-plus-40px bleed here too - unlike the .table above, this row
   is never given the negative-margin treatment, so it still sat at the
   wrapper's original padded width while the table now bleeds all the way
   to the rounded card edge; a border-top on the div alone stopped ~20px
   short of the table's own full width on each side. Padding restores the
   same 20px the negative margin removes, so the count text/pagination nav
   inside still line up with the table's own first/last column content
   above, not flush against the card edge. */
.card-body .pagination-row {
  width: calc(100% + 40px);
  margin: 4px -20px 0;
  padding: 16px 20px 0;
  border-top: 1px solid var(--table-divider-color);
  box-sizing: border-box;
}
.table tbody tr:last-child td {
  border-bottom-width: 0px !important;
}
/* Sếp's own request: full-grid-table is meant to look like a real,
   closed grid (every cell, all 4 sides - see the border overrides
   near .full-grid-table.table-bordered above), so cutting the very
   last row's bottom border like every other .table does (divider-only
   look, no border needed under the final row) leaves this one looking
   cut off/unfinished at the bottom. Same (0,2,3) specificity as the
   rule above, placed AFTER it so source order wins the tie. */
.full-grid-table tbody tr:last-child td {
  border-bottom-width: 1px !important;
}
.table tbody td {
  vertical-align: middle;
  border-bottom-color: var(--table-divider-color);
  border-bottom-width: 1px !important;
}
.table tbody th {
  vertical-align: middle;
  padding: 20px 10px 20px 10px !important;
}

th {
  font-weight: 600;
  color: var(--gray-900);
}

.thead-sm > * > * {
  padding: 0.5rem 0.5rem !important;
}

.table > :not(caption) > * > * {
  background-color: var(--white);
  color: inherit;
}

.table-custom tfoot > tr > th:first-child,
.table-custom thead > tr > th:first-child,
.table-custom tr th:first-child,
.table-custom tr td:first-child {
  padding-left: 1.125rem !important;
}
.table-custom tfoot > tr > th:last-child,
.table-custom thead > tr > th:last-child,
.table-custom tr th:last-child,
.table-custom tr td:last-child {
  padding-right: 1.125rem !important;
}

.table-nowrap th {
  white-space: nowrap;
  color: var(--gray-500);
}

.table-light th {
  background: var(--light) !important;
}

.ac .action-item > a {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  color: var(--gray-500);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--box-shadow);
}

.table-header {
  padding: 8px 16px;
}

.table-search {
  margin-bottom: 20px;
}

.table.dataTable th {
  padding: 8px 16px;
}

.search-input input {
  font-size: 12px;
}
.search-input .btn-searchset {
  border-radius: 50px;
}

table.dataTable > thead .sorting:before, table.dataTable > thead .sorting_asc:before, table.dataTable > thead .sorting_desc:before, table.dataTable > thead .sorting_asc_disabled:before, table.dataTable > thead .sorting_desc_disabled:before {
  right: 5px !important;
  content: "\ea1d" !important;
  font-family: "tabler-icons";
  top: 50% !important;
  color: var(--gray-900) !important;
  font-size: 12px !important;
  opacity: 1 !important;
  position: absolute;
  font-weight: 400;
  line-height: 1px !important;
}

table.dataTable > thead .sorting:after, table.dataTable > thead .sorting_asc:after, table.dataTable > thead .sorting_desc:after, table.dataTable > thead .sorting_asc_disabled:after, table.dataTable > thead .sorting_desc_disabled:after {
  right: 0 !important;
  content: "\ea1a" !important;
  font-family: "tabler-icons";
  bottom: 12px !important;
  color: var(--gray-900) !important;
  font-size: 12px !important;
  opacity: 1 !important;
  position: absolute;
  font-weight: 400;
  line-height: 1px !important;
}

.table-dark th {
  color: #fff !important;
  background-color: #0B0D0E;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.table-dark tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.table.table-dark > :not(caption) > * > * {
  background-color: #0B0D0E;
  border-color: rgba(255, 255, 255, 0.1);
}

.table.table-success > :not(caption) > * > * {
  background-color: var(--success);
}

.table > :not(caption) > .table-primary > * {
  background-color: var(--primary);
  border-color: rgb(var(--primary-rgb), 0.1);
  color: #fff;
}

.border-primary thead tr th {
  border-color: var(--primary) !important;
}
.border-primary tbody td, .border-primary tbody th {
  border-color: var(--primary) !important;
}
.border-primary.table-bordered > :not(caption) > * {
  border-color: var(--primary) !important;
}

.table > :not(caption) > .table-secondary > * {
  background-color: var(--secondary);
  border-color: rgb(var(--secondary-rgb), 0.1);
  color: #fff;
}
/* Sếp's own request: price/list's nested price tables (Tính theo Kg/M3
   columns) section-header row inherited the site's --secondary color,
   which in this theme is a bright orange (#FFA201) - glaring for a
   small repeated label row. Same (0,2,1) specificity as the rule
   above, placed after so source order wins. Scoped to just these
   nested tables instead of touching the shared rule everywhere else
   it's used. */
.price-detail-table > :not(caption) > .table-secondary > * {
  background-color: #eee !important;
  color: var(--body-color) !important;
}

.border-secondary thead tr th {
  border-color: var(--secondary) !important;
}
.border-secondary tbody td, .border-secondary tbody th {
  border-color: var(--secondary) !important;
}
.border-secondary.table-bordered > :not(caption) > * {
  border-color: var(--secondary) !important;
}

.table > :not(caption) > .table-success > * {
  background-color: var(--success);
  border-color: rgb(var(--success-rgb), 0.1);
  color: #fff;
}

.border-success thead tr th {
  border-color: var(--success) !important;
}
.border-success tbody td, .border-success tbody th {
  border-color: var(--success) !important;
}
.border-success.table-bordered > :not(caption) > * {
  border-color: var(--success) !important;
}

.table > :not(caption) > .table-info > * {
  background-color: var(--info);
  border-color: rgb(var(--info-rgb), 0.1);
  color: #fff;
}

.border-info thead tr th {
  border-color: var(--info) !important;
}
.border-info tbody td, .border-info tbody th {
  border-color: var(--info) !important;
}
.border-info.table-bordered > :not(caption) > * {
  border-color: var(--info) !important;
}

.table > :not(caption) > .table-warning > * {
  background-color: var(--warning);
  border-color: rgb(var(--warning-rgb), 0.1);
  color: #fff;
}

.border-warning thead tr th {
  border-color: var(--warning) !important;
}
.border-warning tbody td, .border-warning tbody th {
  border-color: var(--warning) !important;
}
.border-warning.table-bordered > :not(caption) > * {
  border-color: var(--warning) !important;
}

.table > :not(caption) > .table-danger > * {
  background-color: var(--danger);
  border-color: rgb(var(--danger-rgb), 0.1);
  color: #fff;
}

.border-danger thead tr th {
  border-color: var(--danger) !important;
}
.border-danger tbody td, .border-danger tbody th {
  border-color: var(--danger) !important;
}
.border-danger.table-bordered > :not(caption) > * {
  border-color: var(--danger) !important;
}

.table > :not(caption) > .table-dark > * {
  background-color: var(--dark);
  border-color: rgb(var(--dark-rgb), 0.1);
  color: #fff;
}

.border-dark thead tr th {
  border-color: var(--dark) !important;
}
.border-dark tbody td, .border-dark tbody th {
  border-color: var(--dark) !important;
}
.border-dark.table-bordered > :not(caption) > * {
  border-color: var(--dark) !important;
}

.table > :not(caption) > .table-light > * {
  background-color: var(--light);
  border-color: rgb(var(--light-rgb), 0.1);
  color: #fff;
}

.border-light thead tr th {
  border-color: var(--light) !important;
}
.border-light tbody td, .border-light tbody th {
  border-color: var(--light) !important;
}
.border-light.table-bordered > :not(caption) > * {
  border-color: var(--light) !important;
}

.table > :not(caption) > .table-orange > * {
  background-color: var(--orange);
  border-color: rgb(var(--orange-rgb), 0.1);
  color: #fff;
}

.border-orange thead tr th {
  border-color: var(--orange) !important;
}
.border-orange tbody td, .border-orange tbody th {
  border-color: var(--orange) !important;
}
.border-orange.table-bordered > :not(caption) > * {
  border-color: var(--orange) !important;
}

.table > :not(caption) > .table-purple > * {
  background-color: var(--purple);
  border-color: rgb(var(--purple-rgb), 0.1);
  color: #fff;
}

.border-purple thead tr th {
  border-color: var(--purple) !important;
}
.border-purple tbody td, .border-purple tbody th {
  border-color: var(--purple) !important;
}
.border-purple.table-bordered > :not(caption) > * {
  border-color: var(--purple) !important;
}

.table > :not(caption) > .table-pink > * {
  background-color: var(--pink);
  border-color: rgb(var(--pink-rgb), 0.1);
  color: #fff;
}

.border-pink thead tr th {
  border-color: var(--pink) !important;
}
.border-pink tbody td, .border-pink tbody th {
  border-color: var(--pink) !important;
}
.border-pink.table-bordered > :not(caption) > * {
  border-color: var(--pink) !important;
}

.table > :not(caption) > .table-indigo > * {
  background-color: var(--indigo);
  border-color: rgb(var(--indigo-rgb), 0.1);
  color: #fff;
}

.border-indigo thead tr th {
  border-color: var(--indigo) !important;
}
.border-indigo tbody td, .border-indigo tbody th {
  border-color: var(--indigo) !important;
}
.border-indigo.table-bordered > :not(caption) > * {
  border-color: var(--indigo) !important;
}

.table > :not(caption) > .table-teal > * {
  background-color: var(--teal);
  border-color: rgb(var(--teal-rgb), 0.1);
  color: #fff;
}

.border-teal thead tr th {
  border-color: var(--teal) !important;
}
.border-teal tbody td, .border-teal tbody th {
  border-color: var(--teal) !important;
}
.border-teal.table-bordered > :not(caption) > * {
  border-color: var(--teal) !important;
}

.table > :not(caption) > .table-light > * {
  color: var(--body-color);
}

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

.set-star i {
  color: var(--border-color);
}
.set-star.filled i {
  color: var(--warning);
}

.sorting .form-check {
  min-height: inherit;
}

.tooltip-primary .tooltip-inner {
  background-color: var(--primary);
  color: #fff;
}
.tooltip-primary.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-primary.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--primary);
}
.tooltip-primary.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-primary.bs-tooltip-bottom .tooltip-arrow::before {
  border-top-color: var(--primary);
}
.tooltip-primary.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-primary.bs-tooltip-bottom .tooltip-arrow::before {
  border-right-color: var(--primary);
}
.tooltip-primary.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-primary.bs-tooltip-bottom .tooltip-arrow::before {
  border-left-color: var(--primary);
}

.tooltip-secondary .tooltip-inner {
  background-color: var(--secondary);
  color: #fff;
}
.tooltip-secondary.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-secondary.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--secondary);
}
.tooltip-secondary.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-secondary.bs-tooltip-bottom .tooltip-arrow::before {
  border-top-color: var(--secondary);
}
.tooltip-secondary.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-secondary.bs-tooltip-bottom .tooltip-arrow::before {
  border-right-color: var(--secondary);
}
.tooltip-secondary.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-secondary.bs-tooltip-bottom .tooltip-arrow::before {
  border-left-color: var(--secondary);
}

.tooltip-success .tooltip-inner {
  background-color: var(--success);
  color: #fff;
}
.tooltip-success.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-success.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--success);
}
.tooltip-success.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-success.bs-tooltip-bottom .tooltip-arrow::before {
  border-top-color: var(--success);
}
.tooltip-success.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-success.bs-tooltip-bottom .tooltip-arrow::before {
  border-right-color: var(--success);
}
.tooltip-success.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-success.bs-tooltip-bottom .tooltip-arrow::before {
  border-left-color: var(--success);
}

.tooltip-info .tooltip-inner {
  background-color: var(--info);
  color: #fff;
}
.tooltip-info.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-info.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--info);
}
.tooltip-info.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-info.bs-tooltip-bottom .tooltip-arrow::before {
  border-top-color: var(--info);
}
.tooltip-info.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-info.bs-tooltip-bottom .tooltip-arrow::before {
  border-right-color: var(--info);
}
.tooltip-info.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-info.bs-tooltip-bottom .tooltip-arrow::before {
  border-left-color: var(--info);
}

.tooltip-warning .tooltip-inner {
  background-color: var(--warning);
  color: #fff;
}
.tooltip-warning.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-warning.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--warning);
}
.tooltip-warning.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-warning.bs-tooltip-bottom .tooltip-arrow::before {
  border-top-color: var(--warning);
}
.tooltip-warning.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-warning.bs-tooltip-bottom .tooltip-arrow::before {
  border-right-color: var(--warning);
}
.tooltip-warning.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-warning.bs-tooltip-bottom .tooltip-arrow::before {
  border-left-color: var(--warning);
}

.tooltip-danger .tooltip-inner {
  background-color: var(--danger);
  color: #fff;
}
.tooltip-danger.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-danger.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--danger);
}
.tooltip-danger.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-danger.bs-tooltip-bottom .tooltip-arrow::before {
  border-top-color: var(--danger);
}
.tooltip-danger.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-danger.bs-tooltip-bottom .tooltip-arrow::before {
  border-right-color: var(--danger);
}
.tooltip-danger.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-danger.bs-tooltip-bottom .tooltip-arrow::before {
  border-left-color: var(--danger);
}

.tooltip-dark .tooltip-inner {
  background-color: var(--dark);
  color: #fff;
}
.tooltip-dark.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-dark.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--dark);
}
.tooltip-dark.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-dark.bs-tooltip-bottom .tooltip-arrow::before {
  border-top-color: var(--dark);
}
.tooltip-dark.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-dark.bs-tooltip-bottom .tooltip-arrow::before {
  border-right-color: var(--dark);
}
.tooltip-dark.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-dark.bs-tooltip-bottom .tooltip-arrow::before {
  border-left-color: var(--dark);
}

.tooltip-light .tooltip-inner {
  background-color: var(--light);
  color: #fff;
}
.tooltip-light.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-light.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--light);
}
.tooltip-light.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-light.bs-tooltip-bottom .tooltip-arrow::before {
  border-top-color: var(--light);
}
.tooltip-light.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-light.bs-tooltip-bottom .tooltip-arrow::before {
  border-right-color: var(--light);
}
.tooltip-light.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-light.bs-tooltip-bottom .tooltip-arrow::before {
  border-left-color: var(--light);
}

.tooltip-orange .tooltip-inner {
  background-color: var(--orange);
  color: #fff;
}
.tooltip-orange.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-orange.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--orange);
}
.tooltip-orange.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-orange.bs-tooltip-bottom .tooltip-arrow::before {
  border-top-color: var(--orange);
}
.tooltip-orange.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-orange.bs-tooltip-bottom .tooltip-arrow::before {
  border-right-color: var(--orange);
}
.tooltip-orange.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-orange.bs-tooltip-bottom .tooltip-arrow::before {
  border-left-color: var(--orange);
}

.tooltip-purple .tooltip-inner {
  background-color: var(--purple);
  color: #fff;
}
.tooltip-purple.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-purple.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--purple);
}
.tooltip-purple.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-purple.bs-tooltip-bottom .tooltip-arrow::before {
  border-top-color: var(--purple);
}
.tooltip-purple.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-purple.bs-tooltip-bottom .tooltip-arrow::before {
  border-right-color: var(--purple);
}
.tooltip-purple.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-purple.bs-tooltip-bottom .tooltip-arrow::before {
  border-left-color: var(--purple);
}

.tooltip-pink .tooltip-inner {
  background-color: var(--pink);
  color: #fff;
}
.tooltip-pink.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-pink.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--pink);
}
.tooltip-pink.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-pink.bs-tooltip-bottom .tooltip-arrow::before {
  border-top-color: var(--pink);
}
.tooltip-pink.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-pink.bs-tooltip-bottom .tooltip-arrow::before {
  border-right-color: var(--pink);
}
.tooltip-pink.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-pink.bs-tooltip-bottom .tooltip-arrow::before {
  border-left-color: var(--pink);
}

.tooltip-indigo .tooltip-inner {
  background-color: var(--indigo);
  color: #fff;
}
.tooltip-indigo.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-indigo.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--indigo);
}
.tooltip-indigo.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-indigo.bs-tooltip-bottom .tooltip-arrow::before {
  border-top-color: var(--indigo);
}
.tooltip-indigo.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-indigo.bs-tooltip-bottom .tooltip-arrow::before {
  border-right-color: var(--indigo);
}
.tooltip-indigo.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-indigo.bs-tooltip-bottom .tooltip-arrow::before {
  border-left-color: var(--indigo);
}

.tooltip-teal .tooltip-inner {
  background-color: var(--teal);
  color: #fff;
}
.tooltip-teal.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-teal.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--teal);
}
.tooltip-teal.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-teal.bs-tooltip-bottom .tooltip-arrow::before {
  border-top-color: var(--teal);
}
.tooltip-teal.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-teal.bs-tooltip-bottom .tooltip-arrow::before {
  border-right-color: var(--teal);
}
.tooltip-teal.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-teal.bs-tooltip-bottom .tooltip-arrow::before {
  border-left-color: var(--teal);
}

.tooltip-inner {
  padding: 0.3125rem 0.625rem;
  background-color: var(--dark);
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--dark);
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--dark);
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: var(--dark);
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--dark);
}

.tooltip-primary .tooltip-inner {
  background-color: var(--primary);
}
.tooltip-primary.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-primary.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--primary);
}
.tooltip-primary.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-primary.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--primary);
}
.tooltip-primary.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-primary.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: var(--primary);
}
.tooltip-primary.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-primary.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--primary);
}

.tooltip-secondary .tooltip-inner {
  background-color: var(--secondary);
}
.tooltip-secondary.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-secondary.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--secondary);
}
.tooltip-secondary.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-secondary.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--secondary);
}
.tooltip-secondary.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-secondary.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: var(--secondary);
}
.tooltip-secondary.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-secondary.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--secondary);
}

.tooltip-success .tooltip-inner {
  background-color: var(--success);
}
.tooltip-success.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-success.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--success);
}
.tooltip-success.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-success.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--success);
}
.tooltip-success.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-success.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: var(--success);
}
.tooltip-success.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-success.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--success);
}

.tooltip-info .tooltip-inner {
  background-color: var(--info);
}
.tooltip-info.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-info.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--info);
}
.tooltip-info.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-info.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--info);
}
.tooltip-info.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-info.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: var(--info);
}
.tooltip-info.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-info.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--info);
}

.tooltip-warning .tooltip-inner {
  background-color: var(--warning);
}
.tooltip-warning.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-warning.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--warning);
}
.tooltip-warning.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-warning.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--warning);
}
.tooltip-warning.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-warning.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: var(--warning);
}
.tooltip-warning.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-warning.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--warning);
}

.tooltip-danger .tooltip-inner {
  background-color: var(--danger);
}
.tooltip-danger.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-danger.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--danger);
}
.tooltip-danger.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-danger.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--danger);
}
.tooltip-danger.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-danger.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: var(--danger);
}
.tooltip-danger.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-danger.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--danger);
}

.tooltip-dark .tooltip-inner {
  background-color: var(--dark);
}
.tooltip-dark.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .tooltip-dark.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--dark);
}
.tooltip-dark.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .tooltip-dark.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--dark);
}
.tooltip-dark.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .tooltip-dark.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: var(--dark);
}
.tooltip-dark.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .tooltip-dark.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--dark);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.bd-example-zindex-levels {
  min-height: 15rem;
  z-index: 1;
}
.bd-example-zindex-levels > div {
  color: var(--bs-body-bg);
}
.bd-example-zindex-levels > div > span {
  position: absolute;
  right: 5px;
  bottom: 0;
}
.bd-example-zindex-levels > :nth-child(2) {
  top: 1.5rem;
  left: 1.5rem;
}
.bd-example-zindex-levels > :nth-child(3) {
  top: 3rem;
  left: 3rem;
}
.bd-example-zindex-levels > :nth-child(4) {
  top: 4.5rem;
  left: 4.5rem;
}
.bd-example-zindex-levels > :nth-child(5) {
  top: 6rem;
  left: 6rem;
}

.color-container {
  width: 5rem;
  height: 5rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 3rem;
}

.text-container {
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  box-shadow: var(--box-shadow);
}

.color-box {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
}

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

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

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

.progress-xs {
  height: 3px;
}

.progress-sm {
  height: 5px;
}

.progress-md {
  height: 8px;
}

.progress-lg {
  height: 12px;
}

.progress-xl {
  height: 15px;
}

.progress-xxl {
  height: 20px;
}

.progress-2xl {
  height: 45px;
}

.progress-with-border .progress-bar + .progress-bar {
  border-left: 3px solid var(--white);
}

.progress-value {
  display: block;
  position: absolute;
  top: -28px;
  right: 0px;
}

.pipeline-progress .progress {
  background: transparent;
  width: 70px;
  height: 5px;
}
.pipeline-progress .progress .progress-bar {
  width: 70px;
  height: 5px;
  border-radius: 5px;
}
.pipeline-progress .progress .progress-bar.progress-bar-success {
  background: var(--success);
}
.pipeline-progress .progress .progress-bar.progress-bar-violet {
  background: var(--purple);
}
.pipeline-progress .progress .progress-bar.progress-bar-info {
  background: var(--info);
}
.pipeline-progress .progress .progress-bar.progress-bar-warning {
  background: var(--warning);
}
.pipeline-progress .progress .progress-bar.progress-bar-green {
  background: var(--teal);
}
.pipeline-progress .progress .progress-bar.progress-bar-danger {
  background: var(--danger);
}
.pipeline-progress span {
  margin-left: 10px;
  color: var(--gray-900);
  font-weight: 500;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.chat-users {
  max-height: calc(-23.5rem + 100vh) !important;
  padding-bottom: 10px !important;
}

.user-list {
  cursor: pointer;
}
.user-list.active {
  background: var(--light-200);
}
.user-list:hover {
  background: var(--light-200);
}

.chat-user-nav {
  flex-shrink: 0;
  width: 350px;
  border-right: 1px solid var(--border-color);
}
@media (max-width: 991.98px) {
  .chat-user-nav {
    border: none !important;
    width: 100% !important;
  }
}

.message-count {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.message-body {
  max-height: calc(-23.5rem + 100vh) !important;
  background-image: url(../img/bg/chat-bg.png);
  background-size: cover;
}

.message-box {
  border: 1px solid var(--border-color);
}

.receive-message {
  border-radius: 0 5px 5px 5px;
  background: var(--light-200);
}

.sent-message {
  border-radius: 5px 0 5px 5px;
  background: var(--light-800);
}

.chat-list {
  max-width: 75%;
}
@media (max-width: 1199.98px) {
  .chat-list {
    max-width: 85%;
  }
}
@media (max-width: 575.98px) {
  .chat-list {
    max-width: 100%;
  }
}

.count-circle, .message-count {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.chat-user-nav {
  flex-shrink: 0;
  width: 350px;
  border-right: 1px solid var(--border-color);
}

@media (max-width: 991.98px) {
  .chat-messages {
    display: none;
  }
}
.chat-messages .custom-dot {
  position: relative;
  left: -3px;
}

@media (max-width: 991.98px) {
  .chat-messages.show {
    display: block;
  }
}

@media (max-width: 991.98px) {
  .chat-user-nav.hide {
    display: none;
  }
}

/*============================
  36.todo
============================*/
.todo-inbox-check .checkboxs {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
.todo-inbox-check .checkboxs input ~ .checkmarks {
  border-color: rgba(145, 158, 171, 0.3);
  border-radius: 5px;
  margin-top: 0;
  width: 20px;
  height: 20px;
}
.todo-inbox-check .checkboxs input:checked ~ .checkmarks {
  border-color: var(--primary);
  background-color: var(--primary);
}

.cursor-pointer {
  cursor: pointer;
}

.strike-info h4 {
  margin-bottom: 0;
  font-size: 14px;
}

.iti__country-list {
  z-index: 101;
}

.todo-strike-content .strike-info h4 {
  text-decoration: line-through;
  margin-bottom: 0;
}
.todo-strike-content .strike-info p {
  text-decoration: line-through;
}

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

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.radio-activity li {
  display: inline-block;
}
.radio-activity li .active-type input[type=radio] {
  display: none;
}
.radio-activity li .active-type input[type=radio] ~ label {
  border: 1px solid var(--border-color);
  padding: 6px 16px;
  color: var(--gray-900);
  cursor: pointer;
}
.radio-activity li .active-type input[type=radio] ~ label i {
  margin-right: 5px;
}
.radio-activity li .active-type input[type=radio]:checked ~ label {
  border-color: var(--primary);
  color: var(--primary);
}
.radio-activity li:last-child {
  margin-right: 0;
}

.step-progress .step {
  position: relative;
  padding: 10px 25px;
  font-weight: 500;
  font-size: 14px;
  color: var(--white);
  background-color: var(--light);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  margin-right: -8px;
}
.step-progress .step.appointment {
  background-color: var(--light-transparent);
  color: var(--dark);
}
.step-progress .step:first-child {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.step-progress .step:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%);
  margin-right: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.product-select {
  min-width: 200px;
}

.custom-editor {
  min-height: 90px;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.single-video .join-video {
  margin-bottom: 0;
  height: calc(100vh - 198px);
}
@media (max-width: 767.98px) {
  .single-video .join-video {
    height: calc(100vh - 214px);
  }
}
.single-video .join-video img {
  border-radius: 5px;
}
.single-video .join-video .video-avatar img {
  width: 170px;
  height: 146px;
  object-fit: cover;
}
@media (max-width: 767.98px) {
  .single-video .join-video .video-avatar img {
    width: 100px;
    height: 86px;
  }
}

.join-video img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-max-height {
  position: relative;
  height: calc(100vh - 195px);
  overflow-y: auto;
}
@media (max-width: 767.98px) {
  .card-max-height {
    height: calc(100vh - 195px);
  }
}

.animation-ripple {
  animation: ripple 2s infinite;
}

@keyframes ripple {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 40px rgba(0, 0, 0, 0);
  }
}
.truncate-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.email-sidebar {
  max-width: 288px;
  height: calc(100vh - 56px) !important;
}
@media (max-width: 767.98px) {
  .email-sidebar {
    max-width: 100%;
    margin-bottom: 20px;
  }
}

.mail-notifications {
  height: calc(100vh - 56px) !important;
}

.mail-detail {
  height: calc(100vh - 56px) !important;
}

.more-menu {
  display: none;
}

.mails-list .list-group-item {
  cursor: pointer;
}

.mail-notifications {
  width: 50%;
  transition: 0.5s all;
}
.mail-notifications.compress-width {
  max-width: 400px;
  transition: 0.5s all;
}
@media (max-width: 767.98px) {
  .mail-notifications.compress-width {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .mail-notifications {
    width: 100%;
    max-width: 100%;
  }
}

.tag-with-img .choices__inner {
  border: 0;
  padding: 0;
}

.list-item-hover {
  transition: 0.5s all;
}
.list-item-hover:hover {
  border-color: var(--primary) !important;
  transition: 0.5s all;
}

.w-120 {
  width: 125px;
}

.project-status {
  min-width: 265px;
}

.kanban-drag-wrap, .kanban-drag {
  min-width: 220px;
  min-height: 50px;
}

.files-list a.active {
  background: var(--light);
  border-radius: 5px;
}

.img-full-view a {
  position: relative;
  transition: 0.5s all;
  display: block;
}
.img-full-view a span {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translatex(-50%);
  transition: 0.5s all;
  background: var(--white);
  opacity: 0;
}
.img-full-view a span i {
  color: var(--dark);
  opacity: 1;
}
.img-full-view a:hover {
  transition: 0.5s all;
}
.img-full-view a:hover span {
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 0.5s all;
  opacity: 0.5;
}
.img-full-view a:hover::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: var(--gray-900);
  opacity: 0.8;
  position: absolute;
  transition: 0.5s all;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.img-full-view a img {
  transition: 0.5s all;
}

.card-img-hover {
  position: relative;
  overflow: hidden;
  transition: 0.5s all;
}
.card-img-hover img {
  transition: 0.5s all;
}
.card-img-hover:hover {
  transition: 0.5s all;
}
.card-img-hover:hover img {
  transform: scale(1.14);
  transition: 0.5s all;
}

#compose-view {
  overflow-y: auto;
  z-index: 9999;
  display: none;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#compose-view.show {
  display: flex;
  transform: scale(1);
}

.compose-view {
  top: auto;
  bottom: 0;
  right: 20px;
  max-width: 500px;
  width: 100%;
  left: auto;
  margin: 20px 0 20px auto;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.compose-view .choices__inner {
  border: 0;
  padding: 0;
}
.compose-view .choices[data-type*=text] .choices__inner {
  padding: 0 !important;
}

.compose-header {
  border-radius: 4px 4px 0 0;
}

.compose-footer {
  border-radius: 0 0 4px 4px;
}

.drag-upload-btn {
  font-size: 12px;
  font-weight: 600;
  border-radius: 5px;
  padding: 6px 16px;
  position: relative;
  transition: all 0.5s;
}
.drag-upload-btn input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.file-upload {
  border-radius: 5px;
  text-align: center;
  position: relative;
}
.file-upload input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-upload.drag-file {
  height: 120px;
}

.note-edit-wrap {
  display: none;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.scrollspy-example {
  position: relative;
  height: 200px;
  margin-top: 0.5rem;
  overflow: auto;
}

.grid-structure .grid-container {
  background-color: var(--light);
  margin-bottom: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 10px 20px;
}

.icon-box .card {
  height: 80px;
  width: 80px;
  margin-bottom: 0 !important;
  cursor: pointer;
  text-align: center;
  line-height: 80px;
}
.icon-box .card .card-body {
  padding: 0;
}
.icon-box .card .card-body i {
  vertical-align: middle;
}
.icon-box .card:hover iconify-icon {
  color: var(--primary);
}

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

.icons-list-demo div {
  cursor: pointer;
  line-height: 45px;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}
.icons-list-demo div p {
  margin-bottom: 0;
  line-height: inherit;
}
.icons-list-demo div:hover, .icons-list-demo div:hover i {
  color: var(--primary);
}
.icons-list-demo i {
  text-align: center;
  vertical-align: middle;
  font-size: 24px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin-right: 12px;
  border-radius: 3px;
  display: inline-block;
  transition: all 0.2s;
}

.icons-list {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
}
.icons-list li {
  display: block;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  font-size: 18px;
  border-radius: 50px;
  border: 1px solid var(--border-color);
  -webkit-box-shadow: 0 2px 3px rgb(215, 197, 255);
  -moz-box-shadow: 0 2px 3px rgb(215, 197, 255);
  box-shadow: 0 2px 3px rgb(215, 197, 255);
}
.icons-list .icons-list-item {
  display: block;
  width: 50px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  font-size: 18px;
  border-radius: 50px;
  border: 1px solid var(--border-color);
}
.icons-list .icons-list-item:hover {
  color: var(--primary);
  font-size: 24px;
}

.h-250 {
  height: 250px;
}

#sales-income .apexcharts-bar-series .apexcharts-series:nth-child(1) path, #revenue-income .apexcharts-bar-series .apexcharts-series:nth-child(1) path, #leads_stage .apexcharts-bar-series .apexcharts-series:nth-child(1) path, #s-col .apexcharts-bar-series .apexcharts-series:nth-child(1) path, #s-col-stacked .apexcharts-bar-series .apexcharts-series:nth-child(1) path {
  fill: var(--primary);
}

#deals_stage .apexcharts-bar-series .apexcharts-series path, #emp-department .apexcharts-bar-series .apexcharts-series path, #s-bar .apexcharts-bar-series .apexcharts-series path, #mixed-chart .apexcharts-bar-series .apexcharts-series path {
  fill: var(--primary);
}

#mixed-chart .apexcharts-legend-series:first-child .apexcharts-legend-marker, #s-col-stacked .apexcharts-legend-series:first-child .apexcharts-legend-marker, #s-col .apexcharts-legend-series:first-child .apexcharts-legend-marker {
  fill: var(--primary);
}

#s-line .apexcharts-line-series .apexcharts-series path {
  stroke: var(--primary);
}
#s-line .apexcharts-line-series .apexcharts-marker {
  fill: var(--primary);
}

#chart-bar-stacked .c3-target-data2 .c3-bar, #chart-bar .c3-target-data2 .c3-bar, #chart-bar-rotated .c3-target-data2 .c3-bar {
  fill: var(--primary) !important;
}

#chart-spline-rotated .c3-target-data2 .c3-line {
  stroke: var(--primary) !important;
}
#chart-spline-rotated .c3-target-data2 .c3-circle {
  fill: var(--primary) !important;
}

#contacts-analysis .apexcharts-legend-text, #leadpiechart .apexcharts-legend-text {
  color: var(--gray-900) !important;
  font-weight: 500 !important;
}

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

.jvm-zoom-btn {
  background-color: var(--light);
  color: var(--body-color);
  border: 1px solid var(--border-color);
  font-size: 20px;
}

#vector-map,
#marker-map,
#marker-image-map,
#lines-map,
#us-map,
#canada-map,
#spain-map,
#russia-map {
  height: 21.875rem;
}

.jvm-tooltip {
  background-color: #1a1c1e;
}

#vector-map #jvm-regions-group path,
#marker-map #jvm-regions-group path,
#marker-image-map #jvm-regions-group path,
#lines-map #jvm-regions-group path,
#users-map #jvm-regions-group path {
  fill: var(--light);
}

.jvm-zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
}

.jvm-zoom-btn.jvm-zoomin {
  inset-block-start: 5px;
}

#jvm-markers-labels-group text {
  fill: var(--body-color);
}

.snow-editor {
  height: 120px;
}

#worktime-chart,
#unproductivetime-chart,
#productivetime-chart,
#manualtime-chart {
  max-width: 65px !important;
  min-height: 60px !important;
}

.bg-soft-indigo {
  background-color: var(--indigo-transparent);
  color: var(--indigo);
}
.bg-soft-indigo:hover, .bg-soft-indigo:focus, .bg-soft-indigo.active {
  background-color: var(--indigo);
  color: var(--white);
}

.social-links li {
  margin: 0 2px;
}
.social-links li a {
  font-size: 16px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-links li a:hover, .social-links li a:focus {
  color: var(--heading-color);
  background-color: var(--light);
}

.view-icons .btn {
  color: var(--heading-color);
  font-size: 15px !important;
}
.view-icons .btn:hover, .view-icons .btn.active {
  background-color: var(--teal);
  color: var(--white);
}

.support-btn-group label {
  color: var(--gray-900);
}
@media (max-width: 575.98px) {
  .support-btn-group .btn {
    padding: 8px 10px;
  }
}

.count-value {
  height: 16px;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  color: var(--white);
  font-size: 10px;
  border-radius: 50%;
}

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

[data-bs-theme=dark] .super-admin-logo-dark {
  display: none;
}

[data-bs-theme=light] .super-admin-logo-light {
  display: none;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.settings-sidebar a {
  border-radius: 5px;
  color: var(--gray-500);
}
.settings-sidebar a.active {
  background: var(--primary-transparent);
  color: var(--primary);
  border-left: 1px solid var(--primary);
}
.settings-sidebar a:hover {
  color: var(--primary);
}

.profile-upload .profile-upload-img span {
  color: var(--gray-400);
  position: absolute;
}
.profile-upload .preview1 {
  display: none;
}
.profile-upload .it {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  display: block;
  position: relative;
  background: var(--white);
  object-fit: cover;
}
.profile-upload .profile-remove {
  display: none;
}
.profile-upload .profile-remove-btn {
  width: 14px;
  height: 14px;
  font-size: 10px;
  color: var(--white);
  background: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 10px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  right: 8px;
}

.w-min-content {
  min-width: max-content;
}

.theme-type-images {
  flex-wrap: wrap;
}
.theme-type-images .theme-image {
  border: 1px solid var(--border-color);
}
.theme-type-images .theme-image img {
  width: 150px;
}
@media (max-width: 1399.98px) {
  .theme-type-images .theme-image img {
    width: 130px;
  }
}
.theme-type-images .theme-image span {
  color: var(--gray-900);
}
.theme-type-images .theme-image.active {
  border-color: var(--primary);
}
.theme-type-images .theme-image.active span {
  color: var(--primary);
}

.theme-colors span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.theme-colors span.active {
  background-color: rgba(var(--primary-rgb), 0.1);
}
.theme-colors span.active:after {
  content: "";
  width: 25px;
  height: 25px;
  background-color: var(--primary);
  border-radius: 50%;
  opacity: 1;
}
.theme-colors span.theme-secondary {
  background-color: var(--secondary);
}
.theme-colors span.theme-secondary.active {
  background-color: rgba(var(--secondary-rgb), 0.1);
}
.theme-colors span.theme-secondary.active:after {
  background-color: var(--secondary);
}
.theme-colors span.theme-violet {
  background-color: var(--indigo);
}
.theme-colors span.theme-violet.active {
  background-color: rgba(var(--indigo-rgb), 0.1);
}
.theme-colors span.theme-violet.active:after {
  background-color: var(--indigo);
}
.theme-colors span.theme-blue {
  background-color: var(--info);
}
.theme-colors span.theme-blue.active {
  background-color: rgba(var(--info-rgb), 0.1);
}
.theme-colors span.theme-blue.active:after {
  background-color: var(--info);
}
.theme-colors span.theme-brown {
  background-color: var(--teal);
}
.theme-colors span.theme-brown.active {
  background-color: rgba(var(--teal-rgb), 0.1);
}
.theme-colors span.theme-brown.active:after {
  background-color: var(--teal);
}

.table.notification-table tbody tr td {
  padding: 5px !important;
}

.bank-radio {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}
.bank-radio:checked + .bank-box {
  border: 2px solid var(--success) !important;
  background: var(--white) !important;
}
.bank-radio:checked + .bank-box .check-icon {
  opacity: 1;
}

.bank-box {
  background: var(--light);
  border: 2px solid var(--light);
  padding: 20px;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: border 0.2s ease;
}
.bank-box .check-icon {
  position: absolute;
  top: -12px;
  left: -8px;
  background-color: var(--success);
  color: var(--white);
  font-size: 11px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  border: 3px solid var(--white);
}
.bank-box .check-icon::before {
  content: "✔";
  opacity: 1;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.account-bg-01 {
  background-image: url(../img/authentication/login-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  height: calc(100vh - 40px);
}

.account-bg-02 {
  background-image: url(../img/authentication/register-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  height: calc(100vh - 40px);
}

.account-bg-03 {
  background-image: url(../img/authentication/forgot-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  height: calc(100vh - 40px);
}

.account-bg-04 {
  background-image: url(../img/authentication/reset-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  height: calc(100vh - 40px);
}

.account-bg-05 {
  background-image: url(../img/authentication/email-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  height: calc(100vh - 40px);
}

.account-bg-06 {
  background-image: url(../img/authentication/verification-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  height: calc(100vh - 40px);
}

.account-bg-07 {
  background-image: url(../img/authentication/success-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  height: calc(100vh - 40px);
}

.link-hover {
  position: relative;
}
.link-hover:after {
  content: "";
  height: 2px;
  width: 100%;
  background: var(--primary);
  transform: scale(0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: absolute;
  bottom: -3px;
  left: 0;
}
.link-hover:hover:after {
  transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
}
.link-hover:hover {
  color: var(--primary) !important;
}

.bg-backdrop {
  background: rgba(255, 255, 255, 0.9490196078);
  backdrop-filter: blur(10px);
}

.or-login h6:after {
  content: "";
  background: var(--gray-100);
  width: 21px;
  height: 1px;
  position: absolute;
  top: 50%;
  left: calc(50% - 40px);
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.or-login h6:before {
  content: "";
  background: var(--gray-100);
  width: 21px;
  height: 1px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  position: absolute;
  right: calc(50% - 40px);
}

.digit-group input {
  width: 70px !important;
  height: 70px;
  border: 1px solid var(--border-color);
}
.digit-group input.active {
  border: 2px solid var(--primary);
}

.error-img {
  max-width: 500px;
}

.count-box {
  width: 85px;
  height: 85px;
}
@media (max-width: 575.98px) {
  .count-box {
    width: 50px;
    height: 50px;
  }
}

.account-page .acc-vh, .account-page .vh-100 {
  height: calc(100vh - 20px) !important;
}

.auth-logo img {
  width: 100%;
  max-width: 90px;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.blog-item .blog-img {
  position: relative;
  overflow: hidden;
}
.blog-item .blog-img img {
  width: 100%;
  transition: 0.8s;
}
.blog-item .blog-img:hover::before {
  -webkit-animation: circle 1s;
  animation: circle 1s;
}
.blog-item .blog-img:hover img {
  transform: scale(1.1);
}
.blog-item .blog-img::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  content: "";
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 100%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  opacity: 0;
}

@keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}
/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.add-details-wizard ul {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
@media (max-width: 575.98px) {
  .add-details-wizard ul {
    flex-direction: column;
  }
}
.add-details-wizard ul li {
  line-height: normal;
  background: var(--light);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
@media (max-width: 575.98px) {
  .add-details-wizard ul li {
    width: 100%;
    margin-bottom: 10px;
  }
}
.add-details-wizard ul li span {
  margin-right: 5px;
}
.add-details-wizard ul li .multi-step-info h6 {
  margin-bottom: 0;
  font-weight: 500;
  font-size: 14px;
}
.add-details-wizard ul li.active {
  background: var(--primary);
  color: var(--white);
}
.add-details-wizard ul li.active h6 {
  color: var(--white);
}

fieldset {
  display: none;
}
fieldset#first-field-file {
  display: block;
}

.sign-item .status-radio:checked + label:before, .sign-item .status-radio:not(:checked) + label:before {
  border: 1px solid var(--border-color);
}
.sign-item .status-radio:checked + label:before {
  border-color: var(--primary);
}

.notication-card .noti-btn {
  opacity: 0;
  transition: 0.3s;
}
@media (max-width: 767.98px) {
  .notication-card .noti-btn {
    opacity: 1;
  }
}
.notication-card:hover .noti-btn {
  opacity: 1;
}

.kanban-list-items {
  min-width: 300px;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.line-title {
  background: var(--linear-gradient);
  width: 3px;
  height: 16px;
}

.custom-card-icon {
  position: absolute;
  top: 0;
  right: 0;
  outline: 10px solid var(--light);
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.custom-card-icon::before,
.custom-card-icon::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: transparent;
  pointer-events: none;
}

.custom-card-icon::before {
  top: 0;
  left: -29px;
  border-top-right-radius: 10px;
  box-shadow: 7px -11px 0 0 var(--light);
}

.custom-card-icon::after {
  bottom: -33px;
  right: 0;
  border-top-right-radius: 10px;
  box-shadow: 7px -9px 0 0 var(--light);
}

.deal-stage-chart {
  height: 200px;
  width: 173px;
}

.chart-stage-1 {
  width: 145px;
  height: 145px;
}

.chart-stage-2 {
  width: 90px;
  height: 90px;
}

.chart-stage-3 {
  width: 75px;
  height: 75px;
  right: 20px;
}

.chart-stage-4 {
  width: 53px;
  height: 53px;
  bottom: 40px;
}

.custom-avatar {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deals-stage {
  width: 200px;
  height: 200px;
}

.lost-stage {
  width: 140px;
  height: 140px;
}

.arrow-icon {
  border-style: solid;
  border-color: transparent transparent transparent var(--secondary);
  border-width: 36px 0 36px 36px;
  position: absolute;
  right: -15px;
  filter: drop-shadow(6px 0 6px rgba(0, 0, 0, 0.25));
  z-index: -1;
}
.arrow-icon.arrow-primary {
  border-color: transparent transparent transparent var(--primary);
}

#storage-request {
  height: 200px !important;
  width: 100% !important;
}

.progress-bg {
  background-image: url("../img/bg/progress-bg.png");
}

.support-btn-group .btn-check:checked + .btn-outline-primary,
.support-btn-group .btn-outline-primary:first-child:active,
.support-btn-group :not(.btn-check) + .btn-outline-primary:active,
.support-btn-group .btn-check + .btn-outline-primary:hover {
  background: var(--primary);
}

.camp-card-row {
  --bs-gutter-x: 0 !important;
}
@media (max-width: 991.98px) {
  .camp-card-row {
    --bs-gutter-x: 1.5rem !important;
  }
}
.camp-card-row .col-sm-6:last-child .camp-card {
  border-right: 1px solid var(--border-color);
}
@media (max-width: 1199.98px) {
  .camp-card-row .col-sm-6:nth-child(2) .camp-card {
    border-right: 1px solid var(--border-color);
  }
}
.camp-card-row .camp-card {
  border-right: none;
  border-radius: 0px;
}
@media (max-width: 991.98px) {
  .camp-card-row .camp-card {
    border-right: 1px solid var(--border-color);
  }
}

.social-card {
  position: relative;
  overflow: hidden;
}
.social-card .line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
}

.inset-indigo {
  box-shadow: var(--shadow-inset-indigo);
}

.inset-success {
  box-shadow: var(--shadow-inset-success);
}

.inset-info {
  box-shadow: var(--shadow-inset-info);
}

.inset-danger {
  box-shadow: var(--shadow-inset-danger);
}

.holiday-card .border-line {
  width: 100%;
  height: 4px;
  border-radius: 10px;
  display: block;
}
.holiday-card .avatar {
  border-radius: 10px;
}
.holiday-card .avatar:hover {
  background: unset !important;
}
.holiday-card .text-soft-indigo {
  color: var(--indigo-400);
}
.holiday-card .text-soft-success {
  color: var(--success-400);
}
.holiday-card .text-soft-info {
  color: var(--info-400);
}
.holiday-card .text-soft-danger {
  color: var(--danger-400);
}

.circular-progress {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--light);
}

.mw-74 {
  min-width: 74px;
}

.circular-progress {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Use --clr (from JS) for the progress and --pg for the percentage */
  background: radial-gradient(closest-side, white calc(100% - 3px), transparent 0), conic-gradient(var(--clr, #000) var(--pg, 0%), var(--light) 0);
}

.card-hover:hover {
  background: var(--light);
}

.leads-card .avatar {
  padding: 12px;
  border-radius: 10px;
}
.leads-card .bg-success-200 {
  background: var(--success-gradient-200);
}
.leads-card .bg-purple-200 {
  background: var(--purple-gradient-200);
}
.leads-card .bg-pink-200 {
  background: var(--pink-gradient-200);
}
.leads-card .bg-indigo-200 {
  background: var(--indigo-gradient-200);
}
.leads-card .bg-danger-200 {
  background: var(--danger-gradient-200);
}

.leads-value .line {
  width: 4px;
  height: 20px;
  border-radius: 10px;
  display: block;
}
.leads-value p {
  display: flex;
  align-items: center;
  gap: 8px;
}

.growth-card .avatar.bg-success {
  box-shadow: 0 0 35px 0 rgba(39, 174, 96, 0.5);
}
.growth-card .avatar.bg-danger {
  box-shadow: 0 0 35px 0 rgba(255, 102, 102, 0.5);
}
.growth-card .avatar.bg-warning {
  box-shadow: 0 0 35px 0 rgba(255, 204, 102, 0.5);
}
.growth-card .avatar.bg-purple {
  box-shadow: 0 0 35px 0 rgba(153, 51, 255, 0.5);
}

.deals-closed {
  border-radius: 15px 15px 0 0;
}

.win-rate {
  border-radius: 15px 15px 0 0;
  margin-top: -10px;
}

.sales-cycle {
  border-radius: 15px 15px 0 0;
  margin-top: -10px;
}

.download-toggle::after {
  content: unset;
}

.proposal-card .avatar {
  box-shadow: var(--box-shadow);
  border: 1px solid var(--white-300);
  backdrop-filter: blur(12px);
  background: var(--white-200);
}

#recent-deals th {
  padding: 8px 20px 8px 20px;
}
#recent-deals td {
  padding: 10px 20px !important;
}

.progress-2xl {
  height: 40px;
}

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}

.gu-hide {
  display: none !important;
}

.gu-unselectable {
  user-select: none !important;
}

.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

.dragula-handle {
  position: relative;
  width: 36px;
  height: 36px;
  font-size: 22px;
  text-align: center;
  cursor: move;
}
.dragula-handle:before {
  content: "\f22f";
  font-family: "tabler-icons";
  position: absolute;
}

.handle {
  cursor: move;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.dropzone {
  border: 2px dashed var(--border-color);
  background: var(--white);
  border-radius: 8px;
  cursor: pointer;
  min-height: 150px;
  padding: 20px;
}
.dropzone .dz-message {
  text-align: center;
  margin: 2rem 0;
}
.dropzone.dz-started .dz-message {
  display: none;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.form-wizard-header {
  margin-left: -20px;
  margin-right: -20px;
  background-color: var(--light);
}

.img-preview {
  float: left;
  margin-bottom: 0.5rem;
  margin-right: 0.5rem;
  overflow: hidden;
}

.img-preview > img {
  max-width: 100%;
}

.preview-lg {
  height: 9rem;
  width: 16rem;
}

.preview-md {
  height: 4.5rem;
  width: 8rem;
}

.preview-sm {
  height: 2.25rem;
  width: 4rem;
}

.preview-xs {
  height: 1.125rem;
  margin-right: 0;
  width: 2rem;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.choices {
  margin-bottom: 0;
}
.choices[data-type*=select-one] {
  cursor: pointer;
}
.choices[data-type*=select-one] .choices__input {
  padding: 0.5rem 1.1rem !important;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  font-size: 14px;
  border-radius: 6px;
  color: var(--body-color);
  margin-bottom: 10px;
}
.choices[data-type*=select-one]:after {
  content: "\ea5f";
  position: absolute;
  border: 0;
  top: 18px;
  right: 12px;
  left: auto;
  font-size: 20px;
  font-family: tabler-icons;
  width: auto;
  height: auto;
  margin-top: 0;
  transform: translateY(-50%);
  transition: transform 0.2s ease-in-out;
  pointer-events: none;
}
.choices[data-type*=select-one].is-open:after {
  margin-top: 0;
  transform: translateY(-50%) rotate(-180deg);
}
.choices[data-type*=select-one] .choices__button {
  right: 20px;
}
.choices[data-type*=select-multiple] .choices__inner, .choices[data-type*=text] .choices__inner {
  cursor: text;
  padding: 0.5rem 0.55rem !important;
  min-height: 38px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  box-shadow: var(--box-shadow);
  margin-bottom: 5px;
}
.choices[data-type*=select-multiple] .choices__button, .choices[data-type*=text] .choices__button {
  border-left: 0;
  border-right: 0;
  filter: invert(100%);
}
.choices[data-type*=select-multiple] .choices__list--dropdown, .choices[data-type*=text] .choices__list--dropdown {
  padding-bottom: 10px;
}
.choices[data-type*=select-multiple] .choices__list--dropdown .choices__list, .choices[data-type*=text] .choices__list--dropdown .choices__list {
  margin-bottom: 0;
}
.choices[data-type*=select-multiple] .choices__input {
  padding-top: 3px;
}

.input-light .choices__inner {
  background-color: var(--light);
  border: none;
}

.choices__inner {
  display: inline-block;
  padding: 0.5rem 1.1rem !important;
  vertical-align: middle;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 6px !important;
  font-size: 14px;
  min-height: auto;
  overflow: hidden;
}
.choices__inner .choices__list--single {
  padding: 0 !important;
}

.is-focused .choices__inner,
.is-open .choices__inner {
  border-color: var(--border-color);
}

.choices__list--multiple {
  display: inline-flex;
}
.choices__list--multiple .choices__item {
  display: inline-block;
  vertical-align: initial;
  border-radius: 7px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 400;
  margin: 0 5px 0 0;
  background-color: var(--border-color);
  border: 1px solid var(--border-color);
  color: var(--heading-color);
  word-break: break-all;
  box-sizing: border-box;
  white-space: nowrap;
}
.choices__list--multiple .choices__item.is-highlighted {
  background-color: var(--primary);
  border: 1px solid var(--primary);
}
.choices__list--multiple .choices__item[data-deletable] {
  padding-right: 5px;
}

.is-disabled .choices__list--multiple .choices__item {
  background-color: var(--secondary);
  border: 1px solid var(--secondary);
}

.choices.is-disabled .choices__inner, .choices.is-disabled .choices__input {
  background-color: var(--light);
  cursor: not-allowed;
  -webkit-user-select: none;
  user-select: none;
}

.choices__list--dropdown {
  padding: 10px 10px 20px 10px;
  background-color: var(--white) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--box-shadow);
  margin-top: 0 !important;
  border-radius: 6px;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  transform: translateY(1px);
}
.choices__list--dropdown.is-active {
  animation-name: DropDownSlide;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--light) !important;
}
.choices__list--dropdown .choices__list {
  margin: 0 -10px -16px;
}
.choices__list--dropdown .choices__list::-webkit-scrollbar {
  -webkit-appearance: none;
}
.choices__list--dropdown .choices__list::-webkit-scrollbar-thumb {
  background-color: rgba(var(--dark-rgb), 0.1);
  border-radius: 10px;
  border: 2px solid var(--white);
}
.choices__list--dropdown .choices__list::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--white);
}
.choices__list--dropdown .has-no-results {
  font-style: italic;
  font-weight: 500;
}
.choices__list--dropdown .choices__item--selectable:after {
  display: none;
}

.is-open .choices__list--dropdown {
  border-color: transparent;
}

.is-flipped .choices__list--dropdown.is-active {
  border-radius: 6px;
  animation-name: DropDownSlideDown;
  transform: translateY(-1px);
}

.choices__list--dropdown .choices__list {
  max-height: 300px;
}
.choices__list--dropdown .choices__item {
  font-size: 14px;
  padding: 0.4rem 0.9375rem 0.4rem 16px;
}

.choices__heading {
  font-weight: 600;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--gray-400);
  font-size: 12px;
}

.choices__input {
  display: inline-block;
  background-color: var(--white);
  color: var(--body-color);
  font-size: 14px;
  margin-bottom: 0;
  padding: 0 0 0 2px;
  vertical-align: baseline;
  border: 0;
  border-radius: 0;
  max-width: 100%;
}
.choices__input::placeholder {
  color: var(--gray-400);
}

.choices__placeholder {
  color: var(--gray-400);
  opacity: 1;
}

[data-bs-theme=dark] .choices[data-type*=select-one] .choices__button {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[dir=rtl] .choices[data-type*=select-one]:after {
  left: 12px;
  right: auto;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.select2-container {
  width: 100% !important;
}
.select2-container .select2-selection--multiple {
  box-shadow: var(--box-shadow);
}
.select2-container .select2-selection--single {
  border: 1px solid var(--border-color);
  background-color: var(--white);
  outline: none;
  box-shadow: var(--box-shadow);
  border-radius: 6px;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 38px;
  padding-left: 12px;
  padding-right: 28px;
  color: var(--gray-900);
}
.select2-container .select2-selection--single .select2-selection__arrow {
  height: 34px;
  width: 38px;
  position: absolute;
  top: 1px;
  /*rtl:ignore*/
  right: 3px;
}
.select2-container .select2-selection--single .select2-selection__arrow b {
  border-color: var(--gray-500) transparent transparent transparent;
  border-width: 5px 5px 0 5px;
  height: 0;
  left: 50%;
  margin-left: -4px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  width: 0;
  border-style: solid;
}

.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--gray-500) transparent !important;
  border-width: 0 5px 5px 5px !important;
}

.select2-results__option {
  padding: 6px 12px;
}

.select2-dropdown {
  border: 1px solid var(--border-color);
  box-shadow: var(--box-shadow);
  background-color: var(--white);
  z-index: 1056;
}

.select2-results__options {
  scrollbar-width: thin;
}

.select2-container--default .select2-results__option--selected {
  background-color: var(--light);
}
.select2-container--default .select2-search--dropdown {
  padding: 10px;
  background-color: var(--white);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  outline: none;
  border: 1px solid var(--border-color);
  background-color: var(--white);
  color: var(--body-color);
  border-radius: 6px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary);
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--white);
  color: var(--body-color);
}
.select2-container--default .select2-results__option[aria-selected=true]:hover {
  background-color: var(--primary);
  color: var(--white);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 36px;
  padding-right: 5px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  border-radius: 4px;
  cursor: text;
  /*rtl:ignore*/
  right: 1px;
  /*rtl:ignore*/
  left: auto;
}

.select2-container .select2-selection--multiple {
  min-height: 39px;
  border: 1px solid var(--border-color) !important;
  background-color: var(--white);
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
  padding: 1px 12px;
}
.select2-container .select2-selection--multiple .select2-search__field {
  border: 0;
  color: var(--body-color);
}
.select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: var(--light);
  border: none;
  color: var(--gray-500);
  border-radius: 3px;
  padding: 2px 7px 2px 0;
  margin-top: 6px;
}
.select2-container .select2-selection--multiple .select2-selection__choice .img-flag {
  border-radius: 50%;
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--gray-500);
  margin-right: 0;
  padding: 0 8px;
}
.select2-container .select2-search--inline .select2-search__field {
  margin-top: 7px;
  font-family: "Golos Text", sans-serif;
}
.select2-container .select2-search textarea::placeholder {
  color: var(--gray-400);
}

[dir=rtl] .select2-container .select2-selection--multiple .select2-selection__choice {
  padding: 0 0 0 7px;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
[data-simplebar] {
  position: relative;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.simplebar-wrapper {
  overflow: hidden;
  width: inherit;
  height: inherit;
  max-width: inherit;
  max-height: inherit;
}

.simplebar-mask {
  direction: inherit;
  position: absolute;
  overflow: hidden;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: auto !important;
  height: auto !important;
  z-index: 0;
}

.simplebar-offset {
  direction: inherit !important;
  box-sizing: inherit !important;
  resize: none !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

.simplebar-content-wrapper {
  direction: inherit;
  box-sizing: border-box !important;
  position: relative;
  display: block;
  height: 100%;
  /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
  width: auto;
  overflow: auto;
  /* Scroll on this element otherwise element can't have a padding applied properly */
  max-width: 100%;
  /* Not required for horizontal scroll to trigger */
  max-height: 100%;
  /* Needed for vertical scroll to trigger */
  scrollbar-width: none;
}

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.simplebar-content:before,
.simplebar-content:after {
  content: " ";
  display: table;
}

.simplebar-placeholder {
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  pointer-events: none;
}

.simplebar-height-auto-observer-wrapper {
  box-sizing: inherit !important;
  height: 100%;
  width: 100%;
  max-width: 1px;
  position: relative;
  float: left;
  max-height: 1px;
  overflow: hidden;
  z-index: -1;
  padding: 0;
  margin: 0;
  pointer-events: none;
  flex-grow: inherit;
  flex-shrink: 0;
  flex-basis: 0;
}

.simplebar-height-auto-observer {
  box-sizing: inherit;
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 1000%;
  width: 1000%;
  min-height: 1px;
  min-width: 1px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.simplebar-track {
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

[data-simplebar].simplebar-dragging .simplebar-content {
  pointer-events: none;
  user-select: none;
}

[data-simplebar].simplebar-dragging .simplebar-track {
  pointer-events: all;
}

.simplebar-scrollbar {
  position: absolute;
  right: 2px;
  width: 5px;
  min-height: 10px;
}
.simplebar-scrollbar:before {
  position: absolute;
  content: "";
  background: #a2adb7;
  border-radius: 7px;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.simplebar-scrollbar.simplebar-visible:before {
  /* When hovered, remove all transitions from drag handle */
  opacity: 0.5;
  transition: opacity 0s linear;
}

.simplebar-track.simplebar-vertical {
  top: 0;
  width: 11px;
}
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
  top: 2px;
  bottom: 2px;
}

.simplebar-track.simplebar-horizontal {
  left: 0;
  height: 11px;
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  right: auto;
  left: 0;
  top: 2px;
  height: 7px;
  min-height: 0;
  min-width: 10px;
  width: auto;
}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
  height: 100%;
  left: 2px;
  right: 2px;
}

/* Rtl support */
[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {
  right: auto;
  left: 0;
}

.hs-dummy-scrollbar-size {
  direction: rtl;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  height: 500px;
  width: 500px;
  overflow-y: hidden;
  overflow-x: scroll;
}

.simplebar-hide-scrollbar {
  position: fixed;
  left: 0;
  visibility: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
}

.custom-scroll::-webkit-scrollbar {
  -webkit-appearance: none;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(var(--dark-rgb), 0.2);
  border-radius: 10px;
  margin-right: 5px;
  border: none;
}
.custom-scroll::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}
.custom-scroll::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* Sếp's own request: a thin, unobtrusive scrollbar for small
   inline-scrolling boxes (shopcomplain/listnew's comment log) - unlike
   .custom-scroll above, this also sets an explicit narrow width/height
   so Chrome/Safari don't fall back to their full-size default bar. */
.thin-scrollbar {
  scrollbar-width: thin;
}
.thin-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.thin-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(var(--dark-rgb), 0.2);
  border-radius: 10px;
}
.thin-scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
}

[data-simplebar-lg] .simplebar-scrollbar {
  right: 1px;
  width: 10px;
}

[data-simplebar-primary] .simplebar-scrollbar:before {
  background: var(--primary);
}

.simplebar-height {
  max-height: 280px;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.swal2-container .swal2-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--heading-color);
}

.swal2-popup {
  width: 28em;
  padding: 2rem;
  border-radius: 6px;
  background-color: var(--white);
  color: var(--body-color);
}
.swal2-popup .swal2-html-container {
  font-size: 16px !important;
  color: var(--body-color);
}

.swal2-footer {
  border-top: 1px solid var(--border-color);
  color: var(--body-color);
}

.swal2-icon.swal2-question {
  border-color: var(--info);
  color: var(--info);
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
  background-color: var(--success);
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: var(--success);
}
.swal2-icon.swal2-warning {
  border-color: var(--warning);
  color: var(--warning);
}

div:where(.swal2-icon) {
  width: 4em;
  height: 4em;
  margin: 0.5rem auto;
}
div:where(.swal2-icon) .swal2-icon-content {
  font-size: 3em;
}
div:where(.swal2-icon).swal2-info {
  border-color: var(--info);
  color: var(--info);
}

.swal2-styled:focus {
  box-shadow: none;
}

.swal2-loader {
  border-color: var(--primary) transparent var(--primary) transparent;
}

.swal2-timer-progress-bar {
  background-color: rgba(var(--success-rgb), 0.4);
}

.swal2-progress-steps .swal2-progress-step {
  background: var(--primary);
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
  background: var(--primary);
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step, .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
  background: rgba(var(--primary-rgb), 0.3);
}
.swal2-progress-steps .swal2-progress-step-line {
  background: var(--primary);
}

.swal2-actions.swal2-loading .swal2-styled.swal2-confirm {
  border-left-color: var(--primary) !important;
  border-right-color: var(--primary) !important;
}

.swal2-file,
.swal2-input,
.swal2-textarea {
  border: 1px solid var(--border-color);
}
.swal2-file:focus,
.swal2-input:focus,
.swal2-textarea:focus {
  box-shadow: none;
  border-color: var(--border-color);
}

.swal2-input {
  height: auto;
  display: block;
  padding: 0.5rem 1.1rem;
  font-family: "Golos Text", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--body-color);
  background-color: var(--white);
  background-clip: padding-box;
  border: 1px solid var(--border-color);
}

.swal2-close {
  font-family: "Golos Text", sans-serif;
  font-size: 42px;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 5px;
  right: 5px;
}
.swal2-close:focus {
  box-shadow: none;
}
.swal2-close:hover {
  color: var(--danger);
}

.swal2-validation-message {
  background-color: transparent;
}

div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] {
  width: 1.9375em;
  top: 1.95em;
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip] {
  top: 2.4em;
  width: 1em;
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
  top: 1.85em;
  right: 0.5em;
  width: 2.25em;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.noUi-connect {
  background: var(--primary);
}

.noUi-handle {
  background: var(--primary);
  border: 2px solid var(--white);
  box-shadow: none;
}

.noUi-horizontal {
  height: 8px;
}
.noUi-horizontal .noUi-handle {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  right: -10px !important;
  top: -7px;
}
.noUi-horizontal .noUi-handle::before, .noUi-horizontal .noUi-handle::after {
  display: none;
}
.noUi-horizontal .noUi-handle:focus {
  outline: 0;
}

.noUi-pips-horizontal {
  height: 50px;
}

.noUi-tooltip {
  padding: 0.3125rem 0.625rem;
  border-color: var(--border-color);
  border-radius: 6px;
  background-color: var(--white);
  color: var(--body-color);
}

.noUi-vertical {
  width: 8px;
}
.noUi-vertical .noUi-handle {
  height: 20px;
  width: 20px;
  right: -8px;
  top: -12px;
  left: auto;
  border-radius: 50%;
}
.noUi-vertical .noUi-handle::before, .noUi-vertical .noUi-handle::after {
  display: none;
}
.noUi-vertical .noUi-handle:focus {
  outline: 0;
}
.noUi-vertical .noUi-origin {
  top: 0;
}

.noUi-value {
  font-size: 12px;
}

.noUi-marker-horizontal.noUi-marker-large {
  height: 12px;
}

.noUi-value-horizontal {
  padding-top: 4px;
}

.noUi-target {
  box-shadow: none;
  background-color: var(--light);
  border-color: var(--light);
}

.noUi-touch-area:focus {
  outline: 0;
}

#red,
#green,
#blue {
  margin: 10px;
  display: inline-block;
  height: 200px;
}

#colorpicker {
  height: 240px;
  width: 310px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid var(--border-color);
}

#result {
  margin: 60px 26px;
  height: 100px;
  width: 100px;
  display: inline-block;
  vertical-align: top;
  border: 1px solid var(--border-color);
  box-shadow: 0 0 3px;
  border-radius: 7px;
}

#red .noUi-connect {
  background: var(--danger);
}

#green .noUi-connect {
  background: var(--success);
}

#blue .noUi-connect {
  background: var(--primary);
}

.form-control.keyboard {
  max-width: 340px !important;
}

.example-val {
  font-size: 12px;
  color: var(--gray-400);
  display: block;
  margin: 10px 0;
}
.example-val:before {
  content: "Value: ";
  font-size: 12px;
  font-weight: 600;
}

.noUi-tooltip {
  display: none;
}

.noUi-active .noUi-tooltip {
  display: block;
}

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

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

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

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

.c-5-color {
  background: var(--purple);
}

#slider-toggle {
  height: 50px;
}
#slider-toggle.off .noUi-handle {
  border-color: var(--danger);
}

[data-slider-color=primary] .noUi-connect {
  background: #E41F07;
}
[data-slider-color=primary] .noUi-handle {
  background: #E41F07;
}
[data-slider-color=primary][data-slider-style=border] .noUi-handle, [data-slider-color=primary][data-slider-style=square] .noUi-handle {
  border-color: #E41F07;
}

[data-slider-color=secondary] .noUi-connect {
  background: #FFA201;
}
[data-slider-color=secondary] .noUi-handle {
  background: #FFA201;
}
[data-slider-color=secondary][data-slider-style=border] .noUi-handle, [data-slider-color=secondary][data-slider-style=square] .noUi-handle {
  border-color: #FFA201;
}

[data-slider-color=success] .noUi-connect {
  background: #1ABE17;
}
[data-slider-color=success] .noUi-handle {
  background: #1ABE17;
}
[data-slider-color=success][data-slider-style=border] .noUi-handle, [data-slider-color=success][data-slider-style=square] .noUi-handle {
  border-color: #1ABE17;
}

[data-slider-color=info] .noUi-connect {
  background: #2F80ED;
}
[data-slider-color=info] .noUi-handle {
  background: #2F80ED;
}
[data-slider-color=info][data-slider-style=border] .noUi-handle, [data-slider-color=info][data-slider-style=square] .noUi-handle {
  border-color: #2F80ED;
}

[data-slider-color=warning] .noUi-connect {
  background: #f9b801;
}
[data-slider-color=warning] .noUi-handle {
  background: #f9b801;
}
[data-slider-color=warning][data-slider-style=border] .noUi-handle, [data-slider-color=warning][data-slider-style=square] .noUi-handle {
  border-color: #f9b801;
}

[data-slider-color=danger] .noUi-connect {
  background: #EF1E1E;
}
[data-slider-color=danger] .noUi-handle {
  background: #EF1E1E;
}
[data-slider-color=danger][data-slider-style=border] .noUi-handle, [data-slider-color=danger][data-slider-style=square] .noUi-handle {
  border-color: #EF1E1E;
}

[data-slider-color=dark] .noUi-connect {
  background: #0A0C0C;
}
[data-slider-color=dark] .noUi-handle {
  background: #0A0C0C;
}
[data-slider-color=dark][data-slider-style=border] .noUi-handle, [data-slider-color=dark][data-slider-style=square] .noUi-handle {
  border-color: #0A0C0C;
}

[data-slider-color=light] .noUi-connect {
  background: #F7F8F9;
}
[data-slider-color=light] .noUi-handle {
  background: #F7F8F9;
}
[data-slider-color=light][data-slider-style=border] .noUi-handle, [data-slider-color=light][data-slider-style=square] .noUi-handle {
  border-color: #F7F8F9;
}

[data-slider-color=orange] .noUi-connect {
  background: #EF5E25;
}
[data-slider-color=orange] .noUi-handle {
  background: #EF5E25;
}
[data-slider-color=orange][data-slider-style=border] .noUi-handle, [data-slider-color=orange][data-slider-style=square] .noUi-handle {
  border-color: #EF5E25;
}

[data-slider-color=purple] .noUi-connect {
  background: #800080;
}
[data-slider-color=purple] .noUi-handle {
  background: #800080;
}
[data-slider-color=purple][data-slider-style=border] .noUi-handle, [data-slider-color=purple][data-slider-style=square] .noUi-handle {
  border-color: #800080;
}

[data-slider-color=pink] .noUi-connect {
  background: #DD2590;
}
[data-slider-color=pink] .noUi-handle {
  background: #DD2590;
}
[data-slider-color=pink][data-slider-style=border] .noUi-handle, [data-slider-color=pink][data-slider-style=square] .noUi-handle {
  border-color: #DD2590;
}

[data-slider-color=indigo] .noUi-connect {
  background: #3538CD;
}
[data-slider-color=indigo] .noUi-handle {
  background: #3538CD;
}
[data-slider-color=indigo][data-slider-style=border] .noUi-handle, [data-slider-color=indigo][data-slider-style=square] .noUi-handle {
  border-color: #3538CD;
}

[data-slider-color=teal] .noUi-connect {
  background: #0E9384;
}
[data-slider-color=teal] .noUi-handle {
  background: #0E9384;
}
[data-slider-color=teal][data-slider-style=border] .noUi-handle, [data-slider-color=teal][data-slider-style=square] .noUi-handle {
  border-color: #0E9384;
}

[data-slider-size=lg].noUi-horizontal {
  height: 12px;
}
[data-slider-size=lg].noUi-horizontal .noUi-handle {
  width: 24px;
  height: 24px;
}

[data-slider-size=md].noUi-horizontal {
  height: 8px;
}
[data-slider-size=md].noUi-horizontal .noUi-handle {
  width: 20px;
  height: 20px;
}

[data-slider-size=sm].noUi-horizontal {
  height: 4px;
}
[data-slider-size=sm].noUi-horizontal .noUi-handle {
  width: 16px;
  height: 16px;
}

[data-slider-style=line].noUi-horizontal .noUi-handle {
  width: 8px;
  border-radius: 4px;
  right: -8px;
}
[data-slider-style=line].noUi-vertical .noUi-handle {
  height: 8px;
  border-radius: 4px;
  top: -3px;
}

[data-slider-style=border] .noUi-handle {
  border-color: var(--primary);
  background-color: var(--white);
}

[data-slider-style=square] .noUi-handle {
  border-radius: 0px;
  transform: rotate(45deg);
  height: 10px;
  width: 10px;
  top: -4px;
  border-color: var(--primary);
  background-color: var(--white);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.flatpickr-calendar {
  background: var(--white);
  box-shadow: var(--box-shadow);
  border: 1px solid var(--border-color);
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after {
  border-bottom-color: var(--white);
}
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {
  border-top-color: var(--white);
}
.flatpickr-calendar.open, .flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
  width: 100%;
  box-shadow: none;
  border: none;
}
.flatpickr-calendar.inline .flatpickr-rContainer {
  display: block;
  width: 100%;
}
.flatpickr-calendar.inline .flatpickr-rContainer .flatpickr-days {
  width: 100%;
  border: none;
}
.flatpickr-calendar.inline .flatpickr-rContainer .flatpickr-days .dayContainer {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
.flatpickr-calendar.inline .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day {
  max-width: 100%;
}
.flatpickr-calendar.inline .flatpickr-current-month {
  padding: 0;
}
.flatpickr-calendar.inline .flatpickr-months .flatpickr-next-month,
.flatpickr-calendar.inline .flatpickr-months .flatpickr-prev-month {
  padding: 0;
}
.flatpickr-calendar.inline .flatpickr-day.today,
.flatpickr-calendar.inline .flatpickr-day.selected {
  background-color: transparent;
  color: var(--danger);
  border: none;
  font-weight: 600;
}

.flatpickr-current-month {
  font-size: 110%;
}
.flatpickr-current-month .numInputWrapper {
  width: 65px;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
  background: var(--primary);
  border-color: var(--primary);
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 var(--primary);
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: var(--white);
  color: var(--body-color);
}

.flatpickr-months .flatpickr-month {
  height: 36px;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month,
.flatpickr-months .flatpickr-month {
  color: var(--gray-500);
  fill: var(--gray-500);
  padding: 5px;
}

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

span.flatpickr-weekday,
.flatpickr-day,
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover,
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: var(--body-color);
  fill: var(--body-color);
}

.flatpickr-day.disabled, .flatpickr-day.disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
  color: var(--body-color);
}
.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
  background: var(--light);
  border-color: var(--light);
}

.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
  border-top: 1px solid var(--white);
}

.numInputWrapper:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background-color: transparent;
  color: var(--body-color);
}

.flatpickr-day.inRange {
  box-shadow: -5px 0 0 var(--light), 5px 0 0 var(--light);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--body-color);
}

.flatpickr-calendar.hasTime .flatpickr-time {
  border-top: var(--border-color);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.dataTables_wrapper.container-fluid {
  padding: 0;
}

table.dataTable {
  border-collapse: collapse !important;
  margin: 15px 0 !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr th.dtr-control:before {
  background-color: var(--primary);
  box-shadow: 0px 0px 2px 0px var(--primary);
}
table.dataTable thead:not(.table-light) th {
  background-color: transparent;
  border-bottom-color: var(--border-color);
}
table.dataTable tbody tr.even td,
table.dataTable tbody tr.odd td {
  background-color: transparent;
}
table.dataTable tbody > tr.selected td {
  background-color: var(--primary);
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
  right: 0.5rem;
  left: auto;
  content: "שּׂ" !important;
  font-family: "tabler-icons";
  font-size: 14px !important;
  line-height: 7px;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
  right: 0.5em;
  left: auto;
  content: "שׁ" !important;
  font-family: "tabler-icons";
  font-size: 14px !important;
  line-height: 7px;
}
table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting {
  padding-right: 30px;
  padding-left: 1rem;
}
table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected {
  background-color: var(--primary);
}
table.dataTable tbody > tr.selected td,
table.dataTable tbody > tr > .selected td {
  border-color: var(--primary);
}
table.dataTable tbody td:focus {
  outline: none !important;
}
table.dataTable tbody th.focus,
table.dataTable tbody td.focus {
  outline: 2px solid var(--primary) !important;
  outline-offset: -1px;
  background-color: rgba(var(--primary-rgb), 0.15);
}

.dataTables_info {
  font-weight: 600;
}

.dtfh-floatingparent {
  top: var(--topbar-height) !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > th:first-child:before {
  box-shadow: var(--box-shadow-lg);
  background-color: var(--success);
  top: auto;
  bottom: auto;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
  background-color: var(--danger);
}

div.dt-button-info {
  background-color: var(--primary);
  border: none;
  color: var(--white);
  box-shadow: none;
  border-radius: 3px;
  text-align: center;
  z-index: 21;
}
div.dt-button-info h2 {
  border-bottom: none;
  background-color: rgba(var(--white-rgb), 0.2);
  color: var(--white);
}

@media (max-width: 767.98px) {
  li.paginate_button.previous,
  li.paginate_button.next {
    display: inline-block;
    font-size: 1.5rem;
  }
  .dataTables_paginate ul {
    text-align: center;
    display: block;
    margin: 1.25rem 0 0 !important;
  }
  div.dataTables_length {
    float: none;
    text-align: center !important;
  }
  div.dt-buttons {
    display: inline-table;
    margin-bottom: 1.25rem;
  }
}
.activate-select .sorting_1 {
  background-color: var(--gray-100) !important;
}

div.dataTables_wrapper div.dataTables_filter {
  text-align: right;
}
@media (max-width: 576px) {
  div.dataTables_wrapper div.dataTables_filter {
    text-align: center;
  }
}
div.dataTables_wrapper div.dataTables_filter input {
  margin-left: 0.5em;
  margin-right: 0;
}
div.dataTables_wrapper div.dataTables_length {
  text-align: left;
}

div.table-responsive > div.dataTables_wrapper > div.row > div[class^=col-]:last-child {
  padding-right: 0;
}
div.table-responsive > div.dataTables_wrapper > div.row > div[class^=col-]:first-child {
  padding-left: 0;
}

div.dataTables_scrollBody {
  border-left: none !important;
}
div.dataTables_scrollBody > table {
  margin-bottom: 15px !important;
}
div.dataTables_scrollBody > table > :not(:first-child) {
  border-top: none !important;
}

.table-nowrap th {
  white-space: nowrap;
}
.table-nowrap td {
  white-space: nowrap;
}

[data-bs-theme=dark] a {
  color: var(--gray-900);
}
[data-bs-theme=dark] .btn-light {
  background: var(--gray-300);
  border-color: var(--border-color);
  color: var(--gray-900);
}

table.dataTable {
  margin: 0 !important;
  border: 1px solid var(--border-color);
  border-bottom: none;
  width: 100% !important;
}

.dataTables_length {
  padding: 20px 0 0;
  float: left;
}

table.table.dataTable > tbody > tr {
  border-color: var(--border-color);
}
table.table.dataTable > tbody > tr td {
  border-bottom: 1px solid var(--border-color);
  padding: 20px 10px 20px 10px;
}
table.table.dataTable > thead > tr {
  border-color: var(--border-color);
}
table.table.dataTable > thead > tr th {
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 17px 8px 10px;
}

.dataTables_paginate {
  margin-top: 20px !important;
}
.dataTables_paginate .pagination {
  gap: 8px;
  margin: 7px 0 !important;
  display: flex;
  flex-wrap: wrap;
}
.dataTables_paginate .page-item .page-link {
  width: 35px;
  height: 35px;
  box-shadow: var(--box-shadow);
  border-radius: 5px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  font-weight: 400;
}
.dataTables_paginate .page-item.active .page-link {
  color: #fff;
  background: var(--primary);
}

div.dataTables_wrapper div.dataTables_info {
  padding: 15px 0;
  display: none;
}

.table-search {
  margin-bottom: 20px;
}

table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
  right: 0 !important;
  content: "\ea1a" !important;
  font-family: "tabler-icons";
  bottom: 12px !important;
  color: var(--gray-900) !important;
  font-size: 12px !important;
  opacity: 1 !important;
  position: absolute;
  font-weight: 400;
  line-height: 1px !important;
}

table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
  right: 5px !important;
  content: "\ea1d" !important;
  font-family: "tabler-icons";
  top: 50% !important;
  color: var(--gray-900) !important;
  font-size: 12px !important;
  opacity: 1 !important;
  position: absolute;
  font-weight: 400;
  line-height: 1px !important;
}

table.dataTable thead > tr > th.no-sort.sorting_asc:before {
  display: none;
}

table.dataTable thead > tr > th.no-sort.sorting_asc::after {
  display: none;
}

table.dataTable thead > tr > th.no-sort.sorting:before {
  display: none;
}

table.dataTable thead > tr > th.no-sort.sorting::after {
  display: none;
}

.patient-form-wizard .form-wizard-content {
  display: none;
}

.patient-form-wizard .form-wizard-content.active {
  display: block;
}

.no-filter .dataTables_filter {
  display: none;
}

.no-pagination .dataTables_paginate, .no-pagination .dataTables_length {
  display: none;
}

.dataTables_length label, #dataTables_length label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #6F6F6F;
  font-size: 14px;
}
@media (max-width: 768px) {
  .dataTables_length label, #dataTables_length label {
    justify-content: center;
  }
}

.dataTables_length label .form-select, #dataTables_length label .form-select {
  width: 73px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  color: #262A2A;
  margin: 0 8px;
}

.dataTables_paginate .pagination, #dataTables_paginate .pagination {
  justify-content: end;
  -webkit-justify-content: end;
  -ms-flex-pack: end;
}
@media (max-width: 768px) {
  .dataTables_paginate .pagination, #dataTables_paginate .pagination {
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
  }
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.ql-editor {
  text-align: left;
}
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
  padding-right: 0;
}
.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}

.ql-container {
  font-family: "Golos Text", sans-serif;
}
.ql-container.ql-snow {
  border-color: var(--border-color);
  border-radius: 0 0 6px 6px;
}

.ql-bubble {
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.ql-toolbar {
  font-family: "Golos Text", sans-serif !important;
}
.ql-toolbar span {
  outline: none !important;
  color: var(--body-color);
}
.ql-toolbar span:hover {
  color: var(--primary) !important;
}
.ql-toolbar.ql-snow {
  border-radius: 6px 6px 0 0;
  border-color: var(--border-color);
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
  box-shadow: var(--box-shadow);
  border-radius: 6px;
}

.ql-snow .ql-stroke,
.ql-snow .ql-script,
.ql-snow .ql-strike svg {
  stroke: var(--body-color);
}
.ql-snow .ql-fill {
  fill: var(--body-color);
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  right: 0;
  left: auto;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: var(--body-color);
}

.ql-snow .ql-picker-options {
  background-color: var(--white);
  border-color: var(--border-color) !important;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.apex-charts {
  min-height: 10px !important;
}
.apex-charts text {
  font-family: "Golos Text", sans-serif !important;
}
.apex-charts .apexcharts-canvas {
  margin: 0 auto;
}

.apexcharts-tooltip-title,
.apexcharts-tooltip-text {
  font-family: "Golos Text", sans-serif !important;
}

.apexcharts-tooltip {
  border: 1px solid var(--border-color) !important;
  background-color: var(--white) !important;
  box-shadow: var(--box-shadow) !important;
}
.apexcharts-tooltip * {
  font-family: "Golos Text", sans-serif !important;
  color: var(--gray-600) !important;
}
.apexcharts-tooltip .apexcharts-tooltip-title {
  background-color: rgba(var(--light-rgb), 0.75) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.apexcharts-tooltip.apexcharts-theme-dark * {
  color: var(--white) !important;
}

.apexcharts-legend-series {
  font-weight: 600;
}

.apexcharts-gridline {
  pointer-events: none;
  stroke: var(--gray-100);
}

.apexcharts-legend-text {
  color: var(--body-color) !important;
  font-family: "Golos Text", sans-serif !important;
  font-size: 13px !important;
  vertical-align: middle;
}

.apexcharts-legend-marker {
  vertical-align: middle;
  margin-right: 5px !important;
}

.apexcharts-pie-label {
  fill: var(--white) !important;
}

.apexcharts-title-text,
.apexcharts-subtitle-text {
  fill: var(--body-color);
  font-family: "Golos Text", sans-serif !important;
}

.apexcharts-yaxis text,
.apexcharts-xaxis text {
  font-family: "Golos Text", sans-serif !important;
  fill: var(--body-color);
}

.apexcharts-yaxis-title {
  font-weight: 500;
}

.apexcharts-annotation-rect {
  fill: var(--gray-100) !important;
}

.apexcharts-xaxis-annotations rect,
.apexcharts-yaxis-annotations rect {
  stroke: none;
}

.apex-toolbar .btn-light.active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: 0px 2px 6px 0px rgba(var(--primary-rgb), 0.5);
}

.apexcharts-xaxistooltip {
  background-color: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--box-shadow) !important;
  color: var(--body-color) !important;
}

.apexcharts-xaxistooltip-bottom:before {
  border-bottom-color: var(--border-color) !important;
}

.apexcharts-xaxistooltip-text,
.apexcharts-datalabels text {
  font-family: "Golos Text", sans-serif !important;
}

.apexcharts-datalabel-value {
  fill: var(--body-color) !important;
}

.apexcharts-menu {
  background: var(--white) !important;
  padding: 0.25rem 0.25rem !important;
  box-shadow: var(--box-shadow) !important;
  border: 1px solid var(--border-color) !important;
  text-align: center !important;
}
.apexcharts-menu .apexcharts-menu-item:hover {
  color: var(--body-color) !important;
  background-color: var(--light) !important;
}

.apexcharts-radar-series polygon {
  fill: transparent;
  stroke: var(--border-color);
}
.apexcharts-radar-series line {
  stroke: var(--border-color);
}

.apexcharts-track path {
  stroke: var(--border-color);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.chartjs-chart {
  margin: auto;
  position: relative;
  width: 100%;
}

.chart-container {
  border-color: var(--border-color);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.c3-tooltip {
  box-shadow: var(--box-shadow-lg);
  opacity: 1;
}
.c3-tooltip td {
  border-left: none;
  font-family: "Golos Text", sans-serif;
}
.c3-tooltip td > span {
  background: var(--gray-900);
}
.c3-tooltip tr {
  border: none !important;
}
.c3-tooltip th {
  background-color: var(--gray-900);
  color: var(--gray-100);
}

.c3-chart-arcs-title {
  font-size: 18px;
  font-weight: 600;
}

.c3 text {
  font-family: "Golos Text", sans-serif;
  fill: var(--body-color);
}

.c3-legend-item {
  font-family: "Golos Text", sans-serif;
  font-size: 14px;
}

.c3 line,
.c3 path {
  stroke: var(--gray-400);
}

.c3-chart-arc.c3-target g path {
  stroke: var(--white);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.morris-chart text {
  font-family: "Golos Text", sans-serif !important;
  fill: var(--body-color);
}

.morris-hover {
  position: absolute;
  z-index: 10;
}
.morris-hover.morris-default-style {
  font-size: 12px;
  text-align: center;
  border-radius: 5px;
  padding: 10px 12px;
  background: var(--gray-900);
  color: var(--gray-100);
  font-family: "Golos Text", sans-serif;
}
.morris-hover.morris-default-style .morris-hover-row-label {
  font-weight: bold;
  margin: 0.25em 0;
  font-family: "Golos Text", sans-serif;
}
.morris-hover.morris-default-style .morris-hover-point {
  white-space: nowrap;
  margin: 0.1em 0;
  color: var(--white);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.daterangepicker {
  font-family: "Golos Text", sans-serif;
  border: 1px solid var(--border-color);
  box-shadow: var(--box-shadow);
  background-color: var(--white);
}
.daterangepicker .calendar-table {
  border: 1px solid var(--white);
  background-color: var(--white);
}
.daterangepicker .calendar-table td,
.daterangepicker .calendar-table th {
  color: var(--gray-600);
}
.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  border-color: var(--body-color);
}
.daterangepicker .ranges li:hover {
  background-color: var(--light);
}
.daterangepicker .ranges li.active {
  background-color: var(--primary);
}
.daterangepicker td.in-range {
  background: var(--gray-100);
  color: var(--body-color);
}
.daterangepicker td.off, .daterangepicker td.off.end-date, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date {
  background-color: var(--white);
  color: var(--body-color);
  opacity: 0.5;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: var(--primary);
  color: var(--white);
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover,
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--primary);
  color: var(--white);
}
.daterangepicker td.available:hover span,
.daterangepicker th.available:hover span,
.daterangepicker td.active span,
.daterangepicker td.active:hover span {
  border-color: var(--white);
}
.daterangepicker:after {
  border-bottom: 6px solid var(--white);
}
.daterangepicker:before {
  border-bottom: 7px solid var(--border-color);
}
.daterangepicker .drp-buttons {
  border-top: 1px solid var(--border-color);
}
.daterangepicker select.ampmselect, .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect {
  background: var(--gray-100);
  border: 1px solid var(--gray-100);
  color: var(--body-color);
}
.daterangepicker.show-ranges .drp-calendar.left {
  border-left: 1px solid var(--border-color) !important;
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.iti__country-list {
  border-color: var(--border-color);
  box-shadow: var(--box-shadow-lg);
}
.iti__country-list .iti__country {
  display: flex;
  align-items: center;
}
.iti__country-list .iti__divider {
  border-color: var(--border-color);
}
.iti__country-list .iti__dial-code {
  color: var(--body-color);
}

/*
Template Name: Preadmin CRM - Responsive Bootstrap 5 Admin Dashboard
Version: 1.0.0
Author: Dreams Technologies
Author URL: https://themeforest.net/user/dreamstechnologies
*/
.calendar {
  float: left;
  margin-bottom: 0;
}

.fc-view {
  margin-top: 30px;
}

.none-border .modal-footer {
  border-top: none;
}

.fc-toolbar {
  margin: 6px 0 5px 0 !important;
}
.fc-toolbar h2 {
  font-size: 1.25rem !important;
  line-height: 1.875rem;
  text-transform: uppercase;
}

.fc-day-grid-event .fc-time {
  font-weight: 600;
}

th.fc-day-header {
  padding: 0.5rem 0;
}

.fc-day {
  background: transparent;
}

.fc-toolbar .fc-state-active,
.fc-toolbar .ui-state-active,
.fc-toolbar button:focus,
.fc-toolbar button:hover,
.fc-toolbar .ui-state-hover {
  z-index: 0;
}

.fc th.fc-widget-header {
  background: var(--gray-100);
  font-size: 13px;
  line-height: 20px;
  padding: 10px 0;
  text-transform: uppercase;
  font-weight: 600;
}
.fc .fc-daygrid-body,
.fc .fc-scrollgrid-section-body table,
.fc .fc-scrollgrid-section-footer table {
  width: 100% !important;
}

.fc-unthemed th,
.fc-unthemed td,
.fc-unthemed thead,
.fc-unthemed tbody,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-row,
.fc-unthemed .fc-popover {
  border-color: var(--gray-100);
}
.fc-unthemed td.fc-today,
.fc-unthemed .fc-divider {
  background: var(--gray-100);
}

.fc-button {
  background: var(--gray-100);
  border: none;
  color: var(--body-color);
  text-transform: capitalize;
  box-shadow: none;
  border-radius: 3px;
  margin: 0 3px;
  padding: 6px 12px;
  height: auto;
}

.fc-text-arrow {
  font-family: inherit;
  font-size: 1rem;
}

.fc-state-hover,
.fc-state-highlight,
.fc-cell-overlay {
  background: var(--gray-100);
}

.fc-state-down,
.fc-state-active,
.fc-state-disabled {
  background-color: var(--primary);
  color: var(--white);
  text-shadow: none;
}

.fc-unthemed .fc-today {
  background: var(--white);
}

.fc-event {
  border-radius: 2px;
  border: none;
  cursor: move;
  font-size: 0.8125rem;
  margin: 5px 7px;
  padding: 5px 5px;
  text-align: center;
  color: var(--white);
}
.fc-event.bg-dark .fc-event-time,
.fc-event.bg-dark .fc-event-title {
  color: var(--gray-100);
}
.fc-event.bg-dark .fc-daygrid-event-dot {
  border-color: var(--gray-100);
}

.external-event {
  cursor: move;
  margin: 10px 0;
  padding: 8px 10px;
  color: var(--white);
  border-radius: 4px;
}

.fc-basic-view td.fc-week-number span {
  padding-right: 8px;
}
.fc-basic-view td.fc-day-number {
  padding-right: 8px;
}
.fc-basic-view .fc-content {
  color: var(--white);
}

.fc-time-grid-event .fc-content {
  color: var(--white);
}

.fc-daygrid-day-number {
  float: right;
  height: 20px;
  width: 20px;
  text-align: center;
  line-height: 20px;
  background-color: var(--light);
  color: var(--gray-900);
  border-radius: 50%;
  margin: 5px;
  font-size: 11px;
  padding: 0 !important;
}

.fc-daygrid-event-dot {
  border-color: var(--white);
}

.fc-event-time {
  color: var(--white);
}

.table-active,
.table-active > td,
.table-active > th,
.fc .fc-list-sticky .fc-list-day > * {
  background-color: transparent;
}

.fc .fc-list-event:hover td {
  background-color: inherit;
}

@media (max-width: 767.98px) {
  .fc-toolbar {
    display: block !important;
  }
  .fc-toolbar .fc-toolbar-chunk {
    margin: 6px 0;
  }
  .fc-toolbar .fc-left,
  .fc-toolbar .fc-right,
  .fc-toolbar .fc-center {
    float: none;
    display: block;
    clear: both;
    margin: 10px 0;
  }
  .fc .fc-toolbar > * > * {
    float: none;
  }
  .fc-today-button {
    display: none;
  }
}
.fc-toolbar .btn {
  padding: 0.3rem 0.8rem;
  border-radius: 5px;
  font-size: 12px;
}

.fc-list-item-title,
.fc-list-item-time {
  color: var(--white);
}

.fc .fc-button-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.fc .fc-button-primary:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--white);
}
.fc .fc-button-primary:disabled, .fc .fc-button-primary.fc-button-active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.fc .fc-button-primary:disabled:hover, .fc .fc-button-primary.fc-button-active:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--white);
}
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--white);
}

.fc-theme-standard td, .fc-theme-standard th {
  border-color: var(--border-color);
}

#calendar .table-bordered td,
#calendar .table-bordered th {
  border: 1px solid var(--border-color);
}

[dir=rtl] .fc-toolbar-chunk .btn-group .btn:first-child {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  border-radius: 5px;
}
[dir=rtl] .fc-toolbar-chunk .btn-group .btn:last-child {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-radius: 5px;
}

[data-bs-theme=dark] .fc-theme-standard .fc-scrollgrid {
  border-color: var(--border-color);
}
[data-bs-theme=dark] .fc-theme-standard td, [data-bs-theme=dark] .fc-theme-standard th {
  border-color: var(--border-color);
}

/* Force all day cells to have equal height */
.fc-daygrid-day {
  height: 120px; /* You can adjust this value as needed */
  vertical-align: top;
  position: relative;
}

/* Ensure event content doesn't push the height */
.fc-daygrid-day-frame {
  height: 100%;
  overflow: hidden;
}

/* Adjust calendar event styling to fit inside the cell */
.fc-daygrid-event {
  max-height: 100%;
  overflow: hidden;
}

/* Optional: Prevent overflow from large image lists */
.fc-event-title-container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ensure all day cells are equal height */
.fc-daygrid-day-frame {
  height: 100px; /* adjust as needed */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Avatar image */
.popover-body .appointment-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.popover-body .appointment-item img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}

.popover-body .appointment-item .name {
  font-weight: 600;
  flex-grow: 1;
}

.popover-body .appointment-item .time {
  white-space: nowrap;
  font-size: 0.9rem;
}

/* Close button */
.fc-col-header-cell .fc-scrollgrid-sync-inner {
  padding: 12px;
  background-color: var(--light);
}

.fc-button-group .fc-button {
  box-shadow: none !important;
}

#calendar-appointment a.fc-event.fc-event-start.fc-event-end.fc-event-past.fc-daygrid-event.fc-daygrid-block-event.fc-h-event {
  background: transparent !important;
}
#calendar-appointment .fc-event {
  background: transparent !important;
}

/*# sourceMappingURL=style.css.map */

/* jQuery UI autocomplete dropdown: pin it right under the input (not the
   top-left corner) and give it a visible menu style, independent of whether
   the CDN jquery-ui.css loads. jQuery UI's JS sets top/left inline, so it
   only needs position:absolute + z-index + visuals here. Applies to every
   admin autocomplete (exportstock #q_customer, feepackages, ...). */
.ui-autocomplete.ui-menu {
    position: absolute;
    z-index: 3000;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    list-style: none;
    margin: 2px 0 0 0;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.ui-autocomplete .ui-menu-item { list-style: none; }
.ui-autocomplete .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item > a {
    display: block;
    padding: 6px 14px;
    cursor: pointer;
    color: #222;
    text-decoration: none;
    white-space: nowrap;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item > a.ui-state-focus,
.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-menu-item > a:hover {
    background: #e9f2ff;
    color: #1a1a1a;
}

/* ================= Mobile Phase 1: bang cuon ngang thay vi tran layout =================
   ~50% bang trong AdminBundle thieu wrapper .table-responsive. Cach cu (ep <table> thanh
   display:block) co tac dung phu: element tuong tac ben trong (vd Bootstrap form-switch o
   setting/exportstock) bi lech khoi vung click -> khong bam duoc. Chuyen sang cach dung
   chuan Bootstrap: JS tu boc moi bang chua co wrapper vao .table-responsive (xem
   wrapTablesResponsive trong common.js) -> <table> GIU display:table, click hoat dong binh
   thuong, .table-responsive lo cuon ngang. Khong con rule display:block o day. */

/* ================= Mobile Phase 3: chan tran ngang do width px cung inline =================
   193 cho `width:<n>px` inline (input, nut, anh, div in) ep chieu rong tren mobile. Thay vi
   sua tay tung inline (de vo layout desktop), cap max-width:100% cho cac nhom hay gay tran.
   Meo: `max-width` tu stylesheet LUON cap duoc inline `width:Npx` (khac thuoc tinh, max-width
   thang) ma khong dung inline. `max-width:100%` chi CAP chu khong ep -> input nho (width:100px)
   giu nguyen, chi cai vuot khung moi bi keo ve. Chi ap dung <= 991.98px nen desktop khong doi.
   Bang KHONG nam trong day (da cuon o Phase 1/2); day chi lo element NGOAI bang. */
@media (max-width: 991.98px) {
    .page-wrapper .content img,
    .page-wrapper .content input,
    .page-wrapper .content select,
    .page-wrapper .content textarea,
    .page-wrapper .content .form-control,
    .page-wrapper .content .form-select,
    .page-wrapper .content button,
    .page-wrapper .content .btn,
    .page-wrapper .content .print-target {
        max-width: 100%;
    }
    .page-wrapper .content img {
        height: auto;
    }
    /* Div in (print-target) co width px cung: tren MAN HINH mobile cho cuon ngang thay vi
       tran ca trang; khi IN van dung width goc cua no (@media print rieng, khong bi anh huong). */
    .page-wrapper .content .print-target {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* O sua truc tiep (jeditable) — bao hieu "click vao nhap/sua duoc": nen vang nhat
   + con tro tay, giong quy uoc .allow_edit o setting/listconst. Dung cho cot Ma
   Tracking o requestexport/list (.code-edit). O trong hien goi y de biet co the nhap. */
/* !important: Bootstrap dat background-color len moi td qua bien --bs-table-bg
   (`.table > :not(caption) > * > *`) nen phai vuot len moi thay mau vang. */
td.code-edit {
    background-color: #fff3b0 !important;
    cursor: pointer;
    border-radius: 3px;
}
td.code-edit:hover {
    background-color: #ffe680 !important;
}

/* Ô nhập MÃ SHOP còn trống ở "Xử lý đơn" (buyshoporder): <b> rỗng nên vô hình,
   không bấm được. Port CSS ZF1 -> hộp vàng có viền chấm để thấy + click nhập mã.
   (class edit_shop_mapping lo phần click; class này lo phần hiện khi trống.) */
.edit_shop_code_empty {
    display: inline-block;
    border-bottom: 1px dotted #999;
    height: 14px;
    min-width: 110px;
    margin-top: 4px;
    background: #FAFACE;
    cursor: pointer;
    border-radius: 3px;
}

/* Bảng report (opt-in bằng class report-fullbleed) tràn sát viền card + header
   vuông. Dùng chung nhiều trang (carecustomer "Chỉ số CSKH..", xử lý đơn "Chia
   đơn/Lên đơn"..). Theme JS bọc <table> vào .table-responsive sau load rồi rule
   .card-body>.table-responsive bo tròn wrapper 13px -> ép radius 0. padding
   card-body thực = 20px (không phải 1rem). Generic cho cả header <thead> lẫn
   <tr class="grid-header-row"> (full-grid-table). Xem [[reference_admin_theme_table_quirk]]. */
.table-responsive:has(> .report-fullbleed) {
    margin-left: -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
    border-radius: 0 !important;
}
.report-fullbleed {
    width: 100% !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}
.report-fullbleed tr > :first-child {
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.report-fullbleed tr > :last-child {
    border-right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.report-fullbleed thead tr > *,
.report-fullbleed tr:first-child > * {
    border-top: 0 !important;
    border-radius: 0 !important;
}

/* Header bảng dính khi cuộn (dùng trong .table-responsive có max-height + overflow-y).
   Chỉ body cuộn, header luôn thấy. Nền đục để dòng không lộ qua khi cuộn. */
.sticky-thead thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--table-header-bg);
}

/* CHỈ THÊM kẻ DỌC ngăn cách các cột; KHÔNG đụng tới kẻ ngang / viền của các class
   khác (giữ nguyên kẻ ngang). Dùng cho bảng danh sách sản phẩm (buyshoporder). */
.col-divider-table > :not(caption) > * > * {
    border-right: 1px solid var(--table-divider-color) !important;
}
.col-divider-table > :not(caption) > * > *:last-child {
    border-right: 0 !important;
}

/* Danh sách NV đang đăng nhập ở header: avatar = chữ cái đầu username, xếp chồng. */
.online-staff-group .online-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    margin-left: -8px;
    border: 2px solid #fff;
    box-sizing: border-box;
    cursor: default;
    user-select: none;
    flex: 0 0 auto;
}
.online-staff-group .online-avatar:first-child {
    margin-left: 0;
}
.online-staff-group .online-avatar-more {
    background: #6c757d;
    font-size: 11px;
}

/* Sếp's request: bảng admin trên MOBILE phải KÉO NGANG được để xem đủ cột.
   Cần ĐỒNG THỜI 2 việc (thiếu 1 là không cuộn):
   1) nowrap: rule ".table tbody tr td{white-space:normal;word-break:break-word}" ép
      mọi ô xuống dòng co vừa khung -> bảng không bao giờ rộng hơn khung -> chẳng có
      gì để cuộn. Ép ô BẢNG NGOÀI sang nowrap (specificity (0,1,4) > (0,1,3) nên thắng;
      ">" nên KHÔNG đụng bảng con lồng trong td).
   2) overflow-x:auto: rule ".card-body:has(> table.table){overflow:hidden}" (bo góc,
      specificity (0,2,1)) đè overflow-x của .card-body.table-responsive (0,2,0) thành
      hidden -> bảng rộng bị CẮT dù đã nowrap. Khôi phục overflow-x:auto (!important cho
      chắc thắng), giữ overflow-y:hidden nên vẫn bo góc.
   Chỉ áp <=991.98px (mobile) đúng phạm vi Sếp báo; desktop giữ nguyên. */
@media (max-width: 991.98px) {
  .table-responsive > table > thead > tr > th,
  .table-responsive > table > tbody > tr > td,
  .table-responsive > table > tbody > tr > th,
  .table-responsive > table > tfoot > tr > td,
  .table-responsive > table > tr > td,
  .table-responsive > table > tr > th {
    white-space: nowrap;
    word-break: normal;
  }
}