@charset "UTF-8";
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../fonts/woff2/IRANSansWebFaNum.woff2") format("woff2"), url("../fonts/woff2/IRANSansWebFaNum.woff2") format("woff2"), url("../fonts/woff/IRANSansWebFaNum.woff") format("woff"), url("../fonts/woff/IRANSansWebFaNum.woff") format("woff"), url("../fonts/ttf/IRANSansWebFaNum.ttf") format("truetype"), url("../fonts/ttf/IRANSansWebFaNum.ttf") format("truetype");
}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/woff2/IRANSansWebFaNum_Medium.woff2") format("woff2"), url("../fonts/woff2/IRANSansWebFaNum_Medium.woff2") format("woff2"), url("../fonts/woff/IRANSansWebFaNum_Medium.woff") format("woff"), url("../fonts/woff/IRANSansWebFaNum_Medium.woff") format("woff"), url("../fonts/ttf/IRANSansWebFaNum_Medium.ttf") format("truetype"), url("../fonts/ttf/IRANSansWebFaNum_Medium.ttf") format("truetype");
}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url("../fonts/woff2/IRANSansWebFaNum_Bold.woff2") format("woff2"), url("../fonts/woff2/IRANSansWebFaNum_Bold.woff2") format("woff2"), url("../fonts/woff/IRANSansWebFaNum_Bold.woff") format("woff"), url("../fonts/woff/IRANSansWebFaNum_Bold.woff") format("woff"), url("../fonts/ttf/IRANSansWebFaNum_Bold.ttf") format("truetype"), url("../fonts/ttf/IRANSansWebFaNum_Bold.ttf") format("truetype");
}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/woff2/IRANSansWebFaNum_Light.woff2") format("woff2"), url("../fonts/woff2/IRANSansWebFaNum_Light.woff2") format("woff2"), url("../fonts/woff/IRANSansWebFaNum_Light.woff") format("woff"), url("../fonts/woff/IRANSansWebFaNum_Light.woff") format("woff"), url("../fonts/ttf/IRANSansWebFaNum_Light.ttf") format("truetype"), url("../fonts/ttf/IRANSansWebFaNum_Light.ttf") format("truetype");
}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/woff2/IRANSansWebFaNum_UltraLight.woff2") format("woff2"), url("../fonts/woff2/IRANSansWebFaNum_UltraLight.woff2") format("woff2"), url("../fonts/woff/IRANSansWebFaNum_UltraLight.woff") format("woff"), url("../fonts/woff/IRANSansWebFaNum_UltraLight.woff") format("woff"), url("../fonts/ttf/IRANSansWebFaNum_UltraLight.ttf") format("truetype"), url("../fonts/ttf/IRANSansWebFaNum_UltraLight.ttf") format("truetype");
}
/* Mixins Start */
.file-manager-item-options li button,
.file-manager-item-options li a, .file-manager-item-options li.info button,
.file-manager-item-options li.info a, .file-manager-item-options li.danger button,
.file-manager-item-options li.danger a, .file-manager-item-options li.success button,
.file-manager-item-options li.success a, body.dark .file-manager-item-options li.info button,
body.dark .file-manager-item-options li.info a, body.faragard-dark .file-manager-item-options li.info button,
body.faragard-dark .file-manager-item-options li.info a, body.blue-dark .file-manager-item-options li.info button,
body.blue-dark .file-manager-item-options li.info a, body.orange-dark .file-manager-item-options li.info button,
body.orange-dark .file-manager-item-options li.info a, body.fuchsia-dark .file-manager-item-options li.info button,
body.fuchsia-dark .file-manager-item-options li.info a, body.pink-dark .file-manager-item-options li.info button,
body.pink-dark .file-manager-item-options li.info a, body.emerald-dark .file-manager-item-options li.info button,
body.emerald-dark .file-manager-item-options li.info a, body.red-dark .file-manager-item-options li.info button,
body.red-dark .file-manager-item-options li.info a, body.sky-dark .file-manager-item-options li.info button,
body.sky-dark .file-manager-item-options li.info a, body.yellow-dark .file-manager-item-options li.info button,
body.yellow-dark .file-manager-item-options li.info a, body.green-dark .file-manager-item-options li.info button,
body.green-dark .file-manager-item-options li.info a, body.purple-dark .file-manager-item-options li.info button,
body.purple-dark .file-manager-item-options li.info a, body.indigo-dark .file-manager-item-options li.info button,
body.indigo-dark .file-manager-item-options li.info a, body.slate-dark .file-manager-item-options li.info button,
body.slate-dark .file-manager-item-options li.info a, body.yellow-blue-dark .file-manager-item-options li.info button,
body.yellow-blue-dark .file-manager-item-options li.info a, body.dark .file-manager-item-options li.success button,
body.dark .file-manager-item-options li.success a, body.faragard-dark .file-manager-item-options li.success button,
body.faragard-dark .file-manager-item-options li.success a, body.blue-dark .file-manager-item-options li.success button,
body.blue-dark .file-manager-item-options li.success a, body.orange-dark .file-manager-item-options li.success button,
body.orange-dark .file-manager-item-options li.success a, body.fuchsia-dark .file-manager-item-options li.success button,
body.fuchsia-dark .file-manager-item-options li.success a, body.pink-dark .file-manager-item-options li.success button,
body.pink-dark .file-manager-item-options li.success a, body.emerald-dark .file-manager-item-options li.success button,
body.emerald-dark .file-manager-item-options li.success a, body.red-dark .file-manager-item-options li.success button,
body.red-dark .file-manager-item-options li.success a, body.sky-dark .file-manager-item-options li.success button,
body.sky-dark .file-manager-item-options li.success a, body.yellow-dark .file-manager-item-options li.success button,
body.yellow-dark .file-manager-item-options li.success a, body.green-dark .file-manager-item-options li.success button,
body.green-dark .file-manager-item-options li.success a, body.purple-dark .file-manager-item-options li.success button,
body.purple-dark .file-manager-item-options li.success a, body.indigo-dark .file-manager-item-options li.success button,
body.indigo-dark .file-manager-item-options li.success a, body.slate-dark .file-manager-item-options li.success button,
body.slate-dark .file-manager-item-options li.success a, body.yellow-blue-dark .file-manager-item-options li.success button,
body.yellow-blue-dark .file-manager-item-options li.success a, body.dark .file-manager-item-options li.danger button,
body.dark .file-manager-item-options li.danger a, body.faragard-dark .file-manager-item-options li.danger button,
body.faragard-dark .file-manager-item-options li.danger a, body.blue-dark .file-manager-item-options li.danger button,
body.blue-dark .file-manager-item-options li.danger a, body.orange-dark .file-manager-item-options li.danger button,
body.orange-dark .file-manager-item-options li.danger a, body.fuchsia-dark .file-manager-item-options li.danger button,
body.fuchsia-dark .file-manager-item-options li.danger a, body.pink-dark .file-manager-item-options li.danger button,
body.pink-dark .file-manager-item-options li.danger a, body.emerald-dark .file-manager-item-options li.danger button,
body.emerald-dark .file-manager-item-options li.danger a, body.red-dark .file-manager-item-options li.danger button,
body.red-dark .file-manager-item-options li.danger a, body.sky-dark .file-manager-item-options li.danger button,
body.sky-dark .file-manager-item-options li.danger a, body.yellow-dark .file-manager-item-options li.danger button,
body.yellow-dark .file-manager-item-options li.danger a, body.green-dark .file-manager-item-options li.danger button,
body.green-dark .file-manager-item-options li.danger a, body.purple-dark .file-manager-item-options li.danger button,
body.purple-dark .file-manager-item-options li.danger a, body.indigo-dark .file-manager-item-options li.danger button,
body.indigo-dark .file-manager-item-options li.danger a, body.slate-dark .file-manager-item-options li.danger button,
body.slate-dark .file-manager-item-options li.danger a, body.yellow-blue-dark .file-manager-item-options li.danger button,
body.yellow-blue-dark .file-manager-item-options li.danger a, .social-btn, .btn-thirdary, .tooltip-btn, .btn-circle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.picture-box-remove, .slideshow-box-btn, .module-box-btn, header.my-header #notifToggleBtn span {
  display: grid;
  place-items: center;
}

.form-wrapper {
  display: grid;
  grid-gap: 14px;
  align-items: center;
}

/* Mixins End */
:root {
  --ad-height: 250px;
  --ad-width: 300px;
  --ad-small-height: 200px; /* For mobile */
  --ad-small-width: 150px; /* For mobile */
  --sidebar-width: 80px;
  --sidebar-show-width: 250px;
  --my-sidebar-transition: all 400ms cubic-bezier(0.34, -0.04, 0.61, 1.04);
}

body.dark, body.faragard-dark, body.blue-dark, body.orange-dark, body.fuchsia-dark, body.pink-dark, body.emerald-dark, body.red-dark, body.sky-dark, body.yellow-dark, body.green-dark, body.purple-dark, body.indigo-dark, body.slate-dark, body.yellow-blue-dark {
  --scrollbar-bg: rgb(var(--rgb-slate-700));
  --scrollbar-thumb-bg: rgb(var(--rgb-slate-500));
}
body.dark header.my-header, body.faragard-dark header.my-header, body.blue-dark header.my-header, body.orange-dark header.my-header, body.fuchsia-dark header.my-header, body.pink-dark header.my-header, body.emerald-dark header.my-header, body.red-dark header.my-header, body.sky-dark header.my-header, body.yellow-dark header.my-header, body.green-dark header.my-header, body.purple-dark header.my-header, body.indigo-dark header.my-header, body.slate-dark header.my-header, body.yellow-blue-dark header.my-header {
  background-color: rgb(var(--rgb-ninth-lighter)) !important;
}
body.dark .btn-primary, body.faragard-dark .btn-primary, body.blue-dark .btn-primary, body.orange-dark .btn-primary, body.fuchsia-dark .btn-primary, body.pink-dark .btn-primary, body.emerald-dark .btn-primary, body.red-dark .btn-primary, body.sky-dark .btn-primary, body.yellow-dark .btn-primary, body.green-dark .btn-primary, body.purple-dark .btn-primary, body.indigo-dark .btn-primary, body.slate-dark .btn-primary, body.yellow-blue-dark .btn-primary {
  background: rgb(var(--rgb-first));
}
body.dark .btn-primary:hover, body.dark .btn-primary:active, body.dark .btn-primary:focus-visible, body.faragard-dark .btn-primary:hover, body.faragard-dark .btn-primary:active, body.faragard-dark .btn-primary:focus-visible, body.blue-dark .btn-primary:hover, body.blue-dark .btn-primary:active, body.blue-dark .btn-primary:focus-visible, body.orange-dark .btn-primary:hover, body.orange-dark .btn-primary:active, body.orange-dark .btn-primary:focus-visible, body.fuchsia-dark .btn-primary:hover, body.fuchsia-dark .btn-primary:active, body.fuchsia-dark .btn-primary:focus-visible, body.pink-dark .btn-primary:hover, body.pink-dark .btn-primary:active, body.pink-dark .btn-primary:focus-visible, body.emerald-dark .btn-primary:hover, body.emerald-dark .btn-primary:active, body.emerald-dark .btn-primary:focus-visible, body.red-dark .btn-primary:hover, body.red-dark .btn-primary:active, body.red-dark .btn-primary:focus-visible, body.sky-dark .btn-primary:hover, body.sky-dark .btn-primary:active, body.sky-dark .btn-primary:focus-visible, body.yellow-dark .btn-primary:hover, body.yellow-dark .btn-primary:active, body.yellow-dark .btn-primary:focus-visible, body.green-dark .btn-primary:hover, body.green-dark .btn-primary:active, body.green-dark .btn-primary:focus-visible, body.purple-dark .btn-primary:hover, body.purple-dark .btn-primary:active, body.purple-dark .btn-primary:focus-visible, body.indigo-dark .btn-primary:hover, body.indigo-dark .btn-primary:active, body.indigo-dark .btn-primary:focus-visible, body.slate-dark .btn-primary:hover, body.slate-dark .btn-primary:active, body.slate-dark .btn-primary:focus-visible, body.yellow-blue-dark .btn-primary:hover, body.yellow-blue-dark .btn-primary:active, body.yellow-blue-dark .btn-primary:focus-visible {
  background: rgb(var(--rgb-first)) !important;
}

body {
  overflow-y: hidden;
}

.my-body-content {
  display: flex;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
.my-widgets-wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(auto-fit, minmax(164px, 0fr));
  gap: 16px;
  grid-gap: 16px;
  height: 100%;
}

input {
  background-color: rgb(var(--rgb-lightest));
}

input[type=color] {
  border-color: rgb(var(--rgb-light));
}
input[type=color]:focus {
  border-color: rgb(var(--rgb-light)) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: rgb(var(--rgb-darkest));
}

.bg-first {
  fill: rgb(var(--rgb-first));
}

.bg-second {
  fill: rgb(var(--rgb-seventh-lighter));
}

#loading {
  background-image: radial-gradient(circle farthest-corner at center, rgb(var(--rgb-first)) 0%, #1c262b 100%);
}

.form-wrapper {
  grid-template-columns: 2fr 3fr;
}

.form-image-radio > input:checked + label img,
.form-image-radio > input:checked + label svg {
  box-shadow: 0 0 5px rgba(var(--rgb-seventh), 0.5);
}

.radio-text + label {
  background-color: rgb(var(--rgb-ninth-lighter));
  border-color: rgb(var(--rgb-light));
  color: rgb(var(--rgb-light-dark));
}

.radio-text:checked + label {
  background-color: rgb(var(--rgb-seventh)) !important;
  border-color: rgb(var(--rgb-seventh));
  color: rgb(var(--rgb-lightest));
}

.separator {
  background-color: rgb(var(--rgb-light));
}

input[type=text][readonly],
input[type=number][readonly],
input[type=date][readonly],
input[type=email][readonly],
input[type=password][readonly],
input[type=tel][readonly],
input[type=search][readonly],
input[type=url][readonly],
input[type=datetime-local][readonly],
input[type=month][readonly],
input[type=time][readonly],
input[type=week][readonly],
input[type=select-one] select[readonly] {
  border: 2px solid rgb(var(--rgb-light));
}

.form-radio label {
  color: rgb(var(--rgb-light-dark)) !important;
}

.form-radio input[type=radio]:checked + label:before {
  background-color: rgb(var(--rgb-seventh));
}

.form-radio input[type=radio]:checked + .form-radio-label:before {
  background-color: rgb(var(--rgb-seventh));
}

.form-radio input[type=radio] + label:before {
  border-color: rgb(var(--rgb-darkest), 0.2) !important;
}

/* Radio button Start */
.material-switch > label::before {
  background: rgb(var(--rgb-darkest));
  box-shadow: inset 0 0 10px rgba(var(--rgb-darkest), 0.5);
}
.material-switch > label::after {
  background: rgb(var(--rgb-lightest));
  box-shadow: 0 0 5px rgba(var(--rgb-darkest), 0.3);
}

.material-switch > input[type=checkbox]:checked + label::after,
.material-switch > input[type=checkbox]:checked + label::before {
  background-color: rgb(var(--rgb-seventh));
}

/* Radio button End */
.overlay {
  opacity: 0;
  pointer-events: none;
  background: rgba(var(--rgb-darkest), 0.3);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2705;
  transition: all 300ms linear;
}
.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

@media only screen and (min-width: 992px) {
  .overlay {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
.section {
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 0 0 10px 0 rgba(var(--rgb-darkest), 0.06);
}
.section .section-footer {
  background-color: transparent;
}

/* Checkbox svg Start */
.form-checkbox label svg {
  fill: rgb(var(--rgb-seventh)) !important;
}

/* Checkbox svg End */
body.dark nav.side-navbar ul li ul li:hover a, body.faragard-dark nav.side-navbar ul li ul li:hover a, body.blue-dark nav.side-navbar ul li ul li:hover a, body.orange-dark nav.side-navbar ul li ul li:hover a, body.fuchsia-dark nav.side-navbar ul li ul li:hover a, body.pink-dark nav.side-navbar ul li ul li:hover a, body.emerald-dark nav.side-navbar ul li ul li:hover a, body.red-dark nav.side-navbar ul li ul li:hover a, body.sky-dark nav.side-navbar ul li ul li:hover a, body.yellow-dark nav.side-navbar ul li ul li:hover a, body.green-dark nav.side-navbar ul li ul li:hover a, body.purple-dark nav.side-navbar ul li ul li:hover a, body.indigo-dark nav.side-navbar ul li ul li:hover a, body.slate-dark nav.side-navbar ul li ul li:hover a, body.yellow-blue-dark nav.side-navbar ul li ul li:hover a {
  color: rgb(var(--rgb-seventh-darker));
}
body.dark nav.side-navbar ul li ul li ul li:hover a, body.faragard-dark nav.side-navbar ul li ul li ul li:hover a, body.blue-dark nav.side-navbar ul li ul li ul li:hover a, body.orange-dark nav.side-navbar ul li ul li ul li:hover a, body.fuchsia-dark nav.side-navbar ul li ul li ul li:hover a, body.pink-dark nav.side-navbar ul li ul li ul li:hover a, body.emerald-dark nav.side-navbar ul li ul li ul li:hover a, body.red-dark nav.side-navbar ul li ul li ul li:hover a, body.sky-dark nav.side-navbar ul li ul li ul li:hover a, body.yellow-dark nav.side-navbar ul li ul li ul li:hover a, body.green-dark nav.side-navbar ul li ul li ul li:hover a, body.purple-dark nav.side-navbar ul li ul li ul li:hover a, body.indigo-dark nav.side-navbar ul li ul li ul li:hover a, body.slate-dark nav.side-navbar ul li ul li ul li:hover a, body.yellow-blue-dark nav.side-navbar ul li ul li ul li:hover a {
  color: rgb(var(--rgb-seventh-darker)) !important;
}

aside.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(var(--rgb-ninth-lighter));
  flex-shrink: 0;
  flex-grow: 1;
  width: var(--sidebar-width);
  min-height: 100%;
  transition: var(--my-sidebar-transition);
  z-index: 9999;
  overflow: hidden;
}
aside.sidebar:not(.show) .lang-select-dropdown {
  width: auto !important;
}
aside.sidebar:not(.show) .lang-select-text {
  display: none;
}
aside.sidebar .side-footer {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-weight: 600;
  font-size: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  line-height: 24px;
  margin: auto 2px 12px 2px;
  transition: var(--my-sidebar-transition);
  color: rgb(var(--rgb-light-dark));
}
aside.sidebar .user-profile {
  margin: 0;
  width: 100%;
  max-width: 100%;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  transition: var(--my-sidebar-transition);
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: -6px 0 16px 0 rgba(var(--rgb-darkest), 0.05);
  clip-path: inset(0px -15px 0px -15px);
}
aside.sidebar .user-profile-bg {
  width: 100% !important;
  height: auto !important;
  background-color: rgb(var(--rgb-first-dark));
  background-size: cover;
  background-position: top;
  position: absolute;
  top: -4px;
  left: 0;
  z-index: -1;
  opacity: 0;
  padding-bottom: 100%;
  transition: var(--my-sidebar-transition);
}
aside.sidebar .user-profile img,
aside.sidebar .user-profile svg {
  width: 60px;
  height: 60px;
  max-width: 100%;
  object-fit: cover;
  transition: var(--my-sidebar-transition);
}
aside.sidebar .user-profile figcaption {
  display: flex;
  flex-direction: column;
  text-align: center;
  flex-basis: 0;
  color: rgb(var(--rgb-lightest));
  white-space: nowrap;
  transition: var(--my-sidebar-transition);
  overflow: hidden;
  font-size: 0;
}
aside.sidebar nav.side-navbar {
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: -6px 0 16px -16px rgba(var(--rgb-darkest), 0.05);
  width: 100%;
  display: flex;
  justify-content: center;
  height: 100%;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  transition: var(--my-sidebar-transition);
}
aside.sidebar nav.side-navbar::-webkit-scrollbar {
  width: 0;
}
aside.sidebar nav.side-navbar::-webkit-scrollbar-thumb {
  background: transparent;
}
aside.sidebar nav.side-navbar::-webkit-scrollbar-track {
  background: transparent;
}
aside.sidebar nav.side-navbar > ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-height: 100%;
  padding: 8px;
}
aside.sidebar nav.side-navbar > ul > li {
  border-bottom: 1px solid transparent;
  position: relative;
  border-radius: 10px;
}
aside.sidebar nav.side-navbar > ul > li.active {
  background-color: rgb(var(--rgb-first-lighter));
}
aside.sidebar nav.side-navbar > ul > li > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: rgb(var(--rgb-darkest));
  padding: 6px 4px;
  border-radius: 10px;
  white-space: nowrap;
  transition: all 150ms;
}
aside.sidebar nav.side-navbar > ul > li > a img,
aside.sidebar nav.side-navbar > ul > li > a svg {
  width: 46px;
  height: 46px;
  max-width: 100%;
  object-fit: contain;
  padding: 5px;
  transition: all 200ms;
  position: relative;
}
aside.sidebar nav.side-navbar > ul > li > a > span {
  transition: visibility 200ms, opacity 200ms, top 200ms, bottom 200ms;
  z-index: 1000;
  border-radius: 8px;
  padding: 0 4px;
  box-shadow: none;
  max-width: 60px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
aside.sidebar nav.side-navbar > ul > li > a .counter {
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  background-color: rgb(var(--rgb-first));
  color: rgb(var(--rgb-lightest));
  top: 3px;
  left: 3px;
  border-radius: 999px;
  padding: 4px 6px 1px 6px;
  min-width: 20px;
  text-align: center;
}
html[dir=ltr] aside.sidebar nav.side-navbar > ul > li > a .counter {
  right: 3px;
  left: auto;
}

aside.sidebar nav.side-navbar > ul > li > a .counter:empty {
  display: none;
}
aside.sidebar nav.side-navbar > ul > li > a:hover {
  background-color: rgb(var(--rgb-darkest), 0.05);
}
aside.sidebar nav.side-navbar > ul > li:hover > ul {
  right: 80px;
  transition-delay: 100ms;
}
html[dir=ltr] aside.sidebar nav.side-navbar > ul > li:hover > ul {
  left: 80px;
  right: auto;
}

aside.sidebar nav.side-navbar > ul > li > ul {
  position: fixed;
  top: 62px;
  right: -250px;
  width: 250px;
  height: calc(100% - 62px);
  z-index: -1;
  background-color: rgb(var(--rgb-ninth-lighter));
  padding: 12px 6px;
  transition: var(--my-sidebar-transition);
  transition-delay: 150ms;
  overflow-y: auto;
}
@media only screen and (max-width: 767px) {
  aside.sidebar nav.side-navbar > ul > li > ul {
    display: none !important;
  }
}
html[dir=ltr] aside.sidebar nav.side-navbar > ul > li > ul {
  right: auto;
  left: -250px;
}

aside.sidebar nav.side-navbar > ul > li > ul::-webkit-scrollbar {
  width: 8px;
}
aside.sidebar nav.side-navbar > ul > li > ul::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: var(--radius-full);
  cursor: pointer;
}
aside.sidebar nav.side-navbar > ul > li > ul::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: var(--radius-full);
}
aside.sidebar nav.side-navbar > ul > li > ul > li {
  position: relative;
  border-radius: 10px;
  transition: background-color 150ms;
}
aside.sidebar nav.side-navbar > ul > li > ul > li:hover {
  background-color: rgb(var(--rgb-darkest), 0.05);
}
aside.sidebar nav.side-navbar > ul > li > ul > li:hover a {
  color: rgb(var(--rgb-first));
}
aside.sidebar nav.side-navbar > ul > li > ul > li:has(ul).show a::after {
  transform: rotate(-90deg);
}
aside.sidebar nav.side-navbar > ul > li > ul > li:has(ul) > a::after {
  content: "\f053";
  font-family: var(--fa-style-family, "Font Awesome 6 Pro");
  position: absolute;
  top: 10px;
  left: 16px;
  transition: all 200ms;
  font-size: 14px;
}
html[dir=ltr] aside.sidebar nav.side-navbar > ul > li > ul > li:has(ul) > a::after {
  right: 16px;
  left: auto;
}

aside.sidebar nav.side-navbar > ul > li > ul > li a {
  text-align: right;
  align-items: start;
  font-size: 14px;
  padding: 10px 16px;
  display: flex;
  color: rgb(var(--rgb-light-dark));
}
html[dir=ltr] aside.sidebar nav.side-navbar > ul > li > ul > li a {
  text-align: left;
}

aside.sidebar nav.side-navbar > ul > li > ul > li ul {
  display: none;
  padding: 0 24px;
}
aside.sidebar nav.side-navbar > ul > li > ul > li ul li:hover a {
  color: rgb(var(--rgb-first)) !important;
  padding-right: 16px;
}
html[dir=ltr] aside.sidebar nav.side-navbar > ul > li > ul > li ul li:hover a {
  padding-left: 16px;
  padding-right: auto;
}
html[dir=ltr] html[dir=ltr] aside.sidebar nav.side-navbar > ul > li > ul > li ul li:hover a {
  right: 16px;
  left: auto;
}

aside.sidebar nav.side-navbar > ul > li > ul > li ul li a {
  padding-right: 0;
  color: rgb(var(--rgb-light-dark)) !important;
  transition: all 200ms;
  display: flex;
  gap: 8px;
  font-size: 12px;
}
html[dir=ltr] aside.sidebar nav.side-navbar > ul > li > ul > li ul li a {
  padding-left: 0;
  padding-right: auto;
}

aside.sidebar.show {
  width: var(--sidebar-show-width) !important;
  box-shadow: -8px 0 24px 1px rgba(var(--rgb-darkest), 0.1);
}
aside.sidebar.show .user-profile img,
aside.sidebar.show .user-profile svg {
  width: 100px;
  height: 100px;
}
aside.sidebar.show .user-profile figcaption {
  flex-basis: 100%;
  font-size: 16px;
  max-width: 100%;
  padding: 6px 12px 3px 12px;
}
aside.sidebar.show .user-profile-bg {
  opacity: 1;
}
aside.sidebar.show .side-footer {
  font-size: 10px;
  opacity: 1;
  visibility: visible;
}
aside.sidebar.show nav.side-navbar {
  width: 100%;
}
aside.sidebar.show nav.side-navbar ul {
  width: 100%;
}
aside.sidebar.show nav.side-navbar ul li {
  border: none !important;
}
aside.sidebar.show nav.side-navbar ul li:not(:nth-last-of-type(1)) a::before {
  content: "";
  width: calc(100% - 24px);
  height: 0.5px;
  background-color: rgba(var(--rgb-darkest), 0.1);
  position: absolute;
  transform: translateX(-50%);
  bottom: -4.3px;
  left: 50%;
}
aside.sidebar.show nav.side-navbar ul li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
aside.sidebar.show nav.side-navbar ul li a img,
aside.sidebar.show nav.side-navbar ul li a svg {
  width: 40px;
  height: 40px;
}
aside.sidebar.show nav.side-navbar ul li a span {
  max-width: 100%;
  color: rgb(var(--rgb-darkest));
}
aside.sidebar.show nav.side-navbar ul li a .counter {
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}
html[dir=ltr] aside.sidebar.show nav.side-navbar ul li a .counter {
  right: 16px;
  left: auto;
}

aside.sidebar.show nav.side-navbar ul li a:hover {
  display: flex;
}
aside.sidebar.show nav.side-navbar ul li ul {
  display: none;
}

.my-main-container {
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
}

main.my-main {
  /* بدون این، main (آیتمِ flex) از عرضِ محتوایش کوچک‌تر نمی‌شه و با کوچیک شدنِ صفحه سکشن بیرون می‌زنه */
  min-width: 0;
  background-color: rgb(var(--main-bg));
  transition: background-color 200ms;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

header.my-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  height: 62px;
  box-shadow: 0 4px 12px 1px rgba(var(--rgb-darkest), 0.1);
  position: relative;
  background-color: rgb(var(--rgb-first-dark));
  transition: background-color 200ms;
  z-index: 2700;
}
header.my-header .logo-img {
  height: 50px;
  object-fit: cover;
}
header.my-header .tan-header-logo-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
header.my-header .header-btn {
  padding: 12px 16px;
  font-size: 20px;
  flex-shrink: 0;
}
header.my-header .header-btn i {
  color: rgb(var(--rgb-lightest));
}
header.my-header > a {
  min-width: 0;
}
header.my-header #notifToggleBtn {
  position: relative;
}
header.my-header #notifToggleBtn span {
  min-width: 16px;
  width: auto;
  padding: 2px 6px;
  height: 16px;
  font-size: 10px;
  position: absolute;
  top: 4px;
  left: 4px;
  background-color: rgb(var(--rgb-rose-500));
  color: white;
  border-radius: var(--radius-full);
  z-index: 30;
}
html[dir=ltr] header.my-header #notifToggleBtn span {
  right: 4px;
  left: auto;
}

header.my-header #notifToggleBtn span:not(:empty) + i {
  -webkit-animation-name: fa-shake;
  animation-name: fa-shake;
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
  animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, linear);
  animation-timing-function: var(--fa-animation-timing, linear);
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
  animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
  animation-direction: var(--fa-animation-direction, normal);
}
header.my-header #notifToggleBtn span:empty {
  display: none;
}

body:has(.modal-backdrop.show) .my-main-container .my-header {
  z-index: 2500 !important;
}

/* ===================== tan-premium: سوییچ استاندارد به پریمیوم با یک کلاس ===================== */
html header.my-header.tan-premium {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2700 !important;
  height: 96px !important;
  max-height: 96px !important;
  align-items: start !important;
  background-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
html header.my-header.tan-premium body.dark, html header.my-header.tan-premium body.faragard-dark, html header.my-header.tan-premium body.blue-dark, html header.my-header.tan-premium body.orange-dark, html header.my-header.tan-premium body.fuchsia-dark, html header.my-header.tan-premium body.pink-dark, html header.my-header.tan-premium body.emerald-dark, html header.my-header.tan-premium body.red-dark, html header.my-header.tan-premium body.sky-dark, html header.my-header.tan-premium body.yellow-dark, html header.my-header.tan-premium body.green-dark, html header.my-header.tan-premium body.purple-dark, html header.my-header.tan-premium body.indigo-dark, html header.my-header.tan-premium body.slate-dark, html header.my-header.tan-premium body.yellow-blue-dark {
  background-color: transparent !important;
}
html header.my-header.tan-premium.tan-menu-elevation {
  position: fixed !important;
}
html header.my-header.tan-premium:not(.show) {
  height: 0 !important;
  max-height: 0 !important;
}
html header.my-header.tan-premium > * {
  pointer-events: auto !important;
}
html header.my-header.tan-premium .header-btn i {
  color: rgb(var(--rgb-first-dark)) !important;
}

body:has(.tan-premium) main.my-main section.main {
  transition: padding-top 0.3s ease-in-out, padding-right 0.3s ease-in-out, padding-left 0.3s ease-in-out, margin-bottom 0.3s ease-in-out, margin-right 0.3s ease-in-out, margin-left 0.3s ease-in-out !important;
}

html header.my-header.tan-premium.show:not(.tan-menu-elevation) ~ section.main {
  padding: 8px;
  padding-top: 78px !important;
}

.my-header-bg {
  width: 100% !important;
  background-color: rgb(var(--rgb-first-dark));
  position: absolute;
  height: inherit;
  top: 0;
  left: 0;
  z-index: -1;
  transition: var(--my-sidebar-transition);
}

section.main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  flex-grow: 1;
}
section.main::-webkit-scrollbar {
  width: 8px;
}
section.main::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: var(--radius-full);
  cursor: pointer;
}
section.main::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: var(--radius-full);
}

.head-box {
  background: color-mix(in srgb, rgb(var(--rgb-first-lighter)) 95%, rgb(var(--rgb-darkest)));
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.head-box.ltr nav.breadcrumb > ul > li ul {
  right: auto;
  left: -8px !important;
}
html[dir=ltr] .head-box.ltr nav.breadcrumb > ul > li ul {
  left: auto;
  right: 0;
}

.head-box.ltr nav.breadcrumb > ul > li ul li ul {
  left: 100% !important;
  right: auto;
}
html[dir=ltr] .head-box.ltr nav.breadcrumb > ul > li ul li ul {
  left: auto;
  right: 0;
}

.head-box.ltr nav.breadcrumb > ul > li:not(:nth-last-child(1))::after {
  left: auto;
  right: -21px !important;
  transform: translate(-50%, -50%) rotate(180deg);
}
html[dir=ltr] .head-box.ltr nav.breadcrumb > ul > li:not(:nth-last-child(1))::after {
  left: -21px !important;
  right: auto;
}

.head-box nav.breadcrumb {
  margin: 0;
}
.head-box nav.breadcrumb > ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  gap: 26px;
}
.head-box nav.breadcrumb > ul > li {
  position: relative;
  display: flex;
}
.head-box nav.breadcrumb > ul > li > a {
  color: rgb(var(--rgb-darkest));
  font-size: 13px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.head-box nav.breadcrumb > ul > li:not(:nth-last-child(1))::after {
  content: "\f104";
  position: absolute;
  color: rgb(var(--rgb-light-dark));
  font-family: FontAwesome;
  left: -13px;
  font-size: 12px;
  top: 50%;
  transform: translate(-50%, -50%);
}
html[dir=ltr] .head-box nav.breadcrumb > ul > li:not(:nth-last-child(1))::after {
  content: "\f105";
  right: -20px;
  left: auto;
}

.head-box nav.breadcrumb > ul > li:hover ul {
  opacity: 1;
  visibility: visible;
  top: 100%;
}
.head-box nav.breadcrumb > ul > li ul {
  position: absolute;
  top: 50%;
  right: -8px;
  background-color: rgb(var(--rgb-ninth-lighter));
  border: 1px solid rgba(var(--rgb-darkest), 0.1);
  min-width: 180px !important;
  z-index: 100;
  min-height: max-content;
  height: auto !important;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: all 150ms 100ms, top 300ms 150ms, opacity 300ms 150ms;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
html[dir=ltr] .head-box nav.breadcrumb > ul > li ul {
  left: -8px;
  right: auto;
}

.head-box nav.breadcrumb > ul > li ul li {
  border-bottom: 0.7px solid rgba(var(--rgb-darkest), 0.1);
  position: relative;
}
.head-box nav.breadcrumb > ul > li ul li:nth-of-type(1) {
  border-radius: 7px 7px 0 0 !important;
}
.head-box nav.breadcrumb > ul > li ul li:nth-last-of-type(1) {
  border-radius: 0 0 7px 7px !important;
  border-bottom: none;
}
.head-box nav.breadcrumb > ul > li ul li:hover {
  background-color: rgb(var(--rgb-seventh-lighter));
}
.head-box nav.breadcrumb > ul > li ul li:hover > a {
  padding-right: 16px;
}
html[dir=ltr] .head-box nav.breadcrumb > ul > li ul li:hover > a {
  padding-left: 16px;
  padding-right: auto;
}

.head-box nav.breadcrumb > ul > li ul li a {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  font-size: 11px;
  color: rgb(var(--rgb-darkest));
  transition: all 200ms;
}
.head-box nav.breadcrumb > ul > li ul li:hover ul {
  opacity: 1 !important;
  visibility: visible !important;
  top: 0% !important;
}
.head-box nav.breadcrumb > ul > li ul li ul {
  position: absolute;
  right: 100%;
  top: -50% !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
html[dir=ltr] .head-box nav.breadcrumb > ul > li ul li ul {
  left: 100%;
  right: auto;
}

.head-box nav.breadcrumb > ul > li ul li ul li {
  position: relative;
}
.head-box nav.breadcrumb > ul > li ul li ul li ul {
  position: absolute;
  right: 100%;
  top: -50% !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
html[dir=ltr] .head-box nav.breadcrumb > ul > li ul li ul li ul {
  left: 100%;
  right: auto;
}

.module-box {
  max-width: 100%; /* Firefox: -moz-available let these grow to their content inside grids and push the page wider */
  max-width: -webkit-fill-available;
  flex-grow: 0;
  padding: 25px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: rgb(var(--rgb-ninth-lighter));
  border-radius: 12px;
  box-shadow: 0 2px 12px -1px rgba(var(--rgb-darkest), 0.08);
  gap: 12px;
  transition: all 150ms;
  height: 100%;
}
.module-box-controls {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 2px;
  left: 16px;
  align-items: center;
  padding: 3px 0px 0px 3px;
}
html[dir=ltr] .module-box-controls {
  right: 16px;
  left: auto;
}

.module-box-controls.right {
  right: 16px;
  left: auto;
}
html[dir=ltr] .module-box-controls.right {
  left: 16px;
  right: auto;
}
html[dir=ltr] html[dir=ltr] .module-box-controls.right {
  right: 16px;
  left: auto;
}

.module-box > span {
  color: rgb(var(--rgb-light-dark));
  font-weight: 500;
  font-size: 13px;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.module-box > img,
.module-box > svg,
.module-box .swiper-slide > img,
.module-box .swiper-slide > svg,
.module-box > div > img,
.module-box > div > svg {
  width: 85px;
  height: 85px;
  object-fit: cover;
}
.module-box > img.thumbnail,
.module-box > svg.thumbnail,
.module-box .swiper-slide > img.thumbnail,
.module-box .swiper-slide > svg.thumbnail,
.module-box > div > img.thumbnail,
.module-box > div > svg.thumbnail {
  width: 136px;
  height: 100%;
}
.module-box:hover {
  border-color: rgb(var(--rgb-seventh-darker));
  box-shadow: 0 0 3px rgb(var(--rgb-seventh));
}
.module-box-btn {
  font-size: 18px;
  width: 30px;
  height: 30px;
  color: rgb(var(--rgb-seventh));
}
.module-box .swiper-pagination-bullet {
  background-color: rgb(var(--rgb-first-dark), 0.5) !important;
  opacity: 1;
  transition: all 200ms;
  box-shadow: 0 0 0 0 rgba(var(--rgb-first), 0);
}
.module-box .swiper-pagination-bullet-active {
  background-color: rgb(var(--rgb-first-light), 1) !important;
  box-shadow: 0 0 0 2px rgba(var(--rgb-first), 0.6);
}
.module-box .swiper-horizontal > .swiper-pagination-bullets,
.module-box .swiper-pagination-bullets.swiper-pagination-horizontal,
.module-box .swiper-pagination-custom,
.module-box .swiper-pagination-fraction {
  bottom: 0;
}

.slideshow-box {
  max-width: 100%; /* Firefox: -moz-available let these grow to their content inside grids and push the page wider */
  max-width: -webkit-fill-available;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 0 2px 12px -1px rgba(var(--rgb-darkest), 0.08);
  gap: 12px;
  transition: all 150ms;
}
.slideshow-box-btn {
  font-size: 18px;
  width: 30px;
  height: 30px;
  color: rgb(var(--rgb-seventh));
}
.slideshow-box .swiper-pagination-bullet {
  background-color: rgb(var(--rgb-first-dark), 0.5) !important;
  opacity: 1;
  transition: all 200ms;
  box-shadow: 0 0 0 0 rgba(var(--rgb-first), 0);
}
.slideshow-box .swiper-pagination-bullet-active {
  background-color: rgb(var(--rgb-first-light), 1) !important;
  box-shadow: 0 0 0 2px rgba(var(--rgb-first), 0.6);
}
.slideshow-box .swiper-horizontal > .swiper-pagination-bullets,
.slideshow-box .swiper-pagination-bullets.swiper-pagination-horizontal,
.slideshow-box .swiper-pagination-custom,
.slideshow-box .swiper-pagination-fraction {
  bottom: 0;
}

.info-btn {
  color: rgb(var(--rgb-light-dark), 0.7);
}
.info-btn::before {
  content: "\f05a";
  font-family: "FontAwesome";
}

.favorite-btn {
  color: rgb(var(--rgb-light-dark), 0.7);
  place-content: center;
}
.favorite-btn::before {
  content: "\f005";
  font-family: "Font Awesome 5 Pro";
}
.favorite-btn.active::before {
  color: rgb(var(--rgb-seventh));
  content: "\f005" !important;
  font-family: "FontAwesome";
}

.notifications {
  position: absolute;
  top: 98%;
  left: -3px;
  background-color: rgb(var(--rgb-ninth-lighter));
  border-radius: 15px;
  box-shadow: 0 2px 8px 0 rgba(var(--rgb-darkest), 0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 200ms;
  width: 340px;
  min-width: 340px;
  max-width: 92%;
  z-index: 300;
}
html[dir=ltr] .notifications {
  right: 12px;
  left: auto;
}

.notifications::before {
  content: "";
  height: 0;
  width: 0;
  border: 8px solid transparent;
  border-right-color: rgb(var(--rgb-ninth-lighter));
  border-top-color: rgb(var(--rgb-ninth-lighter));
  transform: rotate(-45deg);
  display: block;
  top: -7px;
  left: 20px;
  position: absolute;
  box-shadow: 4px -4px 8px -4px rgba(var(--rgb-darkest), 0.2);
}
html[dir=ltr] .notifications::before {
  right: 20px;
  left: auto;
}

.notifications .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}
.notifications .head h6,
.notifications .head i {
  margin: 0;
  font-size: 16px;
  color: rgb(var(--rgb-darkest));
}
.notifications .head a {
  color: rgb(var(--rgb-seventh));
}
nav.notification-nav {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 400px;
  border-radius: 1rem;
}
nav.notification-nav::-webkit-scrollbar {
  width: 8px;
}
nav.notification-nav::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: 8px;
}
nav.notification-nav::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
}
nav.notification-nav ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
}
nav.notification-nav ul li {
  background-color: color-mix(in srgb, rgb(var(--rgb-ninth-lighter)) 90%, rgb(var(--rgb-lightest)));
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  line-height: 22px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-left: 16px;
  padding-right: 16px;
}
html[dir=ltr] nav.notification-nav ul li {
  right: 16px;
  left: auto;
}

nav.notification-nav ul li:hover {
  background-color: rgba(var(--rgb-darkest), 0.02);
}
nav.notification-nav ul li a,
nav.notification-nav ul li span {
  display: flex;
  padding: 8px 16px 0 0;
  position: relative;
  color: rgb(var(--rgb-darkest));
  font-size: 12px;
}
html[dir=ltr] nav.notification-nav ul li a,
html[dir=ltr] nav.notification-nav ul li span {
  padding: 8px 0 0 16px;
}

nav.notification-nav ul li a::before,
nav.notification-nav ul li span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  position: absolute;
  top: 14px;
  right: 2px;
}
html[dir=ltr] nav.notification-nav ul li a::before,
html[dir=ltr] nav.notification-nav ul li span::before {
  left: 2px;
  right: auto;
}

nav.notification-nav ul li a.lg-dot::before,
nav.notification-nav ul li span.lg-dot::before {
  content: "";
  width: 14px;
  height: 14px;
}
nav.notification-nav ul li a.success::before,
nav.notification-nav ul li span.success::before {
  background-color: rgb(var(--rgb-green-600));
}
nav.notification-nav ul li a.danger::before,
nav.notification-nav ul li span.danger::before {
  background-color: rgb(var(--rgb-red-600));
}
nav.notification-nav ul li a.warning::before,
nav.notification-nav ul li span.warning::before {
  background-color: rgb(var(--rgb-amber-600));
}
nav.notification-nav ul li a.info::before,
nav.notification-nav ul li span.info::before {
  background-color: rgb(var(--rgb-blue-600));
}
nav.notification-nav ul li span {
  color: rgb(var(--rgb-light-dark));
  font-size: 10px;
  margin-bottom: 8px;
  display: block;
}
nav.notification-nav ul li:nth-last-of-type(1) {
  border-bottom: none;
}

.notifications.show {
  top: 109%;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

.li_bg_animation a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgb(var(--rgb-first-darker)) !important;
}
.li_bg_animation a img,
.li_bg_animation a svg {
  width: 35px;
  height: 35px;
  border-radius: 8px;
}
.li_bg_animation:hover {
  background-color: rgb(var(--rgb-first-lighter));
  transform: translateX(-20px);
}

.form-control::placeholder {
  color: rgb(var(--rgb-light-dark));
}

.btn-generate {
  border-color: rgb(var(--rgb-seventh));
  background-color: rgb(var(--rgb-seventh));
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.btn-generate:hover, .btn-generate:active, .btn-generate:focus-visible {
  background: rgb(var(--rgb-seventh-dark)) !important;
  box-shadow: 0 0 4px 1px rgba(var(--rgb-darkest), 0.4) !important;
}

.btn-fetch {
  background-color: rgb(var(--rgb-first));
}
.btn-fetch:hover, .btn-fetch:active, .btn-fetch:focus-visible {
  background-color: color-mix(in srgb, rgb(var(--rgb-first)) 90%, rgb(var(--rgb-lightest))) !important;
  color: rgb(var(--rgb-lightest)) !important;
}
.btn-fetch.is-loading-fetch::before {
  border-color: rgb(var(--rgb-first-dark));
}

.btn-circle {
  background-color: rgb(var(--rgb-seventh-dark));
  width: 30px;
  height: 30px;
}
.btn-circle:hover, .btn-circle:active, .btn-circle:focus-visible {
  color: rgb(var(--rgb-lightest)) !important;
  background-color: rgb(var(--rgb-seventh)) !important;
}

.form-label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: rgb(var(--rgb-light-dark));
}
.form-label span[required|=true]::after, .form-label span[required]:not([required|=false])::after {
  content: "*";
  color: red;
  background: transparent;
  padding-right: 4px;
}
html[dir=ltr] .form-label span[required|=true]::after, html[dir=ltr] .form-label span[required]:not([required|=false])::after {
  padding-left: 4px;
  padding-right: 0;
}

.label-img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

/* Number Taif */
.scale li label {
  border-radius: 0;
  width: 100%;
  height: 100%;
  border-right: 0;
  font-size: 16px;
  text-align: center;
  line-height: 39px;
}

.range-number,
.range-number:focus {
  background-color: transparent;
}

.scale {
  margin: 20px 0 0 0;
}

.scale,
.rating {
  width: 100%;
  height: 100px;
  margin-top: 30px;
}

.scale > div {
  width: 100%;
}

.scale-numbers {
  margin: 10px 0 0 0;
  height: 50px;
}
.scale-numbers > div {
  border: 1px solid rgb(var(--rgb-light));
}
.scale-numbers ul {
  padding-left: 0;
}

.scale ul {
  border: 1px solid rgb(var(--rgb-light));
  border-radius: 6px;
}

.scale li,
.rating li {
  display: flex;
  list-style: none;
  height: 100%;
  float: inline-start;
  flex-grow: 1;
}

.theme-white .range-number,
.range-number:focus {
  color: rgb(var(--rgb-darkest)) !important;
  border-color: rgb(var(--rgb-darkest));
  border-right-color: rgb(var(--rgb-light-dark));
}

.taif-number {
  transition: all 150ms;
  background-color: rgb(var(--rgb-ninth-lighter)) !important;
  color: rgb(var(--rgb-darkest)) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgb(var(--rgb-light)) !important;
}

.scale li:first-child label {
  border-radius: 6px 0 0 6px;
}

.scale li:last-child label {
  border-radius: 0 6px 6px 0;
}

.scale li > label {
  border: 3px solid transparent !important;
}

.scale li > label:hover {
  cursor: pointer;
  border-color: rgb(var(--rgb-first)) !important;
  color: rgb(var(--rgb-darkest)) !important;
}

.scale-left-border {
  left: 5% !important;
  max-height: 15px !important;
}

.relative {
  position: relative;
}

.question-val:checked + label {
  background-color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

/* Number taif end */
.scale .opinion-scale-label .label-item {
  color: rgb(var(--rgb-darkest)) !important;
}
.scale .opinion-scale-label .label-item:nth-child(2) span {
  top: -4px;
}
.scale .opinion-scale-label .label-item span {
  background-color: rgb(var(--rgb-darkest)) !important;
  width: 1px;
  height: 10px;
  display: block;
  position: absolute;
  right: 50%;
  top: -14px;
}
html[dir=ltr] .scale .opinion-scale-label .label-item span {
  left: 50%;
  right: 0;
}

.spectrum_slider .opinion-scale-label .label-item {
  color: rgb(var(--rgb-darkest)) !important;
}
.spectrum_slider .opinion-scale-label .label-item span {
  color: rgb(var(--rgb-darkest)) !important;
}

datalist option {
  color: rgb(var(--rgb-darkest)) !important;
}

.tooltip-btn.password-btn {
  position: absolute;
  top: 8px;
  left: 75px;
  border: none;
}

.tooltip-btn.password-btn > i {
  font-size: 18px;
}

.tooltip-btn {
  width: 26px;
  height: 26px;
  position: relative;
  border: 1px solid rgb(var(--rgb-seventh));
  color: rgb(var(--rgb-seventh));
  border-radius: var(--radius-full);
  display: inline-flex;
}
.tooltip-btn:hover span, .tooltip-btn:active span {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  bottom: 60%;
}
.tooltip-btn span {
  position: absolute;
  bottom: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(var(--rgb-seventh));
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  font-size: 10px;
  transition: all 150ms;
  z-index: 50;
}
.tooltip-btn span::before {
  content: "";
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-right-color: rgb(var(--rgb-seventh));
  border-bottom-color: rgb(var(--rgb-seventh));
  display: flex;
  position: absolute;
  bottom: -7px;
  left: 47%;
  transform: rotate(45deg) translate(-50%, -50%);
}
.tooltip-btn-danger {
  border: 1px solid rgb(var(--rgb-red-400));
  color: rgb(var(--rgb-red-400));
}
.tooltip-btn-danger span {
  background: rgb(var(--rgb-red-400));
}
.tooltip-btn-danger span::before {
  border-right-color: rgb(var(--rgb-red-400));
  border-bottom-color: rgb(var(--rgb-red-400));
}
.tooltip-btn-success {
  border: 1px solid rgb(var(--rgb-green-400));
  color: rgb(var(--rgb-green-400));
}
.tooltip-btn-success span {
  background: rgb(var(--rgb-green-400));
}
.tooltip-btn-success span::before {
  border-right-color: rgb(var(--rgb-green-400));
  border-bottom-color: rgb(var(--rgb-green-400));
}
.tooltip-btn-info {
  border: 1px solid rgb(var(--rgb-blue-400));
  color: rgb(var(--rgb-blue-400));
}
.tooltip-btn-info span {
  background: rgb(var(--rgb-blue-400));
}
.tooltip-btn-info span::before {
  border-right-color: rgb(var(--rgb-blue-400));
  border-bottom-color: rgb(var(--rgb-blue-400));
}

@media only screen and (min-width: 767px) {
  aside.sidebar nav.side-navbar ul li a img,
  aside.sidebar nav.side-navbar ul li a svg {
    width: 40px;
    height: 40px;
    padding: 4px;
  }
}
@media only screen and (max-width: 767px) {
  aside.sidebar {
    position: absolute;
    max-height: 100%;
    left: 100%;
    width: 300px;
  }
  html[dir=ltr] aside.sidebar {
    right: 100%;
    left: auto;
  }
  aside.sidebar.show {
    transform: translateX(-100%);
  }
  html[dir=ltr] aside.sidebar.show {
    transform: translateX(100%);
  }
  aside.sidebar .user-profile img,
  aside.sidebar .user-profile svg {
    width: 100px;
    height: 100px;
  }
  aside.sidebar .user-profile figcaption {
    flex-basis: 100%;
    font-size: 16px;
  }
  aside.sidebar .user-profile-bg {
    opacity: 1;
    transition: var(--my-sidebar-transition);
  }
  aside.sidebar nav.side-navbar ul li a {
    flex-direction: row !important;
  }
  aside.sidebar nav.side-navbar ul li a span {
    max-width: 100%;
    color: rgb(var(--rgb-darkest));
  }
  aside.sidebar nav.side-navbar ul li a .counter {
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
  }
  html[dir=ltr] aside.sidebar nav.side-navbar ul li a .counter {
    right: 16px;
    left: auto;
  }
}
.file-drop-area,
.single-file-preview {
  background-color: rgb(var(--rgb-lighter));
  color: rgb(var(--rgb-darkest));
  border-color: rgb(var(--rgb-light));
}

.file-drop-area.is-active {
  background-color: rgb(var(--rgb-first-lighter));
}

@media (max-width: 767px) {
  .file-drop-area {
    height: auto !important;
    gap: 8px !important;
    flex-direction: column;
  }
}
/* button */
.upload_file_button {
  background-color: #c0c2c5;
  width: 100px;
  height: 35px;
}

.upload_file_button:hover {
  transform: scale(1.2);
}

.upload_file_button > i {
  font-size: 14px;
}

/* Clock Picker Start */
.clock-timepicker {
  width: 100% !important;
}
.clock-timepicker-hour-canvas {
  direction: ltr !important;
}
.clock-timepicker-minute-canvas {
  direction: ltr !important;
}

/* Clock Picker Start */
/*Clock picker End */
/* File List Item Start */
.picture-box {
  width: 75px;
  height: 60px;
  border-radius: 8px;
  border: 1px solid gray;
  position: relative;
  padding: 4px;
  box-shadow: 0 0 12px 0 rgba(var(--rgb-darkest), 0.2);
  cursor: pointer;
}
.picture-box figure {
  width: 100%;
  height: 100%;
}
.picture-box figure img,
.picture-box figure svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.picture-box-remove {
  width: 18px;
  height: 18px;
  border-radius: 18px;
  position: absolute;
  top: -6px;
  left: -6px;
  background-color: rgb(var(--rgb-red-500));
  padding: 0;
}
html[dir=ltr] .picture-box-remove {
  right: -6px;
  left: auto;
}

.picture-box-remove i {
  font-size: 10px;
  color: rgb(var(--rgb-lightest));
}

/* File List Item End */
/* Bootstrap Classes color */
.alert-primary {
  --bs-alert-color: rgb(var(--rgb-first-darker));
  --bs-alert-bg: rgb(var(--rgb-first-lighter));
  --bs-alert-border-color: rgb(var(--rgb-first-dark));
  --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

.form-group {
  border-color: rgb(var(--rgb-light)) !important;
}

.btn-close {
  box-shadow: 0 0 0 0 transparent;
  transition: all 200ms;
}
.btn-close:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--rgb-first), 0.1);
  opacity: var(--bs-btn-close-focus-opacity);
}

.btn-primary,
.btn-primary:disabled {
  background: rgb(var(--rgb-first)) !important;
  color: rgb(var(--rgb-lightest)) !important;
  --bs-btn-border-color: rgb(var(--rgb-first)) !important;
  box-shadow: inset 0 1px 0 rgba(var(--rgb-lightest), 0.15), 1px 1px 1px rgba(var(--rgb-darkest), 0.075);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus-visible,
.btn-primary:disabled:hover,
.btn-primary:disabled:active,
.btn-primary:disabled:focus-visible {
  background: rgb(var(--rgb-first)) !important;
  box-shadow: 0 0 4px 1px rgba(var(--rgb-darkest), 0.4) !important;
}

.btn-thirdary {
  font-weight: normal;
  background: rgb(var(--rgb-seventh));
  --bs-btn-color: rgb(var(--rgb-lightest));
  --bs-btn-bg: rgb(var(--rgb-seventh));
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: rgb(var(--rgb-lightest));
  --bs-btn-hover-bg: rgb(var(--rgb-seventh));
  --bs-btn-hover-border-color: rgb(var(--rgb-seventh));
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: rgb(var(--rgb-lightest));
  --bs-btn-active-bg: rgb(var(--rgb-seventh));
  --bs-btn-active-border-color: rgb(var(--rgb-lightest));
  --bs-btn-disabled-color: rgb(var(--rgb-lightest));
  --bs-btn-disabled-bg: rgb(var(--rgb-seventh));
  --bs-btn-disabled-border-color: rgb(var(--rgb-seventh));
  min-width: 38px;
  height: 38px;
  transition: all 200ms;
  font-size: 16px;
}
.btn-thirdary:hover {
  transform: scale(1.1);
}

.btn-more {
  background: transparent;
  border: 1px solid rgb(var(--rgb-light));
  color: rgb(var(--rgb-light-dark));
  border-radius: var(--radius-full);
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-more:hover, .btn-more:active, .btn-more:focus-visible {
  background: transparent;
  border-color: rgb(var(--rgb-light-dark)) !important;
  color: rgb(var(--rgb-light-dark)) !important;
}

.btn-forth,
.btn-forth .btn-forth:disabled {
  padding: 6px 18px;
  background: rgb(var(--rgb-third-dark)) !important;
  color: rgb(var(--rgb-lightest)) !important;
  height: 40px;
}
.btn-forth:hover, .btn-forth:active, .btn-forth:focus-visible {
  box-shadow: none !important;
  background: rgb(var(--rgb-third-darker)) !important;
}

.form-control:focus {
  color: rgb(var(--rgb-darkest));
  background-color: rgb(var(--rgb-ninth-lighter));
  border-color: rgb(var(--rgb-first-darker));
  outline: none !important;
  box-shadow: 0 1px 15px rgba(var(--rgb-darkest), 0.04), 0 1px 6px rgba(var(--rgb-darkest), 0.04) !important;
}

/* I should can change btn close icon color */
.images_item {
  border-color: rgb(var(--rgb-light)) !important;
  width: 150px;
  min-height: 150px;
  display: flex;
}

.images_item.form-gallery-item {
  min-height: 0;
}
.images_item.form-gallery-item > img {
  height: auto !important;
  border-radius: var(--radius-md);
}

/* Password Field Start */
.password-strength-group .password-strength-meter .meter-block {
  background-color: rgb(var(--rgb-light));
}

.password-strength-group .password-strength-message .message-item {
  color: rgb(var(--rgb-light-dark));
}

.show_password_icon i {
  color: rgb(var(--rgb-darkest));
}

/* Password field End */
/* Charge Styles Start */
input.price_input[type=radio]:checked + .price_button {
  color: rgb(var(--rgb-lightest));
  background-color: rgb(var(--rgb-seventh-dark)) !important;
}

.price_button {
  width: 100%;
  height: 3.3em;
  line-height: 2.3rem;
  border-radius: 0.35em;
  background-color: rgb(var(--rgb-seventh-lighter));
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  margin: auto;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  color: rgb(var(--rgb-seventh-darker));
  transition: background-color 0.3s;
}

.price_input {
  display: none;
}

.result_price {
  width: 100%;
  height: 3.5em;
  border: 0;
  border-radius: 0.35em;
  position: relative;
  align-content: center;
}
.result_price input {
  width: 100%;
  height: 100% !important;
  color: rgb(var(--rgb-light-dark));
  background-color: rgb(var(--rgb-seventh-lighter));
  border-radius: 0.35em !important;
  border: 0px !important;
}
.result_price input:focus {
  box-shadow: none !important;
}
.result_price button {
  position: absolute;
  width: 32px;
  height: 32px;
  background-color: rgb(var(--rgb-ninth-lighter));
  border: 0;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  transform: translateY(-50%);
}
.result_price button.plus {
  right: 5%;
}
html[dir=ltr] .result_price button.plus {
  left: 5%;
  right: auto;
}

.result_price button.mines {
  left: 5%;
}
html[dir=ltr] .result_price button.mines {
  right: 5%;
  left: auto;
}

.result_price button i {
  font-size: 13px;
  margin: auto;
  font-weight: 900;
  color: rgb(var(--rgb-seventh-darker));
}

/* Charge Styles End */
/* Wallet Transaction Card Start */
.wallet-transaction-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: rgb(var(--main-bg));
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 12px;
  color: rgb(var(--rgb-light-dark));
  border: 1px solid rgb(var(--rgb-light));
}
.wallet-transaction-card .transaction-prices {
  font-weight: 600;
  background-color: rgb(var(--rgb-ninth-lighter));
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 12px;
}
.wallet-transaction-card .transaction-prices span {
  width: 100%;
  flex-grow: 1;
}

/* Wallet Transaction Card End */
/* TV Channel Start */
.channel {
  background-color: rgb(var(--rgb-first-lighter));
  border: 2px solid rgb(var(--rgb-first-lighter));
  border-radius: 8px;
  overflow: hidden;
  display: block;
}
.channel-title {
  color: rgb(var(--rgb-first-darker));
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}
.channel-view {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.channel-view:hover > button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.channel-view > button {
  transition: all 200ms;
  position: absolute;
  bottom: 12px;
  left: 12px;
}
html[dir=ltr] .channel-view > button {
  right: 12px;
  left: auto;
}

.channel-view > img,
.channel-view > svg {
  width: 100%;
  max-width: 100%;
  height: 180px;
  object-fit: cover;
}

.img-box {
  width: 100%;
  max-height: 60vh;
}
.img-box img,
.img-box svg {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
}

/* TV Channel End */
/* Qr code Start */
.qrcode-box {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(var(--rgb-light));
  border-radius: 8px;
  padding: 16px 32px;
}
.qrcode-box-barcode canvas {
  max-width: 100%;
  min-width: 100%;
  max-height: 100%;
  min-height: 100%;
}

/* Qr code End */
/* Select drop down input Styles Start */
.dropdown .select:focus {
  color: rgb(var(--rgb-darkest)) !important;
  background-color: rgb(var(--rgb-lightest));
  border-color: rgb(var(--rgb-first-darker)) !important;
}
.dropdown .dropdown-menu {
  background-color: rgb(var(--rgb-ninth-lighter)) !important;
}
.dropdown .dropdown-menu li {
  color: rgb(var(--rgb-darkest));
}
.dropdown .dropdown-menu li:not(:nth-last-child(1)) {
  border-bottom-color: rgb(var(--rgb-light));
}
.dropdown .dropdown-menu li[data-selected|=true] {
  background-color: rgb(var(--rgb-darkest), 0.05);
}
.dropdown .dropdown-menu {
  border-color: rgb(var(--rgb-light)) !important;
  box-shadow: 0 3px 4px rgb(var(--rgb-darkest), 0.05);
}
.dropdown .dropdown-menu li:hover {
  background-color: rgb(var(--rgb-darkest), 0.05);
}
.dropdown .dropdown-menu li:active {
  background-color: rgb(var(--rgb-darkest), 0.05);
}

/* Select drop down input Styles End */
/* Pagination Start */
.pagination ul li a,
.pagination ul li button {
  background-color: transparent;
  color: rgb(var(--rgb-first)) !important;
}
.pagination ul li a:hover,
.pagination ul li button:hover {
  color: rgb(var(--rgb-lightest));
  box-shadow: none !important;
}
.pagination ul li.active a,
.pagination ul li.active button {
  background-color: rgb(var(--rgb-first-light));
  color: rgb(var(--rgb-lightest)) !important;
}
.pagination ul li.active:hover {
  color: rgb(var(--rgb-lightest)) !important;
  box-shadow: none !important;
}
.pagination ul li.light a,
.pagination ul li.light button {
  background-color: transparent;
  color: rgb(var(--rgb-first)) !important;
}
.pagination ul li.light a:hover,
.pagination ul li.light button:hover {
  box-shadow: none !important;
  color: rgb(var(--rgb-first)) !important;
}
.pagination ul li.light:hover {
  box-shadow: none !important;
  color: rgb(var(--rgb-first)) !important;
}
.pagination ul li.light.active a,
.pagination ul li.light.active button {
  background-color: transparent;
  color: rgb(var(--rgb-first)) !important;
}
.pagination ul li.light.active a:hover,
.pagination ul li.light.active button:hover {
  color: rgb(var(--rgb-lightest)) !important;
  box-shadow: none !important;
}

/* Pagination End */
/* Like Dislike Styles Start */
.like-dislike-form label i {
  color: rgb(var(--rgb-dark));
}

/* Like Dislike Styles End */
/* Video playlist Start */
.main-video-container {
  flex: 1 1 700px;
  max-height: 250px;
  border-radius: 0 5px 5px 0;
  background-color: rgb(var(--rgb-ninth-lighter));
  padding: 15px 0;
}
.main-video-container .main-video {
  margin-bottom: 7px;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  max-height: 230px;
}
.main-video-container .main-vid-title {
  font-size: 20px;
  color: #444;
}

.video-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 350px;
  height: 250px;
  overflow-y: scroll;
  border-radius: 5px 0 0 5px;
  background-color: rgb(var(--rgb-ninth-lighter));
  padding: 0 15px;
}
.video-list-container::-webkit-scrollbar {
  width: 6px;
}
.video-list-container::-webkit-scrollbar-track {
  background-color: var(--scrollbar-bg);
  border-radius: 5px;
}
.video-list-container::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-bg);
  border-radius: 5px;
}
.video-list-container .list {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  flex-direction: column;
  background-color: rgb(var(--rgb-first-lighter));
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 10px;
}
.video-list-container .list video {
  height: 110px;
  width: 100%;
  max-width: 100%;
}
.video-list-container .list:last-child {
  margin-bottom: 0;
}
.video-list-container .list.active {
  background-color: rgb(var(--rgb-first-light));
}
.video-list-container .list.active .list-title {
  color: rgb(var(--rgb-lightest));
}
.video-list-container .list .list-video {
  width: 180px;
  border-radius: 5px;
}
.video-list-container .list .list-title {
  font-size: 12px;
  color: rgb(var(--rgb-light-dark));
}

@media (max-width: 1200px) {
  .container {
    margin: 0;
  }
}
@media only screen and (max-width: 767px) {
  .video-list-container {
    flex-direction: row !important;
    height: fit-content;
    flex-basis: initial;
    overflow-y: hidden;
    overflow-x: auto;
  }
  .video-list-container .list {
    height: fit-content;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .video-list-container .list .list-video {
    height: 84px !important;
  }
}
@media (max-width: 575px) {
  .main-video-container .main-vid-title {
    font-size: 15px;
    text-align: center;
  }
  .main-video-container .list {
    flex-flow: column;
    gap: 10px;
  }
  .main-video-container .list .list-video {
    width: 100%;
  }
  .main-video-container .list .list-title {
    font-size: 15px;
    text-align: center;
  }
}
/* Video playlist End */
/* Audio player start */
.voice_timer {
  display: none !important;
}
.voice_timer.active {
  display: flex !important;
}

.voice_button {
  width: 60px;
  height: 60px;
  padding: 4px;
  background: rgb(var(--rgb-seventh-lighter));
}
.voice_button > div {
  background-color: rgb(var(--rgb-seventh));
}
.voice_button.recording {
  animation: crescendo 0.4s alternate infinite ease-in;
}

@keyframes crescendo {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}
/* Audio player end */
/* Map styles start */
.map_search_live {
  width: 320px;
  max-width: 96%;
  height: 40px;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  position: absolute;
  border-radius: 0.5rem;
}

.location_internal_box {
  position: absolute;
  width: 320px;
  min-height: 30px;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 96%;
  z-index: 401;
  text-align: center;
}
.location_internal_box > span {
  min-height: 30px;
}
@media only screen and (max-width: 767px) {
  .location_internal_box {
    display: none;
  }
}

.location_button {
  z-index: 401;
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background-color: rgb(var(--rgb-first));
  color: rgb(var(--rgb-lightest));
  border: 1px solid rgb(var(--rgb-first));
  box-shadow: 0 0 0 4px rgba(var(--rgb-first), 0.5), 0 0 8px 0 rgba(var(--rgb-darkest), 0.1);
  outline: 0;
  border: 0;
}
html[dir=ltr] .location_button {
  left: 20px;
  right: 0;
}

.location_button::before {
  content: "\f601";
  color: rgb(var(--rgb-lightest));
  font-family: "Font Awesome 6 Pro";
  font-size: 15px;
}
.location_button.locate-loader::before {
  content: "" !important;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M304 48a48 48 0 1 1-96 0 48 48 0 0 1 96 0zm-48 368a48 48 0 1 0 0 96 48 48 0 0 0 0-96zm208-208a48 48 0 1 0 0 96 48 48 0 0 0 0-96zM96 256a48 48 0 1 0-96 0 48 48 0 0 0 96 0zm13 99a48 48 0 1 0 0 96 48 48 0 0 0 0-96zm294 0a48 48 0 1 0 0 96 48 48 0 0 0 0-96zM109 61a48 48 0 1 0 0 96 48 48 0 0 0 0-96z"/></svg>') !important;
  width: 15px;
  height: 15px;
  animation: locate-spin 2s linear infinite;
}
.location_button:active, .location_button:hover {
  background-color: rgb(var(--rgb-first));
  color: rgb(var(--rgb-lightest));
  box-shadow: 0 0 0 6px rgba(var(--rgb-first), 0.5), 0 0 8px 0 rgba(var(--rgb-darkest), 0.1);
}

.location-btn-second {
  z-index: 401;
  position: absolute;
  bottom: 20px;
  right: 64px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(var(--rgb-third));
  color: rgb(var(--rgb-lightest));
  border: none;
  outline: none;
  font-size: 16px;
  box-shadow: 0 0 0 4px rgba(var(--rgb-third), 0.5), 0 0 8px 0 rgba(var(--rgb-darkest), 0.1);
  transition: all 200ms;
}
html[dir=ltr] .location-btn-second {
  left: 64px;
  right: 0;
}

.location-btn-second:hover, .location-btn-second:active {
  background-color: rgb(var(--rgb-third));
  color: rgb(var(--rgb-lightest));
  box-shadow: 0 0 0 6px rgba(var(--rgb-third), 0.5), 0 0 8px 0 rgba(var(--rgb-darkest), 0.1);
}

@keyframes locate-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.center-icon-map {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 401;
}

/* Map styles end */
/* Archive modal start */
.archive-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
}
@media only screen and (min-width: 575px) {
  .archive-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 767px) {
  .archive-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 992px) {
  .archive-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (min-width: 1200px) {
  .archive-wrapper {
    grid-template-columns: repeat(5, 1fr);
  }
}
.archive-wrapper figure {
  margin: 0;
  border-radius: 0.75rem;
  overflow: hidden;
}
.archive-wrapper figure:hover img,
.archive-wrapper figure:hover svg {
  transform: scale(1.1);
}
.archive-wrapper figure img,
.archive-wrapper figure svg {
  width: 100%;
  height: 100%;
  transition: all 200ms linear;
}

/* Archive modal end */
/* Signature Styles start */
.signpad-wrapper {
  height: 300px;
  border-radius: 8px;
  border: 1px solid rgb(var(--rgb-light));
}
.signpad-wrapper > canvas {
  width: 100%;
  height: 100%;
  border-radius: 8px !important;
}

/* Signature Styles end */
/* Read more styles start */
.section-more {
  position: relative;
  transition: all 400ms;
  padding-bottom: 40px;
  display: grid;
  grid-template-rows: 0fr;
}
.section-more .section-more-content {
  overflow: hidden;
  min-height: 370px;
}
.section-more .btn-more span::after {
  content: "ادامه مطلب";
}
.section-more.show {
  grid-template-rows: 1fr;
}
.section-more.show .section-more-footer {
  padding-top: 10px;
  background: linear-gradient(0deg, rgba(var(--rgb-ninth-lighter), 1) 0%, rgba(var(--rgb-ninth-lighter), 0) 100%) !important;
  transition: background 400ms;
}
.section-more.show .section-more-footer .btn-more span::after {
  content: "بستن";
}
.section-more.show .section-more-footer .btn-more i {
  transform: rotate(180deg);
}
.section-more .section-more-footer {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  padding-top: 60px;
  background: linear-gradient(0deg, rgba(var(--rgb-ninth-lighter), 1) 40%, rgba(var(--rgb-ninth-lighter), 0) 100%);
  transition: background 400ms;
}
html[dir=ltr] .section-more .section-more-footer {
  left: 0;
  right: 0;
}

/* Read more styles end */
.link-img-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgb(var(--rgb-first-lighter));
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  color: rgb(var(--rgb-darkest));
  transition: all 200ms !important;
}
.link-img-box:hover, .link-img-box.active {
  background-color: rgb(var(--rgb-first-lighter));
}
.link-img-box img,
.link-img-box svg {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
}

.sanse-wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 16px;
  gap: 16px;
}
@media only screen and (min-width: 767px) {
  .sanse-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 1200px) {
  .sanse-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ticket-link {
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgb(var(--rgb-light));
  border-radius: var(--radius-lg);
  color: rgb(var(--rgb-darkest));
  font-size: 14px;
}
.ticket-link:hover {
  box-shadow: 1px 1px 2px 0 rgba(var(--rgb-darkest), 0.1);
}

/* ticket */
.my-ticket-main-content {
  padding-bottom: 200px !important;
}

.ticket-cover {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
}
html[dir=ltr] .ticket-cover {
  left: 0;
  right: 0;
}

.ticket-cover-img {
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
  background-size: 150%;
  background-position: center center;
  position: absolute;
  left: -15px;
  right: -15px;
  height: calc(100% + 30px);
  overflow: hidden;
  top: -15px;
  bottom: -15px;
  width: calc(100% + 30px);
}
html[dir=ltr] .ticket-cover-img {
  left: -15px;
  right: 0;
}

.ticket-cover::after {
  content: "";
  position: absolute;
  left: auto;
  right: auto;
  height: 100%;
  top: 0;
  bottom: 0;
  width: 100%;
  background: #000;
  opacity: 0.5;
  margin: 0;
}
html[dir=ltr] .ticket-cover::after {
  left: auto;
  right: 0;
}

.ticket-sticky-wrapper {
  position: sticky;
  top: 16px;
  z-index: 50;
}

.alert {
  padding: 14px 16px;
  font-size: 14px;
}

.alert-info {
  background-color: rgb(var(--rgb-third-dark));
  border-color: rgb(var(--rgb-third-darker));
}

.ticket-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
}
@media only screen and (min-width: 767px) {
  .ticket-wrapper {
    min-height: 280px;
  }
}

.ticket-preview {
  padding: 16px;
  display: flex;
  position: relative;
  object-fit: cover;
  gap: 16px;
}
.ticket-preview-img {
  width: 100%;
  max-width: 100%;
  height: 210px;
  border-radius: 8px;
  object-fit: cover;
}
@media only screen and (min-width: 767px) {
  .ticket-preview-img {
    width: calc(100% - 3rem);
    position: absolute;
  }
}
.ticket-preview-content {
  width: 100%;
}
.ticket-preview-content-details {
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: rgb(var(--rgb-lightest));
}
.ticket-preview-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
.ticket-preview-gallery img,
.ticket-preview-gallery svg {
  max-width: 100%;
  width: 100%;
  height: 220px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
}
@media only screen and (min-width: 767px) {
  .ticket-preview-gallery img,
  .ticket-preview-gallery svg {
    width: 90%;
    height: 110px;
  }
}

.ticket-cart-item {
  display: flex;
  gap: 16px;
  padding: 8px 12px;
}
@media only screen and (max-width: 575px) {
  .ticket-cart-item {
    flex-direction: column !important;
  }
}
.ticket-cart-item:not(:nth-last-of-type(1)) {
  border-bottom: 1px solid rgb(var(--rgb-light));
}
.ticket-cart-item img,
.ticket-cart-item svg {
  border-radius: 6px;
  width: 90px;
  height: 120px;
  object-fit: cover;
}

/* Ticket card start */
.ticket-card-wrapper {
  display: grid;
  gap: 16px;
  grid-gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.ticket-card-item {
  width: 100%;
}
.ticket-card-item figure {
  box-shadow: 0 5px 13px 0 rgba(var(--rgb-darkest), 0.2);
  position: relative;
  width: 100%;
  height: 290px;
  object-fit: cover;
  border-radius: 8px;
  overflow: hidden;
  max-width: 100%;
}
.ticket-card-item figure:hover .ticket-card-item-hover {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.ticket-card-item figure img,
.ticket-card-item figure svg {
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ticket-card-item-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 250ms ease-out;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  padding: 12px 16px;
}
.ticket-card-item-hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 100%;
  background-image: radial-gradient(at center top, rgba(var(--rgb-lightest), 0) 0%, rgba(var(--rgb-black), 1) 100%);
  z-index: 0;
}
.ticket-card-item-hover ul {
  width: 100%;
  z-index: 5;
  display: flex;
  flex-direction: column;
}
.ticket-card-item-hover ul li {
  color: rgb(var(--rgb-lightest));
  font-size: 12px;
  padding: 4px 0;
  display: block;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.ticket-card-item-hover ul li::before {
  content: "-";
  color: rgb(var(--rgb-lightest));
  padding-left: 8px;
}
.ticket-card-item-link,
.ticket-card-item a {
  font-size: 13px;
  z-index: 5;
  color: rgb(var(--rgb-seventh)) !important;
}
.ticket-card-item-link:hover i,
.ticket-card-item a:hover i {
  animation: arrow-to-left 500ms infinite alternate cubic-bezier(0.69, 0.26, 0.72, 1);
}
.ticket-card-item-content {
  max-width: 100%;
}
.ticket-card-item-content * {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes arrow-to-left {
  0% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(4px);
  }
}
/* Ticket card end */
/* Lightgallery above sidebar */
html.lg-on aside.sidebar {
  z-index: 1010;
}

/* Cinema seat start */
.cinema-seat {
  --sidebar-width: 80px;
  color: rgb(var(--rgb-dark));
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - var(--sidebar-width));
  height: auto;
  z-index: 149;
  box-shadow: 0 -3px 8px rgb(var(--rgb-first-darker), 0.1);
  background-color: rgb(var(--rgb-ninth-lighter));
  max-height: 200px;
  overflow-y: auto;
  transition: var(--my-sidebar-transition);
}
html[dir=ltr] .cinema-seat {
  right: 0;
  left: auto;
}

@media only screen and (min-width: 767px) {
  .cinema-seat.minimize {
    width: calc(100% - var(--sidebar-show-width)) !important;
  }
}
@media only screen and (max-width: 767px) {
  .cinema-seat {
    max-height: 140px;
    width: 100%;
    bottom: 86px;
  }
}
.cinema-seat::-webkit-scrollbar {
  width: 8px;
}
.cinema-seat::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.cinema-seat::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: var(--radius-full);
}
.cinema-seat-head {
  font-size: 13px;
  padding: 24px 48px;
  background-color: rgb(var(--rgb-first-lighter));
}
@media only screen and (max-width: 767px) {
  .cinema-seat-head {
    padding: 24px;
  }
}
.cinema-seat-list {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
@media only screen and (max-width: 992px) {
  .cinema-seat-list {
    gap: 4px;
    width: 100%;
    justify-content: space-between;
  }
}
.cinema-seat-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media only screen and (max-width: 992px) {
  .cinema-seat-list li {
    flex-direction: column;
    font-size: 10px;
  }
}
.cinema-seat-content {
  display: flex;
  justify-content: center;
  padding: 4px 8px;
}
@media only screen and (min-width: 767px) {
  .cinema-seat-content {
    padding: 16px 32px;
  }
}

.seat {
  width: 30px;
  height: 30px;
  border-radius: 30px;
}
.seat-sm {
  width: 24px;
  height: 24px;
  border-radius: 24px;
}
.seat-empty {
  background-color: rgb(var(--rgb-green-500));
}
.seat-gap {
  background-color: rgb(var(--rgb-slate-400));
}
.seat-sell {
  background-color: rgb(var(--rgb-red-500));
}
.seat-reserve {
  background-color: rgb(var(--rgb-amber-500));
}
.seat-select {
  background-color: rgb(var(--rgb-blue-500));
}

/* Cinema seat end */
.svg-item {
  stroke-width: 2;
  cursor: pointer;
  stroke: rgb(var(--rgb-light));
}

/* Swiper slider start */
.swiper-button-prev,
.swiper-button-next {
  background: rgb(var(--rgb-fifth-dark));
  border: 1px solid rgb(var(--rgb-light-dark));
  border-radius: var(--radius-full);
  color: rgb(var(--rgb-lightest));
  width: 40px;
  height: 40px;
}
.swiper-button-prev i,
.swiper-button-next i {
  height: 16px;
}

.swiper-pagination {
  width: fit-content;
  margin: auto;
  left: 50% !important;
  transform: translateX(-50%);
}

/* Swiper slider end */
.my-title-bar {
  height: 140px;
  width: 100%;
  text-align: center;
  background-color: rgb(var(--rgb-first-dark));
  color: rgb(var(--rgb-lightest));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.my-title-bar .title {
  font-weight: 500;
  display: inline;
  color: rgb(var(--rgb-lightest));
}
.my-title-bar .content {
  display: inline;
  color: rgb(var(--rgb-lightest));
}

/* Sanse box start */
.sanse-box {
  cursor: pointer;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(var(--rgb-darkest), 0.1);
  border-radius: 8px;
  padding: 16px 10px;
  font-size: 12px;
  color: rgb(var(--rgb-darkest));
}
.sanse-box.reserved {
  position: relative;
}
.sanse-box.reserved::before {
  content: "سانس فعلی";
  display: block;
  position: absolute;
  top: -8px;
  left: -8px;
  background-color: rgb(var(--rgb-seventh-dark));
  color: rgb(var(--rgb-lightest));
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 10px;
}
.sanse-box.selected {
  background-color: rgb(var(--rgb-seventh-lighter));
  border-color: rgb(var(--rgb-seventh-dark));
}

/* Sanse box end */
/* Design page styles Start */
.design-section {
  position: fixed;
  display: flex;
  justify-content: start !important;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: rgb(var(--rgb-first-lighter));
  box-shadow: -6px 0 16px 0 rgba(var(--rgb-darkest), 0.05);
  width: 350px;
  height: 600px;
  max-height: 80vh;
  transition: all 200ms;
  top: 48px;
  right: 8px;
  z-index: 1050;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
html[dir=ltr] .design-section {
  left: 8px;
  right: 0;
}

.design-section::-webkit-scrollbar {
  width: 8px;
}
.design-section::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.design-section::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: var(--radius-full);
}
.design-section.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  top: 62px;
}
.design-section-page {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100% !important;
  height: 100%;
}
.design-header {
  background-image: none !important;
  background-color: rgb(var(--rgb-first-lighter)) !important;
  height: auto !important;
}
.design-navbar > ul {
  display: flex;
  gap: 8px;
}
.design-navbar > ul > li:hover > button {
  box-shadow: 0 0 6px 1px rgba(var(--rgb-darkest), 0.2);
}
.design-navbar > ul > li > button {
  background-color: rgb(var(--rgb-first));
  padding: 8px 16px;
  border-radius: 6px;
  color: rgb(var(--rgb-lightest));
}

.field-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background-color: rgb(var(--rgb-ninth-lighter));
  border-radius: 6px;
  box-shadow: 0px 2px 6px 0 rgba(var(--rgb-darkest), 0.1);
  flex-grow: 1;
  min-width: 100px;
  min-height: 113px;
  cursor: pointer;
}
.field-box:hover {
  background-color: rgba(var(--rgb-lighter));
}
.field-box i {
  font-size: 24px;
  padding: 8px;
  color: rgb(var(--rgb-light-dark));
  border-radius: 4px;
}
.field-box span {
  font-size: 13px;
  color: rgb(var(--rgb-light-dark));
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.field-box-options {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.field-box-options button {
  padding: 6px 8px !important;
  border-radius: 4px;
  display: grid;
  place-items: center;
}
.field-box-options button i {
  padding: 0;
  font-size: 12px !important;
  color: rgb(var(--rgb-lightest));
}
.field-box-options button i.danger-hover:hover {
  color: rgb(var(--rgb-red-600)) !important;
}
.field-box-options button i.success-hover:hover {
  color: rgb(var(--rgb-green-600)) !important;
}
.field-box-options button:hover, .field-box-options button:active, .field-box-options button:focus-visible {
  box-shadow: 0 0 4px 1px rgba(var(--rgb-darkest), 0.2);
}
.field-box-options button:nth-child(n+1) {
  background-color: rgb(var(--rgb-green-700));
}
.field-box-options button:nth-child(n+2) {
  background-color: rgb(var(--rgb-blue-700));
}
.field-box-options button:nth-child(n+3) {
  background-color: rgb(var(--rgb-red-700));
}
.field-wrapper {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 12px;
  gap: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}
.field-wrapper-big {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.field-wrapper::-webkit-scrollbar {
  width: 8px;
}
.field-wrapper::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.field-wrapper::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: var(--radius-full);
}
.field-selectable {
  position: relative;
  transition: outline 150ms;
  outline: 1.8px dashed transparent !important;
  cursor: pointer;
  transition: outline-color 200ms, padding 200ms, margin 200ms, border-radius 200ms !important;
}
.field-selectable.selected {
  border-radius: 6px;
  outline-color: rgb(var(--rgb-sky-600)) !important;
  margin: 0;
}
.field-selectable.selected > .field-selectable-options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-6px);
}
.field-selectable-options {
  width: fit-content;
  position: absolute;
  bottom: 100%;
  left: 16px;
  background-color: rgb(var(--rgb-sky-600));
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: all 200ms;
  border-radius: 4px;
  overflow: hidden;
  z-index: 1;
}
html[dir=ltr] .field-selectable-options {
  right: 16px;
  left: auto;
}

.field-selectable-options.options-center {
  left: 50% !important;
  transform: translateX(-50%) translateY(-8px) !important;
}
.field-selectable-options ul {
  display: flex;
}
.field-selectable-options ul li:hover button {
  background-color: rgb(var(--rgb-sky-500));
}
.field-selectable-options ul li button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
  color: rgb(var(--rgb-lightest));
  font-size: 14px;
  transition: background-color 200ms;
}
.field-selectable-no-outline {
  outline: none !important;
}

.accordion-item {
  border-color: rgb(var(--rgb-light)) !important;
  background-color: rgb(var(--main-bg));
}

.accordion-button {
  background-color: rgb(var(--main-bg));
  color: rgb(var(--rgb-darkest));
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  transition-duration: 200ms !important;
}
.accordion-button:not(.collapsed) {
  background-color: rgb(var(--rgb-first));
  color: rgb(var(--rgb-lightest));
  box-shadow: none;
}
.accordion-button:not(.collapsed)::after {
  background-image: none;
}
.accordion-button:focus {
  box-shadow: none !important;
}
.accordion-button::after {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  margin-right: auto;
  content: "\f107";
  font-family: FontAwesome;
  background-image: none;
  background-repeat: no-repeat;
  background-size: 0;
  transition: var(--bs-accordion-btn-icon-transition);
}

.accordion-body {
  padding: 4px 6px;
  transition-duration: 200ms !important;
}

.tan-accordion-clean .accordion-item {
  background-color: transparent;
}
.tan-accordion-clean .accordion-button {
  background-color: transparent;
}
.tan-accordion-clean .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: rgb(var(--rgb-darkest));
  box-shadow: none;
}
.tan-accordion-clean .accordion-body {
  background-color: transparent;
}

.tan-product-sticky .shp-product-nav.stickTop {
  top: 0 !important;
}
.tan-product-sticky .shp-product-sticky-box.stickTop {
  top: 48px !important;
}

.tan-tab-no-focus-ring .nav-link:focus,
.tan-tab-no-focus-ring .nav-link:active {
  outline: none !important;
  box-shadow: none !important;
}

.social-btn {
  padding: 12px 20px;
  font-size: 20px;
  border-radius: 8px;
  background-color: rgb(var(--rgb-first));
  color: rgb(var(--rgb-lightest));
}
.social-btn:hover {
  box-shadow: inset 0 0 0 99999px rgba(var(--rgb-darkest), 0.1);
}
.social-btn.insta {
  background-color: rgb(114, 50, 189) !important;
}
.social-btn.telegram {
  background-color: rgb(0, 136, 204) !important;
}
.social-btn.whatsapp {
  background-color: rgb(37, 211, 102) !important;
}
.social-btn.linkedin {
  background-color: rgb(10, 102, 194) !important;
}
.social-btn.twitter {
  background-color: rgb(29, 161, 242) !important;
}
.social-btn.facebook {
  background-color: rgb(24, 119, 242) !important;
}

.defaults-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  padding: 8px 16px;
}

/* Design page styles End */
.grid-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;
  left: 0;
  border-top: 2px solid rgba(var(--rgb-darkest), 1);
  border-bottom: 2px solid rgba(var(--rgb-darkest), 1);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 200ms;
}
.grid-box.show {
  opacity: 0.3;
  visibility: visible;
}
.grid-box-rows {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100.2%;
  height: 100.2%;
  top: 0;
  left: 0;
  flex: 1;
  justify-content: space-between;
}
.grid-box-rows .grid-box-cell {
  width: 100%;
  height: 100%;
  border-bottom: 1.5px solid rgba(var(--rgb-darkest), 1);
  display: flex;
  flex-direction: column;
}
.grid-box-rows span {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 10%;
  border-bottom: 1px solid rgba(var(--rgb-darkest), 1);
}
.grid-box-cols {
  display: flex;
  position: absolute;
  width: 100.2%;
  height: 100%;
  top: 0;
  left: 0;
  flex: 1;
  justify-content: space-between;
}
.grid-box-cols .grid-box-cell {
  width: 100%;
  height: 100%;
  border: 1.5px solid rgba(var(--rgb-darkest), 1);
  display: flex;
}
.grid-box-cols span {
  display: flex;
  width: 10%;
  height: 100%;
  border-left: 1px solid rgba(var(--rgb-darkest), 1);
}
.grid-box-cols span:nth-of-type(1) {
  border-right: 1px solid rgba(var(--rgb-darkest), 1);
}

.zoom-area {
  position: absolute;
  background-color: rgb(var(--rgb-first-lighter));
  display: flex;
  gap: 12px;
  z-index: 150;
  padding: 8px 12px;
  border-radius: 8px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px 1px rgba(var(--rgb-darkest), 0.1);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 200ms;
}
.zoom-area.show {
  top: 120%;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* File Manager start */
body.dark .file-manager-item-options li.danger, body.faragard-dark .file-manager-item-options li.danger, body.blue-dark .file-manager-item-options li.danger, body.orange-dark .file-manager-item-options li.danger, body.fuchsia-dark .file-manager-item-options li.danger, body.pink-dark .file-manager-item-options li.danger, body.emerald-dark .file-manager-item-options li.danger, body.red-dark .file-manager-item-options li.danger, body.sky-dark .file-manager-item-options li.danger, body.yellow-dark .file-manager-item-options li.danger, body.green-dark .file-manager-item-options li.danger, body.purple-dark .file-manager-item-options li.danger, body.indigo-dark .file-manager-item-options li.danger, body.slate-dark .file-manager-item-options li.danger, body.yellow-blue-dark .file-manager-item-options li.danger {
  background-color: rgb(var(--rgb-red-700)) !important;
}
body.dark .file-manager-item-options li.danger:hover a,
body.dark .file-manager-item-options li.danger:hover button, body.faragard-dark .file-manager-item-options li.danger:hover a,
body.faragard-dark .file-manager-item-options li.danger:hover button, body.blue-dark .file-manager-item-options li.danger:hover a,
body.blue-dark .file-manager-item-options li.danger:hover button, body.orange-dark .file-manager-item-options li.danger:hover a,
body.orange-dark .file-manager-item-options li.danger:hover button, body.fuchsia-dark .file-manager-item-options li.danger:hover a,
body.fuchsia-dark .file-manager-item-options li.danger:hover button, body.pink-dark .file-manager-item-options li.danger:hover a,
body.pink-dark .file-manager-item-options li.danger:hover button, body.emerald-dark .file-manager-item-options li.danger:hover a,
body.emerald-dark .file-manager-item-options li.danger:hover button, body.red-dark .file-manager-item-options li.danger:hover a,
body.red-dark .file-manager-item-options li.danger:hover button, body.sky-dark .file-manager-item-options li.danger:hover a,
body.sky-dark .file-manager-item-options li.danger:hover button, body.yellow-dark .file-manager-item-options li.danger:hover a,
body.yellow-dark .file-manager-item-options li.danger:hover button, body.green-dark .file-manager-item-options li.danger:hover a,
body.green-dark .file-manager-item-options li.danger:hover button, body.purple-dark .file-manager-item-options li.danger:hover a,
body.purple-dark .file-manager-item-options li.danger:hover button, body.indigo-dark .file-manager-item-options li.danger:hover a,
body.indigo-dark .file-manager-item-options li.danger:hover button, body.slate-dark .file-manager-item-options li.danger:hover a,
body.slate-dark .file-manager-item-options li.danger:hover button, body.yellow-blue-dark .file-manager-item-options li.danger:hover a,
body.yellow-blue-dark .file-manager-item-options li.danger:hover button {
  color: rgb(var(--rgb-red-200)) !important;
}
body.dark .file-manager-item-options li.danger button,
body.dark .file-manager-item-options li.danger a, body.faragard-dark .file-manager-item-options li.danger button,
body.faragard-dark .file-manager-item-options li.danger a, body.blue-dark .file-manager-item-options li.danger button,
body.blue-dark .file-manager-item-options li.danger a, body.orange-dark .file-manager-item-options li.danger button,
body.orange-dark .file-manager-item-options li.danger a, body.fuchsia-dark .file-manager-item-options li.danger button,
body.fuchsia-dark .file-manager-item-options li.danger a, body.pink-dark .file-manager-item-options li.danger button,
body.pink-dark .file-manager-item-options li.danger a, body.emerald-dark .file-manager-item-options li.danger button,
body.emerald-dark .file-manager-item-options li.danger a, body.red-dark .file-manager-item-options li.danger button,
body.red-dark .file-manager-item-options li.danger a, body.sky-dark .file-manager-item-options li.danger button,
body.sky-dark .file-manager-item-options li.danger a, body.yellow-dark .file-manager-item-options li.danger button,
body.yellow-dark .file-manager-item-options li.danger a, body.green-dark .file-manager-item-options li.danger button,
body.green-dark .file-manager-item-options li.danger a, body.purple-dark .file-manager-item-options li.danger button,
body.purple-dark .file-manager-item-options li.danger a, body.indigo-dark .file-manager-item-options li.danger button,
body.indigo-dark .file-manager-item-options li.danger a, body.slate-dark .file-manager-item-options li.danger button,
body.slate-dark .file-manager-item-options li.danger a, body.yellow-blue-dark .file-manager-item-options li.danger button,
body.yellow-blue-dark .file-manager-item-options li.danger a {
  font-size: 18px;
  color: rgb(var(--rgb-red-300));
  width: 28px;
  height: 28px;
}
body.dark .file-manager-item-options li.success, body.faragard-dark .file-manager-item-options li.success, body.blue-dark .file-manager-item-options li.success, body.orange-dark .file-manager-item-options li.success, body.fuchsia-dark .file-manager-item-options li.success, body.pink-dark .file-manager-item-options li.success, body.emerald-dark .file-manager-item-options li.success, body.red-dark .file-manager-item-options li.success, body.sky-dark .file-manager-item-options li.success, body.yellow-dark .file-manager-item-options li.success, body.green-dark .file-manager-item-options li.success, body.purple-dark .file-manager-item-options li.success, body.indigo-dark .file-manager-item-options li.success, body.slate-dark .file-manager-item-options li.success, body.yellow-blue-dark .file-manager-item-options li.success {
  background-color: rgb(var(--rgb-green-700)) !important;
}
body.dark .file-manager-item-options li.success:hover a,
body.dark .file-manager-item-options li.success:hover button, body.faragard-dark .file-manager-item-options li.success:hover a,
body.faragard-dark .file-manager-item-options li.success:hover button, body.blue-dark .file-manager-item-options li.success:hover a,
body.blue-dark .file-manager-item-options li.success:hover button, body.orange-dark .file-manager-item-options li.success:hover a,
body.orange-dark .file-manager-item-options li.success:hover button, body.fuchsia-dark .file-manager-item-options li.success:hover a,
body.fuchsia-dark .file-manager-item-options li.success:hover button, body.pink-dark .file-manager-item-options li.success:hover a,
body.pink-dark .file-manager-item-options li.success:hover button, body.emerald-dark .file-manager-item-options li.success:hover a,
body.emerald-dark .file-manager-item-options li.success:hover button, body.red-dark .file-manager-item-options li.success:hover a,
body.red-dark .file-manager-item-options li.success:hover button, body.sky-dark .file-manager-item-options li.success:hover a,
body.sky-dark .file-manager-item-options li.success:hover button, body.yellow-dark .file-manager-item-options li.success:hover a,
body.yellow-dark .file-manager-item-options li.success:hover button, body.green-dark .file-manager-item-options li.success:hover a,
body.green-dark .file-manager-item-options li.success:hover button, body.purple-dark .file-manager-item-options li.success:hover a,
body.purple-dark .file-manager-item-options li.success:hover button, body.indigo-dark .file-manager-item-options li.success:hover a,
body.indigo-dark .file-manager-item-options li.success:hover button, body.slate-dark .file-manager-item-options li.success:hover a,
body.slate-dark .file-manager-item-options li.success:hover button, body.yellow-blue-dark .file-manager-item-options li.success:hover a,
body.yellow-blue-dark .file-manager-item-options li.success:hover button {
  color: rgb(var(--rgb-green-200)) !important;
}
body.dark .file-manager-item-options li.success button,
body.dark .file-manager-item-options li.success a, body.faragard-dark .file-manager-item-options li.success button,
body.faragard-dark .file-manager-item-options li.success a, body.blue-dark .file-manager-item-options li.success button,
body.blue-dark .file-manager-item-options li.success a, body.orange-dark .file-manager-item-options li.success button,
body.orange-dark .file-manager-item-options li.success a, body.fuchsia-dark .file-manager-item-options li.success button,
body.fuchsia-dark .file-manager-item-options li.success a, body.pink-dark .file-manager-item-options li.success button,
body.pink-dark .file-manager-item-options li.success a, body.emerald-dark .file-manager-item-options li.success button,
body.emerald-dark .file-manager-item-options li.success a, body.red-dark .file-manager-item-options li.success button,
body.red-dark .file-manager-item-options li.success a, body.sky-dark .file-manager-item-options li.success button,
body.sky-dark .file-manager-item-options li.success a, body.yellow-dark .file-manager-item-options li.success button,
body.yellow-dark .file-manager-item-options li.success a, body.green-dark .file-manager-item-options li.success button,
body.green-dark .file-manager-item-options li.success a, body.purple-dark .file-manager-item-options li.success button,
body.purple-dark .file-manager-item-options li.success a, body.indigo-dark .file-manager-item-options li.success button,
body.indigo-dark .file-manager-item-options li.success a, body.slate-dark .file-manager-item-options li.success button,
body.slate-dark .file-manager-item-options li.success a, body.yellow-blue-dark .file-manager-item-options li.success button,
body.yellow-blue-dark .file-manager-item-options li.success a {
  font-size: 18px;
  color: rgb(var(--rgb-green-300));
  width: 28px;
  height: 28px;
}
body.dark .file-manager-item-options li.info, body.faragard-dark .file-manager-item-options li.info, body.blue-dark .file-manager-item-options li.info, body.orange-dark .file-manager-item-options li.info, body.fuchsia-dark .file-manager-item-options li.info, body.pink-dark .file-manager-item-options li.info, body.emerald-dark .file-manager-item-options li.info, body.red-dark .file-manager-item-options li.info, body.sky-dark .file-manager-item-options li.info, body.yellow-dark .file-manager-item-options li.info, body.green-dark .file-manager-item-options li.info, body.purple-dark .file-manager-item-options li.info, body.indigo-dark .file-manager-item-options li.info, body.slate-dark .file-manager-item-options li.info, body.yellow-blue-dark .file-manager-item-options li.info {
  background-color: rgb(var(--rgb-blue-700)) !important;
}
body.dark .file-manager-item-options li.info:hover a,
body.dark .file-manager-item-options li.info:hover button, body.faragard-dark .file-manager-item-options li.info:hover a,
body.faragard-dark .file-manager-item-options li.info:hover button, body.blue-dark .file-manager-item-options li.info:hover a,
body.blue-dark .file-manager-item-options li.info:hover button, body.orange-dark .file-manager-item-options li.info:hover a,
body.orange-dark .file-manager-item-options li.info:hover button, body.fuchsia-dark .file-manager-item-options li.info:hover a,
body.fuchsia-dark .file-manager-item-options li.info:hover button, body.pink-dark .file-manager-item-options li.info:hover a,
body.pink-dark .file-manager-item-options li.info:hover button, body.emerald-dark .file-manager-item-options li.info:hover a,
body.emerald-dark .file-manager-item-options li.info:hover button, body.red-dark .file-manager-item-options li.info:hover a,
body.red-dark .file-manager-item-options li.info:hover button, body.sky-dark .file-manager-item-options li.info:hover a,
body.sky-dark .file-manager-item-options li.info:hover button, body.yellow-dark .file-manager-item-options li.info:hover a,
body.yellow-dark .file-manager-item-options li.info:hover button, body.green-dark .file-manager-item-options li.info:hover a,
body.green-dark .file-manager-item-options li.info:hover button, body.purple-dark .file-manager-item-options li.info:hover a,
body.purple-dark .file-manager-item-options li.info:hover button, body.indigo-dark .file-manager-item-options li.info:hover a,
body.indigo-dark .file-manager-item-options li.info:hover button, body.slate-dark .file-manager-item-options li.info:hover a,
body.slate-dark .file-manager-item-options li.info:hover button, body.yellow-blue-dark .file-manager-item-options li.info:hover a,
body.yellow-blue-dark .file-manager-item-options li.info:hover button {
  color: rgb(var(--rgb-blue-200)) !important;
}
body.dark .file-manager-item-options li.info button,
body.dark .file-manager-item-options li.info a, body.faragard-dark .file-manager-item-options li.info button,
body.faragard-dark .file-manager-item-options li.info a, body.blue-dark .file-manager-item-options li.info button,
body.blue-dark .file-manager-item-options li.info a, body.orange-dark .file-manager-item-options li.info button,
body.orange-dark .file-manager-item-options li.info a, body.fuchsia-dark .file-manager-item-options li.info button,
body.fuchsia-dark .file-manager-item-options li.info a, body.pink-dark .file-manager-item-options li.info button,
body.pink-dark .file-manager-item-options li.info a, body.emerald-dark .file-manager-item-options li.info button,
body.emerald-dark .file-manager-item-options li.info a, body.red-dark .file-manager-item-options li.info button,
body.red-dark .file-manager-item-options li.info a, body.sky-dark .file-manager-item-options li.info button,
body.sky-dark .file-manager-item-options li.info a, body.yellow-dark .file-manager-item-options li.info button,
body.yellow-dark .file-manager-item-options li.info a, body.green-dark .file-manager-item-options li.info button,
body.green-dark .file-manager-item-options li.info a, body.purple-dark .file-manager-item-options li.info button,
body.purple-dark .file-manager-item-options li.info a, body.indigo-dark .file-manager-item-options li.info button,
body.indigo-dark .file-manager-item-options li.info a, body.slate-dark .file-manager-item-options li.info button,
body.slate-dark .file-manager-item-options li.info a, body.yellow-blue-dark .file-manager-item-options li.info button,
body.yellow-blue-dark .file-manager-item-options li.info a {
  font-size: 18px;
  color: rgb(var(--rgb-blue-300));
  width: 28px;
  height: 28px;
}

.file-manager {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.file-manager-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.file-manager-item-player {
  height: 140px;
}
.file-manager-item-player video {
  height: 100%;
}
.file-manager-item-icon {
  height: 140px;
}
.file-manager-item-name {
  padding: 6px 16px;
  text-align: center;
  color: rgb(var(--rgb-second-darker));
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 26px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.file-manager-item:hover .file-manager-item-options {
  transform: translateY(100%);
}
.file-manager-item-options {
  display: flex;
  position: absolute;
  gap: 4px;
  bottom: 100%;
  right: 0;
  transition: all 200ms;
}
html[dir=ltr] .file-manager-item-options {
  left: 0;
  right: 0;
}

.file-manager-item-options li {
  background-color: rgb(var(--rgb-second-light));
  border-radius: 4px;
}
.file-manager-item-options li:hover a,
.file-manager-item-options li:hover button {
  color: rgb(var(--rgb-second-darker));
}
.file-manager-item-options li.success {
  background-color: rgb(var(--rgb-green-200)) !important;
}
.file-manager-item-options li.success:hover a,
.file-manager-item-options li.success:hover button {
  color: rgb(var(--rgb-green-900)) !important;
}
.file-manager-item-options li.success button,
.file-manager-item-options li.success a {
  font-size: 18px;
  color: rgb(var(--rgb-green-700));
  width: 28px;
  height: 28px;
}
.file-manager-item-options li.danger {
  background-color: rgb(var(--rgb-red-200)) !important;
}
.file-manager-item-options li.danger:hover a,
.file-manager-item-options li.danger:hover button {
  color: rgb(var(--rgb-red-900)) !important;
}
.file-manager-item-options li.danger button,
.file-manager-item-options li.danger a {
  font-size: 18px;
  color: rgb(var(--rgb-red-700));
  width: 28px;
  height: 28px;
}
.file-manager-item-options li.info {
  background-color: rgb(var(--rgb-blue-200)) !important;
}
.file-manager-item-options li.info:hover a,
.file-manager-item-options li.info:hover button {
  color: rgb(var(--rgb-blue-900)) !important;
}
.file-manager-item-options li.info button,
.file-manager-item-options li.info a {
  font-size: 18px;
  color: rgb(var(--rgb-blue-700));
  width: 28px;
  height: 28px;
}
.file-manager-item-options li button,
.file-manager-item-options li a {
  font-size: 18px;
  color: rgb(var(--rgb-second-dark));
  width: 28px;
  height: 28px;
}
.file-manager-bg-light {
  fill: rgb(var(--rgb-second-dark)) !important;
}
.file-manager-bg-dark {
  fill: rgb(var(--rgb-second-darker)) !important;
}

body.dark .file-manager-bg-light, body.faragard-dark .file-manager-bg-light, body.blue-dark .file-manager-bg-light, body.orange-dark .file-manager-bg-light, body.fuchsia-dark .file-manager-bg-light, body.pink-dark .file-manager-bg-light, body.emerald-dark .file-manager-bg-light, body.red-dark .file-manager-bg-light, body.sky-dark .file-manager-bg-light, body.yellow-dark .file-manager-bg-light, body.green-dark .file-manager-bg-light, body.purple-dark .file-manager-bg-light, body.indigo-dark .file-manager-bg-light, body.slate-dark .file-manager-bg-light, body.yellow-blue-dark .file-manager-bg-light {
  fill: rgb(var(--rgb-second)) !important;
}
body.dark .file-manager-bg-dark, body.faragard-dark .file-manager-bg-dark, body.blue-dark .file-manager-bg-dark, body.orange-dark .file-manager-bg-dark, body.fuchsia-dark .file-manager-bg-dark, body.pink-dark .file-manager-bg-dark, body.emerald-dark .file-manager-bg-dark, body.red-dark .file-manager-bg-dark, body.sky-dark .file-manager-bg-dark, body.yellow-dark .file-manager-bg-dark, body.green-dark .file-manager-bg-dark, body.purple-dark .file-manager-bg-dark, body.indigo-dark .file-manager-bg-dark, body.slate-dark .file-manager-bg-dark, body.yellow-blue-dark .file-manager-bg-dark {
  fill: rgb(var(--rgb-second-light)) !important;
}

.fill-transparent {
  fill: transparent !important;
}

/* File Manager end */
/* Chat box start */
.chat-box {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 70vh;
  scroll-behavior: smooth;
  position: relative;
  width: 100%;
}
.chat-box::-webkit-scrollbar {
  width: 8px;
}
.chat-box::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.chat-box::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: var(--radius-full);
}
.chat-box-wrapper {
  max-height: 80vh;
}
.chat-box-section {
  padding: 0 16px;
  width: 100%;
  display: flex;
  position: relative;
  padding-top: 8px;
  flex-direction: column;
  gap: 12px;
}
.chat-box-date {
  position: sticky;
  z-index: 2;
  transition: opacity 0.3s ease;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(var(--rgb-darkest), 0.3);
  font-size: 12px;
  color: rgb(var(--rgb-lightest));
  padding: 4px 12px;
  border-radius: var(--radius-full);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  user-select: none;
}
.chat-box-group {
  display: flex;
  position: relative;
  gap: 12px;
}
.chat-box-group-left {
  flex-direction: row-reverse;
}
.chat-box-group-left .chat-box-group-content {
  align-items: flex-end;
}
.chat-box-group-left .chat-box-item {
  justify-content: end;
}
.chat-box-group-left .curve-triangle {
  left: 36px;
  transform: scaleX(-1);
}
html[dir=ltr] .chat-box-group-left .curve-triangle {
  right: 36px;
  left: auto;
}

html[dir=ltr] .chat-box-group-left .curve-triangle {
  transform: scaleX(1);
}

.chat-box-group-left .chat-box-item:nth-last-of-type(1) .chat-box-item-content {
  border-radius: 12px 12px 12px 0;
}
html[dir=ltr] .chat-box-group-left .chat-box-item:nth-last-of-type(1) .chat-box-item-content {
  border-radius: 12px 12px 0 12px;
}

.chat-box-group-right .chat-box-group-content {
  align-items: flex-start;
}
.chat-box-group-right .curve-triangle {
  right: 35px;
}
html[dir=ltr] .chat-box-group-right .curve-triangle {
  left: 35px;
  right: 0;
}

html[dir=ltr] .chat-box-group-right .curve-triangle {
  transform: scaleX(-1);
}

.chat-box-group img,
.chat-box-group svg {
  align-self: flex-end;
  width: 32px;
  height: 32px;
  border-radius: 32px;
}
.chat-box-group .curve-triangle {
  width: 12px;
  height: 12px;
  position: absolute;
  bottom: 0;
  fill: rgb(var(--rgb-first-lighter));
  overflow: visible;
  z-index: 2;
}
.chat-box-group .curve-triangle path {
  filter: drop-shadow(1px 2px 1px rgba(var(--rgb-darkest), 0.06));
}
.chat-box-group-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-box-group.no-corner .chat-box-item-content {
  border-radius: 12px !important;
}
.chat-box-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-box-item-btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.chat-box-item-glassy-btn {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: rgb(var(--rgb-lightest));
  font-size: 14px;
  position: relative;
  z-index: 1;
  grid-column: span 2;
}
.chat-box-item-glassy-btn.half {
  grid-column: span 1;
}
.chat-box-item-glassy-btn::before {
  z-index: -1;
  content: "";
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.06);
  width: 100%;
  height: 100%;
  background-color: color-mix(in srgb, rgb(var(--rgb-darkest), 0.4) 80%, rgb(var(--rgb-lightest)));
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 200ms ease-in-out;
  border-radius: 8px;
}
.chat-box-item-glassy-btn:hover::before {
  background-color: color-mix(in srgb, rgb(var(--rgb-darkest), 0.4) 68%, rgb(var(--rgb-lightest)));
  box-shadow: 0 0 6px 0 rgba(var(--rgb-lightest), 0.2);
}
.chat-box-item-content {
  background-color: rgb(var(--rgb-first-lighter));
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 120px;
  max-width: 50vh;
  box-shadow: 0 1px 2px 0 rgba(var(--rgb-darkest), 0.1);
  padding: 2px 6px;
  position: relative;
  z-index: 1;
  border-radius: 12px;
}
.chat-box-item-content.seen .chat-box-item-content-time::before {
  content: "\f560";
  font-family: "Font Awesome 5 Pro";
}
.chat-box-item-content-message {
  font-size: 14px;
  color: rgb(var(--rgb-first-darker));
  line-height: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
  white-space: pre-line;
  word-wrap: break-word;
}
.chat-box-item-content-message img,
.chat-box-item-content-message svg,
.chat-box-item-content-message video {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.chat-box-item-content-message .lightgallery {
  white-space: normal;
}
.chat-box-item-content-message-progress-circle {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  position: relative;
  transition: all 300ms linear;
  z-index: 1;
}
.chat-box-item-content-message-progress-circle::before {
  content: "";
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border: 2px solid rgb(var(--rgb-first));
  background: conic-gradient(rgb(var(--rgb-lightest)) calc(var(--progress, 0%) * 1%), rgb(var(--rgb-first)) 0);
  transition: all 300ms linear;
  animation: linear-rotation 2s linear infinite;
}
@keyframes linear-rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.chat-box-item-content-message-progress-circle.active span::before {
  content: "\f00c";
}
.chat-box-item-content-message-progress-circle span {
  display: grid;
  place-items: center;
  width: calc(100% - 7px);
  height: calc(100% - 7px);
  background-color: rgb(var(--rgb-first));
  border-radius: 50%;
  color: rgb(var(--rgb-lightest));
  font-size: 21px;
  font-weight: 800;
}
.chat-box-item-content-message-progress-circle span::before {
  content: "\f00d";
  display: block;
  color: rgb(var(--rgb-lightest));
  font-family: "Font Awesome 5 Pro";
  font-size: 21px;
  font-weight: 800;
}
.chat-box-item-content-message-audio {
  display: flex;
  height: fit-content;
  white-space: normal;
  width: 140px;
}
.chat-box-item-content-message-audio > div {
  width: 100%;
  display: flex;
  height: fit-content;
}
.chat-box-item-content-message-audio-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background-color: rgb(var(--rgb-first));
  color: rgb(var(--rgb-lightest));
  display: grid;
  place-items: center;
  transition: all 200ms;
  box-shadow: none;
}
.chat-box-item-content-message-audio-btn::before {
  content: "\f04b";
  font-family: "Font Awesome 5 Pro";
  font-size: 21px;
  font-weight: 800;
  transition: all 200ms;
}
.chat-box-item-content-message-audio-btn.playing {
  box-shadow: 2px 0 0 0 rgba(var(--rgb-first-light), 1), -2px 0 0 0 rgba(var(--rgb-first-light), 1), 0 2px 0 0 rgba(var(--rgb-first-light), 1), 0 -2px 0 0 rgba(var(--rgb-first-light), 1);
}
.chat-box-item-content-message-audio-btn.playing::before {
  content: "\f04c";
}
.chat-box-item-content-message-link {
  display: flex;
  flex-direction: column;
  background-color: rgb(var(--rgb-tenth-lighter));
  padding: 12px 16px;
  border-radius: 8px;
  border-top: 3px solid rgb(var(--rgb-first));
  box-shadow: inset 0 0 3px 0 rgba(var(--rgb-darkest), 0.1);
}
.chat-box-item-content-time {
  font-size: 12px;
  color: rgb(var(--rgb-light-dark));
  display: flex;
  gap: 8px;
  align-items: center;
}
.chat-box-item-content-time::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Pro";
  color: rgb(var(--rgb-third-dark));
}
.chat-box-item:nth-last-of-type(1) {
  scroll-snap-align: end;
}
.chat-box-item:nth-last-of-type(1) .chat-box-item-content {
  border-radius: 12px 12px 0 12px;
}
html[dir=ltr] .chat-box-item:nth-last-of-type(1) .chat-box-item-content {
  border-radius: 12px 12px 12px 0;
}

.chat-box-file-preview {
  max-height: 60vh;
}
.chat-box-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 16px;
  padding: 6px;
  position: relative;
  z-index: 501;
}
.chat-box-bottom-content {
  display: flex;
  flex-grow: 1;
  align-items: flex-end;
  height: 100%;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px 12px 0 12px;
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 1px 1px 6px 0 rgba(var(--rgb-darkest), 0.15);
  position: relative;
}
.chat-box-bottom-content .curve-triangle {
  width: 16px;
  height: 16px;
  position: absolute;
  bottom: 0;
  right: -12px;
  fill: rgb(var(--rgb-ninth-lighter));
  overflow: visible;
  z-index: 2;
  transition: all 100ms;
}
.chat-box-bottom-content .curve-triangle path {
  filter: drop-shadow(1px 2px 1px rgba(var(--rgb-darkest), 0.06));
}
.chat-box-bottom-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: transparent;
  z-index: 500;
  top: 0;
  left: 0;
  pointer-events: none;
  visibility: hidden;
}
.chat-box-bottom-overlay.active {
  visibility: visible;
  pointer-events: auto;
}
.chat-box-bottom-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent;
  appearance: none;
  resize: none;
  line-height: normal;
  flex: 1;
  height: max-content;
  font-size: 14px;
  min-height: 32px;
  width: 0;
  min-width: auto;
}
.chat-box-bottom-go-down {
  position: absolute;
  bottom: -60px;
  right: 8px;
  z-index: 500;
  transition: all 200ms ease;
}
.chat-box-bottom-go-down.active {
  bottom: 8px;
}
.chat-box-bottom-btn, .chat-box-bottom-btn:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--rgb-light-dark));
  border-radius: 50%;
  height: 36px;
  width: 36px;
  font-size: 21px;
  transition: box-shadow 100ms, background-color 200ms ease;
}
.chat-box-bottom-btn:hover, .chat-box-bottom-btn:active, .chat-box-bottom-btn:focus:hover, .chat-box-bottom-btn:focus:active {
  color: rgb(var(--rgb-light-dark)) !important;
  background-color: rgb(var(--rgb-darkest), 0.03) !important;
}
.chat-box-bottom-btn:disabled, .chat-box-bottom-btn:focus:disabled {
  opacity: 0.9;
  color: rgb(var(--rgb-light-dark)) !important;
  background-color: transparent !important;
}
.chat-box-bottom-btn.active, .chat-box-bottom-btn:focus.active {
  color: rgb(var(--rgb-first));
}
.chat-box-bottom-btn-danger, .chat-box-bottom-btn-danger:focus {
  color: rgb(var(--rgb-red-600)) !important;
}
.chat-box-bottom-btn-danger:hover, .chat-box-bottom-btn-danger:focus:hover {
  color: rgb(var(--rgb-red-600)) !important;
}
.chat-box-bottom-btn-danger:active, .chat-box-bottom-btn-danger:focus:active {
  box-shadow: 1px 1px 6px 0 rgba(var(--rgb-darkest), 0.15) !important;
  color: rgb(var(--rgb-red-600)) !important;
  background-color: rgb(var(--rgb-red-50)) !important;
}
.chat-box-bottom-btn-voice::before {
  content: "\f130";
  font-family: "Font Awesome 6 Pro";
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.chat-box-bottom-btn-voice.active {
  color: rgb(var(--rgb-first-darker));
  background-color: rgb(var(--rgb-ninth-lighter));
}
.chat-box-bottom-btn-voice.active::before {
  content: "\f1d8";
  font-family: "Font Awesome 6 Pro";
  animation: icon-grow-shrink 0.3s ease;
}
.chat-box-bottom-btn-voice.active:hover {
  color: rgb(var(--rgb-first-darker)) !important;
  background-color: rgb(var(--rgb-ninth-lighter)) !important;
}
.chat-box-bottom-btn-voice.active:active {
  color: rgb(var(--rgb-first-darker)) !important;
}
.chat-box-bottom-btn-voice:not(.active)::before {
  animation: icon-shrink-grow 0.3s ease reverse;
}
@keyframes icon-grow-shrink {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes icon-shrink-grow {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}
.chat-box-bottom-btn-circular {
  width: 54px !important;
  min-width: 54px;
  height: 54px !important;
  border-radius: 50%;
  font-size: 21px;
  box-shadow: 1px 1px 6px 0 rgba(var(--rgb-darkest), 0.15);
  background-color: rgb(var(--rgb-ninth-lighter));
  color: rgb(var(--rgb-light-dark));
}
.chat-box-bottom-btn-circular:hover, .chat-box-bottom-btn-circular:active {
  box-shadow: 1px 1px 6px 0 rgba(var(--rgb-darkest), 0.15);
  color: rgb(var(--rgb-light-dark));
  background-color: rgb(var(--rgb-ninth-lighter)) !important;
}
.chat-box-bottom-timer {
  font-size: 12px;
  color: rgb(var(--rgb-light-dark));
  padding: 8px 4px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.chat-box-bottom-timer::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: flex;
  background-color: rgb(var(--rgb-red-600));
  animation: recording 1.4s infinite;
  z-index: 1;
  position: relative;
}
@keyframes recording {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
.chat-box-bottom-file-preview {
  display: flex;
  align-items: center;
  border: 1px solid rgb(var(--rgb-light));
  border-radius: 12px;
  padding: 5px;
  width: 100%;
  min-height: 70px;
  height: 70px;
  text-align: center;
  font-size: 12px;
  background-color: rgb(var(--rgb-first-lighter));
  position: relative;
  gap: 8px;
  white-space: normal;
}
.chat-box-bottom-file-preview-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 28%;
  min-width: 28%;
  font-size: 42px;
}
.chat-box-bottom-file-preview img {
  max-width: 100%;
  object-fit: cover;
}
.chat-box-bottom-file-preview-filename {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  color: rgb(var(--rgb-light-dark));
}
.chat-box-bottom-file-preview-remove {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgb(var(--rgb-red-500));
  color: rgb(var(--rgb-lightest));
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.chat-box-popup {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  display: grid;
  background-color: rgb(var(--rgb-ninth-lighter));
  bottom: calc(100% + 8px);
  left: 12px;
  min-height: 300px;
  max-height: 400px;
  box-shadow: 0 0 4px 0 rgba(var(--rgb-darkest), 0.1);
  padding: 8px;
  border-radius: 12px;
  min-width: 260px;
  width: 440px;
  max-width: 100%;
  transition: all 200ms;
  z-index: 2000;
  transform: translateY(-6px);
}
.chat-box-popup .tab-content {
  max-height: 340px;
}
.chat-box-popup .tab-pane {
  height: 100%;
}
.chat-box-popup.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.chat-box-navigation-drawer {
  height: 0;
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: rgb(var(--rgb-ninth-lighter));
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  padding: 0;
  border-radius: 2px;
  transition: transform 400ms, height 500ms;
  z-index: 2000;
  transform: translateY(100%);
}
.chat-box-navigation-drawer.show {
  transition: transform 200ms, height 0s;
  padding: 8px;
  height: 100%;
  pointer-events: auto;
  transform: translateY(0);
}
.chat-box-navigation-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid rgba(var(--rgb-light));
  width: 100%;
  padding: 8px 12px 2px 12px;
}
.chat-box-navigation-drawer-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}
.chat-box-navigation-drawer-body-loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  background-color: rgb(var(--rgb-ninth-lighter));
  transition: all 200ms;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-box-navigation-drawer-body-loader.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.chat-box-navigation-drawer-body iframe {
  height: 100%;
  overflow-y: auto;
  min-height: 100dvh;
}
.chat-box-emoji-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow-y: auto;
  height: 100%;
  place-items: center;
}
@media only screen and (min-width: 992px) {
  .chat-box-emoji-content {
    grid-template-columns: repeat(8, 1fr);
  }
}
.chat-box-emoji-btn {
  border-radius: 8px;
  width: 40px;
  height: 39px;
  display: grid;
  place-items: center;
  transition: all 200ms;
  font-size: 24px;
  overflow: hidden;
  padding: 5px 3px 3px 3px;
}
.chat-box-emoji-btn:hover {
  background: rgb(var(--rgb-darkest), 0.05);
}
.chat-box-draggable-area {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 0 0 8px 1px rgba(var(--rgb-darkest), 0.1);
  z-index: 2010;
  padding: 16px;
  color: rgb(var(--rgb-light-dark));
  gap: 32px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 200ms ease-in;
}
.chat-box-draggable-area h4 {
  color: rgb(var(--rgb-light-dark)) !important;
}
.chat-box-draggable-area i {
  font-size: 58px;
}
.chat-box-draggable-area.dragging {
  cursor: pointer;
  border-color: rgb(var(--rgb-second));
  color: rgb(var(--rgb-second));
}
.chat-box-draggable-area.dragging h4 {
  color: rgb(var(--rgb-second)) !important;
}
.chat-box-draggable-area.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.chat-box-draggable-area::before {
  content: "";
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius: 16px;
  border: 3px dashed rgba(var(--rgb-light));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Chat box end */
/* Workflow start */
.object-wrapper {
  position: absolute;
  top: -20px;
  width: 80px;
  left: 0;
}

.design-container {
  width: 100%;
  background-color: color-mix(in srgb, rgb(var(--rgb-ninth-lighter)) 96%, rgb(var(--rgb-darkest)));
  position: relative !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  border: 1.5px solid rgb(var(--rgb-darkest), 0.2);
  transform-origin: top;
}

.ruler {
  height: 100%;
}

.ef-ruler {
  position: relative !important;
  padding: 16px;
}
.ef-ruler .stage {
  position: relative !important;
  left: 24px !important;
  top: 26px !important;
}
.ef-ruler .ruler {
  background-color: rgb(var(--rgb-ninth-lighter)) !important;
  color: rgb(var(--rgb-light-dark)) !important;
}
.ef-ruler .ruler.top {
  width: 100% !important;
  border-bottom: 1px solid rgb(var(--rgb-darkest)) !important;
}
.ef-ruler .ruler.left {
  height: 100% !important;
  border-right: 1px solid rgb(var(--rgb-darkest)) !important;
}
.ef-ruler .corner {
  background-color: rgb(var(--rgb-ninth-lighter)) !important;
  border-color: rgb(var(--rgb-darkest)) !important;
}
.ef-ruler .tick {
  background: rgb(var(--rgb-light-dark)) !important;
}
.ef-ruler .top-arrow {
  border-top-color: rgb(var(--rgb-darkest)) !important;
}
.ef-ruler .left-arrow {
  border-left-color: rgb(var(--rgb-darkest)) !important;
}

.start {
  height: 100%;
  width: 100%;
  background-color: rgb(var(--rgb-lime-100));
  border-radius: 50%;
  border: 2px solid rgb(var(--rgb-lime-500));
  color: rgb(var(--rgb-darkest));
  font-size: 15px;
}

.start- {
  height: 100%;
  width: 100%;
  background-color: rgb(var(--rgb-blue-100));
  border-radius: 50%;
  border: 2px solid rgb(var(--rgb-blue-500));
  color: rgb(var(--rgb-darkest));
  font-size: 15px;
}

.end {
  height: 100%;
  width: 100%;
  background-color: rgb(var(--rgb-red-100));
  border-radius: 50%;
  border: 2px solid rgb(var(--rgb-red-400));
  color: rgb(var(--rgb-darkest));
  font-size: 15px;
}

.workflowe {
  height: 100%;
  width: 100%;
  background-color: rgb(var(--rgb-yellow-100));
  border-radius: 10%;
  border: 2px solid rgb(var(--rgb-yellow-500));
  display: flex;
  align-items: start;
  justify-content: center;
  color: rgb(var(--rgb-darkest));
  font-size: 15px;
}

.con {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.41 31.41" preserveAspectRatio="none"><defs><style> .cls-1 { fill: rgb(243, 232, 255); stroke: rgb(168, 85, 247);stroke-miterlimit: 10; } </style></defs><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="m15.71,30.71L.71,15.71,15.71.71l15,15-15,15Z"/></g></svg>');
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  color: rgb(var(--rgb-darkest));
  font-size: 15px;
}

body.dark .start, body.faragard-dark .start, body.blue-dark .start, body.orange-dark .start, body.fuchsia-dark .start, body.pink-dark .start, body.emerald-dark .start, body.red-dark .start, body.sky-dark .start, body.yellow-dark .start, body.green-dark .start, body.purple-dark .start, body.indigo-dark .start, body.slate-dark .start, body.yellow-blue-dark .start {
  background-color: rgb(var(--rgb-lime-700));
  border-color: rgb(var(--rgb-lime-400));
}
body.dark .start-, body.faragard-dark .start-, body.blue-dark .start-, body.orange-dark .start-, body.fuchsia-dark .start-, body.pink-dark .start-, body.emerald-dark .start-, body.red-dark .start-, body.sky-dark .start-, body.yellow-dark .start-, body.green-dark .start-, body.purple-dark .start-, body.indigo-dark .start-, body.slate-dark .start-, body.yellow-blue-dark .start- {
  background-color: rgb(var(--rgb-blue-700));
  border-color: rgb(var(--rgb-blue-400));
}
body.dark .end, body.faragard-dark .end, body.blue-dark .end, body.orange-dark .end, body.fuchsia-dark .end, body.pink-dark .end, body.emerald-dark .end, body.red-dark .end, body.sky-dark .end, body.yellow-dark .end, body.green-dark .end, body.purple-dark .end, body.indigo-dark .end, body.slate-dark .end, body.yellow-blue-dark .end {
  background-color: rgb(var(--rgb-red-700));
  border-color: rgb(var(--rgb-red-400));
}
body.dark .workflowe, body.faragard-dark .workflowe, body.blue-dark .workflowe, body.orange-dark .workflowe, body.fuchsia-dark .workflowe, body.pink-dark .workflowe, body.emerald-dark .workflowe, body.red-dark .workflowe, body.sky-dark .workflowe, body.yellow-dark .workflowe, body.green-dark .workflowe, body.purple-dark .workflowe, body.indigo-dark .workflowe, body.slate-dark .workflowe, body.yellow-blue-dark .workflowe {
  background-color: rgb(var(--rgb-yellow-700));
  border-color: rgb(var(--rgb-yellow-400));
}
body.dark .con, body.faragard-dark .con, body.blue-dark .con, body.orange-dark .con, body.fuchsia-dark .con, body.pink-dark .con, body.emerald-dark .con, body.red-dark .con, body.sky-dark .con, body.yellow-dark .con, body.green-dark .con, body.purple-dark .con, body.indigo-dark .con, body.slate-dark .con, body.yellow-blue-dark .con {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.41 31.41" preserveAspectRatio="none"><defs><style> .cls-1 { fill: rgb(126, 34, 206); stroke: rgb(192, 132, 252);stroke-miterlimit: 10; } </style></defs><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="m15.71,30.71L.71,15.71,15.71.71l15,15-15,15Z"/></g></svg>');
  border-color: rgb(var(--rgb-purple-400));
}

.flow-module-shape center {
  overflow: hidden;
  transition: all 200ms;
}
.flow-module-shape center .span {
  padding: 0 16px;
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.flow-module-shape center:not(:active):hover .span {
  white-space: nowrap;
  text-wrap: nowrap;
  animation: floatTextSide 8s infinite cubic-bezier(0, 0.6, 1, 0.4);
  overflow: visible;
  display: inline-block;
}

@keyframes floatTextSide {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(200%);
  }
}
.draggable {
  position: relative;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  display: inline;
  cursor: pointer;
}

.bordered {
  border: 0.75px solid rgb(var(--rgb-sky-600)) !important;
}

.resizable {
  width: 100px;
}

.resizable img,
.resizable svg {
  width: 100%;
}

.ui-resizable-handle {
  background: rgb(var(--rgb-sky-600));
  border: 1px solid rgb(var(--rgb-light));
  width: 9px;
  height: 9px;
  z-index: 2;
}

.ui-resizable-se {
  right: -5px;
  bottom: -5px;
}
html[dir=ltr] .ui-resizable-se {
  left: -5px;
  right: 0;
}

.ui-rotatable-handle {
  background: #f5dc58;
  border: 1px solid #fff;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  cursor: pointer;
  height: 10px;
  left: 50%;
  margin: 0 0 0 -5px;
  position: absolute;
  top: -5px;
  width: 10px;
}

.ui-rotatable-handle.ui-draggable-dragging {
  visibility: hidden;
}

.modules_items_select {
  border: 0.75px solid rgb(var(--rgb-sky-600)) !important;
}

.boder-color-primary {
  border-color: rgb(var(--rgb-sky-600)) !important;
}

.right {
  text-align: right !important;
}

.left {
  text-align: left !important;
}

.center {
  text-align: center !important;
}

.foo {
  position: absolute;
  transform: translate(-50%, -120%) !important;
  left: 462px;
  top: 200px;
  color: rgb(var(--rgb-dark));
  font-size: 14px;
  z-index: 30 !important;
  cursor: pointer;
}

path,
.jtk-endpoint {
  cursor: pointer;
}

[jtk-not-draggable] {
  border: 2px solid darkorange !important;
}

/* Workflow end */
/* Role box start */
.role-wrapper {
  display: flex;
  width: 100%;
  height: 150px;
  position: relative;
}
.role-content {
  border: 1.5px solid rgb(var(--rgb-darkest), 0.2);
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 8px;
}
.role-title {
  position: absolute;
  color: rgb(var(--rgb-light-dark));
  left: 0;
  top: 0;
  border-right: 1.5px solid rgb(var(--rgb-darkest), 0.2);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center;
  font-size: 12px;
  padding: 8px;
  line-height: 22px;
  height: 100%;
  vertical-align: middle;
}

/* Role box end */
/* Chart start */
.chart-wrapper {
  background-color: rgb(var(--rgb-ninth-lighter));
  height: 500px;
  position: relative;
  -webkit-tap-highlight-color: rgba(var(--rgb-ninth-lighter), 0);
  cursor: auto;
}
.chart-wrapper:focus, .chart-wrapper:focus-visible, .chart-wrapper:focus-within {
  outline: none !important;
  border: none !important;
}
.chart-wrapper canvas:focus, .chart-wrapper canvas:focus-visible, .chart-wrapper canvas:focus-within {
  outline: none !important;
  border: none !important;
}

/* Chart end */
.bg-img-transparent {
  background: url("../images/admin/transparent.png") repeat !important;
}

body.dark .bg-img-transparent, body.faragard-dark .bg-img-transparent, body.blue-dark .bg-img-transparent, body.orange-dark .bg-img-transparent, body.fuchsia-dark .bg-img-transparent, body.pink-dark .bg-img-transparent, body.emerald-dark .bg-img-transparent, body.red-dark .bg-img-transparent, body.sky-dark .bg-img-transparent, body.yellow-dark .bg-img-transparent, body.green-dark .bg-img-transparent, body.purple-dark .bg-img-transparent, body.indigo-dark .bg-img-transparent, body.slate-dark .bg-img-transparent, body.yellow-blue-dark .bg-img-transparent {
  background: linear-gradient(rgba(var(--rgb-black), 0.6), rgba(var(--rgb-black), 0.6)), url("../images/admin/transparent.png") repeat !important;
}

.p404-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
}
.p404-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: rgb(var(--rgb-first));
}
.p404-image {
  width: 640px;
  max-width: 90%;
  padding: 16px 0;
}

/* Admin modules start*/
.module-item {
  border: 1px solid rgb(var(--rgb-light));
  padding: 12px 16px;
  border-radius: 8px;
  min-width: 140px;
  width: auto;
  background-color: rgb(var(--rgb-lightest), 0.2);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 200ms;
  color: rgb(var(--rgb-light-dark)) !important;
}
.module-item:hover {
  background-color: rgb(var(--rgb-darkest), 0.04);
}

/* Admin modules end*/
div.row > div.row {
  margin-right: 0px;
  margin-left: 0px;
  height: auto;
}

.lg-thumb-item {
  height: 100px !important;
  width: 100px !important;
  object-fit: cover !important;
}

.min-height-470 .min-height-470 {
  min-height: max-content !important;
}

.min-height-470 .min-height-470 > .form-group {
  padding: 0px;
}

#bot-content {
  margin-top: 20px;
}

.workflow_theme.details {
  height: 40px;
}

#form_nav {
  min-height: 56px;
}

.details {
  min-height: 56px;
}

/* admin boards start */
.board {
  background-color: rgb(var(--rgb-light));
}
.board-box {
  width: 100%;
  height: 260px;
  border-radius: 6px;
  padding-bottom: 6px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 6px 0 rgba(var(--rgb-darkest), 0.1);
}
.board-box-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
}
.board-box-content {
  display: flex;
  gap: 6px;
  flex-direction: column;
  overflow: auto;
  padding: 1px 6px;
  height: 100%;
  max-height: 100%;
}
.board-box .ui-sortable-placeholder {
  outline-color: rgb(var(--rgb-light-dark));
}
.board-box-item {
  background-color: rgb(var(--rgb-ninth-lighter));
  border-radius: 4px;
  padding: 6px;
  cursor: pointer;
  transition: background-color 200ms;
  box-shadow: 0 1px 4px 0 rgba(var(--rgb-darkest), 0.1);
}
.board-box-item:hover {
  background-color: rgba(var(--rgb-ninth-lighter), 0.9);
}
.board-box-item h6 {
  font-size: 13px;
  line-height: 22px;
}
.board-box-item-date {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgb(var(--rgb-dark));
}
.board-box-item-users {
  display: flex;
  gap: 4px;
  align-items: center;
  border-top: 1px solid rgb(var(--rgb-light));
  padding: 6px 4px 0 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.board-box-item-user {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgb(var(--rgb-orange-600));
}
.board-box-item-user img,
.board-box-item-user svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.board-box-item.draggable {
  top: 0;
}
.board-red {
  background-color: rgb(var(--rgb-red-500));
}
.board-green {
  background-color: rgb(var(--rgb-green-500));
}
.board-yellow {
  background-color: rgb(var(--rgb-yellow-300));
}
.board-indigo {
  background-color: rgb(var(--rgb-indigo-300));
}
.board-pink {
  background-color: rgb(var(--rgb-pink-300));
}
.board-lime {
  background-color: rgb(var(--rgb-lime-300));
}
.board-amber {
  background-color: rgb(var(--rgb-amber-600));
}
.board-blue {
  background-color: rgb(var(--rgb-blue-300));
}
.board-emerald {
  background-color: rgb(var(--rgb-emerald-300));
}
.board-sky {
  background-color: rgb(var(--rgb-sky-300));
}
.board-gray {
  background-color: rgb(var(--rgb-gray-300));
}
.board-violet {
  background-color: rgb(var(--rgb-violet-300));
}

body.dark .board-red, body.faragard-dark .board-red, body.blue-dark .board-red, body.orange-dark .board-red, body.fuchsia-dark .board-red, body.pink-dark .board-red, body.emerald-dark .board-red, body.red-dark .board-red, body.sky-dark .board-red, body.yellow-dark .board-red, body.green-dark .board-red, body.purple-dark .board-red, body.indigo-dark .board-red, body.slate-dark .board-red, body.yellow-blue-dark .board-red {
  background-color: rgb(var(--rgb-red-700));
}
body.dark .board-green, body.faragard-dark .board-green, body.blue-dark .board-green, body.orange-dark .board-green, body.fuchsia-dark .board-green, body.pink-dark .board-green, body.emerald-dark .board-green, body.red-dark .board-green, body.sky-dark .board-green, body.yellow-dark .board-green, body.green-dark .board-green, body.purple-dark .board-green, body.indigo-dark .board-green, body.slate-dark .board-green, body.yellow-blue-dark .board-green {
  background-color: rgb(var(--rgb-green-700));
}
body.dark .board-yellow, body.faragard-dark .board-yellow, body.blue-dark .board-yellow, body.orange-dark .board-yellow, body.fuchsia-dark .board-yellow, body.pink-dark .board-yellow, body.emerald-dark .board-yellow, body.red-dark .board-yellow, body.sky-dark .board-yellow, body.yellow-dark .board-yellow, body.green-dark .board-yellow, body.purple-dark .board-yellow, body.indigo-dark .board-yellow, body.slate-dark .board-yellow, body.yellow-blue-dark .board-yellow {
  background-color: rgb(var(--rgb-yellow-700));
}
body.dark .board-indigo, body.faragard-dark .board-indigo, body.blue-dark .board-indigo, body.orange-dark .board-indigo, body.fuchsia-dark .board-indigo, body.pink-dark .board-indigo, body.emerald-dark .board-indigo, body.red-dark .board-indigo, body.sky-dark .board-indigo, body.yellow-dark .board-indigo, body.green-dark .board-indigo, body.purple-dark .board-indigo, body.indigo-dark .board-indigo, body.slate-dark .board-indigo, body.yellow-blue-dark .board-indigo {
  background-color: rgb(var(--rgb-indigo-700));
}
body.dark .board-pink, body.faragard-dark .board-pink, body.blue-dark .board-pink, body.orange-dark .board-pink, body.fuchsia-dark .board-pink, body.pink-dark .board-pink, body.emerald-dark .board-pink, body.red-dark .board-pink, body.sky-dark .board-pink, body.yellow-dark .board-pink, body.green-dark .board-pink, body.purple-dark .board-pink, body.indigo-dark .board-pink, body.slate-dark .board-pink, body.yellow-blue-dark .board-pink {
  background-color: rgb(var(--rgb-pink-700));
}
body.dark .board-lime, body.faragard-dark .board-lime, body.blue-dark .board-lime, body.orange-dark .board-lime, body.fuchsia-dark .board-lime, body.pink-dark .board-lime, body.emerald-dark .board-lime, body.red-dark .board-lime, body.sky-dark .board-lime, body.yellow-dark .board-lime, body.green-dark .board-lime, body.purple-dark .board-lime, body.indigo-dark .board-lime, body.slate-dark .board-lime, body.yellow-blue-dark .board-lime {
  background-color: rgb(var(--rgb-lime-700));
}
body.dark .board-amber, body.faragard-dark .board-amber, body.blue-dark .board-amber, body.orange-dark .board-amber, body.fuchsia-dark .board-amber, body.pink-dark .board-amber, body.emerald-dark .board-amber, body.red-dark .board-amber, body.sky-dark .board-amber, body.yellow-dark .board-amber, body.green-dark .board-amber, body.purple-dark .board-amber, body.indigo-dark .board-amber, body.slate-dark .board-amber, body.yellow-blue-dark .board-amber {
  background-color: rgb(var(--rgb-amber-800));
}
body.dark .board-blue, body.faragard-dark .board-blue, body.blue-dark .board-blue, body.orange-dark .board-blue, body.fuchsia-dark .board-blue, body.pink-dark .board-blue, body.emerald-dark .board-blue, body.red-dark .board-blue, body.sky-dark .board-blue, body.yellow-dark .board-blue, body.green-dark .board-blue, body.purple-dark .board-blue, body.indigo-dark .board-blue, body.slate-dark .board-blue, body.yellow-blue-dark .board-blue {
  background-color: rgb(var(--rgb-blue-700));
}
body.dark .board-emerald, body.faragard-dark .board-emerald, body.blue-dark .board-emerald, body.orange-dark .board-emerald, body.fuchsia-dark .board-emerald, body.pink-dark .board-emerald, body.emerald-dark .board-emerald, body.red-dark .board-emerald, body.sky-dark .board-emerald, body.yellow-dark .board-emerald, body.green-dark .board-emerald, body.purple-dark .board-emerald, body.indigo-dark .board-emerald, body.slate-dark .board-emerald, body.yellow-blue-dark .board-emerald {
  background-color: rgb(var(--rgb-emerald-700));
}
body.dark .board-sky, body.faragard-dark .board-sky, body.blue-dark .board-sky, body.orange-dark .board-sky, body.fuchsia-dark .board-sky, body.pink-dark .board-sky, body.emerald-dark .board-sky, body.red-dark .board-sky, body.sky-dark .board-sky, body.yellow-dark .board-sky, body.green-dark .board-sky, body.purple-dark .board-sky, body.indigo-dark .board-sky, body.slate-dark .board-sky, body.yellow-blue-dark .board-sky {
  background-color: rgb(var(--rgb-sky-700));
}
body.dark .board-gray, body.faragard-dark .board-gray, body.blue-dark .board-gray, body.orange-dark .board-gray, body.fuchsia-dark .board-gray, body.pink-dark .board-gray, body.emerald-dark .board-gray, body.red-dark .board-gray, body.sky-dark .board-gray, body.yellow-dark .board-gray, body.green-dark .board-gray, body.purple-dark .board-gray, body.indigo-dark .board-gray, body.slate-dark .board-gray, body.yellow-blue-dark .board-gray {
  background-color: rgb(var(--rgb-gray-700));
}
body.dark .board-violet, body.faragard-dark .board-violet, body.blue-dark .board-violet, body.orange-dark .board-violet, body.fuchsia-dark .board-violet, body.pink-dark .board-violet, body.emerald-dark .board-violet, body.red-dark .board-violet, body.sky-dark .board-violet, body.yellow-dark .board-violet, body.green-dark .board-violet, body.purple-dark .board-violet, body.indigo-dark .board-violet, body.slate-dark .board-violet, body.yellow-blue-dark .board-violet {
  background-color: rgb(var(--rgb-violet-700));
}

/* admin boards end */
/* intltelInput start */
.iti input,
.iti input[type=tel],
.iti input[type=text] {
  padding-right: 0;
  padding-left: 32px;
}

.iti__flag-container {
  left: 0 !important;
  right: auto !important;
}
html[dir=ltr] .iti__flag-container {
  left: auto !important;
  right: 0;
}

/* intltelInput end */
.change-layer-box {
  width: 60px;
  height: 60px;
  z-index: 403;
  left: 5px;
  bottom: 5px;
}
html[dir=ltr] .change-layer-box {
  left: auto;
  right: 5px;
}

.change-layer-box > label {
  cursor: pointer;
}

.list_box_item {
  min-height: 180px;
}

[dir=rtl] .iti--allow-dropdown input,
[dir=rtl] .iti--allow-dropdown input[type=tel],
[dir=rtl] .iti--allow-dropdown input[type=text],
[dir=rtl] .iti--separate-dial-code input,
[dir=rtl] .iti--separate-dial-code input[type=tel],
[dir=rtl] .iti--separate-dial-code input[type=text] {
  padding-left: 60px !important;
}

.slideShowSwiper {
  border-radius: 12px;
  box-shadow: 0 2px 12px -1px rgba(var(--rgb-darkest), 0.08);
  padding: 0 !important;
  overflow: hidden;
}
.slideShowSwiper span {
  display: inline-block !important;
}
.slideShowSwiper:hover {
  border-color: rgb(var(--rgb-seventh-darker));
  box-shadow: 0 0 3px rgb(var(--rgb-seventh));
}

.slideshow-wrapper .swiper-slide {
  position: relative;
  width: 100% !important;
  height: 100%;
  transition: all 150ms;
}
.slideshow-wrapper .swiper-slide img,
.slideshow-wrapper .swiper-slide svg {
  width: 100%;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
}
.slideshow-title {
  top: 12px;
  right: 16px;
  font-size: 16px;
  position: absolute;
  color: rgb(var(--rgb-lighter));
  text-shadow: 1px 1px 2px rgba(var(--rgb-darkest), 0.7), 1px 1px 2px rgba(var(--rgb-darkest), 0.7), -1px -1px 2px rgba(var(--rgb-darkest), 0.7);
}
html[dir=ltr] .slideshow-title {
  left: 16px;
  right: 0;
}
html[dir=ltr] html[dir=ltr] .slideshow-title {
  right: 16px;
  left: auto;
}

.content-shadow-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 24px;
}
.content-shadow-item {
  background-color: rgb(var(--rgb-ninth-lighter));
  border-radius: 14px;
  box-shadow: 0 0 8px 1px rgba(var(--rgb-darkest), 0.1);
  display: flex;
  gap: 14px;
  flex-direction: column;
  padding: 16px;
}
.content-shadow-item img,
.content-shadow-item svg {
  width: 100%;
  height: 120px;
  border-radius: 12px;
}
.content-shadow-item-content {
  padding-top: 2px;
  text-align: center;
}
.content-shadow-item-content h6 {
  font-size: 13px;
  margin-bottom: 0;
}

@media only screen and (max-width: 575px) {
  #main-content {
    padding: 5px !important;
  }
}

.w-calc-3 {
  width: 33.3333333333%;
}

.text-align-left {
  text-align: left;
}

.ticket_history_height {
  height: 95px;
}

/* Ticket draw box start */
.ticket-draw-item {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 0 12px;
  background: rgb(var(--rgb-ninth-lighter));
  box-shadow: 0 0 16px -8px rgba(var(--rgb-darkest), 0.1);
}
.ticket-draw-item::before {
  content: "";
  position: absolute;
  width: 20px;
  height: calc(100% - 16px);
  background-color: transparent;
  border-left: 12px dotted rgba(var(--main-bg));
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
}
html[dir=ltr] .ticket-draw-item::before {
  right: -14px;
}

.ticket-draw-item::after {
  content: "";
  position: absolute;
  width: 20px;
  height: calc(100% - 16px);
  background-color: transparent;
  border-right: 12px dotted rgba(var(--main-bg));
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
}
html[dir=ltr] .ticket-draw-item::after {
  right: -14px;
  border-left: 12px dotted rgba(var(--main-bg));
  border-right: none;
}

.ticket-draw-item-right, .ticket-draw-item-left {
  padding: 20px;
  height: 100%;
}
.ticket-draw-item-right .day,
.ticket-draw-item-right .event, .ticket-draw-item-left .day,
.ticket-draw-item-left .event {
  color: #555;
  font-size: 20px;
  margin-bottom: 9px;
}
.ticket-draw-item-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 36%;
  position: relative;
  height: auto;
}
.ticket-draw-item-right .up-border,
.ticket-draw-item-right .down-border {
  padding: 14px 15px;
  background-color: rgb(var(--main-bg));
  border-radius: 50%;
  position: absolute;
  left: -16px;
}
html[dir=ltr] .ticket-draw-item-right .up-border,
html[dir=ltr] .ticket-draw-item-right .down-border {
  right: -16px;
  left: auto;
}

.ticket-draw-item-right .up-border {
  top: -13px;
}
.ticket-draw-item-right .down-border {
  bottom: -13px;
}
.ticket-draw-item-right .day {
  text-align: center;
  font-size: 30px;
}
.ticket-draw-item-left {
  width: 70%;
  padding: 16px 32px;
  border-right: 3px dashed rgb(var(--rgb-light));
}
html[dir=ltr] .ticket-draw-item-left {
  border-left: 3px dashed rgb(var(--rgb-light));
  border-right: none;
}

@media only screen and (max-width: 767px) {
  .ticket-draw-item-left {
    border-top: 3px dashed rgb(var(--rgb-light));
    border-right: none !important;
    border-left: none !important;
    flex-direction: column;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .ticket-draw-item {
    flex-direction: column;
  }
  .ticket-draw-item::before {
    top: auto;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 16px);
    height: 20px;
    border-left: none;
    border-right: none;
    border-bottom: 12px dotted rgba(var(--main-bg));
  }
  .ticket-draw-item::after {
    right: auto;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 16px);
    height: 20px;
    border-right: none;
    border-top: 12px dotted rgba(var(--main-bg));
  }
  html[dir=ltr] .ticket-draw-item::after {
    border-left: none;
    right: auto;
  }
  .ticket-draw-item-right {
    width: 100%;
  }
  .ticket-draw-item-right .up-border {
    top: auto;
    left: -28px;
    bottom: -16px;
    right: auto;
  }
  html[dir=ltr] .ticket-draw-item-right .up-border {
    left: auto;
    right: -28px;
  }
  .ticket-draw-item-right .down-border {
    bottom: -16px;
    right: -28px;
    left: auto;
  }
  html[dir=ltr] .ticket-draw-item-right .down-border {
    left: -28px;
    right: auto;
  }
}

/* Ticket draw box end */
/* Ticket profile start */
.ticket-profile-wrapper {
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 0 0 10px 0 rgba(var(--rgb-darkest), 0.06);
}
.ticket-profile-head {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 160px;
  background-color: rgb(var(--rgb-first));
  line-height: 24px;
}
.ticket-profile-img {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  right: 32px;
  bottom: -44px;
  border: 5px solid rgb(var(--rgb-seventh));
  box-shadow: 4px 4px 12px 0 rgba(var(--rgb-first-dark), 0.3);
}
html[dir=ltr] .ticket-profile-img {
  left: 32px;
  right: 0;
}

.ticket-profile-content {
  margin-top: 46px;
  margin-bottom: 18px;
  padding: 12px 0;
}

/* Ticket profile end */
/* Calendar widget start */
.brz-calendar-widget {
  display: grid;
  padding: 4px 8px;
  border-radius: 12px;
  height: 100%;
}
.brz-calendar-widget-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 6px 2px;
  transition: all 100ms;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.brz-calendar-widget-wrapper::-webkit-scrollbar {
  display: none;
}
.brz-calendar-day {
  width: 36px;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--rgb-first-lighter));
  color: rgb(var(--rgb-darkest));
  border-radius: 6px;
  box-shadow: 0 2px 5px -1px rgba(var(--rgb-darkest), 0.2);
  transition: all 150ms;
  cursor: pointer;
  user-select: none;
}
.brz-calendar-day.active {
  background-color: rgb(var(--rgb-first-light));
  color: rgb(var(--rgb-lightest));
}
.brz-calendar-holiday {
  color: rgb(var(--rgb-red-500));
}
.brz-calendar-active {
  background-color: rgb(var(--rgb-red-500));
  color: rgb(var(--rgb-lightest));
}
.brz-calendar-azan {
  display: flex;
  gap: 4px;
  font-size: 9px;
  justify-content: space-evenly;
  color: rgb(var(--rgb-light-dark));
}
.brz-calendar-azan span {
  font-size: 9px;
}
.brz-calendar-celebrate-wrapper {
  max-width: 100%;
  overflow: hidden;
  transition: all 200ms;
  height: 24px;
  position: relative;
}
.brz-calendar-celebrate-content {
  top: 0;
  right: 110%;
  position: absolute;
  width: fit-content;
  white-space: nowrap;
  text-wrap: nowrap;
  overflow: visible;
  display: inline-block;
  animation: floatTextSideCalendar 16s infinite linear;
}
html[dir=ltr] .brz-calendar-celebrate-content {
  left: 110%;
  right: 0;
}

.brz-calendar-celebrate-content span:not(:nth-of-type(1)):before {
  content: "*";
  color: rgb(var(--rgb-light-dark));
  margin-left: 8px;
  margin-right: 2px;
}

@keyframes floatTextSideCalendar {
  0% {
    right: 110%;
  }
  100% {
    right: -10%;
    transform: translateX(110%);
  }
}
@keyframes floatTextSideCalendar {
  0% {
    left: 110%;
  }
  100% {
    left: -10%;
    transform: translateX(110%);
  }
}

/* Calendar widget end */
/* Down Section Start */
.down-section {
  position: fixed;
  top: 100%;
  left: 0;
  right: 0;
  background-color: rgb(var(--main-bg));
  height: auto;
  z-index: 1200;
  transition: all 300ms ease-in-out;
  border-top: 1px solid rgb(var(--rgb-light));
}
html[dir=ltr] .down-section {
  left: 0;
  right: 0;
}

.down-section-btn {
  position: absolute;
  left: 24px;
  bottom: 100%;
  background-color: rgb(var(--rgb-first-lighter));
  border: 1px solid rgb(var(--rgb-light));
  color: rgb(var(--rgb-light-dark));
  width: 36px;
  height: 30px;
  border-radius: 8px 8px 0 0;
  display: grid;
  place-items: center;
  transition: all 300ms ease-in-out;
}
html[dir=ltr] .down-section-btn {
  right: 16px;
  left: auto;
}

.down-section-btn i {
  transition: all 300ms ease-in-out;
}
.down-section-btn.down i {
  rotate: 180deg;
}
.down-section.show {
  box-shadow: 2px 0 8px 0 rgba(var(--rgb-darkest), 0.1);
  transform: translateY(-100%);
}
.down-section-content {
  padding: 8px 12px;
}

/* Down Section End */
/* Payment Methods start */
.payment-method {
  width: 100%;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.payment-method input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.payment-method input[type=radio]:checked + .payment-method-label {
  border-color: rgb(var(--rgb-seventh));
  color: rgb(var(--rgb-seventh-darker));
  background-color: rgb(var(--rgb-first-lighter));
  box-shadow: 0 2px 8px 0 rgba(var(--rgb-darkest), 0.1);
}
.payment-method-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  min-width: 140px;
  padding: 8px 16px;
  gap: 8px;
  background-color: rgb(var(--rgb-lighter));
  color: rgb(var(--rgb-light-dark));
  border: 1px solid rgb(var(--rgb-light));
  border-radius: 8px;
  transition: all 200ms ease;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}
.payment-method-label i {
  font-size: 24px;
}

/* Payment Methods end */
.my-tab-item {
  font-weight: 600;
}
.my-tab-item.active button {
  background-color: rgb(var(--rgb-first));
  color: rgb(var(--rgb-lightest));
}
.my-tab-item:not(.active) > button:hover {
  opacity: 0.7;
}

.my-tab-item-button {
  min-width: 98px;
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  padding: 8px 13px;
  border: 1px solid transparent;
  outline: none;
  border-radius: 100px;
  white-space: nowrap;
  color: rgb(var(--rgb-first-darker));
  font-weight: normal;
  background-color: rgb(var(--rgb-first-light), 0.2);
}

/* Map loader start */
.map-loader {
  width: 64px;
  height: 64px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  background: rgba(var(--rgb-ninth-lighter), 1);
  box-shadow: 0 4px 30px rgba(var(--rgb-darkest), 0.1);
  border: 1px solid rgb(var(--rgb-light));
  border-radius: 16px;
  transition: all 200ms;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.map-loader-dots {
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: var(--radius-circle);
  position: absolute;
  text-indent: -9999em;
  animation: mulShdSpinMap 1.1s infinite ease;
  transform: translate(-50%, -50%) translateZ(0) scale(0.7);
  top: 50%;
  left: 50%;
  z-index: 99999;
  transition: all 200ms linear;
}
.map-loader.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

@keyframes mulShdSpinMap {
  0%, 100% {
    box-shadow: 0em -2.6em 0em 0em rgb(var(--rgb-first)), 1.8em -1.8em 0 0em rgba(var(--rgb-first), 0.2), 2.5em 0em 0 0em rgba(var(--rgb-first), 0.2), 1.75em 1.75em 0 0em rgba(var(--rgb-first), 0.2), 0em 2.5em 0 0em rgba(var(--rgb-first), 0.2), -1.8em 1.8em 0 0em rgba(var(--rgb-first), 0.2), -2.6em 0em 0 0em rgba(var(--rgb-first), 0.5), -1.8em -1.8em 0 0em rgba(var(--rgb-first), 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(var(--rgb-first), 0.7), 1.8em -1.8em 0 0em rgb(var(--rgb-first)), 2.5em 0em 0 0em rgba(var(--rgb-first), 0.2), 1.75em 1.75em 0 0em rgba(var(--rgb-first), 0.2), 0em 2.5em 0 0em rgba(var(--rgb-first), 0.2), -1.8em 1.8em 0 0em rgba(var(--rgb-first), 0.2), -2.6em 0em 0 0em rgba(var(--rgb-first), 0.2), -1.8em -1.8em 0 0em rgba(var(--rgb-first), 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(var(--rgb-first), 0.5), 1.8em -1.8em 0 0em rgba(var(--rgb-first), 0.7), 2.5em 0em 0 0em rgb(var(--rgb-first)), 1.75em 1.75em 0 0em rgba(var(--rgb-first), 0.2), 0em 2.5em 0 0em rgba(var(--rgb-first), 0.2), -1.8em 1.8em 0 0em rgba(var(--rgb-first), 0.2), -2.6em 0em 0 0em rgba(var(--rgb-first), 0.2), -1.8em -1.8em 0 0em rgba(var(--rgb-first), 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(var(--rgb-first), 0.2), 1.8em -1.8em 0 0em rgba(var(--rgb-first), 0.5), 2.5em 0em 0 0em rgba(var(--rgb-first), 0.7), 1.75em 1.75em 0 0em rgb(var(--rgb-first)), 0em 2.5em 0 0em rgba(var(--rgb-first), 0.2), -1.8em 1.8em 0 0em rgba(var(--rgb-first), 0.2), -2.6em 0em 0 0em rgba(var(--rgb-first), 0.2), -1.8em -1.8em 0 0em rgba(var(--rgb-first), 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(var(--rgb-first), 0.2), 1.8em -1.8em 0 0em rgba(var(--rgb-first), 0.2), 2.5em 0em 0 0em rgba(var(--rgb-first), 0.5), 1.75em 1.75em 0 0em rgba(var(--rgb-first), 0.7), 0em 2.5em 0 0em rgb(var(--rgb-first)), -1.8em 1.8em 0 0em rgba(var(--rgb-first), 0.2), -2.6em 0em 0 0em rgba(var(--rgb-first), 0.2), -1.8em -1.8em 0 0em rgba(var(--rgb-first), 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(var(--rgb-first), 0.2), 1.8em -1.8em 0 0em rgba(var(--rgb-first), 0.2), 2.5em 0em 0 0em rgba(var(--rgb-first), 0.2), 1.75em 1.75em 0 0em rgba(var(--rgb-first), 0.5), 0em 2.5em 0 0em rgba(var(--rgb-first), 0.7), -1.8em 1.8em 0 0em rgb(var(--rgb-first)), -2.6em 0em 0 0em rgba(var(--rgb-first), 0.2), -1.8em -1.8em 0 0em rgba(var(--rgb-first), 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(var(--rgb-first), 0.2), 1.8em -1.8em 0 0em rgba(var(--rgb-first), 0.2), 2.5em 0em 0 0em rgba(var(--rgb-first), 0.2), 1.75em 1.75em 0 0em rgba(var(--rgb-first), 0.2), 0em 2.5em 0 0em rgba(var(--rgb-first), 0.5), -1.8em 1.8em 0 0em rgba(var(--rgb-first), 0.7), -2.6em 0em 0 0em rgb(var(--rgb-first)), -1.8em -1.8em 0 0em rgba(var(--rgb-first), 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(var(--rgb-first), 0.2), 1.8em -1.8em 0 0em rgba(var(--rgb-first), 0.2), 2.5em 0em 0 0em rgba(var(--rgb-first), 0.2), 1.75em 1.75em 0 0em rgba(var(--rgb-first), 0.2), 0em 2.5em 0 0em rgba(var(--rgb-first), 0.2), -1.8em 1.8em 0 0em rgba(var(--rgb-first), 0.5), -2.6em 0em 0 0em rgba(var(--rgb-first), 0.7), -1.8em -1.8em 0 0em rgb(var(--rgb-first));
  }
}
/* Map loader end */
.border-radius-12 {
  border-radius: 12px;
}

.rotate-on-expand .expand-target {
  transition: all 200ms;
}
.rotate-on-expand .expand-target-show {
  display: none;
}
.rotate-on-expand .expand-target-hide {
  display: block;
}
.rotate-on-expand[aria-expanded=true] .expand-target {
  transform: rotate(180deg);
}
.rotate-on-expand[aria-expanded=true] .expand-target-show {
  display: block;
}
.rotate-on-expand[aria-expanded=true] .expand-target-hide {
  display: none;
}

/* Task Styles start */
.mzt-card {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(var(--rgb-slate-400), 0.2), 0 1px 3px 1px rgba(var(--rgb-slate-100), 0.2);
  transform: translateY(-2px);
  background-color: rgb(var(--rgb-ninth-lighter));
  transition: all 150ms ease-in-out;
  border: 2px solid transparent;
}
.mzt-card.active {
  border: 2px solid rgb(var(--rgb-second));
}
.mzt-card:hover {
  box-shadow: 0 5px 6px 0 rgba(var(--rgb-slate-400), 0.2), 0 1px 3px -1px rgba(var(--rgb-slate-700), 0.2);
  transform: translateY(-4px);
}
.mzt-card-footer {
  font-size: 11px;
  text-align: right;
  color: rgb(var(--rgb-slate-400));
  flex-direction: column;
  display: flex;
  padding: 12px 16px;
  gap: 8px;
  border-top: 1px solid rgb(var(--rgb-light));
  justify-content: center;
}
.mzt-card-middle {
  padding: 12px 16px;
  font-size: 12px;
  color: rgb(var(--rgb-darker));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mzt-card-header {
  position: relative;
  gap: 6px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 16px;
}
.mzt-card-header-badge {
  height: 20px;
  background-color: rgb(var(--rgb-first));
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(var(--rgb-lightest));
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  margin-top: 6px;
  background-color: rgb(var(--rgb-first));
  color: rgb(var(--rgb-lightest));
  padding: 1px 8px 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  position: absolute;
  z-index: 99;
  top: -12px;
  left: -8px;
}
.mzt-card-header-badge:empty {
  display: none;
}
.mzt-card-header img,
.mzt-card-header svg {
  height: 50px;
  width: 50px;
}
.mzt-card-header-circle {
  width: 50px;
  height: 50px;
  background-color: rgb(var(--rgb-first));
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
  font-size: 21px;
  letter-spacing: 4px;
}
.mzt-card-badge {
  background-color: rgb(var(--rgb-light-dark));
  color: rgb(var(--rgb-lighter));
  padding: 1px 8px 0;
  border-radius: 4px;
  font-size: 10px;
}
.mzt-card-badge:empty {
  display: none;
}

/* Task Styles end */
/* Leaflet draw start */
.leaflet-marker-icon {
  transition: transform 0.5s ease-in-out !important;
}
.leaflet-smooth {
  transition: transform 300ms ease-in-out !important;
}
.leaflet-custom-label {
  font-weight: bold;
  font-size: 14px;
  color: rgb(var(--rgb-darkest));
  padding: 10px;
  border-radius: 6px;
  white-space: normal; /* از nowrap به normal تغییر داده شد تا متن به صورت چند خطی نمایش داده شود */
  max-width: 200px; /* حداکثر عرض افزایش یافته است */
  text-align: center;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(var(--rgb-darkest), 0.2);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.leaflet-custom-label-arrow-up::before {
  content: "";
  border: 6px solid transparent;
  border-bottom-color: rgb(var(--rgb-ninth-lighter));
  position: absolute;
  top: -10px;
  left: 50%;
  z-index: 10;
  width: 6px;
  height: 6px;
  transform: translateX(-50%);
}
.leaflet-custom-label-success {
  box-shadow: 0 2px 6px rgba(var(--rgb-green-800), 0.2);
  background-color: rgb(var(--rgb-green-500)) !important;
  color: rgb(var(--rgb-lightest));
}
.leaflet-custom-label-success::before {
  border-bottom-color: rgb(var(--rgb-green-500));
}
.leaflet-custom-label-danger {
  box-shadow: 0 2px 6px rgba(var(--rgb-red-800), 0.2);
  background-color: rgb(var(--rgb-red-500)) !important;
  color: rgb(var(--rgb-lightest));
}
.leaflet-custom-label-danger::before {
  border-bottom-color: rgb(var(--rgb-red-500));
}
.leaflet-custom-label-warning {
  box-shadow: 0 2px 6px rgba(var(--rgb-amber-800), 0.2);
  background-color: rgb(var(--rgb-amber-500)) !important;
  color: rgb(var(--rgb-lightest));
}
.leaflet-custom-label-warning::before {
  border-bottom-color: rgb(var(--rgb-amber-500));
}
.leaflet-custom-label-info {
  box-shadow: 0 2px 6px rgba(var(--rgb-sky-800), 0.2);
  background-color: rgb(var(--rgb-sky-500)) !important;
  color: rgb(var(--rgb-lightest));
}
.leaflet-custom-label-info::before {
  border-bottom-color: rgb(var(--rgb-sky-500));
}
.leaflet-draw-toolbar a {
  background-image: none !important;
}
.leaflet-marker-draggable {
  transition: none !important;
}

.leaflet-draw-toolbar a.leaflet-draw-draw-polygon {
  color: rgb(var(--rgb-darkert)) !important;
}

.leaflet-draw-section {
  border-radius: 4px;
  box-shadow: none !important;
}

.leaflet-draw-actions a:hover {
  color: rgb(var(--rgb-first-darker));
  background-color: rgb(var(--rgb-first-lighter));
}

.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  border: none;
}

.leaflet-custom-label {
  background: rgba(var(--rgb-ninth-lighter));
  border: 1px solid rgb(var(--rgb-light));
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  text-align: center;
  min-width: fit-content;
  white-space: nowrap;
}

.distance-label {
  white-space: nowrap;
  display: inline-block;
  padding: 8px 4px 8px 4px;
  font-size: 12px;
}

/* Leaflet draw end */
/* Bill pay styles */
.bill-pay {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  place-items: center;
  gap: 12px;
}
.bill-pay-img {
  max-width: 100%;
  height: 50px;
  width: 50px;
  border-radius: 8px;
  object-fit: cover;
}

.nav-tabs-light ul {
  flex-shrink: 1 !important;
}
.nav-tabs-light ul li {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-tabs-light ul li .nav-link {
  width: 100%;
  text-align: center;
  border: none;
  background-color: rgb(var(--rgb-seventh-lighter));
  border-radius: 8px;
  padding: 12px;
  color: rgb(var(--rgb-seventh-darker));
  transition: all 200ms;
}
.nav-tabs-light ul li .nav-link.active {
  color: rgb(var(--rgb-lightest)) !important;
  background-color: rgb(var(--rgb-seventh-dark)) !important;
}

/* Checkout page start */
.checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 2px 2px 8px 0 rgba(var(--rgb-darkest), 0.06);
  border-radius: 0 0 12px 12px;
  position: sticky;
  top: 0;
  height: 80px;
  width: 100%;
  z-index: 1000;
}
.checkout-header img {
  max-width: 100%;
  flex-shrink: 1;
}
.checkout-content-sticky {
  position: sticky !important;
  top: 80px;
}
.checkout-input {
  text-align: center;
  padding: 22px 16px !important;
}
input.checkout-header-input::placeholder, input.checkout-header-input::-ms-input-placeholder {
  color: red !important;
}

.checkout-input.mono-space {
  letter-spacing: 3px;
}
.checkout-input.space-left {
  padding-left: 48px !important;
}
@media only screen and (max-width: 767px) {
  .checkout-input {
    font-size: 0.8em !important;
  }
}
.checkout-list {
  max-height: 90px;
  overflow-y: auto;
}
.checkout-list-item {
  background-color: rgb(var(--rgb-darkest), 0.02);
  transition: all 200ms;
  cursor: pointer;
  color: rgb(var(--rgb-darker));
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media only screen and (max-width: 992px) {
  .checkout-list-item {
    font-size: 11px;
    font-size: 0.8em;
  }
}
@media only screen and (max-width: 767px) {
  .checkout-list-item {
    font-size: 0.7em;
  }
}
.checkout-list-item:hover {
  background-color: rgb(var(--rgb-darkest), 0.04);
}
.checkout-list-item:not(:nth-last-child(1)) {
  border-bottom: 0.5px solid rgba(var(--rgb-light), 0.8);
}
.checkout-popup {
  width: 100%;
  min-height: 100px;
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 2px 2px 8px 0 rgba(var(--rgb-darkest), 0.1);
  border-radius: 12px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 200ms;
  padding: 12px;
}
.checkout-popup.active {
  transform: translateY(-6px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.checkout-popup-keyboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(30px, 1fr));
  gap: 16px;
}

/* Checkout page end */
.pc-wrapper {
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding-bottom: 60px;
  perspective: 1000px;
  transform-style: preserve-3d;
  user-select: none;
}
.pc-lid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top;
}
.pc-lid-wrapper {
  perspective: 1000px;
  transform-style: preserve-3d;
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  transition: all 300ms cubic-bezier(0.22, 0.49, 0.82, 0.49);
  transform-origin: top;
}
.pc-lid-first {
  width: 100%;
  height: 100%;
  background-size: contain !important;
  background: url("../../assets/images/my/postalcard/flap.webp") no-repeat;
  transform: rotate(0deg);
  user-select: none;
  position: relative !important;
  z-index: 10;
}
.pc-lid-second {
  z-index: 10;
  background: url("../../assets/images/my/postalcard/linings.webp") no-repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-size: cover !important;
  transform: rotateY(180deg) rotate(180deg);
  user-select: none;
  position: absolute;
  top: 92%;
  left: 0;
  right: 0;
  height: 92%;
  background-position: top;
  transition: all 200ms;
}
.pc-lid-second.active {
  height: 136%;
}
.pc-lid-third {
  z-index: 11;
  background: url("../../assets/images/my/postalcard/flap-shadow.png") no-repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-size: contain !important;
  transform: rotateY(180deg) rotate(180deg);
  user-select: none;
  position: absolute;
  top: 90%;
  left: 0;
  right: 0;
  height: 90%;
  background-position: bottom;
}
.pc-lid-btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 140px;
  z-index: 10;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.pc-lid-btn-front {
  width: 100%;
  height: 100%;
  background-size: contain !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: url("../../assets/images/my/postalcard/button.front.webp") no-repeat;
  transform: rotate(0deg);
  user-select: none;
  position: absolute !important;
  z-index: 10;
}
.pc-lid-btn-back {
  width: 100%;
  height: 100%;
  background-size: contain !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: url("../../assets/images/my/postalcard/button.back.webp") no-repeat;
  transform: rotateX(180deg);
  user-select: none;
  position: absolute !important;
  z-index: 10;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.pc-letter {
  position: absolute;
  top: 0px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background-color: transparent;
  background-position: right;
  background-repeat: no-repeat;
  border-radius: 1px;
  transform-origin: center;
  transition: all 600ms cubic-bezier(0.22, 0.49, 0.82, 0.49);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}
.pc-letter-content, .pc-letter-content-back {
  position: absolute;
  width: 449px;
  height: 629px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 5px;
  transform: rotate(-90deg);
  user-select: none;
}
.pc-letter-content {
  background-color: transparent;
  z-index: 2;
}
.pc-letter-content-back {
  position: relative;
  z-index: 0;
  background-color: transparent;
  transform: rotate(-90deg) rotateY(180deg);
}
.pc-navbar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: rgb(var(--rgb-ninth-lighter), 0.9);
  box-shadow: -2px 0px 8px 0 rgba(var(--rgb-darkest), 0.1);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  z-index: 1300;
  transition: all 300ms;
}
.pc-navbar.behind {
  background-color: transparent;
  box-shadow: none;
}
.pc-envelope {
  position: absolute;
  height: 451px;
  width: 631px;
  top: 0;
  left: 0;
  z-index: 3;
}
.pc-envelope-first {
  width: 100%;
  height: 100%;
  background: url("../images/my/postalcard/back.webp") no-repeat;
  background-size: contain;
  user-select: none;
}
.pc-envelope-second {
  position: absolute;
}
.pc-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(var(--rgb-darkest), 0.1);
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.pc-overlay.show {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}
.pc-btn-third {
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: -1px 1px 5px 0 rgba(var(--rgb-darkest), 0.1);
  z-index: 2000;
}
.pc-flip-card {
  background-color: transparent;
  height: 450px;
  width: 630px;
  min-height: 450px;
  min-width: 630px;
  perspective: 1000px;
  transition: all 600ms linear;
  z-index: 1200;
}
.pc-flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  z-index: 1200;
}
.pc-flip-card-front, .pc-flip-card-back {
  position: absolute;
  height: 451px;
  width: 631px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.pc-flip-card-back {
  right: 50%;
  background: url("../images/my/postalcard/paper-texture.jpg") no-repeat;
  transform: rotateX(180deg) rotate(180deg) translateX(-50%);
}

#companyName {
  position: absolute;
  top: -95%;
  text-align: center;
  color: white;
  font-weight: 800;
  left: 30%;
  right: 30%;
}

.my-ad-section {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90px;
  position: fixed;
  z-index: 2760;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgb(var(--rgb-light));
}
.my-ad-section-controls {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
}
.my-ad-section-controls.model5 {
  top: 12px;
  left: 12px;
  right: auto;
}
.my-ad-section-controls.model7 {
  top: 4px;
  right: 4px;
  left: auto;
}
.my-ad-section-controls.model3 {
  top: auto;
  left: 4px;
  right: auto;
  bottom: 4px;
}
.my-ad-section-controls.model9 {
  top: auto;
  left: auto;
  right: 4px;
  bottom: 4px;
}
.my-ad-section-controls div,
.my-ad-section-controls button,
.my-ad-section-controls a {
  width: 22px;
  height: 22px;
  display: grid;
  padding: 0 !important;
  place-items: center;
  border-radius: 3px;
}
.my-ad-section img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}
.my-ad-section.model1 {
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 90px;
}
.my-ad-section.model7 {
  top: 0;
  right: 0;
  left: auto;
  width: 180px;
  height: 180px;
  max-width: 20dvh;
  max-height: 20dvh;
  border-bottom-left-radius: 100%;
}
.my-ad-section.model5 {
  top: 0;
  left: 0;
  right: auto;
  width: 180px;
  height: 180px;
  max-width: 20dvh;
  max-height: 20dvh;
  border-bottom-right-radius: 100%;
}
.my-ad-section.model6 {
  top: 0;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 90px;
  min-width: 40dvh;
  min-width: 60dvh;
}
.my-ad-section.model4 {
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: auto;
  width: 90px;
  height: auto;
  min-height: 40dvh;
}
.my-ad-section.model8 {
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  left: auto;
  width: 90px;
  height: auto;
  min-height: 40dvh;
}
.my-ad-section.model2 {
  top: auto;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 90px;
}
.my-ad-section.model9 {
  top: auto;
  bottom: 0;
  right: 0;
  left: auto;
  width: 180px;
  height: 180px;
  max-width: 20dvh;
  max-height: 20dvh;
  border-top-left-radius: 100%;
}
.my-ad-section.model3 {
  top: auto;
  bottom: 0;
  left: 0;
  right: auto;
  width: 180px;
  height: 180px;
  max-width: 20dvh;
  max-height: 20dvh;
  border-top-right-radius: 100%;
}
.my-ad-section.model10 {
  top: auto;
  bottom: 0;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 90px;
  min-width: 40dvh;
  min-width: 60dvh;
}

.my-ad {
  position: fixed;
  background: rgb(var(--rgb-ninth-lighter));
  display: flex;
  align-items: center;
  flex-direction: column;
  font-weight: bold;
  z-index: 2;
  overflow: hidden;
}
.my-ad * {
  max-height: var(--ad-height);
}
.my-ad-top {
  top: 0;
  left: 0;
  right: 0;
  height: var(--ad-height);
}
.my-ad-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--ad-height);
}
.my-ad-left {
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--ad-width);
  text-orientation: mixed;
}
.my-ad-right {
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--ad-width);
  text-orientation: mixed;
}

body:has(.my-ad-top:not(.hide)) .my-main-container {
  margin-top: var(--ad-height);
  min-height: calc(100dvh - var(--ad-height));
}

body:has(.my-ad-bottom:not(.hide)) .my-main-container {
  margin-bottom: var(--ad-height);
  min-height: calc(100dvh - var(--ad-height));
}

body:has(.my-ad-left:not(.hide)) .my-main-container {
  margin-left: var(--ad-width);
  width: calc(100% - var(--ad-width));
}

body:has(.my-ad-right:not(.hide)) .my-main-container {
  margin-right: var(--ad-width);
  width: calc(100% - var(--ad-width));
}

body:has(.my-ad-top:not(.hide)):has(.my-ad-bottom:not(.hide)) .my-main-container {
  min-height: calc(100dvh - var(--ad-height) * 2);
}

body:has(.my-ad-left:not(.hide)):has(.my-ad-right:not(.hide)) .my-main-container {
  width: calc(100% - var(--ad-width) * 2);
}

body:has(.my-ad-top:not(.hide)):has(.my-ad-left:not(.hide)) .my-main-container {
  margin-top: var(--ad-height);
  margin-left: var(--ad-width);
  width: calc(100% - var(--ad-width));
  min-height: calc(100dvh - var(--ad-height));
}

body:has(.my-ad-top:not(.hide)):has(.my-ad-right:not(.hide)) .my-main-container {
  margin-top: var(--ad-height);
  margin-right: var(--ad-width);
  width: calc(100% - var(--ad-width));
  min-height: calc(100dvh - var(--ad-height));
}

body:has(.my-ad-bottom:not(.hide)):has(.my-ad-left:not(.hide)) .my-main-container {
  margin-bottom: var(--ad-height);
  margin-left: var(--ad-width);
  width: calc(100% - var(--ad-width));
  min-height: calc(100dvh - var(--ad-height));
}

body:has(.my-ad-bottom:not(.hide)):has(.my-ad-right:not(.hide)) .my-main-container {
  margin-bottom: var(--ad-height);
  margin-right: var(--ad-width);
  width: calc(100% - var(--ad-width));
  min-height: calc(100dvh - var(--ad-height));
}

body:has(.my-ad-top:not(.hide)):has(.my-ad-bottom:not(.hide)):has(.my-ad-left:not(.hide)) .my-main-container {
  margin: var(--ad-height) 0 var(--ad-height) var(--ad-width);
  width: calc(100% - var(--ad-width));
  min-height: calc(100dvh - var(--ad-height) * 2);
}

body:has(.my-ad-top:not(.hide)):has(.my-ad-bottom:not(.hide)):has(.my-ad-right:not(.hide)) .my-main-container {
  margin: var(--ad-height) var(--ad-width) var(--ad-height) 0;
  width: calc(100% - var(--ad-width));
  min-height: calc(100dvh - var(--ad-height) * 2);
}

body:has(.my-ad-top:not(.hide)):has(.my-ad-left:not(.hide)):has(.my-ad-right:not(.hide)) .my-main-container {
  margin: var(--ad-height) var(--ad-width) 0 var(--ad-width);
  width: calc(100% - var(--ad-width) * 2);
  min-height: calc(100dvh - var(--ad-height));
}

body:has(.my-ad-bottom:not(.hide)):has(.my-ad-left:not(.hide)):has(.my-ad-right:not(.hide)) .my-main-container {
  margin: 0 var(--ad-width) var(--ad-height) var(--ad-width);
  width: calc(100% - var(--ad-width) * 2);
  min-height: calc(100dvh - var(--ad-height));
}

body:has(.my-ad-top:not(.hide)):has(.my-ad-bottom:not(.hide)):has(.my-ad-left:not(.hide)):has(.my-ad-right:not(.hide)) .my-main-container {
  margin: var(--ad-height) var(--ad-width) var(--ad-height) var(--ad-width);
  width: calc(100% - var(--ad-width) * 2);
  min-height: calc(100dvh - var(--ad-height) * 2);
}

@media (max-width: 768px) {
  :root {
    --ad-height: var(--ad-small-height);
    --ad-width: var(--ad-small-width);
  }
  .my-ad-left, .my-ad-right {
    writing-mode: horizontal-tb;
    height: var(--ad-small-height);
    width: 100%;
  }
  .my-ad-left {
    top: auto;
    bottom: auto;
    left: 0;
    right: 0;
    bottom: calc(var(--ad-small-height) + 10px);
  }
  .my-ad-right {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
  }
  body:has(.my-ad-left:not(.hide)) .my-main-container {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  body:has(.my-ad-right:not(.hide)) .my-main-container {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  body:has(.my-ad-top:not(.hide)):has(.my-ad-left:not(.hide)) .my-main-container {
    margin-top: calc(var(--ad-height) * 2);
  }
}
@media print {
  .my-ad {
    display: none;
  }
  .my-main-container {
    margin: 0 !important;
    width: 100% !important;
    min-height: auto !important;
  }
}
.widget-equipment {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
}

/* Bank card design */
.card-input-wrapper {
  width: 100%;
  direction: rtl;
  font-family: "IranSans", "Segoe UI", system-ui, sans-serif;
}
.card-input-wrapper .card-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: rgb(var(--rgb-dark));
}
.card-input-wrapper .card-label i {
  margin-left: 0.5rem;
  font-size: 0.9rem;
  color: rgb(var(--rgb-first));
}
.card-input-wrapper .card-input-container {
  position: relative;
  background: transparent;
  transition: all 0.2s ease;
}
.card-input-wrapper .card-input-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  background: transparent;
  border-bottom: 2px solid rgb(var(--rgb-light));
  transition: all 0.2s ease;
}
.card-input-wrapper .card-input-field:focus-within {
  border-bottom-color: rgb(var(--rgb-first));
}
.card-input-wrapper .card-input-field .card-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  transition: all 0.2s ease;
}
.card-input-wrapper .card-input-field .card-brand i {
  font-size: 1.5rem;
  color: rgb(var(--rgb-first));
  transition: all 0.2s ease;
}
.card-input-wrapper .card-input-field .digits-group {
  display: flex;
  gap: 1.5rem;
  flex: 1;
  direction: ltr;
  justify-content: center;
}
.card-input-wrapper .card-input-field .digits-group .digit-slot {
  flex: 1;
  position: relative;
  text-align: center;
}
.card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit {
  width: 100%;
  text-align: center;
  font-family: "IranSans", "Monaco", "Menlo", monospace;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 0.5rem 0 0.4rem 0;
  background: transparent;
  border: none;
  color: rgb(var(--rgb-darkest));
  transition: all 0.2s ease;
  direction: ltr;
}
.card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder {
  color: rgb(var(--rgb-light-dark));
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 3px;
  opacity: 0.5;
}
.card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus {
  outline: none;
  border-bottom-color: rgb(var(--rgb-first));
}
.card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::-webkit-outer-spin-button, .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit[type=number] {
  -moz-appearance: textfield;
}
.card-input-wrapper .card-input-field .digits-group .digit-slot::before {
  content: "••••";
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  letter-spacing: 2px;
  color: rgb(var(--rgb-light));
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  font-family: monospace;
}
.card-input-wrapper .card-input-field .digits-group .digit-slot:focus-within::before {
  opacity: 0.6;
}
.card-input-wrapper .card-input-field .digits-group .digit-slot::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: rgb(var(--rgb-first));
  transition: all 0.25s ease;
  transform: translateX(-50%);
  border-radius: 2px;
}
.card-input-wrapper .card-input-field .digits-group .digit-slot:focus-within::after {
  width: 100%;
}
.card-input-wrapper .card-input-field .digits-group .digit-slot.has-value .card-digit {
  border-bottom-color: rgb(var(--rgb-first-light));
}
.card-input-wrapper .card-input-field .group-separator {
  font-size: 1.2rem;
  font-weight: 600;
  color: rgb(var(--rgb-light-dark));
  user-select: none;
  margin: 0 -0.3rem;
}
.card-input-wrapper .card-input-field .bank-badge {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 70px;
  font-size: 0.7rem;
  font-weight: 500;
  color: rgb(var(--rgb-light-dark));
  transition: all 0.2s ease;
  gap: 0.35rem;
  cursor: default;
}
.card-input-wrapper .card-input-field .bank-badge i {
  font-size: 0.8rem;
}
.card-input-wrapper .card-input-field .bank-badge.active {
  color: rgb(var(--rgb-first));
}
.card-input-wrapper .card-input-field .bank-badge.active i {
  color: rgb(var(--rgb-first));
}
.card-input-wrapper .card-hint {
  margin-top: 0.5rem;
  padding: 0 0.25rem;
  font-size: 0.65rem;
  color: rgb(var(--rgb-light-dark));
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.card-input-wrapper .card-hint i {
  font-size: 0.6rem;
}

body.dark .card-input-wrapper .card-label, body.faragard-dark .card-input-wrapper .card-label, body.blue-dark .card-input-wrapper .card-label, body.orange-dark .card-input-wrapper .card-label, body.fuchsia-dark .card-input-wrapper .card-label, body.pink-dark .card-input-wrapper .card-label, body.emerald-dark .card-input-wrapper .card-label, body.red-dark .card-input-wrapper .card-label, body.sky-dark .card-input-wrapper .card-label, body.yellow-dark .card-input-wrapper .card-label, body.green-dark .card-input-wrapper .card-label, body.purple-dark .card-input-wrapper .card-label, body.indigo-dark .card-input-wrapper .card-label, body.slate-dark .card-input-wrapper .card-label, body.yellow-blue-dark .card-input-wrapper .card-label {
  color: rgb(var(--rgb-dark));
}
body.dark .card-input-wrapper .card-label i, body.faragard-dark .card-input-wrapper .card-label i, body.blue-dark .card-input-wrapper .card-label i, body.orange-dark .card-input-wrapper .card-label i, body.fuchsia-dark .card-input-wrapper .card-label i, body.pink-dark .card-input-wrapper .card-label i, body.emerald-dark .card-input-wrapper .card-label i, body.red-dark .card-input-wrapper .card-label i, body.sky-dark .card-input-wrapper .card-label i, body.yellow-dark .card-input-wrapper .card-label i, body.green-dark .card-input-wrapper .card-label i, body.purple-dark .card-input-wrapper .card-label i, body.indigo-dark .card-input-wrapper .card-label i, body.slate-dark .card-input-wrapper .card-label i, body.yellow-blue-dark .card-input-wrapper .card-label i {
  color: rgb(var(--rgb-first-light));
}
body.dark .card-input-wrapper .card-input-field, body.faragard-dark .card-input-wrapper .card-input-field, body.blue-dark .card-input-wrapper .card-input-field, body.orange-dark .card-input-wrapper .card-input-field, body.fuchsia-dark .card-input-wrapper .card-input-field, body.pink-dark .card-input-wrapper .card-input-field, body.emerald-dark .card-input-wrapper .card-input-field, body.red-dark .card-input-wrapper .card-input-field, body.sky-dark .card-input-wrapper .card-input-field, body.yellow-dark .card-input-wrapper .card-input-field, body.green-dark .card-input-wrapper .card-input-field, body.purple-dark .card-input-wrapper .card-input-field, body.indigo-dark .card-input-wrapper .card-input-field, body.slate-dark .card-input-wrapper .card-input-field, body.yellow-blue-dark .card-input-wrapper .card-input-field {
  border-bottom-color: rgb(var(--rgb-light));
}
body.dark .card-input-wrapper .card-input-field:focus-within, body.faragard-dark .card-input-wrapper .card-input-field:focus-within, body.blue-dark .card-input-wrapper .card-input-field:focus-within, body.orange-dark .card-input-wrapper .card-input-field:focus-within, body.fuchsia-dark .card-input-wrapper .card-input-field:focus-within, body.pink-dark .card-input-wrapper .card-input-field:focus-within, body.emerald-dark .card-input-wrapper .card-input-field:focus-within, body.red-dark .card-input-wrapper .card-input-field:focus-within, body.sky-dark .card-input-wrapper .card-input-field:focus-within, body.yellow-dark .card-input-wrapper .card-input-field:focus-within, body.green-dark .card-input-wrapper .card-input-field:focus-within, body.purple-dark .card-input-wrapper .card-input-field:focus-within, body.indigo-dark .card-input-wrapper .card-input-field:focus-within, body.slate-dark .card-input-wrapper .card-input-field:focus-within, body.yellow-blue-dark .card-input-wrapper .card-input-field:focus-within {
  border-bottom-color: rgb(var(--rgb-first));
}
body.dark .card-input-wrapper .card-input-field .card-brand i, body.faragard-dark .card-input-wrapper .card-input-field .card-brand i, body.blue-dark .card-input-wrapper .card-input-field .card-brand i, body.orange-dark .card-input-wrapper .card-input-field .card-brand i, body.fuchsia-dark .card-input-wrapper .card-input-field .card-brand i, body.pink-dark .card-input-wrapper .card-input-field .card-brand i, body.emerald-dark .card-input-wrapper .card-input-field .card-brand i, body.red-dark .card-input-wrapper .card-input-field .card-brand i, body.sky-dark .card-input-wrapper .card-input-field .card-brand i, body.yellow-dark .card-input-wrapper .card-input-field .card-brand i, body.green-dark .card-input-wrapper .card-input-field .card-brand i, body.purple-dark .card-input-wrapper .card-input-field .card-brand i, body.indigo-dark .card-input-wrapper .card-input-field .card-brand i, body.slate-dark .card-input-wrapper .card-input-field .card-brand i, body.yellow-blue-dark .card-input-wrapper .card-input-field .card-brand i {
  color: rgb(var(--rgb-first-light));
}
body.dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit, body.faragard-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit, body.blue-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit, body.orange-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit, body.fuchsia-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit, body.pink-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit, body.emerald-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit, body.red-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit, body.sky-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit, body.yellow-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit, body.green-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit, body.purple-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit, body.indigo-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit, body.slate-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit, body.yellow-blue-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit {
  color: rgb(var(--rgb-lightest));
}
body.dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder, body.faragard-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder, body.blue-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder, body.orange-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder, body.fuchsia-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder, body.pink-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder, body.emerald-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder, body.red-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder, body.sky-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder, body.yellow-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder, body.green-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder, body.purple-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder, body.indigo-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder, body.slate-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder, body.yellow-blue-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder {
  color: rgb(var(--rgb-light-dark));
}
body.dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus, body.faragard-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus, body.blue-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus, body.orange-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus, body.fuchsia-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus, body.pink-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus, body.emerald-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus, body.red-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus, body.sky-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus, body.yellow-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus, body.green-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus, body.purple-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus, body.indigo-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus, body.slate-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus, body.yellow-blue-dark .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit:focus {
  border-bottom-color: rgb(var(--rgb-first));
}
body.dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before, body.faragard-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before, body.blue-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before, body.orange-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before, body.fuchsia-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before, body.pink-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before, body.emerald-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before, body.red-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before, body.sky-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before, body.yellow-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before, body.green-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before, body.purple-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before, body.indigo-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before, body.slate-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before, body.yellow-blue-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::before {
  color: rgb(var(--rgb-light));
}
body.dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after, body.faragard-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after, body.blue-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after, body.orange-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after, body.fuchsia-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after, body.pink-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after, body.emerald-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after, body.red-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after, body.sky-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after, body.yellow-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after, body.green-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after, body.purple-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after, body.indigo-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after, body.slate-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after, body.yellow-blue-dark .card-input-wrapper .card-input-field .digits-group .digit-slot::after {
  background: rgb(var(--rgb-first));
}
body.dark .card-input-wrapper .card-input-field .bank-badge, body.faragard-dark .card-input-wrapper .card-input-field .bank-badge, body.blue-dark .card-input-wrapper .card-input-field .bank-badge, body.orange-dark .card-input-wrapper .card-input-field .bank-badge, body.fuchsia-dark .card-input-wrapper .card-input-field .bank-badge, body.pink-dark .card-input-wrapper .card-input-field .bank-badge, body.emerald-dark .card-input-wrapper .card-input-field .bank-badge, body.red-dark .card-input-wrapper .card-input-field .bank-badge, body.sky-dark .card-input-wrapper .card-input-field .bank-badge, body.yellow-dark .card-input-wrapper .card-input-field .bank-badge, body.green-dark .card-input-wrapper .card-input-field .bank-badge, body.purple-dark .card-input-wrapper .card-input-field .bank-badge, body.indigo-dark .card-input-wrapper .card-input-field .bank-badge, body.slate-dark .card-input-wrapper .card-input-field .bank-badge, body.yellow-blue-dark .card-input-wrapper .card-input-field .bank-badge {
  color: rgb(var(--rgb-light-dark));
}
body.dark .card-input-wrapper .card-input-field .bank-badge.active, body.faragard-dark .card-input-wrapper .card-input-field .bank-badge.active, body.blue-dark .card-input-wrapper .card-input-field .bank-badge.active, body.orange-dark .card-input-wrapper .card-input-field .bank-badge.active, body.fuchsia-dark .card-input-wrapper .card-input-field .bank-badge.active, body.pink-dark .card-input-wrapper .card-input-field .bank-badge.active, body.emerald-dark .card-input-wrapper .card-input-field .bank-badge.active, body.red-dark .card-input-wrapper .card-input-field .bank-badge.active, body.sky-dark .card-input-wrapper .card-input-field .bank-badge.active, body.yellow-dark .card-input-wrapper .card-input-field .bank-badge.active, body.green-dark .card-input-wrapper .card-input-field .bank-badge.active, body.purple-dark .card-input-wrapper .card-input-field .bank-badge.active, body.indigo-dark .card-input-wrapper .card-input-field .bank-badge.active, body.slate-dark .card-input-wrapper .card-input-field .bank-badge.active, body.yellow-blue-dark .card-input-wrapper .card-input-field .bank-badge.active {
  color: rgb(var(--rgb-first-light));
}
body.dark .card-input-wrapper .card-hint, body.faragard-dark .card-input-wrapper .card-hint, body.blue-dark .card-input-wrapper .card-hint, body.orange-dark .card-input-wrapper .card-hint, body.fuchsia-dark .card-input-wrapper .card-hint, body.pink-dark .card-input-wrapper .card-hint, body.emerald-dark .card-input-wrapper .card-hint, body.red-dark .card-input-wrapper .card-hint, body.sky-dark .card-input-wrapper .card-hint, body.yellow-dark .card-input-wrapper .card-hint, body.green-dark .card-input-wrapper .card-hint, body.purple-dark .card-input-wrapper .card-hint, body.indigo-dark .card-input-wrapper .card-hint, body.slate-dark .card-input-wrapper .card-hint, body.yellow-blue-dark .card-input-wrapper .card-hint {
  color: rgb(var(--rgb-light-dark));
}

.card-input-wrapper .card-input-container.is-valid .card-input-field {
  border-bottom-color: rgb(var(--rgb-green-600));
}
.card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i {
  color: rgb(var(--rgb-green-600));
}
.card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit {
  color: rgb(var(--rgb-green-600));
}
.card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit::placeholder {
  color: rgba(var(--rgb-green-600), 0.5);
}
.card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot::after {
  background: rgb(var(--rgb-green-600));
}
.card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot::before {
  color: rgb(var(--rgb-green-600));
}
.card-input-wrapper .card-input-container.is-valid .card-input-field .bank-badge {
  color: rgb(var(--rgb-green-600));
}
.card-input-wrapper .card-input-container.is-valid .card-input-field .bank-badge i {
  color: rgb(var(--rgb-green-600));
}
.card-input-wrapper .card-input-container.is-valid .card-input-field .bank-badge.active {
  color: rgb(var(--rgb-green-600));
}
.card-input-wrapper .card-input-container.is-valid .card-hint {
  color: rgb(var(--rgb-green-600));
}
.card-input-wrapper .card-input-container.is-valid .card-hint i {
  color: rgb(var(--rgb-green-600));
}
.card-input-wrapper .card-input-container.is-invalid .card-input-field {
  border-bottom-color: rgb(var(--rgb-red-600));
  animation: shake 0.3s ease-in-out 0s 2;
}
.card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i {
  color: rgb(var(--rgb-red-600));
}
.card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit {
  color: rgb(var(--rgb-red-600));
}
.card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit::placeholder {
  color: rgba(var(--rgb-red-600), 0.5);
}
.card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot::after {
  background: rgb(var(--rgb-red-600));
}
.card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot::before {
  color: rgb(var(--rgb-red-600));
}
.card-input-wrapper .card-input-container.is-invalid .card-input-field .bank-badge {
  color: rgb(var(--rgb-red-600));
}
.card-input-wrapper .card-input-container.is-invalid .card-input-field .bank-badge i {
  color: rgb(var(--rgb-red-600));
}
.card-input-wrapper .card-input-container.is-invalid .card-input-field .bank-badge.active {
  color: rgb(var(--rgb-red-600));
}
.card-input-wrapper .card-input-container.is-invalid .card-hint {
  color: rgb(var(--rgb-red-600));
}
.card-input-wrapper .card-input-container.is-invalid .card-hint i {
  color: rgb(var(--rgb-red-600));
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
body.dark .card-input-wrapper .card-input-container.is-valid .card-input-field, body.faragard-dark .card-input-wrapper .card-input-container.is-valid .card-input-field, body.blue-dark .card-input-wrapper .card-input-container.is-valid .card-input-field, body.orange-dark .card-input-wrapper .card-input-container.is-valid .card-input-field, body.fuchsia-dark .card-input-wrapper .card-input-container.is-valid .card-input-field, body.pink-dark .card-input-wrapper .card-input-container.is-valid .card-input-field, body.emerald-dark .card-input-wrapper .card-input-container.is-valid .card-input-field, body.red-dark .card-input-wrapper .card-input-container.is-valid .card-input-field, body.sky-dark .card-input-wrapper .card-input-container.is-valid .card-input-field, body.yellow-dark .card-input-wrapper .card-input-container.is-valid .card-input-field, body.green-dark .card-input-wrapper .card-input-container.is-valid .card-input-field, body.purple-dark .card-input-wrapper .card-input-container.is-valid .card-input-field, body.indigo-dark .card-input-wrapper .card-input-container.is-valid .card-input-field, body.slate-dark .card-input-wrapper .card-input-container.is-valid .card-input-field, body.yellow-blue-dark .card-input-wrapper .card-input-container.is-valid .card-input-field {
  border-bottom-color: rgb(var(--rgb-green-600));
}
body.dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i, body.faragard-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i, body.blue-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i, body.orange-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i, body.fuchsia-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i, body.pink-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i, body.emerald-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i, body.red-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i, body.sky-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i, body.yellow-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i, body.green-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i, body.purple-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i, body.indigo-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i, body.slate-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i, body.yellow-blue-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .card-brand i {
  color: rgb(var(--rgb-green-600));
}
body.dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit, body.faragard-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit, body.blue-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit, body.orange-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit, body.fuchsia-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit, body.pink-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit, body.emerald-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit, body.red-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit, body.sky-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit, body.yellow-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit, body.green-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit, body.purple-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit, body.indigo-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit, body.slate-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit, body.yellow-blue-dark .card-input-wrapper .card-input-container.is-valid .card-input-field .digits-group .digit-slot .card-digit {
  color: rgb(var(--rgb-green-600));
}
body.dark .card-input-wrapper .card-input-container.is-invalid .card-input-field, body.faragard-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field, body.blue-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field, body.orange-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field, body.fuchsia-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field, body.pink-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field, body.emerald-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field, body.red-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field, body.sky-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field, body.yellow-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field, body.green-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field, body.purple-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field, body.indigo-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field, body.slate-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field, body.yellow-blue-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field {
  border-bottom-color: rgb(var(--rgb-red-600));
}
body.dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i, body.faragard-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i, body.blue-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i, body.orange-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i, body.fuchsia-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i, body.pink-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i, body.emerald-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i, body.red-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i, body.sky-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i, body.yellow-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i, body.green-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i, body.purple-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i, body.indigo-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i, body.slate-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i, body.yellow-blue-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .card-brand i {
  color: rgb(var(--rgb-red-600));
}
body.dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit, body.faragard-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit, body.blue-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit, body.orange-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit, body.fuchsia-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit, body.pink-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit, body.emerald-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit, body.red-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit, body.sky-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit, body.yellow-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit, body.green-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit, body.purple-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit, body.indigo-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit, body.slate-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit, body.yellow-blue-dark .card-input-wrapper .card-input-container.is-invalid .card-input-field .digits-group .digit-slot .card-digit {
  color: rgb(var(--rgb-red-600));
}

@media (max-width: 768px) {
  .card-input-wrapper .card-input-field {
    gap: 0.5rem;
    padding: 0.4rem 0;
  }
  .card-input-wrapper .card-input-field .card-brand i {
    font-size: 1.2rem;
  }
  .card-input-wrapper .card-input-field .digits-group {
    gap: 0.8rem;
  }
  .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit {
    font-size: 1rem;
    padding: 0.4rem 0 0.3rem 0;
  }
  .card-input-wrapper .card-input-field .digits-group .digit-slot .card-digit::placeholder {
    font-size: 0.75rem;
    letter-spacing: 2px;
  }
  .card-input-wrapper .card-input-field .bank-badge {
    min-width: 55px;
    font-size: 0.6rem;
  }
  .card-input-wrapper .card-input-field .bank-badge i {
    font-size: 0.7rem;
  }
  .card-input-wrapper .card-hint {
    font-size: 0.6rem;
  }
}
@media (max-width: 576px) {
  .card-input-wrapper .card-input-field {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
  .card-input-wrapper .card-input-field .card-brand {
    width: 36px;
  }
  .card-input-wrapper .card-input-field .digits-group {
    gap: 0.5rem;
  }
  .card-input-wrapper .card-input-field .bank-badge {
    min-width: 48px;
  }
}
.card-input-wrapper.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.balance-header {
  margin-bottom: 2rem;
  max-width: 570px;
  width: 100%;
  margin: auto;
}
.balance-header .balance-card {
  background: linear-gradient(165deg, rgb(var(--rgb-first-light)), rgb(var(--rgb-first)));
  border-radius: 28px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  box-shadow: 0 8px 24px rgba(var(--rgb-first), 0.25);
  position: relative;
  overflow: hidden;
}
.balance-header .balance-card > * {
  z-index: 2;
}
.balance-header .balance-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -15%;
  width: 200px;
  height: 200px;
  background: rgba(var(--rgb-lightest), 0.08);
  border-radius: 50%;
}
.balance-header .balance-card::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -9%;
  width: 150px;
  height: 150px;
  background: rgba(var(--rgb-lightest), 0.05);
  border-radius: 50%;
}
.balance-header .balance-card .balance-icon {
  width: 60px;
  height: 60px;
  background: rgba(var(--rgb-lightest), 0.15);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.balance-header .balance-card .balance-icon i {
  font-size: 1.8rem;
  color: rgb(var(--rgb-lightest));
}
.balance-header .balance-card .balance-info {
  flex: 1;
}
.balance-header .balance-card .balance-info .balance-label {
  display: block;
  font-size: 0.85rem;
  color: rgba(var(--rgb-lightest), 0.7);
  margin-bottom: 0.25rem;
}
.balance-header .balance-card .balance-info .balance-amount {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.balance-header .balance-card .balance-info .balance-amount .amount {
  font-size: 1.8rem;
  font-weight: 700;
  color: rgb(var(--rgb-lightest));
  letter-spacing: -0.5px;
}
.balance-header .balance-card .balance-info .balance-amount .currency {
  font-size: 0.85rem;
  color: rgba(var(--rgb-lightest), 0.6);
}
.balance-header .balance-card .btn-charge {
  background: rgba(var(--rgb-lightest), 0.15);
  backdrop-filter: blur(4px);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 40px;
  color: rgb(var(--rgb-lightest));
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.balance-header .balance-card .btn-charge i {
  font-size: 1rem;
}
.balance-header .balance-card .btn-charge:hover {
  background: rgba(var(--rgb-lightest), 0.25);
  transform: translateY(-1px);
}

.cards-container .cards-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.cards-container .cards-header .cards-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgb(var(--rgb-darkest));
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cards-container .cards-header .cards-title i {
  color: rgb(var(--rgb-first));
}
.cards-container .cards-header .cards-count {
  font-size: 0.8rem;
  color: rgb(var(--rgb-light-dark));
  background: rgb(var(--rgb-tenth-lighter));
  padding: 0.25rem 0.75rem;
  border-radius: 40px;
}
.cards-container .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1.5rem;
}
.cards-container .cards-grid .empty-state {
  grid-column: 1/-1;
  text-align: center;
  padding: 3rem;
  background: rgb(var(--rgb-ninth-lighter));
  border-radius: 24px;
}
.cards-container .cards-grid .empty-state > i {
  font-size: 3rem;
  color: rgb(var(--rgb-light));
  margin-bottom: 1rem;
}
.cards-container .cards-grid .empty-state p {
  color: rgb(var(--rgb-light-dark));
  margin-bottom: 1.5rem;
}
.cards-container .cards-grid .empty-state .btn-add-card {
  background: rgb(var(--rgb-first));
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: 40px;
  color: white;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cards-container .cards-grid .empty-state .btn-add-card:hover {
  background: rgb(var(--rgb-first-dark));
}

.bank-card {
  background: linear-gradient(135deg, rgb(var(--rgb-ninth-lighter)), rgb(var(--rgb-tenth-lighter)));
  border-radius: 24px;
  padding: 1.5rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(var(--rgb-first), 0.1);
  overflow: hidden;
}
.bank-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(var(--rgb-dark), 0.1);
  border-color: rgba(var(--rgb-first), 0.3);
}
.bank-card.default-card {
  border: 2px solid rgb(var(--rgb-first));
  background: linear-gradient(135deg, rgba(var(--rgb-first), 0.03), rgba(var(--rgb-first), 0.01));
}
.bank-card .default-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgb(var(--rgb-first));
  color: white;
  font-size: 0.65rem;
  padding: 0.2rem 0.6rem;
  border-radius: 40px;
  font-weight: 500;
  z-index: 2;
}
.bank-card .card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: radial-gradient(ellipse at 30% 0%, rgba(var(--rgb-first), 0.08), transparent);
  pointer-events: none;
}
.bank-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.bank-card .card-header .card-chip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.bank-card .card-header .card-chip i {
  font-size: 2rem;
  color: rgb(var(--rgb-first-light));
  opacity: 0.7;
}
.bank-card .card-header .card-brand-icon i {
  font-size: 2rem;
  color: rgb(var(--rgb-first));
}
.bank-card .card-body {
  margin-bottom: 1.5rem;
}
.bank-card .card-body .card-number {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-family: "Monaco", "Menlo", monospace;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgb(var(--rgb-darkest));
  direction: ltr;
}
.bank-card .card-body .card-number span {
  background: rgba(var(--rgb-first), 0.05);
  padding: 0.3rem 0.5rem;
  border-radius: 12px;
}
.bank-card .card-body .card-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.bank-card .card-body .card-details .card-info {
  flex: 1;
  min-width: 100px;
}
.bank-card .card-body .card-details .card-info .card-label {
  display: block;
  font-size: 0.65rem;
  color: rgb(var(--rgb-light-dark));
  margin-bottom: 0.2rem;
}
.bank-card .card-body .card-details .card-info .card-value {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgb(var(--rgb-dark));
}
.bank-card .card-body .card-details .card-info .card-value.balance-value {
  color: rgb(var(--rgb-first));
  font-weight: 600;
}
.bank-card .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--rgb-light), 0.3);
}
.bank-card .card-footer .bank-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.bank-card .card-footer .bank-name i {
  font-size: 0.9rem;
  color: rgb(var(--rgb-first));
}
.bank-card .card-footer .bank-name span {
  font-size: 0.8rem;
  color: rgb(var(--rgb-light-dark));
}
.bank-card .card-footer .card-actions {
  display: flex;
  gap: 0.5rem;
}
.bank-card .card-footer .card-actions .card-action-btn {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bank-card .card-footer .card-actions .card-action-btn i {
  font-size: 0.9rem;
}
.bank-card .card-footer .card-actions .card-action-btn.edit-btn {
  color: rgb(var(--rgb-blue-600));
}
.bank-card .card-footer .card-actions .card-action-btn.edit-btn:hover {
  background: rgba(var(--rgb-first), 0.1);
  transform: scale(1.05);
}
.bank-card .card-footer .card-actions .card-action-btn.delete-btn {
  color: rgb(var(--rgb-red-600));
}
.bank-card .card-footer .card-actions .card-action-btn.delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  transform: scale(1.05);
}
.bank-card .card-footer .card-actions .card-action-btn.add-btn {
  color: rgb(var(--rgb-green-600));
}
.bank-card .card-footer .card-actions .card-action-btn.add-btn:hover {
  background: rgba(245, 158, 11, 0.1);
  transform: scale(1.05);
}

body.dark .bank-card, body.faragard-dark .bank-card, body.blue-dark .bank-card, body.orange-dark .bank-card, body.fuchsia-dark .bank-card, body.pink-dark .bank-card, body.emerald-dark .bank-card, body.red-dark .bank-card, body.sky-dark .bank-card, body.yellow-dark .bank-card, body.green-dark .bank-card, body.purple-dark .bank-card, body.indigo-dark .bank-card, body.slate-dark .bank-card, body.yellow-blue-dark .bank-card {
  background: linear-gradient(135deg, rgb(var(--rgb-tenth-lighter)), rgba(var(--rgb-first), 0.05));
}
body.dark .bank-card .card-body .card-number span, body.faragard-dark .bank-card .card-body .card-number span, body.blue-dark .bank-card .card-body .card-number span, body.orange-dark .bank-card .card-body .card-number span, body.fuchsia-dark .bank-card .card-body .card-number span, body.pink-dark .bank-card .card-body .card-number span, body.emerald-dark .bank-card .card-body .card-number span, body.red-dark .bank-card .card-body .card-number span, body.sky-dark .bank-card .card-body .card-number span, body.yellow-dark .bank-card .card-body .card-number span, body.green-dark .bank-card .card-body .card-number span, body.purple-dark .bank-card .card-body .card-number span, body.indigo-dark .bank-card .card-body .card-number span, body.slate-dark .bank-card .card-body .card-number span, body.yellow-blue-dark .bank-card .card-body .card-number span {
  background: rgba(var(--rgb-first), 0.15);
  color: rgb(var(--rgb-lightest));
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 768px) {
  .balance-header .balance-card {
    padding: 1rem;
  }
  .balance-header .balance-card .balance-info .balance-amount .amount {
    font-size: 1.4rem;
  }
  .cards-container .cards-grid {
    grid-template-columns: 1fr;
  }
  .bank-card {
    padding: 1rem;
  }
  .bank-card .card-body .card-number {
    gap: 0.5rem;
    font-size: 0.85rem;
  }
  .bank-card .card-body .card-number span {
    padding: 0.2rem 0.3rem;
  }
}
.card-suggestions-popup {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: rgb(var(--rgb-lightest));
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  overflow: hidden;
  animation: slideUp 0.2s ease;
  border: 1px solid rgba(var(--rgb-light), 0.5);
}
.card-suggestions-popup .suggestions-header {
  padding: 0.75rem 1rem;
  background: rgba(var(--rgb-tenth-lighter), 0.8);
  border-bottom: 1px solid rgba(var(--rgb-light), 0.3);
}
.card-suggestions-popup .suggestions-header span {
  font-size: 0.7rem;
  color: rgb(var(--rgb-light-dark));
  font-weight: 500;
}
.card-suggestions-popup .suggestions-list {
  max-height: 240px;
  overflow-y: auto;
}
.card-suggestions-popup .suggestions-list .suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: 1px solid rgba(var(--rgb-light), 0.2);
}
.card-suggestions-popup .suggestions-list .suggestion-item:hover {
  background: rgba(var(--rgb-first), 0.08);
}
.card-suggestions-popup .suggestions-list .suggestion-item:last-child {
  border-bottom: none;
}
.card-suggestions-popup .suggestions-list .suggestion-item .bank-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.card-suggestions-popup .suggestions-list .suggestion-item .bank-info .bank-icon {
  width: 32px;
  height: 32px;
  background: rgba(var(--rgb-first), 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-suggestions-popup .suggestions-list .suggestion-item .bank-info .bank-icon i {
  font-size: 1rem;
  color: rgb(var(--rgb-first));
}
.card-suggestions-popup .suggestions-list .suggestion-item .bank-info .bank-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.card-suggestions-popup .suggestions-list .suggestion-item .bank-info .bank-details .bank-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgb(var(--rgb-darkest));
  display: block;
}
.card-suggestions-popup .suggestions-list .suggestion-item .bank-info .bank-details .masked-number {
  font-size: 0.7rem;
  color: rgb(var(--rgb-light-dark));
  font-family: monospace;
  letter-spacing: 1px;
  direction: ltr;
  display: inline-block;
}
.card-suggestions-popup .suggestions-list .suggestion-item .default-badge-mini {
  font-size: 0.6rem;
  background: rgba(var(--rgb-first), 0.15);
  color: rgb(var(--rgb-first));
  padding: 0.2rem 0.5rem;
  border-radius: 40px;
}
.card-suggestions-popup .suggestions-footer {
  padding: 0.6rem 1rem;
  border-top: 1px solid rgba(var(--rgb-light), 0.3);
  background: rgba(var(--rgb-tenth-lighter), 0.5);
}
.card-suggestions-popup .suggestions-footer button {
  width: 100%;
  background: transparent;
  border: none;
  font-size: 0.75rem;
  color: rgb(var(--rgb-first));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.card-suggestions-popup .suggestions-footer button:hover {
  background: rgba(var(--rgb-first), 0.08);
}
.card-suggestions-popup .suggestions-footer button i {
  font-size: 0.7rem;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
body.dark .card-suggestions-popup, body.faragard-dark .card-suggestions-popup, body.blue-dark .card-suggestions-popup, body.orange-dark .card-suggestions-popup, body.fuchsia-dark .card-suggestions-popup, body.pink-dark .card-suggestions-popup, body.emerald-dark .card-suggestions-popup, body.red-dark .card-suggestions-popup, body.sky-dark .card-suggestions-popup, body.yellow-dark .card-suggestions-popup, body.green-dark .card-suggestions-popup, body.purple-dark .card-suggestions-popup, body.indigo-dark .card-suggestions-popup, body.slate-dark .card-suggestions-popup, body.yellow-blue-dark .card-suggestions-popup {
  background: rgb(var(--rgb-tenth-lighter));
  border-color: rgba(var(--rgb-light), 0.2);
}
body.dark .card-suggestions-popup .suggestions-header span, body.faragard-dark .card-suggestions-popup .suggestions-header span, body.blue-dark .card-suggestions-popup .suggestions-header span, body.orange-dark .card-suggestions-popup .suggestions-header span, body.fuchsia-dark .card-suggestions-popup .suggestions-header span, body.pink-dark .card-suggestions-popup .suggestions-header span, body.emerald-dark .card-suggestions-popup .suggestions-header span, body.red-dark .card-suggestions-popup .suggestions-header span, body.sky-dark .card-suggestions-popup .suggestions-header span, body.yellow-dark .card-suggestions-popup .suggestions-header span, body.green-dark .card-suggestions-popup .suggestions-header span, body.purple-dark .card-suggestions-popup .suggestions-header span, body.indigo-dark .card-suggestions-popup .suggestions-header span, body.slate-dark .card-suggestions-popup .suggestions-header span, body.yellow-blue-dark .card-suggestions-popup .suggestions-header span {
  color: rgba(var(--rgb-lightest), 0.5);
}
body.dark .card-suggestions-popup .suggestion-item, body.faragard-dark .card-suggestions-popup .suggestion-item, body.blue-dark .card-suggestions-popup .suggestion-item, body.orange-dark .card-suggestions-popup .suggestion-item, body.fuchsia-dark .card-suggestions-popup .suggestion-item, body.pink-dark .card-suggestions-popup .suggestion-item, body.emerald-dark .card-suggestions-popup .suggestion-item, body.red-dark .card-suggestions-popup .suggestion-item, body.sky-dark .card-suggestions-popup .suggestion-item, body.yellow-dark .card-suggestions-popup .suggestion-item, body.green-dark .card-suggestions-popup .suggestion-item, body.purple-dark .card-suggestions-popup .suggestion-item, body.indigo-dark .card-suggestions-popup .suggestion-item, body.slate-dark .card-suggestions-popup .suggestion-item, body.yellow-blue-dark .card-suggestions-popup .suggestion-item {
  border-bottom-color: rgba(var(--rgb-light), 0.1);
}
body.dark .card-suggestions-popup .suggestion-item:hover, body.faragard-dark .card-suggestions-popup .suggestion-item:hover, body.blue-dark .card-suggestions-popup .suggestion-item:hover, body.orange-dark .card-suggestions-popup .suggestion-item:hover, body.fuchsia-dark .card-suggestions-popup .suggestion-item:hover, body.pink-dark .card-suggestions-popup .suggestion-item:hover, body.emerald-dark .card-suggestions-popup .suggestion-item:hover, body.red-dark .card-suggestions-popup .suggestion-item:hover, body.sky-dark .card-suggestions-popup .suggestion-item:hover, body.yellow-dark .card-suggestions-popup .suggestion-item:hover, body.green-dark .card-suggestions-popup .suggestion-item:hover, body.purple-dark .card-suggestions-popup .suggestion-item:hover, body.indigo-dark .card-suggestions-popup .suggestion-item:hover, body.slate-dark .card-suggestions-popup .suggestion-item:hover, body.yellow-blue-dark .card-suggestions-popup .suggestion-item:hover {
  background: rgba(var(--rgb-first), 0.15);
}
body.dark .card-suggestions-popup .suggestion-item .bank-details .bank-name, body.faragard-dark .card-suggestions-popup .suggestion-item .bank-details .bank-name, body.blue-dark .card-suggestions-popup .suggestion-item .bank-details .bank-name, body.orange-dark .card-suggestions-popup .suggestion-item .bank-details .bank-name, body.fuchsia-dark .card-suggestions-popup .suggestion-item .bank-details .bank-name, body.pink-dark .card-suggestions-popup .suggestion-item .bank-details .bank-name, body.emerald-dark .card-suggestions-popup .suggestion-item .bank-details .bank-name, body.red-dark .card-suggestions-popup .suggestion-item .bank-details .bank-name, body.sky-dark .card-suggestions-popup .suggestion-item .bank-details .bank-name, body.yellow-dark .card-suggestions-popup .suggestion-item .bank-details .bank-name, body.green-dark .card-suggestions-popup .suggestion-item .bank-details .bank-name, body.purple-dark .card-suggestions-popup .suggestion-item .bank-details .bank-name, body.indigo-dark .card-suggestions-popup .suggestion-item .bank-details .bank-name, body.slate-dark .card-suggestions-popup .suggestion-item .bank-details .bank-name, body.yellow-blue-dark .card-suggestions-popup .suggestion-item .bank-details .bank-name {
  color: rgb(var(--rgb-lightest));
}

.card-input-container {
  position: relative;
}

.tree-nested-container {
  transition: max-height 0.3s ease, opacity 0.2s ease;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}
.tree-nested-container.opened {
  max-height: 1000px;
  opacity: 1;
}

.tree-details-row {
  transition: all 0.01s linear;
}

.tree-expand-btn {
  transition: transform 300ms ease;
}
.tree-expand-btn i,
.tree-expand-btn svg {
  transition: transform 300ms ease;
}

/* Man Map styles */
.leaflet-popup-close-button {
  left: 6px !important;
  top: 6px !important;
  right: auto !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: rgb(var(--rgb-ninth-lighter));
  color: rgb(var(--rgb-darkest));
  box-shadow: 0 3px 14px rgba(var(--rgb-darkest), 0.3);
  padding: 8px;
}

.leaflet-popup-content-wrapper {
  text-align: right;
}

.leaflet-draw-tooltip,
.leaflet-marker-icon,
.leaflet-div-icon {
  transition: 100ms linear !important;
}

.leaflet-marker-icon {
  border-radius: 8px;
}

.map-drawing-tools-panel {
  background-color: rgb(var(--rgb-ninth-lighter), 0.7);
  border-radius: 28px !important;
  padding: 8px 6px !important;
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.08), 0 1px 2px rgba(var(--rgb-darkest), 0.04);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(0px);
  border: 1px solid rgba(var(--rgb-light), 0.5);
  top: 50%;
  right: 36px;
  z-index: 401;
  transform: translateY(-50%);
}

/* Dark mode support */
body.dark, body.faragard-dark, body.blue-dark, body.orange-dark, body.fuchsia-dark, body.pink-dark, body.emerald-dark, body.red-dark, body.sky-dark, body.yellow-dark, body.green-dark, body.purple-dark, body.indigo-dark, body.slate-dark, body.yellow-blue-dark .map-drawing-tools-panel {
  background-color: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

/* Button Group Vertical */
.map-drawing-tools-btn-group-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Base Button Style - Like Telegram Nav Items */
.map-drawing-tools-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border: none;
  background: transparent;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  font-size: 14px;
  color: rgb(var(--rgb-light-dark));
  overflow: hidden;
  outline: none !important;
  /* Ripple effect container */
  /* Hover state */
  /* Active (selected) state - Telegram style */
  /* Pressed state */
}
.map-drawing-tools-btn i {
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}
.map-drawing-tools-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: var(--radius-circle);
  background: rgba(var(--rgb-lightest), 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
  z-index: 1;
}
.map-drawing-tools-btn::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: var(--radius-circle);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.map-drawing-tools-btn:hover {
  transform: translateY(-2px);
}
.map-drawing-tools-btn:hover i {
  transform: scale(1.08);
}
.map-drawing-tools-btn:hover::before {
  width: 100%;
  height: 100%;
}
.map-drawing-tools-btn.active {
  background: linear-gradient(135deg, rgb(var(--rgb-first)) 0%, rgb(var(--rgb-first-light)) 100%);
  color: rgb(var(--rgb-lightest));
  box-shadow: 0 4px 12px rgba(var(--rgb-first), 0.35);
}
.map-drawing-tools-btn.active::after {
  transform: translateX(-50%) scale(1);
  background: rgb(var(--rgb-lightest));
}
.map-drawing-tools-btn.active i {
  transform: scale(1);
}
.map-drawing-tools-btn.active:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--rgb-first), 0.45);
}
.map-drawing-tools-btn:active {
  transform: scale(0.95);
  transition: all 0.1s ease;
}

/* Primary - Blue theme */
.map-drawing-tools-btn-primary {
  color: rgb(var(--rgb-blue-600));
}
.map-drawing-tools-btn-primary:hover {
  background: rgba(var(--rgb-blue-600), 0.12);
  color: rgb(var(--rgb-blue-700));
}
.map-drawing-tools-btn-primary.active {
  background: linear-gradient(135deg, rgb(var(--rgb-blue-600)) 0%, rgb(var(--rgb-blue-500)) 100%);
  color: rgb(var(--rgb-lightest));
  box-shadow: 0 4px 12px rgba(var(--rgb-blue-600), 0.35);
}

/* Success - Green theme */
.map-drawing-tools-btn-success {
  color: rgb(var(--rgb-green-600));
}
.map-drawing-tools-btn-success:hover {
  background: rgba(var(--rgb-green-600), 0.12);
  color: rgb(var(--rgb-green-700));
}
.map-drawing-tools-btn-success.active {
  background: linear-gradient(135deg, rgb(var(--rgb-green-600)) 0%, rgb(var(--rgb-green-500)) 100%);
  color: rgb(var(--rgb-lightest));
  box-shadow: 0 4px 12px rgba(var(--rgb-green-600), 0.35);
}

/* Info - Cyan/Sky theme */
.map-drawing-tools-btn-info {
  color: rgb(var(--rgb-sky-600));
}
.map-drawing-tools-btn-info:hover {
  background: rgba(var(--rgb-sky-600), 0.12);
  color: rgb(var(--rgb-sky-700));
}
.map-drawing-tools-btn-info.active {
  background: linear-gradient(135deg, rgb(var(--rgb-sky-600)) 0%, rgb(var(--rgb-sky-500)) 100%);
  color: rgb(var(--rgb-lightest));
  box-shadow: 0 4px 12px rgba(var(--rgb-sky-600), 0.35);
}

/* Warning - Amber/Orange theme */
.map-drawing-tools-btn-warning {
  color: rgb(var(--rgb-amber-600));
}
.map-drawing-tools-btn-warning:hover {
  background: rgba(var(--rgb-amber-600), 0.12);
  color: rgb(var(--rgb-amber-700));
}
.map-drawing-tools-btn-warning.active {
  background: linear-gradient(135deg, rgb(var(--rgb-amber-600)) 0%, rgb(var(--rgb-amber-500)) 100%);
  color: rgb(var(--rgb-lightest));
  box-shadow: 0 4px 12px rgba(var(--rgb-amber-600), 0.35);
}

/* Danger - Red theme */
.map-drawing-tools-btn-danger {
  color: rgb(var(--rgb-red-600));
}
.map-drawing-tools-btn-danger:hover {
  background: rgba(var(--rgb-red-600), 0.12);
  color: rgb(var(--rgb-red-700));
}
.map-drawing-tools-btn-danger.active {
  background: linear-gradient(135deg, rgb(var(--rgb-red-600)) 0%, rgb(var(--rgb-red-500)) 100%);
  color: rgb(var(--rgb-lightest));
  box-shadow: 0 4px 12px rgba(var(--rgb-red-600), 0.35);
}

/* Secondary - Gray/Slate theme */
.map-drawing-tools-btn-secondary {
  color: rgb(var(--rgb-slate-600));
}
.map-drawing-tools-btn-secondary:hover {
  background: rgba(var(--rgb-slate-600), 0.12);
  color: rgb(var(--rgb-slate-700));
}
.map-drawing-tools-btn-secondary.active {
  background: linear-gradient(135deg, rgb(var(--rgb-slate-600)) 0%, rgb(var(--rgb-slate-500)) 100%);
  color: rgb(var(--rgb-lightest));
  box-shadow: 0 4px 12px rgba(var(--rgb-slate-600), 0.35);
}

.map-drawing-tools-btn-purple {
  color: rgb(var(--rgb-purple-600));
}

.map-drawing-tools-btn-purple:hover {
  background: rgba(var(--rgb-purple-600), 0.12);
  color: rgb(var(--rgb-purple-700));
}

.map-drawing-tools-btn-purple.active {
  background: linear-gradient(135deg, rgb(var(--rgb-purple-600)) 0%, rgb(var(--rgb-purple-500)) 100%);
  color: rgb(var(--rgb-lightest));
  box-shadow: 0 4px 12px rgba(var(--rgb-purple-600), 0.35);
}

body.dark, body.faragard-dark, body.blue-dark, body.orange-dark, body.fuchsia-dark, body.pink-dark, body.emerald-dark, body.red-dark, body.sky-dark, body.yellow-dark, body.green-dark, body.purple-dark, body.indigo-dark, body.slate-dark, body.yellow-blue-dark .map-drawing-tools-btn-purple {
  color: rgb(var(--rgb-purple-400));
}

body.dark, body.faragard-dark, body.blue-dark, body.orange-dark, body.fuchsia-dark, body.pink-dark, body.emerald-dark, body.red-dark, body.sky-dark, body.yellow-dark, body.green-dark, body.purple-dark, body.indigo-dark, body.slate-dark, body.yellow-blue-dark .map-drawing-tools-btn-purple:hover {
  background: rgba(var(--rgb-purple-400), 0.15);
  color: rgb(var(--rgb-purple-300));
}

.map-drawing-tools-btn-purple {
  color: rgb(var(--rgb-purple-600));
}

.map-drawing-tools-btn-purple:hover {
  background: rgba(var(--rgb-purple-600), 0.12);
  color: rgb(var(--rgb-purple-700));
}

.map-drawing-tools-btn-purple.active {
  background: linear-gradient(135deg, rgb(var(--rgb-purple-600)) 0%, rgb(var(--rgb-purple-500)) 100%);
  color: rgb(var(--rgb-lightest));
  box-shadow: 0 4px 12px rgba(var(--rgb-purple-600), 0.35);
}

.map-drawing-tools-btn-indigo {
  color: rgb(var(--rgb-indigo-600));
}

.map-drawing-tools-btn-indigo:hover {
  background: rgba(var(--rgb-indigo-600), 0.12);
  color: rgb(var(--rgb-indigo-700));
}

.map-drawing-tools-btn-indigo.active {
  background: linear-gradient(135deg, rgb(var(--rgb-indigo-600)) 0%, rgb(var(--rgb-indigo-500)) 100%);
  color: rgb(var(--rgb-lightest));
  box-shadow: 0 4px 12px rgba(var(--rgb-indigo-600), 0.35);
}

body.dark, body.faragard-dark, body.blue-dark, body.orange-dark, body.fuchsia-dark, body.pink-dark, body.emerald-dark, body.red-dark, body.sky-dark, body.yellow-dark, body.green-dark, body.purple-dark, body.indigo-dark, body.slate-dark, body.yellow-blue-dark .map-drawing-tools-btn-purple {
  color: rgb(var(--rgb-purple-400));
}

body.dark, body.faragard-dark, body.blue-dark, body.orange-dark, body.fuchsia-dark, body.pink-dark, body.emerald-dark, body.red-dark, body.sky-dark, body.yellow-dark, body.green-dark, body.purple-dark, body.indigo-dark, body.slate-dark, body.yellow-blue-dark .map-drawing-tools-btn-purple:hover {
  background: rgba(var(--rgb-purple-400), 0.15);
  color: rgb(var(--rgb-purple-300));
}

body.dark, body.faragard-dark, body.blue-dark, body.orange-dark, body.fuchsia-dark, body.pink-dark, body.emerald-dark, body.red-dark, body.sky-dark, body.yellow-dark, body.green-dark, body.purple-dark, body.indigo-dark, body.slate-dark, body.yellow-blue-dark .map-drawing-tools-btn-indigo {
  color: rgb(var(--rgb-indigo-400));
}

body.dark, body.faragard-dark, body.blue-dark, body.orange-dark, body.fuchsia-dark, body.pink-dark, body.emerald-dark, body.red-dark, body.sky-dark, body.yellow-dark, body.green-dark, body.purple-dark, body.indigo-dark, body.slate-dark, body.yellow-blue-dark .map-drawing-tools-btn-indigo:hover {
  background: rgba(var(--rgb-indigo-400), 0.15);
  color: rgb(var(--rgb-indigo-300));
}

.map-drawing-tools-btn-teal {
  color: rgb(var(--rgb-teal-600));
}

.map-drawing-tools-btn-teal:hover {
  background: rgba(var(--rgb-teal-600), 0.12);
  color: rgb(var(--rgb-teal-700));
}

.map-drawing-tools-btn-teal.active {
  background: linear-gradient(135deg, rgb(var(--rgb-teal-600)) 0%, rgb(var(--rgb-teal-500)) 100%);
  color: rgb(var(--rgb-lightest));
  box-shadow: 0 4px 12px rgba(var(--rgb-teal-600), 0.35);
}

body.dark, body.faragard-dark, body.blue-dark, body.orange-dark, body.fuchsia-dark, body.pink-dark, body.emerald-dark, body.red-dark, body.sky-dark, body.yellow-dark, body.green-dark, body.purple-dark, body.indigo-dark, body.slate-dark, body.yellow-blue-dark .map-drawing-tools-btn-teal {
  color: rgb(var(--rgb-teal-400));
}

body.dark, body.faragard-dark, body.blue-dark, body.orange-dark, body.fuchsia-dark, body.pink-dark, body.emerald-dark, body.red-dark, body.sky-dark, body.yellow-dark, body.green-dark, body.purple-dark, body.indigo-dark, body.slate-dark, body.yellow-blue-dark .map-drawing-tools-btn-teal:hover {
  background: rgba(var(--rgb-teal-400), 0.15);
  color: rgb(var(--rgb-teal-300));
}

body.dark .map-drawing-tools-btn-primary, body.faragard-dark .map-drawing-tools-btn-primary, body.blue-dark .map-drawing-tools-btn-primary, body.orange-dark .map-drawing-tools-btn-primary, body.fuchsia-dark .map-drawing-tools-btn-primary, body.pink-dark .map-drawing-tools-btn-primary, body.emerald-dark .map-drawing-tools-btn-primary, body.red-dark .map-drawing-tools-btn-primary, body.sky-dark .map-drawing-tools-btn-primary, body.yellow-dark .map-drawing-tools-btn-primary, body.green-dark .map-drawing-tools-btn-primary, body.purple-dark .map-drawing-tools-btn-primary, body.indigo-dark .map-drawing-tools-btn-primary, body.slate-dark .map-drawing-tools-btn-primary, body.yellow-blue-dark .map-drawing-tools-btn-primary {
  color: rgb(var(--rgb-blue-400));
}
body.dark .map-drawing-tools-btn-primary:hover, body.faragard-dark .map-drawing-tools-btn-primary:hover, body.blue-dark .map-drawing-tools-btn-primary:hover, body.orange-dark .map-drawing-tools-btn-primary:hover, body.fuchsia-dark .map-drawing-tools-btn-primary:hover, body.pink-dark .map-drawing-tools-btn-primary:hover, body.emerald-dark .map-drawing-tools-btn-primary:hover, body.red-dark .map-drawing-tools-btn-primary:hover, body.sky-dark .map-drawing-tools-btn-primary:hover, body.yellow-dark .map-drawing-tools-btn-primary:hover, body.green-dark .map-drawing-tools-btn-primary:hover, body.purple-dark .map-drawing-tools-btn-primary:hover, body.indigo-dark .map-drawing-tools-btn-primary:hover, body.slate-dark .map-drawing-tools-btn-primary:hover, body.yellow-blue-dark .map-drawing-tools-btn-primary:hover {
  background: rgba(var(--rgb-blue-400), 0.15);
  color: rgb(var(--rgb-blue-300));
}
body.dark .map-drawing-tools-btn-success, body.faragard-dark .map-drawing-tools-btn-success, body.blue-dark .map-drawing-tools-btn-success, body.orange-dark .map-drawing-tools-btn-success, body.fuchsia-dark .map-drawing-tools-btn-success, body.pink-dark .map-drawing-tools-btn-success, body.emerald-dark .map-drawing-tools-btn-success, body.red-dark .map-drawing-tools-btn-success, body.sky-dark .map-drawing-tools-btn-success, body.yellow-dark .map-drawing-tools-btn-success, body.green-dark .map-drawing-tools-btn-success, body.purple-dark .map-drawing-tools-btn-success, body.indigo-dark .map-drawing-tools-btn-success, body.slate-dark .map-drawing-tools-btn-success, body.yellow-blue-dark .map-drawing-tools-btn-success {
  color: rgb(var(--rgb-green-400));
}
body.dark .map-drawing-tools-btn-success:hover, body.faragard-dark .map-drawing-tools-btn-success:hover, body.blue-dark .map-drawing-tools-btn-success:hover, body.orange-dark .map-drawing-tools-btn-success:hover, body.fuchsia-dark .map-drawing-tools-btn-success:hover, body.pink-dark .map-drawing-tools-btn-success:hover, body.emerald-dark .map-drawing-tools-btn-success:hover, body.red-dark .map-drawing-tools-btn-success:hover, body.sky-dark .map-drawing-tools-btn-success:hover, body.yellow-dark .map-drawing-tools-btn-success:hover, body.green-dark .map-drawing-tools-btn-success:hover, body.purple-dark .map-drawing-tools-btn-success:hover, body.indigo-dark .map-drawing-tools-btn-success:hover, body.slate-dark .map-drawing-tools-btn-success:hover, body.yellow-blue-dark .map-drawing-tools-btn-success:hover {
  background: rgba(var(--rgb-green-400), 0.15);
  color: rgb(var(--rgb-green-300));
}
body.dark .map-drawing-tools-btn-info, body.faragard-dark .map-drawing-tools-btn-info, body.blue-dark .map-drawing-tools-btn-info, body.orange-dark .map-drawing-tools-btn-info, body.fuchsia-dark .map-drawing-tools-btn-info, body.pink-dark .map-drawing-tools-btn-info, body.emerald-dark .map-drawing-tools-btn-info, body.red-dark .map-drawing-tools-btn-info, body.sky-dark .map-drawing-tools-btn-info, body.yellow-dark .map-drawing-tools-btn-info, body.green-dark .map-drawing-tools-btn-info, body.purple-dark .map-drawing-tools-btn-info, body.indigo-dark .map-drawing-tools-btn-info, body.slate-dark .map-drawing-tools-btn-info, body.yellow-blue-dark .map-drawing-tools-btn-info {
  color: rgb(var(--rgb-sky-400));
}
body.dark .map-drawing-tools-btn-info:hover, body.faragard-dark .map-drawing-tools-btn-info:hover, body.blue-dark .map-drawing-tools-btn-info:hover, body.orange-dark .map-drawing-tools-btn-info:hover, body.fuchsia-dark .map-drawing-tools-btn-info:hover, body.pink-dark .map-drawing-tools-btn-info:hover, body.emerald-dark .map-drawing-tools-btn-info:hover, body.red-dark .map-drawing-tools-btn-info:hover, body.sky-dark .map-drawing-tools-btn-info:hover, body.yellow-dark .map-drawing-tools-btn-info:hover, body.green-dark .map-drawing-tools-btn-info:hover, body.purple-dark .map-drawing-tools-btn-info:hover, body.indigo-dark .map-drawing-tools-btn-info:hover, body.slate-dark .map-drawing-tools-btn-info:hover, body.yellow-blue-dark .map-drawing-tools-btn-info:hover {
  background: rgba(var(--rgb-sky-400), 0.15);
  color: rgb(var(--rgb-sky-300));
}
body.dark .map-drawing-tools-btn-warning, body.faragard-dark .map-drawing-tools-btn-warning, body.blue-dark .map-drawing-tools-btn-warning, body.orange-dark .map-drawing-tools-btn-warning, body.fuchsia-dark .map-drawing-tools-btn-warning, body.pink-dark .map-drawing-tools-btn-warning, body.emerald-dark .map-drawing-tools-btn-warning, body.red-dark .map-drawing-tools-btn-warning, body.sky-dark .map-drawing-tools-btn-warning, body.yellow-dark .map-drawing-tools-btn-warning, body.green-dark .map-drawing-tools-btn-warning, body.purple-dark .map-drawing-tools-btn-warning, body.indigo-dark .map-drawing-tools-btn-warning, body.slate-dark .map-drawing-tools-btn-warning, body.yellow-blue-dark .map-drawing-tools-btn-warning {
  color: rgb(var(--rgb-amber-400));
}
body.dark .map-drawing-tools-btn-warning:hover, body.faragard-dark .map-drawing-tools-btn-warning:hover, body.blue-dark .map-drawing-tools-btn-warning:hover, body.orange-dark .map-drawing-tools-btn-warning:hover, body.fuchsia-dark .map-drawing-tools-btn-warning:hover, body.pink-dark .map-drawing-tools-btn-warning:hover, body.emerald-dark .map-drawing-tools-btn-warning:hover, body.red-dark .map-drawing-tools-btn-warning:hover, body.sky-dark .map-drawing-tools-btn-warning:hover, body.yellow-dark .map-drawing-tools-btn-warning:hover, body.green-dark .map-drawing-tools-btn-warning:hover, body.purple-dark .map-drawing-tools-btn-warning:hover, body.indigo-dark .map-drawing-tools-btn-warning:hover, body.slate-dark .map-drawing-tools-btn-warning:hover, body.yellow-blue-dark .map-drawing-tools-btn-warning:hover {
  background: rgba(var(--rgb-amber-400), 0.15);
  color: rgb(var(--rgb-amber-300));
}
body.dark .map-drawing-tools-btn-danger, body.faragard-dark .map-drawing-tools-btn-danger, body.blue-dark .map-drawing-tools-btn-danger, body.orange-dark .map-drawing-tools-btn-danger, body.fuchsia-dark .map-drawing-tools-btn-danger, body.pink-dark .map-drawing-tools-btn-danger, body.emerald-dark .map-drawing-tools-btn-danger, body.red-dark .map-drawing-tools-btn-danger, body.sky-dark .map-drawing-tools-btn-danger, body.yellow-dark .map-drawing-tools-btn-danger, body.green-dark .map-drawing-tools-btn-danger, body.purple-dark .map-drawing-tools-btn-danger, body.indigo-dark .map-drawing-tools-btn-danger, body.slate-dark .map-drawing-tools-btn-danger, body.yellow-blue-dark .map-drawing-tools-btn-danger {
  color: rgb(var(--rgb-red-400));
}
body.dark .map-drawing-tools-btn-danger:hover, body.faragard-dark .map-drawing-tools-btn-danger:hover, body.blue-dark .map-drawing-tools-btn-danger:hover, body.orange-dark .map-drawing-tools-btn-danger:hover, body.fuchsia-dark .map-drawing-tools-btn-danger:hover, body.pink-dark .map-drawing-tools-btn-danger:hover, body.emerald-dark .map-drawing-tools-btn-danger:hover, body.red-dark .map-drawing-tools-btn-danger:hover, body.sky-dark .map-drawing-tools-btn-danger:hover, body.yellow-dark .map-drawing-tools-btn-danger:hover, body.green-dark .map-drawing-tools-btn-danger:hover, body.purple-dark .map-drawing-tools-btn-danger:hover, body.indigo-dark .map-drawing-tools-btn-danger:hover, body.slate-dark .map-drawing-tools-btn-danger:hover, body.yellow-blue-dark .map-drawing-tools-btn-danger:hover {
  background: rgba(var(--rgb-red-400), 0.15);
  color: rgb(var(--rgb-red-300));
}
body.dark .map-drawing-tools-btn-secondary, body.faragard-dark .map-drawing-tools-btn-secondary, body.blue-dark .map-drawing-tools-btn-secondary, body.orange-dark .map-drawing-tools-btn-secondary, body.fuchsia-dark .map-drawing-tools-btn-secondary, body.pink-dark .map-drawing-tools-btn-secondary, body.emerald-dark .map-drawing-tools-btn-secondary, body.red-dark .map-drawing-tools-btn-secondary, body.sky-dark .map-drawing-tools-btn-secondary, body.yellow-dark .map-drawing-tools-btn-secondary, body.green-dark .map-drawing-tools-btn-secondary, body.purple-dark .map-drawing-tools-btn-secondary, body.indigo-dark .map-drawing-tools-btn-secondary, body.slate-dark .map-drawing-tools-btn-secondary, body.yellow-blue-dark .map-drawing-tools-btn-secondary {
  color: rgb(var(--rgb-yellow-400));
}
body.dark .map-drawing-tools-btn-secondary:hover, body.faragard-dark .map-drawing-tools-btn-secondary:hover, body.blue-dark .map-drawing-tools-btn-secondary:hover, body.orange-dark .map-drawing-tools-btn-secondary:hover, body.fuchsia-dark .map-drawing-tools-btn-secondary:hover, body.pink-dark .map-drawing-tools-btn-secondary:hover, body.emerald-dark .map-drawing-tools-btn-secondary:hover, body.red-dark .map-drawing-tools-btn-secondary:hover, body.sky-dark .map-drawing-tools-btn-secondary:hover, body.yellow-dark .map-drawing-tools-btn-secondary:hover, body.green-dark .map-drawing-tools-btn-secondary:hover, body.purple-dark .map-drawing-tools-btn-secondary:hover, body.indigo-dark .map-drawing-tools-btn-secondary:hover, body.slate-dark .map-drawing-tools-btn-secondary:hover, body.yellow-blue-dark .map-drawing-tools-btn-secondary:hover {
  background: rgba(var(--rgb-yellow-400), 0.15);
  color: rgb(var(--rgb-yellow-300));
}

.tooltip {
  --bs-tooltip-bg: rgb(var(--rgb-first-darker));
  --bs-tooltip-color: rgb(var(--rgb-lightest));
  --bs-tooltip-opacity: 0.95;
  --bs-tooltip-padding-x: 10px;
  --bs-tooltip-padding-y: 6px;
  --bs-tooltip-font-size: 11px;
}
.tooltip .tooltip-inner {
  border-radius: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

body.dark, body.faragard-dark, body.blue-dark, body.orange-dark, body.fuchsia-dark, body.pink-dark, body.emerald-dark, body.red-dark, body.sky-dark, body.yellow-dark, body.green-dark, body.purple-dark, body.indigo-dark, body.slate-dark, body.yellow-blue-dark .tooltip {
  --bs-tooltip-bg: rgb(var(--rgb-first-light));
  --bs-tooltip-color: rgb(var(--rgb-darkest));
}

@keyframes mapDrawingToolsPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.map-drawing-tools-btn.active i {
  animation: mapDrawingToolsPulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media only screen and (max-width: 768px) {
  .map-drawing-tools-panel {
    padding: 6px 4px !important;
    border-radius: 24px !important;
  }
  .map-drawing-tools-btn-group-vertical {
    gap: 4px;
  }
  .map-drawing-tools-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    font-size: 14px;
    border-radius: 16px;
  }
}
@media only screen and (max-width: 480px) {
  .map-drawing-tools-panel {
    top: 10px;
    right: 10px !important;
  }
  .map-drawing-tools-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 13px;
    border-radius: 14px;
  }
}
.leaflet-control-container .leaflet-top.leaflet-left {
  top: 10px;
  left: 10px;
}
@media (max-width: 768px) {
  .leaflet-control-container .leaflet-top.leaflet-left {
    top: 5px;
    left: 5px;
  }
}
.leaflet-control-container .leaflet-top.leaflet-right {
  top: 10px;
  right: 10px;
}
@media (max-width: 768px) {
  .leaflet-control-container .leaflet-top.leaflet-right {
    top: 5px;
    right: 5px;
  }
}

.leaflet-control {
  background: rgb(var(--rgb-ninth-lighter));
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.08), 0 1px 2px rgba(var(--rgb-darkest), 0.04) !important;
  border: 1px solid rgba(var(--rgb-light), 0.5);
  backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.leaflet-control:hover {
  box-shadow: 0 6px 16px rgba(var(--rgb-darkest), 0.12);
  transform: translateY(-1px);
}
body.dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

body.faragard-dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

body.blue-dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

body.orange-dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

body.fuchsia-dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

body.pink-dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

body.emerald-dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

body.red-dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

body.sky-dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

body.yellow-dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

body.green-dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

body.purple-dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

body.indigo-dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

body.slate-dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

body.yellow-blue-dark .leaflet-control {
  background: rgba(var(--rgb-ninth-lighter), 0.95);
  border-color: rgba(var(--rgb-light), 0.2);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.2);
}

.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
}

body.dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.faragard-dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.blue-dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.orange-dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.fuchsia-dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.pink-dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.emerald-dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.red-dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.sky-dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.yellow-dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.green-dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.purple-dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.indigo-dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.slate-dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

body.yellow-blue-dark .leaflet-control.leaflet-ruler {
  background-image: url(../maps/icon-colored.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

.leaflet-bar {
  border: none !important;
  border-radius: 16px !important;
}
.leaflet-bar a {
  color: rgb(var(--rgb-light-dark)) !important;
  border-bottom: 1px solid rgba(var(--rgb-light), 0.3) !important;
  transition: all 0.3s ease !important;
}
.leaflet-bar a:last-child {
  border-bottom: none !important;
}
.leaflet-bar a.leaflet-draw-draw-polyline {
  border-radius: 16px 16px 0 0 !important;
}
.leaflet-bar a.leaflet-draw-edit-remove {
  border-radius: 0 !important;
}
body.dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.faragard-dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.faragard-dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.blue-dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.blue-dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.orange-dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.orange-dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.fuchsia-dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.fuchsia-dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.pink-dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.pink-dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.emerald-dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.emerald-dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.red-dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.red-dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.sky-dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.sky-dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.yellow-dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.yellow-dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.green-dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.green-dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.purple-dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.purple-dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.indigo-dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.indigo-dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.slate-dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.slate-dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.yellow-blue-dark .leaflet-bar a {
  color: rgb(var(--rgb-light)) !important;
}
body.yellow-blue-dark .leaflet-bar a:hover {
  background-color: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

.leaflet-control.leaflet-bar.tan-locate-btn {
  background: transparent;
  backdrop-filter: none;
  border-radius: 100% !important;
  box-shadow: none !important;
}
.leaflet-control.leaflet-bar.tan-locate-btn:hover {
  transform: none !important;
  box-shadow: none !important;
}
.leaflet-control.leaflet-bar.tan-locate-btn a {
  width: 36px !important;
  height: 36px !important;
  border: none !important;
  border-radius: 100% !important;
  background-color: rgb(var(--rgb-first)) !important;
  color: rgb(var(--rgb-lightest)) !important;
  box-shadow: 0 0 0 4px rgba(var(--rgb-first), 0.5), 0 0 8px 0 rgba(var(--rgb-darkest), 0.1) !important;
  transition: all 200ms !important;
}
@media only screen and (max-width: 768px) {
  .leaflet-control.leaflet-bar.tan-locate-btn a {
    width: 34px !important;
    height: 34px !important;
  }
}
.leaflet-control.leaflet-bar.tan-locate-btn a:hover, .leaflet-control.leaflet-bar.tan-locate-btn a:active, .leaflet-control.leaflet-bar.tan-locate-btn a:focus {
  background-color: rgb(var(--rgb-first)) !important;
  color: rgb(var(--rgb-lightest)) !important;
  box-shadow: 0 0 0 6px rgba(var(--rgb-first), 0.5), 0 0 8px 0 rgba(var(--rgb-darkest), 0.1) !important;
}

.leaflet-draw-toolbar {
  border-radius: 16px !important;
  overflow: hidden;
}
.leaflet-draw-toolbar a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 0 !important;
  position: relative;
}
.leaflet-draw-toolbar a::before {
  font-family: "Font Awesome 6 Pro";
  font-size: 16px;
  font-weight: 900;
  transition: all 0.3s ease;
}
.leaflet-draw-toolbar a.leaflet-draw-draw-polyline::before {
  content: "\e289";
}
.leaflet-draw-toolbar a.leaflet-draw-draw-polygon::before {
  content: "\f5ee";
}
.leaflet-draw-toolbar a.leaflet-draw-draw-rectangle::before {
  content: "\f2fa";
}
.leaflet-draw-toolbar a.leaflet-draw-draw-circle::before {
  content: "\f111";
}
.leaflet-draw-toolbar a.leaflet-draw-draw-marker::before {
  content: "\f3c5";
}
.leaflet-draw-toolbar a.leaflet-draw-edit-edit::before {
  content: "\f304";
}
.leaflet-draw-toolbar a.leaflet-draw-edit-remove::before {
  content: "\f1f8";
}
.leaflet-draw-toolbar a .sr-only {
  display: none;
}

.leaflet-draw-actions {
  background: rgb(var(--rgb-ninth-lighter));
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(var(--rgb-darkest), 0.15), 0 2px 4px rgba(var(--rgb-darkest), 0.05) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--rgb-light), 0.3);
}
.leaflet-draw-actions li {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.leaflet-draw-actions li a {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgb(var(--rgb-dark)) !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  width: 100%;
  min-width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none !important;
}
.leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-lighter), 0.5) !important;
  color: rgb(var(--rgb-first)) !important;
}
body.dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.faragard-dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.faragard-dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.blue-dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.blue-dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.orange-dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.orange-dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.fuchsia-dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.fuchsia-dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.pink-dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.pink-dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.emerald-dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.emerald-dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.red-dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.red-dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.sky-dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.sky-dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.yellow-dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.yellow-dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.green-dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.green-dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.purple-dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.purple-dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.indigo-dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.indigo-dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.slate-dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.slate-dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.yellow-blue-dark .leaflet-draw-actions li a {
  color: rgb(var(--rgb-light)) !important;
}
body.yellow-blue-dark .leaflet-draw-actions li a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

.leaflet-draw-actions li:first-child a {
  border-top-right-radius: 20px !important;
  border-top-left-radius: 20px !important;
}
.leaflet-draw-actions li:last-child a {
  border-bottom-right-radius: 20px !important;
  border-bottom-left-radius: 20px !important;
}

.leaflet-control-zoom {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.08) !important;
}
.leaflet-control-zoom a {
  background: rgb(var(--rgb-ninth-lighter)) !important;
  color: rgb(var(--rgb-light-dark)) !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}
.leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-lighter), 0.5) !important;
  color: rgb(var(--rgb-first)) !important;
  transform: scale(1.05);
}
.leaflet-control-zoom a.leaflet-control-zoom-in {
  border-radius: 20px 20px 0 0 !important;
  border-bottom: 1px solid rgba(var(--rgb-light), 0.3) !important;
}
.leaflet-control-zoom a.leaflet-control-zoom-out {
  border-radius: 0 0 20px 20px !important;
}
body.dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.faragard-dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.faragard-dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.blue-dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.blue-dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.orange-dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.orange-dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.fuchsia-dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.fuchsia-dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.pink-dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.pink-dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.emerald-dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.emerald-dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.red-dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.red-dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.sky-dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.sky-dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.yellow-dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.yellow-dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.green-dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.green-dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.purple-dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.purple-dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.indigo-dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.indigo-dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.slate-dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.slate-dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

body.yellow-blue-dark .leaflet-control-zoom a {
  background: rgba(var(--rgb-ninth-lighter), 0.95) !important;
  color: rgb(var(--rgb-light)) !important;
}
body.yellow-blue-dark .leaflet-control-zoom a:hover {
  background: rgba(var(--rgb-first-darker), 0.3) !important;
  color: rgb(var(--rgb-first-darker)) !important;
}

.leaflet-control-scale {
  background: rgba(var(--rgb-ninth-lighter), 0.9) !important;
  backdrop-filter: blur(8px);
  border-radius: 12px !important;
  padding: 6px 12px !important;
  border: 1px solid rgba(var(--rgb-light), 0.3);
}
.leaflet-control-scale .leaflet-control-scale-line {
  background: transparent !important;
  border-color: rgb(var(--rgb-first)) !important;
  color: rgb(var(--rgb-first-darker)) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
}
.leaflet-control-scale .leaflet-control-scale-line:not(:first-child) {
  border-top: 1px solid rgba(var(--rgb-first), 0.3) !important;
}
body.dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

body.faragard-dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

body.blue-dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

body.orange-dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

body.fuchsia-dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

body.pink-dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

body.emerald-dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

body.red-dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

body.sky-dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

body.yellow-dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

body.green-dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

body.purple-dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

body.indigo-dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

body.slate-dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

body.yellow-blue-dark .leaflet-control-scale .leaflet-control-scale-line {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgb(var(--rgb-first-light)) !important;
}

.leaflet-control-attribution {
  background: rgba(var(--rgb-ninth-lighter), 0.8) !important;
  backdrop-filter: blur(8px);
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 10px !important;
  color: rgb(var(--rgb-light-dark)) !important;
}
.leaflet-control-attribution a {
  color: rgb(var(--rgb-first)) !important;
}
.leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first-darker)) !important;
}
body.dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

body.faragard-dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.faragard-dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

body.blue-dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.blue-dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

body.orange-dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.orange-dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

body.fuchsia-dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.fuchsia-dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

body.pink-dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.pink-dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

body.emerald-dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.emerald-dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

body.red-dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.red-dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

body.sky-dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.sky-dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

body.yellow-dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.yellow-dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

body.green-dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.green-dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

body.purple-dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.purple-dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

body.indigo-dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.indigo-dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

body.slate-dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.slate-dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

body.yellow-blue-dark .leaflet-control-attribution a {
  color: rgb(var(--rgb-first-light)) !important;
}
body.yellow-blue-dark .leaflet-control-attribution a:hover {
  color: rgb(var(--rgb-first)) !important;
}

.leaflet-draw-draw-polygon.leaflet-draw-toolbar a,
.leaflet-draw-draw-polyline.leaflet-draw-toolbar a,
.leaflet-draw-draw-circle.leaflet-draw-toolbar a {
  transition: all 0.3s ease;
}
.leaflet-draw-draw-polygon.leaflet-draw-toolbar a:active,
.leaflet-draw-draw-polyline.leaflet-draw-toolbar a:active,
.leaflet-draw-draw-circle.leaflet-draw-toolbar a:active {
  transform: scale(0.95);
}

.leaflet-draw-toolbar a.leaflet-draw-edit-edit.leaflet-disabled,
.leaflet-draw-toolbar a.leaflet-draw-edit-remove.leaflet-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.leaflet-draw-toolbar a.leaflet-draw-edit-edit.leaflet-disabled:hover,
.leaflet-draw-toolbar a.leaflet-draw-edit-remove.leaflet-disabled:hover {
  transform: none;
  background: transparent !important;
}

.leaflet-vector-grid-slicer {
  opacity: 0.95;
  transition: opacity 0.3s ease;
}
.leaflet-vector-grid-slicer:hover {
  opacity: 1;
}

.leaflet-popup .leaflet-popup-content-wrapper {
  background: rgb(var(--rgb-ninth-lighter));
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(var(--rgb-darkest), 0.15) !important;
  padding: 0 !important;
  border: 1px solid rgba(var(--rgb-light), 0.3);
  backdrop-filter: blur(12px);
  padding: 0 30px !important;
}
.leaflet-popup .leaflet-popup-tip {
  background: rgb(var(--rgb-ninth-lighter));
  box-shadow: 0 8px 24px rgba(var(--rgb-darkest), 0.15) !important;
  border: 1px solid rgba(var(--rgb-light), 0.3);
}
.leaflet-popup .leaflet-popup-content {
  margin: 16px 20px !important;
  color: rgb(var(--rgb-darkest));
  font-size: 13px;
  line-height: 1.6;
}
body.dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

body.faragard-dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

body.blue-dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

body.orange-dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

body.fuchsia-dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

body.pink-dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

body.emerald-dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

body.red-dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

body.sky-dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

body.yellow-dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

body.green-dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

body.purple-dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

body.indigo-dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

body.slate-dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

body.yellow-blue-dark .leaflet-popup .leaflet-popup-content {
  color: rgb(var(--rgb-light));
}

.leaflet-popup .leaflet-popup-close-button {
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(var(--rgb-light), 0.3) !important;
  color: rgb(var(--rgb-light-dark)) !important;
  font-size: 16px !important;
  transition: all 200ms linear !important;
}
.leaflet-popup .leaflet-popup-close-button:hover {
  background: rgba(var(--rgb-red-600)) !important;
  color: rgb(var(--rgb-lightest)) !important;
  transform: scale(1.1);
}
body.dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

body.faragard-dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

body.blue-dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

body.orange-dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

body.fuchsia-dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

body.pink-dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

body.emerald-dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

body.red-dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

body.sky-dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

body.yellow-dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

body.green-dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

body.purple-dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

body.indigo-dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

body.slate-dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

body.yellow-blue-dark .leaflet-popup .leaflet-popup-close-button {
  background: rgba(var(--rgb-light), 0.2) !important;
}

.leaflet-control-ruler {
  background: rgb(var(--rgb-ninth-lighter)) !important;
  border-radius: 20px !important;
  padding: 8px !important;
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.08) !important;
}
.leaflet-control-ruler .leaflet-control-ruler-button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: rgb(var(--rgb-light-dark));
}
.leaflet-control-ruler .leaflet-control-ruler-button:hover {
  background: rgba(var(--rgb-first-lighter), 0.5);
  color: rgb(var(--rgb-first));
}
.leaflet-control-ruler .leaflet-control-ruler-button.active {
  background: rgb(var(--rgb-first));
  color: rgb(var(--rgb-lightest));
}
.leaflet-control-ruler .leaflet-ruler-tooltip {
  background: rgb(var(--rgb-ninth-lighter));
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: rgb(var(--rgb-first-darker));
  border: 1px solid rgba(var(--rgb-first), 0.3);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.1);
}

.leaflet-ruler-line {
  stroke: rgb(var(--rgb-first));
  stroke-width: 3;
  stroke-dasharray: 6, 4;
  animation: dashMove 1s linear infinite;
}

@keyframes dashMove {
  to {
    stroke-dashoffset: -20;
  }
}
.leaflet-tooltip {
  background: rgb(var(--rgb-ninth-lighter)) !important;
  border: 1px solid rgba(var(--rgb-first), 0.3);
  border-radius: 12px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgb(var(--rgb-first-darker)) !important;
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.1) !important;
}
.leaflet-tooltip::before {
  border-top-color: rgb(var(--rgb-first-lighter)) !important;
}
body.dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

body.faragard-dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

body.blue-dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

body.orange-dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

body.fuchsia-dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

body.pink-dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

body.emerald-dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

body.red-dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

body.sky-dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

body.yellow-dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

body.green-dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

body.purple-dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

body.indigo-dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

body.slate-dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

body.yellow-blue-dark .leaflet-tooltip {
  color: rgb(var(--rgb-first-light)) !important;
  border-color: rgba(var(--rgb-first-light), 0.3);
}

@keyframes leafletDrawPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.leaflet-draw-draw-polyline.leaflet-draw-toolbar a:active,
.leaflet-draw-draw-polygon.leaflet-draw-toolbar a:active,
.leaflet-draw-draw-circle.leaflet-draw-toolbar a:active {
  animation: leafletDrawPulse 0.3s ease;
}

@media (max-width: 768px) {
  .leaflet-bar a {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 14px !important;
  }
  .leaflet-bar a::before {
    font-size: 14px !important;
  }
  .leaflet-control-zoom a {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
  }
  .leaflet-draw-actions {
    min-width: 120px !important;
  }
  .leaflet-draw-actions li a {
    padding: 8px 16px !important;
    font-size: 11px !important;
  }
}
.default-route-marker {
  filter: drop-shadow(0 0 6px rgba(var(--rgb-blue-600), 1));
}

.map-places-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 16px;
  padding: 8px 16px;
  place-items: stretch;
}
.map-places-wrapper .map-places-item {
  width: 100% !important;
  margin: 0 !important;
}

/* Equipment Widget Styles Start */
.equipment-global-container .module-box {
  background-color: rgb(var(--rgb-ninth-lighter));
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px 0 rgba(var(--rgb-darkest), 0.1);
  transition: all 0.2s ease;
}
.equipment-global-container .module-box:hover {
  box-shadow: 0 4px 6px -1px rgba(var(--rgb-darkest), 0.1);
}

.equipment-category-card {
  background-color: rgb(var(--rgb-ninth-lighter));
  border: 1px solid rgb(var(--rgb-light));
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
  height: 100%;
}
.equipment-category-card:hover {
  border-color: rgb(var(--rgb-first-light));
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.08);
  transform: translateY(-2px);
}
.equipment-category-card .category-header {
  padding: 1rem;
  border-bottom: 1px solid rgb(var(--rgb-light));
  background: linear-gradient(135deg, rgba(var(--rgb-first-lighter), 0.3) 0%, rgba(var(--rgb-first-lighter), 0) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.equipment-category-card .category-header .category-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--rgb-first-lighter), 0.5);
  border-radius: var(--radius-md);
  color: rgb(var(--rgb-first));
}
.equipment-category-card .category-header .category-icon i,
.equipment-category-card .category-header .category-icon svg {
  font-size: 1.1rem;
}
.equipment-category-card .category-header .category-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgb(var(--rgb-darkest));
}
.equipment-category-card .category-header .stats-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-md);
  font-size: 0.7rem;
  font-weight: 500;
}
.equipment-category-card .category-header .stats-badge.on-badge {
  background-color: rgba(var(--rgb-green-600), 0.15);
  color: rgb(var(--rgb-green-700));
}
.equipment-category-card .category-header .stats-badge.off-badge {
  background-color: rgba(var(--rgb-red-600), 0.15);
  color: rgb(var(--rgb-red-700));
}
.equipment-category-card .category-header .stats-badge.total-badge {
  background-color: rgba(var(--rgb-slate-500), 0.15);
  color: rgb(var(--rgb-slate-600));
}
.equipment-category-card .category-header .group-toggle-on-btn,
.equipment-category-card .category-header .group-toggle-off-btn {
  padding: 0.35rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  border: none;
}
.equipment-category-card .category-header .group-toggle-on-btn:hover:not(:disabled),
.equipment-category-card .category-header .group-toggle-off-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.equipment-category-card .category-header .group-toggle-on-btn:active:not(:disabled),
.equipment-category-card .category-header .group-toggle-off-btn:active:not(:disabled) {
  transform: translateY(0);
}
.equipment-category-card .category-header .group-toggle-on-btn:disabled,
.equipment-category-card .category-header .group-toggle-off-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.equipment-category-card .category-header .group-toggle-on-btn {
  background: linear-gradient(135deg, rgb(var(--rgb-green-600)) 0%, rgb(var(--rgb-green-700)) 100%);
  color: rgb(var(--rgb-lightest));
}
.equipment-category-card .category-header .group-toggle-on-btn:hover:not(:disabled) {
  box-shadow: 0 2px 8px rgba(var(--rgb-green-600), 0.4);
}
.equipment-category-card .category-header .group-toggle-off-btn {
  background: linear-gradient(135deg, rgb(var(--rgb-red-600)) 0%, rgb(var(--rgb-red-700)) 100%);
  color: rgb(var(--rgb-lightest));
}
.equipment-category-card .category-header .group-toggle-off-btn:hover:not(:disabled) {
  box-shadow: 0 2px 8px rgba(var(--rgb-red-600), 0.4);
}
.equipment-category-card .equipment-list {
  padding: 0.75rem;
  max-height: 320px;
  overflow-y: auto;
}

.equipment-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem;
  margin-bottom: 0.5rem;
  background-color: rgb(var(--rgb-lighter));
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}
.equipment-item:hover {
  background-color: rgba(var(--rgb-first-lighter), 0.3);
  transform: translateX(4px);
}
.equipment-item:last-child {
  margin-bottom: 0;
}
.equipment-item .equipment-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--rgb-ninth-lighter));
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.equipment-item .equipment-icon i,
.equipment-item .equipment-icon svg {
  font-size: 1rem;
}
.equipment-item .equipment-icon i.text-blue-600,
.equipment-item .equipment-icon svg.text-blue-600 {
  color: rgb(var(--rgb-blue-600));
}
.equipment-item .equipment-info {
  flex: 1;
  min-width: 0;
}
.equipment-item .equipment-info .equipment-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgb(var(--rgb-darkest));
  margin-bottom: 0.125rem;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.equipment-item .equipment-info .device-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.125rem 0.375rem;
  background-color: rgba(var(--rgb-slate-400), 0.15);
  color: rgb(var(--rgb-slate-600));
  border-radius: var(--radius-sm);
  margin-top: 0.125rem;
}
.equipment-item .equipment-status {
  flex-shrink: 0;
}
.equipment-item .equipment-status .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.2s ease;
}
.equipment-item .equipment-status .status-badge.bg-green-600 {
  background-color: rgb(var(--rgb-green-600));
  color: rgb(var(--rgb-lightest));
}
.equipment-item .equipment-status .status-badge.bg-red-600 {
  background-color: rgb(var(--rgb-red-600));
  color: rgb(var(--rgb-lightest));
}
.equipment-item .equipment-status .status-badge.bg-slate-500 {
  background-color: rgb(var(--rgb-slate-500));
  color: rgb(var(--rgb-lightest));
}
.equipment-item .equipment-status .relay-circle {
  width: 1.75rem;
  height: 1.75rem;
}
.equipment-item .equipment-status .relay-circle.svg-green-600 circle {
  fill: rgb(var(--rgb-green-600));
  stroke: rgb(var(--rgb-green-600));
}
.equipment-item .equipment-status .relay-circle.svg-red-600 circle {
  fill: rgb(var(--rgb-red-600));
  stroke: rgb(var(--rgb-red-600));
}
.equipment-item .equipment-status .relay-circle.svg-slate-600 circle {
  fill: rgb(var(--rgb-slate-500));
  stroke: rgb(var(--rgb-slate-500));
}
.equipment-item .equipment-status .color-picker {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 2px solid rgb(var(--rgb-light));
  border-radius: var(--radius-md);
  cursor: pointer;
  background: rgb(var(--rgb-ninth-lighter));
  transition: all 0.2s ease;
}
.equipment-item .equipment-status .color-picker:hover {
  transform: scale(1.05);
  border-color: rgb(var(--rgb-first));
}
.equipment-item .equipment-status .sensor-value {
  background-color: rgba(var(--rgb-blue-600), 0.15);
  color: rgb(var(--rgb-blue-700));
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 500;
  direction: ltr;
  display: inline-block;
}
.equipment-item .equipment-status .sensor-value.disabled {
  background-color: rgba(var(--rgb-slate-500), 0.15);
  color: rgb(var(--rgb-slate-600));
}

/* Dark mode adjustments */
body.dark .equipment-category-card, body.faragard-dark .equipment-category-card, body.blue-dark .equipment-category-card, body.orange-dark .equipment-category-card, body.fuchsia-dark .equipment-category-card, body.pink-dark .equipment-category-card, body.emerald-dark .equipment-category-card, body.red-dark .equipment-category-card, body.sky-dark .equipment-category-card, body.yellow-dark .equipment-category-card, body.green-dark .equipment-category-card, body.purple-dark .equipment-category-card, body.indigo-dark .equipment-category-card, body.slate-dark .equipment-category-card, body.yellow-blue-dark .equipment-category-card {
  background-color: rgb(var(--rgb-ninth-lighter));
  border-color: rgba(var(--rgb-lightest), 0.1);
}
body.dark .equipment-category-card .category-header, body.faragard-dark .equipment-category-card .category-header, body.blue-dark .equipment-category-card .category-header, body.orange-dark .equipment-category-card .category-header, body.fuchsia-dark .equipment-category-card .category-header, body.pink-dark .equipment-category-card .category-header, body.emerald-dark .equipment-category-card .category-header, body.red-dark .equipment-category-card .category-header, body.sky-dark .equipment-category-card .category-header, body.yellow-dark .equipment-category-card .category-header, body.green-dark .equipment-category-card .category-header, body.purple-dark .equipment-category-card .category-header, body.indigo-dark .equipment-category-card .category-header, body.slate-dark .equipment-category-card .category-header, body.yellow-blue-dark .equipment-category-card .category-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.1);
  background: linear-gradient(135deg, rgba(var(--rgb-first), 0.15) 0%, rgba(var(--rgb-first), 0) 100%);
}
body.dark .equipment-category-card .category-header .stats-badge.on-badge, body.faragard-dark .equipment-category-card .category-header .stats-badge.on-badge, body.blue-dark .equipment-category-card .category-header .stats-badge.on-badge, body.orange-dark .equipment-category-card .category-header .stats-badge.on-badge, body.fuchsia-dark .equipment-category-card .category-header .stats-badge.on-badge, body.pink-dark .equipment-category-card .category-header .stats-badge.on-badge, body.emerald-dark .equipment-category-card .category-header .stats-badge.on-badge, body.red-dark .equipment-category-card .category-header .stats-badge.on-badge, body.sky-dark .equipment-category-card .category-header .stats-badge.on-badge, body.yellow-dark .equipment-category-card .category-header .stats-badge.on-badge, body.green-dark .equipment-category-card .category-header .stats-badge.on-badge, body.purple-dark .equipment-category-card .category-header .stats-badge.on-badge, body.indigo-dark .equipment-category-card .category-header .stats-badge.on-badge, body.slate-dark .equipment-category-card .category-header .stats-badge.on-badge, body.yellow-blue-dark .equipment-category-card .category-header .stats-badge.on-badge {
  background-color: rgba(var(--rgb-green-500), 0.2);
  color: rgb(var(--rgb-green-400));
}
body.dark .equipment-category-card .category-header .stats-badge.off-badge, body.faragard-dark .equipment-category-card .category-header .stats-badge.off-badge, body.blue-dark .equipment-category-card .category-header .stats-badge.off-badge, body.orange-dark .equipment-category-card .category-header .stats-badge.off-badge, body.fuchsia-dark .equipment-category-card .category-header .stats-badge.off-badge, body.pink-dark .equipment-category-card .category-header .stats-badge.off-badge, body.emerald-dark .equipment-category-card .category-header .stats-badge.off-badge, body.red-dark .equipment-category-card .category-header .stats-badge.off-badge, body.sky-dark .equipment-category-card .category-header .stats-badge.off-badge, body.yellow-dark .equipment-category-card .category-header .stats-badge.off-badge, body.green-dark .equipment-category-card .category-header .stats-badge.off-badge, body.purple-dark .equipment-category-card .category-header .stats-badge.off-badge, body.indigo-dark .equipment-category-card .category-header .stats-badge.off-badge, body.slate-dark .equipment-category-card .category-header .stats-badge.off-badge, body.yellow-blue-dark .equipment-category-card .category-header .stats-badge.off-badge {
  background-color: rgba(var(--rgb-red-500), 0.2);
  color: rgb(var(--rgb-red-400));
}
body.dark .equipment-category-card .category-header .stats-badge.total-badge, body.faragard-dark .equipment-category-card .category-header .stats-badge.total-badge, body.blue-dark .equipment-category-card .category-header .stats-badge.total-badge, body.orange-dark .equipment-category-card .category-header .stats-badge.total-badge, body.fuchsia-dark .equipment-category-card .category-header .stats-badge.total-badge, body.pink-dark .equipment-category-card .category-header .stats-badge.total-badge, body.emerald-dark .equipment-category-card .category-header .stats-badge.total-badge, body.red-dark .equipment-category-card .category-header .stats-badge.total-badge, body.sky-dark .equipment-category-card .category-header .stats-badge.total-badge, body.yellow-dark .equipment-category-card .category-header .stats-badge.total-badge, body.green-dark .equipment-category-card .category-header .stats-badge.total-badge, body.purple-dark .equipment-category-card .category-header .stats-badge.total-badge, body.indigo-dark .equipment-category-card .category-header .stats-badge.total-badge, body.slate-dark .equipment-category-card .category-header .stats-badge.total-badge, body.yellow-blue-dark .equipment-category-card .category-header .stats-badge.total-badge {
  background-color: rgba(var(--rgb-slate-400), 0.2);
  color: rgb(var(--rgb-slate-300));
}
body.dark .equipment-item, body.faragard-dark .equipment-item, body.blue-dark .equipment-item, body.orange-dark .equipment-item, body.fuchsia-dark .equipment-item, body.pink-dark .equipment-item, body.emerald-dark .equipment-item, body.red-dark .equipment-item, body.sky-dark .equipment-item, body.yellow-dark .equipment-item, body.green-dark .equipment-item, body.purple-dark .equipment-item, body.indigo-dark .equipment-item, body.slate-dark .equipment-item, body.yellow-blue-dark .equipment-item {
  background-color: rgba(var(--rgb-lightest), 0.05);
}
body.dark .equipment-item:hover, body.faragard-dark .equipment-item:hover, body.blue-dark .equipment-item:hover, body.orange-dark .equipment-item:hover, body.fuchsia-dark .equipment-item:hover, body.pink-dark .equipment-item:hover, body.emerald-dark .equipment-item:hover, body.red-dark .equipment-item:hover, body.sky-dark .equipment-item:hover, body.yellow-dark .equipment-item:hover, body.green-dark .equipment-item:hover, body.purple-dark .equipment-item:hover, body.indigo-dark .equipment-item:hover, body.slate-dark .equipment-item:hover, body.yellow-blue-dark .equipment-item:hover {
  background-color: rgba(var(--rgb-first), 0.15);
}
body.dark .equipment-item .equipment-info .equipment-name, body.faragard-dark .equipment-item .equipment-info .equipment-name, body.blue-dark .equipment-item .equipment-info .equipment-name, body.orange-dark .equipment-item .equipment-info .equipment-name, body.fuchsia-dark .equipment-item .equipment-info .equipment-name, body.pink-dark .equipment-item .equipment-info .equipment-name, body.emerald-dark .equipment-item .equipment-info .equipment-name, body.red-dark .equipment-item .equipment-info .equipment-name, body.sky-dark .equipment-item .equipment-info .equipment-name, body.yellow-dark .equipment-item .equipment-info .equipment-name, body.green-dark .equipment-item .equipment-info .equipment-name, body.purple-dark .equipment-item .equipment-info .equipment-name, body.indigo-dark .equipment-item .equipment-info .equipment-name, body.slate-dark .equipment-item .equipment-info .equipment-name, body.yellow-blue-dark .equipment-item .equipment-info .equipment-name {
  color: rgb(var(--rgb-lightest));
}
body.dark .equipment-item .equipment-info .device-badge, body.faragard-dark .equipment-item .equipment-info .device-badge, body.blue-dark .equipment-item .equipment-info .device-badge, body.orange-dark .equipment-item .equipment-info .device-badge, body.fuchsia-dark .equipment-item .equipment-info .device-badge, body.pink-dark .equipment-item .equipment-info .device-badge, body.emerald-dark .equipment-item .equipment-info .device-badge, body.red-dark .equipment-item .equipment-info .device-badge, body.sky-dark .equipment-item .equipment-info .device-badge, body.yellow-dark .equipment-item .equipment-info .device-badge, body.green-dark .equipment-item .equipment-info .device-badge, body.purple-dark .equipment-item .equipment-info .device-badge, body.indigo-dark .equipment-item .equipment-info .device-badge, body.slate-dark .equipment-item .equipment-info .device-badge, body.yellow-blue-dark .equipment-item .equipment-info .device-badge {
  background-color: rgba(var(--rgb-lightest), 0.1);
  color: rgb(var(--rgb-light-dark));
}
body.dark .equipment-item .equipment-status .sensor-value, body.faragard-dark .equipment-item .equipment-status .sensor-value, body.blue-dark .equipment-item .equipment-status .sensor-value, body.orange-dark .equipment-item .equipment-status .sensor-value, body.fuchsia-dark .equipment-item .equipment-status .sensor-value, body.pink-dark .equipment-item .equipment-status .sensor-value, body.emerald-dark .equipment-item .equipment-status .sensor-value, body.red-dark .equipment-item .equipment-status .sensor-value, body.sky-dark .equipment-item .equipment-status .sensor-value, body.yellow-dark .equipment-item .equipment-status .sensor-value, body.green-dark .equipment-item .equipment-status .sensor-value, body.purple-dark .equipment-item .equipment-status .sensor-value, body.indigo-dark .equipment-item .equipment-status .sensor-value, body.slate-dark .equipment-item .equipment-status .sensor-value, body.yellow-blue-dark .equipment-item .equipment-status .sensor-value {
  background-color: rgba(var(--rgb-blue-500), 0.2);
  color: rgb(var(--rgb-blue-300));
}

/* Responsive adjustments */
@media only screen and (max-width: 767px) {
  .equipment-category-card .category-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem;
  }
  .equipment-category-card .category-header .stats-wrapper {
    flex-wrap: wrap;
    width: 100%;
  }
  .equipment-item {
    flex-wrap: wrap;
  }
  .equipment-item .equipment-status {
    width: 100%;
    justify-content: flex-end;
  }
}
/* Empty state */
.equipment-empty-state {
  text-align: center;
  padding: 2rem;
}
.equipment-empty-state i,
.equipment-empty-state svg {
  font-size: 3rem;
  color: rgb(var(--rgb-light-dark));
  margin-bottom: 0.75rem;
  opacity: 0.5;
}
.equipment-empty-state p {
  color: rgb(var(--rgb-light-dark));
  font-size: 0.85rem;
}

/* Tooltip customization */
.equipment-item[data-bs-toggle=tooltip] {
  cursor: help;
}

/* Animation for status changes */
@keyframes statusPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.status-badge {
  transition: all 0.2s ease;
}
.status-badge:active {
  animation: statusPulse 0.3s ease;
}

/* Node Items */
.map-places-item {
  transition: transform 0.2s, box-shadow 0.2s;
}
.map-places-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.1);
}

/* Equipment Widget */
.equipment-global-container .module-box {
  transition: box-shadow 0.2s;
}
.equipment-global-container .module-box:hover {
  box-shadow: 0 4px 12px rgba(var(--rgb-darkest), 0.1);
}

/* Dark mode adjustments */
body.dark .map-places-item, body.faragard-dark .map-places-item, body.blue-dark .map-places-item, body.orange-dark .map-places-item, body.fuchsia-dark .map-places-item, body.pink-dark .map-places-item, body.emerald-dark .map-places-item, body.red-dark .map-places-item, body.sky-dark .map-places-item, body.yellow-dark .map-places-item, body.green-dark .map-places-item, body.purple-dark .map-places-item, body.indigo-dark .map-places-item, body.slate-dark .map-places-item, body.yellow-blue-dark .map-places-item {
  background-color: rgb(var(--rgb-ninth-lighter));
}
body.dark .map-places-item:hover, body.faragard-dark .map-places-item:hover, body.blue-dark .map-places-item:hover, body.orange-dark .map-places-item:hover, body.fuchsia-dark .map-places-item:hover, body.pink-dark .map-places-item:hover, body.emerald-dark .map-places-item:hover, body.red-dark .map-places-item:hover, body.sky-dark .map-places-item:hover, body.yellow-dark .map-places-item:hover, body.green-dark .map-places-item:hover, body.purple-dark .map-places-item:hover, body.indigo-dark .map-places-item:hover, body.slate-dark .map-places-item:hover, body.yellow-blue-dark .map-places-item:hover {
  box-shadow: 0 4px 12px rgba(var(--rgb-lightest), 0.1);
}

/* Equipment Widget Styles End */
.flat-popup-close,
.over-popup-close,
.modal .btn-close {
  color: rgb(var(--rgb-red-500)) !important;
  transition: all 0.2s ease !important;
}
.flat-popup-close:hover,
.over-popup-close:hover,
.modal .btn-close:hover {
  color: rgb(var(--rgb-red-600)) !important;
  background: rgba(var(--rgb-red-500), 0.1) !important;
  transform: scale(1.1);
}
.flat-popup-close:active,
.over-popup-close:active,
.modal .btn-close:active {
  transform: scale(0.9);
}

.modal-dialog.popup-position-left {
  margin: 0;
  max-width: var(--popup-size, 30%);
  transform: translateX(-100%);
  transition: transform var(--popup-transition-duration) var(--popup-transition-easing), opacity var(--popup-transition-duration) var(--popup-transition-easing);
  opacity: 0;
}
.modal-dialog.popup-position-left .modal-content {
  border-radius: 0 var(--popup-radius) var(--popup-radius) 0;
  min-height: 100vh;
  box-shadow: 4px 0 30px rgba(var(--rgb-darkest), 0.15);
}
.modal-dialog.popup-position-left.show {
  transform: translateX(0);
  opacity: 1;
}
.modal-dialog.popup-position-left.hiding {
  transform: translateX(-100%);
  opacity: 0;
}
.modal-dialog.popup-position-right {
  margin: 0 0 0 auto;
  max-width: var(--popup-size, 30%);
  transform: translateX(100%);
  transition: transform var(--popup-transition-duration) var(--popup-transition-easing), opacity var(--popup-transition-duration) var(--popup-transition-easing);
  opacity: 0;
}
.modal-dialog.popup-position-right .modal-content {
  border-radius: var(--popup-radius) 0 0 var(--popup-radius);
  min-height: 100vh;
  box-shadow: -4px 0 30px rgba(var(--rgb-darkest), 0.15);
}
.modal-dialog.popup-position-right.show {
  transform: translateX(0);
  opacity: 1;
}
.modal-dialog.popup-position-right.hiding {
  transform: translateX(100%);
  opacity: 0;
}
.modal-dialog.popup-position-top {
  margin: 0;
  max-width: 100vw;
  transform: translateY(-100%);
  transition: transform var(--popup-transition-duration) var(--popup-transition-easing), opacity var(--popup-transition-duration) var(--popup-transition-easing);
  opacity: 0;
}
.modal-dialog.popup-position-top .modal-content {
  border-radius: 0 0 var(--popup-radius) var(--popup-radius);
  min-height: var(--popup-size, 30%);
  box-shadow: 0 4px 30px rgba(var(--rgb-darkest), 0.15);
}
.modal-dialog.popup-position-top.show {
  transform: translateY(0);
  opacity: 1;
}
.modal-dialog.popup-position-top.hiding {
  transform: translateY(-100%);
  opacity: 0;
}
.modal-dialog.popup-position-bottom {
  margin: auto 0 0 0;
  max-width: 100vw;
  transform: translateY(100%);
  transition: transform var(--popup-transition-duration) var(--popup-transition-easing), opacity var(--popup-transition-duration) var(--popup-transition-easing);
  opacity: 0;
}
.modal-dialog.popup-position-bottom .modal-content {
  border-radius: var(--popup-radius) var(--popup-radius) 0 0;
  min-height: var(--popup-size, 30%);
  box-shadow: 0 -4px 30px rgba(var(--rgb-darkest), 0.15);
}
.modal-dialog.popup-position-bottom.show {
  transform: translateY(0);
  opacity: 1;
}
.modal-dialog.popup-position-bottom.hiding {
  transform: translateY(100%);
  opacity: 0;
}

.my-body-content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 100vh;
  transition: all var(--popup-transition-duration) var(--popup-transition-easing);
  position: relative;
  overflow: hidden;
}
.my-body-content.flat-top {
  flex-direction: column;
}
.my-body-content.flat-bottom {
  flex-direction: column;
}

.flat-popup-box {
  display: flex;
  flex-direction: column;
  background: var(--popup-bg);
  box-shadow: var(--popup-shadow);
  z-index: var(--popup-z-index);
  border: 1px solid rgba(var(--rgb-light), 0.08);
  overflow: hidden;
  flex-shrink: 0;
  flex-grow: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
}
.flat-popup-box[data-position=right] {
  order: -1;
  border-radius: 0 var(--popup-radius) var(--popup-radius) 0;
  transform: translateX(100%) scale(0.95);
  transition: transform var(--popup-transition-duration) var(--popup-transition-easing), opacity var(--popup-transition-duration) var(--popup-transition-easing);
}
.flat-popup-box[data-position=right].is-open {
  width: var(--popup-size, 30%);
  height: 100vh;
  transform: translateX(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.flat-popup-box[data-position=right].is-closing {
  width: var(--popup-size, 30%);
  height: 100vh;
  transform: translateX(100%) scale(0.95);
  opacity: 0;
  pointer-events: none;
}
.flat-popup-box[data-position=right].is-closed {
  width: 0 !important;
  height: 0 !important;
  transform: translateX(100%) scale(0.95) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.flat-popup-box[data-position=left] {
  order: 2;
  border-radius: var(--popup-radius) 0 0 var(--popup-radius);
  transform: translateX(-100%) scale(0.95);
  transition: transform var(--popup-transition-duration) var(--popup-transition-easing), opacity var(--popup-transition-duration) var(--popup-transition-easing);
}
.flat-popup-box[data-position=left].is-open {
  width: var(--popup-size, 30%);
  height: 100vh;
  transform: translateX(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.flat-popup-box[data-position=left].is-closing {
  width: var(--popup-size, 30%);
  height: 100vh;
  transform: translateX(-100%) scale(0.95);
  opacity: 0;
  pointer-events: none;
}
.flat-popup-box[data-position=left].is-closed {
  width: 0 !important;
  height: 0 !important;
  transform: translateX(-100%) scale(0.95) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.flat-popup-box[data-position=top] {
  order: -1;
  border-radius: 0 0 var(--popup-radius) var(--popup-radius);
  transform: translateY(-100%) scale(0.95);
  transform-origin: top center;
  transition: height var(--popup-transition-duration) var(--popup-transition-easing), transform var(--popup-transition-duration) var(--popup-transition-easing), opacity var(--popup-transition-duration) var(--popup-transition-easing);
}
.flat-popup-box[data-position=top].is-open {
  width: 100vw;
  height: var(--popup-size, 30%);
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.flat-popup-box[data-position=top].is-closing {
  width: 100vw;
  height: var(--popup-size, 30%);
  transform: translateY(-100%) scale(0.95);
  opacity: 0;
  pointer-events: none;
}
.flat-popup-box[data-position=top].is-closed {
  width: 0 !important;
  height: 0 !important;
  transform: translateY(-100%) scale(0.95) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.flat-popup-box[data-position=bottom] {
  order: 2;
  border-radius: var(--popup-radius) var(--popup-radius) 0 0;
  transform: translateY(100%) scale(0.95);
  transform-origin: bottom center;
  transition: height var(--popup-transition-duration) var(--popup-transition-easing), transform var(--popup-transition-duration) var(--popup-transition-easing), opacity var(--popup-transition-duration) var(--popup-transition-easing);
}
.flat-popup-box[data-position=bottom].is-open {
  width: 100vw;
  height: var(--popup-size, 30%);
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.flat-popup-box[data-position=bottom].is-closing {
  width: 100vw;
  height: var(--popup-size, 30%);
  transform: translateY(100%) scale(0.95);
  opacity: 0;
  pointer-events: none;
}
.flat-popup-box[data-position=bottom].is-closed {
  width: 0 !important;
  height: 0 !important;
  transform: translateY(100%) scale(0.95) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.flat-popup-box .flat-popup-header {
  flex: 0 0 var(--popup-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid rgba(var(--rgb-light), 0.15);
  min-height: var(--popup-header-h);
}
.flat-popup-box .flat-popup-header .flat-popup-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgb(var(--rgb-darkest));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flat-popup-box .flat-popup-header .flat-popup-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: rgb(var(--rgb-red-500)) !important;
  flex-shrink: 0;
}
.flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.1) !important;
  color: rgb(var(--rgb-red-600)) !important;
  transform: scale(1.1);
}
.flat-popup-box .flat-popup-header .flat-popup-close:active {
  transform: scale(0.9);
}
.flat-popup-box .flat-popup-body {
  flex: 1;
  overflow: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.flat-popup-box .flat-popup-body::-webkit-scrollbar {
  width: 6px;
}
.flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgb(var(--rgb-light));
  border-radius: var(--radius-full);
}
.flat-popup-box .flat-popup-body::-webkit-scrollbar-track {
  background: transparent;
}
.flat-popup-box .flat-popup-body .loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 16px;
  min-height: 200px;
}
.flat-popup-box .flat-popup-body .loader .loader-wheel {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(var(--rgb-light), 0.3);
  border-top-color: rgb(var(--rgb-first));
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.flat-popup-box .flat-popup-body .loader .loader-text {
  font-size: 14px;
  color: rgb(var(--rgb-light-dark));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.over-popup-box {
  position: fixed;
  display: none;
  flex-direction: column;
  background: var(--popup-bg);
  border-radius: var(--popup-radius);
  box-shadow: 0 10px 40px rgba(var(--rgb-darkest), 0.2);
  width: var(--popup-size, 320px);
  max-width: calc(100vw - 16px);
  max-height: 80vh;
  z-index: calc(var(--popup-z-index) + 5);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--rgb-light), 0.1);
  transition: opacity var(--popup-transition-duration) var(--popup-transition-easing), transform var(--popup-transition-duration) var(--popup-transition-easing);
  opacity: 0;
  transform: scale(0.95) translateY(-8px);
  pointer-events: none;
}
.over-popup-box.is-open {
  display: flex;
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  animation: over-slide-in var(--popup-transition-duration) var(--popup-transition-easing);
}
.over-popup-box.is-closing {
  opacity: 0;
  transform: scale(0.95) translateY(-8px);
  pointer-events: none;
}
.over-popup-box .over-popup-header {
  flex: 0 0 var(--popup-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid rgba(var(--rgb-light), 0.15);
  min-height: var(--popup-header-h);
}
.over-popup-box .over-popup-header .over-popup-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: rgb(var(--rgb-darkest));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.over-popup-box .over-popup-header .over-popup-close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: rgb(var(--rgb-red-500)) !important;
  flex-shrink: 0;
}
.over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.1) !important;
  color: rgb(var(--rgb-red-600)) !important;
  transform: scale(1.1);
}
.over-popup-box .over-popup-header .over-popup-close:active {
  transform: scale(0.9);
}
.over-popup-box .over-popup-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}
.over-popup-box .over-popup-body::-webkit-scrollbar {
  width: 6px;
}
.over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgb(var(--rgb-light));
  border-radius: var(--radius-full);
}
.over-popup-box .over-popup-body::-webkit-scrollbar-track {
  background: transparent;
}

@keyframes over-slide-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
body.dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.faragard-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.faragard-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.faragard-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.faragard-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.faragard-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.faragard-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.faragard-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.faragard-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.faragard-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.faragard-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.faragard-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.blue-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.blue-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.blue-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.blue-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.blue-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.blue-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.blue-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.blue-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.blue-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.blue-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.blue-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.orange-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.orange-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.orange-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.orange-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.orange-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.orange-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.orange-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.orange-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.orange-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.orange-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.orange-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.fuchsia-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.fuchsia-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.fuchsia-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.fuchsia-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.fuchsia-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.fuchsia-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.fuchsia-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.fuchsia-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.fuchsia-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.fuchsia-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.fuchsia-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.pink-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.pink-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.pink-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.pink-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.pink-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.pink-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.pink-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.pink-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.pink-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.pink-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.pink-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.emerald-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.emerald-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.emerald-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.emerald-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.emerald-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.emerald-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.emerald-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.emerald-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.emerald-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.emerald-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.emerald-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.red-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.red-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.red-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.red-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.red-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.red-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.red-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.red-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.red-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.red-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.red-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.sky-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.sky-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.sky-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.sky-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.sky-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.sky-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.sky-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.sky-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.sky-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.sky-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.sky-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.yellow-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.yellow-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.yellow-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.yellow-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.yellow-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.yellow-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.yellow-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.yellow-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.yellow-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.yellow-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.yellow-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.green-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.green-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.green-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.green-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.green-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.green-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.green-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.green-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.green-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.green-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.green-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.purple-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.purple-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.purple-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.purple-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.purple-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.purple-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.purple-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.purple-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.purple-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.purple-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.purple-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.indigo-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.indigo-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.indigo-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.indigo-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.indigo-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.indigo-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.indigo-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.indigo-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.indigo-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.indigo-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.indigo-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.slate-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.slate-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.slate-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.slate-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.slate-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.slate-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.slate-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.slate-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.slate-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.slate-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.slate-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.yellow-blue-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.yellow-blue-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.yellow-blue-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.yellow-blue-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.yellow-blue-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.yellow-blue-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.yellow-blue-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.yellow-blue-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.yellow-blue-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.yellow-blue-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.yellow-blue-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.administrative-order-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.administrative-order-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.administrative-order-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.administrative-order-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.administrative-order-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.administrative-order-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.administrative-order-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.administrative-order-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.administrative-order-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.administrative-order-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.administrative-order-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.organizational-dynamism-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.organizational-dynamism-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.organizational-dynamism-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.organizational-dynamism-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.organizational-dynamism-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.organizational-dynamism-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.organizational-dynamism-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.organizational-dynamism-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.organizational-dynamism-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.organizational-dynamism-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.organizational-dynamism-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.collective-empathy-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.collective-empathy-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.collective-empathy-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.collective-empathy-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.collective-empathy-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.collective-empathy-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.collective-empathy-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.collective-empathy-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.collective-empathy-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.collective-empathy-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.collective-empathy-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.innovative-thinking-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.innovative-thinking-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.innovative-thinking-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.innovative-thinking-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.innovative-thinking-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.innovative-thinking-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.innovative-thinking-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.innovative-thinking-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.innovative-thinking-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.innovative-thinking-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.innovative-thinking-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.performance-transparency-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.performance-transparency-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.performance-transparency-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.performance-transparency-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.performance-transparency-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.performance-transparency-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.performance-transparency-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.performance-transparency-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.performance-transparency-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.performance-transparency-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.performance-transparency-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.organized-city-navy-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.organized-city-navy-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.organized-city-navy-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.organized-city-navy-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.organized-city-navy-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.organized-city-navy-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.organized-city-navy-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.organized-city-navy-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.organized-city-navy-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.organized-city-navy-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.organized-city-navy-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.calm-city-sky-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.calm-city-sky-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.calm-city-sky-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.calm-city-sky-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.calm-city-sky-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.calm-city-sky-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.calm-city-sky-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.calm-city-sky-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.calm-city-sky-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.calm-city-sky-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.calm-city-sky-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.warm-city-brick-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.warm-city-brick-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.warm-city-brick-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.warm-city-brick-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.warm-city-brick-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.warm-city-brick-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.warm-city-brick-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.warm-city-brick-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.warm-city-brick-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.warm-city-brick-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.warm-city-brick-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.order-in-service-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.order-in-service-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.order-in-service-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.order-in-service-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.order-in-service-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.order-in-service-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.order-in-service-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.order-in-service-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.order-in-service-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.order-in-service-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.order-in-service-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.companionship-in-action-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.companionship-in-action-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.companionship-in-action-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.companionship-in-action-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.companionship-in-action-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.companionship-in-action-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.companionship-in-action-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.companionship-in-action-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.companionship-in-action-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.companionship-in-action-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.companionship-in-action-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.focus-and-precision-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.focus-and-precision-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.focus-and-precision-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.focus-and-precision-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.focus-and-precision-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.focus-and-precision-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.focus-and-precision-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.focus-and-precision-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.focus-and-precision-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.focus-and-precision-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.focus-and-precision-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

body.golden-blue-dark {
  --popup-bg: rgb(var(--rgb-ninth-lighter));
  --popup-backdrop-color: rgba(var(--rgb-darkest), 0.7);
}
body.golden-blue-dark .flat-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.golden-blue-dark .flat-popup-box .flat-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.golden-blue-dark .flat-popup-box .flat-popup-header .flat-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.golden-blue-dark .flat-popup-box .flat-popup-header .flat-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.golden-blue-dark .flat-popup-box .flat-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}
body.golden-blue-dark .over-popup-box {
  background: var(--popup-bg);
  border-color: rgba(var(--rgb-lightest), 0.08);
}
body.golden-blue-dark .over-popup-box .over-popup-header {
  border-bottom-color: rgba(var(--rgb-lightest), 0.08);
}
body.golden-blue-dark .over-popup-box .over-popup-header .over-popup-title {
  color: rgb(var(--rgb-lightest));
}
body.golden-blue-dark .over-popup-box .over-popup-header .over-popup-close:hover {
  background: rgba(var(--rgb-red-500), 0.2) !important;
}
body.golden-blue-dark .over-popup-box .over-popup-body::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-lightest), 0.2);
}

@media (max-width: 767px) {
  .flat-popup-box[data-position=left].is-open, .flat-popup-box[data-position=right].is-open {
    width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }
  .flat-popup-box[data-position=left].is-closing, .flat-popup-box[data-position=right].is-closing {
    width: 100% !important;
    height: 100vh !important;
  }
  .flat-popup-box[data-position=top].is-open, .flat-popup-box[data-position=bottom].is-open {
    width: 100vw !important;
    height: 100% !important;
    border-radius: 0 !important;
  }
  .flat-popup-box[data-position=top].is-closing, .flat-popup-box[data-position=bottom].is-closing {
    width: 100vw !important;
    height: 100% !important;
  }
  .my-body-content.flat-left, .my-body-content.flat-right, .my-body-content.flat-top, .my-body-content.flat-bottom {
    flex-direction: row !important;
  }
  .my-body-content.flat-left .my-main, .my-body-content.flat-right .my-main, .my-body-content.flat-top .my-main, .my-body-content.flat-bottom .my-main {
    margin: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
  }
  .my-body-content.flat-left .sidebar, .my-body-content.flat-right .sidebar, .my-body-content.flat-top .sidebar, .my-body-content.flat-bottom .sidebar {
    margin: 0 !important;
  }
  .modal-dialog.popup-position-left, .modal-dialog.popup-position-right {
    max-width: 100% !important;
  }
  .modal-dialog.popup-position-left .modal-content, .modal-dialog.popup-position-right .modal-content {
    border-radius: 0 !important;
    min-height: 100vh !important;
  }
  .modal-dialog.popup-position-top, .modal-dialog.popup-position-bottom {
    max-width: 100vw !important;
  }
  .modal-dialog.popup-position-top .modal-content, .modal-dialog.popup-position-bottom .modal-content {
    border-radius: 0 !important;
    min-height: 100vh !important;
  }
  .over-popup-box {
    max-width: calc(100vw - 16px);
    max-height: 70vh;
  }
}
body.popup-open {
  overflow: hidden;
}

[dir=rtl] .modal-dialog.popup-position-left {
  margin: 0 0 0 auto;
}
[dir=rtl] .modal-dialog.popup-position-left .modal-content {
  border-radius: var(--popup-radius) 0 0 var(--popup-radius);
}
[dir=rtl] .modal-dialog.popup-position-right {
  margin: 0 auto 0 0;
}
[dir=rtl] .modal-dialog.popup-position-right .modal-content {
  border-radius: 0 var(--popup-radius) var(--popup-radius) 0;
}

.shp-container-xl {
  max-width: 1676px;
  margin-inline: auto;
}

.shp-list-bordered {
  display: flex;
  border: 1px solid rgb(var(--rgb-light));
  border-radius: 12px;
}

.shp-anchor {
  display: block;
  height: 180px;
  margin-top: -180px;
  visibility: hidden;
}

.shp-has-active-second {
  transition: all 150ms ease;
}
.shp-has-active-second.active {
  border-color: rgb(var(--rgb-second)) !important;
  color: rgb(var(--rgb-second)) !important;
}

label.shp-radio-color {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgb(var(--rgb-gray-500));
  border: 4px solid rgb(var(--rgb-lightest));
  box-shadow: 0 0 1px 1px rgba(var(--rgb-light));
  transition: all 200ms;
}

label.shp-radio-option {
  width: fit-content;
  height: 36px;
  padding: 0 12px;
  border-radius: 36px;
  border: 4px solid rgb(var(--rgb-lightest));
  box-shadow: 0 0 1px 1px rgba(var(--rgb-light));
  transition: all 200ms;
}

input[type=radio]:checked + label.shp-radio-color,
input[type=radio]:checked + label.shp-radio-option {
  border-color: rgb(var(--rgb-second));
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(var(--rgb-lightest));
}

input[type=radio]:checked + label.shp-radio-color::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Fontawesome";
  content: "\f00c";
  color: rgb(var(--rgb-lightest));
  transition: all 200ms;
  font-size: 16px;
  background: transparent;
}

body.dark .shp-product-counter-btn,
body.dark .shp-product-counter-count, body.faragard-dark .shp-product-counter-btn,
body.faragard-dark .shp-product-counter-count, body.blue-dark .shp-product-counter-btn,
body.blue-dark .shp-product-counter-count, body.orange-dark .shp-product-counter-btn,
body.orange-dark .shp-product-counter-count, body.fuchsia-dark .shp-product-counter-btn,
body.fuchsia-dark .shp-product-counter-count, body.pink-dark .shp-product-counter-btn,
body.pink-dark .shp-product-counter-count, body.emerald-dark .shp-product-counter-btn,
body.emerald-dark .shp-product-counter-count, body.red-dark .shp-product-counter-btn,
body.red-dark .shp-product-counter-count, body.sky-dark .shp-product-counter-btn,
body.sky-dark .shp-product-counter-count, body.yellow-dark .shp-product-counter-btn,
body.yellow-dark .shp-product-counter-count, body.green-dark .shp-product-counter-btn,
body.green-dark .shp-product-counter-count, body.purple-dark .shp-product-counter-btn,
body.purple-dark .shp-product-counter-count, body.indigo-dark .shp-product-counter-btn,
body.indigo-dark .shp-product-counter-count, body.slate-dark .shp-product-counter-btn,
body.slate-dark .shp-product-counter-count, body.yellow-blue-dark .shp-product-counter-btn,
body.yellow-blue-dark .shp-product-counter-count, body.administrative-order-dark .shp-product-counter-btn,
body.administrative-order-dark .shp-product-counter-count, body.organizational-dynamism-dark .shp-product-counter-btn,
body.organizational-dynamism-dark .shp-product-counter-count, body.collective-empathy-dark .shp-product-counter-btn,
body.collective-empathy-dark .shp-product-counter-count, body.innovative-thinking-dark .shp-product-counter-btn,
body.innovative-thinking-dark .shp-product-counter-count, body.performance-transparency-dark .shp-product-counter-btn,
body.performance-transparency-dark .shp-product-counter-count, body.organized-city-navy-dark .shp-product-counter-btn,
body.organized-city-navy-dark .shp-product-counter-count, body.calm-city-sky-dark .shp-product-counter-btn,
body.calm-city-sky-dark .shp-product-counter-count, body.warm-city-brick-dark .shp-product-counter-btn,
body.warm-city-brick-dark .shp-product-counter-count, body.order-in-service-dark .shp-product-counter-btn,
body.order-in-service-dark .shp-product-counter-count, body.companionship-in-action-dark .shp-product-counter-btn,
body.companionship-in-action-dark .shp-product-counter-count, body.focus-and-precision-dark .shp-product-counter-btn,
body.focus-and-precision-dark .shp-product-counter-count, body.golden-blue-dark .shp-product-counter-btn,
body.golden-blue-dark .shp-product-counter-count {
  color: rgb(var(--rgb-first-darker));
}

/* Convert Shop to My — product.html additions End */
/* Convert Shop to My — overflow fix Start */
main.shp-flex-safe {
  min-width: 0;
}

/* Convert Shop to My — overflow fix End */
@media only screen and (min-width: 1200px) {
  .shp-compare-sticky {
    position: sticky;
    background-color: rgb(var(--rgb-ninth-lighter));
    top: -90px;
  }
}

.shp-compare-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
}
.shp-compare-wrapper > div:not(:nth-last-child(1)):not(:nth-child(2)) {
  border-left: 1px solid rgb(var(--rgb-light));
}
.shp-compare-wrapper > div:nth-child(3),
.shp-compare-wrapper > div:nth-child(4) {
  display: none !important;
}
@media only screen and (max-width: 360px) {
  .shp-compare-wrapper > div:nth-child(1) {
    border-left: none !important;
  }
  .shp-compare-wrapper > div:nth-child(2),
  .shp-compare-wrapper > div:nth-child(3),
  .shp-compare-wrapper > div:nth-child(4) {
    display: none !important;
  }
}
@media only screen and (min-width: 992px) {
  .shp-compare-wrapper > div:not(:nth-last-child(1)) {
    border-left: 1px solid rgb(var(--rgb-light));
  }
  .shp-compare-wrapper > div:nth-child(3),
  .shp-compare-wrapper > div:nth-child(4) {
    display: flex !important;
  }
}

/* Convert Shop to My — compare.html additions End */
.shp-location-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px;
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-light));
  border-radius: 8px;
  cursor: pointer;
  transition: all 200ms;
}
.shp-location-card.active {
  box-shadow: inset 0 0 0 1.5px rgb(var(--rgb-second));
}

.shp-weekday {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shp-weekday.swiper-slide-thumb-active .shp-weekday-key {
  color: rgb(var(--rgb-first));
}
.shp-weekday.swiper-slide-thumb-active .shp-weekday-value::before {
  opacity: 1;
  visibility: visible;
}
.shp-weekday-key {
  color: rgb(var(--rgb-darker));
  font-size: 14px;
  padding: 12px;
  font-weight: 500;
}
.shp-weekday-value {
  color: rgb(var(--rgb-darker));
  font-size: 18px;
  font-weight: 500;
  padding: 0 6px 10px 6px;
  position: relative;
}
.shp-weekday-value::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  width: 100%;
  border-radius: 3px;
  background-color: rgb(var(--rgb-first));
  opacity: 0;
  visibility: hidden;
}

/* Convert Shop to My — checkout-shipping.html additions End */
.shp-table {
  display: table;
  width: 100%;
  font-size: 15px;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.shp-thead {
  display: table-header-group;
  width: 100%;
}

.shp-tbody {
  display: table-row-group;
  width: 100%;
}

.shp-tr {
  display: table-row;
  position: relative;
  transition: all 200ms;
}
.shp-tr:hover .shp-td {
  background-color: rgb(var(--rgb-first-lighter), 0.3);
}
.shp-tr:hover .shp-td:nth-child(1)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-color: transparent;
  box-shadow: 0 1px 4px rgba(var(--rgb-darkest), 0.15);
  pointer-events: none;
}

.shp-th,
.shp-td {
  display: table-cell;
  padding: 12px 12px;
  color: rgb(var(--rgb-darkest));
  min-height: 46px;
  vertical-align: middle;
}
@media only screen and (max-width: 1200px) {
  .shp-th:nth-last-child(1),
  .shp-td:nth-last-child(1) {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  .shp-th:nth-child(1),
  .shp-td:nth-child(1) {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
  }
}
@media only screen and (min-width: 1200px) {
  .shp-th,
  .shp-td {
    max-width: 118px;
  }
}
@media only screen and (min-width: 1200px) {
  .shp-th:nth-last-child(1),
  .shp-td:nth-last-child(1) {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
  }
  html[dir=ltr] .shp-th:nth-last-child(1),
  html[dir=ltr] .shp-td:nth-last-child(1) {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
  .shp-th:nth-child(1),
  .shp-td:nth-child(1) {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
  }
  html[dir=ltr] .shp-th:nth-child(1),
  html[dir=ltr] .shp-td:nth-child(1) {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
}

.shp-th {
  font-weight: 500;
  background-color: rgb(var(--rgb-light), 0.5);
}

.shp-td {
  transition: all 200ms;
}
.shp-td::before {
  transition: all 200ms;
}

@media only screen and (max-width: 1200px) {
  .shp-table .shp-tbody {
    gap: 15px;
    display: grid;
    vertical-align: middle;
  }
  .shp-table .shp-tbody .shp-tr {
    padding: 0;
    border: none;
  }
  .shp-table .shp-tbody .shp-tr .shp-td {
    border: none !important;
    display: block;
  }
  .shp-table .shp-tbody .shp-tr .shp-td::before {
    content: attr(data-title);
    color: rgb(var(--rgb-light-dark));
    padding: 0 12px;
    text-wrap: nowrap;
    margin-top: auto;
    margin-bottom: auto;
    font-weight: bold;
  }
  .shp-table .shp-tbody .shp-tr .shp-td:not([data-title])::before {
    display: none;
  }
  .shp-table .shp-td[data-title] {
    display: flex;
    border-bottom: 2px solid rgb(var(--rgb-light)) !important;
  }
  .shp-table .shp-td[data-title]:nth-last-of-type(1) {
    border-bottom: none !important;
  }
  .shp-table .shp-thead {
    display: none;
  }
  .shp-table-joined {
    outline: 2px solid rgb(var(--rgb-light)) !important;
    border-radius: 15px !important;
  }
  .shp-table-joined tbody {
    gap: 0 !important;
  }
  .shp-table-joined tbody tr {
    border-radius: 0 !important;
    border-bottom: 2px solid rgb(var(--rgb-light)) !important;
  }
  .shp-table-joined tbody tr:nth-last-of-type(1) {
    border-bottom: none !important;
  }
  .shp-table-joined tbody tr:nth-of-type(1) {
    border-top-right-radius: 16px !important;
    border-top-left-radius: 16px !important;
  }
  .shp-table-joined tbody tr:nth-last-of-type(1) {
    border-bottom-right-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
  }
}
/* Convert Shop to My — profile/wallet.html additions End */
.shp-upload-box {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--rgb-first));
  color: rgb(var(--rgb-first-darker));
  gap: 16px;
  cursor: pointer;
}

/* Convert Shop to My — profile/ticketing-creation.html additions End */
.profile-sidebar {
  position: fixed;
  width: 250px;
  border-radius: var(--radius-md);
  background-color: rgb(var(--rgb-ninth-lighter));
  display: flex;
  flex-direction: column;
  min-height: 96%;
  max-height: 96%;
  transition: all 300ms cubic-bezier(0.34, -0.04, 0.61, 1.04);
  left: 100%;
  z-index: 2750;
  margin: 0;
  /* Navbar */
}
html[dir=ltr] .profile-sidebar {
  right: 100%;
  left: auto;
}

.profile-sidebar.show {
  transform: translateX(-105%);
}
html[dir=ltr] .profile-sidebar.show {
  transform: translateX(105%);
}

.profile-sidebar.show .hamburger-btn i {
  transform: rotate(180deg);
}
.profile-sidebar .hamburger-btn {
  width: 40px;
  height: 40px;
  position: absolute;
  left: -40px;
  top: 40px;
  display: flex;
  border: 1px solid rgb(var(--rgb-light));
  background-color: rgb(var(--rgb-ninth-lighter));
  border-radius: 6px 0 0 6px;
  font-size: 15px;
  color: rgb(var(--rgb-darkest));
  align-items: center;
  justify-content: center;
  z-index: 300;
}
html[dir=ltr] .profile-sidebar .hamburger-btn {
  right: -40px;
  left: auto;
  border-radius: 0 6px 6px 0;
}

.profile-sidebar .hamburger-btn i {
  color: rgb(var(--rgb-darkest));
  transition: all 300ms ease;
}
.profile-sidebar header {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  width: 100%;
  max-width: 100%;
  max-height: min-content;
  display: flex;
  gap: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  color: rgb(var(--rgb-lightest));
  position: relative;
}
.profile-sidebar header img,
.profile-sidebar header svg {
  width: 100px;
  height: 100px;
  max-width: 100%;
  border-radius: var(--radius-full);
}
.profile-sidebar .profile-sidebar-header-bg {
  width: 100% !important;
  height: 100% !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background-color: rgb(var(--rgb-first-dark));
  background-size: cover;
  background-position: top;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: var(--my-sidebar-transition);
}
.profile-sidebar .profile-sidebar-header-bg svg {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
.profile-sidebar nav {
  max-height: 100%;
  overflow-y: auto;
  border-radius: 12px;
}
.profile-sidebar nav::-webkit-scrollbar {
  width: 8px;
}
.profile-sidebar nav::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.profile-sidebar nav::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
}
.profile-sidebar nav > ul {
  display: flex;
  flex-direction: column;
}
.profile-sidebar nav > ul > li {
  overflow: hidden;
  position: relative;
  min-height: 59px;
  z-index: 1;
}
.profile-sidebar nav > ul > li.selected > a {
  background: rgb(var(--rgb-first-lighter));
}
.profile-sidebar nav > ul > li.show:has(> ul) > a .link-hover::after {
  rotate: 180deg;
}
.profile-sidebar nav > ul > li.show ul {
  margin-top: 0;
  z-index: 1;
}
.profile-sidebar nav > ul > li::before {
  content: "";
  width: 100%;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgb(var(--rgb-ninth-lighter));
  z-index: 2;
  transition: all 300ms cubic-bezier(0.34, -0.04, 0.61, 1.04);
}
.profile-sidebar nav > ul > li:nth-last-child(1)::before {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.profile-sidebar nav > ul > li a {
  display: flex;
  justify-content: start;
  align-items: center;
  margin: 6px 12px;
  gap: 8px;
  color: rgb(var(--rgb-darkest));
  border-radius: var(--radius-md);
  position: relative;
  z-index: 2;
}
.profile-sidebar nav > ul > li a img,
.profile-sidebar nav > ul > li a svg {
  width: 35px;
  height: 35px;
}
.profile-sidebar nav > ul > li a .link-hover {
  width: 100%;
  height: 100%;
  padding: 6px 10px;
  transition: background-color 100ms ease-in;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}
.profile-sidebar nav > ul > li a .link-hover i {
  font-size: 28px;
}
.profile-sidebar nav > ul > li a .link-hover:hover {
  background: rgb(var(--rgb-darkest), 0.06);
}
.profile-sidebar nav > ul > li:has(> ul) > a .link-hover::after {
  content: "\f078";
  font-family: FontAwesome;
  margin-right: auto;
  transition: all 200ms;
  color: rgb(var(--rgb-darker));
}
html[dir=ltr] .profile-sidebar nav > ul > li:has(> ul) > a .link-hover::after {
  margin-left: auto;
  margin-right: unset;
}

.profile-sidebar nav > ul > li ul {
  position: relative;
  margin-top: -100%;
  overflow: hidden;
  z-index: -1;
  transition: all 400ms ease;
  padding: 0 16px;
}
.profile-sidebar nav > ul > li ul li.selected > a {
  color: rgb(var(--rgb-seventh-darker)) !important;
}
.profile-sidebar nav > ul > li ul li a {
  padding: 8px 16px;
  margin: 0;
  display: flex;
  align-items: center;
  color: rgb(var(--rgb-darker));
  position: relative;
  transition: all 200ms;
}
.profile-sidebar nav > ul > li ul li a:hover {
  color: rgb(var(--rgb-darker), 0.7);
}

@media (min-width: 360px) {
  .profile-sidebar {
    width: 300px;
  }
}
@media (min-width: 767px) {
  .profile-sidebar {
    right: 0;
    position: relative;
  }
  html[dir=ltr] .profile-sidebar {
    left: 0;
    right: auto;
  }
  .profile-sidebar.show {
    transform: translateX(0);
  }
  .hamburger-btn {
    display: none !important;
  }
}
/* Convert Shop to My — profile-sidebar component port End */
.shp-category-suggest {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  border: 1px solid rgb(var(--rgb-light));
  border-radius: 16px;
  background: rgb(var(--rgb-ninth-lighter));
  overflow: hidden;
}
@media only screen and (min-width: 575px) {
  .shp-category-suggest {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 767px) {
  .shp-category-suggest {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 992px) {
  .shp-category-suggest {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Convert Shop to My — shp-category-suggest addition End */
.shp-chart-semi-circle {
  width: 240px;
  height: 180px;
}

.shp-chart-semi-circle-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin: auto;
}

/* Convert Shop to My — shp-chart-semi-circle addition End */
.shp-hint-box {
  width: 100%;
  min-height: 420px;
  height: 100%;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgb(var(--rgb-first-dark));
  background-color: rgb(var(--rgb-first-lighter));
  color: rgb(var(--rgb-first-darker));
  display: flex;
  flex-direction: column;
}

.shp-hint-box-header {
  display: flex;
  gap: 12px;
  align-items: center;
  color: rgb(var(--rgb-first-darker));
  font-size: 16px;
  font-weight: bold;
}

.shp-hint-box-content {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}

/* Convert Shop to My — shp-hint-box addition End */
.shp-header-search-suggest-item {
  border: 1px solid rgb(var(--rgb-light));
  color: rgb(var(--rgb-darker));
  height: 40px;
  padding: 0 12px;
  border-radius: calc(var(--radius-xl) * 0.667);
  font-size: 14px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shp-header-search-suggest-item i {
  margin-right: 5px;
  font-size: 18px;
}

.shp-header-search-suggest-item.has-hover:hover,
.shp-header-search-suggest-item.has-hover:active,
.shp-header-search-suggest-item.has-hover:focus-within {
  background-color: rgb(var(--rgb-first-lighter), 0.5);
}

.shp-header-search-suggest-item.active {
  border-color: rgb(var(--rgb-first-darker));
  color: rgb(var(--rgb-first-darker));
}

/* Convert Shop to My — shp-header-search-suggest-item addition End */
.shp-category-suggest-model {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 16px;
  padding: 15px;
}

.shp-category-suggest-model:not(:nth-last-of-type(1)) {
  border-bottom: 1px solid rgb(var(--rgb-light));
  border-radius: 0;
  border-left: none;
}

@media only screen and (min-width: 575px) {
  .shp-category-suggest-model:nth-child(odd) {
    border-left: 1px solid rgb(var(--rgb-light)) !important;
    border-radius: 0;
  }
  html[dir=ltr] .shp-category-suggest-model:nth-child(odd) {
    border-right: 1px solid rgb(var(--rgb-light)) !important;
    border-left: none !important;
  }
  .shp-category-suggest-model:nth-last-of-type(2) {
    border-bottom: none;
  }
}
@media only screen and (min-width: 992px) {
  .shp-category-suggest-model:not(:nth-last-of-type(1)) {
    border-left: 1px solid rgb(var(--rgb-light));
    border-radius: 0;
    border-bottom: none;
  }
  html[dir=ltr] .shp-category-suggest-model:not(:nth-last-of-type(1)) {
    border-right: 1px solid rgb(var(--rgb-light));
    border-left: none;
  }
  .shp-category-suggest-model:nth-last-of-type(1) {
    border-bottom: none;
  }
}
/* Convert Shop to My — shp-category-suggest-model addition End */
.shp-category-nav ul {
  display: flex;
  flex-direction: column;
}

.shp-category-nav ul > li {
  overflow: hidden;
  min-height: 27px;
}

.shp-category-nav ul > li.show > a {
  color: rgb(var(--rgb-second));
}

.shp-category-nav ul > li.show > a::before {
  transform: rotate(-90deg);
}

html[dir=ltr] .shp-category-nav ul > li.show > a::before {
  transform: rotate(90deg);
}

.shp-category-nav ul > li.show > ul {
  z-index: 1;
  margin-top: 0;
}

.shp-category-nav ul > li > a {
  background-color: rgb(var(--rgb-ninth-lighter));
  padding: 4px;
  color: rgb(var(--rgb-darker));
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
  position: relative;
}

.shp-category-nav ul > li > a::before {
  content: "\f053";
  font-size: 12px;
  font-family: "Fontawesome";
  width: 12px;
  transform-origin: center;
  transition: all 200ms;
}

html[dir=ltr] .shp-category-nav ul > li > a::before {
  content: "\f054";
}

.shp-category-nav ul > li:hover > a {
  color: rgb(var(--rgb-second));
}

.shp-category-nav ul > li ul {
  position: relative;
  transition: all 400ms ease;
  padding: 0 16px;
  margin-top: -100%;
  overflow: hidden;
  z-index: -1;
}

.shp-category-nav ul > li ul li a {
  background-color: rgb(var(--rgb-ninth-lighter));
  z-index: 2;
  position: relative;
}

.shp-category-nav ul > li ul li ul {
  padding: 0 16px;
  overflow: hidden;
}

.shp-category-nested {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 8px;
  border-top: 2px solid rgb(var(--rgb-light));
  padding: 8px 0;
  width: 100%;
}

.shp-category-nested:not(:nth-of-type(1)) {
  border-bottom: 1px solid rgb(var(--rgb-light));
}

@media only screen and (min-width: 767px) {
  .shp-category-nested {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 992px) {
  .shp-category-nested {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 1200px) {
  .shp-category-nested {
    grid-template-columns: repeat(4, 1fr);
  }
  .shp-category-nested-nav:not(:nth-of-type(1)) {
    border-right: 1px solid rgb(var(--rgb-light));
  }
  html[dir=ltr] .shp-category-nested-nav:not(:nth-of-type(1)) {
    border-left: 1px solid rgb(var(--rgb-light));
    border-right: none;
  }
}
@media only screen and (min-width: 1400px) {
  .shp-category-nested {
    grid-template-columns: repeat(4, 1fr);
  }
}
.shp-category-nested-nav {
  max-height: 220px;
  overflow: hidden;
  overflow-y: auto;
  width: 100%;
  max-width: 100%;
}

@media only screen and (max-width: 1200px) {
  .shp-category-nested-nav {
    border-bottom: 2px solid rgb(var(--rgb-light));
  }
}
.shp-category-nested-nav ul {
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shp-category-nested-nav ul li {
  color: rgb(var(--rgb-light-dark));
}

.shp-category-nested-nav ul li:hover,
.shp-category-nested-nav ul li:active,
.shp-category-nested-nav ul li.active {
  background-color: rgb(var(--rgb-darkest), 0.03);
  border-radius: 8px;
}

.shp-category-nested-nav ul li:hover a,
.shp-category-nested-nav ul li:active a,
.shp-category-nested-nav ul li.active a {
  color: rgb(var(--rgb-darker));
  font-weight: 500;
}

.shp-category-nested-nav ul li:hover a::after,
.shp-category-nested-nav ul li:active a::after,
.shp-category-nested-nav ul li.active a::after {
  transform: translateX(-6px);
}

.shp-category-nested-nav ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px;
  color: rgb(var(--text-light-dark));
}

.shp-category-nested-nav ul li a::after {
  content: "\f053";
  font-size: 10px;
  font-family: "Fontawesome";
  width: 10px;
  transform-origin: center;
  transition: all 200ms ease;
}

html[dir=ltr] .shp-category-nested-nav ul li a::after {
  content: "\f054";
}

/* Convert Shop to My — shp-category-nav addition End */
.tan-articles-box {
  display: flex;
  flex-direction: column;
}

.tan-articles-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.tan-suggest-box {
  display: flex;
  flex-direction: column;
}

body.my-body-content .section {
  border-radius: 16px;
}

body.my-body-content .section > .section-header {
  border-radius: 16px 16px 0 0;
}

body.my-body-content .section > .section-footer {
  border-radius: 0 0 16px 16px;
}

.tan-widget-header {
  padding-top: 0 !important;
  border-bottom: none !important;
}

.tan-widget-flat {
  background-color: transparent !important;
  box-shadow: none !important;
}

body.my-body-content [data-title="اسلایدر ویژه"] .shp-main-special-slider {
  border-radius: 16px !important;
}

body.my-body-content .shp-main-slider {
  border-radius: 16px;
}

body.my-body-content .shp-suggest-box-list-container .swiper-wrapper {
  padding: 0;
  max-width: 100%;
}

body.my-body-content .shp-suggest-box-list-container .shp-suggest-box-list-item {
  width: 100%;
}

@media only screen and (min-width: 767px) {
  body.my-body-content .shp-suggest-box-details {
    max-height: 400px;
  }
}

.tan-category-suggestion {
  border: none !important;
}

/* ===================== Tan Avatar Stack ===================== */
.tan-avatar-stack {
  display: flex;
  align-items: center;
  direction: ltr;
  padding-inline-start: 12px;
}

.tan-avatar-stack > a {
  display: inline-flex;
}

.tan-avatar-stack-img,
.tan-avatar-stack-more {
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 1px 3px rgba(var(--rgb-darkest), 0.15);
  margin-inline-start: -12px;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tan-avatar-stack-img:hover,
.tan-avatar-stack-more:hover {
  transform: scale(1.25);
  box-shadow: 0 4px 10px rgba(var(--rgb-darkest), 0.25);
  z-index: 999 !important;
}

/* ===================== Tan Avatar Stack ===================== */
.tan-avatar-stack {
  display: flex;
  align-items: center;
  direction: ltr;
  padding-inline-start: 12px;
}
.tan-avatar-stack > a {
  display: inline-flex;
}

.tan-avatar-stack-img,
.tan-avatar-stack-more {
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 1px 3px rgba(var(--rgb-darkest), 0.15);
  margin-inline-start: -12px;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tan-avatar-stack-img:hover,
.tan-avatar-stack-more:hover {
  transform: scale(1.25);
  box-shadow: 0 4px 10px rgba(var(--rgb-darkest), 0.25);
  z-index: 999 !important;
}

.tan-avatar-stack-img {
  object-fit: cover;
  display: block;
}

.tan-avatar-stack-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--rgb-gray-200));
  color: rgb(var(--rgb-gray-600));
  font-size: 12px;
  font-weight: 600;
  z-index: 0;
}

/* Avatar stack follows page direction: RTL starts from the right */
[dir=rtl] .tan-avatar-stack {
  direction: rtl;
}

/* the 10px end gap of the small stack is written as margin-right; mirror it in RTL */
[dir=rtl] .tan-avatar-stack-sm > *:nth-last-child(1) .tan-avatar-stack-img,
[dir=rtl] .tan-avatar-stack-sm .tan-avatar-stack-more {
  margin-right: -8px;
  margin-left: 10px;
}

/* ===================== Task List Wrapper ===================== */
.tan-counter-taskList {
  display: flex;
  flex-flow: column;
}

/* ===================== Request Panel (Column) ===================== */
.tan-request-panel {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: inherit;
  /* Body = droppable area */
}
.tan-request-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 5px;
}
.tan-request-panel-header-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: rgb(var(--rgb-darkest));
}
.tan-request-panel-header-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 3px;
  background-color: rgb(var(--rgb-red-500));
  color: rgb(var(--rgb-lightest));
  font-size: 11px;
  font-weight: 700;
}
.tan-request-panel-header-badge.tan-badge-amber {
  background-color: rgb(var(--rgb-amber-500));
}
.tan-request-panel-header-badge.tan-badge-green {
  background-color: rgb(var(--rgb-green-600));
}
.tan-request-panel-header-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgb(var(--rgb-light-dark));
}
.tan-request-panel-header-btns button {
  all: unset;
  cursor: pointer;
  line-height: 1;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tan-request-panel-header-btns button:hover {
  background-color: rgb(var(--rgb-gray-100));
  color: rgb(var(--rgb-gray-600));
}
.tan-request-panel-header-btns button i {
  font-size: 13px;
  line-height: 1;
}
.tan-request-panel-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 160px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background-color: rgba(var(--rgb-ninth-lighter), 0.35);
  border: 1.5px dashed transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
.tan-request-panel-body.tan-drop-active {
  background-color: rgba(var(--rgb-first-lighter), 0.25);
  border-color: rgb(var(--rgb-first));
  animation: tan-drop-pulse 1.6s ease-in-out infinite;
}

@keyframes tan-drop-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 4px rgba(var(--rgb-first-lighter), 0.15);
  }
  50% {
    box-shadow: inset 0 0 0 8px rgba(var(--rgb-first-lighter), 0.05);
  }
}
/* Placeholder while dragging */
.tan-task-placeholder {
  height: 80px;
  border-radius: var(--radius-lg);
  border: 2px dashed rgb(var(--rgb-first));
  background: linear-gradient(135deg, rgba(var(--rgb-first-lighter), 0.35) 0%, rgba(var(--rgb-first-lighter), 0.05) 100%);
  background-size: 200% 200%;
  animation: tan-placeholder-shimmer 1.4s linear infinite;
}

@keyframes tan-placeholder-shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
/* ===================== Request Card ===================== */
.tan-request-card {
  background-color: rgb(var(--rgb-ninth-lighter));
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(var(--rgb-gray-900), 0.04);
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: grab;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  /* Top */
  /* Tag */
  /* Add button */
  /* Toggle */
  /* Body (collapsible) */
  /* Title / Desc */
  /* Cover */
  /* Footer */
}
.tan-request-card:active {
  cursor: grabbing;
}
.tan-request-card:hover {
  box-shadow: 0 4px 12px rgba(var(--rgb-gray-900), 0.08);
  transform: translateY(-2px);
}
.tan-request-card.tan-task-dragging {
  transform: rotate(2deg) scale(1.02);
  box-shadow: 0 12px 28px rgba(var(--rgb-darkest), 0.18) !important;
  cursor: grabbing;
  opacity: 0.95;
  z-index: 9999;
}
.tan-request-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tan-request-card-top-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tan-request-card-tag {
  align-items: center;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  color: rgb(var(--rgb-darker));
  width: fit-content;
  max-width: 100%;
}
.tan-request-card-add {
  all: unset;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid rgb(var(--rgb-gray-300));
  color: rgb(var(--rgb-light-dark));
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tan-request-card-add:hover {
  background-color: rgb(var(--rgb-gray-100));
  border-color: rgb(var(--rgb-light-dark));
  color: rgb(var(--rgb-gray-600));
}
.tan-request-card-add i {
  font-size: 9px;
  line-height: 1;
}
.tan-request-card-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: rgb(var(--rgb-light-dark));
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}
.tan-request-card-toggle:hover {
  background-color: rgb(var(--rgb-light));
  color: rgb(var(--rgb-light-dark));
}
.tan-request-card-toggle i {
  display: block;
  font-size: 12px;
  transition: transform 0.25s ease;
}
.tan-request-card-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tan-request-card-toggle-input:checked ~ .tan-request-card-top .tan-request-card-toggle i {
  transform: rotate(180deg);
}
.tan-request-card-toggle-input:checked ~ .tan-request-card-body {
  grid-template-rows: 0fr;
}
.tan-request-card-toggle-input:not(:checked) ~ .tan-request-card-body .tan-request-card-body-inner {
  padding-top: 8px !important;
}
.tan-request-card-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
}
.tan-request-card-body-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 !important;
  transition: 300ms ease;
}
.tan-request-card-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: rgb(var(--rgb-darker));
}
.tan-request-card-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgb(var(--rgb-light-dark));
}
.tan-request-card-cover {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at 60% 40%, #fca5a5 0%, #f9a8d4 25%, #c084fc 50%, #93c5fd 75%, #fdba74 100%);
}
.tan-request-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.tan-request-card-who {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tan-request-card-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.tan-request-card-avatar.tan-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--rgb-blue-500));
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
}
.tan-request-card-date {
  font-size: 11px;
  color: rgb(var(--rgb-light-dark));
}
.tan-request-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgb(var(--rgb-light-dark));
}
.tan-request-card-meta-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
}
.tan-request-card-meta-item i {
  font-size: 12px;
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===================== Board ===================== */
.tan-task-board {
  align-items: flex-start;
}

/* ===================== Responsive ===================== */
@media (max-width: 767px) {
  .tan-request-panel-body {
    min-height: 90px;
  }
  .tan-task-placeholder {
    height: 64px;
  }
}
.tan-avatar-stack-img {
  object-fit: cover;
  display: block;
}

.tan-avatar-stack-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--rgb-gray-200));
  color: rgb(var(--rgb-gray-600));
  font-size: 12px;
  font-weight: 600;
  z-index: 0;
}

.tan-avatar-stack-sm {
  padding-block: 12px;
  min-width: 0;
  max-width: 1000px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tan-avatar-stack-sm::-webkit-scrollbar {
  display: none;
}

.tan-avatar-stack-sm .tan-avatar-stack-img {
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin-inline-start: -8px;
  border-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: none;
  -webkit-user-drag: none;
  user-select: none;
}
.tan-avatar-stack-sm > *:nth-last-child(1) .tan-avatar-stack-img {
  margin-right: 10px;
}

.tan-avatar-stack-sm .tan-avatar-stack-img:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 6px rgba(var(--rgb-darkest), 0.25);
}

.tan-avatar-stack-sm > :nth-child(1) .tan-avatar-stack-img {
  z-index: 5;
}

.tan-avatar-stack-sm > :nth-child(2) .tan-avatar-stack-img {
  z-index: 4;
}

.tan-avatar-stack-sm > :nth-child(3) .tan-avatar-stack-img {
  z-index: 3;
}

.tan-avatar-stack-sm > :nth-child(4) .tan-avatar-stack-img {
  z-index: 2;
}

.tan-avatar-stack-sm > :nth-child(5) .tan-avatar-stack-img {
  z-index: 1;
}

/* ===================== Task List Wrapper ===================== */
.tan-counter-taskList {
  display: flex;
  flex-flow: column;
}

/* ===================== Request Panel (Column) ===================== */
.tan-request-panel {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: inherit;
  /* Body = droppable area */
}

.tan-request-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 5px;
}

.tan-request-panel-header-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: rgb(var(--rgb-darkest));
}

.tan-request-panel-header-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 3px;
  color: rgb(var(--rgb-lightest));
  font-size: 11px;
  font-weight: 700;
}

.tan-request-panel-header-badge.tan-badge-amber {
  background-color: rgb(var(--rgb-amber-500));
}

.tan-request-panel-header-badge.tan-badge-green {
  background-color: rgb(var(--rgb-green-600));
}

.tan-request-panel-header-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgb(var(--rgb-light-dark));
}

.tan-request-panel-header-btns button {
  all: unset;
  cursor: pointer;
  line-height: 1;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tan-request-panel-header-btns button:hover {
  background-color: rgb(var(--rgb-ninth-lighter));
  color: rgb(var(--rgb-gray-600));
}

.tan-request-panel-header-btns button i {
  font-size: 13px;
  line-height: 1;
}

.tan-request-panel-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 160px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background-color: rgba(var(--rgb-ninth-lighter), 0.35);
  border: 1.5px dashed transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.tan-request-panel-body.tan-drop-active {
  background-color: rgba(var(--rgb-first-lighter), 0.25);
  border-color: rgb(var(--rgb-first));
  animation: tan-drop-pulse 1.6s ease-in-out infinite;
}

@keyframes tan-drop-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 4px rgba(var(--rgb-first-lighter), 0.15);
  }
  50% {
    box-shadow: inset 0 0 0 8px rgba(var(--rgb-first-lighter), 0.05);
  }
}
/* Placeholder while dragging */
.tan-task-placeholder {
  height: 80px;
  border-radius: var(--radius-lg);
  border: 2px dashed rgb(var(--rgb-first));
  background: linear-gradient(135deg, rgba(var(--rgb-first-lighter), 0.35) 0%, rgba(var(--rgb-first-lighter), 0.05) 100%);
  background-size: 200% 200%;
  animation: tan-placeholder-shimmer 1.4s linear infinite;
}

@keyframes tan-placeholder-shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
/* ===================== Request Card ===================== */
.tan-request-card {
  position: relative;
  top: 0;
  overflow: hidden;
  background-color: rgb(var(--rgb-ninth-lighter));
  border: 1px solid rgba(var(--rgb-gray-300), 0.5);
  border-radius: 16px;
  padding: 11px;
  padding-inline-start: 18px;
  box-shadow: 0 1px 2px rgba(var(--rgb-gray-900), 0.04), 0 2px 8px rgba(var(--rgb-gray-900), 0.04);
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: grab;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  /* Top */
  /* Tag */
  /* Add button */
  /* Toggle */
  /* Body (collapsible) */
  /* Title / Desc */
  /* Cover */
  /* Footer */
}

.tan-request-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: attr(data-color type(<color>), rgb(var(--rgb-first)));
}

.tan-request-card:active {
  cursor: grabbing;
}

.tan-request-card:hover {
  box-shadow: 0 10px 24px rgba(var(--rgb-gray-900), 0.1);
  border-color: attr(data-color type(<color>), rgb(var(--rgb-first)));
  transform: translateY(-3px);
}

.tan-request-card.tan-task-dragging {
  transform: rotate(2deg) scale(1.02);
  box-shadow: 0 12px 28px rgba(var(--rgb-darkest), 0.18) !important;
  cursor: grabbing;
  opacity: 0.95;
  z-index: 9999;
}

.tan-request-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tan-request-card-top-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tan-request-card-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tan-request-card-tag {
  line-height: 21px;
  align-items: center;
  padding: 3px 0px 3px 5px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  width: fit-content;
  max-width: 100%;
}

.tan-request-card-add {
  all: unset;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgb(var(--rgb-light-dark));
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tan-request-card-add:hover {
  background-color: rgb(var(--rgb-light));
  border-color: rgb(var(--rgb-light-dark));
  color: rgb(var(--rgb-gray-600));
}

.tan-request-card-add i {
  font-size: 12px;
  line-height: 1;
}

.tan-request-card-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: rgb(var(--rgb-light-dark));
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}

.tan-request-card-toggle:hover {
  background-color: rgb(var(--rgb-light));
  color: rgb(var(--rgb-light-dark));
}

.tan-request-card-toggle i {
  display: block;
  font-size: 12px;
  transition: transform 0.25s ease;
}

.tan-request-card-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tan-request-card-toggle-input:checked ~ .tan-request-card-top .tan-request-card-toggle i {
  transform: rotate(180deg);
}

.tan-request-card-toggle-input:checked ~ .tan-request-card-body {
  grid-template-rows: 0fr;
}

.tan-request-card-toggle-input:not(:checked) ~ .tan-request-card-body .tan-request-card-body-inner {
  padding-top: 8px !important;
}

.tan-request-card-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
}

.tan-request-card-body-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 !important;
  transition: 300ms ease;
}

.tan-request-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: rgb(var(--rgb-darker));
}

.tan-request-card-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.75;
  color: rgb(var(--rgb-light-dark));
}

.tan-request-card-cover {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at 60% 40%, #fca5a5 0%, #f9a8d4 25%, #c084fc 50%, #93c5fd 75%, #fdba74 100%);
}

.tan-request-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed rgba(var(--rgb-gray-300), 0.8);
}

.tan-request-card-who {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.tan-request-card-who::-webkit-scrollbar {
  display: none;
}

.tan-request-card-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.tan-request-card-avatar.tan-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--rgb-blue-500));
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
}

.tan-request-card-meta {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  color: rgb(var(--rgb-light-dark));
}

.tan-request-card-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
}

.tan-request-card-meta-item i {
  font-size: 12px;
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===================== Board ===================== */
.tan-task-board {
  align-items: flex-start;
}

/* ===================== Responsive ===================== */
@media (max-width: 767px) {
  .tan-request-panel-body {
    min-height: 90px;
  }
  .tan-task-placeholder {
    height: 64px;
  }
}
.tan-request-panel-body {
  min-height: 300px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tan-request-panel-body::-webkit-scrollbar {
  display: none;
}

.tan-request-panel-body > .tan-request-card {
  flex-shrink: 0;
}

header.my-header.show {
  overflow: visible;
}

.tan-tabs-more {
  position: relative;
  align-self: center;
}

.tan-tabs-more-btn {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  border-radius: 50%;
  color: rgb(var(--rgb-dark), 0.6);
  font-size: 18px;
  background-color: rgb(var(--rgb-ninth-lighter), 0.7);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 4px 20px rgba(var(--rgb-darkest), 0.08), 0 1px 3px rgba(var(--rgb-darkest), 0.05), inset 0 1px 0 rgba(var(--rgb-lightest), 0.3);
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.tan-tabs-more:hover .tan-tabs-more-btn,
.tan-tabs-more:focus-within .tan-tabs-more-btn {
  color: rgb(var(--rgb-first));
  background-color: rgba(var(--rgb-first-lighter), 0.5);
}

.tan-tabs-more-menu {
  position: absolute;
  top: 100%;
  left: 8px;
  z-index: 20;
  min-width: 180px;
  margin: 0;
  padding: 8px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 20px;
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 0 8px 24px rgba(var(--rgb-darkest), 0.12), 0 1px 3px rgba(var(--rgb-darkest), 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

html[dir=ltr] .tan-tabs-more-menu {
  left: auto;
  right: 8px;
}

.tan-tabs-more:hover .tan-tabs-more-menu,
.tan-tabs-more:focus-within .tan-tabs-more-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.tan-tabs-more-item {
  display: block;
  padding: 8px 14px;
  border-radius: 100px;
  white-space: nowrap;
  color: rgb(var(--rgb-dark), 0.6);
  text-decoration: none !important;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.tan-tabs-more-item:hover {
  color: rgb(var(--rgb-dark));
  background-color: rgba(var(--rgb-first-lighter), 0.25);
}

.tan-tabs-more-item.active {
  color: rgb(var(--rgb-first));
  font-weight: 600;
  background-color: rgba(var(--rgb-first-lighter), 0.5);
}

@media (max-width: 991.98px) {
  .tan-tabs-main {
    min-width: 0;
    flex: 0 1 auto;
  }
  .tan-tabs-more {
    flex-shrink: 0;
  }
}
/* Section header tools -> "more" (…) hover menu on small screens.
   Matches the cartable header: same capsule as the tab bar / search box (--tan-section-tabbar-h, --main-bg),
   icon turns first-color on hover like the search button, menu looks like #nav-tab-role.
   Applies to every .section-header nav.pagination-tab. */
@media (max-width: 991.98px) {
  .section-header nav.pagination-tab:has(> ul > li + li) {
    position: relative;
    align-self: center;
    margin-block: 0 !important;
  }
  .section-header nav.pagination-tab:has(> ul > li + li)::before {
    content: "\f141";
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-size: 14px;
    color: rgb(var(--rgb-light-dark));
    background-color: rgb(var(--main-bg));
    cursor: pointer;
    transition: color 0.2s ease;
  }
  .section-header nav.pagination-tab:has(> ul > li + li):hover::before, .section-header nav.pagination-tab:has(> ul > li + li):focus-within::before {
    color: rgb(var(--rgb-first));
  }
  .section-header nav.pagination-tab:has(> ul > li + li) > ul {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 300;
    min-width: 160px;
    margin: 0 !important;
    padding: 5px !important;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    border: 1px solid rgba(var(--rgb-dark), 0.12);
    border-radius: var(--radius-md, 14px);
    background-color: rgb(var(--rgb-ninth-lighter));
    box-shadow: 0 8px 24px rgba(var(--rgb-darkest), 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .section-header nav.pagination-tab:has(> ul > li + li) > ul::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 8px;
  }
  .section-header nav.pagination-tab:has(> ul > li + li) > ul > li {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border-radius: 100px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    color: rgb(var(--rgb-darker));
    background-color: transparent;
    transition: background-color 0.15s ease;
  }
  .section-header nav.pagination-tab:has(> ul > li + li) > ul > li::after {
    content: attr(title);
  }
  .section-header nav.pagination-tab:has(> ul > li + li) > ul > li > a,
  .section-header nav.pagination-tab:has(> ul > li + li) > ul > li > button {
    width: auto;
    height: auto;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgb(var(--rgb-light-dark));
    background: transparent !important;
    border: 0 !important;
  }
  .section-header nav.pagination-tab:has(> ul > li + li) > ul > li > a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .section-header nav.pagination-tab:has(> ul > li + li) > ul > li:hover {
    background-color: rgba(var(--rgb-dark), 0.05);
  }
  .section-header nav.pagination-tab:has(> ul > li + li) > ul > li:hover > a,
  .section-header nav.pagination-tab:has(> ul > li + li) > ul > li:hover > button {
    color: rgb(var(--rgb-first));
  }
  .section-header nav.pagination-tab:has(> ul > li + li):hover > ul, .section-header nav.pagination-tab:has(> ul > li + li):focus-within > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  html[dir=ltr] .section-header nav.pagination-tab:has(> ul > li + li) > ul {
    left: auto;
    right: 0;
  }
}
/* Segmented toggle with a sliding pill (see tanSegmentIndicator in my-main.js) */
.btn-group.tan-segment {
  position: relative;
  isolation: isolate;
  gap: 4px;
  padding: 4px;
  border-radius: 100px;
  background-color: rgba(var(--rgb-dark), 0.08) !important;
}
.btn-group.tan-segment > .btn {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  padding: 6px 18px;
  border: 0 !important;
  border-radius: 100px !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: rgb(var(--rgb-light-dark)) !important;
  transition: color 0.3s;
}
.btn-group.tan-segment > .btn:hover:not(.active) {
  color: rgb(var(--rgb-darker)) !important;
}
.btn-group.tan-segment > .btn.active {
  color: rgb(var(--rgb-lightest)) !important;
}
.btn-group.tan-segment > .tan-segment-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 100px;
  background: linear-gradient(135deg, rgb(var(--rgb-first)), rgb(var(--rgb-first-dark)));
  box-shadow: 0 2px 8px rgba(var(--rgb-first), 0.35);
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}

.tan-avatar-stack {
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tan-avatar-stack::-webkit-scrollbar {
  display: none;
}

.tan-avatar-stack:not(.tan-avatar-stack-sm) {
  padding-block: 5px;
  padding-inline: 17px 5px;
}

.tan-avatar-stack:not(.tan-avatar-stack-expanded) {
  overflow-x: hidden;
}

.tan-avatar-stack.tan-avatar-stack-expanded {
  overflow-x: auto;
}

.tan-avatar-stack.tan-avatar-stack-fade-left {
  -webkit-mask-image: linear-gradient(to right, transparent, rgb(var(--rgb-black)) 32px);
  mask-image: linear-gradient(to right, transparent, rgb(var(--rgb-black)) 32px);
}

.tan-avatar-stack.tan-avatar-stack-fade-right {
  -webkit-mask-image: linear-gradient(to left, transparent, rgb(var(--rgb-black)) 32px);
  mask-image: linear-gradient(to left, transparent, rgb(var(--rgb-black)) 32px);
}

.tan-avatar-stack.tan-avatar-stack-fade-left.tan-avatar-stack-fade-right {
  -webkit-mask-image: linear-gradient(to right, transparent, rgb(var(--rgb-black)) 32px, rgb(var(--rgb-black)) calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, rgb(var(--rgb-black)) 32px, rgb(var(--rgb-black)) calc(100% - 32px), transparent);
}

.tan-avatar-stack .tan-avatar-stack-hidden {
  display: none !important;
}

.tan-avatar-stack .tan-avatar-stack-more-link {
  flex-shrink: 0;
}

.tan-avatar-stack-sm .tan-avatar-stack-more {
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin-inline-start: -8px;
  margin-right: 10px;
  border-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: none;
  font-size: 11px;
  user-select: none;
}

.tan-avatar-stack-sm .tan-avatar-stack-more:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 6px rgba(var(--rgb-darkest), 0.25);
}

body.my-new-body-content {
  /* فقط آخرین سکشنِ صفحه ارتفاعِ باقی‌مانده رو پر می‌کنه؛ وقتی چند سکشن هست بقیه به اندازه‌ی محتواشون می‌مونن */
  /* با حلقه‌ی 7px دورش هم‌قدِ نوار تب کنارش: 36px و کنار نوار 48px */
  /* drop-tab-group بدون تب (مثلاً صفحات گزارش) نباید به‌صورت قرص خالی نمایش داده شود */
}
body.my-new-body-content section.main,
body.my-new-body-content section.main > #main-content > .row > .col-12 {
  min-width: 0;
  max-width: 100%;
}
@media only screen and (min-width: 768px) {
  body.my-new-body-content:has(nav.bottom-navbar.show) section.main > #main-content {
    padding-bottom: 86px !important;
  }
}
body.my-new-body-content section.main > #main-content {
  min-height: 100%;
  padding: 0 !important;
}
body.my-new-body-content section.main > #main-content > .row {
  flex: 1;
  margin: 0px 0 0 0;
  padding: 0 !important;
}
body.my-new-body-content section.main > #main-content > .row:not(.row-grid) > .col-12 {
  display: flex;
  flex-direction: column;
  padding: 0;
}
body.my-new-body-content .my-header-bg {
  width: 100% !important;
  backdrop-filter: blur(1.2px) !important;
  box-shadow: 0 4px 12px 1px rgba(var(--rgb-darkest), 0.1) !important;
  mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 64%, rgba(0, 0, 0, 0.4) 82%, rgba(0, 0, 0, 0) 100%) !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom, rgba(var(--rgb-ninth-lighter), 1) 0%, rgba(var(--rgb-ninth-lighter), 0) 100%) !important;
  position: absolute;
  height: inherit;
  top: 0;
  left: 0;
  z-index: -1;
  transition: var(--my-sidebar-transition);
}
body.my-new-body-content .my-header-bg > * {
  display: none;
}
body.my-new-body-content section.main .section:not(:has(~ .section)) {
  flex: 1;
}
body.my-new-body-content section.main .section {
  overflow: visible;
  color: rgb(var(--rgb-darker));
  background-color: rgb(var(--rgb-ninth-lighter));
  border: none;
  border-radius: 0 !important;
  box-shadow: none;
}
body.my-new-body-content section.main .section > * {
  order: 1;
}
body.my-new-body-content section.main .section > .section-header {
  order: -2;
  top: 0;
  z-index: 100;
  flex-wrap: nowrap;
  gap: 16px;
  height: 60px;
  margin: 0 0 8px 0 !important;
  padding: 0 16px !important;
  background-color: rgb(var(--rgb-ninth-lighter));
  border-bottom: 1px solid rgba(var(--rgb-dark), 0.12);
  border-radius: 0 !important;
}
body.my-new-body-content section.main .section > .section-header > div:first-child {
  flex-shrink: 1;
  min-width: 0;
  gap: 10px !important;
  padding: 0 !important;
}
body.my-new-body-content section.main .section > .section-header > div:first-child > svg {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 7px;
  padding: 0.4px;
  /* گوشه‌های آیکنِ بزرگ‌تر نباید با دایره بریده شوند */
  overflow: visible;
  background-color: rgba(var(--rgb-first), 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(var(--rgb-first), 0.1);
  transition: all 0.2s ease;
}
body.my-new-body-content section.main .section > .section-header:has(.drop-tab-group .drop-tab) > div:first-child > svg {
  width: 34px;
  height: 34px;
  padding: 3.4px;
}
body.my-new-body-content section.main .section > .section-header > div:first-child > svg:hover {
  background-color: rgba(var(--rgb-first), 0.16);
  box-shadow: 0 0 0 7px rgba(var(--rgb-first), 0.16);
}
body.my-new-body-content section.main .section > .section-header > div:first-child > h1 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 700;
  color: rgb(var(--rgb-darker)) !important;
  white-space: nowrap;
}
body.my-new-body-content section.main .section > .section-header > div:nth-child(2) {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
body.my-new-body-content section.main .section > .section-header .drop-tab-group:not(.drop-tab-group .drop-tab-group) {
  order: 1;
  /* min-width نباید از فضای ردیف بیشتر شود؛ وگرنه در موبایل روی آیکون تایتل می‌رود */
  min-width: 0 !important;
  flex: 0 1 auto;
  width: auto;
  display: flex;
  margin-inline-start: auto;
  align-items: center;
  position: relative;
  min-width: 0;
  max-width: 100%;
  padding: 1px;
  background-color: rgb(var(--main-bg));
  border-radius: 100px;
}
body.my-new-body-content section.main .section > .section-header .drop-tab-group:not(.drop-tab-group .drop-tab-group):not(:has(.drop-tab)) {
  display: none;
}
body.my-new-body-content section.main .section > .section-header .drop-tab-group:not(.drop-tab-group .drop-tab-group) > .drop-tab-group {
  display: flex;
  min-width: 0;
  max-width: 100%;
}
body.my-new-body-content section.main .section > .section-header .drop-tab-group:not(.drop-tab-group .drop-tab-group) > .drop-tab-group > div {
  min-width: 0;
  max-width: 100%;
}
body.my-new-body-content #nav-tab {
  flex-wrap: nowrap;
  margin: 0;
  border: none;
}
body.my-new-body-content #nav-tab ul {
  position: relative;
  display: flex;
  gap: 0;
  /* فضای اضافه برای سایهٔ ::before تا overflow-x: auto آن را نبُرد؛ margin منفی اندازه را ثابت نگه می‌دارد */
  /* -4px = برابر padding قرص (.drop-tab-group)؛ بیشتر باشد متن از لبهٔ قرص بیرون می‌زند */
  margin: -4px;
  padding: 10px;
  list-style: none;
  border-radius: 100px;
  overflow-x: auto;
  scrollbar-width: none;
}
body.my-new-body-content #nav-tab ul::-webkit-scrollbar {
  display: none;
}
body.my-new-body-content #nav-tab ul::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: var(--tan-slider-left, 0);
  width: var(--tan-slider-width, 0);
  z-index: 1;
  background-color: rgb(var(--rgb-first));
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(var(--rgb-first), 0.35);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
body.my-new-body-content #nav-tab ul li {
  position: relative;
  z-index: 2;
  flex-shrink: 1;
  margin: 0;
  background-color: transparent !important;
  border: none !important;
}
body.my-new-body-content #nav-tab ul li button.nav-link {
  padding: 7px 16px !important;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgb(var(--rgb-light-dark)) !important;
  white-space: nowrap;
  background-color: transparent !important;
  border: none !important;
  border-radius: 100px !important;
  box-shadow: none !important;
  transition: color 0.3s ease;
}
body.my-new-body-content #nav-tab ul li button.nav-link::after {
  display: none;
}
body.my-new-body-content #nav-tab ul li button.nav-link:hover:not(.active) {
  color: rgb(var(--rgb-darker)) !important;
}
body.my-new-body-content #nav-tab ul li button.nav-link.active {
  color: rgb(var(--rgb-lightest)) !important;
  font-weight: 700;
}
body.my-new-body-content #nav-tab ul:not([style*="--tan-slider-width"]) li button.nav-link.active {
  background-color: rgb(var(--rgb-first)) !important;
}
body.my-new-body-content #dropTabToggle {
  display: none !important;
}
body.my-new-body-content #nav-tab {
  position: static;
  min-width: 0 !important;
  max-height: none;
  padding: 0;
  overflow: visible;
  background-color: transparent;
  border: none;
  border-radius: 0;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.my-new-body-content section.main .section > .section-header > div:nth-child(2) > div:first-child {
  order: 2;
  flex-shrink: 0;
  align-self: stretch;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  padding: 4px;
  padding-inline-end: 44px;
  background-color: rgb(var(--main-bg));
  border-radius: 100px;
}
body.my-new-body-content #dropTabRoleToggle {
  gap: 6px !important;
  padding: 7px 12px !important;
  color: rgb(var(--rgb-light-dark)) !important;
  white-space: nowrap;
  transition: all 0.2s ease;
}
body.my-new-body-content #dropTabRoleToggle:hover {
  border-color: rgb(var(--rgb-first));
}
body.my-new-body-content #dropTabRoleToggle > i {
  font-size: 10px;
  color: rgb(var(--rgb-light-dark));
  transition: transform 0.25s ease;
}
body.my-new-body-content #dropTabRoleToggle:has(#nav-tab-role.show) > i {
  transform: rotate(180deg);
}
body.my-new-body-content #nav-tab-role {
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 120px !important;
  padding: 5px;
  overflow: visible;
  background-color: rgb(var(--rgb-ninth-lighter));
  border: 1px solid rgba(var(--rgb-dark), 0.12);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(var(--rgb-darkest), 0.12);
  z-index: 300;
}
body.my-new-body-content #nav-tab-role ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.my-new-body-content #nav-tab-role ul li {
  margin: 0;
  border: none !important;
}
body.my-new-body-content #nav-tab-role ul li button.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px !important;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: rgb(var(--rgb-darker)) !important;
  text-align: start;
  white-space: nowrap;
  background-color: transparent !important;
  border: none !important;
  border-radius: 100px !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease;
}
body.my-new-body-content #nav-tab-role ul li button.nav-link:hover {
  background-color: rgba(var(--rgb-dark), 0.05) !important;
}
body.my-new-body-content #nav-tab-role ul li button.nav-link.active {
  font-weight: 700;
  color: rgb(var(--rgb-first)) !important;
  background-color: rgba(var(--rgb-first), 0.1) !important;
}
body.my-new-body-content #nav-tab-role ul li button.nav-link.active::after {
  display: block;
  content: "\f00c";
  width: auto;
  margin: 0;
  border: none;
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 10px;
}
body.my-new-body-content section.main .section > .mx-box:not(#searchCollapse):has(> button[data-bs-target]) {
  order: -1;
  position: relative;
  top: 13px;
  z-index: 101;
  display: flex;
  justify-content: flex-end;
  height: 0;
  margin: -55px 3px 47px !important;
  padding: 0 20px !important;
  pointer-events: none;
}
body.my-new-body-content section.main .section > .mx-box:not(#searchCollapse):has(> button[data-bs-target]) > button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 34px;
  height: 34px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0;
  color: rgb(var(--rgb-light-dark)) !important;
  border-radius: 50%;
  pointer-events: auto;
  transition: all 0.2s ease;
}
body.my-new-body-content section.main .section > .mx-box:not(#searchCollapse):has(> button[data-bs-target]) > button i {
  font-size: 13px;
}
body.my-new-body-content section.main .section > .mx-box:not(#searchCollapse):has(> button[data-bs-target]) > button:hover {
  color: rgb(var(--rgb-first)) !important;
  border-color: rgb(var(--rgb-first));
}
body.my-new-body-content section.main .section > [id^=container_inst_] {
  align-content: flex-start;
}
body.my-new-body-content #searchCollapse {
  order: 0;
}
body.my-new-body-content section.main .section:has(#searchCollapse.show, #searchCollapse.collapsing) > .mx-box:not(#searchCollapse):has(> button[data-bs-target]) > button {
  color: rgb(var(--rgb-lightest)) !important;
  background-color: rgb(var(--rgb-first));
  border-color: rgb(var(--rgb-first));
  box-shadow: 0 2px 8px rgba(var(--rgb-first), 0.35);
}
body.my-new-body-content section.main .section > .section-footer {
  order: 2;
  justify-content: space-between !important;
  flex-wrap: nowrap;
  gap: 12px;
  min-height: 0 !important;
  padding: 14px 24px !important;
  font-size: 13px;
  color: rgb(var(--rgb-light-dark));
  border-top: 1px solid rgba(var(--rgb-dark), 0.12);
  border-radius: 0 !important;
}
body.my-new-body-content section.main .section > .section-footer > p {
  flex-shrink: 0;
  font-size: 13px;
  color: rgb(var(--rgb-light-dark)) !important;
}
body.my-new-body-content section.main .section > .section-footer > nav.pagination {
  width: auto;
}
body.my-new-body-content section.main .section > .section-footer ul.pagination {
  display: flex;
  gap: 6px;
  width: auto !important;
  margin: 0;
  padding: 0 !important;
  list-style: none;
}
body.my-new-body-content section.main .section > .section-footer ul.pagination li {
  display: block !important;
  margin: 0;
  padding: 0;
  background-color: transparent !important;
  border: none;
  border-radius: 0;
}
body.my-new-body-content section.main .section > .section-footer ul.pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  font-size: 12px;
  color: rgb(var(--rgb-darker)) !important;
  background-color: rgb(var(--rgb-ninth-lighter)) !important;
  border: 1px solid rgba(var(--rgb-dark), 0.12);
  border-radius: 50% !important;
  cursor: pointer;
  transition: all 0.2s;
}
body.my-new-body-content section.main .section > .section-footer ul.pagination li:not(.active):not(.disabled) a:hover {
  background-color: rgba(var(--rgb-dark), 0.05) !important;
}
body.my-new-body-content section.main .section > .section-footer ul.pagination li.active a {
  color: rgb(var(--rgb-lightest)) !important;
  background-color: rgb(var(--rgb-first)) !important;
  border-color: rgb(var(--rgb-first));
}
body.my-new-body-content section.main .section > .section-footer ul.pagination li.disabled a {
  opacity: 0.5;
  cursor: default;
}
body.my-new-body-content section.main .section > .section-footer ul.pagination li:first-child,
body.my-new-body-content section.main .section > .section-footer ul.pagination li:last-child {
  display: none !important;
}
@media only screen and (max-width: 400px) {
  body.my-new-body-content section.main .section > .section-header > div:first-child > h1 {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  body.my-new-body-content section.main .section > .section-header {
    gap: 8px;
    height: 56px;
    padding: 0 10px !important;
  }
}
@media only screen and (max-width: 768px) {
  body.my-new-body-content section.main .section > .section-header > div:nth-child(2) {
    gap: 8px;
  }
}
@media only screen and (max-width: 768px) {
  body.my-new-body-content section.main .section > .section-header > div:nth-child(2) > div:first-child {
    gap: 4px !important;
    padding-inline-end: 40px;
  }
}
@media only screen and (max-width: 768px) {
  body.my-new-body-content #dropTabRoleToggle {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}
@media only screen and (max-width: 768px) {
  body.my-new-body-content section.main .section > .mx-box:not(#searchCollapse):has(> button[data-bs-target]) {
    top: 12px;
    margin: -52px 0 52px !important;
    padding: 0 14px !important;
  }
}
@media only screen and (max-width: 768px) {
  body.my-new-body-content section.main .section > .mx-box:not(#searchCollapse):has(> button[data-bs-target]) > button {
    width: 32px;
    height: 32px;
  }
}
@media only screen and (max-width: 768px) {
  body.my-new-body-content section.main .section > .mx-box:not(#searchCollapse):has(> button[data-bs-target]) > button i {
    font-size: 12px;
  }
}
@media only screen and (max-width: 768px) {
  body.my-new-body-content section.main .section > .section-footer {
    flex-direction: column;
    gap: 10px;
    padding: 12px !important;
    text-align: center;
  }
}
@media only screen and (max-width: 480px) {
  body.my-new-body-content section.main .section > .section-header > div:first-child {
    gap: 0 !important;
  }
}
@media only screen and (max-width: 480px) {
  body.my-new-body-content section.main .section > .section-header > div:first-child > svg {
    width: 24px;
    height: 24px;
    margin: 6px;
    padding: 2.4px;
    box-shadow: 0 0 0 6px rgba(var(--rgb-first), 0.1);
  }
  body.my-new-body-content section.main .section > .section-header:has(.drop-tab-group .drop-tab) > div:first-child > svg {
    width: 36px;
    height: 36px;
    padding: 3.6px;
  }
  body.my-new-body-content section.main .section > .section-header > div:first-child > svg:hover {
    box-shadow: 0 0 0 6px rgba(var(--rgb-first), 0.16);
  }
}
@media only screen and (max-width: 480px) {
  body.my-new-body-content #dropTabRoleToggle {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }
}
@media only screen and (max-width: 480px) {
  body.my-new-body-content section.main .section > .section-header > div:nth-child(2) > div:first-child {
    padding-inline-end: 38px;
  }
}
@media only screen and (max-width: 480px) {
  body.my-new-body-content section.main .section > .mx-box:not(#searchCollapse):has(> button[data-bs-target]) {
    top: 13px;
    margin: -52px 0 52px !important;
  }
}
@media only screen and (max-width: 480px) {
  body.my-new-body-content section.main .section > .mx-box:not(#searchCollapse):has(> button[data-bs-target]) > button {
    width: 30px;
    height: 30px;
  }
}
body.my-new-body-content section.main tags.tagify:has(+ tags.tagify) {
  display: none !important;
}
body.my-new-body-content #nav-tab ul {
  flex-direction: row !important;
  /* هم‌اندازهٔ والد، با جبرانِ margin منفیِ -4px که برای سایهٔ تب گذاشته شده */
  width: calc(100% + 8px) !important;
}
body.my-new-body-content #nav-tab ul li,
body.my-new-body-content #nav-tab ul li:hover {
  border-bottom: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}
body.my-new-body-content #nav-tab ul li button.nav-link {
  width: auto !important;
  text-align: center;
}

/* ===================== Tan Project List ===================== */
.tan-section-fit {
  flex-wrap: nowrap;
}

.tan-hex-bg {
  background-color: color-mix(in srgb, var(--color, rgb(var(--rgb-first))) var(--intensity, 100%), transparent);
}

.tan-hex-text {
  color: color-mix(in srgb, var(--color, rgb(var(--rgb-first))) var(--intensity, 100%), transparent);
}

.tan-hex-border {
  border-color: color-mix(in srgb, var(--color, rgb(var(--rgb-first))) var(--intensity, 100%), transparent) !important;
}

.tan-avatar-stack-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--color, rgb(var(--rgb-first))) var(--intensity, 100%), transparent);
  color: rgb(var(--rgb-white));
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.tan-avatar-host {
  display: inline-flex;
}
.tan-avatar-host .tan-avatar-stack-img {
  width: 22px;
  min-width: 22px;
  height: 22px;
  margin: 0;
  border-width: 0;
  box-shadow: none;
  font-size: 10px;
}

.tan-project-page {
  width: 100%;
  margin: 0 auto;
  color: rgb(var(--rgb-darker));
}

.tan-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 18px;
}

.tan-project-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 0 !important;
  padding: 8px;
  border-radius: 20px;
  border: 1px solid rgba(var(--rgb-dark), 0.07);
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 0 1px 2px rgba(var(--rgb-black), 0.04), 0 8px 24px -12px rgba(var(--rgb-black), 0.12);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.tan-project-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--color, rgb(var(--rgb-first))) 35%, transparent);
  box-shadow: 0 1px 2px rgba(var(--rgb-black), 0.04), 0 18px 36px -18px color-mix(in srgb, var(--color, rgb(var(--rgb-first))) 55%, transparent);
}
.tan-project-card:hover .tan-project-card-image img {
  transform: scale(1.06);
}
.tan-project-card-image {
  position: relative;
  height: 132px;
  overflow: hidden;
  border-radius: 14px;
}
.tan-project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tan-project-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--rgb-black), 0.78) 0%, rgba(var(--rgb-black), 0.25) 45%, transparent 70%);
  pointer-events: none;
}
.tan-project-card-title {
  position: absolute;
  inset-inline: 12px;
  bottom: 10px;
  z-index: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
  color: rgb(var(--rgb-white));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tan-project-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 6px 4px;
}

.tan-status-bar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 30px;
  border: 1px solid rgba(var(--rgb-white), 0.25);
  font-size: 10.5px;
  font-weight: 700;
  background-color: color-mix(in srgb, var(--color, rgb(var(--rgb-first))) var(--intensity, 92%), transparent);
  color: rgb(var(--rgb-white));
  backdrop-filter: blur(10px);
}
.tan-status-bar::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: tan-project-pulse 1.8s infinite;
}

[dir=ltr] .tan-status-bar {
  right: auto;
  left: 10px;
}

@keyframes tan-project-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.tan-project-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgb(var(--rgb-light-dark));
}
.tan-project-dates > i {
  font-size: 12px;
}
.tan-project-dates b {
  white-space: nowrap;
  font-weight: 700;
  color: rgb(var(--rgb-darker));
}

.tan-project-dates-line {
  flex: 1;
  min-width: 12px;
  height: 1px;
  background-image: linear-gradient(to left, rgba(var(--rgb-dark), 0.25) 50%, transparent 50%);
  background-size: 6px 1px;
}

.tan-project-days {
  flex-shrink: 0;
  margin-inline-start: auto;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 30px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color, rgb(var(--rgb-first)));
}

.tan-project-progress {
  margin-bottom: 12px;
}
.tan-project-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.tan-project-progress-label {
  font-size: 11px;
  font-weight: 700;
  color: rgb(var(--rgb-light-dark));
}
.tan-project-progress-percent {
  font-size: 12px;
  font-weight: 800;
}
.tan-project-progress-track {
  position: relative;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 30px;
  background-color: rgba(var(--rgb-dark), 0.1);
  container-type: inline-size;
}
.tan-project-progress-fill {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 30px;
  background: rgb(var(--rgb-red-500));
  isolation: isolate;
  box-shadow: none;
  transition: width 1s ease;
}
.tan-project-progress-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--rgb-white), 0.4), transparent);
  animation: tan-project-shimmer 2s infinite linear;
  z-index: 1;
}
html[dir=ltr] .tan-project-progress-fill::before {
  animation-name: tan-project-shimmer-ltr;
}

.tan-project-progress .tan-project-progress-percent {
  color: color-mix(in srgb, var(--tan-progress-color, var(--color, rgb(var(--rgb-first)))) 78%, rgb(var(--rgb-black)));
}

body.dark .tan-project-progress .tan-project-progress-percent, body.faragard-dark .tan-project-progress .tan-project-progress-percent, body.blue-dark .tan-project-progress .tan-project-progress-percent, body.orange-dark .tan-project-progress .tan-project-progress-percent, body.fuchsia-dark .tan-project-progress .tan-project-progress-percent, body.pink-dark .tan-project-progress .tan-project-progress-percent, body.emerald-dark .tan-project-progress .tan-project-progress-percent, body.red-dark .tan-project-progress .tan-project-progress-percent, body.sky-dark .tan-project-progress .tan-project-progress-percent, body.yellow-dark .tan-project-progress .tan-project-progress-percent, body.green-dark .tan-project-progress .tan-project-progress-percent, body.purple-dark .tan-project-progress .tan-project-progress-percent, body.indigo-dark .tan-project-progress .tan-project-progress-percent, body.slate-dark .tan-project-progress .tan-project-progress-percent, body.yellow-blue-dark .tan-project-progress .tan-project-progress-percent, body.administrative-order-dark .tan-project-progress .tan-project-progress-percent, body.organizational-dynamism-dark .tan-project-progress .tan-project-progress-percent, body.collective-empathy-dark .tan-project-progress .tan-project-progress-percent, body.innovative-thinking-dark .tan-project-progress .tan-project-progress-percent, body.performance-transparency-dark .tan-project-progress .tan-project-progress-percent, body.organized-city-navy-dark .tan-project-progress .tan-project-progress-percent, body.calm-city-sky-dark .tan-project-progress .tan-project-progress-percent, body.warm-city-brick-dark .tan-project-progress .tan-project-progress-percent, body.order-in-service-dark .tan-project-progress .tan-project-progress-percent, body.companionship-in-action-dark .tan-project-progress .tan-project-progress-percent, body.focus-and-precision-dark .tan-project-progress .tan-project-progress-percent, body.golden-blue-dark .tan-project-progress .tan-project-progress-percent {
  color: color-mix(in srgb, var(--tan-progress-color, var(--color, rgb(var(--rgb-first)))) 88%, rgb(var(--rgb-black)));
}

.tan-project-section .tan-project-progress + .tan-project-progress {
  margin-top: 14px;
}

.tan-project-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgb(var(--rgb-red-500)) 0%, rgb(var(--rgb-orange-500)) 25%, rgb(var(--rgb-yellow-400)) 50%, rgb(var(--rgb-lime-500)) 75%, rgb(var(--rgb-green-500)) 100%);
  background-size: calc(100cqw + 4px) 100%;
  background-repeat: no-repeat;
  background-position: right center;
  transform: scaleX(400);
  transform-origin: left center;
}

html[dir=ltr] .tan-project-progress-fill::after {
  background-image: linear-gradient(to right, rgb(var(--rgb-red-500)) 0%, rgb(var(--rgb-orange-500)) 25%, rgb(var(--rgb-yellow-400)) 50%, rgb(var(--rgb-lime-500)) 75%, rgb(var(--rgb-green-500)) 100%);
  background-position: left center;
  transform-origin: right center;
}

@keyframes tan-project-shimmer {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes tan-project-shimmer-ltr {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.tan-tasks-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.tan-tasks-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 4px 6px;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.2s ease;
}
.tan-tasks-stat:hover {
  transform: translateY(-2px);
}
.tan-tasks-stat-num {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}
.tan-tasks-stat-txt {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 600;
}
.tan-tasks-stat-txt::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color);
}

.tan-project-participants {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  border-top: 1px solid rgba(var(--rgb-dark), 0.07);
}
.tan-project-participants-label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: rgb(var(--rgb-light-dark));
}
.tan-project-participants-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tan-project-participants .tan-avatar-stack {
  flex: 1 1 auto;
  min-width: 0;
}
.tan-project-participants .tan-avatar-stack-img,
.tan-project-participants .tan-avatar-stack-more {
  width: 30px;
  min-width: 30px;
  height: 30px;
  font-size: 10px;
}

.tan-project-detail {
  display: none;
  animation: tan-project-fade 0.4s ease;
}
.tan-project-detail.active {
  display: block;
}

.tan-project-list.hidden {
  display: none;
}

@keyframes tan-project-fade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tan-project-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(var(--rgb-dark), 0.12);
  background-color: rgb(var(--rgb-ninth-lighter));
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: rgb(var(--rgb-light-dark));
  cursor: pointer;
  transition: all 0.2s;
}
.tan-project-back:hover {
  border-color: rgb(var(--rgb-first));
  color: rgb(var(--rgb-first));
  transform: translateX(4px);
}

.tan-project-hero {
  position: relative;
  height: 170px;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(var(--rgb-black), 0.15);
}
.tan-project-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tan-project-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 20px;
  background: linear-gradient(to top, rgba(var(--rgb-black), 0.85), rgba(var(--rgb-black), 0.15));
  color: rgb(var(--rgb-white));
}
.tan-project-hero-overlay .tan-status-bar {
  position: static;
  align-self: flex-start;
  margin-bottom: 12px;
}
.tan-project-hero-overlay h2 {
  margin-bottom: 6px;
  font-size: 19px;
  font-weight: 800;
  color: rgb(var(--rgb-white));
}
.tan-project-hero-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  opacity: 0.9;
}
.tan-project-hero-dates i {
  margin-inline-end: 4px;
}

.tan-project-section {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(var(--rgb-dark), 0.08);
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 0 4px 20px rgba(var(--rgb-black), 0.06);
}
.tan-project-section + .tan-project-section {
  margin-top: 16px;
}
.tan-project-section .tan-project-progress {
  margin-bottom: 0;
}
.tan-project-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.tan-project-section-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: rgb(var(--rgb-darker));
}
.tan-project-section-head h3::before {
  content: "";
  width: 5px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgb(var(--rgb-first)), rgb(var(--rgb-first-dark)));
}

.tan-project-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  border-radius: 12px;
  background-color: rgb(var(--main-bg));
}
.tan-project-filter button {
  padding: 5px 11px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: rgb(var(--rgb-light-dark));
  cursor: pointer;
  transition: all 0.2s;
}
.tan-project-filter button:hover {
  color: rgb(var(--rgb-darker));
}
.tan-project-filter button.active {
  background-color: rgb(var(--rgb-ninth-lighter));
  color: rgb(var(--rgb-first));
  box-shadow: 0 2px 6px rgba(var(--rgb-black), 0.08);
}

.tan-project-tasks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tan-project-task {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(var(--rgb-dark), 0.08);
  background-color: rgb(var(--main-bg));
  transition: all 0.2s;
}
.tan-project-task::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 4px;
  background-color: color-mix(in srgb, var(--color, rgb(var(--rgb-light-dark))) var(--intensity, 100%), transparent);
}
.tan-project-task:hover {
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 0 6px 18px rgba(var(--rgb-black), 0.06);
  transform: translateX(-3px);
}
.tan-project-task-check {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(var(--rgb-dark), 0.2);
  background-color: rgb(var(--rgb-ninth-lighter));
  font-size: 10px;
  color: transparent;
  transition: all 0.2s;
}
.tan-project-task.done .tan-project-task-check {
  border-color: var(--color);
  background-color: var(--color);
  color: rgb(var(--rgb-white));
}
.tan-project-task-info {
  flex: 1;
  min-width: 0;
}
.tan-project-task-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  color: rgb(var(--rgb-darker));
}
.tan-project-task.done .tan-project-task-title > span:first-child {
  text-decoration: line-through;
  color: rgb(var(--rgb-light-dark));
}
.tan-project-task-desc {
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.7;
  color: rgb(var(--rgb-light-dark));
}
.tan-project-task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgb(var(--rgb-light-dark));
}
.tan-project-task-meta > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.tan-project-task-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 30px;
  font-size: 9.5px;
  font-weight: 800;
  color: rgb(var(--rgb-white));
  white-space: nowrap;
}
.tan-project-task-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: tan-project-pulse 1.8s infinite;
}
.tan-project-task-progress {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  width: 76px;
}
.tan-project-task-progress > div {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 30px;
  background-color: rgba(var(--rgb-dark), 0.12);
}
.tan-project-task-progress > div > div {
  height: 100%;
  border-radius: 30px;
  transition: width 0.6s ease;
}
.tan-project-task-progress > span {
  font-size: 10px;
  font-weight: 800;
  color: rgb(var(--rgb-light-dark));
}

.tan-project-card-cover {
  display: flex;
  background: radial-gradient(circle at 18% 20%, rgba(var(--rgb-white), 0.22), transparent 42%), radial-gradient(circle at 85% 110%, rgba(var(--rgb-white), 0.14), transparent 45%), linear-gradient(135deg, rgb(var(--rgb-first)), rgb(var(--rgb-first-darker)));
}
.tan-project-card-cover::after {
  background: linear-gradient(to top, rgba(var(--rgb-black), 0.45) 0%, transparent 60%);
}

.tan-project-cover-icon {
  position: absolute;
  bottom: -18px;
  left: 14px;
  font-size: 96px;
  color: rgba(var(--rgb-white), 0.14);
  transform: rotate(-12deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tan-project-cover-count {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 10px;
  border-radius: 30px;
  background: rgba(var(--rgb-black), 0.45);
  border: 1px solid rgba(var(--rgb-white), 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgb(var(--rgb-white));
  line-height: 1;
}
.tan-project-cover-count::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--rgb-white));
  box-shadow: 0 0 0 3px rgba(var(--rgb-white), 0.25);
}
.tan-project-cover-count b {
  font-size: 11px;
  font-weight: 700;
}

[dir=ltr] .tan-project-cover-count {
  left: auto;
  right: 10px;
}

.tan-project-card-all:hover .tan-project-cover-icon {
  transform: rotate(-4deg) scale(1.1);
}

.tan-project-hero-all {
  background: radial-gradient(circle at 15% 20%, rgba(var(--rgb-white), 0.2), transparent 40%), linear-gradient(135deg, rgb(var(--rgb-first)), rgb(var(--rgb-first-darker)));
}
.tan-project-hero-all img {
  display: none;
}
.tan-project-hero-all .tan-project-hero-overlay {
  background: linear-gradient(to top, rgba(var(--rgb-black), 0.45), transparent);
}

.tan-project-task-proj {
  padding: 2px 8px;
  border-radius: 30px;
  color: var(--color);
}
.tan-project-task-proj i {
  font-size: 10px;
}

.tan-project-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--rgb-light-dark));
}

@media (max-width: 480px) {
  .tan-project-hero {
    height: 150px;
  }
  .tan-project-hero-overlay h2 {
    font-size: 17px;
  }
  .tan-project-task {
    flex-wrap: wrap;
  }
  .tan-project-task-progress {
    width: 100%;
  }
}
.map-places-item {
  background-color: rgb(var(--rgb-tenth-lighter));
  text-decoration: none;
  color: inherit;
  min-width: 170px;
  width: 100%;
  display: block;
  color: rgb(var(--rgb-light-dark));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 12px 0 rgba(var(--rgb-darkest), 0.1);
  padding: 0;
}
.map-places-item h5 {
  font-size: 16px;
  margin-bottom: 0;
}
.map-places-item img,
.map-places-item svg {
  width: 100%;
  max-width: 100%;
  height: 100px;
}
.map-places-item:hover {
  box-shadow: 0 2px 15px 0 rgba(var(--rgb-darkest), 0.14);
  background-color: rgb(var(--rgb-tenth-lighter));
}

.place-detail-item {
  display: block;
}
.place-detail-item > div > img,
.place-detail-item .place-detail-item > div > svg {
  height: 160px;
}

.sidebar > .side-navbar {
  min-height: 0;
}

.sidebar > .lang-select,
.sidebar > .switcher-theme {
  flex-shrink: 0;
}

.sidebar > .switcher-theme {
  margin-top: 8px;
  margin-bottom: 14px;
}

#scrollableTabs.tan-scrollable-tabs {
  width: fit-content !important;
  max-width: 100%;
  justify-self: start;
  padding-block: 6px;
  padding-inline: 7px 0;
  column-gap: 6px !important;
  scroll-padding-inline: 6px;
  background: rgb(var(--rgb-ninth-lighter));
  border: 1px solid rgba(var(--rgb-first), 0.12);
  border-radius: 18px;
  box-shadow: 0 10px 30px -12px rgba(var(--rgb-first-darker), 0.25), 0 2px 6px rgba(var(--rgb-darkest), 0.04);
}

#scrollableTabs.tan-scrollable-tabs::after {
  content: "";
  flex: 0 0 1px;
}

#scrollableTabs .tan-scrollable-tabs-indicator {
  top: 6px;
  height: calc(100% - 12px);
  border-radius: 13px;
  background: linear-gradient(135deg, rgb(var(--rgb-first)), rgb(var(--rgb-first-dark)));
  box-shadow: 0 6px 16px -4px rgba(var(--rgb-first), 0.55);
  transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1), width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#scrollableTabs .tan-scrollable-tab-item-button {
  min-width: 92px;
  padding: 9px 18px;
  border: 0;
  border-radius: 13px;
  font-size: 13px;
  color: rgba(var(--rgb-dark), 0.65);
  transition: color 0.35s ease, background-color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

#scrollableTabs .tan-scrollable-tab-item:not(.active) .tan-scrollable-tab-item-button:hover {
  opacity: 1;
  color: rgb(var(--rgb-first-darker));
  background-color: rgba(var(--rgb-first), 0.08);
}

#scrollableTabs .tan-scrollable-tab-item:not(.active):active .tan-scrollable-tab-item-button {
  transform: scale(0.96);
}

#scrollableTabs .tan-scrollable-tab-item.active .tan-scrollable-tab-item-button {
  color: rgb(var(--rgb-white));
  font-weight: 700;
}

:is([data-title=رویدادها], [data-title=خواندنی‌ها]) > .section {
  overflow: hidden;
}

:is([data-title=رویدادها], [data-title=خواندنی‌ها]) > .section > .section-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0 !important;
}

[data-title=رویدادها] > .section > .section-body > div {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

[data-title=رویدادها] .swiper {
  width: 100%;
  height: 100%;
}

[data-title=رویدادها] .swiper-wrapper {
  height: 100%;
}

[data-title=رویدادها] .tan-poster-card {
  height: 100%;
  min-height: 0;
}

[data-title=رویدادها] .tan-poster-card-img {
  flex: 1 1 auto;
  min-height: 48px;
  height: 0;
  aspect-ratio: auto;
}

[data-title=رویدادها] .tan-poster-card-body {
  flex-shrink: 0;
}

[data-title=خواندنی‌ها] > .section > .section-body > .row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 16px 24px;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

[data-title=خواندنی‌ها] > .section > .section-body > .row > * {
  grid-column: auto;
  grid-row: auto;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
}

[data-title=خواندنی‌ها] .shp-main-article-box {
  min-height: 0;
  overflow: hidden;
}

[data-title=خواندنی‌ها] .shp-main-article-box figure {
  flex: 1 1 auto;
  min-height: 48px;
  height: 0;
}

[data-title=خواندنی‌ها] .shp-main-article-box-content {
  flex-shrink: 0;
}

@media (min-width: 576px) {
  [data-title=خواندنی‌ها] > .section > .section-body > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  [data-title=خواندنی‌ها] > .section > .section-body > .row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  [data-title=خواندنی‌ها] > .section > .section-body > .row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* tan-radius */
html kbd {
  border-radius: var(--radius-xs);
}

html button {
  border-radius: 0px;
}

html .img-thumbnail {
  border-radius: var(--radius-sm);
}

html .form-control::-webkit-file-upload-button {
  border-radius: 0px;
}

html .form-control::file-selector-button {
  border-radius: 0px;
}

html .form-control-sm {
  border-radius: var(--radius-xs);
}

html .form-control-lg {
  border-radius: var(--radius-sm);
}

html .form-select {
  border-radius: var(--tan-radius, var(--radius-xl));
}

html .form-select-sm {
  border-radius: var(--radius-xs);
}

html .form-select-lg {
  border-radius: var(--radius-sm);
}

html .form-floating > .form-control-plaintext ~ label::after,
html .form-floating > .form-control:focus ~ label::after,
html .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
html .form-floating > .form-select ~ label::after {
  border-radius: var(--radius-sm);
}

html .input-group-text {
  border-radius: var(--radius-sm);
}

html .input-group-lg > .btn,
html .input-group-lg > .form-control,
html .input-group-lg > .form-select,
html .input-group-lg > .input-group-text {
  border-radius: var(--radius-sm);
}

html .input-group-sm > .btn,
html .input-group-sm > .form-control,
html .input-group-sm > .form-select,
html .input-group-sm > .input-group-text {
  border-radius: var(--radius-xs);
}

html .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
html .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
html .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select,
html .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

html .input-group.has-validation > .dropdown-toggle:nth-last-child(n+4),
html .input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control,
html .input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select,
html .input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

html .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

html .input-group > .form-floating:not(:first-child) > .form-control,
html .input-group > .form-floating:not(:first-child) > .form-select {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

html .valid-tooltip {
  border-radius: var(--radius-sm);
}

html .invalid-tooltip {
  border-radius: var(--radius-sm);
}

html .btn {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html .ami-imgToBox {
  border-radius: var(--radius-md);
}

html .dropdown-menu {
  border-radius: var(--radius-md);
}

html .dropdown-item {
  border-radius: var(--radius-md);
}

html .btn-group {
  border-radius: var(--radius-sm);
}

html .btn-group > .btn-group:not(:last-child) > .btn,
html .btn-group > .btn.dropdown-toggle-split:first-child,
html .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

html .btn-group > .btn-group:not(:first-child) > .btn,
html .btn-group > .btn:nth-child(n+3),
html .btn-group > :not(.btn-check) + .btn {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

html .btn-group-vertical > .btn-group:not(:last-child) > .btn,
html .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

html .btn-group-vertical > .btn-group:not(:first-child) > .btn,
html .btn-group-vertical > .btn ~ .btn {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

html .nav-tabs .nav-link {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

html .nav-tabs .dropdown-menu {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

html .nav-pills .nav-link {
  border-radius: var(--bs-nav-pills-border-radius);
}

html .navbar-toggler {
  border-radius: var(--radius-md);
}

html .card {
  border-radius: var(--radius-lg);
}

html .card > .list-group:first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

html .card > .list-group:last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

html .card-header:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

html .card-footer:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

html .card-img-overlay {
  border-radius: var(--radius-md);
}

html .card-img,
html .card-img-top {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

html .card-img,
html .card-img-bottom {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

@media (min-width: 576px) {
  html .card-group > .card:not(:last-child) {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  html .card-group > .card:not(:last-child) .card-header,
  html .card-group > .card:not(:last-child) .card-img-top {
    border-top-left-radius: 0px;
  }
  html .card-group > .card:not(:last-child) .card-footer,
  html .card-group > .card:not(:last-child) .card-img-bottom {
    border-bottom-left-radius: 0px;
  }
  html .card-group > .card:not(:first-child) {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  html .card-group > .card:not(:first-child) .card-header,
  html .card-group > .card:not(:first-child) .card-img-top {
    border-top-right-radius: 0px;
  }
  html .card-group > .card:not(:first-child) .card-footer,
  html .card-group > .card:not(:first-child) .card-img-bottom {
    border-bottom-right-radius: 0px;
  }
}
html .accordion-button {
  border-radius: 0px;
}

html .accordion-item:first-of-type {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

html .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

html .accordion-item:last-of-type {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

html .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

html .accordion-item:last-of-type .accordion-collapse {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

html .accordion-flush .accordion-item {
  border-radius: 0px;
}

html .accordion-flush .accordion-item .accordion-button,
html .accordion-flush .accordion-item .accordion-button.collapsed {
  border-radius: 0px;
}

html .breadcrumb {
  border-radius: var(--radius-md);
}

html .page-item:first-child .page-link {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

html .page-item:last-child .page-link {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

html .badge {
  border-radius: var(--radius-xs);
}

html .alert {
  border-radius: var(--radius-sm);
}

html .progress,
html .progress-stacked {
  border-radius: var(--bs-progress-border-radius);
}

html .list-group {
  border-radius: var(--radius-md);
}

html .list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

html .list-group-item:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

html .list-group-horizontal > .list-group-item:first-child:not(:last-child) {
  border-top-left-radius: 0px;
  border-bottom-right-radius: var(--radius-md);
}

html .list-group-horizontal > .list-group-item:last-child:not(:first-child) {
  border-top-left-radius: var(--radius-md);
  border-bottom-right-radius: 0px;
}

@media (min-width: 576px) {
  html .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) {
    border-top-left-radius: 0px;
    border-bottom-right-radius: var(--radius-md);
  }
  html .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) {
    border-top-left-radius: var(--radius-md);
    border-bottom-right-radius: 0px;
  }
}
@media (min-width: 768px) {
  html .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) {
    border-top-left-radius: 0px;
    border-bottom-right-radius: var(--radius-md);
  }
  html .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) {
    border-top-left-radius: var(--radius-md);
    border-bottom-right-radius: 0px;
  }
}
@media (min-width: 992px) {
  html .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) {
    border-top-left-radius: 0px;
    border-bottom-right-radius: var(--radius-md);
  }
  html .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) {
    border-top-left-radius: var(--radius-md);
    border-bottom-right-radius: 0px;
  }
}
@media (min-width: 1200px) {
  html .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) {
    border-top-left-radius: 0px;
    border-bottom-right-radius: var(--radius-md);
  }
  html .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) {
    border-top-left-radius: var(--radius-md);
    border-bottom-right-radius: 0px;
  }
}
@media (min-width: 1400px) {
  html .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) {
    border-top-left-radius: 0px;
    border-bottom-right-radius: var(--radius-md);
  }
  html .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) {
    border-top-left-radius: var(--radius-md);
    border-bottom-right-radius: 0px;
  }
}
html .list-group-flush {
  border-radius: 0px;
}

html .btn-close {
  border-radius: var(--radius-sm);
}

html .toast {
  border-radius: var(--radius-md);
}

html .toast-header {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

html .modal-content {
  border-radius: var(--radius-lg);
}

html .modal-header {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

html .modal-footer {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

html .modal-fullscreen .modal-content {
  border-radius: 0px;
}

html .modal-fullscreen .modal-footer,
html .modal-fullscreen .modal-header {
  border-radius: 0px;
}

@media (max-width: 575.98px) {
  html .modal-fullscreen-sm-down .modal-content {
    border-radius: 0px;
  }
  html .modal-fullscreen-sm-down .modal-footer,
  html .modal-fullscreen-sm-down .modal-header {
    border-radius: 0px;
  }
}
@media (max-width: 767.98px) {
  html .modal-fullscreen-md-down .modal-content {
    border-radius: 0px;
  }
  html .modal-fullscreen-md-down .modal-footer,
  html .modal-fullscreen-md-down .modal-header {
    border-radius: 0px;
  }
}
@media (max-width: 991.98px) {
  html .modal-fullscreen-lg-down .modal-content {
    border-radius: 0px;
  }
  html .modal-fullscreen-lg-down .modal-footer,
  html .modal-fullscreen-lg-down .modal-header {
    border-radius: 0px;
  }
}
@media (max-width: 1199.98px) {
  html .modal-fullscreen-xl-down .modal-content {
    border-radius: 0px;
  }
  html .modal-fullscreen-xl-down .modal-footer,
  html .modal-fullscreen-xl-down .modal-header {
    border-radius: 0px;
  }
}
@media (max-width: 1399.98px) {
  html .modal-fullscreen-xxl-down .modal-content {
    border-radius: 0px;
  }
  html .modal-fullscreen-xxl-down .modal-footer,
  html .modal-fullscreen-xxl-down .modal-header {
    border-radius: 0px;
  }
}
html .tooltip-inner {
  border-radius: var(--radius-md);
}

html .popover {
  border-radius: var(--radius-md);
}

html .popover-header {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

html .spinner-border,
html .spinner-grow {
  border-radius: 50%;
}

html .rounded {
  border-radius: var(--radius-md) !important;
}

html .rounded-0 {
  border-radius: 0px !important;
}

html .rounded-1 {
  border-radius: var(--radius-md) !important;
}

html .rounded-2 {
  border-radius: var(--radius-md) !important;
}

html .rounded-3 {
  border-radius: var(--radius-md) !important;
}

html .rounded-4 {
  border-radius: var(--radius-xl) !important;
}

html .rounded-5 {
  border-radius: var(--bs-border-radius-xxl) !important;
}

html .rounded-circle {
  border-radius: var(--radius-circle) !important;
}

html .rounded-pill {
  border-radius: var(--bs-border-radius-pill) !important;
}

html .rounded-top {
  border-top-left-radius: var(--radius-sm) !important;
  border-top-right-radius: var(--radius-sm) !important;
}

html .rounded-top-0 {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

html .rounded-top-1 {
  border-top-left-radius: var(--radius-xs) !important;
  border-top-right-radius: var(--radius-xs) !important;
}

html .rounded-top-2 {
  border-top-left-radius: var(--radius-sm) !important;
  border-top-right-radius: var(--radius-sm) !important;
}

html .rounded-top-3 {
  border-top-left-radius: var(--radius-sm) !important;
  border-top-right-radius: var(--radius-sm) !important;
}

html .rounded-top-4 {
  border-top-left-radius: var(--radius-lg) !important;
  border-top-right-radius: var(--radius-lg) !important;
}

html .rounded-top-5 {
  border-top-left-radius: var(--radius-lg) !important;
  border-top-right-radius: var(--radius-lg) !important;
}

html .rounded-top-circle {
  border-top-left-radius: 50% !important;
  border-top-right-radius: 50% !important;
}

html .rounded-top-pill {
  border-top-left-radius: var(--bs-border-radius-pill) !important;
  border-top-right-radius: var(--bs-border-radius-pill) !important;
}

html .rounded-end {
  border-top-left-radius: var(--radius-sm) !important;
  border-bottom-left-radius: var(--radius-sm) !important;
}

html .rounded-end-0 {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

html .rounded-end-1 {
  border-top-left-radius: var(--radius-xs) !important;
  border-bottom-left-radius: var(--radius-xs) !important;
}

html .rounded-end-2 {
  border-top-left-radius: var(--radius-sm) !important;
  border-bottom-left-radius: var(--radius-sm) !important;
}

html .rounded-end-3 {
  border-top-left-radius: var(--radius-sm) !important;
  border-bottom-left-radius: var(--radius-sm) !important;
}

html .rounded-end-4 {
  border-top-left-radius: var(--radius-lg) !important;
  border-bottom-left-radius: var(--radius-lg) !important;
}

html .rounded-end-5 {
  border-top-left-radius: var(--radius-lg) !important;
  border-bottom-left-radius: var(--radius-lg) !important;
}

html .rounded-end-circle {
  border-top-left-radius: 50% !important;
  border-bottom-left-radius: 50% !important;
}

html .rounded-end-pill {
  border-top-left-radius: var(--bs-border-radius-pill) !important;
  border-bottom-left-radius: var(--bs-border-radius-pill) !important;
}

html .rounded-bottom {
  border-bottom-left-radius: var(--radius-sm) !important;
  border-bottom-right-radius: var(--radius-sm) !important;
}

html .rounded-bottom-0 {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

html .rounded-bottom-1 {
  border-bottom-left-radius: var(--radius-xs) !important;
  border-bottom-right-radius: var(--radius-xs) !important;
}

html .rounded-bottom-2 {
  border-bottom-left-radius: var(--radius-sm) !important;
  border-bottom-right-radius: var(--radius-sm) !important;
}

html .rounded-bottom-3 {
  border-bottom-left-radius: var(--radius-sm) !important;
  border-bottom-right-radius: var(--radius-sm) !important;
}

html .rounded-bottom-4 {
  border-bottom-left-radius: var(--radius-lg) !important;
  border-bottom-right-radius: var(--radius-lg) !important;
}

html .rounded-bottom-5 {
  border-bottom-left-radius: var(--radius-lg) !important;
  border-bottom-right-radius: var(--radius-lg) !important;
}

html .rounded-bottom-circle {
  border-bottom-left-radius: 50% !important;
  border-bottom-right-radius: 50% !important;
}

html .rounded-bottom-pill {
  border-bottom-left-radius: var(--bs-border-radius-pill) !important;
  border-bottom-right-radius: var(--bs-border-radius-pill) !important;
}

html .rounded-start {
  border-top-right-radius: var(--radius-sm) !important;
  border-bottom-right-radius: var(--radius-sm) !important;
}

html .rounded-start-0 {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

html .rounded-start-1 {
  border-top-right-radius: var(--radius-xs) !important;
  border-bottom-right-radius: var(--radius-xs) !important;
}

html .rounded-start-2 {
  border-top-right-radius: var(--radius-sm) !important;
  border-bottom-right-radius: var(--radius-sm) !important;
}

html .rounded-start-3 {
  border-top-right-radius: var(--radius-sm) !important;
  border-bottom-right-radius: var(--radius-sm) !important;
}

html .rounded-start-4 {
  border-top-right-radius: var(--radius-lg) !important;
  border-bottom-right-radius: var(--radius-lg) !important;
}

html .rounded-start-5 {
  border-top-right-radius: var(--radius-lg) !important;
  border-bottom-right-radius: var(--radius-lg) !important;
}

html .rounded-start-circle {
  border-top-right-radius: 50% !important;
  border-bottom-right-radius: 50% !important;
}

html .rounded-start-pill {
  border-top-right-radius: var(--bs-border-radius-pill) !important;
  border-bottom-right-radius: var(--bs-border-radius-pill) !important;
}

html select {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html input[type=text],
html input[type=number],
html input[type=date],
html input[type=email],
html input[type=password],
html input[type=tel],
html input[type=search],
html input[type=url],
html input[type=datetime-local],
html input[type=month],
html input[type=time],
html input[type=week],
html input[type=select-one] select {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html textarea {
  border-radius: var(--tan-radius, var(--radius-xl));
}

html input[type=color] {
  border-radius: var(--radius-md);
}

html div[tabindex]:focus-visible,
html label[tabindex]:focus-visible,
html button[tabindex]:focus-visible {
  border-radius: var(--tan-radius, var(--radius-sm));
}

html .btn-third {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html .section {
  border-radius: var(--radius-lg);
}

html .section .section-header {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

html .section .section-header img,
html .section .section-header svg {
  border-radius: var(--radius-sm);
}

html .section .section-footer {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

html .form-group {
  border-radius: var(--radius-md);
}

html .form-control {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html .form-control:focus {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html .form-error {
  border-radius: var(--tan-radius, var(--radius-sm));
}

html .form-success {
  border-radius: var(--tan-radius, var(--radius-sm));
}

html .btn {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html .btn-primary,
html .btn-primary:disabled {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html .btn-seventh,
html .btn-seventh:disabled {
  border-radius: var(--tan-radius, var(--radius-xl));
}

html .btn-second,
html .btn-second:disabled {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html .btn-secondary,
html .btn-secondary:disabled {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html .radius-top {
  border-radius: var(--tan-radius, var(--radius-md)) var(--tan-radius, var(--radius-md)) 0px 0px !important;
}

html .radius-bottom {
  border-radius: 0px 0px var(--tan-radius, var(--radius-md)) var(--tan-radius, var(--radius-md)) !important;
}

html .radius-right {
  border-radius: 0px var(--tan-radius, var(--radius-xl)) var(--tan-radius, var(--radius-xl)) 0px !important;
}

html:is(html)[dir=ltr] .radius-right {
  border-radius: var(--tan-radius, var(--radius-xl)) 0px 0px var(--tan-radius, var(--radius-xl)) !important;
}

html .radius-left {
  border-radius: var(--tan-radius, var(--radius-xl)) 0px 0px var(--tan-radius, var(--radius-xl)) !important;
}

html:is(html)[dir=ltr] .radius-left {
  border-radius: 0px var(--tan-radius, var(--radius-xl)) var(--tan-radius, var(--radius-xl)) 0px !important;
}

html:is(html)[dir=ltr] .no-radius-right {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

html:is(html):not([dir=ltr]) .no-radius-right {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

html:is(html)[dir=ltr] .no-radius-left {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

html:is(html):not([dir=ltr]) .no-radius-left {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

html .no-radius {
  border-radius: 0px !important;
}

html .input-btn-icon {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html .captcha-img {
  border-radius: var(--radius-xl) 0px 0px var(--radius-xl);
  border-right: none !important;
}

html:is(html)[dir=ltr] .captcha-img {
  border-radius: 0px var(--radius-xl) var(--radius-xl) 0px;
}

html .h-loading {
  border-radius: 100px;
}

html .label-loading {
  border-radius: 100px;
}

html .first-btn-loading {
  border-radius: var(--radius-sm);
}

html .light-btn-loading {
  border-radius: var(--radius-sm);
}

/* داخل table-wrapper خودِ قاب (overflow: auto) جدول را با لبهٔ داخلیِ گردش می‌بُرد؛ پس سلول‌های گوشه نباید گرد شوند،
   وگرنه با هر اختلاف شعاع، اسکرول‌بار افقی یا زوم، بین سلول و قاب فاصلهٔ سفید می‌ماند */
html .table-wrapper:not(.no-radius) {
  --tan-table-radius: 0px;
  border-radius: var(--radius-xl);
}

html table.table:not(.no-radius) {
  border-radius: var(--tan-table-radius, var(--radius-md));
}

html table.table-no-thead:not(.no-radius) tbody tr:nth-of-type(1) {
  border-top-left-radius: var(--tan-table-radius, var(--radius-md));
  border-top-right-radius: var(--tan-table-radius, var(--radius-md));
}

html table.table-no-thead:not(.no-radius) tbody tr:nth-of-type(1) td:nth-child(1) {
  border-top-right-radius: var(--tan-table-radius, var(--radius-md));
}

html:is(html)[dir=ltr] table.table-no-thead:not(.no-radius) tbody tr:nth-of-type(1) td:nth-child(1) {
  border-top-left-radius: var(--tan-table-radius, var(--radius-md));
  border-top-right-radius: 0px;
}

html table.table-no-thead:not(.no-radius) tbody tr:nth-of-type(1) td:nth-last-child(1) {
  border-top-left-radius: var(--tan-table-radius, var(--radius-md));
}

html:is(html)[dir=ltr] table.table-no-thead:not(.no-radius) tbody tr:nth-of-type(1) td:nth-last-child(1) {
  border-top-left-radius: 0px;
  border-top-right-radius: var(--tan-table-radius, var(--radius-md));
}

html table.table:not(.no-radius) thead tr:nth-of-type(1) > th:nth-of-type(1) {
  border-top-right-radius: var(--tan-table-radius, var(--radius-md)) !important;
}

html:is(html)[dir=ltr] table.table:not(.no-radius) thead tr:nth-of-type(1) > th:nth-of-type(1) {
  border-top-left-radius: var(--tan-table-radius, var(--radius-md)) !important;
  border-top-right-radius: 0px !important;
}

html table.table:not(.no-radius) thead tr:nth-of-type(1) > th:nth-last-of-type(1) {
  border-top-left-radius: var(--tan-table-radius, var(--radius-md)) !important;
}

html:is(html)[dir=ltr] table.table:not(.no-radius) thead tr:nth-of-type(1) > th:nth-last-of-type(1) {
  border-top-left-radius: 0px !important;
  border-top-right-radius: var(--tan-table-radius, var(--radius-md)) !important;
}

html table.table:not(.no-radius) tbody tr:nth-last-of-type(1) {
  border-bottom-left-radius: var(--tan-table-radius, var(--radius-md));
  border-bottom-right-radius: var(--tan-table-radius, var(--radius-md));
}

@media only screen and (min-width: 992px) {
  html table.table:not(.no-radius) tbody tr:nth-last-of-type(1) td:nth-child(1) {
    border-bottom-right-radius: var(--tan-table-radius, var(--radius-md));
  }
  html:is(html)[dir=ltr] table.table:not(.no-radius) tbody tr:nth-last-of-type(1) td:nth-child(1) {
    border-bottom-left-radius: var(--tan-table-radius, var(--radius-md)) !important;
    border-bottom-right-radius: 0px !important;
  }
  html table.table:not(.no-radius) tbody tr:nth-last-of-type(1) td:nth-last-child(1) {
    border-bottom-left-radius: var(--tan-table-radius, var(--radius-md));
  }
  html:is(html)[dir=ltr] table.table:not(.no-radius) tbody tr:nth-last-of-type(1) td:nth-last-child(1) {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: var(--tan-table-radius, var(--radius-md)) !important;
  }
}
html table.table-ticket:not(.no-radius) {
  border-radius: var(--tan-table-radius, var(--radius-lg));
}

html table.table-ticket tbody tr td.cartable-color::before,
html table.table-ticket tbody tr td.cartable-color::after {
  border-radius: inherit;
}

html table.table-ticket tbody tr td.cartable-delay-danger::before,
html table.table-ticket tbody tr td.cartable-delay-danger::after {
  border-radius: inherit;
}

html table.table-ticket tbody tr td.cartable-delay-warning::before,
html table.table-ticket tbody tr td.cartable-delay-warning::after {
  border-radius: inherit;
}

html table.table-ticket:not(.no-radius) thead tr:nth-of-type(1) > th:nth-of-type(1) {
  border-top-right-radius: var(--tan-table-radius, var(--radius-md)) !important;
}

html:is(html)[dir=ltr] table.table-ticket:not(.no-radius) thead tr:nth-of-type(1) > th:nth-of-type(1) {
  border-top-left-radius: var(--tan-table-radius, var(--radius-md)) !important;
  border-top-right-radius: 0px !important;
}

html table.table-ticket:not(.no-radius) thead tr:nth-of-type(1) > th:nth-last-of-type(1) {
  border-top-left-radius: var(--tan-table-radius, var(--radius-md)) !important;
}

html:is(html)[dir=ltr] table.table-ticket:not(.no-radius) thead tr:nth-of-type(1) > th:nth-last-of-type(1) {
  border-top-left-radius: 0px !important;
  border-top-right-radius: var(--tan-table-radius, var(--radius-md)) !important;
}

html table.table-ticket:not(.no-radius) tbody tr:nth-last-of-type(1) {
  border-bottom-left-radius: var(--tan-table-radius, var(--radius-md));
  border-bottom-right-radius: var(--tan-table-radius, var(--radius-md));
}

@media only screen and (min-width: 992px) {
  html table.table-ticket:not(.no-radius) tbody tr:nth-last-of-type(1) td:nth-child(1) {
    border-bottom-right-radius: var(--tan-table-radius, var(--radius-md));
  }
  html:is(html)[dir=ltr] table.table-ticket:not(.no-radius) tbody tr:nth-last-of-type(1) td:nth-child(1) {
    border-bottom-left-radius: var(--tan-table-radius, var(--radius-md)) !important;
    border-bottom-right-radius: 0px !important;
  }
  html table.table-ticket:not(.no-radius) tbody tr:nth-last-of-type(1) td:nth-last-child(1) {
    border-bottom-left-radius: var(--tan-table-radius, var(--radius-md));
  }
  html:is(html)[dir=ltr] table.table-ticket:not(.no-radius) tbody tr:nth-last-of-type(1) td:nth-last-child(1) {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: var(--tan-table-radius, var(--radius-md)) !important;
  }
}
html .pagination ul li a,
html .pagination ul li button {
  border-radius: var(--radius-sm);
}

html .password-strength-message {
  border-radius: var(--radius-sm);
}

html .btn-fetch {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html .btn-fetch::before {
  border-radius: inherit;
}

@media only screen and (max-width: 992px) {
  html table.table:not(.matrix-table):not(.table-joined) {
    border-radius: 0px;
  }
  html table.table:not(.matrix-table):not(.table-joined) tbody tr {
    border-radius: var(--radius-md);
  }
  html table.table-joined {
    border-radius: var(--radius-md) !important;
  }
  html table.table-joined tbody tr {
    border-radius: 0px !important;
  }
  html table.table-joined tbody tr:nth-of-type(1) {
    border-top-left-radius: var(--radius-md) !important;
    border-top-right-radius: var(--radius-md) !important;
  }
  html table.table-joined tbody tr:nth-last-of-type(1) {
    border-bottom-left-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
  }
  html table.table.matrix-table:not(.no-radius) tbody tr:nth-last-of-type(1) td:nth-child(1) {
    border-bottom-right-radius: var(--tan-table-radius, var(--radius-md));
  }
  html table.table.matrix-table:not(.no-radius) tbody tr:nth-last-of-type(1) td:nth-last-child(1) {
    border-bottom-left-radius: var(--tan-table-radius, var(--radius-md));
  }
}
html .switcher-box .theme-btn {
  border-radius: var(--radius-full);
}

html .switcher-box .themes {
  border-radius: var(--radius-md);
}

html .switcher-box .themes button {
  border-radius: var(--radius-sm);
}

html .material-switch > label::before {
  border-radius: var(--radius-sm);
}

html .material-switch > label::after {
  border-radius: var(--radius-xl);
}

html .form-radio input[type=radio]:focus > svg,
html .form-radio input[type=radio]:focus-visible + label > svg {
  border-radius: var(--radius-xs);
}

html .form-image-radio > label {
  border-radius: var(--radius-md);
}

html .radio-text + label {
  border-radius: var(--radius-xl);
}

html .plate-box {
  border-radius: var(--radius-md);
}

html .plate-box-img {
  border-radius: var(--radius-sm);
}

html .plate-alpha {
  border-radius: var(--radius-md);
}

html .scale li label {
  border-radius: 0px;
}

html .scale li:first-child label {
  border-radius: var(--radius-sm) 0px 0px var(--radius-sm);
}

html .scale li:last-child label {
  border-radius: 0px var(--radius-sm) var(--radius-sm) 0px;
}

html .form-checkbox input[type=checkbox]:focus > svg,
html .form-checkbox input[type=checkbox]:focus-visible + label > svg {
  border-radius: var(--radius-xs);
}

html .clock-timepicker-popup {
  border-radius: var(--radius-sm);
}

html .video-wrapper .video-element {
  border-radius: var(--radius-sm);
}

html .video-wrapper .video-footer .btn-picture {
  border-radius: 100%;
}

html .video-wrapper .video-footer .btn-picture::before {
  border-radius: 100%;
}

html .video-wrapper .captured-wrapper img,
html .video-wrapper .captured-wrapper svg {
  border-radius: var(--radius-sm);
}

html .li_bg_animation {
  border-radius: var(--radius-sm);
}

html .k-datepicker {
  border-radius: var(--radius-md) !important;
}

html .k-calendar-container {
  border-radius: var(--radius-md);
}

html .k-calendar-container .k-top-header {
  border-radius: var(--radius-md) var(--radius-md) 0px 0px;
}

html .k-calendar-container .k-calendar .k-header .k-nav-fast {
  border-radius: var(--radius-xs) !important;
}

html .k-calendar-container .k-calendar .k-content:not(.k-month) .k-link {
  border-radius: var(--radius-sm) !important;
}

html .k-calendar-container .k-calendar .k-content .k-state-selected .k-link {
  border-radius: 100%;
}

html .k-calendar-container .k-calendar .k-content .k-link {
  border-radius: 100% !important;
}

html .k-calendar-container .k-calendar .k-content .k-link::before {
  border-radius: 100%;
}

html .k-animation-container .k-datepicker {
  border-radius: var(--radius-md) !important;
}

html .ui-datepicker {
  border-radius: var(--radius-md);
}

html .ui-datepicker-header {
  border-radius: var(--radius-md) var(--radius-md) 0px 0px;
}

html .ui-datepicker table.ui-datepicker-calendar tbody tr td .ui-state-active {
  border-radius: 50% !important;
}

html .ui-datepicker table.ui-datepicker-calendar tbody tr td.ui-state-disabled .ui-state-default {
  border-radius: var(--radius-full);
}

html .ui-datepicker table.ui-datepicker-calendar tbody tr td a::before {
  border-radius: 100%;
}

html .ui-datepicker .ui-datepicker-year span {
  border-radius: var(--radius-xs);
}

html .ui-datepicker .ui-datepicker-month span {
  border-radius: var(--radius-xs);
}

html .ui-datepicker .datepicker-select-wrapper .datepicker-select-scrollbar div {
  border-radius: var(--radius-xs);
}

html .dropdown .dropdown-options {
  border-radius: var(--radius-md);
}

html .inquiry-button {
  border-radius: var(--radius-sm);
}

html .btn-generate {
  border-radius: 0px;
}

html .btn-generate.copy {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius) 0 0 var(--tan-radius);
}

html:is(html)[dir=ltr] .btn-generate.copy {
  border-radius: 0 var(--tan-radius, var(--radius-xl)) var(--tan-radius, var(--radius-xl)) 0;
}

html .avatar_item_input:checked + label {
  border-radius: var(--radius-md) !important;
}

html .tagify__dropdown {
  border-radius: var(--radius-md);
}

html .tagify__dropdown.extra-properties .tagify__dropdown__item > img {
  border-radius: var(--radius-xs);
}

html .tagify.form-control tag img {
  border-radius: var(--radius-xs);
}

html .tagify__dropdown .tagify__dropdown__item > img {
  border-radius: var(--radius-xs);
}

html .loader {
  border-radius: var(--radius-circle);
}

html .inner {
  border-radius: var(--radius-circle);
}

html .loader-listfile span {
  border-radius: var(--radius-circle);
}

html .file-drop-area,
html .single-file-preview {
  border-radius: var(--tan-radius, var(--radius-xl));
}

html .file-drop-area img,
html .file-drop-area svg,
html .single-file-preview img,
html .single-file-preview svg {
  border-radius: var(--radius-sm);
}

html .item-delete {
  border-radius: var(--radius-sm);
}

html .snackbar {
  border-radius: var(--radius-md);
}

html nav.bottom-navbar ul li.center a::before {
  border-radius: var(--radius-full);
}

html nav.bottom-navbar ul li.center a img,
html nav.bottom-navbar ul li.center a svg {
  border-radius: var(--radius-full);
}

html nav.bottom-navbar ul li a .counter {
  border-radius: 999px;
}

html .search-result {
  border-radius: var(--radius-md);
}

html .search-result ul li a {
  border-radius: var(--radius-md);
}

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

html .loading_title {
  border-radius: var(--radius-full);
}

html .loading_img {
  border-radius: var(--radius-xs);
}

html .loading_desc {
  border-radius: var(--radius-full);
}

html .switcher-theme > label::before {
  border-radius: var(--radius-xl);
}

html .switcher-theme > label::after {
  border-radius: var(--radius-sm);
}

html .comments img,
html .comments svg {
  border-radius: var(--radius-sm);
}

html .tag-item-box {
  border-radius: var(--radius-sm);
}

html .tag-item-box button {
  border-radius: var(--radius-full);
}

html .title-bar-cover img,
html .title-bar-cover svg {
  border-radius: var(--radius-full);
}

html .noUi-horizontal .noUi-handle {
  border-radius: 100%;
}

@media only screen and (max-width: 992px) {
  html .drop-tab {
    border-radius: var(--radius-sm);
  }
  html .drop-tab ul li {
    border-radius: 0px !important;
  }
  html .drop-tab ul li:nth-of-type(1) {
    border-radius: var(--radius-sm) var(--radius-sm) 0px 0px !important;
  }
  html .drop-tab ul li:nth-last-of-type(1) {
    border-radius: 0px 0px var(--radius-sm) var(--radius-sm) !important;
  }
}
html .dots-loader {
  border-radius: var(--radius-circle);
}

html .wrapper .editor-panel {
  border-radius: var(--radius-sm);
}

html .editor-panel button {
  border-radius: var(--radius-xs);
}

html .wrapper .preview-img {
  border-radius: var(--radius-sm);
}

html .controls button {
  border-radius: var(--radius-sm);
}

html .content-box {
  border-radius: var(--radius-md);
}

html aside ul.side-nav li {
  border-radius: var(--radius-md);
}

html aside ul.side-nav li a {
  border-radius: var(--radius-md);
}

html aside ul.side-nav li a > span:not(:empty) {
  border-radius: 12px;
}

html aside ul.side-nav li a.node-item img,
html aside ul.side-nav li a.node-item svg {
  border-radius: var(--radius-md);
}

html aside ul.tag-list li a {
  border-radius: var(--radius-sm);
}

html .payment_select_items ul li a {
  border-radius: var(--radius-sm);
}

html .vis-timeline {
  border-radius: var(--radius-sm);
}

html .timeline-wrapper {
  border-radius: var(--radius-sm);
}

html .vis-context-menu {
  border-radius: var(--radius-sm);
}

html .start-range-handler-content::before {
  border-radius: var(--radius-xs);
}

html .end-range-handler-content::before {
  border-radius: var(--radius-xs);
}

html .grid-layer-item {
  border-radius: var(--radius-sm);
}

html .grid-layer-img img,
html .grid-layer-img svg {
  border-radius: var(--radius-sm);
}

html:is(html)[dir=ltr] .plate-box-img {
  border-radius: var(--radius-sm);
}

html .lang-select-input {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html .lang-select-dropdown {
  border-radius: var(--radius-sm);
}

html .lang-select-dropdown-item {
  border-radius: var(--radius-sm);
}

html .shp-img-checkbox-label {
  border-radius: var(--radius-md);
}

html .shp-img-checkbox-label * {
  border-radius: var(--radius-sm);
}

html .shp-figure {
  border-radius: var(--radius-md);
}

html .shp-figure-status {
  border-radius: var(--radius-sm);
}

html .shp-figure-status::before {
  border-radius: 50%;
}

html .shp-main-widget:not(.shp-main-widget-no-radius-md) {
  border-radius: var(--radius-md);
}

@media only screen and (min-width: 992px) {
  html .shp-main-widget-no-radius-md {
    border-radius: var(--radius-lg);
  }
}
html .shp-main-item-options {
  border-radius: var(--radius-sm);
}

html .shp-main-special-slider {
  border-radius: var(--radius-lg);
}

@media only screen and (max-width: 575px) {
  html .shp-main-special-slider {
    border-radius: 0px;
  }
}
html .shp-main-special-slider-item:nth-of-type(1) {
  border-radius: 0px var(--radius-sm) var(--radius-sm) 0px;
}

html:is(html)[dir=ltr] .shp-main-special-slider-item:nth-of-type(1) {
  border-radius: var(--radius-sm) 0px 0px var(--radius-sm);
}

html .shp-main-special-slider-item:nth-last-of-type(1) {
  border-radius: var(--radius-sm) 0px 0px var(--radius-sm);
}

html .shp-slider-btn {
  border-radius: 50%;
}

html .shp-slider-pagination .swiper-pagination-bullet {
  border-radius: 4px;
}

html .shp-slider-product-list-gallery-video::before {
  border-radius: var(--radius-md);
}

html .shp-slider-product-list-gallery .swiper-slide {
  border-radius: var(--radius-md);
}

html .shp-slider-product-list-gallery .swiper-slide img,
html .shp-slider-product-list-gallery .swiper-slide video,
html .shp-slider-product-list-gallery .swiper-slide svg {
  border-radius: var(--radius-md);
}

html .shp-slider-product-main-gallery .swiper-slide {
  border-radius: var(--radius-sm);
}

html .shp-slider-product-main-gallery .swiper-slide img,
html .shp-slider-product-main-gallery .swiper-slide video,
html .shp-slider-product-main-gallery .swiper-slide svg {
  border-radius: var(--radius-sm);
}

html .shp-product-list img,
html .shp-product-list video,
html .shp-product-list svg {
  border-radius: var(--radius-md);
}

html .shp-product-list-item {
  border-radius: var(--radius-md);
}

html .shp-product-list-item-video::before {
  border-radius: var(--radius-md);
}

@media only screen and (max-width: 767px) {
  html .shp-product-list-item:nth-of-type(4)::before {
    border-radius: var(--radius-md);
  }
}
@media only screen and (min-width: 767px) and (max-width: 992px) {
  html .shp-product-list-item:nth-of-type(5)::before {
    border-radius: var(--radius-md);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  html .shp-product-list-item:nth-of-type(4)::before {
    border-radius: var(--radius-md);
  }
}
@media only screen and (min-width: 1200px) {
  html .shp-product-list-item:nth-of-type(5)::before {
    border-radius: var(--radius-md);
  }
}
html .shp-product-list-thumb {
  border-radius: var(--radius-sm);
}

html .shp-product-list-thumb img,
html .shp-product-list-thumb video,
html .shp-product-list-thumb svg {
  border-radius: var(--radius-sm);
}

html .shp-tooltip-content {
  border-radius: var(--radius-sm);
}

html .shp-product-sidebar {
  border-radius: var(--radius-md);
}

html .shp-product-sidebar-seller-details-hover {
  border-radius: var(--radius-lg);
}

html .shp-product-properties-item {
  border-radius: var(--radius-md);
}

html .shp-product-counter {
  border-radius: var(--radius-sm);
}

html .shp-product-nav ul li::after,
html .shp-product-nav ul li button.nav-link::after {
  border-radius: var(--radius-sm) var(--radius-sm) 0px 0px;
}

html .shp-product-section-title::after {
  border-radius: var(--radius-xs);
}

html .shp-product-img-slider-thumb {
  border-radius: var(--radius-md);
}

html .shp-product-img-slider-play {
  border-radius: 50%;
}

html .shp-product-upload {
  border-radius: var(--radius-sm);
}

html .shp-product-upload-content {
  border-radius: var(--radius-sm);
}

html .shp-product-upload-plus {
  border-radius: 50%;
}

html .accordion-step .accordion-button::before {
  border-radius: var(--radius-md);
}

html .bmap-sidebar {
  border-radius: var(--radius-md) 0px 0px var(--radius-md);
}

html .bmap-hamburger-btn {
  border-radius: var(--radius-sm) 0px 0px var(--radius-sm);
}

html:is(html)[dir=ltr] .bmap-hamburger-btn {
  border-radius: 0px var(--radius-sm) var(--radius-sm) 0px;
}

html .bmap-btn {
  border-radius: var(--radius-full) !important;
}

html .bmap-btn .bmap-btn-icon {
  border-radius: var(--radius-circle);
}

html .bmap-ordered-list {
  border-radius: var(--radius-sm);
}

html .bmap-ordered-list.active-key {
  border-radius: var(--radius-sm);
}

html .bmap-ordered-list-key {
  border-radius: var(--radius-sm);
}

html .bmap-card {
  border-radius: var(--radius-md);
}

html .bmap-guide-popup {
  border-radius: var(--radius-md);
}

html .bmap-guide-popup-item {
  border-radius: var(--radius-sm);
}

html .bmap-route-shape-straight {
  border-radius: var(--radius-md);
}

html .bmap-route-shape-icon {
  border-radius: var(--radius-circle);
}

html .bmap-route-station-down .bmap-route-station-item {
  border-radius: var(--radius-md) 0px 0px var(--radius-md);
}

html .bmap-route-station-item {
  border-radius: 0px 0px var(--radius-md) var(--radius-md);
}

html .bmap-route-station-item-key {
  border-radius: var(--radius-circle);
}

html .bmap-map-marker {
  border-radius: var(--radius-circle);
}

html .bmap-map-marker::before {
  border-radius: var(--radius-sm);
}

html .bmap-timeline-timer {
  border-radius: var(--radius-md);
}

html .universal-loading-indicator .loading-bar {
  border-radius: var(--radius-xs);
}

html .single-footer-widget ul.stp-social-links li a {
  border-radius: 50%;
}

html .my-indicator-glow {
  border-radius: 50%;
}

html .my-indicator-instruction {
  border-radius: var(--radius-lg);
}

html .drop-tab-global {
  border-radius: var(--radius-sm);
}

html .rmsr-services-tabs-nav {
  border-radius: 80px;
}

html .rmsr-services-tabs-nav::after {
  border-radius: 50%;
}

html .rmsr-services-tabs-indicator {
  border-radius: 90px;
}

html .rmsr-services-tab-item {
  border-radius: 90px;
}

@media (max-width: 768px) {
  html .rmsr-services-tab-item {
    border-radius: 12px;
  }
}
html .rmsr-services-tab-item .rmsr-services-tab-icon {
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  html .rmsr-services-tab-item .rmsr-services-tab-icon {
    border-radius: var(--radius-md);
  }
}
html .rmsr-services-tab-content .swiper-button-prev,
html .rmsr-services-tab-content .swiper-button-next {
  border-radius: 50% !important;
}

html .rmsr-services-tabs .drop-tab-group .rmsr-services-tabs-nav.drop-tab {
  border-radius: var(--radius-lg);
}

html .rmsr-services-tabs .drop-tab-group .rmsr-services-tabs-nav.drop-tab .rmsr-services-tab-item {
  border-radius: var(--radius-md);
}

html .rmsr-vertical-nav {
  border-radius: 80px;
}

html .rmsr-vertical-nav::before {
  border-radius: 0px;
}

html .rmsr-vertical-nav::after {
  border-radius: 0px;
}

html .rmsr-vertical-nav-indicator {
  border-radius: 90px;
}

html .rmsr-vertical-nav-item {
  border-radius: 90px;
}

html .rmsr-vertical-nav-item .rmsr-services-tab-icon {
  border-radius: var(--radius-sm);
}

html .shp-digital-menu .shp-category-header .shp-category-bar {
  border-radius: var(--radius-xs);
}

html .shp-food-card {
  border-radius: var(--radius-md);
}

html .shp-food-card .shp-card-image .shp-card-badge {
  border-radius: 30px;
}

html .shp-food-card .shp-card-image .shp-unavailable-badge {
  border-radius: var(--radius-sm);
}

html .shp-food-card .shp-price-section .shp-discount-badge {
  border-radius: 30px;
}

html .shp-food-card .shp-subitem-row {
  border-radius: var(--radius-sm);
}

html .shp-food-card .shp-subitem-row .shp-subitem-img {
  border-radius: var(--radius-sm);
}

html .shp-food-card .shp-subitem-row .shp-btn-add-sm {
  border-radius: 50%;
}

html .shp-food-card .shp-subitem-row .shp-quantity-control-sm {
  border-radius: 50px;
}

html .shp-food-card .shp-subitem-row .shp-quantity-control-sm button {
  border-radius: 50%;
}

html .shp-food-card .shp-subitems-list-inline .shp-subitem-option {
  border-radius: 30px;
}

html .shp-food-card .shp-btn-add {
  border-radius: 40px;
}

html .shp-food-card .shp-quantity-control {
  border-radius: 50px;
}

html .shp-food-card .shp-quantity-control button {
  border-radius: 50%;
}

html .shp-food-card-vertical .shp-card-image {
  border-radius: var(--radius-md) var(--radius-md) 0px 0px;
}

html .shp-food-card-horizontal .shp-card-image {
  border-radius: var(--radius-md) 0px 0px var(--radius-md);
}

html:is(html)[dir=ltr] .shp-food-card-horizontal .shp-card-image {
  border-radius: 0px var(--radius-md) var(--radius-md) 0px;
}

@media only screen and (max-width: 575px) {
  html .shp-food-card-horizontal .shp-card-image {
    border-radius: var(--radius-md) var(--radius-md) 0px 0px;
  }
}
html .shp-intro-page .shp-intro-container {
  border-radius: var(--radius-lg);
}

html .shp-intro-page .shp-intro-brand .shp-intro-logo-wrapper {
  border-radius: 50%;
}

html .shp-intro-page .shp-intro-action {
  border-radius: var(--radius-md);
}

html .shp-intro-page .shp-intro-action .shp-intro-btn {
  border-radius: var(--radius-md);
}

@media only screen and (max-width: 767px) {
  html .shp-intro-page .shp-intro-container {
    border-radius: var(--radius-lg);
  }
  html .shp-intro-page .shp-intro-action .shp-intro-btn {
    border-radius: var(--radius-md);
  }
}
@media only screen and (max-width: 575px) {
  html .shp-intro-page .shp-intro-container {
    border-radius: var(--radius-lg);
  }
}
html .shp-category-circular .shp-category-circular-image {
  border-radius: 50%;
}

html .shp-category-circular .shp-category-circular-badge {
  border-radius: 30px;
}

html .shp-circular-categories .shp-circular-card .shp-circular-image-wrapper {
  border-radius: 50%;
}

html .shp-circular-categories .shp-circular-card .shp-circular-badge {
  border-radius: 30px;
}

html .tan-swiper-initialized {
  border-radius: var(--radius-md);
}

html .tan-main-special-slider {
  border-radius: var(--radius-lg) !important;
}

html .tan-delivery-zone-bar {
  border-radius: var(--radius-xl);
}

html .tan-ranked-list-num {
  border-radius: var(--radius-full);
}

html .tan-poster-card {
  border-radius: var(--radius-md);
}

html .tan-poster-card-location p {
  border-radius: var(--radius-sm);
}

html .tan-poster-card-date {
  border-radius: var(--radius-xs);
}

html .tan-icon-shortcut-circle {
  border-radius: 50%;
}

html .tan-scrollable-tabs {
  border-radius: var(--radius-xxl);
}

html .tan-scrollable-tabs-indicator {
  border-radius: 100px;
}

html .tan-scrollable-tab-item-button {
  border-radius: 100px;
}

html .tan-test-note {
  border-radius: var(--radius-md);
}

html .tan-status-badge {
  border-radius: 999px;
}

html .tan-test-card {
  border-radius: var(--radius-md);
}

html .tan-test-card .tan-num {
  border-radius: 50%;
}

html .tan-tel-icon-btn {
  border-radius: 50%;
}

html .tan-vertical-nav {
  border-radius: var(--radius-lg) !important;
}

html #verticalNav .tan-nav-icon {
  border-radius: 0px !important;
}

html #verticalNav .tan-nav-indicator {
  border-radius: var(--radius-lg) !important;
}

html .tan-bottom-nav {
  border-radius: var(--radius-lg);
}

html .tan-bottom-nav-indicator {
  border-radius: 90px;
}

html .tan-bottom-nav-item {
  border-radius: 90px;
}

html .tan-bottom-nav-badge {
  border-radius: 999px;
}

html .ami-bgColor {
  border-radius: var(--radius-sm);
}

html .map-filter-wrapper {
  border-radius: var(--radius-md);
}

html .map-filter-active-badge,
html .map-filter-acc-badge {
  border-radius: 999px;
}

html .map-filter-action {
  border-radius: var(--radius-sm);
}

html .map-filter-saved-item {
  border-radius: var(--radius-sm);
}

html .map-filter-saved-load,
html .map-filter-saved-delete {
  border-radius: var(--radius-sm);
}

html .map-filter-chip {
  border-radius: 999px;
}

html .map-filter-chip-remove {
  border-radius: 50%;
}

html .map-filter-accordion .map-filter-acc-button {
  border-radius: 0px;
}

html .map-filter-search {
  border-radius: var(--radius-sm);
}

html .map-filter-segment {
  border-radius: var(--radius-sm);
}

html .map-filter-option {
  border-radius: var(--radius-sm);
}

html .map-filter-native:focus-visible ~ .map-filter-indicator {
  border-radius: var(--radius-xs);
}

html .map-filter-pill-body {
  border-radius: 999px;
}

html .map-filter-color-box {
  border-radius: var(--radius-md);
}

html .map-filter-color-fill {
  border-radius: var(--radius-sm);
}

html .map-filter-range-field {
  border-radius: var(--radius-sm);
}

html .map-filter-range-slider.noUi-target {
  border-radius: 999px;
}

html .map-filter-range-slider .noUi-handle {
  border-radius: 50%;
}

html .map-filter-quick-date {
  border-radius: 999px;
}

html .map-filter-cluster {
  border-radius: 50% !important;
}

html .map-filter-cluster::before {
  border-radius: 50%;
}

html .map-filter-cluster::after {
  border-radius: 50%;
}

@media (max-width: 768px) {
  html .map-filter-wrapper {
    border-radius: 0px;
  }
}
html .map-filter-mode-control {
  border-radius: var(--radius-sm);
}

html .map-mode-body {
  border-radius: var(--radius-md);
}

html .map-mode-tag {
  border-radius: 999px;
}

html:where(:has(link[href*="shop.css"])) .btn-first {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html:where(:has(link[href*="shop.css"])) .btn-light-dark {
  border-radius: var(--tan-radius, var(--radius-xl));
}

html:where(:has(link[href*="shop.css"])) label.shp-radio-color {
  border-radius: 50%;
}

html:where(:has(link[href*="shop.css"])) label.shp-radio-option {
  border-radius: 36px;
}

html:where(:has(link[href*="shop.css"])) .btn-light {
  --tan-radius: var(--radius-xl);
  border-radius: var(--tan-radius);
}

html:where(:has(link[href*="shop.css"])) .dropdown-menu {
  border-radius: var(--radius-sm) !important;
}

html:where(:has(link[href*="shop.css"])) .shp-header-search-box {
  border-radius: var(--radius-md);
}

html:where(:has(link[href*="shop.css"])) .shp-header-search-suggest-item {
  border-radius: calc(var(--radius-xl) * 0.667);
}

html:where(:has(link[href*="shop.css"])) .shp-main-nav .shp-mega-icon {
  border-radius: var(--radius-xs);
}

html:where(:has(link[href*="shop.css"])) .shp-main-nav > ul > li.shp-list-item-mega .shp-list-mega-wrapper {
  border-radius: 0px 0px var(--radius-sm) var(--radius-sm);
}

html:where(:has(link[href*="shop.css"])) .shp-main-nav > ul > li.shp-list-item-mega .shp-list-mega-wrapper ul.shp-list-mega {
  border-radius: 0px 0px var(--radius-sm);
}

html:where(:has(link[href*="shop.css"])) .shp-main-nav > ul > li.shp-list-item-mega .shp-list-mega-wrapper ul.shp-list-mega > li > a .shp-mega-icon {
  border-radius: var(--radius-sm);
}

html:where(:has(link[href*="shop.css"])) .shp-main-nav > ul > li.shp-list-item-mega .shp-list-mega-show > ul li > a::after {
  border-radius: var(--radius-md);
}

html:where(:has(link[href*="shop.css"])) .shp-main-nav-line {
  border-radius: var(--radius-xs);
}

@media only screen and (max-width: 1200px) {
  html:where(:has(link[href*="shop.css"])) .shp-main-nav > ul > li.shp-list-item-mega .shp-list-mega-wrapper {
    border-radius: 0px;
  }
  html:where(:has(link[href*="shop.css"])) .shp-main-nav > ul > li.shp-list-item-mega .shp-list-mega-wrapper ul.shp-list-mega {
    border-radius: 0px;
  }
  html:where(:has(link[href*="shop.css"])) .shp-main-nav > ul > li.shp-list-item-mega .shp-list-mega-wrapper ul.shp-list-mega li a .shp-mega-icon {
    border-radius: var(--radius-sm);
  }
}
html:where(:has(link[href*="shop.css"])) .shp-main-article-box {
  border-radius: var(--radius-md);
}

html:where(:has(link[href*="shop.css"])) .shp-main-article-box figure {
  border-radius: var(--radius-md) var(--radius-md) 0px 0px;
}

html:where(:has(link[href*="shop.css"])) .shp-main-article-box-mask::before,
html:where(:has(link[href*="shop.css"])) .shp-main-article-box-mask::after,
html:where(:has(link[href*="shop.css"])) .shp-main-article-box-mask span {
  border-radius: 50%;
}

html:where(:has(link[href*="shop.css"])) .shp-dropdown {
  border-radius: var(--radius-lg);
}

html:where(:has(link[href*="shop.css"])) .shp-footer {
  border-radius: var(--radius-lg) var(--radius-lg) 0px 0px;
}

html:where(:has(link[href*="shop.css"])) .shp-footer-bottom {
  border-radius: var(--radius-lg) var(--radius-lg) 0px 0px;
}

html:where(:has(link[href*="shop.css"])) .shp-footer-sign {
  border-radius: var(--radius-md);
}

html:where(:has(link[href*="shop.css"])) .shp-suggest-box::before {
  border-radius: var(--radius-lg);
}

html:where(:has(link[href*="shop.css"])) .shp-suggest-box::after {
  border-radius: var(--radius-lg);
}

html:where(:has(link[href*="shop.css"])) .shp-suggest-box-timer .timer-box .timer-amount {
  border-radius: var(--radius-md);
}

html:where(:has(link[href*="shop.css"])) .shp-suggest-box-details {
  border-radius: var(--radius-lg);
}

html:where(:has(link[href*="shop.css"])) .shp-suggest-box-details-main-item {
  border-radius: var(--radius-lg);
}

html:where(:has(link[href*="shop.css"])) .shp-suggest-box-list-item {
  border-radius: var(--radius-md);
}

html:where(:has(link[href*="shop.css"])) .shp-suggest-box-list-item-sale {
  border-radius: var(--radius-sm);
}

html:where(:has(link[href*="shop.css"])) .shp-suggest-box-list-item-image {
  border-radius: var(--radius-md);
}

html:where(:has(link[href*="shop.css"])) .shp-suggest-box-list-item-image img,
html:where(:has(link[href*="shop.css"])) .shp-suggest-box-list-item-image svg {
  border-radius: var(--radius-md);
}

html:where(:has(link[href*="shop.css"])) .shp-category-suggest {
  border-radius: var(--radius-lg);
}

html:where(:has(link[href*="shop.css"])) .shp-category-suggest-model:not(:nth-last-of-type(1)) {
  border-radius: 0px;
}

@media only screen and (min-width: 575px) {
  html:where(:has(link[href*="shop.css"])) .shp-category-suggest-model:nth-child(2n+1) {
    border-radius: 0px;
  }
}
@media only screen and (min-width: 992px) {
  html:where(:has(link[href*="shop.css"])) .shp-category-suggest-model:not(:nth-last-of-type(1)) {
    border-radius: 0px;
  }
}
html:where(:has(link[href*="shop.css"])) .shp-category-suggestion {
  border-radius: var(--radius-lg);
}

html:where(:has(link[href*="shop.css"])) .shp-category-suggestion-item figure {
  border-radius: 50%;
}

html:where(:has(link[href*="shop.css"])) .shp-category-suggestion-item figure img,
html:where(:has(link[href*="shop.css"])) .shp-category-suggestion-item figure svg {
  border-radius: var(--radius-md);
}

html:where(:has(link[href*="shop.css"])) .shp-list-bordered {
  border-radius: var(--radius-md);
}

html:where(:has(link[href*="shop.css"])) .shp-loader-content {
  border-radius: var(--radius-md);
}

html:where(:has(link[href*="shop.css"])) .shp-loader-dots {
  border-radius: 50%;
}

html:where(:has(link[href*="shop.css"])) .shp-social-btn {
  border-radius: var(--radius-sm);
}

html:where(:has(link[href*="shop.css"])) .shp-social-btn::after {
  border-radius: var(--radius-sm);
}

html:where(:has(link[href*="shop.css"])) .shp-upload-box {
  border-radius: var(--radius-md);
}

html:where(:has(link[href*="shop.css"])) .shp-category-nested-nav ul li:hover,
html:where(:has(link[href*="shop.css"])) .shp-category-nested-nav ul li:active,
html:where(:has(link[href*="shop.css"])) .shp-category-nested-nav ul li.active {
  border-radius: var(--radius-sm);
}

html:where(:has(link[href*="shop.css"])) .shp-tr:hover .shp-td:nth-child(1)::after {
  border-radius: var(--radius-sm);
}

@media only screen and (max-width: 1200px) {
  html:where(:has(link[href*="shop.css"])) .shp-th:nth-last-child(1),
  html:where(:has(link[href*="shop.css"])) .shp-td:nth-last-child(1) {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  html:where(:has(link[href*="shop.css"])) .shp-th:nth-child(1),
  html:where(:has(link[href*="shop.css"])) .shp-td:nth-child(1) {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
  }
}
@media only screen and (min-width: 1200px) {
  html:where(:has(link[href*="shop.css"])) .shp-th:nth-last-child(1),
  html:where(:has(link[href*="shop.css"])) .shp-td:nth-last-child(1) {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }
  html:where(:has(link[href*="shop.css"])):is(html)[dir=ltr] .shp-th:nth-last-child(1),
  html:where(:has(link[href*="shop.css"])):is(html)[dir=ltr] .shp-td:nth-last-child(1) {
    border-radius: 0px var(--radius-md) var(--radius-md) 0px;
  }
  html:where(:has(link[href*="shop.css"])) .shp-th:nth-child(1),
  html:where(:has(link[href*="shop.css"])) .shp-td:nth-child(1) {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  html:where(:has(link[href*="shop.css"])):is(html)[dir=ltr] .shp-th:nth-child(1),
  html:where(:has(link[href*="shop.css"])):is(html)[dir=ltr] .shp-td:nth-child(1) {
    border-radius: var(--radius-md) 0px 0px var(--radius-md);
  }
}
@media only screen and (max-width: 1200px) {
  html:where(:has(link[href*="shop.css"])) .shp-table-joined {
    border-radius: var(--radius-md) !important;
  }
  html:where(:has(link[href*="shop.css"])) .shp-table-joined tbody tr {
    border-radius: 0px !important;
  }
  html:where(:has(link[href*="shop.css"])) .shp-table-joined tbody tr:nth-of-type(1) {
    border-top-left-radius: var(--radius-md) !important;
    border-top-right-radius: var(--radius-md) !important;
  }
  html:where(:has(link[href*="shop.css"])) .shp-table-joined tbody tr:nth-last-of-type(1) {
    border-bottom-left-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
  }
}
html:where(:has(link[href*="shop.css"])) .shp-hint-box {
  border-radius: var(--radius-lg);
}

html:where(:has(link[href*="shop.css"])) .shp-location-card {
  border-radius: var(--radius-sm);
}

html:where(:has(link[href*="shop.css"])) .shp-weekday-value::before {
  border-radius: var(--radius-xs);
}

html:where(:has(link[href*="shop.css"])) .product_gallary_options .prd_btn_option .titlebtn {
  border-radius: var(--radius-sm);
}

html:where(:has(link[href*="shop.css"])) .shp-body-content .section {
  border-radius: var(--radius-sm);
}

html:where(:has(link[href*="shop.css"])) .shp-body-content .shp-category-suggest {
  border-radius: var(--radius-sm);
}

html:where(:has(link[href*="shop.css"])) .shp-body-content .shp-main-slider,
html:where(:has(link[href*="shop.css"])) .shp-body-content .shp-main-special-slider,
html:where(:has(link[href*="shop.css"])) .shp-body-content .ami-img-radius,
html:where(:has(link[href*="shop.css"])) .shp-body-content .shp-suggest-box {
  border-radius: var(--radius-sm) !important;
}

html aside.sidebar nav.side-navbar > ul > li {
  border-radius: var(--radius-md);
}

html aside.sidebar nav.side-navbar > ul > li > a {
  border-radius: var(--radius-md);
}

html aside.sidebar nav.side-navbar > ul > li > a > span {
  border-radius: var(--radius-xs);
}

html aside.sidebar nav.side-navbar > ul > li > a .counter {
  border-radius: 999px;
}

html aside.sidebar nav.side-navbar > ul > li > ul > li {
  border-radius: var(--radius-sm);
}

html header.my-header #notifToggleBtn span {
  border-radius: var(--radius-full);
}

html .head-box {
  border-radius: var(--radius-xl);
}

html .head-box nav.breadcrumb > ul > li ul {
  border-radius: var(--radius-sm);
}

html .head-box nav.breadcrumb > ul > li ul li:nth-of-type(1) {
  border-radius: var(--radius-sm) var(--radius-sm) 0px 0px !important;
}

html .head-box nav.breadcrumb > ul > li ul li:nth-last-of-type(1) {
  border-radius: 0px 0px var(--radius-sm) var(--radius-sm) !important;
}

html .module-box {
  border-radius: var(--radius-xl);
}

html .notifications {
  border-radius: var(--radius-lg);
}

html nav.notification-nav {
  border-radius: var(--radius-lg);
}

html nav.notification-nav ul li {
  border-radius: var(--radius-md);
}

html nav.notification-nav ul li a::before,
html nav.notification-nav ul li span::before {
  border-radius: var(--radius-full);
}

html .li_bg_animation a img,
html .li_bg_animation a svg {
  border-radius: var(--radius-sm);
}

html .label-img {
  border-radius: var(--radius-sm);
}

html .scale li label {
  border-radius: 0px;
}

html .scale ul {
  border-radius: var(--radius-md);
}

html .scale li:first-child label {
  border-radius: var(--radius-sm) 0px 0px var(--radius-sm);
}

html .scale li:last-child label {
  border-radius: 0px var(--radius-sm) var(--radius-sm) 0px;
}

html .tooltip-btn {
  border-radius: var(--radius-full);
}

html .tooltip-btn span {
  border-radius: var(--radius-sm);
}

html .picture-box {
  border-radius: var(--radius-sm);
}

html .picture-box figure img,
html .picture-box figure svg {
  border-radius: var(--radius-sm);
}

html .picture-box-remove {
  border-radius: var(--radius-lg);
}

html .btn-more {
  border-radius: var(--radius-full);
}

html .price_button {
  border-radius: var(--radius-md);
}

html .result_price {
  border-radius: var(--radius-md);
}

html .result_price input {
  border-radius: var(--radius-md) !important;
}

html .result_price button {
  border-radius: var(--radius-sm);
}

html .wallet-transaction-card {
  border-radius: var(--radius-md);
}

html .wallet-transaction-card .transaction-prices {
  border-radius: var(--radius-md);
}

html .channel {
  border-radius: var(--radius-md);
}

html .qrcode-box {
  border-radius: var(--radius-md);
}

html .main-video-container {
  border-radius: 0px var(--radius-sm) var(--radius-sm) 0px;
}

html .main-video-container .main-video {
  border-radius: var(--radius-sm);
}

html .video-list-container {
  border-radius: var(--radius-sm) 0px 0px var(--radius-sm);
}

html .video-list-container .list {
  border-radius: var(--radius-sm);
}

html .video-list-container .list .list-video {
  border-radius: var(--radius-sm);
}

html .map_search_live {
  border-radius: var(--radius-sm);
}

html .archive-wrapper figure {
  border-radius: var(--radius-md);
}

html .signpad-wrapper {
  border-radius: var(--radius-xl);
}

html .signpad-wrapper > canvas {
  border-radius: var(--radius-xl) !important;
}

html .link-img-box {
  border-radius: var(--radius-sm);
}

html .link-img-box img,
html .link-img-box svg {
  border-radius: var(--radius-full);
}

html .ticket-link {
  border-radius: var(--radius-md);
}

html .ticket-cover {
  border-radius: var(--radius-md);
}

html .ticket-preview-img {
  border-radius: var(--radius-md);
}

html .ticket-preview-gallery img,
html .ticket-preview-gallery svg {
  border-radius: var(--radius-md);
}

html .ticket-cart-item img,
html .ticket-cart-item svg {
  border-radius: var(--radius-md);
}

html .ticket-card-item figure {
  border-radius: var(--radius-md);
}

html .seat {
  border-radius: var(--radius-sm);
}

html .seat-sm {
  border-radius: 24px;
}

html .swiper-button-prev,
html .swiper-button-next {
  border-radius: var(--radius-full);
}

html .sanse-box {
  border-radius: var(--radius-sm);
}

html .sanse-box.reserved::before {
  border-radius: var(--radius-xs);
}

html .design-section {
  border-radius: var(--radius-sm);
}

html .design-navbar > ul > li > button {
  border-radius: var(--radius-sm);
}

html .field-box {
  border-radius: var(--radius-sm);
}

html .field-box i {
  border-radius: var(--radius-xs);
}

html .field-box-options button {
  border-radius: var(--radius-xs);
}

html .field-selectable.selected {
  border-radius: var(--radius-sm);
}

html .field-selectable-options {
  border-radius: var(--radius-xs);
}

html .social-btn {
  border-radius: var(--radius-sm);
}

html .zoom-area {
  border-radius: var(--radius-sm);
}

html .file-manager-item-options li {
  border-radius: var(--radius-sm);
}

html .chat-box-date {
  border-radius: var(--radius-full);
}

html .chat-box-group-left .chat-box-item:nth-last-of-type(1) .chat-box-item-content {
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0px;
}

html:is(html)[dir=ltr] .chat-box-group-left .chat-box-item:nth-last-of-type(1) .chat-box-item-content {
  border-radius: var(--radius-md) var(--radius-md) 0px;
}

html .chat-box-group img,
html .chat-box-group svg {
  border-radius: 32px;
}

html .chat-box-group.no-corner .chat-box-item-content {
  border-radius: var(--radius-md) !important;
}

html .chat-box-item-glassy-btn {
  border-radius: var(--radius-sm);
}

html .chat-box-item-glassy-btn::before {
  border-radius: var(--radius-sm);
}

html .chat-box-item-content {
  border-radius: var(--radius-md);
}

html .chat-box-item-content-message img,
html .chat-box-item-content-message svg,
html .chat-box-item-content-message video {
  border-radius: var(--radius-sm);
}

html .chat-box-item-content-message-progress-circle {
  border-radius: 50%;
}

html .chat-box-item-content-message-progress-circle::before {
  border-radius: 50%;
}

html .chat-box-item-content-message-progress-circle span {
  border-radius: 50%;
}

html .chat-box-item-content-message-audio-btn {
  border-radius: 50%;
}

html .chat-box-item-content-message-link {
  border-radius: var(--radius-sm);
}

html .chat-box-item:nth-last-of-type(1) .chat-box-item-content {
  border-radius: var(--radius-md) var(--radius-md) 0px;
}

html:is(html)[dir=ltr] .chat-box-item:nth-last-of-type(1) .chat-box-item-content {
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0px;
}

html .chat-box-bottom {
  border-radius: var(--radius-md);
}

html .chat-box-bottom-content {
  border-radius: var(--radius-md) var(--radius-md) 0px;
}

html .chat-box-bottom-btn,
html .chat-box-bottom-btn:focus {
  border-radius: 50%;
}

html .chat-box-bottom-btn-circular {
  border-radius: 50%;
}

html .chat-box-bottom-timer::before {
  border-radius: 50%;
}

html .chat-box-bottom-file-preview {
  border-radius: var(--radius-md);
}

html .chat-box-bottom-file-preview-remove {
  border-radius: 50%;
}

html .chat-box-popup {
  border-radius: var(--radius-lg);
}

html .chat-box-navigation-drawer {
  border-radius: var(--radius-xs);
}

html .chat-box-emoji-btn {
  border-radius: var(--radius-sm);
}

html .chat-box-draggable-area {
  border-radius: var(--radius-lg);
}

html .chat-box-draggable-area::before {
  border-radius: var(--radius-lg);
}

html .design-container {
  border-radius: var(--radius-sm);
}

html .start {
  border-radius: 50%;
}

html .start- {
  border-radius: 50%;
}

html .end {
  border-radius: 50%;
}

html .workflowe {
  border-radius: 10%;
}

html .ui-rotatable-handle {
  border-radius: var(--radius-sm);
}

html .role-content {
  border-radius: var(--radius-sm);
}

html .module-item {
  border-radius: var(--radius-lg);
}

html .board-box {
  border-radius: var(--radius-sm);
}

html .board-box-item {
  border-radius: var(--radius-xs);
}

html .board-box-item-user {
  border-radius: 50%;
}

html .board-box-item-user img,
html .board-box-item-user svg {
  border-radius: 50%;
}

html .slideShowSwiper {
  border-radius: var(--radius-md);
}

html .content-shadow-item {
  border-radius: var(--radius-md);
}

html .content-shadow-item img,
html .content-shadow-item svg {
  border-radius: var(--radius-md);
}

html .ticket-draw-item-right .up-border,
html .ticket-draw-item-right .down-border {
  border-radius: 50%;
}

html .ticket-profile-img {
  border-radius: 50%;
}

html .brz-calendar-widget {
  border-radius: var(--radius-md);
}

html .brz-calendar-day {
  border-radius: var(--radius-sm);
}

html .down-section-btn {
  border-radius: var(--radius-sm) var(--radius-sm) 0px 0px;
}

html .payment-method-label {
  border-radius: var(--radius-md);
}

html .my-tab-item-button {
  border-radius: 100px;
}

html .map-loader {
  border-radius: var(--radius-lg);
}

html .map-loader-dots {
  border-radius: var(--radius-circle);
}

html .border-radius-12 {
  border-radius: var(--radius-md);
}

html .mzt-card {
  border-radius: var(--radius-md);
}

html .mzt-card-header-badge {
  border-radius: var(--radius-xl);
}

html .mzt-card-header-circle {
  border-radius: 50%;
}

html .mzt-card-badge {
  border-radius: var(--radius-xs);
}

html .leaflet-custom-label {
  border-radius: var(--radius-sm);
}

html .leaflet-draw-section {
  border-radius: var(--radius-xs);
}

html .leaflet-touch .leaflet-bar a:last-child {
  border-bottom-left-radius: var(--radius-xs);
  border-bottom-right-radius: var(--radius-xs);
}

html .leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: var(--radius-xs);
  border-top-right-radius: var(--radius-xs);
}

html .leaflet-custom-label {
  border-radius: var(--radius-sm);
}

html .bill-pay-img {
  border-radius: var(--radius-md);
}

html .nav-tabs-light ul li .nav-link {
  border-radius: var(--radius-sm);
}

html .checkout-header {
  border-radius: 0px 0px var(--radius-md) var(--radius-md);
}

html .checkout-popup {
  border-radius: var(--radius-md);
}

html .pc-letter {
  border-radius: var(--radius-lg);
}

html .pc-letter-content,
html .pc-letter-content-back {
  border-radius: var(--radius-lg);
}

html .my-ad-section {
  border-radius: var(--radius-md);
}

html .my-ad-section-controls div,
html .my-ad-section-controls button,
html .my-ad-section-controls a {
  border-radius: var(--radius-sm);
}

html .my-ad-section.model7 {
  border-bottom-left-radius: 100%;
}

html .my-ad-section.model5 {
  border-bottom-right-radius: 100%;
}

html .my-ad-section.model9 {
  border-top-left-radius: 100%;
}

html .my-ad-section.model3 {
  border-top-right-radius: 100%;
}

html .card-input-wrapper .card-input-field .digits-group .digit-slot::after {
  border-radius: var(--radius-xs);
}

html .balance-header .balance-card {
  border-radius: var(--radius-lg);
}

html .balance-header .balance-card::before {
  border-radius: 50%;
}

html .balance-header .balance-card::after {
  border-radius: 50%;
}

html .balance-header .balance-card .balance-icon {
  border-radius: var(--radius-lg);
}

html .balance-header .balance-card .btn-charge {
  border-radius: var(--radius-xl);
}

html .cards-container .cards-header .cards-count {
  border-radius: var(--radius-xl);
}

html .cards-container .cards-grid .empty-state {
  border-radius: var(--radius-lg);
}

html .cards-container .cards-grid .empty-state .btn-add-card {
  border-radius: var(--radius-xl);
}

html .bank-card {
  border-radius: var(--radius-lg);
}

html .bank-card .default-badge {
  border-radius: var(--radius-xl);
}

html .bank-card .card-body .card-number span {
  border-radius: var(--radius-md);
}

html .bank-card .card-footer .card-actions .card-action-btn {
  border-radius: var(--radius-md);
}

html .card-suggestions-popup {
  border-radius: var(--radius-lg);
}

html .card-suggestions-popup .suggestions-list .suggestion-item .bank-info .bank-icon {
  border-radius: var(--radius-md);
}

html .card-suggestions-popup .suggestions-list .suggestion-item .default-badge-mini {
  border-radius: var(--radius-xl);
}

html .card-suggestions-popup .suggestions-footer button {
  border-radius: var(--radius-md);
}

html .leaflet-marker-icon {
  border-radius: var(--radius-sm);
}

html .map-drawing-tools-panel {
  border-radius: var(--radius-lg) !important;
}

html .map-drawing-tools-btn {
  border-radius: var(--radius-xl);
}

html .map-drawing-tools-btn::before {
  border-radius: var(--radius-circle);
}

html .map-drawing-tools-btn::after {
  border-radius: var(--radius-circle);
}

html .tooltip .tooltip-inner {
  border-radius: var(--radius-md);
}

@media only screen and (max-width: 768px) {
  html .map-drawing-tools-panel {
    border-radius: var(--radius-lg) !important;
  }
  html .map-drawing-tools-btn {
    border-radius: var(--radius-xl);
  }
}
@media only screen and (max-width: 480px) {
  html .map-drawing-tools-btn {
    border-radius: var(--radius-md);
  }
}
html .leaflet-control {
  border-radius: var(--radius-lg) !important;
}

html .leaflet-bar {
  border-radius: var(--radius-lg) !important;
}

html .leaflet-bar a.leaflet-draw-draw-polyline {
  border-radius: var(--radius-lg) var(--radius-lg) 0px 0px !important;
}

html .leaflet-bar a.leaflet-draw-edit-remove {
  border-radius: 0px !important;
}

html .leaflet-control.leaflet-bar.tan-locate-btn {
  border-radius: 100% !important;
}

html .leaflet-control.leaflet-bar.tan-locate-btn a {
  border-radius: 100% !important;
}

html .leaflet-draw-toolbar {
  border-radius: var(--radius-lg) !important;
}

html .leaflet-draw-actions {
  border-radius: var(--radius-lg) !important;
}

html .leaflet-draw-actions li:first-child a {
  border-top-left-radius: var(--radius-lg) !important;
  border-top-right-radius: var(--radius-lg) !important;
}

html .leaflet-draw-actions li:last-child a {
  border-bottom-left-radius: var(--radius-lg) !important;
  border-bottom-right-radius: var(--radius-lg) !important;
}

html .leaflet-control-zoom {
  border-radius: var(--radius-lg) !important;
}

html .leaflet-control-zoom a.leaflet-control-zoom-in {
  border-radius: var(--radius-lg) var(--radius-lg) 0px 0px !important;
}

html .leaflet-control-zoom a.leaflet-control-zoom-out {
  border-radius: 0px 0px var(--radius-lg) var(--radius-lg) !important;
}

html .leaflet-control-scale {
  border-radius: var(--radius-md) !important;
}

html .leaflet-control-attribution {
  border-radius: var(--radius-lg) !important;
}

html .leaflet-popup .leaflet-popup-content-wrapper {
  border-radius: var(--radius-lg) !important;
}

html .leaflet-popup .leaflet-popup-close-button {
  border-radius: 50% !important;
}

html .leaflet-control-ruler {
  border-radius: var(--radius-lg) !important;
}

html .leaflet-control-ruler .leaflet-control-ruler-button {
  border-radius: var(--radius-md);
}

html .leaflet-control-ruler .leaflet-ruler-tooltip {
  border-radius: var(--radius-md);
}

html .leaflet-tooltip {
  border-radius: var(--radius-md) !important;
}

html .equipment-global-container .module-box {
  border-radius: var(--radius-md);
}

html .equipment-category-card {
  border-radius: var(--radius-md);
}

html .equipment-category-card .category-header {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

html .equipment-category-card .category-header .category-icon {
  border-radius: var(--radius-sm);
}

html .equipment-category-card .category-header .stats-badge {
  border-radius: var(--radius-sm);
}

html .equipment-category-card .category-header .group-toggle-on-btn,
html .equipment-category-card .category-header .group-toggle-off-btn {
  border-radius: var(--radius-sm);
}

html .equipment-item {
  border-radius: var(--radius-sm);
}

html .equipment-item .equipment-icon {
  border-radius: var(--radius-sm);
}

html .equipment-item .equipment-info .device-badge {
  border-radius: var(--radius-md);
}

html .equipment-item .equipment-status .status-badge {
  border-radius: var(--radius-sm);
}

html .equipment-item .equipment-status .color-picker {
  border-radius: var(--radius-sm);
}

html .equipment-item .equipment-status .sensor-value {
  border-radius: var(--radius-sm);
}

html .shp-list-bordered {
  border-radius: var(--radius-md);
}

html label.shp-radio-color {
  border-radius: 50%;
}

html label.shp-radio-option {
  border-radius: 36px;
}

html .shp-location-card {
  border-radius: var(--radius-sm);
}

html .shp-weekday-value::before {
  border-radius: var(--radius-xs);
}

html .shp-tr:hover .shp-td:nth-child(1)::after {
  border-radius: var(--radius-sm);
}

@media only screen and (max-width: 1200px) {
  html .shp-th:nth-last-child(1),
  html .shp-td:nth-last-child(1) {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  html .shp-th:nth-child(1),
  html .shp-td:nth-child(1) {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
  }
}
@media only screen and (min-width: 1200px) {
  html .shp-th:nth-last-child(1),
  html .shp-td:nth-last-child(1) {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }
  html:is(html)[dir=ltr] .shp-th:nth-last-child(1),
  html:is(html)[dir=ltr] .shp-td:nth-last-child(1) {
    border-radius: 0px var(--radius-md) var(--radius-md) 0px;
  }
  html .shp-th:nth-child(1),
  html .shp-td:nth-child(1) {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  html:is(html)[dir=ltr] .shp-th:nth-child(1),
  html:is(html)[dir=ltr] .shp-td:nth-child(1) {
    border-radius: var(--radius-md) 0px 0px var(--radius-md);
  }
}
@media only screen and (max-width: 1200px) {
  html .shp-table-joined {
    border-radius: var(--radius-md) !important;
  }
  html .shp-table-joined tbody tr {
    border-radius: 0px !important;
  }
  html .shp-table-joined tbody tr:nth-of-type(1) {
    border-top-left-radius: var(--radius-md) !important;
    border-top-right-radius: var(--radius-md) !important;
  }
  html .shp-table-joined tbody tr:nth-last-of-type(1) {
    border-bottom-left-radius: var(--radius-md) !important;
    border-bottom-right-radius: var(--radius-md) !important;
  }
}
html .shp-upload-box {
  border-radius: var(--radius-md);
}

html .profile-sidebar {
  border-radius: var(--radius-sm);
}

html .profile-sidebar .hamburger-btn {
  border-radius: var(--radius-sm) 0px 0px var(--radius-sm);
}

html:is(html)[dir=ltr] .profile-sidebar .hamburger-btn {
  border-radius: 0px var(--radius-sm) var(--radius-sm) 0px;
}

html .profile-sidebar header {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

html .profile-sidebar header img,
html .profile-sidebar header svg {
  border-radius: var(--radius-full);
}

html .profile-sidebar .profile-sidebar-header-bg {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

html .profile-sidebar .profile-sidebar-header-bg svg {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}

html .profile-sidebar nav {
  border-radius: var(--radius-md);
}

html .profile-sidebar nav > ul > li:nth-last-child(1)::before {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

html .profile-sidebar nav > ul > li a {
  border-radius: var(--radius-sm);
}

html .profile-sidebar nav > ul > li a .link-hover {
  border-radius: var(--radius-sm);
}

html .shp-category-suggest {
  border-radius: var(--radius-lg);
}

html .shp-hint-box {
  border-radius: var(--radius-lg);
}

html .shp-header-search-suggest-item {
  border-radius: calc(var(--radius-xl) * 0.667);
}

html .shp-category-suggest-model:not(:nth-last-of-type(1)) {
  border-radius: 0px;
}

@media only screen and (min-width: 575px) {
  html .shp-category-suggest-model:nth-child(2n+1) {
    border-radius: 0px;
  }
}
@media only screen and (min-width: 992px) {
  html .shp-category-suggest-model:not(:nth-last-of-type(1)) {
    border-radius: 0px;
  }
}
html .shp-category-nested-nav ul li:hover,
html .shp-category-nested-nav ul li:active,
html .shp-category-nested-nav ul li.active {
  border-radius: var(--radius-sm);
}

html body.my-body-content .section {
  border-radius: var(--radius-lg);
}

html body.my-body-content .section > .section-header {
  border-radius: var(--radius-lg) var(--radius-lg) 0px 0px;
}

html body.my-body-content .section > .section-footer {
  border-radius: 0px 0px var(--radius-lg) var(--radius-lg);
}

html body.my-body-content [data-title="اسلایدر ویژه"] .shp-main-special-slider {
  border-radius: var(--radius-lg) !important;
}

html body.my-body-content .shp-main-slider {
  border-radius: var(--radius-lg);
}

html .tan-avatar-stack-img,
html .tan-avatar-stack-more {
  border-radius: 50%;
}

html .tan-request-panel-header-badge {
  border-radius: var(--radius-xs);
}

html .tan-request-panel-header-btns button {
  border-radius: 50%;
}

html .tan-request-panel-body {
  border-radius: var(--radius-md);
}

html .tan-task-placeholder {
  border-radius: var(--radius-md);
}

html .tan-request-card {
  border-radius: var(--radius-lg);
}

html .tan-request-card-tag {
  border-radius: var(--radius-xs);
}

html .tan-request-card-add {
  border-radius: var(--radius-xs);
}

html .tan-request-card-toggle {
  border-radius: 50%;
}

html .tan-request-card-cover {
  border-radius: var(--radius-md);
}

html .tan-request-card-avatar {
  border-radius: 50%;
}

html .tan-request-card-tag {
  border-radius: 999px;
}

html .tan-request-card-add {
  border-radius: 50%;
}

html .tan-tabs-more-btn {
  border-radius: 50%;
}

html .tan-tabs-more-menu {
  border-radius: var(--radius-lg);
}

html .tan-tabs-more-item {
  border-radius: 100px;
}

html body.my-new-body-content section.main .section {
  border-radius: 0px !important;
}

html body.my-new-body-content section.main .section > .section-header {
  border-radius: 0px !important;
}

html body.my-new-body-content section.main .section > .section-header > div:first-child > svg {
  border-radius: 50%;
}

html body.my-new-body-content section.main .section > .section-header .drop-tab-group:not(.drop-tab-group .drop-tab-group) {
  border-radius: 100px;
}

html body.my-new-body-content #nav-tab ul::before {
  border-radius: 100px;
}

html body.my-new-body-content #nav-tab ul li button.nav-link {
  border-radius: 100px !important;
}

html body.my-new-body-content #nav-tab {
  border-radius: 0px;
}

html body.my-new-body-content section.main .section > .section-header > div:nth-child(2) > div:first-child {
  border-radius: 100px;
}

html body.my-new-body-content #nav-tab-role {
  border-radius: var(--radius-md);
}

html body.my-new-body-content #nav-tab-role ul li button.nav-link {
  border-radius: 100px !important;
}

html body.my-new-body-content section.main .section > .mx-box:not(#searchCollapse):has(> button[data-bs-target]) > button {
  border-radius: 50%;
}

html body.my-new-body-content section.main .section > .section-footer {
  border-radius: 0px !important;
}

html body.my-new-body-content section.main .section > .section-footer ul.pagination li {
  border-radius: 0px;
}

html body.my-new-body-content section.main .section > .section-footer ul.pagination li a {
  border-radius: 50% !important;
}

html body.my-new-body-content #nav-tab ul li,
html body.my-new-body-content #nav-tab ul li:hover {
  border-radius: 0px !important;
}

html .tan-project-card {
  border-radius: var(--radius-lg);
}

html .tan-project-card-image {
  border-radius: var(--radius-md);
}

html .tan-status-bar {
  border-radius: var(--radius-xl);
}

html .tan-status-bar::before {
  border-radius: 50%;
}

html .tan-project-days {
  border-radius: var(--radius-lg);
}

html .tan-project-progress-track {
  border-radius: var(--radius-lg);
}

html .tan-project-progress-fill {
  border-radius: var(--radius-lg);
}

html .tan-tasks-stat {
  border-radius: var(--radius-md);
}

html .tan-tasks-stat-txt::before {
  border-radius: 50%;
}

html .tan-project-back {
  border-radius: var(--radius-md);
}

html .tan-project-hero {
  border-radius: var(--radius-lg);
}

html .tan-project-section {
  border-radius: var(--radius-lg);
}

html .tan-project-section-head h3::before {
  border-radius: var(--radius-xs);
}

html .tan-project-filter {
  border-radius: var(--radius-md);
}

html .tan-project-filter button {
  border-radius: var(--radius-sm);
}

html .tan-project-task {
  border-radius: var(--radius-md);
}

html .tan-project-task-check {
  border-radius: 50%;
}

html .tan-project-task-status {
  border-radius: var(--radius-xl);
}

html .tan-project-task-status::before {
  border-radius: 50%;
}

html .tan-project-task-progress > div {
  border-radius: var(--radius-lg);
}

html .tan-project-task-progress > div > div {
  border-radius: var(--radius-lg);
}

html .tan-project-cover-count {
  border-radius: var(--radius-xl);
}

html .tan-project-cover-count::before {
  border-radius: 50%;
}

html .tan-project-task-proj {
  border-radius: var(--radius-lg);
}

html .map-places-item {
  border-radius: var(--radius-lg);
}

html #scrollableTabs.tan-scrollable-tabs {
  border-radius: var(--radius-xxl);
}

html #scrollableTabs .tan-scrollable-tabs-indicator {
  border-radius: var(--radius-xl);
}

html #scrollableTabs .tan-scrollable-tab-item-button {
  border-radius: var(--radius-xl);
}

[data-title="پرفروش ترین محصولات"] > .section {
  overflow: hidden;
}

[data-title="پرفروش ترین محصولات"] .section-body {
  display: flex;
  flex-direction: column;
  min-height: 0 !important;
  overflow: hidden;
}

[data-title="پرفروش ترین محصولات"] .shp-listed-product-wrapper {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

[data-title="پرفروش ترین محصولات"] .shp-listed-product {
  height: 100%;
  min-height: 0;
}

[data-title="پرفروش ترین محصولات"] .shp-listed-product-item {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

[data-title="پرفروش ترین محصولات"] .shp-listed-product-img {
  width: auto;
  height: 100%;
  max-height: 86px;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}

[data-title="پرفروش ترین محصولات"] .shp-listed-product .separator-horizontal {
  flex-shrink: 0;
}

[data-title=پرفروش‌ترین‌ها] .tan-ranked-list-scroll,
[data-title="داغ‌ترین چند ساعت گذشته"] .tan-ranked-list-scroll {
  margin: 0 16px 16px;
  padding: 12px 14px 0 !important;
}

[data-title=رویدادها] .tan-poster-card-footer > .tan-poster-card-view {
  order: 2;
}

.shp-category-suggest-gallery-image img,
.shp-category-suggest-gallery-image svg {
  border-radius: var(--radius-md);
}

.tan-audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 18px;
  padding: 4px 12px 12px;
  --tan-aud-first: var(--rgb-first);
}

.tan-audience-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(var(--rgb-dark), 0.07);
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 0 1px 2px rgba(var(--rgb-black), 0.04), 0 8px 24px -12px rgba(var(--rgb-black), 0.12);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease, border-color 0.28s ease, opacity 0.28s ease;
}
.tan-audience-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(var(--tan-aud-first), 0.55), transparent 45%);
  -webkit-mask: linear-gradient(rgb(var(--rgb-black)) 0 0) content-box, linear-gradient(rgb(var(--rgb-black)) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.tan-audience-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--tan-aud-first), 0.3);
  box-shadow: 0 1px 2px rgba(var(--rgb-black), 0.04), 0 28px 55px -34px rgba(var(--rgb-black), 0.35);
}
.tan-audience-card:hover::before {
  opacity: 1;
}

.tan-audience-card--out {
  opacity: 0;
  transform: scale(0.96);
}

html[dir=ltr] .tan-audience-card::before {
  background: linear-gradient(220deg, rgba(var(--tan-aud-first), 0.55), transparent 45%);
}

.tan-audience-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tan-audience-avatar {
  position: relative;
  flex: none;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgb(var(--rgb-white));
  font-size: 17px;
  font-weight: bold;
  background: linear-gradient(135deg, rgb(var(--tan-c1, var(--tan-aud-first))), rgb(var(--tan-c2, var(--tan-aud-first))));
  box-shadow: 0 0 0 3px rgba(var(--tan-aud-first), 0.12);
}
.tan-audience-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.tan-audience-status {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid rgb(var(--rgb-ninth-lighter));
  background-color: rgb(var(--rgb-slate-400));
}

.tan-audience-status--online {
  background-color: rgb(var(--rgb-green-500));
  box-shadow: 0 0 10px rgba(var(--rgb-green-500), 0.8);
}

.tan-audience-status--away {
  background-color: rgb(var(--rgb-amber-500));
}

.tan-audience-status--block {
  background-color: rgb(var(--rgb-red-500));
  box-shadow: 0 0 10px rgba(var(--rgb-red-500), 0.8);
}

.tan-audience-who {
  flex: 1;
  min-width: 0;
}
.tan-audience-who h3,
.tan-audience-who p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tan-audience-who h3 {
  margin: 0;
  font-size: 15px;
  font-weight: bold;
  color: rgb(var(--rgb-darkest));
}
.tan-audience-who p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: rgb(var(--rgb-light-dark));
}

.tan-audience-quick {
  flex: none;
  display: flex;
  gap: 6px;
}

@media only screen and (max-width: 360px) {
  .tan-audience-quick {
    flex-flow: column;
  }
}
.tan-audience-quick-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 11px;
  border: 1px solid rgba(var(--rgb-dark), 0.08);
  background-color: rgba(var(--tan-aud-first), 0.05);
  color: rgb(var(--rgb-light-dark));
  font-size: 14px;
  cursor: pointer;
  transition: all 0.22s ease;
}
.tan-audience-quick-btn:hover {
  color: rgb(var(--tan-aud-first));
  border-color: rgba(var(--tan-aud-first), 0.5);
  background-color: rgba(var(--tan-aud-first), 0.13);
}

.tan-audience-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.tan-audience-meta li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  cursor: default;
}
.tan-audience-meta li > i {
  flex: none;
  width: 15px;
  font-size: 14px;
  text-align: center;
  color: rgb(var(--rgb-light-dark));
  transition: color 0.22s ease;
}
.tan-audience-meta li:hover > i, .tan-audience-meta li:hover .tan-audience-meta-val {
  color: rgb(var(--tan-aud-first));
}

.tan-audience-meta-val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  color: rgb(var(--rgb-darkest));
  transition: color 0.22s ease;
}

.tan-audience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.tan-audience-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  color: rgb(var(--tan-aud-first));
  background-color: rgba(var(--tan-aud-first), 0.12);
  border: 1px solid rgba(var(--tan-aud-first), 0.22);
}

.tan-audience-tag--vip {
  color: rgb(var(--rgb-amber-600));
  background-color: rgba(var(--rgb-amber-500), 0.15);
  border-color: rgba(var(--rgb-amber-500), 0.3);
}

.tan-audience-card > :nth-last-child(2) {
  margin-bottom: 16px;
}

.tan-audience-actions {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed rgba(var(--rgb-dark), 0.14);
}

.tan-audience-actions-scroll {
  display: flex;
  gap: 6px;
  margin-top: -40px;
  padding-top: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tan-audience-actions-scroll::-webkit-scrollbar {
  display: none;
}

@property --tan-aud-fade-s {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tan-aud-fade-e {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@keyframes tan-aud-fade {
  from {
    --tan-aud-fade-s: 0px;
    --tan-aud-fade-e: 32px;
  }
  8% {
    --tan-aud-fade-s: 32px;
  }
  92% {
    --tan-aud-fade-e: 32px;
  }
  to {
    --tan-aud-fade-s: 32px;
    --tan-aud-fade-e: 0px;
  }
}
.tan-audience-actions-scroll {
  --tan-aud-fade-dir: to left;
  -webkit-mask-image: linear-gradient(rgb(var(--rgb-black)), rgb(var(--rgb-black))), linear-gradient(var(--tan-aud-fade-dir), transparent, rgb(var(--rgb-black)) var(--tan-aud-fade-s), rgb(var(--rgb-black)) calc(100% - var(--tan-aud-fade-e)), transparent);
  mask-image: linear-gradient(rgb(var(--rgb-black)), rgb(var(--rgb-black))), linear-gradient(var(--tan-aud-fade-dir), transparent, rgb(var(--rgb-black)) var(--tan-aud-fade-s), rgb(var(--rgb-black)) calc(100% - var(--tan-aud-fade-e)), transparent);
  -webkit-mask-size: 100% 40px, 100% calc(100% - 40px);
  mask-size: 100% 40px, 100% calc(100% - 40px);
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: tan-aud-fade linear both;
  animation-timeline: scroll(self inline);
}

html[dir=ltr] .tan-audience-actions-scroll {
  --tan-aud-fade-dir: to right;
}

.tan-audience-actions-scroll > :first-child {
  margin-inline-start: auto;
}

.tan-audience-actions-scroll > :last-child {
  margin-inline-end: auto;
}

.tan-audience-actions-scroll > .tan-audience-act {
  flex: 0 0 50px;
}

.tan-audience-grid .tan-audience-actions-scroll > :first-child::after,
.tan-audience-grid .tan-audience-actions-scroll > :last-child::after {
  left: auto;
  transform: translateY(4px);
}

.tan-audience-grid .tan-audience-actions-scroll > :first-child::after {
  inset-inline-start: 0;
}

.tan-audience-grid .tan-audience-actions-scroll > :last-child::after {
  inset-inline-end: 0;
}

.tan-audience-grid .tan-audience-actions-scroll > :first-child:hover::after,
.tan-audience-grid .tan-audience-actions-scroll > :last-child:hover::after {
  transform: translateY(0);
}

.tan-audience-act {
  --tan-act: var(--tan-aud-first);
  height: 45px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background-color: rgba(var(--rgb-dark), 0.05);
  color: rgb(var(--rgb-light-dark));
  font-size: 17px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.tan-audience-act i {
  transition: filter 0.25s ease;
}
.tan-audience-act:hover {
  transform: translateY(-3px);
  color: rgb(var(--tan-act));
  background-color: rgba(var(--tan-act), 0.14);
}
.tan-audience-act:hover i {
  filter: drop-shadow(0 4px 10px rgba(var(--tan-act), 0.7));
}
.tan-audience-act:active {
  transform: translateY(-1px) scale(0.94);
}

.tan-audience-act--del {
  --tan-act: var(--rgb-red-500);
}

.tan-audience-act--edit {
  --tan-act: var(--rgb-amber-500);
}

.tan-audience-act--task,
.tan-audience-act--task-list {
  --tan-act: var(--rgb-sky-500);
}

.tan-audience-act--event,
.tan-audience-act--event-list {
  --tan-act: var(--rgb-purple-500);
}

.tan-audience-act--score-list {
  --tan-act: var(--rgb-green-500);
}

.tan-audience-empty {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  border-radius: 20px;
  border: 1px dashed rgba(var(--rgb-dark), 0.14);
  color: rgb(var(--rgb-light-dark));
}
.tan-audience-empty i {
  font-size: 44px;
  opacity: 0.4;
}

.tan-audience-grid [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 20;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(var(--rgb-white), 0.1);
  background: rgba(var(--rgb-gray-900), 0.98);
  box-shadow: 0 12px 24px -10px rgba(var(--rgb-black), 0.5);
  color: rgb(var(--rgb-white));
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}
.tan-audience-grid [data-tip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  z-index: 20;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(var(--rgb-gray-900), 0.98);
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}
.tan-audience-grid [data-tip]:hover::after, .tan-audience-grid [data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tan-audience-meta li,
.tan-audience-quick-btn,
.tan-audience-act {
  position: relative;
}

body.dark .tan-audience-grid, body.faragard-dark .tan-audience-grid, body.blue-dark .tan-audience-grid, body.orange-dark .tan-audience-grid, body.fuchsia-dark .tan-audience-grid, body.pink-dark .tan-audience-grid, body.emerald-dark .tan-audience-grid, body.red-dark .tan-audience-grid, body.sky-dark .tan-audience-grid, body.yellow-dark .tan-audience-grid, body.green-dark .tan-audience-grid, body.purple-dark .tan-audience-grid, body.indigo-dark .tan-audience-grid, body.slate-dark .tan-audience-grid, body.yellow-blue-dark .tan-audience-grid, body.administrative-order-dark .tan-audience-grid, body.organizational-dynamism-dark .tan-audience-grid, body.collective-empathy-dark .tan-audience-grid, body.innovative-thinking-dark .tan-audience-grid, body.performance-transparency-dark .tan-audience-grid, body.organized-city-navy-dark .tan-audience-grid, body.calm-city-sky-dark .tan-audience-grid, body.warm-city-brick-dark .tan-audience-grid, body.order-in-service-dark .tan-audience-grid, body.companionship-in-action-dark .tan-audience-grid, body.focus-and-precision-dark .tan-audience-grid, body.golden-blue-dark .tan-audience-grid {
  --tan-aud-first: var(--rgb-first-darker);
}
body.dark .tan-audience-card, body.faragard-dark .tan-audience-card, body.blue-dark .tan-audience-card, body.orange-dark .tan-audience-card, body.fuchsia-dark .tan-audience-card, body.pink-dark .tan-audience-card, body.emerald-dark .tan-audience-card, body.red-dark .tan-audience-card, body.sky-dark .tan-audience-card, body.yellow-dark .tan-audience-card, body.green-dark .tan-audience-card, body.purple-dark .tan-audience-card, body.indigo-dark .tan-audience-card, body.slate-dark .tan-audience-card, body.yellow-blue-dark .tan-audience-card, body.administrative-order-dark .tan-audience-card, body.organizational-dynamism-dark .tan-audience-card, body.collective-empathy-dark .tan-audience-card, body.innovative-thinking-dark .tan-audience-card, body.performance-transparency-dark .tan-audience-card, body.organized-city-navy-dark .tan-audience-card, body.calm-city-sky-dark .tan-audience-card, body.warm-city-brick-dark .tan-audience-card, body.order-in-service-dark .tan-audience-card, body.companionship-in-action-dark .tan-audience-card, body.focus-and-precision-dark .tan-audience-card, body.golden-blue-dark .tan-audience-card {
  border-color: rgba(var(--rgb-white), 0.08);
  box-shadow: none;
}
body.dark .tan-audience-card:hover, body.faragard-dark .tan-audience-card:hover, body.blue-dark .tan-audience-card:hover, body.orange-dark .tan-audience-card:hover, body.fuchsia-dark .tan-audience-card:hover, body.pink-dark .tan-audience-card:hover, body.emerald-dark .tan-audience-card:hover, body.red-dark .tan-audience-card:hover, body.sky-dark .tan-audience-card:hover, body.yellow-dark .tan-audience-card:hover, body.green-dark .tan-audience-card:hover, body.purple-dark .tan-audience-card:hover, body.indigo-dark .tan-audience-card:hover, body.slate-dark .tan-audience-card:hover, body.yellow-blue-dark .tan-audience-card:hover, body.administrative-order-dark .tan-audience-card:hover, body.organizational-dynamism-dark .tan-audience-card:hover, body.collective-empathy-dark .tan-audience-card:hover, body.innovative-thinking-dark .tan-audience-card:hover, body.performance-transparency-dark .tan-audience-card:hover, body.organized-city-navy-dark .tan-audience-card:hover, body.calm-city-sky-dark .tan-audience-card:hover, body.warm-city-brick-dark .tan-audience-card:hover, body.order-in-service-dark .tan-audience-card:hover, body.companionship-in-action-dark .tan-audience-card:hover, body.focus-and-precision-dark .tan-audience-card:hover, body.golden-blue-dark .tan-audience-card:hover {
  box-shadow: 0 28px 55px -34px rgba(var(--rgb-black), 0.95);
}
body.dark .tan-audience-quick-btn, body.faragard-dark .tan-audience-quick-btn, body.blue-dark .tan-audience-quick-btn, body.orange-dark .tan-audience-quick-btn, body.fuchsia-dark .tan-audience-quick-btn, body.pink-dark .tan-audience-quick-btn, body.emerald-dark .tan-audience-quick-btn, body.red-dark .tan-audience-quick-btn, body.sky-dark .tan-audience-quick-btn, body.yellow-dark .tan-audience-quick-btn, body.green-dark .tan-audience-quick-btn, body.purple-dark .tan-audience-quick-btn, body.indigo-dark .tan-audience-quick-btn, body.slate-dark .tan-audience-quick-btn, body.yellow-blue-dark .tan-audience-quick-btn, body.administrative-order-dark .tan-audience-quick-btn, body.organizational-dynamism-dark .tan-audience-quick-btn, body.collective-empathy-dark .tan-audience-quick-btn, body.innovative-thinking-dark .tan-audience-quick-btn, body.performance-transparency-dark .tan-audience-quick-btn, body.organized-city-navy-dark .tan-audience-quick-btn, body.calm-city-sky-dark .tan-audience-quick-btn, body.warm-city-brick-dark .tan-audience-quick-btn, body.order-in-service-dark .tan-audience-quick-btn, body.companionship-in-action-dark .tan-audience-quick-btn, body.focus-and-precision-dark .tan-audience-quick-btn, body.golden-blue-dark .tan-audience-quick-btn {
  border-color: rgba(var(--rgb-white), 0.08);
}
body.dark .tan-audience-act, body.faragard-dark .tan-audience-act, body.blue-dark .tan-audience-act, body.orange-dark .tan-audience-act, body.fuchsia-dark .tan-audience-act, body.pink-dark .tan-audience-act, body.emerald-dark .tan-audience-act, body.red-dark .tan-audience-act, body.sky-dark .tan-audience-act, body.yellow-dark .tan-audience-act, body.green-dark .tan-audience-act, body.purple-dark .tan-audience-act, body.indigo-dark .tan-audience-act, body.slate-dark .tan-audience-act, body.yellow-blue-dark .tan-audience-act, body.administrative-order-dark .tan-audience-act, body.organizational-dynamism-dark .tan-audience-act, body.collective-empathy-dark .tan-audience-act, body.innovative-thinking-dark .tan-audience-act, body.performance-transparency-dark .tan-audience-act, body.organized-city-navy-dark .tan-audience-act, body.calm-city-sky-dark .tan-audience-act, body.warm-city-brick-dark .tan-audience-act, body.order-in-service-dark .tan-audience-act, body.companionship-in-action-dark .tan-audience-act, body.focus-and-precision-dark .tan-audience-act, body.golden-blue-dark .tan-audience-act {
  background-color: rgba(var(--rgb-white), 0.04);
}
body.dark .tan-audience-actions,
body.dark .tan-audience-empty, body.faragard-dark .tan-audience-actions,
body.faragard-dark .tan-audience-empty, body.blue-dark .tan-audience-actions,
body.blue-dark .tan-audience-empty, body.orange-dark .tan-audience-actions,
body.orange-dark .tan-audience-empty, body.fuchsia-dark .tan-audience-actions,
body.fuchsia-dark .tan-audience-empty, body.pink-dark .tan-audience-actions,
body.pink-dark .tan-audience-empty, body.emerald-dark .tan-audience-actions,
body.emerald-dark .tan-audience-empty, body.red-dark .tan-audience-actions,
body.red-dark .tan-audience-empty, body.sky-dark .tan-audience-actions,
body.sky-dark .tan-audience-empty, body.yellow-dark .tan-audience-actions,
body.yellow-dark .tan-audience-empty, body.green-dark .tan-audience-actions,
body.green-dark .tan-audience-empty, body.purple-dark .tan-audience-actions,
body.purple-dark .tan-audience-empty, body.indigo-dark .tan-audience-actions,
body.indigo-dark .tan-audience-empty, body.slate-dark .tan-audience-actions,
body.slate-dark .tan-audience-empty, body.yellow-blue-dark .tan-audience-actions,
body.yellow-blue-dark .tan-audience-empty, body.administrative-order-dark .tan-audience-actions,
body.administrative-order-dark .tan-audience-empty, body.organizational-dynamism-dark .tan-audience-actions,
body.organizational-dynamism-dark .tan-audience-empty, body.collective-empathy-dark .tan-audience-actions,
body.collective-empathy-dark .tan-audience-empty, body.innovative-thinking-dark .tan-audience-actions,
body.innovative-thinking-dark .tan-audience-empty, body.performance-transparency-dark .tan-audience-actions,
body.performance-transparency-dark .tan-audience-empty, body.organized-city-navy-dark .tan-audience-actions,
body.organized-city-navy-dark .tan-audience-empty, body.calm-city-sky-dark .tan-audience-actions,
body.calm-city-sky-dark .tan-audience-empty, body.warm-city-brick-dark .tan-audience-actions,
body.warm-city-brick-dark .tan-audience-empty, body.order-in-service-dark .tan-audience-actions,
body.order-in-service-dark .tan-audience-empty, body.companionship-in-action-dark .tan-audience-actions,
body.companionship-in-action-dark .tan-audience-empty, body.focus-and-precision-dark .tan-audience-actions,
body.focus-and-precision-dark .tan-audience-empty, body.golden-blue-dark .tan-audience-actions,
body.golden-blue-dark .tan-audience-empty {
  border-color: rgba(var(--rgb-white), 0.1);
}
body.dark .tan-audience-tag--vip, body.faragard-dark .tan-audience-tag--vip, body.blue-dark .tan-audience-tag--vip, body.orange-dark .tan-audience-tag--vip, body.fuchsia-dark .tan-audience-tag--vip, body.pink-dark .tan-audience-tag--vip, body.emerald-dark .tan-audience-tag--vip, body.red-dark .tan-audience-tag--vip, body.sky-dark .tan-audience-tag--vip, body.yellow-dark .tan-audience-tag--vip, body.green-dark .tan-audience-tag--vip, body.purple-dark .tan-audience-tag--vip, body.indigo-dark .tan-audience-tag--vip, body.slate-dark .tan-audience-tag--vip, body.yellow-blue-dark .tan-audience-tag--vip, body.administrative-order-dark .tan-audience-tag--vip, body.organizational-dynamism-dark .tan-audience-tag--vip, body.collective-empathy-dark .tan-audience-tag--vip, body.innovative-thinking-dark .tan-audience-tag--vip, body.performance-transparency-dark .tan-audience-tag--vip, body.organized-city-navy-dark .tan-audience-tag--vip, body.calm-city-sky-dark .tan-audience-tag--vip, body.warm-city-brick-dark .tan-audience-tag--vip, body.order-in-service-dark .tan-audience-tag--vip, body.companionship-in-action-dark .tan-audience-tag--vip, body.focus-and-precision-dark .tan-audience-tag--vip, body.golden-blue-dark .tan-audience-tag--vip {
  color: rgb(var(--rgb-amber-500));
}

@media (max-width: 430px) {
  .tan-audience-grid {
    padding: 4px 4px 8px;
  }
  .tan-audience-meta {
    grid-template-columns: 1fr;
  }
  .tan-audience-actions-scroll {
    gap: 4px;
  }
  .tan-audience-act {
    height: 36px;
    font-size: 15px;
  }
  .tan-audience-actions-scroll > .tan-audience-act {
    flex-basis: 36px;
  }
}
/* ===================== تان: جستجوی ویجت‌ها روبه‌روی نوار تب‌ها (my/index.html) ===================== */
/* ردیفِ d-grid: تب‌ها یک طرف، دکمه‌ی جستجو طرفِ مقابل با بیشترین فاصله (معادلِ space-between در گرید) */
.d-grid.tan-tabs-search-row {
  grid-template-columns: minmax(0, max-content) auto;
  justify-content: space-between;
  align-items: stretch;
  column-gap: 12px;
  position: relative;
  z-index: 20;
}

.tan-tabs-search-row .tan-tabs-search {
  align-self: stretch;
}

/* پس‌زمینه، حاشیه و سایه‌ی دکمه دقیقا مثلِ خودِ نوار تب‌ها تا یک‌دست دیده بشن */
.tan-tabs-search-row .tan-tabs-search-btn {
  justify-content: center;
  height: 100%;
  min-height: 44px;
  aspect-ratio: 1/1;
  padding: 0;
  font-size: 18px;
  border-radius: 50%;
  background: rgb(var(--rgb-ninth-lighter));
  border: 1px solid rgba(var(--rgb-first), 0.12);
  box-shadow: 0 10px 30px -12px rgba(var(--rgb-first-darker), 0.25), 0 2px 6px rgba(var(--rgb-darkest), 0.04);
  transition: color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.tan-tabs-search-row .tan-tabs-search-btn i {
  transition: color 0.35s ease;
  color: rgb(var(--rgb-first-dark));
}

.tan-tabs-search-row .tan-tabs-search-btn:hover {
  /* همون هاورِ تب‌های scrollableTabs: لایه‌ی rgba(first, 0.08) روی پس‌زمینه‌ی نوار (با inset shadow تا ترنزیشن نرم داشته باشه) */
  box-shadow: inset 0 0 0 100px rgba(var(--rgb-first), 0.08), 0 10px 30px -12px rgba(var(--rgb-first-darker), 0.25), 0 2px 6px rgba(var(--rgb-darkest), 0.04);
}

.tan-tabs-search-row .tan-tabs-search-btn:hover i {
  color: rgb(var(--rgb-first-darker));
}

.tan-tabs-search-row .tan-tabs-search-btn:active {
  transform: scale(0.96);
}

/* وقتی #search_wrapper باز است: پس‌زمینه‌ی دکمه مثلِ tanScrollableTabsIndicator و آیکن سفید */
.tan-tabs-search-row .tan-tabs-search:has(#search_wrapper.show) .tan-tabs-search-btn {
  background: linear-gradient(135deg, rgb(var(--rgb-first)), rgb(var(--rgb-first-dark)));
  border-color: transparent;
  box-shadow: 0 6px 16px -4px rgba(var(--rgb-first), 0.55);
}

.tan-tabs-search-row .tan-tabs-search:has(#search_wrapper.show) .tan-tabs-search-btn i {
  color: rgb(var(--rgb-lightest));
}

/* هدرِ پریمیوم ۹۶px ارتفاع داره ولی دکمه‌ها بالا می‌شینن (align-items: start)؛ لوگوی وسط هم‌ترازِ دکمه‌ها (8px padding + 20px نصفِ دکمه) */
html header.my-header.tan-premium .tan-header-logo-center {
  top: 28px;
}

/* هدرِ پریمیوم مثلِ my.mahallat.ir: لایه‌ی my-header-bg به‌صورتِ گرادیانِ محو از رنگِ پس‌زمینه با blur و سایه
   (همون استایلِ body.my-new-body-content .my-header-bg، ولی فقط برای هدرِ پریمیوم) */
html header.my-header.tan-premium .my-header-bg {
  width: 100% !important;
  height: 96px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none !important;
  background: linear-gradient(to bottom, rgba(var(--rgb-ninth-lighter), 1) 0%, rgba(var(--rgb-ninth-lighter), 0) 100%) !important;
  backdrop-filter: blur(1.2px) !important;
  -webkit-backdrop-filter: blur(1.2px) !important;
  box-shadow: 0 4px 12px 1px rgba(var(--rgb-darkest), 0.1) !important;
  -webkit-mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 64%, rgba(0, 0, 0, 0.4) 82%, rgba(0, 0, 0, 0) 100%) !important;
  mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 64%, rgba(0, 0, 0, 0.4) 82%, rgba(0, 0, 0, 0) 100%) !important;
  transition: var(--my-sidebar-transition);
}

html header.my-header.tan-premium .my-header-bg > * {
  display: none;
}

html header.my-header.tan-premium:not(.show) .my-header-bg {
  opacity: 0;
}

/* داخلِ باکسِ جستجو، ظرفِ w-fit کلِ عرضِ باکس رو بگیره تا اینپوت دقیقا وسط بیفته (نه چسبیده به راست) */
.notifications > .w-fit {
  width: 100% !important;
}

/* تان: باکس‌های هدر (اعلان، جستجو، bolt) به دکمه‌ی خودشون لنگر می‌شن:
   فاصله‌ی بالا و جای مثلث با JS (tanAnchorHeaderPanels در my-main.js) حساب می‌شه تا
   مثلث دقیقا وسطِ آیکن باشه و باکس با اسکرول/تغییرِ اندازه زیرِ همون دکمه بمونه */
.notifications.tan-anchored {
  top: calc(var(--tan-anchor-top) - 8px);
  translate: var(--tan-anchor-dx, 0px) 0;
}
.notifications.tan-anchored.show {
  top: var(--tan-anchor-top);
}
.notifications.tan-anchored::before {
  left: var(--tan-arrow-x) !important;
  right: auto !important;
}

/* تان: آیکنِ کنارِ عنوانِ سکشن هم‌قدِ نوارِ تبِ کنارش (کارتابل و ...) */
.section > .section-header:has(.drop-tab-group .drop-tab) > div:first-child > img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

body.my-new-body-content section.main .section > .section-header:has(.drop-tab-group .drop-tab) > div:first-child > img {
  width: 48px;
  height: 48px;
}

/* نوار جستجو: از کنار دکمهٔ جستجو باز می‌شود و روی سربرگ بخش قرار می‌گیرد؛ انیمیشن باز و بسته شدن در my-main.js است */
body.my-new-body-content section.main .section > #searchCollapse.tan-searchCollapse {
  /* روی سربرگ می‌نشیند و اگر فیلدها چندردیفه شوند جدول را پایین می‌برد، نه اینکه رویش بیفتد */
  position: relative;
  z-index: 100;
  align-items: center;
  min-height: 60px;
  margin: -60px 0 8px !important;
  padding: 12px 16px !important;
  padding-inline-end: 72px !important;
  background-color: rgb(var(--rgb-ninth-lighter));
  border-bottom: 1px solid rgba(var(--rgb-dark), 0.12);
  box-shadow: 0 8px 16px -10px rgba(var(--rgb-dark), 0.25);
}

body.my-new-body-content section.main .section > #searchCollapse.tan-searchCollapse.show {
  display: flex;
}

body.my-new-body-content section.main .section > #searchCollapse.tan-searchCollapse > .col-12 {
  flex: 1;
  min-width: 0;
}

body.my-new-body-content section.main .section > #searchCollapse.tan-searchCollapse #search_submitform {
  row-gap: 12px;
}

body.my-new-body-content section.main .section > #searchCollapse.tan-searchCollapse #search_submitform > .my-2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.my-new-body-content section.main .section:has(> .tan-searchCollapse.show) > .mx-box:not(#searchCollapse):has(> button[data-bs-target]) > button {
  box-shadow: 0 0 0 4px rgb(var(--main-bg)), 0 2px 8px 4px rgba(var(--rgb-first), 0.35);
}

@media only screen and (max-width: 768px) {
  body.my-new-body-content section.main .section > #searchCollapse.tan-searchCollapse {
    min-height: 56px;
    margin-top: -64px !important;
    padding: 10px !important;
    padding-inline-end: 60px !important;
  }
}
/* زیر my-new-body-content نشانگرِ tan-tabs-ref (main.js) با اسلایدرِ نوار جدید تداخل دارد */
body.my-new-body-content #nav-tab.tan-tabs-ref > ul > .tan-scrollable-tabs-indicator {
  display: none;
}

/* صفحه‌هایی که #main-content ندارند (مثل my/messages): wrapperِ مستقیمِ section.main هم مثل #main-content پدینگ نمی‌گیرد تا سکشن کل صفحه را پر کند */
body.my-new-body-content section.main > div:not(#main-content):has(> .section) {
  min-height: 100%;
  padding: 0 !important;
}

/* حالت my-new-body-content نباید بوردر اضافه کند: خط بالای فوتر سکشن و دور دکمه‌های صفحه‌بندی برداشته می‌شوند */
body.my-new-body-content section.main .section > .section-footer {
  border-top: none;
}

body.my-new-body-content section.main .section > .section-footer ul.pagination li a {
  border: none;
}

/* پشت سکشن‌ها هم‌رنگ خودِ سکشن است تا فاصله‌ی بین سکشن‌ها (gap) دیده نشود */
body.my-new-body-content main.my-main {
  background-color: rgb(var(--rgb-ninth-lighter));
}

/* ردیف‌های جدول shp یکی‌درمیان: ردیف اول رنگ ملایم rgb-darker، ردیف دوم همان رنگ hover؛ hover ردیف دوم کمی پررنگ‌تر */
body.my-new-body-content .shp-tbody .shp-tr:nth-child(odd) .shp-td {
  background-color: rgb(var(--rgb-darker), 0.03);
}

body.my-new-body-content .shp-tbody .shp-tr:nth-child(even) .shp-td,
body.my-new-body-content .shp-tbody .shp-tr:nth-child(odd):hover .shp-td {
  background-color: rgb(var(--rgb-first-lighter), 0.3);
}

body.my-new-body-content .shp-tbody .shp-tr:nth-child(even):hover .shp-td {
  background-color: rgb(var(--rgb-first-lighter), 0.55);
}

/* ===== تان: مودال دوربین فرم ===== */
/* تا وقتی دوربین وصل نشده (پنجره اجازه باز است یا اجازه نیست) باکس دوربین ارتفاع ثابت و معقول دارد
   و پنهان نمی‌شود؛ display:none روی خود video را هم با !important برمی‌گرداند */
html .video-wrapper.tan-camera-waiting .video-element,
html .video-wrapper.tan-camera-off .video-element {
  display: block !important;
  width: 100%;
  height: min(55vh, 420px) !important;
  min-height: 260px;
  object-fit: cover;
  background-color: rgb(var(--rgb-zinc-900));
}

html .video-wrapper .tan-camera-placeholder {
  display: none;
}

html .video-wrapper.tan-camera-waiting .tan-camera-placeholder,
html .video-wrapper.tan-camera-off .tan-camera-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(55vh, 420px);
  min-height: 260px;
  padding: 16px 16px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: rgb(var(--rgb-white), 0.75);
  pointer-events: none;
}

html .video-wrapper .tan-camera-placeholder i {
  font-size: 32px;
  color: rgb(var(--rgb-white), 0.6);
}

/* دکمه‌های عکس / فیلم مثل تب‌های مرجع (.tan-tabs-ref): متن کم‌رنگ و قرص گرادیانی لغزان زیر تب فعال */
html .tan-camera-mode-tabs {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html .tan-camera-mode-tabs > .tan-camera-mode-btn {
  position: relative;
  z-index: 1;
  min-width: 98px;
  margin: 0 !important;
  padding: 8px 13px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent !important;
  border-radius: var(--radius-xl) !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: rgb(var(--rgb-dark), 0.5) !important;
  font-weight: normal;
  line-height: normal;
  white-space: nowrap;
  transition: color 0.3s ease;
}

html .tan-camera-mode-tabs > .tan-camera-mode-btn::before,
html .tan-camera-mode-tabs > .tan-camera-mode-btn::after {
  content: none !important;
}

html .tan-camera-mode-tabs > .tan-camera-mode-btn:hover:not(.active) {
  opacity: 0.7;
}

html .tan-camera-mode-tabs > .tan-camera-mode-btn.active {
  color: rgb(var(--rgb-white)) !important;
  font-weight: 600;
}

html .tan-camera-mode-tabs > .tan-camera-mode-btn.active i {
  color: inherit !important;
}

html .tan-camera-mode-tabs > .tan-camera-mode-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgb(var(--rgb-first)), rgb(var(--rgb-first-dark)));
  border-radius: var(--radius-xl);
  transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* News sliders (.tan-news-*) start: home page news/content widgets, Swiper setup in my-main.js tanInitNewsSliders() */
.tan-news-widget {
  overflow: hidden;
}
.tan-news-widget .section-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tan-news-widget .section-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tan-news-widget .section-body > * {
  flex: 1 1 auto;
  min-height: 0;
}
.tan-news-widget .swiper {
  width: 100%;
  height: 100%;
}
.tan-news-widget img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tan-news-widget a {
  color: inherit;
  text-decoration: none;
}
.tan-news-widget button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
}

.tan-news-head-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background-color: rgb(var(--rgb-first-lighter));
  color: rgb(var(--rgb-first));
  font-size: 15px;
}

/* Shared parts */
.tan-news-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background-color: rgb(var(--rgb-first));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}
.tan-news-pill.is-red {
  background-color: #e5262b;
}
.tan-news-pill.is-orange {
  background-color: #f97316;
}
.tan-news-pill.is-green {
  background-color: #2fb52f;
}
.tan-news-pill.is-cyan {
  background-color: #20a8d8;
}
.tan-news-pill.is-blue {
  background-color: #3b5bdb;
}
.tan-news-pill.is-purple {
  background-color: #7c3aed;
}
.tan-news-pill.is-pink {
  background-color: #db2777;
}

.tan-news-avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgb(var(--rgb-light));
  color: rgb(var(--rgb-light-dark));
  font-size: 13px;
}
.tan-news-avatar.sm {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
.tan-news-avatar.lg {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 16px;
}

.tan-news-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff !important;
  color: #111 !important;
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%);
  transition: transform 0.2s, opacity 0.2s;
  cursor: pointer;
}
.tan-news-arrow:hover {
  transform: translateY(-50%) scale(1.08);
}
.tan-news-arrow.tan-news-prev {
  inset-inline-start: 20px;
}
.tan-news-arrow.tan-news-next {
  inset-inline-end: 20px;
}

/* Caption over a dark image: category, title, author/date */
.tan-news-caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 80px 40px 32px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.45) 60%, transparent);
  color: #fff;
}
.tan-news-caption p {
  margin: 0;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.9;
}

.tan-news-caption-title {
  margin: 0;
  max-width: 760px;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.6;
}
.tan-news-caption-title a {
  font-size: inherit;
  line-height: inherit;
}
.tan-news-caption-title a:hover {
  color: rgba(255, 255, 255, 0.85);
}

.tan-news-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.tan-news-byline > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: rgba(255, 255, 255, 0.8);
}
.tan-news-byline a {
  color: rgb(var(--rgb-first-light));
  font-weight: 600;
}

.tan-news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
}
.tan-news-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Pagination dots; .is-pill makes the active one a long pill */
.tan-news-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto !important;
  padding-top: 14px;
}
.tan-news-dots .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  border-radius: var(--radius-full);
  background-color: rgb(var(--rgb-light));
  opacity: 1;
  transition: width 0.3s, background-color 0.3s;
}
.tan-news-dots .swiper-pagination-bullet-active {
  background-color: rgb(var(--rgb-first));
}

/* 1. List + hero: the list item of the shown slide is highlighted */
.tan-news-spotlight {
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
}
@media only screen and (min-width: 992px) {
  .tan-news-spotlight {
    flex-direction: row;
  }
}

.tan-news-spotlight-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
@media only screen and (min-width: 992px) {
  .tan-news-spotlight-list {
    flex: 0 0 34%;
    justify-content: space-between;
  }
}

.tan-news-spotlight-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 12px !important;
  border-radius: var(--radius-sm);
  color: rgb(var(--rgb-darker));
  text-align: start;
  white-space: normal;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
.tan-news-spotlight-item > img {
  flex-shrink: 0;
  width: 64px !important;
  height: 64px !important;
  border-radius: var(--radius-sm);
}
.tan-news-spotlight-item .tan-news-avatar {
  align-self: flex-end;
}
.tan-news-spotlight-item:hover {
  background-color: rgba(var(--rgb-darkest), 0.04) !important;
}
.tan-news-spotlight-item.active {
  background-color: rgb(var(--rgb-first)) !important;
  color: #fff !important;
}
.tan-news-spotlight-item.active .tan-news-spotlight-time {
  color: rgba(255, 255, 255, 0.85) !important;
}
.tan-news-spotlight-item.active .tan-news-avatar {
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.tan-news-spotlight-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
  min-width: 0;
}

.tan-news-spotlight-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.8;
}

.tan-news-spotlight-time {
  color: rgb(var(--rgb-light-dark));
  font-size: 11px;
}

.tan-news-spotlight-hero {
  position: relative;
  flex: 0 0 280px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: #111;
}
@media only screen and (min-width: 992px) {
  .tan-news-spotlight-hero {
    flex: 1 1 auto;
  }
}
.tan-news-spotlight-hero .tan-news-caption {
  padding-inline: 24px;
  padding-bottom: 24px;
}
@media only screen and (max-width: 991px) {
  .tan-news-spotlight-hero .tan-news-caption-title {
    font-size: 17px;
  }
  .tan-news-spotlight-hero .tan-news-arrow {
    top: 32px;
    width: 32px;
    height: 32px;
  }
}

/* 2. Split cards: text beside image, square arrows outside, dots below */
.tan-news-split {
  display: flex;
  flex-direction: column;
}

.tan-news-split-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding-inline: 34px;
}
.tan-news-split-stage .swiper-slide {
  height: auto;
}

.tan-news-split-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 170px 1fr;
  height: 100%;
  background-color: rgb(var(--rgb-lighter));
  border: 1px solid rgba(var(--rgb-darkest), 0.06);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.tan-news-split-card > img {
  grid-row: 1;
}
@media only screen and (min-width: 576px) {
  .tan-news-split-card {
    grid-template-columns: 1fr 40%;
    grid-template-rows: 1fr;
  }
  .tan-news-split-card > img {
    grid-row: auto;
  }
}

.tan-news-split-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  padding: 20px 24px;
  overflow: hidden;
}
@media only screen and (max-width: 575px) {
  .tan-news-split-text {
    justify-content: flex-start;
    padding: 14px 16px;
  }
}

.tan-news-split-cat {
  color: rgb(var(--rgb-light-dark));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.tan-news-split-title {
  margin: 0;
  color: rgb(var(--rgb-darker));
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.tan-news-split-excerpt {
  margin: 0;
  color: rgb(var(--rgb-light-dark));
  font-size: 13px;
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tan-news-split-btn {
  margin-top: 8px;
  padding: 9px 22px;
  border-radius: var(--radius-sm);
  background-color: rgb(var(--rgb-first));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: background-color 0.2s;
}
.tan-news-split-btn:hover {
  background-color: rgb(var(--rgb-first-dark));
}

.tan-news-square-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background-color: rgb(var(--rgb-first)) !important;
  color: #fff !important;
  font-size: 14px;
  transform: translateY(-50%);
  cursor: pointer;
}
.tan-news-square-arrow.tan-news-prev {
  inset-inline-start: 0;
}
.tan-news-square-arrow.tan-news-next {
  inset-inline-end: 0;
}

/* 3. Cards with a date badge, author/comments and a two-tone underline */
.tan-news-date-slider {
  padding-bottom: 4px !important;
}
.tan-news-date-slider .swiper-slide {
  height: auto;
}

.section-body:has(> .tan-news-date-slider) {
  position: relative;
}
.section-body:has(> .tan-news-date-slider) > .tan-news-arrow {
  width: 38px;
  height: 38px;
  font-size: 13px;
}
.section-body:has(> .tan-news-date-slider) > .tan-news-arrow.tan-news-prev {
  inset-inline-start: 6px;
}
.section-body:has(> .tan-news-date-slider) > .tan-news-arrow.tan-news-next {
  inset-inline-end: 6px;
}

.tan-news-date-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: rgb(var(--rgb-lighter));
  border-bottom: 3px solid rgb(var(--rgb-first));
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 6px rgba(var(--rgb-darkest), 0.06);
  overflow: hidden;
}

.tan-news-date-card-img {
  position: relative;
  flex: 0 0 auto;
  height: 160px;
  overflow: hidden;
}
.tan-news-date-card-img img {
  transition: transform 0.4s;
}
.tan-news-date-card-img:hover img {
  transform: scale(1.05);
}

.tan-news-date-badge {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  padding: 6px 8px;
  background-color: rgb(var(--rgb-first));
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
}
.tan-news-date-badge b {
  font-size: 20px;
  font-weight: 700;
}

.tan-news-date-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
  padding: 14px 4px 16px;
}
.tan-news-date-card-body p {
  margin: 0;
  color: rgb(var(--rgb-light-dark));
  font-size: 12px;
  line-height: 1.9;
}

.tan-news-date-card-title {
  margin: 0;
  color: rgb(var(--rgb-darker));
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
}
.tan-news-date-card-title a {
  font-size: inherit;
}
.tan-news-date-card-title a:hover {
  color: rgb(var(--rgb-first));
}

.tan-news-date-card-meta {
  display: flex;
  gap: 16px;
  color: rgb(var(--rgb-light-dark));
  font-size: 11px;
}
.tan-news-date-card-meta a,
.tan-news-date-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tan-news-date-card-meta a {
  color: rgb(var(--rgb-first));
}
.tan-news-date-card-meta i {
  font-size: 9px;
  color: rgb(var(--rgb-light-dark));
}

.tan-news-date-card-line {
  width: 34px;
  height: 2px;
  background: linear-gradient(to left, rgb(var(--rgb-first)) 50%, #20c4cb 50%);
}

/* 4. Magazine grid: one lead card and four small cards */
.tan-news-mag {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1.4fr 1fr 1fr;
  gap: 16px;
}
@media only screen and (min-width: 992px) {
  .tan-news-mag {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
  }
}

.tan-news-mag-card {
  position: relative;
  display: block;
  min-height: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: #111;
  color: #fff;
}
.tan-news-mag-card > img {
  position: absolute;
  inset: 0;
  transition: transform 0.5s;
}
.tan-news-mag-card:hover > img {
  transform: scale(1.05);
}
.tan-news-mag-card .tan-news-pill {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  padding: 2px 10px;
  font-size: 11px;
}

.tan-news-mag-lead {
  grid-column: 1/-1;
}
@media only screen and (min-width: 992px) {
  .tan-news-mag-lead {
    grid-column: auto;
    grid-row: span 2;
  }
}

.tan-news-mag-content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 60px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}
.tan-news-mag-content h3,
.tan-news-mag-content h4 {
  margin: 0;
  color: #fff;
  font-weight: 700;
}
.tan-news-mag-content h4 {
  font-size: 14px;
  line-height: 1.9;
}
.tan-news-mag-content h3 {
  font-size: 20px;
  line-height: 1.7;
}
.tan-news-mag-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1.9;
}

.tan-news-mag-lead .tan-news-mag-content {
  padding: 80px 24px 20px;
}
@media only screen and (max-width: 767px) {
  .tan-news-mag-lead .tan-news-mag-content h3 {
    font-size: 16px;
  }
  .tan-news-mag-lead .tan-news-mag-content p {
    display: none !important;
  }
}

/* 5. Full-width hero: category, source, title, excerpt, side arrows, pill dots */
.tan-news-hero {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: #111;
}
.tan-news-hero .tan-news-arrow {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  width: 56px;
  height: 56px;
  font-size: 18px;
  box-shadow: none;
  backdrop-filter: blur(4px);
}
.tan-news-hero .tan-news-arrow:hover {
  background-color: rgba(255, 255, 255, 0.4) !important;
}
.tan-news-hero .tan-news-caption {
  padding: 100px 48px 56px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 55%, transparent);
}
.tan-news-hero .tan-news-pill {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background-color: #e8445a;
  font-size: 13px;
}
.tan-news-hero .tan-news-dots {
  position: absolute;
  inset: auto 0 18px 0;
  z-index: 3;
  padding: 0;
}
.tan-news-hero .tan-news-dots .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.45);
}
.tan-news-hero .tan-news-dots .swiper-pagination-bullet-active {
  width: 36px;
  background-color: #e8445a;
}
@media only screen and (max-width: 767px) {
  .tan-news-hero .tan-news-caption {
    padding: 60px 20px 44px;
  }
  .tan-news-hero .tan-news-caption-title {
    font-size: 17px;
  }
  .tan-news-hero .tan-news-arrow {
    top: 36px;
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
}

.tan-news-source {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

/* 6. Hero with a stacked arrow pair and a thumbnail strip with an active pointer */
.tan-news-thumbs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tan-news-thumbs-main {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: #111;
}
.tan-news-thumbs-main .tan-news-caption {
  align-items: flex-start;
  padding: 80px 0 48px;
  padding-inline: 48px 120px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
}
.tan-news-thumbs-main .tan-news-caption-title {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .tan-news-thumbs-main .tan-news-caption {
    padding: 60px 0 24px;
    padding-inline: 20px 64px;
  }
  .tan-news-thumbs-main .tan-news-caption-title {
    font-size: 18px;
  }
}

.tan-news-tag {
  padding: 4px 10px;
  background-color: #f5111f;
  color: #fff;
  font-size: 12px;
}

.tan-news-thumbs-meta {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
}
.tan-news-thumbs-meta b {
  margin-inline: 4px 8px;
  font-weight: 700;
}

.tan-news-stack-arrows {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.tan-news-stack-arrows button {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transform: translateY(-50%);
  pointer-events: auto;
  cursor: pointer;
  transition: filter 0.2s, transform 0.2s;
}
.tan-news-stack-arrows button:hover {
  filter: brightness(0.92);
  transform: translateY(-50%) scale(1.06);
}
.tan-news-stack-arrows .tan-news-next {
  inset-inline-end: 16px;
  background-color: #f5111f !important;
  color: #fff !important;
}
.tan-news-stack-arrows .tan-news-prev {
  inset-inline-start: 16px;
  background-color: #fff !important;
  color: #222 !important;
}
@media only screen and (max-width: 767px) {
  .tan-news-stack-arrows button {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .tan-news-stack-arrows .tan-news-next {
    inset-inline-end: 10px;
  }
  .tan-news-stack-arrows .tan-news-prev {
    inset-inline-start: 10px;
  }
}

.tan-news-thumbs-strip {
  flex: 0 0 auto !important;
  height: auto !important;
  padding-top: 12px !important;
  margin-top: -12px;
}
.tan-news-thumbs-strip .swiper-slide {
  position: relative;
  height: 96px;
  cursor: pointer;
  /* Pointer that points up at the hero */
}
.tan-news-thumbs-strip .swiper-slide img {
  border-radius: var(--radius-md);
}
@media only screen and (max-width: 767px) {
  .tan-news-thumbs-strip .swiper-slide {
    height: 60px;
  }
}
.tan-news-thumbs-strip .swiper-slide::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  z-index: 1;
  border: 12px solid transparent;
  border-top-color: rgb(var(--rgb-ninth-lighter));
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  transition: transform 0.25s;
}
.tan-news-thumbs-strip .swiper-slide-thumb-active::before {
  transform: translateX(-50%) scaleY(1);
}

/* 7. Breaking news ticker */
.tan-news-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding-inline-end: 10px;
  border-radius: var(--radius-xl);
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 0 0 10px 0 rgba(var(--rgb-darkest), 0.06);
  overflow: hidden;
}
.tan-news-ticker .swiper {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
}
.tan-news-ticker .swiper-slide {
  display: flex;
  align-items: center;
  color: rgb(var(--rgb-darker));
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tan-news-ticker .swiper-slide:hover {
  color: rgb(var(--rgb-first));
}

.tan-news-ticker-label {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  flex-shrink: 0;
  padding-inline: 20px;
  background-color: rgb(var(--rgb-first));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.tan-news-ticker-label i {
  animation: tan-news-blink 1.2s infinite;
}

@keyframes tan-news-blink {
  50% {
    opacity: 0.3;
  }
}
.tan-news-ticker-nav,
.tan-news-vlist-nav {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.tan-news-ticker-nav button,
.tan-news-vlist-nav button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(var(--rgb-darkest), 0.12) !important;
  border-radius: var(--radius-sm);
  background: none;
  color: rgb(var(--rgb-dark));
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.tan-news-ticker-nav button:hover,
.tan-news-vlist-nav button:hover {
  background-color: rgb(var(--rgb-first)) !important;
  border-color: rgb(var(--rgb-first)) !important;
  color: #fff !important;
}

/* 8. Vertical list slider (most viewed) */
.tan-news-vlist-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 6px;
  border-bottom: 1px dashed rgba(var(--rgb-darkest), 0.1);
}
.tan-news-vlist-item > img {
  flex-shrink: 0;
  width: 96px !important;
  height: 64px !important;
  border-radius: var(--radius-sm);
}
.tan-news-vlist-item:hover .two-lines-only {
  color: rgb(var(--rgb-first));
}

.tan-news-vlist-rank {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(var(--rgb-first-lighter));
  color: rgb(var(--rgb-first));
  font-size: 14px;
  font-weight: 700;
}

.tan-news-vlist-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
  min-width: 0;
  color: rgb(var(--rgb-darker));
  font-size: 13px;
  font-weight: 600;
  line-height: 1.8;
}

.tan-news-vlist-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgb(var(--rgb-light-dark));
  font-size: 11px;
  font-weight: normal;
}
.tan-news-vlist-meta i:not(:first-child) {
  margin-inline-start: 10px;
}

/* 9. Coverflow gallery */
.tan-news-cover {
  display: flex;
  flex-direction: column;
}
.tan-news-cover .swiper {
  flex: 1 1 auto;
  min-height: 0;
  padding-block: 6px;
}
.tan-news-cover .swiper-slide {
  position: relative;
  width: 72%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: #111;
  transition-property: transform, opacity, filter;
  /* Side slides stay in the back, faded */
  /* Small screens: portrait 3:4 slides */
}
.tan-news-cover .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.35;
  filter: grayscale(0.4) brightness(0.75);
}
@media only screen and (max-width: 767px) {
  .tan-news-cover .swiper-slide {
    width: auto;
    aspect-ratio: 3/4;
  }
}
.tan-news-cover .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 55%);
  pointer-events: none;
}

.tan-news-cover-title {
  position: absolute;
  inset: auto 16px 14px 16px;
  z-index: 1;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
}
.swiper-slide-active .tan-news-cover-title {
  opacity: 1;
  transform: none;
}

/* Dark themes: lighter accents on dark boxes */
body.dark .tan-news-byline a,
body.dark .tan-news-date-card-meta a, body.faragard-dark .tan-news-byline a,
body.faragard-dark .tan-news-date-card-meta a, body.blue-dark .tan-news-byline a,
body.blue-dark .tan-news-date-card-meta a, body.orange-dark .tan-news-byline a,
body.orange-dark .tan-news-date-card-meta a, body.fuchsia-dark .tan-news-byline a,
body.fuchsia-dark .tan-news-date-card-meta a, body.pink-dark .tan-news-byline a,
body.pink-dark .tan-news-date-card-meta a, body.emerald-dark .tan-news-byline a,
body.emerald-dark .tan-news-date-card-meta a, body.red-dark .tan-news-byline a,
body.red-dark .tan-news-date-card-meta a, body.sky-dark .tan-news-byline a,
body.sky-dark .tan-news-date-card-meta a, body.yellow-dark .tan-news-byline a,
body.yellow-dark .tan-news-date-card-meta a, body.green-dark .tan-news-byline a,
body.green-dark .tan-news-date-card-meta a, body.purple-dark .tan-news-byline a,
body.purple-dark .tan-news-date-card-meta a, body.indigo-dark .tan-news-byline a,
body.indigo-dark .tan-news-date-card-meta a, body.slate-dark .tan-news-byline a,
body.slate-dark .tan-news-date-card-meta a, body.yellow-blue-dark .tan-news-byline a,
body.yellow-blue-dark .tan-news-date-card-meta a, body.administrative-order-dark .tan-news-byline a,
body.administrative-order-dark .tan-news-date-card-meta a, body.organizational-dynamism-dark .tan-news-byline a,
body.organizational-dynamism-dark .tan-news-date-card-meta a, body.collective-empathy-dark .tan-news-byline a,
body.collective-empathy-dark .tan-news-date-card-meta a, body.innovative-thinking-dark .tan-news-byline a,
body.innovative-thinking-dark .tan-news-date-card-meta a, body.performance-transparency-dark .tan-news-byline a,
body.performance-transparency-dark .tan-news-date-card-meta a, body.organized-city-navy-dark .tan-news-byline a,
body.organized-city-navy-dark .tan-news-date-card-meta a, body.calm-city-sky-dark .tan-news-byline a,
body.calm-city-sky-dark .tan-news-date-card-meta a, body.warm-city-brick-dark .tan-news-byline a,
body.warm-city-brick-dark .tan-news-date-card-meta a, body.order-in-service-dark .tan-news-byline a,
body.order-in-service-dark .tan-news-date-card-meta a, body.companionship-in-action-dark .tan-news-byline a,
body.companionship-in-action-dark .tan-news-date-card-meta a, body.focus-and-precision-dark .tan-news-byline a,
body.focus-and-precision-dark .tan-news-date-card-meta a, body.golden-blue-dark .tan-news-byline a,
body.golden-blue-dark .tan-news-date-card-meta a {
  color: rgb(var(--rgb-first-darker)) !important;
}

/* Video slides: the video fills the slide like an image; thumbnails get a play badge */
.tan-news-widget video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

.tan-news-video-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* News sliders (.tan-news-*) end */
/* News slider lightbox: the big image of the hero sliders opens the gallery (tanNewsLightGallery() in my-main.js) */
.tan-news-hero .swiper-slide,
.tan-news-thumbs-main .swiper-slide {
  cursor: zoom-in;
}

.tan-news-hero .tan-player,
.tan-news-thumbs-main .tan-player {
  cursor: default;
}

/* Video slides: the news caption steps aside while the player controls or subtitles are on screen */
.tan-player ~ .tan-news-caption {
  transition: opacity 0.3s, transform 0.3s;
}

.tan-player.is-ui ~ .tan-news-caption,
.tan-player.is-playing.has-cc ~ .tan-news-caption {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.tan-news-hero .tan-news-dots {
  transition: opacity 0.25s;
}

.tan-news-hero:has(.swiper-slide-active .tan-player.is-ui) .tan-news-dots {
  opacity: 0;
  pointer-events: none;
}

.tan-news-thumbs-main .tan-player-bar {
  left: 64px;
}

/* Subtitles clear the hero dots and the stacked arrows */
.tan-news-hero .tan-player-captions {
  bottom: 46px;
}

.tan-news-thumbs-main .tan-player-captions {
  left: 72px;
}

@media only screen and (max-width: 767px) {
  .tan-news-thumbs-main .tan-player-bar {
    left: 46px;
  }
  .tan-news-thumbs-main .tan-player-captions {
    left: 54px;
  }
}
/* Video player (.tan-player) start: tanVideoPlayer() in my-main.js */
.tan-player {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: #000;
  color: #fff;
  direction: ltr;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tan-player:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(var(--rgb-first));
}

.tan-player video {
  display: block;
  width: 100%;
}

.tan-news-widget .tan-player {
  height: 100%;
}

.tan-player [hidden] {
  display: none !important;
}

.tan-player.is-full {
  width: 100%;
  height: 100%;
}

.tan-player.is-full video {
  height: 100% !important;
  object-fit: contain !important;
}

/* Subtitles */
.tan-player-captions {
  position: absolute;
  inset: auto 5% 18px 5%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  pointer-events: none;
  transition: bottom 0.25s;
}

.tan-player-captions span {
  max-width: 100%;
  padding: 2px 10px;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: clamp(13px, 2vw, 20px);
  line-height: 1.8;
  white-space: pre-line;
}

.tan-player.is-ui .tan-player-captions {
  bottom: 84px;
}

.tan-player.is-full .tan-player-captions span {
  font-size: clamp(16px, 2.6vw, 32px);
}

/* Big play button and loading spinner */
.tan-player .tan-player-big {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 22px;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: opacity 0.25s, transform 0.25s, background-color 0.2s;
}

.tan-player .tan-player-big:hover {
  background-color: rgb(var(--rgb-first));
  transform: translate(-50%, -50%) scale(1.06);
}

.tan-player.is-playing .tan-player-big,
.tan-player.is-waiting .tan-player-big,
.tan-player.is-error .tan-player-big {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  pointer-events: none;
}

.tan-player-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: tan-player-spin 0.8s linear infinite;
  transition: opacity 0.2s;
}

.tan-player.is-waiting .tan-player-loader {
  opacity: 1;
}

@keyframes tan-player-spin {
  to {
    transform: rotate(360deg);
  }
}
.tan-player.is-error::after {
  content: "پخش این ویدیو ممکن نیست";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  padding: 6px 14px;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 13px;
  white-space: nowrap;
  direction: rtl;
  transform: translate(-50%, -50%);
}

/* Control bar */
.tan-player-bar {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 24px 10px 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) 65%, transparent);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}

.tan-player.is-ui .tan-player-bar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.tan-player-progress {
  position: relative;
  display: flex;
  align-items: center;
  height: 16px;
  margin-inline: 6px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}

.tan-player-track {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transition: height 0.15s;
}

.tan-player-progress:hover .tan-player-track,
.tan-player.is-seeking .tan-player-track {
  height: 6px;
}

.tan-player-buffer,
.tan-player-played {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
}

.tan-player-buffer {
  background-color: rgba(255, 255, 255, 0.4);
}

.tan-player-played {
  background-color: rgb(var(--rgb-first));
}

.tan-player-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: rgb(var(--rgb-first));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s;
}

.tan-player-progress:hover .tan-player-thumb,
.tan-player-progress:focus-visible .tan-player-thumb,
.tan-player.is-seeking .tan-player-thumb {
  transform: translate(-50%, -50%) scale(1);
}

.tan-player-tip {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  padding: 1px 7px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.8);
  font-size: 11px;
  line-height: 1.7;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 0.15s;
}

.tan-player-progress:hover .tan-player-tip,
.tan-player.is-seeking .tan-player-tip {
  opacity: 1;
}

.tan-player-row {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.tan-player .tan-player-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.tan-player .tan-player-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.tan-player .tan-player-btn.active {
  color: rgb(var(--rgb-first-light));
}

.tan-player .tan-player-btn svg {
  width: 18px;
  height: 18px;
}

.tan-player-time {
  margin-inline: 6px;
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tan-player-space {
  flex: 1 1 auto;
}

.tan-player-volume {
  display: flex;
  align-items: center;
}

.tan-player .tan-player-vol {
  width: 0;
  height: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(to right, #fff var(--tan-vol, 100%), rgba(255, 255, 255, 0.3) var(--tan-vol, 100%));
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: width 0.2s, opacity 0.2s, margin 0.2s;
}

.tan-player-volume:hover .tan-player-vol,
.tan-player .tan-player-vol:focus-visible {
  width: 70px;
  margin-inline: 2px 6px;
  opacity: 1;
}

.tan-player .tan-player-vol::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background-color: #fff;
  -webkit-appearance: none;
}

.tan-player .tan-player-vol::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background-color: #fff;
}

/* Subtitle and speed menus */
.tan-player-menu-wrap {
  position: relative;
}

.tan-player-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 2;
  display: none;
  flex-direction: column;
  min-width: 140px;
  max-height: 220px;
  padding: 6px;
  border-radius: 10px;
  background-color: rgba(20, 20, 20, 0.92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}

.tan-player-menu-wrap.open .tan-player-menu {
  display: flex;
}

.tan-player-menu-title {
  padding: 4px 10px 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

.tan-player .tan-player-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #fff;
  font-size: 13px;
  text-align: start;
  cursor: pointer;
}

.tan-player .tan-player-menu button:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.tan-player .tan-player-menu button.active::after {
  content: "✓";
  color: rgb(var(--rgb-first-light));
}

@media only screen and (max-width: 575px) {
  .tan-player .tan-player-btn {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .tan-player .tan-player-btn[data-act=back],
  .tan-player .tan-player-btn[data-act=fwd],
  .tan-player .tan-player-btn[data-act=pip] {
    display: none;
  }
  .tan-player-time {
    margin-inline: 2px;
    font-size: 11px;
  }
  .tan-player .tan-player-big {
    width: 52px;
    height: 52px;
    font-size: 18px;
  }
}
/* Video player (.tan-player) end */
/* News ticker (.tan-ticker) start */
/* Options of tanTicker() in my-main.js arrive here as css variables */
.tan-ticker {
  --tan-ticker-height: 40px;
  --tan-ticker-font-size: 14px;
  --tan-ticker-border-width: 1px;
  --tan-ticker-radius: 12px;
  --tan-ticker-color: rgb(var(--rgb-first));
  --tan-ticker-bg: rgb(var(--rgb-ninth-lighter));
  --tan-ticker-z: 1030;
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: var(--tan-ticker-height);
  border: var(--tan-ticker-border-width) solid var(--tan-ticker-color);
  border-radius: var(--tan-ticker-radius);
  background: var(--tan-ticker-bg);
  font-size: var(--tan-ticker-font-size);
  line-height: 1;
  overflow: hidden;
  /* Fixed positions */
  /* Ready-made theme colors */
  /* No background */
}
.tan-ticker.tan-ticker-fixed-top, .tan-ticker.tan-ticker-fixed-bottom {
  position: fixed;
  inset-inline: 0;
  z-index: var(--tan-ticker-z);
  width: auto;
  border-radius: 0;
  border-inline-width: 0;
  box-shadow: 0 0 16px 0 rgba(var(--rgb-darkest), 0.12);
}
.tan-ticker.tan-ticker-fixed-top {
  top: 0;
  border-top-width: 0;
}
.tan-ticker.tan-ticker-fixed-bottom {
  bottom: 0;
  border-bottom-width: 0;
}
.tan-ticker.tan-ticker-second {
  --tan-ticker-color: rgb(var(--rgb-second));
}
.tan-ticker.tan-ticker-danger {
  --tan-ticker-color: rgb(var(--rgb-red-600));
}
.tan-ticker.tan-ticker-success {
  --tan-ticker-color: rgb(var(--rgb-green-600));
}
.tan-ticker.tan-ticker-info {
  --tan-ticker-color: rgb(var(--rgb-blue-600));
}
.tan-ticker.tan-ticker-warning {
  --tan-ticker-color: rgb(var(--rgb-amber-500));
}
.tan-ticker.tan-ticker-dark {
  --tan-ticker-color: rgb(var(--rgb-darker));
}
.tan-ticker.tan-ticker-transparent {
  --tan-ticker-bg: transparent;
  --tan-ticker-border-width: 0;
}

.tan-ticker-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-inline: 16px;
  background-color: var(--tan-ticker-color);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  /* Arrow that points at the news */
}
.tan-ticker-label::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 100%;
  border: 7px solid transparent;
  border-inline-start-color: var(--tan-ticker-color);
  transform: translateY(-50%);
}
.tan-ticker-label i {
  animation: tan-news-blink 1.2s infinite;
}

.tan-ticker-news {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.tan-ticker-news ul {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tan-ticker-news li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 100%;
  padding-inline: 16px;
  color: rgb(var(--rgb-darker));
  font-weight: 500;
  white-space: nowrap;
}
.tan-ticker-news a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.tan-ticker-news a:hover {
  color: var(--tan-ticker-color);
}
.tan-ticker-news.is-loading li,
.tan-ticker-news .tan-ticker-error {
  color: rgb(var(--rgb-light-dark));
}

/* Scroll: one long row that moves */
.tan-ticker-effect-scroll .tan-ticker-news ul {
  width: max-content;
  will-change: transform;
}

/* Other effects: one headline at a time */
.tan-ticker:not(.tan-ticker-effect-scroll) .tan-ticker-news ul {
  inset-inline-end: 0;
}
.tan-ticker:not(.tan-ticker-effect-scroll) .tan-ticker-news li {
  position: absolute;
  inset: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  visibility: hidden;
}
.tan-ticker:not(.tan-ticker-effect-scroll) .tan-ticker-news li.is-active, .tan-ticker:not(.tan-ticker-effect-scroll) .tan-ticker-news li.is-leaving {
  visibility: visible;
}
.tan-ticker:not(.tan-ticker-effect-scroll) .tan-ticker-news a,
.tan-ticker:not(.tan-ticker-effect-scroll) .tan-ticker-news .tan-ticker-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Typography: caret that follows the typed text (moved by tanTicker) */
.tan-ticker-caret {
  flex-shrink: 0;
  width: 2px;
  height: 1.1em;
  margin-inline-start: -6px;
  background-color: var(--tan-ticker-color);
  animation: tan-news-blink 0.8s infinite;
}

.tan-ticker-prefix {
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 6px;
  background-color: var(--tan-ticker-color);
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
}

.tan-ticker-sep {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--tan-ticker-color);
  font-size: 0.85em;
}

.tan-ticker-controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-inline: 8px;
  background: var(--tan-ticker-bg);
}
.tan-ticker-controls button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  max-height: calc(var(--tan-ticker-height) - 8px);
  padding: 0;
  border: 1px solid rgba(var(--rgb-darkest), 0.12) !important;
  border-radius: 8px;
  background: none;
  color: rgb(var(--rgb-dark));
  font-size: 11px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.tan-ticker-controls button:hover {
  background-color: var(--tan-ticker-color) !important;
  border-color: var(--tan-ticker-color) !important;
  color: #fff !important;
}

/* Small screens: more room for the headline */
@media only screen and (max-width: 575px) {
  .tan-ticker-label {
    padding-inline: 10px;
    font-size: 0.9em;
  }
  .tan-ticker-news li {
    padding-inline: 12px;
  }
  .tan-ticker-controls {
    gap: 3px;
    padding-inline: 5px;
  }
  .tan-ticker-controls button {
    width: 24px;
    height: 24px;
  }
}
/* Play / pause icon swaps with the state */
.tan-ticker [data-ticker-action=toggle] .tan-ticker-play,
[data-ticker-action=toggle][data-ticker-target] .tan-ticker-play {
  display: none;
}

.tan-ticker.is-paused [data-ticker-action=toggle] .tan-ticker-play,
[data-ticker-action=toggle][data-ticker-target].is-paused .tan-ticker-play {
  display: inline;
}
.tan-ticker.is-paused [data-ticker-action=toggle] .tan-ticker-pause,
[data-ticker-action=toggle][data-ticker-target].is-paused .tan-ticker-pause {
  display: none;
}

/* Demo widget that lists every ticker example */
.tan-ticker-demos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}
@media only screen and (max-width: 992px) {
  .tan-ticker-demos {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tan-ticker-demo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.tan-ticker-demo-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: rgb(var(--rgb-dark));
  font-size: 13px;
  font-weight: 600;
}
.tan-ticker-demo-title code {
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(var(--rgb-darkest), 0.05);
  color: rgb(var(--rgb-light-dark));
  font-size: 11px;
  direction: ltr;
}

.tan-ticker-demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tan-ticker-demo-actions button {
  padding: 4px 12px;
  border: 1px solid rgba(var(--rgb-darkest), 0.12) !important;
  border-radius: 8px;
  background: none;
  color: rgb(var(--rgb-dark));
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.tan-ticker-demo-actions button:hover, .tan-ticker-demo-actions button.active {
  background-color: rgb(var(--rgb-first)) !important;
  border-color: rgb(var(--rgb-first)) !important;
  color: #fff !important;
}

/* Dark themes: lighter label color on dark boxes */
body.dark .tan-ticker-news a:hover, body.faragard-dark .tan-ticker-news a:hover, body.blue-dark .tan-ticker-news a:hover, body.orange-dark .tan-ticker-news a:hover, body.fuchsia-dark .tan-ticker-news a:hover, body.pink-dark .tan-ticker-news a:hover, body.emerald-dark .tan-ticker-news a:hover, body.red-dark .tan-ticker-news a:hover, body.sky-dark .tan-ticker-news a:hover, body.yellow-dark .tan-ticker-news a:hover, body.green-dark .tan-ticker-news a:hover, body.purple-dark .tan-ticker-news a:hover, body.indigo-dark .tan-ticker-news a:hover, body.slate-dark .tan-ticker-news a:hover, body.yellow-blue-dark .tan-ticker-news a:hover, body.administrative-order-dark .tan-ticker-news a:hover, body.organizational-dynamism-dark .tan-ticker-news a:hover, body.collective-empathy-dark .tan-ticker-news a:hover, body.innovative-thinking-dark .tan-ticker-news a:hover, body.performance-transparency-dark .tan-ticker-news a:hover, body.organized-city-navy-dark .tan-ticker-news a:hover, body.calm-city-sky-dark .tan-ticker-news a:hover, body.warm-city-brick-dark .tan-ticker-news a:hover, body.order-in-service-dark .tan-ticker-news a:hover, body.companionship-in-action-dark .tan-ticker-news a:hover, body.focus-and-precision-dark .tan-ticker-news a:hover, body.golden-blue-dark .tan-ticker-news a:hover {
  color: rgb(var(--rgb-first-darker));
}

/* News ticker (.tan-ticker) end */
/* Home page grid (.row-grid): every widget section and box is rounded with --radius-xl */
html body .row-grid .section,
html body .row-grid .module-box,
html body .row-grid .shp-main-slider,
html body .row-grid .shp-main-special-slider,
html body .row-grid .shp-category-suggest,
html body .row-grid .brz-calendar-widget {
  border-radius: var(--radius-xl);
}

html body .row-grid .section > .section-header {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

html body .row-grid .section > .section-footer {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Special sliders set their radius with !important, so match it */
html body .row-grid > [data-title] .shp-main-special-slider,
html body .row-grid > [data-title] .tan-main-special-slider {
  border-radius: var(--radius-xl) !important;
}

/* Side images of grid boxes (.thumbnail.radius-right/left) follow the box's --radius-xl corners */
html body .row-grid .module-box .thumbnail.radius-right {
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0 !important;
}

html[dir=ltr] body .row-grid .module-box .thumbnail.radius-right {
  border-radius: var(--radius-xl) 0 0 var(--radius-xl) !important;
}

html body .row-grid .module-box .thumbnail.radius-left {
  border-radius: var(--radius-xl) 0 0 var(--radius-xl) !important;
}

html[dir=ltr] body .row-grid .module-box .thumbnail.radius-left {
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0 !important;
}

/* Module tile icons (the class-less <img> directly inside a.module-box) never get rounded corners */
html body a.module-box > img:not([class]) {
  border-radius: 0 !important;
}

/* Module tile icons as inline <svg> (e.g. my.tanianict.com renders <svg class="rounded-3">): no rounded corners either */
html body a.module-box > svg {
  border-radius: 0 !important;
}

/* Main image slider: Swiper's GPU-layered slides can escape the box's rounded clip, so each slide is rounded too */
html body .row-grid .module-box.slideShowSwiper .swiper-slide {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ===================== Audio player (.tan-audio) — see tanAudioPlayer in my-main.js ===================== */
/* The widget body fills the section so the players can use the whole height */
.section > .section-body:has(> .tan-audio),
.section > .section-body:has(> .tan-vlist) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0 !important;
}

.section-body > .tan-audio,
.section-body > .tan-vlist {
  flex: 1 1 auto;
}

.tan-audio {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 0;
  padding: 16px;
  outline: none;
  background: linear-gradient(180deg, rgba(var(--rgb-first-lighter), 0.35), transparent 220px);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tan-audio:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(var(--rgb-first), 0.5);
}

.tan-audio > audio {
  display: none;
}

.tan-audio button,
.tan-audio a {
  font-family: inherit;
}

/* Now playing */
.tan-audio .tan-audio-now {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.tan-audio .tan-audio-cover {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgb(var(--rgb-first)), rgb(var(--rgb-first-dark)));
  box-shadow: 0 10px 24px -10px rgba(var(--rgb-first), 0.7);
  transition: box-shadow 0.4s;
}

.tan-audio.is-playing .tan-audio-cover {
  box-shadow: 0 12px 30px -8px rgba(var(--rgb-first), 0.85);
}

.tan-audio .tan-audio-disc {
  position: relative;
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: repeating-radial-gradient(circle, #1e1e24 0 2px, #2a2a32 2px 4px);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
  animation: tanAudioSpin 8s linear infinite;
  animation-play-state: paused;
}

.tan-audio.is-playing .tan-audio-disc {
  animation-play-state: running;
}

.tan-audio .tan-audio-disc img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tan-audio .tan-audio-cover.no-cover .tan-audio-disc img {
  display: none;
}

/* the hole in the middle of the record */
.tan-audio .tan-audio-disc::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
}

@keyframes tanAudioSpin {
  to {
    transform: rotate(360deg);
  }
}
.tan-audio .tan-audio-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}

.tan-audio .tan-audio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgb(var(--rgb-first));
}

.tan-audio.is-error .tan-audio-label {
  color: rgb(var(--rgb-red-500, 239, 68, 68));
}

.tan-audio .tan-audio-title {
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: rgb(var(--rgb-darkest));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tan-audio .tan-audio-artist {
  overflow: hidden;
  font-size: 13px;
  color: rgb(var(--rgb-light-dark));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tan-audio .tan-audio-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* Equalizer bars: move while playing */
.tan-audio .tan-audio-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.tan-audio .tan-audio-eq i {
  display: block;
  width: 3px;
  height: 30%;
  border-radius: 2px;
  background-color: currentColor;
  transition: height 0.3s;
}

.tan-audio.is-playing .tan-audio-eq i {
  animation: tanAudioEq 0.9s ease-in-out infinite alternate;
}

.tan-audio.is-playing .tan-audio-eq i:nth-child(2) {
  animation-delay: -0.35s;
}

.tan-audio.is-playing .tan-audio-eq i:nth-child(3) {
  animation-delay: -0.7s;
}

.tan-audio.is-playing .tan-audio-eq i:nth-child(4) {
  animation-delay: -0.2s;
}

@keyframes tanAudioEq {
  from {
    height: 20%;
  }
  to {
    height: 100%;
  }
}
/* Buttons */
.tan-audio .tan-audio-btn {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgb(var(--rgb-light-dark));
  font-size: 15px;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
}

.tan-audio .tan-audio-btn:hover {
  background-color: rgba(var(--rgb-first-lighter), 0.45);
  color: rgb(var(--rgb-first));
}

.tan-audio .tan-audio-btn:active {
  transform: scale(0.92);
}

.tan-audio .tan-audio-btn.active {
  color: rgb(var(--rgb-first));
}

/* dot under shuffle / repeat when they are on */
.tan-audio .tan-audio-controls .tan-audio-btn.active::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
  transform: translateX(-50%);
}

.tan-audio .tan-audio-side .tan-audio-btn {
  width: 36px;
  height: 36px;
  background-color: rgba(var(--rgb-ninth-lighter), 0.7);
  box-shadow: 0 1px 3px rgba(var(--rgb-darkest), 0.08);
}

.tan-audio .tan-audio-btn[data-act=like].active {
  color: rgb(var(--rgb-red-500, 239, 68, 68));
}

.tan-audio .tan-audio-btn[data-act=like].active i {
  animation: tanAudioPop 0.35s ease;
}

@keyframes tanAudioPop {
  50% {
    transform: scale(1.35);
  }
}
.tan-audio .tan-audio-one {
  position: absolute;
  top: 7px;
  right: 6px;
  display: none;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}

.tan-audio .tan-audio-btn.is-one .tan-audio-one {
  display: block;
}

/* Seek bar */
.tan-audio .tan-audio-seek {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: rgb(var(--rgb-light-dark));
  font-variant-numeric: tabular-nums;
}

.tan-audio .tan-audio-cur,
.tan-audio .tan-audio-dur {
  flex-shrink: 0;
  min-width: 34px;
}

.tan-audio .tan-audio-dur {
  text-align: right;
}

.tan-audio .tan-audio-progress {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  height: 18px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}

.tan-audio .tan-audio-track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background-color: rgba(var(--rgb-dark), 0.12);
  overflow: hidden;
  transition: height 0.15s;
}

.tan-audio .tan-audio-progress:hover .tan-audio-track,
.tan-audio.is-seeking .tan-audio-track {
  height: 8px;
}

.tan-audio .tan-audio-buffer,
.tan-audio .tan-audio-played {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: inherit;
}

.tan-audio .tan-audio-buffer {
  background-color: rgba(var(--rgb-dark), 0.14);
}

.tan-audio .tan-audio-played {
  background: linear-gradient(90deg, rgb(var(--rgb-first-light, var(--rgb-first))), rgb(var(--rgb-first)));
}

.tan-audio .tan-audio-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 15px;
  height: 15px;
  border: 3px solid rgb(var(--rgb-first));
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(var(--rgb-darkest), 0.25);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: transform 0.15s, opacity 0.15s;
}

.tan-audio .tan-audio-progress:hover .tan-audio-thumb,
.tan-audio .tan-audio-progress:focus-visible .tan-audio-thumb,
.tan-audio.is-seeking .tan-audio-thumb,
.tan-audio.is-playing .tan-audio-thumb {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.tan-audio .tan-audio-tip {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  padding: 1px 7px;
  border-radius: 4px;
  background-color: rgb(var(--rgb-darkest));
  color: rgb(var(--rgb-lightest));
  font-size: 11px;
  line-height: 1.7;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 0.15s;
}

.tan-audio .tan-audio-progress:hover .tan-audio-tip,
.tan-audio.is-seeking .tan-audio-tip {
  opacity: 1;
}

/* Main controls */
.tan-audio .tan-audio-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tan-audio .tan-audio-btn-lg {
  width: 46px;
  height: 46px;
  font-size: 19px;
  color: rgb(var(--rgb-dark));
}

.tan-audio .tan-audio-play {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  margin-inline: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(var(--rgb-first)), rgb(var(--rgb-first-dark)));
  color: #fff;
  font-size: 22px;
  box-shadow: 0 10px 22px -8px rgba(var(--rgb-first), 0.75);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}

.tan-audio .tan-audio-play:hover {
  box-shadow: 0 12px 26px -6px rgba(var(--rgb-first), 0.85);
}

.tan-audio .tan-audio-play:active {
  transform: scale(0.94);
}

.tan-audio.is-paused .tan-audio-play i {
  margin-left: 3px;
}

/* ring while the song is loading */
.tan-audio .tan-audio-play::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 3px solid transparent;
  border-top-color: rgb(var(--rgb-first));
  border-radius: 50%;
  opacity: 0;
  animation: tanAudioSpin 0.9s linear infinite;
  transition: opacity 0.2s;
}

.tan-audio.is-waiting .tan-audio-play::before {
  opacity: 1;
}

/* Volume, speed, list */
.tan-audio .tan-audio-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tan-audio .tan-audio-volume {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.tan-audio .tan-audio-volume .tan-audio-btn {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

.tan-audio .tan-audio-vol {
  width: 100%;
  max-width: 120px;
  height: 5px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(to right, rgb(var(--rgb-first)) var(--tan-vol, 100%), rgba(var(--rgb-dark), 0.14) var(--tan-vol, 100%));
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.tan-audio .tan-audio-vol::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background-color: rgb(var(--rgb-first));
  box-shadow: 0 0 0 3px rgba(var(--rgb-first), 0.2);
  -webkit-appearance: none;
}

.tan-audio .tan-audio-vol::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background-color: rgb(var(--rgb-first));
  box-shadow: 0 0 0 3px rgba(var(--rgb-first), 0.2);
}

.tan-audio .tan-audio-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(var(--rgb-dark), 0.12);
  border-radius: 100px;
  background-color: rgba(var(--rgb-ninth-lighter), 0.7);
  color: rgb(var(--rgb-dark));
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.tan-audio .tan-audio-chip:hover,
.tan-audio .tan-audio-chip.active {
  border-color: rgba(var(--rgb-first), 0.35);
  background-color: rgba(var(--rgb-first-lighter), 0.45);
  color: rgb(var(--rgb-first));
}

.tan-audio .tan-audio-count {
  font-size: 11px;
  opacity: 0.75;
}

.tan-audio .tan-audio-speed {
  position: relative;
}

.tan-audio .tan-audio-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 120px;
  padding: 5px;
  border: 1px solid rgba(var(--rgb-dark), 0.12);
  border-radius: var(--radius-md, 14px);
  background-color: rgb(var(--rgb-ninth-lighter));
  box-shadow: 0 8px 24px rgba(var(--rgb-darkest), 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.tan-audio .tan-audio-speed.open .tan-audio-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.tan-audio .tan-audio-menu-title {
  padding: 4px 10px 6px;
  font-size: 11px;
  color: rgb(var(--rgb-light-dark));
}

.tan-audio .tan-audio-menu button {
  padding: 6px 10px;
  border: 0;
  border-radius: 100px;
  background: none;
  color: rgb(var(--rgb-darker));
  font-size: 13px;
  text-align: start;
  cursor: pointer;
}

.tan-audio .tan-audio-menu button:hover {
  background-color: rgba(var(--rgb-dark), 0.06);
}

.tan-audio .tan-audio-menu button.active {
  background-color: rgba(var(--rgb-first), 0.1);
  color: rgb(var(--rgb-first));
  font-weight: 700;
}

/* Playlist */
.tan-audio .tan-audio-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -6px;
  padding: 2px 6px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.tan-audio.is-list-hidden .tan-audio-list {
  display: none;
}

.tan-audio .tan-audio-list > li {
  margin: 0;
  padding: 0;
}

.tan-audio .tan-audio-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--radius-md, 14px);
  background: none;
  color: rgb(var(--rgb-dark));
  text-align: start;
  cursor: pointer;
  transition: background-color 0.2s;
}

.tan-audio .tan-audio-list button:hover {
  background-color: rgba(var(--rgb-dark), 0.05);
}

.tan-audio .tan-audio-list li.active button {
  background-color: rgba(var(--rgb-first-lighter), 0.5);
}

.tan-audio .tan-audio-item-thumb {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: var(--radius-sm, 10px);
  background-color: rgba(var(--rgb-first-lighter), 0.6);
  color: rgb(var(--rgb-first));
}

.tan-audio .tan-audio-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tan-audio .tan-audio-item-thumb .tan-audio-eq {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  height: auto;
  background-color: rgba(0, 0, 0, 0.45);
  color: #fff;
}

.tan-audio .tan-audio-item-thumb .tan-audio-eq i {
  height: 40%;
  max-height: 14px;
}

.tan-audio.is-playing .tan-audio-list li.active .tan-audio-eq {
  display: flex;
}

.tan-audio .tan-audio-item-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.tan-audio .tan-audio-item-text strong,
.tan-audio .tan-audio-item-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tan-audio .tan-audio-item-text strong {
  font-size: 13px;
  font-weight: 600;
  color: rgb(var(--rgb-darker));
}

.tan-audio .tan-audio-list li.active .tan-audio-item-text strong {
  color: rgb(var(--rgb-first));
}

.tan-audio .tan-audio-item-text small {
  font-size: 11px;
  color: rgb(var(--rgb-light-dark));
}

.tan-audio .tan-audio-item-dur {
  flex-shrink: 0;
  font-size: 11px;
  color: rgb(var(--rgb-light-dark));
  font-variant-numeric: tabular-nums;
}

/* Short messages (shuffle on, liked, ...) */
.tan-audio .tan-audio-toast {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 6;
  padding: 6px 14px;
  border-radius: 100px;
  background-color: rgb(var(--rgb-darkest));
  color: rgb(var(--rgb-lightest));
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.tan-audio.has-toast .tan-audio-toast {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 420px) {
  .tan-audio {
    gap: 12px;
    padding: 14px 12px;
  }
  .tan-audio .tan-audio-cover {
    width: 76px;
    height: 76px;
  }
  .tan-audio .tan-audio-disc {
    width: 62px;
    height: 62px;
  }
  .tan-audio .tan-audio-controls {
    gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tan-audio .tan-audio-disc,
  .tan-audio.is-playing .tan-audio-eq i {
    animation: none;
  }
}
/* ===================== Video playlist (.tan-vlist) — see tanVideoList in my-main.js ===================== */
.tan-vlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 12px;
}

.tan-vlist .tan-vlist-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 160px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: #000;
  box-shadow: 0 10px 28px -14px rgba(var(--rgb-darkest), 0.6);
}

.tan-vlist .tan-player {
  height: 100%;
}

.tan-vlist .tan-player video {
  height: 100%;
  object-fit: contain;
}

.tan-vlist .tan-player.is-full video {
  object-fit: contain;
}

/* "Next video" countdown over the player */
.tan-vlist .tan-vlist-next {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background-color: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  text-align: center;
}

.tan-vlist .tan-vlist-next[hidden] {
  display: none;
}

.tan-vlist .tan-vlist-next-label {
  font-size: 12px;
  opacity: 0.75;
}

.tan-vlist .tan-vlist-next-title {
  max-width: 90%;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tan-vlist .tan-vlist-next-ring {
  position: relative;
  width: 60px;
  height: 60px;
}

.tan-vlist .tan-vlist-next-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.tan-vlist .tan-vlist-next-ring circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 3;
}

.tan-vlist .tan-vlist-next-ring .tan-vlist-next-bar {
  stroke: rgb(var(--rgb-first-light, var(--rgb-first)));
  stroke-dasharray: 107;
  stroke-dashoffset: calc(107 - 107 * var(--tan-next, 0));
  stroke-linecap: round;
  transition: stroke-dashoffset 5s linear;
}

.tan-vlist .tan-vlist-next-ring button {
  position: absolute;
  inset: 7px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.tan-vlist .tan-vlist-next-ring button:hover {
  background-color: rgba(255, 255, 255, 0.28);
}

.tan-vlist .tan-vlist-next-cancel {
  padding: 4px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  background: none;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.tan-vlist .tan-vlist-next-cancel:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Title and actions */
.tan-vlist .tan-vlist-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
}

.tan-vlist .tan-vlist-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.tan-vlist .tan-vlist-title,
.tan-vlist .tan-vlist-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tan-vlist .tan-vlist-title {
  font-size: 15px;
  font-weight: 700;
  color: rgb(var(--rgb-darkest));
}

.tan-vlist .tan-vlist-desc {
  font-size: 12px;
  color: rgb(var(--rgb-light-dark));
}

.tan-vlist .tan-vlist-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.tan-vlist .tan-vlist-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tan-vlist .tan-vlist-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(var(--rgb-dark), 0.06);
  color: rgb(var(--rgb-dark));
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.tan-vlist .tan-vlist-btn:hover,
.tan-vlist .tan-vlist-btn.active {
  background-color: rgba(var(--rgb-first-lighter), 0.55);
  color: rgb(var(--rgb-first));
}

.tan-vlist .tan-vlist-auto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  color: rgb(var(--rgb-light-dark));
  white-space: nowrap;
  cursor: pointer;
}

.tan-vlist .tan-vlist-auto input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tan-vlist .tan-vlist-auto span {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 18px;
  background-color: rgba(var(--rgb-dark), 0.2);
  transition: background-color 0.2s;
}

.tan-vlist .tan-vlist-auto span::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}

.tan-vlist .tan-vlist-auto input:checked + span {
  background-color: rgb(var(--rgb-first));
}

.tan-vlist .tan-vlist-auto input:checked + span::after {
  transform: translateX(-14px);
}

html[dir=ltr] .tan-vlist .tan-vlist-auto span::after {
  right: auto;
  left: 2px;
}

html[dir=ltr] .tan-vlist .tan-vlist-auto input:checked + span::after {
  transform: translateX(14px);
}

.tan-vlist .tan-vlist-auto input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(var(--rgb-first), 0.3);
}

/* Video list: a row of thumbnails */
.tan-vlist .tan-vlist-list {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  margin: 0 -12px -4px;
  padding: 0 12px 4px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.tan-vlist .tan-vlist-list > li {
  flex: 0 0 136px;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

.tan-vlist .tan-vlist-list button {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
  cursor: pointer;
}

.tan-vlist .tan-vlist-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius-sm, 10px);
  background-color: rgba(var(--rgb-dark), 0.15);
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 0.2s;
}

.tan-vlist .tan-vlist-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.tan-vlist .tan-vlist-list button:hover .tan-vlist-thumb img {
  transform: scale(1.06);
}

.tan-vlist .tan-vlist-list li.active .tan-vlist-thumb {
  box-shadow: 0 0 0 2px rgb(var(--rgb-first));
}

.tan-vlist .tan-vlist-dur {
  position: absolute;
  bottom: 5px;
  left: 5px;
  padding: 0 6px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 10px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.tan-vlist .tan-vlist-now {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background-color: rgba(var(--rgb-first-dark), 0.6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.tan-vlist .tan-vlist-list li.active .tan-vlist-now {
  display: flex;
}

.tan-vlist .tan-vlist-item-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.6;
  color: rgb(var(--rgb-dark));
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tan-vlist .tan-vlist-list li.active .tan-vlist-item-title {
  color: rgb(var(--rgb-first));
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .tan-vlist .tan-vlist-info {
    flex-wrap: wrap;
  }
  .tan-vlist .tan-vlist-actions {
    justify-content: space-between;
    width: 100%;
  }
}

/*# sourceMappingURL=my-main.css.map */