@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
:root {
  --primary-color: #316f46;
  --primary-color-50: #966752;
  --secondary-color: #d3ad6c;
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #80c04d;/*198754*/
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-brown: #794A36;
  --bs-brown-lite: #9F6E5A;


  --primary-rgb: 109 68 50;
  --secondary-rgb: 215 181 109;
  --bs-success-rgb: 25 135 84;
  --bs-info-rgb: 13 202 240;
  --bs-warning-rgb: 255 193 7;
  --bs-danger-rgb: 220 53 69;
  --bs-light-rgb: 248 249 250;
  --bs-dark-rgb: 33 37 41;

  --primary-rgba: 109, 68, 50;
  --secondary-rgba: 215, 181, 109;
  --bs-success-rgba: 25, 135, 84;
  --bs-info-rgba: 13, 202, 240;
  --bs-warning-rgba: 255, 193, 7;
  --bs-danger-rgba: 220, 53, 69;
  --bs-light-rgba: 248, 249, 250;
  --bs-dark-rgba: 33, 37, 41;

  --header-bg: #316f46;
  --main-bg: nav-item #e5eaf2;

  --g-primary: linear-gradient(
    to right bottom,
    #1b1059,
    #002e70,
    #004780,
    #005e89,
    #1a7590
  );

  --loader-color: #ffffffb5;
  --heading-color: #316f46;
  --white-color: #fff;
  --black-color: #000;
  --input-border-color: #316f46;

  --box-shadow: 0 4px 20px 1px rgb(0 0 0 / 6%), 0 1px 4px rgb(0 0 0 / 8%);
}

:root {
  --body-font: "Mulish", sans-serif;
  --heading-font: "Mulish", sans-serif;
  --font-size-base: 16px;
  --font-size-h1: 40px;
  --font-size-h2: 35px;
  --font-size-h3: 30px;
  --font-size-h4: 25px;
  --font-size-h5: 22px;
  --font-size-h6: 16px;
  --menu-size: 12px;
  --line-height-1-4: 1.4;
  --line-height-1-6: 1.6;
  --font-weight-heading: 600;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --margin-padding: 120px;
  --margin-padding-mobile: 80px;
  --body-style-space: 100px;
  --smooth-width: 4px;
}
/* ------- common core css starts ------- */
* {
  /* text-decoration: none; */
  list-style: none;
}

html {
  overflow-x: hidden;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--body-font);
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll;
}
body::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
address {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a,
a:hover,
a:focus {
  outline: 0;
  text-decoration: none;
  -webkit-transition: 0.5s linear;
  -moz-transition: 0.5s linear;
  -ms-transition: 0.5s linear;
  -o-transition: 0.5s linear;
  transition: 0.5s linear;
}

.no-padding {
  padding: 0px !important;
}


.display-flex {
  display: flex;
}
.display-inline {
  display: inline-block !important;
  width: auto !important;
}
.e-justify-center {
  justify-content: center;
}
.e-justify-space-between {
  justify-content: space-between;
}
.e-align-center {
  align-items: center;
}
.e-margin-auto {
  margin: auto;
}
.flex-colum {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.card-box-shadow {
  box-shadow: var(--box-shadow);
}
.e-login-btn, .e-login-otp-btn-container {
  margin-block-start: auto;
}
.e-form-login {
  height: 100%;
}
/* updated css 15 march 2023 */
.only-mobile {
  display: none;
}
.only-desktop {
  display: block;
}
.text-bold {
  font-weight: bold;
}
/* updated css 15 march 2023 */
h1 {
  font-size: var(--font-size-h1);
}
h2 {
  font-size: var(--font-size-h2);
}
h3 {
  font-size: var(--font-size-h3);
}
h4 {
  font-size: var(--font-size-h4);
}
h5 {
  font-size: var(--font-size-h5);
}
h6 {
  font-size: var(--font-size-h6);
}
/* i {
  color: var(--primary-color);
} */


.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  padding: 0 5px;
}

.container-fluid {
  padding: 10px;
}

.row {
  margin-left: -5px;
  margin-right: -5px;
}

.loadscreen {
  text-align: center;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  height: 100vh;
  background: var(--loader-color);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overflow-x {
  overflow-x: auto;
}

.text-primary {
  color: var(--primary-color) !important;
}
.text-secondary {
  color: var(--secondary-color) !important;
}
.text-warning {
  color: var(--bs-warning) !important;
}
.text-danger {
  color: var(--bs-danger) !important;
}
.text-light {
  color: var(--bs-light) !important;
}
.text-info {
  color: var(--bs-info) !important;
}
.text-success {
  color: var(--bs-success) !important;
}
.text-dark {
  color: var(--bs-dark) !important;
}
.text-gray{
  color:  var(--bs-gray) !important;
}
.rounded-4 {
  border-radius: 1rem;
}

.mr-2 {
  margin-right: 0.5rem !important;
}
.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}
.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}
/* ------- common core css ends ------- */

/* sid-menu-css */
.side-menu{
  width: 250px;
 height: 800px;
  background-color: var(--bs-brown);

}
.side-menu > div{
  height: fit-content;
}

/* ------- login card common css starts ------- */
.e-bg-gradient {
  position: relative;
  min-height: 100vh;
  background-image: var(--g-primary);
}
.e-bg-gradient-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.e-bg-gradient .e-signin-content {
  min-width: 700px;
  margin: auto;
}
.e-signin-from-container {
  /* width: 450px; */
  margin: auto;
  height: 100%;
  padding: 6rem;
  background: var(--primary-color);
}
.e-card {
  background-color: var(--white-color);
  border-radius: 0.25rem;
  box-shadow: 0 4px 20px 1px rgb(0 0 0 / 6%), 0 1px 4px rgb(0 0 0 / 8%);
  border: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-wrap: break-word;
  background-clip: border-box;
  width: 100%;
  margin-bottom: 10px;
}

/* ------- login card common css ends ------- */

/* ------- signin page css starts ------- */
.login-first {
  background-color: #fff;
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}
.login-second {
  background-color: var(--primary-color);
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
}
.login-first,
.login-second {
  height: 450px;
  padding: 35px;
}

.login-phone-logo {
  position: absolute;
  left: 4%;
  top: 6%;
  width: 100px;
}
.login-phone-logo img {
  width: 100%;
}

/* css updated 15 march 2023 */
.login-page-contianer {
  height: 100vh;
}
.e-login-phone-img {
  height: 100vh;
}
.e-login-phone-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* css updated 15 march 2023 */

.wrap-green {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 160px;
}
.wrap-green img {
  width: 100%;
}
.wrap-blue {
  position: absolute;
  right: 0%;
  bottom: 0%;
  width: 160px;
}
.wrap-blue img {
  width: 100%;
}
/* ------- signin page css ends ------- */

/* --------- button css starts --------- */
button {
  outline: none;
  border: none;
  background-color: none;
}

.e-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem; 
  padding: 0.5rem;
}
.e-btn-width-100,
.e-width-100 {
  width: 100%;
}
.e-btn-width-20 {
  width: 20%;
}
/* .e-btn:hover {
  border: none;
} */
/* .e-btn:focus {
  border: none;
} */
.e-btn-border-primary {
  border: 2px solid var(--primary-color);
}
.e-btn-bg-primary {
  background-color: var(--primary-color);
}

/* signin button css starts */
.e-btn-rounded {
  border-radius: 2rem;
}
.e-btn-square {
  border-radius: 0.5rem;
}
.e-btn-circle {
  border-radius: 50%;
}
.e-btn-login-icon {
  float: left;
  color: var(--heading-color);
}
.e-btn-login-text {
  color: var(--heading-color);
  width: 80%;
}


.e-btn-bg-primary-50 {
  background-color: var(--primary-color-50);
}
.e-btn-bg-secondary {
  background-color: var(--secondary-color);
}
.e-btn-bg-white {
  background-color: var(--white-color);
}
.e-btn-box-shadow {
  box-shadow: var(--box-shadow);
}
/* signin button css ends */
/* --------- button css ends --------- */

/* --------- input css starts --------- */
/*  --------- signin input css starts --------- */
/* login-first part css */
.login-a {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.login-a a {
  color: var(--bs-gray-500);
}

.e-password {
  margin-bottom: 50px;
}

.btn-text-white {
  color: var(--white-color);
}
.btn-text-primary {
  color: var(--primary-color);
}

.e-input-container {
  position: relative;
  z-index: 1;
}
.e-form-h-100 {
  height: 100%;
}
.e-form-input-container {
  position: relative;
}
.e-form-input {
  width: 100%;
  height: 2.5rem;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  outline: none;
  padding: 0.5rem;
  background: none;
}

/* updated css 17th march 2023 */
.e-form-input-login {
  width: 100%;
  height: 2.5rem;
  border: 2px solid var(--secondary-color);
  color: var(--secondary-color);
  outline: none;
  padding: 0.5rem;
  background: none;
}
/* updated css 17th march 2023 */

.e-text-area {
  height: auto !important;
}

.custom-file:not(:last-child) .custom-file-label,
.input-group > .custom-file:not(:last-child) .custom-file-label:after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.custom-control-label:before,
.custom-file-label,
.custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
.custom-file-label,
.custom-file-label:after {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.375rem 0.75rem;
  line-height: 2;
  color: #665c70;
}
.custom-file-label {
  left: 0;
  z-index: 1;
  height: 2.5rem;
  background-color: var(--bs-gray-100);
  border: 1px solid var(--primary-color);
  border-radius: 0.25rem;
}
.custom-file-input:lang(en) ~ .custom-file-label:after {
  content: "Browse";
}
.custom-file-label:after {
  bottom: 0;
  z-index: 3;
  display: block;
  height: 2.4rem;
  content: "Browse";
  color: var(--bs-gray-100);
  background-color: var(--primary-color);
  border-left: 1px solid var(--primary-color);
  border-radius: 0 0.25rem 0.25rem 0;
}

.e-form-input-rounded {
  border-radius: 2rem;
}
.e-form-input-square {
  border-radius: 0.5rem;
}
.e-form-input-square-icon {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.e-form-input-line {
  border-top: transparent;
  border-left: transparent;
  border-right: transparent;
  border-bottom: 2px solid var(--primary-color);
}

.e-form-input-outline:hover {
  background-color: #fff;
  border-color: var(--secondary-color);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgb(215 181 109 / 59%);
}
.e-form-input-outline:focus {
  background-color: #fff;
  border-color: var(--secondary-color);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgb(215 181 109 / 59%);
}

.e-form-input-color:hover {
  border-color: var(--secondary-color);
}
.e-form-input-color:focus {
  border-color: var(--secondary-color);
}
.e-form-input-bg {
  background-color: var(--white-color);
}

.e-form-label {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 0.2rem;
  color: #6c757d;
  cursor: text;
  z-index: -1;
  /* background-color: #fff; */
  transition: top 200ms ease-in, left 200ms ease-in, font-size 200ms ease-in;
}
/* updated css 17th march 2023 */
.e-form-label-login {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 0.2rem;
  color: #6c757d;
  cursor: text;
  z-index: -1;
  /* background-color: #fff; */
  transition: top 200ms ease-in, left 200ms ease-in, font-size 200ms ease-in;
}
/* updated css 17th march 2023 */

.e-form-input:focus ~ .e-form-label,
.e-form-input:not(:placeholder-shown).e-form-input:not(:focus) ~ .e-form-label {
  top: 0rem;
  font-size: 0.8rem;
  left: 1.2rem;
  color: var(--secondary-color);
  background-color: var(--white-color);
  z-index: 1;
}

/* updated css 17th march 2023 */
.e-form-input-login:focus ~ .e-form-label-login,
.e-form-input-login:not(:placeholder-shown).e-form-input-login:not(:focus) ~ .e-form-label {
  top: 0rem;
  font-size: 0.8rem;
  left: 1.2rem;
  color: var(--secondary-color);
  background-color: var(--primary-color);
  z-index: 1;
}
/* updated css 17th march 2023 */

/* .e-form-input:focus ~ .e-form-label, */
.e-form-input:not(:focus) ~ .e-form-label {
  color: #316f46;
}
/* updated css 17th march 2023 */
.e-form-input-login:not(:focus) ~ .e-form-label-login {
  color: var(--secondary-color);
}
/* updated css 17th march 2023 */

/* login-first part css */

/* login otp part css */
.e-otp-control {
  -webkit-transition: none;
  transition: none;
  width: 50px;
  height: 45px;
  /* text-align: center; */
  border: none;
  margin-right: 10px;
  outline: none;
  border-radius: 0;
}

.e-otp-control:focus {
  /* color: #3f4254; */
  border-bottom: 3px solid var(--primary-color);
  outline: none;
  border: none;
  outline: none;
  box-shadow: none;
}

.e-otp-control.e-otp-control-solid {
  border-bottom: 3px solid var(--primary-color);
}

.e-otp-control.e-otp-control-solid:active,
.e-otp-control.e-otp-control-solid.active,
.e-otp-control.e-otp-control-solid:focus,
.e-otp-control.e-otp-control-solid.focus {
  border-bottom: 3px solid var(--primary-color);
}
/* login otp part css */

/* --------- signin input css ends --------- */
/* --------- input css ends --------- */

/* header css starts */
.app-admin-wrap {
  width: 100%;
}
.clearfix:after {
  display: block;
  clear: both;
  content: "";
}
.e-header {
  justify-content: space-between;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: var(--header-bg);
  padding: 0 20px;
  height: 60px;
  position: fixed;
  flex-wrap: wrap;
  box-shadow: var(--box-shadow);
  z-index: 100;
}
.e-header-logo {
  width: 35px;
}
.e-header-logo img {
  width: 100%;
}
.e-icon {
  width: 35px;
  height: 35px;
}

.e-icon img {
  width: 100%;
  height: 100%;
}
.db-text-color {
  color: var(--bs-gray-600);
}
.e-header-day {
  font-size: 0.8rem;
}
/* header css ends */

/* main content css set */
/* css updated 12th march 2023 */
.main-content-wrap.sidenav-open {
  width: calc(100% - 230px);
}
.main-content-wrap.sidenav-open-1 {
  width: calc(100% - 60px);
}
.nav-item-hold .arrow {
  font-size: 1rem;
}
.nav-item-hold .arrow.padding-left {
  font-size: 1rem;
  padding-left: 25px;
}
.nav-item-hold-icon-1 {
  font-size: 1.2rem;
  padding-right: 10px;
}
/* css updated 12th march 2023 */
.main-content-wrap {
  width: 100%;
  float: right;
  margin-top: 60px;
  transition: width 0.24s ease-in-out;
  position: relative;
  min-height: calc(100vh - 80px);
}
/* main content css set */

/* input field dashboard css starts */
.main-bg {
  background-color: var(--main-bg);
}
.e-input-date-icon {
  margin-left: 10px;
}
.e-input-date-icon i {
  font-size: 2.5rem;
}

.e-input-right-icon {
  position: relative;
  z-index: inherit !important;
}
span.span-right-input-icon {
  position: absolute;
  top: 12px;
  right: 15px;
}
/* input field dashboard css ends */

/* --------------- button css starts ---------------- */
/* ripple effect css starts */
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}
/* ripple effect css ends */

.btn-block {
  display: block;
  width: 100%;
}
.btn-xl {
  padding: 0.75rem 2rem;
  font-size: 1.18rem;
}

/* outline start */
.btn-outline-primary:hover {
  box-shadow: 0 8px 25px -8px var(--bs-primary);
}
/* outline ends */

/* ------------ secondary ------------ */
.btn-outline-secondary {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.btn-outline-secondary:hover {
  color: #fff;
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.btn-check:active + .btn-outline-secondary,
.btn-check:checked + .btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show,
.btn-outline-secondary:active {
  color: #fff;
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.btn-check:focus + .btn-outline-secondary,
.btn-outline-secondary:focus {
  /* box-shadow: 0 0 0 0.25rem rgb(215 181 109 / 50%); */
}

.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgb(215 181 109 / 50%);
}

.btn-outline-secondary:hover,
.btn-secondary:hover {
  background: var(--secondary-color);
  box-shadow: 0 8px 25px -8px var(--secondary-color);
  border-color: var(--secondary-color);
}

.btn-check:active + .btn-outline-secondary:focus,
.btn-check:checked + .btn-outline-secondary:focus,
.btn-outline-secondary.active:focus,
.btn-outline-secondary.dropdown-toggle.show:focus,
.btn-outline-secondary:active:focus {
  box-shadow: 0 0 0 0.25rem rgb(215 181 109 / 50%);
}

/* ----------- secondary ----------- */

/* ------------ primary ------------- */

/* outline */
.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus {
  /* box-shadow: 0 0 0 0.25rem rgb(109 68 50 / 50%); */
}

.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-check:active + .btn-outline-primary:focus,
.btn-check:checked + .btn-outline-primary:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus,
.btn-outline-primary:active:focus {
  box-shadow: 0 0 0 0.25rem rgb(109 68 50 / 50%);
}

/* ------------ primary ------------ */

.btn.btn-rounded,
.btn.rounded {
  border-radius: 40px !important;
}

/* labels css starts */
/* primary */
.btn-label-primary {
  color: var(--primary-color);
  background-color: rgba(var(--primary-rgba), 0.05);
  /*border: none;*/
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
/* primary */

/* secondary */
.btn-label-secondary {
  color: var(--secondary-color);
  background-color: rgba(var(--secondary-rgba), 0.05);
  /*border: none;*/
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
/* secondary */

/* success */
.btn-label-success {
  color: var(--bs-success);
  background-color: rgba(var(--bs-success-rgba), 0.05);
  /*border: none;*/
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
/* success */

/* warning */
.btn-label-warning {
  color: var(--bs-warning);
  background-color: rgba(var(--bs-warning-rgba), 0.05);
  /*border: none;*/
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
/* warning */

/* danger */
.btn-label-danger {
  color: var(--bs-danger);
  background-color: rgba(var(--bs-danger-rgba), 0.05);
  /*border: none;*/
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
/* danger */

/* info */
.btn-label-info {
  color: var(--bs-info);
  background-color: rgba(var(--bs-info-rgba), 0.05);
  /*border: none;*/
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
/* info */

/* dark */
.btn-label-dark {
  color: var(--bs-dark);
  background-color: rgba(var(--bs-dark-rgba), 0.05);
  /*border: none;*/
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
/* dark */

/* light */
.btn-label-light {
  color: var(--bs-light);
  background-color: rgba(var(--bs-light-rgba), 0.05);
  /*border: none;*/
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
/* light */
/* labels css ends */

/* ----------- default btn ----------- */
/* primary */
.btn-primary {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-outline-primary:hover,
.btn-primary:hover {
  background: var(--primary-color);
  box-shadow: 0 8px 25px -8px var(--primary-color);
  border-color: var(--primary-color);
}
/* .btn-check:focus + .btn-primary,
.btn-primary:focus {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgb(var(--primary-rgb) / 50%);
} */
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgb(var(--primary-rgb) / 50%);
}
/* primary */

/* secondary */
.btn-secondary {
  color: #fff;
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.btn-outline-secondary:hover,
.btn-secondary:hover {
  background: var(--secondary-color);
  box-shadow: 0 8px 25px -8px var(--secondary-color);
  border-color: var(--secondary-color);
}
/* .btn-check:focus + .btn-secondary,
.btn-secondary:focus {
  color: #fff;
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 0.25rem rgb(var(--secondary-rgb) / 50%);
} */
.btn-check:active + .btn-secondary,
.btn-check:checked + .btn-secondary,
.btn-secondary.active,
.btn-secondary:active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgb(var(--secondary-rgb) / 50%);
}
/* secondary */

/* success */
.btn-success {
  color: #fff;
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}
.btn-outline-success:hover,
.btn-success:hover {
  background: var(--bs-success);
  box-shadow: 0 8px 25px -8px var(--bs-success);
  border-color: var(--bs-success);
}
/* .btn-check:focus + .btn-success,
.btn-success:focus {
  color: #fff;
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  box-shadow: 0 0 0 0.25rem rgb(var(--bs-success-rgb) / 50%);
} */
.btn-check:active + .btn-success,
.btn-check:checked + .btn-success,
.btn-success.active,
.btn-success:active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
}
.btn-success:not(:disabled):not(.disabled).active:focus,
.btn-success:not(:disabled):not(.disabled):active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgb(var(--bs-success-rgb) / 50%);
}

/* success */

/* danger */
.btn-danger {
  color: #fff;
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}
.btn-outline-danger {
  color: var(--bs-danger);
}
.btn-outline-danger:hover,
.btn-danger:hover {
  background: var(--bs-danger);
  box-shadow: 0 8px 25px -8px var(--bs-danger);
  border-color: var(--bs-danger);
}
/* .btn-check:focus + .btn-danger,
.btn-danger:focus {
  color: #fff;
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
  box-shadow: 0 0 0 0.25rem rgb(var(--bs-danger-rgb) / 50%);
} */
.btn-check:active + .btn-danger,
.btn-check:checked + .btn-danger,
.btn-danger.active,
.btn-danger:active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
}
.btn-danger:not(:disabled):not(.disabled).active:focus,
.btn-danger:not(:disabled):not(.disabled):active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgb(var(--bs-danger-rgb) / 50%);
}
/* danger */

/* warning */
.btn-warning {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}
.btn-outline-warning:hover,
.btn-warning:hover {
  background: var(--bs-warning);
  box-shadow: 0 8px 25px -8px var(--bs-warning);
  border-color: var(--bs-warning);
}
/* .btn-check:focus + .btn-warning,
.btn-warning:focus {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
  box-shadow: 0 0 0 0.25rem rgb(var(--bs-warning-rgb) / 50%);
} */
.btn-check:active + .btn-warning,
.btn-check:checked + .btn-warning,
.btn-warning.active,
.btn-warning:active,
.show > .btn-warning.dropdown-toggle {
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
}
.btn-warning:not(:disabled):not(.disabled).active:focus,
.btn-warning:not(:disabled):not(.disabled):active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgb(var(--bs-warning-rgb) / 50%);
}
/* warning */

/* info */
.btn-info {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
}
.btn-outline-info:hover,
.btn-info:hover {
  background: var(--bs-info);
  box-shadow: 0 8px 25px -8px var(--bs-info);
  border-color: var(--bs-info);
}
/* .btn-check:focus + .btn-info,
.btn-info:focus {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
  box-shadow: 0 0 0 0.25rem rgb(var(--bs-info-rgb) / 50%);
} */
.btn-check:active + .btn-info,
.btn-check:checked + .btn-info,
.btn-info.active,
.btn-info:active,
.show > .btn-info.dropdown-toggle {
  background-color: var(--bs-info) !important;
  border-color: var(--bs-info) !important;
}
.btn-info:not(:disabled):not(.disabled).active:focus,
.btn-info:not(:disabled):not(.disabled):active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgb(var(--bs-info-rgb) / 50%);
}
/* info */

/* light */
.btn-light {
  background-color: var(--bs-light);
  border-color: var(--bs-light);
}
.btn-outline-light:hover,
.btn-light:hover {
  background: var(--bs-light);
  box-shadow: 0 8px 25px -8px var(--bs-light);
  border-color: var(--bs-light);
}
.btn-check:focus + .btn-light,
.btn-light:focus {
  background-color: var(--bs-light);
  border-color: var(--bs-light);
  box-shadow: 0 0 0 0.25rem rgb(var(--bs-light-rgb) / 50%);
}
.btn-check:active + .btn-light,
.btn-check:checked + .btn-light,
.btn-light.active,
.btn-light:active,
.show > .btn-light.dropdown-toggle {
  background-color: var(--bs-light) !important;
  border-color: var(--bs-light) !important;
}
.btn-light:not(:disabled):not(.disabled).active:focus,
.btn-light:not(:disabled):not(.disabled):active:focus,
.show > .btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgb(var(--bs-light-rgb) / 50%);
}
/* light */

/* dark */
.btn-dark {
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
}
.btn-outline-dark:hover,
.btn-dark:hover {
  background: var(--bs-dark);
  box-shadow: 0 8px 25px -8px var(--bs-dark);
  border-color: var(--bs-dark);
}
.btn-check:focus + .btn-dark,
.btn-dark:focus {
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
  box-shadow: 0 0 0 0.25rem rgb(var(--bs-dark-rgb) / 50%);
}
.btn-check:active + .btn-dark,
.btn-check:checked + .btn-dark,
.btn-dark.active,
.btn-dark:active,
.show > .btn-dark.dropdown-toggle {
  background-color: var(--bs-dark) !important;
  border-color: var(--bs-dark) !important;
}
.btn-dark:not(:disabled):not(.disabled).active:focus,
.btn-dark:not(:disabled):not(.disabled):active:focus,
.show > .btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgb(var(--bs-dark-rgb) / 50%);
}
/* dark */
/* ----------- default btn ----------- */

/* ------------ raised ------------ */
.btn-raised {
  color: #fff;
}

/* primary */
.btn-raised-primary {
  background: var(--primary-color);
  box-shadow: 0 4px 6px rgb(109 68 50 / 11%), 0 1px 3px rgb(109 68 50 / 8%);
}

/* primary */

/* secondary */
.btn-raised-secondary {
  background: var(--secondary-color);
  box-shadow: 0 4px 6px rgb(215 181 109 / 11%), 0 1px 3px rgb(215 181 109 / 8%);
}
/* secondary */

/* success */
.btn-raised-success {
  background-color: var(--bs-success);
  box-shadow: 0 4px 6px rgb(25 135 84/ 11%), 0 1px 3px rgb(25 135 84/ 8%);
}
/* success */

/* danger */
.btn-raised-danger {
  background-color: var(--bs-danger);
  box-shadow: 0 4px 6px rgb(220 53 69 / 11%), 0 1px 3px rgb(220 53 69 / 8%);
}
/* danger */

/* warning */
.btn-raised-warning {
  background-color: var(--bs-warning);
  box-shadow: 0 4px 6px rgb(255 193 7 / 11%), 0 1px 3px rgb(255 193 7 / 8%);
}
/* warning */

/* info */
.btn-raised-info {
  background-color: var(--bs-info);
  box-shadow: 0 4px 6px rgb(13 202 240 / 11%), 0 1px 3px rgb(13 202 240 / 8%);
}
/* info */

/* light */
.btn-raised-light {
  background-color: var(--bs-light);
  box-shadow: 0 4px 6px rgb(248 249 250 / 11%), 0 1px 3px rgb(248 249 250 / 8%);
}
/* light */

/* dark */
.btn-raised-dark {
  background-color: var(--bs-dark);
  box-shadow: 0 4px 6px rgb(33 37 41 / 11%), 0 1px 3px rgb(33 37 41 / 8%);
}
/* dark */
/* --------- raised ---------- */

/* ---------- checkbox css starts ---------- */
.checkbox,
.radio {
  display: block;
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkbox input,
.radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="checkbox" i] {
  background-color: initial;
  cursor: default;
  appearance: auto;
  box-sizing: border-box;
  margin: 3px 3px 3px 4px;
  padding: initial;
  border: initial;
}
.checkbox input:checked ~ .checkmark:after,
.radio input:checked ~ .checkmark:after {
  display: block;
}
.checkbox .checkmark:after,
.radio .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  right: 0;
  width: 4px;
  bottom: 0;
  margin: auto;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.checkbox .checkmark,
.radio .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border-radius: 4px;
  background-color: #dee2e6;
}

.checkbox input:checked ~ .checkmark,
.radio input:checked ~ .checkmark {
  background-color: var(--primary-color);
}

/* primary checkbox */
.checkbox-primary input:checked ~ .checkmark {
  background-color: var(--primary-color) !important;
}
/* primary checkbox */

/* secondary checkbox */
.checkbox-secondary input:checked ~ .checkmark {
  background-color: var(--secondary-color) !important;
}
/* secondary checkbox */

/* success checkbox */
.checkbox-success input:checked ~ .checkmark {
  background-color: var(--bs-success) !important;
}
/* success checkbox */

/* warning checkbox */
.checkbox-warning input:checked ~ .checkmark {
  background-color: var(--bs-warning) !important;
}
/* warning checkbox */

/* danger checkbox */
.checkbox-danger input:checked ~ .checkmark {
  background-color: var(--bs-danger) !important;
}
/* danger checkbox */

/* light checkbox */
.checkbox-light input:checked ~ .checkmark {
  background-color: var(--bs-light) !important;
}
/* light checkbox */

/* info checkbox */
.checkbox-info input:checked ~ .checkmark {
  background-color: var(--bs-info) !important;
}
/* info checkbox */

/* dark checkbox */
.checkbox-dark input:checked ~ .checkmark {
  background-color: var(--bs-dark) !important;
}
/* dark checkbox */

/* ---------- checkbox css ends ---------- */

/* outline checkbox starts */
.checkbox-outline:hover input ~ .checkmark {
  background-color: #eee;
}
.checkbox-outline input:checked ~ .checkmark {
  background-color: #fff !important;
}

/* primary outline checkbox */
.checkbox-outline-primary .checkmark {
  background: #fff;
  border: 1px solid var(--primary-color);
}
.checkbox-outline-primary .checkmark:after {
  border-color: var(--primary-color);
}
.checkbox-outline-primary .checkmark {
  background: #fff;
  border: 1px solid var(--primary-color);
}
/* primary outline checkbox */

/* secondary outline checkbox */
.checkbox-outline-secondary .checkmark {
  background: #fff;
  border: 1px solid var(--secondary-color);
}
.checkbox-outline-secondary .checkmark:after {
  border-color: var(--secondary-color);
}
.checkbox-outline-secondary .checkmark {
  background: #fff;
  border: 1px solid var(--secondary-color);
}
/* secondary outline checkbox */

/* success outline checkbox */
.checkbox-outline-success .checkmark {
  background: #fff;
  border: 1px solid var(--bs-success);
}
.checkbox-outline-success .checkmark:after {
  border-color: var(--bs-success);
}
.checkbox-outline-success .checkmark {
  background: #fff;
  border: 1px solid var(--bs-success);
}
/* success outline checkbox */

/* warning outline checkbox */
.checkbox-outline-warning .checkmark {
  background: #fff;
  border: 1px solid var(--bs-warning);
}
.checkbox-outline-warning .checkmark:after {
  border-color: var(--bs-warning);
}
.checkbox-outline-warning .checkmark {
  background: #fff;
  border: 1px solid var(--bs-warning);
}
/* warning outline checkbox */

/* danger outline checkbox */
.checkbox-outline-danger .checkmark {
  background: #fff;
  border: 1px solid var(--bs-danger);
}
.checkbox-outline-danger .checkmark:after {
  border-color: var(--bs-danger);
}
.checkbox-outline-danger .checkmark {
  background: #fff;
  border: 1px solid var(--bs-danger);
}
/* danger outline checkbox */

/* light outline checkbox */
.checkbox-outline-light .checkmark {
  background: #fff;
  border: 1px solid var(--bs-light);
}
.checkbox-outline-light .checkmark:after {
  border-color: var(--bs-light);
}
.checkbox-outline-light .checkmark {
  background: #fff;
  border: 1px solid var(--bs-light);
}
/* light outline checkbox */

/* info outline checkbox */
.checkbox-outline-info .checkmark {
  background: #fff;
  border: 1px solid var(--bs-info);
}
.checkbox-outline-info .checkmark:after {
  border-color: var(--bs-info);
}
.checkbox-outline-info .checkmark {
  background: #fff;
  border: 1px solid var(--bs-info);
}
/* info outline checkbox */

/* dark outline checkbox */
.checkbox-outline-dark .checkmark {
  background: #fff;
  border: 1px solid var(--bs-dark);
}
.checkbox-outline-dark .checkmark:after {
  border-color: var(--bs-dark);
}
.checkbox-outline-dark .checkmark {
  background: #fff;
  border: 1px solid var(--bs-dark);
}
/* dark outline checkbox */
/* outline checkbox ends */

/* radio button css starts */
.checkbox,
.radio {
  display: block;
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkbox input,
.radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.radio .checkmark {
  border-radius: 50%;
}
.radio .checkmark:after {
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #fff;
}

/* primary radio */
.radio-primary input:checked ~ .checkmark {
  background-color: var(--primary-color);
}
/* primary radio */

/* secondary radio */
.radio-secondary input:checked ~ .checkmark {
  background-color: var(--secondary-color);
}
/* primary radio */

/* success radio */
.radio-success input:checked ~ .checkmark {
  background-color: var(--bs-success);
}
/* success radio */

/* warning radio */
.radio-warning input:checked ~ .checkmark {
  background-color: var(--bs-warning);
}
/* warning radio */

/* danger radio */
.radio-danger input:checked ~ .checkmark {
  background-color: var(--bs-danger);
}
/* danger radio */

/* light radio */
.radio-light input:checked ~ .checkmark {
  background-color: var(--bs-light);
}
/* light radio */

/* info radio */
.radio-info input:checked ~ .checkmark {
  background-color: var(--bs-info);
}
/* info radio */

/* dark radio */
.radio-dark input:checked ~ .checkmark {
  background-color: var(--bs-dark);
}
/* dark radio */

/* outline radio button css */
.radio-outline input:checked ~ .checkmark {
  background-color: #fff !important;
}
.radio-outline:hover input ~ .checkmark {
  background-color: #eee;
}

/* primary radio outline checkbox */
.radio-outline-primary .checkmark {
  background: #fff;
  border: 1px solid var(--primary-color);
}
.radio-outline-primary .checkmark:after {
  border: 0;
  background: var(--primary-color);
}
/* primary radio outline checkbox */

/* secondary radio outline checkbox */
.radio-outline-secondary .checkmark {
  background: #fff;
  border: 1px solid var(--secondary-color);
}
.radio-outline-secondary .checkmark:after {
  border: 0;
  background: var(--secondary-color);
}
/* secondary radio outline checkbox */

/* success radio outline checkbox */
.radio-outline-success .checkmark {
  background: #fff;
  border: 1px solid var(--bs-success);
}
.radio-outline-success .checkmark:after {
  border: 0;
  background: var(--bs-success);
}
/* success radio outline checkbox */

/* warning radio outline checkbox */
.radio-outline-warning .checkmark {
  background: #fff;
  border: 1px solid var(--bs-warning);
}
.radio-outline-warning .checkmark:after {
  border: 0;
  background: var(--bs-warning);
}
/* warning radio outline checkbox */

/* danger radio outline checkbox */
.radio-outline-danger .checkmark {
  background: #fff;
  border: 1px solid var(--bs-danger);
}
.radio-outline-danger .checkmark:after {
  border: 0;
  background: var(--bs-danger);
}
/* danger radio outline checkbox */

/* light radio outline checkbox */
.radio-outline-light .checkmark {
  background: #fff;
  border: 1px solid var(--bs-light);
}
.radio-outline-light .checkmark:after {
  border: 0;
  background: var(--bs-light);
}
/* light radio outline checkbox */

/* info radio outline checkbox */
.radio-outline-info .checkmark {
  background: #fff;
  border: 1px solid var(--bs-info);
}
.radio-outline-info .checkmark:after {
  border: 0;
  background: var(--bs-info);
}
/* info radio outline checkbox */

/* dark radio outline checkbox */
.radio-outline-dark .checkmark {
  background: #fff;
  border: 1px solid var(--bs-dark);
}
.radio-outline-dark .checkmark:after {
  border: 0;
  background: var(--bs-dark);
}
/* dark radio outline checkbox */
/* outline radio button css */
/* radio button css ends */

/* switch button css starts */
.switch {
  position: relative;
  display: inline-block;
  padding-left: 50px;
  height: 16px;
}
.switch span:not(.slider) {
  position: relative;
  top: -2px;
  cursor: pointer;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch input:checked + .slider {
  background-color: var(--primary-color);
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  width: 42px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 34px;
  background-color: #dee2e6;
  transition: 0.4s;
}
.switch input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: -1px;
  bottom: -4px;
  background-color: #fff;
  transition: 0.4s;
  border-radius: 50%;
  box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%),
    0 1px 5px 0 rgb(0 0 0 / 12%);
}

/* primary switch */
.switch-primary input:checked + .slider {
  background-color: var(--primary-color);
}
/* primary switch */

/* secondary switch */
.switch-secondary input:checked + .slider {
  background-color: var(--secondary-color);
}
/* secondary switch */

/* success switch */
.switch-success input:checked + .slider {
  background-color: var(--bs-success);
}
/* success switch */

/* warning switch */
.switch-warning input:checked + .slider {
  background-color: var(--bs-warning);
}
/* warning switch */

/* danger switch */
.switch-danger input:checked + .slider {
  background-color: var(--bs-danger);
}
/* danger switch */

/* light switch */
.switch-light input:checked + .slider {
  background-color: var(--bs-light);
}
/* light switch */

/* info switch */
.switch-info input:checked + .slider {
  background-color: var(--bs-info);
}
/* info switch */

/* dark switch */
.switch-dark input:checked + .slider {
  background-color: var(--bs-dark);
}
/* dark switch */

/* switch button css ends */

/* icon button css starts */
.btn-icon .icon,
.btn-icon [class^="i-"] {
  vertical-align: middle;
  margin: 0 2px;
  -webkit-font-smoothing: subpixel-antialiased;
}
/* icon button css ends */

/* spinner button css starts */
.spinner {
  display: inline-block;
  font-size: 10px;
  margin: auto;
  text-indent: -9999em;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  position: relative;
  -webkit-animation: spin 1.4s linear infinite;
  animation: spin 1.4s linear infinite;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.spinner:after,
.spinner:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
.spinner:before {
  width: 50%;
  height: 50%;
  border-radius: 100% 0 0 0;
}
.spinner:after {
  background: #fff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  margin: auto;
  bottom: 0;
  right: 0;
}

/* primary */
.spinner-primary {
  background: var(--primary-color);
  background: linear-gradient(
    90deg,
    var(--primary-color) 10%,
    rgba(67, 236, 76, 0) 42%
  );
}
.spinner-primary:before {
  background: var(--primary-color);
}
/* primary */

/* secondary */
.spinner-secondary {
  background: var(--secondary-color);
  background: linear-gradient(
    90deg,
    var(--secondary-color) 10%,
    rgba(67, 236, 76, 0) 42%
  );
}
.spinner-secondary:before {
  background: var(--secondary-color);
}
/* secondary */

/* success */
.spinner-success {
  background: var(--bs-success);
  background: linear-gradient(
    90deg,
    var(--bs-success) 10%,
    rgba(67, 236, 76, 0) 42%
  );
}
.spinner-success:before {
  background: var(--bs-success);
}
/* success */

/* warning */
.spinner-warning {
  background: var(--bs-warning);
  background: linear-gradient(
    90deg,
    var(--bs-warning) 10%,
    rgba(67, 236, 76, 0) 42%
  );
}
.spinner-warning:before {
  background: var(--bs-warning);
}
/* warning */

/* danger */
.spinner-danger {
  background: var(--bs-danger);
  background: linear-gradient(
    90deg,
    var(--bs-danger) 10%,
    rgba(67, 236, 76, 0) 42%
  );
}
.spinner-danger:before {
  background: var(--bs-danger);
}
/* danger */

/* info */
.spinner-info {
  background: var(--bs-info);
  background: linear-gradient(
    90deg,
    var(--bs-info) 10%,
    rgba(67, 236, 76, 0) 42%
  );
}
.spinner-info:before {
  background: var(--bs-info);
}
/* info */

/* dark */
.spinner-dark {
  background: var(--bs-dark);
  background: linear-gradient(
    90deg,
    var(--bs-dark) 10%,
    rgba(67, 236, 76, 0) 42%
  );
}
.spinner-dark:before {
  background: var(--bs-dark);
}
/* dark */

/* light */
.spinner-light {
  background: var(--bs-light);
  background: linear-gradient(
    90deg,
    var(--bs-light) 10%,
    rgba(67, 236, 76, 0) 42%
  );
}
.spinner-light:before {
  background: var(--bs-light);
}
/* light */

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
/* spinner button css ends */

/* spinner bubble circle css starts */
/* primary */
.spinner-bubble-primary {
  color: var(--primary-color);
}
/* primary */

/* secondary */
.spinner-bubble-secondary {
  color: var(--secondary-color);
}
/* secondary */

/* success */
.spinner-bubble-success {
  color: var(--bs-success);
}
/* success */

/* warning */
.spinner-bubble-warning {
  color: var(--bs-warning);
}
/* warning */

/* danger */
.spinner-bubble-danger {
  color: var(--bs-danger);
}
/* danger */

/* info */
.spinner-bubble-info {
  color: var(--bs-info);
}
/* info */

/* light */
.spinner-bubble-light {
  color: var(--bs-light);
}
/* light */

/* dark */
.spinner-bubble-dark {
  color: var(--bs-dark);
}
/* dark */

.spinner-bubble {
  display: inline-block;
  font-size: 8px;
  margin: 30px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: bubble-circle 1.3s linear infinite;
  animation: bubble-circle 1.3s linear infinite;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
@keyframes bubble-circle {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 0, 2em 2em 0 0.2em,
      0 3em 0 0, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0,
      0 3em 0 0.2em, -2em 2em 0 0, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0, -2em -2em 0 0.2em;
  }
}
/* spinner bubble circle css ends */

/* spinner bubble css starts */
/* primary */
.loader-bubble-primary {
  color: var(--primary-color);
}
/* primary */

/* secondary */
.loader-bubble-secondary {
  color: var(--secondary-color);
}
/* secondary */

/* success */
.loader-bubble-success {
  color: var(--bs-success);
}
/* success */

/* warning */
.loader-bubble-warning {
  color: var(--bs-warning);
}
/* warning */

/* danger */
.loader-bubble-danger {
  color: var(--bs-danger);
}
/* danger */

/* info */
.loader-bubble-info {
  color: var(--bs-info);
}
/* info */

/* light */
.loader-bubble-light {
  color: var(--bs-light);
}
/* light */

/* dark */
.loader-bubble-dark {
  color: var(--bs-dark);
}
/* dark */

.loader-bubble {
  display: inline-block;
  font-size: 6px;
  margin: auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader-bubble,
.loader-bubble:after,
.loader-bubble:before {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: bubble-horz 1.8s ease-in-out infinite;
  animation: bubble-horz 1.8s ease-in-out infinite;
}
.loader-bubble:after,
.loader-bubble:before {
  content: "";
  position: absolute;
  top: 0;
}
.loader-bubble:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader-bubble:after {
  left: 3.5em;
}
@keyframes bubble-horz {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
/* spinner bubble css ends */

/* ----------------- button css ends ----------------- */

.row > * {
  padding: 0 5px !important;
}

.e-otp-container {
  display: flex;
  justify-content: flex-start;
}

#partitioned {
  padding-left: 25px;
  letter-spacing: 55px;
  border: 0;
  background-image: linear-gradient(
    to left,
    var(--white-color) 70%,
    rgba(255, 255, 255, 0) 0%
  );
  background-position: bottom;
  background-size: 65px 2px;
  background-repeat: repeat-x;
  background-position-x: 50px;
  background-color: var(--primary-color);
  /* updated css 17th march 2023 */
  color: var(--white-color);
  /* updated css 17th march 2023 */
  width: 410px;
  min-width: 410px;
}

#divInner {
  left: 0;
  position: sticky;
}
#divOuter {
  width: 390px;
  overflow: hidden;
}

.panel-body-view {
  padding: 20px;
}
.panel-body-view-15 {
  padding: 15px;
}

/* side menu */
/* css updated 12th march 2023 */
.layout-sidebar-large .sidebar-left.open {
  left: 0px;
}
/* css updated 12th march 2023 */
.layout-sidebar-large .sidebar-left {
  left: -250px;
  z-index: 90;
  transition: left 0.1s ease-in-out;
}
.layout-sidebar-large .sidebar-left,
.layout-sidebar-large .sidebar-left-secondary {
  position: fixed;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background: var(--primary-color);
  box-shadow: 0 4px 20px 1px rgb(0 0 0 / 6%), 0 1px 4px rgb(0 0 0 / 8%);
}
/* .ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
} */
.scroll-style-3::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 3px var(--bs-gray-400);
  background-color: #fff;
}

.scroll-style-3::-webkit-scrollbar {
  width: 3px;
  background-color: #fff;
}

.scroll-style-3::-webkit-scrollbar-thumb {
  background-color: var(--bs-gray-400);
}

.layout-sidebar-large .sidebar-left .navigation-left {
  list-style: none;
  text-align: center;
  /* css updated 12 march 2023 */
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  transition: width 0.1s ease-in-out;
}

.layout-sidebar-large .sidebar-left .navigation-left.open-1 {
  width: 50px;
}
.layout-sidebar-large .sidebar-left .navigation-left.open-2 {
  width: auto;
}

.layout-sidebar-large .sidebar-left .navigation-left .nav-item.active,
.layout-sidebar-large
  .sidebar-left
  .navigation-left
  .nav-item.active
  .nav-item-hold {
  color: var(--bs-white);
}
.nav-item-hold .nav-item-hold-icon {
  font-size: 2rem;
}


.nav-item:hover .nav-item-hold > i {
  /* color: var(--secondary-color); */
}
.nav-item:hover .nav-item-hold span {
  /* color: var(--secondary-color); */
}

/* updated css 12th march 2023 */
.sidebar-left .navigation-left li .sub-menu {
  display: none;
}
.sidebar-left .navigation-left li.showMenu .sub-menu {
  display: block;
}
.sidebar-left .navigation-left li.showMenu .nav-item-hold .arrow {
  transform: rotate(-180deg);
}
.sidebar-left .navigation-left li.showMenu {
  background: var(--secondary-color);
}
/* updated css 12th march 2023 */

.layout-sidebar-large .sidebar-left-secondary .childNav li.nav-item:hover a {
  background-color: var(--bs-gray-200);
}

.layout-sidebar-large .sidebar-left .navigation-left .nav-item {
  position: relative;
  display: block;
  width: 100%;
  color: #332e38;
  cursor: pointer;
  /* border-bottom: 1px solid #dee2e6; */
  border-radius: 0 10px 10px 0;
  margin: 10px 0;
  padding: 10px 20px;
}
.layout-sidebar-large .sidebar-left .navigation-left .nav-item:hover {
  background-color: #d3ad6c;
  cursor: pointer;
}
.layout-sidebar-large .sidebar-left .navigation-left .nav-item:hover .nav-item-hold {
  color: #fff;
}
.sidebar-left {
  padding-right: 5px;
}

.layout-sidebar-large .sidebar-left .navigation-left .nav-item .nav-item-hold {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--bs-white);
}
.layout-sidebar-large
  .sidebar-left
  .navigation-left
  .nav-item
  .nav-item-hold
  .feather,
.layout-sidebar-large
  .sidebar-left
  .navigation-left
  .nav-item
  .nav-item-hold
  .nav-icon {
  font-size: 32px;
  height: 32px;
  width: 32px;
  display: block;
  margin: 0 auto 6px;
}

.layout-sidebar-large
  .sidebar-left
  .navigation-left
  .nav-item
  .nav-item-hold
  .nav-text {
  font-size: 1rem;
  display: none;
  font-weight: 400;
  padding: 0 25px 0 15px;
}
.layout-sidebar-large
  .sidebar-left
  .navigation-left
  .nav-item
  .nav-item-hold
  .nav-text.display {
  display: block;
}
.layout-sidebar-large
  .sidebar-left
  .navigation-left
  .nav-item.active
  .triangle {
  position: absolute;
  width: 30px;
  height: 35px;
  left: -18%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary-color);
  border-radius: 50%;
  /* border-color: transparent transparent #639; */
}

.layout-sidebar-large .sidebar-left-secondary.open {
  left: 120px;
}
.layout-sidebar-large .sidebar-left-secondary {
  left: -240px;
  z-index: 89;
  width: 220px;
  padding: 0.75rem 0;
  transition: left 0.24s ease-in-out;
  background: #fff;
}
.layout-sidebar-large .sidebar-left-secondary > .childNav {
  margin: 0;
}
.layout-sidebar-large .sidebar-left-secondary .childNav {
  list-style: none;
  padding: 0;
  display: none;
}
.layout-sidebar-large .sidebar-left-secondary .childNav li.nav-item {
  display: block;
}
.layout-sidebar-large .sidebar-left-secondary .childNav li.nav-item a {
  color: var(--primary-color);
  text-transform: capitalize;
  display: flex;
  align-items: center;
  font-size: 13px;
  cursor: pointer;
  padding: 12px 24px;
  transition: all 0.15s ease-in;
}
.layout-sidebar-large
  .sidebar-left-secondary
  .childNav
  li.nav-item
  a
  .nav-icon {
  font-size: 18px;
  margin-right: 8px;
  vertical-align: middle;
  color: var(--primary-color);
}
[class*=" i-"],
[class^="i-"] {
  font-family: iconsmind !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.layout-sidebar-large .sidebar-overlay.open {
  display: block;
}
.layout-sidebar-large .sidebar-overlay {
  display: none;
  position: fixed;
  width: calc(100% - 340px);
  height: calc(100vh - 80px);
  bottom: 0;
  right: 0;
  background: transparent;
  z-index: 101;
  cursor: w-resize;
}
.sidebar-overlay {
  display: none;
}
.layout-sidebar-large .menu-toggle {
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin-right: 12px;
}
.menu-toggle {
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin-right: 12px;
}

/* ripple spinners css starts */
.spinner-glow {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: #dee2e6;
  border-radius: 50%;
  margin: 4px auto;
  border: 2px solid transparent;
  -webkit-animation: glow 1s ease infinite;
  animation: glow 1s ease infinite;
}

.plus i {
  transform: rotate(0deg);
  transition: all 0.3s ease;
}
.plus-container:hover .plus i {
  transform: rotate(-135deg);
}
/* primary glow */
.spinner-glow-primary {
  background: rgba(var(--primary-rgb) / 45%);
  -webkit-animation: glow-primary 1s ease infinite;
  animation: glow-primary 1s ease infinite;
}
@keyframes glow-primary {
  0% {
    box-shadow: 0 0 0 0.4em rgb(var(--primary-rgb) / 45%),
      0 0 0 0.1em rgb(var(--primary-rgb) / 45%);
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
  50% {
    border-top-color: rgba(var(--primary-rgb), 0.9);
  }
  100% {
    box-shadow: 0 0 0 0.4em rgb(var(--primary-rgb) / 75%),
      0 0 0 3.6em transparent;
  }
}
/* primary glow */

/* secondary glow */
.spinner-glow-secondary {
  background: rgba(var(--secondary-rgb) / 45%);
  -webkit-animation: glow-secondary 1s ease infinite;
  animation: glow-secondary 1s ease infinite;
}
@keyframes glow-secondary {
  0% {
    box-shadow: 0 0 0 0.4em rgb(var(--secondary-rgb) / 45%),
      0 0 0 0.1em rgb(var(--secondary-rgb) / 45%);
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
  50% {
    border-top-color: rgba(var(--secondary-rgb), 0.9);
  }
  100% {
    box-shadow: 0 0 0 0.4em rgb(var(--secondary-rgb) / 75%),
      0 0 0 3.6em transparent;
  }
}
/* secondary glow */

/* success glow */
.spinner-glow-success {
  background: rgba(var(--bs-success-rgb) / 45%);
  -webkit-animation: glow-success 1s ease infinite;
  animation: glow-success 1s ease infinite;
}
@keyframes glow-success {
  0% {
    box-shadow: 0 0 0 0.4em rgb(var(--bs-success-rgb) / 45%),
      0 0 0 0.1em rgb(var(--bs-success-rgb) / 45%);
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
  50% {
    border-top-color: rgba(var(--bs-success-rgb), 0.9);
  }
  100% {
    box-shadow: 0 0 0 0.4em rgb(var(--bs-success-rgb) / 75%),
      0 0 0 3.6em transparent;
  }
}
/* success glow */

/* warning glow */
.spinner-glow-warning {
  background: rgba(var(--bs-warning-rgb) / 45%);
  -webkit-animation: glow-warning 1s ease infinite;
  animation: glow-warning 1s ease infinite;
}
@keyframes glow-warning {
  0% {
    box-shadow: 0 0 0 0.4em rgb(var(--bs-warning-rgb) / 45%),
      0 0 0 0.1em rgb(var(--bs-warning-rgb) / 45%);
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
  50% {
    border-top-color: rgba(var(--bs-warning-rgb), 0.9);
  }
  100% {
    box-shadow: 0 0 0 0.4em rgb(var(--bs-warning-rgb) / 75%),
      0 0 0 3.6em transparent;
  }
}
/* warning glow */

/* danger glow */
.spinner-glow-danger {
  background: rgba(var(--bs-danger-rgb) / 45%);
  -webkit-animation: glow-danger 1s ease infinite;
  animation: glow-danger 1s ease infinite;
}
@keyframes glow-danger {
  0% {
    box-shadow: 0 0 0 0.4em rgb(var(--bs-danger-rgb) / 45%),
      0 0 0 0.1em rgb(var(--bs-danger-rgb) / 45%);
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
  50% {
    border-top-color: rgba(var(--bs-danger-rgb), 0.9);
  }
  100% {
    box-shadow: 0 0 0 0.4em rgb(var(--bs-danger-rgb) / 75%),
      0 0 0 3.6em transparent;
  }
}
/* danger glow */

/* info glow */
.spinner-glow-info {
  background: rgba(var(--bs-info-rgb) / 45%);
  -webkit-animation: glow-info 1s ease infinite;
  animation: glow-info 1s ease infinite;
}
@keyframes glow-info {
  0% {
    box-shadow: 0 0 0 0.4em rgb(var(--bs-info-rgb) / 45%),
      0 0 0 0.1em rgb(var(--bs-info-rgb) / 45%);
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
  50% {
    border-top-color: rgba(var(--bs-info-rgb), 0.9);
  }
  100% {
    box-shadow: 0 0 0 0.4em rgb(var(--bs-info-rgb) / 75%),
      0 0 0 3.6em transparent;
  }
}
/* info glow */

/* dark glow */
.spinner-glow-dark {
  background: rgba(var(--bs-dark-rgb) / 45%);
  -webkit-animation: glow-dark 1s ease infinite;
  animation: glow-dark 1s ease infinite;
}
@keyframes glow-dark {
  0% {
    box-shadow: 0 0 0 0.4em rgb(var(--bs-dark-rgb) / 45%),
      0 0 0 0.1em rgb(var(--bs-dark-rgb) / 45%);
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
  50% {
    border-top-color: rgba(var(--bs-dark-rgb), 0.9);
  }
  100% {
    box-shadow: 0 0 0 0.4em rgb(var(--bs-dark-rgb) / 75%),
      0 0 0 3.6em transparent;
  }
}
/* dark glow */

/* light glow */
.spinner-glow-light {
  background: rgba(var(--bs-light-rgb) / 45%);
  -webkit-animation: glow-light 1s ease infinite;
  animation: glow-light 1s ease infinite;
}
@keyframes glow-light {
  0% {
    box-shadow: 0 0 0 0.4em rgb(var(--bs-light-rgb) / 45%),
      0 0 0 0.1em rgb(var(--bs-light-rgb) / 45%);
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
  50% {
    border-top-color: rgba(var(--bs-light-rgb), 0.9);
  }
  100% {
    box-shadow: 0 0 0 0.4em rgb(var(--bs-light-rgb) / 75%),
      0 0 0 3.6em transparent;
  }
}
/* light glow */

/* ripple spinners css ends */

/* plus button css starts */
.plus-container {
  position: fixed;
  z-index: 2;
  bottom: 80px;
  right: -320px;
  transition: all 0.3s ease-in-out;
  width: 380px;
}
.plus-container .plus,
.plus-container .plus:hover {
  color: var(--white-color);
  animation: none;
  transition: animation 0.3s ease;
}
.plus-container .plus i {
  color: var(--white-color);
  z-index: 5;
}
.plus-container .plus {
  position: absolute;
  display: flex;
  top: 8px;
  left: -36px;
  cursor: pointer;
  padding: 14px 16px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 20px;
}

/* primary plus btn starts */
.plus-container .plus-primary {
  box-shadow: -3px 0 4px rgb(0 0 0 / 6%);
  transition: all 0.3s ease-in-out;
  animation: puls-ani-primary 3s linear infinite;
}
@keyframes puls-ani-primary {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--primary-rgb) / 70%),
      0 0 0 0 rgb(var(--primary-rgb) / 70%);
  }

  40% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0),
      0 0 0 0 rgb(var(--primary-rgb) / 70%);
  }

  80% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }
}
/* primary plus btn ends */

/* secondary plus btn starts */
.plus-container .plus-secondary {
  box-shadow: -3px 0 4px rgb(0 0 0 / 6%);
  transition: all 0.3s ease-in-out;
  animation: puls-ani-secondary 3s linear infinite;
}
@keyframes puls-ani-secondary {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--secondary-rgb) / 70%),
      0 0 0 0 rgb(var(--secondary-rgb) / 70%);
  }

  40% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0),
      0 0 0 0 rgb(var(--secondary-rgb) / 70%);
  }

  80% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }
}
/* secondary plus btn ends */

/* success plus btn starts */
.plus-container .plus-success {
  box-shadow: -3px 0 4px rgb(0 0 0 / 6%);
  transition: all 0.3s ease-in-out;
  animation: puls-ani-success 3s linear infinite;
}
@keyframes puls-ani-success {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--bs-success-rgb) / 70%),
      0 0 0 0 rgb(var(--bs-success-rgb) / 70%);
  }

  40% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0),
      0 0 0 0 rgb(var(--bs-success-rgb) / 70%);
  }

  80% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }
}
/* success plus btn ends */

/* danger plus btn starts */
.plus-container .plus-danger {
  box-shadow: -3px 0 4px rgb(0 0 0 / 6%);
  transition: all 0.3s ease-in-out;
  animation: puls-ani-danger 3s linear infinite;
}
@keyframes puls-ani-danger {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--bs-danger-rgb) / 70%),
      0 0 0 0 rgb(var(--bs-danger-rgb) / 70%);
  }

  40% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0),
      0 0 0 0 rgb(var(--bs-danger-rgb) / 70%);
  }

  80% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }
}
/* danger plus btn ends */

/* warning plus btn starts */
.plus-container .plus-warning {
  box-shadow: -3px 0 4px rgb(0 0 0 / 6%);
  transition: all 0.3s ease-in-out;
  animation: puls-ani-warning 3s linear infinite;
}
@keyframes puls-ani-warning {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--bs-warning-rgb) / 70%),
      0 0 0 0 rgb(var(--bs-warning-rgb) / 70%);
  }

  40% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0),
      0 0 0 0 rgb(var(--bs-warning-rgb) / 70%);
  }

  80% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }
}
/* warning plus btn ends */

/* light plus btn starts */
.plus-container .plus-light {
  box-shadow: -3px 0 4px rgb(0 0 0 / 6%);
  transition: all 0.3s ease-in-out;
  animation: puls-ani-light 3s linear infinite;
}
@keyframes puls-ani-light {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--bs-light-rgb) / 70%),
      0 0 0 0 rgb(var(--bs-light-rgb) / 70%);
  }

  40% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0),
      0 0 0 0 rgb(var(--bs-light-rgb) / 70%);
  }

  80% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }
}
/* light plus btn ends */

/* info plus btn starts */
.plus-container .plus-info {
  box-shadow: -3px 0 4px rgb(0 0 0 / 6%);
  transition: all 0.3s ease-in-out;
  animation: puls-ani-info 3s linear infinite;
}
@keyframes puls-ani-info {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--bs-info-rgb) / 70%),
      0 0 0 0 rgb(var(--bs-info-rgb) / 70%);
  }

  40% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0),
      0 0 0 0 rgb(var(--bs-info-rgb) / 70%);
  }

  80% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }
}
/* info plus btn ends */

/* dark plus btn starts */
.plus-container .plus-dark {
  box-shadow: -3px 0 4px rgb(0 0 0 / 6%);
  transition: all 0.3s ease-in-out;
  animation: puls-ani-dark 3s linear infinite;
}
@keyframes puls-ani-dark {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--bs-dark-rgb) / 70%),
      0 0 0 0 rgb(var(--bs-dark-rgb) / 70%);
  }

  40% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0),
      0 0 0 0 rgb(var(--bs-dark-rgb) / 70%);
  }

  80% {
    box-shadow: 0 0 0 50px rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(255, 109, 74, 0), 0 0 0 30px rgb(255, 109, 74, 0);
  }
}
/* dark plus btn ends */

/* plus button css ends */
/* icon button css starts */

/* .btn-icon i {
  color: var(--white-color);
} */
/* icon button css ends */

.invalid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
  z-index: 2;
  position: relative;
}

/* table css starts */
.table-pagination {
  display: inline-block;
}

.table-pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.table-pagination a.active {
  background-color: var(--primary-color);
  color: white;
  border-radius: 5px;
}

.table-pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}

.table-header {
  display: flex;
  justify-content: space-between;
}
.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table-dark {
  color: #fff;
  background-color: #47404f;
}
.table-dark .text-primary {
  color: var(--secondary-color) !important;
}
.table .thead-dark th {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.table-responsive > .table-bordered {
  border: 0;
}
.table-bordered thead td,
.table-bordered thead th {
  border-bottom-width: 2px;
}
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}
.table-bordered,
.table-bordered td,
.table-bordered th {
  border: 1px solid #dee2e6;
}
.table-dark td,
.table-dark th,
.table-dark thead th {
  border-color: #5b5164;
}
.table-borderless tbody + tbody,
.table-borderless td,
.table-borderless th,
.table-borderless thead th {
  border: 0;
}
.table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.075);
}
.table-sm td,
.table-sm th {
  padding: 0.3rem;
}
/* table css ends */

/* text-decoration starts */
.text-underline {
  text-decoration: underline;
}
/* text-decoration ends */


.btn_round {
  width: 35px;
  height: 35px;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  line-height: 35px;
  margin-left: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.btn_round:hover {
  color: #fff;
  background: rgba(var(--primary-rgba), 0.3);
  border: 1px solid rgba(var(--primary-rgba), 0.3);
}

.btn_content_outer {
  display: inline-block;
  width: 85%;
}
.close_c_btn {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 10px;
  top: 0px;
  line-height: 30px;
  border-radius: 50%;
  background: #ededed;
  border: 1px solid #ccc;
  color: #ff5c5c;
  text-align: center;
  cursor: pointer;
}

.add_icon {
  padding: 10px;
  border: 1px dashed #aaa;
  display: inline-block;
  border-radius: 50%;
  margin-right: 10px;
}
.add_group_btn {
  display: flex;
}
.add_group_btn i {
  font-size: 32px;
  display: inline-block;
  margin-right: 10px;
}

.add_group_btn span {
  margin-top: 8px;
}
.add_group_btn,
.clone_sub_task {
  cursor: pointer;
}

.sub_task_append_area .custom_square {
  cursor: move;
}

.del_btn_d {
  display: inline-block;
  position: absolute;
  right: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
}

#field {
  margin-bottom:20px;
}

/* card */
.card-icon i {
  font-size: var(--font-size-h2);
  /* margin: 0 20px; */
}

.card-count {
  font-weight: 700;
}
.card-count-text {
  font-weight: 600;
  font-size: 0.8rem;
}


.input-group-text {
  height: 2.5rem;
}
.date a {
  color: var(--secondary-color);
}
.bdpw-clock-digit.cursor {
  color: var(--secondary-color);
}

.datepicker table {
  font-family: "Mulish", sans-serif !important;
}
.timepicker table {
  font-family: "Mulish", sans-serif !important;
}

/* datepicker container css */
.datepicker-container {
  background: #fff; cursor: pointer; padding: 5px 10px; border: 2px solid var(--primary-color); display:inline-block;
}
td.number-text-right {
  text-align: right;
}


/* start css side menu */
.menu-bar{
  width: 230px;
  background-color: #794A36 !important;
  padding: 20px 0 ;
  color: #794A36;
 
 
} 
.nav-link > svg{
  width: 30px !important;
  height: 30px !important;
}
.nav-link> svg >path{
  fill: none;
  stroke: var(--bs-white);
}
.mainMenu:hover svg >path{
  fill: none;
  stroke: white;
}
.nav-taxt{
  color:var(--bs-white);
}
.mainMenu{ 
  margin: 10px 0;
  border-radius: 0 10px 10px 0;
  display: flex;
  gap: 5px;
  align-items: center;
}
.mainMenu:hover{
background-color: #d3ad6c;
cursor: pointer;
}
.mainMenu:hover .nav-taxt{
  color: white;
}

#master{
background-color: var(--primary-color); 
}
#master > .menu-links > .nav-link{
  color: var(--bs-white); 
}
#master > .menu-links > .nav-link:hover{
  /* color: #d3ad6c;  */
  cursor: pointer;
}
.nav-link a {
  color: var(--bs-white); 
}
.rightErrow{
  background-color: #d3ad6c;
  width: 25px;
  height: 25px;
  display:flex ;
  align-items: center;
  border-radius: 5px;
  justify-content: center; 
  /* position: relative;
  right: 0; */
}


/* updated css 17th march 2023 */



.message {
  display: flex;
  margin-bottom: 15px;
}

.message-content {
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  background-color: #fff;
}

.content {
  margin: 0;
}

.timestamp {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.received {
  align-self: flex-start;
  padding-left: 8px;
}

.sent {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 8px;
}


.received .message-content {
  text-align: left;
  background-color: #f8f8f8;
}

.sent .message-content {
  text-align: right;
  background-color: #dcf8c6;
}


.user-chat-img {
  width: 25px;
  height: 25px;
}
.user-chat-img img {
  width: 100%;
}
.user-opp-chat-img {
  display: flex;
  align-items: end;
}
.user-opp-chat-img img {
  width: 25px;
  height: 25px;
}
.chat-write-box {
  background-color: #fff;
  box-shadow: var(--box-shadow);
  padding: 15px 25px;
}
.no-border {
  border: none !important;
}
.chat-comment-text-box {
  padding: 15px 25px;
}
.user-chat-pera {
  max-width: 400px;
  padding: 10px;
  background-color: var(--bs-gray-200);
}

.header-logo-login {
  width: 145px;
  margin-bottom: 10px;
}
.header-logo-login img {
  width: 100%;
}
button.btn-delete {
    background: transparent;
}
table.dataTable.no-footer {
    border-bottom: 0px solid #fff;
}
/* updated css 17th march 2023 */

/* updated css 17th march 2023 */
/* timeline css */
.timeline-section {
  /* background-color: #24292d; */
  /* min-height: 100vh; */
  padding: 15px 15px;
}
.timeline-date {
  color: var(--bs-gray-500);
}
.timeline-items {
  max-width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.timeline-items::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  top: 15px;
  background-color: var(--primary-color);
  /* left: calc(50% - 1px); */
  left: -15px;
}
.timeline-item {
  /* background-color: #2f363e; */
  margin-bottom: 40px;
  width: 100%;
  position: relative;
}
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-item {
  /* padding-left: calc(50% + 30px); */
}

.timeline-content {
  color: var(--primary-color);
  padding: 25px;
  border-radius: var(0.5rem);
  background-color: var(--bs-gray-100);
}

.timeline-checkbox {
  display: inline-block;
  position: absolute;
  left: -25px;
}
.timeline-checkbox input {
  /* position: relative;
  left: -25px; */
}

.timeline-checkbox input.timeline-dot::before {
  content: "";
  height: 22px;
  width: 22px;
  background-color: var(--white-color);
  position: absolute;
  border: 1px solid var(--primary-color);
  /* left: calc(50% - 8px); */
  left: 50%;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  cursor: pointer;
  transition: 0.3s all ease;
}
.timeline-checkbox input:checked::before {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
.timeline-checkbox input:checked::after {
  position: absolute;
  content: "\f00c";
  font-family: "FontAwesome";
  color: var(--white-color);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* .timeline-item:nth-child(odd) {
  padding-right: calc(50% + 30px);
}
.timeline-item:nth-child(even) {
  padding-left: calc(50% + 30px);
} */
/* timeline css */

/* progress bar */

/* .progress-bar {
  width: 0;
}
.progress {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
} */

.progress-p {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: var(--black-color);
}
.progress{
  position: relative;
  border-radius:0;
  overflow:visible;
  height: 100% !important;
  width: 6rem;
  border-radius: 0.5rem;
}
.progress-bar{
  background:#9FFFB4; 
  -webkit-transition: width 1.5s ease-in-out;
  transition: width 1.5s ease-in-out;
  border-radius: 0.5rem;
}

/* progress bar */
.vertical-align {
  display: flex;
  justify-content: center;
  align-items: center;
}
.highlight1{
        background: linear-gradient(-45deg, #2ecc71, #ff5e00, #ff7676, #ffbe00);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
}
.highlight2{
        background: linear-gradient(90deg, #D0AFFF, #AFF7FF, #ffc278, #fff95b);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
}
.highlight3{
        background-image: linear-gradient(to right, #9FD983, #efe348, #96cc39, #00e4cd);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* updated css 13th april 2023 */



/* updated css 18th april 2023 */
.readmore-btn {
    display: flex;
    cursor: pointer;
    margin: auto;
    justify-content: center;
    display: flex;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 36px;
    background-color: var(--secondary-color);
}

.readmore-text {
  display: none;
}
.readmore-text--show {
  display: inline;
}
/* updated css 18th april 2023 */

/* updated css 11th june 2023 */
.user-circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-color);
}
.chat-comment-user-sec {
  background-color: rgb(246, 246, 246);
  padding: 15px;
}

.comment-menu-toggle {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin-right: 12px;
  height: 100%;
  padding: 10px;
}

.comment-content-wrap .comment-left.open {
  right: 0px;
}
.comment-content-wrap .comment-left {
  right: -250px;
  z-index: 90;
  transition: left 0.3s ease-in-out;
}
.comment-content-wrap .comment-left {
  position: fixed;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background: var(--white-color);
  box-shadow: 0 4px 20px 1px rgb(0 0 0 / 6%), 0 1px 4px rgb(0 0 0 / 8%);
}

.comment-content-wrap .comment-left .comment-navigation-left {
  list-style: none;
  text-align: center;
  /* css updated 12 march 2023 */
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  transition: width 0.3s ease-in-out;
}
.comment-content-wrap .comment-left .comment-navigation-left.open {
  width: 250px;
}



.chat-container .chat-article-left.open {
  right: 0px;
}
.chat-container .chat-article-left {
  right: -2000px;
  z-index: 90;
  transition: left 0.3s ease-in-out;
}
.chat-container .chat-article-left {
  position: fixed;
  top: 60px;
  height: calc(100vh - 60px);
  /* overflow-y: scroll; */
  -webkit-overflow-scrolling: touch;
  background: var(--white-color);
  box-shadow: 0 4px 20px 1px rgb(0 0 0 / 6%), 0 1px 4px rgb(0 0 0 / 8%);
}

.chat-container .chat-article-left {
  list-style: none;
  text-align: center;
  /* css updated 12 march 2023 */
  width: 30%;
  height: auto;
  margin: 0;
  padding: 0;
  transition: width 0.3s ease-in-out;
}
.chat-container .chat-article-left.open {
  width: 270px;
}
.chat-scroll {
  overflow-y: scroll;
  height: calc(80vh - 60px);
}
.chat-back-btn, .user-profile {
  cursor: pointer;
}
.comment-menu-notification {
  position: absolute;
  width: 50%;
  height: 50%;
  padding: 1px 5px 5px 5px;
  border-radius: 50%;
  background-color: red;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -2px;
  right: -4px;
  color: var(--white-color);
}
.comment-menu-toggle {
  position: relative;
}
.user-chat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-color);
  background-color: gray;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  padding: 15px;
}
.user-opp-chat-icon {
  display: flex;
  height: 25px;
  width: 25px;
  align-items: center;
  justify-content: center;
  color: var(--white-color);
  background-color: gray;
  border-radius: 50%;
  padding: 15px;
}
/* updated css 11th june 2023 */

/* updated css 15th june 2023 */
.user-online {
  color: var(--bs-gray);
  font-size: 0.6rem;
  text-align: left;
}
/* updated css 15th june 2023 */