/* List

1. Variable
2. Typography
  2.1. Font Size
  2.2. Font Weight
  2.3. Text Alignment
  2.4. Line Height
  2.5. Text Transform
3. Colors
  3.1. Text Color
  3.2. Background Color
  3.3. Switch Color
  3.4. Border Color
4. Buttons
  4.1. Button Variation
  4.2. Button Fill Color
  4.3. Button Outline Color
  4.4. Button Shape
  4.5. Button Group
5. Form. Input, Labe
  5.1. Label
  5.2. Switch
  5.3. Radio
  5.4. Checkbox
  5.5. Input
6. Margin
7. Padding
8. Flex Gap
9. Table
10. Avatar
11. Badge
12. Tooltip
  12.1 Tooltip Size
13. Modal
14. Tab
15. Kanban
16. Dropdown
17. Slideout
18. Multiselect
19. Details Info
20. Vue Datepicker
21. Timeline Widget
22. Vue Toastification
23. Pagination
24. Vue Select
25. Status
  25.1 Active Filter
26. Ag Grid
27. Banner Filter
28. Session Login

Note:
1. Kanban, dropdown, slideout, multiselect, details info, vue datepicker belum ada di dokumentasi
*/

/* 1. Variable */
:root {
  --spacer: 1rem;
  --primary: #1B6FBE;
  --primary-light: #E7F1FB;
  --primary-dark: #134E8E;
  --primary-hover: #15689e;
  --primary-border: #BEE0F9;
  --accent: #00B87A;
  --accent-light: #E3F9F2;
  --sidebar-bg: #0D1F3C;
  --topbar-bg: #1B6FBE;
  --surface: #F5F7FA;
  --card-bg: #FFFFFF;
  --border: #DDE3ED;
  --text-main: #18233A;
  --text-muted: #6B7A99;
  --text-light: #A3ADBE;
  --text-1: #18233A;
  --text-2: #6B7A99;
  --text-3: #A3ADBE;
  --badge-success: #00B87A;
  --badge-warn: #F59E0B;
  --row-hover: #EEF4FC;
  --shadow-sm: 0 1px 4px rgba(27, 111, 190, 0.07);
  --shadow-md: 0 4px 20px rgba(27, 111, 190, 0.12);
  --radius: 8px;
  --info: #00CFDD;
  --red: #ff2829;
  --red-light: #FFF4F3;
  --red-hover: #f50001;
  --green: #36b37e;
  --green-light: #d4f7e3;
  --green-border: #78ddaf;
  --green-hover: #118a5d;
  --yellow: #fdac41;
  --yellow-light: #fee3bf;
  --yellow-hover: #f28b03;
  --gray-100: #212529;
  --gray-90: #343a40;
  --gray-80: #495057;
  --gray-70: #6c757d;
  --gray-60: #adb5bd;
  --gray-50: #ced4da;
  --gray-40: #dee2e6;
  --gray-30: #e9ecef;
  --gray-20: #f8f9fa;
  --gray-10: #fff;

   --fonts-body: "Inter", sans-serif;
    --light-blue: #EAF8FF;
    --blue: #2284C6;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #1B6FBE;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #34b7f1;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --border-gray: #E2E2E2;
    --color-surface-light: #F6F6F6;
    

    --image-icon:24px;

    --fontSizes-xs: 0.625rem;
    --fontSizes-sm: 0.75rem;
    --fontSizes-md: 0.875rem;
    --fontSizes-lg: 1rem;
    --fontSizes-xl: 1.25rem;
    --fontSizes-2xl: 1.5rem;

    --fontWeights-light: 300;
    --fontWeights-regular: 400;
    --fontWeights-medium: 500;
    --fontWeights-semibold: 600;

    --letterSpacings-tighter: -0.05em;
    --letterSpacings-tight: -0.025em;
    --letterSpacings-normal: 0;
    --letterSpacings-wide: 0.025em;
    --letterSpacings-wider: 0.05em;
    --letterSpacings-widest: 0.1em;

    --lineHeights-normal: normal;
    --lineHeights-none: 0;
    --lineHeights-2xs: 0.6;
    --lineHeights-xs: 0.75;
    --lineHeights-sm: 1;
    --lineHeights-1sm: 1.2;
    --lineHeights-md: 1.4;
    --lineHeights-xxlg: 1.34;
    --lineHeights-xlg: 1.3;
    --lineHeights-1lg: 1.6;
    --lineHeights-2lg: 1.7;
    --lineHeights-lg: 1.5;
    --lineHeights-3lg: 1.715;
    --lineHeights-xl: 2;
    --lineHeights-2xl: 2.25;


    --radii-none: 0;
    --radii-xs: 0.125rem 2px;
    --radii-2xs: 0.188rem;
    --radii-sm: 0.25rem;
    --radii-md: 0.375rem;
    --radii-lg: 0.5rem;
    --radii-xl: 0.75rem;
    --radii-full: 624.938rem;
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-13: 3.625rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-22: 5.5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-40: 10rem;
    --space-48: 12rem;
    --space-56: 14rem;
    --space-64: 16rem;
    --space-65: 17.5rem;
    --space-66: 18.125rem;
    --space-0-5: 0.125rem;
    --space-1-5: 0.375rem;
    --space-2-5: 0.625rem;
    --space-3-2: 0.875rem;
    --space-3-5: 0.938rem;
    --space-6-5: 1.625rem;
    --space-7-5: 1.875rem;
    --space-9-5: 2.375rem;
    --space-px: 1px;


    --sizes-0: 0;
    --sizes-1: 0.25rem;
    --sizes-2: 0.5rem;
    --sizes-3: 0.75rem;
    --sizes-4: 1rem;
    --sizes-5: 1.25rem;
    --sizes-6: 1.5rem;
    --sizes-7: 1.75rem;
    --sizes-8: 2rem;
    --sizes-9: 2.25rem;
    --sizes-10: 2.5rem;
    --sizes-11: 2.75rem;
    --sizes-12: 3rem;
    --sizes-13: 3.625rem;
    --sizes-16: 4rem;
    --sizes-20: 5rem;
    --sizes-22: 5.5rem;
    --sizes-24: 6rem;
    --sizes-32: 8rem;
    --sizes-40: 10rem;
    --sizes-48: 12rem;
    --sizes-56: 14rem;
    --sizes-64: 16rem;
    --sizes-65: 17.5rem;
    --sizes-66: 18.125rem;
    --sizes-0-5: 0.125rem;
    --sizes-1-5: 0.375rem;
    --sizes-2-5: 0.625rem;
    --sizes-3-2: 0.875rem;
    --sizes-3-5: 0.938rem;
    --sizes-6-5: 1.625rem;
    --sizes-7-5: 1.875rem;
    --sizes-9-5: 2.375rem;
    --sizes-px: 1px;
    --sizes-full: 100%;
    --sizes-3xs: 14rem;
    --sizes-2xs: 16rem;
    --sizes-xs: 20rem;
    --sizes-sm: 24rem;
    --sizes-md: 28rem;
    --sizes-lg: 32rem;
    --sizes-xl: 36rem;
    --sizes-2xl: 42rem;
    --sizes-3xl: 48rem;
    --sizes-4xl: 56rem;
    --sizes-5xl: 64rem;
    --sizes-6xl: 72rem;
    --sizes-containers-sm: 640px;
    --sizes-containers-md: 768px;
    --sizes-containers-lg: 1024px;
    --sizes-containers-xl: 1280px;


    --shadows-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadows-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadows-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadows-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadows-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadows-outline: 0 0 0 3px #E0EEFF;
    --shadows-outline-tab: 0 0 0 2px #E0EEFF;
    --shadows-outer: 0 0 0 3px rgba(224, 238, 255, 1);
    --shadows-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadows-none: none;
   
    --zIndices-hide: -1;
    --zIndices-auto: auto;
    --zIndices-base: 0;
    --zIndices-docked: 10;
    --zIndices-dropdown: 1000;
    --zIndices-sticky: 1100;
    --zIndices-banner: 1200;
    --zIndices-popover: 1250;
    --zIndices-overlay: 1300;
    --zIndices-modal: 1400;
    --zIndices-skipLink: 1600;
    --zIndices-toast: 1700;
    --zIndices-tooltip: 1800;

    --chakra-ring-inset: var(--chakra-empty, /*!*/ /*!*/);
    --chakra-ring-offset-width: 0px;
    --chakra-ring-offset-color: #fff;
    --chakra-ring-color: rgba(66, 153, 225, 0.6);
    --chakra-ring-offset-shadow: 0 0 #0000;
    --chakra-ring-shadow: 0 0 #0000;
    --chakra-space-x-reverse: 0;
    --chakra-space-y-reverse: 0;

    --colors-transparent: transparent;
    --colors-current: currentColor;
    --colors-overlay: rgba(22, 26, 32, 0.8);
    --colors-overlayFill: #484D55;
    --colors-background: #F1F5F9;
    --colors-dark: #232933;
    --colors-black: #000;
    --colors-white: #FFF;
    --colors-gradientGray: linear-gradient(90deg, #F0EFF1 0%, #F8F8F9 100%);
    --colors-lightPurple: radial-gradient(108.28% 139.29% at 0% 0%, #E9F1FD 0%, #F4F0FF 100%);
    --colors-palePurple: linear-gradient(90deg, #F3F0FD 0%, #DCCFFF 100%);
    --colors-vibrantPurple: linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%);
    --colors-deepPurple: linear-gradient(96deg, #BD63F8 2.22%, #5F37E1 98.05%);
    --colors-lightBlue: #F5F9FF;
    --colors-whiteAlpha-50: rgba(255, 255, 255, 0.04);
    --colors-whiteAlpha-100: rgba(255, 255, 255, 0.06);
    --colors-whiteAlpha-200: rgba(255, 255, 255, 0.08);
    --colors-whiteAlpha-300: rgba(255, 255, 255, 0.16);
    --colors-whiteAlpha-400: rgba(255, 255, 255, 0.24);
    --colors-whiteAlpha-500: rgba(255, 255, 255, 0.36);
    --colors-whiteAlpha-600: rgba(255, 255, 255, 0.48);
    --colors-whiteAlpha-700: rgba(255, 255, 255, 0.64);
    --colors-whiteAlpha-800: rgba(255, 255, 255, 0.80);
    --colors-whiteAlpha-900: rgba(255, 255, 255, 0.92);
    --colors-blackAlpha-50: rgba(0, 0, 0, 0.04);
    --colors-blackAlpha-100: rgba(0, 0, 0, 0.06);
    --colors-blackAlpha-200: rgba(0, 0, 0, 0.08);
    --colors-blackAlpha-300: rgba(0, 0, 0, 0.16);
    --colors-blackAlpha-400: rgba(0, 0, 0, 0.24);
    --colors-blackAlpha-500: rgba(0, 0, 0, 0.36);
    --colors-blackAlpha-600: rgba(0, 0, 0, 0.48);
    --colors-blackAlpha-700: rgba(0, 0, 0, 0.64);
    --colors-blackAlpha-800: rgba(0, 0, 0, 0.80);
    --colors-blackAlpha-900: rgba(0, 0, 0, 0.92);
    --colors-gray-25: #F8F9FB;
    --colors-gray-50: #EDF0F2;
    --colors-gray-100: #D0D6DD;
    --colors-gray-300: #d5d5d5;
    --colors-gray-400: #8B95A5;
    --colors-gray-600: #626B79;
    --colors-blue-50: #EAECFB;
    --colors-blue-60: #CAD8E5;
    --colors-blue-100: #D6DFFF;
    --colors-blue-400: #4B61DD;
    --colors-blue-500: #1C44D5;
    --colors-blue-700: #0031BE;
    --colors-blue-800: #0031BE;
    --colors-green-50: #B1ECED;
    --colors-green-400: #68BE79;
    --colors-green-500: #4FB262;
    --colors-green-700: #269218;
    --colors-orange-50: #FBF3DD;
    --colors-orange-400: #E0AB00;
    --colors-orange-500: #DE9400;
    --colors-orange-600: #E1A325;
    --colors-orange-700: #DB8000;
    --colors-orange-text: #817729;
    --colors-red-50: #FDECEE;
    --colors-red-400: #DA473F;
    --colors-red-500: #C83E39;
    --colors-red-700: #AB3129;
    --colors-ice-50: #E0EEFF;
    --colors-ice-100: #B4D3F2;
    --colors-brand-barantum: #2284C6;
    --colors-sky-100: #60A5FA;
    --colors-sky-400: #3B82F6;
    --colors-ash-100: #E7EDF5;
    --colors-teal-100: #2DD4BF;
    --colors-teal-400: #14B8A6;
    --colors-violet-100: #A78BFA;
    --colors-violet-400: #8B5CF6;
    --colors-amber-100: #FBBF24;
    --colors-amber-400: #F59E0B;
    --colors-rose-100: #F87171;
    --colors-rose-400: #EF4444;
    --colors-stone-100: #A1A1AA;
    --colors-stone-400: #71717A;
    --colors-lime-100: #A3E635;
    --colors-lime-400: #84CC16;
    --colors-pink-100: #F472B6;
    --colors-pink-400: #EC4899;
    --colors-apricot-100: #FB923C;
    --colors-apricot-400: #F97316;
    --colors-aqua-100: #22D3EE;
    --colors-aqua-400: #06B6D4;
    --colors-leaf-100: #4ADE80;
    --colors-leaf-400: #22C55E;
    --colors-fuchsia-100: #E879F9;
    --colors-fuchsia-400: #D946EF;
    --borders-none: 0;
    --borders-half: 0.75px solid;
    --borders-1px: 1px solid;
    --borders-1-5px: 1.5px solid;
    --borders-2px: 2px solid;
    --borders-4px: 4px solid;
    --borderWidths-sm: 1px;
    --borderWidths-md: 2px;
    --borderWidths-lg: 4px;
}

body {
  font-size: var(--spacer);
  font-family: "Inter", sans-serif;
  color: var(--gray-100);
}

/* 2. Typography */

/* 2.1 Font Size */
.font-large-3 {
  font-size: calc(var(--fontSizes-lg) * 2);
}

.font-large-2 {
  font-size: calc(var(--fontSizes-2xl) * 1.5);
}

.font-large-1 {
  font-size: calc(var(--fontSizes-lg) * 1.125);
}

.font-medium-1 {
  font-size: var(--fontSizes-lg);
}

.font-medium-2{
  font-size: var(--fontSizes-md);
}

.font-small-1 {
  font-size: var(--fontSizes-sm);
}

.font-small-2 {
  font-size: var(--fontSizes-xs);
}


@media (max-width: 992px) {
  .font-large-3 {
    font-size: var(--fontSizes-2xl);
  }

  .font-large-2 {
    font-size: var(--fontSizes-xl);
  }

  .font-medium-1 {
    font-size: var(--fontSizes-lg);
  }
}

/* 2.2 Font Weight */
.font-weight-black {
  font-weight: 700;
}
.font-weight-bolder {
  font-weight: 600;
}

.font-weight-bold {
  font-weight: 500;
}

.font-weight-normal {
  font-weight: 400;
}

.font-weight-light {
  font-weight: 300;
}

/* 2.3 Text Alignment */
.text-left {
  text-align: left;
}

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

.text-right {
  text-align: right;
}

@media (min-width: 768px) and (max-width: 991px) {
  .text-md-left {
    text-align: left;
  }
  .text-md-center {
    text-align: center;
  }
  .text-md-right {
    text-align: right;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .text-lg-left {
    text-align: left;
  }
  .text-lg-center {
    text-align: center;
  }
  .text-lg-right {
    text-align: right;
  }
}

@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left;
  }
  .text-xl-center {
    text-align: center;
  }
  .text-xl-right {
    text-align: right;
  }
}

/* 2.4 Line Height */
.lh-small {
  line-height: 100%;
}
.lh-normal {
  line-height: 140%;
}

.lh-large {
  line-height: 180%;
}

/* 2.5 Text Transform */
.text-capitalize {
  text-transform: capitalize;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-transform-none {
  text-transform: none !important;
}


/* 3. Colors */
/* 3.1 Text Color */
h1, h2, h3, h4, h5, h6 {
  color: var(--gray-100);
}
.text-primary {
  color: var(--primary) !important;
}

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

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

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

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

.text-black-50 {
  color: rgba(var(--gray-100), 0.5) !important;
}

.text-white-50 {
  color: rgba(var(--gray-10), 0.5) !important;
}

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

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

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

a {
  color: var(--primary);
}


.divider .divider-text.in-slideout {
  background: #f7f9fc;
}

/* 3.2 Background Color */
.bg-primary {
  background: var(--primary) !important;
}

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

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

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

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

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

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


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

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


.bg-black {
  background: var(--gray-100) !important;
}
.bg-white {
  background: var(--gray-10) !important;
}
.bg-gray-20 {
  background: var(--gray-20) !important;
}
.bg-gray-30 {
  background: var(--gray-30) !important;
}
.bg-gray-40 {
  background: var(--gray-40) !important;
}
.bg-gray-50 {
  background: var(--gray-50) !important;
}
.bg-gray-60 {
  background: var(--gray-60) !important;
}
.bg-gray-70 {
  background: var(--gray-70) !important;
}
.bg-gray-80 {
  background: var(--gray-80) !important;
}
.bg-gray-90 {
  background: var(--gray-90) !important;
}
.bg-surface-light {
  background-color: #ECF1F4;
}

/* 3.3 Switch Color */
.custom-switch-primary
  .custom-control-input:checked
  ~ .custom-control-label::before {
  background: var(--primary);
}

.custom-switch-success
  .custom-control-input:checked
  ~ .custom-control-label::before {
  background: var(--green);
}

.custom-switch-warning
  .custom-control-input:checked
  ~ .custom-control-label::before {
  background: var(--warning);
}

.custom-switch-danger
  .custom-control-input:checked
  ~ .custom-control-label::before {
  background: var(--danger);
}

/* 3.4 Border Color */
.border-primary {
  border-color: var(--primary) !important;
}

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

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

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

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

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

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

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

.border-secondary {
  border-color: var(--gray-40) !important;
}
/* 4. Buttons */
.btn {
  color: var(--gray-70);
}
.btn-outline.border {
  border: var(--borders-1px) var(--border-gray) !important;
}
/* 4.1 Button Variation */
/* .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacer) * 0.75) !important;
  background: var(--gray-10);
}

.btn-icon i {
  position: static;
}

.btn-icon-text {
  display: flex;
  align-items: center;
  column-gap: 8px;
  padding: calc(var(--spacer) * 0.5) var(--spacer);
} */

/* 4.2 Button Fill Color*/

.btn-white {
  background: var(--white);
}

.btn-white:hover {
  background: var(--gray-20);
}

.btn-light {
  background: var(--gray-30);
}

.btn-light:hover,
.btn-light:focus {
  background: var(--gray-40);
}

.btn-primary {
  background: var(--primary);
  color: var(--gray-10);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--primary-hover) !important;
}

.btn-info {
  background-color: var(--info) !important;
  color: var(--gray-10);
}

.btn-info:hover {
  background-color: var(--info) !important;
  color: var(--gray-10);
}


button[class~="btn"].disabled,
button[class~="btn"].disabled:hover,
button[class~="btn"]:disabled,
button[class~="btn"]:hover:disabled {
  background: var(--gray-50) !important;
  border-color: var(--gray-60) !important;
  color: var(--gray-100) !important;
  cursor: no-drop !important;
}

.btn-success {
  background: var(--green);
  color: var(--gray-10);
}

.btn-success:hover,
.btn-success:focus {
  background: var(-success-hover);
}

.btn-warning {
  background: var(--yellow);
}

.btn-warning:hover,
.btn-warning:focus {
  background: var(--yellow-hover);
}

.btn-danger {
  background: var(--red);
  color: var(--gray-10);
}

.btn-danger:hover,
.btn-danger:focus {
  background: var(--red-hover);
}

.btn-secondary {
  background: var(--gray-80);
  color: var(--gray-20);
}

.btn-secondary:hover {
  background: var(--gray-90);
}

.btn-light-secondary {
  background-color: rgba(73, 80, 87, .5);
  color: var(--gray-20);
}

.btn-light-secondary:hover, .btn-light-secondary.hover {
  background-color: var(--gray-80);
  color: var(--gray-10);
}

.btn-light-secondary:active, .btn-light-secondary.active {
  background-color: var(--gray-80);
  color: var(--gray-10);
}

.btn-dark {
  background: var(--gray-100);
  color: var(--white);
}

/* 4.3 Button Outline Color */
.btn-outline-primary {
  border: solid 1px var(--primary);
  color: var(--primary);
}


.btn-outline-primary:hover,
.btn-outline-primary:focus {
  border: solid 1px var(--primary);
  background: var(--primary);
  color: var(--gray-10) !important;
}

.btn-outline-primary.bg-white:hover,
.btn-outline-primary.bg-white:focus {
  background: var(--primary) !important;
}

.btn-outline-info {
  background-color: var(--info);
  color: var(--gray-10);
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  background-color: var(--info);
  color: var(--gray-10);
}

.btn-outline-info.bg-white:hover,
.btn-outline-info.bg-white:focus {
  background: var(--info) !important;
}

.btn-outline-success {
  border: solid 1px var(--green);
  color: var(--green);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  border: solid 1px var(--green);
  background: var(--green);
  color: var(--gray-10);
}

.btn-outline-success.bg-white:hover,
.btn-outline-success.bg-white:focus {
  background: var(--green) !important;
}

.btn-outline-warning {
  border: solid 1px var(--yellow);
  color: var(--yellow);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
  border: solid 1px var(--yellow);
  background: var(--yellow);
  color: var(--gray-10);
}

.btn-outline-warning.bg-white:hover,
.btn-outline-warning.bg-white:focus {
  background: var(--yellow) !important;
  color: var(--gray-100);
}

.btn-outline-danger {
  border: solid 1px var(--red);
  color: var(--red);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  border: solid 1px var(--danger);
  background: var(--danger);
  color: var(--gray-10);
}

.btn-outline-danger.bg-white:hover,
.btn-outline-danger.bg-white:focus {
  background: var(--red) !important;
}

.btn-outline-secondary {
  border: solid 1px var(--gray-80);
}

.btn-outline-secondary.bg-white:hover,
.btn-outline-secondary.bg-white:focus {
  background: var(--gray-80) !important;
}
button[class~="btn-outline"]:disabled {
  border-color: var(--gray-70);
  color: var(--gray-100);
}

button[class~="btn-outline-primary"].disabled:hover,
button[class~="btn-outline-primary"]:hover:disabled {
  background: var(--gray-50);
}

/* 4.4 Button Shape */
/* .btn-circle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
} */

/* 4.5 Button Group */
.btn-group:not(.dropdown)>.btn.btn-outline-primary:active, 
.btn-group:not(.dropdown)>.btn.btn-outline-primary.active, 
.btn-group:not(.dropdown)>.btn.btn-outline-primary:hover, 
.btn-group:not(.dropdown)>.btn.btn-outline-primary:focus {
  background: transparent;
  border-right-width: 1px;
}

.btn-group:not(.dropdown)>.btn.btn-outline-primary:active label, 
.btn-group:not(.dropdown)>.btn.btn-outline-primary.active label, 
.btn-group:not(.dropdown)>.btn.btn-outline-primary:hover label, 
.btn-group:not(.dropdown)>.btn.btn-outline-primary:focus label {
  color: var(--primary) !important;
}

/* 5 Form. Input, Label */
/* 5.1. Label */

label {
  color: var(--gray-100) !important;
  font-size: calc(var(--spacer) * 0.875);
  text-transform: uppercase;
  font-weight: 500;
}



/* 5.2 Switch*/
/* .custom-switch {
  padding-left: 0;
  margin: 0;
  min-height: initial;
}

.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none !important;
} */

/* .custom-switch .custom-control-label {
  height: 20px;
  width: 42px;
  padding: 0;
  margin: 0 16px 0 0;
} */

/* .custom-switch .custom-control-label::before { */
  /* For bg color of switch */
  /* border: none;
  background-color: var(--gray-40);
  height: 20px;
  box-shadow: none;
  transition: all 0.25s ease;
  cursor: pointer;
  user-select: none;
  top: 0;
  left: 1px;
} */

/* .custom-switch .custom-control-label:after { */
  /* For Switch handle */
  /* position: absolute;
  top: 1px;
  left: 2px;
  box-shadow: none;
  background-color: var(--gray-10);
  transition: all 0.25s ease;
  cursor: pointer;
  user-select: none;
} */

/* .custom-switch .custom-control-label .switch-icon-left,
.custom-switch .custom-control-label .switch-icon-right { */
  /* For Switch Icon */
  /* position: absolute;
  cursor: pointer;
  user-select: none;
  top: 2px;
} */

/* .custom-switch .custom-control-label .switch-icon-left i,
.custom-switch .custom-control-label .switch-icon-right i {
  font-size: 1rem;
} */

/* .custom-switch .custom-control-label .switch-icon-left {
  left: 5px;
  color: var(--gray-10);
} */

/* .custom-switch .custom-control-label .switch-icon-right {
  right: 5px;
} */

/* .custom-switch .custom-control-label:focus {
  outline: 0;
} */

/* .custom-switch .custom-control-input:checked ~ .custom-control-label::after { */
  /* For Switch Handle Animation after its checked */
  /* transform: translateX(1.4rem);
} */

/* .custom-switch
  .custom-control-input:not(:disabled):active
  ~ .custom-control-label::before { */
  /* disabled bg color on active */
  /* background-color: var(--primary);
} */

/* .custom-switch.custom-switch-glow
  .custom-control-input:not(:disabled):checked
  ~ .custom-control-label::before { */
  /* Custom Switch Glow */
  /* box-shadow: 0 0 8px 0 rgba(var(--primary), 0.8) !important;
} */

/* .custom-switch.custom-switch-shadow
  .custom-control-input:not(:disabled):checked
  ~ .custom-control-label::before {
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4) !important;
} */

/* 5.3 Radio */
.radio input[type="radio"] {
  display: none;
} 

.radio input[type="radio"]:checked ~ label::after {
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s cubic-bezier(0.35, 0.9, 0.4, 0.9);
}

.radio input[type="radio"]:disabled ~ label::before { 
  /* disabled Radio Buttons */
  background-color: #f2f4f4 !important;
  box-shadow: none !important;
}

.radio input[type="radio"]:disabled ~ label::after {
  background-color: #b3c0ce !important;
}

.radio label {
  text-transform: none;
  font-size: .875rem;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  cursor: pointer;
}

.radio label::after {
  background-color: var(--primary);
  border-radius: 50%;
  left: 4px;
  opacity: 0;
  transform: scale(3.6);
  position: absolute;
  display: inline-flex;
  content: "";
  height: 8px;
  width: 8px;
}

 .radio label::before {
  content: "";
  border: 1px solid var(--gray-70);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  margin-right: 0.5rem;
}


.radio.radio-shadow input:checked ~ label::before {
  box-shadow: 0 0 6px 0 rgba(var(--gray-100), 0.2);
}


.radio.radio-sm label::before {
  width: 14px;
  height: 14px;
}

.radio.radio-sm label:after {
  height: 6px;
  width: 6px;
  left: 4px;
}

/* 5.4 Checkbox */
.checkbox {
  position: relative;
  display: inline-block;
}

.checkbox input[type="checkbox"] {
  opacity: 0;
}

 

.checkbox label {
  /* label css in check box */
  text-transform: none;
  font-size: .875rem;
  margin-left: 1.75rem;
  margin-bottom: 0;
  cursor: pointer;
}

.checkbox label:before {
  content: "";
  height: 16px;
  width: 16px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
}
 
.checkbox label:after {
  content: " ";
  height: 16px;
  width: 16px;
  border: 1px solid var(--gray-70);
  position: absolute;
  border-radius: 4px;
  top: 0;
  left: 0;
  transition: 100ms ease-in-out;
}
 


.checkbox input:checked ~ label:after {
  border-top-style: none;
  border-right-style: none;
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  height: 6px;
  width: 10px;
  border-color: var(--primary);
  border-radius: 0;
  border-width: 2px;
  top: 4px;
  left: 2.5px;
}

.checkbox input:checked ~ label:before {
  background-color: var(--gray-10);
  border: 1px solid var(--gray-70);
}

.checkbox input:disabled ~ label::before {
  box-shadow: none !important;
}

.checkbox input:disabled ~ label::after {
  border-color: var(--gray-70);
}

.checkbox.checkbox-shadow input:checked ~ label::before {
  box-shadow: 0 0 6px 0 rgba(var(--gray-100), 0.2);
}

.checkbox.checkbox-sm input:checked ~ label:after {
  height: 5px;
  width: 8px;
  top: 7px;
}


.checkbox.checkbox-sm label::before,
.checkbox.checkbox-sm label::after {
  width: 15px;
  height: 15px;
  top: 3px;
}

.checkbox.checkbox-icon input:checked ~ label:after {
  /* Checkbox with Icons */
   border: none;
}

.checkbox.checkbox-icon input:checked ~ label i {
  transform: scale(1);
  transition: 200ms ease-in-out;
}

.checkbox.checkbox-icon i {
  position: absolute;
  left: 4px;
  top: 5px;
  font-size: 0.85rem;
  transform: scale(1.5);
  transition: all 0.15s ease-in;
}

/* 5.5 Input */

.form-control {color: var(--gray-100);}
.form-control:focus {
  border: solid 1px var(--primary);
}
.form-control:disabled {
  background: var(--gray-30);
  color: var(--gray-100);
}

.form-control::placeholder {
  color: var(--gray-70);
}


/* 6. Margin */
.m-0 {
  margin: 0 !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.ml-0 {
  margin-left: 0 !important;
}
.mr-0 {
  margin-right: 0 !important;
}
.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.m-25 {
  margin: calc(var(--spacer) * 0.25) !important;
}

.mt-25 {
  margin-top: calc(var(--spacer) * 0.25) !important;
}
.mb-25 {
  margin-bottom: calc(var(--spacer) * 0.25) !important;
}
.ml-25 {
  margin-left: calc(var(--spacer) * 0.25) !important;
}
.mr-25 {
  margin-right: calc(var(--spacer) * 0.25) !important;
}
.my-25 {
  margin-top: calc(var(--spacer) * 0.25) !important;
  margin-bottom: calc(var(--spacer) * 0.25) !important;
}
.mx-25 {
  margin-left: calc(var(--spacer) * 0.25) !important;
  margin-right: calc(var(--spacer) * 0.25) !important;
}

.m-50 {
  margin: calc(var(--spacer) * 0.5) !important;
}
.mt-50 {
  margin-top: calc(var(--spacer) * 0.5) !important;
}
.mb-50 {
  margin-bottom: calc(var(--spacer) * 0.5) !important;
}
.ml-50 {
  margin-left: calc(var(--spacer) * 0.5) !important;
}
.mr-50 {
  margin-right: calc(var(--spacer) * 0.5) !important;
}
.my-50 {
  margin-top: calc(var(--spacer) * 0.5) !important;
  margin-bottom: calc(var(--spacer) * 0.5) !important;
}
.mx-50 {
  margin-left: calc(var(--spacer) * 0.5) !important;
  margin-right: calc(var(--spacer) * 0.5) !important;
}

.m-75 {
  margin: calc(var(--spacer) * 0.75) !important;
}
.mt-75 {
  margin-top: calc(var(--spacer) * 0.75) !important;
}
.mb-75 {
  margin-bottom: calc(var(--spacer) * 0.75) !important;
}
.ml-75 {
  margin-left: calc(var(--spacer) * 0.75) !important;
}
.mr-75 {
  margin-right: calc(var(--spacer) * 0.75) !important;
}
.my-75 {
  margin-top: calc(var(--spacer) * 0.75) !important;
  margin-bottom: calc(var(--spacer) * 0.75) !important;
}
.mx-75 {
  margin-left: calc(var(--spacer) * 0.75) !important;
  margin-right: calc(var(--spacer) * 0.75) !important;
}

.mt-75 {
  margin-top: calc(var(--spacer) * 0.75) !important;
}
.mb-75 {
  margin-bottom: calc(var(--spacer) * 0.75) !important;
}
.ml-75 {
  margin-left: calc(var(--spacer) * 0.75) !important;
}
.mr-75 {
  margin-right: calc(var(--spacer) * 0.75) !important;
}
.my-75 {
  margin-top: calc(var(--spacer) * 0.75) !important;
  margin-bottom: calc(var(--spacer) * 0.75) !important;
}
.mx-75 {
  margin-left: calc(var(--spacer) * 0.75) !important;
  margin-right: calc(var(--spacer) * 0.75) !important;
}

.mt-1 {
  margin-top: var(--spacer) !important;
}
.mb-1 {
  margin-bottom: var(--spacer) !important;
}
.ml-1 {
  margin-left: var(--spacer) !important;
}
.mr-1 {
  margin-right: var(--spacer) !important;
}
.my-1 {
  margin-top: var(--spacer) !important;
  margin-bottom: var(--spacer) !important;
}
.mx-1 {
  margin-left: var(--spacer) !important;
  margin-right: var(--spacer) !important;
}

.mt-2 {
  margin-top: calc(var(--spacer) * 1.25) !important;
}
.mb-2 {
  margin-bottom: calc(var(--spacer) * 1.25) !important;
}
.ml-2 {
  margin-left: calc(var(--spacer) * 1.25) !important;
}
.mr-2 {
  margin-right: calc(var(--spacer) * 1.25) !important;
}
.my-2 {
  margin-top: calc(var(--spacer) * 1.25) !important;
  margin-bottom: calc(var(--spacer) * 1.25) !important;
}
.mx-2 {
  margin-left: calc(var(--spacer) * 1.25) !important;
  margin-right: calc(var(--spacer) * 1.25) !important;
}

.m-3 {
  margin: calc(var(--spacer) * 1.5) !important;
}
.mt-3 {
  margin-top: calc(var(--spacer) * 1.5) !important;
}
.mb-3 {
  margin-bottom: calc(var(--spacer) * 1.5) !important;
}
.ml-3 {
  margin-left: calc(var(--spacer) * 1.5) !important;
}
.mr-3 {
  margin-right: calc(var(--spacer) * 1.5) !important;
}
.my-3 {
  margin-top: calc(var(--spacer) * 1.5) !important;
  margin-bottom: calc(var(--spacer) * 1.5) !important;
}
.mx-3 {
  margin-left: calc(var(--spacer) * 1.5) !important;
  margin-right: calc(var(--spacer) * 1.5) !important;
}

.m-4 {
  margin: calc(var(--spacer) * 1.75) !important;
}
.mt-4 {
  margin-top: calc(var(--spacer) * 1.75) !important;
}
.mb-4 {
  margin-bottom: calc(var(--spacer) * 1.75) !important;
}
.ml-4 {
  margin-left: calc(var(--spacer) * 1.75) !important;
}
.mr-4 {
  margin-right: calc(var(--spacer) * 1.75) !important;
}
.my-4 {
  margin-top: calc(var(--spacer) * 1.75) !important;
  margin-bottom: calc(var(--spacer) * 1.75) !important;
}
.mx-4 {
  margin-left: calc(var(--spacer) * 1.75) !important;
  margin-right: calc(var(--spacer) * 1.75) !important;
}

.m-5 {
  margin: calc(var(--spacer) * 2) !important;
}
.mt-5 {
  margin-top: calc(var(--spacer) * 2) !important;
}
.mb-5 {
  margin-bottom: calc(var(--spacer) * 2) !important;
}
.ml-5 {
  margin-left: calc(var(--spacer) * 2) !important;
}
.mr-5 {
  margin-right: calc(var(--spacer) * 2) !important;
}
.my-5 {
  margin-top: calc(var(--spacer) * 2) !important;
  margin-bottom: calc(var(--spacer) * 2) !important;
}
.mx-5 {
  margin-left: calc(var(--spacer) * 2) !important;
  margin-right: calc(var(--spacer) * 2) !important;
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: var(--space-0) !important;
  }
  .mt-md-0 {
    margin-top: var(--space-0) !important;
  }
  .mb-md-0 {
    margin-bottom: var(--space-0) !important;
  }
  .ml-md-0 {
    margin-left: var(--space-0) !important;
  }
  .mr-md-0 {
    margin-right: var(--space-0) !important;
  }
  .my-md-0 {
    margin-top: var(--space-0) !important;
    margin-bottom: var(--space-0) !important;
  }
  .mx-md-0 {
    margin-left: var(--space-0) !important;
    margin-right: var(--space-0) !important;
  }

  .m-md-25 {
    margin: calc(var(--spacer) * 0.25) !important;
  }

  .mt-md-25 {
    margin-top: calc(var(--spacer) * 0.25) !important;
  }
  .mb-md-25 {
    margin-bottom: calc(var(--spacer) * 0.25) !important;
  }
  .ml-md-25 {
    margin-left: calc(var(--spacer) * 0.25) !important;
  }
  .mr-md-25 {
    margin-right: calc(var(--spacer) * 0.25) !important;
  }
  .my-md-25 {
    margin-top: calc(var(--spacer) * 0.25) !important;
    margin-bottom: calc(var(--spacer) * 0.25) !important;
  }
  .mx-md-25 {
    margin-left: calc(var(--spacer) * 0.25) !important;
    margin-right: calc(var(--spacer) * 0.25) !important;
  }

  .m-md-50 {
    margin: calc(var(--spacer) * 0.5) !important;
  }
  .mt-md-50 {
    margin-top: calc(var(--spacer) * 0.5) !important;
  }
  .mb-md-50 {
    margin-bottom: calc(var(--spacer) * 0.5) !important;
  }
  .ml-md-50 {
    margin-left: calc(var(--spacer) * 0.5) !important;
  }
  .mr-md-50 {
    margin-right: calc(var(--spacer) * 0.5) !important;
  }
  .my-md-50 {
    margin-top: calc(var(--spacer) * 0.5) !important;
    margin-bottom: calc(var(--spacer) * 0.5) !important;
  }
  .mx-md-50 {
    margin-left: calc(var(--spacer) * 0.5) !important;
    margin-right: calc(var(--spacer) * 0.5) !important;
  }

  .m-md-75 {
    margin: calc(var(--spacer) * 0.75) !important;
  }
  .mt-md-75 {
    margin-top: calc(var(--spacer) * 0.75) !important;
  }
  .mb-md-75 {
    margin-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .ml-md-75 {
    margin-left: calc(var(--spacer) * 0.75) !important;
  }
  .mr-md-75 {
    margin-right: calc(var(--spacer) * 0.75) !important;
  }
  .my-md-75 {
    margin-top: calc(var(--spacer) * 0.75) !important;
    margin-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .mx-md-75 {
    margin-left: calc(var(--spacer) * 0.75) !important;
    margin-right: calc(var(--spacer) * 0.75) !important;
  }

  .mt-md-75 {
    margin-top: calc(var(--spacer) * 0.75) !important;
  }
  .mb-md-75 {
    margin-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .ml-md-75 {
    margin-left: calc(var(--spacer) * 0.75) !important;
  }
  .mr-md-75 {
    margin-right: calc(var(--spacer) * 0.75) !important;
  }
  .my-md-75 {
    margin-top: calc(var(--spacer) * 0.75) !important;
    margin-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .mx-md-75 {
    margin-left: calc(var(--spacer) * 0.75) !important;
    margin-right: calc(var(--spacer) * 0.75) !important;
  }

  .mt-md-1 {
    margin-top: var(--spacer) !important;
  }
  .mb-md-1 {
    margin-bottom: var(--spacer) !important;
  }
  .ml-md-1 {
    margin-left: var(--spacer) !important;
  }
  .mr-md-1 {
    margin-right: var(--spacer) !important;
  }
  .my-md-1 {
    margin-top: var(--spacer) !important;
    margin-bottom: var(--spacer) !important;
  }
  .mx-md-1 {
    margin-left: var(--spacer) !important;
    margin-right: var(--spacer) !important;
  }

  .mt-md-2 {
    margin-top: calc(var(--spacer) * 1.25) !important;
  }
  .mb-md-2 {
    margin-bottom: calc(var(--spacer) * 1.25) !important;
  }
  .ml-md-2 {
    margin-left: calc(var(--spacer) * 1.25) !important;
  }
  .mr-md-2 {
    margin-right: calc(var(--spacer) * 1.25) !important;
  }
  .my-md-2 {
    margin-top: calc(var(--spacer) * 1.25) !important;
    margin-bottom: calc(var(--spacer) * 1.25) !important;
  }
  .mx-md-2 {
    margin-left: calc(var(--spacer) * 1.25) !important;
    margin-right: calc(var(--spacer) * 1.25) !important;
  }

  .m-md-3 {
    margin: calc(var(--spacer) * 1.5) !important;
  }
  .mt-md-3 {
    margin-top: calc(var(--spacer) * 1.5) !important;
  }
  .mb-md-3 {
    margin-bottom: calc(var(--spacer) * 1.5) !important;
  }
  .ml-md-3 {
    margin-left: calc(var(--spacer) * 1.5) !important;
  }
  .mr-md-3 {
    margin-right: calc(var(--spacer) * 1.5) !important;
  }
  .my-md-3 {
    margin-top: calc(var(--spacer) * 1.5) !important;
    margin-bottom: calc(var(--spacer) * 1.5) !important;
  }
  .mx-md-3 {
    margin-left: calc(var(--spacer) * 1.5) !important;
    margin-right: calc(var(--spacer) * 1.5) !important;
  }

  .m-md-4 {
    margin: calc(var(--spacer) * 1.75) !important;
  }
  .mt-md-4 {
    margin-top: calc(var(--spacer) * 1.75) !important;
  }
  .mb-md-4 {
    margin-bottom: calc(var(--spacer) * 1.75) !important;
  }
  .ml-md-4 {
    margin-left: calc(var(--spacer) * 1.75) !important;
  }
  .mr-md-4 {
    margin-right: calc(var(--spacer) * 1.75) !important;
  }
  .my-md-4 {
    margin-top: calc(var(--spacer) * 1.75) !important;
    margin-bottom: calc(var(--spacer) * 1.75) !important;
  }
  .mx-md-4 {
    margin-left: calc(var(--spacer) * 1.75) !important;
    margin-right: calc(var(--spacer) * 1.75) !important;
  }

  .m-md-5 {
    margin: calc(var(--spacer) * 2) !important;
  }
  .mt-md-5 {
    margin-top: calc(var(--spacer) * 2) !important;
  }
  .mb-md-5 {
    margin-bottom: calc(var(--spacer) * 2) !important;
  }
  .ml-md-5 {
    margin-left: calc(var(--spacer) * 2) !important;
  }
  .mr-md-5 {
    margin-right: calc(var(--spacer) * 2) !important;
  }
  .my-md-5 {
    margin-top: calc(var(--spacer) * 2) !important;
    margin-bottom: calc(var(--spacer) * 2) !important;
  }
  .mx-md-5 {
    margin-left: calc(var(--spacer) * 2) !important;
    margin-right: calc(var(--spacer) * 2) !important;
  }
}

@media (min-width: 993px) {
  .m-lg-0 {
    margin: 0 !important;
  }
  .mt-lg-0 {
    margin-top: 0 !important;
  }
  .mb-lg-0 {
    margin-bottom: 0 !important;
  }
  .ml-lg-0 {
    margin-left: 0 !important;
  }
  .mr-lg-0 {
    margin-right: 0 !important;
  }
  .my-lg-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .mx-lg-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .m-lg-25 {
    margin: calc(var(--spacer) * 0.25) !important;
  }

  .mt-lg-25 {
    margin-top: calc(var(--spacer) * 0.25) !important;
  }
  .mb-lg-25 {
    margin-bottom: calc(var(--spacer) * 0.25) !important;
  }
  .ml-lg-25 {
    margin-left: calc(var(--spacer) * 0.25) !important;
  }
  .mr-lg-25 {
    margin-right: calc(var(--spacer) * 0.25) !important;
  }
  .my-lg-25 {
    margin-top: calc(var(--spacer) * 0.25) !important;
    margin-bottom: calc(var(--spacer) * 0.25) !important;
  }
  .mx-lg-25 {
    margin-left: calc(var(--spacer) * 0.25) !important;
    margin-right: calc(var(--spacer) * 0.25) !important;
  }

  .m-lg-50 {
    margin: calc(var(--spacer) * 0.5) !important;
  }
  .mt-lg-50 {
    margin-top: calc(var(--spacer) * 0.5) !important;
  }
  .mb-lg-50 {
    margin-bottom: calc(var(--spacer) * 0.5) !important;
  }
  .ml-lg-50 {
    margin-left: calc(var(--spacer) * 0.5) !important;
  }
  .mr-lg-50 {
    margin-right: calc(var(--spacer) * 0.5) !important;
  }
  .my-lg-50 {
    margin-top: calc(var(--spacer) * 0.5) !important;
    margin-bottom: calc(var(--spacer) * 0.5) !important;
  }
  .mx-lg-50 {
    margin-left: calc(var(--spacer) * 0.5) !important;
    margin-right: calc(var(--spacer) * 0.5) !important;
  }

  .m-lg-75 {
    margin: calc(var(--spacer) * 0.75) !important;
  }
  .mt-lg-75 {
    margin-top: calc(var(--spacer) * 0.75) !important;
  }
  .mb-lg-75 {
    margin-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .ml-lg-75 {
    margin-left: calc(var(--spacer) * 0.75) !important;
  }
  .mr-lg-75 {
    margin-right: calc(var(--spacer) * 0.75) !important;
  }
  .my-lg-75 {
    margin-top: calc(var(--spacer) * 0.75) !important;
    margin-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .mx-lg-75 {
    margin-left: calc(var(--spacer) * 0.75) !important;
    margin-right: calc(var(--spacer) * 0.75) !important;
  }

  .mt-lg-75 {
    margin-top: calc(var(--spacer) * 0.75) !important;
  }
  .mb-lg-75 {
    margin-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .ml-lg-75 {
    margin-left: calc(var(--spacer) * 0.75) !important;
  }
  .mr-lg-75 {
    margin-right: calc(var(--spacer) * 0.75) !important;
  }
  .my-lg-75 {
    margin-top: calc(var(--spacer) * 0.75) !important;
    margin-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .mx-lg-75 {
    margin-left: calc(var(--spacer) * 0.75) !important;
    margin-right: calc(var(--spacer) * 0.75) !important;
  }

  .mt-lg-1 {
    margin-top: var(--spacer) !important;
  }
  .mb-lg-1 {
    margin-bottom: var(--spacer) !important;
  }
  .ml-lg-1 {
    margin-left: var(--spacer) !important;
  }
  .mr-lg-1 {
    margin-right: var(--spacer) !important;
  }
  .my-lg-1 {
    margin-top: var(--spacer) !important;
    margin-bottom: var(--spacer) !important;
  }
  .mx-lg-1 {
    margin-left: var(--spacer) !important;
    margin-right: var(--spacer) !important;
  }

  .mt-lg-2 {
    margin-top: calc(var(--spacer) * 1.25) !important;
  }
  .mb-lg-2 {
    margin-bottom: calc(var(--spacer) * 1.25) !important;
  }
  .ml-lg-2 {
    margin-left: calc(var(--spacer) * 1.25) !important;
  }
  .mr-lg-2 {
    margin-right: calc(var(--spacer) * 1.25) !important;
  }
  .my-lg-2 {
    margin-top: calc(var(--spacer) * 1.25) !important;
    margin-bottom: calc(var(--spacer) * 1.25) !important;
  }
  .mx-lg-2 {
    margin-left: calc(var(--spacer) * 1.25) !important;
    margin-right: calc(var(--spacer) * 1.25) !important;
  }

  .m-lg-3 {
    margin: calc(var(--spacer) * 1.5) !important;
  }
  .mt-lg-3 {
    margin-top: calc(var(--spacer) * 1.5) !important;
  }
  .mb-lg-3 {
    margin-bottom: calc(var(--spacer) * 1.5) !important;
  }
  .ml-lg-3 {
    margin-left: calc(var(--spacer) * 1.5) !important;
  }
  .mr-lg-3 {
    margin-right: calc(var(--spacer) * 1.5) !important;
  }
  .my-lg-3 {
    margin-top: calc(var(--spacer) * 1.5) !important;
    margin-bottom: calc(var(--spacer) * 1.5) !important;
  }
  .mx-lg-3 {
    margin-left: calc(var(--spacer) * 1.5) !important;
    margin-right: calc(var(--spacer) * 1.5) !important;
  }

  .m-lg-4 {
    margin: calc(var(--spacer) * 1.75) !important;
  }
  .mt-lg-4 {
    margin-top: calc(var(--spacer) * 1.75) !important;
  }
  .mb-lg-4 {
    margin-bottom: calc(var(--spacer) * 1.75) !important;
  }
  .ml-lg-4 {
    margin-left: calc(var(--spacer) * 1.75) !important;
  }
  .mr-lg-4 {
    margin-right: calc(var(--spacer) * 1.75) !important;
  }
  .my-lg-4 {
    margin-top: calc(var(--spacer) * 1.75) !important;
    margin-bottom: calc(var(--spacer) * 1.75) !important;
  }
  .mx-lg-4 {
    margin-left: calc(var(--spacer) * 1.75) !important;
    margin-right: calc(var(--spacer) * 1.75) !important;
  }

  .m-lg-5 {
    margin: calc(var(--spacer) * 2) !important;
  }
  .mt-lg-5 {
    margin-top: calc(var(--spacer) * 2) !important;
  }
  .mb-lg-5 {
    margin-bottom: calc(var(--spacer) * 2) !important;
  }
  .ml-lg-5 {
    margin-left: calc(var(--spacer) * 2) !important;
  }
  .mr-lg-5 {
    margin-right: calc(var(--spacer) * 2) !important;
  }
  .my-lg-5 {
    margin-top: calc(var(--spacer) * 2) !important;
    margin-bottom: calc(var(--spacer) * 2) !important;
  }
  .mx-lg-5 {
    margin-left: calc(var(--spacer) * 2) !important;
    margin-right: calc(var(--spacer) * 2) !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }
  .mt-xl-0 {
    margin-top: 0 !important;
  }
  .mb-xl-0 {
    margin-bottom: 0 !important;
  }
  .ml-xl-0 {
    margin-left: 0 !important;
  }
  .mr-xl-0 {
    margin-right: 0 !important;
  }
  .my-xl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .mx-xl-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .m-xl-25 {
    margin: calc(var(--spacer) * 0.25) !important;
  }
  .mt-xl-25 {
    margin-top: calc(var(--spacer) * 0.25) !important;
  }
  .mb-xl-25 {
    margin-bottom: calc(var(--spacer) * 0.25) !important;
  }
  .ml-xl-25 {
    margin-left: calc(var(--spacer) * 0.25) !important;
  }
  .mr-xl-25 {
    margin-right: calc(var(--spacer) * 0.25) !important;
  }
  .my-xl-25 {
    margin-top: calc(var(--spacer) * 0.25) !important;
    margin-bottom: calc(var(--spacer) * 0.25) !important;
  }
  .mx-xl-25 {
    margin-left: calc(var(--spacer) * 0.25) !important;
    margin-right: calc(var(--spacer) * 0.25) !important;
  }

  .m-xl-50 {
    margin: calc(var(--spacer) * 0.5) !important;
  }
  .mt-xl-50 {
    margin-top: calc(var(--spacer) * 0.5) !important;
  }
  .mb-xl-50 {
    margin-bottom: calc(var(--spacer) * 0.5) !important;
  }
  .ml-xl-50 {
    margin-left: calc(var(--spacer) * 0.5) !important;
  }
  .mr-xl-50 {
    margin-right: calc(var(--spacer) * 0.5) !important;
  }
  .my-xl-50 {
    margin-top: calc(var(--spacer) * 0.5) !important;
    margin-bottom: calc(var(--spacer) * 0.5) !important;
  }
  .mx-xl-50 {
    margin-left: calc(var(--spacer) * 0.5) !important;
    margin-right: calc(var(--spacer) * 0.5) !important;
  }

  .mt-xl-1 {
    margin-top: var(--spacer) !important;
  }
  .mb-xl-1 {
    margin-bottom: var(--spacer) !important;
  }
  .ml-xl-1 {
    margin-left: var(--spacer) !important;
  }
  .mr-xl-1 {
    margin-right: var(--spacer) !important;
  }
  .my-xl-1 {
    margin-top: var(--spacer) !important;
    margin-bottom: var(--spacer) !important;
  }
  .mx-xl-1 {
    margin-left: var(--spacer) !important;
    margin-right: var(--spacer) !important;
  }

  .mt-xl-2 {
    margin-top: calc(var(--spacer) * 1.25) !important;
  }
  .mb-xl-2 {
    margin-bottom: calc(var(--spacer) * 1.25) !important;
  }
  .ml-xl-2 {
    margin-left: calc(var(--spacer) * 1.25) !important;
  }
  .mr-xl-2 {
    margin-right: calc(var(--spacer) * 1.25) !important;
  }
  .my-xl-2 {
    margin-top: calc(var(--spacer) * 1.25) !important;
    margin-bottom: calc(var(--spacer) * 1.25) !important;
  }
  .mx-xl-2 {
    margin-left: calc(var(--spacer) * 1.25) !important;
    margin-right: calc(var(--spacer) * 1.25) !important;
  }

  .m-xl-3 {
    margin: calc(var(--spacer) * 1.5) !important;
  }
  .mt-xl-3 {
    margin-top: calc(var(--spacer) * 1.5) !important;
  }
  .mb-xl-3 {
    margin-bottom: calc(var(--spacer) * 1.5) !important;
  }
  .ml-xl-3 {
    margin-left: calc(var(--spacer) * 1.5) !important;
  }
  .mr-xl-3 {
    margin-right: calc(var(--spacer) * 1.5) !important;
  }
  .my-xl-3 {
    margin-top: calc(var(--spacer) * 1.5) !important;
    margin-bottom: calc(var(--spacer) * 1.5) !important;
  }
  .mx-xl-3 {
    margin-left: calc(var(--spacer) * 1.5) !important;
    margin-right: calc(var(--spacer) * 1.5) !important;
  }

  .m-xl-4 {
    margin: calc(var(--spacer) * 1.75) !important;
  }
  .mt-xl-4 {
    margin-top: calc(var(--spacer) * 1.75) !important;
  }
  .mb-xl-4 {
    margin-bottom: calc(var(--spacer) * 1.75) !important;
  }
  .ml-xl-4 {
    margin-left: calc(var(--spacer) * 1.75) !important;
  }
  .mr-xl-4 {
    margin-right: calc(var(--spacer) * 1.75) !important;
  }
  .my-xl-4 {
    margin-top: calc(var(--spacer) * 1.75) !important;
    margin-bottom: calc(var(--spacer) * 1.75) !important;
  }
  .mx-xl-4 {
    margin-left: calc(var(--spacer) * 1.75) !important;
    margin-right: calc(var(--spacer) * 1.75) !important;
  }

  .m-xl-5 {
    margin: calc(var(--spacer) * 2) !important;
  }
  .mt-xl-5 {
    margin-top: calc(var(--spacer) * 2) !important;
  }
  .mb-xl-5 {
    margin-bottom: calc(var(--spacer) * 2) !important;
  }
  .ml-xl-5 {
    margin-left: calc(var(--spacer) * 2) !important;
  }
  .mr-xl-5 {
    margin-right: calc(var(--spacer) * 2) !important;
  }
  .my-xl-5 {
    margin-top: calc(var(--spacer) * 2) !important;
    margin-bottom: calc(var(--spacer) * 2) !important;
  }
  .mx-xl-5 {
    margin-left: calc(var(--spacer) * 2) !important;
    margin-right: calc(var(--spacer) * 2) !important;
  }
}

/* 7 Padding */
.p-0 {
  padding: 0 !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pl-0 {
  padding-left: 0 !important;
}
.pr-0 {
  padding-right: 0 !important;
}
.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.p-25 {
  padding: calc(var(--spacer) * 0.25) !important;
}
.pt-25 {
  padding-top: calc(var(--spacer) * 0.25) !important;
}
.pb-25 {
  padding-bottom: calc(var(--spacer) * 0.25) !important;
}
.pl-25 {
  padding-left: calc(var(--spacer) * 0.25) !important;
}
.pr-25 {
  padding-right: calc(var(--spacer) * 0.25) !important;
}
.py-25 {
  padding-top: calc(var(--spacer) * 0.25) !important;
  padding-bottom: calc(var(--spacer) * 0.25) !important;
}
.px-25 {
  padding-left: calc(var(--spacer) * 0.25) !important;
  padding-right: calc(var(--spacer) * 0.25) !important;
}

.p-50 {
  padding: calc(var(--spacer) * 0.5) !important;
}
.pt-50 {
  padding-top: calc(var(--spacer) * 0.5) !important;
}
.pb-50 {
  padding-bottom: calc(var(--spacer) * 0.5) !important;
}
.pl-50 {
  padding-left: calc(var(--spacer) * 0.5) !important;
}
.pr-50 {
  padding-right: calc(var(--spacer) * 0.5) !important;
}
.py-50 {
  padding-top: calc(var(--spacer) * 0.5) !important;
  padding-bottom: calc(var(--spacer) * 0.5) !important;
}
.px-50 {
  padding-left: calc(var(--spacer) * 0.5) !important;
  padding-right: calc(var(--spacer) * 0.5) !important;
}

.p-75 {
  padding: calc(var(--spacer) * 0.75) !important;
}
.pt-75 {
  padding-top: calc(var(--spacer) * 0.75) !important;
}
.pb-75 {
  padding-bottom: calc(var(--spacer) * 0.75) !important;
}
.pl-75 {
  padding-left: calc(var(--spacer) * 0.75) !important;
}
.pr-75 {
  padding-right: calc(var(--spacer) * 0.75) !important;
}
.py-75 {
  padding-top: calc(var(--spacer) * 0.75) !important;
  padding-bottom: calc(var(--spacer) * 0.75) !important;
}
.px-75 {
  padding-left: calc(var(--spacer) * 0.75) !important;
  padding-right: calc(var(--spacer) * 0.75) !important;
}

.pt-75 {
  padding-top: calc(var(--spacer) * 0.75) !important;
}
.pb-75 {
  padding-bottom: calc(var(--spacer) * 0.75) !important;
}
.pl-75 {
  padding-left: calc(var(--spacer) * 0.75) !important;
}
.pr-75 {
  padding-right: calc(var(--spacer) * 0.75) !important;
}
.py-75 {
  padding-top: calc(var(--spacer) * 0.75) !important;
  padding-bottom: calc(var(--spacer) * 0.75) !important;
}
.px-75 {
  padding-left: calc(var(--spacer) * 0.75) !important;
  padding-right: calc(var(--spacer) * 0.75) !important;
}

.p-1 {
  padding: var(--spacer) !important;
}
.pt-1 {
  padding-top: var(--spacer) !important;
}
.pb-1 {
  padding-bottom: var(--spacer) !important;
}
.pl-1 {
  padding-left: var(--spacer) !important;
}
.pr-1 {
  padding-right: var(--spacer) !important;
}
.py-1 {
  padding-top: var(--spacer) !important;
  padding-bottom: var(--spacer) !important;
}
.px-1 {
  padding-left: var(--spacer) !important;
  padding-right: var(--spacer) !important;
}

.p-2 {
  padding: calc(var(--spacer) * 1.25) !important;
}
.pt-2 {
  padding-top: calc(var(--spacer) * 1.25) !important;
}
.pb-2 {
  padding-bottom: calc(var(--spacer) * 1.25) !important;
}
.pl-2 {
  padding-left: calc(var(--spacer) * 1.25) !important;
}
.pr-2 {
  padding-right: calc(var(--spacer) * 1.25) !important;
}
.py-2 {
  padding-top: calc(var(--spacer) * 1.25) !important;
  padding-bottom: calc(var(--spacer) * 1.25) !important;
}
.px-2 {
  padding-left: calc(var(--spacer) * 1.25) !important;
  padding-right: calc(var(--spacer) * 1.25) !important;
}

.p-3 {
  padding: calc(var(--spacer) * 1.5) !important;
}
.pt-3 {
  padding-top: calc(var(--spacer) * 1.5) !important;
}
.pb-3 {
  padding-bottom: calc(var(--spacer) * 1.5) !important;
}
.pl-3 {
  padding-left: calc(var(--spacer) * 1.5) !important;
}
.pr-3 {
  padding-right: calc(var(--spacer) * 1.5) !important;
}
.py-3 {
  padding-top: calc(var(--spacer) * 1.5) !important;
  padding-bottom: calc(var(--spacer) * 1.5) !important;
}
.px-3 {
  padding-left: calc(var(--spacer) * 1.5) !important;
  padding-right: calc(var(--spacer) * 1.5) !important;
}

.p-4 {
  padding: calc(var(--spacer) * 1.75) !important;
}
.pt-4 {
  padding-top: calc(var(--spacer) * 1.75) !important;
}
.pb-4 {
  padding-bottom: calc(var(--spacer) * 1.75) !important;
}
.pl-4 {
  padding-left: calc(var(--spacer) * 1.75) !important;
}
.pr-4 {
  padding-right: calc(var(--spacer) * 1.75) !important;
}
.py-4 {
  padding-top: calc(var(--spacer) * 1.75) !important;
  padding-bottom: calc(var(--spacer) * 1.75) !important;
}
.px-4 {
  padding-left: calc(var(--spacer) * 1.75) !important;
  padding-right: calc(var(--spacer) * 1.75) !important;
}

.p-5 {
  padding: calc(var(--spacer) * 2) !important;
}
.pt-5 {
  padding-top: calc(var(--spacer) * 2) !important;
}
.pb-5 {
  padding-bottom: calc(var(--spacer) * 2) !important;
}
.pl-5 {
  padding-left: calc(var(--spacer) * 2) !important;
}
.pr-5 {
  padding-right: calc(var(--spacer) * 2) !important;
}
.py-5 {
  padding-top: calc(var(--spacer) * 2) !important;
  padding-bottom: calc(var(--spacer) * 2) !important;
}
.px-5 {
  padding-left: calc(var(--spacer) * 2) !important;
  padding-right: calc(var(--spacer) * 2) !important;
}

@media (min-width: 768px) and (max-width: 992px) {
  .p-md-0 {
    padding: 0 !important;
  }
  .pt-md-0 {
    padding-top: 0 !important;
  }
  .pb-md-0 {
    padding-bottom: 0 !important;
  }
  .pl-md-0 {
    padding-left: 0 !important;
  }
  .pr-md-0 {
    padding-right: 0 !important;
  }
  .py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .px-md-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .p-md-25 {
    padding: calc(var(--spacer) * 0.25) !important;
  }
  .pt-md-25 {
    padding-top: calc(var(--spacer) * 0.25) !important;
  }
  .pb-md-25 {
    padding-bottom: calc(var(--spacer) * 0.25) !important;
  }
  .pl-md-25 {
    padding-left: calc(var(--spacer) * 0.25) !important;
  }
  .pr-md-25 {
    padding-right: calc(var(--spacer) * 0.25) !important;
  }
  .py-md-25 {
    padding-top: calc(var(--spacer) * 0.25) !important;
    padding-bottom: calc(var(--spacer) * 0.25) !important;
  }
  .px-md-25 {
    padding-left: calc(var(--spacer) * 0.25) !important;
    padding-right: calc(var(--spacer) * 0.25) !important;
  }
  
  .p-md-50 {
    padding: calc(var(--spacer) * 0.5) !important;
  }
  .pt-md-50 {
    padding-top: calc(var(--spacer) * 0.5) !important;
  }
  .pb-md-50 {
    padding-bottom: calc(var(--spacer) * 0.5) !important;
  }
  .pl-md-50 {
    padding-left: calc(var(--spacer) * 0.5) !important;
  }
  .pr-md-50 {
    padding-right: calc(var(--spacer) * 0.5) !important;
  }
  .py-md-50 {
    padding-top: calc(var(--spacer) * 0.5) !important;
    padding-bottom: calc(var(--spacer) * 0.5) !important;
  }
  .px-md-50 {
    padding-left: calc(var(--spacer) * 0.5) !important;
    padding-right: calc(var(--spacer) * 0.5) !important;
  }
  
  .p-md-75 {
    padding: calc(var(--spacer) * 0.75) !important;
  }
  .pt-md-75 {
    padding-top: calc(var(--spacer) * 0.75) !important;
  }
  .pb-md-75 {
    padding-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .pl-md-75 {
    padding-left: calc(var(--spacer) * 0.75) !important;
  }
  .pr-md-75 {
    padding-right: calc(var(--spacer) * 0.75) !important;
  }
  .py-md-75 {
    padding-top: calc(var(--spacer) * 0.75) !important;
    padding-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .px-md-75 {
    padding-left: calc(var(--spacer) * 0.75) !important;
    padding-right: calc(var(--spacer) * 0.75) !important;
  }
  
  .pt-md-75 {
    padding-top: calc(var(--spacer) * 0.75) !important;
  }
  .pb-md-75 {
    padding-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .pl-md-75 {
    padding-left: calc(var(--spacer) * 0.75) !important;
  }
  .pr-md-75 {
    padding-right: calc(var(--spacer) * 0.75) !important;
  }
  .py-md-75 {
    padding-top: calc(var(--spacer) * 0.75) !important;
    padding-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .px-md-75 {
    padding-left: calc(var(--spacer) * 0.75) !important;
    padding-right: calc(var(--spacer) * 0.75) !important;
  }
  
  .p-md-1 {
    padding: var(--spacer) !important;
  }
  .pt-md-1 {
    padding-top: var(--spacer) !important;
  }
  .pb-md-1 {
    padding-bottom: var(--spacer) !important;
  }
  .pl-md-1 {
    padding-left: var(--spacer) !important;
  }
  .pr-md-1 {
    padding-right: var(--spacer) !important;
  }
  .py-md-1 {
    padding-top: var(--spacer) !important;
    padding-bottom: var(--spacer) !important;
  }
  .px-md-1 {
    padding-left: var(--spacer) !important;
    padding-right: var(--spacer) !important;
  }
  
  .p-md-2 {
    padding: calc(var(--spacer) * 1.25) !important;
  }
  .pt-md-2 {
    padding-top: calc(var(--spacer) * 1.25) !important;
  }
  .pb-md-2 {
    padding-bottom: calc(var(--spacer) * 1.25) !important;
  }
  .pl-md-2 {
    padding-left: calc(var(--spacer) * 1.25) !important;
  }
  .pr-md-2 {
    padding-right: calc(var(--spacer) * 1.25) !important;
  }
  .py-md-2 {
    padding-top: calc(var(--spacer) * 1.25) !important;
    padding-bottom: calc(var(--spacer) * 1.25) !important;
  }
  .px-md-2 {
    padding-left: calc(var(--spacer) * 1.25) !important;
    padding-right: calc(var(--spacer) * 1.25) !important;
  }
  
  .p-md-3 {
    padding: calc(var(--spacer) * 1.5) !important;
  }
  .pt-md-3 {
    padding-top: calc(var(--spacer) * 1.5) !important;
  }
  .pb-md-3 {
    padding-bottom: calc(var(--spacer) * 1.5) !important;
  }
  .pl-md-3 {
    padding-left: calc(var(--spacer) * 1.5) !important;
  }
  .pr-md-3 {
    padding-right: calc(var(--spacer) * 1.5) !important;
  }
  .py-md-3 {
    padding-top: calc(var(--spacer) * 1.5) !important;
    padding-bottom: calc(var(--spacer) * 1.5) !important;
  }
  .px-md-3 {
    padding-left: calc(var(--spacer) * 1.5) !important;
    padding-right: calc(var(--spacer) * 1.5) !important;
  }
  
  .p-md-4 {
    padding: calc(var(--spacer) * 1.75) !important;
  }
  .pt-md-4 {
    padding-top: calc(var(--spacer) * 1.75) !important;
  }
  .pb-md-4 {
    padding-bottom: calc(var(--spacer) * 1.75) !important;
  }
  .pl-md-4 {
    padding-left: calc(var(--spacer) * 1.75) !important;
  }
  .pr-md-4 {
    padding-right: calc(var(--spacer) * 1.75) !important;
  }
  .py-md-4 {
    padding-top: calc(var(--spacer) * 1.75) !important;
    padding-bottom: calc(var(--spacer) * 1.75) !important;
  }
  .px-md-4 {
    padding-left: calc(var(--spacer) * 1.75) !important;
    padding-right: calc(var(--spacer) * 1.75) !important;
  }
  
  .p-md-5 {
    padding: calc(var(--spacer) * 2) !important;
  }
  .pt-md-5 {
    padding-top: calc(var(--spacer) * 2) !important;
  }
  .pb-md-5 {
    padding-bottom: calc(var(--spacer) * 2) !important;
  }
  .pl-md-5 {
    padding-left: calc(var(--spacer) * 2) !important;
  }
  .pr-md-5 {
    padding-right: calc(var(--spacer) * 2) !important;
  }
  .py-md-5 {
    padding-top: calc(var(--spacer) * 2) !important;
    padding-bottom: calc(var(--spacer) * 2) !important;
  }
  .px-md-5 {
    padding-left: calc(var(--spacer) * 2) !important;
    padding-right: calc(var(--spacer) * 2) !important;
  }
}

@media (min-width: 993px){
  .p-lg-0 {
    padding: 0 !important;
  }
  .pt-lg-0 {
    padding-top: 0 !important;
  }
  .pb-lg-0 {
    padding-bottom: 0 !important;
  }
  .pl-lg-0 {
    padding-left: 0 !important;
  }
  .pr-lg-0 {
    padding-right: 0 !important;
  }
  .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .px-lg-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .p-lg-25 {
    padding: calc(var(--spacer) * 0.25) !important;
  }
  .pt-lg-25 {
    padding-top: calc(var(--spacer) * 0.25) !important;
  }
  .pb-lg-25 {
    padding-bottom: calc(var(--spacer) * 0.25) !important;
  }
  .pl-lg-25 {
    padding-left: calc(var(--spacer) * 0.25) !important;
  }
  .pr-lg-25 {
    padding-right: calc(var(--spacer) * 0.25) !important;
  }
  .py-lg-25 {
    padding-top: calc(var(--spacer) * 0.25) !important;
    padding-bottom: calc(var(--spacer) * 0.25) !important;
  }
  .px-lg-25 {
    padding-left: calc(var(--spacer) * 0.25) !important;
    padding-right: calc(var(--spacer) * 0.25) !important;
  }
  
  .p-lg-50 {
    padding: calc(var(--spacer) * 0.5) !important;
  }
  .pt-lg-50 {
    padding-top: calc(var(--spacer) * 0.5) !important;
  }
  .pb-lg-50 {
    padding-bottom: calc(var(--spacer) * 0.5) !important;
  }
  .pl-lg-50 {
    padding-left: calc(var(--spacer) * 0.5) !important;
  }
  .pr-lg-50 {
    padding-right: calc(var(--spacer) * 0.5) !important;
  }
  .py-lg-50 {
    padding-top: calc(var(--spacer) * 0.5) !important;
    padding-bottom: calc(var(--spacer) * 0.5) !important;
  }
  .px-lg-50 {
    padding-left: calc(var(--spacer) * 0.5) !important;
    padding-right: calc(var(--spacer) * 0.5) !important;
  }
  
  .p-lg-75 {
    padding: calc(var(--spacer) * 0.75) !important;
  }
  .pt-lg-75 {
    padding-top: calc(var(--spacer) * 0.75) !important;
  }
  .pb-lg-75 {
    padding-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .pl-lg-75 {
    padding-left: calc(var(--spacer) * 0.75) !important;
  }
  .pr-lg-75 {
    padding-right: calc(var(--spacer) * 0.75) !important;
  }
  .py-lg-75 {
    padding-top: calc(var(--spacer) * 0.75) !important;
    padding-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .px-lg-75 {
    padding-left: calc(var(--spacer) * 0.75) !important;
    padding-right: calc(var(--spacer) * 0.75) !important;
  }
  
  .pt-lg-75 {
    padding-top: calc(var(--spacer) * 0.75) !important;
  }
  .pb-lg-75 {
    padding-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .pl-lg-75 {
    padding-left: calc(var(--spacer) * 0.75) !important;
  }
  .pr-lg-75 {
    padding-right: calc(var(--spacer) * 0.75) !important;
  }
  .py-lg-75 {
    padding-top: calc(var(--spacer) * 0.75) !important;
    padding-bottom: calc(var(--spacer) * 0.75) !important;
  }
  .px-lg-75 {
    padding-left: calc(var(--spacer) * 0.75) !important;
    padding-right: calc(var(--spacer) * 0.75) !important;
  }
  
  .p-lg-1 {
    padding: var(--spacer) !important;
  }
  .pt-lg-1 {
    padding-top: var(--spacer) !important;
  }
  .pb-lg-1 {
    padding-bottom: var(--spacer) !important;
  }
  .pl-lg-1 {
    padding-left: var(--spacer) !important;
  }
  .pr-lg-1 {
    padding-right: var(--spacer) !important;
  }
  .py-lg-1 {
    padding-top: var(--spacer) !important;
    padding-bottom: var(--spacer) !important;
  }
  .px-lg-1 {
    padding-left: var(--spacer) !important;
    padding-right: var(--spacer) !important;
  }
  
  .p-lg-2 {
    padding: calc(var(--spacer) * 1.25) !important;
  }
  .pt-lg-2 {
    padding-top: calc(var(--spacer) * 1.25) !important;
  }
  .pb-lg-2 {
    padding-bottom: calc(var(--spacer) * 1.25) !important;
  }
  .pl-lg-2 {
    padding-left: calc(var(--spacer) * 1.25) !important;
  }
  .pr-lg-2 {
    padding-right: calc(var(--spacer) * 1.25) !important;
  }
  .py-lg-2 {
    padding-top: calc(var(--spacer) * 1.25) !important;
    padding-bottom: calc(var(--spacer) * 1.25) !important;
  }
  .px-lg-2 {
    padding-left: calc(var(--spacer) * 1.25) !important;
    padding-right: calc(var(--spacer) * 1.25) !important;
  }
  
  .p-lg-3 {
    padding: calc(var(--spacer) * 1.5) !important;
  }
  .pt-lg-3 {
    padding-top: calc(var(--spacer) * 1.5) !important;
  }
  .pb-lg-3 {
    padding-bottom: calc(var(--spacer) * 1.5) !important;
  }
  .pl-lg-3 {
    padding-left: calc(var(--spacer) * 1.5) !important;
  }
  .pr-lg-3 {
    padding-right: calc(var(--spacer) * 1.5) !important;
  }
  .py-lg-3 {
    padding-top: calc(var(--spacer) * 1.5) !important;
    padding-bottom: calc(var(--spacer) * 1.5) !important;
  }
  .px-lg-3 {
    padding-left: calc(var(--spacer) * 1.5) !important;
    padding-right: calc(var(--spacer) * 1.5) !important;
  }
  
  .p-lg-4 {
    padding: calc(var(--spacer) * 1.75) !important;
  }
  .pt-lg-4 {
    padding-top: calc(var(--spacer) * 1.75) !important;
  }
  .pb-lg-4 {
    padding-bottom: calc(var(--spacer) * 1.75) !important;
  }
  .pl-lg-4 {
    padding-left: calc(var(--spacer) * 1.75) !important;
  }
  .pr-lg-4 {
    padding-right: calc(var(--spacer) * 1.75) !important;
  }
  .py-lg-4 {
    padding-top: calc(var(--spacer) * 1.75) !important;
    padding-bottom: calc(var(--spacer) * 1.75) !important;
  }
  .px-lg-4 {
    padding-left: calc(var(--spacer) * 1.75) !important;
    padding-right: calc(var(--spacer) * 1.75) !important;
  }
  
  .p-lg-5 {
    padding: calc(var(--spacer) * 2) !important;
  }
  .pt-lg-5 {
    padding-top: calc(var(--spacer) * 2) !important;
  }
  .pb-lg-5 {
    padding-bottom: calc(var(--spacer) * 2) !important;
  }
  .pl-lg-5 {
    padding-left: calc(var(--spacer) * 2) !important;
  }
  .pr-lg-5 {
    padding-right: calc(var(--spacer) * 2) !important;
  }
  .py-lg-5 {
    padding-top: calc(var(--spacer) * 2) !important;
    padding-bottom: calc(var(--spacer) * 2) !important;
  }
  .px-lg-5 {
    padding-left: calc(var(--spacer) * 2) !important;
    padding-right: calc(var(--spacer) * 2) !important;
  }
}

/* 8. Flex Gap */

/* 8.1 Column Gap */
.col-gap-0 {
  column-gap: 0;
}
.col-gap-1 {
  column-gap: calc(var(--spacer) * 0.25);
}
.col-gap-2 {
  column-gap: calc(var(--spacer) * 0.5);
}
.col-gap-3 {
  column-gap: calc(var(--spacer) * 0.75);
}
.col-gap-4 {
  column-gap: var(--spacer);
}
.col-gap-5 {
  column-gap: calc(var(--spacer) * 1.25);
}
.col-gap-6 {
  column-gap: calc(var(--spacer) * 1.5);
}
.col-gap-7 {
  column-gap: calc(var(--spacer) * 1.75);
}
.col-gap-8 {
  column-gap: calc(var(--spacer) * 2);
}


/* 8.2 Row Gap */
.row-gap-0 {
  row-gap: 0;
}
.row-gap-1 {
  row-gap: calc(var(--spacer) * 0.25);
}
.row-gap-2 {
  row-gap: calc(var(--spacer) * 0.5);
}
.row-gap-3 {
  row-gap: calc(var(--spacer) * 0.75);
}
.row-gap-4 {
  row-gap: var(--spacer);
}
.row-gap-5 {
  row-gap: calc(var(--spacer) * 1.25);
}
.row-gap-6 {
  row-gap: calc(var(--spacer) * 1.5);
}
.row-gap-7 {
  row-gap: calc(var(--spacer) * 1.75);
}
.row-gap-8 {
  row-gap: calc(var(--spacer) * 2);
}

/* 9 Table */
.table {
  color: var(--gray-100) !important;
}

.table thead th {
  background: var(--primary-light);
  color: var(--gray-80);
}
/* .table thead {
  background: var(--primary-light);
}

.table th,
.table td {
  padding: calc(var(--spacer) * 0.75) var(--spacer) !important;
} */

/* 10 Avatar */
.avatar {
  /* white-space: nowrap; */
  background-color: var(--gray-40);
  /* border-radius: 50%;
  position: relative;
  cursor: pointer;
  color: var(--gray-10);
  display: inline-flex;
  font-size: 0.8rem;
  text-align: center;
  vertical-align: middle; */
}

/*
.avatar .avatar-content {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar .avatar-content .avatar-icon {
  font-size: 1.2rem;
}

.avatar [class*="avatar-status-"] {
  border-radius: 50%;
  width: 11px;
  height: 11px;
  position: absolute;
  right: 0;
  bottom: 0;
  border: 1px solid var(--gray-100);
}

.avatar [class*="avatar-status-"].avatar-status-lg {
  width: 17px;
  height: 17px;
  border-width: 2px;
}

.avatar .avatar-status-online {
  background-color: var(--green);
}

.avatar .avatar-status-busy {
  background-color: var(--red);
}

.avatar .avatar-status-away {
  background-color: var(--yellow);
}

.avatar .avatar-status-offline {
  background-color: var(--gray-80);
}

.avatar img {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  object-fit: cover;
}

.avatar.avatar-xl {
  font-size: 1.5rem;
}

.avatar.avatar-xl img {
  width: 70px;
  height: 70px;
}

.avatar.avatar-xl .avatar-content {
  height: 70px;
  width: 70px;
}

.avatar.avatar-xl .avatar-content .avatar-icon {
  font-size: 3rem;
}

.avatar.avatar-sm img {
  width: 24px;
  height: 24px;
}

.avatar.avatar-lg {
  font-size: 1.2rem;
}

.avatar.avatar-lg img {
  width: 50px;
  height: 50px;
}

.avatar.avatar-lg .avatar-content {
  width: 50px;
  height: 50px;
}

.avatar.avatar-lg .avatar-content .avatar-icon {
  font-size: 2rem;
}

.avatar.avatar-sm .avatar-content {
  width: 24px;
  height: 24px;
}

.avatar.avatar-md .avatar-content {
  width: 40px;
  height: 40px;
}

.avatar.avatar-sm .avatar-content .avatar-icon {
  font-size: 1rem;
}

.avatar.avatar-sm img {
  width: 24px;
  height: 24px;
} */

/* 11. Badge */
.badge {
  background: var(--gray-40);
  text-transform: none;
  font-size: calc(var(--spacer) * .75);
  font-weight: 400;
  color: var(--black);
}

/* .badge.badge-up { */
  /* badge-up - To align badge over any element */
  /* position: absolute;
  top: -0.8rem;
  right: -0.5rem;
} */

/* .badge.badge-round {
  padding: 0.28rem 0.4rem;
}

.badge.badge-icon {
  padding: 0.25rem 0.4rem;
} */

/* 11.1 Badge Circle */
/* .badge-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-10);
  background-color: var(--primary);
  border-radius: 50%;
  height: 36px;
  width: 36px;
}

.badge-circle.badge-circle-sm {
  height: 24px;
  width: 24px;
}

.badge-circle.badge-circle-lg {
  height: 48px;
  width: 48px;
} */

/* 11.2 Badge Color */
.badge-primary {
  background: var(--primary);
  color: var(--gray-10);
}

.badge-light-primary,
.badge-circle-light-primary  {
  background: var(--primary-light);
  color: var(--primary);
}

.badge-success {
  background: var(--green);
  color: var(--gray-10);
}

.badge-light-success,
.badge-circle-light-success  {
  background: var(--green-light);
  color: var(--green);
}

.badge-danger {
  background: var(--red);
  color: var(--gray-10);
}

.badge-light-danger,
.badge-circle-light-danger  {
  background: var(--red-light);
  color: var(--red);
}

.badge-warning {
  background: var(--yellow);
  color: var(--gray-100);
}

.badge-light-warning,
.badge-circle-light-warning  {
  background: var(--yellow-light);
  color: var(--gray-100);
}

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

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

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

.badge.bg-white.badge-glow, .badge.border-white.badge-glow, .badge.badge-white.badge-glow {
  box-shadow: 0px 0px 10px var(--white);
}

.badge-circle-white {
  background-color: var(--white);
}

.badge-circle-light-white {
  color: var(--white);
}

.remote-badge-off {
  background: var(--red-light);
  color: var(--black);
}

.remote-badge-on {
  background: var(--green);
}

/* 12. Tooltip */
.tooltipa .tooltiptexta {
  background: var(--primary-light);
}

.tooltipa .tooltiptexta.bg-dark {
  background: var(--gray-90);
}

.tooltipa .tooltiptexta.tooltip-right {
  margin-top: 0;
  margin-left: calc(var(--spacer) * .5);
}

.tooltipa.tooltip-sm .tooltiptexta {
  min-width: initial;
  max-width: initial;
  width: 100px;
  margin-left: -36px;
}

.show-hover {
  display: none;
  background-color: var(--gray-100);
  color: var(--gray-10);
  padding: calc(var(--spacer) * .25) calc(var(--spacer) * .5);
  position: absolute;
  /* margin-left: -11px; */
  margin-top: calc(var(--spacer) * .25);
  border-radius: 4px;
  font-size: var(--fontSizes-md);
  text-wrap: nowrap;
  z-index: 3;
}

.show-hover-right {
  right: 0;
}

.ahover:hover + .show-hover {
  display: block;
}

/* 12.1 Tooltip Size */
.tooltiptexta.tooltip-sm {
  min-width: initial;
  max-width: 80px;
}

.tooltiptexta.tooltip-md {
  width: 160px;
  min-width: initial;
  max-width: initial;
}
/* .show-hover-sm {
  max-width: 150px;
}

.show-hover-md {
  max-width: 200px;
}

.show-hover-lg {
  max-width: 300px;
  width: 300px;
} */

/* 13 Modal */
/* .modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  transition: opacity 0.3s ease;
}

.modal-mask.show {
  display: table;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-dialog {
  overflow-y: initial !important;
}

.modal-header {
  align-items: center;
}
.modal-body {
  max-height: 70vh;
  overflow-y: auto;
  font-size: 16px;
}

.modal-container {
  background-color: var(--gray-10);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  font-family: Helvetica, Arial, sans-serif;
  margin: 0 auto;
  padding: 20px 30px;
  transition: all 0.3s ease;
  width: 900px;
} */

/* 14. Tab */
.nav.nav-tabs {
  border: none;
}
.nav.nav-tabs .nav-link {
  color: var(--gray-60);
}

.nav.nav-tabs .nav-link.active,
.nav.nav-tabs .nav-link:hover,
.details .nav.nav-tabs .nav-item .nav-link.active,
.details .nav.nav-tabs .nav-item .nav-link:hover {
  color: var(--primary) !important;
  font-weight: 600;
  border-bottom: solid 3px var(--primary) !important;
  padding-bottom: var(--spacer) !important;
}

.nav.nav-tabs~.tab-content {
  color: var(--gray-80);
}

/* 15. Kanban */
.kanban-container .kanban-board {
  background: var(--gray-30);
}

.kanban-container .kanban-board .kanban-board-header {
  color: var(--gray-90);
  font-family: "Inter", sans-serif;
}

/* 16 Dropdown */
.dropdown-item {
  color: var(--gray-100) !important;
  text-transform: none !important;
}


/* 17 Slideout */
.slideout-form-action {
  display: flex;
  background: var(--gray-10);
  border-top: var(--borders-1px) var(--border-gray);
  z-index: 8;
}

.slideout-form-action.right-action {
  justify-content: end;
  column-gap: 16px;
}

.slideout-form-action.left-right-action {
  align-items: center;
  justify-content: space-between;
}

.slideout-form-action.left-right-action .container {
  display: flex;
  align-items: stretch;
  justify-content: end;
  column-gap: var(--space-2);
  padding: 0;
}

.slideout-form-action .btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  padding: 5px 13px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.slideout-form-action .btn.btn-reset {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: #EF4444;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.slideout-form-action .btn-reset:hover,
.slideout-form-action a.btn-reset:hover {
  color: #DC2626 !important;
}

.slideout-form-action .btn-cancel {
  align-items: center;
  justify-content: center;
}
.slideout-form-action .btn-cancel:hover {
  background: #F1F5F9;
}

.slideout-form-action .btn-submit {
  justify-content: center;
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  min-width: 90px;
}

.slideout-form-action:has(.btn-group) .btn-submit {
  min-width:initial;
}

.slideout-form-action .btn-submit:hover {
  background: #1558A0;
  border-color: #1558A0;
}

.slideout-form-action .btn i {
  position: static;
}

/* 18 Multiselect */

.multiselect {
  color: var(--gray-100) !important;
}

.multiselect__placeholder {
  color: var(--gray-70) !important;
}

/* .multiselect__option--highlight {
  background: var(--green) !important;
} */

.multiselect__option--highlight,
.multiselect__option--highlight::after {
  background-color: var(--green) !important;
}

.multiselect__option--selected.multiselect__option {
  background: var(--gray-30)!important;
}

.multiselect__option--selected.multiselect__option--highlight,
.multiselect__option--selected.multiselect__option--highlight::after {
  background-color: var(--red) !important;
}

.multiselect-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 4px 8px;
  position: absolute;
  right: 1px;
  text-align: center;
  top: 1px;
  transition: transform .2s ease;
  width: 40px;
}

.multiselect--active .multiselect-icon {
  transform: rotate(180deg);
}


/* 19 Details Info */
#details_info .td-field {
  color: var(--gray-90) !important;
}

/* 20. Vue Datepicker */
.mx-datepicker-main {
  font-family: "Inter", sans-serif !important;
  color: var(--gray-90) !important;
}

.mx-btn {
  color: var(--gray-80) !important;
}

.mx-calendar-content .cell.active {
  background: var(--primary) !important;
  color: var(--gray-10) !important;
}

.mx-calendar-content .cell:hover {
  background: var(--gray-20) !important;
  color: var(--gray-70) !important;
}

.mx-table-date .today {
  color: var(--gray-10) !important;
  background: var(--primary) !important;
}

.mx-table-date .cell.not-current-month {
  color: var(--gray-50) !important;
}

.mx-calendar-content .cell.in-range, .mx-calendar-content .cell.hover-in-range {
  background: var(--primary-light) !important;
  color: var(--gray-90);
}

.mx-input:disabled, .mx-input.disabled {
  background-color: var(--gray-30) !important;
  border-color: var(--gray-40) !important;
  color: var(--gray-70) !important;
}

/* 21. Timeline Widget */
.widget-timeline li.timeline-items:before {
  background: var(--primary);
  border: solid 3px var(--gray-10);
}

.timeline-module {
  background: var(--primary-light);
  color: var(--primary);
}


/* 22. Vue Toastification */
.v-toast__item.v-toast__item--success  {
  background-color: var(--green);
}

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

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

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

/* 23. Pagination */
.pagination .page-item .page-link {
  font-weight: 400;
}
.pagination .page-item.disabled {
  background: var(--gray-30);
}

.pagination .page-item.active .page-link, .pagination .page-item.active .page-link:hover {
  background: var(--primary) !important;
  color: var(--gray-10);
  font-weight: 400;
  border-radius: 0;
}

.btn-alert-yes {
  background-color: #2284C6;
  color: #FFF;
  font-size: 16px;
  cursor: pointer;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0rem 3rem;
}

.btn-alert-yes:hover {
  background-color: #3798DA;
  color: #FFF;
}

.btn-alert-no {
  border: 1px solid #2284C6;
  color: #2284C6;
  font-size: 16px;
  cursor: pointer;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0rem 3rem;
}

.btn-alert-no:hover {
  background-color: #3798DA;
  color: #FFF;
} 

.message-content-container.notes {
  background: #FFEB93;
}

/*25 Status */

/* 25.1 Active Filter */
.active-filter {
  position: absolute;
  top: -4px;
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--success);
}

/* 26 AG Grid */
.ag-theme-alpine {
  font-family: "Inter", sans-serif !important;
}


.Vue-Toastification__toast--warning {
  color: var(--gray-100) !important;
}

/* untuk summernote */
.note-editor.note-frame.panel.panel-default {
  border: 0px dashed #007bff !important;
}

.note-editor.note-airframe .note-statusbar .note-resizebar, .note-editor.note-frame .note-statusbar .note-resizebar {
  height: 1px !important;         
  background: transparent !important;    
  border: none !important;             
  cursor: ns-resize !important;
  padding-top: 0 !important;
  }

  /* Slideout */
  .slideout-content {
    font-size: var(--fontSizes-md);
  }

  .slideout-content label {
    text-transform: none;
    font-weight: var(--fontWeights-regular);
  }

  .slideout-content button.btn-cancel,
  .slideout-content button.btn-search {
    min-width: 90px;
  }

  .slideout-content .btn-cancel {
    border: var(--borders-1px) var(--border-gray);
  }

  .slideout-content .btn-cancel:hover {
    background-color: var(--colors-gray-50);
    border: var(--borders-1px) var(--border-gray);
  }

  .slideout-content .multiselect__placeholder,
  .slideout-content .multiselect__option,
  .slideout-content .multiselect__input,
  .slideout-content .multiselect__single {
    font-size: var(--fontSizes-md);
  }

  /* 
  27. Banner Filter
  */

  .banner-filter {
    background-color: var(--green-light);
    padding: var(--space-3);
  }

  .banner-filter .badge {
    font-size: var(--fontSizes-md);
    padding: var(--space-2) var(--space-4);
  }

/*
28. Session Login
*/

/* Popup Session Login */
.session-avatar {
  width: 120px;
  height: 120px;
}

.login-alert-heading {
  font-size: var(--fontSizes-xl);
  font-weight: var(--fontWeights-semibold);
}

.btn-confirm-session {
  padding: var(--space-3) var(--space-2);
}

.session-login-action {
  padding: var(--space-0) var(--space-6);
}

.password-form-session {
  margin: var(--space-0) 1.6em var(--space-0) 1.6em;
}

/* ====== AG GRID FILTER FORM (STANDARD) ====== */
/* wrapper popup */
.ag-filter-form {
  width: 380px;
  min-width: 380px;
  max-width: 380px;          /* keep padding consistent */
  box-sizing: border-box;
}

/* ensure form is full width */
.ag-filter-form form {
  width: 100%;
}

/* input & select */
.ag-filter-form .form-control,
.ag-filter-form .custom-select,
.ag-filter-form .mx-input {
  width: 100%;
  box-sizing: border-box;
}


/* date picker input */
.ag-filter-form .mx-datepicker {
  width: 100%;
}

.ag-filter-form .mx-input {
  height: 40px;
  font-size: 14px;
}

/* range (2 column) */
.ag-filter-form .row {
  margin-left: -6px;
  margin-right: -6px;
}

.ag-filter-form .col-md-6 {
  padding-left: 6px;
  padding-right: 6px;
}

/* FORCE AG GRID POPUP only for this component's filter form */
.ag-theme-alpine .ag-popup .ag-filter .ag-filter-form {
  min-width: 380px;
}

/* Tambahkan ini untuk reverse button order */
.swal2-actions {
  width: 100%;
  display: flex;
  flex-direction: row-reverse; /* Button confirm di kanan */
  gap: var(--space-4);
  padding: var(--space-0) var(--space-4); /* Padding kanan kiri 16px */
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.swal-primary .primary-icon-box {
  border: none;
  background: #e8f2fb;
  border-radius: var(--radii-full);
  width: 80px;
  height: 80px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 2rem;
}

/* Icon box */
.red-icon-box {
  border: none;
  background: var(--red-light);
  border-radius: var(--radii-full);
  width: 80px;
  height: 80px;
}

.red-icon-box .bxs-info-circle {
  color: var(--red);
  font-size: var(--fontSizes-3xl);
}

.blue-icon-box {
  border: none;
  background: var(--primary-light);
  border-radius: var(--radii-full);
  width: 80px;
  height: 80px;
}

.blue-icon-box .bxs-info-circle {
  color: var(--primary);
  font-size: 30px;
}

/* Button - sama lebar dengan flex: 1 */
.swal-btn-confirm,
.swal-btn-cancel {
  flex: 1 !important;
  padding: 10px 20px !important;
  font-weight: var(--fontWeights-semibold) !important;
  font-size: var(--fontSizes-md) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border-radius: 8px !important;
  margin: var(--space-0) !important;
}

/* Button Confirm - Merah (akan di kanan karena row-reverse) */
.swal-btn-confirm {
  background-color: var(--red) !important;
  color: var(--white) !important;
  border: none !important;
}

.swal-btn-confirm.primary {
  background-color: var(--primary) !important;
}

.swal-btn-confirm:hover {
  background-color: #e62e2e !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(255, 51, 51, 0.3) !important;
}

.swal-btn-confirm.primary:hover {
  background-color: var(--primary-hover) !important;
  box-shadow: none !important;
}

.swal-primary .swal-btn-confirm {
  background-color: var(--primary) !important;
  color: var(--white) !important;
}

.swal-primary .swal-btn-confirm:hover {
  background: var(--primary-hover);
}

/* Button Cancel - Abu-abu outline (akan di kiri) */
.swal-btn-cancel {
  background-color: var(--white) !important;
  color: var(--gray-80) !important;
  border: var(--borders-1px) var(--border-gray) !important;
}

.swal-btn-cancel:hover {
  background-color: #f8f9fa !important;
  border-color: #bbb !important;
}

/* Icon box - Primary (Merge) */
.blue-icon-box {
  border: none;
  background: #e8f2fb;
  border-radius: var(--radii-full);
  width: 80px;
  height: 80px;
}

.blue-icon-box .bx-copy,
.blue-icon-box .bx-file,
.blue-icon-box .bxs-dollar-circle{
  color: #1a83c7;
  font-size: var(--fontSizes-3xl);
}

/* Button Confirm - Primary/Biru (Merge) */
.swal-btn-merge-confirm {
  flex: 1 !important;
  padding: var(--space-3) var(--space-4) !important;
  font-weight: var(--fontWeights-medium) !important;
  font-size: var(--fontSizes-md) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  border-radius: var(--radii-sm) !important;
  margin: var(--space-0) !important;
  background-color: #1a83c7 !important;
  color: var(--white) !important;
  border: none !important;
}

.swal-btn-merge-confirm:hover {
  background-color: #1570aa !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(26, 131, 199, 0.3) !important;
}