/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  --sk-body: #f8fafc;
  --sk-body-white: #fff;
  --sk-body-dark: #0b151d;

  --sk-heading: #012970;
  --sk-heading-dark: #fff;

  --sk-text: #6c757d;
  --sk-text-dark: #fff;

  /* --sk-link: #4154f1;
  --sk-link-hover: #717ff5; */
  --sk-link: #007bff;
  --sk-link-hover: #73C0FC;
  --sk-link-dark: #4a9bf1;

  --sk-box-shadow: #0129701a;

  --sk-border: #ccccccc9;
  /* --sk-border-dark: #454647; */
  --sk-border-dark: #143752;

  --sk-table-border: #e7e6e6c9;
  --sk-table-border-dark: #143752;

  --sk-input-placeholder: #bebebe;

  /* --sk-primary: #4154f1; */
  --sk-primary: #46b0e4;
  --sk-primary-light: #46b0e424;
  --sk-secondary: #73C0FC;

  --sk-yellow: #f9ab15;
  --sk-yellow-light: #fcf7ee;

  --sk-green: #1d9b61;
  --sk-green-light: #d6fae9;

  --sk-purple: #6610f2;

  --sk-error: #ff0000;
  --sk-error-light: #fdcdcd;

  --sk-asscolor: #5a5f64;
  --sk-asscolor-light: #dfe1e252;

  --sk-orange: #ff771d;

  /* --sk-bg-transparent: #165b9161; */
  --sk-bg-transparent: #0a1d2a;

  --fonts-title: "Nunito", sans-serif;
  --fonts: "Open Sans", sans-serif;
  scroll-behavior: smooth;
}

*::before,
*::after {
  box-sizing: border-box;
}

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

html {
  width: 100%;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  height: auto;
  font-size: 100%;
  line-height: 1.6;
  text-align: left;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  font-family: var(--fonts);
  overflow-x: hidden;
  background-color: var(--sk-body);
  color: var(--sk-text);
  position: relative;
  letter-spacing: normal;
}

body.dark {
  background-color: var(--sk-body-dark);
  color: var(--sk-text-dark);
}

/* .row {
    --bs-gutter-x: 0 !important;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

[class*='col-'] {
    padding: 0 0.5rem 15px 0.5rem;
} */

a {
  color: var(--sk-link);
  text-decoration: none;
  font-weight: 600;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Nunito", sans-serif;
}

/****reportrange*****/
#reportrange {
  background: #fff;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 93%;
  /* width: 325px; */
  width: auto;
  display: inline-flex;
}

body.dark #reportrange {
  background-color: var(--sk-bg-transparent);
}

body.dark #reportrange span {
  opacity: 0.8;
}

/****/
/* body.dark .daterangepicker {
  background-color: var(--sk-bg-transparent);
}

body.dark .daterangepicker .calendar-table {
  background-color: var(--sk-asscolor);
  border: 1px solid var(--sk-border-dark);
}

body.dark .daterangepicker td:hover {
    color: var(--sk-text);
} */

body.dark .daterangepicker .ranges li {
  color: var(--sk-text);
}

body.dark .daterangepicker .ranges li.active {
  background-color: #08c;
  color: #fff;
}

body.dark .daterangepicker .calendar-table th {
  color: #012970;
}

body.dark .daterangepicker table td {
  color: var(--sk-text);
}

body.dark .daterangepicker td.available:hover {
  color: var(--sk-text);
}

body.dark .daterangepicker table td.active,
body.dark .daterangepicker table td.start-date,
body.dark .daterangepicker table td.end-date {
  color: #fff !important;
}

body.dark .daterangepicker table td.off {
  opacity: 0.3;
}

.daterangepicker table td.off {
  opacity: 0.5;
}

body.dark .daterangepicker table td.in-range {
  color: var(--sk-table-border-dark);
}



/*******tooltip***/
.tooltip-inner {
  background-color: var(--sk-primary) !important;
  color: var(--sk-text-dark) !important;
  font-size: 80%;
}

/* Arrow color */
.tooltip .tooltip-arrow::before {
  border-top-color: var(--sk-primary) !important;
  /* border-bottom-color: var(--sk-primary) !important; */
  /* border-left-color: var(--sk-primary) !important; */
  /* border-right-color: var(--sk-primary) !important; */
}

/*****Modal******/
body.dark .modal {
  background-color: #7a79795c;
}

.modal .modal-content {
  background-color: var(--sk-body-white);
  color: var(--sk-text);
  border: 1px solid var(--sk-border);
}

body.dark .modal .modal-content {
  background-color: var(--sk-bg-transparent);
  color: var(--sk-text-dark);
  border: 1px solid var(--sk-border-dark);
  box-shadow: 0px 0px 10px 0px #ccc;
}

.modal .btn-close {
  /* filter: grayscale(1) brightness(1000%); */
  font-size: 100%;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff0000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
}

body.dark .modal .btn-close {
  /* color: var(--sk-text-dark);
  filter: brightness(0) invert(1); */
  background-color: var(--sk-error-light);
  /* border-radius: 50%; */
}

/*-------- All Table Css -------------*/
/*------------------------------------*/
.search-form input:focus {
  outline: 0;
  border: 1px solid var(--sk-primary) !important;
}

body.dark .search-form input::placeholder {
  color: #fff;
  opacity: 0.8;
}

/****/
.dataTable-table {
  max-width: 100%;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid var(--sk-table-border);
}

body.dark .dataTable-table {
  border: 1px solid var(--sk-table-border-dark);
}

.dataTable-table tr th {
  border: 0 !important;
}

.dataTable-wrapper.no-footer .dataTable-container {
  border: 0 !important;
}


/****/

table {
  width: 100% !important;
  border-radius: 6px;
  /* overflow: hidden; */
  box-shadow: 0px 0px 5px 0px var(--sk-box-shadow);
  border: 1px solid var(--sk-table-border);
  font-size: 85%;
  margin: 0 auto;
}

body.dark table {
  border: 1px solid var(--sk-table-border-dark);
}

table thead {
  background: var(--sk-primary-light);
  border: 0 !important;
  outline: 0;
}

table tbody {
  background: transparent;
  border: 0 !important;
  outline: 0;
}

table tr {
  border-bottom: 1px solid var(--sk-table-border) !important;
}

body.dark table tr {
  border-bottom: 1px solid var(--sk-table-border-dark) !important;
}

/* table tr:last-child {
   border: 0 !important;
} */

table th {
  border: 0;
  color: var(--sk-heading);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

body.dark table th {
  /* color: var(--sk-heading-dark); */
  color: var(--sk-primary);
}

table td {
  border: 0;
  color: var(--sk-text);
  background-color: transparent;
}

body.dark table td {
  border: 0;
  color: var(--sk-text-dark);
  opacity: 0.8;
}

table tr td,
table tr th {
  text-align: center;
  vertical-align: middle;
  font-size: 100%;
  padding: .5rem .5rem;
}

table tr td img,
table tr td .tableImg {
  width: 35px;
  height: 35px;
  object-fit: contain;
  border-radius: 50%;
  overflow: hidden;
}

#perPageForm select {
  border: 1px solid var(--sk-border) !important;
  background-color: transparent !important;
  color: var(--sk-text) !important;
}

body.dark #perPageForm select {
  border: 1px solid var(--sk-border-dark) !important;
  color: var(--sk-text-dark) !important;
}

#perPageForm select option {
  color: var(--sk-text) !important;
}

#perPageForm label {
  margin-bottom: 0;
}

body.dark #perPageForm label {
  opacity: 0.8;
}

body.dark .footer-left {
  font-size: 85%;
  opacity: 0.8;
}

/* .lowStock_table tr td:last-child {
   color: var(--sk-error) !important;
   opacity: 1 !important;
} */

body.dark .table-info {
  background-color: #46b0e424 !important;
  --bs-table-bg: #46b0e424 !important;
}


/****check box**/

/* Hide the default checkbox */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid var(--sk-primary) !important;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease-in-out;
  padding: 0 !important;
  top: 0px;
}

/* Checked state */
input[type="checkbox"]:checked {
  background-color: var(--sk-primary) !important;
  border-color: var(--sk-primary) !important;
  box-shadow: none !important;
}

/* Checkmark */
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid var(--sk-text-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

table input[type="checkbox"] {
  top: 2px;
}


/*-------- All Table Css End-------------*/

.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.iti {
  width: 100% !important;
}


/*-----------------------------------------------
button css
------------------------------------------------*/
.btn-primary {
  border: 1px solid var(--sk-primary) !important;
  background-color: var(--sk-primary) !important;
  color: var(--sk-heading-dark) !important;
}

.btn-primary:hover {
  background-color: transparent !important;
  color: var(--sk-primary) !important;
  border: 1px solid var(--sk-primary) !important;
}

button {
  white-space: nowrap;
}

.common_btn {
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  outline: 0;
  border: 1px solid var(--sk-primary) !important;
  background-color: var(--sk-primary);
  color: var(--sk-heading-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 15px;
  margin: 0;
  border-radius: 5px;
  font-size: 85%;
  transition: 0.6s;
}

.common_btn:hover {
  background-color: transparent;
  color: var(--sk-primary);
  border: 1px solid var(--sk-primary);
}

/***/
.goBack_btn {
  background: var(--sk-body-white);
  color: var(--sk-text);
  width: 100px;
  height: 34px;
  border-radius: 8px;
  font-size: 95%;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  border: 1px solid var(--sk-border);
  margin-left: auto;
  z-index: 1;
  transition: 0.6s;
}

.goBack_btn:hover {
  border: 1px solid var(--sk-primary);
  background: var(--sk-body-white);
}

body.dark .goBack_btn {
  background: var(--sk-bg-transparent);
  color: var(--sk-text-dark);
}

.goBack_btn .progress {
  background: var(--sk-primary);
  border-radius: 6px;
  height: 26px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 3px;
  top: 3px;
  z-index: 3;
  transition: width 0.5s ease;
}

.goBack_btn .progress svg path {
  fill: var(--sk-text-dark);
}

.goBack_btn:hover .progress {
  width: 92px;
}

.goBack_btn .text {
  padding: 0;
  margin: 0;
  transform: translateX(8px);
  position: relative;
  z-index: 2;
  margin-left: 8px;
  line-height: normal;
}

/******/
.plusButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 85%;
  border-radius: 4px;
  border: 1px solid var(--sk-primary);
  padding: 4px 10px 4px 5px;
  background-color: var(--sk-primary);
  color: var(--sk-text-dark);
  white-space: nowrap;
  transition: 0.6s;
  height: 36px;
}

.plusIcon {
  width: 20px;
  height: 20px;
  padding: 0;
  transition: transform 0.5s ease-in-out;
}

.plusIcon path {
  fill: var(--sk-text-dark);
}

.plusButton:hover {
  border: 1px solid var(--sk-primary);
  background-color: transparent;
  color: var(--sk-primary);
}

.plusButton:hover .plusIcon path {
  fill: var(--sk-primary);
}

.plusButton:hover .plusIcon {
  transform: rotate(180deg);
}

/****delete_btn*****/
.delete_btn,
.cancelBtn {
  background-color: var(--sk-error-light);
  border: 1px solid var(--sk-error);
  color: var(--sk-error);
  font-size: 85%;
  font-weight: 500;
  padding: 2px 6px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: 0.6s;
}

.delete_btn:hover,
.cancelBtn:hover {
  border: 1px solid var(--sk-error);
  background-color: var(--sk-error);
  color: var(--sk-text-dark);
  box-shadow: none;
  outline: 0;
}

/***edit_btn****/
.edit_btn {
  background-color: var(--sk-asscolor-light);
  border: 1px solid var(--sk-asscolor);
  color: var(--sk-asscolor);
  font-size: 85%;
  font-weight: 600;
  line-height: normal;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: 0.6s;
}

body.dark .edit_btn {
  color: var(--sk-heading-dark);
}

.edit_btn:hover {
  border: 1px solid var(--sk-asscolor);
  background-color: var(--sk-asscolor);
  color: var(--sk-text-dark);
  box-shadow: none;
  outline: 0;
}

/****active_btn****/
.active_btn {
  background-color: var(--sk-green-light);
  border: 1px solid var(--sk-green);
  color: var(--sk-green);
  font-size: 85%;
  font-weight: 600;
  padding: 2px 6px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: 0.6s;
}

.active_btn:hover {
  border: 1px solid var(--sk-green);
  background-color: var(--sk-green);
  color: var(--sk-text-dark);
  box-shadow: none;
  outline: 0;
}

/******warning_btn*****/
.warning_btn {
  background-color: var(--sk-yellow-light);
  border: 1px solid var(--sk-yellow);
  color: var(--sk-yellow);
  font-size: 85%;
  font-weight: 500;
  padding: 2px 6px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: 0.6s;
}

.warning_btn:hover {
  border: 1px solid var(--sk-yellow);
  background-color: var(--sk-yellow);
  color: var(--sk-text-dark);
  box-shadow: none;
  outline: 0;
}






/*-----------------------------------------------
Dark mode light mode
------------------------------------------------*/
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 64px;
  height: 34px;
  padding: 0;
  margin: 0;
}

.switch input {
  opacity: 0 !important;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #73C0FC;
  border: 1px solid #73C0FC;
  transition: .4s;
  border-radius: 30px;
}

.switch .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  border-radius: 20px;
  left: 3px;
  bottom: 3px;
  z-index: 2;
  background-color: #e8e8e8;
  transition: .4s;
}

.switch .sun svg {
  position: absolute;
  top: 5px;
  left: 36px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

.switch .moon svg {
  fill: #73C0FC;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

/* .switch:hover */
.switch .sun svg {
  animation: rotate 8s linear infinite;
}

@keyframes rotate {

  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* .switch:hover */
.switch .moon svg {
  animation: tilt 3s linear infinite;
}

@keyframes tilt {

  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-15deg);
  }

  75% {
    transform: rotate(15deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.switch .input:checked+.slider {
  background-color: #183153;
  border: 1px solid var(--sk-border-dark);
}

.switch .input:focus+.slider {
  box-shadow: 0 0 1px #183153;
}

.switch .input:checked+.slider:before {
  transform: translateX(30px);
}




/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
  margin-top: 60px;
  padding: 20px 30px;
  transition: all 0.3s;
  height: calc(100vh - 60px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 1199px) {
  #main {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
  margin-bottom: 15px;
}

.pagetitle h1 {
  font-size: 160%;
  margin-bottom: 0;
  font-weight: 600;
  color: var(--sk-heading);
}

body.dark .pagetitle h1 {
  color: var(--sk-heading-dark);
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99;
  background: var(--sk-primary);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: var(--sk-heading-dark);
  line-height: 0;
}

.back-to-top:hover {
  background: var(--sk-secondary);
  color: var(--sk-heading-dark);
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
  border-radius: 4px;
  padding: 10px 0;
  -webkit-animation-name: dropdown-animate;
  animation-name: dropdown-animate;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  border: 0;
  box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
  text-align: center;
  font-size: 15px;
  padding: 10px 25px;
}

.dropdown-menu .dropdown-footer a {
  color: #444444;
  text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover {
  text-decoration: none;
}

.dropdown-menu .dropdown-divider {
  color: #a5c5fe;
  margin: 0;
}

.dropdown-menu .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.dropdown-menu .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #f6f9ff;
}

@media (min-width: 768px) {
  .dropdown-menu-arrow::before {
    content: "";
    width: 13px;
    height: 13px;
    background: #fff;
    position: absolute;
    top: -7px;
    right: 20px;
    transform: rotate(45deg);
    border-top: 1px solid #eaedf1;
    border-left: 1px solid #eaedf1;
  }
}

@-webkit-keyframes dropdown-animate {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

  0% {
    opacity: 0;
  }
}

@keyframes dropdown-animate {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

  0% {
    opacity: 0;
  }
}

/* Light Backgrounds */
.bg-primary-light {
  background-color: #cfe2ff;
  border-color: #cfe2ff;
}

.bg-secondary-light {
  background-color: #e2e3e5;
  border-color: #e2e3e5;
}

.bg-success-light {
  background-color: #d1e7dd;
  border-color: #d1e7dd;
}

.bg-danger-light {
  background-color: #f8d7da;
  border-color: #f8d7da;
}

.bg-warning-light {
  background-color: #fff3cd;
  border-color: #fff3cd;
}

.bg-info-light {
  background-color: #cff4fc;
  border-color: #cff4fc;
}

.bg-dark-light {
  background-color: #d3d3d4;
  border-color: #d3d3d4;
}

/* Card */
.card {
  margin-bottom: 22px;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
  background-color: var(--sk-body-white);
  border: 1px solid transparent;
}

body.dark .card {
  background-color: var(--sk-bg-transparent);
  border: 1px solid var(--sk-border-dark);
}

.card-header,
.card-footer {
  border-color: #ebeef4;
  background-color: #fff;
  color: #798eb3;
  padding: 15px;
}

.card-title {
  font-size: 90%;
  font-weight: 500;
  color: var(--sk-heading);
  font-family: "Poppins", sans-serif;
  line-height: normal;
  padding: 0;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark .card-title {
  color: var(--sk-heading-dark);
}

.dashboard .info-card .card-title {
  font-size: 75%;
  margin-bottom: 3px;
}

.card-title span {
  color: #899bbd;
  font-size: 80%;
  font-weight: 400;
  white-space: nowrap;
}

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

body.dark .text-muted {
  color: var(--sk-text-dark) !important;
  opacity: 0.8;
}

.card-body {
  padding: 10px 14px;
  position: relative;
}

.card-img-overlay {
  background-color: rgba(255, 255, 255, 0.6);
}

/* Alerts */
.alert-heading {
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
}

/* Close Button */
.btn-close {
  background-size: 25%;
  font-size: 200%;
}

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

/* Accordion */
.accordion-item {
  border: 1px solid #ebeef4;
}

.accordion-button:focus {
  outline: 0;
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: #012970;
  background-color: #f6f9ff;
}

.accordion-flush .accordion-button {
  padding: 15px 0;
  background: none;
  border: 0;
}

.accordion-flush .accordion-button:not(.collapsed) {
  box-shadow: none;
  color: #4154f1;
}

.accordion-flush .accordion-body {
  padding: 0 0 15px 0;
  color: #3e4f6f;
  font-size: 15px;
}

/* Breadcrumbs */
.breadcrumb {
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 85%;
  font-family: "Nunito", sans-serif;
  color: var(--sk-text);
  font-weight: 600;
  margin: 0;
  gap: 10px;
}

.breadcrumb li a {
  color: var(--sk-text);
  transition: 0.3s;
  opacity: 0.8;
}

body.dark .breadcrumb li a {
  color: var(--sk-heading-dark);
}


.breadcrumb a:hover {
  opacity: 1;
}

.breadcrumb .breadcrumb-item::before {
  color: var(--sk-text);
  opacity: 0.7;
}

body.dark .breadcrumb .breadcrumb-item::before {
  color: var(--sk-heading-dark);
}

.breadcrumb .active {
  opacity: 1;
  font-weight: 600;
}

body.dark .breadcrumb .active {
  color: var(--sk-heading-dark);
}


/* Bordered Tabs */
.nav-tabs-bordered {
  border-bottom: 2px solid var(--sk-primary);
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.nav-tabs-bordered::-webkit-scrollbar {
  display: none;
}

.nav-tabs-bordered .nav-link {
  margin-bottom: -1px;
  border: none;
  color: var(--sk-text);
  font-weight: 600;
  border-radius: 16px 16px 0px 0px;
  padding: 4px 15px;
  font-size: 82%;
}

body.dark .nav-tabs-bordered .nav-link {
  color: var(--sk-text-dark);
}

.nav-tabs-bordered .nav-link:hover,
body.dark .nav-tabs-bordered .nav-link:hover {
  color: var(--sk-primary);
  background-color: var(--sk-primary-light);
}

.nav-tabs-bordered .nav-link.active,
.nav-tabs-bordered .nav-link:focus {
  background-color: var(--sk-primary) !important;
  color: var(--sk-text-dark) !important;
  font-weight: 600;
}


/*-------======Form css=======----*/
.form-group {
  margin-bottom: 1rem;
}

label {
  font-size: 80%;
  font-weight: 600;
  margin-bottom: 4px;
  color: #000;
  display: block;
}

body.dark label {
  color: var(--sk-text-dark);
}

div.dataTables_wrapper div.dataTables_filter label {
  display: inline-block;
}

.form-input:focus {
  border: none !important;
}

/***select2 css start****/
.select2-container {
  width: 100% !important;
}

.select2-container .select2-selection--single {
  height: 40px !important;
  background-color: transparent !important;
  border: 1px solid var(--sk-border) !important;
  color: var(--sk-text) !important;
}

body.dark .select2-container .select2-selection--single {
  border: 1px solid var(--sk-border-dark) !important;
  color: var(--sk-text-dark) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 100%;
  padding: 5px 10px;
  color: var(--sk-text) !important;
}

body.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--sk-text-dark) !important;
  opacity: 0.8;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: 0 !important;
  border-radius: 4px;
}

.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--sk-primary-light) !important;
  color: var(--sk-primary) !important;
}

.select2-results__option {
  padding: 4px 6px !important;
}

.select2-dropdown {
  background-color: var(--sk-body) !important;
  border: 1px solid var(--sk-border) !important;
}

body.dark .select2-dropdown {
  background-color: var(--sk-bg-transparent) !important;
  border: 1px solid var(--sk-border-dark) !important;
}


/***select2 css End****/

body.dark select.form-control {
  /* color: var(--sk-text) !important; */
  background-color: var(--sk-bg-transparent) !important;
}

/* Base Input Styles */
select.form-control,
input.form-control,
input.dataTable-input,
textarea.form-control {
  width: 100%;
  min-width: 190px;
  max-width: 100%;
  height: 40px;
  padding: 5px 10px;
  display: block;
  background-color: transparent !important;
  border: 1px solid var(--sk-border) !important;
  color: var(--sk-text) !important;
  border-radius: 4px;
  font-size: 95%;
  box-shadow: none;
  outline: 0;
}

table select.form-control,
table input.form-control,
table input.dataTable-input,
table textarea.form-control {
  min-width: 120px;
  max-width: 100%;
  width: 100%;
}

/* Placeholder */
.form-control::placeholder,
.dataTable-input::placeholder {
  color: var(--sk-input-placeholder);
}

/* Focus State */
.form-control:focus,
.dataTable-input:focus,
textarea.form-control:focus {
  box-shadow: none;
  outline: 0;
  border: 1px solid var(--sk-primary) !important;
}

/* Dark Mode */
body.dark .form-control,
body.dark .dataTable-input,
body.dark input[type="text"],
body.dark textarea.form-control {
  color: var(--sk-text-dark) !important;
  border: 1px solid var(--sk-asscolor-light) !important;
  opacity: 0.8 !important;
  background-color: transparent !important;
}

/* Dark Mode Focus */
body.dark .form-control:focus,
body.dark .dataTable-input:focus,
body.dark textarea.form-control:focus {
  border: 1px solid var(--sk-primary) !important;
}

/* Textarea Specific */
textarea.form-control {
  height: auto;
  min-height: 40px;
}


.form-control.small {
  min-width: 80px !important;
  text-align: center;
}

.form-control-add {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  position: relative;
}

.form-control-add .form-control {
  padding: 6px 55px 6px 10px;
}

.form-control-add .btn-link {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  background-color: var(--sk-primary);
  color: var(--sk-heading-dark);
  white-space: nowrap;
  font-size: 85%;
  height: 40px;
  margin: 0;
  border-radius: 0px .375rem .375rem 0px;
  text-decoration: none;
  box-shadow: none;
  outline: 0;
  font-weight: 600;
  border: none;
}

.form-control-add .btn-link:hover {
  background-color: var(--sk-secondary);
  color: var(--sk-heading-dark);
}







/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.logo {
  line-height: 1;
}

@media (min-width: 1200px) {
  .logo {
    width: 280px;
  }
}

.logo img {
  max-height: 45px;
  margin-right: 10px;
}

.logo span {
  font-size: 18px;
  font-weight: 700;
  color: var(--sk-heading);
  font-family: "Nunito", sans-serif;
}

body.dark .logo span {
  color: var(--sk-heading-dark);
}

.header {
  transition: all 0.5s;
  z-index: 997;
  height: 60px;
  box-shadow: 0px 2px 20px var(--sk-box-shadow);
  background-color: var(--sk-body-white);
  padding-left: 20px;
  /* Toggle Sidebar Button */
  /* Search Bar */
}

body.dark .header {
  background-color: var(--sk-bg-transparent);
  border-bottom: 1px solid var(--sk-border-dark);
}

.header .toggle-sidebar-btn {
  font-size: 32px;
  padding-left: 10px;
  cursor: pointer;
  color: var(--sk-heading);
}

body.dark .header .toggle-sidebar-btn {
  color: var(--sk-heading-dark);
}

.header .search-bar {
  min-width: 360px;
  padding: 0 20px;
}

.header .search-form {
  width: 100%;
}

.header .search-form input {
  border: 0;
  font-size: 14px;
  color: var(--sk-primary);
  border: 1px solid rgba(1, 41, 112, 0.2);
  padding: 7px 38px 7px 8px;
  border-radius: 3px;
  transition: 0.3s;
  width: 100%;
}

.header .search-form input:focus,
.header .search-form input:hover {
  outline: none;
  box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
  border: 1px solid rgba(1, 41, 112, 0.3);
}

.header .search-form button {
  border: 0;
  padding: 0;
  margin-left: -30px;
  background: none;
}

.header .search-form button i {
  color: var(--sk-heading);
}

/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
  list-style: none;
}

.header-nav>ul {
  margin: 0;
  padding: 0;
}

.header-nav .nav-icon {
  font-size: 22px;
  color: var(--sk-heading);
  margin-right: 25px;
  position: relative;
}

body.dark .header-nav .nav-icon {
  color: var(--sk-heading-dark);
}

.header-nav .nav-profile {
  color: var(--sk-heading);
}

body.dark .header-nav .nav-profile {
  color: var(--sk-heading-dark);
}

.header-nav .nav-profile img {
  max-height: 36px;
}

body.dark .header-nav .nav-profile img {
  border: 1px solid var(--sk-border-dark);
}

.header-nav .nav-profile span {
  font-size: 14px;
  font-weight: 600;
}

.header-nav .badge-number {
  position: absolute;
  inset: -2px -5px auto auto;
  font-weight: normal;
  font-size: 12px;
  padding: 3px 6px;
}

.header-nav .notifications {
  inset: 8px -15px auto auto !important;
}

.header-nav .notifications .notification-item {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  transition: 0.3s;
}

.header-nav .notifications .notification-item i {
  margin: 0 15px 0 5px;
  font-size: 150%;
}

.header-nav .notifications .notification-item h4 {
  font-size: 90%;
  font-weight: 600;
  margin-bottom: 1px;
  line-height: normal;
}

.header-nav .notifications .notification-item p {
  font-size: 75%;
  margin-bottom: 1px;
  color: var(--sk-text);
  line-height: normal;
}

.header-nav .notifications .notification-item:hover {
  background-color: var(--sk-primary-light);
}

.header-nav .messages {
  inset: 8px -15px auto auto !important;
}

.header-nav .messages .message-item {
  padding: 15px 10px;
  transition: 0.3s;
}

.header-nav .messages .message-item a {
  display: flex;
}

.header-nav .messages .message-item img {
  margin: 0 20px 0 10px;
  max-height: 40px;
}

.header-nav .messages .message-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #444444;
}

.header-nav .messages .message-item p {
  font-size: 13px;
  margin-bottom: 3px;
  color: #919191;
}

.header-nav .messages .message-item:hover {
  background-color: #f6f9ff;
}

.header-nav .profile {
  min-width: 240px;
  padding-bottom: 0;
  top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
  font-size: 18px;
  margin-bottom: 0;
  font-weight: 600;
  color: #444444;
}

.header-nav .profile .dropdown-header span {
  font-size: 14px;
}

.header-nav .profile .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.header-nav .profile .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.header-nav .profile .dropdown-item:hover {
  background-color: #f6f9ff;
}

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 300px;
  z-index: 996;
  transition: all 0.3s;
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #aab7cf transparent;
  box-shadow: 0px 0px 20px var(--sk-box-shadow);
  background-color: var(--sk-body-white);
}

body.dark .sidebar {
  background-color: var(--sk-bg-transparent);
  border-right: 1px solid var(--sk-border-dark);
}

.sidebar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #aab7cf;
}

.sidebar-nav {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav .nav-item {
  margin-bottom: 5px;
}

.sidebar-nav .nav-heading {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--sk-text);
  font-weight: 600;
  margin: 10px 0 5px 15px;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--sk-primary);
  transition: 0.3s;
  background: var(--sk-primary-light);
  padding: 10px 14px;
  border-radius: 4px;
}

.sidebar-nav .nav-link i {
  font-size: 16px;
  margin-right: 10px;
  color: var(--sk-primary);
}

.sidebar-nav .nav-link.collapsed {
  color: var(--sk-heading);
  background: transparent;
}

.sidebar-nav .nav-link.collapsed i {
  color: var(--sk-heading);
}

body.dark .sidebar-nav .nav-link.collapsed,
body.dark .sidebar-nav .nav-link.collapsed i {
  color: var(--sk-heading-dark);
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.collapsed:hover,
body.dark .sidebar-nav .nav-link:hover,
body.dark .sidebar-nav .nav-link.collapsed:hover {
  color: var(--sk-primary);
  background: var(--sk-primary-light);
}

.sidebar-nav .nav-link:hover i,
.sidebar-nav .nav-link.collapsed:hover i,
body.dark .sidebar-nav .nav-link:hover i,
body.dark .sidebar-nav .nav-link.collapsed:hover i {
  color: var(--sk-primary);
}

.sidebar-nav .nav-link .bi-chevron-down {
  margin-right: 0;
  transition: transform 0.2s ease-in-out;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

.sidebar-nav .nav-content {
  padding: 5px 0 0 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav .nav-content a {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--sk-text);
  padding: 5px 5px 5px 35px;
  transition: 0.3s;
  opacity: 0.8;
}

body.dark .sidebar-nav .nav-content a {
  color: var(--sk-text-dark);
}

.sidebar-nav .nav-content li ul li a {
  padding: 10px 0 10px 55px !important;
  font-size: 12px;
}

.sidebar-nav .nav-content a i {
  font-size: 9px;
  margin-right: 8px;
  line-height: 0;
  border-radius: 50%;
  display: none;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  color: var(--sk-primary);
  opacity: 1;
}

body.dark .sidebar-nav .nav-content a:hover,
body.dark .sidebar-nav .nav-content a.active {
  color: var(--sk-primary);
}

.sidebar-nav .nav-content a.active i {
  background-color: var(--sk-primary);
}

/***left design****/
.sidebar-nav li>ul>li {
  position: relative;
}

.sidebar-nav li>ul>li:before {
  content: "";
  background-image: url(../img/icon/linebig.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  width: 10px;
  height: 38px;
  position: absolute;
  top: -21px;
  left: 20px;
}

.sidebar-nav li>ul>li:first-child:before {
  top: -22px;
  left: 21px;
  background-image: url(../img/icon/linemall.png);
}

/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/

.filterdropdown_wrap {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 5px;
}

.filterdropdown_wrap .dropdown-menu {
  padding: 0;
}

.filterdropdown_wrap .filter .icon {
  border: 1px solid var(--sk-border);
}

body.dark .filterdropdown_wrap .filter .icon {
  border: 1px solid var(--sk-border-dark);
}

/* Filter dropdown */
.dashboard .filter {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
}

.dashboard .filter .icon {
  color: var(--sk-text);
  padding: 2px 6px;
  border-radius: 5px;
  transition: 0.3s;
  font-size: 82%;
  font-weight: 500;
}

body.dark .dashboard .filter .icon {
  color: var(--sk-text-dark);
  opacity: 0.8;
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
  color: var(--sk-primary);
}

.dashboard .filter .dropdown-header {
  padding: 8px 12px 5px;
}

.dashboard .filter .dropdown-header h6 {
  text-transform: uppercase;
  font-size: 85%;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--sk-primary);
  margin-bottom: 0;
  padding: 0;
}

.dashboard .filter .dropdown-item {
  padding: 5px 12px;
  font-size: 85%;
}

/* Info Cards */
.dashboard .info-card .card-body {
  padding: 6px 8px;
}

.dashboard .info-card span.small {
  font-size: 75%;
  font-weight: 500;
}

.dashboard .info-card h6 {
  font-size: 100%;
  color: var(--sk-heading);
  font-weight: 700;
  margin: 0;
  padding: 0;
}

body.dark .dashboard .info-card h6 {
  color: var(--sk-heading-dark);
}

.indic_icon {
  height: 20px;
  object-fit: contain;
  margin-right: 1px;
}

.dashboard .card-icon {
  font-size: 115%;
  line-height: 0;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 5px;
}

.dashboard .info-card .card-icon {
  background: var(--sk-primary-light);
  color: var(--sk-primary);
}

/* .dashboard .first_card .card-icon {
  color: #4154f1;
  background: #f6f6fe;
}

.dashboard .second_card .card-icon {
  color: #2eca6a;
  background: #e0f8e9;
}

.dashboard .third_card .card-icon {
  color: #ff771d;
  background: #ffecdf;
}

.dashboard .fourth_card .card-icon {
  color: #6610f2;
  background: #b4a2d17a;
}

.dashboard .fifth_card .card-icon {
  color: #ffc107;
  background: #fce39893;
}

.dashboard .sixth_card .card-icon {
  color: #343a40;
  background: #d8d8d7;
} */

/* Activity */
.dashboard .activity {
  font-size: 14px;
}

.dashboard .activity .activity-item .activite-label {
  color: var(--sk-text);
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  min-width: 85px;
  font-size: 75%;
}

body.dark .dashboard .activity .activity-item .activite-label {
  color: var(--sk-text-dark);
  opacity: 0.8;
}

.dashboard .activity .activity-item .activite-label::before {
  content: "";
  position: absolute;
  right: -9px;
  width: 4px;
  top: 0;
  bottom: 0;
  background-color: #eceefe;
}

.dashboard .activity .activity-item .activity-badge {
  margin-top: 3px;
  z-index: 1;
  font-size: 8px;
  line-height: 0;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid #fff;
  flex-grow: 0;
}

.dashboard .activity .activity-item .activity-content {
  padding-left: 10px;
  padding-bottom: 20px;
  font-size: 12px;
}

.dashboard .activity .activity-item:first-child .activite-label::before {
  top: 5px;
}

.dashboard .activity .activity-item:last-child .activity-content {
  padding-bottom: 0;
}

/* News & Updates */
.dashboard .news .post-item+.post-item {
  margin-top: 15px;
}

.dashboard .news img {
  width: 80px;
  float: left;
  border-radius: 5px;
}

.dashboard .news h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
  margin-bottom: 5px;
}

.dashboard .news h4 a {
  color: #012970;
  transition: 0.3s;
}

.dashboard .news h4 a:hover {
  color: #4154f1;
}

.dashboard .news p {
  font-size: 14px;
  color: #777777;
  margin-left: 95px;
}

/* Top Selling */
.dashboard .top-selling {
  font-size: 14px;
}

.dashboard .top-selling .table thead {
  background: var(--sk-primary-light);
}

.dashboard .top-selling .table thead th {
  border: 0;
}

.dashboard .top-selling .table tbody td {
  vertical-align: middle;
}

.dashboard .top-selling img {
  border-radius: 5px;
  max-width: 60px;
}


/*--------------------------------------------------------------
# Profie Page
--------------------------------------------------------------*/
/* .profile .profile-card img {
  max-width: 120px;
} */

.profile .profile-card h2 {
  font-size: 130%;
  font-weight: 700;
  color: var(--sk-heading);
  margin: 10px 0 0 0;
  text-align: center;
}

body.dark .profile .profile-card h2 {
  color: var(--sk-heading-dark);
}

.profile .profile-card h3 {
  color: var(--sk-heading);
  font-size: 110%;
}

body.dark .profile .profile-card h3 {
  color: var(--sk-heading-dark);
}

.profile .profile-card .social-links a {
  font-size: 20px;
  display: inline-block;
  color: var(--sk-link);
  line-height: 0;
  margin-right: 10px;
  transition: 0.3s;
}

.profile .profile-card .social-links a:hover {
  color: var(--sk-link-hover);
}

.profile .profile-overview .row {
  margin-bottom: 20px;
  font-size: 15px;
}

.profile .profile-overview .card-title {
  color: var(--sk-heading);
}

body.dark .profile .profile-overview .card-title {
  color: var(--sk-heading-dark);
}

.profile .profile-overview .label {
  font-weight: 600;
  color: var(--sk-text);
}

body.dark .profile .profile-overview .label {
  color: var(--sk-text-dark);
  opacity: 0.8;
}

.profile .profile-edit label {
  font-weight: 600;
  color: var(--sk-text);
}

body.dark .profile .profile-edit label {
  color: var(--sk-text-dark);
  opacity: 0.8;
}

.profile .profile-edit img {
  max-width: 120px;
}

/*--------------------------------------------------------------
# F.A.Q Page
--------------------------------------------------------------*/
.faq .basic h6 {
  font-size: 18px;
  font-weight: 600;
  color: var(--sk-primary);
}

.faq .basic p {
  color: var(--sk-text);
}

body.dark .faq .basic p {
  color: var(--sk-text-dark);
  opacity: 0.8;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
  padding: 28px 30px;
}

.contact .info-box i {
  font-size: 38px;
  line-height: 0;
  color: #4154f1;
}

.contact .info-box h3 {
  font-size: 20px;
  color: #012970;
  font-weight: 700;
  margin: 20px 0 10px 0;
}

.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  border-radius: 0;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: #4154f1;
}

.contact .php-email-form input {
  padding: 10px 15px;
}

.contact .php-email-form textarea {
  padding: 12px 15px;
}

.contact .php-email-form button[type=submit] {
  background: #4154f1;
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: #5969f3;
}

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

  100% {
    transform: rotate(360deg);
  }
}

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

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  padding: 20px 0;
  font-size: 14px;
  transition: all 0.3s;
  border-top: 1px solid var(--sk-border);
}

body.dark .footer {
  border-top: 1px solid var(--sk-border-dark);
}

.footer .copyright {
  text-align: center;
  color: var(--sk-heading);
}

body.dark .footer .copyright {
  color: var(--sk-heading-dark);
}

.footer .credits {
  padding-top: 5px;
  text-align: center;
  font-size: 13px;
  color: var(--sk-heading);
}

body.dark .footer .credits {
  color: var(--sk-heading-dark);
}

.footer .credits a {
  color: var(--sk-primary) !important;
  font-weight: 600;
}

.list-group-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

.list-group-item input {
  width: auto;
  height: auto;
}

.ListgroupRole {
  width: 100%;
  height: auto;
  padding: 0px 0px 0px;
  gap: 8px 30px;
  display: grid;
  grid-template-columns: auto auto auto auto;
}

.roletype {
  white-space: nowrap;
}

/****/
.col-form-label {
  font-size: 85%;
  font-weight: 600;
}

.profilepassword {
  position: relative;
}

.profilepassword input {
  padding: 6px 40px 6px 10px;
  font-size: 85%;
}

.profilepassword .eyebutton {
  padding: 5px;
  font-size: 100%;
}

.eyebutton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  z-index: 2;
  color: var(--sk-text);
  box-shadow: none;
}

body.dark .eyebutton {
  color: var(--sk-text-dark);
  opacity: 0.8;
}

.eyebutton:focus {
  box-shadow: none !important;
  border: none;
  outline: 0;
}

.cardbox_ {
  width: 100%;
  height: auto;
  padding: 20px 20px;
  margin-top: 40px;
  box-shadow: 0px 0px 5px 0px #ccc;
  border-radius: 6px;
}

.cardbox_ .form-control {
  border: none !important;
}

#changePasswordForm .form-control.is-invalid,
#changePasswordForm .was-validated .form-control:invalid {
  background-position: right calc(.375em + 2rem) center !important;
}

#changePasswordForm .form-control.is-valid,
#changePasswordForm .was-validated .form-control:valid {
  background-position: right calc(.375em + 2rem) center !important;
}

/*-------------------------------------*/
/*--------------dropdown-css-----------*/

.dropdown select {
  background-color: var(--sk-body-white);
  border: 1px solid var(--sk-primary);
  color: var(--sk-primary) !important;
  font-weight: 600;
  padding: 4px 25px 4px 10px;
  font-size: 80%;
  background-position: right 5px center !important;
  background-image: url("../img/icon/down-chevron.svg");
}

body.dark .dropdown select {
  background-color: var(--sk-primary-light);
}

.dropdown select:focus {
  box-shadow: none;
  outline: 0;
  border: 1px solid var(--sk-primary) !important;
}

.dropdown select option {
  background-color: var(--sk-body);
  font-weight: 500;
  color: var(--sk-text);
}



/*----------------------------*/
/*-------.apexcharts css------*/

.apexcharts-menu-icon {
  display: none;
}

body.dark .apexcharts-inner line {
  opacity: 0.5 !important;
}

.apexcharts-text text {
  fill: var(--sk-text) !important;
}

body.dark .apexcharts-text tspan {
  fill: var(--sk-text-dark) !important;
  opacity: 0.8;
}

.apexcharts-legend-text {
  color: var(--sk-text) !important;
}

body.dark .apexcharts-legend-text {
  color: var(--sk-text-dark) !important;
  opacity: 0.8;
}

body.dark .apexcharts-tooltip,
body.dark .apexcharts-tooltip-title {
  background: var(--sk-body-dark) !important;
}


/******table popupp modal css********/
.actionPopup_box {
  width: 100%;
  height: auto;
  padding: 8px 10px;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 2;
}

.actionPopup_box .content_wrap {
  background-color: var(--sk-body-white);
  box-shadow: 0px 0px 5px 0px var(--sk-box-shadow);
  border: 1px solid var(--sk-border);
  padding: 8px 30px 8px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex-wrap: wrap;
}

body.dark .actionPopup_box .content_wrap {
  background-color: var(--sk-bg-transparent);
  border: 1px solid var(--sk-border-dark);
}

.actionPopup_box .close_btn {
  position: absolute;
  top: 16px;
  right: 17px;
  /* transform: translateY(-50%); */
  color: var(--sk-error);
  background-color: transparent;
  box-shadow: none;
  outline: 0;
  font-weight: bold;
  padding: 5px;
  height: 28px;
  width: 28px;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.dark .actionPopup_box .close_btn {
  background-color: var(--sk-error-light);
}

.actionPopup_box .close_btn:hover,
.actionPopup_box .close_btn:focus {
  box-shadow: none;
  outline: 0;
}


/*******item-details*********/

.itemOverview_wrap .item-details {
  width: 100%;
  height: auto;
  font-size: 90%;
  color: var(--sk-text);
}

body.dark .itemOverview_wrap .item-details {
  color: var(--sk-text-dark);
}

.itemOverview_wrap .item-row {
  display: flex;
  margin-bottom: 12px;
}

.itemOverview_wrap .item-label {
  flex: 0 0 200px;
  color: var(--sk-text);
}

body.dark .itemOverview_wrap .item-label {
  color: var(--sk-text-dark);
  opacity: 0.8;
}

.itemOverview_wrap .item-value {
  flex: 1;
  font-weight: 500;
  color: var(--sk-heading);
}

body.dark .itemOverview_wrap .item-value {
  color: var(--sk-heading-dark);
  opacity: 0.7;
}

/*****material details css*******/
.itemOverview_wrap {
  width: 100%;
  height: auto;
}

.itemOverview_wrap .upload-box {
  width: 100%;
  max-width: 370px;
  border: 2px dashed var(--sk-border);
  border-radius: 8px;
  text-align: center;
  padding: 15px;
  background: var(--sk-body);
  position: relative;
  /* margin-bottom: 30px; */
}

body.dark .itemOverview_wrap .upload-box {
  border: 2px dashed var(--sk-primary);
  background: var(--sk-primary-light);
}

.itemOverview_wrap .main-preview {
  width: 100%;
  height: 200px;
  border: 1px solid var(--sk-border);
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sk-body-white);
  overflow: hidden;
  position: relative;
}

body.dark .itemOverview_wrap .main-preview {
  border: 1px solid var(--sk-border-dark);
  background: var(--sk-bg-transparent);
}

.itemOverview_wrap .main-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.itemOverview_wrap .delete_btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 91%;
  border: none;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: none;
  z-index: 1;
}

.itemOverview_wrap .preview-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.itemOverview_wrap .preview-container img,
.itemOverview_wrap .upload-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.itemOverview_wrap .preview-container img.active {
  border-color: var(--sk-primary);
}

.itemOverview_wrap .upload-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--sk-border);
  color: var(--sk-text);
  font-size: 150%;
  font-weight: bold;
}

body.dark .itemOverview_wrap .upload-thumb {
  border: 2px dashed var(--sk-border);
  color: var(--sk-text-dark);
}

.itemOverview_wrap .upload-text {
  font-size: 85%;
  color: var(--sk-text);
}

body.dark .itemOverview_wrap .upload-text {
  color: var(--sk-text-dark);
}

.itemOverview_wrap .upload-text a {
  color: #007bff;
  text-decoration: none;
}

.itemOverview_wrap .upload-text small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--sk-text);
}

body.dark .itemOverview_wrap .upload-text small {
  color: var(--sk-text-dark);
  opacity: 0.7;
}

.itemOverview_wrap input[type="file"] {
  display: none;
}


/*******openingStock_box********/
.openingStock_box {
  width: 100%;
  height: auto;
  padding: 15px;
  background-color: var(--sk-body);
  border-radius: 5px;
}

body.dark .openingStock_box {
  background-color: var(--sk-primary-light);
}

.openingStock_box .head {
  display: flex;
  align-items: center;
  gap: 5px;
}

.openingStock_box .btn {
  font-size: 100%;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin: 0;
  background-color: transparent;
  color: var(--sk-link);
  line-height: normal;
}

/*
================
Forecast css
================
*/
.allforecast_wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 10px;
  padding: 15px 0 5px;
}

.forecast_btn {
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  outline: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 10px 0px;
  color: var(--sk-text);
}

body.dark .forecast_btn {
  color: var(--sk-text-dark);
}

.forecast_btn:hover,
body.dark .forecast_btn:hover {
  color: var(--sk-primary);
}

.forecast_btn:hover .icon {
  border: 1px solid var(--sk-primary);
}

.forecast_btn .icon {
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 4px;
  margin-bottom: 5px;
  border: 1px solid var(--sk-border);
  overflow: hidden;
}

.forecast_btn .icon img {
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.forecast_btn .name {
  font-size: 85%;
  font-weight: 600;
  text-align: center;
}

/*******/
.AiForeCast_btn {
  --black-700: var(--sk-primary);
  --border_radius: 9999px;
  --transtion: 0.3s ease-in-out;
  --offset: 2px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transform-origin: center;
  padding: 8px 20px;
  background-color: transparent;
  border: none;
  border-radius: var(--border_radius);
  transform: scale(calc(1 + (var(--active, 0) * 0.1)));
  transition: transform var(--transtion);
  margin: 0 auto 15px;
}

.AiForeCast_btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: linear-gradient(3deg, rgba(31, 110, 153, 1) 0%, rgba(103, 198, 249, 1) 72%, rgba(232, 247, 255, 1) 100%);
  border-radius: var(--border_radius);
  box-shadow: 0px 0px 5px 0px var(--sk-box-shadow);
  transition: all var(--transtion);
  z-index: 0;
}

.AiForeCast_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgb(31, 110, 153, 0.75);
  background-image: radial-gradient(at 51% 89%, rgb(159, 207, 219) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgb(116, 175, 190) 0px, transparent 50%),
    radial-gradient(at 22% 91%, rgb(116, 175, 190) 0px, transparent 50%);
  background-position: top;
  opacity: var(--active, 0);
  border-radius: var(--border_radius);
  transition: opacity var(--transtion);
  z-index: 2;
}

.AiForeCast_btn:is(:hover, :focus-visible) {
  --active: 1;
}

.AiForeCast_btn:active {
  transform: scale(1);
}

.AiForeCast_btn .dots_border {
  --size_border: calc(100% + 2px);
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--size_border);
  height: var(--size_border);
  background-color: transparent;
  border-radius: var(--border_radius);
  z-index: -10;
}

.AiForeCast_btn .dots_border::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left;
  transform: rotate(0deg);
  width: 100%;
  height: 2rem;
  background-color: #10405a;
  mask: linear-gradient(transparent 0%, var(--sk-primary) 120%);
  animation: rotate 2s linear infinite;
}

body.dark .AiForeCast_btn .dots_border::before {
  background-color: #e3f3fc;
  mask: linear-gradient(transparent 0%, var(--sk-primary) 120%);
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.AiForeCast_btn .sparkle {
  position: relative;
  z-index: 10;

  width: 1.75rem;
}

.AiForeCast_btn .sparkle .path {
  fill: currentColor;
  stroke: currentColor;

  transform-origin: center;

  color: hsl(0, 0%, 100%);
}

.AiForeCast_btn:is(:hover, :focus) .sparkle .path {
  animation: path 1.5s linear 0.5s infinite;
}

.AiForeCast_btn .sparkle .path:nth-child(1) {
  --scale_path_1: 1.2;
}

.AiForeCast_btn .sparkle .path:nth-child(2) {
  --scale_path_2: 1.2;
}

.AiForeCast_btn .sparkle .path:nth-child(3) {
  --scale_path_3: 1.2;
}

@keyframes path {

  0%,
  34%,
  71%,
  100% {
    transform: scale(1);
  }

  17% {
    transform: scale(var(--scale_path_1, 1));
  }

  49% {
    transform: scale(var(--scale_path_2, 1));
  }

  83% {
    transform: scale(var(--scale_path_3, 1));
  }
}

.AiForeCast_btn .text_button {
  position: relative;
  z-index: 10;
  background-image: linear-gradient(90deg, hsl(0deg 9.86% 95.8%) 0%, hsla(0 0% 100% / var(--active, 1)) 120%);
  background-clip: text;
  font-size: 95%;
  color: transparent;
  font-weight: 600;
}




/*******Responsive***************/
/********************************/

@media (max-width: 1400px) {
  .form-control {
    font-size: 0.8rem;
  }

  th,
  td {
    text-align: center;
    font-size: 14px;
  }
}

@media (min-width: 1200px) {
  #main {
    margin-left: 300px;
  }

  .toggle-sidebar #main {
    margin-left: 0;
  }

  .toggle-sidebar .sidebar {
    left: -300px;
  }
}

@media (max-width: 1199px) {

  .sidebar {
    left: -300px;
  }

  .toggle-sidebar .sidebar {
    left: 0;
  }

  .header .search-bar {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    padding: 20px;
    box-shadow: 0px 0px 15px 0px var(--sk-box-shadow);
    background: var(--sk-body-white);
    z-index: 9999;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
  }

  .header .search-bar-show {
    top: 60px;
    visibility: visible;
    opacity: 1;
  }
}

@media (max-width: 991px) {
  .ListgroupRole {
    grid-template-columns: auto auto auto;
  }
}

@media (max-width: 768px) {
  .ListgroupRole {
    grid-template-columns: auto auto;
  }

  html {
    font-size: 14px;
  }

}

@media (max-width: 576px) {
  .dataTable-table th a {
    font-size: 0.8rem;
  }
}


@media (max-width: 480px) {
  .table-controls .search-form {
    width: 100% !important;
  }

  .table-controls .search-form input {
    width: 100%;
  }

  #perPageForm {
    justify-content: center;
    width: 100%;
  }

  .table-footer nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .footer-right {
    width: 100%;
  }

  .card-title {
    margin-bottom: 5px;
  }

  .itemOverview_wrap .item-label {
    flex: 0 0 130px;
  }

  .itemOverview_wrap .item-row {
    margin-bottom: 8px;
  }

  .daterangepicker .drp-selected {
    font-size: 10px !important;
    padding-right: 4px !important;
    font-weight: 600;
  }

  .daterangepicker .drp-buttons .btn {
    margin-left: 5px !important;
  }

  .daterangepicker .drp-buttons {
    text-align: center !important;
  }

  #reportrange {
    width: 100%;
    justify-content: space-between;
  }
}


.iti__selected-flag {
  height: auto !important;
  top: 9px;
}


/*--------------------------------------------------------------
Make Quotation new css
--------------------------------------------------------------*/

.question_box_table tbody td .form-control {
  height: 38px;
}

.question_upload_item {
  display: flex;
  gap: 10px;
}

@media(max-width:767px) {
  .question_upload_item {
    display: grid;
  }
}

/*--------------------------------------------------------------
  enquery input form update send view new css
  --------------------------------------------------------------*/

@media(max-width:767px) {
  .enquery_input_new_box .form-control {
    padding-left: 0;
  }
}

/*--------------------------------------------------------------
  enquery input form update not send view new css
  --------------------------------------------------------------*/
.make_quotation_top_box {
  display: flex;
  justify-content: space-between;
}





/*-----------------------------------------
Pagination custom styles
------------------------------------------*/
.pagination .page-link {
  color: #46b0e4 !important;
  border: 1px solid #46b0e4 !important;
  padding: 3px 12px !important;
  background-color: transparent !important;
  transition: 0.4s;
}

.pagination .page-link:hover {
  background-color: #46b0e4 !important;
  color: #fff !important;
  border-color: #46b0e4 !important;
}

.pagination .page-item.active .page-link {
  background-color: #46b0e4 !important;
  border-color: #46b0e4 !important;
  color: #fff !important;
}

.pagination .page-item.disabled .page-link {
  color: #aaa !important;
  background-color: transparent !important;
  border-color: #dee2e6 !important;
}

body.dark .pagination .page-item.disabled .page-link {
  border-color: #969697 !important;
}



/**********switch button*********/
.toggle-switch-box {
  display: inline-block;
  margin: 0;
  cursor: pointer;
  outline: 0;
  overflow: hidden;
}

.toggle-switch-box input {
  display: none;
}

.toggle-switch-box input:checked+.toggle-switch-item::before {
  left: 0;
}

.toggle-switch-box input:checked+.toggle-switch-item::after {
  right: -100%;
}

.toggle-switch-box input:checked+.toggle-switch-item .switch-button {
  left: calc(100% - 23px);
}

.toggle-switch-box .toggle-switch-item {
  position: relative;
  display: block;
  min-width: 78px;
  min-height: 26px;
}

.toggle-switch-box .toggle-switch-item::before,
.toggle-switch-box .toggle-switch-item::after,
.toggle-switch-box .toggle-switch-item .switch-button {
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

.toggle-switch-box .toggle-switch-item::before,
.toggle-switch-box .toggle-switch-item::after {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.toggle-switch-box .toggle-switch-item::before {
  left: -100%;
  padding: 0 23px 0 0;
  background-color: transparent;
  content: attr(data-tg-on);
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.toggle-switch-box .toggle-switch-item::after {
  right: 0;
  padding: 0 0 0 23px;
  background-color: #5a5f64;
  content: attr(data-tg-off);
  transition: right 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275);
  font-size: 80%;
}

.toggle-switch-box .toggle-switch-item .switch-button {
  left: 3px;
  display: block;
  width: 20px;
  height: 20px;
  border: 3px solid transparent;
  background-color: #fff;
  border-radius: 50%;
  z-index: 1;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.switch-rounded {
  border-radius: 26px;
}

.switch-rectangular {
  border-radius: 3px;
}

.switch-rectangular .toggle-switch-item .switch-button {
  border-radius: 3px;
}

.switch-bg-success .toggle-switch-item::before {
  background-color: #198754;
  font-size: 85%;
}


/*********/
.stock-available-label {
  font-size: 85%;
  font-weight: 600;
  text-align: left;
  padding: 0;
  margin: 0;
  color: var(--sk-green) !important;
}

/*****/