@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins/Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

:root {
  /* also used in graphs.js */
  --very_low_color: rgb(46, 204, 113);  /* equals success */
  --low_color:      rgb(52, 152, 219);  /* equals info */
  --warning_color:  rgb(243, 156, 18);  /* equals warning */
  --critical_color: rgb(231, 76, 60);   /* equals danger */

  --logo_green_rgb: 0, 151, 181;  /* green color off of logo (#0097b5) */
  --logo_green_rgb__lighter: 26, 177, 207;
}

/* FOR_RTL */
body {
  font-family: "Vazir", sans-serif;
}

/* FOR_RTL */
.header-search-bar {
  padding: 0.375rem 0.75rem 0.375rem 2rem;
}

*,
*::before,
*::after {
  /* .85rem in LTR, .95rem in RTL */
  font-size: .95rem;  /* JUMP_2 */
}

/* from udon/dist/assets/css/styles.css */
.app-sidebar .side-menu__item.active,
.app-sidebar .side-menu__item:hover {
  color: rgb(var(--info-rgb)) !important;
}
.app-sidebar .side-menu__item.active .side-menu__label,
.app-sidebar .side-menu__item.active .side-menu__angle,
.app-sidebar .side-menu__item:hover .side-menu__label,
.app-sidebar .side-menu__item:hover .side-menu__angle {
  color: rgb(var(--info-rgb)) !important;
}
.app-sidebar .side-menu__item.active .side-menu__icon,
.app-sidebar .side-menu__item:hover .side-menu__icon {
  fill: rgb(var(--info-rgb)) !important;
  color: rgb(var(--info-rgb)) !important;
}

/*
as we have decreased font size (JUMP_2),
sidebar menus in vertical mode
seem to behavior strangely when hovered.
so let's 025rem -> 4px.
4px is the value when not hovered
*/
[data-nav-layout=vertical] .main-menu > .slide.active > .side-menu__item,
[data-nav-layout=vertical] .main-menu > .slide:hover > .side-menu__item {
  margin-block: 4px;
}

[data-theme-mode=dark] .side-menu__label,
[data-theme-mode=light] .side-menu__label {
  font-weight: bold;
}
[data-theme-mode=light] .side-menu__item:not(.active):not(:hover) .side-menu__label {
  color: rgb(var(--dark-rgb));
}
[data-theme-mode=dark] .slide-menu li a,
[data-theme-mode=light] .slide-menu li a {
  font-weight: normal;
}
[data-theme-mode=light] .slide-menu li a {
  color: rgb(var(--dark-rgb));
}

@media (min-width: 992px) {
  /* hide icons on horizontal menu */
  [data-nav-layout=horizontal] .side-menu__item i.bi {
    display: none;
  }
}

/* commented in LTR */
/* rotate chevron for parent menu */
[data-nav-layout=horizontal] .side-menu__item .side-menu__angle {
  transform: rotate(90deg) !important;
}

/* rotation of chevron for sub-menus */
@media (min-width: 992px) {
  [data-nav-layout=horizontal] .slide li .side-menu__angle  {
    /* 0deg for LTR (with no !important), 180deg for RTL (with !important)*/
    transform: rotate(180deg) !important;
  }
}

[data-theme-mode=light] .dropdowns_card label,
[data-theme-mode=light] .dropdowns_card input,
[data-theme-mode=light] .dropdowns_card select {
  color: slategray;
}

[data-theme-mode=light] .form-floating > .form-control-plaintext ~ label,
[data-theme-mode=light] .form-floating > .form-control:focus ~ label,
[data-theme-mode=light] .form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-theme-mode=light] .form-floating > .form-select ~ label {
  color: darkgray !important;
}

/* pull back child2 and child3 a little to get rid of potential gap (JUMP_1) */
[data-nav-layout=horizontal] .slide-menu.child2.active,
[data-nav-layout=horizontal] .slide-menu.child3.active {
  /* -1% for LRT, 1% for RTL */
  transform: translateX(1%) !important;
}

/* commented in RTL */
/*
  prevent sub-menus of last two children in horizontal menu from overflowing when hovered
  1. 991px is when sidebar gets hidden and moves to the side
     1600px is manually set by me
  2. we need this block:
     a. below 1600px because above that we have enough space and horizental sidebar works fine as is
     b. above 991px because below that sidebar jumps to vertical mode and we'll no longer need sub-menus to be flipped
*/
/* @media (min-width: 992px) and (max-width: 1600px) { */
     /* move to left and flip menu */
/*   [data-nav-layout=horizontal] .main-menu li:nth-last-child(-n+2) ul.slide-menu.child1 { */
/*     transform: translate(-50%, 0) !important; */
/*     direction: rtl; */
/*   } */
     /* rotate chevron */
/*   [data-nav-layout=horizontal] .main-menu li:nth-last-child(-n+2) ul.slide-menu.child1 .side-menu__angle { */
/*     transform: rotate(180deg); */
/*   } */
/*  */
   /* pull back child2 and child3 in the other direction (JUMP_1) */
/* [data-nav-layout=horizontal] .main-menu li:nth-last-child(-n+2) ul .slide-menu.child2.active, */
/* [data-nav-layout=horizontal] .main-menu li:nth-last-child(-n+2) ul .slide-menu.child3.active { */
/*     transform: translateX(1%) !important; */
/*   } */
/* } */

/* jodit */
[data-theme-mode=dark] .jodit-container:not(.jodit_inline) {
  background-color: transparent;
  border: 1px solid var(--default-border);
}
[data-theme-mode=dark] .jodit-toolbar__box div {
  background-color: rgb(0, 0, 0, .05);
}
[data-theme-mode=dark] .jodit-toolbar__box:not(:empty):not(:empty) {
  background-color: transparent;
}
[data-theme-mode=dark] .jodit-toolbar__box:not(:empty) {
  background-color: transparent;
  border-bottom: 1px solid var(--default-border);
}
[data-theme-mode=dark] .jodit-toolbar__box:not(:empty) .jodit-toolbar-editor-collection::after {
  background-color: transparent;
}
[data-theme-mode=dark] .jodit-container:not(.jodit_inline) .jodit-workplace {
  background-color: transparent;
}
[data-theme-mode=dark] .jodit-status-bar {
  background-color: transparent;
  color: var(--default-text-color);
}
[data-theme-mode=dark] .jodit-wysiwyg ::selection, .jodit-wysiwyg::selection {
  background-color: transparent;
}
[data-theme-mode=dark] .jodit-workplace + .jodit-status-bar:not(:empty) {
  border-top: 1px solid var(--default-border);
}
[data-theme-mode=dark] .jodit-toolbar-button__trigger,
[data-theme-mode=dark] .jodit-icon {
  stroke: var(--default-text-color);
  fill: var(--default-text-color);
}
[data-theme-mode=dark] .jodit-ui-group_separated_true:not(:last-child):not(.jodit-ui-group_before-spacer_true)::after {
  border-right: 1px solid var(--default-border);
}
[data-theme-mode=dark] .jodit-popup__content {
  background-color: slategray;
}
[data-theme-mode=dark] .jodit-toolbar-button__trigger:hover:not([disabled]),
[data-theme-mode=dark] .jodit-toolbar-button__button:hover:not([disabled]) {
  background-color: rgba(255, 255, 255, .1);
}
[data-theme-mode=dark] .jodit-toolbar-button_with-trigger_true:hover:not([disabled]) {
  background-color: rgba(255, 255, 255, .1);
  border-color: transparent;
}
[data-theme-mode=dark] .jodit-wysiwyg ::selection,
[data-theme-mode=dark] .jodit-wysiwyg::selection {
  background: red;
  background-color: rgb(255, 255, 255, .2) !important;
  color: inherit;
}


a:not(.nav-link):not(.dropdown-item):not(.side-menu__item):not(.btn):not(.header-search-icon):not(.navbar_a) {
  font-size: inherit;
}
[data-theme-mode=light] a:not(.nav-link):not(.dropdown-item):not(.side-menu__item):not(.btn):not(.header-search-icon):not(.navbar_a) {
  color: darkblue;
}
[data-theme-mode=dark] a:not(.nav-link):not(.dropdown-item):not(.side-menu__item):not(.btn):not(.header-search-icon):not(.navbar_a) {
  color: skyblue;
}

.card.custom-card .card-header .card-title {
  text-transform: none;
}

.app-sidebar .side-menu__item {
  letter-spacing: 0;
}

.form-control {
  border-radius: 0.375rem;  /* borrowed from select */
}

.switcher-icon i {
  animation-name: none;
}

.card.custom-card {
  margin: 0;
}


/* ------------------------------------------------- */


/* https://htmx.org/attributes/hx-indicator/ */
.htmx-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

.htmx_indicator_wrapper {
  display: flex;
  position: relative;
  width: 100%;
  height: 25px;
}
img.htmx_indicator_img {
  position: absolute;
  width: 40px;
  opacity: .7;

  /* make centered */
  left: 50%;
  top: 0;
  transform: translate(-50%, 50%);
}

/* https://htmx.org/examples/animations/ */
/* NOTE htmx_fade_in is set by me */
#htmx_fade_in.htmx-added {
  opacity: 0;
}
#htmx_fade_in {
  opacity: 1;
  transition: opacity .35s ease-out;
}

input#id_captcha_1 {
  flex-grow: 1;
  order: 2;  /* 1 for LTR, 2 for RTL */

  /* for form-control: */
  border-color: var(--input-border);
  color: var(--default-text-color);
  background-color: var(--form-control-bg);
  font-size: 0.875rem;
  font-weight: var(--default-font-weight);
  line-height: 1.8;
  border-radius: 0.85rem;
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  display: block;
  width: 100%;
  appearance: none;
  
  /* for .form-control-lg: */
  font-size: 1rem;
  padding: 0.5rem 1rem;

  padding-left: 2.2rem;
}
img.captcha {
  order: 1;  /* 2 for LTR, 1 for RTL */
}
.last_input_wrapper {
  position: relative;
}
.captcha_refresh {
  position: absolute;
  left: 1.5rem;

  /* center vertically */
  top: 50%;
  transform: translate(0, -50%);
}
.captcha_refresh i {
  color: grey !important;
}

.handler_content {
  text-align: center;

  /* make centered */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.input-group-text {
  padding: .375rem .5rem;
}

span.has_mixed_unicode {
  /* added to have proper alignment in lines containing both arabic and latin characters */
  /* (https://stackoverflow.com/questions/12552804/direction-ltr-in-a-rtl-html-page) */
  unicode-bidi: inherit;
}



/* specific to this project ----------------------------- */

/* --- full height --- */
.full_height {
    max-height: 57em;
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- medium height --- */
.med_height {
    max-height: 40em;
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- low height --- */
.low_height {
    max-height: 25em;
    overflow-y: auto;
    overflow-x: hidden;
}

/* FOR_RTL */
/* for latin text to be left-aligned */
/* NOTE it was p but then I decided to change it to * */
/*      and haven't tested if it works fine */
*[dir="ltr"] {
  text-align: left;
}

/* FOR_RTL */
/*
  for proper aligning of rtl and ltr
    1. inside jodit wysiwyg editor when creating/editong
    2. when viewing, e.g. in .../list/
 (https://stackoverflow.com/a/8426901/)
*/
.jodit-wysiwyg *[style*="text-align: left;"],
*[style*="text-align: left;"] {
  direction: ltr;
}
[data-theme-mode=light] .jodit-toolbar__box div {
  background-color: #fff;
}

.ellipsised {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100%);
}
td.ellipsised {
  width: auto;
  max-width: 200px !important;
}


/* FOR_RTL */
/* make input ltr */
.login_form input:not(.btn),
.change_password_form input:not(.btn) {
  direction: ltr;
  text-align: left;
}
/* make placeholder rtl */
.login_form input:not(.btn)::placeholder,
.change_password_form input:not(.btn)::placeholder {
  text-align: right;
}


/* for circles inside status badge */
.order-status.badge_indicator_pending:before {
  background-color: rgb(var(--warning-rgb));
}
.order-status.badge_indicator_inprogress:before {
  background-color: rgb(var(--info-rgb));
}
.order-status.badge_indicator_responded:before {
  background-color: rgb(var(--success-rgb));
}
.order-status.badge_indicator_closed:before {
  background-color: gray;
}
.order-status.badge_indicator_disabled:before {
  background-color: gray;
}