/*
 * Main style file
 *
 * ============================== COPYRIGHT: ARYA GOSTARAN ==============================
 */
:root {
  --color-teal:#0EAD98;
  --text-yellow-100: #FEF6D8;
  --text-yellow-400: #FCD535;
  --text-yellow-500: #F0B90B;
  --text-yellow-600: #C99400;
  --text-yellow-950: #3C2601;
  --text-red-400: #FF707E;
  --text-red-500: #F6465D;
  --text-red-600: #CF304A;
  --text-green-400: #0ECB81;
  --text-green-500: #03A66D;
  --text-gray-50: #EAECEF;
  --text-gray-100: #FAFAFA;
  --text-gray-200: #F5F5F5;
  --text-gray-300: #B7BDC6;
  --text-gray-400: #707A89;
  --text-gray-500: #474D57;
  --text-gray-600: #24272F;
  --text-gray-700: #2B3139;
  --text-gray-800: #1E2329;
  --text-gray-900: #181A20;
  --text-gray-950: #0B0E11;
}

* {
  outline: none;
  box-shadow: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color 0.1s;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
html input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #FFF inset !important;
  -webkit-text-fill-color: var(--text-gray-800) !important;
}
html .def-theme[data-tabs-toggle] [role=tab] {
  color: var(--text-gray-400);
}
html .def-theme[data-tabs-toggle] [role=tab]:hover {
  color: var(--text-gray-800);
  border-color: transparent;
}
html .def-theme[data-tabs-toggle] [role=tab].active {
  color: var(--text-gray-800);
  border-bottom-color: var(--text-yellow-500);
  border-bottom: 2px solid var(--text-yellow-500);
}
html.dark input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px var(--text-gray-900) inset !important;
  -webkit-text-fill-color: var(--text-gray-50) !important;
}
html.dark .def-theme[data-tabs-toggle] [role=tab] {
  color: var(--text-gray-400);
}
html.dark .def-theme[data-tabs-toggle] [role=tab]:hover {
  color: var(--text-gray-50);
}
html.dark .def-theme[data-tabs-toggle] [role=tab].active {
  color: var(--text-gray-50);
}
html.dark ::-webkit-scrollbar {
  width: 5px;
  background-color: transparent;
}
html.dark ::-webkit-scrollbar:horizontal {
  height: 5px !important;
}
html[dir=rtl] [id$=mobile-menu].flex {
  animation: openRightMenu 0.5s forwards ease;
}
html[dir=rtl] [id$=mobile-menu].hide {
  animation: closeRightMenu 0.5s forwards ease;
}
html[dir=rtl] nav label[for=theme-toggler] input + .toggle-bg::after, html[dir=rtl] #public-mobile-menu label[for=theme-toggler] input + .toggle-bg::after {
  left: 2px;
}
html[dir=rtl] nav label[for=theme-toggler] input:checked + .toggle-bg.theme-light::after, html[dir=rtl] #public-mobile-menu label[for=theme-toggler] input:checked + .toggle-bg.theme-light::after {
  left: 0;
}
html[dir=rtl] nav, html[dir=rtl] #public-mobile-menu {
  /* Override theme switch toggler */
}
html[dir=rtl] nav ul li.nav-item, html[dir=rtl] #public-mobile-menu ul li.nav-item {
  min-width: -moz-max-content;
  min-width: max-content;
}
html[dir=rtl] nav ul.dropdown-menu li.dropdown-menu-item:hover i[class~=invisible], html[dir=rtl] nav ul.dropdown-menu a.dropdown-menu-item:hover i[class~=invisible], html[dir=rtl] #public-mobile-menu ul.dropdown-menu li.dropdown-menu-item:hover i[class~=invisible], html[dir=rtl] #public-mobile-menu ul.dropdown-menu a.dropdown-menu-item:hover i[class~=invisible] {
  visibility: visible;
  transition: 0.3s;
}
html[dir=rtl] nav label[for=theme-toggler] input + .toggle-bg, html[dir=rtl] #public-mobile-menu label[for=theme-toggler] input + .toggle-bg {
  content: "\eb94";
  border-color: transparent;
}
html[dir=rtl] nav label[for=theme-toggler] input + .toggle-bg::after, html[dir=rtl] #public-mobile-menu label[for=theme-toggler] input + .toggle-bg::after {
  right: unset;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  color: var(--text-yellow-600);
  content: "\ec34";
}
html[dir=rtl] nav label[for=theme-toggler] input:checked + .toggle-bg.theme-light, html[dir=rtl] #public-mobile-menu label[for=theme-toggler] input:checked + .toggle-bg.theme-light {
  background-color: var(--text-yellow-500);
}
html[dir=rtl] nav label[for=theme-toggler] input:checked + .toggle-bg.theme-light::after, html[dir=rtl] #public-mobile-menu label[for=theme-toggler] input:checked + .toggle-bg.theme-light::after {
  content: "\eb94";
}
html[dir=ltr] [id$=mobile-menu].flex {
  animation: openLeftMenu 0.5s forwards ease;
}
html[dir=ltr] [id$=mobile-menu].hide {
  animation: closeLeftMenu 0.5s forwards ease;
}
html[dir=ltr] nav, html[dir=ltr] #public-mobile-menu {
  /* Override theme switch toggler */
}
html[dir=ltr] nav ul li.nav-item, html[dir=ltr] #public-mobile-menu ul li.nav-item {
  min-width: -moz-max-content;
  min-width: max-content;
}
html[dir=ltr] nav ul.dropdown-menu li.dropdown-menu-item:hover i[class~=invisible], html[dir=ltr] nav ul.dropdown-menu a.dropdown-menu-item:hover i[class~=invisible], html[dir=ltr] #public-mobile-menu ul.dropdown-menu li.dropdown-menu-item:hover i[class~=invisible], html[dir=ltr] #public-mobile-menu ul.dropdown-menu a.dropdown-menu-item:hover i[class~=invisible] {
  visibility: visible;
  transition: 0.3s;
}
html[dir=ltr] nav label[for=theme-toggler] input + .toggle-bg, html[dir=ltr] #public-mobile-menu label[for=theme-toggler] input + .toggle-bg {
  content: "\eb94";
  border-color: transparent;
}
html[dir=ltr] nav label[for=theme-toggler] input + .toggle-bg::after, html[dir=ltr] #public-mobile-menu label[for=theme-toggler] input + .toggle-bg::after {
  left: unset;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  color: var(--text-yellow-600);
  content: "\ec34";
}
html[dir=ltr] nav label[for=theme-toggler] input:checked + .toggle-bg.theme-light, html[dir=ltr] #public-mobile-menu label[for=theme-toggler] input:checked + .toggle-bg.theme-light {
  background-color: var(--text-yellow-500);
}
html[dir=ltr] nav label[for=theme-toggler] input:checked + .toggle-bg.theme-light::after, html[dir=ltr] #public-mobile-menu label[for=theme-toggler] input:checked + .toggle-bg.theme-light::after {
  content: "\eb94";
}

::-webkit-scrollbar {
  width: 5px;
  background-color: #fafafa;
}
::-webkit-scrollbar:horizontal {
  height: 5px !important;
}

::-webkit-scrollbar-thumb {
  background-color: var(--text-gray-100);
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button,
input[type=date]::-webkit-calendar-picker-indicator {
  display: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

body {
  overflow-x: hidden !important;
  color-scheme: dark;
}
body::-webkit-scrollbar {
  width: 5px;
}
body::-webkit-scrollbar-thumb {
  background-color: var(--color-teal);
}

.input-group {
  display: flex;
  border-radius: 5px;
}
.input-group .input-container .prefix,
.input-group .input-container .unit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.input-group .input-container .prefix label,
.input-group .input-container .unit label {
  text-align: center;
  vertical-align: middle;
  color: #848E9C;
  font-size: 13px;
}
.input-group .input-container .unit label {
  color: #848E9C;
}
.input-group .input-container input {
  flex: 1;
  width: 100%;
}
.input-group .input-container input[type=number]::-webkit-inner-spin-button, .input-group .input-container input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
          appearance: none !important;
  appearance: none !important;
}

.no-scroll::-webkit-scrollbar {
  -webkit-appearance: none !important;
          appearance: none !important;
  width: 0 !important;
  height: 0 !important;
}

.swal2-popup {
  direction: rtl !important;
}

#loading {
  transition: opacity 0.3s;
}
#loading #anim-elements-container > div:nth-of-type(1) {
  width: 4px;
  height: 20px;
  animation: loading 1s linear infinite;
  animation-delay: 0.0833333333s;
}
#loading #anim-elements-container > div:nth-of-type(2) {
  width: 4px;
  height: 20px;
  animation: loading 1s linear infinite;
  animation-delay: 0.1666666667s;
}
#loading #anim-elements-container > div:nth-of-type(3) {
  width: 4px;
  height: 20px;
  animation: loading 1s linear infinite;
  animation-delay: 0.25s;
}
#loading #anim-elements-container > div:nth-of-type(4) {
  width: 4px;
  height: 20px;
  animation: loading 1s linear infinite;
  animation-delay: 0.3333333333s;
}
#loading.loaded {
  opacity: 0;
}

#loader {
  transition: opacity 0.3s;
}
#loader #lw-anim-elements-container > div:nth-of-type(1) {
  width: 4px;
  height: 20px;
  animation: loading 1s linear infinite;
  animation-delay: 0.0833333333s;
}
#loader #lw-anim-elements-container > div:nth-of-type(2) {
  width: 4px;
  height: 20px;
  animation: loading 1s linear infinite;
  animation-delay: 0.1666666667s;
}
#loader #lw-anim-elements-container > div:nth-of-type(3) {
  width: 4px;
  height: 20px;
  animation: loading 1s linear infinite;
  animation-delay: 0.25s;
}
#loader #lw-anim-elements-container > div:nth-of-type(4) {
  width: 4px;
  height: 20px;
  animation: loading 1s linear infinite;
  animation-delay: 0.3333333333s;
}
#loader.loaded {
  opacity: 0;
}

footer #mobile-footer button[aria-expanded=true] i::before {
  content: "\eb8b";
}
footer #mobile-footer [id*=accordion-collapse-body]:not(.hidden) {
  display: flex;
}

[id$=modal_container] {
  transition: opacity 0.4s;
}
[id$=modal_container].hide {
  opacity: 0;
}

@keyframes loading {
  0% {
    height: 25px;
  }
  10% {
    height: 50px;
  }
  20% {
    height: 25px;
  }
}
@keyframes openRightMenu {
  from {
    right: -100%;
  }
  to {
    right: 0;
  }
}
@keyframes closeRightMenu {
  from {
    right: 0;
  }
  to {
    right: -100%;
  }
}
@keyframes openLeftMenu {
  from {
    left: -100%;
  }
  to {
    left: 0;
  }
}
@keyframes closeLeftMenu {
  from {
    left: 0;
  }
  to {
    left: -100%;
  }
}