/*===========================
		COMMON css
===========================*/
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: normal;
  font-style: normal;
  color: #5d657b;
  overflow-x: hidden;
  background: #f1f5f9;
}

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

.btn {
  padding: 12px 30px;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  text-decoration: none;
}

.btn-outline {
  background: white;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.btn-primary {
  background: linear-gradient(135deg, #00BFFF 0%, #1E90FF 100%);
  color: white;
  border: none;
  padding: 11px 28px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}


        
.btn-secondary {
  background: white;
  color: #4a5568;
  border: 2px solid #cbd5e0;
  padding: 11px 28px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-danger {
  background: #dc3545;
  color: #fff;
  border: 2px solid #dc3545;
  padding: 11px 28px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-secondary:hover {
  background: #bb2d3b;
  color: #fff;
  border-color: #b02a37;
}

.btn-secondary:hover {
  background: #4a5568;
  color: #f7fafc;
  border-color: #a0aec0;
}

/* Success Outline */
.btn-success-outline {
  background: white;
  color: #28A745;
  border: 2px solid #28A745;
  padding: 11px 28px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
  /* display: flex; */
  align-items: center;
  gap: 8px;
}

.btn-success-outline:hover {
  background: #28A745;
  color: white;
  border-color: #218838;
}

/* Primary Outline */
.btn-primary-outline {
  background: white;
  color: #00BFFF;
  border: 2px solid #00BFFF;
  padding: 11px 28px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
  /* display: flex; */
  align-items: center;
  gap: 8px;
}

.btn-primary-outline:hover {
  background: #00BFFF;
  color: white;
  border-color: #0099CC;
}

/* Warning Outline */
.btn-warning-outline {
  background: white;
  color: #FFC107;
  border: 2px solid #FFC107;
  padding: 11px 28px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
  /* display: flex; */
  align-items: center;
  gap: 8px;
  width: 100%;
}

.btn-warning-outline:hover {
  background: #FFC107;
  color: #212529;
  border-color: #E0A800;
}


        
.btn-delete {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  border: none;
  padding: 11px 28px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
} 

.btn-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .btn-secondary, .btn-success, .btn-cancel, .btn-delete, .modal-footer, .btn-primary, .btn-danger, .btn-success {
      padding: 7px 16px;
      font-size: 11px;
      gap: 5px;
      border-width: 1.5px;
  }
}

@media (max-width: 480px) {
  .modal-footer, .btn-secondary, .btn-cancel, .btn-delete, .btn-primary, .btn-danger, .btn-success {
      flex: 1;
      min-width: 0;
      padding: 8px 10px;
      font-size: 10px;
      justify-content: center;
      white-space: nowrap;
  }
}

a:focus,
input:focus,
textarea:focus,
button:focus,
.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* a:hover {
  color: #00BFFF;
} */

button,
a {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

a,
a:focus,
a:hover {
  text-decoration: none;
}

i,
span,
a {
  display: inline-block;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

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

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  margin: 0px;
}

.img-bg {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.para-width-500 {
  max-width: 500px;
  width: 100%;
}

@media (max-width: 767px) {
  .container {
    padding: 0 30px;
  }
}

/* ========== cart style ========== */
.card-style {
  background: #fff;
  box-sizing: border-box;
  padding: 25px 30px;
  position: relative;
  box-shadow: 0px 12px 24px -4px rgba(145, 158, 171, 0.12), 0px 0px 2px 0px rgba(145, 158, 171, 0.2);
  border-radius: 7px;
}
@media (max-width: 767px) {
  .card-style {
    padding: 20px;
  }
}
.card-style .jvm-zoom-btn {
  position: absolute;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  right: 30px;
  bottom: 30px;
  cursor: pointer;
}
.card-style .jvm-zoom-btn.jvm-zoomin {
  bottom: 70px;
}
.card-style .dropdown-toggle {
  border: none;
  background: none;
}
.card-style .dropdown-toggle::after {
  display: none;
}
.card-style .dropdown-menu {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
}
.card-style .dropdown-menu li:hover a {
  color: #00BFFF !important;
}
.card-style .dropdown-menu li a {
  display: block;
  font-size: 14px;
}

.error-box {
  max-width: 330px;
  margin: 65px auto;
}
@media (max-width: 767px) {
  .error-box {
    margin: 25px auto;
  }
  .error-box img {
    max-width: 180px;
  }
  .error-box h1 {
    font-size: 28px;
  }
}
.error-box a {
  border-radius: 7px;
  padding: 7px 25px;
}

.max-w-350 {
  max-width: 350px;
}

.more-btn-wrapper .dropdown-menu {
  border: 0.5px solid #efefef;
  box-shadow: 0px 5px 10px rgba(26, 25, 85, 0.08);
  border-radius: 5px;
}
.more-btn-wrapper .dropdown-menu .dropdown-item:active, .more-btn-wrapper .dropdown-menu .dropdown-item:focus {
  background: none;
}
.more-btn-wrapper .dropdown-menu .dropdown-item a {
  width: 100%;
  border-radius: 4px;
  color: #1A2142;
}
.more-btn-wrapper .dropdown-menu .dropdown-item i {
  font-weight: 700;
}

/* ======= Border Radius ========= */
.radius-4 {
  border-radius: 4px;
}

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

.radius-30 {
  border-radius: 30px;
}

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

.radius-full {
  border-radius: 50%;
}

.scroll-top {
  width: 45px;
  height: 45px;
  background: #00BFFF;
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.scroll-top:hover {
  color: #fff;
  background: rgba(54, 92, 245, 0.8);
}

.form-control:focus {
  box-shadow: none;
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus,
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.form-check-input.is-valid:focus,
.was-validated .form-check-input:valid:focus,
.form-check-input.is-invalid:focus,
.was-validated .form-check-input:invalid:focus,
.form-check-input:focus,
.radio-style.radio-success .form-check-input:focus,
.radio-style.radio-warning .form-check-input:focus,
.radio-style.radio-danger .form-check-input:focus {
  box-shadow: none;
}

.hover-underline:hover {
  text-decoration: underline;
}

/* ============= typography css ============= */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: #1A2142;
  margin: 0;
}

h1,
.h1 {
  font-size: 32px;
  font-weight: 700;
}

h2,
.h2 {
  font-size: 28px;
  font-weight: 600;
}

h3,
.h3 {
  font-size: 24px;
  font-weight: 500;
}

h4,
.h4 {
  font-size: 20px;
  font-weight: 600;
}

h5,
.h5 {
  font-size: 16px;
  font-weight: 700;
}

h6,
.h6 {
  font-size: 16px;
  font-weight: 600;
}

.text-bold {
  font-weight: 700;
}

.text-semi-bold {
  font-weight: 600;
}

.text-medium {
  font-weight: 500;
}

.text-regular {
  font-weight: 400;
}

.text-light {
  font-weight: 300;
}

.text-sm {
  font-size: 14px;
  line-height: 22px;
}

.text-xs {
  font-size: 12px;
}

/* ========== breadcrumb ============ */
.title-wrapper .breadcrumb-wrapper,
.title-wrapper .title {
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .title-wrapper .breadcrumb-wrapper,
  .title-wrapper .title {
    margin-bottom: 10px;
  }
}

.breadcrumb-wrapper {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 767px) {
  .breadcrumb-wrapper {
    justify-content: flex-start;
  }
}
.breadcrumb-wrapper .breadcrumb li {
  font-size: 14px;
  color: #00BFFF;
}
.breadcrumb-wrapper .breadcrumb li a {
  color: #5d657b;
}
.breadcrumb-wrapper .breadcrumb li a:hover {
  color: #00BFFF;
}

/* ========== Buttons css ========== */
/* buttons base styles */
.main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 15px 45px;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  border-radius: 3px;
  cursor: pointer;
  z-index: 5;
  transition: all 0.4s ease-in-out;
  border: 1px solid transparent;
  overflow: hidden;
}
.main-btn i {
  font-size: 17px;
}
.main-btn svg {
  fill: currentColor;
}
.main-btn:hover {
  color: inherit;
}

.group-btn {
  display: inline-flex;
  border: 1px solid #DFE5EF;
  border-radius: 3px;
}
.group-btn.square-btn .main-btn:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.group-btn.square-btn .main-btn:last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.group-btn.rounded-full .main-btn:first-child {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}
.group-btn.rounded-full .main-btn:last-child {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}
.group-btn .main-btn {
  border-radius: 0;
}
.group-btn .main-btn:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.group-btn .main-btn:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.group-btn .main-btn:not(.group-btn .main-btn:last-child) {
  border-right: 1px solid #DFE5EF;
}

.btn-sm {
  padding: 10px 20px;
  font-weight: 400;
}

/* buttons hover effect */
.btn-hover {
  position: relative;
  overflow: hidden;
}
.btn-hover::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 0%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  top: 50%;
  left: 50%;
  padding: 50%;
  z-index: -1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
  -moz-transform: translate3d(-50%, -50%, 0) scale(0);
  -ms-transform: translate3d(-50%, -50%, 0) scale(0);
  -o-transform: translate3d(-50%, -50%, 0) scale(0);
  transform: translate3d(-50%, -50%, 0) scale(0);
}
.btn-hover:hover::after {
  -webkit-transform: translate3d(-50%, -50%, 0) scale(1.3);
  -moz-transform: translate3d(-50%, -50%, 0) scale(1.3);
  -ms-transform: translate3d(-50%, -50%, 0) scale(1.3);
  -o-transform: translate3d(-50%, -50%, 0) scale(1.3);
  transform: translate3d(-50%, -50%, 0) scale(1.3);
}

/* Dropdown buttons */
.base-dropdown-btn .main-btn {
  padding: 8px 15px;
}
.base-dropdown-btn .main-btn svg {
  fill: currentColor;
}
.base-dropdown-btn .dropdown-menu {
  box-shadow: 0px 12px 24px -4px rgba(145, 158, 171, 0.12), 0px 0px 2px 0px rgba(145, 158, 171, 0.2);
  border-radius: 3px;
  border: none;
}
.base-dropdown-btn .dropdown-item {
  padding: 8px 15px;
  color: #5d657b;
  font-weight: 500;
}
.base-dropdown-btn .dropdown-item:hover {
  color: #5d657b !important;
  background: #f5f8fc;
}

/* primary buttons */
.primary-btn {
  background: #00BFFF;
  color: #fff;
}
.primary-btn:hover {
  color: #fff;
}

.primary-btn-outline {
  background: transparent;
  color: #00BFFF;
  border-color: #00BFFF;
}
.primary-btn-outline:hover {
  color: #fff;
  background: #00BFFF;
}

.primary-btn-light {
  background: rgba(54, 92, 245, 0.12);
  color: #00BFFF;
}
.primary-btn-light:hover {
  color: #00BFFF;
}

.primary-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #00BFFF;
}
.primary-btn-group.active, .primary-btn-group:hover {
  color: #fff;
  background: #00BFFF;
  border-color: #00BFFF !important;
}

/* secondary buttons */
.secondary-btn {
  background: #00c1f8;
  color: #fff;
}
.secondary-btn:hover {
  color: #fff;
}

.secondary-btn-outline {
  background: transparent;
  color: #00c1f8;
  border-color: #00c1f8;
}
.secondary-btn-outline:hover {
  color: #fff;
  background: #00c1f8;
}

.secondary-btn-light {
  background: rgba(0, 193, 248, 0.12);
  color: #00c1f8;
}
.secondary-btn-light:hover {
  color: #00c1f8;
}

.secondary-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #00c1f8;
}
.secondary-btn-group.active, .secondary-btn-group:hover {
  color: #fff;
  background: #00c1f8;
  border-color: #00c1f8 !important;
}

/* success buttons */
.success-btn {
  background: #219653;
  color: #fff;
}
.success-btn:hover {
  color: #fff;
}

.success-btn-outline {
  background: transparent;
  color: #219653;
  border-color: #219653;
}
.success-btn-outline:hover {
  color: #fff;
  background: #219653;
}

.success-btn-light {
  background: rgba(33, 150, 83, 0.12);
  color: #219653;
}
.success-btn-light:hover {
  color: #219653;
}

.success-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #219653;
}
.success-btn-group.active, .success-btn-group:hover {
  color: #fff;
  background: #219653;
  border-color: #219653 !important;
}

/* danger buttons */
.danger-btn {
  background: #d50100;
  color: #fff;
}
.danger-btn:hover {
  color: #fff;
}

.danger-btn-outline {
  background: transparent;
  color: #d50100;
  border-color: #d50100;
}
.danger-btn-outline:hover {
  color: #fff;
  background: #d50100;
}

.danger-btn-light {
  background: rgba(213, 1, 0, 0.12);
  color: #d50100;
}
.danger-btn-light:hover {
  color: #d50100;
}

.danger-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #d50100;
}
.danger-btn-group.active, .danger-btn-group:hover {
  color: #fff;
  background: #d50100;
  border-color: #d50100 !important;
}

/* warning buttons */
.warning-btn {
  background: #f7c800;
  color: #fff;
}
.warning-btn:hover {
  color: #fff;
}

.warning-btn-outline {
  background: transparent;
  color: #f7c800;
  border-color: #f7c800;
}
.warning-btn-outline:hover {
  color: #fff;
  background: #f7c800;
}

.warning-btn-light {
  background: rgba(247, 200, 0, 0.12);
  color: #f7c800;
}
.warning-btn-light:hover {
  color: #f7c800;
}

.warning-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #f7c800;
}
.warning-btn-group.active, .warning-btn-group:hover {
  color: #fff;
  background: #f7c800;
  border-color: #f7c800 !important;
}

/* info buttons */
.info-btn {
  background: #97ca31;
  color: #fff;
}
.info-btn:hover {
  color: #fff;
}

.info-btn-outline {
  background: transparent;
  color: #97ca31;
  border-color: #97ca31;
}
.info-btn-outline:hover {
  color: #fff;
  background: #97ca31;
}

.info-btn-light {
  background: rgba(151, 202, 49, 0.12);
  color: #97ca31;
}
.info-btn-light:hover {
  color: #97ca31;
}

.info-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #97ca31;
}
.info-btn-group.active, .info-btn-group:hover {
  color: #fff;
  background: #97ca31;
  border-color: #97ca31 !important;
}

/* dark buttons */
.dark-btn {
  background: #1A2142;
  color: #fff;
}
.dark-btn:hover {
  color: #fff;
}

.dark-btn-outline {
  background: transparent;
  color: #1A2142;
  border-color: #1A2142;
}
.dark-btn-outline:hover {
  color: #fff;
  background: #1A2142;
}

.dark-btn-light {
  background: rgba(26, 33, 66, 0.12);
  color: #1A2142;
}
.dark-btn-light:hover {
  color: #1A2142;
}

.dark-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #1A2142;
}
.dark-btn-group.active, .dark-btn-group:hover {
  color: #fff;
  background: #1A2142;
  border-color: #1A2142 !important;
}

/* light buttons */
.light-btn {
  background: #DFE5EF;
  color: #1A2142;
}
.light-btn:hover {
  color: #1A2142;
}

.light-btn-outline {
  background: transparent;
  color: #1A2142;
  border-color: #DFE5EF;
}
.light-btn-outline:hover {
  color: #1A2142;
  background: #DFE5EF;
}

.light-btn-light {
  background: rgba(223, 229, 239, 0.5);
  color: #1A2142;
}
.light-btn-light:hover {
  color: #1A2142;
}

.light-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #000;
}
.light-btn-group.active, .light-btn-group:hover {
  color: #000;
  background: #DFE5EF;
  border-color: #DFE5EF !important;
}

/* active buttons */
.active-btn {
  background: #00BFFF;
  color: #fff;
}
.active-btn:hover {
  color: #fff;
}

.active-btn-outline {
  background: transparent;
  color: #00BFFF;
  border-color: #00BFFF;
}
.active-btn-outline:hover {
  color: #fff;
  background: #00BFFF;
}

.active-btn-light {
  background: rgba(54, 92, 245, 0.12);
  color: #00BFFF;
}
.active-btn-light:hover {
  color: #00BFFF;
}

.active-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #00BFFF;
}
.active-btn-group.active, .active-btn-group:hover {
  color: #fff;
  background: #00BFFF;
  border-color: #00BFFF !important;
}

/* deactive buttons */
.deactive-btn {
  background: #E9E9E9;
  color: #8F9AAD;
}
.deactive-btn:hover {
  color: #8F9AAD;
}

.deactive-btn-outline {
  background: transparent;
  color: #8F9AAD;
  border-color: #E9E9E9;
}
.deactive-btn-outline:hover {
  color: #8F9AAD;
  background: #E9E9E9;
}

.deactive-btn-light {
  background: #e9e9e9;
  color: #8F9AAD;
}
.deactive-btn-light:hover {
  color: #8F9AAD;
}

.deactive-btn-group {
  background: transparent;
  border: 1px solid transparent;
  color: #9AA4CA;
}
.deactive-btn-group.active, .deactive-btn-group:hover {
  color: #9AA4CA;
  background: #CBE1FF;
  border-color: #CBE1FF !important;
}

/* =========  square-btn ========= */
.square-btn {
  border-radius: 0px;
}

/* =========  rounded-md ========= */
.rounded-md {
  border-radius: 10px;
}

/* =========  rounded-full ========= */
.rounded-full {
  border-radius: 30px;
}

/* ========== buttons group css ========= */
.buttons-group {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.buttons-group li {
  margin: 10px;
}

/* ====== Status Button ====== */
.status-btn {
  padding: 7px 15px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 400;
}
.status-btn.primary-btn {
  color: #fff;
  background: #00BFFF;
}
.status-btn.active-btn {
  color: #00BFFF;
  background: rgba(54, 92, 245, 0.1);
}
.status-btn.close-btn {
  color: #d50100;
  background: rgba(213, 1, 0, 0.1);
}
.status-btn.warning-btn {
  color: #f7c800;
  background: rgba(247, 200, 0, 0.1);
}
.status-btn.info-btn {
  color: #97ca31;
  background: rgba(151, 202, 49, 0.1);
}
.status-btn.success-btn {
  color: #219653;
  background: rgba(33, 150, 83, 0.1);
}
.status-btn.secondary-btn {
  color: #00c1f8;
  background: rgba(0, 193, 248, 0.1);
}
.status-btn.dark-btn {
  color: #1A2142;
  background: rgba(26, 33, 66, 0.1);
}
.status-btn.orange-btn {
  color: #f2994a;
  background: rgba(242, 153, 74, 0.1);
}

/* ============ alerts css ============ */
.alert-box {
  display: flex;
  position: relative;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .alert-box {
    padding-left: 0px !important;
  }
}
.alert-box .left {
  max-width: 75px;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: #d50100;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 767px) {
  .alert-box .left {
    display: none;
  }
}
.alert-box .left h5 {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  color: #fff;
}
.alert-box .alert {
  margin-bottom: 0px;
  padding: 25px 40px;
}
@media (max-width: 767px) {
  .alert-box .alert {
    padding: 20px;
  }
}

/* Alert Primary */
.primary-alert .left {
  background: #00BFFF;
}
.primary-alert .alert {
  color: #00BFFF;
  border: 1px solid #00BFFF;
  background: rgba(54, 92, 245, 0.2);
  width: 100%;
}
.primary-alert .alert .alert-heading {
  color: #00BFFF;
  margin-bottom: 15px;
}

/* Alert Danger */
.danger-alert .left {
  background: #d50100;
}
.danger-alert .alert {
  color: #d50100;
  border: 1px solid #d50100;
  background: rgba(213, 1, 0, 0.2);
  width: 100%;
}
.danger-alert .alert .alert-heading {
  color: #d50100;
  margin-bottom: 15px;
}

/* Alert warning */
.warning-alert .left {
  background: #f7c800;
}
.warning-alert .alert {
  color: #f7c800;
  border: 1px solid #f7c800;
  background: rgba(247, 200, 0, 0.2);
  width: 100%;
}
.warning-alert .alert .alert-heading {
  color: #f7c800;
  margin-bottom: 15px;
}

/* Alert warning */
.warning-alert .left {
  background: #f7c800;
}
.warning-alert .alert {
  color: #f7c800;
  border: 1px solid #f7c800;
  background: rgba(247, 200, 0, 0.2);
  width: 100%;
}
.warning-alert .alert .alert-heading {
  color: #f7c800;
  margin-bottom: 15px;
}

/* Alert info */
.info-alert .left {
  background: #97ca31;
}
.info-alert .alert {
  color: #97ca31;
  border: 1px solid #97ca31;
  background: rgba(151, 202, 49, 0.2);
  width: 100%;
}
.info-alert .alert .alert-heading {
  color: #97ca31;
  margin-bottom: 15px;
}

/* Alert success */
.success-alert .left {
  background: #219653;
}
.success-alert .alert {
  color: #219653;
  border: 1px solid #219653;
  background: rgba(33, 150, 83, 0.2);
  width: 100%;
}
.success-alert .alert .alert-heading {
  color: #219653;
  margin-bottom: 15px;
}

/* Alert secondary */
.secondary-alert .left {
  background: #00c1f8;
}
.secondary-alert .alert {
  color: #00c1f8;
  border: 1px solid #00c1f8;
  background: rgba(0, 193, 248, 0.2);
  width: 100%;
}
.secondary-alert .alert .alert-heading {
  color: #00c1f8;
  margin-bottom: 15px;
}

/* Alert gray */
.gray-alert .left {
  background: #5d657b;
}
.gray-alert .alert {
  color: #5d657b;
  border: 1px solid #5d657b;
  background: rgba(93, 101, 123, 0.2);
  width: 100%;
}
.gray-alert .alert .alert-heading {
  color: #5d657b;
  margin-bottom: 15px;
}

/* Alert black */
.black-alert .left {
  background: #000;
}
.black-alert .alert {
  color: #000;
  border: 1px solid #000;
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
}
.black-alert .alert .alert-heading {
  color: #000;
  margin-bottom: 15px;
}

/* Alert orange */
.orange-alert .left {
  background: #f2994a;
}
.orange-alert .alert {
  color: #f2994a;
  border: 1px solid #f2994a;
  background: rgba(242, 153, 74, 0.2);
  width: 100%;
}
.orange-alert .alert .alert-heading {
  color: #f2994a;
  margin-bottom: 15px;
}

/* ========== cards css =========== */
/* card-style-1 */
.card-style-1 {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 10px;
  padding: 25px 0;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.card-style-1:hover {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.card-style-1 .card-meta {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 0 30px;
}
@media (max-width: 767px) {
  .card-style-1 .card-meta {
    padding: 0 20px;
  }
}
.card-style-1 .card-meta .image {
  max-width: 40px;
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
}
.card-style-1 .card-meta .image img {
  width: 100%;
}
.card-style-1 .card-meta .text p {
  color: #1A2142;
}
.card-style-1 .card-meta .text p a {
  color: inherit;
}
.card-style-1 .card-meta .text p a:hover {
  color: #00BFFF;
}
.card-style-1 .card-image {
  border-radius: 10px;
  margin-bottom: 25px;
  overflow: hidden;
}
.card-style-1 .card-image a {
  display: block;
}
.card-style-1 .card-image img {
  width: 100%;
}
.card-style-1 .card-content {
  padding: 0px 30px;
}
@media (max-width: 767px) {
  .card-style-1 .card-content {
    padding: 0px 20px;
  }
}
.card-style-1 .card-content h4 a {
  color: inherit;
  margin-bottom: 15px;
  display: block;
}
.card-style-1 .card-content h4 a:hover {
  color: #00BFFF;
}

/* card-style-2 */
.card-style-2 {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 4px;
  padding: 20px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.card-style-2:hover {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.card-style-2 .card-image {
  border-radius: 4px;
  margin-bottom: 30px;
  overflow: hidden;
}
.card-style-2 .card-image a {
  display: block;
}
.card-style-2 .card-image img {
  width: 100%;
}
.card-style-2 .card-content {
  padding: 0px 10px;
}
@media (max-width: 767px) {
  .card-style-2 .card-content {
    padding: 0px;
  }
}
.card-style-2 .card-content h4 a {
  color: inherit;
  margin-bottom: 15px;
  display: block;
}
.card-style-2 .card-content h4 a:hover {
  color: #00BFFF;
}

/* card-style-3 */
.card-style-3 {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 4px;
  padding: 25px 30px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.card-style-3:hover {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.card-style-3 .card-content h4 a {
  color: inherit;
  margin-bottom: 15px;
  display: block;
}
.card-style-3 .card-content h4 a:hover {
  color: #00BFFF;
}
.card-style-3 .card-content a.read-more {
  font-weight: 500;
  color: #1A2142;
  margin-top: 20px;
}
.card-style-3 .card-content a.read-more:hover {
  color: #00BFFF;
  letter-spacing: 2px;
}

/* card-style-4 */
.card-style-4 {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 4px;
  padding: 20px 30px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.card-style-4:hover {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.card-style-4 .card-image {
  border-radius: 50%;
  margin: auto;
  margin-bottom: 30px;
  max-width: 250px;
  width: 100%;
  overflow: hidden;
}
.card-style-4 .card-image a {
  display: block;
}
.card-style-4 .card-image img {
  width: 100%;
}
.card-style-4 .card-content {
  margin-bottom: 10px;
}
.card-style-4 .card-content h4 a {
  color: inherit;
  margin-bottom: 15px;
  display: block;
}
.card-style-4 .card-content h4 a:hover {
  color: #00BFFF;
}
.card-style-4 .card-content a.read-more {
  font-weight: 500;
  color: #1A2142;
  margin-top: 20px;
}
.card-style-4 .card-content a.read-more:hover {
  color: #00BFFF;
  letter-spacing: 2px;
}

/* card-style-5 */
.card-style-5 {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 4px;
  padding: 20px;
  display: flex;
  align-items: center;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.card-style-5:hover {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
@media (max-width: 767px) {
  .card-style-5 {
    display: block;
  }
}
@media only screen and (min-width: 550px) and (max-width: 767px) {
  .card-style-5 {
    display: flex;
  }
}
.card-style-5 .card-image {
  margin: auto;
  margin-right: 20px;
  border-radius: 4px;
  max-width: 180px;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 767px) {
  .card-style-5 .card-image {
    margin-right: auto;
    margin-bottom: 20px;
    max-width: 100%;
  }
}
@media only screen and (min-width: 550px) and (max-width: 767px) {
  .card-style-5 .card-image {
    margin-right: 20px;
    margin-bottom: 0px;
    max-width: 180px;
  }
}
.card-style-5 .card-image a {
  display: block;
}
.card-style-5 .card-image img {
  width: 100%;
}
@media (max-width: 767px) {
  .card-style-5 .card-image img {
    width: 100%;
  }
}
.card-style-5 .card-content {
  margin-bottom: 10px;
}
.card-style-5 .card-content h4 a {
  color: inherit;
  margin-bottom: 15px;
  display: block;
}
.card-style-5 .card-content h4 a:hover {
  color: #00BFFF;
}
.card-style-5 .card-content .main-btn {
  margin-top: 20px;
}

/* ======= card-style-6 ======== */
.card-style-6 {
  padding: 25px 30px;
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.card-style-6:hover {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 767px) {
  .card-style-6 {
    padding: 20px;
  }
}
.card-style-6 .card-image {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 15px;
}
.card-style-6 .card-image a {
  display: block;
}
.card-style-6 .card-image a img {
  width: 100%;
}
.card-style-6 .card-action {
  display: flex;
}
.card-style-6 .card-action .action {
  display: flex;
  align-items: center;
}
.card-style-6 .card-action .action a {
  color: #5d657b;
  font-size: 14px;
}
.card-style-6 .card-action .action a:hover {
  text-decoration: underline;
}
.card-style-6 .card-action .action button {
  border: none;
  background: none;
  display: flex;
  color: #1A2142;
  margin-right: 10px;
  font-size: 16px;
}
.card-style-6 .card-action .action button:hover {
  color: #00BFFF;
}

/* ======= icon-card ======== */
.icon-card {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 30px 20px;
  box-shadow: 0px 12px 24px -4px rgba(145, 158, 171, 0.12), 0px 0px 2px 0px rgba(145, 158, 171, 0.2);
  border-radius: 7px;
}
.icon-card.icon-card-3 {
  display: block;
  padding: 0px;
}
.icon-card.icon-card-3 .card-content {
  display: flex;
  padding: 20px;
  padding-bottom: 0;
}
.icon-card.icon-card-4 {
  display: block;
  padding: 30px;
}
.icon-card.icon-card-4 .icon {
  max-width: 50px;
  height: 50px;
  border-radius: 5px;
  background: rgba(54, 92, 245, 0.08);
}
.icon-card.icon-card-4 .text-danger-2 i {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.icon-card.icon-card-4 .card-content {
  margin-top: 18px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .icon-card h6 {
    font-size: 15px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .icon-card h3 {
    font-size: 20px;
  }
}
.icon-card.icon-card-2 {
  display: block;
}
.icon-card.icon-card-2 .progress {
  height: 7px;
}
.icon-card.icon-card-2 .progress .progress-bar {
  border-radius: 4px;
}
.icon-card .icon {
  max-width: 46px;
  width: 100%;
  height: 46px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  margin-right: 20px;
  background: rgba(54, 92, 245, 0.1);
  color: #00BFFF;
  font-weight: 700;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .icon-card .icon {
    margin-right: 10px;
  }
}
.icon-card .icon.purple {
  background: rgba(155, 81, 224, 0.1);
  color: #9b51e0;
}
.icon-card .icon.success {
  background: rgba(33, 150, 83, 0.1);
  color: #219653;
}
.icon-card .icon.primary {
  background: rgba(54, 92, 245, 0.1);
  color: #00BFFF;
}
.icon-card .icon.orange {
  background: rgba(242, 153, 74, 0.1);
  color: #f2994a;
}
.icon-card .icon.blue-light {
  background: rgba(73, 190, 255, 0.08);
  color: #49BEFF;
}
.icon-card .icon.opacity-100.purple {
  background: #9b51e0;
  color: #fff;
}
.icon-card .icon.opacity-100.success {
  background: #219653;
  color: #fff;
}
.icon-card .icon.opacity-100.primary {
  background: #00BFFF;
  color: #fff;
}
.icon-card .icon.opacity-100.orange {
  background: #f2994a;
  color: #fff;
}
.icon-card .icon.opacity-100.deep-blue {
  background: #345d9d;
  color: #fff;
}

.card-wrapper {
  display: flex;
  width: 100%;
  overflow-x: auto;
  padding: 25px 15px;
}
.card-wrapper .single-card-wrapper {
  padding: 0px 15px;
}
.card-wrapper .single-card {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 30px;
  max-width: 330px;
  min-width: 330px;
  width: 100%;
}
.card-wrapper .single-card .bg-shape {
  position: absolute;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  z-index: -1;
}
.card-wrapper .single-card h3 {
  font-weight: bold;
  font-size: 24px;
  color: #fff;
  margin-bottom: 36px;
}
.card-wrapper .single-card .card-info {
  display: flex;
  align-items: center;
}
.card-wrapper .single-card .card-info span {
  font-weight: 500;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.card-wrapper .single-card .card-info p {
  font-weight: 500;
  font-size: 12px;
  color: #fff;
}

/* =========== tables css =========== */
.table {
  border-collapse: inherit;
  border-spacing: 0px;
}
.table > :not(caption) > * > * {
  padding: 15px 0;
  border-bottom-color: #efefef;
  vertical-align: middle;
}
.table > :not(:last-child) > :last-child > * {
  border-bottom-color: #efefef;
}
/* .table tbody tr:first-child > * {
  padding-top: 20px;
} */
.table tbody tr:last-child > * {
  border-bottom-color: transparent;
  /* padding-bottom: 0px; */
}
.table th h6 {
  font-weight: 500;
  color: #1A2142;
  font-size: 14px;
}
.table td.min-width {
  padding: 5px;
}
@media (max-width: 767px) {
  .table td.min-width {
    min-width: 150px;
  }
}
.table td p {
  font-size: 14px;
  line-height: 1.5;
  color: #5d657b;
}
.table td p a {
  color: inherit;
}
.table td p a:hover {
  color: #00BFFF;
}
.table .lead-info {
  min-width: 200px;
}
.table .lead-email {
  min-width: 150px;
  white-space: nowrap;
}
.table .lead-phone {
  min-width: 160px;
}
.table .lead-company {
  min-width: 180px;
}
.table .referrals-image {
  min-width: 150px;
}
.table .referrals-image .image {
  width: 55px;
  max-width: 100%;
  height: 55px;
  border-radius: 4px;
  overflow: hidden;
}
.table .referrals-image .image img {
  width: 100%;
}
.table .lead {
  display: flex;
  align-items: center;
}
.table .lead .lead-image {
  max-width: 50px;
  width: 100%;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}
.table .lead .lead-image img {
  width: 100%;
}
.table .lead .lead-text {
  width: 100%;
}
.table .employee-image {
  width: 50px;
  max-width: 100%;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}
.table .employee-image img {
  width: 100%;
}
.table .action {
  display: flex;
  align-items: center;
}
.table .action button {
  border: none;
  background: transparent;
  padding: 0px 6px;
  font-size: 18px;
}
.table .action button.edit:hover {
  color: #00BFFF;
}
.table .action button::after {
  display: none;
}
.table .action .dropdown-menu {
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
}
.table .action .dropdown-menu li:hover a {
  color: #00BFFF !important;
}
.table .action .dropdown-menu li a {
  display: block;
}

.top-selling-table tr th,
.top-selling-table tr td {
  vertical-align: middle;
  padding: 10px 5px;
}
.top-selling-table tr .min-width {
  min-width: 80px;
  white-space: nowrap;
}
.top-selling-table .form-check-input[type=checkbox] {
  margin-left: 5px;
}
.top-selling-table .form-check-input[type=checkbox]:checked {
  background-color: #00BFFF;
  border-color: #00BFFF;
}
.top-selling-table .product {
  display: flex;
  align-items: center;
  min-width: 150px;
}
.top-selling-table .product .image {
  border-radius: 4px;
  overflow: hidden;
  margin-right: 15px;
  max-width: 50px;
  width: 100%;
  height: 50px;
}
.top-selling-table .product .image img {
  width: 100%;
}
.top-selling-table .product p {
  width: 100%;
}

@media (max-width: 767px) {
  .referrals-table-card .title .right {
    width: 100%;
  }
}
@media only screen and (min-width: 550px) and (max-width: 767px) {
  .referrals-table-card .title .right {
    width: auto;
  }
}
.referrals-table-card .referrals-table td {
  padding: 10px;
}

/* ===== lead-table ===== */
.lead-table th,
.lead-table td {
  padding: 10px 5px;
}
.lead-table .name {
  min-width: 120px;
}
.lead-table .email {
  min-width: 130px;
}
.lead-table .project {
  min-width: 150px;
}
.lead-table .status {
  min-width: 120px;
  text-align: center;
}
.lead-table .action {
  min-width: 60px;
}

.clients-table-card .table .employee-info {
  min-width: 150px;
}

.clients-table th,
.clients-table td {
  padding: 5px;
}
.clients-table th.min-width,
.clients-table td.min-width {
  min-width: 150px;
}
.clients-table .employee-image {
  margin-right: 0px;
}

.table-pagination ul li a {
  width: 32px;
  height: 32px;
  background: #e5e5e5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
}
.table-pagination ul li a:hover, .table-pagination ul li a.active {
  background: #00BFFF;
  color: #fff;
}

.table-search form {
  max-width: 270px;
  position: relative;
}
.table-search form input {
  width: 100%;
  border: 1px solid #efefef;
  background: rgba(239, 239, 239, 0.5);
  border-radius: 4px;
  height: 46px;
  padding-left: 44px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.table-search form input:focus {
  border-color: #00BFFF;
}
.table-search form button {
  position: absolute;
  border: none;
  background: transparent;
  left: 16px;
  top: 0;
  height: 46px;
  color: #5d657b;
}

.striped-table td,
.striped-table th {
  padding-left: 5px;
  padding-right: 5px;
}

.dataTable-pagination li:hover a,
.dataTable-pagination .active a,
.dataTable-pagination .active a:focus,
.dataTable-pagination .active a:hover {
  background: #00BFFF;
  color: #fff;
  border-radius: 3px;
}

.dataTable-pagination .ellipsis:hover a {
  background: transparent;
  color: #333;
}

.dataTable-selector {
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.dataTable-input {
  width: 100%;
  border: 1px solid #efefef;
  background: rgba(239, 239, 239, 0.5);
  border-radius: 4px;
  height: 46px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.dataTable-input:focus {
  border-color: #00BFFF;
}

.dataTable-input:focus {
  border-color: #00BFFF;
}

.dataTable-table > tbody > tr > td,
.dataTable-table > tbody > tr > th,
.dataTable-table > tfoot > tr > td,
.dataTable-table > tfoot > tr > th,
.dataTable-table > thead > tr > td,
.dataTable-table > thead > tr > th {
  padding: 15px 10px;
}

@media (max-width: 767px) {
  .dataTable-top > div:last-child.dataTable-search {
    margin-top: 12px;
    float: left;
  }
}

@media (max-width: 767px) {
  .dataTable-pagination ul li {
    margin: 5px 0;
  }
}
.activity-card .button-group {
  display: flex;
  align-items: center;
  border-radius: 50px;
  border: 1px solid #efefef;
}
.activity-card .button-group a {
  font-weight: 500;
  font-size: 12px;
  padding: 4px 16px;
  display: inline-block;
  color: #2f3546;
  border-radius: 50px;
  margin: 3px;
}
.activity-card .button-group a.active, .activity-card .button-group a:hover {
  background: #00BFFF;
  color: #fff;
}

.activity-table td {
  min-width: 90px;
  padding: 10px;
  border: none;
}
.activity-table td.time {
  min-width: 110px;
}
.activity-table .icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.activity-table .icon .status {
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: -1px;
  right: -1px;
}
.activity-table .status-btn {
  font-size: 12px;
  border-radius: 50px;
  border: 1px solid #efefef;
  padding: 4px 14px;
  color: #5d657b;
  min-width: 90px;
  text-align: center;
}

.sell-order-table th,
.sell-order-table td {
  min-width: 60px;
  padding: 10px 5px;
  border: none;
}

/* =========== form elements css ========== */
/* ===== input style ===== */
.input-style-1 {
  position: relative;
  margin-bottom: 30px;
}
.input-style-1 label {
  font-size: 14px;
  font-weight: 500;
  color: #1A2142;
  display: block;
  margin-bottom: 10px;
}
.input-style-1 input,
.input-style-1 textarea {
  width: 100%;
  background: rgba(239, 239, 239, 0.5);
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 16px;
  color: #5d657b;
  resize: none;
  transition: all 0.3s;
}
@media (max-width: 767px) {
  .input-style-1 input,
  .input-style-1 textarea {
    font-size: 14px;
  }
}
.input-style-1 input:focus,
.input-style-1 textarea:focus {
  border-color: #00BFFF;
  background: #fff;
}
.input-style-1 input[type=date], .input-style-1 input[type=time],
.input-style-1 textarea[type=date],
.input-style-1 textarea[type=time] {
  background: transparent;
}
.input-style-1 input.light-bg[type=date], .input-style-1 input.light-bg[type=time],
.input-style-1 textarea.light-bg[type=date],
.input-style-1 textarea.light-bg[type=time] {
  background: rgba(239, 239, 239, 0.5);
}
.input-style-1 input.light-bg[type=date]:focus, .input-style-1 input.light-bg[type=time]:focus,
.input-style-1 textarea.light-bg[type=date]:focus,
.input-style-1 textarea.light-bg[type=time]:focus {
  background: #fff;
}

.input-style-2 {
  position: relative;
  margin-bottom: 30px;
  z-index: 1;
}
.input-style-2 label {
  font-size: 14px;
  font-weight: 500;
  color: #1A2142;
  display: block;
  margin-bottom: 10px;
}
.input-style-2 input,
.input-style-2 textarea {
  width: 100%;
  background: rgba(239, 239, 239, 0.5);
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 16px;
  color: #5d657b;
  resize: none;
  transition: all 0.3s;
}
.input-style-2 input:focus,
.input-style-2 textarea:focus {
  border-color: #00BFFF;
  background: #fff;
}
.input-style-2 input[type=date], .input-style-2 input[type=time],
.input-style-2 textarea[type=date],
.input-style-2 textarea[type=time] {
  background: transparent;
}
.input-style-2 input[type=date]::-webkit-inner-spin-button,
.input-style-2 input[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
}
.input-style-2 input[type=date] ~ .icon {
  z-index: -1;
}
.input-style-2 .icon {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 17px;
}

.input-style-3 {
  position: relative;
  margin-bottom: 30px;
}
.input-style-3 label {
  font-size: 14px;
  font-weight: 500;
  color: #1A2142;
  display: block;
  margin-bottom: 10px;
}
.input-style-3 input,
.input-style-3 textarea {
  width: 100%;
  background: rgba(239, 239, 239, 0.5);
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 16px;
  padding-left: 45px;
  color: #5d657b;
  resize: none;
  transition: all 0.3s;
}
.input-style-3 input:focus,
.input-style-3 textarea:focus {
  border-color: #00BFFF;
  background: #fff;
}
.input-style-3 .icon {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  padding: 16px;
}

/* ========= select style ========== */
.select-style-1 {
  margin-bottom: 30px;
}
.select-style-1 label {
  font-size: 14px;
  font-weight: 500;
  color: #1A2142;
  display: block;
  margin-bottom: 10px;
}
.select-style-1 .select-position {
  position: relative;
}
.select-style-1 .select-position::after {
  border-bottom: 2px solid #5d657b;
  border-right: 2px solid #5d657b;
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  margin-top: -5px;
  pointer-events: none;
  position: absolute;
  right: 16px;
  top: 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.select-style-1 .select-position.select-sm::after {
  margin-top: -8px;
}
.select-style-1 .select-position.select-sm select {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
}
.select-style-1 .select-position select {
  width: 100%;
  background: transparent;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 16px;
  padding-right: 38px;
  color: #5d657b;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.select-style-1 .select-position select:focus {
  border-color: #00BFFF;
  outline: none;
}
.select-style-1 .select-position select.light-bg {
  background: rgba(239, 239, 239, 0.5);
}
.select-style-1 .select-position select.light-bg:focus {
  background: #fff;
}
.select-style-1 .select-position select.radius-30 {
  border-radius: 30px;
}

.select-style-2 {
  margin-bottom: 30px;
}
.select-style-2 .select-position {
  position: relative;
}
.select-style-2 .select-position.select-sm::after {
  margin-top: -8px;
}
.select-style-2 .select-position.select-sm::before {
  margin-top: 0;
}
.select-style-2 .select-position.select-sm select {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
}
.select-style-2 .select-position::before, .select-style-2 .select-position::after {
  content: "";
  display: block;
  height: 8px;
  width: 8px;
  pointer-events: none;
  position: absolute;
  right: 16px;
  top: 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.select-style-2 .select-position::before {
  margin-top: 0px;
  border-bottom: 1px solid #5d657b;
  border-right: 1px solid #5d657b;
}
.select-style-2 .select-position::after {
  margin-top: -8px;
  border-top: 1px solid #5d657b;
  border-left: 1px solid #5d657b;
}
.select-style-2 .select-position select {
  width: 100%;
  background: transparent;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 16px;
  padding-right: 38px;
  color: #5d657b;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.select-style-2 .select-position select:focus {
  border-color: #00BFFF;
  outline: none;
}
.select-style-2 .select-position select.light-bg {
  background: rgba(239, 239, 239, 0.5);
}
.select-style-2 .select-position select.light-bg:focus {
  background: #fff;
}
.select-style-2 .select-position select.select-sm {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
}

.select-style-3 {
  margin-bottom: 30px;
}
.select-style-3 .select-position {
  position: relative;
}
.select-style-3 .select-position::after {
  border-bottom: 2px solid #5d657b;
  border-right: 2px solid #5d657b;
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  margin-top: -7px;
  pointer-events: none;
  position: absolute;
  right: 0px;
  top: 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.select-style-3 .select-position.select-sm::after {
  margin-top: -8px;
}
.select-style-3 .select-position.select-sm select {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
}
.select-style-3 .select-position select {
  width: 100%;
  background: transparent;
  border: transparent;
  border-radius: 10px;
  padding-right: 38px;
  color: #000;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.select-style-3 .select-position select:focus {
  border-color: #00BFFF;
  outline: none;
}
.select-style-3 .select-position select.light-bg {
  background: rgba(239, 239, 239, 0.5);
}

.toggle-switch {
  padding-left: 60px;
  min-height: 30px;
}

.schedule-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.toggle-switch .form-check-input {
  width: 50px;
  height: 28px;
  margin-left: -60px;
  cursor: pointer;
}
.toggle-switch label {
  margin-top: 6px;
  font-size: 14px;
  color: #1A2142;
  cursor: pointer;
  user-select: none;
}

.checkbox-style {
  padding-left: 40px;
  min-height: 22px;
}
.checkbox-style .form-check-input {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  margin-left: -40px;
  cursor: pointer;
  margin-top: 6px;
}
.checkbox-style .form-check-input:checked {
  background-color: #00BFFF;
  border-color: #00BFFF;
}
.checkbox-style .form-check-input:disabled {
  cursor: auto;
}
.checkbox-style .form-check-input:disabled ~ label {
  cursor: auto;
}
.checkbox-style label {
  margin-top: 6px;
  cursor: pointer;
  user-select: none;
}
.checkbox-style.checkbox-success .form-check-input:checked {
  background-color: #219653;
  border-color: #219653;
}
.checkbox-style.checkbox-warning .form-check-input:checked {
  background-color: #f7c800;
  border-color: #f7c800;
}
.checkbox-style.checkbox-danger .form-check-input:checked {
  background-color: #d50100;
  border-color: #d50100;
}

.radio-style {
  padding-left: 40px;
  min-height: 22px;
}
.radio-style .form-check-input {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-left: -40px;
  cursor: pointer;
  margin-top: 7px;
}
.radio-style .form-check-input:disabled {
  cursor: auto;
}
.radio-style .form-check-input:disabled ~ label {
  cursor: auto;
}
.radio-style label {
  margin-top: 6px;
  cursor: pointer;
  user-select: none;
}
.radio-style.radio-success .form-check-input:checked {
  background-color: #219653;
  border-color: #219653;
}
.radio-style.radio-warning .form-check-input:checked {
  background-color: #f7c800;
  border-color: #f7c800;
}
.radio-style.radio-danger .form-check-input:checked {
  background-color: #d50100;
  border-color: #d50100;
}

@media (max-width: 767px) {
  .button-group .main-btn {
    width: 100%;
  }
}

.buy-sell-form .input-group {
  display: flex;
}
.buy-sell-form .input-group input {
  width: 60%;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  color: #5d657b;
}
.buy-sell-form .input-group input:focus {
  border-color: #00BFFF;
}
.buy-sell-form .input-group .select-style-1 {
  width: 40%;
}
.buy-sell-form .input-group .select-style-1 .select-position::after {
  width: 8px;
  height: 8px;
}
.buy-sell-form .input-group select {
  border: 1px solid #e2e8f0;
  border-radius: 0px 4px 4px 0px;
  padding: 8px 16px;
  padding-right: 24px;
  font-size: 14px;
  color: #5d657b;
}
.buy-sell-form .buy-sell-btn .main-btn {
  display: block;
  width: 100%;
  font-weight: 500;
}
.buy-sell-form .buy-sell-btn .main-btn:hover {
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
}
.buy-sell-form .buy-sell-btn .main-btn.success-btn {
  background: #08c18d;
}
.buy-sell-form .buy-sell-btn .main-btn.danger-btn {
  background: #eb5757;
}
.buy-sell-form .field-group-2 label {
  font-size: 12px;
}
.buy-sell-form .field-group-2 .input-group input {
  font-size: 12px;
  width: 70%;
}
.buy-sell-form .field-group-2 .input-group span {
  font-size: 12px;
  padding: 8px 16px;
  width: 30%;
  background: #e2e8f0;
  text-align: center;
  border-radius: 0px 4px 4px 0px;
  border: 1px solid #e2e8f0;
}
.buy-sell-form .input-group-2 label {
  font-size: 12px;
  color: #5d657b;
  margin-bottom: 8px;
  display: block;
}
.buy-sell-form .input-group-2 .select-position::after {
  width: 8px;
  height: 8px;
}
.buy-sell-form .input-group-2 select {
  padding: 8px 12px;
  font-size: 12px;
  color: #5d657b;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  width: 100%;
}

/* ============= notification css ============= */
.single-notification {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid #efefef;
}
.single-notification.readed {
  opacity: 0.7;
}
.single-notification:first-child {
  padding-top: 0px;
}
.single-notification:last-child {
  padding-bottom: 0px;
  border-bottom: 0px;
}
.single-notification .checkbox {
  max-width: 50px;
  width: 100%;
  padding-top: 10px;
}
@media (max-width: 767px) {
  .single-notification .checkbox {
    display: none;
  }
}
.single-notification .checkbox input {
  background-color: #efefef;
  border-color: #e5e5e5;
}
.single-notification .checkbox input:checked {
  background-color: #00BFFF;
  border-color: #00BFFF;
}
.single-notification .notification {
  display: flex;
  width: 100%;
}
@media (max-width: 767px) {
  .single-notification .notification {
    flex-direction: column;
  }
}
.single-notification .notification .image {
  max-width: 50px;
  width: 100%;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  margin-right: 15px;
}
@media (max-width: 767px) {
  .single-notification .notification .image {
    margin-bottom: 15px;
  }
}
.single-notification .notification .image img {
  width: 100%;
}
.single-notification .notification .content {
  display: block;
  max-width: 800px;
}
.single-notification .notification .content h6 {
  margin-bottom: 15px;
}
.single-notification .notification .content p {
  margin-bottom: 10px;
}
.single-notification .action {
  display: inline-flex;
  justify-content: flex-end;
  padding-top: 10px;
}
@media (max-width: 767px) {
  .single-notification .action {
    display: none;
  }
}
.single-notification .action button {
  border: none;
  background: transparent;
  color: #5d657b;
  margin-left: 20px;
  font-size: 18px;
}
.single-notification .action button.delete-btn:hover {
  color: #d50100;
}
.single-notification .action .dropdown-toggle::after {
  display: none;
}

/* ========== Theme Change Css ============== */
.darkTheme .single-notification {
  border-color: #2f3546;
}

/* ========== header css ========== */
.header {
  padding: 22px 0;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 99;
}
.header .header-left .menu-toggle-btn .main-btn {
  padding: 10px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header .header-left .header-search form {
  max-width: 270px;
  position: relative;
}
.header .header-left .header-search form input {
  width: 100%;
  border: 1px solid #efefef;
  background: rgba(239, 239, 239, 0.5);
  border-radius: 8px;
  padding: 10px 10px 10px 44px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.header .header-left .header-search form input:focus {
  border-color: #00BFFF;
  background: #fff;
}
.header .header-left .header-search form button {
  position: absolute;
  border: none;
  background: transparent;
  left: 16px;
  top: 0;
  height: 46px;
  color: #5d657b;
  font-weight: 700;
}
.header .header-left .header-search form button i {
  margin-top: 7px;
}
.header .header-right {
  display: flex;
  justify-content: flex-end;
}
.header .header-right button {
  border: 1px solid #F6F6F6;
  background: #F6F6F6;
  border-radius: 50%;
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #1A2142;
}
.header .header-right button svg {
  fill: currentColor;
}
.header .header-right button::after {
  display: none;
}
.header .header-right button span {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #FF737E;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
}
.header .header-right .dropdown-menu {
  width: 350px;
  border: 1px solid #efefef;
  padding: 10px 10px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  top: 21px !important;
  right: 0;
  position: absolute;
  transform: translate3d(0px, 60px, 0px);
  border-radius: 10px;
}
.header .header-right .dropdown-menu li {
  padding: 3px 0px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  border-bottom: 1px solid #efefef;
  position: relative;
  z-index: 2;
}
.header .header-right .dropdown-menu li:hover a {
  color: #00BFFF;
  background: #f3f3f3;
}
.header .header-right .dropdown-menu li:last-child {
  border-bottom: none;
}
.header .header-right .dropdown-menu li a {
  padding: 8px 12px;
  display: flex;
  color: rgba(0, 0, 0, 0.7);
  border-radius: 6px;
}
.header .header-right .dropdown-menu li a .image {
  max-width: 35px;
  width: 100%;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
}
.header .header-right .dropdown-menu li a .image img {
  width: 100%;
}
.header .header-right .dropdown-menu li a .content {
  width: 100%;
}
.header .header-right .dropdown-menu li a .content h6 {
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 600;
  line-height: 1;
}
.header .header-right .dropdown-menu li a .content p {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 0px;
  line-height: 1.4;
}
.header .header-right .dropdown-menu li a .content span {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}
.header .header-right .dropdown-box {
  position: relative;
}
.header .header-right .notification-box,
.header .header-right .header-message-box {
  position: relative;
}
.header .header-right .notification-box .dropdown-menu.dropdown-menu-end {
  transform: translate3d(0px, 60px, 0px);
}
.header .header-right .header-message-box .dropdown-menu.dropdown-menu-end {
  transform: translate3d(0px, 60px, 0px);
}
.header .header-right .profile-box {
  display: flex;
  position: relative;
}
.header .header-right .profile-box button {
  width: auto;
}
.header .header-right .profile-box .dropdown-menu {
  width: 13rem;
  min-width: 190px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 0 16px rgba(0, 0, 0, 0.1);
  padding: 8px;
}
.header .header-right .profile-box .dropdown-menu.dropdown-menu-end {
  transform: translate3d(0px, 60px, 0px);
}
.header .header-right .profile-box .dropdown-menu li {
  border-bottom: none;
  padding: 0;
}
.header .header-right .profile-box .dropdown-menu li a {
  font-size: 14px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  padding: 10px 8px;
  color: rgba(26, 33, 66, 0.5);
}
.header .header-right .profile-box .dropdown-menu li a i {
  margin-right: 8px;
  font-weight: 700;
}
.header .header-right .profile-box .dropdown-menu li a:hover {
  color: #1a2142;
  background: #f3f3f3;
}
.header .header-right .profile-box .dropdown-menu li.divider {
  margin: 4px 0;
  height: 1px;
  display: block;
  background: rgba(28, 28, 28, 0.05);
}
.header .header-right .profile-box .dropdown-menu .author-info {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}
.header .header-right .profile-box .dropdown-menu .author-info .image {
  flex: none;
}
.header .header-right .profile-box .dropdown-menu .author-info .image img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.header .header-right .profile-box .dropdown-menu .author-info .content {
  padding-left: 8px;
}
.header .header-right .profile-box .dropdown-menu .author-info .content h4 {
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.header .header-right .profile-box .dropdown-menu .author-info .content a {
  font-size: 12px;
  line-height: 1rem;
  color: rgba(26, 33, 66, 0.4);
  padding: 0;
  display: inline;
  background-color: initial;
}
.header .header-right .profile-box .dropdown-menu .author-info .content a:hover {
  background: initial;
}
.header .header-right .profile-box .dropdown-menu .author-info:hover {
  background: #f3f3f3;
}
.header .header-right .profile-box .dropdown-menu .author-info:hover a {
  color: #1a2142;
}
.header .header-right .profile-box .profile-info {
  margin: 0 5px;
}
.header .header-right .profile-box .profile-info .info {
  display: flex;
  align-items: center;
}
.header .header-right .profile-box .profile-info .info .image {
  border: 1px solid #DFE5EF;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin-right: 14px;
  position: relative;
}
.header .header-right .profile-box .profile-info .info .image img {
  width: 100%;
  border-radius: 50%;
}
.header .header-right .profile-box .profile-info .info p {
  font-size: 12px;
  text-align: left;
}

/* ========== Dashboards css ================= */
@media (max-width: 767px) {
  #doughnutChart1 {
    height: 250px !important;
  }
}

.legend3 li {
  margin-right: 25px;
}
.legend3 li div {
  white-space: nowrap;
}
.legend3 li .bg-color {
  position: relative;
  margin-left: 12px;
  border-radius: 50%;
}
.legend3 li .bg-color::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: inherit;
  left: -12px;
  top: 5px;
}
.legend3 li .text {
  margin-left: 10px;
}
.legend3 li .text p {
  display: flex;
  align-items: center;
  width: 100%;
}
@media (max-width: 767px) {
  .legend3 h2 {
    font-size: 22px;
  }
}

.legend-marketing .icon {
  width: 44px;
  height: 44px;
  border-radius: 5px;
  background: #ECF2FF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}
.legend-marketing .bg-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 8px;
}
.legend-marketing .text h5 {
  font-size: 18px;
  margin-top: 5px;
}

.todo-list-wrapper ul li.todo-list-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  margin-bottom: 25px;
}
.todo-list-wrapper ul li.todo-list-item:last-child {
  margin-bottom: 0px;
}
.todo-list-wrapper ul li.todo-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
}
@media (max-width: 767px) {
  .todo-list-wrapper ul li.todo-list-item {
    display: block;
  }
  .todo-list-wrapper ul li.todo-list-item .todo-status {
    margin-top: 20px;
  }
}
.todo-list-wrapper ul li.todo-list-item.success::before {
  background: #219653;
}
.todo-list-wrapper ul li.todo-list-item.primary::before {
  background: #00BFFF;
}
.todo-list-wrapper ul li.todo-list-item.orange::before {
  background: #f2994a;
}
.todo-list-wrapper ul li.todo-list-item.danger::before {
  background: #d50100;
}

.cards-title {
  font-size: 18px;
  line-height: 22px;
}

.external-link {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.external-link .link-item {
  padding: 10px 15px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.external-link .link-item:hover {
  background: rgba(223, 229, 239, 0.2);
}
.external-link .link-name {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #1A2142;
}

.card-top-chanels .top-chanels-item {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 11px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .card-top-chanels .top-chanels-item {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.featured-tab .nav {
  gap: 12px;
}
.featured-tab .nav button {
  background: transparent;
  border: none;
  font-weight: 500;
  font-size: 14px;
  color: #64748B;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.featured-tab .nav button:hover, .featured-tab .nav button.active {
  color: #1A2142;
  background: rgba(223, 229, 239, 0.3);
}
.featured-tab .status-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 30px;
}
.featured-tab .status-badge.queue {
  background: rgba(240, 149, 12, 0.08);
  color: #F0950C;
}
.featured-tab .status-badge.sent {
  background: rgba(16, 185, 129, 0.08);
  color: #10B981;
}
.featured-tab .tab-item-title:hover {
  color: #00BFFF;
  cursor: pointer;
}

.card-click-rate .device-list {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-click-rate .device-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.card-click-rate .device-list li span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.card-click-rate .device-list li:nth-child(1n) span {
  background: #00BFFF;
}
.card-click-rate .device-list li:nth-child(2n) span {
  background: #ECF2FF;
}
.card-click-rate .device-list li:nth-child(3n) span {
  background: #F9F9FD;
}
.card-click-rate .apexcharts-tooltip-series-group {
  padding-top: 4px;
}
.card-click-rate .apexcharts-tooltip-z-group,
.card-click-rate .apexcharts-tooltip-goals-group {
  display: none;
}

/* ============ signin css ============= */
.auth-row {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.auth-cover-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 45px;
  position: relative;
  z-index: 1;
  height: 100%;
}
@media (max-width: 767px) {
  .auth-cover-wrapper {
    padding: 30px 20px;
  }
}
.auth-cover-wrapper .auth-cover .title {
  text-align: cover;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .auth-cover-wrapper .auth-cover .title h1 {
    font-size: 24px;
  }
}
.auth-cover-wrapper .auth-cover .cover-image {
  max-width: 100%;
  margin: auto;
}
.auth-cover-wrapper .auth-cover .cover-image img {
  width: 100%;
}
.auth-cover-wrapper .auth-cover .shape-image {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 5%;
}

.signin-wrapper {
  background: #fff;
  padding: 60px;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .signin-wrapper {
    padding: 40px;
  }
}
@media (max-width: 767px) {
  .signin-wrapper {
    padding: 30px;
  }
}
.signin-wrapper .form-wrapper {
  width: 100%;
}
.signin-wrapper .singin-option button {
  font-size: 16px;
  font-weight: 600;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .signin-wrapper .singin-option button {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .signin-wrapper .singin-option button {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 767px) {
  .signin-wrapper .singin-option button {
    width: 100%;
  }
}
@media only screen and (min-width: 550px) and (max-width: 767px) {
  .signin-wrapper .singin-option button {
    width: auto;
  }
}
.signin-wrapper .singin-option a:hover {
  text-decoration: underline;
}

/* ============ signup css ============= */
.auth-row {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.auth-cover-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 45px;
  position: relative;
  z-index: 1;
  height: 100%;
}
@media (max-width: 767px) {
  .auth-cover-wrapper {
    padding: 30px 20px;
  }
}
.auth-cover-wrapper .auth-cover .title {
  text-align: cover;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .auth-cover-wrapper .auth-cover .title h1 {
    font-size: 24px;
  }
}
.auth-cover-wrapper .auth-cover .cover-image {
  max-width: 100%;
  margin: auto;
}
.auth-cover-wrapper .auth-cover .cover-image img {
  width: 100%;
}
.auth-cover-wrapper .auth-cover .shape-image {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 5%;
}

.signup-wrapper {
  background: #fff;
  padding: 60px;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .signup-wrapper {
    padding: 40px;
  }
}
@media (max-width: 767px) {
  .signup-wrapper {
    padding: 30px;
  }
}
.signup-wrapper .form-wrapper {
  width: 100%;
}
.signup-wrapper .singup-option button {
  font-size: 16px;
  font-weight: 600;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .signup-wrapper .singup-option button {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .signup-wrapper .singup-option button {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 767px) {
  .signup-wrapper .singup-option button {
    width: 100%;
  }
}
@media only screen and (min-width: 550px) and (max-width: 767px) {
  .signup-wrapper .singup-option button {
    width: auto;
  }
}
.signup-wrapper .singup-option a:hover {
  text-decoration: underline;
}

/* =========== settings css ============== */
.settings-card-1 .profile-info .profile-image {
  max-width: 75px;
  width: 100%;
  height: 75px;
  border-radius: 50%;
  margin-right: 20px;
  position: relative;
  z-index: 1;
}
.settings-card-1 .profile-info .profile-image img {
  width: 100%;
  border-radius: 50%;
}
.settings-card-1 .profile-info .profile-image .update-image {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: #efefef;
  border: 2px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 99;
}
.settings-card-1 .profile-info .profile-image .update-image:hover {
  opacity: 0.9;
}
.settings-card-1 .profile-info .profile-image .update-image input {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 99;
}
.settings-card-1 .profile-info .profile-image .update-image label {
  cursor: pointer;
  z-index: 99;
}

/* =========== Invoice Css ============= */
.invoice-card .invoice-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex: 1;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 767px) {
  .invoice-card .invoice-header {
    flex-direction: column;
  }
}
.invoice-card .invoice-header .invoice-logo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
}
@media (max-width: 767px) {
  .invoice-card .invoice-header .invoice-logo {
    order: -1;
    margin-bottom: 30px;
  }
}
.invoice-card .invoice-header .invoice-logo img {
  width: 100%;
}
@media (max-width: 767px) {
  .invoice-card .invoice-header .invoice-date {
    margin-top: 30px;
  }
}
.invoice-card .invoice-header .invoice-date p {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 10px;
}
.invoice-card .invoice-header .invoice-date p span {
  font-weight: 500;
}
.invoice-card .invoice-address {
  padding-top: 30px;
  display: flex;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .invoice-card .invoice-address {
    display: block;
  }
}
.invoice-card .invoice-address .address-item {
  margin-right: 30px;
  min-width: 250px;
}
.invoice-card .invoice-address .address-item h5 {
  margin-bottom: 15px;
}
.invoice-card .invoice-address .address-item h1 {
  margin-bottom: 10px;
  font-size: 24px;
}
.invoice-card .invoice-address .address-item p {
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  .invoice-card .invoice-action ul li {
    flex: 1;
  }
}
@media (max-width: 767px) {
  .invoice-card .invoice-action ul li a {
    width: 100%;
  }
}

.invoice-table th,
.invoice-table td {
  padding: 10px 8px;
}
.invoice-table .service {
  min-width: 150px;
}
.invoice-table .desc {
  min-width: 150px;
}
.invoice-table .qty {
  min-width: 150px;
}
.invoice-table .amount {
  min-width: 100px;
}

/* ============== Icons Css ===========*/
.icons-wrapper .icons,
.icons-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.icons-wrapper .icons > div,
.icons-wrapper .icons li,
.icons-wrapper ul > div,
.icons-wrapper ul li {
  display: flex;
  align-items: center;
  margin: 10px;
  flex-basis: 215px;
}
@media (max-width: 400px) {
  .icons-wrapper .icons > div,
  .icons-wrapper .icons li,
  .icons-wrapper ul > div,
  .icons-wrapper ul li {
    flex-basis: 100%;
  }
}
.icons-wrapper .icons > div i,
.icons-wrapper .icons li i,
.icons-wrapper ul > div i,
.icons-wrapper ul li i {
  max-width: 45px;
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #efefef;
  border-radius: 4px;
  background: transparent;
  color: #1A2142;
  font-size: 20px;
  margin-right: 10px;
}
.icons-wrapper .icons > div span,
.icons-wrapper .icons li span,
.icons-wrapper ul > div span,
.icons-wrapper ul li span {
  color: #1A2142;
  user-select: all;
}

/* ============ Calendar Css ============= */
.calendar-card .fc {
  height: 450px;
}
.calendar-card .fc#calendar-full {
  height: 600px;
}
.calendar-card .fc table {
  border: none;
}
.calendar-card .fc .fc-toolbar-title {
  font-size: 16px;
  font-weight: 500;
}
.calendar-card .fc .fc-button {
  background: transparent;
  border: none;
  color: #5d657b;
  text-transform: capitalize;
}
.calendar-card .fc .fc-button:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #00BFFF;
}
.calendar-card .fc th {
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-right: 0px;
}
.calendar-card .fc th a {
  color: #5d657b;
  font-weight: 400;
}
.calendar-card .fc .fc-day {
  border-width: 4px;
  background: #fff;
}
.calendar-card .fc .fc-day.fc-day-today .fc-daygrid-day-frame {
  background: #00BFFF;
}
.calendar-card .fc .fc-day.fc-day-today .fc-daygrid-day-frame a {
  color: #fff;
}
.calendar-card .fc .fc-day .fc-daygrid-day-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: #f9f9f9;
  border-radius: 6px;
}
.calendar-card .fc .fc-day .fc-daygrid-day-frame a {
  color: #5d657b;
}
.calendar-card .fc-theme-standard td,
.calendar-card .fc-theme-standard th {
  border-color: transparent;
}

/* =========== Sidebar css =========== */
.sidebar-nav-wrapper {
  background: #fff;
  width: 250px;
  padding: 20px 0px;
  height: 100vh;
  position: fixed;
  overflow-y: scroll;
  overflow-x: hidden;
  top: 0;
  left: 0;
  z-index: 999;
  box-shadow: 0px 0px 30px 0px rgba(200, 208, 216, 0.3);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar-nav-wrapper {
    -webkit-transform: translateX(-260px);
    -moz-transform: translateX(-260px);
    -ms-transform: translateX(-260px);
    -o-transform: translateX(-260px);
    transform: translateX(-260px);
  }
}
.sidebar-nav-wrapper.active {
  -webkit-transform: translateX(-260px);
  -moz-transform: translateX(-260px);
  -ms-transform: translateX(-260px);
  -o-transform: translateX(-260px);
  transform: translateX(-260px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar-nav-wrapper.active {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
  }
}
.sidebar-nav-wrapper .navbar-logo {
  padding: 0 25px;
  margin-bottom: 30px;
  margin-top: 11px;
}
.sidebar-nav-wrapper .sidebar-nav .divider {
  padding: 5px 25px;
  width: 100%;
}
.sidebar-nav-wrapper .sidebar-nav .divider hr {
  height: 1px;
  background: #E9EEF1;
}
.sidebar-nav-wrapper .sidebar-nav ul.collapsing {
  transition: none;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item {
  position: relative;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a {
  color: #1A2142;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a:not(.collapsed) .icon {
  color: #00BFFF;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a::after {
  content: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.34306 7.76387L9.02356 3.8071C9.32923 3.47851 9.11273 2.91666 8.68048 2.91666L1.31947 2.91666C0.887218 2.91666 0.670743 3.47851 0.976393 3.8071L4.6569 7.76387C4.8464 7.96758 5.15356 7.96758 5.34306 7.76387Z' fill='%239AA4CA'/%3E%3C/svg%3E%0A");
  position: absolute;
  right: 25px;
  top: 11px;
  font-size: 12px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a.collapsed {
  color: #9AA4CA;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a.collapsed::before {
  opacity: 0;
  visibility: hidden;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a.collapsed::after {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul {
  padding: 10px 24px 40px 57px;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li {
  margin-bottom: 12px;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li:last-child {
  margin-bottom: 0px;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  display: flex;
  align-items: center;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a.active, .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a:hover {
  color: #1A2142;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item a:hover {
  color: #1A2142;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a i {
  font-size: 16px;
  margin-right: 15px;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a span.text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a span.pro-badge {
  background: #00BFFF;
  color: #fff;
  padding: 2.5px 7px;
  border-radius: 30px;
  font-size: 10px;
  line-height: 13px;
  font-weight: 600;
  margin-left: 10px;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item a {
  display: flex;
  align-items: center;
  color: #9AA4CA;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  position: relative;
  z-index: 1;
  padding: 7px 25px;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item a span.text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item a span.pro-badge {
  background: #00BFFF;
  color: #fff;
  padding: 2.5px 7px;
  border-radius: 30px;
  font-size: 10px;
  line-height: 13px;
  font-weight: 600;
  margin-left: 10px;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item a .icon {
  margin-right: 12px;
  margin-top: -4px;
  font-size: 18px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item a .icon svg {
  fill: currentColor;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a, .sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a.collapsed, .sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a, .sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a.collapsed {
  color: #1A2142;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a .icon, .sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a.collapsed .icon, .sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a .icon, .sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a.collapsed .icon {
  color: #00BFFF;
}

.sidebar-nav-wrapper.style-2 .sidebar-nav ul .nav-item.nav-item-has-children ul li a.active, .sidebar-nav-wrapper.style-2 .sidebar-nav ul .nav-item.nav-item-has-children ul li a:hover {
  color: #fff;
  border-color: #00BFFF;
  background: #00BFFF;
}
.sidebar-nav-wrapper.style-2 .sidebar-nav ul .nav-item.nav-item-has-children ul li a.active span.pro-badge, .sidebar-nav-wrapper.style-2 .sidebar-nav ul .nav-item.nav-item-has-children ul li a:hover span.pro-badge {
  background: #fff;
  color: #00BFFF;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 11;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 1400px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .overlay {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .overlay.active {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

.main-wrapper {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  margin-left: 250px;
  min-height: 100vh;
  padding-bottom: 85px;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .main-wrapper {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .main-wrapper {
    padding-bottom: 110px;
  }
}
.main-wrapper.active {
  margin-left: 0;
}
.main-wrapper .container-fluid {
  padding-left: 40px;
  padding-right: 40px;
}
@media (max-width: 767px) {
  .main-wrapper .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.main-wrapper .footer {
  padding: 25px 0;
  justify-items: flex-end;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.main-wrapper .footer .copyright p a {
  color: inherit;
}
.main-wrapper .footer .copyright p a:hover {
  color: #00BFFF;
}
@media (max-width: 767px) {
  .main-wrapper .footer .terms {
    margin-bottom: 10px;
    text-align: center;
  }
}
.main-wrapper .footer .terms a {
  color: #5d657b;
}
.main-wrapper .footer .terms a:hover {
  color: #00BFFF;
}

.promo-box {
  background: #F5F8FC;
  padding: 15px 18px;
  text-align: center;
  max-width: 210px;
  margin: 0 auto;
  margin-top: 200px;
  border-radius: 14px;
}
.promo-box .promo-icon {
  max-width: 82px;
  width: 100%;
  height: 82px;
  border-radius: 50%;
  margin: -58px auto 12px;
  border: 5px solid #fff;
}
.promo-box h3 {
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  margin-bottom: 7px;
}
.promo-box p {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 15px;
}
.promo-box .main-btn {
  border-radius: 43px;
  padding: 7px 12px;
  width: 100%;
  justify-content: center;
}

/* ========== DEFAULT CSS ======== */
/* ======= Margin Top ======= */
.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-55 {
  margin-top: 55px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-65 {
  margin-top: 65px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-75 {
  margin-top: 75px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-85 {
  margin-top: 85px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-95 {
  margin-top: 95px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-105 {
  margin-top: 105px;
}

.mt-110 {
  margin-top: 110px;
}

.mt-115 {
  margin-top: 115px;
}

.mt-120 {
  margin-top: 120px;
}

.mt-125 {
  margin-top: 125px;
}

.mt-130 {
  margin-top: 130px;
}

.mt-135 {
  margin-top: 135px;
}

.mt-140 {
  margin-top: 140px;
}

.mt-145 {
  margin-top: 145px;
}

.mt-150 {
  margin-top: 150px;
}

.mt-155 {
  margin-top: 155px;
}

.mt-160 {
  margin-top: 160px;
}

.mt-165 {
  margin-top: 165px;
}

.mt-170 {
  margin-top: 170px;
}

.mt-175 {
  margin-top: 175px;
}

.mt-180 {
  margin-top: 180px;
}

.mt-185 {
  margin-top: 185px;
}

.mt-190 {
  margin-top: 190px;
}

.mt-195 {
  margin-top: 195px;
}

.mt-200 {
  margin-top: 200px;
}

.mt-205 {
  margin-top: 205px;
}

.mt-210 {
  margin-top: 210px;
}

.mt-215 {
  margin-top: 215px;
}

.mt-220 {
  margin-top: 220px;
}

.mt-225 {
  margin-top: 225px;
}

/* ======= Margin Bottom ======= */
.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-55 {
  margin-bottom: 55px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-65 {
  margin-bottom: 65px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-75 {
  margin-bottom: 75px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-85 {
  margin-bottom: 85px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-95 {
  margin-bottom: 95px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mb-105 {
  margin-bottom: 105px;
}

.mb-110 {
  margin-bottom: 110px;
}

.mb-115 {
  margin-bottom: 115px;
}

.mb-120 {
  margin-bottom: 120px;
}

.mb-125 {
  margin-bottom: 125px;
}

.mb-130 {
  margin-bottom: 130px;
}

.mb-135 {
  margin-bottom: 135px;
}

.mb-140 {
  margin-bottom: 140px;
}

.mb-145 {
  margin-bottom: 145px;
}

.mb-150 {
  margin-bottom: 150px;
}

.mb-155 {
  margin-bottom: 155px;
}

.mb-160 {
  margin-bottom: 160px;
}

.mb-165 {
  margin-bottom: 165px;
}

.mb-170 {
  margin-bottom: 170px;
}

.mb-175 {
  margin-bottom: 175px;
}

.mb-180 {
  margin-bottom: 180px;
}

.mb-185 {
  margin-bottom: 185px;
}

.mb-190 {
  margin-bottom: 190px;
}

.mb-195 {
  margin-bottom: 195px;
}

.mb-200 {
  margin-bottom: 200px;
}

.mb-205 {
  margin-bottom: 205px;
}

.mb-210 {
  margin-bottom: 210px;
}

.mb-215 {
  margin-bottom: 215px;
}

.mb-220 {
  margin-bottom: 220px;
}

.mb-225 {
  margin-bottom: 225px;
}

/* ======= Margin Left ======= */
.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-25 {
  margin-left: 25px;
}

.ml-30 {
  margin-left: 30px;
}

.ml-35 {
  margin-left: 35px;
}

.ml-40 {
  margin-left: 40px;
}

.ml-45 {
  margin-left: 45px;
}

.ml-50 {
  margin-left: 50px;
}

.ml-55 {
  margin-left: 55px;
}

.ml-60 {
  margin-left: 60px;
}

.ml-65 {
  margin-left: 65px;
}

.ml-70 {
  margin-left: 70px;
}

.ml-75 {
  margin-left: 75px;
}

.ml-80 {
  margin-left: 80px;
}

.ml-85 {
  margin-left: 85px;
}

.ml-90 {
  margin-left: 90px;
}

.ml-95 {
  margin-left: 95px;
}

.ml-100 {
  margin-left: 100px;
}

.ml-105 {
  margin-left: 105px;
}

.ml-110 {
  margin-left: 110px;
}

.ml-115 {
  margin-left: 115px;
}

.ml-120 {
  margin-left: 120px;
}

.ml-125 {
  margin-left: 125px;
}

.ml-130 {
  margin-left: 130px;
}

.ml-135 {
  margin-left: 135px;
}

.ml-140 {
  margin-left: 140px;
}

.ml-145 {
  margin-left: 145px;
}

.ml-150 {
  margin-left: 150px;
}

.ml-155 {
  margin-left: 155px;
}

.ml-160 {
  margin-left: 160px;
}

.ml-165 {
  margin-left: 165px;
}

.ml-170 {
  margin-left: 170px;
}

.ml-175 {
  margin-left: 175px;
}

.ml-180 {
  margin-left: 180px;
}

.ml-185 {
  margin-left: 185px;
}

.ml-190 {
  margin-left: 190px;
}

.ml-195 {
  margin-left: 195px;
}

.ml-200 {
  margin-left: 200px;
}

.ml-205 {
  margin-left: 205px;
}

.ml-210 {
  margin-left: 210px;
}

.ml-215 {
  margin-left: 215px;
}

.ml-220 {
  margin-left: 220px;
}

.ml-225 {
  margin-left: 225px;
}

/* ======= Margin Right ======= */
.mr-5 {
  margin-right: 5px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-15 {
  margin-right: 15px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-25 {
  margin-right: 25px;
}

.mr-30 {
  margin-right: 30px;
}

.mr-35 {
  margin-right: 35px;
}

.mr-40 {
  margin-right: 40px;
}

.mr-45 {
  margin-right: 45px;
}

.mr-50 {
  margin-right: 50px;
}

.mr-55 {
  margin-right: 55px;
}

.mr-60 {
  margin-right: 60px;
}

.mr-65 {
  margin-right: 65px;
}

.mr-70 {
  margin-right: 70px;
}

.mr-75 {
  margin-right: 75px;
}

.mr-80 {
  margin-right: 80px;
}

.mr-85 {
  margin-right: 85px;
}

.mr-90 {
  margin-right: 90px;
}

.mr-95 {
  margin-right: 95px;
}

.mr-100 {
  margin-right: 100px;
}

.mr-105 {
  margin-right: 105px;
}

.mr-110 {
  margin-right: 110px;
}

.mr-115 {
  margin-right: 115px;
}

.mr-120 {
  margin-right: 120px;
}

.mr-125 {
  margin-right: 125px;
}

.mr-130 {
  margin-right: 130px;
}

.mr-135 {
  margin-right: 135px;
}

.mr-140 {
  margin-right: 140px;
}

.mr-145 {
  margin-right: 145px;
}

.mr-150 {
  margin-right: 150px;
}

.mr-155 {
  margin-right: 155px;
}

.mr-160 {
  margin-right: 160px;
}

.mr-165 {
  margin-right: 165px;
}

.mr-170 {
  margin-right: 170px;
}

.mr-175 {
  margin-right: 175px;
}

.mr-180 {
  margin-right: 180px;
}

.mr-185 {
  margin-right: 185px;
}

.mr-190 {
  margin-right: 190px;
}

.mr-195 {
  margin-right: 195px;
}

.mr-200 {
  margin-right: 200px;
}

.mr-205 {
  margin-right: 205px;
}

.mr-210 {
  margin-right: 210px;
}

.mr-215 {
  margin-right: 215px;
}

.mr-220 {
  margin-right: 220px;
}

.mr-225 {
  margin-right: 225px;
}

/* ======= Padding Top ======= */
.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-35 {
  padding-top: 35px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-55 {
  padding-top: 55px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-65 {
  padding-top: 65px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-75 {
  padding-top: 75px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-85 {
  padding-top: 85px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-95 {
  padding-top: 95px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-105 {
  padding-top: 105px;
}

.pt-110 {
  padding-top: 110px;
}

.pt-115 {
  padding-top: 115px;
}

.pt-120 {
  padding-top: 120px;
}

.pt-125 {
  padding-top: 125px;
}

.pt-130 {
  padding-top: 130px;
}

.pt-135 {
  padding-top: 135px;
}

.pt-140 {
  padding-top: 140px;
}

.pt-145 {
  padding-top: 145px;
}

.pt-150 {
  padding-top: 150px;
}

.pt-155 {
  padding-top: 155px;
}

.pt-160 {
  padding-top: 160px;
}

.pt-165 {
  padding-top: 165px;
}

.pt-170 {
  padding-top: 170px;
}

.pt-175 {
  padding-top: 175px;
}

.pt-180 {
  padding-top: 180px;
}

.pt-185 {
  padding-top: 185px;
}

.pt-190 {
  padding-top: 190px;
}

.pt-195 {
  padding-top: 195px;
}

.pt-200 {
  padding-top: 200px;
}

.pt-205 {
  padding-top: 205px;
}

.pt-210 {
  padding-top: 210px;
}

.pt-215 {
  padding-top: 215px;
}

.pt-220 {
  padding-top: 220px;
}

.pt-225 {
  padding-top: 225px;
}

/* ======= Padding Bottom ======= */
.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-35 {
  padding-bottom: 35px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-45 {
  padding-bottom: 45px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-55 {
  padding-bottom: 55px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-65 {
  padding-bottom: 65px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-75 {
  padding-bottom: 75px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-85 {
  padding-bottom: 85px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-95 {
  padding-bottom: 95px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-105 {
  padding-bottom: 105px;
}

.pb-110 {
  padding-bottom: 110px;
}

.pb-115 {
  padding-bottom: 115px;
}

.pb-120 {
  padding-bottom: 120px;
}

.pb-125 {
  padding-bottom: 125px;
}

.pb-130 {
  padding-bottom: 130px;
}

.pb-135 {
  padding-bottom: 135px;
}

.pb-140 {
  padding-bottom: 140px;
}

.pb-145 {
  padding-bottom: 145px;
}

.pb-150 {
  padding-bottom: 150px;
}

.pb-155 {
  padding-bottom: 155px;
}

.pb-160 {
  padding-bottom: 160px;
}

.pb-165 {
  padding-bottom: 165px;
}

.pb-170 {
  padding-bottom: 170px;
}

.pb-175 {
  padding-bottom: 175px;
}

.pb-180 {
  padding-bottom: 180px;
}

.pb-185 {
  padding-bottom: 185px;
}

.pb-190 {
  padding-bottom: 190px;
}

.pb-195 {
  padding-bottom: 195px;
}

.pb-200 {
  padding-bottom: 200px;
}

.pb-205 {
  padding-bottom: 205px;
}

.pb-210 {
  padding-bottom: 210px;
}

.pb-215 {
  padding-bottom: 215px;
}

.pb-220 {
  padding-bottom: 220px;
}

.pb-225 {
  padding-bottom: 225px;
}

/* ======= Padding Left ======= */
.pl-5 {
  padding-left: 5px;
}

.pl-10 {
  padding-left: 10px;
}

.pl-15 {
  padding-left: 15px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-25 {
  padding-left: 25px;
}

.pl-30 {
  padding-left: 30px;
}

.pl-35 {
  padding-left: 35px;
}

.pl-40 {
  padding-left: 40px;
}

.pl-45 {
  padding-left: 45px;
}

.pl-50 {
  padding-left: 50px;
}

.pl-55 {
  padding-left: 55px;
}

.pl-60 {
  padding-left: 60px;
}

.pl-65 {
  padding-left: 65px;
}

.pl-70 {
  padding-left: 70px;
}

.pl-75 {
  padding-left: 75px;
}

.pl-80 {
  padding-left: 80px;
}

.pl-85 {
  padding-left: 85px;
}

.pl-90 {
  padding-left: 90px;
}

.pl-95 {
  padding-left: 95px;
}

.pl-100 {
  padding-left: 100px;
}

.pl-105 {
  padding-left: 105px;
}

.pl-110 {
  padding-left: 110px;
}

.pl-115 {
  padding-left: 115px;
}

.pl-120 {
  padding-left: 120px;
}

.pl-125 {
  padding-left: 125px;
}

.pl-130 {
  padding-left: 130px;
}

.pl-135 {
  padding-left: 135px;
}

.pl-140 {
  padding-left: 140px;
}

.pl-145 {
  padding-left: 145px;
}

.pl-150 {
  padding-left: 150px;
}

.pl-155 {
  padding-left: 155px;
}

.pl-160 {
  padding-left: 160px;
}

.pl-165 {
  padding-left: 165px;
}

.pl-170 {
  padding-left: 170px;
}

.pl-175 {
  padding-left: 175px;
}

.pl-180 {
  padding-left: 180px;
}

.pl-185 {
  padding-left: 185px;
}

.pl-190 {
  padding-left: 190px;
}

.pl-195 {
  padding-left: 195px;
}

.pl-200 {
  padding-left: 200px;
}

.pl-205 {
  padding-left: 205px;
}

.pl-210 {
  padding-left: 210px;
}

.pl-215 {
  padding-left: 215px;
}

.pl-220 {
  padding-left: 220px;
}

.pl-225 {
  padding-left: 225px;
}

/* ======= Padding Right ======= */
.pr-5 {
  padding-right: 5px;
}

.pr-10 {
  padding-right: 10px;
}

.pr-15 {
  padding-right: 15px;
}

.pr-20 {
  padding-right: 20px;
}

.pr-25 {
  padding-right: 25px;
}

.pr-30 {
  padding-right: 30px;
}

.pr-35 {
  padding-right: 35px;
}

.pr-40 {
  padding-right: 40px;
}

.pr-45 {
  padding-right: 45px;
}

.pr-50 {
  padding-right: 50px;
}

.pr-55 {
  padding-right: 55px;
}

.pr-60 {
  padding-right: 60px;
}

.pr-65 {
  padding-right: 65px;
}

.pr-70 {
  padding-right: 70px;
}

.pr-75 {
  padding-right: 75px;
}

.pr-80 {
  padding-right: 80px;
}

.pr-85 {
  padding-right: 85px;
}

.pr-90 {
  padding-right: 90px;
}

.pr-95 {
  padding-right: 95px;
}

.pr-100 {
  padding-right: 100px;
}

.pr-105 {
  padding-right: 105px;
}

.pr-110 {
  padding-right: 110px;
}

.pr-115 {
  padding-right: 115px;
}

.pr-120 {
  padding-right: 120px;
}

.pr-125 {
  padding-right: 125px;
}

.pr-130 {
  padding-right: 130px;
}

.pr-135 {
  padding-right: 135px;
}

.pr-140 {
  padding-right: 140px;
}

.pr-145 {
  padding-right: 145px;
}

.pr-150 {
  padding-right: 150px;
}

.pr-155 {
  padding-right: 155px;
}

.pr-160 {
  padding-right: 160px;
}

.pr-165 {
  padding-right: 165px;
}

.pr-170 {
  padding-right: 170px;
}

.pr-175 {
  padding-right: 175px;
}

.pr-180 {
  padding-right: 180px;
}

.pr-185 {
  padding-right: 185px;
}

.pr-190 {
  padding-right: 190px;
}

.pr-195 {
  padding-right: 195px;
}

.pr-200 {
  padding-right: 200px;
}

.pr-205 {
  padding-right: 205px;
}

.pr-210 {
  padding-right: 210px;
}

.pr-215 {
  padding-right: 215px;
}

.pr-220 {
  padding-right: 220px;
}

.pr-225 {
  padding-right: 225px;
}

/* ======= bg-primary shades ========= */
.bg-primary-100 {
  background: rgba(54, 92, 245, 0.1);
}

.bg-primary-200 {
  background: rgba(54, 92, 245, 0.2);
}

.bg-primary-300 {
  background: rgba(54, 92, 245, 0.3);
}

.bg-primary-400 {
  background: rgba(54, 92, 245, 0.4);
}

.bg-primary-500 {
  background: rgba(54, 92, 245, 0.5);
}

.bg-primary-600 {
  background: rgba(54, 92, 245, 0.6);
}

.bg-primary-700 {
  background: rgba(54, 92, 245, 0.7);
}

.bg-primary-800 {
  background: rgba(54, 92, 245, 0.8);
}

.bg-primary-900 {
  background: rgba(54, 92, 245, 0.9);
}

/* ======= bg-secondary shades ========= */
.bg-secondary-100 {
  background: rgba(0, 193, 248, 0.1);
}

.bg-secondary-200 {
  background: rgba(0, 193, 248, 0.2);
}

.bg-secondary-300 {
  background: rgba(0, 193, 248, 0.3);
}

.bg-secondary-400 {
  background: rgba(0, 193, 248, 0.4);
}

.bg-secondary-500 {
  background: rgba(0, 193, 248, 0.5);
}

.bg-secondary-600 {
  background: rgba(0, 193, 248, 0.6);
}

.bg-secondary-700 {
  background: rgba(0, 193, 248, 0.7);
}

.bg-secondary-800 {
  background: rgba(0, 193, 248, 0.8);
}

.bg-secondary-900 {
  background: rgba(0, 193, 248, 0.9);
}

/* ======= bg-success shades ========= */
.bg-success-100 {
  background: rgba(33, 150, 83, 0.1);
}

.bg-success-200 {
  background: rgba(33, 150, 83, 0.2);
}

.bg-success-300 {
  background: rgba(33, 150, 83, 0.3);
}

.bg-success-400 {
  background: rgba(33, 150, 83, 0.4);
}

.bg-success-500 {
  background: rgba(33, 150, 83, 0.5);
}

.bg-success-600 {
  background: rgba(33, 150, 83, 0.6);
}

.bg-success-700 {
  background: rgba(33, 150, 83, 0.7);
}

.bg-success-800 {
  background: rgba(33, 150, 83, 0.8);
}

.bg-success-900 {
  background: rgba(33, 150, 83, 0.9);
}

/* ======= bg-danger shades ========= */
.bg-danger-100 {
  background: rgba(213, 1, 0, 0.1);
}

.bg-danger-200 {
  background: rgba(213, 1, 0, 0.2);
}

.bg-danger-300 {
  background: rgba(213, 1, 0, 0.3);
}

.bg-danger-400 {
  background: rgba(213, 1, 0, 0.4);
}

.bg-danger-500 {
  background: rgba(213, 1, 0, 0.5);
}

.bg-danger-600 {
  background: rgba(213, 1, 0, 0.6);
}

.bg-danger-700 {
  background: rgba(213, 1, 0, 0.7);
}

.bg-danger-800 {
  background: rgba(213, 1, 0, 0.8);
}

.bg-danger-900 {
  background: rgba(213, 1, 0, 0.9);
}

/* ======= bg-warning shades ========= */
.bg-warning-100 {
  background: rgba(247, 200, 0, 0.1);
}

.bg-warning-200 {
  background: rgba(247, 200, 0, 0.2);
}

.bg-warning-300 {
  background: rgba(247, 200, 0, 0.3);
}

.bg-warning-400 {
  background: rgba(247, 200, 0, 0.4);
}

.bg-warning-500 {
  background: rgba(247, 200, 0, 0.5);
}

.bg-warning-600 {
  background: rgba(247, 200, 0, 0.6);
}

.bg-warning-700 {
  background: rgba(247, 200, 0, 0.7);
}

.bg-warning-800 {
  background: rgba(247, 200, 0, 0.8);
}

.bg-warning-900 {
  background: rgba(247, 200, 0, 0.9);
}

/* ======= bg-info shades ========= */
.bg-info-100 {
  background: rgba(151, 202, 49, 0.1);
}

.bg-info-200 {
  background: rgba(151, 202, 49, 0.2);
}

.bg-info-300 {
  background: rgba(151, 202, 49, 0.3);
}

.bg-info-400 {
  background: rgba(151, 202, 49, 0.4);
}

.bg-info-500 {
  background: rgba(151, 202, 49, 0.5);
}

.bg-info-600 {
  background: rgba(151, 202, 49, 0.6);
}

.bg-info-700 {
  background: rgba(151, 202, 49, 0.7);
}

.bg-info-800 {
  background: rgba(151, 202, 49, 0.8);
}

.bg-info-900 {
  background: rgba(151, 202, 49, 0.9);
}

/* ======= bg-dark shades ========= */
.bg-dark-100 {
  background: rgba(26, 33, 66, 0.1);
}

.bg-dark-200 {
  background: rgba(26, 33, 66, 0.2);
}

.bg-dark-300 {
  background: rgba(26, 33, 66, 0.3);
}

.bg-dark-400 {
  background: rgba(26, 33, 66, 0.4);
}

.bg-dark-500 {
  background: rgba(26, 33, 66, 0.5);
}

.bg-dark-600 {
  background: rgba(26, 33, 66, 0.6);
}

.bg-dark-700 {
  background: rgba(26, 33, 66, 0.7);
}

.bg-dark-800 {
  background: rgba(26, 33, 66, 0.8);
}

.bg-dark-900 {
  background: rgba(26, 33, 66, 0.9);
}

/* ======= bg-purple shades ========= */
.bg-purple-100 {
  background: rgba(155, 81, 224, 0.1);
}

.bg-purple-200 {
  background: rgba(155, 81, 224, 0.2);
}

.bg-purple-300 {
  background: rgba(155, 81, 224, 0.3);
}

.bg-purple-400 {
  background: rgba(155, 81, 224, 0.4);
}

.bg-purple-500 {
  background: rgba(155, 81, 224, 0.5);
}

.bg-purple-600 {
  background: rgba(155, 81, 224, 0.6);
}

.bg-purple-700 {
  background: rgba(155, 81, 224, 0.7);
}

.bg-purple-800 {
  background: rgba(155, 81, 224, 0.8);
}

.bg-purple-900 {
  background: rgba(155, 81, 224, 0.9);
}

/* ======= bg-orange shades ========= */
.bg-orange-100 {
  background: rgba(242, 153, 74, 0.1);
}

.bg-orange-200 {
  background: rgba(242, 153, 74, 0.2);
}

.bg-orange-300 {
  background: rgba(242, 153, 74, 0.3);
}

.bg-orange-400 {
  background: rgba(242, 153, 74, 0.4);
}

.bg-orange-500 {
  background: rgba(242, 153, 74, 0.5);
}

.bg-orange-600 {
  background: rgba(242, 153, 74, 0.6);
}

.bg-orange-700 {
  background: rgba(242, 153, 74, 0.7);
}

.bg-orange-800 {
  background: rgba(242, 153, 74, 0.8);
}

.bg-orange-900 {
  background: rgba(242, 153, 74, 0.9);
}

/* ======== Background Colors ========== */
.primary-bg {
  background-color: #00BFFF;
}

.secondary-bg {
  background-color: #00c1f8;
}

.success-bg {
  background-color: #219653;
}

.danger-bg {
  background-color: #d50100;
}

.warning-bg {
  background-color: #f7c800;
}

.info-bg {
  background-color: #97ca31;
}

.dark-bg {
  background-color: #1A2142;
}

.light-bg {
  background-color: #efefef;
}

.blue-light-bg {
  background-color: #49BEFF;
}

.active-bg {
  background-color: #00BFFF;
}

.deactive-bg {
  background-color: #E9E9E9;
}

.deactive-bg {
  background-color: #E9E9E9;
}

.gray-bg {
  background-color: #5d657b;
}

.purple-bg {
  background-color: #9b51e0;
}

.orange-bg {
  background-color: #f2994a;
}

.deep-blue-bg {
  background-color: #345d9d;
}

.doc-bg {
  background-color: #f98db4;
}

.photo-bg {
  background-color: #93cfe2;
}

/* ======== Text Colors ========== */
.text-primary {
  color: #00BFFF !important;
}

.text-secondary {
  color: #00c1f8 !important;
}

.text-success {
  color: #219653 !important;
}

.text-success-2 {
  color: #10B981 !important;
}

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

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

.text-danger-light {
  color: #fa5a78 !important;
}

.text-warning {
  color: #f7c800 !important;
}

.text-info {
  color: #97ca31 !important;
}

.text-dark {
  color: #1A2142 !important;
}

.text-light {
  color: #efefef !important;
}

.text-active {
  color: #00BFFF !important;
}

.text-deactive {
  color: #E9E9E9 !important;
}

.text-deactive {
  color: #E9E9E9 !important;
}

.text-gray {
  color: #5d657b !important;
}

.text-orange {
  color: #f2994a !important;
}

.text-purple {
  color: #9b51e0 !important;
}

.text-doc {
  color: #f98db4 !important;
}

.text-photo {
  color: #93cfe2 !important;
}

/* ========= Font Weight =========== */
.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}

/* =========== Sidebar css =========== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 999999;
}
#preloader .spinner {
  width: 80px;
  height: 80px;
  border: 5px solid #00BFFF;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinner 0.9s linear infinite;
}

@keyframes spinner {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}







        :root {
            --primary-color: #00BFFF;
            --primary-dark: #0099CC;
            --secondary-color: #2ecc71;
            --secondary-dark: #27ae60;
            --danger-color: #e74c3c;
            --danger-dark: #c0392b;
            --warning-color: #f39c12;
            --warning-dark: #e67e22;
            --info-color: #17a2b8;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --gray-color: #95a5a6;
            --border-radius: 8px;
            --border-color: #E0E0E0;
            --transition: all 0.3s ease;
            
            --primary: #00BFFF;
            --secondary: #6b7280;
            --dark: #1f2937;
        }
        
        /* Modal ochilganda scrollni to'xtatish - faqat modal-open classi bilan */
        body.modal-open {
            overflow: hidden; 
        }

        .main-content {
            width: 100%;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 10px;
        }

        /* header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            padding: 20px;
            border-radius: var(--border-radius);
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
        } */
        
        h1 {
            font-size: 28px;
            font-weight: 700;
            gap: 15px;
            color: white;
            white-space: nowrap;
        }
        
        .header-actions {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .stats-container {
            display: none;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .stat-card-stat {
            background: white;
            border-radius: var(--border-radius);
            padding: 18px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            border-left: 4px solid var(--primary-color);
            transition: var(--transition);
        }

        .stat-card-stat.general {
            border-left-color: #3b82f6;
        }

        .stat-card-stat.primary {
            border-left-color: var(--primary-color);
        }

        .stat-card-stat.available {
            border-left-color: #10b981;
        }

        .stat-card-stat.occupied {
            border-left-color: #f59e0b;
        }

        .stat-card-stat.reserved {
            border-left-color: #8b5cf6;
        }

        .stat-card-stat.maintenance {
            border-left-color: #ef4444;
        }

        .stat-card-stat:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
        }

        .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            /* margin-bottom: 12px; */
        }

        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: white;
            background: var(--primary-color);
        }

        .stat-card-stat.general .stat-icon {
            background: #3b82f6;
        }

        .stat-card-stat.available .stat-icon {
            background: #10b981;
        }

        .stat-card-stat.occupied .stat-icon {
            background: #f59e0b;
        }

        .stat-card-stat.reserved .stat-icon {
            background: #8b5cf6;
        }

        .stat-card-stat.maintenance .stat-icon {
            background: #ef4444;
        }

        .stat-value {
            font-size: 20px;
            font-weight: 600;
            color: var(--dark);
            line-height: 1;
            margin-bottom: 4px;
        }

        .stat-label {
            color: var(--gray-color);
            font-size: 13px;
            font-weight: 500;
        }
        
        /* ========== FILTER SECTION ========== */
        .action-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .left-actions {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: nowrap;
        }

        .filter-toggle-btn {
            background: white;
            border: 2px solid #eef2f6;
            border-radius: 12px;
            padding: 12px 24px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            color: #2d3748;
            white-space: nowrap;
            font-size: 14px;
            border: 1px solid #dee2e6;
        }

        .filter-toggle-btn:hover {
            border-color: #00BFFF;
            background: #f8fdff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 191, 255, 0.15);
        }

        .filter-toggle-btn i:first-child {
            color: #00BFFF;
            font-size: 16px;
        }

        .filter-count {
            background: #00BFFF;
            color: white;
            border-radius: 50px;
            padding: 2px 8px;
            font-size: 12px;
            font-weight: 600;
            margin-left: 5px;
        }

        .toggle-icon {
            transition: transform 0.3s ease;
            margin-left: 5px;
            font-size: 14px;
            color: #718096;
        }

        .filter-toggle-btn.active .toggle-icon {
            transform: rotate(180deg);
        }

        .add-nurse-btn {
            background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(46, 204, 113, 0.2);
            font-size: 14px;
            text-decoration: none;
        }
        
        .add-nurse-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
        }

        .active-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            flex: 1;
            min-width: 200px;
        }

        .active-filter-badge {
            background: linear-gradient(135deg, #00BFFF, #0099CC);
            color: white;
            padding: 6px 14px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 8px rgba(0, 191, 255, 0.3);
            animation: slideIn 0.3s ease;
        }

        .active-filter-badge i {
            cursor: pointer;
            opacity: 0.8;
            transition: opacity 0.2s;
            font-size: 12px;
        }

        .active-filter-badge i:hover {
            opacity: 1;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .filter-panel {
            position: fixed;
            top: 0;
            right: -100%;
            width: 100%;
            max-width: 380px;
            height: 100vh;
            background: white;
            box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            border-left: 1px solid #eef2f6;
        }

        .filter-panel.open {
            right: 0;
        }

        .filter-panel-header {
            padding: 18px 20px;
            background: linear-gradient(135deg, #f8fafc, #ffffff);
            border-bottom: 2px solid #eef2f6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .filter-panel-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: #2d3748;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-panel-header h3 i {
            font-size: 18px;
        }

        .filter-close-btn {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            border: 2px solid #eef2f6;
            background: white;
            color: #718096;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .filter-close-btn:hover {
            background: #fff5f5;
            border-color: #dc3545;
            color: #dc3545;
            /* transform: rotate(90deg); */
        }

        .filter-panel-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }

        .filter-panel-body::-webkit-scrollbar {
            width: 4px;
        }

        .filter-panel-body::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .filter-panel-body::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 2px;
        }

        .filter-section {
            margin-bottom: 25px;
            animation: fadeIn 0.5s ease;
        }

        .filter-section:last-child {
            margin-bottom: 0;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .filter-label {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
            font-weight: 600;
            color: #4a5568;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .filter-label i {
            font-size: 13px;
        }

        .search-wrapper {
            position: relative;
        }

        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #a0aec0;
            font-size: 14px;
            pointer-events: none;
        }

        .clear-search {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #a0aec0;
            cursor: pointer;
            font-size: 14px;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }

        .clear-search:hover {
            background: #f0f0f0;
            color: #dc3545;
        }

        .modern-input {
            width: 100%;
            padding: 12px 12px 12px 38px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 13px;
            transition: all 0.2s ease;
            background: #fafbfc;
        }

        .modern-input:focus {
            outline: none;
            border-color: #00BFFF;
            background: white;
            box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.1);
        }

        /* Holati qismi - 2 tadan yonma-yon */
        .status-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            width: 100%;
        }

        .status-row .radio-card {
            flex: 0 0 calc(50% - 5px);
            min-width: 0;
            position: relative;
            cursor: pointer;
        }

        .radio-card input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        .radio-card .radio-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 8px;
            background: #fafbfc;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            transition: all 0.2s ease;
            text-align: center;
        }

        .radio-card .radio-content i {
            font-size: 16px;
            color: #718096;
        }

        .radio-card .radio-content span {
            font-size: 13px;
            font-weight: 600;
            color: #4a5568;
        }

        .radio-card input:checked + .radio-content {
            background: rgba(0, 191, 255, 0.05);
            border-color: #00BFFF;
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(0, 191, 255, 0.15);
        }

        .radio-card input:checked + .radio-content i {
            color: #00BFFF;
        }

        .radio-card input:checked + .radio-content span {
            color: #00BFFF;
        }

        /* Bo'lim select */
        .modern-select {
            position: relative;
        }

        .modern-select select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 13px;
            background: #fafbfc;
            transition: all 0.2s;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 16px;
        }

        .modern-select select:focus {
            outline: none;
            border-color: #00BFFF;
            background: white;
        }

        /* Ishga kirgan sana - yonma-yon */
        .date-range {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .date-input-group {
            flex: 1;
            position: relative;
        }

        .date-input-group i {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #a0aec0;
            font-size: 12px;
            pointer-events: none;
        }

        .modern-date-input {
            width: 100%;
            padding: 10px 10px 10px 30px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 12px;
            background: #fafbfc;
            transition: all 0.2s;
        }

        .modern-date-input:focus {
            outline: none;
            border-color: #00BFFF;
            background: white;
        }

        .modern-date-input[type="date"] {
            padding: 9px 10px 9px 30px;
        }

        .date-separator {
            color: #00BFFF;
            font-weight: 600;
            font-size: 14px;
        }

        /* Filter Actions - yonma-yon */
        .filter-actions {
            display: flex;
            gap: 10px;
            margin-top: 25px;
            padding-top: 15px;
            border-top: 2px solid #eef2f6;
        }

        .btn-clear, .btn-apply {
            flex: 1;
            padding: 12px 12px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .btn-clear {
            border: 2px solid #e2e8f0;
            background: white;
            color: #718096;
        }

        .btn-clear:hover {
            border-color: #dc3545;
            color: #dc3545;
            background: #fff5f5;
        }

        .btn-apply {
            border: none;
            background: linear-gradient(135deg, #00BFFF, #0099CC);
            color: white;
            box-shadow: 0 3px 8px rgba(0, 191, 255, 0.3);
        }

        .btn-apply:hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 12px rgba(0, 191, 255, 0.4);
        }

        .filter-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(2px);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .filter-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .filter-summary {
            margin-bottom: 20px;
            animation: slideDown 0.3s ease;
        }

        .filter-summary-content {
            background: linear-gradient(135deg, #f0f9ff, #e6f7ff);
            border: 2px solid #00BFFF;
            border-radius: 10px;
            padding: 12px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            color: #2d3748;
            font-size: 13px;
            box-shadow: 0 3px 10px rgba(0, 191, 255, 0.1);
        }

        .filter-summary-content i:first-child {
            font-size: 16px;
        }

        .summary-close {
            background: none;
            border: none;
            color: #718096;
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .summary-close:hover {
            background: #e2e8f0;
            color: #dc3545;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-15px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 768px) {
            .action-bar {
                flex-direction: row;
                gap: 10px;
            }
            
            .left-actions {
                flex: 1;
                gap: 8px;
            }
            
            .filter-toggle-btn, .add-nurse-btn {
                flex: 1;
                justify-content: center;
                padding: 10px 16px;
                font-size: 13px;
            }
            
            .active-filters {
                order: 3;
                width: 100%;
                margin-top: 5px;
            }
            
            .filter-panel {
                max-width: 100%;
            }
            
            .status-row {
                gap: 8px;
            }
            
            .status-row .radio-card {
                flex: 0 0 calc(50% - 4px);
            }
            
            .radio-card .radio-content {
                padding: 10px 5px;
            }
            
            .radio-card .radio-content span {
                font-size: 12px;
            }
            
            .date-range {
                flex-direction: row;
            }
            
            .filter-actions {
                flex-direction: row;
            }
        }

        @media (max-width: 576px) {
          .auth-user-info {
            display: none;
          }

            .left-actions {
                gap: 5px;
            }
            
            .filter-toggle-btn, .add-nurse-btn {
                padding: 8px 12px;
                font-size: 12px;
            }
            
            .status-row {
                gap: 5px;
            }
            
            .status-row .radio-card {
                flex: 0 0 calc(50% - 2.5px);
            }
            
            .radio-card .radio-content {
                flex-direction: column;
                gap: 4px;
                padding: 8px 5px;
            }
            
            .radio-card .radio-content i {
                font-size: 14px;
            }
            
            .radio-card .radio-content span {
                font-size: 11px;
            }
        }
        /* ========== FILTER SECTION END ========== */
        
        .patients-table-container {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        /* .inventory-table-container th {
          font-size: 13px;
        } */

        .inventory-table-container {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .inventory-history-table-container th {
          font-size: 13px;
        }

        .inventory-history-table-container {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        /* .inventory-medicine-table-container th {
          font-size: 13px;
        } */

        .inventory-medicine-table-container {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .departments-table-container {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .features-table-container {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 20px;
        }

        .suppliers-table-container {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 20px;
        }

        .test-results-container {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin: 20px 0;
        }

        .procedure-table-container {
          background: white;
          border-radius: var(--border-radius);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          overflow: hidden;
          margin-bottom: 20px;
        }

        .medicine-table-container {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 20px;
        }

        .rooms-table-container {
          background: white;
          border-radius: var(--border-radius);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          overflow: hidden;
        }
          
        .table-header {
            padding: 10px 20px;
            background: var(--light-color);
            display: flex;
            justify-content: flex-end;
            align-items: center;
            border-bottom: 1px solid #eee;
        }
        
        .table-wrapper {
            overflow-x: auto;
            width: 100%;
            position: relative;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            position: relative;
        }
        
        thead {
            background-color: var(--primary-color);
            color: white;
        }
        
        th, td {
            padding: 14px 16px;
            text-align: left;
            border-bottom: 1px solid #eee;
            white-space: nowrap;
        }
        
        th {
            font-weight: 600;
            position: relative;
            cursor: pointer;
            user-select: none;
        }
        
        th:hover {
            background-color: var(--primary-dark);
        }
        
        tbody tr {
            transition: var(--transition);
        }
        
        tbody tr:hover {
            background-color: #f8fafc;
        }
        
        .row-number {
            width: 40px;
            text-align: center;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        .patient-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            margin-right: 10px;
            flex-shrink: 0;
        }
        
        .patient-info {
            display: flex;
            align-items: center;
        }

        .status-badge {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
        }
        
        .status-active {
            background-color: rgba(46, 204, 113, 0.2);
            color: var(--secondary-dark);
        }
        
        .status-pending {
            background-color: rgba(243, 156, 18, 0.2);
            color: var(--warning-dark);
        }

        .status-waiting_for_bed {
          background-color: rgba(243, 156, 18, 0.2);
          color: var(--warning-dark);
        }
        
        .status-under_treatment {
          background-color: rgba(0, 191, 255, 0.15);
          color: #00BFFF;
        }

        .discharged {
          background-color: rgba(46, 204, 113, 0.2);
            color: var(--secondary-dark);
        }

        .status-inactive {
            background-color: rgba(231, 76, 60, 0.2);
            color: var(--danger-dark);
        }
        
        .status-critical {
            background-color: rgba(231, 76, 60, 0.2);
            color: var(--danger-dark);
        }
        
        .action-dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            position: fixed;
            display: none;
            background-color: white;
            min-width: 160px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
            border-radius: var(--border-radius);
            padding: 5px 0;
            border: 1px solid #eee;
            z-index: 10000 !important;
        }

        .action-dots {
            cursor: pointer;
            padding: 8px 12px;
            font-size: 12px;
            color: #666;
            transition: var(--transition);
            border-radius: 4px;
            background: #f8f9fa;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            height: 36px;
        }
        
        .action-dots:hover {
            background: var(--light-color);
            color: var(--primary-color);
        }
        
        .dropdown-content.show {
            display: block;
        }
        
        .dropdown-content a {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            text-decoration: none;
            color: #333;
            font-size: 12px;
            font-weight: 600;
            border-bottom: 1px solid #f0f0f0;
            transition: var(--transition);
            background: none;
            border: none;
            width: 100%;
            text-align: left;
            cursor: pointer;
        }
        
        .dropdown-content a:last-child {
            border-bottom: none;
        }
        
        .dropdown-content a:hover {
            background-color: #f8f9fa;
        }
        
        .dropdown-content a i {
            font-size: 12px;
            width: 16px;
            text-align: center;
        }
        
        .dropdown-content a.text-primary {
            color: var(--primary-color);
        }
        
        .dropdown-content a.text-warning {
            color: var(--warning-color);
        }
        
        .dropdown-content a.text-success {
            color: var(--secondary-color);
        }
        
        .dropdown-content a.text-danger {
            color: var(--danger-color);
        }
        
        .dropdown-content a.text-primary:hover {
            background-color: rgba(0, 191, 255, 0.1);
        }
        
        .dropdown-content a.text-warning:hover {
            background-color: rgba(243, 156, 18, 0.1);
        }
        
        .dropdown-content a.text-success:hover {
            background-color: rgba(46, 204, 113, 0.1);
        }
        
        .dropdown-content a.text-danger:hover {
            background-color: rgba(231, 76, 60, 0.1);
        }
        
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-top: 1px solid #eee;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .pagination-info {
            color: var(--gray-color);
            font-size: 13px;
            white-space: nowrap;
        }
        
        .pagination-controls {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        
        .page-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--border-radius);
            border: 1px solid #ddd;
            background: white;
            cursor: pointer;
            transition: var(--transition);
            font-size: 13px;
            flex-shrink: 0;
        }
        
        .page-btn.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .page-btn:hover:not(.active) {
            background: var(--light-color);
        }

        .page-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        

        .staff-table th {
            font-size: 14px;
            padding: 10px;
        }

        @media (min-width: 769px) {
            .short-name {
                display: none !important;
            }
            
            .full-name {
                display: block !important;
                font-weight: 600;
            }
            
            .login-display {
                display: block !important;
                font-size: 12px;
                color: var(--gray-color);
            }

            .login-procedure-display {
                display: block !important;
                font-size: 12px;
                color: var(--gray-color);
            }

            .medicine-dose {
                display: block !important;
                font-size: 12px;
                color: var(--gray-color);
            }
            
            .phone-display {
                display: none !important;
            }
            
            .patient-avatar {
                display: flex !important;
            }

            .hire-day {
                font-size: 12px;
            }
        }

        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
            
            .stat-card-stat {
                padding: 15px;
            }
            
            .stat-value {
                font-size: 16px;
            }
            
            .stat-icon {
                width: 36px;
                height: 36px;
                font-size: 13px;
            }
            
            th, td {
                padding: 10px 8px;
                font-size: 12px;
            }
            
            td.row-number, th.row-number {
                display: table-cell !important;
                width: 30px;
                padding-right: 0;
            }
            
            .patient-info .full-name {
                display: none !important;
            }
            
            .patient-info .short-name {
                display: block !important;
                font-weight: 600;
                font-size: 12px;
            }
            
            .patient-avatar {
                display: none !important;
            }
            
            /* .login-display {
                display: none !important;
            } */
            
            .phone-display {
                display: block !important;
                font-size: 11px;
                color: var(--gray-color);
                margin-top: 2px;
            }

            .hire-day {
                font-size: 11px;
            }

            /* GLOBAL RULE (main.css dan kelgan) */
            /* td:nth-child(3),
            th:nth-child(3),
            td:nth-child(4),
            th:nth-child(4),
            td:nth-child(5),
            th:nth-child(5) {
                display: none !important;
            } */

            .medicine-table-container table th:nth-child(3),
            .medicine-table-container table td:nth-child(3),
            .medicine-table-container table th:nth-child(6),
            .medicine-table-container table td:nth-child(6) {
              display: none !important;
            }

            .patients-table-container table th:nth-child(3),
            .patients-table-container table td:nth-child(3),
            .patients-table-container table th:nth-child(4),
            .patients-table-container table td:nth-child(4),
            .patients-table-container table th:nth-child(5),
            .patients-table-container table td:nth-child(5) {
              display: none !important;
            }

            .suppliers-table-container table th:nth-child(4),
            .suppliers-table-container table td:nth-child(4),
            .suppliers-table-container table th:nth-child(5),
            .suppliers-table-container table td:nth-child(5) {
              display: none !important;
            }

            .procedure-table-container table th:nth-child(3),
            .procedure-table-container table td:nth-child(3),
            .procedure-table-container table th:nth-child(4),
            .procedure-table-container table td:nth-child(4),
            .procedure-table-container table th:nth-child(5),
            .procedure-table-container table td:nth-child(5) {
              display: none !important;
            }

            .inventory-table-container table th:nth-child(3),
            .inventory-table-container table td:nth-child(3),
            .inventory-table-container table th:nth-child(4),
            .inventory-table-container table td:nth-child(4),
            .inventory-table-container table th:nth-child(6),
            .inventory-table-container table td:nth-child(6) {
              display: none !important;
            }

            .inventory-medicine-table-container table th:nth-child(6),
            .inventory-medicine-table-container table td:nth-child(6) {
              display: none !important;
            }

            .inventory-history-table-container table th:nth-child(7),
            .inventory-history-table-container table td:nth-child(7),
            .inventory-history-table-container table th:nth-child(8),
            .inventory-history-table-container table td:nth-child(8) {
              display: none !important;
            }



            .departments-table-container table th:nth-child(3),
            .departments-table-container table td:nth-child(3),

            .departments-table-container table th:nth-child(5),
            .departments-table-container table td:nth-child(5) {
                display: none;
            }

            /* .features-table-container table th:nth-child(3),
            .features-table-container table td:nth-child(3) {
                display: none;
            } */

            .features-table-container table th:nth-child(6),
            .features-table-container table td:nth-child(6) {
              min-width: 90px;
            }

            .test-results-container table th:nth-child(6),
            .test-results-container table td:nth-child(6) {
              display: none;
            }

            /* DESKTOP TABLE OVERRIDE (global bilan birga ishlashi uchun) */
            .desktop-table th:nth-child(2),
            .desktop-table td:nth-child(2),
            .desktop-table th:nth-child(3),
            .desktop-table td:nth-child(3),
            .desktop-table th:nth-child(4),
            .desktop-table td:nth-child(4) {
                display: table-cell !important;
            }

            /* agar kerak bo‘lsa faqat bitta ustunni yashirish */
            .desktop-table th:nth-child(2),
            .desktop-table td:nth-child(2) {
                display: none !important;
            }
            
            td:nth-child(7),
            th:nth-child(7) {
                display: table-cell !important;
            }
            
            td:nth-child(8),
            th:nth-child(8) {
                display: table-cell !important;
            }

            /* Global qoidani bekor qilish - 3,4,5-ustunlarni qayta ko'rsatish */
            .slots-table th:nth-child(3),
            .slots-table td:nth-child(3),
            .slots-table th:nth-child(4),
            .slots-table td:nth-child(4),
            .slots-table th:nth-child(5),
            .slots-table td:nth-child(5) {
                display: table-cell !important;
            }
            
            /* Faqat 5,6,7-ustunlarni yashirish (global 5-ustunni yashirgan edi, lekin biz uni qayta ko'rsatdik) */
            /* Endi faqat 6 va 7-ustunlarni yashiramiz */
            .slots-table th:nth-child(6),
            .slots-table td:nth-child(6),
            .slots-table th:nth-child(7),
            .slots-table td:nth-child(7) {
                display: none !important;
            }

            .suppliers-table-container table th,
            .suppliers-table-container table td {
              padding: 10px 5px;
            }
            
            /* DROPDOWN - OLDIGI HOLICHA QOLDI */
            .action-dots {
                padding: 6px 10px;
                font-size: 10px;
                min-width: 36px;
                height: 32px;
            }
            
            .dropdown-content {
                min-width: 140px;
            }
            
            .dropdown-content a {
                padding: 8px 12px;
                font-size: 11px;
                gap: 6px;
            }
            
            .dropdown-content a i {
                font-size: 11px;
                width: 14px;
            }
        }

        @media (max-width: 768px) {
          .full-text {
              display: none;
          }
      
          .short-text {
              display: inline;
          }
      }
      
      @media (min-width: 769px) {
          .short-text {
              display: none;
          }
      }
        
        @media (max-width: 576px) {
            .stat-card-stat {
                padding: 12px;
            }
            
            .stat-value {
                font-size: 16px;
            }
            
            .stat-icon {
                width: 32px;
                height: 32px;
                font-size: 0.9rem;
            }
            
            header {
                padding: 15px;
            }
            
            h1 {
                font-size: 22px;
            }
            
            /* DROPDOWN - OLDIGI HOLICHA QOLDI */
            .dropdown-content {
                min-width: 120px;
            }
            
            .dropdown-content a {
                padding: 6px 10px;
                font-size: 13px;
                gap: 5px;
            }
            
            .dropdown-content a i {
                font-size: 10px;
                width: 12px;
            }

            .status-badge {
                padding: 5px 7px;
                border-radius: 20px;
                font-size: 10px;
                font-weight: bold;
                display: inline-flex;
                align-items: center;
                gap: 5px;
                white-space: nowrap;
            }
            
            .login-display {
                display: block !important;
                font-size: 10px;
                color: var(--gray-color);
            }

            .staff-table th {
              font-size: 11px;
              padding: 6px;
            }

            #staffModal .modal-body {
              padding: 10px 0;
            }
        }

        .breadcrumb {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 12px;
            padding: 12px 20px;
        }

        .breadcrumb-item a {
            color: #495057;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        .breadcrumb-item a:hover {
            color: #00BFFF;
        }
        .breadcrumb-item.active {
            color: #6c757d;
            font-weight: 600;
        }
        .breadcrumb-item + .breadcrumb-item::before {
            color: #6c757d;
            font-weight: bold;
        }

        .search-wrapper {
            margin-bottom: 10px;
        }

        .search-card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            border: 1px solid #dee2e6;
        }

        /* Modal uchun CSS - MOBILE VERSIYA UCHUN KICHIKLASHTIRILGAN */
        .delete-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 950px;
            border: none;
            border-radius: 12px;
            padding: 0;
            background: white;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            z-index: 1001;
            overflow: hidden;
        }
        
        .delete-modal::backdrop {
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(3px);
        }


        /* Notification Modal - UMUMIY */
        .notification-modal {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 90%;
          max-width: 950px;
          border: none;
          border-radius: 12px;
          padding: 0;
          background: white;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
          z-index: 1001;
          overflow: hidden;
        }

        .notification-modal::backdrop {
          background: rgba(0, 0, 0, 0.7);
          backdrop-filter: blur(3px);
        }

        /* .notification-modal {
          background: linear-gradient(135deg, #00BFFF 0%, #1E90FF 100%);
        } */

        .modal-header {
            background: linear-gradient(135deg, #00BFFF 0%, #1E90FF 100%);
            color: white;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .delete-header {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
        }
        
        .modal-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: white; 
        }
        
        .close-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            transition: all 0.2s ease;
        }
        
        .close-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }
        
        .modal-body {
            padding: 30px;
            /* overflow-y: auto; */
            max-height: calc(90vh - 130px);
            background: linear-gradient(to bottom, #ffffff, #fafafa);
        }
        
        .modal-footer {
            padding: 20px 30px;
            background: #f8fafc;
            border-top: 2px solid #e2e8f0;
            display: flex;
            justify-content: flex-end;
            gap: 15px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: #2d3748;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            background: white;
            color: #2d3748;
            transition: all 0.2s ease;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #00BFFF;
            box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.15);
        }
        
        .language-inputs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            background: #f8fafc;
            padding: 15px;
            border-radius: 8px;
            border: 2px solid #e2e8f0;
        }
        
        .language-input-wrapper input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e2e8f0;
            border-radius: 6px;
            font-size: 13px;
            background: white;
        }
        
        .btn-success {
            background: #27ae60;
            color: white;
            border: 2px solid #27ae60;
            padding: 10px 24px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s ease; 
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-success:hover {
            background: #219a52;
            border-color: #219a52;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .warning-message {
            text-align: center;
            padding: 20px;
            background: #fef5f5;
            border-radius: 12px;
            border: 2px solid #e74c3c;
            margin-bottom: 25px;
        }
        
        .warning-icon {
            font-size: 48px;
            color: #e74c3c;
            margin-bottom: 10px;
        }
        
        .warning-message h4 {
            color: #e74c3c;
            margin: 0 0 8px 0;
            font-size: 16px;
        }
        
        .warning-message p {
            color: #7f8c8d;
            margin: 0;
            font-size: 14px;
        }
        
        .info-box {
            /* background: #f8fafc;
            border: 2px solid #e2e8f0;
            border-radius: 10px; */
            padding: 15px;
        }
        
        .info-row {
            display: flex;
            align-items: flex-start;
            padding: 8px 0;
            border-bottom: 1px solid #e2e8f0;
            gap: 15px;
        }
        
        .info-row:last-child {
            border-bottom: none;
        }
        
        .info-label {
            width: 90px;
            font-weight: 600;
            color: #4a5568;
            font-size: 14px;
        }

        .medicine-info-label {
          width: 145px;
          font-weight: 600;
          color: #4a5568;
          font-size: 14px;
      }
        
        .info-value {
            flex: 1;
            color: #1a202c;
            font-size: 14px;
            font-weight: 500;
        }
        
        .confirm-box {
            background: #fef5f5;
            border: 2px solid #e74c3c;
            border-radius: 10px;
            padding: 15px;
            margin-top: 20px;
        }
        
        .confirm-label {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
        }
        
        .confirm-label input[type="checkbox"] {
            width: 20px;
            height: 20px;
            cursor: pointer;
            accent-color: #e74c3c;
        }
        
        .confirm-text {
            color: #e74c3c;
            font-weight: 600;
            font-size: 14px;
        }
        
        .btn-cancel {
            background: white;
            color: #4a5568;
            border: 2px solid #cbd5e0;
            padding: 11px 24px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        /* MOBILE UCHUN MODALLAR KICHIKLASHTIRILDI */
        @media (max-width: 768px) {
            #addProcedureModal {
                max-width: 450px;
            }
            
            .delete-modal {
                max-width: 400px;
            }
            
            .modal-header {
                padding: 12px 18px;
            }
            
            .modal-header h3 {
                font-size: 15px;
            }
            
            .close-btn {
                width: 30px;
                height: 30px;
                font-size: 16px;
            }
            
            .modal-body {
                padding: 18px;
            }
            
            .modal-footer {
                padding: 12px 18px;
                gap: 8px;
            }
            
            .form-group {
                margin-bottom: 16px;
            }
            
            .form-group label {
                font-size: 11px;
                margin-bottom: 5px;
                letter-spacing: 0.3px;
            }
            
            .form-control {
                padding: 10px 12px;
                font-size: 13px;
            }
            
            .language-inputs {
                /* grid-template-columns: 1fr; */
                gap: 8px;
                padding: 10px;
            }
            
            .language-input-wrapper input {
                padding: 8px 12px;
                font-size: 12px;
                border-width: 1.5px;
            }
            
            .warning-message {
                padding: 12px;
                margin-bottom: 16px;
            }
            
            .warning-icon {
                font-size: 32px;
                margin-bottom: 5px;
            }
            
            .warning-message h4 {
                font-size: 13px;
                margin: 0 0 4px 0;
            }
            
            .warning-message p {
                font-size: 11px;
            }
            
            .info-box {
                /* padding: 10px; */
            }
            
            .info-row {
                padding: 5px 0;
                gap: 8px;
            }
            
            .info-label {
                width: 70px;
                font-size: 11px;
            }
            
            .info-value {
                font-size: 11px;
            }
            
            .confirm-box {
                padding: 10px;
                margin-top: 12px;
            }
            
            .confirm-label {
                gap: 8px;
            }
            
            .confirm-label input[type="checkbox"] {
                width: 16px;
                height: 16px;
            }
            
            .confirm-text {
                font-size: 11px;
            }
        }
        
        @media (max-width: 480px) {
            .container {
                padding: 5px;
                max-width: 100%;
                width: 96%;
            }

            .breadcrumb {
                font-size: 0.7rem !important;
                width: 100%;
            }

            #addProcedureModal {
                max-width: 95%;
                width: 95%;
            }
            
            .delete-modal {
                max-width: 95%;
                width: 95%;
            }
            
            .modal-header {
                padding: 10px 15px;
            }
            
            .modal-header h3 {
                font-size: 14px;
            }
            
            .close-btn {
                width: 28px;
                height: 28px;
                font-size: 14px;
            }
            
            .modal-body {
                padding: 15px;
            }
            
            .modal-footer {
                padding: 10px 15px;
                flex-wrap: wrap;
            }
            
            .modal-footer a {
                width: 100%;
            }
            
            .modal-footer .btn-success {
                width: 100%;
                justify-content: center;
                padding: 8px 12px;
            }
            
            .form-group label {
                font-size: 10px;
            }
            
            .form-control {
                padding: 7px 10px;
                font-size: 11px;
            }
            
            textarea.form-control {
                min-height: 60px;
            }
            
            .language-inputs {
                padding: 8px;
            }
            
            .language-input-wrapper input {
                padding: 7px 10px;
                font-size: 11px;
            }
            
            .warning-message h4 {
                font-size: 12px;
            }
            
            .warning-message p {
                font-size: 10px;
            } 
            
            .info-label {
                width: 65px;
                font-size: 10px;
            }

            .medicine-info-label {
              width: 104px;
              font-size: 10px;
          }
            
            .info-value {
                font-size: 10px;
            }
            
            .confirm-text {
                font-size: 10px;
            }

            .breadcrumb-item a {
                color: #495057;
                font-weight: 500;
                transition: color 0.3s ease;
                font-size: 12px;
            }

            .action-bar {
                margin-bottom: 0;
            }
        }
          #global-alert:empty{
            display: none;
          }

        .alert-success {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 15px 25px;
            background: linear-gradient(135deg, #2ecc71, #27ae60);
            color: white;
            border: none;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
            z-index: 1050;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .alert-danger {
          position: fixed;
          bottom: 20px;
          right: 20px;
          padding: 15px 25px;
          background: var(--danger-color);
          color: white;
          border: none;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
          z-index: 1050;
          display: flex;
          align-items: center;
          gap: 10px;
      }

        .hire-date {
            font-size: 13px;
            font-weight: 600;
        }

        /* .hire-day {
            font-size: 12px;
        } */

        .notification-label::before {
            content: '';
            display: block;
            width: 4px;
            height: 14px;
            background: #00BFFF;
            border-radius: 2px;
        }

        .form-sections {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .form-section {
            background: white;
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            border: 1px solid #e2e8f0;
            transition: var(--transition);
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }

        .section-header h3 {
            font-size: 18px;
            color: #2d3748;
            font-weight: 600;
            margin: 0;
        }

        .section-header i {
            color: var(--primary-color);
            font-size: 20px;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 191, 255, 0.1);
            border-radius: 8px;
        }

        .form-grid {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .form-label i {
            color: var(--primary-color);
            font-size: 14px;
            width: 16px;
        }

        .password-group {
            position: relative;
        }
      
        .toggle-password {
            position: absolute;
            right: 12px;
            top: 70%;
            transform: translateY(-50%);
            cursor: pointer;
            color: var(--gray-color);
            font-size: 16px;
            transition: var(--transition);
            background: none;
            border: none;
            padding: 5px;
            z-index: 10;
        }
      
        .toggle-password:hover {
            color: var(--primary-color);
        }

        .photo-preview-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 15px;
          margin-top: 10px;
      }
      
      .photo-preview {
          width: 150px;
          height: 150px;
          border-radius: 50%;
          overflow: hidden;
          border: 4px solid var(--primary-color);
          box-shadow: 0 8px 25px rgba(0, 191, 255, 0.2);
          background: #f8f9fa;
      }
      
      .photo-preview img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }
      
      .photo-placeholder {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: var(--primary-color);
          background: #f0f9ff;
          text-align: center;
          padding: 10px;
      }
      
      .photo-placeholder i {
          font-size: 48px;
          margin-bottom: 10px;
      }
      
      .photo-placeholder span {
          font-size: 14px;
          color: #4a5568;
          line-height: 1.3;
          word-wrap: break-word;
      }
      
      .submit-section {
          background: white;
          border-radius: var(--border-radius);
          padding: 30px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
          border: 1px solid #e2e8f0;
          margin-top: 20px;
          text-align: center;
      }
      
      .submit-actions {
          display: flex;
          gap: 15px;
          justify-content: center;
          flex-wrap: wrap;
      }

      .submit-section p {
        color: #4a5568;
        margin-bottom: 25px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
      }

        @media (max-width: 992px) {
            .form-sections {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .form-section {
                padding: 20px;
            }

            .section-header {
                margin-bottom: 20px;
                padding-bottom: 12px;
            }

            .section-header h3 {
                font-size: 16px;
            }

            .section-header i {
                font-size: 18px;
                width: 24px;
                height: 24px;
            }

            .form-grid {
                gap: 15px;
            }

            .form-row {
                gap: 10px;
            }

            .form-label i {
                font-size: 12px;
                width: 14px;
            }

            .submit-section {
                padding: 25px 20px;
            }
        }

        @media (max-width: 576px) {
            .form-section {
                padding: 15px;
            }

            .section-header {
                margin-bottom: 10px;
                padding-bottom: 10px;
            }

            .section-header h3 {
                font-size: 15px;
            }

            .section-header i {
                font-size: 16px;
                width: 22px;
                height: 22px;
            }

            .form-grid {
                gap: 12px;
            }

            .form-row {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .form-group {
                gap: 5px;
            }

            .form-control {
              padding: 8px 10px;
              font-size: 12px;
          }

          .toggle-password {
              font-size: 12px;
              right: 10px;
              padding: 3px;
              padding-top: 33px;
              top: 50%;
          }

          .photo-preview {
              width: 100px;
              height: 100px;
              border-width: 3px;
          }
      
          .photo-placeholder i {
              font-size: 28px;
          }
      
          .photo-placeholder span {
              font-size: 10px;
          }
      
          .submit-section p {
            font-size: 12px;
            margin-bottom: 15px;
            line-height: 20px;
          }

          .submit-section {
              padding: 20px 15px;
          }

          .submit-actions {
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 10px;
        }

        .btn {
            width: 100%;
            min-width: 0;
            flex: 1 1 auto;
            justify-content: center;
            padding: 12px 20px;
            font-size: 14px;
        }
        }
        

        /* Cancel Password Button */
        .cancel-password-btn {
          background: linear-gradient(135deg, #e74c3c, #c0392b);
          color: white;
          border: none;
          border-radius: var(--border-radius);
          padding: 14px 20px;
          font-size: 16px;
          font-weight: 600;
          cursor: pointer;
          transition: var(--transition);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          width: 100%;
          margin: 10px 0;
          box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
      }

      .cancel-password-btn:hover {
          background: linear-gradient(135deg, #c0392b, #a93226);
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
      }

      .cancel-password-btn i {
          font-size: 18px;
      }

      /* Modal */
      #passwordCancelModal {
          position: fixed;
          top: 50% !important;
          left: 50% !important;
          transform: translate(-50%, -50%) !important;
          width: 90%;
          max-width: 950px;
          margin: 0 !important;
          padding: 0 !important;
          border: none;
          border-radius: 12px;
          background: white;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
          z-index: 9999;
          overflow: hidden;
          max-height: 90vh;
      }
    
      #passwordCancelModal::backdrop {
          background: rgba(0, 0, 0, 0.7);
          backdrop-filter: blur(3px);
      }

      .passwordCancelModal {
        position: fixed;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90%;
        max-width: 950px;
        margin: 0 !important;
        padding: 0 !important;
        border: none;
        border-radius: 12px;
        background: white;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        z-index: 9999;
        overflow: hidden;
        max-height: 90vh;
    }

    .passwordCancelModal::backdrop {
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(3px);
    }

    .password-preview {
      background: #f8fafc;
      padding: 20px;
      border-radius: 8px;
      border: 2px solid #e2e8f0;
      text-align: center;
      margin-bottom: 25px;
  }
  
  .password-preview span {
      display: block;
      font-size: 14px;
      color: #4a5568;
      margin-bottom: 10px;
  }
  
  .password-preview strong {
      font-size: 24px;
      color: #00BFFF;
      background: white;
      padding: 10px 20px;
      border-radius: 8px;
      border: 2px solid #00BFFF;
      font-family: 'Courier New', monospace;
      letter-spacing: 2px;
  }

  /* Password Success Message */
  .password-success {
    background: #f0f9ff;
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 15px;
    margin: 15px 0;
    display: none;
    align-items: center;
    gap: 12px;
    animation: slideIn 0.3s ease;
}

.password-success i {
    color: var(--primary-color);
    font-size: 24px;
}

.password-success-content {
    flex: 1;
}

.password-success-title {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 5px;
}

.password-success-text {
    color: #4a5568;
    font-size: 14px;
    background: white;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    display: inline-block;
}

.form-control.changed {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.1);
}


/* Info Box */
.info-box-delete {
    background: #FFE6E6;
    border-left: 4px solid #e74c3c;
    border-radius: var(--border-radius);
    padding: 15px 20px;
    margin-bottom: 25px;
}

.info-box h5 {
    color: var(--primary-dark);
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.info-box p {
    color: #2c3e50;
    font-size: 0.75rem;
    margin: 2px 0;
    line-height: 1.6;
}

/* Summary Section */
.summary-section {
    border-radius: var(--border-radius);
    margin-bottom: 25px;
}

.summary-section h5 {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 15px;
    font-size: 1rem;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.summary-item {
    background: white;
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

/* Chap tomondan border */
.summary-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.summary-item:first-child::before {
    background: linear-gradient(180deg, var(--primary-color), var(--primary-dark));
}

.summary-item:nth-child(2)::before {
    background: linear-gradient(180deg, var(--danger-color), var(--danger-dark));
}

.summary-item:last-child::before {
    background: linear-gradient(180deg, var(--secondary-color), var(--secondary-dark));
}

.summary-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.summary-value {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.summary-value-total {
    color: var(--primary-color);
}

.summary-value-excluded {
    color: var(--danger-color);
}

.summary-value-created {
    color: var(--secondary-color);
}

.summary-label {
    font-size: 0.85rem;
    color: var(--gray-color);
    font-weight: 500;
}

/* Table Container */
.slots-table-wrapper {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    overflow-x: auto;
    margin-bottom: 25px;
}

.slots-table {
    width: 100%;
    border-collapse: collapse;
}

.slots-table thead {
    background: var(--primary-color);
    color: white;
}

.slots-table th {
    padding: 14px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
}

.slots-table tbody tr {
    border-bottom: 1px solid #e9ecef;
    transition: var(--transition);
}

.slots-table tbody tr:hover {
    background: #f8fafc;
}

.slots-table td {
    padding: 14px 12px;
    vertical-align: middle;
}

/* Day Info Cell */
.day-info-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.day-details {
    flex: 1;
}

.day-name {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 2px;
    font-size: 13px;
}

.date-display {
    color: var(--gray-color);
    font-size: 11px;
}

/* Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 26px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 34px;
}

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

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

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

/* Slot Count */
.slot-count-display {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dark-color);
}

.slot-count-excluded {
    color: var(--danger-color);
    font-size: 0.8rem;
    margin-left: 4px;
}

/* Eye Button */
.eye-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary-color);
    color: white;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.eye-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

/* Action Buttons */
.action-buttons {
    padding: 20px 30px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.btn {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ==================== MODAL STYLES ==================== */
.modal-checkbox {
    display: none;
}

.modal-overlay-dynamic {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.modal-checkbox:checked + .modal-overlay-dynamic {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-container {
    background: white;
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow: hidden;
    animation: slideIn 0.3s ease forwards;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

@keyframes slideIn {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header {
    /* background: linear-gradient(135deg, #00BFFF 0%, #1E90FF 100%); */
    color: white;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title-section {
    flex: 1;
}

.modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.modal-time-range {
    font-size: 0.85rem;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.modal-body {
    padding: 25px;
    max-height: 60vh;
    overflow-y: auto;
}

.slots-header {
    margin-bottom: 20px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.slots-title {
    font-weight: 600;
    color: var(--dark-color);
    font-size: 1rem;
    /* margin-bottom: 8px; */
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.slots-count {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark));
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.selected-count {
    background: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.slots-description {
    color: var(--gray-color);
    font-size: 0.85rem;
    margin-bottom: 5px;
}

.warning-text {
    color: var(--danger-color);
    font-weight: 500;
    font-size: 0.85rem;
    margin-top: 5px;
}

.selection-note {
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.8rem;
    margin-top: 8px;
    padding: 8px 12px;
    background: #f0f7ff;
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
}

/* Slots Grid */
.slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.slot-time-btn {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dark-color);
}

.slot-time-btn:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
    background: rgba(0, 191, 255, 0.05);
}

.slot-time-btn.selected {
    background: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
    color: white;
    border-color: var(--danger-color);
}

.slot-label {
    font-weight: 600;
    font-size: 0.85rem;
}

.slot-hint {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 3px;
}

.slot-time-btn.selected .slot-hint {
    color: rgba(255, 255, 255, 0.9);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.modal-btn-secondary {
    background: #6c757d;
    color: white;
}

.modal-btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-2px);
}

.modal-btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
}

.modal-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

/* ==================== MOBILE RESPONSIVE ==================== */

@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    .title h2 {
        font-size: 1.4rem;
        text-align: center;
    }
    
    .summary-grid {
        gap: 10px;
    }
    
    .summary-item {
        padding: 12px;
    }
    
    .summary-value {
        font-size: 1.3rem;
    }
    
    .summary-label {
        font-size: 0.7rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Jadval ustunlarini yashirish - 5,6,7-ustunlar (Davomiylik, Boshlanish, Tugash) */
    .slots-table th:nth-child(5),
    .slots-table td:nth-child(5),
    .slots-table th:nth-child(6),
    .slots-table td:nth-child(6),
    .slots-table th:nth-child(7),
    .slots-table td:nth-child(7) {
        display: none;
    }
    
    .action-buttons {
        gap: 10px;
        padding: 11px;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
    }
    
    /* Modal Mobile */
    .modal-container {
        width: 95%;
        margin: 10px;
    }
    
    .modal-header {
        padding: 10px 15px;
    }
    
    .modal-title {
        font-size: 1.1rem;
    }
    
    .modal-time-range {
        font-size: 0.75rem;
        gap: 8px;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .slots-header {
        padding: 12px 15px;
    }
    
    .slots-title {
        font-size: 0.9rem;
    }
    
    .slots-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
    }
    
    .slot-time-btn {
        padding: 8px 6px;
        font-size: 0.75rem;
    }
    
    .slot-label {
        font-size: 0.75rem;
    }
    
    .modal-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .modal-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 10px;
    }
    
    .title h2 {
        font-size: 1.2rem;
    }
    
    .summary-value {
        font-size: 1.1rem;
    }
    
    .summary-label {
        font-size: 0.65rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .slots-table th,
    .slots-table td {
        padding: 10px 8px;
        font-size: 0.7rem;
    }
    
    .slots-grid {
        grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    }

    .info-box p {
        font-size: 11px;
    }

    .info-box h5 {
        font-size: 12px;
    }

    .slots-table th:nth-child(5),
    .slots-table td:nth-child(5),
    .slots-table th:nth-child(6),
    .slots-table td:nth-child(6),
    .slots-table th:nth-child(7),
    .slots-table td:nth-child(7) {
        display: none !important;
    }

    .day-name {
        font-size: 12px;
    }

    .date-display {
        font-size: 10px;
    }


    .switch {
        width: 43px;
        height: 20px;
    }

    .slider:before {
        height: 15px;
        width: 15px;
        left: 2px;
        bottom: 3px;
    }

    .eye-btn {
        width: 30px;
        height: 30px;
    }

    

  .stat-label {
    font-size: 11px;
  }
}

/* Modal backdrop blur */
.modal-overlay-dynamic {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-checkbox:checked + .modal-overlay-dynamic {
  display: flex;
}

.modal-container {
  background: white;
  border-radius: 12px;
  max-width: 800px;
  width: 90%;
  max-height: 80vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
  from {
      opacity: 0;
      transform: scale(0.95);
  }
  to {
      opacity: 1;
      transform: scale(1);
  }
}

/* Disabled row background */
.disabled-row {
  background-color: rgba(220, 53, 69, 0.1) !important;
  opacity: 0.85;
}

.disabled-row:hover {
  background-color: rgba(220, 53, 69, 0.15) !important;
}

.excluded-badge {
  color: #dc3545;
  font-size: 0.9em;
  margin-left: 5px;
}

.slot-count-display .total-slots {
  font-weight: 500;
}




        
.main-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0;
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid #dee2e6;
}

.tab-content-custom {
    padding: 30px;
}

.schedule-day {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

.schedule-day:hover {
    border-color: var(--primary);
    box-shadow: 0 5px 15px rgba(0, 191, 255, 0.1);
}

.schedule-day.day-off {
    opacity: 0.6;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: nowrap;
    gap: 15px;
}

.day-title {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
    flex: 1;
}

.day-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.day-info {
    flex: 1;
}

.day-info h5 {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1rem, 3vw, 1.25rem);
    white-space: nowrap;
}

.day-switch {
    flex-shrink: 0;
}

.schedule-switch {
    position: relative;
}

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

.schedule-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    transition: .4s;
    border-radius: 34px;
}

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

input:checked + .schedule-slider {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

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

.time-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.time-group {
    background: var(--light-color);
    padding: 15px;
    border-radius: 8px;
}

.time-group label {
    font-size: clamp(0.75rem, 2.5vw, 0.85rem);
    color: var(--secondary);
    margin-bottom: 8px;
    display: block;
    font-weight: 500;
}

.time-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.time-input {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-family: inherit;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    transition: all 0.3s;
    width: 100%;
}

.time-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.2);
    outline: none;
}

.time-input:disabled {
    background: #f5f5f5;
    color: #999;
}

.time-separator {
    color: var(--primary);
    font-weight: 600;
    flex-shrink: 0;
}

.duration-select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: white;
    font-family: inherit;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
}

.day-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.day-actions .btn {
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    padding: 8px 16px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 30px;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: white;
  flex-shrink: 0;
  margin-left: 15px;
}

/* Tugmalar uchun maxsus stillar */
.action-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    margin: 20px 0;
}

/* Tablet styles */
@media (max-width: 992px) {
    
    .tab-content-custom {
        padding: 20px;
    }
    
    .time-controls {
        gap: 12px;
    }
    
    .time-group {
        padding: 12px;
    }
    
    .day-header {
        flex-wrap: wrap;
    }
    
    .day-title {
        flex: 1;
        min-width: 200px;
    }
}

/* Mobile styles - ultra kichik */
@media (max-width: 768px) {
    
    .tab-content-custom {
        padding: 10px;
    }
    
    .schedule-day {
        padding: 10px;
        margin-bottom: 20px;
    }
    
    .day-header {
        margin-bottom: 10px;
        padding-bottom: 8px;
        gap: 8px;
    }
    
    .day-title {
        gap: 8px;
    }
    
    .day-icon {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
        border-radius: 6px;
    }
    
    .day-info h5 {
        font-size: 0.8rem;
    }
    
    .schedule-switch {
        width: 42px;
        height: 22px;
    }
    
    .schedule-slider:before {
        height: 17px;
        width: 17px;
        left: 2px;
        bottom: 0.158rem;
    }
    
    input:checked + .schedule-slider:before {
        transform: translateX(20px);
    }

    input:not(:checked) + .schedule-slider:before {
        transform: translateX(0.03rem);
    }
    
    .time-controls {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .time-group {
        padding: 8px;
    }
    
    .time-group label {
        font-size: 0.65rem;
        margin-bottom: 4px;
    }
    
    .time-input-group {
        gap: 5px;
    }
    
    .time-input {
        padding: 5px 6px;
        font-size: 0.7rem;
        border-width: 1px;
    }
    
    .time-separator {
        font-size: 0.7rem;
    }
    
    .duration-select {
        padding: 5px 6px;
        font-size: 0.7rem;
        border-width: 1px;
    }
    
    .day-actions {
        margin-top: 8px;
        padding-top: 8px;
        gap: 5px;
        flex-wrap: wrap;
    }
    
    .day-actions .btn {
        font-size: 0.7rem;
        padding: 6px 8px;
        flex: 1 1 auto;
        min-width: 120px;
    }
    
    .day-actions .btn i {
        font-size: 0.65rem;
        margin-right: 4px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-top: 20px;
        margin-bottom: 15px;
    }
    
    .stat-icon {
        width: 30px;
        height: 30px;
        font-size: 11px;
        margin-left: 10px;
        border-radius: 8px;
    }

    .btn-outline-success {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .btn-outline-warning {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .action-buttons {
        gap: 8px;
        margin: 15px 0;
    }
    
    .row.mb-4 {
        margin-bottom: 10px !important;
    }
    
    .col-md-6.d-flex {
        gap: 8px;
    }
    
    .ps-3 {
        padding-left: 5px !important;
    }
    
    .pe-3 {
        padding-right: 5px !important;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 5px;
    }
}

.type-badge {
  background: #00BFFF;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}

@media (max-width: 576px) {
    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 3px;
    }

    .type-badge {
      font-size: 10px;
      padding: 3px 6px;
  }

  .medicine-table-container .full-name {
    font-size: 12px;
  }

  .procedure-table-container .patient-info .login-procedure-display {
    display: none;
  }
}

/* Juda kichik ekranlar */
@media (max-width: 380px) {
    
    .day-info h5 {
        font-size: 0.75rem;
    }
    
    .schedule-switch {
        width: 38px;
        height: 20px;
    }
    
    .schedule-slider:before {
        height: 14px;
        width: 14px;
    }
    
    input:checked + .schedule-slider:before {
        transform: translateX(18px);
    }
    
    .time-input {
        font-size: 0.65rem;
        padding: 4px 5px;
    }
    
    .duration-select {
        font-size: 0.65rem;
        padding: 4px 5px;
    }
    
    .day-actions .btn {
        font-size: 0.65rem;
        padding: 5px 6px;
        min-width: 100px;
    }
    
    .stat-icon {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
}

.schedule-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  margin: 20px 0;
  padding: 20px 30px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

@media (max-width: 768px) {
  .schedule-buttons {
      gap: 10px;
      padding: 11px;
      margin: 15px 0;
  }
}

.rules-wrapper {
  margin-bottom: 25px;
}
.rules-toggle {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  overflow: hidden;
  border: 1px solid #dee2e6;
}
.rules-toggle-input {
  display: none;
}
.rules-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}
.rules-toggle-label:hover {
  background: #00BFFF;
}
.rules-title {
  font-size: 16px;
  font-weight: 600;
  color: #1A2142;
}
.rules-icon {
  color: #1a2142;
  transition: transform 0.3s ease;
}
.rules-toggle-input:checked + .rules-toggle-label .rules-icon {
  transform: rotate(180deg);
}
.rules-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  background: #f8f9fc;
}
.rules-toggle-input:checked + .rules-toggle-label + .rules-content {
  max-height: 300px;
}


  
  /* department */

.inventory-table-container .table-header {
  padding: 18px 20px;
  background: var(--light-color);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
  gap: 15px;
}

.inventory-table-container .table-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  justify-content: flex-end;
}

.inventory-table-container .action-right {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 400px;
}

.inventory-table-container .search-wrapper {
  margin-bottom: 10px;
  width: 100%;
}



.departments-table-container .table-header {
  padding: 18px 20px;
  background: var(--light-color);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
  gap: 15px;
}

.departments-table-container .table-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  justify-content: flex-end;
}

.departments-table-container .action-right {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 400px;
}

.departments-table-container .search-wrapper {
  margin-bottom: 10px;
  width: 100%;
}

.modern-input-max {
  width: 100%;
  padding: 12px 12px 12px 17px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  transition: all 0.2s ease;
  background: #fafbfc;
}

.department-name {
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 4px;
  font-size: clamp(0.9rem, 4vw, 1rem);
}

.department-floor {
  font-size: 0.85rem;
  color: var(--gray-color);
}

.beds-info {
  display: flex;
  flex-direction: column;
}


.beds-count {
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 8px;
  font-size: clamp(0.85rem, 3.5vw, 1rem);
}

.beds-progress {
  margin-bottom: 4px;
}

.progress {
  height: 6px;
  border-radius: 3px;
  background: #e2e8f0;
  overflow: hidden;
  width: 120px;
}


.doctor-info {
  display: flex;
  /* flex-direction: column; */
}

.doctor-name {
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 4px;
}

.doctor-specialty {
  font-size: 0.85rem;
  color: var(--gray-color);
}

.occupancy-rate {
  font-size: 0.85rem;
  color: var(--gray-color);
}

@media (max-width: 480px) {
  .department-name {
      font-size: 11px;
      margin-bottom: 0;
      white-space: normal;
      word-break: break-word;
  }
  .department-floor {
      display: none;
  }
  .beds-count {
      font-size: 10px;
      margin-bottom: 4px;
      white-space: normal;
  }

  .progress {
      width: 60px;
      height: 3px;
  }

  .occupancy-rate {
      font-size: 9px;
  }

  th:nth-child(1), td:nth-child(1) {
      width: 30px;
      text-align: center;
  }

  /* th:nth-child(2), td:nth-child(2) {
      min-width: 100px;
  } */

  /* th:nth-child(4), td:nth-child(4) {
      min-width: 110px;
  } */

  th:nth-child(7), td:nth-child(7) {
      min-width: 40px;
  }

  .departments-table-container table th,
  .departments-table-container table td {
    padding: 10px 5px;
    font-size: 11px;
  }
}




@media (max-width: 768px) {
    .mobile-quick-actions {
        display: block;
    }
}
@media (min-width: 769px) {
    .mobile-quick-actions {
        display: none;
    }
}

@media (max-width: 768px) {
    .desktop-form {
        display: none;
    }

    .type-badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    .suppliers-table-container .table-header {
        padding: 12px 15px;
    }

    .procedure-table-container .table-header {
        padding: 12px 15px;
    }
    
    .suppliers-table-container .table-actions {
        width: 100%;
    }

    .procedure-table-container .table-actions {
        width: 100%;
    }
    
    .suppliers-table-container .action-right {
        width: 100%;
    }

    .procedure-table-container .action-right {
        width: 100%;
    }
    
    .suppliers-table-container .action-right .search-wrapper {
        width: 100%;
    }

    .procedure-table-container .action-right .search-wrapper {
        width: 100%;
    }
    
    .suppliers-table-container .modern-input-max {
        width: 100% !important;
        box-sizing: border-box;
    }

    .procedure-table-container .modern-input-max {
        width: 100% !important;
        box-sizing: border-box;
    }

    .medicine-table-container .modern-input-max {
        width: 100% !important;
        box-sizing: border-box;
    }

    .medicine-table-container .table-header {
        padding: 12px 15px;
    }
    
    .medicine-table-container .table-actions {
        width: 100%;
    }
    
    .medicine-table-container .action-right {
        width: 100%;
    }
    
    .medicine-table-container .action-right .search-wrapper {
        width: 100%;
    }
}

.desktop-form-header {
    background-color: var(--primary-color);
    color: white;
    padding-bottom: 27px;
    justify-content: center;
    display: flex;
    padding: 16px;
}

.desktop-form-header h4 {
    color: white;
    font-size: 17px;
}

.desktop-form-body {
    padding: 14px;
}

.desktop-form-footer {
    display: flex;
    justify-content: space-between;
    padding: 14px 0px;
}

.mobile-quick-actions {
    margin-bottom: 15px;
}

.glass-card {
    padding: 10px;
}

.feature-selected {
    background-color: rgba(0, 139, 255, 0.1);
    border-left: 3px solid var(--primary-color);
}

/* .dropdown-content {
    display: none;
    position: absolute;
    background: white;
    min-width: 150px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    z-index: 1000;
    right: 0;
} */

.dropdown-content.show {
    display: block;
}

.action-dropdown {
    position: relative;
}

.action-dots {
    cursor: pointer;
    padding: 8px;
}

.form-hidden {
    display: none;
}

.form-visible {
    display: block;
}

.form-group {
    margin-bottom: 8px;
}




 
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

        
.contact-email {
  font-size: 12px;
  color: #00BFFF;
}

.contact-phone {
  font-size: 12px;
  color: #475569;
}
        
.address-text {
  font-size: 13px;
  color: #475569;
  max-width: 180px;
  line-height: 1.4;
}

.price-text {
  font-weight: 700;
  color: #2ecc71;
  font-size: 15px;
}

/* Narx oralig'i */
.price-range {
  display: flex;
  gap: 10px;
  align-items: center;
}

.price-input-group {
  flex: 1;
  position: relative;
}

.modern-price-input {
  width: 100%;
  padding: 12px 12px 12px 30px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  background: #fafbfc;
  transition: all 0.2s;
}

.modern-price-input:focus {
  outline: none;
  border-color: #00BFFF;
  background: white;
}

.description {
  font-size: 12px;
  color: var(--gray-color);
}

.test-result-p {
  text-decoration: underline;
  font-size: 14px;
}

.table-text {
  font-size: 14px;
}

.floor{
  text-align: center;
}

@media (max-width: 576px) {
  .table-text {
    font-size: 10px;
  }

  .test-result-p {
    font-size: 13px;
  }

  .price-text {
      font-size: 13px;
  }

  .inventory-history-table-container th {
    font-size: 10px;
  }

  .medicine-table-container table th:nth-child(4),
  .medicine-table-container table th:nth-child(4) 
  {
    max-width: 70px;
  }

  
 
  .test-results-container table td:nth-child(1),
  .test-results-container table td:nth-child(2),
  .test-results-container table td:nth-child(3),
  .test-results-container table td:nth-child(4),
  .test-results-container table td:nth-child(5) {
    border-right: 1px solid #eee;
  }

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

  .quantity-display .full-name {
    font-weight: bold; 
  }

  .quantity-display .medicine-dose 
  {
    font-size: 10px;
  }
            
  .price-range {
      flex-direction: row;
  }

  .description {
    display: none;
    font-size: 10px;
    color: var(--gray-color);
  }

  .floor span {
    display: none;
  }
}


.medicine-category {
  font-size: 13px;
}

.inventory-medicine-table-container .procedure-name {
  font-size: 13px;
}

.inventory-medicine-table-container .supplier {
  font-size: 13px;
}

.badge.standard {
  background: #e2e8f0;
  color: #475569;
}

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
}