@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: .85rem;  /* 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(0deg);
  }
}

[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 */
/* ... */


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: 1;  /* 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: 2;  /* 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 !important;
  overflow-y: scroll;
  overflow-x: hidden;
}
/*figure {
  background-color: white;
}*/
div.overlay,
figure::after {  /* JUMP_1 */
  position: absolute;
  content: "";
  background-image: url("/static/files/svg-loaders/three-dots--grey.svg");
  background-repeat: no-repeat;
  display: block;
  width: 120px;  /* <--,-- matches dimensions of svg */
  height: 30px;  /* <--' */
  opacity: .3;

  /* make centered */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
figure.chart_is_loaded::after {
  background-image: none;
}
figure .highcharts-container {
  z-index: 1 !important;  /* for chart to stand on top of JUMP_1 */
}
figure.full_height,  /* <-- comment if makes full screen charts half-page */
figure.full_height > div {
  margin: 0;
  min-height: 56em !important;
  max-height: 56em !important;
}
@media screen and (max-width: 1399px) {  /* for HD screen and lower */
  figure.full_height,  /* <-- comment if makes full screen charts half-page */
  figure.full_height > div {
    min-height: 35em !important;
    max-height: 35em !important;
  }
}
/* --- medium height --- */
.med_height {
  max-height: 40em !important;
  overflow-y: scroll;
  overflow-x: hidden;
}
figure.med_height,  /* <-- comment if makes full screen charts half-page */
figure.med_height > div {
  margin: 0;
  min-height: 35em !important;
  max-height: 35em !important;
}
/* --- low height --- */
.low_height {
  max-height: 25em !important;
  overflow-y: scroll;
  overflow-x: hidden;
}



/* remove 'a' link to original website in country chart */
.highcharts-credits a {
  display: none;
}

.search_results_list_group {
  overflow-x: scroll;
}


.very_low_indicator {
  color: var(--very_low_color);
}
.low_indicator {
  color: var(--low_color);
}
.warning_indicator {
  color: var(--warning_color);
}
.critical_indicator {
  color: var(--critical_color);
}


/* adjust id column */
.table th:nth-child(1),
.table td:nth-child(1) {
  width: 25px;
  max-width: inherit !important;
}

.visits_table_for_ip     tr th:nth-child(1),
.visits_table_for_domain tr th:nth-child(1) {  /* id column */
  /* max-width: fit-content; */  /* commented because seems not necessary */
}
.visits_table_for_ip tr th:nth-child(6) {  /* Domains column */
  width: 100% !important;
}
.visits_table_for_domain tr th:nth-child(4) {  /* IPs column */
  width: 100% !important;
}

.general_malicious_table tr th:nth-child(3) {  /* Sources column */
  width: 100% !important;
}


.table.sortable thead {
  cursor: pointer;
}
/**/
/*Show "sort icons" before the table is sorted */
.table.sortable th {
  position: relative;
}
.table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
  content: " \25BE";  /* ▼ */
  position: absolute;
  color: #6c757e;

  /* borrowed from dataTable */
  top: 50%;
  display: block;
  opacity: .3;
  right: 10px;
  line-height: 9px;
  /* font-size: .8em; */
}
.table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):before {
  content: " \25B4";  /* ▲ */
  position: absolute;
  color: #6c757e;

  /* borrowed from dataTable */
  bottom: 50%;
  display: block;
  opacity: .3;
  right: 10px;
  line-height: 9px;
  /* font-size: .8em; */
}
/**/
.table.sortable th.sorttable_sorted_reverse span::after {
  content: " \25B4";  /* ▲ */
  position: absolute;
  color: #6c757e;

  /* borrowed from dataTable */
  bottom: 50%;
  display: block;
  opacity: .3;
  right: 10px;
  line-height: 9px;
  /* font-size: .8em; */
}
.table.sortable th.sorttable_sorted_reverse span::before {
  content: " \25BE";  /* ▼ */
  position: absolute;
  color: #6c757e;

  /* borrowed from dataTable */
  top: 50%;
  display: block;
  opacity: 1;
  right: 10px;
  line-height: 9px;
  /* font-size: .8em; */
}

.table.sortable th.sorttable_sorted span::after {
  content: " \25B4";  /* ▲ */
  position: absolute;
  color: #6c757e;

  /* borrowed from dataTable */
  bottom: 50%;
  display: block;
  opacity: 1;
  right: 10px;
  line-height: 9px;
  /* font-size: .8em; */
}
.table.sortable th.sorttable_sorted span::before {
  content: " \25BE";  /* ▼ */
  position: absolute;
  color: #6c757e;

  /* borrowed from dataTable */
  top: 50%;
  display: block;
  opacity: .3;
  right: 10px;
  line-height: 9px;
  /* font-size: .8em; */
}


.table tbody th,
.table tfoot th,
.table thead th {
  /* padding: 7px !important; */
  padding-right: 25px !important;  /* to prevent masking of ::after/before */
}


/* to prevent default color for warning/critical rows */
.table.table-striped > tbody > tr:nth-of-type(odd) > * {
  color: inherit; /* var(--default-text-color) (in .../static/udon/dist/assets/css/styles.css) */
}


.full_width {
  transition: width 0.3s ease-in-out;

  /*
     NOTE used min-width because
     width was seen to be masked by col-xl-6
  */
  min-width: 100%;
}


/*
for <li class="slide has-sub"> in 00-sidebar.html
to make them take less space
*/
@media (min-width: 992px) {
  [data-nav-layout="horizontal"] .app-sidebar .main-menu > .slide {
    margin: 0 0;  /* originally: 0 0.1875rem */
  }
}


@media (min-width: 992px) {
  [data-nav-layout="horizontal"] .main-sidebar,
  [data-nav-layout="horizontal"] .main-header-container {
    width: 98%;  /* originally: 94% */
  }
}