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

:root {
  --bg: #f2f2f2;
  --text: #041225;
  --muted: #98a2b3;
  --white: #ffffff;
  --black: #000000;
  --glass: rgba(255, 255, 255, 0.4);
  --white-alpha-10: rgba(255, 255, 255, 0.102);
  --white-alpha-50: rgba(255, 255, 255, 0.5);
  --white-alpha-60: rgba(255, 255, 255, 0.6);
  --grey-alpha-05: rgba(67, 67, 67, 0.05);
  --grey-alpha-20: rgba(220, 220, 220, 0.2);
  --shadow-light: -1px -1px 0px var(--white-alpha-60);
  --blur-3: blur(3px);
  --card-border: #eaecf0;
  --card-gradient-bg: #f8f9f8;

  --border: rgba(67, 67, 67, 0.1);

  --gradient-from: rgba(67, 67, 67, 0.5);
  --gradient-to: rgba(67, 67, 67, 0);

  --primary-dark: #38265f;
  --primary: #6645ab;
  --primary-light: #c58bf2;
  --primary-100: #cbbfe5;
  --primary-200: #987fcb;
  --primary-300: #4f3685;
  --primary-10: rgba(79, 54, 133, 0.1);

  --secondary-100: #f6e98a;
  --secondary-200: #efe57f;
  --secondary-300: #c9b83a;
  --secondary-400: #7f7b1f;
  --secondary-10: rgba(127, 123, 31, 0.08);

  --neutral-100: #ffffff;
  --neutral-200: #f9fafb;
  --neutral-300: #eaecf0;
  --neutral-400: #98a2b3;
  --neutral-500: #667085;
  --neutral-600: #475467;
  --neutral-700: #344054;
  --neutral-800: #1d2939;
  --neutral-900: #041225;
  --neutral-1000: #0b0b0b;

  --red-100: #ffd7dd;
  --red-200: #d00416;
  --red-alpha-10: rgba(208, 4, 22, 0.1);

  --green-100: #bff0d9;
  --green-200: #1fc16b;
  --green-alpha-10: rgba(31, 193, 107, 0.1);

  --yellow-100: #ffe7b5;
  --yellow-200: #ea9907;
  --yellow-alpha-10: rgba(234, 153, 7, 0.1);

  --bg-yellow-text: #fec53d;
  --bg-yellow-alpha-20: rgba(254, 197, 61, 0.21);

  --bg-green-text: #4ad991;
  --bg-green-alpha-20: rgba(74, 217, 145, 0.21);

  --bg-orange-text: #ff9066;
  --bg-orange-alpha-20: rgba(255, 144, 102, 0.3);
}

[data-theme="dark"] {
  --bg: #0b1220;
  --text: #e6eef8;
  --muted: #98a2b3;
  --white: #0b0f14;
  --black: #ffffff;
  --glass: rgba(0, 0, 0, 0.04);
  --white-alpha-10: rgba(0, 0, 0, 0.05);
  --white-alpha-50: rgba(0, 0, 0, 0.2);
  --white-alpha-60: rgba(0, 0, 0, 0.3);
  --grey-alpha-05: rgba(255, 255, 255, 0.02);
  --grey-alpha-20: rgba(0, 0, 0, 0.2);
  --card-border: #2d2f33;
  --card-gradient-bg: #3d404d;

  --border: rgba(255, 255, 255, 0.08);

  --gradient-from: rgba(255, 255, 255, 0.2);
  --gradient-to: rgba(255, 255, 255, 0);

  --primary-dark: #b7a3f5;
  --primary: #6645ab;
  --primary-light: #bda7e8;
  --primary-100: #6f53b2;
  --primary-200: #4a2f7a;
  --primary-300: #2a1a3f;
  --primary-10: rgba(110, 88, 170, 0.2);

  --secondary-100: #e9df7a;
  --secondary-200: #cbbf4f;
  --secondary-300: #9a861f;
  --secondary-400: #6f6214;
  --secondary-10: rgba(111, 98, 20, 0.2);

  --neutral-100: #0b0f14;
  --neutral-200: #1f2227;
  --neutral-300: #2d2f33;
  --neutral-400: #7d838d;
  --neutral-500: #9ca3af;
  --neutral-600: #a6b9c3;
  --neutral-700: #a1a8b3;
  --neutral-800: #8b98a3;
  --neutral-900: #e6eef8;
  --neutral-1000: #dce3e9;

  --red-100: #3a0b0f;
  --red-200: #ff6b7d;
  --red-alpha-10: rgba(255, 107, 125, 0.1);

  --green-100: #0f3f27;
  --green-200: #0d8a52;
  --green-alpha-10: rgba(13, 138, 82, 0.1);

  --yellow-100: #6d5318;
  --yellow-200: #ffb74d;
  --yellow-alpha-10: rgba(255, 183, 77, 0.1);
}

body {
  font-family: "Poppins", sans-serif;
  background-color: var(--bg);
  color: var(--neutral-900);
  transition: background-color 250ms ease, color 250ms ease;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--neutral-900);
}

.content_wrap {
  padding: 0 40px 40px;
}

.form-control:focus-visible,
.form-control:focus {
  box-shadow: none;
  outline: none;
  border-color: initial;
}

.mt-24 {
  margin-top: 24px !important;
}
.mb-24 {
  margin-bottom: 24px !important;
}
.mb-16 {
  margin-bottom: 16px !important;
}
.mt-16 {
  margin-top: 16px !important;
}
.pb-16 {
  padding-bottom: 16px !important;
}
.pt-16 {
  padding-top: 16px !important;
}
.p-16 {
  padding: 16px !important;
}
.py-16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.p-20 {
  padding: 20px !important;
}
.p-24 {
  padding: 24px !important;
}

i {
  display: inline-flex;
}

.btn {
  display: inline-flex;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 100px;
  border: none;
  align-items: center;
  gap: 8px;
  color: var(--neutral-900);
  font-size: 14px;
}
.btn_outline {
  font-size: 14px;
  padding: 8px 16px;
  border: 1px solid var(--neutral-300);
  border-radius: 100px;
}
.btn_outline:hover {
  background-color: var(--neutral-300);
}
.gradient_border {
  background: linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(var(--gradient-from) -180.43%, var(--gradient-to) 118.11%)
      border-box;
  border: 1px solid transparent;
}
.gradient_bg_gray {
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(var(--gradient-from) -180.43%, var(--gradient-to) 118.11%)
      border-box;
}
.gradient_bg_white {
  background: linear-gradient(var(--white-alpha-10), var(--white-alpha-10))
      padding-box,
    linear-gradient(var(--white) -180.43%, var(--white-alpha-10) 118.11%)
      border-box;
  border: 1px solid transparent;
}
.btn_outline_primary {
  border: 1px solid var(--primary-dark);
  color: var(--primary-dark) !important;
  font-weight: 600;
}
.btn_outline_primary:hover {
  border: 1px solid var(--primary-dark);
  color: var(--primary-dark) !important;
}
/* Login */

.login_wrap {
  background-image: url(../img/login_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  color: var(--neutral-100);
  z-index: 1;
  height: 100vh;
  overflow: auto;
}
.login_wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--grey-alpha-20);
  z-index: -1;
}
.login_wrap .row {
  margin: 0;
}
.login_wrap .col-8,
.login_wrap .col-4 {
  padding: 0;
}
.login_wrap .login_left {
  padding: 50px 10px 0 40px;
  width: 400px;
  max-width: 100%;
}
.login_wrap .login_left .login_logo .img {
  height: 50px;
}
.login_wrap .login_left .login_text p {
  font-size: 24px;
  color:white;
}
.login_wrap .login_right {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: var(--white-alpha-10);
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  border: 1px solid var(--white-alpha-50);
  border-top: none;
  border-bottom: none;
  backdrop-filter: var(--blur-3);
}
.login_right_content {
  width: 400px;
  max-width: 100%;
}
.login_wrap .login_right .login_right_content .title h3 {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
}
.login_right_content input.form-control {
  background-color: rgba(255, 255, 255, 0.28);
  min-height: 58px;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  box-shadow: none;
}
.login_right_content input.form-control::placeholder {
  color: rgba(255, 255, 255, 0.8);
}
.form_icon_text {
  position: relative;
}
.form_icon_text .icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.form_icon_text .icon i {
  font-size: 16px;
  color: var(--white);
}
.form_icon_text .form-control {
  padding-left: 62px;
}
.password_field .password_show {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 18px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  display: inline-block;
  height: 20px;
}
.password_field .password_show i {
  font-size: 20px;
}
.form-check .form-check-label {
  font-size: 14px;
  font-weight: 500;
}
.form-switch {
  padding: 0;
  display: flex;
  gap: 8px;
}
.form-check-input {
  background-color: var(--white);
}
.form-switch .form-check-input[type="checkbox"] {
  width: 56px;
  height: 24px;
  border-radius: 100px;
  background-size: 23px 23px;
  background-color: transparent;
  margin: 0;
}
.form-switch .form-check-input,
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2RpXzE1NTFfNDM0ODUpIj4KPGNpcmNsZSBjeD0iNjQiIGN5PSI2MCIgcj0iNjAiIGZpbGw9IiNERUUyRTYiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kaV8xNTUxXzQzNDg1IiB4PSIwIiB5PSIwIiB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSI0Ii8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb25zPSIyIi8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xMSAwIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93XzE1NTBfNDM0ODMiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfMTU1MF80MzQ4MyIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0Lz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIvPgo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJhcml0aG1ldGljIiBrMj0iLTEiIGszPSIxIi8+CjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjI1IDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0ic2hhcGUiIHJlc3VsdD0iZWZmZWN0Ml9pbm5lclNoYWRvd18xNTUxXzQzNDg1Ii8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=");
  border-color: #dee2e6;
}
.form-switch .form-check-input:checked {
  background-color: var(--primary);
}
.form-switch .form-check-input:checked {
  background-position: right center;
  --bs-form-switch-bg: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2RpXzE1NTBfNDM0ODMpIj4KPGNpcmNsZSBjeD0iNjQiIGN5PSI2MCIgcj0iNjAiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZGlfMTU1MF80MzQ4MyIgeD0iMCIgeT0iMCIgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0iZWZmZWN0MV9kcm9wU2hhZG93XzE1NTBfNDM0ODMiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfMTU1MF80MzQ4MyIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0Lz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIvPgo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJhcml0aG1ldGljIiBrMj0iLTEiIGszPSIxIi8+CjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjI1IDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0ic2hhcGUiIHJlc3VsdD0iZWZmZWN0Ml9pbm5lclNoYWRvd18xNTUxXzQzNDg1Ii8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=");
}
.form-check {
  padding: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}
.form-check-input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  accent-color: var(--primary);
  margin: 0;
}
.login_right .form-check-input[type="checkbox"] {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background-color: #ffffff;
  border-color: #ffffff;
}
.login_right .form-check .form-check-label {
  color: #ffffff;
}

[data-theme="dark"] .login_wrap .login_right .login_right_content .title h3,
[data-theme="dark"] .login_right .form-check,
[data-theme="dark"] .login_right .form-check .form-check-label,
[data-theme="dark"] .login_right .form-check-input[type="checkbox"] {
  color: #ffffff;
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-check-input:focus {
  box-shadow: none;
}
.login_right_content .button {
  margin-top: 36px;
}
.login_right_content .button .btn {
  width: 100%;
  font-weight: 600;
  padding: 16px;
  justify-content: center;
  color: #ffffff;
}
.login_right_content .gradient_btn {
  background: #2d1b53;
  border: none;
  border-radius: 100px;
  min-height: 52px;
}
.gradient_btn {
  background: linear-gradient(90deg, #4f3685 0%, #38265f 50%);
  color: #ffffff;
}
.gradient_btn:hover {
  color: #ffffff;
}
.btn_gray:hover,
.btn_gray {
  background-color: var(--neutral-200);
  border: 1px solid var(--neutral-300);
  color: var(--neutral-900);
}
.btn_primary:hover,
.btn_primary {
  background-color: var(--primary);
  color: #ffffff;
}
.btn_primary_300:hover,
.btn_primary_300 {
  background-color: var(--primary-300);
}
.btn_primary_200:hover,
.btn_primary_200 {
  background-color: var(--primary-200);
}
.btn_primary_100:hover,
.btn_primary_100 {
  background-color: var(--primary-100);
  color: var(--neutral-900) !important;
}
.btn_white {
  background-color: var(--white);
  color: var(--neutral-900);
}
.btn_white:hover {
  background-color: var(--white);
  color: var(--neutral-900);
}
/* Header */

header {
  padding: 40px 0;
}
header .navbar-brand {
  display: inline-block;
}
header .navbar-brand img {
  height: 40px;
}
.header_search {
  position: relative;
  margin-left: 48px;
}
.header_search .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  display: flex;
}
.header_search .icon i {
  color: var(--muted);
}
.header_search input {
  width: 400px;
  border-radius: 100px;
  min-height: 48px;
  padding-left: 50px;
  /* background-color: var(--white); */
}
.header_search input::placeholder {
  color: var(--muted);
}
.header_right ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 16px;
}
.header_right ul li a {
  display: inline-block;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  border-radius: 50%;
  color: var(--neutral-900);
  text-decoration: none;
}
.header_right ul li a i {
  font-size: 20px;
}
.header_right ul li a.message_active i {
  position: relative;
}
.header_right ul li a.message_active i:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--red-200);
  border-radius: 100%;
  top: 0;
  right: 0;
}
.theme_change {
  background: linear-gradient(
    270deg,
    var(--primary) 0%,
    var(--primary-light) 113.43%
  );
}
.theme_change {
  background: linear-gradient(
    270deg,
    var(--primary) 0%,
    var(--primary-light) 113.43%
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  padding: 0;
  transition: background 0.2s ease, transform 0.12s ease;
}
.theme_change i {
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}

.theme_change:active {
  transform: translateY(1px);
}

.header_right ul {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header_right ul li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* make header icons fixed-size to avoid vertical shift */
.header_right ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
}
.page_head {
  display: flex;
  padding: 16px 0;
  margin-bottom: 24px;
  justify-content: space-between;
  align-items: center;
}
.page_head .left_content .title {
  margin-bottom: 4px;
}
.page_head .left_content .title h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 0;
}
.page_head .left_content .text p {
  font-size: 14px;
  margin: 0;
  color: var(--neutral-700);
}
.page_head .left_content .edit_add_title {
  display: flex;
  gap: 16px;
  align-items: center;
}
.page_head .left_content .edit_add_title .edit_add_title_content .title h1 {
  font-size: 20px;
  font-weight: 600;
}
.page_head .left_content .edit_add_title .edit_add_title_content .title {
  display: flex;
  gap: 12px;
  align-items: center;
}
.page_head
  .left_content
  .edit_add_title
  .edit_add_title_content
  .text
  .date_desc
  span {
  font-weight: 600;
  color: var(--neutral-900);
}
.page_head
  .left_content
  .edit_add_title
  .edit_add_title_content
  .text
  .date_desc {
  color: var(--neutral-500);
  font-weight: 500;
}
.page_head .right_content .nav-pills {
  gap: 16px;
  padding: 12px 16px;
  border-width: 2px;
  border-radius: 100px;
}
.page_head .right_content .nav-pills .nav-item .nav-link {
  border-radius: 100px;
  padding: 8px 20px;
  min-width: 165px;
  color: var(--neutral-600);
  font-weight: 500;
}
.page_head .right_content .nav-pills .nav-item .nav-link.active {
  background-color: var(--white);
  color: var(--neutral-900);
}
.white_nav_pills.nav-pills {
  display: inline-flex;
  gap: 16px;
  padding: 12px 16px;
  border-width: 2px;
  border-radius: 100px;
}
.white_nav_pills.nav-pills .nav-item .nav-link {
  border-radius: 100px;
  padding: 8px 20px;
  min-width: 165px;
  color: var(--neutral-600);
  font-weight: 500;
}
.white_nav_pills.nav-pills .nav-item .nav-link.active {
  background-color: var(--white);
  color: var(--neutral-900);
}
.page_content {
  display: flex;
  gap: 40px;
}
.side_nav {
  width: 64px;
}
.main_content {
  width: 1%;
  flex: 1;
}
.side_nav .nav_wrap {
  display: flex;
  flex-direction: column;
}
.side_nav .nav_wrap ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-radius: 100px;
  padding: 9px 10px;
  background-color: #a6a6a61a;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 558px;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.side_nav .nav_wrap ul::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.side_nav .side_nav_footer {
  display: flex;
  gap: 6px;
  padding-top: 8px;
  justify-content: center;
  align-items: center;
}
.side_nav .side_nav_footer .dot {
  width: 8px;
  height: 8px;
  background: #d6d6d6;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}
.side_nav .side_nav_footer .dot.active {
  background: #5c33cf;
}
.side_nav .nav_wrap ul.logout_btn {
  height: auto;
  margin-top: 50px;
}
.side_nav .nav_wrap ul li a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--neutral-900);
  transition: 0.3s all;
}
.side_nav .nav_wrap ul li a i {
  font-size: 22px;
}
.side_nav .nav_wrap ul li a.active {
  background-color: var(--white);
}
.side_nav .nav_wrap ul li a.active i {
  color: var(--primary);
}
.side_nav .nav_wrap ul li a:hover {
  background-color: var(--white);
}
.side_nav .nav_wrap ul li a:hover i {
  color: var(--primary);
}
.side_nav .nav_wrap ul.logout_btn li a i {
  color: var(--red-200);
}
.card {
  padding: 24px;
  border: 1px solid var(--card-border);
  border-radius: 24px;
  background-color: var(--white-alpha-50);
  color: var(--neutral-900);
}
.card .card_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.card .card_header .card_title h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}
.dropdown-toggle {
  cursor: pointer;
  padding-right: 24px;
}
.card .card_header .card_right .dropdown .dropdown-link {
  text-decoration: none;
  color: var(--neutral-900);
}
.card .card_header .card_right .button {
  display: flex;
  gap: 12px;
  align-items: center;
}
.card .card_header .card_right .button .btn {
  font-weight: 500;
}
.dropdown-toggle::after {
  content: "\e08d";
  border: none;
  font-family: uicons-regular-rounded !important;
  font-size: 16px;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
}
.custom_card {
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(var(--card-gradient-bg), var(--card-gradient-bg))
      padding-box,
    linear-gradient(var(--gradient-from) -180.43%, var(--gradient-to) 118.11%)
      border-box;
  height: 100%;
}
.grid-col-5 {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.overview_wrap {
  gap: 16px;
}
.overview_wrap .overview_box .overview_name {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 24px;
}
.overview_wrap .overview_box .overview_name .icon {
  width: 52px;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-10);
  border-radius: 50%;
}
.overview_wrap .overview_box .overview_name .icon i {
  color: var(--primary);
  font-size: 22px;
}
.overview_wrap .overview_box .overview_name .text p {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}
.overview_wrap .overview_box .overview_content {
  margin-bottom: 32px;
}
.overview_wrap .overview_box .overview_content h3 {
  font-size: 24px;
  margin: 0;
  font-weight: 600;
}
.overview_wrap .overview_box .overview_result {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 4px;
}
.overview_wrap .overview_box .overview_result p {
  margin: 0;
  font-weight: 600;
}
.overview_wrap .overview_box .overview_result i {
  width: 24px;
  height: 24px;
  font-size: 12px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.overview_wrap .overview_box .overview_result.up p {
  color: var(--green-200);
}
.overview_wrap .overview_box .overview_result.up i {
  color: var(--green-200);
  background-color: var(--green-alpha-10);
  transform: rotate(315deg);
}
.overview_wrap .overview_box .overview_result.down p {
  color: var(--red-200);
}
.overview_wrap .overview_box .overview_result.down i {
  color: var(--red-200);
  background-color: var(--red-alpha-10);
  transform: rotate(130deg);
}
.revenue_legend {
  display: flex;
  align-items: center;
  gap: 16px;
}
.revenue_legend .legend_item {
  display: flex;
  gap: 6px;
  align-items: center;
  font-weight: 500;
}
.revenue_legend .legend_item .dot {
  width: 8px;
  height: 8px;
  background-color: var(--primary);
  display: block;
  border-radius: 50%;
}
.revenue_legend .legend_item.loss {
  color: var(--neutral-600);
}
.revenue_legend .legend_item.loss .dot {
  background-color: transparent;
  border: 1px solid var(--primary);
}
.revenue_header .total_revenue {
  display: flex;
  align-items: center;
  gap: 16px;
}
.revenue_header .total_revenue h3 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}
.change_indicator {
  font-weight: 500;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.change_indicator.up {
  color: var(--green-200);
}
.change_indicator.up i {
  transform: rotate(315deg);
}
.change_indicator.down {
  color: var(--red-200);
}
.change_indicator.down i {
  transform: rotate(130deg);
}
.primary_indicator .change_indicator.down,
.primary_indicator .change_indicator.up {
  color: var(--primary);
}
.primary_indicator .change_indicator.down i,
.primary_indicator .change_indicator.up i {
  transform: rotate(0);
}
.revenue_chart canvas {
  height: 300px !important;
}

/* New small and donut chart sizes */
.revenue_chart.small-chart canvas {
  height: 260px !important;
}

.revenue_chart.donut-chart canvas {
  height: 260px !important;
}

.donut-legend .legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.info-cards-vertical {
  padding: 14px;
}
.info-cards-vertical .info-small h5 {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 600;
}
.info-cards-vertical .info-small .accent {
  color: var(--primary);
  margin: 4px 0;
  font-size: 24px;
  font-weight: 600;
}
.info-cards-vertical .muted {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}
.info-cards-vertical .top-year .muted {
  font-size: 14px;
  font-weight: 400;
}
.info-cards-vertical .top-buyer .muted {
  font-size: 10px;
}
.info-cards-vertical .info-small.top-buyer .accent {
  font-size: 12px;
  font-weight: 500;
  margin-top: 20px;
}
.dropdown_link.chart_dropdown.form-select {
  background-color: transparent;
  border: none;
  color: var(--neutral-900);
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  padding: 0 30px 0 16px;
}

/* Progress Bar */
.progress-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.progress {
  height: 8px;
  background-color: var(--card-border);
  border-radius: 100px;
  overflow: hidden;
}

.progress-bar {
  background-color: var(--primary);
  border-radius: 100px;
  transition: width 0.3s ease;
  width: 100%;
}
.progress-bar-row .progress {
  background-color: var(--primary);
}
.progress-bar-row .progress-bar {
  background-color: var(--card-border);
}
.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progress-label .label {
  font-size: 14px;
}

.progress-label .value {
  font-size: 14px;
  font-weight: 500;
}
.upload-progress {
  font-size: 12px;
  font-weight: 700;
  color: var(--neutral-400);
}
.most-sold-items .progress {
  background-color: var(--card-border);
}
.most-sold-items .progress .progress-bar {
  background-color: var(--primary);
}
.row {
  row-gap: 16px;
}
.table_wrap {
  padding: 0;
}
.table_wrap .card_header {
  padding: 20px 24px;
}

/* DataTables Custom Styling */
.dataTables_wrapper {
  padding: 0;
}

/* DataTables Length & Filter */
.dataTables_length,
.dataTables_filter {
  padding: 16px 24px;
  margin: 0;
}

.dataTables_length label,
.dataTables_filter label {
  color: var(--neutral-600);
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dataTables_length select,
.dataTables_filter input {
  background-color: var(--white-alpha-50);
  border: 1px solid var(--neutral-300);
  border-radius: 100px;
  padding: 8px 16px;
  color: var(--neutral-900);
  font-weight: normal;
}

.dataTables_filter input {
  min-width: 240px;
}

/* DataTables Info & Pagination */
.dataTables_info {
  padding: 16px 24px;
  color: var(--neutral-600);
  font-size: 14px;
}

.dataTables_paginate {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.dataTables_wrapper .dataTables_paginate {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 24px;
  box-sizing: border-box;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
  background: transparent;
  border: 1px solid var(--neutral-300);
  padding: 8px 16px;
  border-radius: 999px;
  min-width: 92px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous {
  margin-right: auto;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next {
  margin-left: auto;
}

.dataTables_wrapper
  .dataTables_paginate
  .paginate_button:not(.previous):not(.next) {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--neutral-300);
  background: var(--white-alpha-50);
  color: var(--neutral-900) !important;
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--primary-light) 100%
  ) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 6px 14px rgba(79, 54, 133, 0.12);
  transform: translateY(-1px);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  transform: translateY(-1px);
}

@media screen and (max-width: 576px) {
  .dataTables_wrapper .dataTables_paginate {
    gap: 6px;
    padding: 8px 12px;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
  .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    min-width: 72px;
    padding: 6px 10px;
    font-size: 13px;
  }
  .dataTables_wrapper
    .dataTables_paginate
    .paginate_button:not(.previous):not(.next) {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
}

.dt-paging {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 24px;
  box-sizing: border-box;
}

.dt-paging .dt-paging-button {
  background: var(--white-alpha-50);
  border: 1px solid var(--neutral-300);
  color: var(--neutral-900);
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
}

.dt-paging .dt-paging-button.previous {
  border-radius: 999px;
  padding: 8px 16px;
  min-width: 92px;
  margin-right: auto;
}

.dt-paging .dt-paging-button.next {
  border-radius: 999px;
  padding: 8px 16px;
  min-width: 92px;
  margin-left: auto;
}

.dt-paging .dt-paging-button:not(.previous):not(.next) {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-900);
}
.dt-paging .dt-paging-button:not(.previous):not(.next) {
  color: var(--neutral-600) !important;
}
@media screen and (max-width: 576px) {
  .dt-paging {
    gap: 6px;
    padding: 8px 12px;
  }
  .dt-paging .dt-paging-button.previous,
  .dt-paging .dt-paging-button.next {
    min-width: 72px;
    padding: 6px 10px;
    font-size: 13px;
  }
  .dt-paging .dt-paging-button:not(.previous):not(.next) {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
}

.dataTables_paginate .paginate_button {
  min-width: 36px;
  height: 36px;
  border-radius: 100px;
  border: 1px solid var(--neutral-300);
  background: var(--white-alpha-50);
  color: var(--neutral-900) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  padding: 0 !important;
  margin: 0 2px;
}

.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
  padding: 0 16px !important;
}

.dataTables_paginate .paginate_button:hover {
  background: var(--primary-10) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
}

.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  background: var(--neutral-200) !important;
  border-color: var(--neutral-300) !important;
  color: var(--neutral-600) !important;
  opacity: 0.5;
  cursor: not-allowed;
}

/* DataTables Table */
table.dataTable {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin: 0 !important;
}

table.dataTable thead th,
table.dataTable tbody td {
  padding: 16px 24px;
  font-weight: 500;
  color: var(--neutral-600);
  border-bottom: none !important;
  font-size: 14px;
  white-space: nowrap;
  background-color: transparent;
}
table.dataTable tbody td {
  color: var(--neutral-900);
  font-weight: 400;
}

table.dataTable thead th {
  border-top: 1px solid var(--neutral-300) !important;
  border-right: 1px solid var(--neutral-300) !important;
}

table.dataTable.row-border > tbody > tr > *,
table.dataTable.display > tbody > tr > * {
  border-top: 1px solid var(--neutral-300) !important;
  border-right: 1px solid var(--neutral-300) !important;
}
table.dataTable thead th:last-child,
table.dataTable tbody td:last-child {
  border-right: none !important;
}
table.dataTable tbody tr:last-child td {
  border-bottom: 1px solid var(--neutral-300) !important;
}
table.dataTable tbody tr {
  background-color: transparent;
  transition: background-color 0.2s ease;
}

table.dataTable tbody tr:hover {
  background-color: var(--primary-10);
}

table.dataTable tbody td {
  padding: 16px 24px;
  font-size: 14px;
  vertical-align: middle;
}

/* Sorting Icons */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  position: relative;
  cursor: pointer;
  padding-right: 35px !important;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
  position: absolute;
  right: 15px;
  color: var(--primary);
  font-size: 12px;
  opacity: 0.3;
}

table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  opacity: 1;
}

/* DataTables Custom Styling */
.dataTables_wrapper {
  padding: 0;
}

.table {
  width: 100%;
  margin-bottom: 0;
  color: var(--neutral-900);
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  padding: 12px 16px;
  color: var(--neutral-600);
  font-weight: 500;
  font-size: 14px;
  border-bottom: 1px solid var(--neutral-300);
  background-color: var(--white-alpha-50);
}

.table tbody td {
  padding: 16px;
  color: var(--neutral-900);
  font-size: 14px;
  border-bottom: 1px solid var(--neutral-300);
  vertical-align: middle;
}

.table tbody tr:hover {
  background-color: var(--neutral-200);
}

.dataTables_info,
.dataTables_length,
.dataTables_filter {
  color: var(--neutral-700);
  font-size: 14px;
  margin: 16px;
}

.dataTables_length select,
.dataTables_filter input {
  background-color: var(--white);
  border: 1px solid var(--neutral-300);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--neutral-900);
}

.dataTables_paginate {
  margin: 16px;
}

.paginate_button {
  padding: 6px 12px;
  margin: 0 4px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--neutral-700) !important;
  border: 1px solid var(--neutral-300);
}

.paginate_button.current {
  background: var(--primary) !important;
  color: white !important;
  border: 1px solid var(--primary) !important;
}

.paginate_button:hover {
  background: var(--neutral-200) !important;
  border: 1px solid var(--neutral-300) !important;
}

/* Sort Icons */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  color: var(--primary);
}

.status-badge {
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}

.success,
.status-badge.delivered {
  background-color: var(--green-alpha-10);
  color: var(--green-200);
}

.warning,
.status-badge.pending {
  background-color: var(--yellow-100);
  color: var(--yellow-200);
}

.danger,
.status-badge.canceled {
  background-color: var(--red-alpha-10);
  color: var(--red-200);
}

.table-actions {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
}

.table-actions button {
  border: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 16px;
}

.table-header .actions {
  display: flex;
  gap: 12px;
}

table.dataTable.hover > tbody > tr:hover > *,
table.dataTable.display > tbody > tr:hover > *,
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
table.dataTable.order-column > tbody tr > .sorting_1,
table.dataTable.order-column > tbody tr > .sorting_2,
table.dataTable.order-column > tbody tr > .sorting_3,
table.dataTable.display > tbody tr > .sorting_1,
table.dataTable.display > tbody tr > .sorting_2,
table.dataTable.display > tbody tr > .sorting_3,
table.dataTable.stripe > tbody > tr:nth-child(odd) > *,
table.dataTable.display > tbody > tr:nth-child(odd) > *,
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_1,
table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_1 {
  box-shadow: none;
  box-shadow: none;
}
table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover,
table.dataTable thead > tr > td.dt-orderable-desc:hover {
  outline: none;
  outline-offset: none;
}

.data_table td,
.data_table th {
  text-align: left !important;
  background-color: transparent;
}
table.dataTable > tbody > tr > td {
  padding: 22px 24px;
}
table.dataTable > thead > tr > th {
  padding: 12px 24px;
}
table.dataTable th.dt-type-numeric div.dt-column-header {
  flex-direction: row;
  text-align: left;
}
.table.dataTable td.dt-type-numeric {
  text-align: left;
}
.action .dt-column-header {
  display: none !important;
}
.dt-layout-row,
.dt-container > .dt-layout-row:first-child {
  padding: 0 24px;
}
.dt-container > .dt-layout-row:first-child {
  margin-top: 0;
}
.dt-length label {
  margin-left: 10px;
}
div.dt-container .dt-search label {
  margin-right: 10px;
}
div.dt-container .dt-search input,
div.dt-container .dt-input {
  background: linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(var(--gradient-from) -180.43%, var(--gradient-to) 118.11%)
      border-box;
  border: 1px solid transparent;
  border-radius: 100px;
  height: 48px;
  padding: 0.375rem 0.75rem;
}
div.dt-container select.dt-input {
  padding: 0.375rem 0.75rem;
}
.table-actions i {
  color: var(--neutral-500);
  font-size: 18px;
}
th.action {
  width: 8%;
}
.dt-paging-button.last,
.dt-paging-button.first {
  display: none !important;
}
.dt-paging {
  padding-left: 0;
  padding-right: 0;
}
div.dt-container .dt-paging .dt-paging-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--neutral-300);
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
}
div.dt-container .dt-paging .dt-paging-button:hover {
  background: none;
  background-color: var(--neutral-300);
  border: 1px solid var(--neutral-300);
  color: var(--neutral-900) !important;
}
div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active {
  border-color: var(--neutral-400);
  color: var(--neutral-400) !important;
}
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover,
.dt-paging .dt-paging-button:not(.previous):not(.next) {
  background: transparent;
  border: none;
}
.dt-paging nav {
  display: flex;
  align-items: center;
}
div.dt-container div.dt-layout-row {
  flex-wrap: wrap;
}
div.dt-container div.dt-layout-row.dt-layout-table {
  padding: 0;
}
table.dataTable.table_check .form-check {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
table.dataTable.table_check .form-check .form-check-input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  margin-top: 0;
}
.right_content .buttons {
  display: flex;
  gap: 12px;
}
.right_content .buttons .btn {
  font-size: 14px;
  color: #ffffff;
}
.right_content .buttons .btn:hover {
  color: #ffffff;
}
.right_content .buttons .btn i {
  font-size: 16px;
}
.table_product_img {
  margin-right: 8px;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}
.shipping_tab {
  padding: 0;
}
.shipping_tab .shipping_tab_header {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: var(--neutral-300);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.shipping_tab .shipping_tab_header p {
  margin: 0;
  color: var(--neutral-500);
  font-size: 14px;
}
.shipping_tab .shipping_tab_header p span {
  color: var(--neutral-900);
  font-weight: 500;
}
.shipping_tab .shipping_tab_wrap {
  padding: 24px 16px;
}
.shipping_tab .shipping_tab_wrap .order_progress {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.shipping_tab .shipping_tab_wrap .order_progress .order_progress-item {
  width: 100%;
  text-align: left;
  background-color: transparent;
  color: var(--neutral-500);
  border-radius: 0;
  border-bottom: 2px solid var(--neutral-300);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 12px 0;
}
.shipping_tab .shipping_tab_wrap .order_progress .order_progress-item .icon {
  width: 32px;
  height: 32px;
  background-color: var(--white);
  border: 1px solid var(--neutral-300);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shipping_tab .shipping_tab_wrap .order_progress .order_progress-item .icon i {
  font-size: 18px;
}
.shipping_tab .shipping_tab_wrap .order_progress .order_progress-item.active {
  border-color: var(--primary);
  color: var(--neutral-900);
}
.shipping_tab
  .shipping_tab_wrap
  .order_progress
  .order_progress-item.active
  .icon {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

@media (max-width: 991.98px) {
  .shipping_tab .shipping_tab_header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .shipping_tab .shipping_tab_wrap .order_progress {
    flex-wrap: wrap;
    gap: 12px;
  }
  .shipping_tab .shipping_tab_wrap .order_progress .order_progress-item {
    flex: 0 0 calc(50% - 6px);
    min-width: 0;
    align-items: flex-start;
  }
}

@media (max-width: 575.98px) {
  .shipping_tab .shipping_tab_wrap .order_progress .order_progress-item {
    flex: 0 0 100%;
  }
}
.order_title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.order_title .icon {
  display: flex;
}
.order_title .icon i {
  font-size: 20px;
}
.order_title .title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.form-label {
  font-size: 12px;
  margin-bottom: 8px;
  font-weight: 500;
}
.form_field .form-control,
.form_field .form-select {
  border-radius: 100px;
  border-color: var(--neutral-300);
  color: var(--neutral-700);
  font-size: 14px;
  padding: 12px 16px;
  background-color: transparent;
}

/* Custom Dropzone */
.custom-dropzone {
  border: 1px solid var(--neutral-300);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  background-color: var(--white-alpha-50);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.custom-dropzone.drag-over {
  border-color: var(--primary);
  background-color: var(--primary-10);
}

.dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.upload-icon {
  width: 40px;
  height: 40px;
  background-color: var(--white);
  border: 1px solid var(--neutral-300);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: 0px 2px 4px 0px #1b1c1d0a;
}

.upload-icon i {
  font-size: 18px;
  color: var(--neutral-400);
}

.dropzone-content p {
  margin: 0;
  font-size: 14px;
  color: var(--neutral-400);
}

.dropzone-content p span {
  color: var(--primary);
}

.file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--white);
  border-radius: 12px;
  margin-top: 16px;
  border: 1px solid var(--neutral-300);
}

.file-icon i {
  font-size: 35px;
  color: var(--neutral-400);
}

.file-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.file-details {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-900);
  margin: 0;
}

.file-status {
  font-size: 14px;
  font-weight: 500;
  margin-left: 2px;
}

.file-status.uploading {
  color: var(--primary);
}

.file-status.completed {
  color: var(--green-200);
}

.file-status.failed {
  color: var(--red-200);
}

.file-progress-info {
  display: flex;
  font-size: 14px;
  color: var(--neutral-400);
  margin-bottom: 4px;
}

.file-size {
  font-size: 14px;
  color: var(--neutral-400);
  margin: 0;
}

.file-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: var(--primary-10);
  width: 100%;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
}

.file-progress .progress-bar {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}

.file-actions {
  display: flex;
  gap: 8px;
}

.file-actions button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  color: var(--neutral-400);
}

.file-actions button:hover {
  color: var(--neutral-900);
}
.form_field .form-control::placeholder {
  color: var(--neutral-400);
}
.form_field .form-select:focus {
  box-shadow: none;
}
/* Product Details */
.product_image_section {
  margin-bottom: 24px;
}

.product_image_section .main_image {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.product_image_section .main_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product_image_section .thumbnail_images img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  border-radius: 8px;
  object-fit: cover;
}

.product_image_section .thumbnail_images .more_images {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.product_image_section .thumbnail_images .more_images span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: 600;
  color: var(--neutral-900);
}

.product_image_section .thumbnail_images .more_images .upload_btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px dashed var(--primary);
  border-radius: 8px;
}

.product_image_section .thumbnail_images .more_images.drag-over .upload_btn {
  opacity: 1;
  background-color: var(--primary-10);
  border: 2px dashed var(--primary);
}

.product_image_section .thumbnail_images .more_images .upload_btn .icon {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  margin-bottom: 8px;
  border-radius: 8px;
}
.product_image_section .thumbnail_images .more_images .upload_btn i {
  font-size: 18px;
  color: var(--neutral-400);
}

.product_image_section .thumbnail_images .more_images .upload_btn span {
  position: static;
  transform: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-400);
  text-align: center;
}
.text-primary {
  color: var(--primary) !important;
}
.product_details_form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quantity_input {
  position: relative;
}

.quantity_input .btn_decrease,
.quantity_input .btn_increase {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--neutral-300);
  background: var(--neutral-200);
  color: var(--neutral-900);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}
.quantity_input .btn_decrease {
  left: 8px;
}
.quantity_input .btn_increase {
  right: 8px;
}
.quantity_input .form-control {
  text-align: center;
  padding: 10px 40px;
  height: 47px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.form_field textarea.form-control {
  border-radius: 24px;
  resize: none;
  height: 95px;
}

.border_bottom {
  border-bottom: 1px solid var(--neutral-300);
  margin-bottom: 16px;
  padding-bottom: 16px;
}
.client_name_img {
  display: flex;
  align-items: center;
  gap: 8px;
}
.client_name_img .client_img {
  width: 40px;
}
.client_name_img .client_img img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}
.client_name_img .client_name {
  flex: 1;
}
.client_name_img .client_name p {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
}
.card .sub_title {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card .sub_title h3 {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.card .sub_title .icon {
  display: flex;
}

.card .sub_title .icon i {
  font-size: 20px;
}
/* Shipping Map Card */
.shipping_map_content .map_container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.shipping_map_content .map_container iframe {
  width: 100%;
  height: 220px;
  border: 0;
  display: block;
}
.shipping_map_content .map_title_row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 24px;
}
.shipping_map_content .map_location {
  font-weight: 600;
  color: var(--neutral-900);
}
.shipping_map_content .map_action a {
  font-size: 14px;
  color: var(--neutral-900);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.shipping_map_content .map_address {
  color: var(--neutral-600);
  margin-top: 8px;
  font-size: 14px;
}
.map_location_wrap p {
  margin-bottom: 0;
}
.contact_info ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact_info ul li {
  background-color: var(--primary-10);
  display: inline-block;
  border: 1px solid var(--primary);
  border-radius: 4px;
  padding: 8px 16px;
  width: fit-content;
  font-size: 14px;
  font-weight: 500;
}
.price_summary .price_row {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
}
.footer_button {
  display: flex;
  justify-content: end;
  gap: 16px;
  margin-top: 40px;
}
.footer_button .btn {
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  min-width: 190px;
  justify-content: center;
}
.footer_button .btn.btn_white {
  border: 1px solid var(--neutral-300);
}
.back_btn .btn {
  background-color: var(--white);
  color: var(--neutral-900);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  justify-content: center;
  border: 1px solid var(--neutral-300);
}

.file-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: var(--white);
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 0.2s ease;
}

.file-action-btn:hover {
  background: var(--neutral-100);
  color: var(--neutral-800);
}
.file-action-btn i {
  font-size: 20px;
}
.file-action-btn.delete {
  color: var(--neutral-500);
}

.file-action-btn.delete:hover {
  color: var(--red-200);
}
.file-item:has(.failed) {
  border-color: var(--red-200);
}
.error-message,
.file-item:has(.failed) .file-action-btn.delete {
  color: var(--red-200);
}
.error-message {
  font-size: 14px;
  font-weight: 600;
}
.input-group:not(.has-validation)
  > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(
    .form-floating
  ) {
  border-radius: 100px;
}
.input-group .btn {
  background-color: var(--neutral-300);
  padding: 12px;
  padding-right: 30px;
  border-radius: 100px !important;
  position: absolute;
  right: 0;
  font-size: 14px;
  height: 100%;
}
.input-group .btn:hover {
  background-color: var(--neutral-300);
  color: var(--neutral-900);
}
.input-group .dropdown-toggle::after {
  left: initial;
  right: 12px;
  font-size: 12px;
  margin: 0;
}
.input-group-text {
  position: absolute;
  left: 0;
  border: none;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 16px;
  color: var(--neutral-400);
  background-color: transparent;
}
.percentage_text .form-control {
  border-radius: 100px !important;
  padding-left: 45px;
}
.page_head .right_content .nav-pills.laptop_mobile_tab .nav-item .nav-link {
  width: 50px;
  height: 50px;
  min-width: auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
}
.page_head .right_content .nav-pills.laptop_mobile_tab .nav-item .nav-link i {
  font-size: 22px;
}
.page_head
  .right_content
  .nav-pills.laptop_mobile_tab
  .nav-item
  .nav-link.active {
  background-color: var(--primary);
  color: #ffffff;
}
.table_default tr th {
  border-top: 1px solid var(--neutral-300);
}
.table_default tr th,
.table_default tr td {
  border-right: 1px solid var(--neutral-300);
  background: transparent;
}
.table_default tr th:last-child,
.table_default tr td:last-child {
  border-right: none;
}
.table_default tbody tr:last-child td:first-child {
  border-bottom-left-radius: 24px;
}
.table_default tbody tr:last-child td:last-child {
  border-bottom-right-radius: 24px;
}
.table_default thead tr th:first-child {
  border-top-left-radius: 24px;
}
.table_default thead tr th:last-child {
  border-top-right-radius: 24px;
}
.table_default th.action {
  width: 60px;
}
.table_default tr td .table-actions {
  justify-content: center;
}
.upload_image {
  font-size: 16px;
}
.table_default .upload_image td {
  color: var(--neutral-400);
  font-weight: 400;
}
.intl-tel-input .country-list {
  background-color: var(--white);
}
.intl-tel-input {
  display: block;
}
.intl-tel-input .flag-container {
  background-color: var(--neutral-300);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}
.intl-tel-input.separate-dial-code .selected-dial-code {
  font-size: 14px;
}
.form_field.password_field .password_show {
  color: var(--neutral-500);
}
.modal-content {
  padding: 16px;
  background-color: var(--white);
  color: var(--neutral-900);
  border-radius: 16px;
  border: none;
}
.modal-header {
  gap: 12px;
  padding: 0;
  padding-bottom: 24px;
  margin-bottom: 18px;
  border-color: var(--neutral-300);
}
.modal-header .icon {
  width: 48px;
  height: 48px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--neutral-300);
}
.modal-header .icon i {
  font-size: 18px;
  color: var(--neutral-900);
}
.modal-header .title {
  flex: 1;
}
.modal-header .title .modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--neutral-900);
}
.modal-header .title p {
  font-size: 16px;
  color: var(--neutral-500);
  margin-top: 4px;
  margin-bottom: 0;
}
.modal-header .button .btn {
  font-size: 12px;
  color: var(--neutral-900);
  padding: 6px;
}
.modal-header .button .btn i::before {
  font-weight: 900 !important;
}
.modal-body {
  padding: 24px 0;
}
.modal-footer {
  gap: 16px;
  padding: 0;
  border: none;
}
.modal-footer .btn {
  min-width: 190px;
  justify-content: center;
  font-weight: 600;
}
.send_msg_modal .form-label {
  font-size: 14px;
}
.send_msg_modal .form_field textarea.form-control {
  border-radius: 12px;
}
.workout_history .workout_history_list {
  background-color: var(--primary-10);
  padding: 8px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.workout_history .workout_history_list:last-child {
  margin-bottom: 0;
}
.workout_history .workout_history_list .workout_history_wrap {
  display: flex;
  gap: 16px;
}
.workout_history .workout_history_list .workout_history_wrap .icon {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  border-radius: 100%;
}
.workout_history .workout_history_list .workout_history_wrap .icon {
  font-size: 20px;
}
.workout_history
  .workout_history_list
  .workout_history_wrap
  .workout_history_content
  .text
  p {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 600;
}
.workout_history
  .workout_history_list
  .workout_history_wrap
  .workout_history_content
  .routine_date_wrap {
  display: flex;
  gap: 8px;
}
.workout_history
  .workout_history_list
  .workout_history_wrap
  .workout_history_content
  .routine_date_wrap
  .routine_date_content
  p {
  font-size: 14px;
  color: var(--neutral-500);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.workout_history_progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}
.workout_history_progress .progress {
  background-color: var(--white);
  flex: 1;
}
.workout_history_progress .workout_history_progress_count p {
  font-size: 12px;
  margin: 0;
  color: var(--neutral-400);
  font-weight: 600;
}
.table_bordered thead tr th:first-child,
.table_bordered tbody tr td:first-child {
  border-left: 1px solid var(--neutral-300);
}
.table_bordered thead tr th:last-child,
.table_bordered tbody tr td:last-child {
  border-right: 1px solid var(--neutral-300);
}
.goals_wrap .goals_list {
  background-color: var(--primary-10);
  padding: 8px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.goals_wrap .goals_list:last-child {
  margin-bottom: 0;
}
.goals_wrap .title p {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}
.goals_progress .goals_progress_number {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.goals_progress .goals_progress_number p {
  margin-bottom: 0;
  font-size: 14px;
}
.goals_progress .progress {
  background-color: var(--white);
}
.profile_image_edit {
  text-align: center;
  margin-bottom: 24px;
}
.profile_image_edit .circle img {
  width: 64px;
  height: 64px;
  border-radius: 100%;
  object-fit: cover;
}
.profile_pic_upload {
  display: inline-block;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.profile_pic_upload input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}
.profile_pic_upload .btn {
  font-size: 14px;
  padding: 8px 16px;
}
.profile_text {
  margin-top: 8px;
}
.profile_text p {
  color: var(--neutral-500);
  font-size: 12px;
}
.plan_list {
  width: fit-content;
  margin: 0 auto;
}
.plan_item.plan_title {
  margin-bottom: 12px;
}
.plan_item.plan_title .plan_content {
  font-size: 16px;
  color: var(--neutral-900);
  font-weight: 600;
}
.plan_item {
  display: block;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 8px;
}
.plan_item:hover {
  color: var(--neutral-900);
}
.plan_item input[type="radio"] {
  display: none;
}
.plan_item input[type="radio"]:checked + .plan_content .plan_name,
.plan_item input[type="radio"]:checked + .plan_content .plan_duration,
.plan_item input[type="radio"]:checked + .plan_content .plan_price {
  color: var(--neutral-900);
  font-weight: 600;
}
.plan_content {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  gap: 80px;
  text-align: center;
  color: var(--neutral-400);
  font-weight: 500;
  font-size: 14px;
}
.plan_name {
  min-width: 90px;
}
.plan_duration {
  min-width: 70px;
}
.plan_price {
  min-width: 50px;
}
.plan_duration,
.plan_price {
  font-size: 15px;
}
.transaction_switch {
  flex-direction: row-reverse;
  justify-content: space-between;
}
.transaction_switch.form-switch .form-check-input[type="checkbox"] {
  width: 40px;
  height: 20px;
  background-size: 14px 14px;
  margin: 12px 0;
}
.transaction_switch.form-check .form-check-label {
  font-size: 16px;
}
table.dataTable.table_check
  .transaction_switch.form-check
  .form-check-input[type="checkbox"] {
  width: 40px;
  height: 20px;
  border-radius: 100px;
}
.w_5 {
  width: 5%;
}
.group_list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.group_list li {
  border: 1px solid var(--neutral-300);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--neutral-500);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
}
.group_list li:last-child {
  margin-bottom: 0;
}
.group_list li .close_icon {
  font-size: 10px;
  color: var(--neutral-900);
  text-decoration: none;
  display: inline-flex;
}
.group_list li .close_icon i::before {
  font-weight: 900 !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: var(--primary);
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  border-color: var(--primary);
}
.datepicker_wrap {
  position: relative;
  z-index: 1;
}
.datepicker_wrap .icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--neutral-400);
  z-index: -1;
}
.min-w-auto {
  min-width: auto !important;
}
.vendor_balance_card .vendor_balance_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vendor_balance_card .vendor_balance_wrap .vendor_balance_text .title {
  color: var(--neutral-700);
  margin-bottom: 8px;
}
.vendor_balance_card .vendor_balance_wrap .vendor_balance_text .amount {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}
.vendor_balance_card .vendor_balance_wrap .vendor_balance_icon {
  width: 64px;
  height: 64px;
  border-radius: 100%;
  background-color: var(--primary);
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
}
.vendor_balance_card .vendor_balance_wrap .vendor_balance_icon i {
  font-size: 32px;
}
.vendor_indicator {
  margin-top: 64px;
}
.vendor_indicator p {
  margin: 0;
}
.vendor_indicator p .change_indicator {
  font-size: 16px;
  display: inline-block;
}
.vendor_indicator .change_indicator i {
  transform: rotate(0);
  font-size: 16px;
  margin-right: 6px;
}
.news_latter_wrap .news_latter_box {
  border: 1px solid var(--neutral-300);
  padding: 8px;
  border-radius: 12px;
}
.news_latter_wrap .news_latter_box .banner {
  margin-bottom: 8px;
  position: relative;
}
.news_latter_wrap .news_latter_box .banner img {
  width: 100%;
  aspect-ratio: 7/3.7;
  border-radius: 8px;
  object-fit: cover;
}
.news_latter_wrap .news_latter_box .banner .delete_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white-alpha-60);
  width: 36px;
  height: 36px;
  border-radius: 100%;
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--red-200);
  text-decoration: none;
  font-size: 18px;
}
.news_latter_wrap .news_latter_box .content p {
  margin: 0;
}
.news_latter_wrap .news_latter_box .content .title_date {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.news_latter_wrap .news_latter_box .content .title_date .title p {
  font-size: 14px;
  font-weight: 600;
}
.news_latter_wrap .news_latter_box .content .title_date .date p {
  font-size: 12px;
  color: var(--neutral-500);
  white-space: nowrap;
}
.news_latter_wrap .news_latter_box .content .desc {
  margin-bottom: 16px;
}
.news_latter_wrap .news_latter_box .content .desc p {
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-500);
}
.news_latter_wrap .news_latter_box .content .button .btn {
  font-weight: 600;
  width: 100%;
  justify-content: center;
}
.news_latter_wrap .news_latter_box .content .button .btn i {
  font-size: 18px;
}
.news_latter_wrap .news_latter_box .content .button .btn i:before {
  font-weight: 900 !important;
}
.border_bottom_radius_none {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.border_top_radius_none {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.border_top_none {
  border-top: none !important;
}
.pagination {
  margin-bottom: 0;
}
.pagination .page-item.previous {
  margin-right: auto;
}
.pagination .page-item.next {
  margin-left: auto;
}
.pagination .page-item .page-link {
  background-color: transparent;
  border: none;
  color: var(--neutral-600);
  padding: 10px 16px;
}
.pagination .page-item .page-link.active {
  color: var(--neutral-900);
}
.pagination .page-item .page-link.paging-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--neutral-300);
  color: var(--neutral-900);
  background-color: transparent;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  padding: 8px 16px;
}
.pagination .page-item .page-link.disabled {
  pointer-events: none;
  border-color: var(--neutral-400);
  color: var(--neutral-400) !important;
}
.ipad_landscape img {
  width: 100%;
}
.form_field textarea.form-control.textarea_lg {
  height: 300px;
}
.fade:not(.show) {
  display: none;
}
.thankyou_modal {
  text-align: center;
}
.thankyou_modal .icon i {
  color: var(--primary);
  font-size: 40px;
}
.thankyou_modal h3 {
  color: var(--primary);
  font-size: 24px;
  margin-bottom: 8px;
  font-weight: 600;
}
.thankyou_modal p {
  color: var(--neutral-500);
  margin-bottom: 16px;
}
.thankyou_modal .btn {
  padding: 10px 24px;
}
.canvas {
  width: 100%;
}
.clicks_sales_chart canvas {
  width: 100%;
  height: 300px;
}
.chart_dropdown.form-select {
  font-size: 14px;
  background-color: var(--primary);
  padding: 8px 16px;
  border-radius: 100px;
  color: #ffffff;
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  padding-right: 40px;
}
.chart_dropdown.form-select:focus {
  box-shadow: none;
}
.business_report.overview_wrap .overview_box .overview_name {
  justify-content: space-between;
}
.business_report.overview_wrap .overview_box .overview_content {
  margin-bottom: 0;
}
.business_report.overview_wrap .overview_box .overview_name .text {
  margin-bottom: 14px;
}
.business_report.overview_wrap .overview_box .overview_name .text p {
  color: var(--neutral-500);
  font-weight: 400;
}
.business_report.overview_wrap .vendor_indicator {
  margin-top: 32px;
}
.business_report.overview_wrap .overview_box .overview_content h3 {
  font-size: 24px;
  font-weight: 700;
}
.business_report.overview_wrap .overview_box .overview_name .icon {
  width: 60px;
  height: 60px;
  border-radius: 23px;
}
.business_report.overview_wrap .overview_box .overview_name .icon i {
  font-size: 30px;
}
.business_report.overview_wrap .overview_box .overview_name .icon img {
  width: 100%;
}
.overview_wrap .overview_box .overview_name .icon.icon_primary,
.icon_primary {
  background-color: var(--primary);
}
.overview_wrap .overview_box .overview_name .icon.icon_primary i,
.icon_primary i {
  color: #ffffff;
}
.overview_wrap .overview_box .overview_name .icon.icon_yellow,
.icon_yellow {
  background-color: var(--bg-yellow-alpha-20);
}
.overview_wrap .overview_box .overview_name .icon.icon_yellow i,
.icon_yellow i {
  color: var(--bg-yellow-text);
}
.overview_wrap .overview_box .overview_name .icon.icon_green,
.icon_green {
  background-color: var(--bg-green-alpha-20);
}
.overview_wrap .overview_box .overview_name .icon.icon_green i,
.icon_green i {
  color: var(--bg-green-text);
}
.overview_wrap .overview_box .overview_name .icon.icon_orange,
.icon_orange {
  background-color: var(--bg-orange-alpha-20);
}
.overview_wrap .overview_box .overview_name .icon.icon_orange i,
.icon_orange i {
  color: var(--bg-orange-text);
}
.flex-1 {
  flex: 1;
}
.overview_wrap .overview_box .overview_name .icon:has(img) {
  background-color: transparent;
}
.driver-popover-arrow-side-bottom {
  border-color: var(--white);
  border-left-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
}
.driver-popover {
  background-color: var(--white);
  min-width: 480px;
  border-radius: 6px;
}
.driver-popover-description {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: var(--neutral-900);
  font-weight: 500;
}
.driver-popover-footer button,
.driver-popover-footer button:hover,
.driver-popover-footer button:focus {
  background-color: transparent;
  border: none;
  color: var(--primary);
  font-size: 14px;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
.driver-popover-footer button.driver-popover-inline-close {
  color: var(--neutral-400);
  margin-left: 15px;
}
.item_added_modal.modal-content {
  padding: 34px;
  width: 360px;
  margin: 0 auto;
}
.item_added_modal .modal-body {
  padding: 0;
}
.item_added_modal .modal-body .item_header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 28px;
}
.item_added_modal .modal-body .item_header img {
  width: 48px;
}
.item_added_modal .modal-body .item_header .close_btn button {
  padding: 0;
  color: var(--neutral-500);
  font-size: 12px;
}
.item_added_modal .modal-body .item_header .close_btn button i::before {
  font-weight: 900 !important;
}
.item_added_modal .modal-body h3 {
  font-size: 18px;
  font-weight: 600;
}
.item_added_modal .modal-body .buttons {
  margin-top: 70px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.item_added_modal .modal-body .buttons .btn {
  width: 100%;
  border-radius: 8px;
  justify-content: center;
  font-weight: 600;
}
.item_added_modal .modal-body .buttons .btn.btn_outline {
  color: var(--primary);
  border-color: var(--primary);
}
.item_added_modal .modal-body .buttons .btn.btn_outline:hover {
  background-color: transparent;
}

.client_head .client_profile img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
}

.client_head.page_head .left_content .edit_add_title .edit_add_title_content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.client_head.page_head
  .left_content
  .edit_add_title
  .edit_add_title_content
  .title
  h1 {
  font-size: 32px;
  font-weight: 700;
}

.round_btn.dropdown-toggle::after {
  content: none;
}

.round_btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  border-radius: 50%;
  text-decoration: none;
  color: var(--black);
  border: 1px solid var(--neutral-300);
}

.client_nav.white_nav_pills.nav-pills .nav-item .nav-link {
  min-width: 103px;
  padding: 8px 12px;
  white-space: nowrap;
}

.bg_transparent {
  background-color: transparent;
}

.activity_list ul {
  margin-bottom: 0;
  padding: 0;
  list-style-type: none;
}

.activity_list ul li {
  background-color: var(--white);
  border: 1px solid var(--neutral-300);
  border-radius: 24px;
  padding: 12px 12px 12px 33px;
  position: relative;
  margin-bottom: 8px;
  font-size: 12px;
}

.activity_list ul li:last-child {
  margin-bottom: 0;
}

.activity_list ul li::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: var(--black);
  border-radius: 50%;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
}

.overview_right .card {
  padding: 16px;
  background-color: var(--white-alpha-50);
  backdrop-filter: blur(38px);
  border: none;
}

.overview_right_header {
  display: flex;
  justify-content: space-between;
}

.overview_right_header .title h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-900);
  opacity: 0.7;
  margin-bottom: 16px;
}

.overview_right_header .title h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0;
}

.overview_right_header .inner_right img {
  width: 60px;
}

.overview_right .card {
  height: 100%;
  justify-content: space-between;
}

.overview_right .vendor_indicator.overview_right_bottom {
  margin-top: 32px;
}

.overview_right .inner_right a {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--primary-dark);
  text-decoration: none;
}

.overview_right_bottom .workout_text p {
  font-size: 12px;
  font-weight: 700;
  margin: 0;
}

.icon_title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon_title .icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--neutral-300);
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon_title .icon i {
  font-size: 22px;
}

.icon_title h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
}

.icon_title {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--neutral-300);
  margin-bottom: 16px;
}

.overview_right .form_field textarea.form-control {
  border-radius: 16px;
}

.statistics_inner .duration {
  font-size: 12px;
  margin-bottom: 8px;
  font-weight: 500;
}

.statistics_inner .time {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 0;
}

.statistics_inner .week {
  font-size: 10px;
  color: var(--neutral-500);
}

.statistics_sec .card_header .btn {
  padding: 8px 16px;
}

.statistics_chart canvas {
  width: 100%;
  height: 200px;
}

.client_nav {
  flex-wrap: nowrap;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  max-width: 100%;
}

.client_nav::-webkit-scrollbar {
  height: 0;
  display: none;
}

.client_nav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.log_workout_modal .modal-header .icon {
  width: auto;
  height: auto;
  border: none;
}

.log_workout_modal .modal-header .icon i {
  font-size: 20px;
}

.log_workout_modal .modal-header .button .btn {
  border: 1px solid var(--neutral-300);
  background-color: var(--neutral-200);
  padding: 8px 16px;
  font-size: 14px;
}

.bg_transparent_50 {
  padding: 16px;
  background-color: var(--white-alpha-50);
  backdrop-filter: blur(38px);
  border: none;
}

.workout_history_wrap .workout_history_list {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: 24px;
  border: 1px solid var(--neutral-300);
  background-color: var(--white);
  margin-bottom: 16px;
}

.workout_history_wrap .workout_history_list:last-child {
  margin-bottom: 0;
}

.workout_history_wrap .workout_history_list .icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--neutral-600);
  color: var(--white);
}

.workout_history_wrap .workout_history_list .icon i {
  font-size: 25px;
}

.workout_history_wrap .workout_history_list .content {
  flex: 1;
}

.workout_history_wrap .workout_history_list .content p {
  margin-bottom: 0;
  font-size: 14px;
}

.workout_history_wrap .workout_history_list .round_btn {
  border: none;
}

.program_wrap {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: 32px;
}

.program_wrap .program_left p {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
}

.program_wrap .program_left p:last-child {
  margin-bottom: 0;
}

.exercise_statistics_chart canvas {
  width: 100%;
  height: 400px !important;
}

.text_wrap td {
  white-space: normal !important;
}

.body_measurements_wrap,
.advanced_statistics_wrap {
  display: flex;
  gap: 16px;
}

.advanced_statistics_wrap .advanced_statistics_left {
  width: 300px;
}

.advanced_statistics_wrap .advanced_statistics_right {
  flex: 1;
  width: 1%;
}

.custom_nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.custom_nav li {
  margin-bottom: 12px;
}

.custom_nav li:last-child {
  margin-bottom: 0;
}

.custom_nav li a {
  color: var(--neutral-700);
  text-decoration: none;
  display: flex;
  padding: 12px 16px;
  background-color: var(--white);
  border: 1px solid var(--neutral-300);
  border-radius: 50px;
  font-size: 14px;
  gap: 8px;
  align-items: center;
  font-weight: 500;
}

.custom_nav li a.active {
  background-color: var(--primary);
  color: #ffffff;
}

.custom_nav li a.active svg path {
  stroke: #ffffff;
}

.body_measurements_left {
  flex: 1;
  width: 1%;
}

.body_measurements_right {
  width: 380px;
}

.body_measurements_right .card {
  padding: 16px 34px;
}

.body_measurements_right .card .header_search {
  margin-bottom: 30px;
}

.body_measurements_right .card .header_search .form-control {
  background-color: var(--white-alpha-50);
  width: 100%;
}

.body_measurements_right .custom_nav li {
  margin-bottom: 8px;
}

.body_measurements_right .custom_nav li:last-child {
  margin-bottom: 0;
}

.body_measurements_right .custom_nav li a {
  border-radius: 6px;
  padding: 8px;
  background-color: transparent;
  border: none;
  color: var(--neutral-900);
}

.body_measurements_right .custom_nav li a.active {
  background-color: var(--primary);
  color: #ffffff;
}

.inner_title_right {
  margin-left: auto;
}

.inner_title_right .button {
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress_picture .progress_picture_item {
  padding: 18px 8px;
  border: 1px solid var(--neutral-300);
  border-radius: 16px;
}

.progress_picture .progress_picture_item .image {
  margin-bottom: 8px;
}

.progress_picture .progress_picture_item .image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  aspect-ratio: 8/6;
}

.progress_picture .progress_picture_item .content p {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 0;
  text-align: center;
}

.new_goal {
  display: none;
}

.goal_progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.goal_progress .progress {
  width: 1%;
  flex: 1;
}

.goal_progress span {
  font-size: 12px;
  font-weight: 700;
  color: var(--neutral-400);
}

.goal_duration ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
  align-items: center;
  position: relative;
  margin-bottom: -20px;
}

.goal_duration ul::before {
  position: absolute;
  content: "";
  width: 90%;
  height: 3px;
  background-color: var(--primary);
  top: 41%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.goal_duration ul li {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.goal_duration ul li .title p {
  color: var(--primary);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 0;
}

.goal_duration ul li .text p {
  font-weight: 500;
  margin: 0;
}

.shape {
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
}

.shape span {
  display: block;
  margin: 0 auto;
}
.shape .round {
  width: 24px;
  height: 24px;
  background: var(--primary-100);
  border: 3px solid var(--white);
  outline: 3px solid var(--primary-100);
  border-radius: 50%;
}
.shape .stick {
  width: 1px;
  height: 24px;
  background-color: var(--neutral-300);
  position: relative;
  margin-top: 3px;
}

.shape .stick::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background-color: var(--neutral-300);
  border-radius: 50%;
}

.goal_duration ul li.reverse {
  padding-bottom: 62px;
}

.goal_duration ul li.reverse .shape,
.goal_duration ul li.reverse {
  flex-direction: column-reverse;
}

.goal_duration ul li.reverse .shape {
  margin: 10px 0 0;
}

.goal_duration ul li.reverse .shape .stick {
  margin-top: 0;
  margin-bottom: 3px;
}

.goal_duration ul li.reverse .shape .stick::before {
  bottom: auto;
  top: -6px;
}

.total_goal_wrap {
  background: linear-gradient(
    92.34deg,
    rgba(102, 69, 171, 0.25) 15.73%,
    rgba(71, 91, 232, 0.5) 89.09%
  );
  border: 1px solid var(--neutral-300);
  border-radius: 24px;
  padding: 16px;
}

.total_goal_wrap .title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.total_goal_wrap .title .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 63px;
  height: 63px;
  border-radius: 50%;
  background-color: var(--primary-10);
}

.total_goal_wrap .title .icon i {
  font-size: 28px;
  color: var(--primary);
}

.total_goal_wrap .title h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0;
}

.total_goal_wrap .content p {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 0;
}

.card_border {
  border: 1px solid var(--neutral-300);
}

.exercise_library_left input.form-control {
  border-color: var(--neutral-300);
}

.exercise_list .title {
  padding: 16px 0 20px;
}

.exercise_list .title p {
  color: var(--neutral-400);
  font-size: 14px;
  margin-bottom: 0;
}

.exercise_list_wrap {
  max-height: 600px;
  overflow: auto;
}

.exercise_list_wrap .exercise_list_item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.exercise_list_wrap .exercise_list_item .image {
  width: 50px;
  height: 50px;
}

.exercise_list_wrap .exercise_list_item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--neutral-300);
}

.exercise_list_wrap .exercise_list_item .content {
  width: 1%;
  flex: 1;
}

.exercise_list_wrap .exercise_list_item .content h3 {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.exercise_list_wrap .exercise_list_item .content p {
  font-size: 14px;
  margin: 0;
  color: var(--neutral-600);
}

.exercise_library_right .sub_title h3 {
  font-weight: 600;
}

.right_top_header {
  padding: 18px 16px;
}

.exercise_content_wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.exercise_content_wrap .content p {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.exercise_content_wrap .content p span {
  font-size: 14px;
  color: var(--neutral-400);
}

.exercise_banner img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--neutral-300);
}

.exercise_content_wrap .button .btn {
  border-width: 2px;
  padding: 10px 24px;
}

.exercise_instructions_list .exercise_instructions_list_item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--neutral-300);
}

.exercise_instructions_list .exercise_instructions_list_item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.exercise_instructions_list .exercise_instructions_list_item span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--primary);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.exercise_instructions_list .exercise_instructions_list_item p {
  width: 1%;
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-500);
  margin: 0;
}

.no_attachments_wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.no_attachments_wrap .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  border-radius: 17px;
  background-color: var(--bg);
}

.no_attachments_wrap .icon i {
  color: var(--neutral-500);
}

.no_attachments_wrap .text {
  width: 1%;
  flex: 1;
}

.no_attachments_wrap .text p {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
}

.form-label .text-muted {
  color: var(--neutral-400) !important;
}

.icon_field {
  position: relative;
}

.icon_field .icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--neutral-400);
}

.icon_field .form-control {
  padding-left: 40px;
}

.text-dark {
  color: var(--neutral-900) !important;
}

[data-theme="dark"] .active1 {
  background-color: #2d2f33;
  color: var(--neutral-900);
}

.video_card {
  display: flex;
  gap: 20px;
}

.video_thumbnail {
  position: relative;
  width: 175px;
  height: 185px;
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
}

.video_thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.video_play_icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  color: var(--white);
  font-size: 32px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video_play_icon:hover {
  opacity: 1;
}

.video_info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.video_title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.video_description {
  font-size: 16px;
  color: var(--neutral-600);
  margin: 0;
}

.video_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.meta_item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 10px 16px;
  border: 1px solid var(--neutral-300);
  border-radius: 24px;
}

.meta_item i {
  font-size: 18px;
}

.video_actions {
  display: flex;
  justify-content: end;
  gap: 16px;
  margin-top: auto;
}

.video_actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 35px;
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.video_actions .btn i {
  font-size: 18px;
}

.btn_edit:hover,
.btn_edit {
  background: var(--primary);
  color: #ffffff;
}

.btn_delete:hover,
.btn_delete {
  background: var(--red-200);
  color: #ffffff;
}

.video_player_wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.video_player_wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.preferences_wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.preferences_left {
  width: 1%;
  flex: 1;
}

.preferences_left .content h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.preferences_left .content p {
  font-size: 14px;
  color: var(--neutral-600);
  margin-bottom: 0;
}

.preferences_right {
  width: 435px;
}

.custom_radio h3 {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
}

.custom_radio_wrap {
  background-color: var(--white);
  padding: 14px 16px;
  border-radius: 100px;
  display: flex;
  gap: 16px;
}

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

.custom_radio_wrap .form-check input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  left: 0;
  top: 0;
  margin: 0;
  cursor: pointer;
}

.custom_radio_wrap .form-check label {
  padding: 10px 24px;
  border-radius: 100px;
  border: 1px solid var(--neutral-300);
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: var(--neutral-600);
  font-weight: 500;
}

.custom_radio_wrap .form-check input:checked + label {
  background-color: var(--primary);
  color: #ffffff;
}

.change_plan {
  display: none;
}

.plan_desc .days {
  font-size: 14px;
  margin-bottom: 16px;
}

.plan_desc .amount {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
}

.plan_desc .trial_validation {
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0;
}

.form_btn {
  display: flex;
  align-items: end;
  gap: 24px;
}

.form_btn .form_field {
  flex: 1;
}

.form_btn .button .btn {
  padding: 12px 30px;
}

/* Responsive */

@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 1256px;
  }
}

@media screen and (max-width: 1300px) {
  .grid-col-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 1200px) {
  .grid-col-5 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .page_head .left_content .title h1 {
    font-size: 26px;
  }
  .page_head .right_content .nav-pills .nav-item .nav-link {
    min-width: 135px;
  }
  .page_head .right_content .nav-pills {
    padding: 8px 12px;
    gap: 12px;
  }
  .header_search input {
    width: 300px;
  }
  .body_measurements_wrap {
    flex-direction: column;
  }
  .body_measurements_left {
    width: 100%;
    order: 2;
  }
  .body_measurements_right {
    width: 100%;
    order: 1;
  }
}

@media screen and (max-width: 992px) {
  .login_wrap .col-4,
  .login_wrap .col-8 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .login_wrap .row {
    min-height: 100vh;
  }
  .login_wrap .login_left {
    width: 100%;
    padding: 32px 20px 16px;
    text-align: center;
  }
  .login_wrap .login_left .login_text p {
    font-size: 18px;
  }
  .login_wrap .login_right {
    min-height: calc(100vh - 180px);
    border-radius: 24px 24px 0 0;
    border: 1px solid var(--white-alpha-50);
    padding: 32px 20px;
    align-items: flex-start;
  }
  .login_right_content {
    width: 100%;
    max-width: 440px;
  }
  body {
    font-size: 14px;
  }
  header {
    padding: 30px 0;
  }
  .content_wrap {
    padding: 0 30px 30px;
  }
  .header_search input {
    width: auto;
    min-height: 40px;
  }
  .header_right ul li a {
    width: 40px;
    height: 40px;
  }
  .header_right ul li a i {
    font-size: 18px;
  }
  .header_right ul {
    gap: 10px;
  }
  .header_search {
    margin-left: 30px;
  }
  header .navbar-brand img {
    height: 30px;
  }
  .page_head {
    flex-wrap: wrap;
    gap: 16px;
  }
  .page_head .left_content {
    width: 100%;
  }
  .grid-col-5 {
    grid-template-columns: 1fr 1fr;
  }
  .page_content {
    gap: 30px;
  }

  /* DataTables Responsive */
  .dataTables_wrapper {
    padding: 0;
  }

  .dataTables_length,
  .dataTables_filter {
    padding: 12px 16px;
  }

  .dataTables_filter input {
    min-width: 180px;
  }

  .dataTables_info,
  .dataTables_paginate {
    padding: 12px 16px;
  }

  table.dataTable {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.dataTable thead th,
  table.dataTable tbody td {
    padding: 12px 16px;
    white-space: nowrap;
  }

  .dataTables_paginate .paginate_button {
    min-width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .dataTables_paginate .paginate_button.previous,
  .dataTables_paginate .paginate_button.next {
    padding: 0 12px !important;
  }
  div.dt-container .dt-search input,
  div.dt-container .dt-input {
    height: 40px;
  }
  .advanced_statistics_wrap {
    flex-direction: column;
  }
  .advanced_statistics_wrap .advanced_statistics_left {
    width: 100%;
  }
  .advanced_statistics_wrap .advanced_statistics_right {
    width: 100%;
  }
  .client_head .right_content {
    margin-left: auto;
  }
  .icon_title {
    flex-wrap: wrap;
  }
  .preferences_wrap {
    flex-wrap: wrap;
  }
  .preferences_left {
    width: 100%;
  }
  .preferences_right {
    width: 100%;
  }
}

@media screen and (max-width: 576px) {
  .grid-col-5 {
    grid-template-columns: 1fr;
  }
  .overview_wrap .overview_box .overview_name {
    margin-bottom: 16px;
  }
  .overview_wrap .overview_box .overview_content {
    margin-bottom: 20px;
  }
  .login_wrap .login_left {
    padding: 24px 16px 10px;
  }
  .login_wrap .login_right {
    min-height: auto;
    border-radius: 20px 20px 0 0;
    padding: 24px 16px;
  }
  .login_wrap .login_right .login_right_content .title h3 {
    font-size: 26px;
    color:white;
  }
  .login_right_content input.form-control {
    min-height: 56px;
  }
}