@font-face {
  font-family: "inter";
  src: url("../font/inter.ttf");
}

@font-face {
  font-family: "ibm";
  src: url("../font/ibmplex.ttf");
}

:root {
  --primary-color: #ffffff;
  --secondary-color: #888888;
  --white-opa-07: rgba(255, 255, 255, 0.7);
  --bg-color: #0f0f0f;
  --border-radius: 1rem;
  --border-radius-6:0.375rem;
  --border-radius-8:0.5rem;
  --common-size: 1rem;
  --box-gradient-green: linear-gradient(to right, #009E7F, #005441);
  --border-color: #292929;
  --border-light: #515158;
  --theme-green: hwb(164 10% 15%);
  --border-radius-half: 0.625rem;
  --gap-large: 1.5rem;
  --card-bg: #000000;
  --card-body-bg: #0c0c0d;
  --login-bg:#111111;
  --text-grey: #9c9c9c;
  --btn-bg: #272727;
  --btn-border: #363638;
  --font-size-24:1.5rem;
  --font-size-20:1.25rem;
  --font-size-18:1.125rem;
  --font-size-14: 0.875rem;
  --font-size-12: 0.75rem;
  /* nexdha variables begins here */
  --inter: "inter";
  --ibm: "ibm";
  --nav-bg:#141414;
  --nav-active: #222222;
  --border-radius-half:0.625rem;
  --fw-400: 400;
  --fw-600: 600;
  --black-03: rgba(0, 0, 0, 0.3);
  --datepicker-bg:#232323;
  --datepicker-boxshadow:0px 4px 30.9px 0px #1D1D1D;
  --datepicker-active:#02A283;
  --theme-teal: #69FFCE;
  --success-green: #1A932E;
  --pending-yellow: #FF922D;
  --danger-red:#D01C00;
  --hold-blue:#3195FA;
  --success-green-half: hsla(132, 50%, 10%, 0.7);
  --pending-yellow-half:hsla(25, 52%, 19%, 1);
  --danger-red-half:hsla(0, 44%, 16%, 1);
  --hold-blue-half:hsla(220, 41%, 20%, 1);
  /* table components goes here */
  --table-header:#161616;
  --table-td: #b2b2b2;
}

.light {
  --bg-color: #ffffff;
  --primary-color:#000000;
  --box-gradient:#ffffff;
  --card-bg:#ffffff;
  --card-body-bg:#ffffff;
}

body {
  font-family: var(--inter);
  font-size: var(--common-size);
  letter-spacing: 0.5px;
  color: var(--primary-color);
  background-color: var(--bg-color);
  overflow: hidden;
}

p,
a,
span,
label {
  font-family: var(--inter);
  color: var(--secondary-color);
  font-size: var(--font-size-14);
}

a:hover {
  text-decoration: none;
  color: var(--primary-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: capitalize;
  font-family: var(--ibm);
  color: var(--primary-color);
}
.bg-none {
  background: none !important;
}

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

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

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

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

.w-150 {
  width: 150px;
}

.w-90 {
  width: 90px;
}

.w-60 {
  width: 60px;
}

.w-50 {
  width: 50px;
}

.w-40 {
  width: 40px;
}

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

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

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

.border-light,
.accordion-dark .accordion-item.border-light {
  border: 1px solid var(--border-light) !important;
}

.border-radius {
  border-radius: var(--common-size) !important;
}
.font-14 {
  font-size: var(--font-size-14);
}

.font-ibm {
  font-family: var(--ibm);
}

/* General declaration ends here */
/* Dashboard begins here */
.wrapper-main {
  align-items: flex-start;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--common-size);
  height: 100vh;
  justify-content: flex-start;
  position: relative;
  width: 100%;
}

/* content container right section */
.content-container,
.navigation {
  height: 100vh;
  position: relative;
}

.content-container {
  gap: var(--gap-large);
  padding-bottom: var(--common-size);
  max-width: calc(100% - 265px);
  overflow: hidden;
}
.content-container.full-width {
    max-width: calc(100% - 100px);
}

.logo-container {
  padding: var(--common-size) 0;
}

.navigation {
  width: 265px;
  padding-bottom: var(--common-size);
  background-color: var(--nav-bg);
  -webkit-transition: width 300ms cubic-bezier(0.2, 0, 0, 1);
  -moz-transition: width 300ms cubic-bezier(0.2, 0, 0, 1);
  -o-transition: width 300ms cubic-bezier(0.2, 0, 0, 1);
  transition: width 300ms cubic-bezier(0.2, 0, 0, 1);
}

.navigation .logo-container, .navigation .nav-menu {
  width: 265px;
  transition: width 300ms cubic-bezier(0.2, 0, 0, 1);
}

/* default visibility hide & show for menu elements */
.navigation .logo-text, .navigation .nav-menu .nav-menu-item a > span, .navigation .nav-menu .nav-menu-item p {
  opacity: 1;
  visibility: visible;
  overflow: hidden auto;
  transition: opacity linear 200ms, visibility linear;
  white-space:nowrap;
}
.navigation.collapsed-menu .logo-text, 
.navigation.collapsed-menu .nav-menu .nav-menu-item a > span{
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.navigation.collapsed-menu .nav-menu .nav-menu-item p, .navigation.collapsed-menu span.copy {
  display: none;
}
.logo {
  width: 40px;
}
.logo-text {
  width: 100px;
  margin-left: 0.5rem;
}

/*Main nav toggle */
.navigation.collapsed-menu, .navigation.collapsed-menu .nav-menu{
  width: 85px;
}
.navigation .logo-container .logo {
    margin-left: .25rem;
}
/* .navigation .nav-menu .nav-menu-item span {
  animation: slideaway 1s;
} */

.navigation .ico-circle {
  width: 25px;
  height: 25px;
}
.collapsed-menu #collapse-menu i {
    transform: rotate(180deg);
}
#collapse-menu i {
    transition: transform 0.2s ease-in-out;
}
/* Actual navigation begins here*/
.nav-menu {
  flex: 1 0 0;
  padding: 0 var(--common-size) var(--common-size);
  height: 97vh;
}

.nav-menu-item {
  display: flex;
  flex-direction: column;
  gap: 0.652rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--btn-bg);
}

.nav-menu-item p {
  font-size: var(--font-size-12);
  color: rgb(131, 137, 159);
  margin-bottom: 0;
  padding-left: var(--common-size);
}

.nav-menu-item a.active,
.has-submenu.active {
  background-color: var(--nav-active);
  /* border: 1px solid rgb(42, 42, 51); */
  border-radius: var(--border-radius-half);
  color: var(--primary-color);
}

.nav-menu-item a {
  font-size: var(--font-size-14);
  text-decoration: none;
  padding: 0.5rem var(--common-size);
  font-family: "inter";
  color: var(--white-opa-07);
  border: 1px solid var(--nav-bg);
  border-radius: var(--border-radius-half);
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  font-weight: 400;
}

.nav-menu-item a:hover {
  border: 1px solid rgb(42, 42, 51);
  border-radius: var(--border-radius-half);
}

.nav-menu-item a span,
.nav-menu-item a i {
  color: var(--white-opa-07);
}

.nav-menu-item a:hover span,
.nav-menu-item a:hover i,
.nav-menu-item a.active span,
.nav-menu-item a.active i {
  color: var(--primary-color);
}

.nav-menu-item a i {
  font-size: 1.125rem;
  margin-right: 0.5rem;
}

.nav-menu-item a.active:before {
  width: 2px;
  height: 10px;
  background-color: var(--bs-green);
  position: absolute;
  left: -2px;
  top: 40%;
  content: "";
}

#collapse-menu {
    cursor: pointer;
    position: absolute;
    right: -10px;
}
#collapse-menu span:hover {
  color: var(--primary-color);
}

/* ===== submenu ====== */
li.has-submenu {
  list-style: none;
  position: relative;
}

.nav-submenu {
  display: block;
  visibility: hidden;
  transform: rotateX(-75deg);
  transform-origin: 0 0;
  transition: 0.5s;
  opacity: 0;
  height: 0;
}

.nav-submenu.show {
  transform: rotateX(0);
  visibility: visible;
  transition: 0.5s;
  opacity: 1;
  height: 100%;
}

.nav-submenu a {
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.nav-menu-item .has-submenu a:hover {
  border-color: var(--bg-color);
}

li.has-submenu a.chevron::after {
  content: "";
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E);
  background-size: 20px;
  width: 20px;
  display: inline-block;
  height: 20px;
  position: absolute;
  top: 28%;
  right: 0.25rem;
  transition: transform 0.2s ease-in-out;
}

li.has-submenu a.chevron:not(.collapsed) span,
.has-submenu.active a i {
  color: var(--primary-color);
}

li.has-submenu a.chevron:not(.collapsed)::after {
  transform: rotate(-180deg);
}

.has-submenu a,
.has-submenu a:hover {
  border: none;
}

.has-submenu .nav-submenu a {
  padding-left: 0;
  transition: all 0.2s ease-in-out;
  margin-left: 1.25rem;
  color: rgba(245, 245, 245, 0.7);
  border: none;
}

.has-submenu .nav-submenu a.active {
  background: none;
}

.has-submenu .nav-submenu a:hover,
.has-submenu .nav-submenu a.active {
  padding-left: 1.5rem;
  color: var(--primary-color);
}
.has-submenu .nav-submenu a::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--theme-green);
  display: inline-block;
  border-radius: 50%;
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: 20px;
  transition: visibility 0.2s ease-in-out;
}
.has-submenu .nav-submenu a:nth-child(2)::before {
  background-color: var(--pending-yellow);
}
.has-submenu .nav-submenu a:nth-child(3)::before {
  background-color: var(--danger-red);
}
.has-submenu .nav-submenu a:nth-child(4)::before {
  background-color: var(--theme-teal);
}
.has-submenu .nav-submenu a:hover::before, .has-submenu .nav-submenu a.active::before {
  visibility: visible;
} 
.collapsed-menu li.has-submenu a.chevron::after{
  display: none;
}
/* .custom-tooltip {
  --bs-tooltip-bg: violet;
  --bs-tooltip-color: white;
  --bs-tooltip-opacity:0;
} */
/* actual navigation ends here*/

/* Main content inside content container */
.main-content {
  gap: var(--gap-large);
  padding: 0 var(--common-size);
  position: relative;
  width: 100%;
  flex: 1 0 0;
  height: 97vh;
}

/* row container / can change width accordingly */
.row-one {
  width: 99%;
}
.symbol::before {
  content: "\20B9";
  font-size: 0.75rem;
  padding-right: 0.15rem;
}
/* row containers ends here */