/*Theme Colors Variables*/
$primary: #F26522;
$primary-hover: color.adjust($primary, $lightness: -10%);
$secondary: #3B7080;
$secondary-hover: color.adjust($secondary, $lightness: -10%);
$success: #03C95A;
$success-hover: color.adjust($success, $lightness: -10%);
$info: #1B84FF;
$info-hover: color.adjust($info, $lightness: -10%);
$warning: #FFC107;
$warning-hover: color.adjust($warning, $lightness: -10%);
$danger: #E70D0D;
$danger-hover: color.adjust($danger, $lightness: -10%);
$dark: #212529;
$light: #F8F9FA;
$white: #FFF;
$black: #000;
$purple: #AB47BC;
$pink: #FD3995;
$skyblue: #0DCAF0;
$teal: #02a8b5;

$dark-green: #111926;
$night-blue: #0F0F41;
$dark-gray: #2E2E48;
$royal-blue: #0039C6;
$indigo: #391694;
$darkaqua: #116D6E;
$whiterock: #F0E4D7;
$rockblue: #8CB9BD;
$bluehaze: #B5C0D0;
$brightblue:  #2066FF;
$lunargreen: #365E32;
$lavendar: #673AB7;
$magenta: #E83E8C;
$chromeyellow: #FF9B04;
$lavared: #DC2626;
$blackpearl: #080821;
$maroon: #710034;
$bluegem: #3E1C95;
$firefly: #053333;

$violet: red;
$orange: orange;
$green: green;
$red: red;

/*Primary*/
$primary-100: #FEF0E9;
$primary-200: #FCE0D3;
$primary-300: #FBD1BD;
$primary-400: #FAC1A7;
$primary-500: #F9B291;
$primary-600: #F7A37A;
$primary-700: #F69364;
$primary-800: #F5844E;
$primary-900: #F37438;

/*Secondary*/
$secondary-100: #DCE5E8;
$secondary-200: #CAD8DD;
$secondary-300: #B9CBD1;
$secondary-400: #A7BFC6;
$secondary-500: #95B2BB;
$secondary-600: #84A5AF;
$secondary-700: #7298A4;
$secondary-800: #618B98;
$secondary-900: #4F7E8D;

/*Pink*/
$pink-100: #FFDBEC;
$pink-200: #FECAE3;
$pink-300: #FEB8D9;
$pink-400: #FEA6D0;
$pink-500: #FE94C6;
$pink-600: #FE82BD;
$pink-700: #FD71B3;
$pink-800: #FD5FAA;
$pink-900: #FD4DA0;

/*Light*/
$light-100: #FDFDFE;
$light-200: #FBFBFD;
$light-300: #F8FAFC;
$light-400: #F6F8FB;
$light-500: #F4F6FA;
$light-600: #F2F4F8;
$light-700: #F0F2F7;
$light-800: #EDF1F6;
$light-900: #E9EDF4;

/*Gray*/
$gray-100: #F3F4F6;
$gray-200: #E5E7EB;
$gray-300: #D1D5DB;
$gray-400: #9CA3AF;
$gray-500: #6B7280;
$gray-600: #4B5563;
$gray-700: #374151;
$gray-800: #1F2937;
$gray-900: #111827;

/*Info*/
$info-100: #D6E9FF;
$info-200: #C2DEFF;
$info-300: #ADD3FF;
$info-400: #99C8FF;
$info-500: #84BCFF;
$info-600: #70B1FF;
$info-700: #5BA6FF;
$info-800: #479BFF;
$info-900: #3290FF;

/*Success*/
$success-100: #D2F5E1;
$success-200: #BBF0D3;
$success-300: #A4EBC4;
$success-400: #8EE7B5;
$success-500: #77E2A6;
$success-600: #60DD97;
$success-700: #49D889;
$success-800: #33D37A;
$success-900: #1CCE6B;

/*Danger*/
$danger-100: #F6CECE;
$danger-200: #F1B6B6;
$danger-300: #EC9E9E;
$danger-400: #E88686;
$danger-500: #E36D6D;
$danger-600: #DE5555;
$danger-700: #D93D3D;
$danger-800: #D52424;
$danger-900: #D00C0C;

/*Warning*/
$warning-100: #FFF4D2;
$warning-200: #FFEEBC;
$warning-300: #FFE9A6;
$warning-400: #FFE390;
$warning-500: #FFDD79;
$warning-600: #FFD863;
$warning-700: #FFD24D;
$warning-800: #FFCD36;
$warning-900: #FFC720;

/*Purple*/
$purple-100: #F0DEF3;
$purple-200: #E8CDED;
$purple-300: #E1BDE7;
$purple-400: #D9ACE1;
$purple-500: #D19BDB;
$purple-600: #CA8BD5;
$purple-700: #C27ACF;
$purple-800: #BB6AC9;
$purple-900: #B359C3;

/*Skyblue*/
$skyblue-100: #D3F5FC;
$skyblue-200: #BEF1FB;
$skyblue-300: #A8ECFA;
$skyblue-400: #92E7F9;
$skyblue-500: #7CE2F7;
$skyblue-600: #66DDF6;
$skyblue-700: #51D9F5;
$skyblue-800: #3BD4F3;
$skyblue-900: #25CFF2;

/*Darkmode Base*/
$darkmode-light: #131313;
$darkmode-dark: #D6DADE;
$darkmode-white: #0D0D0D;

/*Darkmode Gray*/
$darkmode-gray-900: #D8DFEE;
$darkmode-gray-800: #C8D2E0;
$darkmode-gray-700: #374151;
$darkmode-gray-600: #4B5563;
$darkmode-gray-500: #6B7280;
$darkmode-gray-400: #9CA3AF;
$darkmode-gray-300: #2F343C;
$darkmode-gray-200: #1F2228;
$darkmode-gray-100: #171717;

/*Darkmode Light*/
$darkmode-light-900: #181818;
$darkmode-light-800: #121212;
$darkmode-light-700: #111111;
$darkmode-light-600: #101010;
$darkmode-light-500: #0F0F0F;
$darkmode-light-400: #0E0E0E;
$darkmode-light-300: #0C0C0C;
$darkmode-light-200: #0B0B0B;
$darkmode-light-100: #0A0A0A;

/*Darkmode Transparent*/
$darkmode-primary-transparent: #100601;
$darkmode-secondary-transparent: #030D11;
$darkmode-success-transparent: #04150C;
$darkmode-warning-transparent: #171203;
$darkmode-danger-transparent: #240505;
$darkmode-info-transparent: #050C15;
$darkmode-purple-transparent: #17051B;
$darkmode-skyblue-transparent: #03191E;
$darkmode-pink-transparent: #240917;
$darkmode-dark-transparent: #212324;
$darkmode-light-transparent: #0B0F14;

$colors: (
  "skyblue":    $skyblue,
  "purple":     $purple,
  "pink":       $pink,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "success": $success,
    "info": $info,
    "warning": $warning,
    "danger": $danger,
    "dark": $dark,
    "light": $light,
    "black": $black,
    "purple": $purple
);

/*$text-color: #6B7280;*/
/*$title-color: #202C4B;*/
/*$sub-title: #6B7280;*/
/*$body-bg: #fff;*/
/*$text-muted: #677788;*/
/*$default-background: #F8F9FA;*/
/*$black-bg: #141432;*/
/*$input-bg: #2c2c50;*/
/*$form-control-bg: #ffffff;*/

/*Social Icons Colors*/
$facebook: #3B5998;
$twitter: #00ACEE;
$google: #DD4B39;
$linkedin: #0E76A8;
$youtube: #C4302B;
$instagram: #3F729B;
$pinterest: #cc2127;
$skype: #00AFF0;
$email: #6567A5;
$appstore: #000;

/*Gradient Variables*/
$primary-transparent: #FEF1EB;
$secondary-transparent: #EDF2F4;
$success-transparent: #E8FAF0;
$warning-transparent: #FFF9E9;
$danger-transparent: #FAE7E7;
$info-transparent: #EBF4FF;
$pink-transparent: #FFEDF6;
$light-transparent: #F9FAFE;
$dark-transparent: #E8E9EA;
$teal-transparent: #E6F9FF;
$purple-transparent: #F7EEF9;
$skyblue-transparent: #E9FAFE;
$primary-gradient: linear-gradient(90deg, #FF6F28 0%, #FF5325 100%);
$secondary-gradient: linear-gradient(180deg, #3B7080 0%, #3D90A9 100%);
$success-gradient: linear-gradient(180deg, #2DCB73 0%, #0DA952 100%);
$warning-gradient: linear-gradient(180deg, #FFC107 0%, #FFE8A5 100%);
$danger-gradient: linear-gradient(180deg, #E70D0D 0%, #810707 100%);
$info-gradient: linear-gradient(180deg, #177DBC 0%, #1A91DB 100%);
$light-gradient: linear-gradient(180deg, #F8F9FA 0%, #EDEDED 100%);
$dark-gradient: linear-gradient(180deg, #F3F6FF 0%, #FFFFFF 100%);
$pink-gradient: linear-gradient(180deg, #FFA795 0%, #FFFFFF 100%);
$purple-gradient: linear-gradient(180deg, #4B3088 0%, #5C2DC8 100%);
$teal-gradient: linear-gradient(180deg, #E6F9FF 0%, #FFFFFF 100%);
$orange-gradient: linear-gradient(180deg, #FF9945 0%, #FC6173 100%);
$gradient-purple: linear-gradient(180deg, #667CE8 0%, #754EA7 100%);
$blue-gradient: linear-gradient(180deg, #00C0F9 0%, #0257CE 100%);
$maroon-gradient: linear-gradient(180deg, #EF3B4A 0%, #513A8F 100%);

/*Style Anchor Elements*/
$link-color: $primary;
$link-decoration: none;
$link-shade-percentage: 20%;
$link-hover-color: color.adjust($link-color, $lightness: -10%);
$link-hover-decoration: null;
$spacer: 1rem;

/*Border*/
$border-width: 1px;
$border-style: solid;
$border-color: $gray-200;
$default-border: $gray-200;
$input-border: $gray-200;

/*Border Radius*/
$border-radius: 4px;
$border-radius-sm: 3px;
$border-radius-lg: 5px;
$border-radius-xl: 8px;
$border-radius-xxl: 12px;
$rounded: 50%;
$rounded-pill: 1.5rem;

/*Box Shadow*/
$box-shadow: 0px 4px 54px 0px #E0E0E040;
$box-shadow-xs: 0px 1px 1px 1px rgba(198, 198, 198, 0.2);
$box-shadow-sm: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
$box-shadow-md: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
$box-shadow-lg: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
$drop-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);

/*BG Color CSS*/
.bg-primary {
    background-color: variables.$primary !important;
}
.bg-secondary {
    background-color: variables.$secondary !important;
}
.bg-info {
    background-color: variables.$info !important;
}
.bg-success {
    background-color: variables.$success !important;
}
.bg-warning {
    background-color: variables.$warning !important;
}
.bg-danger {
    background-color: variables.$danger !important;
}
.bg-dark {
    background-color: variables.$dark !important;
}
.bg-light {
    background-color: variables.$light !important;
}
.bg-white {
    background-color: variables.$white;
}
.bg-pink {
    background-color: variables.$pink !important;
}
.bg-purple {
    background-color: variables.$purple !important;
}
.bg-darkgreen {
    background-color: variables.$dark-green !important;
}
.bg-nightblue {
    background-color: variables.$night-blue !important;
}
.bg-royalblue {
    background-color: variables.$royal-blue !important;
}
.bg-darkgray {
    background-color: variables.$dark-gray !important;
}
.bg-indigo {
    background-color: variables.$indigo !important;
}

.bg-gray {
    background: variables.$light-500;
}
.bg-primary {
    background-color: variables.$primary !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$primary,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$primary,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$primary,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$primary,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$primary,1) !important;
    }
}
.bg-secondary {
    background-color: variables.$secondary !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$secondary,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$secondary,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$secondary,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$secondary,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$secondary,1) !important;
    }
}
.bg-info {
    background-color: variables.$info !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$info,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$info,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$info,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$info,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$info,1) !important;
    }
}
.bg-success {
    background-color: variables.$success !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$success,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$success,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$success,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$success,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$success,1) !important;
    }
}
.bg-warning {
    background-color: variables.$warning !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$warning,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$warning,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$warning,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$warning,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$warning,1) !important;
    }
}
.bg-danger {
    background-color: variables.$danger !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$danger,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$danger,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$danger,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$danger,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$danger,1) !important;
    }
}
.bg-dark {
    background-color: variables.$dark !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$dark,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$dark,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$dark,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$dark,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$dark,1) !important;
    }
}
.bg-light {
    background-color: variables.$light !important;
    &.bg-opacity-10 {
        background-color: rgba(variables.$light,0.1) !important;
    }
    &.bg-opacity-25 {
        background-color: rgba(variables.$light,0.25) !important;
    }
    &.bg-opacity-50 {
        background-color: rgba(variables.$light,0.50) !important;
    }
    &.bg-opacity-75 {
        background-color: rgba(variables.$light,0.75) !important;
    }
    &.bg-opacity-100 {
        background-color: rgba(variables.$light,1) !important;
    }
}
.bg-skyblue {
    background-color: variables.$skyblue !important;
}
@each $color,
$value in variables.$theme-colors {
    .bg-#{$color} {
        background-color: #{$value} !important;
        border: 1px solid #{$value} !important;
        color: variables.$white;
    }
}
.bg-soft-primary {
    background-color: variables.$primary-100;
    color: variables.$primary;
}
.bg-soft-secondary {
    background-color: variables.$secondary-300;
    color: variables.$secondary;
}
.bg-soft-success {
    background-color: variables.$success-300;
    color: variables.$success;
}
.bg-soft-danger {
    background-color: variables.$danger-300;
    color: variables.$danger;
}
.bg-soft-warning {
    background-color: variables.$warning-300;
    color: variables.$warning;
}
.bg-soft-info {
    background-color: rgba(variables.$info, 0.3);
    color: variables.$info;
}
.bg-soft-light {
    background-color: rgba(variables.$light, 0.9);
    color: variables.$text-color;
}
.bg-soft-dark {
    background-color: rgba(variables.$dark, 0.3);
    color: variables.$white;
}
.bg-light {
  color: variables.$text-color;
}

.bg-primary-gradient {
  background: variables.$primary-gradient !important;
  color: variables.$white;
}
.bg-secondary-gradient {
  background: variables.$secondary-gradient !important;
  color: variables.$white;
}
.bg-warning-gradient {
  background: variables.$warning-gradient !important;
  color: variables.$white;
}
.bg-info-gradient {
  background: variables.$info-gradient !important;
  color: variables.$white;
}
.bg-success-gradient {
  background: variables.$success-gradient !important;
  color: variables.$white;
}
.bg-danger-gradient {
  background: variables.$danger-gradient !important;
  color: variables.$white;
}
.bg-purple-gradient {
  background: variables.$purple-gradient !important;
  color: variables.$white;
}
.bg-light-gradient {
  background: variables.$light-gradient !important;
  color: variables.$black;
}
.bg-dark-gradient {
  background: variables.$dark-gradient !important;
  color: variables.$white;
}
.bg-outline-primary {
  background-color: variables.$white;
  border: 1px solid variables.$primary;
  color: variables.$primary;
}
.bg-outline-secondary {
  background-color: variables.$white;
  border: 1px solid variables.$secondary;
  color: variables.$secondary;
}
.bg-outline-warning {
  background-color: variables.$white;
  border: 1px solid variables.$warning;
  color: variables.$warning;
}
.bg-outline-info {
  background-color: variables.$white;
  border: 1px solid variables.$info;
  color: variables.$info;
}
.bg-outline-success {
  background-color: variables.$white;
  border: 1px solid variables.$success;
  color: variables.$success;
}
.bg-outline-danger {
  background-color: variables.$white;
  border: 1px solid variables.$danger;
  color: variables.$danger;
}
.bg-outline-dark {
  background-color: variables.$white;
  border: 1px solid variables.$dark;
  color: variables.$dark;
}
.bg-outline-light {
  background-color: variables.$white;
  border: 1px solid variables.$light !important;
  color: variables.$black !important;
}
.bg-primary-transparent {
    background-color: variables.$primary-transparent !important;
    color: variables.$primary !important;
    &:hover {
        background-color: variables.$primary-transparent !important;
        color: variables.$primary !important;
    }
}
.bg-secondary-transparent {
    background-color: variables.$secondary-transparent !important;
    color: variables.$secondary !important;
    &:hover {
        background-color: variables.$secondary-transparent !important;
        color: variables.$secondary !important;
    }
}
.bg-info-transparent {
    background-color: variables.$info-100 !important;
    color: variables.$info !important;
    &:hover {
        background-color: variables.$info-100 !important;
        color: variables.$info !important;
    }
}
.bg-success-transparent {
    background-color: variables.$success-100 !important;
    color: variables.$success !important;
    &:hover {
        background-color: variables.$success-100 !important;
        color: variables.$success !important;
    }
}
.bg-warning-transparent {
    background-color: variables.$warning-100 !important;
    color: variables.$warning !important;
    &:hover {
        background-color: variables.$warning-100 !important;
        color: variables.$warning !important;
    }
}
.bg-danger-transparent {
    background-color: variables.$danger-100 !important;
    color: variables.$danger !important;
    &:hover {
        background-color: variables.$danger-100 !important;
        color: variables.$danger !important;
    }
}
.bg-light-transparent {
    background-color: rgba(variables.$light, 0.5) !important;
    color: variables.$light !important;
    &:hover {
        background-color: rgba(variables.$light, 0.5) !important;
        color: variables.$text-color !important;
    }
}
.bg-skyblue-transparent {
    background-color: variables.$skyblue-100 !important;
    color: variables.$skyblue !important;
    &:hover {
        background-color: variables.$skyblue-100 !important;
        color: variables.$skyblue !important;
    }
}
.bg-pink-transparent {
    background-color: variables.$pink-100 !important;
    color: variables.$pink !important;
    &:hover {
        background-color: variables.$pink-100 !important;
        color: variables.$pink !important;
    }
}
.bg-lightdanger-gradient {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFEEEE 100%);
}
.bg-lightpink-gradient {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFEBF4 100%);
}
.bg-lightsuccess-gradient {
    background: linear-gradient(180deg, #FFFFFF 0%, #E8FFF2 100%);
}
.bg-lightpurple-gradient {
    background: linear-gradient(180deg, #FFFFFF 0%, #FCE8FF 100%);
}
.bg-primary-100 {
    background-color: variables.$primary-100 !important;
}
.bg-gray-100 {
    background-color: variables.$gray-100;
}
.bg-gray-200 {
    background-color: variables.$gray-200;
}
.bg-gray-300 {
    background-color: variables.$gray-300;
}
.bg-gray-400 {
    background-color: variables.$gray-400;
}
.bg-gray-500 {
    background-color: variables.$gray-500;
}
.bg-gray-600 {
    background-color: variables.$gray-600;
}
.bg-gray-700 {
    background-color: variables.$gray-700;
}
.bg-gray-800 {
    background-color: variables.$gray-800;
}
.bg-gray-900 {
    background-color: variables.$gray-900 !important;
}
.bg-light-100 {
    background-color: variables.$light-100 !important;
}
.bg-light-300 {
    background-color: variables.$light-300 !important;
}
.bg-light-400 {
    background-color: variables.$light-400 !important;
}
.bg-light-500 {
    background-color: variables.$light-500 !important;
}
.bg-success-800 {
    background-color: variables.$success-800 !important;
}
.svg-primary {
    fill: variables.$primary;
}
.svg-secondary {
    fill: variables.$secondary;
}
.svg-success {
    fill: variables.$success;
}
.svg-danger {
    fill: variables.$danger;
}
.svg-warning {
    fill: variables.$warning;
}
.svg-white {
    fill: variables.$white;
}
.svg-black {
    fill: variables.$black;
}
.svg-pink {
    fill: variables.$pink;
}
.svg-purple {
    fill: variables.$purple;
}
.svg-info {
    fill: variables.$info;
}
.svg-light {
  fill: variables.$light;
}
.svg-dark {
  fill: variables.$dark;
}
.svg-default {
  fill: variables.$text-color;
}
.color-container {
  width: 5rem;
  height: 5rem;
  border-radius: variables.$border-radius;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 3rem;
}
.text-container {
  padding: 0.25rem 0.5rem;
  border-radius: variables.$border-radius;
  box-shadow: variables.$box-shadow;
}
.color-box {
    width: 80px;
    height: 80px;
    border-radius: variables.$border-radius;
    margin-right: 0.75rem;
    margin-bottom: 0.75rem;
}
.bg-light-200 {
    background: variables.$light-200;
}
.bg-light-300 {
    background: variables.$light-300;
}
.bg-transparent-primary {
    background: variables.$primary-transparent;
}
.bg-transparent-dark {
    background: variables.$dark-transparent;
}
.bg-transparent-warning {
    background: variables.$warning-100 !important;
}
.bg-transparent-light {
    background: variables.$light !important;
}
.bg-transparent-danger {
    background: variables.$danger-100 !important;
}
.bg-transparent-success {
    background: variables.$success-100 !important;
}
.bg-transparent-info {
    background: variables.$info-100 !important;
}
.bg-transparent-purple {
    background: variables.$purple-transparent !important;
    color: variables.$purple !important;
}
.bg-transparent-secondary {
    background: variables.$secondary-transparent !important;
}
.bg-transparent-skyblue {
    background: variables.$skyblue-transparent !important;
}
.bg-light-gray {
    background: variables.$light-500;
}
.bg-soft-pink {
   background: variables.$pink-100;
   color: variables.$pink;
}
.bg-soft-skyblue {
    background: variables.$skyblue-100;
}
.bg-danger-transparent {
    background: variables.$danger-transparent;
    border-color: variables.$danger-transparent !important;
}
.bg-pink-transparent {
    background: variables.$pink-transparent !important;
    color: variables.$pink !important;
}
.bg-outline-pink {
    border: 1px solid variables.$pink !important;
    color: variables.$pink !important;
}
.bg-outline-purple {
    border: 1px solid variables.$purple !important;
    color: variables.$purple !important;
}
.bg-outline-skyblue {
    border: 1px solid variables.$skyblue !important;
    color: variables.$skyblue !important;
}
/*BG Color CSS*/

/*MODAL CSS*/
.modal-dialog-scrollable {
  height: calc(100% - var(--#{$prefix}modal-margin) * 2);

  .modal-content {
    max-height: 100%;
    overflow: hidden;
  }

  .modal-body {
    overflow-y: auto;
  }
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
}
/*MODAL CSS*/


/*BORDER CSS*/
.border-container {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    margin: 0.25rem;
    background-color: variables.$light;
}
.border {
    border: 1px solid variables.$border-color !important;
    &.border-dashed {
        border-style: dashed !important;
    }
    &.border-dotted {
        border-style: dotted !important;
    }
    &.border-pink {
        border-color: variables.$pink !important;
    }
    &.border-purple {
        border-color: variables.$purple !important;
    }
    &.border-primary {
        border: 1px solid variables.$primary !important;
        opacity: 1;
        &.border-opacity-10 {
            border-color: rgba(variables.$primary, 0.1) !important;
        }
        &.border-opacity-25 {
            border-color: rgba(variables.$primary, 0.25) !important;
        }
        &.border-opacity-50 {
            border-color: rgba(variables.$primary, 0.50) !important;
        }
        &.border-opacity-75 {
            border-color: rgba(variables.$primary, 0.75) !important;
        }
        &.border-opacity-100 {
            border-color: rgba(variables.$primary,1) !important;
        }
    }
    &.border-secondary {
        border: 1px solid variables.$secondary !important;
        opacity: 1;
        &.border-opacity-10 {
            border-color: rgba(variables.$secondary,0.1) !important;
        }
        &.border-opacity-25 {
            border-color: rgba(variables.$secondary,0.25) !important;
        }
        &.border-opacity-50 {
            border-color: rgba(variables.$secondary,0.50) !important;
        }
        &.border-opacity-75 {
            border-color: rgba(variables.$secondary,0.75) !important;
        }
        &.border-opacity-100 {
            border-color: rgba(variables.$secondary,1) !important;
        }
    }
    &.border-info {
        border-color: variables.$info !important;
        opacity: 1;
        &.border-opacity-10 {
            border-color: rgba(variables.$info,0.1) !important;
        }
        &.border-opacity-25 {
            border-color: rgba(variables.$info,0.25) !important;
        }
        &.border-opacity-50 {
            border-color: rgba(variables.$info,0.50) !important;
        }
        &.border-opacity-75 {
            border-color: rgba(variables.$info,0.75) !important;
        }
        &.border-opacity-100 {
            border-color: rgba(variables.$info,1) !important;
        }
    }
    &.border-success {
        border-color: variables.$success !important;
        opacity: 1;
        &.border-opacity-10 {
            border-color: rgba(variables.$success,0.1) !important;
        }
        &.border-opacity-25 {
            border-color: rgba(variables.$success,0.25) !important;
        }
        &.border-opacity-50 {
            border-color: rgba(variables.$success,0.50) !important;
        }
        &.border-opacity-75 {
            border-color: rgba(variables.$success,0.75) !important;
        }
        &.border-opacity-100 {
            border-color: rgba(variables.$success,1) !important;
        }
    }
    &.border-warning {
        border: 1px solid variables.$warning !important;
        opacity: 1;
        &.border-opacity-10 {
            border-color: rgba(variables.$warning,0.1) !important;
        }
        &.border-opacity-25 {
            border-color: rgba(variables.$warning,0.25) !important;
        }
        &.border-opacity-50 {
            border-color: rgba(variables.$warning,0.50) !important;
        }
        &.border-opacity-75 {
            border-color: rgba(variables.$warning,0.75) !important;
        }
        &.border-opacity-100 {
            border-color: rgba(variables.$warning,1) !important;
        }
    }
    &.border-danger {
        border: 1px solid variables.$danger !important;
        opacity: 1;
        &.border-opacity-10 {
            border-color: rgba(variables.$danger,0.1) !important;
        }
        &.border-opacity-25 {
            border-color: rgba(variables.$danger,0.25) !important;
        }
        &.border-opacity-50 {
            border-color: rgba(variables.$danger,0.50) !important;
        }
        &.border-opacity-75 {
            border-color: rgba(variables.$danger,0.75) !important;
        }
        &.border-opacity-100 {
            border-color: rgba(variables.$danger,1) !important;
        }
    }
    &.border-white {
        border: 1px solid variables.$white !important;
        opacity: 1;
        &.border-opacity-10 {
            border-color: rgba(variables.$white,0.1) !important;
        }
        &.border-opacity-25 {
            border-color: rgba(variables.$white,0.25) !important;
        }
        &.border-opacity-50 {
            border-color: rgba(variables.$white,0.50) !important;
        }
        &.border-opacity-75 {
            border-color: rgba(variables.$white,0.75) !important;
        }
        &.border-opacity-100 {
            border-color: rgba(variables.$white,1) !important;
        }
    }
    &.border-light {
        border: 1px solid variables.$light !important;
        opacity: 1;
        &.border-opacity-10 {
            border-color: rgba(variables.$light,0.1) !important;
        }
        &.border-opacity-25 {
            border-color: rgba(variables.$light,0.25) !important;
        }
        &.border-opacity-50 {
            border-color: rgba(variables.$light,0.50) !important;
        }
        &.border-opacity-75 {
            border-color: rgba(variables.$light,0.75) !important;
        }
        &.border-opacity-100 {
            border-color: rgba(variables.$light,1) !important;
        }
    }
    &.border-dark {
        border: 1px solid variables.$dark !important;
        opacity: 1;
        &.border-opacity-10 {
            border-color: rgba(variables.$dark,0.1) !important;
        }
        &.border-opacity-25 {
            border-color: rgba(variables.$dark,0.25) !important;
        }
        &.border-opacity-50 {
            border-color: rgba(variables.$dark,0.50) !important;
        }
        &.border-opacity-75 {
            border-color: rgba(variables.$dark,0.75) !important;
        }
        &.border-opacity-100 {
            border-color: rgba(variables.$dark,1) !important;
        }
    }er-opacity-10 {
        --bs-border-opacity: 0.1 !important;
    }
    &.border-opacity-25 {
        --bs-border-opacity: 0.25 !important;
    }
    &.border-opacity-50 {
        --bs-border-opacity: 0.5 !important;
    }
    &.border-opacity-75 {
        --bs-border-opacity: 0.75 !important;
    }
    &.border-opacity-100 {
        --bs-border-opacity: 1 !important;
    }
    &.border-1 {
        border-width: 1px !important;
    }
    &.border-2 {
        border-width: 2px !important;
    }
    &.border-3 {
        border-width: 3px !important;
    }
    &.border-4 {
        border-width: 4px !important;
    }
    &.border-5 {
        border-width: 5px !important;
    }
    &.border-block-start-dashed {
        border-top-style: dashed;
    }
    &.border-block-start-dotted {
        border-top-style: dotted;
    }
    &.border-inline-end-dashed {
        border-inline-end-style: dashed;
    }
    &.border-inline-end-dotted {
        border-inline-end-style: dotted;
    }
    &.border-block-end-dashed {
        border-bottom-style: dashed;
    }
    &.border-block-end-dotted {
        border-bottom-style: dotted;
    }
    &.border-inline-start-dashed {
        border-inline-start-style: dashed;
    }
    &.border-inline-start-dotted {
        border-inline-start-style: dotted;
    }
    &.border-0 {
        border: 0 !important;
    }
    &.border-top-0 {
        border-block-start: 0 !important;
    }
    &.border-end-0 {
        border-inline-end: 0 !important;
    }
    &.border-bottom-0 {
        border-block-end: 0 !important;
    }
    &.border-start-0 {
        border-inline-start: 0 !important;
    }
}
.border-top {
    border-top: 1px solid variables.$border-color !important;
    &.border-block-start-dashed {
        border-top-style: dashed !important;
    }
    &.border-block-start-dotted {
        border-top-style: dotted !important;
    }
    &.border-primary {
        border-color: variables.$primary !important;
    }
    &.border-secondary {
        border-color: variables.$secondary !important;
    }
    &.border-warning {
        border-color: variables.$warning !important;
    }
    &.border-info {
        border-color: variables.$info !important;
    }
    &.border-success {
        border-color: variables.$success !important;
    }
    &.border-danger {
        border-color: variables.$danger !important;
    }
    &.border-light {
        border-color: variables.$light !important;
    }
    &.border-dark {
        border-color: variables.$dark !important;
    }
    &.border-purple {
        border-color: variables.$purple !important;
    }
}
.border-end {
    border-inline-end: 1px solid variables.$border-color !important;
    &.border-inline-end-dashed {
        border-inline-end-style: dashed !important;
    }
    &.border-inline-end-dotted {
        border-inline-end-style: dotted !important;
    }
    &.border-primary {
        border-color: variables.$primary !important;
    }
    &.border-secondary {
        border-color: variables.$secondary !important;
    }
    &.border-warning {
        border-color: variables.$warning !important;
    }
    &.border-info {
        border-color: variables.$info !important;
    }
    &.border-success {
        border-color: variables.$success !important;
    }
    &.border-danger {
        border-color: variables.$danger !important;
    }
    &.border-light {
        border-color: variables.$light !important;
    }
    &.border-dark {
        border-color: variables.$dark !important;
    }
}
.border-bottom {
    border-bottom: 1px solid variables.$border-color !important;
    &.border-block-end-dashed {
        border-bottom-style: dashed !important;
    }
    &.border-block-end-dotted {
        border-bottom-style: dotted !important;
    }
    &.border-primary {
        border-color: variables.$primary !important;
    }
    &.border-secondary {
        border-color: variables.$secondary !important;
    }
    &.border-warning {
        border-color: variables.$warning !important;
    }
    &.border-info {
        border-color: variables.$info !important;
    }
    &.border-success {
        border-color: variables.$success !important;
    }
    &.border-danger {
        border-color: variables.$danger !important;
    }
    &.border-light {
        border-color: variables.$light !important;
    }
    &.border-dark {
        border-color: variables.$dark !important;
    }
    &.border-skyblue {
        border-color: variables.$skyblue !important;
    }
}
.border-start {
    border-inline-start: 1px solid variables.$border-color !important;
    &.border-inline-start-dashed {
        border-inline-start-style: dashed !important;
    }
    &.border-inline-start-dotted {
        border-inline-start-style: dotted !important;
    }
    &.border-primary {
        border-color: variables.$primary !important;
    }
    &.border-secondary {
        border-color: variables.$secondary !important;
    }
    &.border-warning {
        border-color: variables.$warning !important;
    }
    &.border-info {
        border-color: variables.$info !important;
    }
    &.border-success {
        border-color: variables.$success !important;
    }
    &.border-danger {
        border-color: variables.$danger !important;
    }
    &.border-light {
        border-color: variables.$light !important;
    }
    &.border-dark {
        border-color: variables.$dark !important;
    }
    &.border-pink {
        border-color: variables.$pink !important;
    }
    &.border-purple {
        border-color: variables.$purple !important;
    }
}
.border-primary {
    border-color: variables.$primary !important;
}
.border-secondary {
    border-color: variables.$secondary !important;
}
.border-warning {
    border-color: variables.$warning !important;
}
.border-info {
    border-color: variables.$info !important;
}
.border-success {
    border-color: variables.$success !important;
}
.border-danger {
    border-color: variables.$danger !important;
}
.border-skyblue {
    border-color: variables.$skyblue !important;
}
.border-3 {
    border-width: 3px !important;
}
.br-1 {
    border-radius: 0.0625rem;
}
.br-2 {
    border-radius: 0.125rem;
}
.br-3 {
    border-radius: 0.1875rem;
}
.br-4 {
    border-radius: 0.25rem;
}
.br-5 {
    border-radius: 0.3125rem !important;
}
.br-6 {
    border-radius: 0.375rem;
}
.br-7 {
    border-radius: 0.4375rem;
}
.br-8 {
    border-radius: 0.5rem;
}
.br-9 {
    border-radius: 0.5625rem;
}
.br-10 {
    border-radius: 0.625rem;
}
.br-15 {
    border-radius: 0.9375rem;
}
.br-20 {
    border-radius: 1.25rem;
}
.rounded {
    border-radius: variables.$border-radius !important;
}

.border-dashed {
    &.border-primary {
        border-style: dashed !important;
    }
}
/*BORDER CSS*/


/*BADGE CSS*/
.badge {
    &.badge-primary {
        background: rgba(variables.$primary, 0.1);
        box-shadow: 0 1px 1px rgba(variables.$primary, 0.5);
        color: variables.$primary;
    }
    &.badge-skyblue{
        background-color: variables.$skyblue;
        color: variables.$white;
    }
    &.badge-pink{
        background-color: variables.$pink;
        color: variables.$white;
    }
    &.badge-dark-transparent {
        background: variables.$dark-transparent;
        color: variables.$gray-900;
    }
    &.badge-secondary-transparent {
        background: variables.$secondary-transparent;
        color: variables.$secondary;
    }
    &.badge-pink-transparent {
        background: variables.$pink-transparent;
        color: variables.$pink;
    }
    &.badge-secondary-transparent {
        background: variables.$secondary-transparent;
        color: variables.$secondary;
    }
    &.badge-success-transparent {
        background: variables.$success-100;
        color: variables.$success;
    }
    &.badge-purple-transparent {
        background:variables.$purple-transparent;
        color: variables.$purple;
    }
    &.badge-warning-transparent {
        background:variables.$warning-transparent;
        color: variables.$warning;
    }
    &.badge-danger-transparent {
        background:variables.$danger-transparent;
        color: variables.$danger;
    }
    &.badge-info-transparent {
        background:variables.$info-transparent;
        color: variables.$info;
    }
}
@each $color, $value in variables.$theme-colors {
    .badge {
        &.badge-#{$color} {
            background: #{$value};
            color: variables.$white;
        }
        &.badge-soft-#{$color} {
            background: rgba($value, 0.1);
            color: $value;
        }
    }
}
.badge{
    padding: .25rem .45rem;
    font-weight: variables.$font-weight-semibold;
    letter-spacing: 0.5px;
    border-radius: variables.$border-radius;
    &.badge-xs {
        font-size: 10px;
        font-weight: variables.$font-weight-medium;
        padding: 0px 5px;
        line-height: 18px;
    }
    &.badge-sm {
        font-size: 11px;
        padding: 5px 8px;
        line-height: 11px;
    }
    &.badge-md {
        font-size: 12px;
        padding: 5px 12px;
        line-height: 1.5;
    }
    &.badge-lg {
        font-size: variables.$font-size-14;
        padding: 0px 10px;
        line-height: 30px;
    }
    &.badge-xl {
        font-size: variables.$font-size-16;
        padding: 0px 15px;
        line-height: 35px;
    }
    &.badge-soft-skyblue {
        background: variables.$skyblue-100;
        color: variables.$skyblue;
    }
}
.badge.arrow {
    width: 20px;
    height: 20px;
    background: variables.$light-200;
    color: variables.$dark;
    &:hover {
        background: variables.$primary;
        color: variables.$white;
    }
}
.badge.bg-light.arrow:hover {
    background: variables.$dark !important;
}
.badge-primary-hover:hover {
    background: variables.$primary !important;
    border-color: variables.$primary !important;
    color: variables.$white !important;
}
.badge-danger-hover:hover {
    background: variables.$danger !important;
    border-color: variables.$danger !important;
    color: variables.$white !important;
}
.badge.badge-soft-purple {
    background: variables.$purple-100 !important;
    color: variables.$purple !important;
}
/*BADGE CSS*/




/*BUTTON CSS*/
.btn-primary {
    color: variables.$white;
    background-color: variables.$primary;
    border-color: variables.$primary;
    font-size: variables.$font-size-14;
    font-size: variables.$font-size-14;
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn.show:hover, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background-color: variables.$primary;
    border-color: variables.$primary;
    color: variables.$white;
}
button {
    cursor: pointer;
    &:focus{
        outline: 0;
        box-shadow: none;
    }
}
.btn {
    border-radius: variables.$border-radius-lg;
    padding: 0.5rem 0.85rem;
    font-size: variables.$font-size-14;
    transition: all 0.5s;
    font-weight: variables.$font-weight-medium;
    &:focus {
        box-shadow: none !important;
    }
    &:hover {
        transition: all 0.5s;
    }
    &.btn-lg {
        padding: 0 6px;
        font-size: 15px;
    }
    &.btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    &.btn-xs {
        padding: 0.25rem 0.5rem;
        font-size: 0.6rem;
    }
    &.btn-md {
        padding: 0 5px;
        font-size: 13px;
    }
    @each $color,
    $value in variables.$theme-colors {
        &.btn-#{$color} {
            background-color: #{$value};
            border: 1px solid #{$value};
            color: variables.$white;
            &:hover,
            &:focus,
            &.focus,
            &:active,
            &.active {
                background-color: #{color.adjust($value, $lightness: -8%)};
                border:1px solid #{color.adjust($value, $lightness: -8%)};
                color: variables.$white;
            }
        }
    }
    &.btn-primary {
        background-color: variables.$primary-900;
        border: 1px solid variables.$primary-900;
        color: variables.$white;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: color.adjust(variables.$primary-900, $lightness: -7%);
            border: 1px solid color.adjust(variables.$primary-900, $lightness: -7%);
            color: variables.$white;
        }
    }
    &.btn-light {
        background-color: variables.$light;
        border: 1px solid variables.$light;
        color: variables.$gray-900;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: color.adjust(variables.$light, $lightness: -3%);
            border: 1px solid variables.$light;
            color: variables.$gray-900;
        }
    }
    &.btn-white {
      background-color: variables.$white;
      border-color: variables.$white;
      color: variables.$gray-900;
      &.show {
        background-color: variables.$white;
        border-color: variables.$white;
      }
    }
    &.btn-gray {
      background-color: variables.$gray-200;
      border-color: variables.$gray-200;
      color: variables.$gray-900;
      &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
        background-color: variables.$primary;
        border-color: variables.$primary;
        color: variables.$white;
      }
    }
    &.btn-linear-primary {
        background-image: variables.$primary-gradient;
        border: 1px solid variables.$primary-900;
        color: variables.$white;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: color.adjust(variables.$primary-900, $lightness: -7%);
            border: 1px solid color.adjust(variables.$primary-900, $lightness: -7%);
            color: variables.$white;
        }
    }
}

.btn-group {
    .btn {
      padding: 0.45rem 0.75rem;
    }
  }
  .btn-group-lg {
    .btn {
      padding: 0.65rem 1rem;
    }
  }
  .btn-group-sm {
    .btn {
      padding: 0.25rem 0.5rem;
    }
  }
.btn {
    &.btn-w-xs {
      min-width: 5.625rem;
    }
    &.btn-w-sm {
      min-width: 6.975rem;
    }
    &.btn-w-md {
      min-width: 8.125rem;
    }
    &.btn-w-lg {
      min-width: 9.375rem;
    }
  }
  .btn-icon {
    i {
      padding: 0rem;
      margin: -0.5rem;
    }
    &.btn-xs {
      width: 24px;
      height: 24px;
      font-size: 0.8rem;
    }
    &.btn-sm {
      width: 1.75rem;
      height: 1.75rem;
      font-size: 0.8rem;
    }
    &.btn-lg {
      width: 2.75rem;
      height: 2.75rem;
      font-size: 1.2rem;
    }
  }
  .btn-list {
    > button, > a {
      margin: 0 0.375rem 0.375rem 0;
    }
  }
  [dir="rtl"] {
    .btn-list {
      button,
      div,
      a,
      input {
        margin: 0 0 0.375rem 0.375rem;
      }
    }
  }

  .btn-list {
    margin-block-end: -0.5rem;
  }
  .btn-square {
    border-radius: 0;
}
.btn-group-pill .btn:first-child {
    border-radius: 60px 0 0 60px;
  }
  .btn-group-pill .btn:last-child {
    border-radius: 0 60px 60px 0;
  }

  .btn-group-square .btn:first-child {
    border-radius: 0px 0 0 0px;
  }
  .btn-group-square .btn:last-child {
    border-radius: 0 0px 0px 0;
  }
.btn {
  &.btn-primary-light {
    background-color: rgba(variables.$primary, 0.1);
    color: variables.$primary;
    &:hover,
    &:focus,
    &:active {
      background-color: variables.$primary;
      color: variables.$white;
      border-color: variables.$primary;
    }
  }

  &.btn-secondary-light {
    background-color: rgba(variables.$secondary, 0.1);
    color: variables.$secondary;
    &:hover,
    &:focus,
    &:active {
      background-color: variables.$secondary;
      color: variables.$white;
      border-color: variables.$secondary;
    }
  }
  &.btn-warning-light {
    background-color: rgba(variables.$warning, 0.1);
    color: variables.$warning;
    &:hover,
    &:focus,
    &:active {
      background-color: variables.$warning;
      color: variables.$white;
      border-color: variables.$warning;
    }
  }
  &.btn-info-light {
    background-color: rgba(variables.$info, 0.1);
    color: variables.$info;
    &:hover,
    &:focus,
    &:active {
      background-color: variables.$info;
      color: variables.$white;
      border-color: variables.$info;
    }
  }
  &.btn-success-light {
    background-color: rgba(variables.$success, 0.1);
    color: variables.$success;
    &:hover,
    &:focus,
    &:active {
      background-color: variables.$success;
      color: variables.$white;
      border-color: variables.$success;
    }
  }
  &.btn-danger-light {
    background-color: rgba(variables.$danger, 0.1);
    color: variables.$danger;
    &:hover,
    &:focus,
    &:active {
      background-color: variables.$danger;
      color: variables.$white;
      border-color: variables.$danger;
    }
  }
}
.btn {
  &.btn-primary-ghost {
    background-color: transparent;
    color: variables.$primary;
    border: 1px solid variables.$primary;
    &:active {
      color: variables.$primary;
      border: 1px solid variables.$primary;
      background-color: transparent;
    }
  }
  &.btn-dark{
    background: variables.$gray-900 !important;
    border-color: variables.$gray-900 !important;
    box-shadow: none;
    color: variables.$white;
    &:hover{
      background: #252a30 !important ;
    }
  }
  &.btn-secondary-ghost {
    background-color: transparent;
    color: variables.$secondary;
    border: 1px solid variables.$secondary;
    &:active {
      color: variables.$secondary;
      border: 1px solid variables.$secondary;
      background-color: transparent;
    }
  }
  &.btn-warning-ghost {
    background-color: transparent;
    color: variables.$warning;
    border: 1px solid variables.$warning;
    &:active {
      color: variables.$warning;
      border: 1px solid variables.$warning;
      background-color: transparent;
    }
  }
  &.btn-info-ghost {
    background-color: transparent;
    color: variables.$info;
    border: 1px solid variables.$info;
    &:active {
      color: variables.$info;
      border: 1px solid variables.$info;
      background-color: transparent;
    }
  }
  &.btn-success-ghost {
    background-color: transparent;
    color: variables.$success;
    border: 1px solid variables.$success;
    &:active {
      color: variables.$success;
      border: 1px solid variables.$success;
      background-color: transparent;
    }
  }
  &.btn-danger-ghost {
    background-color: transparent;
    color: variables.$danger;
    border: 1px solid variables.$danger;
    &:active {
      color: variables.$danger;
      border: 1px solid variables.$danger;
      background-color: transparent;
    }
  }
}
.btn-list {
  button {
    margin: 0 0.375rem 0.375rem 0;
  }
}
.btn-group-vertical {
  .btn-check:checked + .btn {
    color: variables.$white !important;
  }
}
.btn-outline-primary {
    border: 1px solid variables.$primary !important;
    color: variables.$primary !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$primary !important;
        border:1px solid variables.$primary !important;
        box-shadow: 0 3px 10px rgba(variables.$primary, 0.5);
        color: variables.$white !important;
    }
}
.btn-outline-secondary {
    border: 1px solid variables.$secondary !important;
    color: variables.$secondary !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$secondary !important;
        border:1px solid variables.$secondary !important;
        box-shadow: 0 3px 10px rgba(variables.$secondary, 0.5);
        color: variables.$white !important;
    }
}
.btn-outline-success {
    border: 1px solid variables.$success !important;
    color: variables.$success !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$success !important;
        border:1px solid variables.$success !important;
        box-shadow: 0 3px 10px rgba(variables.$success, 0.5);
        color: variables.$white !important;
    }
}
.btn-outline-danger {
    border: 1px solid variables.$danger !important;
    color: variables.$danger !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$danger !important;
        border:1px solid variables.$danger !important;
        box-shadow: 0 3px 10px rgba(variables.$danger, 0.5);
        color: variables.$white !important;
    }
}
.btn-outline-warning {
    border: 1px solid variables.$warning !important;
    color: variables.$warning !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$warning !important;
        border:1px solid variables.$warning !important;
        box-shadow: 0 3px 10px rgba(variables.$warning, 0.5);
        color: variables.$white !important;
    }
}
.btn-outline-info {
    border: 1px solid variables.$info !important;
    color: variables.$info !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$info !important;
        border:1px solid variables.$info !important;
        box-shadow: 0 3px 10px rgba(variables.$info, 0.5);
        color: variables.$white !important;
    }
}
.btn-outline-light {
    border: 1px solid variables.$light !important;
    color: variables.$gray-700 !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$light !important;
        border: 1px solid variables.$light !important;
        color: variables.$gray-700 !important;
    }
}
.btn-outline-dark {
    border: 1px solid variables.$dark !important;
    color: variables.$dark !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$dark !important;
        border:1px solid variables.$dark !important;
        box-shadow: 0 3px 10px rgba(variables.$dark, 0.5);
        color: variables.$white !important;
    }
}
.btn-soft-primary {
    background-color: variables.$primary-300 !important;
    color: variables.$primary !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$primary, .2);
       border-color: variables.$primary;
    }
}
.btn-soft-secondary {
    background-color: variables.$secondary-300 !important;
    color: variables.$secondary !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$secondary, .2);
       border-color: variables.$secondary;
    }
}
.btn-soft-success {
    background-color: variables.$success-300 !important;
    color: variables.$success !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$success, .2);
       border-color: variables.$success;
    }
}
.btn-soft-danger {
    background-color: variables.$danger-300 !important;
    color: variables.$danger !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$danger, .2);
       border-color: variables.$danger;
    }
}
.btn-soft-warning {
    background-color: variables.$warning-300 !important;
    color: variables.$warning !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$warning, .2);
       border-color: variables.$warning;
    }
}
.btn-soft-info {
    background-color: rgba(variables.$info, 0.3) !important;
    color: variables.$info !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$info, .2);
       border-color: variables.$info;
    }
}
.btn-soft-light {
    background-color: rgba(variables.$light, .9) !important;
    color: variables.$text-color !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$light, .2);
       border-color: variables.$light;
       border-color: variables.$text-color;
    }
}
.btn-soft-dark {
    background-color: rgba(variables.$dark, 0.3) !important;
    color: variables.$white !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$dark, .2);
       border-color: variables.$dark;
    }
}
.primary-hover {
  &:hover {
    background: variables.$primary !important;
    color: variables.$white;
  }
}
.warning-btn-hover {
    &:hover {
        background: variables.$warning !important;
        border-color: variables.$warning !important;
        color: variables.$white;
    }
}
.success-btn-hover {
    &:hover {
        background: variables.$success !important;
        border-color: variables.$success !important;
        color: variables.$white;
    }
}
.danger-btn-hover {
    &:hover {
        background: variables.$danger !important;
        border-color: variables.$danger !important;
        color: variables.$white !important;
    }
}
.secondary-btn-hover {
    &:hover {
        background: variables.$secondary !important;
        border-color: variables.$secondary !important;
        color: variables.$white;
    }
}
.primary-btn-hover {
    &:hover {
        background: variables.$primary !important;
        border-color: variables.$primary !important;
        color: variables.$white !important;
    }
}
.btn {
  @include mixins.respond-below(sm) {
      padding: 5px 12px;
  }
}
.bn-close {
  &.custom-btn-close {
    background-image: none;
  }
}
.btn {
  &.btn-icon {
    &:hover {
      background: variables.$dark-transparent;
      color: variables.$dark;
    }
    &.active.bg-white {
      border-color: variables.$white;
      color: variables.$dark;
    }
    &:active {
      color: variables.$white;
    }
  }
}
.border-purple {
  border-color: variables.$purple !important;
}
.btn-light.btn-icon {
  &:hover {
    background: variables.$primary !important;
    color: variables.$white !important;
  }
}
/*BUTTON CSS*/











/*CUSTOM Color CSS*/
.custom-bg-danger-1{
    background: #EB5463!important;
}
.custom-bg-danger-2{
    background: #D94553!important;
}
.custom-bg-primary-1{
    background: #5E9BEB!important;
}
.custom-bg-primary-2{
    background: #4B89DC!important;
}
.custom-bg-info-1{
    background: #4FC0E8!important;
}
.custom-bg-info-2{
    background: #3BAEDA!important;
}
.custom-bg-warning-1{
    background: #FB6E52!important;
}
.custom-bg-warning-2{
    background: #E9593C!important;
}
.custom-bg-success-1{
    background: #9FD369!important;
}
.custom-bg-success-2{
    background: #8CC052!important;
}
.custom-bg-purple-1{
    background: #AC92ED!important;
}
.custom-bg-purple-2{
    background: #977CDD!important;
}

/*CUSTOM Background (RGBA) Color CSS*/
.custom-bg-danger-100 {
    background: rgba(235, 84, 99, 0.15)!important;
}
.custom-bg-danger-200 {
    background: rgba(217, 69, 83, 0.15)!important;
}
.custom-bg-primary-100 {
    background: rgba(94, 155, 235, 0.15)!important;
}
.custom-bg-primary-200 {
    background: rgba(75, 137, 220, 0.1)!important;
}
.custom-bg-info-100 {
    background: rgba(79, 192, 232, 0.15)!important;
}
.custom-bg-info-200 {
    background: rgba(59, 174, 218, 0.15)!important;
}
.custom-bg-warning-100 {
    background: rgba(251, 110, 82, 0.15)!important;
}
.custom-bg-warning-200 {
    background: rgba(233, 89, 60, 0.15)!important;
}
.custom-bg-success-100 {
    background: rgba(159, 211, 105, 0.15)!important;
}
.custom-bg-success-200 {
    background: rgba(140, 192, 82, 0.15)!important;
}
.custom-bg-purple-100 {
    background: rgba(172, 146, 237, 0.15)!important;
}
.custom-bg-purple-200 {
    background: rgba(151, 124, 221, 0.15)!important;
}

/*CUSTOM (Border COLOR) CSS*/
.custom-border-danger-1 {
    border: 1px solid #EB5463!important;
}
.custom-border-danger-2 {
    border: 1px solid #D94553!important;
}
.custom-border-primary-1 {
    border: 1px solid #5E9BEB!important;
}
.custom-border-primary-2 {
    border: 1px solid #4B89DC!important;
}
.custom-border-info-1 {
    border: 1px solid #4FC0E8!important;
}
.custom-border-info-2 {
    border: 1px solid #3BAEDA!important;
}
.custom-border-warning-1 {
    border: 1px solid #FB6E52!important;
}
.custom-border-warning-2 {
    border: 1px solid #E9593C!important;
}
.custom-border-success-1 {
    border: 1px solid #9FD369!important;
}
.custom-border-success-2 {
    border: 1px solid #8CC052!important;
}
.custom-border-purple-1 {
    border: 1px solid #AC92ED!important;
}

.custom-border-purple-2 {
    border: 1px solid #977CDD!important;
}













/*Active/Inactive Button CSS*/
.toggle-button-cover {
  display: table-cell;
  position: relative;
  width: 300px;
  height: 140px;
  box-sizing: border-box;
}

.button-cover {
  /*height: 100px;*/
  /*margin: 20px;*/
  /*background-color: #fff;*/
  /*box-shadow: 0 10px 20px -8px #c5d6d6;*/
  /*border-radius: 4px;*/
}

.button-cover:before {
  counter-increment: button-counter;
  content: counter(button-counter);
  position: absolute;
  right: 0;
  bottom: 0;
  color: #d7e3e3;
  font-size: 12px;
  line-height: 1;
  padding: 5px;
}

.button-cover,
.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
position: relative;
  width: 74px;
  height: 17px;
  margin: 0 auto;
  overflow: hidden;
}

.button.r,
.button.r .layer {
  border-radius: 100px;
}

.button.b2 {
  border-radius: 2px;
}
.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: #D8EFD3;
  transition: 0.3s ease all;
  z-index: 1;
}

/* Button 1 */
#button-1 .knobs:before {
  content: "Active";
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  text-align: center;
  line-height: 0;
  padding: 8px;
  background-color: #16db65;
  border-radius: 50px;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-1 .checkbox:checked + .knobs:before {
  content: "Inactive";
  left: 20px;
  background-color: #FF6363;
}

#button-1 .checkbox:checked ~ .layer {
  background-color: #FFE1E1;
}

#button-1 .knobs,
#button-1 .knobs:before,
#button-1 .layer {
  transition: 0.3s ease all;
}
/*Active/Inactive Button CSS*/






/*Setting CSS*/
.settings-list {
  &.list-group {
    a {
      color: variables.$gray-500;
      &:hover {
        background: variables.$primary-100;
        color: variables.$primary;
      }
      &.active {
        color: variables.$primary;
        font-weight: variables.$font-weight-medium;
      }
    }
  }

}

//Appearance Settings
.theme-colors{
  ul li{
      margin-right: 10px;
  }
  ul li span{
      width: 35px;
      height: 35px;
      border-radius: 50%;
      display: flex;
      background-color: variables.$white;
      border: 1px solid variables.$dark-transparent;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      .primecolor{
          content: "";
          display: flex;
          width: 25px;
          height: 25px;
          border-radius: 50%;
          opacity: 1;
          position: relative;
          .colorcheck{
              visibility: hidden;
              width: 12px;
              height: 12px;
              background: #fff;
              border-radius: 4px;

          }
          &:hover.colorcheck{
              visibility: visible;
          }

      }
      &.active .colorcheck{
          visibility: visible;
      }
  }
}
.search-input {
  input {
      padding-left: 30px;
  }
  .search-addon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
  }
}

.circle-progress {
  width: 21px;
  height: 21px !important;
  float: left;
  line-height: 21px;
  background: none;
  box-shadow: none;
  position: relative;
  &::after {
      content: "";
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 3px solid  variables.$light-900;
      position: absolute;
      top: 0;
      left: 0;
  }
  .progress-left {
      left: 0;
      .progress-bar {
          left: 100%;
          border-top-right-radius: 80px;
          border-bottom-right-radius: 80px;
          border-left: 0;
          -webkit-transform-origin: center left;
          transform-origin: center left;
      }
  }
  .progress-right {
      right: 0;
      .progress-bar {
          left: -100%;
          border-top-left-radius: 80px;
          border-bottom-left-radius: 80px;
          border-right: 0;
          -webkit-transform-origin: center right;
          transform-origin: center right;
          animation: loading-1 1.8s linear forwards;
        }
  }
  .progress-bar {
      width: 100%;
      height: 100%;
      background: none;
      border-width: 3px;
      border-style: solid;
      position: absolute;
      top: 0;
  }
}
.circle-progress>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg);
  }
}
.wh-20 {
  width: 20px;
  height: 20px;
}
/*Setting CSS*/




/*CUSTOM CSS*/

.circle-progress.circle-progress-md {
    width: 40px;
    height: 40px !important;
    .progress-value {
        position: absolute;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
        font-size: 12px;
        color: #515B73;
        line-height: 38px;
        text-align: center;
    }
}
.circle-progress.circle-progress-sm {
    width: 34px;
    height: 34px !important;
    .progress-value {
        position: absolute;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
        font-size: 12px;
        color: #515B73;
        line-height: 38px;
        text-align: center;
    }
}



@keyframes growProgressBar {
  0%, 33% { --pgPercentage: 0; }
  100% { --pgPercentage: var(--value); }
}

@property --pgPercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

div[role="progressbarr"] {
  --size: 35px;
  --fg: rgb(19, 170, 82);
  --bg: #def;
  --pgPercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
    conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0)
    ;
  font-family: var(--bs-body-font-family);
  font-size: calc(var(--size) / 5);
  color: var(--fg);
}

div[role="progressbarr"]::before {
counter-reset: percentage var(--value);
  content: counter(percentage) '%';
  font-size: 10px;
  font-weight: 600;
  color: var(--bs-success);
}

























.progress {
    background-color: variables.$light-900;
    height: 0.75rem;
    border-radius: 0.25rem;
}
.progress-stacked {
    background-color: variables.$light-900;
}
.progress-bar {
    color: variables.$white;
    background-color: variables.$primary;
}

@keyframes progress-animate {
    0% {
        width: 0;
    }
}
.progress-animate {
    position: relative;
    border-radius: 0.625rem;
    .progress-bar {
        position: relative;
        border-radius: 0.625rem;
        animation:  2s progress-animate;
    }
}
.progress,.progress-stacked {
    &.progress-xs {
        height: .3125rem;
    }
    &.progress-sm {
        height: 0.5rem;
    }
    &.progress-lg {
        height: 1rem;
    }
    &.progress-xl {
        height: 1.25rem;
    }
}
.progress-vertical {
    min-height: 250px;
    height: 250px;
    width: 10px;
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    margin-right: 20px;

    .progress-bar {
        width: 100%;
    }

    &.progress-xl {
        width: 15px;
    }

    &.progress-lg {
        width: 12px;
    }

    &.progress-sm {
        width: 8px;
    }

    &.progress-xs {
        width: 5px;
    }
}
.progress-vertical-bottom {
    min-height: 250px;
    height: 250px;
    position: relative;
    width: 10px;
    display: inline-block;
    margin-bottom: 0;
    margin-right: 20px;

    .progress-bar {
        width: 100%;
        bottom: 0;
        position: absolute;
    }

    &.progress-xl {
        width: 15px;
    }

    &.progress-lg {
        width: 12px;
    }

    &.progress-sm {
        width: 8px;
    }

    &.progress-xs {
        width: 5px;
    }
}
.progress-custom {
    overflow: visible;
    position: relative;
    .progress-bar {
        position: relative;
        overflow: visible;
        &:after {
            content: "";
            width: 1.15rem;
            height: 1.15rem;
            border-radius: 50%;
            box-shadow: 0 0.313rem 0.313rem rgba(variables.$primary, 0.5);
            background: variables.$white;
            position: absolute;
            inset-inline-end: -0.375rem;
            inset-block-start: -0.375rem;
            border: 0.25rem solid variables.$primary;
        }
        &.bg-secondary:after {
            border: 0.25rem solid variables.$secondary;
            box-shadow: 0 0.313rem 0.313rem rgba(var(--secondary-rgb),0.2);
        }
        &.bg-warning:after {
            border: 0.25rem solid variables.$warning;
            box-shadow: 0 0.313rem 0.313rem rgba(var(--warning-rgb),0.2);
        }
        &.bg-info:after {
            border: 0.25rem solid variables.$info;
            box-shadow: 0 0.313rem 0.313rem rgba(var(--info-rgb),0.2);
        }
        &.bg-success:after {
            border: 0.25rem solid variables.$success;
            box-shadow: 0 0.313rem 0.313rem rgba(var(--success-rgb),0.2);
        }
        &.bg-danger:after {
            border: 0.25rem solid variables.$danger;
            box-shadow: 0 0.313rem 0.313rem rgba(var(--danger-rgb),0.2);
        }
    }
    .progress-bar-value{
        width: 1.875rem;
        height: 1.25rem;
        line-height: 1.25rem;
        border-radius: 0.188rem;
        background: variables.$primary;
        box-shadow: 0 0.313rem 0.313rem rgba(0,0,0,0.4);
        font-size: 0.625rem;
        font-weight: variables.$font-weight-semibold;
        color: variables.$white;
        text-align: center;
        position: absolute;
        inset-block-end: 1.5rem;
        inset-inline-end: -0.688rem;
        &:after{
            content: "";
            border-block-start: 0.438rem solid variables.$primary;
            border-inline-start: 0.438rem solid transparent;
            border-inline-end: 0.438rem solid transparent;
            position: absolute;
            inset-block-end: -0.375rem;
            inset-inline-start: 28%;
        }
        &.bg-secondary {
            background-color: variables.$secondary;
            &:after {
                border-block-start: 0.438rem solid variables.$secondary;
            }
        }
        &.bg-success {
            background-color: variables.$success;
            &:after {
                border-block-start: 0.438rem solid variables.$success;
            }
        }
        &.bg-warning {
            background-color: variables.$warning;
            &:after {
                border-block-start: 0.438rem solid variables.$warning;
            }
        }
        &.bg-danger {
            background-color: variables.$danger;
            &:after {
                border-block-start: 0.438rem solid variables.$danger;
            }
        }
        &.bg-info {
            background-color: variables.$info;
            &:after {
                border-block-start: 0.438rem solid variables.$info;
            }
        }
    }
}
[dir="rtl"] {
    .progress-bar-title{ 
        border-radius: 0 0.313rem 0.313rem 0;
    }
}
.progress-item-1, .progress-item-2, .progress-item-3{
    position:absolute;
	margin-block-start:-0.25rem;
	z-index:1;
	height:0.938rem;
	width:0.938rem;
	border-radius:1.563rem;
    background-color: variables.$light;
}
.progress-item-1{
	inset-inline-start:25%;
}
.progress-item-2{
	inset-inline-start:50%;
}
.progress-item-3{
	inset-inline-start:75%;
}
.custom-progress-3 {
    overflow: visible;
    border-radius: 0.625rem;
    .progress-bar {
        position: relative;
        overflow: visible;
        margin: 0.313rem;
        border-radius: 0.25rem;
        &:before {
            content: "";
            position: absolute;
            width: 0.25rem;
            height: 0.25rem;
            inset-inline-start: 0.125rem;
            background-color: variables.$white;
            border-radius: 50%;
        }
        .progress-bar-value{
            border: 0.125rem solid variables.$primary;
            width: 2.5rem;
            height: 1.563rem;
            line-height: 1.313rem;
            border-radius: 3.125rem;
            background: variables.$white;
            font-size: 0.625rem;
            font-weight: variables.$font-weight-semibold;
            color: variables.$primary;
            text-align: center;
            position: absolute;
            inset-inline-end: -0.625rem;
            &.secondary {
                border: 0.125rem solid variables.$secondary;
                color: variables.$secondary;
            }
            &.warning {
                border: 0.125rem solid variables.$warning;
                color: variables.$warning;
            }
            &.info {
                border: 0.125rem solid variables.$info;
                color: variables.$info;
            }
            &.success {
                border: 0.125rem solid variables.$success;
                color: variables.$success;
            }
            &.danger {
                border: 0.125rem solid variables.$danger;
                color: variables.$danger;
            }
        }
    }
}
.custom-progress-4 {
    &.progress {
        background-color: rgba(variables.$primary, 0.1);
        border-radius: 0.25rem;
        &.secondary {
            background-color: rgba(variables.$secondary, 0.1);
            .progress-bar-label {
                color: variables.$secondary;
            }
        }
        &.warning {
            background-color: rgba(variables.$warning, 0.1);
            .progress-bar-label {
                color: variables.$warning;
            }
        }
        &.info {
            background-color: rgba(variables.$info, 0.1);
            .progress-bar-label {
                color: variables.$info;
            }
        }
        &.success {
            background-color: rgba(variables.$success, 0.1);
            .progress-bar-label {
                color: variables.$success;
            }
        }
        &.danger {
            background-color: rgba(variables.$danger, 0.1);
            .progress-bar-label {
                color: variables.$danger;
            }
        }
        .progress-bar {
            border-radius: 0.25rem;
        }
        .progress-bar-label {
            position: absolute;
            inset-inline-end: 0.313rem;
            font-weight: variables.$font-weight-semibold;
            font-size: 0.813rem;
            color: variables.$primary;
        }
    }
}























@use "sass:color";
@use "../utils/mixins";
@use "../utils/variables";

.btn-primary {
    color: variables.$white;
    background-color: variables.$primary;
    border-color: variables.$primary;
    font-size: variables.$font-size-14;
    font-size: variables.$font-size-14;
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn.show:hover, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background-color: variables.$primary;
    border-color: variables.$primary;
    color: variables.$white;
}
button {
    cursor: pointer;
    &:focus{
        outline: 0;
        box-shadow: none;
    }
}
.btn {
    border-radius: variables.$border-radius-lg;
    padding: 0.5rem 0.85rem;
    font-size: variables.$font-size-14;
    transition: all 0.5s;
    font-weight: variables.$font-weight-medium;
    &:focus {
        box-shadow: none !important;
    }
    &:hover {
        transition: all 0.5s;
    }
    &.btn-lg {
        padding: 0.65rem 1rem;
        font-size: 0.95rem;
    }
    &.btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    &.btn-xs {
        padding: 0.25rem 0.5rem;
        font-size: 0.6rem;
    }
    &.btn-md {
        padding: 0.35rem 0.85rem;
        font-size: 0.813rem;
    }
    @each $color,
    $value in variables.$theme-colors {
        &.btn-#{$color} {
            background-color: #{$value};
            border: 1px solid #{$value};
            color: variables.$white;
            &:hover,
            &:focus,
            &.focus,
            &:active,
            &.active {
                background-color: #{color.adjust($value, $lightness: -8%)};
                border:1px solid #{color.adjust($value, $lightness: -8%)};
                color: variables.$white;
            }
        }
    }
    &.btn-primary {
        background-color: variables.$primary-900;
        border: 1px solid variables.$primary-900;
        color: variables.$white;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: color.adjust(variables.$primary-900, $lightness: -7%);
            border: 1px solid color.adjust(variables.$primary-900, $lightness: -7%);
            color: variables.$white;
        }
    }
    &.btn-light {
        background-color: variables.$light;
        border: 1px solid variables.$light;
        color: variables.$gray-900;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: color.adjust(variables.$light, $lightness: -3%);
            border: 1px solid variables.$light;
            color: variables.$gray-900;
        }
    }
    &.btn-white {
      background-color: variables.$white;
      border-color: variables.$white;
      color: variables.$gray-900;
      &.show {
        background-color: variables.$white;
        border-color: variables.$white;
      }
    }
    &.btn-gray {
      background-color: variables.$gray-200;
      border-color: variables.$gray-200;
      color: variables.$gray-900;
      &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
        background-color: variables.$primary;
        border-color: variables.$primary;
        color: variables.$white;
      }
    }
    &.btn-linear-primary {
        background-image: variables.$primary-gradient;
        border: 1px solid variables.$primary-900;
        color: variables.$white;
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.active {
            background-color: color.adjust(variables.$primary-900, $lightness: -7%);
            border: 1px solid color.adjust(variables.$primary-900, $lightness: -7%);
            color: variables.$white;
        }
    }
}

.btn-group {
    .btn {
      padding: 0.45rem 0.75rem;
    }
  }
  .btn-group-lg {
    .btn {
      padding: 0.65rem 1rem;
    }
  }
  .btn-group-sm {
    .btn {
      padding: 0.25rem 0.5rem;
    }
  }
.btn {
    &.btn-w-xs {
      min-width: 5.625rem;
    }
    &.btn-w-sm {
      min-width: 6.975rem;
    }
    &.btn-w-md {
      min-width: 8.125rem;
    }
    &.btn-w-lg {
      min-width: 9.375rem;
    }
  }
  .btn-icon {
    i {
      padding: 0rem;
      margin: -0.5rem;
    }
    &.btn-xs {
      width: 24px;
      height: 24px;
      font-size: 0.8rem;
    }
    &.btn-sm {
      width: 30px;
    height: 28px;
    font-size: 18px;
    }
    &.btn-lg {
      width: 2.75rem;
      height: 2.75rem;
      font-size: 1.2rem;
    }
  }
  .btn-list {
    > button, > a {
      margin: 0 0.375rem 0.375rem 0;
    }
  }
  [dir="rtl"] {
    .btn-list {
      button,
      div,
      a,
      input {
        margin: 0 0 0.375rem 0.375rem;
      }
    }
  }
  
  .btn-list {
    margin-block-end: -0.5rem;
  }
  .btn-square {
    border-radius: 0;
}
.btn-group-pill .btn:first-child {
    border-radius: 60px 0 0 60px;
  }
  .btn-group-pill .btn:last-child {
    border-radius: 0 60px 60px 0;
  }
  
  .btn-group-square .btn:first-child {
    border-radius: 0px 0 0 0px;
  }
  .btn-group-square .btn:last-child {
    border-radius: 0 0px 0px 0;
  }
.btn {
  &.btn-primary-light {
    background-color: rgba(variables.$primary, 0.1);
    color: variables.$primary;
    &:hover,
    &:focus,
    &:active {
      background-color: variables.$primary;
      color: variables.$white;
      border-color: variables.$primary;
    }
  }
 
  &.btn-secondary-light {
    background-color: rgba(variables.$secondary, 0.1);
    color: variables.$secondary;
    &:hover,
    &:focus,
    &:active {
      background-color: variables.$secondary;
      color: variables.$white;
      border-color: variables.$secondary;
    }
  }
  &.btn-warning-light {
    background-color: rgba(variables.$warning, 0.1);
    color: variables.$warning;
    &:hover,
    &:focus,
    &:active {
      background-color: variables.$warning;
      color: variables.$white;
      border-color: variables.$warning;
    }
  }
  &.btn-info-light {
    background-color: rgba(variables.$info, 0.1);
    color: variables.$info;
    &:hover,
    &:focus,
    &:active {
      background-color: variables.$info;
      color: variables.$white;
      border-color: variables.$info;
    }
  }
  &.btn-success-light {
    background-color: rgba(variables.$success, 0.1);
    color: variables.$success;
    &:hover,
    &:focus,
    &:active {
      background-color: variables.$success;
      color: variables.$white;
      border-color: variables.$success;
    }
  }
  &.btn-danger-light {
    background-color: rgba(variables.$danger, 0.1);
    color: variables.$danger;
    &:hover,
    &:focus,
    &:active {
      background-color: variables.$danger;
      color: variables.$white;
      border-color: variables.$danger;
    }
  }
}
.btn {
  &.btn-primary-ghost {
    background-color: transparent;
    color: variables.$primary;
    border: 1px solid variables.$primary;
    &:active {
      color: variables.$primary;
      border: 1px solid variables.$primary;
      background-color: transparent;
    }
  }
  &.btn-dark{
    background: variables.$gray-900 !important;
    border-color: variables.$gray-900 !important;
    box-shadow: none;
    color: variables.$white;
    &:hover{
      background: #252a30 !important ;
    }
  }
  &.btn-secondary-ghost {
    background-color: transparent;
    color: variables.$secondary;
    border: 1px solid variables.$secondary;
    &:active {
      color: variables.$secondary;
      border: 1px solid variables.$secondary;
      background-color: transparent;
    }
  }
  &.btn-warning-ghost {
    background-color: transparent;
    color: variables.$warning;
    border: 1px solid variables.$warning;
    &:active {
      color: variables.$warning;
      border: 1px solid variables.$warning;
      background-color: transparent;
    }
  }
  &.btn-info-ghost {
    background-color: transparent;
    color: variables.$info;
    border: 1px solid variables.$info;
    &:active {
      color: variables.$info;
      border: 1px solid variables.$info;
      background-color: transparent;
    }
  }
  &.btn-success-ghost {
    background-color: transparent;
    color: variables.$success;
    border: 1px solid variables.$success;
    &:active {
      color: variables.$success;
      border: 1px solid variables.$success;
      background-color: transparent;
    }
  }
  &.btn-danger-ghost {
    background-color: transparent;
    color: variables.$danger;
    border: 1px solid variables.$danger;
    &:active {
      color: variables.$danger;
      border: 1px solid variables.$danger;
      background-color: transparent;
    }
  }
}
.btn-list {
  button {
    margin: 0 0.375rem 0.375rem 0;
  }
}
.btn-group-vertical {
  .btn-check:checked + .btn {
    color: variables.$white !important;
  }
}
.btn-outline-primary {
    border: 1px solid variables.$primary !important;
    color: variables.$primary !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$primary !important;
        border:1px solid variables.$primary !important;
        box-shadow: 0 3px 10px rgba(variables.$primary, 0.5);
        color: variables.$white !important;
    }
}
.btn-outline-secondary {
    border: 1px solid variables.$secondary !important;
    color: variables.$secondary !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$secondary !important;
        border:1px solid variables.$secondary !important;
        box-shadow: 0 3px 10px rgba(variables.$secondary, 0.5);
        color: variables.$white !important;
    }
}
.btn-outline-success {
    border: 1px solid variables.$success !important;
    color: variables.$success !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$success !important;
        border:1px solid variables.$success !important;
        box-shadow: 0 3px 10px rgba(variables.$success, 0.5);
        color: variables.$white !important;
    }
}
.btn-outline-danger {
    border: 1px solid variables.$danger !important;
    color: variables.$danger !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$danger !important;
        border:1px solid variables.$danger !important;
        box-shadow: 0 3px 10px rgba(variables.$danger, 0.5);
        color: variables.$white !important;
    }
}
.btn-outline-warning {
    border: 1px solid variables.$warning !important;
    color: variables.$warning !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$warning !important;
        border:1px solid variables.$warning !important;
        box-shadow: 0 3px 10px rgba(variables.$warning, 0.5);
        color: variables.$white !important;
    }
}
.btn-outline-info {
    border: 1px solid variables.$info !important;
    color: variables.$info !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$info !important;
        border:1px solid variables.$info !important;
        box-shadow: 0 3px 10px rgba(variables.$info, 0.5);
        color: variables.$white !important;
    }
}
.btn-outline-light {
    border: 1px solid variables.$light !important;
    color: variables.$gray-700 !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$light !important;
        border: 1px solid variables.$light !important;
        color: variables.$gray-700 !important;
    }
}
.btn-outline-dark {
    border: 1px solid variables.$dark !important;
    color: variables.$dark !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        background-color: variables.$dark !important;
        border:1px solid variables.$dark !important;
        box-shadow: 0 3px 10px rgba(variables.$dark, 0.5);
        color: variables.$white !important;
    }
}
.btn-soft-primary {
    background-color: variables.$primary-300 !important;
    color: variables.$primary !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$primary, .2);
       border-color: variables.$primary;
    }    
}
.btn-soft-secondary {
    background-color: variables.$secondary-300 !important;
    color: variables.$secondary !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$secondary, .2);
       border-color: variables.$secondary;
    }    
}
.btn-soft-success {
    background-color: variables.$success-300 !important;
    color: variables.$success !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$success, .2);
       border-color: variables.$success;
    }    
}
.btn-soft-danger {
    background-color: variables.$danger-300 !important;
    color: variables.$danger !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$danger, .2);
       border-color: variables.$danger;
    }    
}
.btn-soft-warning {
    background-color: variables.$warning-300 !important;
    color: variables.$warning !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$warning, .2);
       border-color: variables.$warning;
    }    
}
.btn-soft-info {
    background-color: rgba(27, 132, 255, 0.3) !important;
    color: #1B84FF !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(27, 132, 255, .2);
       border-color: #1B84FF !important;
    }    
}
.btn-soft-light {
    background-color: rgba(variables.$light, .9) !important;
    color: variables.$text-color !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$light, .2);
       border-color: variables.$light;
       border-color: variables.$text-color;
    }    
}
.btn-soft-dark {
    background-color: rgba(variables.$dark, 0.3) !important;
    color: variables.$white !important;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
       box-shadow: 0 3px 12px rgba(variables.$dark, .2);
       border-color: variables.$dark;
    }    
}
.primary-hover {
  &:hover {
    background: variables.$primary !important;
    color: variables.$white;
  }
}
.warning-btn-hover {
    &:hover {
        background: variables.$warning !important;
        border-color: variables.$warning !important;
        color: variables.$white;
    }
}
.success-btn-hover {
    &:hover {
        background: variables.$success !important;
        border-color: variables.$success !important;
        color: variables.$white;
    }
}
.danger-btn-hover {
    &:hover {
        background: variables.$danger !important;
        border-color: variables.$danger !important;
        color: variables.$white !important;
    }
}
.secondary-btn-hover {
    &:hover {
        background: variables.$secondary !important;
        border-color: variables.$secondary !important;
        color: variables.$white;
    }
}
.primary-btn-hover {
    &:hover {
        background: variables.$primary !important;
        border-color: variables.$primary !important;
        color: variables.$white !important;
    }
}
.btn {
  @include mixins.respond-below(sm) {
      padding: 5px 12px;
  }
}
.bn-close {
  &.custom-btn-close {
    background-image: none;
  }
}
.btn {
  &.btn-icon {
    &:hover {
      background: variables.$dark-transparent;
      color: variables.$dark;
    }
    &.active.bg-white {
      border-color: variables.$white;
      color: variables.$dark;
    }
    &:active {
      color: variables.$white;
    }
  }
}
.border-purple {
  border-color: variables.$purple !important;
}
.btn-light.btn-icon {
  &:hover {
    background: variables.$primary !important;
    color: variables.$white !important;
  }
}




.table-top-head a {
    height: 30px;
    width: 30px;
    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;
    border: 1px solid #E6EAED;
    background: #ffffff;
    border-radius: 5px;
    padding: 4px;
}

.table-top-head a img {
    width: 15px;
}
.table-top-head a:hover {
    background: rgba(140, 192, 82, 0.15) !important
}





.table .thead-light th {
    background-color: #F9FAFB;
    color: #1B2850;
    font-weight: 600;
    font-size: 14px;
}
.table th {
    vertical-align: middle;
    line-height: 1.462;
}
.bank-box {
    position: relative;
    background: rgba(59, 174, 218, 0.1)!important;
}
.bank-box .active {
    border-color: rgba(59, 174, 218, 0.75)!important;
}
.bank-box.active::after {
    position: absolute;
    top: -8px;
    right: -8px;
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #4ECD7E;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #ffffff;
    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;
}




.btn.btn-info-light {
    background-color: rgba(21, 94, 239, 0.1);
    color: #155EEF;
}
.btn.btn-danger-light {
    background-color: rgba(255, 0, 0, 0.1);
    color: #FF0000;
}




.btn.btn-danger-light:hover {
    background-color: rgba(255, 0, 0, 0.1);
    color: #FF0000;
}





/* =================================================
   Modal Account Type Pills/Tabs
   ================================================= */
.account-type-pills .nav-link {
    padding: 8px 20px;
    color: #495057;
    background-color: #f0f1f3;
    border: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.account-type-pills .nav-link.active {
    background-color: #1572e8;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(21, 114, 239, 0.3);
}

.account-type-pills .nav-item {
    margin: 0 5px;
}







/* View Button Style */
.action-btn-view {
    background-color: rgba(23, 162, 184, 0.1);
    color: #17a2b8;
}
.action-btn-view:hover, .action-btn-view.active {
    background-color: #17a2b8;
}

/* Edit Button Style */
.action-btn-edit {
    background-color: rgba(21, 114, 239, 0.1);
    color: #1572e8;
}
.action-btn-edit:hover, .action-btn-edit.active {
    background-color: #1572e8;
}

/* Delete Button Style */
.action-btn-delete {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}
.action-btn-delete:hover, .action-btn-delete.active {
    background-color: #dc3545;
}


/* =================================================
   MODAL ACCOUNT TYPE PILLS/TABS (FINAL)
   ================================================= */
.account-type-pills .nav-link {
    padding: 10px 25px;
    color: #495057;
    background-color: #f0f1f3;
    border: 1px solid #dee2e6;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.account-type-pills .nav-link .icon {
    margin-right: 8px;
    font-size: 20px;
}

.account-type-pills .nav-link.active {
    background: linear-gradient(45deg, #1572e8, #0DCAF0);
    color: #ffffff;
    border-color: #1572e8;
    box-shadow: 0 4px 12px rgba(21, 114, 239, 0.4);
}

.account-type-pills .nav-item {
    margin: 0 5px;
}


/* =================================================
   STATUS TOGGLE SWITCH (Unchanged)
   ================================================= */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dc3545; /* Inactive color */
  transition: .4s;
  border-radius: 28px;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .toggle-slider {
  background-color: #28a745; /* Active color */
}
input:checked + .toggle-slider:before {
  transform: translateX(22px);
}

/* =================================================
   Invoice Status Badge Styles
   ================================================= */
.status-badge {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    min-width: 90px;
    display: inline-block;
    text-align: center;
}

.status-badge.status-paid { background-color: #28a745; } /* Green */
.status-badge.status-partial { background-color: #ffc107; color: #212529; } /* Yellow */
.status-badge.status-overdue { background-color: #dc3545; } /* Red */
.status-badge.status-sent { background-color: #0d6efd; } /* Blue */
.status-badge.status-draft { background-color: #6c757d; } /* Gray */
.status-badge.status-cancelled { background-color: #343a40; } /* Dark Gray */


/* =================================================
   Invoice Status Badge Styles (Updated with Specificity)
   ================================================= */
#invoice-table .status-badge {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    min-width: 90px;
    display: inline-block;
    text-align: center;
}

#invoice-table .status-badge.status-paid { background-color: #28a745; }
#invoice-table .status-badge.status-partial { background-color: #ffc107; color: #212529; }
#invoice-table .status-badge.status-overdue { background-color: #dc3545; }
#invoice-table .status-badge.status-sent { background-color: #0d6efd; }
#invoice-table .status-badge.status-draft { background-color: #6c757d; }
#invoice-table .status-badge.status-cancelled { background-color: #343a40; }


/* =================================================
   Transaction Type Badge Styles
   ================================================= */
.transaction-badge {
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    text-transform: capitalize;
}
.transaction-badge.debit {
    background-color: rgba(220, 53, 69, 0.8); /* Red */
}
.transaction-badge.credit {
    background-color: rgba(40, 167, 69, 0.8); /* Green */
}


/* =================================================
   Deal Stage Badge Styles
   ================================================= */
.deal-stage-badge {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
}
.deal-stage-badge.won { background-color: #28a745; }
.deal-stage-badge.lost { background-color: #dc3545; }
.deal-stage-badge.in-progress { background-color: #0d6efd; }
.deal-stage-badge.contact-made { background-color: #6c757d; }

/* =================================================
   Lead Status Badge Styles
   ================================================= */
.lead-status-badge {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
}
.lead-status-badge.contacted { background-color: #0d6efd; } /* Blue */
.lead-status-badge.qualified { background-color: #ffc107; color: #000; } /* Yellow */
.lead-status-badge.converted { background-color: #28a745; } /* Green */
.lead-status-badge.lost { background-color: #dc3545; } /* Red */








/* =================================================
   Chart of Accounts - Tree View Styles
   ================================================= */
.tree-table-header {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-bottom: 2px solid #dee2e6;
}
.tree-table-header .col-header {
    padding: 10px 15px;
    font-weight: 600;
    color: #495057;
}
.tree-container ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}
.tree-container li {
    padding: 8px 15px;
    border: 1px solid #f1f1f1;
    border-top: none;
}
.tree-item {
    display: flex;
    align-items: center;
    width: 100%;
}
.tree-item .account-name {
    flex-grow: 1;
}
.tree-item .account-type {
    width: 200px;
    color: #6c757d;
}
.tree-item .account-actions {
    width: 100px;
    text-align: right;
}
.tree-toggle {
    cursor: pointer;
    margin-right: 10px;
    color: #6c757d;
    transition: transform 0.2s ease;
}
.tree-toggle.collapsed {
    transform: rotate(-90deg);
}
.tree-container ul ul {
    padding-left: 25px; /* Indentation for child items */
    display: none; /* Initially hide children */
}











    .comments-section .comment-item {
        display: flex;
        padding: 1rem;
        background-color: #f0f7ff; /* Light blue background */
        border-radius: .5rem;
        margin-bottom: 1rem;
        position: relative;
    }
    .comments-section .comment-avatar {
        width: 40px;
        height: 40px;
        margin-right: 1rem;
    }
    .comments-section .comment-body {
        flex-grow: 1;
    }
    .comments-section .comment-author {
        font-weight: 600;
    }
    .comments-section .comment-meta {
        font-size: 0.8rem;
        color: #6c757d;
    }
    .comments-section .comment-actions {
        position: absolute;
        top: 1rem;
        right: 1rem;
        display: none; /* Hidden by default, shown on hover */
        gap: 0.5rem;
    }
    .comments-section .comment-item:hover .comment-actions {
        display: flex; /* Show on hover */
    }
    .comments-section .comment-actions a {
        color: #6c757d;
    }
    .comments-section .comment-actions a:hover {
        color: #0d6efd;
    }




.kanban-drag-wrap {
  min-width: 230px;
  min-height: 50px;
}
.kanban-list-items {
  border: 1px solid #E8E8E8;
  box-shadow: 0px 4px 4px 0px rgba(219, 219, 219, 0.2509803922);
  border-radius: 5px;
  margin: 0 20px 20px 0;
  padding: 15px;
  width: 100%;
  min-width: 315px;
}







.navstpes,.custom-navstpes,.navstpespills {
    gap: 12px
}

.navstpes .nav-link,.custom-navstpes .nav-link,.navstpespills .nav-link {
    text-align: left;
    background-color: transparent;
    border: 1px solid rgba(var(--secondary),.2);
    display: flex;
    align-items: center;
    border-radius: var(--bs-border-radius);
    padding: 14px 18px;
    font-size: calc(15px + 3 * (100vw - 300px) / 1620);
    color: rgba(var(--dark),.8)
}

.navstpes .nav-link i,.custom-navstpes .nav-link i,.navstpespills .nav-link i {
    font-size: 24px;
    color: rgba(var(--primary));
    background-color: rgba(var(--primary),.1);
    padding: 8px;
    border-radius: 100%;
    border: 1px solid rgba(var(--primary))
}

.navstpes .nav-link:hover,.navstpes .nav-link:focus,.navstpes .nav-link.active,.custom-navstpes .nav-link:hover,.custom-navstpes .nav-link:focus,.custom-navstpes .nav-link.active,.navstpespills .nav-link:hover,.navstpespills .nav-link:focus,.navstpespills .nav-link.active {
    background-color: rgba(var(--primary),.1);
    color: #fff;
    border: 1px solid rgba(var(--primary));
    transition: var(--app-transition)
}

.navstpes .nav-link:hover i,.navstpes .nav-link:focus i,.navstpes .nav-link.active i,.custom-navstpes .nav-link:hover i,.custom-navstpes .nav-link:focus i,.custom-navstpes .nav-link.active i,.navstpespills .nav-link:hover i,.navstpespills .nav-link:focus i,.navstpespills .nav-link.active i {
    color: rgba(var(--white),1);
    background-color: rgba(var(--primary))
}

.custom-navstpes .nav-link:focus,.custom-navstpes .nav-link.active,.navstpespills .nav-link:focus,.navstpespills .nav-link.active {
    color: rgba(var(--primary))
}

.custom-navstpes .nav-link:focus i,.custom-navstpes .nav-link.active i,.navstpespills .nav-link:focus i,.navstpespills .nav-link.active i {
    color: rgba(var(--white),1);
    background-color: rgba(var(--primary))
}

.navstpespills {
    display: grid
}

.navstpespills .nav-link {
    margin-right: 10px
}

.navstpespills .nav-link h5 {
    font-size: calc(12px + 6 * (100vw - 300px) / 1620)
}

.navstpescontent {
    height: 100%;
    padding: 24px;
    border-radius: 5px
}









.meeting-schedule-list li {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
}
.meeting-schedule-list li + li {
  margin-top: 0.938rem;
}
.meeting-schedule-list li .meeting-time {
  min-width: 100px;
}
.meeting-schedule-list li .card {
  width: 100%;
  margin-bottom: 0;
  border: 1px dashed rgba(var(--dark), 0.2);
}
.meeting-schedule-list li .card .card-body {
  padding: 0.75rem;
}
.meeting-schedule-list li .card .card-body p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.meeting-schedule-list li .meeting-schedule-icons {
  display: flex;
  gap: 0.5rem;
}

.draggable-bg {
  border: 2px dashed rgba(var(--dark), 0.2);
  background-color: rgba(var(--light), 0.1);
  border-radius: var(--app-border-radius);
}

.team-chat-header {
  margin: -16px -20px;
  padding: 16px 20px;
  border-top-left-radius: var(--app-border-radius);
  border-top-right-radius: var(--app-border-radius);
}

.team-chat-container {
  width: 100%;
  height: 250px;
  background-image: url(7ad58be5aefaded3330f.jpg);
  background-color: rgba(var(--light), 0.8);
  background-blend-mode: overlay;
  border-radius: var(--app-border-radius);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: auto;
  padding: 0.5rem 1.5rem;
}
.team-chat-container .chatdp {
  left: 0px;
  top: 10px;
}
.team-chat-container .team-chat-box {
  display: flex;
  padding: 10px 0px 0px 50px;
}
.team-chat-container .team-chat-box .team-text-box {
  width: 100%;
  max-width: 280px;
  background-color: var(--white);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  padding: 0.5rem;
  border-radius: 15px;
}
.team-chat-container .team-chat-box .team-text-box .chat-text {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(var(--dark), 0.75);
}
.team-chat-container .team-chat-box .text-muted {
  font-size: 12px;
  font-weight: 400;
  color: rgba(var(--secondary), 1) !important;
}
.team-chat-container .right-side-chat {
  text-align: end;
}
.team-chat-container .right-side-chat .team-chat-box {
  justify-content: end;
  padding: 10px 50px 0 0;
}
.team-chat-container .right-side-chat .team-chat-box .team-text-box {
  background-color: rgba(var(--secondary), 1);
}
.team-chat-container .right-side-chat .team-chat-box .team-text-box .chat-text {
  text-align: start;
  color: var(--white);
}
.team-chat-container .right-side-chat .chatdp {
  right: 0px;
  left: auto;
  top: 10px;
}

.team-chat-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--white);
  margin-top: 0.5rem;
}

.Projects-datatable .dataTables_wrapper table thead th:nth-child(2) {
  min-width: 200px;
}
.Projects-datatable .dataTables_wrapper table thead th:nth-child(4), .Projects-datatable .dataTables_wrapper table thead th:nth-child(9), .Projects-datatable .dataTables_wrapper table thead th:nth-child(7) {
  min-width: 85px;
}
.Projects-datatable .dataTables_wrapper table tbody tr td .badge {
  padding: 0.2rem;
  line-height: 1;
}
.Projects-datatable .dataTables_wrapper table tbody tr td .position-absolute {
  top: 4px;
}
.Projects-datatable .time-tracking-box {
  border: 1px dashed rgba(var(--dark), 0.2);
  border-radius: 0.5rem;
  padding: 0.1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.data-list-box .filebox {
  border: 1px dashed rgba(var(--dark), 0.2);
  border-radius: var(--app-border-radius);
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.6);
  }
}
.milestones-card {
  position: relative;
}
.milestones-card .milestones-image {
  width: 100%;
  height: 130px;
  animation: shakeY 30s ease-in-out infinite;
}
.milestones-card .milestones-image img {
  width: 160px;
  top: -40px;
  transform: translate(-50%);
  left: 50%;
  position: absolute;
}

.project-earning-content p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}







.file-box {
  width: 100%;
  max-width: 240px;
  padding: 0.5rem 1rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(var(--dark), 0.2);
  background-color: rgb(var(--light), 0.1);
  border-radius: 10px;
}
.file-box p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.file-box .position-absolute {
  top: 10px;
}
.file-box .position-absolute img {
  border-radius: 5px;
  padding: 0.4rem;
}
.file-box .position-absolute + div {
  margin-left: 50px;
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.6);
  }
}
.milestones-card {
  position: relative;
}
.milestones-card .milestones-image {
  width: 100%;
  height: 130px;
  animation: shakeY 30s ease-in-out infinite;
}
.milestones-card .milestones-image img {
  width: 160px;
  top: -40px;
  transform: translate(-50%);
  left: 50%;
  position: absolute;
}