@charset "UTF-8";
/*-----------------------------------------------------------------------------------

	[Master Stylesheet]
    Template Name: Dashnix - HTML5 Bootstrap Dashboard Template
    Author: Topylo
    Support: https://support.topylo.com
    Description: E-commerce, CRM, HRM and Job based admin dashboard template
    Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

	-----------------
    01. THEME SCSS
	-----------------
		1.1 theme		
	-----------------------
    02. COMPONENTS SCSS
	-----------------------
		2.1 accordion  
		2.2 alert  
		2.3 animation  
		2.4 avatar  
		2.5 background  
		2.6 backtotop  
		2.7 badge  
		2.8 breadcrumb  
		2.9 buttons  
		2.10 carousel  
		2.11 color  
		2.12 forms  
		2.13 modal  
		2.14 pagination  
		2.15 preloader  
		2.16 pricing  
		2.17 progress-bar  
		2.18 ribbon  
		2.19 shortcodes  
		2.20 steps  
		2.21 tab  
		2.22 table  
		2.23 timeline  
		2.24 tooltip

	-----------------------
    03. layout
	-----------------------
		3.1 announcement  
		3.2 app-footer  
		3.3 app-header  
		3.4 app-sidebar  
		3.5 authentication  
		3.6 card  
		3.7 chat  
		3.8 company  
		3.9 ecommerce  
		3.10 email  
		3.11 holiday  
		3.12 invoice  
		3.13 payslip  
		3.14 project  
		3.15 seller  
		3.16 settings

	-----------------------
    04. plugins
	-----------------------
		4.1 apexcharts
		4.2 dropzone
		4.3 filepond
		4.4 flatpickr
		4.5 full-calender
		4.6 intl-tel-input
		4.7 nice-selector
		4.8 nouislider
		4.9 quill-editor
		4.10 rating
		4.11 select2
		4.12 shepherd
		4.13 slimselect
		4.14 sortable
		4.15 sweetalert2
		4.16 swiper
		4.17 tagify


/*---------------------------------
	1.1 Theme SCSS
---------------------------------*/
/* Google Fonts  */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
a,
.btn,
button,
span,
sub,
sup,
p,
input,
select,
textarea,
img,
svg,
.transition-3,
li,
h1,
h2,
h3,
h4,
h5,
h6, .body__overlay {
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}

:root {
  /** @color declaration */
  --custom-white: #FBFAF9;
  --color-white: #FFFFFF;
  --color-black: #0E1726;
  --color-placeholder: #4d4d4d;
  --color-light: #F6F5F2;
  --color-light-1: #888EA8;
  --color-heading: #08062d;
  --color-body: #08062d;
  --color-menu: #61748f;
  --color-body-secondary: #acaab1;
  --color-text-muted: #8d9eb5;
  --color-card-bg: #FFFFFF;
  --color-body-bg: #F8F7FA;
  --primary-rgb: 79, 70, 229;
  --secondary-rgb: 254, 187, 123;
  --success-rgb: 40, 167, 69;
  --info-rgb: 20, 147, 255;
  --warning-rgb: 255, 131, 15;
  --danger-rgb: 230, 50, 50;
  --purple-rgb: 128, 0, 128;
  --slateblue-rgb: 106, 90, 205;
  --teal-rgb: 0, 128, 128;
  --pink-rgb: 255, 105, 180;
  --orange-rgb: 254, 124, 88;
  --light-rgb: 136, 142, 168;
  --dark-rgb: 10, 27, 24;
  --rating-rgb: 255, 226, 52;
  --color-primary: rgba(var(--primary-rgb), 1);
  --color-secondary: rgb(var(--secondary-rgb));
  --color-success: rgb(var(--success-rgb));
  --color-info: rgb(var(--info-rgb));
  --color-warning: rgb(var(--warning-rgb));
  --color-danger: rgb(var(--danger-rgb));
  --color-purple: rgb(var(--purple-rgb));
  --color-slateblue: rgb(var(--slateblue-rgb));
  --color-teal: rgb(var(--teal-rgb));
  --color-pink: rgb(var(--pink-rgb));
  --color-orange: rgb(var(--orange-rgb));
  --color-light: rgb(var(--light-rgb));
  --color-dark: rgb(var(--dark-rgb));
  --color-rating: rgb(var(--rating-rgb));
  --primary-rgba: rgba(var(--primary-rgb), 1);
  --primary-rgba-1: rgba(var(--primary-rgb), .1);
  --primary-rgba-15: rgba(var(--primary-rgb), 0.15);
  --primary-rgba-2: rgba(var(--primary-rgb), .2);
  --primary-rgba-3: rgba(var(--primary-rgb), .3);
  --primary-rgba-4: rgba(var(--primary-rgb), .4);
  --primary-rgba-5: rgba(var(--primary-rgb), .5);
  --primary-rgba-6: rgba(var(--primary-rgb), .6);
  --primary-rgba-7: rgba(var(--primary-rgb), .7);
  --primary-rgba-8: rgba(var(--primary-rgb), .8);
  --primary-rgba-9: rgba(var(--primary-rgb), .9);
  --primary-rgba-05: rgba(var(--primary-rgb), 0.05);
  --secondary-rgba-1: rgba(var(--secondary-rgb), 0.1);
  --secondary-rgba-15: rgba(var(--secondary-rgb), 0.15);
  --secondary-rgba-5: rgba(var(--secondary-rgb), 0.5);
  --success-rgba-1: rgba(var(--success-rgb), 0.1);
  --success-rgba-15: rgba(var(--success-rgb), 0.15);
  --success-rgba-5: rgba(var(--success-rgb), 0.5);
  --info-rgba-1: rgba(var(--info-rgb), 0.1);
  --info-rgba-15: rgba(var(--info-rgb), 0.15);
  --warning-rgba-1: rgba(var(--warning-rgb), 0.1);
  --warning-rgba-15: rgba(var(--warning-rgb), 0.15);
  --danger-rgba-1: rgba(var(--danger-rgb), 0.1);
  --danger-rgba-15: rgba(var(--danger-rgb), 0.15);
  --purple-rgba-1: rgba(var(--purple-rgb), 0.1);
  --purple-rgba-15: rgba(var(--purple-rgb), 0.15);
  --purple-rgba-5: rgba(var(--purple-rgb), 0.5);
  --slateblue-rgba-1: rgba(var(--slateblue-rgb), 0.1);
  --slateblue-rgba-15: rgba(var(--slateblue-rgb), 0.15);
  --slateblue-rgba-5: rgba(var(--slateblue-rgb), 0.5);
  --teal-rgba-1: rgba(var(--teal-rgb), 0.1);
  --teal-rgba-15: rgba(var(--teal-rgb), 0.15);
  --teal-rgba-5: rgba(var(--teal-rgb), 0.5);
  --pink-rgba-1: rgba(var(--pink-rgb), 0.1);
  --pink-rgba-15: rgba(var(--pink-rgb), 0.15);
  --pink-rgba-5: rgba(var(--pink-rgb), 0.5);
  --orange-rgba-1: rgba(var(--orange-rgb), 0.1);
  --orange-rgba-15: rgba(var(--orange-rgb), 0.15);
  --orange-rgba-5: rgba(var(--orange-rgb), 0.5);
  --light-rgba-1: rgba(var(--light-rgb), 0.1);
  --light-rgba-15: rgba(var(--light-rgb), 0.15);
  --light-rgba-5: rgba(var(--light-rgb), 0.5);
  --dark-rgba-1: rgba(var(--dark-rgb), 0.1);
  --dark-rgba-15: rgba(var(--dark-rgb), 0.15);
  --dark-rgba-5: rgba(var(--dark-rgb), 0.5);
  --color-bg-primary: #160b32;
  --color-bg-secondary: #191426;
  --color-border: #DDE4E3;
  --color-border-2: #595564;
  --shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
  /* Gray set */
  --gray-1: #F9FAFB;
  --gray-2: #f2f4f5;
  --gray-3: #e6eaeb;
  --gray-4: #dbdfe1;
  --gray-5: #949eb7;
  --gray-6: #7987a1;
  --gray-7: #4d5875;
  --gray-8: #383853;
  --gray-9: #323251;
  /* White set */
  --white-1: rgba(255, 255, 255, 0.1);
  --white-2: rgba(255, 255, 255, 0.2);
  --white-3: rgba(255, 255, 255, 0.3);
  --white-4: rgba(255, 255, 255, 0.4);
  --white-5: rgba(255, 255, 255, 0.5);
  --white-6: rgba(255, 255, 255, 0.6);
  --white-7: rgba(255, 255, 255, 0.7);
  --white-8: rgba(255, 255, 255, 0.8);
  --white-9: rgba(255, 255, 255, 0.9);
  /* Black set */
  --black-1: rgba(14, 23, 38, 0.1);
  --black-15: rgba(14, 23, 38, 0.15);
  --black-2: rgba(14, 23, 38, 0.2);
  --black-3: rgba(14, 23, 38, 0.3);
  --black-4: rgba(14, 23, 38, 0.4);
  --black-5: rgba(14, 23, 38, 0.5);
  --black-6: rgba(14, 23, 38, 0.6);
  --black-7: rgba(14, 23, 38, 0.7);
  --black-8: rgba(14, 23, 38, 0.8);
  --black-9: rgba(14, 23, 38, 0.9);
  /**  @font family declaration */
  --ff-body: "Nunito Sans", sans-serif;
  --ff-title: "Nunito Sans", sans-serif;
  --ff-p: "Nunito Sans", sans-serif;
  --ff-remixicon: "remixicon";
  --ff-line-awesome: "Line Awesome Free";
  --ff-tabler: "tabler-icons";
  /** @font weight declaration */
  --fw-normal: normal;
  --fw-thin: 100;
  --fw-elight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-sbold: 600;
  --fw-bold: 700;
  --fw-ebold: 800;
  --fw-black: 900;
  /** @font size declaration */
  --fs-body: 14px;
  --fs-p: 14px;
  --fs-h1: 28px;
  --fs-h2: 24px;
  --fs-h3: 22px;
  --fs-h4: 20px;
  --fs-h5: 18px;
  --fs-h6: 16px;
  --fs-b1: 14px;
  --fs-b2: 15px;
  --fs-b3: 20px;
  --fs-b4: 24px;
  /** @transition value declaration */
  --transition: all .3s ease-in-out;
  --transition-5: all .5s ease-in-out;
  --transition-cubic: all 1.1s cubic-bezier(0, 0, 0.2, 1);
}
:root[data-theme-mode=dark] {
  --color-white: #0E1726;
  --color-black: #FFFFFF;
  --dark-rgb: 185, 185, 185;
  --color-placeholder: #909090;
  --color-text-muted: #9aa7b3;
  --color-heading: #BABFBE;
  --color-body: #BABFBE;
  --color-body-bg: #020109;
  --color-card-bg: #05041b;
  --color-border: #202C29;
  --shadow: 0px 2px 1px -1px rgba(255, 255, 255, 0.05);
  --gray-1: #1a1a2e;
  --gray-2: #24243d;
  --gray-3: #2e2e4a;
  --gray-4: #383857;
  --gray-5: #5a5a7d;
  --gray-6: #7a7a9e;
  --gray-7: #9d9dbf;
  --gray-8: #c1c1d9;
  --gray-9: #e0e0ed;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

/* Typography css start  */
body {
  color: var(--color-body);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  background: var(--color-body-bg);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h5,
h5,
.h5,
h6,
.h6 {
  color: var(--color-heading);
  margin-top: 0px;
  line-height: 1.2;
  margin-bottom: 0;
  font-weight: var(--fw-medium);
  word-break: break-word;
  font-family: var(--ff-title);
}

h1,
.h1 {
  font-size: var(--fs-h1);
}

h2,
.h2 {
  font-size: var(--fs-h2);
}

h3,
.h3 {
  font-size: var(--fs-h3);
}

h4,
.h4 {
  font-size: var(--fs-h4);
}

h5,
.h5 {
  font-size: var(--fs-h5);
}

h6,
.h6 {
  font-size: var(--fs-h6);
}

p {
  font-size: var(--fs-p);
  font-family: var(--ff-p);
  font-weight: var(--fw-normal);
  color: var(--color-body);
  margin-bottom: 15px;
  line-height: 1.6;
}
p.b1 {
  font-size: var(--fs-b1);
}
p.b2 {
  font-size: var(--fs-b2);
}
p.b3 {
  font-size: var(--fs-b3);
}
p.b4 {
  font-size: var(--fs-b4);
}
p:last-child {
  margin-bottom: 0;
}

.b1 {
  font-size: var(--fs-b1);
}

.b2 {
  font-size: var(--fs-b2);
}

.b3 {
  font-size: var(--fs-b3);
}

.b4 {
  font-size: var(--fs-b4);
}

.small,
small {
  font-size: 12px;
}

a {
  text-decoration: none;
}

ul,
ol {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
}

img {
  max-width: 100%;
  object-fit: cover;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

hr:not([size]) {
  margin: 0;
  border-color: var(--color-border);
  opacity: 1;
  border-width: 1px;
}

textarea {
  padding: 14px 24px;
  min-height: 200px;
}
textarea:focus {
  border-color: var(--color-primary);
}

*::-moz-selection {
  background: var(--color-primary);
  color: var(--color-white);
  text-shadow: none;
}
[data-theme-mode=dark] *::-moz-selection {
  color: var(--color-black);
}

::-moz-selection {
  background: var(--color-primary);
  color: var(--color-white);
  text-shadow: none;
}
[data-theme-mode=dark] ::-moz-selection {
  color: var(--color-black);
}

::selection {
  background: var(--color-primary);
  color: var(--color-white);
  text-shadow: none;
}
[data-theme-mode=dark] ::selection {
  color: var(--color-black);
}

*::-moz-placeholder {
  opacity: 1;
  font-size: 16px;
  color: var(--color-placeholder);
}

*::placeholder {
  opacity: 1;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--ff-title);
  color: var(--color-placeholder);
}

/*----------------------------------------
   Bootstrap customize
-----------------------------------------*/
@media (min-width: 992px) {
  body {
    padding-inline-end: 0 !important;
    overflow: auto !important;
  }
}
.container {
  padding-inline-start: 15px;
  padding-inline-end: 15px;
}

.row {
  --bs-gutter-x: 23px;
}

.g-15,
.gy-15 {
  --bs-gutter-y: 15px;
}

.g-25,
.gy-25 {
  --bs-gutter-y: 25px;
}

/*---------------------------------
    1.2 Common Classes
---------------------------------*/
.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.z-index-1 {
  z-index: 1;
}

.z-index-11 {
  z-index: 11;
}

.opacity-05 {
  opacity: 0.5;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.position-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.position-absolute {
  position: absolute;
}

.include-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hr-1 {
  border-top: 1px solid rgb(232, 232, 232);
}

.x-clip {
  overflow-x: clip;
}

@media (max-width: 575px) {
  .o-xs {
    overflow-x: hidden;
  }
}

.overflow-visible {
  overflow: visible;
}

/*----------------------------------------
    Body Overlay 
-----------------------------------------*/
.body__overlay {
  background-color: var(--color-black);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
  inset-inline-start: 0;
  opacity: 0;
  visibility: hidden;
}

.body__overlay.opened {
  opacity: 0.7;
  visibility: visible;
}

.image-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.image-overly {
  position: relative;
  z-index: 5;
}
.image-overly::before {
  position: absolute;
  content: "";
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

/*----------------------------------------
   Mfp customize
-----------------------------------------*/
.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 1280px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 1000px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 850px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 820px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 750px;
  }
}

.mfp-close {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.mfp-close:hover {
  color: var(--color-white);
}
.mfp-close::after {
  position: absolute;
  content: "\f4c7";
  height: 100%;
  width: 100%;
  font-family: var(--ff-remixicon);
  font-size: 31px;
  font-weight: 200;
  inset-inline-end: -20px;
  margin-top: -25px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .mfp-close::after {
    inset-inline-end: 15px;
    margin-top: -30px;
  }
}

.mfp-arrow-left {
  inset-inline-start: 15px;
}

.mfp-arrow-right {
  inset-inline-end: 15px;
}

.change-theme {
  cursor: pointer;
}

.dropdown-menu {
  animation-duration: 0.2s;
  -webkit-animation-duration: 0.2s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  animation-name: slideIn;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
}
.custom-scrollbar {
  overflow-x: scroll;
  -ms-overflow-style: thin;
  /* for Internet Explorer, Edge */
  scrollbar-width: thin;
  /* for Firefox */
  /* Set the width of the scrollbar */
  /* Set the color of the scrollbar thumb (the draggable part) */
  /* Set the color of the scrollbar track when the thumb is being dragged */
  /* Set the color of the scrollbar track (the area the thumb moves on) */
  /* Set the border-radius of the scrollbar thumb */
}
.custom-scrollbar::-webkit-scrollbar-width {
  scrollbar-width: thin;
  /* for Chrome, Safari, and Opera */
}
.custom-scrollbar::-webkit-scrollbar {
  width: 50px !important;
  /* Adjust as needed */
  height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #A6A6A6;
  /* Adjust as needed */
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #606060;
  /* Adjust as needed */
}
.custom-scrollbar::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  /* Adjust as needed */
}
.custom-scrollbar::-webkit-scrollbar-thumb:vertical {
  border-radius: 2px;
  /* Adjust as needed */
}

/*----------------------------------------*/
/*  2.1 accordion
/*----------------------------------------*/
.accordion-item {
  border-radius: 4px;
  color: var(--color-black);
  background-color: transparent;
  border: 1px solid var(--color-border);
}

.accordion-body {
  padding: 25px 25px;
  font-size: 16px;
  color: var(--color-black);
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 4px 4px;
}

.accordion-button {
  font-size: 18px;
  font-weight: 600;
  border-radius: 4px;
  color: var(--color-black);
  background-color: var(--color-white);
  border-bottom: 0 none;
  box-shadow: none;
  padding: 15px 15px;
  margin-bottom: 0;
  padding-inline-end: 50px;
}
@media (max-width:450px) {
  .accordion-button {
    padding: 20px 20px;
    padding-inline-end: 60px;
  }
}
.accordion-button span {
  color: var(--color-black);
  min-width: 35px;
  padding-inline-end: 15px;
  display: inline-block;
}
.accordion-button span i {
  color: var(--color-black);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 50px;
  height: 50px;
  background-color: var(--color-white);
  border-radius: 50%;
  font-size: 29px;
}
.accordion-button:not(.collapsed) {
  color: var(--color-black);
  background-color: var(--color-white);
  box-shadow: none;
  border-radius: 4px 4px 0 0 !important;
}
.accordion-button:focus {
  z-index: 3;
  outline: 0;
  box-shadow: none;
}
.accordion-button::after {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: auto;
  height: auto;
  border-radius: 50%;
  margin-inline-start: auto;
  content: "\ea4e";
  font-family: var(--ff-remixicon);
  font-size: 18px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: absolute;
  inset-inline-end: 25px;
  top: 50%;
  transform: translateY(-50%);
  background-image: none !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.accordion-button:not(.collapsed)::after {
  content: "\ea78";
  font-family: var(--ff-remixicon);
}

.accordion-button-title p {
  font-size: 14px;
  color: var(--color-text-muted);
}

.accordion-common-style .accordion-item {
  border-radius: 4px;
  color: var(--color-black);
  background-color: transparent;
  border: 1px solid var(--color-border);
}
.accordion-common-style .accordion-body {
  padding: 25px 25px;
  font-size: 16px;
  color: var(--color-black);
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 4px 4px;
}
.accordion-common-style .accordion-button-title p {
  font-size: 14px;
  color: var(--color-text-muted);
}
.accordion-common-style.accordion-transparent .accordion-button {
  background-color: transparent;
}
.accordion-common-style.accordion-transparent .accordion-button:not(.collapsed) {
  background-color: transparent;
}
.accordion-common-style.accordion-transparent .accordion-body {
  background-color: transparent;
}
.accordion-common-style.accordion-icon-left .accordion-button {
  padding-inline-end: 0px !important;
  padding-inline-start: 38px !important;
  border-radius: 0;
}
.accordion-common-style.accordion-icon-left .accordion-button::before {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-inline-start: auto;
  content: "+";
  font-family: var(--ff-remixicon);
  font-size: 18px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: absolute;
  inset-inline-start: 0;
  top: 32px;
  transform: translateY(-50%);
  background-image: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.accordion-common-style.accordion-icon-left .accordion-button:not(.collapsed)::before {
  content: "\f1ae";
  font-family: var(--ff-remixicon);
}
.accordion-common-style.accordion-icon-left .accordion-button::after {
  display: none;
}
.accordion-common-style.accordion-icon-left .accordion-button:not(.collapsed)::after {
  display: none;
}
.accordion-common-style.accordion-item-margin .accordion-item:not(:last-child) {
  margin-bottom: 25px;
}
.accordion-common-style.accordion-style-one .accordion-item {
  margin-bottom: 25px;
  overflow: inherit;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
}
.accordion-common-style.accordion-style-one .accordion-item:last-child {
  margin-bottom: 0;
}
.accordion-common-style.accordion-style-one .accordion-button::after {
  content: "\ea6e";
  font-family: var(--ff-remixicon);
  transform: translateY(-50%);
}
.accordion-common-style.accordion-style-one .accordion-button:not(.collapsed)::after {
  content: "\ea4e";
  font-family: var(--ff-remixicon);
}
.accordion-common-style.accordion-style-one .accordion-body {
  border-top: none;
  padding: 0px 15px 15px;
}
.accordion-common-style.accordion-style-two .accordion-item {
  border: none;
  border-radius: 0;
}
.accordion-common-style.accordion-style-two .accordion-item:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}
.accordion-common-style.accordion-style-two .accordion-button {
  padding: 20px 0;
  margin-bottom: 0;
  padding-inline-end: 38px;
}
.accordion-common-style.accordion-style-two .accordion-button span {
  width: auto;
  padding-inline-end: 15px;
}
.accordion-common-style.accordion-style-two .accordion-body {
  padding: 0 0 25px;
  border-top: none;
}
.accordion-common-style.accordion-sl-number {
  counter-reset: count;
  overflow: hidden;
}
.accordion-common-style.accordion-sl-number .accordion-button {
  padding-inline-end: 0px;
  padding-inline-start: 60px;
  position: relative;
  border-radius: 0;
}
.accordion-common-style.accordion-sl-number .accordion-button::before {
  position: absolute;
  content: "";
  inset-inline-start: -15px;
  top: 50%;
  font-size: 48px;
  font-weight: 600;
  counter-increment: count;
  content: "0" counter(count);
  transition: all 500ms ease;
  display: inline-block;
  color: var(--color-primary);
  -webkit-text-stroke: 2px transparent;
  line-height: 1;
  transform: translateY(-50%);
  z-index: 10;
}
.accordion-common-style.accordion-sl-number .accordion-button::after {
  display: none;
}
.accordion-common-style.accordion-sl-number .accordion-button:not(.collapsed)::after {
  display: none;
}
.accordion-common-style.accordion-sl-number .accordion-button.collapsed::before {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-primary);
}
.accordion-common-style.accordion-sl-number .accordion-body {
  padding: 20px 60px 25px;
}
.accordion-common-style.accordion-bg .accordion-item {
  border: none;
}
.accordion-common-style.accordion-bg .accordion-button {
  color: var(--color-black);
  background-color: var(--gray-3);
  border-radius: 4px !important;
}
.accordion-common-style.accordion-bg .accordion-body {
  color: var(--color-body);
  background-color: transparent;
  border-top: 1px solid var(--color-border);
  border: none;
  padding-bottom: 0;
}
.accordion-common-style.accordion-bg.accordion-primary .accordion-button {
  color: var(--color-white);
  background-color: var(--color-primary);
}
.accordion-common-style.accordion-bg.accordion-secondary .accordion-button {
  color: var(--color-white);
  background-color: var(--color-secondary);
}
.accordion-common-style.accordion-bg.accordion-info .accordion-button {
  color: var(--color-white);
  background-color: var(--color-info);
}
.accordion-common-style.accordion-bg.accordion-success .accordion-button {
  color: var(--color-white);
  background-color: var(--color-success);
}
.accordion-common-style.accordion-bg.accordion-warning .accordion-button {
  color: var(--color-white);
  background-color: var(--color-warning);
}
.accordion-common-style.accordion-bg.accordion-danger .accordion-button {
  color: var(--color-white);
  background-color: var(--color-danger);
}
.accordion-common-style .accordion-button {
  font-size: 18px;
  font-weight: 600;
  border-radius: 4px;
  color: var(--color-black);
  background-color: var(--color-white);
  border-bottom: 0 none;
  box-shadow: none;
  padding: 15px 15px;
  margin-bottom: 0;
  padding-inline-end: 50px;
}
@media (max-width:450px) {
  .accordion-common-style .accordion-button {
    padding: 20px 20px;
    padding-inline-end: 60px;
  }
}
.accordion-common-style .accordion-button span {
  color: var(--color-black);
  min-width: 35px;
  padding-inline-end: 15px;
  display: inline-block;
}
.accordion-common-style .accordion-button span i {
  color: var(--color-black);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 50px;
  height: 50px;
  background-color: var(--gray-3);
  border-radius: 50%;
  font-size: 29px;
}
.accordion-common-style .accordion-button:not(.collapsed) {
  color: var(--color-black);
  background-color: var(--gray-3);
  box-shadow: none;
  border-radius: 4px 4px 0 0 !important;
}
.accordion-common-style .accordion-button:focus {
  z-index: 3;
  outline: 0;
  box-shadow: none;
}
.accordion-common-style .accordion-button::after {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: auto;
  height: auto;
  border-radius: 50%;
  margin-inline-start: auto;
  content: "\ea4e";
  font-family: var(--ff-remixicon);
  font-size: 18px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: absolute;
  inset-inline-end: 25px;
  top: 50%;
  transform: translateY(-50%);
  background-image: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.accordion-common-style .accordion-button:not(.collapsed)::after {
  content: "\ea78";
  font-family: var(--ff-remixicon);
}

/*----------------------------------------*/
/*  accordion end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.2 alert
/*----------------------------------------*/
.alert {
  position: relative;
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 5px;
}
.alert.alert-primary {
  background-color: var(--primary-rgba-15);
  color: var(--color-primary);
  border-color: var(--primary-rgba-15);
}
.alert.alert-secondary {
  background-color: var(--secondary-rgba-15);
  color: var(--color-secondary);
  border-color: var(--secondary-rgba-15);
}
.alert.alert-success {
  background-color: var(--success-rgba-15);
  color: var(--color-success);
  border-color: var(--success-rgba-15);
}
.alert.alert-danger {
  background-color: var(--danger-rgba-15);
  color: var(--color-danger);
  border-color: var(--danger-rgba-15);
}
.alert.alert-warning {
  background-color: var(--warning-rgba-15);
  color: var(--color-warning);
  border-color: var(--warning-rgba-15);
}
.alert.alert-info {
  background-color: var(--info-rgba-15);
  color: var(--color-info);
  border-color: var(--info-rgba-15);
}
.alert.alert-light {
  background-color: var(--light-rgba-15);
  color: var(--color-light);
  border-color: var(--light-rgba-15);
}
.alert.alert-dark {
  background-color: var(--dark-rgba-15);
  color: var(--color-dark);
  border-color: var(--dark-rgba-15);
}
.alert.alert-solid-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
[data-theme-mode=dark] .alert.alert-solid-primary {
  color: var(--color-black);
}
.alert.alert-solid-secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary);
}
.alert.alert-solid-success {
  background-color: var(--color-success);
  color: var(--color-white);
  border-color: var(--color-success);
}
.alert.alert-solid-danger {
  background-color: var(--color-danger);
  color: var(--color-white);
  border-color: var(--color-danger);
}
.alert.alert-solid-warning {
  background-color: var(--color-warning);
  color: var(--color-white);
  border-color: var(--color-warning);
}
.alert.alert-solid-info {
  background-color: var(--color-info);
  color: var(--color-white);
  border-color: var(--color-info);
}
.alert.alert-solid-light {
  background-color: var(--color-light);
  color: var(--color-white);
  border-color: var(--color-light);
}
.alert.alert-solid-dark {
  background-color: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}
.alert.alert-outline-primary {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.alert.alert-outline-secondary {
  background-color: var(--color-white);
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.alert.alert-outline-success {
  background-color: var(--color-white);
  color: var(--color-success);
  border-color: var(--color-success);
}
.alert.alert-outline-danger {
  background-color: var(--color-white);
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.alert.alert-outline-warning {
  background-color: var(--color-white);
  color: var(--color-warning);
  border-color: var(--color-warning);
}
.alert.alert-outline-info {
  background-color: var(--color-white);
  color: var(--color-info);
  border-color: var(--color-info);
}
.alert.alert-outline-light {
  background-color: var(--color-white);
  color: var(--color-light);
  border-color: var(--color-light);
}
.alert.alert-outline-dark {
  background-color: var(--color-white);
  color: var(--color-dark);
  border-color: var(--color-dark);
}
.alert.rounded-pill {
  border-radius: 50px !important;
}
.alert .btn-close {
  background-image: none;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}
[data-theme-mode=dark] .alert .btn-close {
  color: var(--color-black);
}
.alert .btn-close:hover {
  opacity: 1;
}
.alert .btn-close i {
  font-size: 16px;
}

.alert-link {
  font-weight: 700;
  color: var(--color-heading);
  text-decoration: underline;
}

.btn-close:focus {
  outline: 0;
  box-shadow: none;
}

.alert-icon-label {
  position: relative;
  padding-inline-start: 60px;
  border: 0;
}

.label-icon-solid {
  position: absolute;
  width: 45px;
  height: 100%;
  inset-inline-start: 0;
  top: 0;
  color: var(--color-white);
  background-color: var(--color-primary);
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 4px 0 0 4px;
}

.alert-primary .label-icon-solid {
  background-color: var(--color-primary);
}

.alert-secondary .label-icon-solid {
  background-color: var(--color-secondary);
}

.alert-success .label-icon-solid {
  background-color: var(--color-success);
}

.alert-danger .label-icon-solid {
  background-color: var(--color-danger);
}

.alert-warning .label-icon-solid {
  background-color: var(--color-warning);
}

.alert-info .label-icon-solid {
  background-color: var(--color-info);
}

.alert-light .label-icon-solid {
  background-color: var(--color-light);
}

.alert-dark .label-icon-solid {
  background-color: var(--color-dark);
}

.label-icon {
  position: absolute;
  width: 45px;
  height: 100%;
  inset-inline-start: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.25);
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 4px 0 0 4px;
}

/* Animation for appearing */
@keyframes alertFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.alert {
  animation: alertFadeIn 0.3s ease-out;
}

.popover-header {
  padding: 8px 16px;
  margin-bottom: 0;
  font-size: 16px;
  color: var(--color-heading);
  background-color: var(--gray-2);
  border-bottom: 1px solid var(--color-border);
}

.popover-body {
  padding: 8px 16px;
  color: var(--color-black);
  font-size: 14px;
}

.toast-header {
  padding: 8px 16px;
  margin-bottom: 0;
  font-size: 16px;
  color: var(--color-heading);
  background-color: var(--gray-2);
  border-bottom: 1px solid var(--color-border);
}
.toast-header .btn-close {
  background-image: none;
  font-size: 20px;
  color: var(--color-black);
  margin-top: -10px;
}

.toast-body {
  padding: 8px 16px;
  color: var(--color-black);
  font-size: 14px;
  font-weight: var(--fw-medium);
}
[data-theme-mode=dark] .toast-body {
  color: var(--color-white);
}

.toast-placement .bd-example-toasts {
  min-height: 360px;
}

.toastify {
  padding: 12px 20px;
  color: #ffffff;
  display: inline-block;
  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
  background: -webkit-linear-gradient(315deg, var(--color-secondary), var(--color-primary));
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  position: fixed;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  max-width: calc(50% - 20px);
  z-index: 2147483647;
}

/* Custom positions for "middle" toasts */
.toast-middle {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 9999;
  width: fit-content;
}

.left {
  inset-inline-start: 1rem !important;
  width: fit-content;
}

.center {
  inset-inline-start: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: fit-content;
}

.right {
  inset-inline-end: 1rem !important;
  width: fit-content;
}

/*----------------------------------------*/
/*  alert end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.3 Animations
/*----------------------------------------*/
.blink {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}
@-webkit-keyframes btnMarqueeTextX {
  100% {
    transform: translateX(-200%);
  }
}
@keyframes btnMarqueeTextX {
  100% {
    transform: translateX(-200%);
  }
}
@-webkit-keyframes btnMarqueeTextY {
  100% {
    transform: translateY(-200%);
  }
}
@keyframes btnMarqueeTextY {
  100% {
    transform: translateY(-200%);
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(0, 108, 228, 0.5);
    box-shadow: 0 0 0 0 rgba(0, 108, 228, 0.5);
  }
  70% {
    -moz-box-shadow: 0 0 0 45px rgba(0, 108, 228, 0);
    box-shadow: 0 0 0 45px rgba(0, 108, 228, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(0, 108, 228, 0);
    box-shadow: 0 0 0 0 rgba(0, 108, 228, 0);
  }
}
.pulse-white {
  animation: pulse-white 2s infinite;
}

@keyframes pulse-white {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
.animate-play {
  position: relative;
  z-index: 5;
}
.animate-play::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  border: 1px solid rgb(134, 134, 134);
  top: 0;
  left: 0;
  right: 0px;
  bottom: 0px;
  z-index: 0;
  animation-name: popupBtn;
  animation-duration: 1.6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  z-index: -1;
}
.animate-play::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  border: 1px solid rgb(134, 134, 134);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  z-index: 0;
  animation-name: popupBtn;
  animation-duration: 1.8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  z-index: -1;
}

@keyframes popupBtn {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.3;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes ripple {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(1.9);
    transform: scale(1.9);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(2.3);
    transform: scale(2.3);
    opacity: 0;
  }
}
@keyframes slide-left {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes iconBounce {
  0% {
    animation-timing-function: ease-in;
    opacity: 1;
    transform: translateY(-25px);
  }
  24% {
    opacity: 1;
  }
  40% {
    animation-timing-function: ease-in;
    transform: translateY(-24px);
  }
  65% {
    animation-timing-function: ease-in;
    transform: translateY(-12px);
  }
  82% {
    animation-timing-function: ease-in;
    transform: translateY(-6px);
  }
  93% {
    animation-timing-function: ease-in;
    transform: translateY(-4px);
  }
  25%, 55%, 75%, 87% {
    animation-timing-function: ease-out;
    transform: translateY(0px);
  }
  100% {
    animation-timing-function: ease-out;
    opacity: 1;
    transform: translateY(0px);
  }
}
.line-dash {
  stroke-dasharray: 4;
  stroke-dashoffset: 350;
  -webkit-animation: line-dash 30s linear backwards alternate-reverse infinite;
  animation: line-dash 30s linear backwards alternate-reverse infinite;
}

@keyframes line-dash {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes planeRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}
@keyframes scaleZeroOne {
  0% {
    transform: scale(0.6);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes stoneSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100px);
  }
}
@-moz-keyframes badgeSpin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes badgeSpin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes badgeSpin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes plane3Scale {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-ms-keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-infinite {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Right To Left */
@keyframes right-2-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100px);
  }
}
.upDown {
  animation: upDown 1.3S infinite alternate;
}

@keyframes upDown {
  0% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.spin {
  animation: spin 15s linear infinite;
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes qode-draw {
  0%, 100% {
    -webkit-clip-path: inset(-2px 0);
    clip-path: inset(-2px 0);
  }
  42% {
    -webkit-clip-path: inset(-2px 0 -2px 100%);
    clip-path: inset(-2px 0 -2px 100%);
  }
  43% {
    -webkit-clip-path: inset(-2px 100% -2px 0);
    clip-path: inset(-2px 100% -2px 0);
  }
}
@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(16px);
    -moz-transform: translateY(16px);
    -ms-transform: translateY(16px);
    -o-transform: translateY(16px);
    transform: translateY(16px);
  }
}
@-moz-keyframes scroll {
  0% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(16px);
    -moz-transform: translateY(16px);
    -ms-transform: translateY(16px);
    -o-transform: translateY(16px);
    transform: translateY(16px);
  }
}
@-ms-keyframes scroll {
  0% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(16px);
    -moz-transform: translateY(16px);
    -ms-transform: translateY(16px);
    -o-transform: translateY(16px);
    transform: translateY(16px);
  }
}
@keyframes scroll {
  0% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(16px);
    -moz-transform: translateY(16px);
    -ms-transform: translateY(16px);
    -o-transform: translateY(16px);
    transform: translateY(16px);
  }
}
@keyframes bubble {
  0% {
    -webkit-transform: rotate(0deg) translateX(-50px);
    -moz-transform: rotate(0deg) translateX(-50px);
    -ms-transform: rotate(0deg) translateX(-50px);
    transform: rotate(0deg) translateX(-50px);
  }
  100% {
    -webkit-transform: rotate(360deg) translateY(100px);
    -moz-transform: rotate(360deg) translateY(100px);
    -ms-transform: rotate(360deg) translateY(100px);
    transform: rotate(360deg) translateY(100px);
  }
}
@-webkit-keyframes leftright {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
@-moz-keyframes leftright {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
@-ms-keyframes leftright {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
@keyframes leftright {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
@keyframes bounce {
  0%, 10%, 100%, 20%, 50%, 80% {
    transform: translateX(0);
  }
  40%, 60% {
    transform: translateX(-15px);
  }
}
@keyframes top-image-bounce {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(16px);
    -moz-transform: translateY(16px);
    -ms-transform: translateY(16px);
    -o-transform: translateY(16px);
    transform: translateY(16px);
  }
}
@-moz-keyframes scroll {
  0% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(16px);
    -moz-transform: translateY(16px);
    -ms-transform: translateY(16px);
    -o-transform: translateY(16px);
    transform: translateY(16px);
  }
}
@-ms-keyframes scroll {
  0% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(16px);
    -moz-transform: translateY(16px);
    -ms-transform: translateY(16px);
    -o-transform: translateY(16px);
    transform: translateY(16px);
  }
}
@keyframes scroll {
  0% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(16px);
    -moz-transform: translateY(16px);
    -ms-transform: translateY(16px);
    -o-transform: translateY(16px);
    transform: translateY(16px);
  }
}
@keyframes pulse-blur {
  from, to {
    scale: 1;
    filter: blur(0px);
  }
  50% {
    scale: 1.05;
    filter: blur(2px);
  }
}
.cd-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left;
}
.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
  font-weight: inherit;
}
.cd-words-wrapper b.is-visible {
  position: relative;
}

.no-js .cd-words-wrapper b {
  opacity: 0;
}
.no-js .cd-words-wrapper b.is-visible {
  opacity: 1;
}

.cd-headline.clip span {
  display: inline-block;
  transition: none;
}
.cd-headline.clip .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.cd-headline.clip .cd-words-wrapper::after {
  top: 0;
  right: 0;
  width: 2px;
  content: "";
  height: 100%;
  position: absolute;
  background: -webkit-linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}
.cd-headline.clip b {
  opacity: 0;
}
.cd-headline.clip b.is-visible {
  opacity: 1;
}

@keyframes line1 {
  0% {
    top: 0px;
    opacity: 1;
  }
  50% {
    top: 50%;
  }
  100% {
    top: 100%;
    opacity: 1;
  }
}
@keyframes line2 {
  0% {
    opacity: 1;
    bottom: 0px;
  }
  50% {
    bottom: 50%;
  }
  100% {
    bottom: 100%;
    opacity: 1;
  }
}
@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
  }
  100% {
    -webkit-transform: translateX(7px);
    -moz-transform: translateX(7px);
    -ms-transform: translateX(7px);
    -o-transform: translateX(7px);
    transform: translateX(7px);
  }
}
@-moz-keyframes scroll {
  0% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
  }
  100% {
    -webkit-transform: translateX(7px);
    -moz-transform: translateX(7px);
    -ms-transform: translateX(7px);
    -o-transform: translateX(7px);
    transform: translateX(7px);
  }
}
@-ms-keyframes scroll {
  0% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
  }
  100% {
    -webkit-transform: translateX(7px);
    -moz-transform: translateX(7px);
    -ms-transform: translateX(7px);
    -o-transform: translateX(7px);
    transform: translateX(7px);
  }
}
@keyframes scroll {
  0% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
  }
  100% {
    -webkit-transform: translateX(7px);
    -moz-transform: translateX(7px);
    -ms-transform: translateX(7px);
    -o-transform: translateX(7px);
    transform: translateX(7px);
  }
}
@keyframes bannerAnimationOne {
  0% {
    transform: translate(0px, 0px);
  }
  20% {
    transform: translate(20px, -5px);
  }
  40% {
    transform: translate(50px, 20px);
  }
  60% {
    transform: translate(20px, 50px);
  }
  80% {
    transform: translate(-20px, 30px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
@-webkit-keyframes about-text {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes about-text {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-ms-keyframes about-text {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes about-text {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
/*----------------------------------------*/
/*  Animations end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.4 avatar
/*----------------------------------------*/
.avatar {
  position: relative;
  height: 36px;
  width: 36px;
  min-width: 36px;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flexbox;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 500;
}
.avatar.avatar-xs {
  height: 22px;
  width: 22px;
  min-width: 22px;
}
.avatar.avatar-sm {
  height: 30px;
  width: 30px;
  min-width: 30px;
}
.avatar.avatar-md {
  height: 42px;
  width: 42px;
  min-width: 42px;
}
.avatar.avatar-50 {
  height: 50px;
  width: 50px;
  min-width: 50px;
}
.avatar.avatar-lg {
  height: 70px;
  width: 70px;
  min-width: 70px;
}
.avatar.avatar-xl {
  height: 80px;
  width: 80px;
  min-width: 80px;
}
.avatar.avatar-xxl {
  height: 100px;
  width: 100px;
  min-width: 100px;
}
.avatar.avatar-big {
  height: 122px;
  width: 122px;
  min-width: 122px;
}
.avatar.border {
  padding: 2px;
  border: 1px solid var(--color-border);
}
.avatar img {
  width: 100%;
  height: 100%;
}

.avatar-group {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding-inline-start: 10px;
}
.avatar-group .avatar-group-item {
  margin-inline-start: -10px;
  border-radius: 100%;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.avatar-group .avatar-group-item:hover {
  position: relative;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  z-index: 1;
}

.avatar-badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 28px;
  min-width: 28px;
  height: 28px;
  font-size: 12px;
  border: 2px solid var(--color-white);
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}
.avatar-badge.avatar-xs {
  height: 20px;
  width: 20px;
  min-width: 20px;
  font-size: 10px;
}

.op-0 {
  opacity: 0;
}

/*----------------------------------------*/
/*  avatar end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.5 Background
/*----------------------------------------*/
.bg-primary {
  background-color: var(--color-primary) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-transparent {
  background-color: transparent !important;
}

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

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

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

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

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

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

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

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

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

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

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

.bg-slateblue-transparent {
  background-color: var(--slateblue-rgba-15) !important;
}

.bg-teal-transparent {
  background-color: var(--teal-rgba-15) !important;
}

.bg-pink-transparent {
  background-color: var(--pink-rgba-15) !important;
}

.gradient-color {
  background: linear-gradient(135deg, #1c4b42 0%, #FEBB7B 100%);
}

.text-bg-primary {
  color: var(--color-white) !important;
  background-color: var(--color-primary) !important;
}
[data-theme-mode=dark] .text-bg-primary {
  color: var(--color-black) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

/*----------------------------------------*/
/*  Background end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.6 Back to top
/*----------------------------------------*/
.progress-wrap {
  position: fixed;
  inset-inline-end: 50px;
  bottom: 100px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px var(--gray-3);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all ease 0.5s;
  background: var(--gray-1);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .progress-wrap {
    height: 36px;
    width: 36px;
    inset-inline-end: 30px;
    bottom: 30px;
  }
}
@media (max-width: 575px) {
  .progress-wrap.mobile-right {
    bottom: 100px;
  }
}
.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  bottom: 50px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .progress-wrap.active-progress {
    bottom: 30px;
  }
}
.progress-wrap::after {
  position: absolute;
  font-family: var(--ff-remixicon);
  content: "\ea77";
  text-align: center;
  font-size: 20px;
  color: var(--color-black);
  inset-inline-start: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .progress-wrap::after {
    height: 36px;
    width: 36px;
  }
}
[data-theme-mode=dark] .progress-wrap::after {
  color: var(--color-black);
}
.progress-wrap svg path {
  fill: none;
}
.progress-wrap svg.progress-circle path {
  stroke: var(--color-primary);
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

/*----------------------------------------*/
/*  Back to top end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.7 badge
/*----------------------------------------*/
.badge {
  font-size: 12px !important;
  font-weight: var(--fw-medium) !important;
  padding: 7px 11px 7px 10px !important;
  color: var(--custom-white);
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flexbox;
  display: inline-flex;
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 4px;
  gap: 6px !important;
  line-height: 1 !important;
}
.badge.p-1 {
  padding: 4px !important;
}
.badge.badge-circle {
  padding: 0 0;
  width: 25px;
  height: 25px;
  min-width: auto;
  border-radius: 50%;
  margin-inline-start: 10px;
  color: var(--color-black);
}
.badge.badge-circle i {
  font-size: 14px;
  margin-inline-end: 0;
}
.badge.square {
  padding: 10px !important;
}
.badge.small {
  font-size: 12px !important;
  padding: 4px 5px !important;
}

.bg-label-primary {
  background-color: var(--primary-rgba-15);
  color: var(--color-primary);
}

.bg-label-secondary {
  background-color: var(--secondary-rgba-15);
  color: var(--color-secondary);
}

.bg-label-success {
  background-color: var(--success-rgba-15);
  color: var(--color-success);
}

.bg-label-info {
  background-color: var(--info-rgba-15);
  color: var(--color-info);
}

.bg-label-warning {
  background-color: var(--warning-rgba-15);
  color: var(--color-warning);
}

.bg-label-danger {
  background-color: var(--danger-rgba-15);
  color: var(--color-danger);
}

.bg-label-purple {
  background-color: var(--purple-rgba-15);
  color: var(--color-purple);
}

.bg-label-slateblue {
  background-color: var(--slateblue-rgba-15);
  color: var(--color-slateblue);
}

.bg-label-teal {
  background-color: var(--teal-rgba-15);
  color: var(--color-teal);
}

.bg-label-pink {
  background-color: var(--pink-rgba-15);
  color: var(--color-pink);
}

.bg-label-orange {
  background-color: var(--orange-rgba-15);
  color: var(--color-orange);
}

.bg-label-light {
  background-color: var(--light-rgba-15);
  color: var(--color-light);
}

.bg-label-dark {
  background-color: var(--dark-rgba-15);
  color: var(--color-dark);
}
[data-theme-mode=dark] .bg-label-dark {
  background-color: var(--light-rgba-15);
  color: var(--color-light);
}

/* alert-badge */
.alert-badge {
  font-size: 12px;
  font-weight: var(--fw-regular);
  padding: 4px 10px 4px 10px;
  color: var(--color-black);
  height: 26px;
  min-width: 75px;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flexbox;
  display: inline-flex;
  text-align: center;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
}
.alert-badge.border-none {
  border-radius: 0 !important;
}

/* tag badge */
.tag-badge {
  font-size: 12px;
  padding: 4px 10px 4px 10px;
  line-height: 1;
  color: var(--color-black);
  background-color: var(--gray-3);
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flexbox;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  border-radius: 3px;
}
[data-theme-mode=dark] .tag-badge {
  background-color: var(--gray-5);
  color: var(--color-black);
}

/* dot badge */
.bullet {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  display: block;
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  color: var(--color-heading);
  background-color: var(--gray-3);
  text-align: center;
  justify-content: center;
  border-radius: 4px;
  padding: 1px 8px 2px 8px;
  font-size: 12px;
  gap: 4px;
}

/*----------------------------------------*/
/*  badge end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.8 Breadcrumb
/*----------------------------------------*/
.page-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, "\f2e5");
  font-family: var(--ff-remixicon) !important;
}
[dir=rtl] .page-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, "\f2e3");
}

.breadcrumb .breadcrumb-item a {
  color: var(--color-primary);
  font-weight: var(--fw-sbold);
}
.breadcrumb .breadcrumb-item.active {
  color: var(--color-text-muted);
  font-weight: var(--fw-sbold);
}

.page-header-breadcrumb .breadcrumb-icon svg {
  width: 16px;
  height: 16px;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-text-muted);
}

.breadcrumb-example1 .breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-text-muted);
  content: var(--bs-breadcrumb-divider, "\f2e5");
  font-family: var(--ff-remixicon) !important;
}
[dir=rtl] .breadcrumb-example1 .breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, "\f2e3");
}

.breadcrumb-style1 .breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-text-muted);
  content: var(--bs-breadcrumb-divider, "\f054");
  font-family: var(--ff-remixicon) !important;
}

[dir=rtl] .breadcrumb-item + .breadcrumb-item::before {
  float: right;
  padding-left: var(--bs-breadcrumb-item-padding-x);
}

.breadcrumb-item + .breadcrumb-item {
  padding-inline-start: var(--bs-breadcrumb-item-padding-x) !important;
}

/*----------------------------------------*/
/*  Breadcrumb end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.9 Buttons
/*----------------------------------------*/
.btn {
  font-size: 14px !important;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flexbox;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 7.5px 20px;
  transition: all 0.3s linear !important;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  white-space: nowrap !important;
  gap: 0 6px !important;
  font-weight: var(--fw-medium) !important;
  border: none !important;
  color: var(--custom-white);
}
.btn.active {
  color: var(--color-primary) !important;
  background-color: var(--color-secondary) !important;
}
.btn.btn-xs {
  padding: 3px 15px 2px 15px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
}
.btn.btn-sm {
  padding: 4px 15px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  border-radius: 4px !important;
}
.btn.btn-small {
  padding: 0 26px;
  height: 40px;
}
.btn.btn-medium {
  padding: 0 30px;
  height: 56px;
}
.btn.btn-large {
  padding: 0 34px !important;
  height: 60px !important;
  font-size: 20px !important;
}
.btn.btn-extra-large {
  padding: 0 46px;
  height: 76px;
  font-size: 24px;
}
.btn .left-icon {
  margin-inline-end: 10px;
}
.btn .right-icon {
  margin-inline-start: 10px;
}
.btn:hover .fa-spinner {
  animation-name: fa-spin;
  animation-duration: var(--fa-animation-duration, 5s) !important;
  animation-iteration-count: var(--fa-animation-iteration-count, infinite) !important;
  animation-timing-function: var(--fa-animation-timing, linear) !important;
  animation-direction: alternate;
}
.btn .thumb {
  margin-inline-end: 10px;
  width: 20px;
  height: 20px;
  line-height: 20px;
}

.dropdown-toggle-split {
  padding-inline-end: 9px !important;
  padding-inline-start: 9px !important;
}

.btn-label {
  position: relative;
  padding-inline-start: 46px !important;
}
.btn-label .icon {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 36px;
  min-width: 36px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 6px 0 0 6px;
}
.btn-label .icon.solid {
  inset-inline-start: -1px;
}

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

.btn-icon {
  font-weight: 500;
  text-transform: uppercase;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flexbox;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  width: 28px;
  min-width: 28px;
  height: 28px;
}
.btn-icon.btn-sm {
  width: 36px;
  min-width: 36px;
  height: 36px;
}
.btn-icon.btn-md {
  width: 42px;
  min-width: 42px;
  height: 42px;
  font-size: 16px;
}
.btn-icon.btn-medium {
  width: 52px;
  height: 52px;
  min-width: 52px;
  font-size: 20px;
}
.btn-icon.btn-large {
  width: 60px;
  min-width: 60px;
  height: 60px;
  font-size: 22px;
}
.btn-icon.btn-extra-large {
  width: 72px;
  min-width: 72px;
  height: 72px;
  font-size: 42px;
}
.btn-icon.primary {
  background-color: var(--primary-rgba-15) !important;
  color: var(--color-primary) !important;
}
.btn-icon.primary:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-primary) !important;
}
.btn-icon.outline-secondary:hover {
  color: var(--color-secondary) !important;
  background-color: transparent;
  border: 1px solid var(--color-secondary) !important;
}
.btn-icon.outline-success:hover {
  color: var(--color-success) !important;
  background-color: transparent;
  border: 1px solid var(--color-success) !important;
}
.btn-icon.outline-warning:hover {
  color: var(--color-warning) !important;
  background-color: transparent;
  border: 1px solid var(--color-warning) !important;
}
.btn-icon.outline-info:hover {
  color: var(--color-info) !important;
  background-color: transparent;
  border: 1px solid var(--color-info) !important;
}
.btn-icon.outline-danger:hover {
  color: var(--color-danger) !important;
  background-color: transparent;
  border: 1px solid var(--color-danger) !important;
}

.btn-primary {
  color: var(--custom-white) !important;
  background-color: var(--color-primary) !important;
}
.btn-primary:hover {
  color: var(--color-primary) !important;
  background-color: var(--color-secondary) !important;
}

.btn-secondary {
  color: var(--custom-white) !important;
  background-color: var(--color-secondary) !important;
}
.btn-secondary:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-primary) !important;
}

.btn-secondary-white {
  background-color: var(--color-secondary) !important;
}
.btn-secondary-white:hover {
  color: var(--color-black) !important;
  background-color: var(--custom-white) !important;
}

.btn-success {
  background-color: var(--color-success) !important;
  color: var(--custom-white) !important;
}
.btn-success:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-primary) !important;
}

.btn-warning {
  background-color: var(--color-warning) !important;
  color: var(--custom-white) !important;
}
.btn-warning:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-primary) !important;
}

.btn-danger {
  background-color: var(--color-danger) !important;
  color: var(--custom-white) !important;
}
.btn-danger:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-primary) !important;
}

.btn-info {
  background-color: var(--color-info) !important;
  color: var(--custom-white) !important;
}
.btn-info:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-primary) !important;
}

.btn-purple {
  background-color: var(--color-purple) !important;
  color: var(--custom-white) !important;
}
.btn-purple:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-primary) !important;
}

.btn-slateblue {
  background-color: var(--color-slateblue) !important;
  color: var(--custom-white) !important;
}
.btn-slateblue:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-primary) !important;
}

.btn-teal {
  background-color: var(--color-teal) !important;
  color: var(--custom-white) !important;
}
.btn-teal:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-primary) !important;
}

.btn-pink {
  background-color: var(--color-pink) !important;
  color: var(--custom-white) !important;
}
.btn-pink:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-primary) !important;
}

.btn-light {
  background-color: var(--gray-3) !important;
  color: var(--color-black) !important;
}
.btn-light:hover {
  color: var(--color-primary) !important;
  background-color: var(--gray-4) !important;
}

.btn-white {
  background-color: var(--custom-white) !important;
  color: var(--color-black) !important;
}
.btn-white:hover {
  color: var(--color-black) !important;
  background-color: var(--color-bg-primary) !important;
}

.btn-dark {
  background-color: var(--color-black) !important;
  color: var(--custom-white) !important;
}
[data-theme-mode=dark] .btn-dark {
  color: var(--color-white) !important;
}
.btn-dark:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-primary) !important;
}

.btn-primary-light {
  background-color: var(--primary-rgba-15) !important;
  color: var(--color-primary) !important;
}
.btn-primary-light:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-primary) !important;
}

.btn-secondary-light {
  background-color: var(--secondary-rgba-15) !important;
  color: var(--color-secondary) !important;
}
.btn-secondary-light:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-secondary) !important;
}

.btn-success-light {
  background-color: var(--success-rgba-15) !important;
  color: var(--color-success) !important;
}
.btn-success-light:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-success) !important;
}

.btn-warning-light {
  background-color: var(--warning-rgba-15) !important;
  color: var(--color-warning) !important;
}
.btn-warning-light:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-warning) !important;
}

.btn-danger-light {
  background-color: var(--danger-rgba-15) !important;
  color: var(--color-danger) !important;
}
.btn-danger-light:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-danger) !important;
}

.btn-info-light {
  background-color: var(--info-rgba-15) !important;
  color: var(--color-info) !important;
}
.btn-info-light:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-info) !important;
}

.btn-teal-light {
  background-color: var(--teal-rgba-15) !important;
  color: var(--color-teal) !important;
}
.btn-teal-light:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-teal) !important;
}

.btn-dark-light {
  background-color: var(--black-15) !important;
  color: var(--color-black) !important;
}
.btn-dark-light:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-black) !important;
}

.btn-outline-primary {
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.btn-outline-primary:hover {
  color: var(--custom-white) !important;
  border-color: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
}
.btn-outline-primary.active {
  color: var(--custom-white) !important;
  border-color: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
}
.btn-outline-primary.btn-label .icon.solid {
  color: var(--custom-white);
  background-color: var(--color-primary);
}

.btn-outline-secondary {
  border: 1px solid var(--color-secondary) !important;
  color: var(--color-secondary) !important;
}
.btn-outline-secondary:hover {
  color: var(--custom-white) !important;
  border-color: var(--color-secondary) !important;
  background-color: var(--color-secondary) !important;
}
.btn-outline-secondary.btn-label .icon.solid {
  color: var(--custom-white);
  background-color: var(--color-secondary);
}

.btn-outline-success {
  border: 1px solid var(--color-success) !important;
  color: var(--color-success) !important;
}
.btn-outline-success:hover {
  color: var(--custom-white) !important;
  border-color: var(--color-success) !important;
  background-color: var(--color-success) !important;
}
.btn-outline-success.btn-label .icon.solid {
  color: var(--custom-white);
  background-color: var(--color-success);
}

.btn-outline-warning {
  border: 1px solid var(--color-warning) !important;
  color: var(--color-warning) !important;
}
.btn-outline-warning:hover {
  color: var(--custom-white) !important;
  border-color: var(--color-warning) !important;
  background-color: var(--color-warning) !important;
}
.btn-outline-warning.btn-label .icon.solid {
  color: var(--custom-white);
  background-color: var(--color-warning);
}

.btn-outline-danger {
  border: 1px solid var(--color-danger) !important;
  color: var(--color-danger) !important;
}
.btn-outline-danger:hover {
  color: var(--custom-white) !important;
  border-color: var(--color-danger) !important;
  background-color: var(--color-danger) !important;
}
.btn-outline-danger ~ .btn-check:checked + .btn, .btn-outline-danger ~ .btn.active, .btn-outline-danger ~ .btn.show, .btn-outline-danger ~ .btn:first-child:active, .btn-outline-danger ~ :not(.btn-check) + .btn:active {
  color: var(--custom-white) !important;
  border-color: var(--color-danger) !important;
  background-color: var(--color-danger) !important;
}
.btn-outline-danger.btn-label .icon.solid {
  color: var(--custom-white);
  background-color: var(--color-danger);
}

.btn.btn-outline-danger:first-child:active {
  color: var(--custom-white) !important;
  border-color: var(--color-danger) !important;
  background-color: var(--color-danger) !important;
}

.btn-outline-info {
  border: 1px solid var(--color-info) !important;
  color: var(--color-info) !important;
}
.btn-outline-info:hover {
  color: var(--custom-white) !important;
  border-color: var(--color-info) !important;
  background-color: var(--color-info) !important;
}
.btn-outline-info.btn-label .icon.solid {
  color: var(--custom-white);
  background-color: var(--color-info);
}

.btn-outline-purple {
  border: 1px solid var(--color-purple) !important;
  color: var(--color-purple) !important;
}
.btn-outline-purple:hover {
  color: var(--custom-white) !important;
  border-color: var(--color-purple) !important;
  background-color: var(--color-purple) !important;
}
.btn-outline-purple.btn-label .icon.solid {
  color: var(--custom-white);
  background-color: var(--color-purple);
}

.btn-outline-light {
  border: 1px solid var(--color-light) !important;
  color: var(--color-light) !important;
}
.btn-outline-light:hover {
  color: var(--custom-white) !important;
  border-color: var(--color-light) !important;
  background-color: var(--color-light) !important;
}
.btn-outline-light.btn-label .icon.solid {
  color: var(--custom-white);
  background-color: var(--color-light);
}

.btn-outline-white {
  border: 1px solid var(--custom-white) !important;
  color: var(--custom-white) !important;
}
.btn-outline-white:hover {
  color: var(--color-primary) !important;
  border-color: var(--custom-white) !important;
  background-color: var(--custom-white) !important;
}
.btn-outline-white.active {
  color: var(--color-black) !important;
  border-color: var(--custom-white) !important;
  background-color: var(--custom-white) !important;
}

.btn-outline-dark {
  border: 1px solid var(--color-black) !important;
  color: var(--color-black) !important;
}
.btn-outline-dark:hover {
  color: var(--custom-white) !important;
  border-color: var(--color-black) !important;
  background-color: var(--color-black) !important;
}
[data-theme-mode=dark] .btn-outline-dark:hover {
  color: var(--color-white) !important;
}
.btn-outline-dark.active {
  color: var(--color-black) !important;
  border-color: var(--custom-white) !important;
  background-color: var(--custom-white) !important;
}
.btn-outline-dark.btn-label .icon.solid {
  color: var(--custom-white);
  background-color: var(--color-black);
}
[data-theme-mode=dark] .btn-outline-dark.btn-label .icon.solid {
  color: var(--color-white);
}

.btn-outline-border-primary {
  background-color: var(--color-primary) !important;
  color: var(--custom-white) !important;
  border: 1px solid var(--color-primary) !important;
}
.btn-outline-border-primary:hover {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background-color: transparent;
}
.btn-outline-border-secondary {
  background-color: var(--color-secondary) !important;
  color: var(--custom-white) !important;
  border: 1px solid var(--color-secondary) !important;
}
.btn-outline-border-secondary:hover {
  color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  background-color: transparent;
}
.btn-outline-border-secondary.h-white:hover {
  color: var(--custom-white) !important;
  border-color: var(--custom-white) !important;
  background-color: transparent;
}
.btn-outline-border-success {
  background-color: var(--color-success) !important;
  color: var(--custom-white) !important;
  border: 1px solid var(--color-success) !important;
}
.btn-outline-border-success:hover {
  color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  background-color: transparent;
}
.btn-outline-border-warning {
  background-color: var(--color-warning) !important;
  color: var(--custom-white) !important;
  border: 1px solid var(--color-warning) !important;
}
.btn-outline-border-warning:hover {
  color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  background-color: transparent;
}
.btn-outline-border-danger {
  background-color: var(--color-danger) !important;
  color: var(--custom-white) !important;
  border: 1px solid var(--color-danger) !important;
}
.btn-outline-border-danger:hover {
  color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  background-color: transparent;
}
.btn-outline-border-info {
  background-color: var(--color-info) !important;
  color: var(--custom-white) !important;
  border: 1px solid var(--color-info) !important;
}
.btn-outline-border-info:hover {
  color: var(--color-info) !important;
  border-color: var(--color-info) !important;
  background-color: transparent;
}
.btn-outline-border-light {
  background-color: var(--color-light) !important;
  color: var(--custom-white) !important;
  border: 1px solid var(--color-light) !important;
}
.btn-outline-border-light:hover {
  color: var(--color-light) !important;
  border-color: var(--color-light) !important;
  background-color: transparent;
}
.btn-outline-border-dark {
  background-color: var(--color-black) !important;
  color: var(--custom-white) !important;
  border: 1px solid var(--color-black) !important;
}
.btn-outline-border-dark:hover {
  color: var(--color-black) !important;
  border-color: var(--color-black) !important;
  background-color: transparent;
}
.btn-outline-border-white {
  background-color: var(--custom-white) !important;
  color: var(--color-black) !important;
  border: 1px solid var(--custom-white) !important;
}
.btn-outline-border-white:hover {
  color: var(--custom-white) !important;
  border-color: var(--custom-white) !important;
  background-color: transparent;
}

.btn-gradient-primary {
  background-image: linear-gradient(to right, #5758df, #f77991, #5758df) !important;
  background-size: 200% auto;
}
.btn-gradient-primary:hover {
  color: var(--custom-white) !important;
  background-position: right center;
}

.btn-gradient-sky-blue-pink {
  background-image: linear-gradient(to right, #7ec8e3, #f77991, #7ec8e3) !important;
  background-size: 200% auto;
}
.btn-gradient-sky-blue-pink:hover {
  color: var(--custom-white) !important;
  background-position: right center;
}

.btn-gradient-purple-pink {
  background-image: linear-gradient(to right, #8b14b1, #d53d6e, #8b14b1) !important;
  background-size: 200% auto;
}
.btn-gradient-purple-pink:hover {
  color: var(--custom-white) !important;
  background-position: right center;
}

.btn-gradient-fast-pink-light-yellow {
  background-image: linear-gradient(to right, #f7567f, #ffba83, #f7567f) !important;
  background-size: 200% auto;
}
.btn-gradient-fast-pink-light-yellow:hover {
  color: var(--custom-white) !important;
  background-position: right center;
}

.btn-gradient-pink-orange {
  background-image: linear-gradient(to right, #de347f, #ff7b3c, #de347f) !important;
  background-size: 200% auto;
}
.btn-gradient-pink-orange:hover {
  color: var(--custom-white) !important;
  background-position: right center;
}

.btn-gradient-fast-blue-purple {
  background-image: linear-gradient(to right, #2a46f4, #7d3cff, #2a46f4) !important;
  background-size: 200% auto;
}
.btn-gradient-fast-blue-purple:hover {
  color: var(--custom-white) !important;
  background-position: right center;
}

.btn-gradient-green-lime {
  background-image: linear-gradient(to right, #28a745, #a3e635, #28a745) !important;
  background-size: 200% auto;
}
.btn-gradient-green-lime:hover {
  color: var(--custom-white) !important;
  background-position: right center;
}

.bd-default-tooltip {
  color: var(--custom-white) !important;
  transition: all 0.3s linear;
  border-radius: 100%;
  font-size: 14px;
  width: 30px;
  height: 30px;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flexbox;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bd-default-tooltip.view {
  color: var(--color-primary) !important;
  background: rgba(79, 70, 229, 0.15) !important;
}
.bd-default-tooltip.view:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-primary) !important;
}
.bd-default-tooltip.edit {
  color: var(--color-warning) !important;
  background: rgba(254, 187, 123, 0.15) !important;
}
.bd-default-tooltip.edit:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-warning) !important;
}
.bd-default-tooltip.delete {
  color: var(--color-danger) !important;
  background: rgba(230, 50, 50, 0.15) !important;
}
.bd-default-tooltip.delete:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-danger) !important;
}
.bd-default-tooltip.reply {
  color: var(--color-info) !important;
  background: rgba(20, 147, 255, 0.15) !important;
}
.bd-default-tooltip.reply:hover {
  color: var(--custom-white) !important;
  background-color: var(--color-info) !important;
}

.remove-item-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  background-color: var(--danger-rgba-15) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--color-danger) !important;
  font-size: 18px;
  transition: var(--transition) !important;
  cursor: pointer;
}
.remove-item-btn:hover {
  background-color: var(--color-danger) !important;
  color: var(--custom-white) !important;
}

#more {
  display: none;
}

.read__more-btn {
  font-size: 16px;
  color: var(--color-primary) !important;
  transition: all 0.3s ease;
}
.read__more-btn:hover {
  color: var(--color-secondary) !important;
}

.btn-loader.btn {
  position: relative;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  gap: 6px;
  height: 16px;
  position: absolute;
  top: 50%;
  inset-inline-end: 5px;
  transform: translateY(-50%);
}

.btn-loader i {
  animation: loader 1000ms infinite linear;
}

@keyframes loader {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.btn-group-lg > .btn,
.btn-lg {
  padding: 8px 16px !important;
  font-size: 20px !important;
  border-radius: 8px !important;
}

.btn-group-sm > .btn,
.btn-sm {
  padding: 4px 8px !important;
  font-size: 12px !important;
  border-radius: 3px !important;
}

[dir=rtl] .btn-group > .btn-group:not(:first-child) > .btn,
[dir=rtl] .btn-group > .btn:nth-child(n+3),
[dir=rtl] .btn-group > :not(.btn-check) + .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

[dir=rtl] .btn-group > .btn-group:not(:last-child) > .btn,
[dir=rtl] .btn-group > .btn.dropdown-toggle-split:first-child,
[dir=rtl] .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-check + .btn:hover {
  color: var(--custom-white);
}

/*----------------------------------------*/
/*  Buttons end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.10 Carousel
/*----------------------------------------*/
.carousel-control-next-icon,
.carousel-control-prev-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}

/*----------------------------------------*/
/*  Carousel end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.11 Color
/*----------------------------------------*/
.text-heading {
  color: var(--color-heading) !important;
}

.text-white {
  color: var(--color-white) !important;
}
[data-theme-mode=dark] .text-white {
  color: var(--color-black) !important;
}

.text-white_1 {
  color: var(--white-1);
}

.text-white_2 {
  color: var(--white-2);
}

.text-white_3 {
  color: var(--white-3);
}

.text-white_4 {
  color: var(--white-4);
}

.text-white_5 {
  color: var(--white-5);
}

.text-white_6 {
  color: var(--white-6);
}

.text-white_7 {
  color: var(--white-7);
}

.text-white_8 {
  color: var(--white-8);
}

.text-white_9 {
  color: var(--white-9);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*----------------------------------------*/
/*  Color end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.12 forms
/*----------------------------------------*/
/* Custom Form Option */
.form-custom {
  padding-inline-start: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.form-custom-label {
  padding: 10px 20px 10px 20px;
  cursor: pointer;
  width: 100%;
}

.checked {
  border: 1px solid var(--color-primary) !important;
}

.form-custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
}

.form-check-bg {
  background-color: var(--primary-rgba-15);
}

.form-custom-icon .form-custom-label {
  text-align: center;
  padding: 1.07em;
}
.form-custom-icon .form-custom-body {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-body);
}
.form-custom-icon .form-custom-body .icon {
  font-size: 30px;
  margin: 0 auto;
  margin-bottom: 10px;
  width: 60px;
  height: 60px;
  background-color: var(--primary-rgba-1);
  display: flex;
  text-align: center;
  align-content: center;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-primary);
}
.form-custom-icon .form-check-input {
  float: none !important;
  margin: 0 !important;
}

.custom-option.form-custom-thumb {
  border: 1px solid transparent;
  border-radius: 6px;
  padding-inline-start: 0;
}

.form-custom-thumb .form-custom-label {
  padding: 0;
}
.form-custom-thumb .form-custom-body img {
  height: 100%;
  width: 100%;
  border-radius: 6px;
}
.form-custom-thumb.radio-thumb .form-check-input {
  display: none;
}
.form-custom-thumb.form-custom-thumb-check {
  position: relative;
}
.form-custom-thumb.form-custom-thumb-check .form-check-input {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  margin: 0;
  border: 0;
  opacity: 0;
  z-index: 9;
}
.form-custom-thumb.form-custom-thumb-check .form-check-input:checked {
  opacity: 1;
}

.form-label {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  margin-bottom: 6px;
}

.form-control {
  display: block;
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 22px;
  color: var(--color-heading);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  background-clip: padding-box;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:disabled {
  color: var(--color-body);
  background-color: var(--gray-2);
  border-color: var(--color-border);
  opacity: 1;
}

.form-control-plaintext {
  color: var(--color-body);
}

.form-control::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

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

.form-control-sm {
  font-size: 14px !important;
  padding: 6px 12px;
  line-height: inherit;
  border-radius: 4px;
}

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  padding: 6px 6px 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 12px center;
  /* .75rem */
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-select:focus {
  border-color: none;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-control:focus {
  border-color: var(--primary-rgba-5);
  background-color: var(--color-white);
  box-shadow: 0 0 4px var(--primary-rgba-5);
  color: var(--color-heading);
}

.form-select {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-heading);
  font-size: 14px;
  background-image: none;
  background-size: 20px;
}

.form-select:disabled {
  background-color: var(--color-body-bg);
}

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

.form-select-sm {
  font-size: 14px !important;
  padding: 6px 12px;
  line-height: inherit;
  border-radius: 4px;
}

.input-group-text {
  border-color: var(--color-border);
  font-size: 14px;
  border-radius: 4px;
  background-color: var(--gray-3);
  color: var(--color-heading);
  letter-spacing: 0;
  padding: 6px 12px;
  padding: 2px 7px;
}

.form-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background-color: var(--color-primary) !important;
}

.form-range:disabled::-moz-range-thumb {
  background-color: var(--color-light) !important;
}

.form-range:focus::-moz-range-thumb {
  box-shadow: none !important;
}

/* basic checkbox */
.form-check label {
  cursor: pointer;
}

.form-check-label {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}

.form-check {
  min-height: inherit !important;
  display: block;
  min-height: 1.5rem;
  padding-inline-start: 1.5em;
  margin-bottom: 0.125rem;
}

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

.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

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

.form-check-input[type=checkbox] {
  border-radius: 0.25em;
}

.form-check .form-check-input {
  float: left;
  margin-inline-start: -1.5em;
}

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

.form-check-input.form-checked-outline:checked {
  background-color: transparent;
  border-color: var(--color-primary);
}
.form-check-input.form-checked-gray:checked {
  background-color: var(--gray-3);
  border-color: var(--gray-3);
}
.form-check-input.form-checked-secondary:checked {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.form-check-input.form-checked-warning:checked {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}
.form-check-input.form-checked-info:checked {
  background-color: var(--color-info);
  border-color: var(--color-info);
}
.form-check-input.form-checked-success:checked {
  background-color: var(--color-success);
  border-color: var(--color-success);
}
.form-check-input.form-checked-danger:checked {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}
.form-check-input.form-checked-light:checked {
  background-color: var(--color-light);
  border-color: var(--color-light);
}
.form-check-input.form-checked-dark:checked {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}
.form-check-input.form-checked-purple:checked {
  background-color: var(--color-purple);
  border-color: var(--color-purple);
}
.form-check-input.form-checked-slateblue:checked {
  background-color: var(--color-slateblue);
  border-color: var(--color-slateblue);
}
.form-check-input.form-checked-teal:checked {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
}
.form-check-input.form-checked-pink:checked {
  background-color: var(--color-pink);
  border-color: var(--color-pink);
}
.form-check-input.form-checked-orange:checked {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}

.form-check-input:focus {
  box-shadow: none;
}

.form-check-reverse {
  padding-inline-end: 1.5em;
  padding-inline-start: 0;
  text-align: start;
  display: flex;
  flex-direction: row-reverse;
  gap: 0 30px;
}

.form-check-inline {
  display: inline-block !important;
  margin-inline-end: 1rem;
}

.form-checked-outline:checked[type=checkbox] {
  background-image: none;
  position: relative;
  background-color: transparent;
}
.form-checked-outline:checked[type=checkbox]::before {
  content: "\eb7a";
  font-family: var(--ff-remixicon) !important;
  position: absolute;
  color: var(--color-primary);
  inset-block-start: 50%;
  inset-inline-start: 48%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: var(--fw-bold);
}
[dir=rtl] .form-checked-outline:checked[type=checkbox]::before {
  inset-inline-start: auto;
  inset-inline-end: 48%;
}
.form-checked-outline:checked[type=checkbox].form-checked-secondary:before {
  color: var(--color-secondary);
}
.form-checked-outline:checked[type=checkbox].form-checked-warning:before {
  color: var(--color-warning);
}
.form-checked-outline:checked[type=checkbox].form-checked-info:before {
  color: var(--color-info);
}
.form-checked-outline:checked[type=checkbox].form-checked-success:before {
  color: var(--color-success);
}
.form-checked-outline:checked[type=checkbox].form-checked-danger:before {
  color: var(--color-danger);
}
.form-checked-outline:checked[type=checkbox].form-checked-purple:before {
  color: var(--color-purple);
}
.form-checked-outline:checked[type=checkbox].form-checked-slateblue:before {
  color: var(--color-slateblue);
}
.form-checked-outline:checked[type=checkbox].form-checked-teal:before {
  color: var(--color-teal);
}
.form-checked-outline:checked[type=checkbox].form-checked-orange:before {
  color: var(--color-orange);
}
.form-checked-outline:checked[type=checkbox].form-checked-light:before {
  color: var(--color-light);
}
.form-checked-outline:checked[type=checkbox].form-checked-dark:before {
  color: var(--color-dark);
}

.form-checked-outline:checked[type=radio] {
  background-image: none;
  position: relative;
  background-color: transparent;
}
.form-checked-outline:checked[type=radio]::before {
  content: "\eb7c";
  font-family: var(--ff-remixicon) !important;
  position: absolute;
  color: var(--color-primary);
  inset-block-start: 50%;
  inset-inline-start: 48%;
  transform: translate(-50%, -50%);
  font-size: 6px;
  font-weight: var(--fw-bold);
}
[dir=rtl] .form-checked-outline:checked[type=radio]::before {
  inset-inline-start: auto;
  inset-inline-end: 48%;
}

.form-switch {
  padding-inline-start: 2.5em !important;
}
.form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  width: 2em;
  margin-inline-start: -2.5em;
  background-image: var(--bs-form-switch-bg);
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}

.input-group-lg > .btn,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
  padding: 8px 16px;
  font-size: 20px;
  border-radius: 6px;
}

.input-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 4px;
}

/* Custom checkbox button */
.custom-checkbox label {
  font-size: 16px;
  color: var(--color-black);
  position: relative;
  padding-inline-start: 26px;
  z-index: 1;
}
.custom-checkbox input[type=checkbox] {
  display: none;
}
.custom-checkbox input[type=checkbox]:checked ~ label::before {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.custom-checkbox input[type=checkbox]:checked ~ label::after {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.custom-checkbox input[type=checkbox]:checked ~ label.secondary::after {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.custom-checkbox input[type=checkbox]:checked ~ label::before {
  visibility: visible;
  opacity: 1;
}
.custom-checkbox input[type=checkbox] ~ label {
  position: relative;
  padding-inline-start: 30px;
}
.custom-checkbox input[type=checkbox] ~ label::after {
  position: absolute;
  content: "";
  top: 2px;
  inset-inline-start: 0;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  border: 1px solid var(--color-border);
  z-index: -1;
  transition: all 0.2s linear;
  border-radius: 3px;
}
.custom-checkbox input[type=checkbox] ~ label::before {
  position: absolute;
  content: "\eb7a";
  top: 3px;
  inset-inline-start: 0px;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  color: var(--color-white);
  transition: all 0.2s linear;
  font-family: var(--ff-remixicon);
  font-size: 14px;
}
.custom-checkbox input[type=checkbox] ~ label:hover {
  cursor: pointer;
}

.credit-card-logo {
  position: absolute;
  top: 50%;
  inset-inline-end: 15px;
  transform: translateY(-50%);
}

.credit-card-logo img {
  width: 36px;
}

.payment-card-tab .nav-pills {
  background-color: var(--success-rgba-15);
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  text-align: center;
  border-radius: 4px;
  overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .payment-card-tab .nav-pills {
    display: flex !important;
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: auto;
  }
}
.payment-card-tab .nav-pills .nav-link.active,
.payment-card-tab .nav-pills .show > .nav-link {
  color: var(--color-white);
  background-color: var(--color-success);
  border-radius: 4px;
}
[data-theme-mode=dark] .payment-card-tab .nav-pills .nav-link.active,
[data-theme-mode=dark] .payment-card-tab .nav-pills .show > .nav-link {
  color: var(--color-black);
}
.payment-card-tab .nav-link {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-success);
  padding: 10px 10px;
  border-radius: 0;
  cursor: pointer;
}
.payment-card-tab .nav-link:hover {
  color: var(--color-primary);
}
[data-theme-mode=dark] .payment-card-tab .nav-link:hover {
  color: var(--color-black);
}

/* floating labels */
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: var(--color-body);
}

.form-floating > label {
  padding: 6px 6px;
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
  height: 55px;
}

.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown),
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 2.2rem;
  padding-bottom: 0.625rem;
}

.form-floating.floating-primary label {
  color: var(--color-primary);
  opacity: 1;
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext {
  padding: 1rem 0.75rem;
}

.form-floating.floating-primary input {
  border: 1px solid var(--color-primary);
}

.form-floating.floating-primary > .form-control:focus ~ label {
  color: var(--color-primary) !important;
}

.form-floating.floating-secondary label {
  color: var(--color-secondary);
  opacity: 1;
}

.form-floating.floating-secondary input {
  border: 1px solid var(--color-secondary);
}

.form-floating.floating-secondary > .form-control:focus ~ label {
  color: var(--color-secondary) !important;
}

.form-floating.floating-warning label {
  color: var(--color-warning);
  opacity: 1;
}

.form-floating.floating-warning input {
  border: 1px solid var(--color-warning);
}

.form-floating.floating-warning > .form-control:focus ~ label {
  color: var(--color-warning) !important;
}

.form-floating.floating-info label {
  color: var(--color-info);
  opacity: 1;
}

.form-floating.floating-info input {
  border: 1px solid var(--color-info);
}

.form-floating.floating-info > .form-control:focus ~ label {
  color: var(--color-info) !important;
}

.form-floating.floating-success label {
  color: var(--color-success);
  opacity: 1;
}

.form-floating.floating-success input {
  border: 1px solid var(--color-success);
}

.form-floating.floating-success > .form-control:focus ~ label {
  color: var(--color-success) !important;
}

.form-floating.floating-danger label {
  color: var(--color-danger);
  opacity: 1;
}

.form-floating.floating-danger input {
  border: 1px solid var(--color-danger);
}

.form-floating.floating-danger > .form-control:focus ~ label {
  color: var(--color-danger) !important;
}

.form-floating.floating-purple label {
  color: var(--color-purple);
  opacity: 1;
}

.form-floating.floating-purple input {
  border: 1px solid var(--color-purple);
}

.form-floating.floating-purple > .form-control:focus ~ label {
  color: var(--color-purple) !important;
}

.form-floating.floating-slateblue label {
  color: var(--color-slateblue);
  opacity: 1;
}

.form-floating.floating-slateblue input {
  border: 1px solid var(--color-slateblue);
}

.form-floating.floating-slateblue > .form-control:focus ~ label {
  color: var(--color-slateblue) !important;
}

.form-floating.floating-pink label {
  color: var(--color-pink);
  opacity: 1;
}

.form-floating.floating-pink input {
  border: 1px solid var(--color-pink);
}

.form-floating.floating-pink > .form-control:focus ~ label {
  color: var(--color-pink) !important;
}

.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
  background-color: var(--color-white);
  border-radius: 6px;
}

.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
  background-color: var(--color-white);
  border-radius: 6px;
}

/* floating labels end */
.form-control::file-selector-button {
  padding: 3.5rem 1.5rem;
  margin: -7.5rem -1.75rem;
  margin-inline-end: 0.75rem !important;
  background-color: var(--gray-2) !important;
}
[data-theme-mode=dark] .form-control::file-selector-button {
  background-color: var(--gray-7) !important;
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--gray-3) !important;
}
[data-theme-mode=dark] .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--gray-9) !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--color-danger);
}

.form-select.is-invalid,
.was-validated .form-select:invalid {
  border-color: var(--color-danger);
}

.valid-tooltip {
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 4px 8px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-white);
  background-color: var(--color-success);
  border-radius: 4px;
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 4px 8px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-white);
  background-color: var(--color-danger);
  border-radius: 4px;
}

[dir=rtl] .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
[dir=rtl] .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
[dir=rtl] .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select,
[dir=rtl] .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-inline-start: calc(var(--bs-border-width) * -1);
}
[dir=rtl] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

[dir=rtl] .form-control.is-invalid,
[dir=rtl] .was-validated .form-control:invalid {
  padding-right: 0.5em;
  padding-left: calc(1.5em + 0.75rem);
}

/*----------------------------------------*/
/*  forms end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.13 modal
/*----------------------------------------*/
.modal-content {
  color: var(--color-body);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.modal-header {
  padding: 16px 20px;
  border-block-end: 1px solid var(--color-border);
  border-top-left-radius: 4.8px;
  border-top-right-radius: 4.8px;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 16px 24px;
}

.modal-footer {
  padding: 16px 20px;
  border-block-start: 1px solid var(--color-border);
}

.modal-header .btn-close {
  position: absolute;
  inset-inline-end: 20px;
}

.offcanvas-header .btn-close {
  position: absolute;
  inset-inline-end: 20px;
  color: var(--color-black) !important;
  background-image: none;
  font-size: 20px;
}

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

/*----------------------------------------*/
/*  modal end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.14 pagination
/*----------------------------------------*/
.bd-pagination .swiper-pagination-bullet {
  width: 20px;
  height: 5px;
  background: var(--white-5);
  opacity: 1;
  border-radius: 14px;
  margin-inline-start: 0 !important;
}
.bd-pagination .swiper-pagination-bullet-active {
  background: var(--color-secondary);
}
.bd-pagination.primary .swiper-pagination-bullet {
  background: var(--gray-3);
}
.bd-pagination.primary .swiper-pagination-bullet-active {
  background: var(--color-primary);
}

.page-link {
  position: relative;
  display: block;
  padding: 4px 12px;
  font-size: 16px;
  color: var(--color-heading);
  text-decoration: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.page-link {
  color: var(--color-heading);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
}
.page-link:focus {
  color: var(--color-heading);
  box-shadow: none;
  background-color: transparent;
  border-color: transparent;
}
.page-link:hover {
  color: var(--color-heading);
  background-color: var(--gray-3);
  border-color: var(--color-border);
}

.page-item.active .page-link {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
[data-theme-mode=dark] .page-item.active .page-link {
  color: var(--color-black);
}

.disabled > .page-link,
.page-link.disabled {
  opacity: 0.7;
}

.basic-pagination ul {
  display: inline-flex;
  gap: 15px;
}
.basic-pagination ul li {
  list-style: none;
}
.basic-pagination ul li a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-weight: 600;
  font-size: 16px;
  background-color: transparent;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  background-color: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.basic-pagination ul li a:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.basic-pagination ul li .current {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.basic-pagination ul li .prev,
.basic-pagination ul li .next {
  font-size: 20px;
}

/*----------------------------------------*/
/*  pagination end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.15 Preloader
/*----------------------------------------*/
#loading {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999999;
  margin-top: 0px;
  top: 0px;
  background: var(--color-white);
}
#loading-center {
  width: 100%;
  height: 100%;
  position: relative;
}
#loading-center-absolute {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  #loading-center-absolute {
    width: 40%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  #loading-center-absolute {
    width: 45%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  #loading-center-absolute {
    width: 50%;
  }
}
@media (max-width: 575px) {
  #loading-center-absolute {
    width: 90%;
  }
}

.bd-preloader-logo {
  width: 80px;
  height: 80px;
  line-height: 80px;
  position: relative;
  text-align: center;
  margin: auto;
}
.bd-preloader-logo img {
  vertical-align: middle;
}
.bd-preloader-circle {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
}
.bd-preloader-circle svg {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: bd-rotate 5s linear infinite;
  -moz-animation: bd-rotate 5s linear infinite;
  -ms-animation: bd-rotate 5s linear infinite;
  -o-animation: bd-rotate 5s linear infinite;
  animation: bd-rotate 5s linear infinite;
}
.bd-preloader-circle svg circle:last-child {
  stroke: var(--color-primary);
  stroke-dashoffset: 0;
  stroke-dasharray: 1128, 3150;
  -webkit-animation: bd-loading 4s linear infinite;
  -moz-animation: bd-loading 4s linear infinite;
  -ms-animation: bd-loading 4s linear infinite;
  -o-animation: bd-loading 4s linear infinite;
  animation: bd-loading 4s linear infinite;
  transform-origin: center center;
}
@-webkit-keyframes bd-loading {
  0% {
    stroke-dashoffset: 0;
    stroke-dasharray: 0, 3150;
  }
  100% {
    stroke-dashoffset: -1131;
    stroke-dasharray: 1128, 3138;
  }
}
@-moz-keyframes bd-loading {
  0% {
    stroke-dashoffset: 0;
    stroke-dasharray: 0, 3150;
  }
  100% {
    stroke-dashoffset: -1131;
    stroke-dasharray: 1128, 3138;
  }
}
@-ms-keyframes bd-loading {
  0% {
    stroke-dashoffset: 0;
    stroke-dasharray: 0, 3150;
  }
  100% {
    stroke-dashoffset: -1131;
    stroke-dasharray: 1128, 3138;
  }
}
@keyframes bd-loading {
  0% {
    stroke-dashoffset: 0;
    stroke-dasharray: 0, 3150;
  }
  100% {
    stroke-dashoffset: -1131;
    stroke-dasharray: 1128, 3138;
  }
}
@-webkit-keyframes bd-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes bd-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes bd-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes bd-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.bd-preloader-content {
  text-align: center;
}
.bd-preloader-subtitle {
  font-size: 20px;
  margin-bottom: 0;
  color: var(--color-white);
  margin-top: 20px;
}
[data-theme-mode=dark] .bd-preloader-subtitle {
  color: var(--color-black);
}

/*----------------------------------------*/
/*  Preloader end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.16 pricing
/*----------------------------------------*/
.pricing-plan-wrap {
  position: relative;
  background-size: cover;
  padding: 25px 25px;
  background-repeat: no-repeat;
  background-position: center top;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  box-shadow: var(--shadow);
}
.pricing-plan-wrap .title {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 15px;
  color: var(--color-heading);
}
.pricing-plan-wrap .price-wrap {
  margin-bottom: 20px;
}
.pricing-plan-wrap .price-wrap .common-price {
  position: relative;
  margin-inline-start: 10px;
}
.pricing-plan-wrap .price-wrap .common-price .dollar {
  font-size: 18px;
  color: var(--color-white);
  line-height: 26px;
  position: absolute;
  top: 0;
  inset-inline-start: -13px;
  color: var(--color-primary);
}
.pricing-plan-wrap .price-wrap .common-price .amount {
  font-size: 58px;
  display: inline-block;
  line-height: 1;
  margin-bottom: 0;
  color: var(--color-primary);
}
.pricing-plan-wrap p {
  font-size: 17px;
  line-height: 27px;
  margin-bottom: 30px;
  color: var(--color-body);
}
.pricing-plan-wrap .pricing-plan-list {
  margin-bottom: 40px;
}
.pricing-plan-wrap .pricing-plan-list > li:not(:last-child) {
  margin-bottom: 8px;
}
.pricing-plan-wrap .pricing-plan-list .list-title {
  font-weight: 500;
}
.pricing-plan-wrap.redemanded_item {
  color: var(--color-white);
  background-color: var(--color-primary);
}
[data-theme-mode=dark] .pricing-plan-wrap.redemanded_item {
  color: var(--color-black);
}
.pricing-plan-wrap.redemanded_item:before {
  top: -6px;
  inset-inline-end: -5px;
  z-index: 1;
  content: "";
  width: 99px;
  height: 99px;
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: right top;
  background-image: url("../images/shape/badge_recomanded.webp");
}
[dir=rtl] .pricing-plan-wrap.redemanded_item:before {
  transform: rotate(-90deg);
}
.pricing-plan-wrap.redemanded_item p {
  color: var(--color-white);
}
[data-theme-mode=dark] .pricing-plan-wrap.redemanded_item p {
  color: var(--color-black);
}
.pricing-plan-wrap.redemanded_item .title {
  color: var(--color-white);
}
[data-theme-mode=dark] .pricing-plan-wrap.redemanded_item .title {
  color: var(--color-black);
}
.pricing-plan-wrap.redemanded_item .list-title {
  color: rgba(220, 229, 240, 0.85);
}
.pricing-plan-wrap.redemanded_item .price-wrap .common-price .amount {
  color: var(--color-white);
}
[data-theme-mode=dark] .pricing-plan-wrap.redemanded_item .price-wrap .common-price .amount {
  color: var(--color-black);
}
.pricing-plan-wrap.redemanded_item .price-wrap .common-price .dollar {
  color: var(--color-white);
}
[data-theme-mode=dark] .pricing-plan-wrap.redemanded_item .price-wrap .common-price .dollar {
  color: var(--color-black);
}
.pricing-plan-wrap.redemanded_item .separator-animated {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(180, 231, 23, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
}
.pricing-plan-wrap.redemanded_item .pricing-plan-list li {
  color: rgba(220, 229, 240, 0.85);
}
.pricing-plan-wrap.redemanded_item .pricing-plan-list li i {
  color: var(--color-secondary);
}
.pricing-plan-list li {
  list-style: none;
  color: var(--color-body);
  display: flex;
  align-items: center;
  gap: 0 10px;
}
.pricing-plan-list i {
  font-size: 18px;
  color: var(--color-success);
}
.pricing-plan-items-group {
  margin: 0;
  padding: 0.5px;
}
.pricing-plan-items-group > .col {
  padding: 0;
  margin: -0.5px;
}
.pricing-plan-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0 10px;
  background-color: var(--color-body-bg);
  padding: 6px 6px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}
.pricing-plan-btn-group button {
  font-weight: 500;
  font-size: 16px;
  color: var(--color-heading);
  border: none;
  background: var(--primary-rgba-15);
  border-radius: 4px;
  transition: var(--transition);
  padding: 2px 15px;
}
.pricing-plan-btn-group button.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.separator-animated {
  position: relative;
  overflow: hidden;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(28, 75, 66, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
}

.plan-compare-table {
  text-align: start;
}
.plan-compare-table .title {
  color: var(--color-heading);
  font-size: 14px;
}
.plan-compare-table .icon {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  color: var(--color-success);
  background-color: var(--success-rgba-15);
  font-size: 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.plan-compare-table .icon.false {
  color: var(--color-danger);
  background-color: var(--danger-rgba-15);
}
.plan-compare-table .table > :not(caption) > * > *:nth-child(4) {
  color: var(--color-heading) !important;
  background-color: var(--primary-rgba-05);
}
.plan-compare-table .table-bordered > :not(caption) > * > *:nth-child(3) {
  border-inline-end: 1px solid var(--color-primary);
}
.plan-compare-table .table-bordered > :not(caption) > * > *:nth-child(4) {
  border: 1px solid var(--color-primary);
}

.bd-price {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  gap: 0 10px;
  align-items: center;
}
.bd-price .current-price {
  font-weight: 600;
  color: var(--white-8);
}
.bd-price .old-price {
  color: var(--color-body-secondary);
  text-decoration-line: line-through;
}

/*----------------------------------------*/
/*  pricing end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.17 progressbar
/*----------------------------------------*/
.single-progress {
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
}
.single-progress:last-child {
  margin-bottom: 0;
}

.progress {
  height: 7px;
  width: 100%;
  overflow: visible;
  background-color: var(--gray-3);
  border-radius: 10px;
  font-size: 12px;
  font-weight: var(--fw-medium);
  overflow: hidden;
}
.progress.h15 {
  height: 15px;
}

.progress-bar {
  width: 0;
  height: 100%;
  transition: width 0.5s ease;
  overflow: visible;
  background-color: var(--color-primary);
}

.progress-style-2 .progress {
  height: 15px;
}
.progress-style-2 .progress-number {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-black);
}

.progress-style-3 .single-progress .title {
  margin-bottom: 0;
  position: absolute;
  inset-inline-start: 20px;
  z-index: 5;
  color: var(--color-white);
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
}
.progress-style-3 .progress {
  height: 30px;
  overflow: hidden;
  border-radius: 50px;
  background: linear-gradient(to right, var(--color-primary) 10%, rgba(255, 255, 255, 0) 95%);
}
[dir=rtl] .progress-style-3 .progress {
  background: linear-gradient(to left, var(--color-primary) 10%, rgba(255, 255, 255, 0) 95%);
}
.progress-style-3 .progress-bar {
  border-radius: 50px;
  background-color: transparent;
}
.progress-style-3 .progress-number {
  font-size: 16px;
  position: absolute;
  top: auto;
  inset-inline-end: 20px;
  bottom: 4px;
  font-weight: 500;
  color: var(--color-primary);
}
.progress-style-3 .bg-gradient-2 .progress {
  background: linear-gradient(to right, var(--color-secondary) 10%, rgba(255, 255, 255, 0) 95%);
}
[dir=rtl] .progress-style-3 .bg-gradient-2 .progress {
  background: linear-gradient(to left, var(--color-secondary) 10%, rgba(255, 255, 255, 0) 95%);
}
.progress-style-3 .bg-gradient-2 .progress-number {
  color: var(--color-secondary);
}
.progress-style-3 .bg-gradient-3 .progress {
  background: linear-gradient(to right, var(--color-success) 10%, rgba(255, 255, 255, 0) 95%);
}
[dir=rtl] .progress-style-3 .bg-gradient-3 .progress {
  background: linear-gradient(to left, var(--color-success) 10%, rgba(255, 255, 255, 0) 95%);
}
.progress-style-3 .bg-gradient-3 .progress-number {
  color: var(--color-success);
}
.progress-style-3 .bg-gradient-4 .progress {
  background: linear-gradient(to right, var(--color-warning) 10%, rgba(255, 255, 255, 0) 95%);
}
[dir=rtl] .progress-style-3 .bg-gradient-4 .progress {
  background: linear-gradient(to left, var(--color-warning) 10%, rgba(255, 255, 255, 0) 95%);
}
.progress-style-3 .bg-gradient-4 .progress-number {
  color: var(--color-warning);
}
.progress-style-3 .bg-gradient-4 .progress {
  background: linear-gradient(to right, var(--color-info) 10%, rgba(255, 255, 255, 0) 95%);
}
[dir=rtl] .progress-style-3 .bg-gradient-4 .progress {
  background: linear-gradient(to left, var(--color-info) 10%, rgba(255, 255, 255, 0) 95%);
}
.progress-style-3 .bg-gradient-4 .progress-number {
  color: var(--color-info);
}
.progress-style-3 .bg-gradient-5 .progress {
  background: linear-gradient(to right, var(--color-danger) 10%, rgba(255, 255, 255, 0) 95%);
}
[dir=rtl] .progress-style-3 .bg-gradient-5 .progress {
  background: linear-gradient(to left, var(--color-danger) 10%, rgba(255, 255, 255, 0) 95%);
}
.progress-style-3 .bg-gradient-5 .progress-number {
  color: var(--color-danger);
}

.progress-style-4 .progress-number {
  font-size: 14px;
  z-index: 1;
  background-color: var(--color-black);
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 6px 0px 6px;
  color: var(--color-white);
  position: relative;
}
.progress-style-4 .progress-number::after {
  position: absolute;
  content: "";
  top: 100%;
  inset-inline-start: 50%;
  height: 0;
  width: 0;
  z-index: 9;
  margin-inline-start: -5px;
  pointer-events: none;
  border: 5px solid transparent;
  border-top-color: var(--color-black);
}

.radial-progress {
  position: relative;
}
.radial-progress-single {
  text-align: center;
}
.radial-progress-single .circle-info {
  padding-top: 20px;
  text-align: center;
}
.radial-progress-single .circle-info .title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}
.radial-progress-single .circle-info .subtitle {
  font-style: italic;
  margin-bottom: 0;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--color-body);
}
.radial-progress .circle-text {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
}
.radial-progress .circle-text .count {
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  color: var(--color-black);
  position: relative;
  margin-inline-start: -14px;
}
.radial-progress .circle-text .count::after {
  position: absolute;
  content: "%";
  inset-inline-start: 100%;
  color: var(--color-black);
}

.skill-progress .progress {
  height: 16px;
  border-radius: 4px;
}
.skill-progress .progress-bar {
  border-radius: 4px;
  position: relative;
}
.skill-progress .progress-percent {
  position: absolute;
  inset-inline-end: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-white);
  font-size: 12px;
}
[data-theme-mode=dark] .skill-progress .progress-percent {
  color: var(--color-black);
}

.project-progress .progress-item:not(:last-child) {
  margin-bottom: 20px;
}
.project-progress .progress {
  height: 16px;
  border-radius: 4px;
}
.project-progress .progress-bar {
  border-radius: 4px;
}

/*----------------------------------------*/
/*  progressbar end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.18 ribbon  
/*----------------------------------------*/
.ribbon-wrapper {
  margin-bottom: 20px;
}

.ribbon {
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  clear: left;
  position: absolute;
  top: 0px;
  inset-inline-start: 0px;
  color: var(--color-white);
  z-index: 2;
}
[data-theme-mode=dark] .ribbon {
  color: var(--color-black);
}

.ribbon-clip {
  inset-inline-start: -14px;
}
.ribbon-clip:before {
  position: absolute;
  top: 30px;
  inset-inline-start: 0;
  width: 0;
  height: 0;
  content: "";
  border: 7px solid transparent;
  border-top-color: var(--color-primary);
  border-inline-end-color: var(--color-primary);
}
.ribbon-clip.ribbon-primary:before {
  border-top-color: var(--color-primary);
  border-inline-end-color: var(--color-primary);
}
.ribbon-clip.ribbon-secondary:before {
  border-top-color: var(--color-secondary);
  border-inline-end-color: var(--color-secondary);
}
.ribbon-clip.ribbon-success:before {
  border-top-color: var(--color-success);
  border-inline-end-color: var(--color-success);
}
.ribbon-clip.ribbon-info:before {
  border-top-color: var(--color-info);
  border-inline-end-color: var(--color-info);
}
.ribbon-clip.ribbon-warning:before {
  border-top-color: var(--color-warning);
  border-inline-end-color: var(--color-warning);
}
.ribbon-clip.ribbon-danger:before {
  border-top-color: var(--color-danger);
  border-inline-end-color: var(--color-danger);
}
.ribbon-clip.ribbon-light:before {
  border-top-color: var(--color-light);
  border-inline-end-color: var(--color-light);
}
.ribbon-clip.ribbon-dark:before {
  border-top-color: var(--color-dark);
  border-inline-end-color: var(--color-dark);
}

.ribbon-bookmark:before {
  position: absolute;
  top: 0;
  inset-inline-start: 100%;
  display: block;
  width: 0;
  height: 0;
  content: "";
  border: 15px solid var(--color-primary);
  border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-primary:before {
  border-color: var(--color-primary);
  border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-secondary:before {
  border-color: var(--color-secondary);
  border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-success:before {
  border-color: var(--color-success);
  border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-info:before {
  border-color: var(--color-info);
  border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-warning:before {
  border-color: var(--color-warning);
  border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-danger:before {
  border-color: var(--color-danger);
  border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-light:before {
  border-color: var(--color-light);
  border-inline-end: 10px solid transparent;
}
.ribbon-bookmark.ribbon-dark:before {
  border-color: var(--color-dark);
  border-inline-end: 10px solid transparent;
}

.ribbon-bookmark.ribbon-vertical-left:before, .ribbon-bookmark.ribbon-vertical-right:before {
  top: 100%;
  inset-inline-start: 0;
  margin-top: -14px;
  border-inline-end: 15px solid var(--color-danger);
  border-bottom: 10px solid transparent;
}

.ribbon-primary {
  background-color: var(--color-primary);
}

.ribbon-secondary {
  background-color: var(--color-secondary);
}

.ribbon-success {
  background-color: var(--color-success);
}

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

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

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

.ribbon-light {
  background-color: var(--color-light);
}

.ribbon-dark {
  background-color: var(--color-dark);
}

/*----------------------------------------*/
/*  ribbon end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.19 short codes
/*----------------------------------------*/
#world-map {
  height: 450px;
}

#marker-map,
#marker-image-map,
#lines-map,
#us-map,
#russia-map,
#brasil-map {
  height: 350px;
}

#map,
#map1,
#map-popup,
#map-custom-icon,
#interactive-map {
  height: 350px;
  z-index: 10;
}

#salesWorldMap {
  height: 200px;
  width: 100%;
}

#salesWorldMap #jvm-regions-group path {
  fill: var(--gray-3) !important;
}

#salesWorldMap circle:nth-child(1) {
  fill: var(--color-primary);
  stroke: rgba(var(--primary-rgb), 0.5);
  stroke-width: 20;
}

#salesWorldMap circle:nth-child(2) {
  fill: var(--color-success);
  stroke: rgba(var(--success-rgb), 0.5);
  stroke-width: 20;
}

#salesWorldMap circle:nth-child(3) {
  fill: var(--color-danger);
  stroke: rgba(var(--danger-rgb), 0.2);
  stroke-width: 20;
}

#salesWorldMap circle:nth-child(4) {
  fill: var(--color-info);
  stroke: rgba(var(--info-rgb), 0.2);
  stroke-width: 20;
}

#salesWorldMap circle:nth-child(5) {
  fill: var(--color-warning);
  stroke: rgba(var(--warning-rgb), 0.2);
  stroke-width: 20;
}

#seles-countries {
  height: 200px;
  width: 100%;
}

#seles-countries #jvm-regions-group path {
  fill: var(--gray-3) !important;
}

#seles-countries circle:nth-child(1) {
  fill: var(--color-primary);
  stroke: rgba(var(--primary-rgb), 0.5);
  stroke-width: 20;
}

#seles-countries circle:nth-child(2) {
  fill: var(--color-success);
  stroke: rgba(var(--success-rgb), 0.5);
  stroke-width: 20;
}

#seles-countries circle:nth-child(3) {
  fill: var(--color-danger);
  stroke: rgba(var(--danger-rgb), 0.2);
  stroke-width: 20;
}

#seles-countries circle:nth-child(4) {
  fill: var(--color-info);
  stroke: rgba(var(--info-rgb), 0.2);
  stroke-width: 20;
}

#seles-countries circle:nth-child(5) {
  fill: var(--color-warning);
  stroke: rgba(var(--warning-rgb), 0.2);
  stroke-width: 20;
}

[data-theme-mode=dark] #jvm-markers-labels-group text {
  fill: var(--color-black);
}

.icons ul {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.icons ul li {
  width: 127px;
  display: inline-block;
  text-align: center;
  background-color: var(--color-card-bg);
  box-shadow: var(--shadow);
  border-radius: 3px;
  padding: 15px 0 15px 0;
  transition: all 0.6s ease;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .icons ul li {
    width: 137px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .icons ul li {
    width: 125px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .icons ul li {
    width: 150px;
  }
}
@media (max-width: 575px) {
  .icons ul li {
    width: 150px;
  }
}
.icons ul li:hover {
  color: var(--color-primary);
  background-color: var(--gray-2);
}
.icons ul .class-icon {
  font-size: 21px;
  line-height: 21px;
}
.icons ul .class-icon [class^=ri-] {
  font-size: 26px;
  margin-bottom: 5px;
  display: block;
}
.icons ul .class-icon p {
  font-size: 12px;
}
.icons ul .class-icon.match {
  background-color: var(--gray-2);
}
.icons ul .class-icon.match .name {
  color: var(--color-info);
}

.tabler-icons {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.tabler-icon {
  width: 158px;
  display: flex;
  text-align: center;
  background-color: var(--color-card-bg);
  box-shadow: var(--shadow);
  border-radius: 3px;
  padding: 15px 0px;
  transition: all 0.6s ease;
  flex-direction: column;
  justify-content: center;
  gap: 5px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tabler-icon {
    width: 157px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tabler-icon {
    width: 150px;
  }
}
.tabler-icon strong {
  font-weight: var(--fw-regular);
  margin-bottom: 5px;
}
.tabler-icon i {
  font-size: 26px;
}
.tabler-icon .tabler-icon-codes code {
  font-size: 14px;
  color: var(--color-body);
}
.tabler-icon .tabler-icon-codes code:first-child {
  display: none;
}
.tabler-icon .tabler-icon-codes code:last-child {
  padding: 2px 5px;
  border: 1px solid var(--color-border);
}
.tabler-icon .tabler-icon-codes br {
  display: none;
}

.line-awesome-icon > div {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--color-body);
}
.line-awesome-icon > div i {
  color: var(--color-black);
  font-size: 36px;
  transition: all 0.3s ease-in-out;
}
.line-awesome-icon > div:hover i {
  color: var(--color-primary);
  transform: scale(1.5);
}

.bd-details-content-title {
  font-size: 28px;
  margin-bottom: 15px;
}
@media (max-width: 575px) {
  .bd-details-content-title {
    font-size: 24px;
  }
}

.list-bullet li {
  position: relative;
  margin-inline-start: 20px;
}
[data-theme-mode=dark] .list-bullet li {
  color: var(--color-body);
}
.list-bullet li:not(:last-child) {
  margin-bottom: 0px;
}
.list-bullet li::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 50%;
  inset-inline-start: -20px;
  top: 7px;
}

.sidebar-sticky {
  position: sticky;
  top: 100px;
  margin-bottom: 25px;
}

.pos-center {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/*----------------------------------------
   Text Underline
-----------------------------------------*/
.underline a {
  display: inline;
  background-image: linear-gradient(var(--color-primary), var(--color-primary)), linear-gradient(var(--color-primary), var(--color-primary));
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 83%;
  background-repeat: no-repeat;
  transition: background-size 0.4s linear;
  padding: 0 0 1% 0;
}
.underline a:hover {
  background-size: 0 1px, 100% 1px;
  color: var(--color-primary) !important;
}

.underline-two a {
  display: inline;
  background-image: linear-gradient(var(--color-secondary), var(--color-secondary)), linear-gradient(var(--color-secondary), var(--color-secondary));
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 83%;
  background-repeat: no-repeat;
  transition: background-size 0.4s linear;
  padding: 0 0 2% 0;
}
.underline-two a:hover {
  background-size: 0 1px, 100% 1px;
  color: var(--color-secondary) !important;
}

.underline-white a {
  display: inline;
  background-image: linear-gradient(var(--color-white), var(--color-white)), linear-gradient(var(--color-white), var(--color-white));
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 83%;
  background-repeat: no-repeat;
  transition: background-size 0.4s linear;
  padding: 0 0 1% 0;
}
.underline-white a:hover {
  background-size: 0 1px, 100% 1px;
  color: var(--color-white) !important;
}

/* display grid */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .grid-2 {
    grid-template-columns: repeat(1, 1fr);
  }
}

.grid-5 {
  grid-template-columns: repeat(5, 1fr);
  justify-content: space-between;
  gap: 25px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .grid-5 {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* display flex */
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .flex-wrap-small {
    flex-wrap: wrap !important;
  }
}

@media (max-width:450px) {
  .flex-xxs-wrap {
    flex-wrap: wrap !important;
  }
}

.d-flex-between {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.d-flex-center {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.d-flex-start {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: start;
}

.d-flex-items {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.d-flex-column {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.direction-column {
  flex-direction: column;
}

/* justify align */
.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: end !important;
}

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

.align-start {
  align-items: start !important;
}

.align-end {
  align-items: end !important;
}

/* justify align end */
.has-separator {
  margin-inline-end: 15px;
  padding-inline-end: 15px;
  position: relative;
}
.has-separator::before {
  position: absolute;
  content: " ";
  width: 1px;
  height: 20px;
  inset-inline-end: 0px;
  top: 50%;
  background: var(--color-border-2);
  transform: translateY(-50%);
}

.has-separator-black {
  margin-inline-end: 15px;
  padding-inline-end: 15px;
  position: relative;
}
.has-separator-black::before {
  position: absolute;
  content: " ";
  width: 1px;
  height: 20px;
  inset-inline-end: 0px;
  top: 50%;
  background: var(--color-black);
  transform: translateY(-50%);
}

.img-hover:hover img {
  transform: scale3d(1.07, 1.07, 1.07);
}

.has-position {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 1;
}

/* gap */
.gap-5 {
  gap: 5px !important;
}

.gap-10 {
  gap: 10px;
}

.gap-15 {
  gap: 15px !important;
}

.gap-16 {
  gap: 16px;
}

.gap-20 {
  gap: 20px;
}

.gap-25 {
  gap: 25px;
}

.gap-30 {
  gap: 30px;
}

.gap-35 {
  gap: 35px;
}

.b-color-primary {
  border-color: var(--color-primary);
}

.b-bottom {
  border-bottom: 1px solid var(--color-border);
}

.b-top {
  border-top: 1px solid var(--color-border);
}

.b-bottom2px {
  border-bottom: 2px solid;
}

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

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

/* Border Radius Short Code */
.radius-0 {
  border-radius: 0px !important;
}

.radius-3 {
  border-radius: 3px !important;
}

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

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

.radius-6 {
  border-radius: 6px !important;
}

.radius-8 {
  border-radius: 8px !important;
}

.radius-10 {
  border-radius: 10px !important;
}

.radius-12 {
  border-radius: 12px !important;
}

.radius-16 {
  border-radius: 16px !important;
}

.radius-24 {
  border-radius: 16px !important;
}

.radius-50 {
  border-radius: 50px !important;
}

.radius-100 {
  border-radius: 100% !important;
}

code {
  color: var(--color-danger);
  word-wrap: break-word;
}

.text-border-highlights {
  position: relative;
  z-index: 1;
}
.text-border-highlights span {
  position: absolute;
  inset-inline-start: 0;
  display: inline-block;
  z-index: -1;
  width: calc(100% - 3px);
}

/* width Short code */
.w-5 {
  width: 5% !important;
}

.w-10 {
  width: 10% !important;
}

/* Height Short code */
.lh-1 {
  line-height: 1;
}

.h100vh {
  height: 100vh;
}

.h100p {
  height: 100%;
}

.h-1px {
  height: 1px;
}

.h-2px {
  height: 2px;
}

.h-3px {
  height: 3px;
}

.h-4px {
  height: 4px;
}

.h-5px {
  height: 5px;
}

.h-6px {
  height: 6px;
}

.h-7px {
  height: 7px;
}

.h-8px {
  height: 8px;
}

.h-9px {
  height: 9px;
}

.h-10px {
  height: 10px;
}

.h-15px {
  height: 15px;
}

.h-20px {
  height: 20px;
}

.h-40px {
  height: 40px;
}

/* Bottom Short Code */
.bottom-0 {
  inset-block-end: 0;
}

.bottom-5 {
  inset-block-end: 5px;
}

.bottom-6 {
  inset-block-end: 6px;
}

.bottom-7 {
  inset-block-end: 7px;
}

.bottom-8 {
  inset-block-end: 8px;
}

.bottom-9 {
  inset-block-end: 9px;
}

.bottom-10 {
  inset-block-end: 10px;
}

.bottom-15 {
  inset-block-end: 15px;
}

.bottom-20 {
  inset-block-end: 20px;
}

.bottom-25 {
  inset-block-end: 25px;
}

/* List Style None */
.list-none ul {
  list-style: none;
}

/* Font Size */
.fs-8 {
  font-size: 8px;
}

.fs-9 {
  font-size: 9px;
}

.fs-10 {
  font-size: 10px;
}

.fs-11 {
  font-size: 11px;
}

.fs-12 {
  font-size: 12px;
}

.fs-13 {
  font-size: 13px;
}

.fs-14 {
  font-size: 14px;
}

.fs-15 {
  font-size: 15px;
}

.fs-16 {
  font-size: 16px;
}

.fs-17 {
  font-size: 17px;
}

.fs-18 {
  font-size: 18px;
}

.fs-19 {
  font-size: 19px;
}

.fs-20 {
  font-size: 20px;
}

.fs-21 {
  font-size: 21px;
}

.fs-22 {
  font-size: 22px;
}

.fs-23 {
  font-size: 23px;
}

.fs-24 {
  font-size: 24px;
}

.fs-25 {
  font-size: 25px;
}

.fs-26 {
  font-size: 26px;
}

.fs-27 {
  font-size: 27px;
}

.fs-28 {
  font-size: 28px;
}

.fs-29 {
  font-size: 29px;
}

.fs-30 {
  font-size: 30px;
}

.fs-31 {
  font-size: 31px;
}

.fs-32 {
  font-size: 32px;
}

.fs-33 {
  font-size: 33px;
}

.fs-34 {
  font-size: 34px;
}

.fs-35 {
  font-size: 35px;
}

.fs-36 {
  font-size: 36px;
}

.fs-37 {
  font-size: 37px;
}

.fs-38 {
  font-size: 38px;
}

.fs-39 {
  font-size: 39px;
}

.fs-40 {
  font-size: 40px;
}

.fs-41 {
  font-size: 41px;
}

.fs-42 {
  font-size: 42px;
}

.fs-43 {
  font-size: 43px;
}

.fs-44 {
  font-size: 44px;
}

.fs-45 {
  font-size: 45px;
}

.fs-46 {
  font-size: 46px;
}

.fs-47 {
  font-size: 47px;
}

.fs-48 {
  font-size: 48px;
}

.fs-49 {
  font-size: 49px;
}

.fs-50 {
  font-size: 50px;
}

.fs-51 {
  font-size: 51px;
}

.fs-52 {
  font-size: 52px;
}

.fs-53 {
  font-size: 53px;
}

.fs-54 {
  font-size: 54px;
}

.fs-55 {
  font-size: 55px;
}

.fs-56 {
  font-size: 56px;
}

.fs-57 {
  font-size: 57px;
}

.fs-58 {
  font-size: 58px;
}

.fs-59 {
  font-size: 59px;
}

.fs-60 {
  font-size: 60px;
}

.fs-61 {
  font-size: 61px;
}

.fs-62 {
  font-size: 62px;
}

.fs-63 {
  font-size: 63px;
}

.fs-64 {
  font-size: 64px;
}

.fs-65 {
  font-size: 65px;
}

.fs-66 {
  font-size: 66px;
}

.fs-67 {
  font-size: 67px;
}

.fs-68 {
  font-size: 68px;
}

.fs-69 {
  font-size: 69px;
}

.fs-70 {
  font-size: 70px;
}

.fs-71 {
  font-size: 71px;
}

.fs-72 {
  font-size: 72px;
}

.fs-150 {
  font-size: 150px;
}

.fs-140 {
  font-size: 140px;
}

.fs-190 {
  font-size: 190px;
}

.fs-200 {
  font-size: 200px;
}

/* Font Weight */
.fw-1 {
  font-weight: var(--fw-thin) !important;
}

.fw-2 {
  font-weight: var(--fw-elight) !important;
}

.fw-3 {
  font-weight: var(--fw-light) !important;
}

.fw-4 {
  font-weight: var(--fw-regular) !important;
}

.fw-5 {
  font-weight: var(--fw-medium) !important;
}

.fw-6 {
  font-weight: var(--fw-sbold) !important;
}

.fw-7 {
  font-weight: var(--fw-bold) !important;
}

.fw-8 {
  font-weight: var(--fw-ebold) !important;
}

.fw-9 {
  font-weight: var(--fw-black) !important;
}

.swiper-shadow-add {
  padding: 15px 15px !important;
  margin: -15px -15px !important;
}

.table-head-bg thead tr th {
  background-color: var(--color-bg-primary);
}

.latter-sp-2 {
  letter-spacing: 2px;
}

.filter-shadow {
  filter: drop-shadow(7px 10px 0px var(--color-light));
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .device-scroll {
    overflow-x: scroll;
    overflow-y: hidden !important;
    overflow: scroll;
    overflow-y: scroll;
    overflow-y: scroll;
    flex-wrap: nowrap !important;
    padding-bottom: 10px;
    padding-bottom: 10px;
  }
}

.content-divider {
  border-top: 1px solid var(--color-border);
}

.sl-number-counts {
  counter-reset: count;
  list-style: none;
}
.sl-number-counts li::before {
  counter-increment: count;
  content: counter(count) ". ";
  transition: all 500ms ease;
  display: inline-block;
}

.opacity-1 {
  opacity: 1;
}

.opacity-5 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.vertical-align-top {
  vertical-align: top !important;
}

@media (max-width: 575px) {
  .mobile-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: auto;
    padding-bottom: 5px;
  }
}

.width-90 {
  width: 90%;
}

@media (max-width: 575px) {
  .text-xs-start {
    text-align: start !important;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .text-xs-center {
    text-align: center;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .justify-xs-center {
    justify-content: center;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .d-m-none {
    display: none;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .flex-xxl-wrap {
    flex-wrap: wrap !important;
    white-space: nowrap;
  }
}

.mr-auto {
  margin-inline-end: auto !important;
}

.pl-0 {
  padding-inline-start: 0 !important;
}

.pr-0 {
  padding-inline-end: 0 !important;
}

.mt_1 {
  margin-top: 1px;
}

.mt_2 {
  margin-top: 2px;
}

.mt_3 {
  margin-top: 3px;
}

.mt_4 {
  margin-top: 4px;
}

.mt_5 {
  margin-top: 5px;
}

/* Padding Y-axis */
.py-6 {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.py-8 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.py-9 {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

.py-10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.py-15 {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.py-20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.py-25 {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

/* Padding X-axis */
.px-6 {
  padding-inline-start: 6px !important;
  padding-inline-end: 6px !important;
}

.px-10 {
  padding-inline-start: 10px !important;
  padding-inline-end: 10px !important;
}

.px-15 {
  padding-inline-start: 15px !important;
  padding-inline-end: 15px !important;
}

.px-20 {
  padding-inline-start: 20px !important;
  padding-inline-end: 20px !important;
}

.px-25 {
  padding-inline-start: 25px !important;
  padding-inline-end: 25px !important;
}

/* Padding All Sides */
.p-6 {
  padding: 6px !important;
}

.p-7 {
  padding: 7px !important;
}

.p-8 {
  padding: 8px !important;
}

.p-9 {
  padding: 9px !important;
}

.p-10 {
  padding: 10px !important;
}

.p-11 {
  padding: 11px !important;
}

.p-12 {
  padding: 12px !important;
}

.p-13 {
  padding: 13px !important;
}

.p-14 {
  padding: 14px !important;
}

.p-15 {
  padding: 15px !important;
}

.p-16 {
  padding: 16px !important;
}

.p-17 {
  padding: 17px !important;
}

.p-18 {
  padding: 18px !important;
}

.p-19 {
  padding: 19px !important;
}

.p-20 {
  padding: 20px !important;
}

.p-21 {
  padding: 21px !important;
}

.p-22 {
  padding: 22px !important;
}

.p-23 {
  padding: 23px !important;
}

.p-24 {
  padding: 24px !important;
}

.p-25 {
  padding: 25px !important;
}

.p-50 {
  padding: 50px !important;
}

.p-100 {
  padding: 100px !important;
}

.ml-0 {
  margin-inline-start: 0 !important;
}

/*----------------------------------------*/
/*  short codes end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.20 step
/*----------------------------------------*/
.step-active {
  color: var(--color-primary) !important;
}

.steps-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-black);
}
.steps-title:hover {
  color: var(--color-primary);
}

.steps-form {
  width: 100%;
  position: relative;
}

.steps-row::before {
  top: 50%;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 99%;
  height: 2px;
  background-color: var(--gray-3);
  z-index: 1;
  inset-inline-start: 2px;
  transform: translateY(-50%);
}
.steps-row.style_two::before {
  display: none;
}

.steps-step {
  text-align: center;
  position: relative;
  z-index: 9;
}
.steps-step.style_two {
  display: block;
  text-align: start;
}
.steps-step.style_two:not(:last-child) {
  margin-bottom: 20px;
}

.step-active span {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.step-grid {
  display: grid;
  grid-template-columns: 250px auto;
  align-items: center;
  gap: 25px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .step-grid {
    grid-template-columns: auto;
  }
}

.bg-steps {
  padding: 10px 0px;
}

.btn-blue-grey {
  background-color: var(--primary-rgba-15);
  padding: 10px 10px;
}
.btn-blue-grey.step-active-bg {
  background-color: var(--color-primary);
  color: var(--color-white) !important;
}

.setup-panel-4 {
  display: flex;
  justify-content: space-between;
  border-radius: 4px;
  overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .setup-panel-4 {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
  }
}
.setup-panel-4.steps-row::before {
  display: none;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .setup-panel-4 .steps-step {
    display: grid;
    text-align: center;
  }
  .setup-panel-4 .steps-step:not(:last-child) {
    margin-inline-end: 10px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .setup-panel-4 .steps-step {
    display: grid;
    text-align: center;
    margin-inline-end: 0;
    margin-bottom: 10px;
  }
}
.setup-panel-4 .steps-title {
  color: var(--color-black);
}
.setup-panel-4 .steps-title:hover {
  color: var(--color-black);
}

.step__btn-end {
  text-align: end;
}
@media (max-width: 575px) {
  .step__btn-end {
    text-align: start;
  }
}

.step-circle span {
  width: 70px;
  height: 70px;
  font-size: 22px;
  color: var(--color-primary);
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}
.step-circle.step-active span {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.steps-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.steps-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.steps-item {
  position: relative;
  padding: 12px 20px;
  margin: 0;
  font-size: inherit;
  color: var(--clr-text-label);
  vertical-align: top;
  background-color: var(--primary-rgba-1);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.steps-item.current {
  color: var(--color-white);
  background-color: var(--color-primary);
}
.steps-item.current .steps-number {
  color: var(--color-primary);
  background-color: var(--color-white);
}
.steps-item.current .steps-title {
  color: var(--color-white);
}
.steps-item.current p {
  color: var(--color-white);
}
.steps-item.done {
  color: var(--color-white);
  background-color: var(--color-primary);
}
.steps-item.done .steps-number {
  color: var(--color-primary);
  background-color: var(--color-white);
}
.steps-item.done .steps-title {
  color: var(--color-white);
}
.steps-item.done p {
  color: var(--color-white);
}
.steps-item.error {
  color: var(--color-white);
  background-color: var(--color-warning);
}
.steps-item.error .steps-number {
  color: var(--color-warning);
  background-color: var(--color-white);
}
.steps-item.error .steps-title {
  color: var(--color-white);
}
.steps-item.error p {
  color: var(--color-white);
}
.steps-item.active {
  color: var(--color-white);
  background-color: var(--color-success);
}
.steps-item.active .steps-number {
  color: var(--color-success);
  background-color: var(--color-white);
}
.steps-item.active .steps-title {
  color: var(--color-white);
}
.steps-item.active p {
  color: var(--color-white);
}
.steps-item.disabled {
  color: var(--color-white);
  pointer-events: none;
  cursor: auto;
}
.steps-number {
  position: absolute;
  top: 50%;
  inset-inline-start: 20px;
  width: 40px;
  height: 40px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-align: center;
  background: var(--color-primary);
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.steps-content {
  min-height: 40px;
  margin-inline-start: 50px;
  text-align: left;
}
.steps-title {
  margin-bottom: 0;
  font-size: 20px;
  color: var(--color-heading);
  font-weight: 600;
}

/* steps btn */
.steps-btn {
  width: 100%;
}
.steps-btn a {
  padding: 10px 15px;
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  background-color: var(--primary-rgba-15);
  width: 100%;
  display: block;
  text-align: center;
}
.steps-btn a.active {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-radius: 4px;
}
[data-theme-mode=dark] .steps-btn a.active {
  color: var(--color-black);
}

.form-custom-content {
  padding: 10px 20px 10px 20px;
  cursor: pointer;
  width: 100%;
}

/*----------------------------------------*/
/*  step end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.21 tab
/*----------------------------------------*/
.nav-tabs .nav-link {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.nav-link {
  display: block;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--color-heading);
  text-decoration: none;
  background: 0 0;
  border: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

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

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
[data-theme-mode=dark] .nav-tabs .nav-item.show .nav-link,
[data-theme-mode=dark] .nav-tabs .nav-link.active {
  color: var(--color-black);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--color-white);
  background-color: var(--color-primary);
}
[data-theme-mode=dark] .nav-pills .nav-link.active,
[data-theme-mode=dark] .nav-pills .show > .nav-link {
  color: var(--color-black);
}

.nav-primary .nav-link.active,
.nav-primary .show > .nav-link,
.nav-pills.nav-primary .nav-link.active,
.nav-pills.nav-primary .show > .nav-link {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
}
[data-theme-mode=dark] .nav-primary .nav-link.active,
[data-theme-mode=dark] .nav-primary .show > .nav-link,
[data-theme-mode=dark] .nav-pills.nav-primary .nav-link.active,
[data-theme-mode=dark] .nav-pills.nav-primary .show > .nav-link {
  color: var(--color-black);
}

.nav-primary .nav-link,
.nav-pills.nav-primary .nav-link {
  color: var(--color-heading);
  border-radius: 6px;
}

.nav-secondary .nav-link.active,
.nav-secondary .show > .nav-link,
.nav-pills.nav-secondary .nav-link.active,
.nav-pills.nav-secondary .show > .nav-link {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border: none;
}

.nav-secondary .nav-link,
.nav-pills.nav-secondary .nav-link {
  color: var(--color-secondary);
}

.nav-success .nav-link.active,
.nav-success .show > .nav-link,
.nav-pills.nav-success .nav-link.active,
.nav-pills.nav-success .show > .nav-link {
  background-color: var(--color-success);
  color: var(--color-white);
  border: none;
}
[data-theme-mode=dark] .nav-success .nav-link.active,
[data-theme-mode=dark] .nav-success .show > .nav-link,
[data-theme-mode=dark] .nav-pills.nav-success .nav-link.active,
[data-theme-mode=dark] .nav-pills.nav-success .show > .nav-link {
  color: var(--color-black);
}

.nav-success .nav-link,
.nav-pills.nav-success .nav-link {
  color: var(--color-success);
}

.nav-info .nav-link.active,
.nav-info .show > .nav-link,
.nav-pills.nav-info .nav-link.active,
.nav-pills.nav-info .show > .nav-link {
  background-color: var(--color-info);
  color: var(--color-white);
  border: none;
}
[data-theme-mode=dark] .nav-info .nav-link.active,
[data-theme-mode=dark] .nav-info .show > .nav-link,
[data-theme-mode=dark] .nav-pills.nav-info .nav-link.active,
[data-theme-mode=dark] .nav-pills.nav-info .show > .nav-link {
  color: var(--color-black);
}

.nav-info .nav-link,
.nav-pills.nav-info .nav-link {
  color: var(--color-info);
}

.nav-warning .nav-link.active,
.nav-warning .show > .nav-link,
.nav-pills.nav-warning .nav-link.active,
.nav-pills.nav-warning .show > .nav-link {
  background-color: var(--color-warning);
  color: var(--color-white);
  border: none;
}
[data-theme-mode=dark] .nav-warning .nav-link.active,
[data-theme-mode=dark] .nav-warning .show > .nav-link,
[data-theme-mode=dark] .nav-pills.nav-warning .nav-link.active,
[data-theme-mode=dark] .nav-pills.nav-warning .show > .nav-link {
  color: var(--color-black);
}

.nav-warning .nav-link,
.nav-pills.nav-warning .nav-link {
  color: var(--color-warning);
}

.nav-danger .nav-link.active,
.nav-danger .show > .nav-link,
.nav-pills.nav-danger .nav-link.active,
.nav-pills.nav-danger .show > .nav-link {
  background-color: var(--color-danger);
  color: var(--color-white);
  border: none;
}
[data-theme-mode=dark] .nav-danger .nav-link.active,
[data-theme-mode=dark] .nav-danger .show > .nav-link,
[data-theme-mode=dark] .nav-pills.nav-danger .nav-link.active,
[data-theme-mode=dark] .nav-pills.nav-danger .show > .nav-link {
  color: var(--color-black);
}

.nav-danger .nav-link,
.nav-pills.nav-danger .nav-link {
  color: var(--color-danger);
}

.nav-light .nav-link.active,
.nav-light .show > .nav-link,
.nav-pills.nav-light .nav-link.active,
.nav-pills.nav-light .show > .nav-link {
  background-color: var(--color-light);
  color: var(--color-white);
  border: none;
}

.nav-light .nav-link,
.nav-pills.nav-light .nav-link {
  color: var(--color-heading);
}

.nav-dark .nav-link,
.nav-pills.nav-dark .nav-link {
  color: var(--color-heading);
  border-radius: 6px;
}

.nav-dark .nav-link.active,
.nav-dark .show > .nav-link,
.nav-pills.nav-dark .nav-link.active,
.nav-pills.nav-dark .show > .nav-link {
  background-color: var(--color-heading);
  color: var(--color-white);
  border-radius: 6px;
}

.tab-style-one .nav-pills {
  margin-bottom: 30px;
  justify-content: center;
}
.tab-style-one .nav-item {
  padding: 0 4px;
}
.tab-style-one .nav-link {
  border: none;
  color: var(--color-body);
  border-radius: 6px;
  padding: 7.8px 20px;
  font-size: 14px;
  font-weight: 600;
  transition: var(--transition);
}
.tab-style-one .nav-link:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.tab-style-one .nav-link.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.tab-style-two .nav-pills {
  margin-bottom: 30px;
  justify-content: center;
  border-bottom: 1px solid var(--color-border);
  gap: 25px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tab-style-two .nav-pills {
    margin-bottom: 15px;
  }
}
@media (max-width: 575px) {
  .tab-style-two .nav-pills {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
}
.tab-style-two .nav-item {
  padding: 0 35px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tab-style-two .nav-item {
    padding: 0 0px;
  }
}
.tab-style-two .nav-link {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  color: var(--color-black);
  background-color: transparent;
  padding-bottom: 15px;
}
.tab-style-two .nav-link:hover {
  background-color: transparent;
  color: var(--color-primary);
}
.tab-style-two .nav-link:hover::before {
  transform: scaleX(1);
}
.tab-style-two .nav-link.active {
  background-color: transparent;
  color: var(--color-primary);
}
.tab-style-two .nav-link.active::before {
  transform: scaleX(1);
}
.tab-style-two .nav-link::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  display: block;
  transform: scaleX(0);
  -webkit-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
  background-color: var(--color-primary);
  inset-inline-start: 0;
  bottom: -1px;
}
.tab-style-two.boder-b-none .nav-pills {
  border-bottom: none;
}
.tab-style-two.boder-b-none .nav-link::before {
  bottom: 10px;
}
.tab-style-three .nav-tabs {
  margin-bottom: 30px;
  border-bottom: 1px solid var(--color-border);
}
.tab-style-three .nav-link {
  border-radius: 6px 6px 0 0;
  border: none;
  border-bottom: none;
  display: block;
  padding: 7.8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-black);
  text-decoration: none;
}
.tab-style-three .nav-link:hover {
  color: var(--color-primary);
  background-color: var(--gray-3);
  border-color: var(--gray-3);
}
.tab-style-three .nav-link.active {
  color: var(--color-primary);
  background-color: var(--gray-3);
  border-color: var(--gray-3);
}
.tab-style-three .tab-pane {
  background-color: transparent;
}
.tab-style-three.tab-bg .nav-tabs {
  margin-bottom: 0px;
  border-bottom: none;
}
.tab-style-three.tab-bg .nav-link {
  border: none;
}
.tab-style-three.tab-bg .nav-link.active {
  border: none;
}
.tab-style-three.tab-bg .tab-pane {
  background-color: var(--color-bg-primary);
  padding: 30px 30px;
}
.tab-style-three.tab-column {
  display: flex;
}
.tab-style-three.tab-column .nav-tabs {
  flex-direction: column;
  background: var(--color-bg-primary);
  margin-bottom: 0;
  border-bottom: none;
  min-height: 470px;
}
.tab-style-three.tab-column .nav-link {
  width: 180px;
  text-align: start;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tab-style-three.tab-column .nav-link.active {
  color: var(--color-primary);
  background-color: var(--color-white);
  border-color: transparent;
}
.tab-style-three.tab-column .tab-content {
  width: 100%;
}
.tab-style-three.tab-column .tab-pane {
  background-color: var(--color-white);
  padding-inline-start: 30px;
}
.tab-style-four .nav-item:not(:last-child) {
  margin-bottom: 10px;
}
.tab-style-four .nav-pills {
  display: block;
}
.tab-style-four .nav-link {
  background-color: var(--primary-rgba-15);
  color: var(--color-black);
  border: 0;
  border-radius: 4px;
  display: flex;
  align-items: start;
  font-size: 16px;
  font-weight: var(--fw-medium);
  width: 100%;
  gap: 15px;
  text-align: start;
  justify-content: start;
  padding: 9.3px 30px;
  transition: all 0.3s ease-in-out;
}
[data-theme-mode=dark] .tab-style-four .nav-link {
  color: var(--color-black);
}
.tab-style-four .nav-link:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
}
[data-theme-mode=dark] .tab-style-four .nav-link:hover {
  color: var(--color-black);
}
.tab-style-four .nav-link.active {
  color: var(--color-white);
  background-color: var(--color-primary);
}
[data-theme-mode=dark] .tab-style-four .nav-link.active {
  color: var(--color-black);
}
.tab-style-four .tab-pane-content-thumb img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
}
.tab-style-four .tab-pane.active .tab-pane-content {
  animation: tab-right 0.4s linear;
}
@-webkit-keyframes tab-right {
  from {
    transform: translateX(35px);
  }
  to {
    transform: translateX(0);
  }
}
@-moz-keyframes tab-right {
  from {
    transform: translateX(35px);
  }
  to {
    transform: translateX(0);
  }
}
@-ms-keyframes tab-right {
  from {
    transform: translateX(35px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes tab-right {
  from {
    transform: translateX(35px);
  }
  to {
    transform: translateX(0);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tab-style-four.tab-flex .nav-item {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tab-style-four.tab-flex .nav-item:not(:last-child) {
    margin-bottom: 0;
  }
}
.tab-style-four.tab-flex .nav-pills {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 30px;
  align-items: center;
  margin-bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tab-style-four.tab-flex .nav-pills {
    flex-direction: column;
  }
}
.tab-style-four.tab-flex .tab-pane.active .tab-pane-content {
  animation: tab-bottom 0.4s linear;
}
@-webkit-keyframes tab-bottom {
  from {
    transform: translateY(30px);
  }
  to {
    transform: translateY(0);
  }
}
@-moz-keyframes tab-bottom {
  from {
    transform: translateY(30px);
  }
  to {
    transform: translateY(0);
  }
}
@-ms-keyframes tab-bottom {
  from {
    transform: translateY(30px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes tab-bottom {
  from {
    transform: translateY(30px);
  }
  to {
    transform: translateY(0);
  }
}
.tab-style-four.tab-pane-left-anim .tab-pane.active .tab-pane-content {
  animation: tab-left 0.4s linear;
}
@-webkit-keyframes tab-left {
  from {
    transform: translateX(-35px);
  }
  to {
    transform: translateX(0);
  }
}
@-moz-keyframes tab-left {
  from {
    transform: translateX(-35px);
  }
  to {
    transform: translateX(0);
  }
}
@-ms-keyframes tab-left {
  from {
    transform: translateX(-35px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes tab-left {
  from {
    transform: translateX(-35px);
  }
  to {
    transform: translateX(0);
  }
}
.tab-style-five .nav-link {
  border: 1px solid var(--color-body);
  border-radius: 6px;
  padding: 0 20px;
  color: var(--color-body);
  font-size: 16px;
  font-weight: 500;
  transition: var(--transition);
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-style-five .nav-link.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.tab-style-five .nav-link.active:hover {
  color: var(--color-white);
}
.tab-style-five .nav-link:hover {
  color: var(--color-primary);
}
.tab-style-five .nav-pills {
  gap: 10px;
}
.tab-style-six .nav-pills {
  margin-bottom: 25px;
  border-bottom: 1px solid var(--color-border);
  gap: 25px;
}
.tab-style-six .nav-link {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  color: var(--color-black);
  background-color: transparent;
  padding-bottom: 15px;
}
.tab-style-six .nav-link:hover {
  background-color: transparent;
  color: var(--color-primary);
}
.tab-style-six .nav-link:hover::before {
  transform: scaleX(1);
}
.tab-style-six .nav-link.active {
  background-color: transparent;
  color: var(--color-primary);
}
.tab-style-six .nav-link.active::before {
  transform: scaleX(1);
}
.tab-style-six .nav-link::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  display: block;
  transform: scaleX(0);
  -webkit-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
  background-color: var(--color-primary);
  inset-inline-start: 0;
  bottom: -1px;
}

/*----------------------------------------*/
/*  tab end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.22 table
/*----------------------------------------*/
.table-card {
  margin: 0 -25px -25px;
}

.table {
  margin-bottom: 0;
  border-color: var(--color-border) !important;
  color: var(--color-body);
}

.tables-info {
  color: var(--color-heading);
}

/* Bootstrap Table */
.table > :not(caption) > * > * {
  background-color: transparent;
  color: inherit;
}
.table > thead {
  background-color: var(--gray-3);
  color: var(--color-heading);
}

.table-light {
  color: var(--color-black);
}

.table thead tr:last-child th {
  border-bottom-width: 0;
}

.table.tfoot-b-none tfoot tr:last-child th {
  border-bottom-width: 0;
}
.table.tbody-b-none tbody tr:last-child td {
  border-bottom-width: 0;
}

.table thead tr th {
  font-weight: var(--fw-bold);
  font-size: 14px;
}

.table th,
.table td {
  padding: 12px 18.4px;
  padding: 10.5px 10px;
  vertical-align: middle;
  line-height: 1.462;
  font-size: 14px;
  font-weight: 500;
}

.table-active {
  background-color: var(--gray-3);
  color: var(--color-heading);
}

/* dataTables */
.dt-button {
  font-size: 14px !important;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flexbox;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 6.8px 20px !important;
  transition: all 0.3s linear !important;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  white-space: nowrap !important;
  gap: 0 6px !important;
  font-weight: var(--fw-medium) !important;
  border: none !important;
  color: var(--color-white) !important;
  background-color: var(--color-primary) !important;
}
.dt-button:hover {
  color: var(--color-primary) !important;
  background-color: var(--color-secondary) !important;
}

div.dataTables_wrapper div.dataTables_length label {
  color: var(--color-body) !important;
}

div.dataTables_wrapper div.dataTables_filter label {
  color: var(--color-body) !important;
}

.dataTables_info {
  padding-top: 0 !important;
  color: var(--color-body) !important;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .dataTables_info {
    text-align: start !important;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  div.dataTables_wrapper div.dataTables_paginate {
    text-align: start !important;
    margin-inline-start: -10px;
  }
}

div.dataTables_wrapper > div.row:first-child {
  margin-top: 15px;
  align-items: center;
  padding-bottom: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  div.dataTables_wrapper > div.row:first-child {
    gap: 25px;
  }
}
div.dataTables_wrapper > div.row:last-child {
  align-items: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  div.dataTables_wrapper > div.row:last-child {
    gap: 25px;
    display: inline-grid;
  }
}

table.dataTable {
  margin-top: 0px !important;
  margin-bottom: 10px !important;
}

@media (min-width: 768px) {
  .data-table-btn {
    position: absolute;
    inset-inline-start: 200px;
    z-index: 1;
    top: 15px;
  }
}
table.dataTable.display tbody tr.odd > .sorting_1 {
  background-color: rgba(108, 95, 252, 0.1);
}

@media (max-width:450px) {
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    flex-wrap: wrap;
  }
}

div.dataTables_wrapper div.dataTables_filter input {
  margin-inline-start: 0.5em !important;
}

[dir=rtl] div.dataTables_wrapper div.dataTables_filter {
  text-align: end;
}

/*----------------------------------------*/
/*  table end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.23 timeline
/*----------------------------------------*/
.timeline {
  border-inline-start: 2px solid var(--color-border);
  padding-inline-start: 30px;
  position: relative;
}
.timeline .timeline-item {
  position: relative;
  padding-bottom: 25px;
}
.timeline .timeline-item:last-child {
  padding-bottom: 0;
}
.timeline .timeline-item::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: -37px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-primary);
}
.timeline .timeline-item.pending::before {
  background: var(--gray-5);
  box-shadow: 0 0 0 2px var(--gray-3);
}
@media (max-width: 575px) {
  .timeline .timeline-content {
    flex-direction: column;
    justify-content: start !important;
    text-align: start !important;
    align-items: start;
    gap: 0px;
  }
}

.timeline-two {
  display: flex;
  justify-content: space-between;
  position: relative;
}
@media (max-width: 575px) {
  .timeline-two {
    justify-content: center;
    flex-direction: column;
    gap: 25px;
    align-items: start;
  }
}
.timeline-two:before {
  content: "";
  position: absolute;
  top: 15px;
  inset-inline-start: 30px;
  inset-inline-end: 30px;
  height: 2px;
  background: var(--color-border);
  z-index: 1;
}
@media (max-width: 575px) {
  .timeline-two:before {
    inset-inline-start: 17px;
    height: 85%;
    width: 1px;
  }
}

.timeline-step {
  display: flex;
  text-align: center;
  position: relative;
  z-index: 2;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 575px) {
  .timeline-step {
    flex-direction: row;
    align-items: start;
    gap: 25px;
  }
  .timeline-step .text-center {
    text-align: start !important;
  }
  .timeline-step .avatar {
    margin: inherit !important;
  }
}
.timeline-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 20px;
  width: 36px;
  height: 36px;
  background-color: var(--color-body);
  border-radius: 50%;
  margin-bottom: 15px;
}
@media (max-width: 575px) {
  .timeline-step span {
    margin-bottom: 0px;
  }
}
.timeline-step span.completed {
  color: var(--color-white);
  background-color: var(--color-success);
}
.timeline-step span.upcoming {
  color: var(--color-white);
  background-color: var(--color-warning);
}

.payment-icon {
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.payment-icon img {
  border-radius: 4px;
}
.payment-info {
  flex: 1;
}
.payment-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}
.payment-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.payment-switch input:checked + .slider {
  background-color: #2ecc71;
}
.payment-switch input:checked + .slider:before {
  transform: translateX(26px);
}
.payment-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}
.payment-switch .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  inset-inline-start: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.payment-details {
  display: none;
}

.bd-timeline-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .bd-timeline-wrapper {
    flex-direction: column;
    gap: 25px;
  }
}
.bd-timeline-item {
  padding: 0 2px;
  position: relative;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .bd-timeline-item {
    width: 100%;
  }
}
.bd-timeline-item:hover .bd-timeline-icon i {
  background: var(--color-primary);
}
.bd-timeline-item:hover .bd-timeline-icon:before {
  background: var(--color-primary);
}
.bd-timeline-item:hover .border {
  background: var(--color-primary);
}
.bd-timeline-item:hover .bd-timeline-content {
  background: var(--color-primary);
}
.bd-timeline-item:hover .title {
  color: var(--color-white);
}
[data-theme-mode=dark] .bd-timeline-item:hover .title {
  color: var(--color-black);
}
.bd-timeline-item:hover .description {
  color: var(--color-white);
}
[data-theme-mode=dark] .bd-timeline-item:hover .description {
  color: var(--color-black);
}
.bd-timeline-item .border {
  height: 15px;
  background: var(--color-secondary);
  margin-bottom: 20px;
  transition: all 0.3s ease 0s;
}
.bd-timeline-item:nth-child(2n) .bd-timeline-icon {
  padding: 55px 0 20px 0;
}
.bd-timeline-item:nth-child(2n) .bd-timeline-icon:before {
  bottom: auto;
  top: 0;
}
.bd-timeline-item:nth-child(2n) .border {
  margin: 38px 0 0 0;
}
.bd-timeline-item:first-child .border {
  border-radius: 4px 0 0 4px;
}
.bd-timeline-item:last-child.border {
  border-radius: 0 4px 4px 0;
}
.bd-timeline-icon {
  display: block;
  text-align: center;
  padding: 10px 0 55px 0;
  z-index: 1;
  position: relative;
}
.bd-timeline-icon:before {
  content: "";
  width: 1px;
  height: 75%;
  background: var(--color-secondary);
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: -1;
  transition: all 0.3s ease 0s;
}
.bd-timeline-icon i {
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50%;
  background: var(--color-secondary);
  font-size: 14px;
  color: var(--color-white);
  transition: all 0.3s ease 0s;
  display: inline-block;
}
[data-theme-mode=dark] .bd-timeline-icon i {
  color: var(--color-black);
}
.bd-timeline-content {
  padding: 15px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: 3px;
  transition: all 0.3s ease 0s;
}
.bd-timeline-content .title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
  margin: 0 0 10px 0;
  transition: all 0.3s ease 0s;
}
.bd-timeline-content .description {
  font-size: 14px;
  color: var(--color-body);
  margin: 0;
  transition: all 0.3s ease 0s;
}

/* timeline 2 */
.bd-timeline-item-2:not(:last-child) {
  margin-bottom: 30px;
}
.bd-timeline-item-2:nth-child(4n+2) .bd-timeline-content-2 {
  border-color: var(--color-secondary);
}
.bd-timeline-item-2:nth-child(4n+2) .bd-timeline-content-2:before {
  border-color: var(--color-secondary);
}
.bd-timeline-item-2:nth-child(4n+2) .bd-timeline-step {
  color: var(--color-secondary);
}
.bd-timeline-item-2:nth-child(4n+2) .bd-timeline-icon-2 {
  color: var(--color-secondary);
}
.bd-timeline-item-2:nth-child(4n+3) .bd-timeline-content-2 {
  border-color: var(--color-warning);
}
.bd-timeline-item-2:nth-child(4n+3) .bd-timeline-content-2:before {
  border-color: var(--color-warning);
}
.bd-timeline-item-2:nth-child(4n+3) .bd-timeline-step {
  color: var(--color-warning);
}
.bd-timeline-item-2:nth-child(4n+3) .bd-timeline-icon-2 {
  color: var(--color-warning);
}
.bd-timeline-item-2:nth-child(4n+4) .bd-timeline-content-2 {
  border-color: var(--color-success);
}
.bd-timeline-item-2:nth-child(4n+4) .bd-timeline-content-2:before {
  border-color: var(--color-success);
}
.bd-timeline-item-2:nth-child(4n+4) .bd-timeline-step {
  color: var(--color-success);
}
.bd-timeline-item-2:nth-child(4n+4) .bd-timeline-icon-2 {
  color: var(--color-success);
}
.bd-timeline-content-2 {
  color: var(--color-body);
  background: var(--color-white);
  text-align: center;
  min-height: 140px;
  padding: 40px 120px;
  border: 12px solid var(--color-primary);
  border-top: none;
  border-radius: 0 0 40px 40px;
  box-shadow: 0 10px 15px -15px rgba(0, 0, 0, 0.5) inset;
  display: block;
  position: relative;
}
[data-theme-mode=dark] .bd-timeline-content-2 {
  background: var(--color-white);
}
.bd-timeline-content-2:hover {
  text-decoration: none;
}
.bd-timeline-content-2:before {
  content: "";
  border: 3px dashed var(--color-primary);
  border-top: none;
  border-radius: 0 0 30px 30px;
  position: absolute;
  top: 0;
  inset-inline-start: 5px;
  inset-inline-end: 5px;
  bottom: 4px;
}
.bd-timeline-content-2 .title {
  font-size: 28px;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--color-black);
}
.bd-timeline-content-2 .description {
  font-size: 16px;
  margin: 0;
}
.bd-timeline-icon-2 {
  color: var(--color-primary);
  font-size: 50px;
  line-height: 50px;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  inset-inline-start: 35px;
}
.bd-timeline-step {
  color: var(--color-primary);
  font-size: 50px;
  font-weight: 600;
  line-height: 50px;
  text-align: center;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  inset-inline-end: 35px;
}
.bd-timeline-step span {
  font-size: 22px;
  font-weight: 400;
  line-height: 25px;
  text-transform: uppercase;
  display: block;
}

@media screen and (max-width: 576px) {
  .bd-timeline-item-2 .bd-timeline-content-2,
  .bd-timeline-item-2:nth-child(even) .bd-timeline-content-2 {
    padding: 110px 25px 25px;
  }
  .bd-timeline-icon-2 {
    transform: translateY(0);
    top: 32px;
  }
  .bd-timeline-step {
    transform: translateY(0);
    top: 17px;
  }
  .title {
    font-size: 22px;
  }
}
/* timeline 3 */
.bd-timeline-3 {
  position: relative;
  width: 100%;
  padding: 30px 0;
}

.bd-timeline-container {
  position: relative;
  width: 100%;
}

.bd-timeline-start,
.bd-timeline-year,
.bd-timeline-end {
  position: relative;
  width: 100%;
  text-align: center;
  z-index: 1;
}

.bd-timeline-start p,
.bd-timeline-year p,
.bd-timeline-end p {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 0;
  padding: 30px 0;
  text-align: center;
  background: var(--color-primary);
  border-radius: 100px;
  color: var(--color-white);
  font-size: 14px;
  text-transform: uppercase;
}
[data-theme-mode=dark] .bd-timeline-start p,
[data-theme-mode=dark] .bd-timeline-year p,
[data-theme-mode=dark] .bd-timeline-end p {
  color: var(--color-black);
}

.bd-timeline-year {
  margin: 30px 0;
}

.bd-timeline-continue {
  position: relative;
  width: 100%;
  padding: 60px 0;
}
.bd-timeline-continue::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  top: 0;
  inset-inline-start: 50%;
  margin-inline-start: -1px;
  background: var(--color-primary);
}

.bd-timeline-left,
.bd-timeline-right .bd-timeline-date {
  text-align: right;
}
[dir=rtl] .bd-timeline-left,
[dir=rtl] .bd-timeline-right .bd-timeline-date {
  text-align: left;
}

.bd-timeline-right,
.bd-timeline-left .bd-timeline-date {
  text-align: left;
}
[dir=rtl] .bd-timeline-right,
[dir=rtl] .bd-timeline-left .bd-timeline-date {
  text-align: right;
}

.bd-timeline-date {
  font-size: 14px;
  font-weight: 600;
  margin: 41px 0 0 0;
  position: relative;
}
.bd-timeline-date::after {
  content: "";
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  top: 3px;
  background: var(--color-primary);
  border-radius: 15px;
  z-index: 1;
}

.bd-timeline-left .bd-timeline-date::after {
  inset-inline-start: -20px;
}

.bd-timeline-right .bd-timeline-date::after {
  inset-inline-end: -20px;
}

.bd-timeline-box {
  position: relative;
  display: inline-block;
  margin: 15px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-white);
}

.bd-timeline-launch {
  width: 100%;
  margin: 15px 0;
  padding: 0;
  border: none;
  text-align: center;
  background: transparent;
}
.bd-timeline-launch .bd-timeline-text {
  width: 100%;
}
.bd-timeline-launch .bd-timeline-box::after,
.bd-timeline-launch .bd-timeline-box::before {
  inset-inline-start: 50%;
  margin-inline-start: -10px;
  border-color: var(--color-border) transparent transparent transparent;
  top: 85px;
}

.bd-timeline-box::after,
.bd-timeline-box::before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.bd-timeline-left .bd-timeline-box::after,
.bd-timeline-left .bd-timeline-box::before {
  inset-inline-start: 100%;
}

.bd-timeline-right .bd-timeline-box::after,
.bd-timeline-right .bd-timeline-box::before {
  inset-inline-end: 100%;
}

.bd-timeline-box::after {
  top: 26px;
  border-color: transparent transparent transparent var(--color-border);
  border-width: 10px;
}
[dir=rtl] .bd-timeline-box::after {
  border-color: transparent var(--color-border) transparent transparent;
}
.bd-timeline-box::before {
  top: 25px;
  border-color: transparent transparent transparent var(--color-border);
  border-width: 11px;
}
[dir=rtl] .bd-timeline-box::before {
  border-color: transparent var(--color-border) transparent transparent;
}

.bd-timeline-right .bd-timeline-box::after {
  border-color: transparent var(--color-border) transparent transparent;
}
[dir=rtl] .bd-timeline-right .bd-timeline-box::after {
  border-color: transparent transparent transparent var(--color-border);
}
.bd-timeline-right .bd-timeline-box::before {
  border-color: transparent var(--color-border) transparent transparent;
}
[dir=rtl] .bd-timeline-right .bd-timeline-box::before {
  border-color: transparent transparent transparent var(--color-border);
}

.bd-timeline-icon-3 {
  position: relative;
  width: 40px;
  height: auto;
  float: left;
}
[dir=rtl] .bd-timeline-icon-3 {
  float: right;
}
.bd-timeline-icon-3 i {
  font-size: 25px;
  color: var(--color-primary);
}

.bd-timeline-text {
  position: relative;
  width: calc(100% - 40px);
  float: left;
}
[dir=rtl] .bd-timeline-text {
  float: right;
}
.bd-timeline-text h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--color-black);
}
[data-theme-mode=dark] .bd-timeline-text h3 {
  color: var(--color-black);
}
.bd-timeline-text p {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .bd-timeline-continue::after {
    inset-inline-start: 40px;
  }
  .bd-timeline-end,
  .bd-timeline-start,
  .bd-timeline-year,
  .bd-timeline-left,
  .bd-timeline-right .bd-timeline-date,
  .bd-timeline-right,
  .bd-timeline-left .bd-timeline-date,
  .bd-timeline-launch {
    text-align: left;
  }
  .bd-timeline-left .bd-timeline-date::after,
  .bd-timeline-right .bd-timeline-date::after {
    inset-inline-start: 47px;
  }
  .bd-timeline-box,
  .bd-timeline-right .bd-timeline-date,
  .bd-timeline-left .bd-timeline-date {
    margin-inline-start: 55px;
  }
  .bd-timeline-launch .bd-timeline-box {
    margin-inline-start: 0;
  }
  .bd-timeline-left .bd-timeline-box::after {
    inset-inline-start: -20px;
    border-color: transparent var(--color-white) transparent transparent;
  }
  .bd-timeline-left .bd-timeline-box::before {
    inset-inline-start: -22px;
    border-color: transparent var(--color-border) transparent transparent;
  }
  .bd-timeline-launch .bd-timeline-box::after,
  .bd-timeline-launch .bd-timeline-box::before {
    inset-inline-start: 30px;
    margin-inline-start: 0;
  }
}
.success {
  background: #29DA82 !important;
}

#bdTimeline .bd-timeline-item-4:after,
#bdTimeline .bd-timeline-item-4:before {
  content: "";
  display: block;
  width: 100%;
  clear: both;
}

#bdTimeline {
  width: 100%;
  margin: 30px auto;
  position: relative;
  padding: 0 20px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

#bdTimeline:before {
  content: "";
  width: 3px;
  height: 100%;
  background: var(--color-primary);
  inset-inline-start: 50%;
  top: 0;
  position: absolute;
}

#bdTimeline:after {
  content: "";
  clear: both;
  display: table;
  width: 100%;
}

#bdTimeline .bd-timeline-item-4 {
  margin-bottom: 50px;
  position: relative;
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-icon-4 {
  background: var(--color-primary);
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  overflow: hidden;
  margin-inline-start: -23px;
  border-radius: 50%;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-icon-4 svg,
#bdTimeline .bd-timeline-item-4 .bd-timeline-icon-4 i {
  font-size: 24px;
  color: var(--color-white);
}
[data-theme-mode=dark] #bdTimeline .bd-timeline-item-4 .bd-timeline-icon-4 svg,
[data-theme-mode=dark] #bdTimeline .bd-timeline-item-4 .bd-timeline-icon-4 i {
  color: var(--color-black);
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-content-4 {
  width: 45%;
  background: var(--color-card-bg);
  padding: 20px;
  border-radius: 5px;
  transition: all 0.3s ease;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
[data-theme-mode=dark] #bdTimeline .bd-timeline-item-4 .bd-timeline-content-4 {
  box-shadow: rgba(75, 75, 75, 0.2) 0px 8px 24px;
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-content-4 h2 {
  padding: 15px;
  background: var(--color-primary);
  color: var(--color-white);
  margin: -20px -20px 0 -20px;
  font-weight: 300;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  -ms-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  font-size: 22px;
}
[data-theme-mode=dark] #bdTimeline .bd-timeline-item-4 .bd-timeline-content-4 h2 {
  color: var(--color-black);
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-content-4 p {
  padding-top: 10px;
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-content-4:before {
  content: "";
  position: absolute;
  inset-inline-start: 45%;
  top: 20px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-inline-start: 7px solid var(--color-primary);
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-content-4.right {
  float: right;
}
[dir=rtl] #bdTimeline .bd-timeline-item-4 .bd-timeline-content-4.right {
  float: left;
}

#bdTimeline .bd-timeline-item-4 .bd-timeline-content-4.right:before {
  content: "";
  inset-inline-end: 45%;
  inset-inline-start: inherit;
  border-inline-start: 0;
  border-inline-end: 7px solid var(--color-primary);
}

@media screen and (max-width: 768px) {
  #bdTimeline {
    margin: 30px;
    padding: 0px;
    width: 90%;
  }
  #bdTimeline:before {
    inset-inline-start: 0;
  }
  #bdTimeline .bd-timeline-item-4 .bd-timeline-content-4 {
    width: 90%;
    float: right;
  }
  [dir=rtl] #bdTimeline .bd-timeline-item-4 .bd-timeline-content-4 {
    float: left;
  }
  #bdTimeline .bd-timeline-item-4 .bd-timeline-content-4:before,
  #bdTimeline .bd-timeline-item-4 .bd-timeline-content-4.right:before {
    inset-inline-start: 10%;
    margin-inline-start: -6px;
    border-inline-start: 0;
    border-inline-end: 7px solid var(--color-primary);
  }
  #bdTimeline .bd-timeline-item-4 .bd-timeline-icon-4 {
    inset-inline-start: 0;
  }
}
/* Animation CSS */
/* icon animation */
.bd-timeline-icon-4.is-hidden {
  visibility: hidden;
}

.bd-timeline-icon-4.animate-it {
  visibility: visible;
  -webkit-animation: bounce-1 0.6s;
  -moz-animation: bounce-1 0.6s;
  animation: bounce-1 0.6s;
}

/* content block animation */
.bd-timeline-content-4.is-hidden {
  visibility: hidden;
}

.bd-timeline-content-4.animate-it {
  visibility: visible;
  -webkit-animation: bounce-2 0.6s;
  -moz-animation: bounce-2 0.6s;
  animation: bounce-2 0.6s;
}

@media only screen and (min-width: 769px) {
  /* Inverse bounce effect on even content blocks */
  .bd-timeline-content-4.right.animate-it {
    -webkit-animation: bounce-2-inverse 0.6s;
    -moz-animation: bounce-2-inverse 0.6s;
    animation: bounce-2-inverse 0.6s;
  }
}
@media only screen and (max-width: 768px) {
  /* Inverse bounce effect on all content blocks */
  .bd-timeline-content-4.animate-it,
  .bd-timeline-content-4.right.animate-it {
    animation: bounce-2-inverse 0.6s;
  }
}
/* ALL animation types called */
@-webkit-keyframes bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes bounce-1 {
  0% {
    opacity: 0;
    -moz-transform: scale(0.5);
  }
  60% {
    opacity: 1;
    -moz-transform: scale(1.2);
  }
  100% {
    -moz-transform: scale(1);
  }
}
@keyframes bounce-1 {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  60% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bounce-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes bounce-2 {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100px);
  }
  60% {
    opacity: 1;
    -moz-transform: translateX(20px);
  }
  100% {
    -moz-transform: translateX(0);
  }
}
@keyframes bounce-2 {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  60% {
    opacity: 1;
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}
@-webkit-keyframes bounce-2-inverse {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes bounce-2-inverse {
  0% {
    opacity: 0;
    -moz-transform: translateX(100px);
  }
  60% {
    opacity: 1;
    -moz-transform: translateX(-20px);
  }
  100% {
    -moz-transform: translateX(0);
  }
}
@keyframes bounce-2-inverse {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  60% {
    opacity: 1;
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(0);
  }
}
/*----------------------------------------*/
/*  timeline end
/*----------------------------------------*/
/*----------------------------------------*/
/*  2.24 tooltip
/*----------------------------------------*/
.bd-tooltip-show {
  position: relative;
}
.bd-tooltip-show:hover .bd-tooltip {
  visibility: visible;
  opacity: 1;
  bottom: 45px;
}
.bd-tooltip-show:hover .bd-tooltip.bottom {
  bottom: auto;
  top: 45px;
}

.bd-tooltip {
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  font-size: 12px;
  color: var(--color-white);
  background-color: var(--color-primary);
  padding: 5px 8px 5px 8px;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  transition: all 0.3s linear;
  width: max-content;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flexbox;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 6px;
}
.bd-tooltip::before {
  position: absolute;
  content: "";
  inset-inline-start: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid var(--color-primary);
  border-inline-start: 8px solid transparent;
  border-inline-end: 8px solid transparent;
}
.bd-tooltip.bottom {
  top: 100%;
  bottom: auto;
}
.bd-tooltip.bottom::before {
  top: -8px;
  bottom: auto;
  border-bottom: 8px solid var(--color-primary);
  border-top: none;
}

.tooltip {
  border-radius: 6px;
  z-index: 1080;
  display: block;
  font-style: normal;
  font-weight: var(--fw-normal);
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: 14px;
  word-wrap: break-word;
  opacity: 0;
  color: var(--color-white);
  background-color: var(--color-primary);
}

.tooltip.show {
  opacity: 1;
}

.tooltip .tooltip-arrow {
  display: block;
  width: 10px;
  height: 8px;
}

.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.tooltip-inner {
  width: max-content;
  padding: 4px 8px 5px 8px;
  border-radius: 6px;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-primary);
}
[data-theme-mode=dark] .tooltip-inner {
  color: var(--color-black);
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,
.bs-tooltip-top .tooltip-arrow {
  bottom: -8px;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  top: -1px;
  border-width: 8px 5px 0;
  border-top-color: var(--color-primary);
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow,
.bs-tooltip-end .tooltip-arrow {
  inset-inline-start: -8px;
  width: 8px;
  height: 10px;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before {
  inset-inline-end: -1px;
  border-width: 5px 8px 5px 0;
  border-inline-end-color: var(--color-primary);
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow,
.bs-tooltip-bottom .tooltip-arrow {
  top: -8px;
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 5px 8px;
  border-bottom-color: var(--color-primary);
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow,
.bs-tooltip-start .tooltip-arrow {
  inset-inline-end: -8px;
  width: 8px;
  height: 10px;
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before {
  inset-inline-start: -1px;
  border-width: 5px 0 5px 8px;
  border-inline-start-color: var(--color-primary);
}

/*----------------------------------------*/
/*  tooltip end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.1 Announcement css
/*----------------------------------------*/
.announcement-list {
  height: 331px;
  margin-bottom: 15px;
}
.announcement-list.style-2 {
  height: 373px;
}
.announcement-item {
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--color-border);
}
.announcement-content {
  flex: 1;
}

/*----------------------------------------*/
/*  announcement css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.2 app footer css
/*----------------------------------------*/
.app-footer-area {
  background-color: var(--color-card-bg);
  padding: 15px 0px;
  width: 100%;
  text-align: center;
  transition: all 0.3s ease-in-out;
  z-index: 10;
  padding-inline-start: 280px;
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .app-footer-area {
    padding-inline-start: 0;
  }
}
@media (max-width:450px) {
  .app-footer-area {
    padding: 15px 15px;
  }
}

/*----------------------------------------*/
/*  app footer css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.3 app header css
/*----------------------------------------*/
.app-content-area {
  padding-inline-start: 260px;
  min-height: calc(100vh - 146px);
  margin-top: 93px;
  transition: all 0.3s ease-in-out;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .app-content-area {
    padding-inline-start: 0;
  }
}
@media (max-width: 575px) {
  .app-content-area {
    padding-inline-start: 0;
    margin-top: 90px;
  }
}
.app-content-wrap {
  width: 100%;
  padding: 0px 15px;
}
@media (max-width:450px) {
  .app-content-wrap {
    padding: 0px 5px;
  }
}

.app-header-area {
  background-color: var(--color-card-bg);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
  position: fixed;
  transition: all 0.3s ease-in-out;
  top: 0;
  z-index: 19;
  width: 100%;
  padding-inline-start: 260px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .app-header-area {
    padding-inline-start: 0px;
  }
}
[data-theme-mode=dark] .app-header-area {
  box-shadow: 0px 1px 2px rgba(255, 255, 255, 0.24), 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.app-header-inner {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 25px;
  padding: 0 25px;
  height: 70px;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 575px) {
  .app-header-inner {
    height: 60px;
  }
}
@media (max-width:450px) {
  .app-header-inner {
    gap: 0 15px;
    padding: 0 15px;
  }
}
.app-header-left {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 0 15px;
}
.app-header-right {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 0 15px;
}
@media (max-width:450px) {
  .app-header-right {
    gap: 0 10px;
  }
}
.app-header-search {
  position: relative;
}
.app-header-search input {
  width: 100%;
  min-width: 300px;
  height: 36px;
  line-height: 36px;
  padding: 0 10px;
}
.app-header-search button {
  position: absolute;
  top: 50%;
  inset-inline-end: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--color-primary);
}
.app-header-search-modal {
  display: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .app-header-search-modal {
    display: block;
  }
}
.app-header-ls-logo {
  display: none;
  width: 180px;
  max-width: 180px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .app-header-ls-logo {
    display: block;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .app-header-ls-logo {
    display: block;
    max-width: 150px;
    width: 150px;
  }
}
[data-theme-mode=dark] .app-header-ls-dark-logo {
  display: none;
}
.app-header-ls-light-logo {
  display: none;
}
[data-theme-mode=dark] .app-header-ls-light-logo {
  display: block;
}
.app-header-mobile-logo {
  width: 35px;
  display: none;
}
@media (max-width: 575px) {
  .app-header-mobile-logo {
    display: block;
  }
}
.app-header-mobile-logo img {
  width: 35px;
  height: 35px;
}
[data-theme-mode=dark] .app-header-dark-logo {
  display: none;
}
.app-header-light-logo {
  display: none;
}
[data-theme-mode=dark] .app-header-light-logo {
  display: block;
}
.app-header-user .dropdown-toggle::after {
  display: none;
}
.app-header-user .dropdown-menu {
  background-color: var(--color-white);
  box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
  color: var(--color-black);
  padding: 15px;
  width: 220px;
}
[data-theme-mode=dark] .app-header-user .dropdown-menu {
  color: var(--color-black);
}
.app-header-user .dropdown-menu.show {
  top: 15px !important;
}
.app-header-link .dropdown-toggle::after {
  display: none;
}
.app-header-link .dropdown-menu {
  box-shadow: none;
  border: none;
  padding: 0;
  width: 150px;
}
.app-header-link .dropdown-menu.show {
  top: 15px !important;
}
.app-header-link .dropdown-menu .dropdown-lang {
  font-size: 16px;
  font-weight: 400;
  padding: 8px 14px;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 0 10px;
  background-color: var(--gray-2);
  border-bottom: 1px solid var(--color-border);
  transition: all 0.3s ease-in-out;
  color: var(--color-black);
}
.app-header-link .dropdown-menu .dropdown-lang:hover {
  background-color: var(--gray-3);
}
.app-header-link .dropdown-menu .dropdown-lang img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
}
.app-header-circle {
  width: 36px;
  height: 36px;
  color: var(--color-heading);
  background-color: var(--gray-3);
  border-radius: 100%;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
@media (max-width:450px) {
  .app-header-circle {
    width: 26px;
    height: 26px;
    font-size: 16px;
  }
}
.app-header-notification .dropdown-toggle::after {
  display: none;
}
.app-header-notification .dropdown-menu {
  box-shadow: none;
  border: none;
  padding: 0;
  width: 350px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
  background-color: var(--color-body-bg);
}
.app-header-notification .dropdown-menu.show {
  position: absolute !important;
  top: 15px !important;
}
.app-header-notification .dropdown-menu-header {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid var(--color-border);
}
.app-header-notification .dropdown-notifications-list {
  height: 380px;
  overflow: hidden;
  overflow-y: scroll;
}
.app-header-notification .dropdown-notifications-list-item {
  list-style: none;
  padding: 10px 15px;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-shrink: 0;
  flex-grow: 1;
  gap: 15px;
  border-bottom: 1px solid var(--color-border);
}
.app-header-notification .dropdown-notifications-list-item:hover .dropdown-notifications-archive {
  opacity: 1;
  visibility: visible;
}
.app-header-notification .dropdown-notifications-archive {
  font-size: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
.app-header-notification .dropdown-notifications-btn {
  padding: 10px 15px;
}

.sidebar-menu-bar {
  width: 20px;
  height: 18px;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
}
.sidebar-menu-bar span {
  width: 100%;
  height: 2px;
  background: var(--color-heading);
  display: inline-block;
}
.sidebar-menu-bar span:nth-child(2) {
  margin-inline-start: -10px;
  transition: all 0.3s ease-in-out;
}
.sidebar-menu-bar:hover span:nth-child(2) {
  margin-inline-start: 0;
}

.app-sidebar.collapsed ~ .app-header {
  inset-inline-start: 0;
  width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .app-offcanvas-overlay.overlay-open {
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0px;
    inset-inline-start: 0px;
    inset-inline-end: 0px;
    bottom: 0px;
    z-index: 30;
  }
}

.app-sidebar.collapsed ~ .app-header-area {
  padding-inline-start: 0px;
}

.app-sidebar.collapsed ~ .app-footer-area {
  padding-inline-start: 0px;
}

.app-sidebar.collapsed ~ .app-content-area {
  margin-inline-start: -260px;
}

/* Header author css start */
.author {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;
  position: relative;
  gap: 0 10px;
}
.author-thumb {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 100%;
}
@media (max-width:450px) {
  .author-thumb {
    width: 26px;
    height: 26px;
    min-width: 26px;
  }
}
.author-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .author-name {
    display: none;
  }
}

.bd-user-info-list {
  font-size: 16px;
  color: var(--color-black);
  transition: all 0.3s ease-in-out;
  font-weight: var(--fw-regular);
}
[data-theme-mode=dark] .bd-user-info-list {
  color: var(--color-white);
}
.bd-user-info-list:not(:last-child) {
  margin-bottom: 5px;
}
.bd-user-info-list i {
  margin-inline-end: 12px;
}
.bd-user-info-list:hover {
  color: var(--color-primary);
}

/*----------------------------------------*/
/*  app header css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.4 app header css
/*----------------------------------------*/
[data-theme-mode=dark] .app-sidebar-dark-logo {
  display: none;
}

.app-sidebar-light-logo {
  display: none;
}
[data-theme-mode=dark] .app-sidebar-light-logo {
  display: block;
}

.app-sidebar {
  width: 260px;
  height: 100%;
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 103;
  transition: all 0.3s ease-in-out;
}
.app-sidebar-wrapper {
  margin-block-start: 70px;
  height: 100vh;
  position: relative;
  overflow: auto;
  background-color: var(--color-white);
  padding-bottom: 80px !important;
  border-inline-end: 1px solid var(--color-border);
  padding: 0 12px;
}
[data-theme-mode=dark] .app-sidebar-wrapper {
  background-color: var(--color-card-bg);
}
@media (max-width: 575px) {
  .app-sidebar-wrapper {
    margin-block-start: 0px;
  }
}
.app-sidebar-header {
  height: 71px;
  width: 260px;
  position: fixed;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background-color: var(--color-white);
  z-index: 9;
  align-items: center;
  justify-content: start;
  padding: 15px 20px;
  transition: all 0.05s ease;
  border-bottom: 1px solid var(--color-border);
  border-inline-end: 1px solid var(--color-border);
}
[data-theme-mode=dark] .app-sidebar-header {
  background-color: var(--color-card-bg);
}
@media (max-width: 575px) {
  .app-sidebar-header {
    display: none;
  }
}
[data-theme-mode=dark] .app-sidebar-header .desktop-logo {
  display: none;
}
.app-sidebar-header .desktop-dark {
  display: none;
}
[data-theme-mode=dark] .app-sidebar-header .desktop-dark {
  display: block;
}
.app-sidebar .sidebar-menu.child1 .sidebar-menu-item:hover,
.app-sidebar .sidebar-menu.child2 .sidebar-menu-item:hover,
.app-sidebar .sidebar-menu.child3 .sidebar-menu-item:hover {
  color: var(--color-primary);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu.child1 .sidebar-menu-item:hover,
[data-theme-mode=dark] .app-sidebar .sidebar-menu.child2 .sidebar-menu-item:hover,
[data-theme-mode=dark] .app-sidebar .sidebar-menu.child3 .sidebar-menu-item:hover {
  color: var(--color-black);
}
.app-sidebar .sidebar-menu-category {
  color: var(--color-light);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 20px;
  white-space: nowrap;
  position: relative;
}
.app-sidebar .sidebar-menu-item {
  padding: 10px 15px;
  position: relative;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 14px;
  color: var(--color-menu);
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  border-radius: 4px;
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item {
  color: var(--color-heading);
}
.app-sidebar .sidebar-menu-item.active {
  color: var(--color-primary);
  background-color: var(--primary-rgba-1);
}
.app-sidebar .sidebar-menu-item.active .sidebar-menu-label,
.app-sidebar .sidebar-menu-item.active .side-menu-angle {
  color: var(--color-primary);
}
.app-sidebar .sidebar-menu-item.active .side-menu-icon {
  color: var(--color-primary);
}
.app-sidebar .sidebar-menu-item.active .side-menu-icon svg * {
  fill: var(--color-primary);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item.active {
  color: var(--color-black);
  background-color: var(--primary-rgba-2);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item.active .sidebar-menu-label,
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item.active .side-menu-angle {
  color: var(--color-black);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item.active .side-menu-icon {
  color: var(--color-black);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item.active .side-menu-icon svg * {
  fill: var(--color-black);
}
.app-sidebar .sidebar-menu-item:hover {
  color: var(--color-primary);
  background-color: var(--primary-rgba-1);
}
.app-sidebar .sidebar-menu-item:hover .sidebar-menu-label,
.app-sidebar .sidebar-menu-item:hover .side-menu-angle {
  color: var(--color-primary);
}
.app-sidebar .sidebar-menu-item:hover .side-menu-icon {
  color: var(--color-primary);
}
.app-sidebar .sidebar-menu-item:hover .side-menu-icon svg * {
  fill: var(--color-primary);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item:hover {
  color: var(--color-black);
  background-color: var(--primary-rgba-2);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item:hover .sidebar-menu-label,
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item:hover .side-menu-angle {
  color: var(--color-black);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item:hover .side-menu-icon {
  color: var(--color-black);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-item:hover .side-menu-icon svg * {
  fill: var(--color-black);
}
.app-sidebar .sidebar-menu.child1 .sidebar-menu-item, .app-sidebar .sidebar-menu.child2 .sidebar-menu-item, .app-sidebar .sidebar-menu.child3 .sidebar-menu-item {
  background-color: transparent !important;
}
.app-sidebar .sidebar-menu.child1 .sidebar-menu-item.active, .app-sidebar .sidebar-menu.child2 .sidebar-menu-item.active, .app-sidebar .sidebar-menu.child3 .sidebar-menu-item.active {
  background-color: transparent !important;
  color: var(--color-primary);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu.child1 .sidebar-menu-item.active, [data-theme-mode=dark] .app-sidebar .sidebar-menu.child2 .sidebar-menu-item.active, [data-theme-mode=dark] .app-sidebar .sidebar-menu.child3 .sidebar-menu-item.active {
  color: var(--color-black);
}
.app-sidebar .sidebar-menu.child1 .sidebar-menu-item.active .side-menu-angle, .app-sidebar .sidebar-menu.child2 .sidebar-menu-item.active .side-menu-angle, .app-sidebar .sidebar-menu.child3 .sidebar-menu-item.active .side-menu-angle {
  color: var(--color-primary);
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu.child1 .sidebar-menu-item.active .side-menu-angle, [data-theme-mode=dark] .app-sidebar .sidebar-menu.child2 .sidebar-menu-item.active .side-menu-angle, [data-theme-mode=dark] .app-sidebar .sidebar-menu.child3 .sidebar-menu-item.active .side-menu-angle {
  color: var(--color-black);
}
.app-sidebar .sidebar-menu {
  padding: 0;
}
.app-sidebar .sidebar-menu.child1 .sidebar-menu-item, .app-sidebar .sidebar-menu.child2 .sidebar-menu-item, .app-sidebar .sidebar-menu.child3 .sidebar-menu-item {
  padding: 7px 15px;
}
.app-sidebar .sidebar-menu.child1 .sidebar-menu-item:before, .app-sidebar .sidebar-menu.child2 .sidebar-menu-item:before, .app-sidebar .sidebar-menu.child3 .sidebar-menu-item:before {
  position: absolute;
  content: "\f5dc";
  font-family: var(--ff-remixicon);
  font-size: 12px;
  inset-inline-start: -10px;
  opacity: 0.8;
}
[dir=rtl] .app-sidebar .sidebar-menu.child1 .sidebar-menu-item:before, [dir=rtl] .app-sidebar .sidebar-menu.child2 .sidebar-menu-item:before, [dir=rtl] .app-sidebar .sidebar-menu.child3 .sidebar-menu-item:before {
  content: "\f5d5";
}
.app-sidebar .sidebar-menu.child1 li, .app-sidebar .sidebar-menu.child2 li, .app-sidebar .sidebar-menu.child3 li {
  padding: 0;
  position: relative;
}
.app-sidebar .sidebar-menu.child1 li {
  padding-inline-start: 30px;
}
.app-sidebar .sidebar-menu.child2 li {
  padding-inline-start: 20px;
}
.app-sidebar .sidebar-menu.child3 li {
  padding-inline-start: 25px;
}
.app-sidebar .sidebar-menu-label {
  white-space: nowrap;
  position: relative;
  font-size: 14px;
  color: var(--color-menu);
  font-weight: var(--fw-regular);
  line-height: 1;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  text-transform: capitalize;
}
[data-theme-mode=dark] .app-sidebar .sidebar-menu-label {
  color: var(--color-heading);
}
.app-sidebar .side-menu-icon {
  margin-inline-end: 10px;
  line-height: 0;
  font-size: 14px;
  text-align: center;
  color: var(--color-primary);
  border-radius: 4px;
  line-height: 1;
}
.app-sidebar .side-menu-icon svg {
  width: 18px;
  height: 18px;
}
.app-sidebar .side-menu-icon svg * {
  fill: var(--color-menu);
  transition: all 0.3s ease-in-out;
}
[data-theme-mode=dark] .app-sidebar .side-menu-icon svg * {
  fill: var(--color-heading);
}
.app-sidebar .side-menu-angle {
  transform-origin: center;
  position: absolute;
  inset-inline-end: 10px;
  line-height: 1;
  font-size: 20px;
  color: var(--color-primary);
  transition: all 0.05s ease;
  opacity: 0.8;
}
[data-theme-mode=dark] .app-sidebar .side-menu-angle {
  color: var(--color-heading);
}
.app-sidebar.collapsed {
  inset-inline-start: -260px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .app-sidebar {
    inset-inline-start: -300px;
  }
}

.slide.has-sub .sidebar-menu {
  transform: translate(0, 0) !important;
  visibility: visible !important;
}

.nav ul li {
  list-style-type: none;
}

.nav > ul {
  padding-inline-start: 0px;
}

.sidebar-menu {
  display: none;
}

.slide.has-sub {
  display: grid;
}
.slide.has-sub.open > .sidebar-menu-item .side-menu-angle {
  transform: rotate(180deg);
}

@media (max-width: 991.98px) {
  .app-sidebar-main-menu {
    margin: 0 !important;
  }
}
.sidebar-left,
.sidebar-right {
  display: none;
}

.app-sidebar-main-menu > .slide.active .sidebar-menu .sidebar-menu-item:hover .side-menu-angle, .app-sidebar-main-menu > .slide:hover .sidebar-menu .sidebar-menu-item:hover .side-menu-angle {
  color: var(--color-primary);
}
[data-theme-mode=dark] .app-sidebar-main-menu > .slide.active .sidebar-menu .sidebar-menu-item:hover .side-menu-angle, [data-theme-mode=dark] .app-sidebar-main-menu > .slide:hover .sidebar-menu .sidebar-menu-item:hover .side-menu-angle {
  color: var(--color-black);
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .close_sidebar.app-sidebar {
    inset-inline-start: 0px;
  }
}

/*----------------------------------------*/
/*  app header css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.5 authentication css
/*----------------------------------------*/
.authentication-wrapper {
  display: flex;
  flex-basis: 100%;
  min-height: 100vh;
  width: 100%;
}
.authentication-wrapper.basic-authentication {
  align-items: center;
  justify-content: center;
}
.authentication-wrapper.cover-authentication {
  align-items: flex-start;
}
.authentication-wrapper.cover-authentication .authentication-inner {
  width: 100%;
  height: 100%;
  margin: auto 0;
}
.authentication-wrapper.cover-authentication .authentication-inner .authentication-image {
  width: 100%;
  height: 100vh;
  height: calc(100vh - 4rem);
  position: relative;
}
.authentication-wrapper.cover-authentication .authentication-inner .authentication-image::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 35%;
  inset-inline-start: 0;
  inset-block-end: -20px;
  background-color: var(--gray-4);
  z-index: -1;
  border-radius: 500px 300px 150px 0px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .authentication-wrapper.cover-authentication .authentication-inner .authentication-image::before {
    border-radius: 150px 150px 150px 0px;
  }
}

.authentication-inner .card {
  width: 400px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .authentication-inner .card {
    width: 400px;
    margin: 0 auto;
  }
}
@media (max-width:450px) {
  .authentication-inner .card {
    width: 95%;
  }
}

.authentication-logo {
  text-align: center;
  display: inline-block;
  margin-bottom: 15px;
}
.authentication-logo img {
  max-width: 160px;
}
.authentication-logo.logo-white img {
  display: none;
}
[data-theme-mode=dark] .authentication-logo.logo-white img {
  display: block;
}
[data-theme-mode=dark] .authentication-logo.logo-black img {
  display: none;
}

.coming-soon-form {
  text-align: center;
  display: flex;
  align-content: center;
  justify-content: center;
  gap: 0 10px;
}
@media (max-width: 575px) {
  .coming-soon-form {
    flex-wrap: wrap;
  }
  .coming-soon-form button {
    width: 100%;
    margin-top: 10px;
  }
}
.coming-soon-form .form-control {
  width: 360px;
}

.countdown {
  margin-bottom: 30px;
}
.countdown-title {
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 30px;
  color: var(--color-black);
}
@media (max-width: 575px) {
  .countdown-title {
    font-size: 20px;
    margin-bottom: 15px;
  }
}
.countdown span {
  font-size: 50px;
  font-weight: 500;
  color: var(--color-primary);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .countdown span {
    font-size: 30px;
  }
}

.coming-soon .card {
  width: 100%;
}

.divider-wrapper {
  display: flex;
  position: relative;
  align-items: center;
  margin-top: 15px;
  margin-bottom: 15px;
}
.divider-line {
  position: relative;
  background-image: linear-gradient(90deg, #46494D, rgba(33, 38, 45, 0));
  width: 100%;
  height: 1px;
  inset-inline-start: 0%;
  top: 0%;
  inset-inline-end: 0%;
  bottom: auto;
}
.divider-line.left-line {
  background-image: linear-gradient(-90deg, #46494D, rgba(33, 38, 45, 0));
}
.divider-title {
  position: relative;
  padding: 0 15px;
  text-align: center;
  font-size: 16px;
  color: var(--color-black);
}

.countdown-timer div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 80px;
  height: 80px;
  background-color: var(--color-white);
  box-shadow: var(--shadow);
  border-radius: 4px;
}
.countdown-timer div .time {
  font-size: 26px;
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}
.countdown-timer div span {
  font-size: 18px;
  color: var(--color-body);
}

.authentication-error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
}

/*----------------------------------------*/
/*  authentication css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.6 card css
/*----------------------------------------*/
.card {
  background-color: var(--color-card-bg);
  padding: 25px 25px !important;
  box-shadow: var(--shadow) !important;
  border-radius: 6px !important;
  position: relative !important;
  margin-bottom: 25px !important;
  border: none !important;
}
.card.custom-card {
  box-shadow: none !important;
}
.card.custom-card.bg-1 {
  background: linear-gradient(270deg, var(--primary-rgba-15) 33.18%, rgba(255, 255, 255, 0.15) 100%);
  border: 1px solid var(--color-primary) !important;
}
.card.custom-card.bg-2 {
  background: linear-gradient(270deg, var(--warning-rgba-15) 33.18%, rgba(255, 255, 255, 0.15) 100%);
  border: 1px solid var(--color-warning) !important;
}
.card.custom-card.bg-3 {
  background: linear-gradient(270deg, var(--danger-rgba-15) 33.18%, rgba(255, 255, 255, 0.15) 100%);
  border: 1px solid var(--color-danger) !important;
}
.card.custom-card.bg-4 {
  background: linear-gradient(270deg, var(--success-rgba-15) 33.18%, rgba(255, 255, 255, 0.15) 100%);
  border: 1px solid var(--color-success) !important;
}
.card.custom-card .card-shape {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
}
[dir=rtl] .card.custom-card .card-shape {
  transform: rotate(-90deg);
}
.card.custom-card .card-icon {
  padding: 10px 20px;
  border: 1px solid var(--white-3);
  border-radius: 4px;
}

.p-0 {
  padding: 0 0 !important;
}

.card-header {
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 15px !important;
  border-bottom: 1px solid var(--color-border) !important;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center !important;
  position: relative !important;
  flex-wrap: wrap !important;
  gap: 25px !important;
  background-color: transparent;
}
.card-header.border-0 {
  border: 0 !important;
}

.card-title {
  color: var(--color-heading);
  margin-bottom: 0;
}

.card-body {
  padding: 0 0;
  color: var(--color-body);
}

.card-content {
  color: var(--color-body);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .card-column {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 25px;
    overflow: hidden;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .mini-card-body {
    flex-direction: column;
    align-items: start;
  }
  .mini-card-body .avatar.avatar-xl {
    height: 50px;
    width: 50px;
    min-width: 50px;
  }
  .mini-card-body .avatar.avatar-xl .fs-42 {
    font-size: 30px;
  }
}

.card-footer {
  border-radius: 0 !important;
  padding: 0 !important;
  border-top: none !important;
  background-color: transparent !important;
}
.card-footer p {
  color: var(--color-text-muted);
}
.card-footer a {
  color: var(--color-primary);
}

.card-dropdown-icon {
  font-size: 15px;
  width: 36px;
  height: 36px;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flexbox;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  color: var(--color-body);
  background-color: var(--gray-2);
  transition: all 0.3s ease-in-out;
}
[data-theme-mode=dark] .card-dropdown-icon {
  background-color: var(--gray-5);
}
.card-dropdown-icon:hover {
  background-color: var(--gray-3);
}
.card-dropdown-icon.show {
  background-color: var(--gray-3);
}
.card-dropdown .dropdown-menu {
  background-color: var(--color-white);
  border: none;
  box-shadow: var(--shadow);
  color: var(--color-black);
  padding: 0 0;
  max-width: fit-content;
  z-index: 99;
}
.card-dropdown .dropdown-menu .dropdown-item {
  padding: 8px 15px;
  border-radius: 0;
  font-size: 14px;
  font-weight: var(--fw-medium);
  transition: all 0.3s ease-in-out;
}
.card-dropdown .dropdown-menu .dropdown-item:hover {
  background-color: var(--primary-rgba-15);
  color: var(--color-primary);
}
.card-dropdown .dropdown-menu .dropdown-item.active {
  background-color: var(--primary-rgba-15);
  color: var(--color-primary);
}
.card-dropdown-box {
  font-size: 13px;
  font-weight: var(--fw-medium);
  padding: 7.8px 20px;
  color: var(--color-body);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease-in-out;
}
.card-dropdown-box:hover {
  background-color: var(--gray-3);
  border-color: var(--gray-3);
}
.card-dropdown-box ~ .dropdown-menu.show {
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
}
.card-dropdown-box.square {
  width: 36px;
  height: 36px;
  padding: initial;
  justify-content: center;
}
.card-dropdown-box.square.small {
  width: 26px;
  height: 26px;
}

.card-carousel {
  background-color: var(--color-card-bg);
  box-shadow: var(--shadow);
  border-radius: 6px;
}

.card-slide-wrapper {
  border-radius: 6px;
}
.card-slide-top {
  position: absolute;
  top: 20px;
  inset-inline-start: 20px;
  z-index: 2;
}
.card-slide-thumb {
  position: relative;
  width: 100%;
  height: 484px;
  border-radius: 6px;
  padding: 80px 50px;
}
.card-slide-thumb::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 90px;
  inset-inline-start: 0px;
  bottom: 0px;
  border-radius: 0px 0px 6px 6px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: 6px;
}
.card-slide-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background-color: var(--color-card-bg);
}
.card-slide-bottom {
  position: absolute;
  bottom: 20px;
  inset-inline-start: 20px;
}
.card-slide-pagination.tranding {
  position: absolute;
  z-index: 1;
  inset-inline-end: 20px;
  bottom: 20px;
}

.card-img,
.card-img-top,
.card-video iframe {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.list-group-item {
  color: var(--color-black);
  border: var(--bs-list-group-border-width) solid var(--color-border);
  padding: 12px 16px;
  background-color: transparent !important;
}
.list-group-item .handle {
  font-size: 20px;
  cursor: pointer;
}

.list-group-item.active {
  z-index: 2;
  color: var(--color-black);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
[data-theme-mode=dark] .list-group-item.active {
  color: var(--color-black);
}

.trendingProduct {
  border-radius: 6px;
}

.page-title-box {
  padding: 10px 16px;
  background-color: var(--color-card-bg);
  box-shadow: var(--shadow) !important;
  margin-bottom: 25px;
  border-radius: 6px;
}

.lead-card {
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.lead-card .call-details {
  padding: 15px 15px;
  color: var(--color-body);
  background-color: var(--gray-1);
  border-radius: 6px;
}

/* Email Card Base Styles */
.email-body {
  padding: 15px 15px;
  background-color: var(--gray-1);
  border-radius: 6px;
}
.email-body .email-content p {
  margin-bottom: 15px;
}
.email-body .email-highlight,
.email-body .email-cta,
.email-body .meeting-details {
  background: var(--gray-1);
  border-inline-start: 3px solid var(--color-info);
  padding: 12px 15px;
  margin: 15px 0;
  border-radius: 6px;
}
[data-theme-mode=dark] .email-body .email-highlight,
[data-theme-mode=dark] .email-body .email-cta,
[data-theme-mode=dark] .email-body .meeting-details {
  background: var(--gray-5);
  color: var(--custom-white);
}
.email-body .email-cta {
  border-inline-start-color: var(--color-success);
}
.email-body .meeting-details {
  border-inline-start-color: var(--color-teal);
}
.email-body .attachment-tag {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Task Card */
.task-card {
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.task-card.overdue {
  border-inline-start: 3px solid var(--color-danger);
}
.task-card.completed {
  opacity: 0.8;
  background: var(--gray-1);
}
.task-card .checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}
.task-card .checklist-item.completed {
  color: #6b7280;
  text-decoration: line-through;
}
.task-card .document-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--gray-1);
  border-radius: 6px;
}
[data-theme-mode=dark] .task-card .document-preview {
  background: var(--gray-5);
  color: var(--custom-white);
}

/* File Card */
.file-card {
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.task-list {
  height: 372px;
}

.task-item {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
}

.exp-timeline-item {
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  align-items: start;
  gap: 15px;
}
.exp-timeline-item .job-description {
  margin-bottom: 15px;
}

.edu-timeline-item {
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.edu-timeline-item .edu-timeline-date {
  min-width: 85px;
}

.info-label {
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.info-value {
  color: var(--color-heading);
  text-align: end;
  font-weight: var(--fw-medium);
}

.account-number {
  letter-spacing: 1px;
}
.account-number .btn-eye {
  background: transparent;
  border: none;
  color: #6c757d;
  padding: 0;
  font-size: 16px;
  cursor: pointer;
}
.account-number .btn-eye:hover {
  color: #0d6efd;
}

.paypal-card .paypal-header {
  background: var(--color-info);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;
  margin-bottom: 10px;
}
.paypal-card .paypal-logo {
  height: 25px;
  width: auto;
}
.paypal-card .paypal-badge {
  background: var(--color-white);
  color: var(--color-info);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
}
.paypal-card .paypal-item {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
}
.paypal-card .paypal-label {
  color: var(--color-body);
  font-size: 14px;
}
.paypal-card .paypal-value {
  color: var(--color-heading);
  text-align: end;
  font-weight: var(--fw-medium);
}
.paypal-card .paypal-footer {
  background: var(--gray-2);
  padding: 6px 15px;
  text-align: center;
  color: var(--color-body);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 4px;
}
.paypal-card .paypal-footer i {
  font-size: 16px;
  color: var(--color-success);
}

.login-access .info-group {
  margin-bottom: 10px;
}
.login-access .ip-address {
  color: var(--color-text-muted);
  font-size: 13px;
}
.login-access .password-display {
  letter-spacing: 2px;
}
.login-access .icon-btn {
  background: none;
  border: none;
  color: var(--color-light);
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 4px;
  transition: all 0.2s;
}
.login-access .icon-btn:hover {
  background: var(--gray-3);
  color: var(--color-primary);
}
.login-access .info-value {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-access .info-value span {
  color: var(--color-heading);
}
.login-access .access-footer {
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
}
.login-access .security-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--color-body);
}
.login-access .meter-bar {
  flex: 1;
  height: 6px;
  background: var(--gray-3);
  border-radius: 3px;
  overflow: hidden;
}
.login-access .meter-fill {
  height: 100%;
}
.login-access .meter-fill.high {
  background: var(--color-success);
  width: 85%;
}

.fullcalendar-events-activity li:not(:last-child) {
  margin-bottom: 15px;
}

.dropdown-menu {
  padding: 0 0;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  color: var(--color-heading);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  transition: all 0.3s ease-in-out;
  border-radius: 0;
}
.dropdown-item:hover {
  background-color: var(--primary-rgba-15);
  color: var(--color-primary);
}
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--primary-rgba-15);
  color: var(--color-primary);
}

.blog-list {
  display: grid;
  grid-template-columns: 370px auto;
  gap: 25px;
  align-items: center;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-list {
    align-items: start;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .blog-list {
    grid-template-columns: auto;
  }
}

.search-icon-btn {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background-color: var(--gray-3);
  color: var(--color-black);
  border-radius: 0 6px 6px 0;
  font-size: 20px;
  transition: var(--transition);
}
.search-icon-btn:hover {
  background-color: var(--gray-4);
}

.widget-list ul li {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.widget-list ul li a {
  color: var(--color-black);
  font-weight: 500;
}

.blockquote-primary {
  border-top: 5px solid;
  padding: 15px 15px;
  background-color: var(--primary-rgba-15);
}

.bd-example-row [class^=col],
.bd-example-cols [class^=col] > *,
.bd-example-cssgrid [class*=grid] > * {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: rgba(var(--slateblue-rgb), 0.15);
  border: 1px solid rgba(var(--slateblue-rgb), 0.3);
}

.token.tag {
  color: var(--color-danger);
}

.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: var(--color-info);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: var(--color-danger);
}

.grid-showcase span {
  display: block;
  border: 1px solid var(--color-border);
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
  background-color: var(--color-white);
}

.animation-bg {
  width: 500px;
  margin: 0 auto;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .animation-bg {
    width: 450px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .animation-bg {
    width: 350px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .animation-bg {
    width: 100%;
  }
}
.animation-bg img {
  width: 100%;
  height: 100%;
}

/*----------------------------------------*/
/*  card css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.7 chat css
/*----------------------------------------*/
.app-chat-contacts-box {
  width: 380px;
  min-width: 380px;
  background-color: var(--color-white);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 6px 0px 0px 6px;
  border-inline-end: 1px solid var(--color-border);
}
@media (max-width: 575px) {
  .app-chat-contacts-box {
    width: 350px;
    min-width: 350px;
  }
}
.app-chat-header {
  padding: 10px 12px;
  width: 100%;
}
.app-chat-header .app-header-search input {
  min-width: 298px;
}
.app-chat-search {
  position: relative;
  width: 100%;
}
.app-chat-search button {
  position: absolute;
  top: 50%;
  inset-inline-end: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--color-primary);
}
.app-chat-contact .nav-pills {
  margin-bottom: 5px;
  justify-content: center;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.app-chat-contact .nav-link {
  padding: 10px 40px;
  border: none;
  background-color: transparent;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  color: var(--color-heading);
}
@media (max-width: 575px) {
  .app-chat-contact .nav-link {
    padding: 10px 30px;
  }
}
.app-chat-contact .nav-link:hover {
  background-color: transparent;
  color: var(--color-primary);
}
.app-chat-contact .nav-link:hover::before {
  transform: scaleX(1);
}
.app-chat-contact .nav-link.active {
  background-color: transparent;
  color: var(--color-primary);
}
.app-chat-contact .nav-link.active::before {
  transform: scaleX(1);
}
.app-chat-contact .nav-link::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  display: block;
  transform: scaleX(0);
  -webkit-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
  background-color: var(--color-primary);
  inset-inline-start: 0;
  bottom: -1px;
}
.app-chat-list {
  overflow: hidden;
  height: 642px;
  overflow-y: scroll;
}
.app-chat-list li {
  border-bottom: 1px solid var(--color-border);
  padding: 10px 12px 10px 12px;
  transition: var(--transition);
}
.app-chat-list li:last-child {
  border-bottom: none;
}
.app-chat-list li:hover {
  background-color: var(--gray-1);
}
.app-chat-main-area {
  width: 100%;
}
.app-chat-wrapper {
  position: relative;
  display: flex;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.app-chat-user {
  display: flex;
  align-items: center;
  position: relative;
  margin-inline-end: 10px;
}
.app-chat-main-header {
  background-color: var(--color-white);
  padding: 10px 12px;
  border-radius: 0 6px 0 0;
  border-top: 1px solid var(--color-border);
}
@media (max-width: 575px) {
  .app-chat-main-header h6 {
    display: none;
  }
}
.app-chat-day-label {
  text-align: center;
  margin-bottom: 15px;
}
.app-chat-day-label span {
  padding: 6px 10px;
  font-size: 12px;
  background-color: var(--primary-rgba-15);
  border-radius: 4px;
  color: var(--color-primary);
}
.app-chat-item-start {
  display: flex;
}
.app-chat-item-start .app-chat-messages div {
  background-color: var(--color-info);
  color: var(--color-white);
  border-start-start-radius: 0px;
  border-start-end-radius: 6px;
  border-end-end-radius: 6px;
  border-end-start-radius: 6px;
  font-weight: 500;
}
.app-chat-item-end {
  display: flex;
  justify-content: end;
  text-align: end;
}
.app-chat-item-end:last-child {
  padding-bottom: 25px;
}
.app-chat-item-end .app-chat-messages div {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-start-start-radius: 6px;
  border-start-end-radius: 0px;
  border-end-end-radius: 6px;
  border-end-start-radius: 6px;
  font-weight: 500;
}
.app-chat-history-body {
  height: 627px;
  overflow: hidden;
  overflow-y: scroll;
  padding: 15px 12px 15px 12px;
  background-color: var(--gray-2);
}
.app-chat-history-body li:not(:last-child) {
  margin-bottom: 10px;
}
.app-chat-messages div {
  margin-bottom: 10px;
  padding: 10px 12px;
  width: -moz-fit-content;
  width: fit-content;
}
.app-chat-messages div p {
  color: var(--color-white);
}
.app-chat-list-inner {
  display: flex;
  align-items: top;
  max-width: 75%;
  gap: 0 10px;
}
.app-chat-messages-time {
  display: block;
  line-height: 1;
  color: var(--color-text-muted);
}
.app-chat-read-time {
  font-size: 14px;
  color: var(--color-text-muted);
}
.app-chat-read-time i {
  margin-inline-end: 5px;
  color: var(--color-success);
}
.app-chat-main-footer {
  padding: 10px 12px;
  background-color: var(--color-white);
}

.status {
  position: absolute;
  bottom: 0px;
  inset-inline-end: 0;
  width: 12px;
  min-width: 12px;
  height: 12px;
  border-radius: 100%;
  border: 2px solid var(--color-white);
}
.status.online {
  background-color: var(--color-success);
}
.status.offline {
  background-color: var(--color-danger);
}
.status.busy {
  background-color: var(--color-warning);
}

.short-msg {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unread-msg {
  width: 20px;
  min-width: 20px;
  height: 20px;
  background-color: var(--color-info);
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 100%;
  color: var(--color-white);
  font-size: 12px;
}

/*----------------------------------------*/
/*  chat css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.8 company css
/*----------------------------------------*/
.company-logo {
  width: 150px;
  min-width: 150px;
  height: 150px;
  margin: 0 auto;
  margin-bottom: 10px;
}
.company-logo img {
  width: 100%;
  height: 100%;
}
.company-info-list i {
  font-size: 14px;
  width: 30px;
  height: 30px;
  color: var(--color-body);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: var(--transition);
}
.company-info-list i:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.company-info-list ul li {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 25px;
  flex-wrap: wrap;
  color: var(--color-body);
}
.company-info-list ul li:not(:last-child) {
  margin-bottom: 10px;
}
.company-info-list ul li:hover i {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/*----------------------------------------*/
/*  company css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.9 Ecommerce css
/*----------------------------------------*/
.app-ecommerce-slider {
  margin-bottom: 33px;
}
.app-ecommerce-slider .swiper {
  border-radius: 8px;
}
.app-ecommerce-slider img {
  border-radius: 8px;
  background-color: var(--color-body-bg);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.app-ecommerce-slider-thumbs .swiper {
  border-radius: 6px;
}
.app-ecommerce-slider-thumbs .swiper-slide {
  cursor: pointer;
}
.app-ecommerce-slider-thumbs img {
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
}
.app-ecommerce-slider-thumbs .swiper-slide-thumb-active img {
  border-color: var(--color-primary);
  background-color: var(--color-body-bg);
}
.app-ecommerce-slider-btn .ecommerce-button-next,
.app-ecommerce-slider-btn .ecommerce-button-prev {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  background: var(--color-white);
  box-shadow: var(--shadow);
  position: absolute;
  inset-inline-start: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 26px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  transition: var(--transition);
  z-index: 9;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .app-ecommerce-slider-btn .ecommerce-button-next,
  .app-ecommerce-slider-btn .ecommerce-button-prev {
    inset-inline-start: 0;
  }
}
.app-ecommerce-slider-btn .ecommerce-button-next:hover,
.app-ecommerce-slider-btn .ecommerce-button-prev:hover {
  color: var(--color-white);
  background: var(--color-primary);
}
.app-ecommerce-slider-btn .ecommerce-button-next.swiper-button-disabled,
.app-ecommerce-slider-btn .ecommerce-button-prev.swiper-button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.app-ecommerce-slider-btn .ecommerce-button-next {
  inset-inline-start: auto;
  inset-inline-end: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .app-ecommerce-slider-btn .ecommerce-button-next {
    inset-inline-end: 0;
  }
}

.product-colors-size .form-check {
  position: relative;
}
[dir=rtl] .product-colors-size .form-check {
  padding-inline-start: 1em;
}
.product-colors-size .form-check .form-check-input {
  float: left;
  margin-inline-start: -1.5em;
  border: none;
  position: relative;
  z-index: 5;
  cursor: pointer;
}
.product-colors-size .color-input {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.product-colors-size .color-input.form-check-input:checked {
  border: none;
  position: relative;
  box-shadow: none;
}
.product-colors-size .color-input.form-check-input:checked::before {
  position: absolute;
  content: "\ea5e";
  font-family: tabler-icons !important;
  color: var(--color-white);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
}
.product-colors-size .form-check-input:checked[type=radio] {
  background-image: none;
}
.product-colors-size .form-check-input:focus {
  border: none;
  outline: 0;
  box-shadow: none;
}
.product-colors-size .size-check {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
}
.product-colors-size .size-check.form-check-input:checked {
  border: none;
  position: relative;
  box-shadow: none;
}
.product-colors-size .size-check.form-check-input:checked::before {
  position: absolute;
  content: "";
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
  background-color: var(--color-danger);
  border-radius: 50%;
}
.product-colors-size .size {
  position: absolute;
  inset-inline-start: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  color: var(--custom-white);
  line-height: 1;
  z-index: 6;
  font-size: 12px;
  font-weight: var(--fw-medium);
}
[dir=rtl] .product-colors-size .size {
  inset-inline-start: auto;
  inset-inline-end: 50%;
}
.product-colors-size.small .color-input {
  width: 20px;
  height: 20px;
}
.product-colors-size.small .color-input.form-check-input:checked::before {
  font-size: 16px;
}

.product-quantity {
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-quantity .increase,
.product-quantity .decrease {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: var(--color-primary);
  cursor: pointer;
  border: 1px solid var(--color-border);
  transition: all 0.3s ease-in-out;
}
.product-quantity .increase:hover,
.product-quantity .decrease:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.product-quantity .product-quantity-input[type=text] {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
  border: 1px solid transparent;
  background-color: var(--primary-rgba-15);
  padding: 4px;
  color: var(--color-primary);
}

.product-review-rating-wrapper {
  display: grid;
  grid-template-columns: 170px auto;
  align-content: center;
}
@media (max-width: 575px) {
  .product-review-rating-wrapper {
    grid-template-columns: auto;
    justify-content: center;
    gap: 25px;
  }
}

.product-rating-box {
  border: 1.5px solid var(--color-border);
  width: 145px;
  height: 131px;
  text-align: center;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .product-rating-box {
    width: 110px;
  }
}
@media (max-width: 575px) {
  .product-rating-box {
    margin: 0 auto;
  }
}
.product-rating-box-number {
  font-size: 48px;
  line-height: 1;
  color: var(--color-black);
  font-weight: var(--fw-bold);
}
.product-rating-box-icon i {
  font-size: 13px;
  color: var(--color-rating);
}

.product-review-progress-bar {
  display: inline-flex;
  width: 100%;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
}
.product-review-progress-bar:not(:last-child) {
  margin-bottom: 5px;
}
.product-review-progress-bar .single-progress {
  margin-bottom: 0px;
  width: 100%;
}
.product-review-progress-bar .progress {
  border-radius: 0;
}
.product-review-progress-bar .progress-bar {
  border-radius: 0;
}
.product-review-text {
  color: var(--color-black);
  font-weight: var(--fw-medium);
  min-height: 10px;
}
.product-review-meta {
  min-width: 75px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-review-percent {
  color: var(--color-heading);
  font-weight: var(--fw-medium);
  width: 38px;
}
.product-review-number {
  color: var(--color-body-secondary);
  font-weight: var(--fw-medium);
}

.product-comment ul .children {
  margin-top: 25px;
  margin-inline-start: 50px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .product-comment ul .children {
    margin-inline-start: 30px;
  }
}
@media (max-width: 575px) {
  .product-comment ul .children {
    margin-inline-start: 0;
  }
}
.product-comment ul li {
  margin-bottom: 30px;
  list-style: none;
}
.product-comment ul li:last-child {
  margin-bottom: 0px;
}
.product-comment-box {
  padding: 15px 15px;
  border-radius: 4px;
  background-color: var(--color-white);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .product-comment-box {
    flex-direction: column;
    gap: 15px 0;
  }
}
.product-comment-info {
  flex: 0 0 auto;
}
.product-comment-avatar img {
  width: 100px;
  height: 100px;
  margin-inline-end: 20px;
  border-radius: 6px;
}
.product-comment-avatar.thumb-radius img {
  border-radius: 100%;
}
.product-comment-text {
  width: 100%;
}

/* Product card */
.product-card {
  background-color: var(--color-card-bg);
  box-shadow: var(--shadow);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  margin-bottom: 25px;
}
.product-card:hover .thumb-1 {
  visibility: hidden;
  opacity: 0;
}
.product-card:hover .thumb-2 {
  opacity: 1;
  visibility: visible;
}
.product-card:hover .product-action-btn li {
  transform: translateY(0);
  opacity: 1;
}
.product-thumbs {
  position: relative;
}
.product-thumbs img {
  width: 100%;
  height: auto;
  border-radius: 6px 6px 0 0;
  background-color: var(--color-card-bg);
}
.product-thumbs .thumb-1 {
  visibility: visible;
  transition: all 0.5s ease-in-out 0s;
  opacity: 1;
}
.product-thumbs .thumb-2 {
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transition: all 0.5s ease-in-out 0s;
}
.product-badge {
  position: absolute;
  inset-inline-end: 10px;
  top: 10px;
}
.product-action-btn {
  text-align: center;
  padding: 0;
  margin: 0 auto;
  list-style: none;
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
}
.product-action-btn li {
  margin: 0 -2px;
  opacity: 0;
  display: inline-block;
  transform: translateY(60px);
  transition: all 0.3s ease 0.3s;
}
.product-action-btn li:nth-child(2) {
  transition: all 0.3s ease 0.2s;
}
.product-action-btn li:nth-child(3) {
  transition: all 0.3s ease 0.1s;
}
.product-action-btn li:nth-child(4) {
  transition: all 0.3s ease 0s;
}
.product-action-btn li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  color: var(--color-black);
  background-color: var(--gray-2);
  font-size: 16px;
  transition: var(--transition);
}
.product-action-btn li a:hover {
  color: var(--color-primary);
  background-color: var(--gray-3);
}
.product-content {
  background-color: var(--color-card-bg);
  padding: 15px;
  position: relative;
  box-shadow: var(--shadow);
}
[data-theme-mode=dark] .product-content {
  background-color: #0b092e;
}
.product-content .rating {
  list-style: none;
  padding: 0;
  margin: 0 0 5px;
}
.product-content .rating li {
  color: #ffd200;
  font-size: 13px;
  display: inline-block;
}
.product-content .rating li.disable {
  color: #dcdcdc;
}
.product-content .price {
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 400;
}
.product-content .price span {
  color: #999;
  font-size: 14px;
  text-decoration: line-through;
  margin-inline-end: 6px;
}

/*----------------------------------------*/
/*  Ecommerce css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.10 Email css
/*----------------------------------------*/
.app-mail-wrapper {
  display: flex;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 25px;
}

.app-mail-sidebar {
  width: 320px;
  height: 756px;
  background-color: var(--color-white);
  padding: 15px 0;
  border-radius: 6px 0px 0px 6px;
  border-inline-end: 1px solid var(--color-border);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .app-mail-sidebar {
    width: 280px;
  }
}

.app-mail-compose {
  padding: 0 24px 15px 24px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 15px;
}

.app-mail-menu li {
  padding: 6px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-mail-menu li a {
  color: var(--color-heading);
  transition: var(--transition);
}
.app-mail-menu li a.active {
  color: var(--color-primary);
}
.app-mail-menu li a:hover {
  color: var(--color-heading);
}

.app-mail-label-list a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
  color: var(--color-body);
  font-weight: var(--fw-medium);
  padding: 6px 24px;
}

.app-mail-main-area {
  width: 100%;
}

.app-mail-main-header {
  padding: 13px 16px 13px 8px;
  border-radius: 0 6px 0 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 15px;
}
@media (max-width: 575px) {
  .app-mail-main-header {
    flex-direction: column;
    justify-content: start;
    align-items: start;
  }
}
.app-mail-main-header .input-group-text {
  border-color: var(--color-border);
  font-size: 14px;
  border-radius: 4px;
  background-color: transparent;
  color: var(--color-heading);
  letter-spacing: 0;
  border: none;
}
.app-mail-main-header .form-control {
  border: none;
}
.app-mail-main-header .form-control:focus {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  color: var(--color-heading);
}

.app-mail-search-form .form-label {
  margin-bottom: 0px;
  min-width: 93px;
}

.app-mail-main-middle {
  padding: 8px 16px;
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 15px;
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 575px) {
  .app-mail-main-middle {
    display: none;
  }
}

.app-mail-list-body {
  height: 660px;
  overflow: hidden;
  overflow-y: scroll;
  padding-bottom: 15px;
  background-color: var(--color-white);
}

.email-intro {
  display: flex;
  gap: 10px;
  align-content: center;
  cursor: pointer;
}
@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .email-intro {
    flex-direction: column;
  }
}
@media (max-width: 575px) {
  .email-intro h6 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
  }
}
.email-intro p {
  width: 750px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .email-intro p {
    width: 590px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .email-intro p {
    width: 400px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .email-intro p {
    width: 400px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .email-intro p {
    width: 500px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .email-intro p {
    width: 310px;
  }
}
@media (max-width: 575px) {
  .email-intro p {
    width: 200px;
  }
}

.app-mail-meta {
  display: inline-flex;
  justify-content: end;
  width: 110px;
  min-width: 110px;
}
.app-mail-meta .date {
  color: var(--color-heading);
  font-weight: var(--fw-medium);
}

.app-mail-meta-action {
  display: none;
}

.mail-list-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition);
}
@media (max-width: 575px) {
  .mail-list-item .d-flex-between {
    align-items: start;
  }
}
.mail-list-item:hover {
  box-shadow: var(--shadow);
}
.mail-list-item:hover .app-mail-meta .date {
  display: none;
}
.mail-list-item:hover .app-mail-meta-action {
  display: block;
}
@media (max-width: 575px) {
  .mail-list-item .email-check,
  .mail-list-item .email-starred {
    display: none;
  }
}

.email-check {
  width: 15px;
  min-width: 15px;
}

.email-starred {
  width: 20px;
  min-width: 20px;
}

/* inbox */
.mail-inbox-body {
  padding: 15px 0;
}

.attachment ul {
  display: flex;
  gap: 10px;
}
.attachment ul li {
  width: 60px;
  height: 60px;
  border-radius: 6px;
}
.attachment ul li img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

.inner-sidebar-toggle {
  display: none;
}
@media only screen and (max-width: 991px) {
  .inner-sidebar-toggle {
    display: block;
  }
}

@media only screen and (max-width: 991px) {
  .app-content-wrap .inner-sidebar-wrapper .inner-sidebar-main {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    transition: all 0.5s ease;
    box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3);
  }
}
@media only screen and (max-width: 991px) {
  .app-content-wrap .inner-sidebar-wrapper .inner-sidebar-main.open {
    visibility: visible;
    opacity: 1;
    z-index: 10;
  }
}
.email-sidebar-overlay {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.email-sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/*----------------------------------------*/
/*  Email css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.11 Holiday css
/*----------------------------------------*/
.holiday-card {
  background-color: var(--color-primary);
  padding: 25px 25px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  margin-bottom: 25px;
  text-align: center;
}

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

/*----------------------------------------*/
/*  Holiday css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.12 invoice css
/*----------------------------------------*/
.invoice-header {
  padding: 25px 25px;
  background-color: var(--color-body-bg);
  border-radius: 8px;
  margin-bottom: 25px;
}

.invoice-logo {
  width: 220px;
  min-width: 220px;
}
.invoice-logo img {
  width: 100%;
  height: 100%;
}
.invoice-logo .dark-logo {
  display: none;
}
[data-theme-mode=dark] .invoice-logo .light-logo {
  display: none;
}
[data-theme-mode=dark] .invoice-logo .dark-logo {
  display: block;
}

.invoice-input-item {
  display: grid;
  grid-template-columns: 150px auto;
  gap: 6px 30px;
  align-items: center;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .invoice-input-item {
    grid-template-columns: auto;
    text-align: start;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .invoice-input-item {
    text-align: start;
  }
}
@media (max-width: 575px) {
  .invoice-input-item {
    grid-template-columns: auto;
    text-align: start;
  }
}
.invoice-input-item .form-label {
  margin-bottom: 0px;
}

.invoice-table td {
  vertical-align: top;
}

/*----------------------------------------*/
/*  invoice css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.13 payslip css
/*----------------------------------------*/
.payslip-wrapper {
  position: relative;
  z-index: 5;
}
.payslip-wrapper .payslip-header {
  display: grid;
  align-items: start;
  justify-content: space-between;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: 25px;
  padding-bottom: 15px;
}
@media (max-width: 575px) {
  .payslip-wrapper .payslip-header {
    grid-template-columns: repeat(1, 1fr);
    gap: 25px;
  }
}
.payslip-wrapper .payslip-logo {
  width: 220px;
  min-width: 220px;
}
.payslip-wrapper .payslip-logo img {
  width: 100%;
  height: 100%;
}
.payslip-wrapper .payslip-logo .dark-logo {
  display: none;
}
[data-theme-mode=dark] .payslip-wrapper .payslip-logo .light-logo {
  display: none;
}
[data-theme-mode=dark] .payslip-wrapper .payslip-logo .dark-logo {
  display: block;
}
.payslip-wrapper .table {
  position: relative;
  z-index: 5;
}
.payslip-wrapper .total-row {
  background-color: var(--color-body-bg) !important;
}
.payslip-wrapper .total-row td {
  font-weight: var(--fw-sbold) !important;
  color: var(--gray-7);
  font-size: 15px;
}
.payslip-wrapper .table-total td,
.payslip-wrapper .table-total th {
  font-weight: var(--fw-sbold) !important;
  color: var(--gray-7);
  font-size: 15px;
}
.payslip-wrapper .signature-area {
  margin-top: 50px;
}
.payslip-wrapper .watermark {
  position: absolute;
  opacity: 0.03;
  font-size: 150px;
  color: var(--color-primary);
  transform: translate(-50%, -50%);
  inset-inline-start: 50%;
  top: 50%;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .payslip-wrapper .watermark {
    font-size: 120px;
    top: 45%;
  }
}
@media (max-width: 575px) {
  .payslip-wrapper .watermark {
    font-size: 90px;
    top: 45%;
  }
}

/*----------------------------------------*/
/*  payslip css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.14 project css
/*----------------------------------------*/
.discussion-list {
  list-style: none;
}
.discussion-item {
  padding: 15px 0;
  border-bottom: 1px solid var(--color-border);
}
.discussion-item a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition);
}
.discussion-item a:hover {
  text-decoration: underline;
}

.milestone-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.milestone-item p {
  margin: 0;
  flex-grow: 1;
}
.milestone-icon {
  font-size: 20px;
  color: var(--color-primary);
  margin-inline-end: 10px;
}
.milestone-date {
  color: var(--color-light);
  font-weight: var(--fw-medium);
}

/*----------------------------------------*/
/*  project css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.15 seller css
/*----------------------------------------*/
.sellers-card {
  background-color: var(--color-white);
  box-shadow: var(--shadow);
  padding-top: 25px;
  margin-bottom: 25px;
  position: relative;
}
.sellers-card .sellers-info {
  padding-inline-start: 25px;
  padding-inline-end: 25px;
}

.vendor-box-wrap {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  gap: 20px;
  padding-bottom: 15px;
}

.vendor-box {
  min-width: 350px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: 6px;
}
@media (max-width:450px) {
  .vendor-box {
    min-width: 310px;
  }
}

.vendor-content {
  padding: 20px 20px 0 20px;
  color: var(--color-body);
}

.vendor-thumb img {
  max-width: 48px;
  border-radius: 50%;
}

/*----------------------------------------*/
/*  seller css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  3.16 settings css
/*----------------------------------------*/
.bd-theme-settings-area {
  position: fixed;
  top: 50%;
  right: 0px;
  width: 240px;
  background-color: #FFF;
  box-shadow: var(--shadow);
  border: 1px solid #000;
  -webkit-transform: translateY(-50%) translateX(100%);
  -moz-transform: translateY(-50%) translateX(100%);
  -ms-transform: translateY(-50%) translateX(100%);
  -o-transform: translateY(-50%) translateX(100%);
  transform: translateY(-50%) translateX(100%);
  z-index: 991;
  border-bottom-right-radius: 4px;
}
[dir=rtl] .bd-theme-settings-area {
  -webkit-transform: translateY(-50%) translateX(-100%);
  -moz-transform: translateY(-50%) translateX(-100%);
  -ms-transform: translateY(-50%) translateX(-100%);
  -o-transform: translateY(-50%) translateX(-100%);
  transform: translateY(-50%) translateX(-100%);
  left: 0px;
  right: auto;
}
.bd-theme-settings-area.settings-opened {
  -webkit-transform: translateY(-50%) translateX(0%);
  -moz-transform: translateY(-50%) translateX(0%);
  -ms-transform: translateY(-50%) translateX(0%);
  -o-transform: translateY(-50%) translateX(0%);
  transform: translateY(-50%) translateX(0%);
}

.bd-theme-wrapper {
  padding: 20px 30px 30px;
}

.bd-theme-header-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #000;
}

.bd-theme-settings-open {
  position: absolute;
  top: -1px;
  inset-inline-end: 100%;
}

.bd-theme-settings-open button {
  background-color: #FFF;
  border: 1px solid #000;
  border-inline-end: 0;
  width: 36px;
  height: 36px;
  text-align: center;
  font-size: 18px;
  color: #000;
  position: relative;
  border-start-start-radius: 4px;
  border-bottom-left-radius: 4px;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-theme-settings-gear {
  display: inline-block;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}

.bd-theme-settings-close {
  display: inline-block;
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}
[dir=rtl] .bd-theme-settings-close {
  inset-inline-start: 10%;
}

.bd-theme-settings-area.settings-opened .bd-theme-settings-gear {
  opacity: 0;
}

.bd-theme-settings-area.settings-opened .bd-theme-settings-close {
  opacity: 1;
}

.theme-switcher-radio .form-check-label,
.direction-switcher .form-check-label {
  color: #000;
}

/*----------------------------------------*/
/*  settings css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.1 apexcharts css 
/*----------------------------------------*/
#donut-pattern .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label,
#donut-pattern .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value {
  fill: var(--color-body) !important;
}

#radialbar-multiple .apexcharts-radialbar .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
  fill: var(--color-body);
}

.apexcharts-menu-item {
  font-size: 11px !important;
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  color: var(--color-body) !important;
  border-radius: 0.25rem !important;
  background: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.05) !important;
}

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

.apexcharts-yaxistooltip-left:before {
  border-inline-start-color: var(--color-border) !important;
}

#marketCap .apexcharts-canvas line {
  stroke: var(--color-border);
}

.apexcharts-legend {
  padding: 0 1.25rem !important;
}

.apexcharts-tooltip {
  box-shadow: none !important;
}

.apexcharts-tooltip-marker {
  margin-inline-end: 0.625rem;
}

.apexcharts-tooltip.apexcharts-theme-light {
  border: 1px solid var(--color-border) !important;
  background: var(--color-white) !important;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  background: var(--color-white) !important;
  border-block-end: 1px solid var(--color-border) !important;
}

.apexcharts-xaxis line,
.apexcharts-grid-borders line {
  stroke: var(--color-border);
}

.apexcharts-radialbar-track.apexcharts-track path {
  stroke: rgb(var(--light-rgb));
}

.apexcharts-selection-rect {
  fill: var(--color-black);
}

.apexcharts-menu {
  background: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0.3rem !important;
}

.apexcharts-menu-item {
  padding: 6px !important;
}

.apexcharts-theme-light .apexcharts-menu-item:hover {
  background: rgb(var(--light-rgb)) !important;
}

.apexcharts-inner.apexcharts-graphical line.apexcharts-xaxis-tick {
  stroke: transparent !important;
}

#column-rotated-labels .apexcharts-xaxis-texts-g {
  transform: translateY(2.5rem);
}

#chart-year,
#chart-quarter {
  background: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
}

.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series .apexcharts-bar-area {
  stroke: transparent !important;
}

.apexcharts-treemap .apexcharts-series.apexcharts-treemap-series rect {
  stroke: var(--color-white) !important;
}

.apexcharts-series.apexcharts-pie-series .apexcharts-pie-area {
  stroke: var(--color-white) !important;
}

.apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value {
  fill: var(--color-body);
}

.apexcharts-radialbar-hollow {
  fill: var(--color-white);
}

.apexcharts-radar-series.apexcharts-plot-series polygon,
.apexcharts-radar-series.apexcharts-plot-series line {
  stroke: var(--color-border);
}

.apexcharts-pie line,
.apexcharts-pie circle {
  stroke: var(--color-border);
}

.apexcharts-pie text {
  fill: #fff !important;
}

.apexcharts-canvas .apexcharts-toolbar {
  z-index: 1;
}

.apexcharts-subtitle-text {
  fill: var(--color-text-muted);
}

#polararea-basic .apexcharts-pie text {
  fill: var(--color-black) !important;
}

.apexcharts-pie .apexcharts-datalabels rect {
  fill: transparent;
}

[dir=rtl] .apexcharts-canvas {
  direction: ltr;
}

.apexcharts-boxPlot-area {
  stroke: var(--color-body) !important;
}

.apexcharts-gridline {
  stroke: var(--color-border);
}

.apexcharts-legend-text {
  font-family: var(--ff-body) !important;
  font-weight: 500 !important;
  color: var(--color-body) !important;
}

.apexcharts-radialbar-track.apexcharts-track path {
  stroke: var(--gray-3);
}

#taskOverview .apexcharts-datalabel,
#taskOverview .apexcharts-datalabel-label,
#taskOverview .apexcharts-datalabel-value,
#taskOverview .apexcharts-datalabels,
#taskOverview .apexcharts-pie-label {
  fill: var(--color-heading) !important;
}

#taskOverview .apexcharts-datalabel,
#taskOverview .apexcharts-datalabel-label,
#taskOverview .apexcharts-datalabel-value,
#taskOverview .apexcharts-datalabels,
#taskOverview .apexcharts-pie-label {
  fill: var(--color-heading) !important;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white) !important;
  color: var(--color-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.apexcharts-tooltip.apexcharts-theme-light {
  border: 1px solid var(--color-border) !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.apexcharts-tooltip.apexcharts-theme-dark {
  border: 1px solid var(--color-border) !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.apexcharts-legend {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  overflow: hidden !important;
  padding: 0 10px;
}

[data-theme-mode=dark] .apexcharts-menu {
  background: var(--color-body) !important;
  border-color: var(--color-border) !important;
}

.apexcharts-theme-light .apexcharts-menu-item:hover {
  color: var(--color-white) !important;
  background-color: rgba(108, 95, 252, 0.15) !important;
}

/*----------------------------------------*/
/*  apexcharts css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.2 dropzone css
/*----------------------------------------*/
.dropzone {
  border: 2px dashed var(--color-border) !important;
  background-color: transparent !important;
}

.dropzone .dz-message .dz-button {
  font-size: 20px !important;
  color: var(--color-body) !important;
}

.dropzone .dz-preview {
  border-radius: 16px;
  z-index: 5;
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark,
.dropzone .dz-preview .dz-progress {
  z-index: 10 !important;
}

/*----------------------------------------*/
/*  dropzone css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.3 filepond css
/*----------------------------------------*/
.filepond--drop-label {
  color: var(--color-body) !important;
  border-radius: 6px !important;
  border: 2px dashed var(--color-border);
}

.filepond--credits {
  display: none;
}

.filepond--panel-root {
  background-color: var(--color-white) !important;
}

.filepond--drop-label.filepond--drop-label label {
  padding: 10px 15px !important;
  font-size: 14px;
}

.filepond--root {
  margin-block-end: 0 !important;
}

.filepond--file {
  background-color: var(--color-primary) !important;
}

.single-fileupload {
  width: 128px !important;
  height: 128px !important;
  margin: 0 auto !important;
}

.filepond--file-action-button.filepond--file-action-button {
  font-size: 18px !important;
  width: 30px !important;
  height: 30px !important;
}

.filepond--file-info .filepond--file-info-main {
  font-size: 18px !important;
}

.filepond--file-info .filepond--file-info-sub {
  font-size: 16px !important;
}

.filepond--file-info {
  margin-inline-start: 10px !important;
  margin-inline-end: 10px !important;
}

.filepond--list {
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  width: 100% !important;
}

/*----------------------------------------*/
/*  filepond css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.4 flatpickr css
/*----------------------------------------*/
.flatpickr-months,
.flatpickr-weekdays {
  background-color: var(--primary-rgba-1) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  border-radius: 0.25rem !important;
  border: 1px dashed var(--primary-rgba-3) !important;
}

.flatpickr-months .flatpickr-month {
  color: var(--color-primary) !important;
  fill: var(--color-primary) !important;
}

.flatpickr-monthDropdown-months,
.numInput {
  color: var(--color-primary) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  inset-block-start: 0 !important;
  padding-block-start: 0.313rem !important;
  padding-inline: 0.313rem !important;
  padding-block-end: 0 !important;
  color: var(--color-primary) !important;
  fill: var(--color-primary) !important;
}

span.flatpickr-weekday {
  color: var(--primary-rgba-8) !important;
  font-weight: 700 !important;
}

.flatpickr-day {
  border-radius: 6px;
}

.flatpickr-day.today {
  border-color: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  border-color: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

.flatpickr-calendar.hasTime .flatpickr-time {
  border-top: 1px solid var(--color-border) !important;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  background: var(--gray-3) !important;
  border-color: var(--color-border) !important;
}

.flatpickr-day.nextMonthDay,
.flatpickr-day.prevMonthDay {
  opacity: 0.5 !important;
}

/*----------------------------------------*/
/*  flatpickr css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.5 Full Calendar css
/*----------------------------------------*/
#external-events .fc-event {
  cursor: move;
  padding: 7.8px 20px;
  font-size: 14px;
  border-radius: 6px;
}

#calendar-container {
  position: relative;
  z-index: 1;
}

.fc-v-event .fc-event-main {
  color: var(--color-primary);
}

.fc-event-selected,
.fc-event:focus {
  box-shadow: none !important;
}

.fc-daygrid-event {
  padding: 4px;
}
.fc-daygrid-event .fc-event-title {
  font-size: 13px;
  font-weight: 300;
}

.fc-h-event.bg-primary-transparent .fc-event-title,
.fc-h-event.bg-primary-transparent .fc-event-time {
  color: #4F46E5;
}
.fc-h-event.bg-secondary-transparent .fc-event-title,
.fc-h-event.bg-secondary-transparent .fc-event-time {
  color: #FEBB7B;
}
.fc-h-event.bg-warning-transparent .fc-event-title,
.fc-h-event.bg-warning-transparent .fc-event-time {
  color: #FF830F;
}
.fc-h-event.bg-info-transparent .fc-event-title,
.fc-h-event.bg-info-transparent .fc-event-time {
  color: #1493FF;
}
.fc-h-event.bg-success-transparent .fc-event-title,
.fc-h-event.bg-success-transparent .fc-event-time {
  color: #29DA82;
}
.fc-h-event.bg-danger-transparent .fc-event-title,
.fc-h-event.bg-danger-transparent .fc-event-time {
  color: #E63232;
}

.fc-h-event {
  background-color: var(--primary-rgba-1);
}
.fc-h-event .fc-event-title {
  color: #4F46E5;
}

.fc-theme-standard .fc-scrollgrid.fc-scrollgrid-liquid {
  border: 0px !important;
  border-top: 1px solid var(--color-border) !important;
}

.fc .fc-scrollgrid-section-footer > *,
.fc .fc-scrollgrid-section-header > * {
  border-bottom-width: 0 !important;
}

.fc-daygrid-block-event .fc-event-time,
.fc-daygrid-block-event .fc-event-title {
  padding: 0 4px !important;
}

.fc .fc-button-primary {
  background-color: #4F46E5 !important;
  border-color: #4F46E5 !important;
}

.fc .fc-non-business {
  background: var(--color-white) !important;
}

.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  color: #fff;
  background-color: #4F46E5;
  border-color: #4F46E5;
  opacity: 0.9;
}

.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus,
.fc .fc-button-primary:not(:disabled):active:focus {
  box-shadow: none !important;
}

.fc-theme-standard td,
.fc-theme-standard th {
  border: 1px solid var(--color-border) !important;
  border-top: 0px !important;
}

.fc-list-table td,
.fc-list-table th {
  border-inline-start: 0 !important;
  border-inline-end: 0 !important;
}

.fc .fc-daygrid-day.fc-day-today {
  background-color: var(--primary-rgba-1) !important;
}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  color: var(--color-primary);
}

.fc-theme-standard .fc-list {
  border: 1px solid var(--color-border) !important;
}

.fc .fc-list-event:hover td {
  background-color: #C8C8C8 !important;
}

.fc-timegrid-event-harness-inset .fc-timegrid-event,
.fc-timegrid-event.fc-event-mirror,
.fc-timegrid-more-link {
  box-shadow: none !important;
}

.fc-theme-standard .fc-list-day-cushion {
  background-color: #C8C8C8 !important;
}

.fc-theme-standard .fc-scrollgrid {
  border: 1px solid var(--color-border) !important;
}

.fc-theme-bootstrap5 .fc-list,
.fc-theme-bootstrap5 .fc-scrollgrid,
.fc-theme-bootstrap5 td,
.fc-theme-bootstrap5 th {
  border: 1px solid var(--color-border) !important;
}

@media (max-width: 420px) {
  .fc-scroller.fc-scroller-liquid {
    overflow: scroll !important;
  }
}
@media (max-width: 380px) {
  .fc .fc-daygrid-day-bottom {
    font-size: 12px !important;
    padding: 0px 3px 0 !important;
  }
  .fc .fc-daygrid-more-link {
    z-index: 99 !important;
  }
}
@media (max-width: 767.98px) {
  .fc .fc-toolbar {
    display: block !important;
  }
  .fc-toolbar-chunk {
    margin-block-start: 8px;
  }
}
.fc-daygrid-block-event {
  color: #fff !important;
  border: 0 !important;
}
.fc-daygrid-block-event .fc-list-event-dot {
  border-color: #fff !important;
}
.fc-daygrid-block-event:hover {
  color: #000 !important;
}
.fc-daygrid-block-event:hover .fc-list-event-dot {
  border-color: #000 !important;
}

.fc-event-time {
  color: var(--color-primary);
}

.fc .fc-daygrid-day-number {
  font-size: 16px;
  color: var(--color-heading);
  font-weight: var(--fw-medium);
}

.fc-daygrid-more-link.fc-more-link {
  color: var(--color-black);
}

/*----------------------------------------*/
/*  Full Calendar css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.6 intl-tel-input css
/*----------------------------------------*/
@media (min-width: 367px) {
  .telephone-input-btn {
    margin-inline-start: 8px;
  }
}
@media (max-width: 366.98px) {
  .telephone-input-btn {
    margin-block-start: 8px;
  }
}
.hide {
  display: none;
}

input.error {
  border: 1px solid var(--color-danger);
}

#error-msg {
  color: var(--color-danger);
}

#valid-msg {
  color: var(--color-success);
}

.iti__search-input:focus-visible {
  outline: none;
}

.iti__search-input {
  background-color: var(--color-white) !important;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 22px;
  color: var(--color-heading);
}

.iti__search-input + .iti__country-list {
  border-top: 1px solid var(--color-border) !important;
}

.iti--inline-dropdown .iti__dropdown-content {
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow) !important;
}

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

.iti__country.iti__highlight {
  background-color: var(--primary-rgba-1) !important;
}

.iti--show-selected-dial-code .iti__selected-flag {
  background-color: var(--color-light) !important;
}

.iti__selected-country-primary {
  background: var(--gray-2);
  padding: 0.5rem 1.5rem !important;
  border-radius: 6px 0px 0px 6px;
}

/*----------------------------------------*/
/*  intl-tel-input css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.7 nice-select css
/*----------------------------------------*/
.nice-select {
  -webkit-tap-highlight-color: transparent;
  color: var(--color-white);
  background-color: transparent;
  border-radius: 6px;
  border: solid 1px var(--color-border);
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 16px;
  font-weight: normal;
  height: 50px;
  line-height: 50px;
  outline: none;
  padding-inline-start: 25px;
  padding-inline-end: 44px;
  position: relative;
  text-align: left !important;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  width: auto;
}
[data-theme-mode=dark] .nice-select {
  color: var(--color-black);
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
  border-color: 0;
}

.nice-select:after {
  display: block;
  height: auto;
  pointer-events: none;
  position: absolute;
  inset-inline-end: 20px;
  top: 50%;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  content: "\e905";
  font-family: var(--ff-remixicon);
  font-size: 18px;
  transform: translateY(-50%);
  margin-top: 0;
  height: auto;
  width: auto;
  color: var(--color-white);
  transition: 0.3s;
}
[data-theme-mode=dark] .nice-select:after {
  color: var(--color-black);
}

.nice-select.open:after {
  -webkit-transform: translateY(-50%) rotate(-180deg);
  -moz-transform: translateY(-50%) rotate(-180deg);
  -ms-transform: translateY(-50%) rotate(-180deg);
  -o-transform: translateY(-50%) rotate(-180deg);
  transform: translateY(-50%) rotate(-180deg);
}

.nice-select.open .list {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: scale(1) translateY(0);
  -ms-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
  width: 100%;
}

.df-input-field .nice-select.open .list {
  width: 100%;
}

.nice-select.disabled {
  border-color: var(--color-text-muted);
  color: var(--color-text-muted);
  pointer-events: none;
}

.nice-select.disabled:after {
  border-color: var(--color-text-muted);
}

.nice-select.wide {
  width: 100%;
}

.nice-select.wide .list {
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
}

.nice-select.right {
  float: right;
}

.nice-select.right .list {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.nice-select.small {
  font-size: 12px;
  height: 36px;
  line-height: 34px;
}

.nice-select.small:after {
  height: 4px;
  width: 4px;
}

.nice-select.small .option {
  line-height: 34px;
  min-height: 34px;
}

.nice-select .list {
  color: var(--color-white);
  background-color: var(--color-bg-primary);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
  box-sizing: border-box;
  margin-top: 0px;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 101%;
  inset-inline-start: 0;
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  z-index: 9;
}
[data-theme-mode=dark] .nice-select .list {
  color: var(--color-black);
}

.nice-select .list:hover .option:not(:hover) {
  background-color: transparent !important;
}

.nice-select .option {
  cursor: pointer;
  font-weight: var(--fw-regular);
  list-style: none;
  line-height: 26px;
  min-height: 26px;
  outline: none;
  padding-inline-start: 10px;
  padding-inline-end: 10px;
  margin-inline-start: 5px;
  margin-inline-end: 5px;
  text-align: left;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  color: var(--color-white);
}
[data-theme-mode=dark] .nice-select .option {
  color: var(--color-black);
}
.nice-select .option:hover {
  color: var(--color-primary);
}
.nice-select .option:first-child {
  margin-top: 5px;
}
.nice-select .option:last-child {
  margin-bottom: 5px;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
  background-color: transparent;
}

.nice-select .option.selected {
  font-weight: var(--fw-regular);
}

.nice-select .option.disabled {
  background-color: transparent;
  color: var(--color-text-muted);
  cursor: default;
}

.no-csspointerevents .nice-select .list {
  display: none;
}

.no-csspointerevents .nice-select.open .list {
  display: block;
}

/*----------------------------------------*/
/*  nice-select css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.8 nouislider css
/*----------------------------------------*/
.noUi-horizontal .noUi-handle {
  width: 16px !important;
  height: 16px !important;
  inset-inline-end: -1px !important;
  top: -6px !important;
}

.noUi-handle:after,
.noUi-handle:before {
  height: 6px !important;
  width: 1px !important;
  inset-inline-start: 5px !important;
  top: 4px !important;
}

.noUi-handle:after {
  inset-inline-start: 8px !important;
}

.noUi-horizontal {
  height: 6px !important;
}

.noUi-vertical {
  width: 6px !important;
}

.noUi-vertical .noUi-handle {
  width: 16px !important;
  height: 16px !important;
}

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

.noUi-handle {
  border: 1px solid var(--color-border) !important;
  background: var(--color-white) !important;
  box-shadow: var(--shadow) !important;
}

.noUi-handle:after,
.noUi-handle:before {
  background: var(--color-black) !important;
}

.noUi-marker {
  position: absolute;
  background: var(--color-border) !important;
}

.noUi-tooltip {
  border: 1px solid var(--color-border) !important;
  border-radius: 4px !important;
  background: var(--color-white) !important;
  color: var(--color-body) !important;
  padding: 4px 12px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

#slider-fit {
  padding: 0 16px;
}

.noUi-connect {
  background: var(--color-primary) !important;
}

.noUi-vertical .noUi-handle {
  bottom: -5px !important;
  inset-inline-end: -6px;
}

#secondary-colored-slider .noUi-connect {
  background-color: var(--color-secondary) !important;
}

#warning-colored-slider .noUi-connect {
  background-color: var(--color-warning) !important;
}

#info-colored-slider .noUi-connect {
  background-color: var(--color-info) !important;
}

#success-colored-slider .noUi-connect {
  background-color: var(--color-success) !important;
}

#danger-colored-slider .noUi-connect {
  background-color: var(--color-danger) !important;
}

#purple-colored-slider .noUi-connect {
  background-color: var(--color-purple) !important;
}

#slateblue-colored-slider .noUi-connect {
  background-color: var(--color-slateblue) !important;
}

#teal-colored-slider .noUi-connect {
  background-color: var(--color-teal) !important;
}

#orange-colored-slider .noUi-connect {
  background-color: var(--color-orange) !important;
}

#light-colored-slider .noUi-connect {
  background-color: var(--color-light) !important;
}

#dark-colored-slider .noUi-connect {
  background-color: var(--color-dark) !important;
}

#slider-round {
  height: 10px !important;
}
#slider-round .noUi-handle {
  height: 18px !important;
  width: 18px !important;
  inset-block-start: -5px !important;
  inset-inline-end: -9px;
  /* half the width */
  border-radius: 50px !important;
  background-color: var(--color-primary) !important;
  border: 1px solid var(--color-white) !important;
}
#slider-round .noUi-handle:before, #slider-round .noUi-handle:after {
  display: none !important;
}

#slider-square {
  border-radius: 0 !important;
}
#slider-square .noUi-handle {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: var(--color-primary) !important;
  height: 18px !important;
  width: 18px !important;
  inset-block-start: -8px !important;
  inset-inline-end: -9px !important;
}
#slider-square .noUi-handle:before, #slider-square .noUi-handle:after {
  display: none !important;
}

#color1,
#color2,
#color3 {
  margin: 10px !important;
  display: inline-block !important;
  height: 200px !important;
}

#colorpicker {
  height: 240px !important;
  width: 310px !important;
  margin: 0 auto !important;
  padding: 10px !important;
  border: 1px solid var(--color-border) !important;
}

#result {
  margin: 68px 0 68px 64px;
  height: 100px;
  width: 100px;
  display: inline-block;
  vertical-align: top;
  color: var(--gray-5);
  background: var(--gray-5);
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 0 10px;
}
[dir=rtl] #result {
  margin: 68px 64px 68px 0;
}

#color1 .noUi-connect {
  background: var(--color-danger) !important;
}

#color2 .noUi-connect {
  background: var(--color-secondary) !important;
}

#color3 .noUi-connect {
  background: var(--color-primary) !important;
}

#slider-hide .noUi-tooltip {
  display: none;
}

#slider-hide .noUi-active .noUi-tooltip {
  display: block;
}

.c-1-color {
  background: var(--color-secondary) !important;
}

.c-2-color {
  background: var(--color-warning) !important;
}

.c-3-color {
  background: var(--color-info) !important;
}

.c-4-color {
  background: var(--color-danger) !important;
}

.c-5-color {
  background: var(--color-purple) !important;
}

#slider-toggle {
  height: 50px;
}

#slider-toggle.off .noUi-handle {
  border-color: var(--color-success) !important;
}

/*----------------------------------------*/
/*  nouislider css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.9 quill editor css
/*----------------------------------------*/
.ql-container {
  font-size: 14px;
  height: auto;
}

.ql-container.ql-bubble .ql-editor {
  overflow-y: auto !important;
}

.ql-bubble .ql-editor blockquote {
  border-inline-start: 4px solid var(--color-black-bg) !important;
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  border: 1px solid var(--color-border) !important;
}

.ql-snow .ql-picker {
  color: var(--color-black) !important;
}

.ql-snow .ql-stroke,
.ql-snow .ql-stroke.ql-fill {
  stroke: var(--color-black) !important;
}

.ql-snow .ql-fill {
  fill: var(--color-black) !important;
}

.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0px !important;
}

.ql-snow .ql-picker-options .ql-picker-item {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.ql-editor {
  min-height: 150px !important;
  overflow: visible !important;
}

.ql-snow .ql-formats {
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: var(--color-border) !important;
  border-radius: 8px !important;
}

.ql-snow .ql-picker-options {
  background-color: var(--color-white) !important;
}

.ql-snow .ql-tooltip {
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05) !important;
  color: var(--color-black) !important;
}

.ql-snow .ql-tooltip input[type=text] {
  border: 1px solid var(--color-border) !important;
  background-color: var(--color-black-bg) !important;
  color: var(--color-black) !important;
  outline: 0;
}

.ql-snow .ql-tooltip {
  transform: translatex(200px) !important;
  z-index: 100 !important;
}

.ql-toolbar.ql-snow {
  border-radius: 4.8px 4.8px 0 0 !important;
}

.ql-snow .ql-picker-label {
  padding-inline-start: 8px !important;
  padding-inline-end: 2px !important;
  color: var(--color-black) !important;
}

.ql-snow .ql-formats .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
}

.ql-container {
  border-radius: 0 0 4.8px 4.8px !important;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: var(--color-black) !important;
}

.ql-editor {
  text-align: start !important;
}

.ql-editor .ql-align-right {
  text-align: end !important;
}

.ql-container {
  font-family: var(--ff-body) !important;
}

.ql-snow .ql-editor {
  padding: 20px;
}

.ql-bubble {
  border: 1px solid var(--color-border) !important;
  border-radius: 4.8px !important;
}

.ql-editor li:not(.ql-direction-rtl)::before {
  margin-inline-start: -24px !important;
  margin-inline-end: 4.8px !important;
  text-align: start !important;
}

.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-inline-start: 24px !important;
}

.ql-toolbar.ql-snow .ql-formats {
  margin: 4px;
}

[dir=rtl] .ql-tooltip.ql-editing {
  inset-inline-start: 0 !important;
  top: 0 !important;
}

[dir=rtl] .ql-bubble .ql-toolbar .ql-formats:first-child {
  margin-inline-end: 12px;
}

[dir=rtl] .ql-bubble .ql-toolbar .ql-formats {
  margin: 8px 0px 8px 12px;
}

/*----------------------------------------*/
/*   quill editor css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.10 rating css
/*----------------------------------------*/
.antennaio {
  background-image: url("${file-1x}");
  background-repeat: no-repeat;
  color: #cecece;
  width: 280px;
  height: 60px;
  display: block;
  margin: auto;
  font-weight: 400;
  font-size: 0.6em;
  line-height: 5.5;
  letter-spacing: 2px;
  margin-bottom: 7em;
  -webkit-transition: color 2s;
  transition: color 2s;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .antennaio {
    background-image: url("${file-2x}");
    background-size: 60px 60px;
  }
}
.antennaio:hover {
  color: #757575;
}

.antennaio span {
  padding: 0 0 0 70px;
}

.bars {
  background-image: url("${file-1x}");
  width: 80px;
  height: 80px;
  display: block;
  margin: auto;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .bars {
    background-image: url("${file-2x}");
    background-size: 80px 80px;
  }
}
.section-intro {
  text-align: center;
  margin: 3em 0 4em 0;
  max-height: 9999px;
}

.section-intro h1 {
  line-height: 2.4;
}

.section-intro p {
  max-width: 560px;
  margin: auto;
}

.section-intro p.tagline {
  font-size: 0.8em;
  color: #a8a8a8;
  margin-bottom: 3em;
}

.section-examples {
  position: relative;
  background: #f8f8f8;
}

.section-docs {
  margin: 3em 0;
}

.docs {
  width: 800px;
  margin: auto;
  max-height: 9999px;
}

.docs .how-to-use header,
.docs .callbacks header,
.docs .download header {
  background: #4278F5;
}

.docs .how-to-use strong,
.docs .callbacks strong,
.docs .download strong {
  color: #4278F5;
}

.docs .how-to-use a,
.docs .callbacks a,
.docs .download a {
  color: #4278F5;
}

.docs .how-to-use a:hover,
.docs .callbacks a:hover,
.docs .download a:hover {
  color: #0b43c6;
}

.docs .how-to-use pre,
.docs .callbacks pre,
.docs .download pre {
  background: var(--color-white);
  border-inline-start: 2px solid #4278F5;
  padding: 0 2em;
}

.docs .how-to-use code,
.docs .callbacks code,
.docs .download code {
  font-family: "Source Code Pro", sans-serif;
  font-size: 0.9em;
  color: #4278F5;
}

.docs .configuration header,
.docs .faq header {
  background: #50E3C2;
}

.docs .configuration strong,
.docs .faq strong {
  color: #50E3C2;
}

.docs .configuration a,
.docs .faq a {
  color: #50E3C2;
}

.docs .configuration a:hover,
.docs .faq a:hover {
  color: #1cb18f;
}

.docs .configuration pre,
.docs .faq pre {
  background: var(--color-white);
  border-inline-start: 2px solid #50E3C2;
  padding: 0 2em;
}

.docs .configuration code,
.docs .faq code {
  font-family: "Source Code Pro", sans-serif;
  font-size: 0.9em;
  color: #50E3C2;
}

.docs .license header,
.docs .methods header {
  background: #EDB867;
}

.docs .license strong,
.docs .methods strong {
  color: #EDB867;
}

.docs .license a,
.docs .methods a {
  color: #EDB867;
}

.docs .license a:hover,
.docs .methods a:hover {
  color: #d58b19;
}

.docs .license pre,
.docs .methods pre {
  background: var(--color-white);
  border-inline-start: 2px solid #EDB867;
  padding: 0 2em;
}

.docs .license code,
.docs .methods code {
  font-family: "Source Code Pro", sans-serif;
  font-size: 0.9em;
  color: #EDB867;
}

.docs .instructions {
  padding: 2em 3em;
  background: #f8f8f8;
}

.docs .faq p {
  margin: 0 0 0.5em 0;
}

.docs .faq .question {
  margin-bottom: 2em;
}

.docs .faq .question:last-child {
  margin-bottom: 0;
}

.controls {
  position: absolute;
  top: -23px;
  inset-inline-start: 50%;
  margin-inline-start: -190px;
}

.controls a {
  display: block;
  width: 150px;
  background-color: #50E3C2;
  color: var(--color-white);
  float: left;
  padding: 0.3em 1em 0.5em 1em;
  text-decoration: none;
  text-align: center;
  font-weight: 400;
  -webkit-transition: background-color 2s;
  transition: background-color 2s;
}

.controls a:hover {
  background-color: #3adfba;
}

.controls a:focus {
  color: #d4f8f0;
  background-color: #199b7e;
}

.controls a.rating-enable {
  -webkit-border-top-left-radius: 999px;
  -webkit-border-bottom-left-radius: 999px;
  -moz-border-radius-topleft: 999px;
  -moz-border-radius-bottomleft: 999px;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.controls a.rating-disable {
  -webkit-border-top-right-radius: 999px;
  -webkit-border-bottom-right-radius: 999px;
  -moz-border-radius-topright: 999px;
  -moz-border-radius-bottomright: 999px;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.controls a:last-child {
  border-inline-start: 0;
}

.controls a.deactivated {
  background: #20c7a1;
  color: var(--color-white);
}

@media print {
  .controls,
  .github,
  .antennaio {
    display: none;
  }
  .section-intro {
    margin: 1em 0 2em 0;
  }
  .section-intro p.tagline {
    color: var(--color-black);
  }
  .section-examples {
    background: transparent;
  }
  .section-examples .examples {
    padding: 1em 0;
  }
  .section-docs {
    margin: 1em 0;
  }
  .docs .how-to-use a,
  .docs .callbacks a,
  .docs .download a,
  .docs .configuration a,
  .docs .faq a,
  .docs .license a,
  .docs .methods a {
    color: var(--color-black);
    text-decoration: none;
  }
  .docs .how-to-use a:hover,
  .docs .callbacks a:hover,
  .docs .download a:hover,
  .docs .configuration a:hover,
  .docs .faq a:hover,
  .docs .license a:hover,
  .docs .methods a:hover {
    color: var(--color-black);
  }
  .docs .how-to-use header,
  .docs .callbacks header,
  .docs .download header,
  .docs .configuration header,
  .docs .faq header,
  .docs .license header,
  .docs .methods header {
    background: transparent;
    color: var(--color-black);
  }
  .docs .how-to-use code,
  .docs .how-to-use strong,
  .docs .callbacks code,
  .docs .callbacks strong,
  .docs .download code,
  .docs .download strong,
  .docs .configuration code,
  .docs .configuration strong,
  .docs .faq code,
  .docs .faq strong,
  .docs .license code,
  .docs .license strong,
  .docs .methods code,
  .docs .methods strong {
    color: var(--color-black);
  }
  .docs .how-to-use pre,
  .docs .callbacks pre,
  .docs .download pre,
  .docs .configuration pre,
  .docs .faq pre,
  .docs .license pre,
  .docs .methods pre {
    border: none;
    padding: 0;
  }
  .docs .how-to-use .instructions,
  .docs .callbacks .instructions,
  .docs .download .instructions,
  .docs .configuration .instructions,
  .docs .faq .instructions,
  .docs .license .instructions,
  .docs .methods .instructions {
    background: transparent;
  }
}
.hidden {
  display: none !important;
  visibility: hidden;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

.box-example-1to10 .bd-wrapper {
  width: 210px;
  position: absolute;
  margin: 0px 0 0 -105px;
  inset-inline-start: 50%;
}

.box-example-movie .bd-wrapper {
  width: 250px;
  position: absolute;
  margin: 0px 0 0 -125px;
  inset-inline-start: 50%;
}

.box-example-square .bd-wrapper {
  width: 190px;
  position: absolute;
  margin: 0px 0 0 -95px;
  inset-inline-start: 50%;
}

.box-example-pill .bd-wrapper {
  width: 232px;
  position: absolute;
  margin: 0px 0 0 -116px;
  inset-inline-start: 50%;
}

.box-example-reversed .bd-wrapper {
  padding-top: 1.3em;
  width: 356px;
  position: absolute;
  margin: 0px 0 0 -178px;
  inset-inline-start: 50%;
}

.box-example-horizontal .bd-wrapper {
  width: 120px;
  position: absolute;
  margin: 0px 0 0 -60px;
  inset-inline-start: 50%;
}

.star-ratings h1 {
  font-size: 1.5em;
  line-height: 2;
  margin-top: 3em;
  color: #757575;
}

.star-ratings p {
  margin-bottom: 3em;
  line-height: 1.2;
}

.star-ratings h1,
.star-ratings p {
  text-align: center;
}

.star-ratings .stars {
  width: 220px;
  text-align: center;
}

.star-ratings .stars .title {
  font-size: 14px;
  color: var(--color-primary);
  line-height: 3;
}

.star-ratings .stars .clear-rating {
  padding-inline-start: 5px;
}

.star-ratings .stars select {
  width: 120px;
  font-size: 16px;
}

.star-ratings .stars-example-fontawesome,
.star-ratings .stars-example-css,
.star-ratings .stars-example-bootstrap {
  float: left;
}

.star-ratings .stars-example-fontawesome-o select {
  width: 200px;
}

.start-ratings-main {
  margin-bottom: 3em;
}

.box {
  width: 100%;
  float: left;
  margin: 1em 0;
}

.box .box-header {
  text-align: center;
  font-weight: 400;
  padding: 0.5em 0;
}

.box .box-body {
  padding-top: 2em;
  height: 85px;
  position: relative;
}

.box select {
  width: 120px;
  margin: 10px auto 0 auto;
  display: block;
  font-size: 16px;
}

.box-large .box-body {
  padding-top: 2em;
  height: 120px;
}

.box-orange .box-header {
  background-color: #EDB867;
  color: var(--color-white);
}

.box-orange .box-body {
  background-color: var(--color-white);
  border: 2px solid #f5d8ab;
  border-top: 0;
}

.box-green .box-header {
  background-color: #50E3C2;
  color: var(--color-white);
}

.box-green .box-body {
  background-color: var(--color-white);
  border: 2px solid #92eed9;
  border-top: 0;
}

.box-blue .box-header {
  background-color: #4278F5;
  color: var(--color-white);
}

.box-blue .box-body {
  background-color: var(--color-white);
  border: 2px solid #8bacf9;
  border-top: 0;
}

@media print {
  .star-ratings h1 {
    color: var(--color-black);
  }
  .star-ratings .stars .title {
    color: var(--color-black);
  }
  .box-orange .box-header,
  .box-green .box-header,
  .box-blue .box-header {
    background-color: transparent;
    color: var(--color-black);
  }
  .box-orange .box-body,
  .box-green .box-body,
  .box-blue .box-body {
    background-color: transparent;
    border: none;
  }
}
.bd-theme-fontawesome-stars .bd-widget {
  height: 28px;
  white-space: nowrap;
}

.bd-theme-fontawesome-stars .bd-widget a {
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  margin-inline-end: 2px;
  font-size: 26px;
}

.bd-theme-fontawesome-stars .bd-widget a:after {
  content: "\f186";
  color: #d2d2d2;
  font-family: var(--ff-remixicon);
}

.bd-theme-fontawesome-stars .bd-widget a.bd-active:after {
  color: var(--color-rating);
}

.bd-theme-fontawesome-stars .bd-widget a.bd-selected:after {
  color: var(--color-rating);
}

.bd-theme-fontawesome-stars .bd-widget .bd-current-rating {
  display: none;
}

.bd-theme-fontawesome-stars .bd-readonly a {
  cursor: default;
}

@media print {
  .bd-theme-fontawesome-stars .bd-widget a:after {
    content: "\f18b";
    color: var(--color-black);
    font-family: var(--ff-remixicon);
  }
  .bd-theme-fontawesome-stars .bd-widget a.bd-active:after,
  .bd-theme-fontawesome-stars .bd-widget a.bd-selected:after {
    content: "\f186";
    color: var(--color-black);
    font-family: var(--ff-remixicon);
  }
}
.bd-theme-bars-1to10 .bd-widget {
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.bd-theme-bars-1to10 .bd-widget a {
  display: block;
  width: 12px;
  padding: 5px 0;
  height: 28px;
  float: left;
  background-color: var(--gray-2);
  margin: 1px;
  text-align: center;
}

.bd-theme-bars-1to10 .bd-widget a.bd-active,
.bd-theme-bars-1to10 .bd-widget a.bd-selected {
  background-color: var(--color-rating);
}

.bd-theme-bars-1to10 .bd-widget .bd-current-rating {
  font-size: 20px;
  float: left;
  padding: 4px 20px 3px 20px;
  color: var(--color-black);
  font-weight: 400;
}

.bd-theme-bars-1to10 .bd-readonly a {
  cursor: default;
}

.bd-theme-bars-1to10 .bd-readonly a.bd-active,
.bd-theme-bars-1to10 .bd-readonly a.bd-selected {
  background-color: #8f8eee;
}

.bd-theme-bars-1to10 .bd-readonly .bd-current-rating {
  color: #8f8eee;
}

@media print {
  .bd-theme-bars-1to10 .bd-widget a {
    border: 1px solid var(--color-border);
    background: var(--color-white);
    height: 38px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .bd-theme-bars-1to10 .bd-widget a.bd-active,
  .bd-theme-bars-1to10 .bd-widget a.bd-selected {
    border: 1px solid var(--color-black);
    background: var(--color-white);
  }
  .bd-theme-bars-1to10 .bd-widget .bd-current-rating {
    color: var(--color-black);
  }
}
.bd-theme-bars-horizontal .bd-widget {
  width: 120px;
  white-space: nowrap;
}

.bd-theme-bars-horizontal .bd-widget a {
  display: block;
  width: 120px;
  height: 15px;
  background-color: var(--color-primary);
  margin: 1px;
}

.bd-theme-bars-horizontal .bd-widget a.bd-active,
.bd-theme-bars-horizontal .bd-widget a.bd-selected {
  background-color: var(--color-rating);
}

.bd-theme-bars-horizontal .bd-widget .bd-current-rating {
  width: 120px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: var(--color-rating);
}

.bd-theme-bars-horizontal .bd-readonly a {
  cursor: default;
}

.bd-theme-bars-horizontal .bd-readonly a.bd-active,
.bd-theme-bars-horizontal .bd-readonly a.bd-selected {
  background-color: #8f8eee;
}

.bd-theme-bars-horizontal .bd-readonly .bd-current-rating {
  color: #8f8eee;
}

@media print {
  .bd-theme-bars-horizontal .bd-widget a {
    border: 1px solid var(--color-border);
    background: var(--color-white);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .bd-theme-bars-horizontal .bd-widget a.bd-active,
  .bd-theme-bars-horizontal .bd-widget a.bd-selected {
    border: 1px solid var(--color-black);
    background: var(--color-white);
  }
  .bd-theme-bars-horizontal .bd-widget .bd-current-rating {
    color: var(--color-black);
  }
}
.bd-theme-bars-movie .bd-widget {
  height: 35px;
  white-space: nowrap;
}

.bd-theme-bars-movie .bd-widget a {
  display: block;
  width: 58px;
  height: 8px;
  float: left;
  background-color: var(--gray-2);
  margin: 1px;
}

.bd-theme-bars-movie .bd-widget a.bd-active,
.bd-theme-bars-movie .bd-widget a.bd-selected {
  background-color: var(--color-rating);
}

.bd-theme-bars-movie .bd-widget .bd-current-rating {
  clear: both;
  width: 240px;
  text-align: center;
  display: block;
  padding: 0.5em 0 0;
  color: var(--color-primary);
  font-weight: 400;
  font-size: 16px;
}

.bd-theme-bars-movie .bd-readonly a {
  cursor: default;
}

.bd-theme-bars-movie .bd-readonly a.bd-active,
.bd-theme-bars-movie .bd-readonly a.bd-selected {
  background-color: #8f8eee;
}

.bd-theme-bars-movie .bd-readonly .bd-current-rating {
  color: #8f8eee;
}

@media print {
  .bd-theme-bars-movie .bd-widget a {
    border: 1px solid var(--color-border);
    background: var(--color-white);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .bd-theme-bars-movie .bd-widget a.bd-active,
  .bd-theme-bars-movie .bd-widget a.bd-selected {
    border: 1px solid var(--color-black);
    background: var(--color-white);
  }
  .bd-theme-bars-movie .bd-widget .bd-current-rating {
    color: var(--color-black);
  }
}
.bd-theme-bars-pill .bd-widget {
  white-space: nowrap;
}

.bd-theme-bars-pill .bd-widget a {
  padding: 7px 15px;
  background-color: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  font-size: 14px;
  line-height: 3;
  text-align: center;
  font-weight: 400;
}

.bd-theme-bars-pill .bd-widget a:first-child {
  -webkit-border-top-left-radius: 999px;
  -webkit-border-bottom-left-radius: 999px;
  -moz-border-radius-topleft: 999px;
  -moz-border-radius-bottomleft: 999px;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.bd-theme-bars-pill .bd-widget a:last-child {
  -webkit-border-top-right-radius: 999px;
  -webkit-border-bottom-right-radius: 999px;
  -moz-border-radius-topright: 999px;
  -moz-border-radius-bottomright: 999px;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.bd-theme-bars-pill .bd-widget a.bd-active,
.bd-theme-bars-pill .bd-widget a.bd-selected {
  background-color: var(--color-rating);
  color: var(--color-white);
}

.bd-theme-bars-pill .bd-readonly a {
  cursor: default;
}

.bd-theme-bars-pill .bd-readonly a.bd-active,
.bd-theme-bars-pill .bd-readonly a.bd-selected {
  background-color: #8f8eee;
}

@media print {
  .bd-theme-bars-pill .bd-widget a {
    border: 1px solid var(--color-border);
    border-inline-start: none;
    background: var(--color-white);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .bd-theme-bars-pill .bd-widget a.bd-active,
  .bd-theme-bars-pill .bd-widget a.bd-selected {
    border: 1px solid var(--color-black);
    border-inline-start: none;
    background: var(--color-white);
    color: var(--color-black);
  }
  .bd-theme-bars-pill .bd-widget a:first-child {
    border-inline-start: 1px solid var(--color-black);
  }
}
.bd-theme-bars-reversed .bd-widget {
  height: 25px;
  white-space: nowrap;
}

.bd-theme-bars-reversed .bd-widget a {
  display: block;
  width: 22px;
  height: 22px;
  float: left;
  background-color: var(--gray-2);
  margin: 1px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-rating);
  text-align: center;
}

.bd-theme-bars-reversed .bd-widget a.bd-active,
.bd-theme-bars-reversed .bd-widget a.bd-selected {
  background-color: var(--color-rating);
  color: var(--color-white);
}

.bd-theme-bars-reversed .bd-widget .bd-current-rating {
  line-height: 1.3;
  float: left;
  padding: 0 20px 0 20px;
  color: var(--color-primary);
  font-size: 17px;
  font-weight: 400;
}

.bd-theme-bars-reversed .bd-readonly a {
  cursor: default;
}

.bd-theme-bars-reversed .bd-readonly a.bd-active,
.bd-theme-bars-reversed .bd-readonly a.bd-selected {
  background-color: #8f8eee;
}

.bd-theme-bars-reversed .bd-readonly .bd-current-rating {
  color: #8f8eee;
}

@media print {
  .bd-theme-bars-reversed .bd-widget a {
    border: 1px solid var(--color-border);
    background: var(--color-white);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .bd-theme-bars-reversed .bd-widget a.bd-active,
  .bd-theme-bars-reversed .bd-widget a.bd-selected {
    border: 1px solid var(--color-black);
    background: var(--color-white);
  }
  .bd-theme-bars-reversed .bd-widget .bd-current-rating {
    color: var(--color-black);
  }
}
.bd-theme-bars-square .bd-widget {
  height: 40px;
  white-space: nowrap;
}

.bd-theme-bars-square .bd-widget a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  border: 2px solid var(--color-border);
  background-color: var(--color-white);
  margin: 2px;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
  color: var(--color-black);
  font-weight: 600;
}

.bd-theme-bars-square .bd-widget a.bd-active,
.bd-theme-bars-square .bd-widget a.bd-selected {
  border: 2px solid var(--color-rating);
  color: var(--color-black);
  background-color: var(--color-rating);
}

.bd-theme-bars-square .bd-widget .bd-current-rating {
  clear: both;
  width: 330px;
  text-align: center;
  font-weight: 600;
  display: block;
  padding: 0.5em 0;
  color: var(--color-black);
}

.bd-theme-bars-square .bd-readonly a {
  cursor: default;
}

.bd-theme-bars-square .bd-readonly a.bd-active,
.bd-theme-bars-square .bd-readonly a.bd-selected {
  border: 2px solid var(--color-rating);
  color: #8f8eee;
}

@media print {
  .bd-theme-bars-square .bd-widget a {
    border: 2px solid var(--color-border);
    color: var(--color-border);
  }
  .bd-theme-bars-square .bd-widget a.bd-active,
  .bd-theme-bars-square .bd-widget a.bd-selected {
    border: 2px solid var(--color-black);
    color: var(--color-black);
  }
}
.bd-theme-bootstrap-stars .bd-widget {
  height: 28px;
  white-space: nowrap;
}

.bd-theme-bootstrap-stars .bd-widget a {
  font: normal normal normal 18px/1 "Glyphicons Halflings";
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  margin-inline-end: 2px;
}

.bd-theme-bootstrap-stars .bd-widget a:after {
  content: "\e006";
  color: #d2d2d2;
}

.bd-theme-bootstrap-stars .bd-widget a.bd-active:after {
  color: #EDB867;
}

.bd-theme-bootstrap-stars .bd-widget a.bd-selected:after {
  color: #EDB867;
}

.bd-theme-bootstrap-stars .bd-widget .bd-current-rating {
  display: none;
}

.bd-theme-bootstrap-stars .bd-readonly a {
  cursor: default;
}

@media print {
  .bd-theme-bootstrap-stars .bd-widget a:after {
    content: "\e007";
    color: var(--color-black);
  }
  .bd-theme-bootstrap-stars .bd-widget a.bd-active:after,
  .bd-theme-bootstrap-stars .bd-widget a.bd-selected:after {
    content: "\e006";
    color: var(--color-black);
  }
}
.bd-theme-css-stars .bd-widget {
  height: 28px;
  white-space: nowrap;
}

.bd-theme-css-stars .bd-widget a {
  text-decoration: none;
  height: 18px;
  width: 18px;
  float: left;
  font-size: 23px;
  margin-inline-end: 5px;
}

.bd-theme-css-stars .bd-widget a:after {
  content: "★";
  color: #d2d2d2;
}

.bd-theme-css-stars .bd-widget a.bd-active:after {
  color: #EDB867;
}

.bd-theme-css-stars .bd-widget a.bd-selected:after {
  color: #EDB867;
}

.bd-theme-css-stars .bd-widget .bd-current-rating {
  display: none;
}

.bd-theme-css-stars .bd-readonly a {
  cursor: default;
}

@media print {
  .bd-theme-css-stars .bd-widget a:after {
    content: "☆";
    color: var(--color-black);
  }
  .bd-theme-css-stars .bd-widget a.bd-active:after,
  .bd-theme-css-stars .bd-widget a.bd-selected:after {
    content: "★";
    color: var(--color-black);
  }
}
.bd-theme-fontawesome-stars-o .bd-widget {
  height: 28px;
  white-space: nowrap;
}

.bd-theme-fontawesome-stars-o .bd-widget a {
  font: normal normal normal 20px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  margin-inline-end: 2px;
  font-size: 26px;
}

.bd-theme-fontawesome-stars-o .bd-widget a:after {
  content: "\f18b";
  color: #d2d2d2;
  font-family: var(--ff-remixicon);
}

.bd-theme-fontawesome-stars-o .bd-widget a.bd-active:after {
  content: "\f186";
  color: var(--color-rating);
  font-family: var(--ff-remixicon);
}

.bd-theme-fontawesome-stars-o .bd-widget a.bd-selected:after {
  content: "\f186";
  color: var(--color-rating);
  font-family: var(--ff-remixicon);
}

.bd-theme-fontawesome-stars-o .bd-widget a.bd-fractional:after {
  /* content: '\f123'; */
  color: var(--color-rating);
}

.bd-theme-fontawesome-stars-o .bd-widget .bd-current-rating {
  display: none;
}

.bd-theme-fontawesome-stars-o .bd-readonly a {
  cursor: default;
}

.bd-theme-fontawesome-stars-o .bd-reverse a.bd-fractional {
  display: inline-block;
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -webkit-filter: FlipH;
  filter: FlipH;
  -ms-filter: "FlipH";
}

@media print {
  .bd-theme-fontawesome-stars-o .bd-widget a:after {
    content: "\f18b";
    color: var(--color-black);
    font-family: var(--ff-remixicon);
  }
  .bd-theme-fontawesome-stars-o .bd-widget a.bd-active:after,
  .bd-theme-fontawesome-stars-o .bd-widget a.bd-selected:after {
    content: "\f186";
    color: var(--color-black);
    font-family: var(--ff-remixicon);
  }
  .bd-theme-fontawesome-stars-o .bd-widget a.bd-fractional:after {
    content: "\f123";
    color: var(--color-black);
  }
}
/*----------------------------------------*/
/*  rating css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.11 select2 css
/*----------------------------------------*/
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 6px 12px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  padding-inline-end: 4px !important;
  margin-inline-end: 6px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding-inline-start: 5px !important;
}

.select2.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-inline-start: 12px !important;
  padding-inline-end: 20px !important;
  color: var(--color-heading) !important;
  line-height: 36px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
  height: 36px !important;
}

.select2-container--default .select2-selection--single {
  background-color: var(--color-card-bg) !important;
  border: 0px solid var(--color-border) !important;
  border-radius: 6px !important;
}

.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
}

.select2-dropdown {
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--gray-3) !important;
  color: var(--color-heading) !important;
}

.select2-results__option--selectable {
  font-size: 14px;
  color: var(--color-heading);
}

.select2-container--default .select2-results__option--selected {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.select2-container--default .select2-results__option--selected.select2-results__option--highlighted {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.select2-search__field {
  background-color: var(--color-white) !important;
  color: var(--color-heading) !important;
}
.select2-search__field:focus-visible {
  outline: none !important;
}

.select2-container--default .select2-selection--multiple {
  background-color: var(--color-card-bg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
  height: 36px;
}

.select2-container .select2-selection--multiple {
  min-height: 36px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--primary-rgba-3) !important;
  color: var(--color-heading) !important;
  border: none !important;
  border-radius: 4px !important;
  margin-top: 0 !important;
  height: 24px;
  display: flex;
  align-items: center;
  font-size: 12px;
}

.select2-selection--multiple .select2-search__field {
  background-color: transparent !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border-inline-end: 1px solid var(--color-border) !important;
  color: var(--color-heading) !important;
  top: -4.8px !important;
  font-weight: 500 !important;
  font-size: 18px !important;
}

.select2-selection--multiple .select2-selection__choice__display {
  font-size: 12px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
  color: var(--color-danger) !important;
}

.select2-results__option span img,
.select2-selection__rendered span img {
  width: 23.2px;
  height: 23.2px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  margin-top: -3px;
}

.select2-container .select2-search--inline .select2-search__field {
  margin-top: 0 !important;
}

.select2-container--disabled.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--disabled .select2-selection.select2-selection--multiple {
  background-color: var(--color-body-bg) !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  font-weight: 400 !important;
  height: 20px !important;
  font-size: 25px !important;
  width: 20px !important;
  position: absolute !important;
  right: 30px !important;
}

.select2-selection__clear {
  color: var(--color-body);
}

.select2-dropdown {
  z-index: 99999 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  right: 10px !important;
}

.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow {
  left: 10px !important;
  right: auto !important;
}

.select2-container--open .select2-dropdown--above {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  overflow: hidden;
}

.select2-container--open .select2-dropdown--below {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  overflow: hidden;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  transform: translateY(-50%) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--gray-3);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary);
  color: var(--color-white);
}

[dir=rtl] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  right: 0 !important;
  left: inherit !important;
}

[dir=rtl] .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding-inline-end: 5px !important;
  padding-inline-start: inherit !important;
}

[dir=rtl] .select2-container--default .select2-selection--single .select2-selection__clear {
  margin-inline-start: 20px !important;
  padding-inline-start: 0px !important;
}

/*----------------------------------------*/
/*  select2 css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.12 shepherd css
/*----------------------------------------*/
.shepherd-logo {
  width: 220px;
  min-width: 220px;
  margin: 0 auto;
}
.shepherd-logo img {
  width: 100%;
  height: 100%;
}
.shepherd-logo .dark-logo {
  display: none;
}
[data-theme-mode=dark] .shepherd-logo .light-logo {
  display: none;
}
[data-theme-mode=dark] .shepherd-logo .dark-logo {
  display: block;
}

.shepherd-modal-overlay-container.shepherd-modal-is-visible {
  opacity: 0.15 !important;
}

.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
  color: var(--custom-black) !important;
}

.shepherd-button {
  background: rgb(var(--success-rgb)) !important;
  color: #fff !important;
  padding: 8px 16px !important;
}

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

.shepherd-header {
  background-color: var(--gray-2) !important;
  padding: 15px 12px 8px 12px !important;
}

.shepherd-title {
  font-weight: 500 !important;
}

.shepherd-text {
  font-size: 13px !important;
}

.shepherd-title {
  font-size: 16px;
  color: var(--color-heading) !important;
}

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

.shepherd-arrow:before {
  background: var(--color-white) !important;
}

.shepherd-arrow,
.shepherd-arrow::before {
  content: "\ea75";
  font-family: remixicon;
  font-size: 24px;
  z-index: 1;
  background-color: transparent !important;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  color: var(--color-primary);
}

.shepherd-element[data-popper-placement^=bottom] > .shepherd-arrow {
  top: -15px;
}

.shepherd-enabled,
.shepherd-target {
  color: var(--color-black) !important;
  background-color: var(--color-white) !important;
}

.shepherd-element[data-popper-placement^=top] > .shepherd-arrow {
  bottom: 5px !important;
}
.shepherd-element[data-popper-placement^=top] > .shepherd-arrow::before {
  content: "\ea4b" !important;
  font-family: remixicon;
  font-size: 24px;
  z-index: 1;
  background-color: transparent !important;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  color: var(--color-primary);
}

/*----------------------------------------*/
/*  shepherd css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.13 slim select css
/*----------------------------------------*/
.ss-main {
  padding: inherit !important;
  min-height: 36px !important;
  background-color: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-placeholder) !important;
}

.ss-content .ss-list .ss-option {
  transition: var(--transition) !important;
}

.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
  color: var(--color-white) !important;
  background-color: var(--color-primary) !important;
}

.ss-content .ss-list .ss-option:hover {
  color: var(--color-heading) !important;
  background-color: var(--gray-3) !important;
}

.ss-content .ss-search input:focus {
  box-shadow: none !important;
}

.ss-content .ss-search {
  padding: 0 !important;
  margin-bottom: 10px;
}

.ss-main:focus {
  border-color: var(--primary-rgba-5) !important;
  background-color: var(--color-white) !important;
  box-shadow: 0 0 4px var(--primary-rgba-5) !important;
  color: var(--color-heading) !important;
}

.ss-content .ss-list .ss-option {
  padding: 6px 12px !important;
}

.ss-main .ss-arrow {
  width: 10px !important;
  height: 10px !important;
}

.ss-main .ss-values {
  align-items: center !important;
}

.ss-main .ss-values .ss-value {
  color: var(--color-heading) !important;
}

.ss-main .ss-values .ss-value {
  background-color: var(--gray-3) !important;
  height: 26px !important;
  color: var(--color-heading) !important;
}

.ss-main .ss-values .ss-value .ss-value-text {
  color: var(--color-heading) !important;
}

.ss-main .ss-values .ss-value .ss-value-delete {
  border-inline-start: solid 1px var(--color-border) !important;
}

.ss-main .ss-values .ss-value .ss-value-delete svg path {
  stroke: var(--color-heading) !important;
  transition: all 0.3s ease-in-out;
}

.ss-main .ss-values .ss-value .ss-value-delete:hover svg path {
  stroke: var(--color-danger) !important;
}

/*----------------------------------------*/
/*  slim select css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.14 sortable css 
/*----------------------------------------*/
.tinted {
  background-color: var(--color-primary);
  color: var(--color-black);
}
[data-theme-mode=dark] .tinted {
  color: var(--color-black);
}

.filtered {
  color: var(--color-black);
}
[data-theme-mode=dark] .filtered {
  color: var(--color-black);
}

.grid-example {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.grid-square {
  text-align: center;
  width: 127px;
  height: 127px;
  background-color: var(--color-card-bg);
  box-shadow: var(--shadow);
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-theme-mode=dark] .grid-square {
  color: var(--color-white);
  background-color: var(--color-black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .grid-square {
    width: 98px;
    height: 98px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .grid-square {
    width: 100px;
    height: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .grid-square {
    width: 110px;
    height: 110px;
  }
}
@media (max-width: 575px) {
  .grid-square {
    width: 98px;
    height: 98px;
  }
}

.nested-sortable,
.nested-1,
.nested-2,
.nested-3 {
  margin-top: 5px;
}

.nested-1 {
  background-color: var(--gray-4);
}

.nested-2 {
  background-color: var(--gray-3);
}

.nested-3 {
  background-color: var(--gray-2);
}

/*----------------------------------------*/
/*  sortable css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.15 sweetalert2 css
/*----------------------------------------*/
.swal2-confirm {
  font-size: 14px !important;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flexbox;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 7.5px 20px !important;
  transition: all 0.3s linear !important;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  white-space: nowrap !important;
  gap: 0 6px !important;
  font-weight: var(--fw-medium) !important;
  border: none !important;
  background-color: var(--color-primary);
}
.swal2-confirm:hover {
  background-color: var(--color-secondary);
}

.swal2-cancel.swal2-styled {
  font-size: 14px !important;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flexbox;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 7.5px 20px !important;
  transition: all 0.3s linear !important;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -o-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  white-space: nowrap !important;
  gap: 0 6px !important;
  font-weight: var(--fw-medium) !important;
  border: none !important;
  background-color: var(--color-danger);
}

.swal2-container .swal2-title {
  font-size: 22px;
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}
.swal2-container .swal2-html-container {
  color: var(--color-black) !important;
}
.swal2-container .swal2-popup {
  background-color: var(--color-white);
}

.swal2-modal {
  font-size: 14px;
}

.swal2-icon.swal2-question {
  border-color: #1493FF;
  color: #1493FF;
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
  background-color: #29DA82;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(41, 218, 130, 0.3);
}
.swal2-icon.swal2-warning {
  border-color: #FF830F;
  color: #FF830F;
}

.swal2-styled:focus {
  box-shadow: none;
}

.swal2-progress-steps .swal2-progress-step {
  background: #4F46E5;
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
  background: #4F46E5;
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step, .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
  background: rgba(79, 70, 229, 0.3);
}
.swal2-progress-steps .swal2-progress-step-line {
  background: #4F46E5;
}

.swal2-loader {
  border-color: #4F46E5 transparent #4F46E5 transparent;
}

/*----------------------------------------*/
/*  sweetalert2 css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.16 swiper css 
/*----------------------------------------*/
.swiper-button-next::after,
.swiper-button-prev::after {
  font-family: remixicon;
  font-size: 26px;
  transition: var(--transition);
}

.swiper-button-next::after {
  content: "\ea6e" !important;
}

.swiper-button-prev::after {
  content: "\ea64" !important;
}

.swiper-button-next,
.swiper-button-prev {
  height: 32px;
  width: 32px;
  color: var(--color-white);
  background-color: var(--primary-rgba-3);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 8px;
  transition: var(--transition);
}
[data-theme-mode=dark] .swiper-button-next,
[data-theme-mode=dark] .swiper-button-prev {
  color: var(--color-black);
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: var(--color-primary);
}

.swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background-color: var(--gray-5);
  opacity: 1;
  border-radius: 10px;
}

.swiper-pagination-bullet-active {
  background: var(--color-primary);
  width: 20px;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--color-info);
}

.swiper-pagination-fraction {
  color: var(--color-white);
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.swiper-pagination-fraction .swiper-pagination-current {
  font-size: 20px;
}

.swiperPaginationCustom .swiper-pagination-bullet {
  height: 25px;
  width: 25px;
  line-height: 25px;
  border-radius: 50px;
  background-color: var(--color-white);
  opacity: 0.5;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.swiperPaginationCustom .swiper-pagination-bullet-active {
  opacity: 1;
}

.swiper-scrollbar {
  background-color: rgba(220, 229, 240, 0.4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: 1.2px;
  height: 6px !important;
}
.swiper-scrollbar .swiper-scrollbar-drag {
  background-color: var(--color-white);
}

.swiperPaginationVertical {
  height: 300px;
}

.swiperNestedVertical {
  height: 300px;
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  width: 25px;
}

.swiperScrollContainer .swiper-slide {
  font-size: 18px;
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 30px;
}

.slidesPerViewAuto .swiper-slide {
  width: 80%;
}

.swiperCenteredSlidesAuto .swiper-slide {
  width: 60%;
}

.swiperGrid.swiper {
  width: 100%;
  height: 100%;
  margin-inline-start: auto;
  margin-inline-end: auto;
}
.swiperGrid .swiper-slide {
  text-align: center !important;
  font-size: 18px !important;
  background: #333 !important;
  height: calc((100% - 30px) / 2) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.swiperEffectFade .swiper-slide img {
  width: 100%;
}

.swiperEffectCube .swiper-slide {
  width: 300px;
  height: 492px;
}
.swiperEffectCube .swiper-slide img {
  width: 100%;
  height: 100%;
}

.swiperEffectCoverFlow .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}
.swiperEffectCoverFlow .swiper-slide img {
  width: 100%;
  height: 100%;
}

.swiperEffectFlip .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 320px;
  height: 320px;
}
.swiperEffectFlip .swiper-slide img {
  width: 100%;
  height: 100%;
}

.swiperEffectCards.swiper {
  width: 240px;
  height: 320px;
}
.swiperEffectCards .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font-size: 22px;
  font-weight: bold;
  color: var(--color-white);
}
.swiperEffectCards .swiper-slide:nth-child(1n) {
  background-color: rgb(206, 17, 17);
}
.swiperEffectCards .swiper-slide:nth-child(2n) {
  background-color: rgb(0, 140, 255);
}
.swiperEffectCards .swiper-slide:nth-child(3n) {
  background-color: rgb(10, 184, 111);
}
.swiperEffectCards .swiper-slide:nth-child(4n) {
  background-color: rgb(211, 122, 7);
}
.swiperEffectCards .swiper-slide:nth-child(5n) {
  background-color: rgb(118, 163, 12);
}
.swiperEffectCards .swiper-slide:nth-child(6n) {
  background-color: rgb(180, 10, 47);
}
.swiperEffectCards .swiper-slide:nth-child(7n) {
  background-color: rgb(35, 99, 19);
}
.swiperEffectCards .swiper-slide:nth-child(8n) {
  background-color: rgb(0, 68, 255);
}
.swiperEffectCards .swiper-slide:nth-child(9n) {
  background-color: rgb(218, 12, 218);
}
.swiperEffectCards .swiper-slide:nth-child(10n) {
  background-color: rgb(54, 94, 77);
}

.swiperEffectCreative.swiper {
  margin: 40px auto;
  width: 320px;
  height: 240px;
}
.swiperEffectCreative .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: var(--color-white);
}
.swiperEffectCreative .swiper-slide:nth-child(1n) {
  background-color: rgb(206, 17, 17);
}
.swiperEffectCreative .swiper-slide:nth-child(2n) {
  background-color: rgb(0, 140, 255);
}
.swiperEffectCreative .swiper-slide:nth-child(3n) {
  background-color: rgb(10, 184, 111);
}
.swiperEffectCreative .swiper-slide:nth-child(4n) {
  background-color: rgb(211, 122, 7);
}
.swiperEffectCreative .swiper-slide:nth-child(5n) {
  background-color: rgb(118, 163, 12);
}
.swiperEffectCreative .swiper-slide:nth-child(6n) {
  background-color: rgb(180, 10, 47);
}
.swiperEffectCreative .swiper-slide:nth-child(7n) {
  background-color: rgb(35, 99, 19);
}
.swiperEffectCreative .swiper-slide:nth-child(8n) {
  background-color: rgb(0, 68, 255);
}
.swiperEffectCreative .swiper-slide:nth-child(9n) {
  background-color: rgb(218, 12, 218);
}
.swiperEffectCreative .swiper-slide:nth-child(10n) {
  background-color: rgb(54, 94, 77);
}

.mousewheelControl {
  height: 300px;
}

.autoplay-progress {
  position: absolute;
  inset-inline-end: 16px;
  bottom: 16px;
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--color-primary);
}

.autoplay-progress svg {
  --progress: 0;
  position: absolute;
  inset-inline-start: 0;
  top: 0px;
  z-index: 10;
  width: 100%;
  height: 100%;
  stroke-width: 4px;
  stroke: var(--color-primary);
  fill: none;
  stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
  stroke-dasharray: 125.6;
  transform: rotate(-90deg);
}

.thumbsGalleryThumb .swiper-slide {
  width: 100%;
  height: 100%;
  opacity: 0.4;
  cursor: pointer;
  border: 1px solid var(--color-primary);
  padding: 5px;
}
.thumbsGalleryThumb .swiper-slide img {
  width: 100%;
  height: 100%;
}
.thumbsGalleryThumb .swiper-slide-thumb-active {
  opacity: 1;
}

.swiperParallax .swiper-slide {
  font-size: 18px;
  color: var(--color-white);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 60px;
  height: 720px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .swiperParallax .swiper-slide {
    height: 500px;
    padding: 20px 30px;
  }
}
.swiperParallax .parallax-bg {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 130%;
  height: 720px;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .swiperParallax .parallax-bg {
    height: 500px;
  }
}
.swiperParallax .swiper-slide .title {
  font-size: 41px;
  font-weight: 300;
}
.swiperParallax .swiper-slide .align-center {
  font-size: 21px;
}
.swiperParallax .swiper-slide .text {
  font-size: 14px;
  max-width: 400px;
  line-height: 1.3;
}
.swiperParallax .swiper-slide p {
  color: var(--color-white);
}

.swiperZoom .swiper-slide {
  overflow: hidden;
}
.swiperZoom .swiper-slide img {
  width: 80%;
}

/*----------------------------------------*/
/*  swiper css end
/*----------------------------------------*/
/*----------------------------------------*/
/*  4.17 tagify css
/*----------------------------------------*/
.tagify {
  --tag-inset-shadow-size: 0 !important;
  padding: 0px 8px !important;
  height: 36px !important;
}

.tagify__tag {
  background-color: var(--gray-3);
  border-radius: 4px !important;
}

.tagify.tagify--mix.form-control {
  padding: 8px;
}

.tagify__tag > div::before {
  box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--gray-3) inset !important;
}

.tagify:hover:not(.tagify--focus):not(.tagify--invalid) {
  border-color: var(--color-border) !important;
}

.tagify {
  border-color: var(--color-border) !important;
}
.tagify.tagify--focus {
  border-color: var(--primary-rgba-5) !important;
  box-shadow: 0 0 4px var(--primary-rgba-5) !important;
}

.tagify__tag {
  margin-inline: 5px 0 !important;
  margin-block: 5px !important;
}

.tagify__tag > div {
  font-size: 12px;
  padding: 2px 5px;
}

.tagify__input {
  margin: 2px !important;
}

.tagify {
  --tags-disabled-bg: var(--gray-3) !important;
  --tag-bg: var(--gray-3) !important;
  --tag-hover: rgba(var(--primary-rgb), 0.15) !important;
  --tag-text-color: var(--color-heading) !important;
  --tag-text-color--edit: var(--color-heading) !important;
  --tag-invalid-color: rgba(var(--danger-rgb), 0.5) !important;
  --tag-invalid-bg: rgba(var(--danger-rgb), 0.2) !important;
  --tag-remove-bg: rgba(var(--danger-rgb), 0.1) !important;
  --tag-remove-btn-color: var(--color-heading) !important;
  --tag-remove-btn-bg--hover: rgba(var(--danger-rgb), 0.3) !important;
  --tag-pad: 4px 8px !important;
}

.tagify__tag__removeBtn {
  margin: 0 4px !important;
}

.tagify__tag:focus div::before,
.tagify__tag:hover:not([readonly]) div::before {
  --tag-bg-inset: 0px !important;
}

.tagify__tag-text {
  padding: 2px;
}

.tags-look {
  border: 1px solid var(--color-border) !important;
  background-color: var(--color-white) !important;
}
.tags-look .tagify__dropdown__item {
  display: inline-block;
  vertical-align: middle;
  border-radius: 3px;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  margin: 4px;
  font-size: 14px;
  color: var(--color-body);
  transition: 0s;
}

.tags-look .tagify__dropdown__item--active {
  color: var(--color-body);
}

.tags-look .tagify__dropdown__item:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.tags-look .tagify__dropdown__item--hidden {
  max-width: 0;
  max-height: initial;
  padding: 5px 0;
  margin: 4px 0;
  white-space: nowrap;
  text-indent: -20px;
  border: 0;
}

.tagify__dropdown {
  border-top: 1px solid var(--color-primary) !important;
}

/* Suggestions items */
.tagify__tag .tagify__tag__avatar-wrap {
  width: 22px;
  height: 22px;
  white-space: normal;
  border-radius: 50%;
  margin-inline-end: 5px;
  transition: 0.12s ease-out;
  vertical-align: middle;
}

.tagify__tag img {
  width: 100%;
  vertical-align: top;
}

.tagify__dropdown.users-list .tagify__dropdown__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 16px;
  grid-template-areas: "avatar name" "avatar email";
}

.tagify__dropdown.users-list header.tagify__dropdown__item {
  grid-template-areas: "add remove-tags" "remaning .";
}

.tagify__dropdown.users-list .tagify__dropdown__item:hover .tagify__dropdown__item__avatar-wrap {
  transform: scale(1.2);
}

.tagify__dropdown.users-list .tagify__dropdown__item__avatar-wrap {
  grid-area: avatar;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gray-3);
  transition: 0.1s ease-out;
}

.tagify__dropdown.users-list img {
  width: 100%;
  vertical-align: top;
}

.tagify__dropdown.users-list header.tagify__dropdown__item > div,
.tagify__dropdown.users-list .tagify__dropdown__item strong {
  grid-area: name;
  width: 100%;
  align-self: center;
}

.tagify__dropdown.users-list span {
  grid-area: email;
  width: 100%;
  font-size: 14px;
  opacity: 0.6;
}

.tagify__dropdown.users-list .tagify__dropdown__item__addAll {
  border-bottom: 1px solid var(--color-border);
  gap: 0;
}

.tagify__dropdown.users-list .remove-all-tags {
  grid-area: remove-tags;
  justify-self: self-end;
  font-size: 14px;
  padding: 4px 5px;
  border-radius: 3px;
  user-select: none;
}

.tagify__dropdown.users-list .remove-all-tags:hover {
  color: var(--color-white);
  background: var(--color-warning);
}

/* Tags items */
#users-list .tagify__tag {
  white-space: nowrap;
}

#users-list .tagify__tag img {
  width: 100%;
  vertical-align: top;
  pointer-events: none;
}

#users-list .tagify__tag:hover .tagify__tag__avatar-wrap {
  transform: scale(1.6) translateX(-10%);
}

#users-list .tagify__tag .tagify__tag__avatar-wrap {
  width: 16px;
  height: 16px;
  white-space: normal;
  border-radius: 50%;
  background: var(--gray-3);
  margin-inline-end: 5px;
  transition: 0.12s ease-out;
}

.users-list .tagify__dropdown__itemsGroup:empty {
  display: none;
}

.users-list .tagify__dropdown__itemsGroup::before {
  content: attr(data-title);
  display: inline-block;
  font-size: 14px;
  padding: 4px 6px;
  margin: var(--tagify-dd-item-pad);
  font-style: italic;
  border-radius: 4px;
  background: #29DA82;
  color: var(--color-white);
  font-weight: 600;
}

.users-list .tagify__dropdown__itemsGroup:not(:first-of-type) {
  border-top: 1px solid var(--color-border);
}

.tagify__dropdown__wrapper {
  border: 0 !important;
  box-shadow: none !important;
  background-color: var(--color-white) !important;
}

.tagify__dropdown {
  padding: 4px !important;
  border-bottom-width: 0;
  background: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 6px !important;
}

.tagify__dropdown__item--active {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.remove-all-tags {
  color: var(--color-white);
}

.tagify--mix .tagify__input {
  padding: 0 !important;
  margin: 0 !important;
}

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

/*----------------------------------------*/
/*  tagify css end
/*----------------------------------------*/
/*# sourceMappingURL=../maps/main.css.map */