/*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 (Font WEIGHT) CSS*/
.fw-100 {
    font-weight: 100!important;
}
.fw-200 {
    font-weight: 200!important;
}
.fw-300 {
    font-weight: 300!important;
}
.fw-400 {
    font-weight: 400!important;
}
.fw-500 {
    font-weight: 500!important;
}
.fw-600 {
    font-weight: 600!important;
}
.fw-700 {
    font-weight: 700!important;
}
.fw-800 {
    font-weight: 800!important;
}
.fw-900 {
    font-weight: 900!important;
}
/*CUSTOM (Font WEIGHT) CSS*/



/*CUSTOM Text Color*/
.text-primary-1 {
    color: #5E9BEB!important;
}
.text-primary-2 {
    color: #4B89DC!important;
}
.text-success-1 {
    color: #9FD369!important;
}
.text-success-2 {
    color: #8CC052!important;
}
.text-base-1 {
    color: #02b729!important;
}
.text-base-2 {
    color: #288429!important;
}
.text-black-1 {
    color: #524C42!important;
}
.text-black-2 {
    color: #525252!important;
}
.text-warning-1 {
    color: #FB6E52!important;
}
.text-warning-2 {
    color: #E9593C!important;
}
.text-primary-1 {
    color: #5E9BEB!important;
}
.text-primary-2 {
    color: #4B89DC!important;
}
.text-primary-1 {
    color: #5E9BEB!important;
}
.text-primary-2 {
    color: #4B89DC!important;
}
/*CUSTOM Text Color*/




/*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.15)!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;
}


/*CUSTOM (Font SIZE) CSS*/
.fs-8 {
    font-size: 8px!important;
}
.fs-9 {
    font-size: 9px!important;
}
.fs-10 {
    font-size: 10px!important;
}
.fs-11 {
    font-size: 11px!important;
}
.fs-12 {
    font-size: 12px!important;
}
.fs-13 {
    font-size: 13px!important;
}
.fs-14 {
    font-size: 14px!important;
}
.fs-15 {
    font-size: 15px!important;
}
.fs-16 {
    font-size: 16px!important;
}
.fs-17 {
    font-size: 17px!important;
}
.fs-18 {
    font-size: 18px!important;
}
.fs-19 {
    font-size: 19px!important;
}
.fs-20 {
    font-size: 20px!important;
}
.fs-21 {
    font-size: 21px!important;
}
.fs-22 {
    font-size: 22px!important;
}
.fs-23 {
    font-size: 23px!important;
}
.fs-24 {
    font-size: 24px!important;
}
.fs-25 {
    font-size: 25px!important;
}
.fs-26 {
    font-size: 26px!important;
}
.fs-27 {
    font-size: 27px!important;
}
.fs-28 {
    font-size: 28px!important;
}
.fs-29 {
    font-size: 29px!important;
}
.fs-30 {
    font-size: 30px!important;
}
.fs-31 {
    font-size: 31px!important;
}
.fs-32 {
    font-size: 32px!important;
}
.fs-33 {
    font-size: 33px!important;
}
.fs-34 {
    font-size: 34px!important;
}
.fs-35 {
    font-size: 35px!important;
}
.fs-36 {
    font-size: 36px!important;
}
.fs-37 {
    font-size: 37px!important;
}
.fs-38 {
    font-size: 38px!important;
}
.fs-39 {
    font-size: 39px!important;
}
.fs-40 {
    font-size: 40px!important;
}





/*HEIGHT CSS*/
.h-12 {
    height: 12px;
}
.h-15 {
    height: 15px;
}
.h-17 {
    height: 17px;
}
.h-20 {
    height: 20px;
}
.h-22 {
    height: 22px;
}
.h-25 {
    height: 25px;
}
.h-27 {
    height: 27px;
}
.h-30 {
    height: 30px;
}
.h-35 {
    height: 35px;
}
.h-40 {
    height: 40px;
}
.h-45 {
    height: 45px;
}










/*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: 20px;
  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: 10px;
  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="progressbar"] {
  --size: 60px;
  --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="progressbar"]::before {
counter-reset: percentage var(--value);
  content: counter(percentage) '%';
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-success);
}









.avatar {
    position: relative;
    display: inline-block
}

.avatar-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.avatar-title {
    width: 100%;
    height: 100%;
    background-color: #6861ce;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.avatar-away::before,.avatar-offline::before,.avatar-online::before {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25%;
    height: 25%;
    border-radius: 50%;
    content: '';
    border: 2px solid #fff
}

.avatar-online::before {
    background-color: #31ce36
}

.avatar-offline::before {
    background-color: #97a2b1
}

.avatar-away::before {
    background-color: #ffad46
}

.avatar {
    width: 3.2rem;
    height: 3.2rem
}

.avatar .border {
    border-width: 3px!important
}

.avatar .rounded {
    border-radius: 6px!important
}

.avatar .avatar-title {
    font-size: 18px
}

.avatar-xs {
    height: 50px;
    width: 50px;
}
.avatar-xs .border {
    border-width: 2px!important
}

.avatar-xs .rounded {
    border-radius: 4px!important
}

.avatar-xs .avatar-title {
    font-size: 12px
}

.avatar-xs.avatar-away::before,.avatar-xs.avatar-offline::before,.avatar-xs.avatar-online::before {
    border-width: 1px
}

.avatar-sm {
  height: 60px!important;
  width: 60px!important;
  border-radius: 5px!important;
}

.avatar-sm .border {
    border-width: 3px!important
}

.avatar-sm .rounded {
    border-radius: 4px!important
}

.avatar-sm .avatar-title {
    font-size: 15px
}

.avatar-sm.avatar-away::before,.avatar-sm.avatar-offline::before,.avatar-sm.avatar-online::before {
    border-width: 2px
}

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

.avatar-lg .border {
    border-width: 3px!important
}

.avatar-lg .rounded {
    border-radius: 8px!important
}

.avatar-lg .avatar-title {
    font-size: 24px
}

.avatar-lg.avatar-away::before,.avatar-lg.avatar-offline::before,.avatar-lg.avatar-online::before {
    border-width: 3px
}

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

.avatar-xl .border {
    border-width: 4px!important
}

.avatar-xl .rounded {
    border-radius: 8px!important
}

.avatar-xl .avatar-title {
    font-size: 28px
}

.avatar-xl.avatar-away::before,.avatar-xl.avatar-offline::before,.avatar-xl.avatar-online::before {
    border-width: 4px
}

.avatar-xxxl {
    width: 125px;
    height: 125px;
}

.avatar-xxl .border {
    border-width: 6px!important
}

.avatar-xxl .rounded {
    border-radius: 8px!important
}

.avatar-xxl .avatar-title {
    font-size: 30px
}

.avatar-xxl.avatar-away::before,.avatar-xxl.avatar-offline::before,.avatar-xxl.avatar-online::before {
    border-width: 4px
}

@media (min-width: 768px) {
    .avatar-xxl {
        width:8rem;
        height: 8rem
    }

    .avatar-xxl .border {
        border-width: 4px!important
    }

    .avatar-xxl .rounded {
        border-radius: 12px!important
    }

    .avatar-xxl .avatar-title {
        font-size: 42px
    }

    .avatar-xxl.avatar-away::before,.avatar-xxl.avatar-offline::before,.avatar-xxl.avatar-online::before {
        border-width: 4px
    }
}

.avatar-group {
    display: inline-flex
}

.avatar-group .avatar+.avatar {
    margin-left: -.75rem
}

.avatar-group .avatar-xs+.avatar-xs {
    margin-left: -.40625rem
}

.avatar-group .avatar-sm+.avatar-sm {
    margin-left: -.625rem
}

.avatar-group .avatar-lg+.avatar-lg {
    margin-left: -1rem
}

.avatar-group .avatar-xl+.avatar-xl {
    margin-left: -1.28125rem
}

.avatar-group .avatar:hover {
    z-index: 1
}

.avatar {
    position: relative;
    height: 2.625rem;
    width: 2.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: $border-radius;
    color: $white;
    font-weight: $font-weight-medium;
    a.badge:hover {
        color: $white;
    }
    img {
        width: 100%;
        height: 100%;
        border-radius: $border-radius;
    }
    &.avatar-rounded {
        border-radius: 50%;
        img {
            border-radius: 50%;
        }
    }
    &.avatar-radius-0 {
        border-radius: 0;
        img {
            border-radius: 0;
        }
    }
    .avatar-badge {
        position: absolute;
        inset-block-start: -4%;
        inset-inline-end: -0.375rem;
        width: 1.4rem;
        height: 1.4rem;
        font-size: 0.625rem;
        border: 2px solid $white;
        border-radius: 50% !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    &.online,&.offline {
        &:before {
            position: absolute;
            content: "";
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            inset-inline-end: 0;
            inset-block-end: 0;
            border: 2px solid $white !important;
            z-index: 1;
        }
    }
    &.online:before {
        background-color: $success;
    }
    &.offline:before {
        background-color: $gray-500;
    }
    &.avatar-xs {
        width: 30px;
        height: 30px;
        line-height: 1.25rem;
        font-size: 0.65rem;
        .avatar-badge {
            padding: 0.25rem;
            width:  1rem;
            height: 1rem;
            line-height: 1rem;
            font-size: 0.5rem;
            inset-block-start: -25%;
            inset-inline-end: -0.5rem;
        }
    }
    &.avatar-sm {
        width: 30px;
        height: 30px;
        line-height: 1.5rem;
        font-size: 0.65rem;
        .avatar-badge {
            padding: 0.3rem;
            width:  1.1rem;
            height: 1.1rem;
            line-height: 1.1rem;
            font-size: 0.5rem;
            inset-block-start: -28%;
            inset-inline-end: -0.45rem;
        }
        &.online,&.offline {
            &:before {
                width: 0.5rem;
                height: 0.5rem;
            }
        }    
    }
    &.avatar-md {
        width: 40px;
        height: 40px;
        line-height: 2rem;
        font-size: 0.8rem;
        .avatar-badge {
            padding: 0.4rem;
            width:  1.2rem;
            height: 1.2rem;
            line-height: 1.2rem;
            font-size: 0.65rem;
            inset-block-start: -6%;
            inset-inline-end: -13%;
        }
        &.online,&.offline {
            &:before {
                width: 0.75rem;
                height: 0.75rem;
            }
        }    
        svg {
            width: 1.5rem;
            height: 1.5rem;
        }
    }
    &.avatar-lg {
        width: 2.813rem;
        height: 2.813rem;
        line-height: 2.813rem;
        font-size: 1rem;
        .avatar-badge {
            inset-block-start: -15%;
            inset-inline-end: -0.25%;
        }
        &.online,&.offline {
            &:before {
                width: 0.8rem;
                height: 0.8rem;
            }
        }    
        svg {
            width: 1.8rem;
            height: 1.8rem;
        }
    }
    &.avatar-xl {
        width: 3.6rem;
        height: 3.6rem;
        line-height: 3.6rem;
        font-size: 1.25rem;
        .avatar-badge {
            inset-block-start: -8%;
            inset-inline-end: -0.2%;
        }
        &.online,&.offline {
            &:before {
                width: 0.95rem;
                height: 0.95rem;
            }
        }    
    }
    &.avatar-xxl {
        width: 5rem;
        height: 5rem;
        line-height: 5rem;
        font-size: 1.5rem;
        .avatar-badge {
            inset-block-start: -4%;
            inset-inline-end: 0rem;
        }
        &.online,&.offline {
            &:before {
                width: 1.05rem;
                height: 1.05rem;
                inset-block-end: 0.25rem;
            }
        }    
    }
    &.avatar-xxxl {
        width: 6rem;
        height: 6rem;
        line-height: 6rem;
        font-size: 1.75rem;
        .avatar-badge {
            inset-block-start: -4%;
            inset-inline-end: 0rem;
        }
        &.online,&.offline {
            &:before {
                width: 1.05rem;
                height: 1.05rem;
                inset-block-end: 0.25rem;
            }
        }    
    }
}
.avatar-list-stacked {
    padding: 0;
    &.avatar-group-overlapped {
        .avatar {
            margin-right: -.875rem;
            &:hover{
                z-index:1;
            }
        }
    }	
    &.avatar-group-lg {
        .avatar { 
            width: 3.25rem;
            height: 3.25rem;
            >.initial-wrap {
                font-size: .95rem;
            }
        }
        &.avatar-group-overlapped .avatar {
            margin-right: -1rem;
        }	
    }
    &.avatar-group-sm {
        .avatar { 
            width: 1.5rem;
            height: 1.5rem;
            >.initial-wrap {
                font-size: .6rem;
            }
        }
        &.avatar-group-overlapped .avatar {
            margin-right: -0.625rem;
        }	
    }
    &.avatar-group-xs {
        .avatar { 
            width: 1rem;
            height: 1rem;
            margin-inline-end: -6px !important;
            >.initial-wrap {
                font-size: .6rem;
            }
        }
        &.avatar-group-overlapped .avatar {
            margin-right: -6px;
        }	
    }
    .avatar {
        margin-inline-end: -0.875rem !important;
        border: 1px solid rgba(0,0,0,0.05);
        vertical-align: middle;
        transition: transform ease 200ms;
        &:last-child {
            margin-inline-end: 0 !important;
        }
        &:hover {
            z-index: 1;
            transform: translateY(-0.188rem);
        }
    }
}
.avatar-group {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	.avatar { 
		width: 2.625rem;
		height: 2.625rem;
		.avatar-img,
		>.initial-wrap {
			border:2px solid $white;
			font-size: .9rem;
		}
	}
	&.avatar-group-overlapped {
		.avatar {
			margin-right: -.875rem;
			&:hover{
				z-index:1;
			}
		}
	}	
	&.avatar-group-lg {
		.avatar { 
			width: 3.25rem;
			height: 3.25rem;
			>.initial-wrap {
				font-size: .95rem;
			}
		}
		&.avatar-group-overlapped .avatar {
			margin-right: -1rem;
		}	
	}
	&.avatar-group-sm {
		.avatar { 
			width: 2rem;
			height: 2rem;
			>.initial-wrap {
				font-size: .6rem;
			}
		}
		&.avatar-group-overlapped .avatar {
			margin-right: -0.625rem;
		}	
	}
}
.avatar {
    &.avatar-xl {
        &.border {
            &.online {
                &::before {
                    width: 10px;
                    height: 10px;
                    inset-inline-end:5px;
                }
            }
        }
    }
}
.avatar-xxxl.candidate-img {
    width: 135px;
    height: 135px;
}


/*Commonly USED CSS*/
.page-top-counter-common-box{
padding: 20px 25px;
  background: #F1F0E8;
}
.page-top-counter-common{
    display: flex;
  background: #fff;
  padding: 12px 5px;
  border-radius: 5px;
  flex: 0 0 inherit;
  /*gap: 10px;*/
  box-shadow: 0px 0px 7px 2px rgba(21, 114, 232, .1);
}
.page-top-counter-common i{
font-size: 18px;
  padding: 10px;
  margin-right: 5px;
}
.team-show-box {
  background: #E9F6FF;
  border-radius: 5px;
  box-shadow: 5px 5px 5px 0px rgba(21, 114, 232, .2);
}
.product-info-add-button{
background: #08C2FF;
  font-size: 13px;
  font-weight: 500;
  color: #fff!important;
  border-radius: 0 10px 10px 10px;
  align-items: center;
  height: 35px;
  display: inline-block;
  padding: 7px 20px;
  float: right;
  margin-top: -95px;
}
.product-info-add-button i{
font-size: 14px;
  position: relative;
  bottom: -1px;
  margin-right: 4px;
}
.product-info-add-button:hover{
    background: #0D92F4;
}
.backup-down-btn{
    font-size: 25px;
  /*position: relative;*/
  /*top: 1px;*/
  color: rgb(117, 134, 148);
}
.scrollspy-example {
  position:relative;
  height:500px;
  margin-top:.5rem;
  overflow:auto
}
.scrollspy-example-2 {
  position:relative;
  height:100%;
  overflow:auto
}
.setting-title-s{
font-size: 16px!important;
  font-weight: 500!important;
  color: #640D5F;
  text-align: center;
  line-height: 0;
  margin: 5px 0;
}
.setting-card-1{
    box-shadow: 0px 0px 7px 2px rgba(21, 114, 232, .2);
}
.setting-button-1{
background: #AD49E1;
  font-size: 12px;
  font-weight: 400;
  color: #fff!important;
  border-radius: 6px;
  align-items: center;
  height: 30px;
  display: inline-block;
  padding: 5px 15px;
}
.setting-button-1 i{
font-size: 15px;
  position: relative;
  bottom: -1px;
  margin-right: 5px;
}
.setting-button-1:hover{
 background: #7A1CAC;
}

.user-access-card{
    background: #F2F9FF;
  margin: 16px 0;
  border-radius: 7px;
  padding: 10px 5px 15px;
}



















/*CLIENT CSS*/











/*Commonly USED CSS*/
































































.punch-button{
    background:#5CB338;
  border-radius:5px;
  font-size: 15px;
  line-height: 0;
  padding:18px 20px;
  color: #fff;
  font-weight: 500;
}
.punch-button:hover{
    background: #5B913B;
    color:#fff!important;
}

.punch-out-button{
    background:#f7891e;
  border-radius:5px;
  font-size: 15px;
  line-height: 0;
  padding:18px 20px;
  color: #fff;
  font-weight: 500;
}
.punch-out-button:hover{
    background: #F26522;
}

.production-hr{
background:#640D5F;
  border-radius:5px;
  font-size: 13px;
  line-height: 0;
  padding:15px 25px;
  color: #fff;
  font-weight: 500;
  width: 60%;
  text-align: center;
  display: inline-block;
  margin:20px 0 15px;
}

.shadow-1{
    box-shadow: 0px 0px 5px 3px rgba(21, 114, 232, .2);
}

.point-devider-1{
    position: relative;
    top:7px;
}

.attendance-counter-card{
  padding: 10px;
  box-shadow: 0px 0px 7px 0px rgba(21, 114, 232, .3);
  border-radius: 8px;
  margin: 0 0 20px;
}
.attendance-counter{

}
.attendance-counter ul{
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 8px;
}
.attendance-counter ul li{

}

.attendance-counter-icon-1{
  font-size: 25px;
  color: #fff;
  background: #16404D;
  line-height: 0;
  height: 45px;
  width: 45px;
  align-content: center;
  text-align: center;
  border-radius: 7px;
}
.attendance-counter-icon-2{
  background: #441752;
  font-size: 25px;
  color: #fff;
  line-height: 0;
  height: 45px;
  width: 45px;
  align-content: center;
  text-align: center;
  border-radius: 7px;
}
.attendance-counter-icon-3{
  background: #674636;
  font-size: 25px;
  color: #fff;
  line-height: 0;
  height: 45px;
  width: 45px;
  align-content: center;
  text-align: center;
  border-radius: 7px;
}
.attendance-counter-icon-4{
  background: #f7891e;
  font-size: 25px;
  color: #fff;
  line-height: 0;
  height: 45px;
  width: 45px;
  align-content: center;
  text-align: center;
  border-radius: 7px;
}

.attendance-counter-title-1{
font-size: 15px;
  font-weight: 500;
  margin: 0;
    margin-bottom: 0px;
  margin-bottom: 0px;
  color: #640D5F;
}
.attendance-counter-value-1{
  font-size: 18px;
  font-weight: 600;
  margin: 0;
    margin-bottom: 0px;
  margin-bottom: 0px;
  color: #16404D;
  margin-bottom: 0;
}
.attendance-counter-value-1 span{
  font-size: 15px;
  font-weight: 600;
  margin: 0;
    margin-bottom: 0px;
  margin-bottom: 0px;
  color: #5E686D;
  margin-bottom: 0;
}


.attendance-progress-value-1{
  font-size: 12px;
  font-weight: 300;
  padding: 0;
  margin: 0;
  color: #4C585B;
}
.attendance-progress-icon-box{

}
.attendance-progress-icon{
font-size: 12px;
  color: #fff;
  background: #5D8736;
  line-height: 0;
  height: 20px;
  width: 30px;
  align-content: center;
  text-align: center;
  border-radius: 10px;
}
.attendance-progress-icon-2{
font-size: 12px;
  color: #fff;
  background: #A31D1D;
  line-height: 0;
  height: 20px;
  width: 30px;
  align-content: center;
  text-align: center;
  border-radius: 10px;
}
.attendance-progress-icon-box ul{
  display: flex;
  list-style: none;
  margin: 10px 0 0;
  padding: 5px 0 0;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #A9BFA8;
  justify-content: space-between;
}
.attendance-progress-icon-box ul li{

}
.emp-attendance-title{
  font-size: 16px;
  font-weight: 600;
  color: #001A6E;
  text-align: center;
  line-height: 25px;
  margin: 0;
}
.emp-attendance-title2{
font-size: 15px;
  font-weight: 500;
  color: #640D5F;
  text-align: center;
  line-height: 20px;
  margin:5px 0 5px;
}
.emp-designation-bg{
background: #E8F9FF;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  padding:10px 15px;
  line-height: 0;
  border-radius:5px;
  display: block;
  margin:0 0 3px;
  color: #640D5F;
}
.emp-attendance-subtitle{
  font-size: 13.5px;
  font-weight: 300;
  color: #640D5F;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 22px;
}
.emp-attendance-time{
  font-size: 13px;
  font-weight: 500;
  color: #640D5F;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 22px; 
}
.employee-avater-large{
  height: 100px;
  width: 100px;
  margin: 5px auto 15px;
}
.manual-attendance-box{
  padding: 0;
  margin: 20px 0 0;
}
.manual-attendance-box ul{
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.manual-attendance-box ul li{
   flex: 0 0 48%;
}
.manual-attendance-btn-1{
  font-size: 13px;
  font-weight: 500;
  background: #3E7B27;
  padding: 5px;
  display: block;
  width: 100%;
  border-radius: 5px;
  text-align: center;
  color: #fff;
}
.manual-attendance-btn-1:hover{
    background: #355F2E;
}
.manual-attendance-btn-2{
  font-size: 13px;
  font-weight: 500;
  background: #F29F58;
  padding: 5px;
  display: block;
  width: 100%;
  border-radius: 5px;
  text-align: center;
  color: #fff;
}
.manual-attendance-btn-2:hover{
  background: #f7891e;
}

.dropzone .dz-message {
  text-align: center;
  margin: 0!important;
}
.team-details-button{
display: flex;
  justify-content: space-around;
  background: #E8F9FF;
  padding: 5px 0;
  border-radius: 5px;
  text-align: center;
  align-items: center;
  width: 75%;
  margin: 15px auto;
}
.team-details-button:hover{
  background: #0D92F4;
  color: #fff;
}
.team-details-button:hover a{
  color: #fff;
}
.team-details-button:hover .team-details-stats .project-menue i{
  color: #fff;
}
.team-details-button a{
  font-size: 13.5px!important;
  font-weight: 500!important;
  color: #006BFF;
}
.team-details-stats{
  margin-bottom: 0!important;
  padding: 0 5px;
  margin-top: 0px;
  text-align: center;
}
.team-details-stats [class^=col] {
  border-right:1px solid #A0D683;
}
.team-details-stats [class^=col]:last-child {
    border-right: 0
}
.team-details-stats .number {
font-weight: 600;
  font-size: 18px;
  line-height: 35px;
}

.team-details-stats .title {
font-weight: 400;
  font-size: 13.5px;
  line-height: 15px;
  color: #705C53;
}
.team-details-stats .project-menue i{
  font-size: 18px;
  color: #f7891e;
  position: relative;
  top: 2px;
}
.login-tagline{
font-weight: 500;
  font-size: 18px;
  line-height: 35px;
    color: #f7891e;
}
.login-form-box{
 padding: 35px 25px!important;
}
.login-form-area{

}

.welcome-wrap {
    padding:15px!important;
    background: linear-gradient(90deg, #FF6F28 0%, #FF5325 100%)!important;
    border-radius: 5px!important;
    position: relative!important;
    z-index: 1;
}
.custom-th-title{
font-size: 12.5px;
  font-weight: 500;
  color: #640D5F;
  line-height: 1;
  margin: 0;
  padding-bottom: 7px;
}




/*Custom CSS BMS Final v-0.1*/
.pipeline-section-1 ul{
    display: flex;
  list-style: none;
  gap: 15px;
  margin: 0;
  padding: 0;
  justify-content: space-between;
}
.pipeline-section-1 ul li{
    min-width: 10%;
}

.pipeline-title-1{
    font-size: 13.5px;
  font-weight: 500;
  color: #640D5F;
  margin: 0 0 5px;
  line-height: 15px;
}
.pipeline-title-2{
font-size: 13px;
  font-weight: 400;
  color: #414042;
  margin: 0;
    margin-bottom: 0px;
  line-height: 18px;
  margin-bottom: 7px;
  border-bottom: 1px solid;
}
.pipeline-title-3{
    font-size: 16px;
  font-weight: 500;
  color: #640D5F;
  line-height: 15px;
}
.add-button-small{
font-size: 12px;
  font-weight: 400;
  padding-bottom: 3px;
  color: #640D5F;
}
.add-button-small:hover{
font-size: 12px;
  font-weight: 500;
  padding-bottom: 3px;
  color: #640D5F;
}
.client-details-title-1{
font-size: 13px;
  font-weight: 500;
  color: #640D5F;
  margin: 0;
    margin-bottom: 0px;
  line-height: 18px;
  margin-bottom: 7px;
}
.client-details-title-2{
font-size: 13px;
  font-weight: 400;
  color: #640D5F;
  margin: 0;
    margin-bottom: 0px;
  line-height: 18px;
  margin-bottom: 7px;
}
.client-details-title-3{
font-size: 13px;
  font-weight: 300;
  color: #640D5F;
  margin: 0;
    margin-bottom: 0px;
  line-height: 18px;
  margin-bottom: 7px;
}




/*RIBON CSS*/
.ribbon-box {
    position: relative
}

.ribbon-box .ribbon {
    padding: 5px 12px;
    -webkit-box-shadow: 2px 5px 10px rgba(var(--vz-dark-rgb),.15);
    box-shadow: 2px 5px 10px rgba(var(--vz-dark-rgb),.15);
    color: #fff;
    font-size: var(--vz-font-base);
    font-weight: var(--vz-font-weight-semibold);
    position: absolute;
    left: -1px;
    top: 5px
}

.ribbon-box .ribbon.round-shape {
    border-radius: 0 30px 30px 0
}

.ribbon-box .ribbon.ribbon-shape {
    display: inline-block
}

.ribbon-box .ribbon.ribbon-shape::before {
    content: "";
    position: absolute;
    right: -17px;
    top: 0;
    border: 14px solid transparent
}

.ribbon-box .ribbon.ribbon-shape::after {
    content: "";
    position: absolute;
    right: -17px;
    bottom: 0;
    border: 14px solid transparent
}

.ribbon-box.ribbon-circle .ribbon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 20px;
    top: 20px
}

.ribbon-box.ribbon-fill {
    overflow: hidden
}

.ribbon-box.ribbon-fill .ribbon {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 93px;
    height: 52px;
    left: -36px;
    top: -16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.ribbon-box.ribbon-fill.ribbon-sm .ribbon {
    padding: 2px 12px;
    width: 78px;
    height: 42px;
    font-size: 12px;
    -webkit-box-shadow: none;
    box-shadow: none
}

.ribbon-box.right .ribbon {
    position: absolute;
    left: auto;
    right: 0
}

.ribbon-box.right .ribbon.round-shape {
    border-radius: 30px 0 0 30px
}

.ribbon-box.right .ribbon.ribbon-shape {
    text-align: right
}

.ribbon-box.right .ribbon.ribbon-shape::after,.ribbon-box.right .ribbon.ribbon-shape::before {
    right: auto;
    left: -17px;
    border-left-color: transparent
}

.ribbon-box.right.ribbon-circle .ribbon {
    left: auto;
    right: 20px
}

.ribbon-box.right .icon-ribbon {
    right: 24px;
    left: auto
}

.ribbon-box.right.ribbon-fill .ribbon {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: -38px;
    left: auto
}

.ribbon-box.right.ribbon-box .ribbon-two {
    left: auto;
    right: -5px
}

.ribbon-box.right.ribbon-box .ribbon-two span {
    left: auto;
    right: -21px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.ribbon-box .ribbon-content {
    clear: both
}

.ribbon-box .icon-ribbon {
    -webkit-box-shadow: none;
    box-shadow: none;
    left: 24px;
    top: -12px;
    font-size: 40px;
    padding: 0
}

.ribbon-box .ribbon-two {
    position: absolute;
    left: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right
}

.ribbon-box .ribbon-two span {
    font-size: 13px;
    color: #fff;
    text-align: center;
    line-height: 20px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 100px;
    display: block;
    -webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,.06),0 1px 0 0 rgba(0,0,0,.02);
    box-shadow: 0 0 8px 0 rgba(0,0,0,.06),0 1px 0 0 rgba(0,0,0,.02);
    position: absolute;
    top: 19px;
    left: -21px;
    font-weight: var(--vz-font-weight-semibold)
}

.ribbon-box .ribbon-two span:before {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    z-index: -1;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent
}

.ribbon-box .ribbon-two span:after {
    content: "";
    position: absolute;
    right: 0;
    top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent
}

.ribbon-box.right .ribbon-three {
    position: absolute;
    top: -6.1px;
    right: 10px;
    left: auto
}

.ribbon-three {
    position: absolute;
    top: -6.1px;
    left: 10px
}

.ribbon-three span {
    position: relative;
    display: block;
    text-align: center;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    padding: 12px 8px 10px;
    border-top-right-radius: 8px;
    width: 90px
}

.ribbon-three span::after,.ribbon-three span::before {
    position: absolute;
    content: ""
}

.ribbon-three span::before {
    height: 6px;
    width: 6px;
    left: -6px;
    top: 0
}

.ribbon-three span::after {
    height: 6px;
    width: 8px;
    left: -8px;
    top: 0;
    border-radius: 8px 8px 0 0
}

.ribbon-three::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 44px solid transparent;
    border-right: 44px solid transparent;
    border-top: 10px solid
}

.ribbon-box .trending-ribbon {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.ribbon-box .trending-ribbon .trending-ribbon-text {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    opacity: 0
}

.ribbon-box:hover .trending-ribbon {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.ribbon-box:hover .trending-ribbon .trending-ribbon-text {
    opacity: 1
}

.ribbon-box.right .trending-ribbon {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.ribbon-box.right .trending-ribbon .trending-ribbon-text {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    opacity: 0
}

.ribbon-box.right:hover .trending-ribbon {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.ribbon-box.right:hover .trending-ribbon .trending-ribbon-text {
    opacity: 1
}

.ribbon-three-primary span {
    background: #5E9BEB;
}

.ribbon-three-primary span:before {
    background: #5E9BEB;
}

.ribbon-three-primary span:after {
    background: #5E9BEB
}

.ribbon-three-primary::after {
    border-top-color: #5E9BEB;
}

.ribbon-box .ribbon-primary {
    background: #5E9BEB;
}

.ribbon-box .ribbon-primary:before {
    border-color: #5E9BEB transparent transparent
}

.ribbon-box .ribbon-primary.ribbon-shape::before {
    border-left-color: #5E9BEB;
    border-top-color: #5E9BEB;
}

.ribbon-box .ribbon-primary.ribbon-shape::after {
    border-left-color: #5E9BEB;
    border-bottom-color: #5E9BEB;
}

.ribbon-box.right .ribbon-primary {
    background: #5E9BEB;
}

.ribbon-box.right .ribbon-primary.ribbon-shape::before {
    border-right-color: #5E9BEB;
    border-top-color: #5E9BEB;
}

.ribbon-box.right .ribbon-primary.ribbon-shape::after {
    border-right-color: #5E9BEB;
    border-bottom-color: #5E9BEB;
}

.ribbon-two-primary span {
    background: #5E9BEB;
}

.ribbon-two-primary span:before {
    border-left: 3px solid #5E9BEB;
    border-top: 3px solid #5E9BEB
}

.ribbon-two-primary span:after {
    border-right: 3px solid #5E9BEB;
    border-top: 3px solid #5E9BEB
}

.ribbon-three-secondary span {
    background: var(--vz-secondary)
}

.ribbon-three-secondary span:before {
    background: var(--vz-secondary)
}

.ribbon-three-secondary span:after {
    background: var(--vz-secondary-text-emphasis)
}

.ribbon-three-secondary::after {
    border-top-color: var(--vz-secondary)
}

.ribbon-box .ribbon-secondary {
    background: var(--vz-secondary)
}

.ribbon-box .ribbon-secondary:before {
    border-color: var(--vz-secondary-text-emphasis) transparent transparent
}

.ribbon-box .ribbon-secondary.ribbon-shape::before {
    border-left-color: var(--vz-secondary);
    border-top-color: var(--vz-secondary)
}

.ribbon-box .ribbon-secondary.ribbon-shape::after {
    border-left-color: var(--vz-secondary);
    border-bottom-color: var(--vz-secondary)
}

.ribbon-box.right .ribbon-secondary {
    background: var(--vz-secondary)
}

.ribbon-box.right .ribbon-secondary.ribbon-shape::before {
    border-right-color: var(--vz-secondary);
    border-top-color: var(--vz-secondary)
}

.ribbon-box.right .ribbon-secondary.ribbon-shape::after {
    border-right-color: var(--vz-secondary);
    border-bottom-color: var(--vz-secondary)
}

.ribbon-two-secondary span {
    background: var(--vz-secondary)
}

.ribbon-two-secondary span:before {
    border-left: 3px solid var(--vz-secondary-text-emphasis);
    border-top: 3px solid var(--vz-secondary-text-emphasis)
}

.ribbon-two-secondary span:after {
    border-right: 3px solid var(--vz-secondary-text-emphasis);
    border-top: 3px solid var(--vz-secondary-text-emphasis)
}

.ribbon-three-success span {
    background: #9FD369;
}

.ribbon-three-success span:before {
    background: #9FD369;
}

.ribbon-three-success span:after {
    background: #9FD369;
}

.ribbon-three-success::after {
    border-top-color: #9FD369;
}

.ribbon-box .ribbon-success {
    background: #9FD369;
}

.ribbon-box .ribbon-success:before {
    border-color: #9FD369; transparent transparent
}

.ribbon-box .ribbon-success.ribbon-shape::before {
    border-left-color: #9FD369;;
    border-top-color: #9FD369;
}

.ribbon-box .ribbon-success.ribbon-shape::after {
    border-left-color: #9FD369;;
    border-bottom-color: #9FD369;
}

.ribbon-box.right .ribbon-success {
    background: #9FD369;
}

.ribbon-box.right .ribbon-success.ribbon-shape::before {
    border-right-color: #9FD369;;
    border-top-color: #9FD369;
}

.ribbon-box.right .ribbon-success.ribbon-shape::after {
    border-right-color: #9FD369;;
    border-bottom-color: #9FD369;
}

.ribbon-two-success span {
    background: #9FD369;
}

.ribbon-two-success span:before {
    border-left: 3px solid #9FD369;
    border-top: 3px solid #9FD369;
}

.ribbon-two-success span:after {
    border-right: 3px solid #9FD369;
    border-top: 3px solid #9FD369;
}

.ribbon-three-info span {
    background: #5E9BEB;
}

.ribbon-three-info span:before {
    background: #5E9BEB;
}

.ribbon-three-info span:after {
    background: #5E9BEB;
}

.ribbon-three-info::after {
    border-top-color: #5E9BEB;
}

.ribbon-box .ribbon-info {
    background: #5E9BEB;
}

.ribbon-box .ribbon-info:before {
    border-color: #5E9BEB; 
}

.ribbon-box .ribbon-info.ribbon-shape::before {
    border-left-color: #5E9BEB;
    border-top-color: #5E9BEB;
}

.ribbon-box .ribbon-info.ribbon-shape::after {
    border-left-color: #5E9BEB;
    border-bottom-color: #5E9BEB;
}

.ribbon-box.right .ribbon-info {
    background: #5E9BEB;
}

.ribbon-box.right .ribbon-info.ribbon-shape::before {
    border-right-color: #5E9BEB;
    border-top-color: #5E9BEB;
}

.ribbon-box.right .ribbon-info.ribbon-shape::after {
    border-right-color: #5E9BEB;
    border-bottom-color: #5E9BEB;
}

.ribbon-two-info span {
    background: #5E9BEB;
}

.ribbon-two-info span:before {
    border-left: 3px solid #5E9BEB;
    border-top: 3px solid #5E9BEB;
}

.ribbon-two-info span:after {
    border-right: 3px solid #5E9BEB;
    border-top: 3px solid #5E9BEB;
}

.ribbon-three-warning span {
    background: #FB6E52;
}

.ribbon-three-warning span:before {
    background: #FB6E52;
}

.ribbon-three-warning span:after {
    background: #FB6E52;
}

.ribbon-three-warning::after {
    border-top-color: #FB6E52;
}

.ribbon-box .ribbon-warning {
    background: #FB6E52;
}

.ribbon-box .ribbon-warning:before {
    border-color: #FB6E52; transparent transparent
}

.ribbon-box .ribbon-warning.ribbon-shape::before {
    border-left-color: #FB6E52;;
    border-top-color: #FB6E52;
}

.ribbon-box .ribbon-warning.ribbon-shape::after {
    border-left-color: #FB6E52;;
    border-bottom-color: #FB6E52;
}

.ribbon-box.right .ribbon-warning {
    background: #FB6E52;
}

.ribbon-box.right .ribbon-warning.ribbon-shape::before {
    border-right-color: #FB6E52;;
    border-top-color: #FB6E52;
}

.ribbon-box.right .ribbon-warning.ribbon-shape::after {
    border-right-color: #FB6E52;;
    border-bottom-color: #FB6E52;
}

.ribbon-two-warning span {
    background: #FB6E52;
}

.ribbon-two-warning span:before {
    border-left: 3px solid #FB6E52;
    border-top: 3px solid #FB6E52;
}

.ribbon-two-warning span:after {
    border-right: 3px solid #FB6E52;
    border-top: 3px solid #FB6E52;
}

.ribbon-three-danger span {
    background: var(--vz-danger)
}

.ribbon-three-danger span:before {
    background: var(--vz-danger)
}

.ribbon-three-danger span:after {
    background: var(--vz-danger-text-emphasis)
}

.ribbon-three-danger::after {
    border-top-color: var(--vz-danger)
}

.ribbon-box .ribbon-danger {
    background: var(--vz-danger)
}

.ribbon-box .ribbon-danger:before {
    border-color: var(--vz-danger-text-emphasis) transparent transparent
}

.ribbon-box .ribbon-danger.ribbon-shape::before {
    border-left-color: var(--vz-danger);
    border-top-color: var(--vz-danger)
}

.ribbon-box .ribbon-danger.ribbon-shape::after {
    border-left-color: var(--vz-danger);
    border-bottom-color: var(--vz-danger)
}

.ribbon-box.right .ribbon-danger {
    background: var(--vz-danger)
}

.ribbon-box.right .ribbon-danger.ribbon-shape::before {
    border-right-color: var(--vz-danger);
    border-top-color: var(--vz-danger)
}

.ribbon-box.right .ribbon-danger.ribbon-shape::after {
    border-right-color: var(--vz-danger);
    border-bottom-color: var(--vz-danger)
}

.ribbon-two-danger span {
    background: var(--vz-danger)
}

.ribbon-two-danger span:before {
    border-left: 3px solid var(--vz-danger-text-emphasis);
    border-top: 3px solid var(--vz-danger-text-emphasis)
}

.ribbon-two-danger span:after {
    border-right: 3px solid var(--vz-danger-text-emphasis);
    border-top: 3px solid var(--vz-danger-text-emphasis)
}

.ribbon-three-light span {
    background: var(--vz-light)
}

.ribbon-three-light span:before {
    background: var(--vz-light)
}

.ribbon-three-light span:after {
    background: var(--vz-light-text-emphasis)
}

.ribbon-three-light::after {
    border-top-color: var(--vz-light)
}

.ribbon-box .ribbon-light {
    background: var(--vz-light)
}

.ribbon-box .ribbon-light:before {
    border-color: var(--vz-light-text-emphasis) transparent transparent
}

.ribbon-box .ribbon-light.ribbon-shape::before {
    border-left-color: var(--vz-light);
    border-top-color: var(--vz-light)
}

.ribbon-box .ribbon-light.ribbon-shape::after {
    border-left-color: var(--vz-light);
    border-bottom-color: var(--vz-light)
}

.ribbon-box.right .ribbon-light {
    background: var(--vz-light)
}

.ribbon-box.right .ribbon-light.ribbon-shape::before {
    border-right-color: var(--vz-light);
    border-top-color: var(--vz-light)
}

.ribbon-box.right .ribbon-light.ribbon-shape::after {
    border-right-color: var(--vz-light);
    border-bottom-color: var(--vz-light)
}

.ribbon-two-light span {
    background: var(--vz-light)
}

.ribbon-two-light span:before {
    border-left: 3px solid var(--vz-light-text-emphasis);
    border-top: 3px solid var(--vz-light-text-emphasis)
}

.ribbon-two-light span:after {
    border-right: 3px solid var(--vz-light-text-emphasis);
    border-top: 3px solid var(--vz-light-text-emphasis)
}

.ribbon-three-dark span {
    background: var(--vz-dark)
}

.ribbon-three-dark span:before {
    background: var(--vz-dark)
}

.ribbon-three-dark span:after {
    background: var(--vz-dark-text-emphasis)
}

.ribbon-three-dark::after {
    border-top-color: var(--vz-dark)
}

.ribbon-box .ribbon-dark {
    background: var(--vz-dark)
}

.ribbon-box .ribbon-dark:before {
    border-color: var(--vz-dark-text-emphasis) transparent transparent
}

.ribbon-box .ribbon-dark.ribbon-shape::before {
    border-left-color: var(--vz-dark);
    border-top-color: var(--vz-dark)
}

.ribbon-box .ribbon-dark.ribbon-shape::after {
    border-left-color: var(--vz-dark);
    border-bottom-color: var(--vz-dark)
}

.ribbon-box.right .ribbon-dark {
    background: var(--vz-dark)
}

.ribbon-box.right .ribbon-dark.ribbon-shape::before {
    border-right-color: var(--vz-dark);
    border-top-color: var(--vz-dark)
}

.ribbon-box.right .ribbon-dark.ribbon-shape::after {
    border-right-color: var(--vz-dark);
    border-bottom-color: var(--vz-dark)
}

.ribbon-two-dark span {
    background: var(--vz-dark)
}

.ribbon-two-dark span:before {
    border-left: 3px solid var(--vz-dark-text-emphasis);
    border-top: 3px solid var(--vz-dark-text-emphasis)
}

.ribbon-two-dark span:after {
    border-right: 3px solid var(--vz-dark-text-emphasis);
    border-top: 3px solid var(--vz-dark-text-emphasis)
}
/*RIBON 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.15)!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;
}


/*CUSTOM (Font SIZE) CSS*/
.fs-10 {
    font-size: 10px!important;
}
.fs-11 {
    font-size: 11px!important;
}
.fs-12 {
    font-size: 12px!important;
}
.fs-13 {
    font-size: 13px!important;
}
.fs-14 {
    font-size: 14px!important;
}
.fs-15 {
    font-size: 15px!important;
}
.fs-16 {
    font-size: 16px!important;
}
.fs-17 {
    font-size: 17px!important;
}
.fs-18 {
    font-size: 18px!important;
}
.fs-19 {
    font-size: 19px!important;
}
.fs-20 {
    font-size: 20px!important;
}
.fs-21 {
    font-size: 21px!important;
}
.fs-22 {
    font-size: 22px!important;
}
.fs-23 {
    font-size: 23px!important;
}
.fs-24 {
    font-size: 24px!important;
}
.fs-25 {
    font-size: 25px!important;
}
.fs-26 {
    font-size: 26px!important;
}
.fs-27 {
    font-size: 27px!important;
}
.fs-28 {
    font-size: 28px!important;
}
.fs-29 {
    font-size: 29px!important;
}
.fs-30 {
    font-size: 30px!important;
}
.fs-31 {
    font-size: 31px!important;
}
.fs-32 {
    font-size: 32px!important;
}
.fs-33 {
    font-size: 33px!important;
}
.fs-34 {
    font-size: 34px!important;
}
.fs-35 {
    font-size: 35px!important;
}
.fs-36 {
    font-size: 36px!important;
}
.fs-37 {
    font-size: 37px!important;
}
.fs-38 {
    font-size: 38px!important;
}
.fs-39 {
    font-size: 39px!important;
}
.fs-40 {
    font-size: 40px!important;
}


/*CUSTOM (Font WEIGHT) CSS*/
.fw-100 {
    font-weight: 100!important;
}
.fw-200 {
    font-weight: 200!important;
}
.fw-300 {
    font-weight: 300!important;
}
.fw-400 {
    font-weight: 400!important;
}
.fw-500 {
    font-weight: 500!important;
}
.fw-600 {
    font-weight: 600!important;
}
.fw-700 {
    font-weight: 700!important;
}
.fw-800 {
    font-weight: 800!important;
}
.fw-900 {
    font-weight: 900!important;
}


.lh-0{
    line-height:0!important;
}


/*CUSTOM CSS*/
.modal-dialog{
--vz-modal-width: 45%!important;
}
.label-input-file{
    position: relative;
    top: 23px;
    left: 5px;
    color: #fff;
    background: #BCCCDC;
    border-radius: 50px;
    padding: 7px;
    line-height: 17px;
    width: 32px;
    height: 32px;
}
.close {
    float: right;
    font-size: 25px;
    line-height: 1;
    color: #000;
    opacity: .2;
}
.modal-header{
    justify-content: space-between;
}




/*PROJECT Custom CSS START*/
.project-overview{

}
.project-list-sec-1 ul{
    display: flex;
  list-style: none;
  gap: 15px;
  margin: 0;
  padding: 0;
}
.project-list-sec-1 ul li{
    flex: 0 0 33%;
}
.project-semi-title-1{
    font-size: 13.5px;
  font-weight: 500;
  color: #640D5F;
  margin: 0 0 5px;
  line-height: 15px;
}
.project-semi-title-2{
font-size: 13px;
  font-weight: 300;
  color: #758694;
  margin: 0;
  line-height: 18px;
}
.project-semi-title-3{
font-size: 13.5px;
  font-weight: 500;
  color: var(--gotur-base)
  line-height: 12px;
  margin: auto 0;
}
.project-list-sec-1{
  border-bottom: 1px solid #EEEDEB;
  padding: 0 0 12px 0;
}
.status-box-1{
    font-size: 11px;
    font-weight: 300;
    color: #686D76!important;
    background: #E7F0DC;
    background-color: rgb(231, 240, 220);
    padding: 3px 10px;
    line-height: 11px;
}
.project-list-sec-2{
    padding: 12px 0 0 0;
}
.project-list-sec-2 ul{
    display: flex;
  list-style: none;
  gap: 15px;
  margin: 0;
  padding: 0;
}
.project-list-sec-2 ul li{
    flex: 0 0 50%;
    display: flex;
    gap: 15px;
    align-content: center;
}

/*--------------------------------------------*/
.project-details-top-inner-box{
    padding: 25px 25px 0;
}
.project-thumb-1 i{
    font-size: 50px;
    color: #fff;
}
.project-bg{
    background: #CDE8E5!important;
}
.project-details-top ul{
display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}
.project-details-top ul li{
    display: block;
    align-content: center;
}
.project-details-top-inner ul{
    display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}
.project-details-top-inner ul li{
    display: flex;
    gap: 10px;
}
.project-details-semi-title-1{
font-size: 13.5px;
  font-weight: 500;
  color: #640D5F;
  margin: 0;
  line-height: 15px;
}
.project-details-semi-title-2{
font-size: 13px;
  font-weight: 300;
  color: #4B527E;
  margin: 0;
  line-height: 16px;
}
.project-title-1{
    font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.project-details-tab{
margin-top: 30px;
}
.project-details-tab ul{
display: flex;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.project-details-tab ul li{

}
.project-details-tab ul li a{
background: #79AC78;
  color: #fff;
  padding: 5px 20px 2px;
  border-radius: 5px 5px 0 0;
  font-size: 14px;
  font-weight: 400;
  border-bottom: 3px solid #f7891e;
}
.project-details-card-header{
background: #D0E7D2;
  border-radius: 7px 7px 0 0;
}
.project-details-card-header-title{
font-size: 18px;
  font-weight: 600;
  color: #640D5F;
  margin: 0;
  line-height: 20px;
}
.project-details-card-header-title i{
font-size: 22px;
  color: #640D5F;
  margin: 0 3px 0 0;
  line-height: 20px;
  position: relative;
  top: 2px;
}
.project-details-p{
font-size: 14.5px;
  font-weight: 300;
  color: #495057;
  margin: 0;
  line-height: 26px;
  text-align: justify;
  padding: 0 0 15px;
}
.project-details-point{
display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.project-details-point li{
font-size: 14px;
  font-weight: 300;
  color: #495057;
  margin: 0;
  line-height: 28px;
}
.project-details-point li i{
font-size: 14px;
  color: #79AC78;
  margin: 0;
  line-height: 28px;
  margin-right: 7px;
}
.project-details-more-btn{
font-size: 14px;
  color: #FFA732;
  font-weight: 400;
  padding: 0;
  margin-top: 10px;
  border-bottom: 1px dashed #FFA732;
}
.project-details-more-btn i{
font-size: 15px;
  color: #FFA732;
}
.project-details-more-btn:hover{
  color: #f7891e;
}
.project-details-more-btn:hover i{
  color: #f7891e;
}
.project-info-list{
border: 1px solid #B0D9B1;
  padding: 15px 0;
  margin-top: 25px;
  background: #F1F8E8;
  border-radius: 7px;
}
.project-info-list ul{
    display: flex;
  list-style: none;
  gap: 15px;
  margin: 0;
  padding: 0;
}
.project-info-list ul li{
flex: 0 0 25%;
  text-align: center;
}
.resource-files{

}
.resource-files ul{
display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px dashed #f7891e;
  border-radius: 5px;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  background: #fff;
  padding: 0 4px;
}
.resource-files ul li{
    display: block;
  flex: 0 auto;
}
.resource-files ul li:last-child{
 padding:5px;
 float: right;
}
.file-thumb{

}
.file-thumb i{
font-size: 40px;
  padding: 7px 0;
}
.project-resources{
    margin-top: 25px;
}
.resource-file-name{
font-size: 13px;
  font-weight: 500;
  color: #640D5F;
  margin: 0;
  padding: 0;
}
.resource-file-size{
font-size: 10px;
  font-weight: 400;
  color: #495057;
  margin: 0;
  padding: 0;
  line-height: 12px;
}
.resource-btn-1{
font-size: 18px;
  color: #B0D9B1;
  padding: 0!important;
  margin: 0 3px 0 0!important;
  line-height: 0;
}
.resource-btn-1:hover{
  color: #79AC78;
}
.resource-btn-2{
    font-size: 22px;
  color: #4CC9FE;
  padding: 0!important;
  margin: 0!important;
    line-height: 0;
}
.resource-btn-2:hover{
  color: #0D92F4;
}
.resources-title{
    font-size: 20px;
  font-weight: 500;
  color: #495057;
}
.resources-title{
font-size: 18px;
  font-weight: 600;
  color: #640D5F;
  margin: 0 0 15px;
  line-height: 20px;
}
.resources-title i{
font-size: 22px;
  color: #640D5F;
  margin: 0 3px 0 0;
  line-height: 20px;
  position: relative;
  top: 2px;
}
.project-header-bg{
  background: #F2F9FF!important;
  padding: 10px 15px!important;
}
.project-header-bg2{
  background: #FFFBF5!important;
  padding: 10px 15px!important;
}
.project-details-box{
   box-shadow: 0px 0px 7px 2px rgba(21, 114, 232, .2);
}
.project-main-title{
  font-size: 18px;
  font-weight: 500;
  color: #640D5F;
  margin: 0;
  line-height: 18px;
}
.project-menue i{
  font-size: 18px;
  color: #f7891e;
  position: relative;
  top: 2px;
}







/*------------------------------------------------------*/
.assign-members{

}
.assign-members ul{
    display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.assign-members ul li{

}
.assign-members ul li:first-child{

}
.assign-members ul li:second-child{

}
.assign-members ul li:last-child{

}
.team-member-title{
  font-size: 18px;
  font-weight: 500;
  color: #705C53;
  margin-top: 55px;
  line-height: 20px;
  margin-bottom: 5px;
}
.assign-members ul li:first-child img{
    height: 35px;
    border-radius: 5px;
}






















/*PROJECT Custom CSS END*/

/*EXPENSE Custom CSS START*/
.expense-bg{
    background: #F1F0E8;
}
.counter-info-1{
    display: block;
}
.counter-icon{
font-size: 25px;
  color: #640D5F;
  background: #EEE;
  line-height: 0;
  height: 45px;
  width: 45px;
  align-content: center;
  text-align: center;
  border-radius: 5px;
}
.expense-title-1{
font-size: 14.5px;
  font-weight: 500;
  color: #640D5F;
  margin: 0 0 10px;
  line-height: 15px;
}
.expense-title-2{
font-size: 15px;
  font-weight: 600;
  color: #495057;
  margin: 0;
  line-height: 15px;
}
.expense-top-inner ul{
display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.expense-top-inner ul li{
display: flex!important;
  gap: 12px;
  background: #fff;
  padding: 7px;
  border-radius: 7px;
  flex: 0 0 28%;
}
.expense-top-inner ul li:last-child{
background: transparent;
flex: 0 0 auto;
align-items: center;
}
.create-button-1{
background: #08C2FF;
  font-size: 14px;
  font-weight: 500;
  color: #fff!important;
  border-radius: 0 15px 15px 15px;
  align-items: center;
  height: 40px;
  display: inline-block;
  padding: 9px 20px;
}
.create-button-1 i{
font-size: 15px;
  position: relative;
  bottom: -1px;
  margin-right: 4px;
}
.create-button-1:hover{
    background: #0D92F4;
}
.manage-button-1{
background: #A0D683;
  font-size: 14px;
  font-weight: 400;
  color: #fff!important;
  border-radius: 15px 0 15px 15px;
  align-items: center;
  height: 40px;
  display: inline-block;
  padding: 9px 20px;
}
.manage-button-1 i{
font-size: 15px;
  position: relative;
  bottom: -1px;
  margin-right: 4px;
}

.manage-button-1:hover{
    background: #72BF78;
}

.submit-button-1{
background: #5E9BEB!important;
  font-size: 14px;
  font-weight: 400;
  color: #fff !important;
  border-radius: 7px;
  padding: 7px 30px;
  display: inline-block;
  /*width: 75%;*/
  text-align: center;
  line-height: 20px;
  text-transform: uppercase;
}
.submit-button-1 i{
font-size: 15px;
  position: relative;
  bottom: -1px;
  margin-right: 5px;
}
.submit-button-1:hover{
 background: #4B89DC!important;
}
.page-title-1{
font-size: 22px;
  font-weight: 600;
  line-height: 22px;
  color: #432E54;
  margin-bottom: 15px;
}
.expense-list-top-inner ul{
display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.expense-list-top-inner ul li{
display: flex;
  gap: 12px;
  background: #fff;
  padding: 7px;
  border-radius: 7px;
  flex: 0 0 42%;
}
.expense-modal{
    max-width: 50%;
}
.cancel-button-1{
background: #FB6E52!important;
  font-size: 14px;
  font-weight: 400;
  color: #fff !important;
  border-radius: 7px;
  padding: 7px 30px;
  display: inline-block;
  /*width: 20%;*/
  text-align: center;
  line-height: 20px;
  text-transform: uppercase;
  margin-right: 10px!important;
}
.cancel-button-1 i{
font-size: 15px;
  position: relative;
  bottom: -1px;
  margin-right: 4px;
}
.cancel-button-1:hover{
    background: #E9593C!important;
}
.relode-button{
  font-size: 22px;
  padding: 5px 10px;
  height: inherit!important;
  font-weight: 300;
  line-height: 55px;
  color: #f7891e;
  border-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid #B7E0FF;
  background: #FFEFEF;
}
.relode-button:hover{
  color: #fff;
  background: #f7891e;
}
.modal-button-box{
    text-align: center;
    margin-top: 20px;
}
.table-search-box{
    margin-top: 0;
}
.custom-padding-1{
   padding: 5px!important;
}











/*EXPENSE Custom CSS END*/

/*INVOICE Custom CSS*/
.invoice-title-1{
  font-size: 15px;
  font-weight: 500;
  color: #640D5F;
  margin: 0 0 5px;
  line-height: 15px;
}
.invoice-price-title-1{
  font-size: 14px;
  font-weight: 500;
  color: #640D5F;
  margin: 0 0 5px;
  line-height: 15px;
}
.custom-input-xs{
  font-size: 12.5px!important;
  padding: 5px 13px!important;
  height: inherit!important;
  color: #414042!important;
  border-radius: 5px!important;
  border: 1px solid #B7E0FF!important;
}
.custom-input-s{
  font-size: 13px!important;
  padding: 7px 13px!important;
  height: inherit!important;
  color: #414042!important;
  border-radius: 5px!important;
  border: 1px solid #B7E0FF!important;
}
.custom-input{
  font-size: 13.5px!important;
  padding: 7px 13px!important;
  height: inherit!important;
  color: #414042!important;
  border-radius: 5px!important;
  border: 1px solid #B7E0FF!important;
}
.custom-input-2{
  font-size: 13.5px!important;
  padding: 15px 13px!important;
  height: inherit!important;
  color: #414042!important;
  border-radius: 5px!important;
  border: 1px solid #B7E0FF!important;
}
.custom-input-3{
  font-size: 13.5px!important;
  padding: 7px 13px!important;
  height: inherit!important;
  color: #414042!important;
  border-radius: 5px!important;
  border: 1px solid #B7E0FF!important;
  margin: 3px 0;
  font-weight: 400;
}
.invoice-1st-part{
  margin-bottom: 15px;
}
.invoice-2nd-part{
 margin-bottom: 25px!important;
}
.invoice-3rd-part{
    border-radius: 7px;
}
.invoice-bg-1{
  background-color: #fff;
  border-radius: 7px;
  box-shadow: 0px 0px 5px 0 rgba(21, 114, 232, .2);
}
.invoice-bg-2{
  background-color: #fff;
  border-radius: 7px;
  box-shadow: 0px 0px 5px 0 rgba(21, 114, 232, .2);
}
.price-summery{
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
    margin-top: 25px;
}
.price-summery ul{
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: space-between;
}
.price-summery ul li{

}
.payment-summery{
  display: block;
  list-style: none;
  padding: 12px;
  margin: 0;
    margin-top: 0px;
  border: 1px solid #B7E0FF!important;
  border-radius: 8px;
  margin-top: 25px;
}
.payment-summery ul{
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.payment-summery ul li{
  flex: 0 0 65%;
  text-align: center;
  display: flex;
}
.in-word-price{
    gap: 20px!important
}
.in-word-price li{
    flex: 0 auto!important;
}
.payment-price-title-1{
  font-size: 13.5px;
  font-weight: 400;
  color: #640D5F;
  line-height: 15px;
}
.payment-price-title-2{
  font-size: 13.5px;
  font-weight: 300;
  color: #414042;
  line-height: 15px;
}
.payment-price-title-3{
  font-size: 13.5px;
  font-weight: 400;
  color: #FF204E;
  line-height: 15px;
}
.payment-price-title-4{
  font-size: 13.5px;
  font-weight: 400;
  color: #337357;
  line-height: 15px;
}
.devider-border{
  border: 1px solid #B7E0FF!important;
  margin: 2px 0 6px;
}















/*INVOICE Custom CSS*/


/*CLIENT Custom CSS*/
.client-box-bg-1{
  background: #E9F6FF;
  border-radius: 5px;
  box-shadow: 5px 5px 5px 0px rgba(21, 114, 232, .2);
}
.client-box-bg-2{
  background: #F3F8FF;
  border-radius: 5px;
  box-shadow: 5px 5px 5px 0px rgba(21, 114, 232, .2);
}
.client-box-bg-3{
  background: #F5F7F8;
  border-radius: 5px;
  box-shadow: 5px 5px 5px 0px rgba(21, 114, 232, .2);
}
.client-box-bg-4{
  background: #F6F5F5;
  border-radius: 5px;
  box-shadow: 5px 5px 5px 0px rgba(21, 114, 232, .2);
}
.client-box-bg-5{
  background: #F6F5F5;
  border-radius: 5px;
  box-shadow: 5px 5px 5px 0px rgba(21, 114, 232, .2);
}
.client-box-bg-6{
  background: #F6F5F5;
  border-radius: 5px;
  box-shadow: 5px 5px 5px 0px rgba(21, 114, 232, .2);
}
.client-main-title{
font-size: 15px;
  font-weight: 500;
  color: #640D5F;
  line-height: 1;
  margin: 0;
  padding-bottom: 5px;
}
.client-sub-title{
font-size: 13.5px;
  font-weight: 300;
  color: #414042;
  line-height: 1;
  margin: 0;
  padding-top: 5px;
}
.team-designation{
font-size: 13.5px;
  font-weight: 300;
  color: #705C53;
  line-height: 1;
  margin: 0;
  padding-top: 5px;
}
.client-sub-title i{
font-size: 15px;
  line-height: 15px;
  margin-right: 5px;
  position: relative;
  top: 1px;
}
.client-box-top{
  display: flex;
  gap: 12px;
  align-items: center;
}
.client-box-inner{

}
.client-box-inner img{

}
.client-image{

}
.social-link{
  display: flex;
  gap: 10px;
  float: right;
  margin: 0;
  padding: 0;
}
.client-info{
  font-size: 13px;
  font-weight: 300;
  color: #414042;
  line-height: 18px;
  margin-bottom: 8px;
}
.client-info i{
  font-size: 15px;
  line-height: 18px;
  margin-right: 5px;
  position: relative;
  top: 1px;
}
.client-details-inner{
    border-top: 1px solid #B7E0FF!important;
}
.client-details{
  border-bottom: 1px solid #B7E0FF!important;
  padding-bottom: 8px;
  display: grid;
}
.client-button-box{
  display: flex;
  justify-content: space-between;
  margin: 15px 0 0;
  padding: 0;
  gap: 15px;
}
.client-button-box a{
   display: block;
}
.client-button1{
  background: #91AC8F;
font-size: 12.5px;
  font-weight: 300;
  color: #fff!important;
  border-radius: 5px;
  height: 30px;
  padding: 0 10px;
  width: 33.33%;
  line-height: 30px;
}
.client-button1:hover{
    background: #66785F;
}
.client-button1 i{
font-size: 14px;
  line-height: 18px;
  margin-right: 5px;
  position: relative;
  top: 1px;
}
.client-button2{
  background: #FFCF9D;
font-size: 12.5px;
  font-weight: 300;
  color: #fff!important;
  border-radius: 5px;
  height: 30px;
  padding: 0 10px;
  width: 33.33%;
  line-height: 30px;
}
.client-button2:hover{
    background: #FFB38E;
}
.client-button2 i{
font-size: 14px;
  line-height: 18px;
  margin-right: 5px;
  position: relative;
  top: 1px;
}
.client-button3{
  background: #41B3A2;
font-size: 12.5px;
  font-weight: 300;
  color: #fff!important;
  border-radius: 5px;
  height: 30px;
  padding: 0 10px;
  width: 33.33%;
  line-height: 30px;
}
.client-button3:hover{
    background: #0D7C66;
}
.client-button3 i{
font-size: 14px;
  line-height: 18px;
  margin-right: 5px;
  position: relative;
  top: 1px;
}
.files ul{
  display: flex;
  list-style: none;
  margin: 0;
  padding: 5px 8px;
  border-radius: 5px;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  background: #fff;
  box-shadow: rgba(21, 114, 232, 0.2) 0px 0px 5px 0px;
}
.files ul li{

}
.files-thumb i{
  font-size: 25px;
  position: relative;
  top: 1px;
  color: #758694;
}
.files-button1{
font-size: 15px;
  color: rgb(242, 174, 102);
  padding: 0!important;
  margin-right: 5px;
}
.files-button1:hover{
  color: #79AC78;
}
.files-button2{
font-size: 15px;
  color: rgb(8, 194, 255);
  padding: 0!important;
  margin-right: 0;
}
.files-button2:hover{
  color: #79AC78;
}
.files{
    margin: 15px 0;
}
.large-modal {
  max-width: 800px!important;
}
.extra-large-modal {
  max-width: 80%!important;
}
.medium-modal{
    max-width: 700px!important;
}
.small-label-text{
  font-size: 12.5px!important;
  font-weight: 500!important;
  color: #3C552D!important;
  margin-bottom: 2px!important;
}
.medium-label-text{
  font-size: 13.5px!important;
  font-weight: 500!important;
  color: #3C552D!important;
  margin-bottom: 2px!important;
}




/*CLIENT Custom CSS*/

/*CLIENT CSS*/
.client-profile-image-box{
  position: relative;
  display: block;
  top: 10px;
  text-align: center;
}
.client-profile-image{
    width: auto;
    height: 100px;
    border: solid 1px #707070;
    overflow: hidden;
    border-radius: 20px;
}
.project-semi-details-1 {
  font-size: 11px;
  font-weight: 300;
  color: #414042;
  margin: 0;
    margin-top: 0px;
  line-height: 18px;
  margin-top: 5px;
}
.profile-team-member-title {
-webkit-box-align: center;
  align-items: center;
  color: #fff;
  display: flex;
  font-weight: 400;
  height: 20px;
  -webkit-box-pack: center;
  justify-content: center;
  width: 20px;
  margin-right: -5px;
  font-size: 8px;
}

















/*CLIENT CSS*/