/*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 Color CSS*/
.custom-bg-danger-1 {
	background: #EB5463 !important;
}

.custom-bg-danger-2 {
	background: #D94553 !important;
}

.custom-bg-primary-1 {
	background: #5E9BEB !important;
}

.custom-bg-primary-2 {
	background: #4B89DC !important;
}

.custom-bg-info-1 {
	background: #4FC0E8 !important;
}

.custom-bg-info-2 {
	background: #3BAEDA !important;
}

.custom-bg-warning-1 {
	background: #FB6E52 !important;
}

.custom-bg-warning-2 {
	background: #E9593C !important;
}

.custom-bg-success-1 {
	background: #9FD369 !important;
}

.custom-bg-success-2 {
	background: #8CC052 !important;
}

.custom-bg-purple-1 {
	background: #AC92ED !important;
}

.custom-bg-purple-2 {
	background: #977CDD !important;
}

/*CUSTOM Background (RGBA) Color CSS*/
.custom-bg-danger-100 {
	background: rgba(235, 84, 99, 0.15) !important;
}

.custom-bg-danger-200 {
	background: rgba(217, 69, 83, 0.15) !important;
}

.custom-bg-primary-100 {
	background: rgba(94, 155, 235, 0.15) !important;
}

.custom-bg-primary-200 {
	background: rgba(75, 137, 220, 0.1) !important;
}

.custom-bg-info-100 {
	background: rgba(79, 192, 232, 0.15) !important;
}

.custom-bg-info-200 {
	background: rgba(59, 174, 218, 0.15) !important;
}

.custom-bg-warning-100 {
	background: rgba(251, 110, 82, 0.15) !important;
}

.custom-bg-warning-200 {
	background: rgba(233, 89, 60, 0.15) !important;
}

.custom-bg-success-100 {
	background: rgba(159, 211, 105, 0.15) !important;
}

.custom-bg-success-200 {
	background: rgba(140, 192, 82, 0.15) !important;
}

.custom-bg-purple-100 {
	background: rgba(172, 146, 237, 0.15) !important;
}

.custom-bg-purple-200 {
	background: rgba(151, 124, 221, 0.15) !important;
}

/*CUSTOM (Border COLOR) CSS*/
.custom-border-danger-1 {
	border: 1px solid #EB5463 !important;
}

.custom-border-danger-2 {
	border: 1px solid #D94553 !important;
}

.custom-border-primary-1 {
	border: 1px solid #5E9BEB !important;
}

.custom-border-primary-2 {
	border: 1px solid #4B89DC !important;
}

.custom-border-info-1 {
	border: 1px solid #4FC0E8 !important;
}

.custom-border-info-2 {
	border: 1px solid #3BAEDA !important;
}

.custom-border-warning-1 {
	border: 1px solid #FB6E52 !important;
}

.custom-border-warning-2 {
	border: 1px solid #E9593C !important;
}

.custom-border-success-1 {
	border: 1px solid #9FD369 !important;
}

.custom-border-success-2 {
	border: 1px solid #8CC052 !important;
}

.custom-border-purple-1 {
	border: 1px solid #AC92ED !important;
}

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


/*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: 17px;
	margin: 0 auto;
	overflow: hidden;
}

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

.button.b2 {
	border-radius: 2px;
}

.checkbox {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 3;
}

.knobs {
	z-index: 2;
}

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

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

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

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

#button-1 .knobs,
#button-1 .knobs:before,
#button-1 .layer {
	transition: 0.3s ease all;
}

/*Active/Inactive Button CSS*/


/*Setting CSS*/
.settings-list {
	&.list-group {
		a {
			color: variables.$gray-500;

			&:hover {
				background: variables.$primary-100;
				color: variables.$primary;
			}

			&.active {
				color: variables.$primary;
				font-weight: variables.$font-weight-medium;
			}
		}
	}

}

//Appearance Settings
.theme-colors {
	ul li {
		margin-right: 10px;
	}

	ul li span {
		width: 35px;
		height: 35px;
		border-radius: 50%;
		display: flex;
		background-color: variables.$white;
		border: 1px solid variables.$dark-transparent;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;

		.primecolor {
			content: "";
			display: flex;
			width: 25px;
			height: 25px;
			border-radius: 50%;
			opacity: 1;
			position: relative;

			.colorcheck {
				visibility: hidden;
				width: 12px;
				height: 12px;
				background: #fff;
				border-radius: 4px;

			}

			&:hover.colorcheck {
				visibility: visible;
			}

		}

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

.search-input {
	input {
		padding-left: 30px;
	}

	.search-addon {
		position: absolute;
		left: 10px;
		top: 50%;
		transform: translateY(-50%);
	}
}

.circle-progress {
	width: 21px;
	height: 21px !important;
	float: left;
	line-height: 21px;
	background: none;
	box-shadow: none;
	position: relative;

	&::after {
		content: "";
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 3px solid variables.$light-900;
		position: absolute;
		top: 0;
		left: 0;
	}

	.progress-left {
		left: 0;

		.progress-bar {
			left: 100%;
			border-top-right-radius: 80px;
			border-bottom-right-radius: 80px;
			border-left: 0;
			-webkit-transform-origin: center left;
			transform-origin: center left;
		}
	}

	.progress-right {
		right: 0;

		.progress-bar {
			left: -100%;
			border-top-left-radius: 80px;
			border-bottom-left-radius: 80px;
			border-right: 0;
			-webkit-transform-origin: center right;
			transform-origin: center right;
			animation: loading-1 1.8s linear forwards;
		}
	}

	.progress-bar {
		width: 100%;
		height: 100%;
		background: none;
		border-width: 3px;
		border-style: solid;
		position: absolute;
		top: 0;
	}
}

.circle-progress>span {
	width: 50%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index: 1;
}

@keyframes loading-2 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(144deg);
		transform: rotate(144deg);
	}
}

.wh-20 {
	width: 20px;
	height: 20px;
}

/*Setting CSS*/


/*CUSTOM CSS*/

.circle-progress.circle-progress-md {
	width: 40px;
	height: 40px !important;

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

.circle-progress.circle-progress-sm {
	width: 34px;
	height: 34px !important;

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


@keyframes growProgressBar {

	0%,
	33% {
		--pgPercentage: 0;
	}

	100% {
		--pgPercentage: var(--value);
	}
}

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

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

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


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

.progress-stacked {
	background-color: variables.$light-900;
}

.progress-bar {
	color: variables.$white;
	background-color: variables.$primary;
}

@keyframes progress-animate {
	0% {
		width: 0;
	}
}

.progress-animate {
	position: relative;
	border-radius: 0.625rem;

	.progress-bar {
		position: relative;
		border-radius: 0.625rem;
		animation: 2s progress-animate;
	}
}

.progress,
.progress-stacked {
	&.progress-xs {
		height: .3125rem;
	}

	&.progress-sm {
		height: 0.5rem;
	}

	&.progress-lg {
		height: 1rem;
	}

	&.progress-xl {
		height: 1.25rem;
	}
}

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

	.progress-bar {
		width: 100%;
	}

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

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

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

	&.progress-xs {
		width: 5px;
	}
}

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

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

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

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

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

	&.progress-xs {
		width: 5px;
	}
}

.progress-custom {
	overflow: visible;
	position: relative;

	.progress-bar {
		position: relative;
		overflow: visible;

		&:after {
			content: "";
			width: 1.15rem;
			height: 1.15rem;
			border-radius: 50%;
			box-shadow: 0 0.313rem 0.313rem rgba(variables.$primary, 0.5);
			background: variables.$white;
			position: absolute;
			inset-inline-end: -0.375rem;
			inset-block-start: -0.375rem;
			border: 0.25rem solid variables.$primary;
		}

		&.bg-secondary:after {
			border: 0.25rem solid variables.$secondary;
			box-shadow: 0 0.313rem 0.313rem rgba(var(--secondary-rgb), 0.2);
		}

		&.bg-warning:after {
			border: 0.25rem solid variables.$warning;
			box-shadow: 0 0.313rem 0.313rem rgba(var(--warning-rgb), 0.2);
		}

		&.bg-info:after {
			border: 0.25rem solid variables.$info;
			box-shadow: 0 0.313rem 0.313rem rgba(var(--info-rgb), 0.2);
		}

		&.bg-success:after {
			border: 0.25rem solid variables.$success;
			box-shadow: 0 0.313rem 0.313rem rgba(var(--success-rgb), 0.2);
		}

		&.bg-danger:after {
			border: 0.25rem solid variables.$danger;
			box-shadow: 0 0.313rem 0.313rem rgba(var(--danger-rgb), 0.2);
		}
	}

	.progress-bar-value {
		width: 1.875rem;
		height: 1.25rem;
		line-height: 1.25rem;
		border-radius: 0.188rem;
		background: variables.$primary;
		box-shadow: 0 0.313rem 0.313rem rgba(0, 0, 0, 0.4);
		font-size: 0.625rem;
		font-weight: variables.$font-weight-semibold;
		color: variables.$white;
		text-align: center;
		position: absolute;
		inset-block-end: 1.5rem;
		inset-inline-end: -0.688rem;

		&:after {
			content: "";
			border-block-start: 0.438rem solid variables.$primary;
			border-inline-start: 0.438rem solid transparent;
			border-inline-end: 0.438rem solid transparent;
			position: absolute;
			inset-block-end: -0.375rem;
			inset-inline-start: 28%;
		}

		&.bg-secondary {
			background-color: variables.$secondary;

			&:after {
				border-block-start: 0.438rem solid variables.$secondary;
			}
		}

		&.bg-success {
			background-color: variables.$success;

			&:after {
				border-block-start: 0.438rem solid variables.$success;
			}
		}

		&.bg-warning {
			background-color: variables.$warning;

			&:after {
				border-block-start: 0.438rem solid variables.$warning;
			}
		}

		&.bg-danger {
			background-color: variables.$danger;

			&:after {
				border-block-start: 0.438rem solid variables.$danger;
			}
		}

		&.bg-info {
			background-color: variables.$info;

			&:after {
				border-block-start: 0.438rem solid variables.$info;
			}
		}
	}
}

[dir="rtl"] {
	.progress-bar-title {
		border-radius: 0 0.313rem 0.313rem 0;
	}
}

.progress-item-1,
.progress-item-2,
.progress-item-3 {
	position: absolute;
	margin-block-start: -0.25rem;
	z-index: 1;
	height: 0.938rem;
	width: 0.938rem;
	border-radius: 1.563rem;
	background-color: variables.$light;
}

.progress-item-1 {
	inset-inline-start: 25%;
}

.progress-item-2 {
	inset-inline-start: 50%;
}

.progress-item-3 {
	inset-inline-start: 75%;
}

.custom-progress-3 {
	overflow: visible;
	border-radius: 0.625rem;

	.progress-bar {
		position: relative;
		overflow: visible;
		margin: 0.313rem;
		border-radius: 0.25rem;

		&:before {
			content: "";
			position: absolute;
			width: 0.25rem;
			height: 0.25rem;
			inset-inline-start: 0.125rem;
			background-color: variables.$white;
			border-radius: 50%;
		}

		.progress-bar-value {
			border: 0.125rem solid variables.$primary;
			width: 2.5rem;
			height: 1.563rem;
			line-height: 1.313rem;
			border-radius: 3.125rem;
			background: variables.$white;
			font-size: 0.625rem;
			font-weight: variables.$font-weight-semibold;
			color: variables.$primary;
			text-align: center;
			position: absolute;
			inset-inline-end: -0.625rem;

			&.secondary {
				border: 0.125rem solid variables.$secondary;
				color: variables.$secondary;
			}

			&.warning {
				border: 0.125rem solid variables.$warning;
				color: variables.$warning;
			}

			&.info {
				border: 0.125rem solid variables.$info;
				color: variables.$info;
			}

			&.success {
				border: 0.125rem solid variables.$success;
				color: variables.$success;
			}

			&.danger {
				border: 0.125rem solid variables.$danger;
				color: variables.$danger;
			}
		}
	}
}

.custom-progress-4 {
	&.progress {
		background-color: rgba(variables.$primary, 0.1);
		border-radius: 0.25rem;

		&.secondary {
			background-color: rgba(variables.$secondary, 0.1);

			.progress-bar-label {
				color: variables.$secondary;
			}
		}

		&.warning {
			background-color: rgba(variables.$warning, 0.1);

			.progress-bar-label {
				color: variables.$warning;
			}
		}

		&.info {
			background-color: rgba(variables.$info, 0.1);

			.progress-bar-label {
				color: variables.$info;
			}
		}

		&.success {
			background-color: rgba(variables.$success, 0.1);

			.progress-bar-label {
				color: variables.$success;
			}
		}

		&.danger {
			background-color: rgba(variables.$danger, 0.1);

			.progress-bar-label {
				color: variables.$danger;
			}
		}

		.progress-bar {
			border-radius: 0.25rem;
		}

		.progress-bar-label {
			position: absolute;
			inset-inline-end: 0.313rem;
			font-weight: variables.$font-weight-semibold;
			font-size: 0.813rem;
			color: variables.$primary;
		}
	}
}


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

.btn-primary {
	color: variables.$white;
	background-color: variables.$primary;
	border-color: variables.$primary;
	font-size: variables.$font-size-14;
	font-size: variables.$font-size-14;
}

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

button {
	cursor: pointer;

	&:focus {
		outline: 0;
		box-shadow: none;
	}
}

.btn {
	border-radius: variables.$border-radius-lg;
	padding: 0.5rem 0.85rem;
	font-size: variables.$font-size-14;
	transition: all 0.5s;
	font-weight: variables.$font-weight-medium;

	&:focus {
		box-shadow: none !important;
	}

	&:hover {
		transition: all 0.5s;
	}

	&.btn-lg {
		padding: 0.65rem 1rem;
		font-size: 0.95rem;
	}

	&.btn-sm {
		padding: 0.25rem 0.5rem;
		font-size: 0.75rem;
	}

	&.btn-xs {
		padding: 0.25rem 0.5rem;
		font-size: 0.6rem;
	}

	&.btn-md {
		padding: 0.35rem 0.85rem;
		font-size: 0.813rem;
	}

	@each $color,
	$value in variables.$theme-colors {
		&.btn-#{$color} {
			background-color: #{$value};
			border: 1px solid #{$value};
			color: variables.$white;

			&:hover,
			&:focus,
			&.focus,
			&:active,
			&.active {
				background-color: #{color.adjust($value, $lightness: -8%)};
				border:1px solid #{color.adjust($value, $lightness: -8%)};
				color: variables.$white;
			}
		}
	}

	&.btn-primary {
		background-color: variables.$primary-900;
		border: 1px solid variables.$primary-900;
		color: variables.$white;

		&:hover,
		&:focus,
		&.focus,
		&:active,
		&.active {
			background-color: color.adjust(variables.$primary-900, $lightness: -7%);
			border: 1px solid color.adjust(variables.$primary-900, $lightness: -7%);
			color: variables.$white;
		}
	}

	&.btn-light {
		background-color: variables.$light;
		border: 1px solid variables.$light;
		color: variables.$gray-900;

		&:hover,
		&:focus,
		&.focus,
		&:active,
		&.active {
			background-color: color.adjust(variables.$light, $lightness: -3%);
			border: 1px solid variables.$light;
			color: variables.$gray-900;
		}
	}

	&.btn-white {
		background-color: variables.$white;
		border-color: variables.$white;
		color: variables.$gray-900;

		&.show {
			background-color: variables.$white;
			border-color: variables.$white;
		}
	}

	&.btn-gray {
		background-color: variables.$gray-200;
		border-color: variables.$gray-200;
		color: variables.$gray-900;

		&:hover,
		&:focus,
		&.focus,
		&:active,
		&.active {
			background-color: variables.$primary;
			border-color: variables.$primary;
			color: variables.$white;
		}
	}

	&.btn-linear-primary {
		background-image: variables.$primary-gradient;
		border: 1px solid variables.$primary-900;
		color: variables.$white;

		&:hover,
		&:focus,
		&.focus,
		&:active,
		&.active {
			background-color: color.adjust(variables.$primary-900, $lightness: -7%);
			border: 1px solid color.adjust(variables.$primary-900, $lightness: -7%);
			color: variables.$white;
		}
	}
}

.btn-group {
	.btn {
		padding: 0.45rem 0.75rem;
	}
}

.btn-group-lg {
	.btn {
		padding: 0.65rem 1rem;
	}
}

.btn-group-sm {
	.btn {
		padding: 0.25rem 0.5rem;
	}
}

.btn {
	&.btn-w-xs {
		min-width: 5.625rem;
	}

	&.btn-w-sm {
		min-width: 6.975rem;
	}

	&.btn-w-md {
		min-width: 8.125rem;
	}

	&.btn-w-lg {
		min-width: 9.375rem;
	}
}

.btn-icon {
	i {
		padding: 0rem;
		margin: -0.5rem;
	}

	&.btn-xs {
		width: 24px;
		height: 24px;
		font-size: 0.8rem;
	}

	&.btn-sm {
		width: 30px;
		height: 28px;
		font-size: 18px;
	}

	&.btn-lg {
		width: 2.75rem;
		height: 2.75rem;
		font-size: 1.2rem;
	}
}

.btn-list {

	>button,
	>a {
		margin: 0 0.375rem 0.375rem 0;
	}
}

[dir="rtl"] {
	.btn-list {

		button,
		div,
		a,
		input {
			margin: 0 0 0.375rem 0.375rem;
		}
	}
}

.btn-list {
	margin-block-end: -0.5rem;
}

.btn-square {
	border-radius: 0;
}

.btn-group-pill .btn:first-child {
	border-radius: 60px 0 0 60px;
}

.btn-group-pill .btn:last-child {
	border-radius: 0 60px 60px 0;
}

.btn-group-square .btn:first-child {
	border-radius: 0px 0 0 0px;
}

.btn-group-square .btn:last-child {
	border-radius: 0 0px 0px 0;
}

.btn {
	&.btn-primary-light {
		background-color: rgba(variables.$primary, 0.1);
		color: variables.$primary;

		&:hover,
		&:focus,
		&:active {
			background-color: variables.$primary;
			color: variables.$white;
			border-color: variables.$primary;
		}
	}

	&.btn-secondary-light {
		background-color: rgba(variables.$secondary, 0.1);
		color: variables.$secondary;

		&:hover,
		&:focus,
		&:active {
			background-color: variables.$secondary;
			color: variables.$white;
			border-color: variables.$secondary;
		}
	}

	&.btn-warning-light {
		background-color: rgba(variables.$warning, 0.1);
		color: variables.$warning;

		&:hover,
		&:focus,
		&:active {
			background-color: variables.$warning;
			color: variables.$white;
			border-color: variables.$warning;
		}
	}

	&.btn-info-light {
		background-color: rgba(variables.$info, 0.1);
		color: variables.$info;

		&:hover,
		&:focus,
		&:active {
			background-color: variables.$info;
			color: variables.$white;
			border-color: variables.$info;
		}
	}

	&.btn-success-light {
		background-color: rgba(variables.$success, 0.1);
		color: variables.$success;

		&:hover,
		&:focus,
		&:active {
			background-color: variables.$success;
			color: variables.$white;
			border-color: variables.$success;
		}
	}

	&.btn-danger-light {
		background-color: rgba(variables.$danger, 0.1);
		color: variables.$danger;

		&:hover,
		&:focus,
		&:active {
			background-color: variables.$danger;
			color: variables.$white;
			border-color: variables.$danger;
		}
	}
}

.btn {
	&.btn-primary-ghost {
		background-color: transparent;
		color: variables.$primary;
		border: 1px solid variables.$primary;

		&:active {
			color: variables.$primary;
			border: 1px solid variables.$primary;
			background-color: transparent;
		}
	}

	&.btn-dark {
		background: variables.$gray-900  !important;
		border-color: variables.$gray-900  !important;
		box-shadow: none;
		color: variables.$white;

		&:hover {
			background: #252a30 !important;
		}
	}

	&.btn-secondary-ghost {
		background-color: transparent;
		color: variables.$secondary;
		border: 1px solid variables.$secondary;

		&:active {
			color: variables.$secondary;
			border: 1px solid variables.$secondary;
			background-color: transparent;
		}
	}

	&.btn-warning-ghost {
		background-color: transparent;
		color: variables.$warning;
		border: 1px solid variables.$warning;

		&:active {
			color: variables.$warning;
			border: 1px solid variables.$warning;
			background-color: transparent;
		}
	}

	&.btn-info-ghost {
		background-color: transparent;
		color: variables.$info;
		border: 1px solid variables.$info;

		&:active {
			color: variables.$info;
			border: 1px solid variables.$info;
			background-color: transparent;
		}
	}

	&.btn-success-ghost {
		background-color: transparent;
		color: variables.$success;
		border: 1px solid variables.$success;

		&:active {
			color: variables.$success;
			border: 1px solid variables.$success;
			background-color: transparent;
		}
	}

	&.btn-danger-ghost {
		background-color: transparent;
		color: variables.$danger;
		border: 1px solid variables.$danger;

		&:active {
			color: variables.$danger;
			border: 1px solid variables.$danger;
			background-color: transparent;
		}
	}
}

.btn-list {
	button {
		margin: 0 0.375rem 0.375rem 0;
	}
}

.btn-group-vertical {
	.btn-check:checked+.btn {
		color: variables.$white  !important;
	}
}

.btn-outline-primary {
	border: 1px solid variables.$primary  !important;
	color: variables.$primary  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		background-color: variables.$primary  !important;
		border: 1px solid variables.$primary  !important;
		box-shadow: 0 3px 10px rgba(variables.$primary, 0.5);
		color: variables.$white  !important;
	}
}

.btn-outline-secondary {
	border: 1px solid variables.$secondary  !important;
	color: variables.$secondary  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		background-color: variables.$secondary  !important;
		border: 1px solid variables.$secondary  !important;
		box-shadow: 0 3px 10px rgba(variables.$secondary, 0.5);
		color: variables.$white  !important;
	}
}

.btn-outline-success {
	border: 1px solid variables.$success  !important;
	color: variables.$success  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		background-color: variables.$success  !important;
		border: 1px solid variables.$success  !important;
		box-shadow: 0 3px 10px rgba(variables.$success, 0.5);
		color: variables.$white  !important;
	}
}

.btn-outline-danger {
	border: 1px solid variables.$danger  !important;
	color: variables.$danger  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		background-color: variables.$danger  !important;
		border: 1px solid variables.$danger  !important;
		box-shadow: 0 3px 10px rgba(variables.$danger, 0.5);
		color: variables.$white  !important;
	}
}

.btn-outline-warning {
	border: 1px solid variables.$warning  !important;
	color: variables.$warning  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		background-color: variables.$warning  !important;
		border: 1px solid variables.$warning  !important;
		box-shadow: 0 3px 10px rgba(variables.$warning, 0.5);
		color: variables.$white  !important;
	}
}

.btn-outline-info {
	border: 1px solid variables.$info  !important;
	color: variables.$info  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		background-color: variables.$info  !important;
		border: 1px solid variables.$info  !important;
		box-shadow: 0 3px 10px rgba(variables.$info, 0.5);
		color: variables.$white  !important;
	}
}

.btn-outline-light {
	border: 1px solid variables.$light  !important;
	color: variables.$gray-700  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		background-color: variables.$light  !important;
		border: 1px solid variables.$light  !important;
		color: variables.$gray-700  !important;
	}
}

.btn-outline-dark {
	border: 1px solid variables.$dark  !important;
	color: variables.$dark  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		background-color: variables.$dark  !important;
		border: 1px solid variables.$dark  !important;
		box-shadow: 0 3px 10px rgba(variables.$dark, 0.5);
		color: variables.$white  !important;
	}
}

.btn-soft-primary {
	background-color: variables.$primary-300  !important;
	color: variables.$primary  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		box-shadow: 0 3px 12px rgba(variables.$primary, .2);
		border-color: variables.$primary;
	}
}

.btn-soft-secondary {
	background-color: variables.$secondary-300  !important;
	color: variables.$secondary  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		box-shadow: 0 3px 12px rgba(variables.$secondary, .2);
		border-color: variables.$secondary;
	}
}

.btn-soft-success {
	background-color: variables.$success-300  !important;
	color: variables.$success  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		box-shadow: 0 3px 12px rgba(variables.$success, .2);
		border-color: variables.$success;
	}
}

.btn-soft-danger {
	background-color: variables.$danger-300  !important;
	color: variables.$danger  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		box-shadow: 0 3px 12px rgba(variables.$danger, .2);
		border-color: variables.$danger;
	}
}

.btn-soft-warning {
	background-color: variables.$warning-300  !important;
	color: variables.$warning  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		box-shadow: 0 3px 12px rgba(variables.$warning, .2);
		border-color: variables.$warning;
	}
}

.btn-soft-info {
	background-color: rgba(27, 132, 255, 0.3) !important;
	color: #1B84FF !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		box-shadow: 0 3px 12px rgba(27, 132, 255, .2);
		border-color: #1B84FF !important;
	}
}

.btn-soft-light {
	background-color: rgba(variables.$light, .9) !important;
	color: variables.$text-color  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		box-shadow: 0 3px 12px rgba(variables.$light, .2);
		border-color: variables.$light;
		border-color: variables.$text-color;
	}
}

.btn-soft-dark {
	background-color: rgba(variables.$dark, 0.3) !important;
	color: variables.$white  !important;

	&:hover,
	&:focus,
	&.focus,
	&:active,
	&.active {
		box-shadow: 0 3px 12px rgba(variables.$dark, .2);
		border-color: variables.$dark;
	}
}

.primary-hover {
	&:hover {
		background: variables.$primary  !important;
		color: variables.$white;
	}
}

.warning-btn-hover {
	&:hover {
		background: variables.$warning  !important;
		border-color: variables.$warning  !important;
		color: variables.$white;
	}
}

.success-btn-hover {
	&:hover {
		background: variables.$success  !important;
		border-color: variables.$success  !important;
		color: variables.$white;
	}
}

.danger-btn-hover {
	&:hover {
		background: variables.$danger  !important;
		border-color: variables.$danger  !important;
		color: variables.$white  !important;
	}
}

.secondary-btn-hover {
	&:hover {
		background: variables.$secondary  !important;
		border-color: variables.$secondary  !important;
		color: variables.$white;
	}
}

.primary-btn-hover {
	&:hover {
		background: variables.$primary  !important;
		border-color: variables.$primary  !important;
		color: variables.$white  !important;
	}
}

.btn {
	@include mixins.respond-below(sm) {
		padding: 5px 12px;
	}
}

.bn-close {
	&.custom-btn-close {
		background-image: none;
	}
}

.btn {
	&.btn-icon {
		&:hover {
			background: variables.$dark-transparent;
			color: variables.$dark;
		}

		&.active.bg-white {
			border-color: variables.$white;
			color: variables.$dark;
		}

		&:active {
			color: variables.$white;
		}
	}
}

.border-purple {
	border-color: variables.$purple  !important;
}

.btn-light.btn-icon {
	&:hover {
		background: variables.$primary  !important;
		color: variables.$white  !important;
	}
}


.table-top-head a {
	height: 30px;
	width: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	justify-content: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	border: 1px solid #E6EAED;
	background: #ffffff;
	border-radius: 5px;
	padding: 4px;
}

.table-top-head a img {
	width: 15px;
}

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


.table .thead-light th {
	background-color: #F9FAFB;
	color: #1B2850;
	font-weight: 600;
	font-size: 14px;
}

.table th {
	vertical-align: middle;
	line-height: 1.462;
}

.bank-box {
	position: relative;
	background: rgba(59, 174, 218, 0.1) !important;
}

.bank-box .active {
	border-color: rgba(59, 174, 218, 0.75) !important;
}

.bank-box.active::after {
	position: absolute;
	top: -8px;
	right: -8px;
	content: "\f058";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #4ECD7E;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #ffffff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	justify-content: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
}


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

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


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


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

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

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


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

.action-btn-view:hover,
.action-btn-view.active {
	background-color: #17a2b8;
}

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

.action-btn-edit:hover,
.action-btn-edit.active {
	background-color: #1572e8;
}

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

.action-btn-delete:hover,
.action-btn-delete.active {
	background-color: #dc3545;
}


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

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

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

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


/* =================================================
   STATUS TOGGLE SWITCH (Unchanged)
   ================================================= */
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 28px;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #dc3545;
	/* Inactive color */
	transition: .4s;
	border-radius: 28px;
}

.toggle-slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}

input:checked+.toggle-slider {
	background-color: #28a745;
	/* Active color */
}

input:checked+.toggle-slider:before {
	transform: translateX(22px);
}

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

.status-badge.status-paid {
	background-color: #28a745;
}

/* Green */
.status-badge.status-partial {
	background-color: #ffc107;
	color: #212529;
}

/* Yellow */
.status-badge.status-overdue {
	background-color: #dc3545;
}

/* Red */
.status-badge.status-sent {
	background-color: #0d6efd;
}

/* Blue */
.status-badge.status-draft {
	background-color: #6c757d;
}

/* Gray */
.status-badge.status-cancelled {
	background-color: #343a40;
}

/* Dark Gray */


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

#invoice-table .status-badge.status-paid {
	background-color: #28a745;
}

#invoice-table .status-badge.status-partial {
	background-color: #ffc107;
	color: #212529;
}

#invoice-table .status-badge.status-overdue {
	background-color: #dc3545;
}

#invoice-table .status-badge.status-sent {
	background-color: #0d6efd;
}

#invoice-table .status-badge.status-draft {
	background-color: #6c757d;
}

#invoice-table .status-badge.status-cancelled {
	background-color: #343a40;
}


/* =================================================
   Transaction Type Badge Styles
   ================================================= */
.transaction-badge {
	padding: 5px 12px;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	text-transform: capitalize;
}

.transaction-badge.debit {
	background-color: rgba(220, 53, 69, 0.8);
	/* Red */
}

.transaction-badge.credit {
	background-color: rgba(40, 167, 69, 0.8);
	/* Green */
}


/* =================================================
   Deal Stage Badge Styles
   ================================================= */
.deal-stage-badge {
	padding: 5px 12px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 500;
	color: #fff;
	text-transform: uppercase;
}

.deal-stage-badge.won {
	background-color: #28a745;
}

.deal-stage-badge.lost {
	background-color: #dc3545;
}

.deal-stage-badge.in-progress {
	background-color: #0d6efd;
}

.deal-stage-badge.contact-made {
	background-color: #6c757d;
}

/* =================================================
   Lead Status Badge Styles
   ================================================= */
.lead-status-badge {
	padding: 5px 12px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 500;
	color: #fff;
	text-transform: uppercase;
}

.lead-status-badge.contacted {
	background-color: #0d6efd;
}

/* Blue */
.lead-status-badge.qualified {
	background-color: #ffc107;
	color: #000;
}

/* Yellow */
.lead-status-badge.converted {
	background-color: #28a745;
}

/* Green */
.lead-status-badge.lost {
	background-color: #dc3545;
}

/* Red */


/* =================================================
   Chart of Accounts - Tree View Styles
   ================================================= */
.tree-table-header {
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	border-bottom: 2px solid #dee2e6;
}

.tree-table-header .col-header {
	padding: 10px 15px;
	font-weight: 600;
	color: #495057;
}

.tree-container ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
}

.tree-container li {
	padding: 8px 15px;
	border: 1px solid #f1f1f1;
	border-top: none;
}

.tree-item {
	display: flex;
	align-items: center;
	width: 100%;
}

.tree-item .account-name {
	flex-grow: 1;
}

.tree-item .account-type {
	width: 200px;
	color: #6c757d;
}

.tree-item .account-actions {
	width: 100px;
	text-align: right;
}

.tree-toggle {
	cursor: pointer;
	margin-right: 10px;
	color: #6c757d;
	transition: transform 0.2s ease;
}

.tree-toggle.collapsed {
	transform: rotate(-90deg);
}

.tree-container ul ul {
	padding-left: 25px;
	/* Indentation for child items */
	display: none;
	/* Initially hide children */
}


.comments-section .comment-item {
	display: flex;
	padding: 1rem;
	background-color: #f0f7ff;
	/* Light blue background */
	border-radius: .5rem;
	margin-bottom: 1rem;
	position: relative;
}

.comments-section .comment-avatar {
	width: 40px;
	height: 40px;
	margin-right: 1rem;
}

.comments-section .comment-body {
	flex-grow: 1;
}

.comments-section .comment-author {
	font-weight: 600;
}

.comments-section .comment-meta {
	font-size: 0.8rem;
	color: #6c757d;
}

.comments-section .comment-actions {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: none;
	/* Hidden by default, shown on hover */
	gap: 0.5rem;
}

.comments-section .comment-item:hover .comment-actions {
	display: flex;
	/* Show on hover */
}

.comments-section .comment-actions a {
	color: #6c757d;
}

.comments-section .comment-actions a:hover {
	color: #0d6efd;
}


/* =================================================
   ACTION & VIEW-SWITCHER BUTTONS (FINAL)
   ================================================= */
.list-view-switch {
	display: inline-flex;
	align-items: center;
	background-color: rgba(247, 137, 30, 0.1) !important;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 5px;
	transition: all 0.2s ease-in-out;
	font-size: 18px;
	border: 1px solid rgba(247, 137, 30, 0.4) !important;
	color: #f7891e !important;
}

.list-view-switch:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(247, 137, 30, 0.15);
	color: #ffffff !important;
	background-color: rgba(247, 137, 30, 0.5) !important;
}

.list-view-switch.active {
	background-color: #f7891e !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(247, 137, 30, 0.3);
}


/* =================================================
   TOP COUNTER CSS
   ================================================= */
.custom-counter-inner {
	position: relative;
	z-index: 1;
	padding: 15px;
	height: 100%;
	overflow: hidden;
	border-radius: 10px;
	background: rgba(12, 175, 96, 0.1);
}

.bottom-svg {
	position: absolute;
	bottom: 0;
	right: 0;
	opacity: 0.75;
	z-index: -1;
}

.custom-counter-inner .bottom-svg {
	bottom: -22px;
	height: 75px;
	width: 75px;
}

.custom-counter-icon {
	height: 42px;
	width: 42px;
	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;
	padding: 5px;
	background-color: #fff;
	border-radius: 6px;
	line-height: 0;
	align-items: center;
}

.counter-bg-1 {
	background: rgba(75, 137, 220, 0.1) !important;
}

.counter-bg-2 {
	background: rgba(140, 192, 82, 0.15) !important;
}

.counter-bg-3 {
	background: rgba(59, 174, 218, 0.15) !important;
}

.counter-bg-4 {
	background: rgba(12, 175, 96, 0.1) !important;
}

/* =================================================
   TABLE ACTION BUTTONS (FINAL STYLE WITH WHITE ICON ON HOVER)
   ================================================= */


.action-btn-view {
	background-color: rgba(23, 162, 184, 0.1);
	color: #17a2b8;
}

.action-btn-view:hover {
	background-color: rgba(23, 162, 184, 0.75);
}

.action-btn-edit {
	background-color: rgba(21, 114, 239, 0.1);
	color: #1572e8;
}

.action-btn-edit:hover {
	background-color: rgba(21, 114, 239, 0.75);
}

.action-btn-delete {
	background-color: rgba(220, 53, 69, 0.1);
	color: #dc3545;
}

.action-btn-delete:hover {
	background-color: rgba(220, 53, 69, 0.75);
}


.link-xxs {
	font-size: 11.5px;
	font-weight: 400;
	color: #640D5F;
	line-height: 15px;
	margin: 0;
	transition: all 0.2s ease-in-out;
}

.link-xxs:hover {
	color: #000;
}

.link-xs {
	font-size: 12px;
	font-weight: 400;
	color: #640D5F;
	line-height: 15px;
	margin: 0;
	transition: all 0.2s ease-in-out;
}

.link-xs:hover {
	color: #000;
	transform: translateY(-1px);
}

.link-sm {
	font-size: 12.5px;
	font-weight: 400;
	color: #640D5F;
	line-height: 15px;
	margin: 0;
	transition: all 0.2s ease-in-out;
}

.link-sm:hover {
	color: #000;
	transform: translateY(-1px);
}

.link-md {
	font-size: 13px;
	font-weight: 400;
	color: #640D5F;
	line-height: 15px;
	margin: 0;
	transition: all 0.2s ease-in-out;
}

.link-md:hover {
	color: #000;
	transform: translateY(-1px);
}

.link-lg {
	font-size:14px;
	font-weight: 400;
	color: #640D5F;
	line-height: 15px;
	margin: 0;
	transition: all 0.2s ease-in-out;
}

.link-lg:hover {
	color: #000;
	transform: translateY(-2px);
}


.title-xxs {
	font-size: 12px;
	font-weight: 500;
	color: #640D5F;
	line-height: 15px;
	margin: 0;
}

.title-xs {
	font-size: 12.5px;
	font-weight: 500;
	color: #640D5F;
	line-height: 15px;
	margin: 0;
}

.title-sm {
	font-size: 13px;
	font-weight: 500;
	color: #640D5F;
	line-height: 15px;
	margin: 0;
}

.title-md {
	font-size: 13.5px;
	font-weight: 500;
	color: #640D5F;
	line-height: 15px;
	margin: 0;
}

.title-lg {
	font-size: 14px;
	font-weight: 500;
	color: #640D5F;
	line-height: 15px;
	margin: 0;
}

.member-title-lg {
	font-size: 18px;
	font-weight: 700;
	color: #640D5F;
	line-height: 25px;
	margin: 0;
	padding: 0;
	display: inline-block;
	width: 100%;
}

.sub-title-xxs {
	font-size: 12px;
	font-weight: 400;
	color: #414042;
	line-height: 15px;
	margin: 0;
}

.sub-title-xs {
	font-size: 12.5px;
	font-weight: 400;
	color: #414042;
	line-height: 15px;
	margin: 0;
}

.sub-title-sm {
	font-size: 13px;
	font-weight: 400;
	color: #414042;
	line-height: 15px;
	margin: 0;
}

.sub-title-md {
	font-size: 13.5px;
	font-weight: 400;
	color: #414042;
	line-height: 15px;
	margin: 0;
}

.sub-title-lg {
	font-size: 14px;
	font-weight: 400;
	color: #414042;
	line-height: 20px;
	margin: 0;
}

/*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-info-1 {
	color: #4FC0E8 !important;
}

.text-info-2 {
	color: #3BAEDA !important;
}

.text-danger-1 {
	#EB5463 !important;
}

.text-danger-2 {
	color: #D94553 !important;
}

/*CUSTOM Text Color*/


.badge-1 {
	display: flex;
	height: 19px;
	line-height: 34px;
	text-align: center;
	transition: all 0.2s ease-in-out;
	font-size: 10px;
	align-items: center;
	justify-content: center;
	background-color: #FFE0B5;
	margin: auto;
	border-radius: 50px 25px 50px 25px;
	color: #686D76;
	border: 1px dashed #686D76 !important;
}

.badge-1:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.badge-2 {
	display: flex;
	height: 19px;
	line-height: 34px;
	text-align: center;
	transition: all 0.2s ease-in-out;
	font-size: 10px;
	align-items: center;
	justify-content: center;
	background-color: #E9F5BE;
	margin: auto;
	border-radius: 50px 25px 50px 25px;
	color: #686D76;
	border: 1px dashed #686D76 !important;
}

.badge-2:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.badge-3 {
	display: flex;
	height: 19px;
	line-height: 34px;
	text-align: center;
	transition: all 0.2s ease-in-out;
	font-size: 10px;
	align-items: center;
	justify-content: center;
	background-color: #FFDCDC;
	margin: auto;
	border-radius: 50px 25px 50px 25px;
	color: #686D76;
	border: 1px dashed #686D76 !important;
}

.badge-3:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.select-btn-success {
	/*display: inline-flex;*/
	width: auto;
	height: 22px;
	/*line-height: 34px;*/
	text-align: center;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
	font-size: 12px;
	font-weight: 500;
	border: none;
	/*align-items: center;*/
	/*justify-content: center;*/
	background-color: rgba(23, 162, 184, 0.75);
	/* RGB for #17a2b8 */
	color: #fff;
	padding: 5px 10px;
}

.select-btn-success:hover {
	background-color: rgba(23, 162, 184, 1);
	transform: translateY(-2px);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	color: #fff;
}


/*=========================================*/
/*    Action Buttons*/
/*=========================================*/

.action-btn {
	display: inline-flex;
	width: 22px;
	height: 22px;
	line-height: 34px;
	text-align: center;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
	font-size: 15px;
	border: none;
	align-items: center;
	justify-content: center;
}

.action-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	color: #ffffff;
}

/* Primary Action Button */
.action-btn-primary {
	display: inline-flex;
	width: 22px;
	height: 22px;
	line-height: 34px;
	text-align: center;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
	font-size: 16px;
	border: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(94, 155, 235, 0.1);
	color: rgba(94, 155, 235, 0.8);
}

.action-btn-primary:hover {
	background-color: rgba(94, 155, 235, 0.75);
	transform: translateY(-1px);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	color: #fff;
}

/* Info Action Button */
.action-btn-info {
	display: inline-flex;
	width: 22px;
	height: 22px;
	line-height: 34px;
	text-align: center;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
	font-size: 16px;
	border: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(27, 132, 255, 0.1);
	/* RGB for #1B84FF */
	color: rgba(27, 132, 255, 0.8);
}

.action-btn-info:hover {
	background-color: rgba(27, 132, 255, 0.75);
	transform: translateY(-1px);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	color: #fff;
}

/* Success Action Button */
.action-btn-success {
	display: inline-flex;
	width: 22px;
	height: 22px;
	line-height: 34px;
	text-align: center;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
	font-size: 16px;
	border: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(23, 162, 184, 0.1);
	/* RGB for #17a2b8 */
	color: rgba(23, 162, 184, 0.8);
}

.action-btn-success:hover {
	background-color: rgba(23, 162, 184, 0.8);
	transform: translateY(-1px);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	color: #fff;
}

/* Danger Action Button */
.action-btn-danger {
	display: inline-flex;
	width: 22px;
	height: 22px;
	line-height: 34px;
	text-align: center;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
	font-size: 15px;
	border: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(231, 13, 13, 0.1);
	/* RGB for #E70D0D */
	color: rgba(231, 13, 13, 0.6);
}

.action-btn-danger:hover {
	background-color: rgba(231, 13, 13, 0.75);
	transform: translateY(-1px);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	color: #fff;
}

/* Warning Action Button */
.action-btn-warning {
	display: inline-flex;
	width: 22px;
	height: 22px;
	line-height: 34px;
	text-align: center;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
	font-size: 16px;
	border: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 193, 7, 0.1);
	/* RGB for #FFC107 */
	color: rgba(255, 193, 7, 0.8);
}

.action-btn-warning:hover {
	background-color: rgba(255, 193, 7, 0.75);
	transform: translateY(-1px);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	color: #fff;
}

/* Secondary Action Button */
.action-btn-secondary {
	display: inline-flex;
	width: 22px;
	height: 22px;
	line-height: 34px;
	text-align: center;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
	font-size: 16px;
	border: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(59, 112, 128, 0.1);
	/* RGB for #3B7080 */
	color: rgba(59, 112, 128, 0.8);
}

.action-btn-secondary:hover {
	background-color: rgba(59, 112, 128, 0.75);
	transform: translateY(-1px);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	color: #fff;
}

/* Dark Action Button */
.action-btn-dark {
	display: inline-flex;
	width: 22px;
	height: 22px;
	line-height: 34px;
	text-align: center;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
	font-size: 16px;
	border: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(33, 37, 41, 0.1);
	/* RGB for #212529 */
	color: rgba(33, 37, 41, 0.8);
}

.action-btn-dark:hover {
	background-color: rgba(33, 37, 41, 0.75);
	transform: translateY(-1px);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	color: #fff;
}


.create-btn-info {
	display: inline-flex;
	height: 30px;
	text-align: center;
	border-radius: 10px 5px 10px 5px;
	transition: all 0.2s ease-in-out;
	font-size: 13px;
	border: none;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(27, 132, 255, 0.75) !important;
	padding: 5px 15px;
}

.create-btn-info:hover {
	background-color: rgb(27, 132, 255) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	color: #fff;
}

.select-btn-info {
	display: inline-flex;
	height: 30px;
	text-align: center;
	border-radius: 50px 25px 50px 25px;
	transition: all 0.2s ease-in-out;
	font-size: 13px;
	border: 1px dashed #686D76 !important;
	align-items: center;
	justify-content: center;
	color: rgba(27, 132, 255, 0.8);
	background: rgba(27, 132, 255, 0.15);
	padding: 5px 15px;
}

.select-btn-info:hover {
	background-color: rgba(27, 132, 255, .75);
	transform: translateY(-2px);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	color: #fff;
}

.select-btn-info i {
	margin-right: 3px;
}


/*PAYMENT Badge CSS*/
.payment-badge-complete {
	font-size: 10px;
	font-weight: 400;
	background-color: rgba(27, 132, 255, 0.1);
	border-radius: 5px;
	padding: 5px 15px;
	color: rgba(27, 132, 255, 0.8);
}

.payment-badge-partial {
	font-size: 10px;
	font-weight: 400;
	background-color: rgba(27, 132, 255, 0.1);
	border-radius: 30px 10px 30px 10px;
	padding: 3px 10px;
	color: rgba(27, 132, 255, 0.8);
	display: inline-flex;
	align-items: center;
	min-width: 85px;
	justify-content: center;
	border: 1px dashed #686D76 !important;
}

.payment-badge-partial i {
	color: rgba(27, 132, 255, 1);
	font-size: 12px;
	position: relative;
	top: 0px;
	margin-right: 1px;
}

.payment-badge-overdue {
	font-size: 10px;
	font-weight: 400;
	background-color: rgba(27, 132, 255, 0.1);
	border-radius: 5px;
	padding: 5px 15px;
	color: rgba(27, 132, 255, 0.8);
}

/*PAYMENT Badge CSS*/


.export-btn-info {
	height: 30px;
	width: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	justify-content: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	transition: all 0.2s ease-in-out;
	border: 1px solid #E6EAED;
	background-color: rgba(27, 132, 255, 0.1);
	border-radius: 5px;
	padding: 5px 15px;
	color: rgba(27, 132, 255, 0.8);
}

.export-btn-info img {
	width: 15px;
}

.export-btn-info:hover {
	background-color: rgba(27, 132, 255, 0.75);
	transform: translateY(-1px);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	color: #fff;
}


/*INPUT Field CSS*/
.custom-status-input {
	font-size: 11.5px !important;
	padding: 2px 10px !important;
	height: inherit !important;
	color: #414042 !important;
	border-radius: 50px !important;
	border: 1px solid #B7E0FF !important;
	text-align: center;
}

.custom-input-s {
	font-size: 12px !important;
	padding: 5px 13px !important;
	color: #414042 !important;
	border-radius: 5px !important;
	border: 1px solid #B7E0FF !important;
}

.custom-input {
	font-size: 15px !important;
	padding: 5px 13px !important;
	line-height: 30px;
	color: #414042 !important;
	border-radius: 5px !important;
	border: 1px solid #B7E0FF !important;
	font-weight: 300 !important;
}

.nice-select .form-select span {
	font-size: 12px !important;
	padding: 0px 13px !important;
	line-height: 18px;
}

.nice-select {
	padding: 1px 13px !important;
	color: #414042 !important;
	border-radius: 5px !important;
	border: 1px solid #B7E0FF !important;
}

.client-details-inner {
  border-top: 1px solid #B7E0FF !important;
}
.qbit-card-title-sm {
	font-size: 15px;
	font-weight: 600;
	color: #640D5F;
	margin: 0;
	line-height: 20px;
}

.qbit-card-title-md {
	font-size: 16px;
	font-weight: 600;
	color: #640D5F;
	margin: 0;
	line-height: 20px;
}

.qbit-card-title-lg {
	font-size: 17px;
	font-weight: 600;
	color: #640D5F;
	margin: 0;
	line-height: 20px;
}


.line-devider {
	margin-top: 10px !important;
	margin-bottom: 10px !important;
	border: 0 !important;
	border-top: 1px solid rgba(27, 132, 255, 0.25) !important;
	box-sizing: content-box !important;
	height: 0 !important;
	width: 100% !important;
}

/* =================================================
   Payment Status Badge Styles
   ================================================= */

/* Partial / Primary Status */
.qbit-badge-primary {
	font-size: 10px;
	font-weight: 400;
	background-color: rgba(94, 155, 235, 0.25) !important;
	border-radius: 30px 10px 30px 10px;
	padding: 3px 10px;
	color: rgba(94, 155, 235, 1) !important;
	display: inline-flex;
	align-items: center;
	min-width: 85px;
	justify-content: center;
	border: 1px dashed #686D76 !important;
}

.qbit-badge-primary i {
	color: #5E9BEB;
	font-size: 12px;
	position: relative;
	top: 0px;
	margin-right: 3px;
}

/* Paid / Success Status */
.qbit-badge-success {
	font-size: 10px;
	font-weight: 400;
	background-color: rgba(159, 211, 105, 0.15) !important;
	border-radius: 30px 10px 30px 10px;
	padding: 3px 10px;
	color: #347433 !important;
	display: inline-flex;
	align-items: center;
	min-width: 85px;
	justify-content: center;
	border: 1px dashed #686D76 !important;
}

.qbit-badge-success i {
	color: #347433;
	font-size: 12px;
	position: relative;
	top: 0px;
	margin-right: 3px;
}

/* Pending / Warning Status */
.qbit-badge-warning {
	font-size: 10px;
	font-weight: 400;
	background-color: rgba(251, 110, 82, 0.25) !important;
	border-radius: 30px 10px 30px 10px;
	padding: 3px 10px;
	color: rgba(251, 110, 82, 1) !important;
	display: inline-flex;
	align-items: center;
	min-width: 85px;
	justify-content: center;
	border: 1px dashed #686D76 !important;
}

.qbit-badge-warning i {
	color: #FB6E52;
	font-size: 12px;
	position: relative;
	top: 0px;
	margin-right: 3px;
}

/* Overdue / Danger Status */
.qbit-badge-danger {
	font-size: 10px;
	font-weight: 400;
	background-color: rgba(235, 84, 99, 0.15) !important;
	border-radius: 30px 10px 30px 10px;
	padding: 3px 10px;
	color: rgb(235, 84, 99) !important;
	display: inline-flex;
	align-items: center;
	min-width: 85px;
	justify-content: center;
	border: 1px dashed #686D76 !important;
}

.qbit-badge-danger i {
	color: rgb(235, 84, 99) !important;
	font-size: 12px;
	position: relative;
	top: -1px;
	margin-right: 3px;
}

/* Info Status */
.qbit-badge-info {
	font-size: 10px;
	font-weight: 400;
	background-color: rgba(79, 192, 232, 0.25) !important;
	border-radius: 30px 10px 30px 10px;
	padding: 3px 10px;
	color: rgba(79, 192, 232, 1) !important;
	display: inline-flex;
	align-items: center;
	min-width: 85px;
	justify-content: center;
	border: 1px dashed #686D76 !important;
}

.qbit-badge-info i {
	color: #4FC0E8;
	font-size: 12px;
	position: relative;
	top: 0px;
	margin-right: 3px;
}

/* Purple / Custom Status */
.qbit-badge-purple {
	font-size: 10px;
	font-weight: 400;
	background-color: rgba(172, 146, 237, 0.25) !important;
	border-radius: 30px 10px 30px 10px;
	padding: 3px 10px;
	color: rgba(172, 146, 237, 1) !important;
	display: inline-flex;
	align-items: center;
	min-width: 85px;
	justify-content: center;
	border: 1px dashed #686D76 !important;
}

.qbit-badge-purple i {
	color: #AC92ED;
	font-size: 12px;
	position: relative;
	top: 0px;
	margin-right: 3px;
}


/*PAYMENT Button CSS*/
.payment-btn-info {
	display: inline-flex;
	height: 22px;
	line-height: 34px;
	text-align: center;
	border-radius: 5px;
	transition: all 0.2s ease-in-out;
	font-size: 10px;
	border: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(27, 132, 255, 0.75);
	color: #fff;
	padding: 0 12px;
}

.payment-btn-info:hover {
	background-color: rgb(27, 132, 255);
	transform: translateY(-2px);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	color: #fff;
}


label {
	display: inline-block;
}

.form-check label,
.form-group label {
	margin-bottom: 5px;
	color: #3B1C32 !important;
	font-size: 14px !important;
	white-space: nowrap;
	font-weight: 600;
	line-height: 15px;
	margin-top: 15px;
}

.form-control {
	display: block;
	width: 100%;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bs-body-color);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--bs-body-bg);
	background-clip: padding-box;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}


/*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*/

.avatar {
	&.avatar-sm {
		width: 75px;
		height: 75px;
		line-height: 1.5rem;
		font-size: 0.65rem;
	}
}

















/** pricing-section **/

.pricing-section{
  position: relative;
}

.pricing-section .tab-btn-box{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 60px;
  direction: ltr;
}

.pricing-section .tab-btns {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-section .tab-btns:before {
  position: absolute;
  left: 0px;
  right: 0;
  margin: 0 auto;
  height: 34px;
  width: 60px;
  content: "";
  border-radius: 100px;
  border: 1px solid rgba(0, 0, 0, 1);
}

.pricing-section .tab-btns li{
  position: relative;
  display: inline-block;
  min-width: 87px;
  text-align: right;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  color: var(--title-color);
  cursor: pointer;
  padding-right: 70px;
  transition: all 500ms ease;
}

.pricing-section .tab-btns li:last-child{
  padding-right: 0;
  padding-left: 20px;
  text-align: left;
}

.pricing-section .tab-btns li.active-btn:before {
  right: 27px;
}

.pricing-section .tab-btns li:before {
  position: absolute;
  top: 1px;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  content: "";
  right: 1px;
  background: var(--theme-color);
  -webkit-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.pricing-section .tab-btns li:last-child:before{
  display: none;
}

.pricing-block-one{
  position: relative;
  display: block;
  border-radius: 30px;
  margin-bottom: 30px;
}

.pricing-block-one .pricing-table{
  position: relative;
  display: block;
  padding: 44px 50px 50px 50px;
}

.pricing-block-one .pricing-table .table-header .sub-title{
  margin-bottom: 24px;
}

.pricing-block-one .pricing-table .table-header h2{
  display: block;
  font-size: 40px;
  line-height: 48px;
}

.pricing-block-one .pricing-table .table-header .text{
  position: relative;
  display: block;
  font-size: 16px;
  line-height: 25px;
  margin-bottom: 25px;
}

.pricing-block-one .pricing-table .table-header{
  padding-bottom: 31px;
  border-bottom: 1px solid var(--secondary-color);
  margin-bottom: 32px;
}

.pricing-block-one .pricing-table .feature-list li{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 14px;
}

.pricing-block-one .pricing-table .feature-list li:last-child{
  margin-bottom: 0px;
}

.pricing-block-one .pricing-table .feature-list li .icon-4{
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 20px;
  background: var(--theme-color);
  border-radius: 50%;
  text-align: center;
  font-size: 9px;
  color: #fff;
}

.pricing-block-one .pricing-table .feature-list li .icon-31{
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 16px;
  border-radius: 50%;
  text-align: center;
  font-size: 8px;
  color: var(--title-color);
  border: 1px solid #000;
}

.pricing-block-one .pricing-table .feature-list{
  margin-bottom: 35px;
}

.pricing-block-one .pricing-table .theme-btn .text,
.pricing-block-one .pricing-table .theme-btn i{
  background: transparent;
  border: 1px solid var(--secondary-color);
  z-index: 1;
}

.pricing-block-one .pricing-table .theme-btn:hover i{
  border-color: transparent;
}

.pricing-block-one .pricing-table .theme-btn:hover .text{
  border-color: transparent;
}

.pricing-block-one .pricing-table .theme-btn i:after{
  position: absolute;
  content: '';
  background: var(--theme-color);
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  left: -1px;
  top: -1px;
  z-index: -1;
  border-radius: 50%;
  transform: scale(0,0);
  transition: all 500ms ease;
}

.pricing-block-one .pricing-table .theme-btn:hover i:after{
  transform: scale(1,1);
}



/** rtl-css **/

.rtl .pricing-section .tab-btn-box{
  direction: ltr;
}

/** responsive-css **/

@media only screen and (max-width: 1200px){

}

@media only screen and (max-width: 991px){

}

@media only screen and (max-width: 767px){
  .pricing-section{
    padding: 65px 0px 40px 0px;
  }

  .pricing-block-one .pricing-table{
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media only screen and (max-width: 599px){

}

@media only screen and (max-width: 499px){
  .pricing-block-one .pricing-table .theme-btn .text{
    padding-left: 15px;
    padding-right: 15px;
  }
}
.tabs-box .tab{
  position:relative;
  display:none;
  transition: all 900ms ease;
  -moz-transition: all 900ms ease;
  -webkit-transition: all 900ms ease;
  -ms-transition: all 900ms ease;
  -o-transition: all 900ms ease;
}

.tabs-box .tab.active-tab{
  display:block;  
}

.tabs-box .tab{
  transform:scale(0.9,0.9) translateY(0px);
}

.tabs-box .tab.active-tab{
  transform:scale(1) translateY(0px);
}

.border-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 50%;
  -khtml-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.50);
  animation: squares 2.9s linear 0s infinite;
  -webkit-animation: squares 2.9s linear 0s infinite;
  -ms-animation: squares 2.9s linear 0s infinite;
  -o-animation: squares 2.9s linear 0s infinite;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
  opacity: 0;
}

.border-animation.border-2 {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}

.border-animation.border-3 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
/* --- Updated Pricing Plan Section CSS --- */
.pricing-plan-section {
 background-color: #f8f9fa; /* Or any light color from your theme */
 padding-top: 120px; /* Increased top padding */
 padding-bottom: 120px; /* Increased bottom padding */
}


.pricing-card {
 background-color: #ffffff;
 border: 1px solid #e9ecef;
 border-radius: 12px;
 padding: 40px 30px;
 transition: all 0.3s ease-in-out;
 height: 100%;
 display: flex;
 flex-direction: column;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Added subtle shadow */
}


.pricing-card:hover,
.pricing-card.highlighted {
 transform: translateY(-10px);
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Increased shadow on hover/highlight */
 border-color: var(--primary-color);
}


.pricing-card.highlighted {
 border-width: 2px;
}


.pricing-card .plan-name {
 font-size: 20px;
 font-weight: 700;
 color: var(--primary-color); /* Your theme's primary color */
}


.pricing-card .plan-price {
 font-size: 52px;
 font-weight: 800;
 margin: 15px 0 5px 0;
 color: #222;
}


.pricing-card .plan-price sup {
 font-size: 24px;
 font-weight: 600;
 top: -20px;
}


.pricing-card .plan-period {
 font-size: 16px;
 color: #6c757d;
 margin-bottom: 30px;
}


.pricing-card .plan-features {
 list-style: none;
 padding-left: 0;
 margin-bottom: 30px;
 text-align: left;
 flex-grow: 1; /* Pushes the button to the bottom */
}


.pricing-card .plan-features li {
 margin-bottom: 15px;
 font-size: 16px;
 display: flex;
 align-items: center;
}


.pricing-card .plan-features li.disabled {
 color: #adb5bd;
 text-decoration: line-through;
}


.pricing-card .plan-features i {
 font-size: 22px;
 margin-right: 10px;
 vertical-align: middle;
}


.pricing-card .apece-primary-button {
 width: 100%;
 display: block;
}


.pricing-card .disabled-button {
 background-color: #6c757d;
 border-color: #6c757d;
 cursor: not-allowed;
 width: 100%;
 display: block;
}


/* --- Animation (if not already included, ensure Animate.css is linked) --- */
/* You might need to include the Animate.css library in your HTML's <head> section */
/* <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> */


/* If you want a subtle hover animation for all cards */
.pricing-card {
 transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
/* --- Final Polish Membership Page CSS --- */

.section-space-xl { padding: 120px 0; }
.section-space-bottom-xl { padding-bottom: 120px; }

.pricing-plan-section.final-polish {
    background-color: #f8f9fc;
    position: relative;
    overflow: hidden;
}

/* Background blurred shape for depth */
.background-blur-shape {
    position: absolute;
    width: 500px;
    height: 500px;
    background-image: linear-gradient(135deg, rgba(21, 94, 239, 0.1), rgba(59, 130, 246, 0.1));
    border-radius: 50%;
    filter: blur(120px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

/* Make sure container content is above the blur shape */
.pricing-plan-section.final-polish .container {
    position: relative;
    z-index: 1;
}

/* Final Pricing Card Style */
.final-pricing-card {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 35px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
}

.final-pricing-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(45, 55, 72, 0.12);
}

.final-pricing-card.highlighted {
    background: linear-gradient(135deg, var(--primary-color) 0%, #3b82f6 100%);
    color: #ffffff;
    transform: scale(1.05) translateY(-5px);
}

.final-pricing-card .card-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background-color: rgba(21, 94, 239, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--primary-color);
}

.final-pricing-card.highlighted .card-icon {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.final-pricing-card .plan-name { font-size: 22px; font-weight: 700; }
.final-pricing-card.highlighted .plan-name,
.final-pricing-card.highlighted .plan-period { color: #ffffff; }

.final-pricing-card .plan-price { font-size: 50px; font-weight: 700; margin: 15px 0 5px 0; color: #1a202c; }
.final-pricing-card.highlighted .plan-price { color: #ffffff; }

.final-pricing-card .plan-period { font-size: 15px; color: #6c757d; margin-bottom: 30px; font-weight: 500; }
.final-pricing-card .plan-features { list-style: none; padding-left: 0; margin-bottom: 30px; text-align: left; flex-grow: 1; }
.final-pricing-card .plan-features li { margin-bottom: 15px; display: flex; align-items: center; font-size: 16px; line-height: 1.6; }
.final-pricing-card.highlighted .plan-features li { color: #e0f2fe; }
.final-pricing-card .plan-features li.disabled { color: #a0aec0; }
.final-pricing-card.highlighted .plan-features li.disabled { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.final-pricing-card .plan-features i { font-size: 20px; margin-right: 12px; color: #22c55e; }
.final-pricing-card .plan-features li.disabled i { color: #ef4444; }
.final-pricing-card.highlighted .plan-features i { color: #ffffff; }
.final-pricing-card.highlighted .plan-features li.disabled i { opacity: 0.7; }

/* Final Button Style */
.final-pricing-card .apece-primary-button i { transition: transform 0.3s ease; }
.final-pricing-card .apece-primary-button:hover i { transform: translateX(5px); }

.final-pricing-card.highlighted .apece-primary-button {
    background-color: #ffffff;
    color: var(--primary-color);
    font-weight: 600;
}

/* Final Eligibility Section CSS */
.difference-two__thumb-alt img { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); }

.criteria-boxes-final .criteria-box-final {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #eaf2ff;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.criteria-boxes-final .criteria-box-final:hover {
    transform: translateX(5px);
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.criteria-boxes-final .box-icon {
    font-size: 24px;
    color: var(--primary-color);
    background-color: #f0f5ff;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 20px;
}

.criteria-boxes-final .box-content h6 { font-weight: 700; margin-bottom: 2px; color: #1a202c; }
.criteria-boxes-final .box-content p { margin-bottom: 0; color: #4a5568; }



/* --- CSS for the new Eligibility Section --- */

/* This ensures the bottom part has some space and a clean background */
.difference-six-bottom-updated {
    padding: 60px 0;
    background-color: #ffffff; /* Or #f8f9fc to match the section above */
    margin-top: -120px; /* Adjust this value if needed to overlap correctly */
    position: relative;
    z-index: 2;
}

/* This makes sure the info boxes fill the container nicely */
.differece-six-thumb {
    height: 100%;
}
.differece-six-thumb .criteria-box-final {
    width: 100%;
    height: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
}



/* --- Final Showcase Section CSS --- */
.section-space-xl {
    padding: 120px 0;
}

.support-showcase-section {
    background-color: #f8f9fc; /* Light background for the whole area */
}

.support-showcase-container {
    background-color: #004643; /* Dark Green from your image example */
    border-radius: 24px;
    position: relative;
    padding: 20px;
}

/* Wavy line graphic at the bottom of the green container */
.support-showcase-container::after {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 40px;
    width: 200px;
    height: 40px;
    background-image: url('assets/images/difference/wave-shape.png'); /* You may need to create or use a wave image */
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
}

.support-text-content {
    padding: 40px;
}

/* Using classes from your provided snippet for consistency */
.section-six-subtitle {
    font-weight: 500;
    color: #abd1c6; /* Light green-blue text */
    margin-bottom: 12px;
}

.section-six-title.text-white {
    font-size: 42px; /* Adjust as needed */
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.section-six-paragraph.text-white {
    color: #e4e4e7; /* Off-white for readability */
    margin-top: 20px;
    line-height: 1.7;
}

.btn-six-primary {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
}
.btn-six-primary span {
    margin-left: 8px;
    transition: transform 0.3s ease;
}
.btn-six-primary:hover span {
    transform: translateX(4px);
}

.support-cards-area {
    /* This makes the card area "break out" of the green container */
    margin-right: -60px;
    position: relative;
}

/* Responsive adjustment for the breakout effect */
@media (max-width: 991px) {
    .support-cards-area {
        margin-right: 0;
        margin-top: 40px;
    }
    .support-showcase-container::after {
        display: none; /* Hide wave on smaller screens */
    }
}

/* Adapting previous card style for this new context */
.final-pricing-card.card-in-showcase {
    padding: 20px;
    min-height: 200px; /* Set a min-height for alignment */
    justify-content: center;
}

.card-in-showcase .plan-name {
    font-size: 18px; /* Slightly smaller for this context */
}

.card-in-showcase.highlighted .plan-name,
.card-in-showcase.highlighted .plan-price-small,
.card-in-showcase.highlighted .plan-period-small {
    color: #fff;
}

.card-in-showcase .plan-price-small {
    font-size: 28px;
    font-weight: 700;
    margin: 8px 0 4px 0;
}
.card-in-showcase .plan-period-small {
    font-size: 14px;
    color: #6c757d;
}

/* Disabling hover effects for cards in this specific section */
.final-pricing-card.card-in-showcase:hover {
    transform: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
}
.final-pricing-card.card-in-showcase.highlighted {
    transform: scale(1.05); /* Keep highlighted card slightly bigger */
}
/* --- Final Eligibility Showcase Section CSS --- */

.final-eligibility-showcase .eligibility-left-panel {
    background-color: #004643; /* Dark Green from your image */
    padding: 50px 40px;
    border-radius: 24px;
    color: #ffffff;
    height: 100%;
}

.eligibility-left-panel .panel-subtitle {
    font-weight: 500;
    color: #abd1c6;
    margin-bottom: 12px;
}

.eligibility-left-panel .panel-title {
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
}

.eligibility-left-panel .panel-description {
    color: #e4e4e7;
    margin-top: 20px;
    margin-bottom: 30px;
    line-height: 1.7;
}

.eligibility-left-panel .btn-six-primary {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
}

.eligibility-left-panel .btn-six-primary i {
    transition: transform 0.3s ease;
    margin-left: 5px;
}

.eligibility-left-panel .btn-six-primary:hover i {
    transform: translateX(4px);
}

.eligibility-right-panel .info-card {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 25px;
    border-radius: 16px;
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
}

.eligibility-right-panel .info-card:last-child {
    margin-bottom: 0;
}

.eligibility-right-panel .info-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color);
}

.eligibility-right-panel .info-card-icon {
    font-size: 24px;
    color: var(--primary-color);
    background-color: #f0f5ff;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 20px;
}

.eligibility-right-panel .info-card-content h6 {
    font-weight: 700;
    margin-bottom: 2px;
    color: #1a202c;
}

.eligibility-right-panel .info-card-content p {
    margin-bottom: 0;
    color: #4a5568;
}
/* --- Application Form Page CSS --- */

.application-page-section {
    background-color: #f8f9fc;
}

.application-form-wrapper {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
}

.application-form-wrapper .section__header p {
    font-size: 16px;
    color: #6c757d;
}

.form-section {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #e2e8f0;
}

.form-section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.form-label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #4a5568;
}

.form-control, .form-select {
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.1);
}

/* Sidebar Widgets */
.sidebar-widget {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.widget-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Stepper List for Next Steps */
.next-steps-list {
    list-style: none;
    padding-left: 0;
    position: relative;
}

/* The vertical line */
.next-steps-list::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background-color: #e2e8f0;
}

.next-steps-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    position: relative;
}

.next-steps-list .step-number {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    z-index: 1;
    border: 4px solid #f8f9fc;
}

.next-steps-list .step-content h6 {
    font-weight: 700;
    margin-bottom: 5px;
}

.next-steps-list .step-content p {
    font-size: 15px;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Contact Widget */
.contact-widget-list {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
}

.contact-widget-list li {
    margin-bottom: 10px;
    font-weight: 500;
}

.contact-widget-list i {
    color: var(--primary-color);
    margin-right: 12px;
}
/* --- Advanced Blood Bank Page CSS --- */

/* Stat Cards */
.stat-card {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}
.stat-card .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 20px;
    color: #fff;
}
.stat-card .stat-icon.icon-total { background-color: #0d6efd; }
.stat-card .stat-icon.icon-available { background-color: #198754; }
.stat-card .stat-icon.icon-request { background-color: #dc3545; }
.stat-card .stat-icon.icon-needed { background-color: #ffc107; }

.stat-card .stat-info .stat-number {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}
.stat-card .stat-info .stat-label {
    margin: 0;
    color: #6c757d;
}

/* Table Styles */
.blood-donor-table .badge {
    font-size: 14px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
}
.badge.bg-danger-soft {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}
.badge.bg-primary-soft {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

/* Availability Status Dot */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}
.status-dot.available {
    background-color: #198754; /* green */
}
.status-dot.unavailable {
    background-color: #dc3545; /* red */
}

.blood-donor-table .avatar-sm {
    width: 40px;
    height: 40px;
}
---

### নতুন CSS কোড

এই নতুন ফিচারগুলোর জন্য আপনার `custom.css` ফাইলে নিচের কোডটুকু যোগ করুন।

```css
/* --- Advanced Blood Bank Page CSS --- */

/* Stat Cards from previous step, ensure they are in your CSS */
.stat-card { background-color: #ffffff; padding: 25px; border-radius: 16px; display: flex; align-items: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }
.stat-card:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08); }
.stat-card .stat-icon { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 20px; color: #fff; }
.stat-card .stat-icon.icon-total { background-color: #0d6efd; }
.stat-card .stat-icon.icon-available { background-color: #198754; }
.stat-card .stat-icon.icon-request { background-color: #dc3545; }
.stat-card .stat-icon.icon-needed { background-color: #ffc107; }
.stat-card .stat-info .stat-number { font-size: 32px; font-weight: 700; margin: 0; }
.stat-card .stat-info .stat-label { margin: 0; color: #6c757d; }

/* Table and Donor Card Styles */
.blood-donor-table .badge { font-size: 14px; font-weight: 600; padding: 6px 10px; border-radius: 6px; }
.badge.bg-danger-soft { background-color: rgba(220, 53, 69, 0.1); color: #dc3545; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.status-dot.available { background-color: #198754; }
.status-dot.unavailable { background-color: #6c757d; }
.blood-donor-table .avatar-sm { width: 40px; height: 40px; object-fit: cover; }
.donor-item { transition: opacity 0.3s ease; }

/* View Toggle Buttons */
.view-toggle-buttons {
    display: inline-flex;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 4px;
}
.view-toggle-buttons .view-btn {
    border: none;
    background-color: transparent;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
}
.view-toggle-buttons .view-btn.active {
    background-color: #ffffff;
    color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* --- Contact Us Page CSS --- */

.section-space-xl-less-top {
    padding-top: 60px;
    padding-bottom: 60px;
}

.contact-info-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease-in-out;
    height: 100%;
}

.contact-info-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color);
}

.contact-info-card .info-card-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background-color: rgba(21, 94, 239, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--primary-color);
}

.contact-info-card .info-card-content h6 {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 10px;
}

.contact-info-card .info-card-content p {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
}
.contact-info-card .info-card-content p a {
    color: #4a5568;
    text-decoration: none;
    transition: color 0.3s ease;
}
.contact-info-card .info-card-content p a:hover {
    color: var(--primary-color);
}

/* Contact Form & Map Section */
.contact-form-section .application-form-wrapper {
    padding: 40px;
}

.contact-form-section .section__header h3 {
    font-size: 28px;
}

.map-container {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
    height: 100%;
    min-height: 450px;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}