/* GOOGLE FONTS */
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap");
/* VARIABLES CSS */
:root {
  --header-height: 3rem;

  /*== Colors ==*/

  --hue-color: 5;

  --color: hsl(var(--hue-color), 69%, 61%);
  --color-2: hsl(var(--hue-color), 69%, 61%);
  --color-svg: invert(67%) sepia(60%) saturate(4648%) hue-rotate(324deg)
    brightness(93%) contrast(88%);
  --color-alt: hsl(var(--hue-color), 57%, 53%);
  --color-alt-svg: invert(35%) sepia(34%) saturate(1189%) hue-rotate(318deg)
    brightness(108%) contrast(90%);
  --color-lighter: hsl(var(--hue-color), 92%, 85%);
  --color-lighter-svg: invert(90%) sepia(20%) saturate(1151%) hue-rotate(299deg)
    brightness(95%) contrast(108%);
  --color-danger: rgba(255, 0, 0, 0.8);
  --title-color: hsl(var(--hue-color), 8%, 15%);
  --text-color: hsl(var(--hue-color), 8%, 45%);
  --text-color-light: hsl(var(--hue-color), 8%, 65%);
  --input-color: hsl(var(--hue-color), 70%, 96%);
  --body-color: hsl(var(--hue-color), 60%, 99%);
  --container-color: #fff;
  --logo-svg: invert(0%) sepia(3%) saturate(0%) hue-rotate(235deg)
    brightness(105%) contrast(105%);
  --svg-fill: #000;
  --scroll-bar: hsl(var(--hue-color), 12%, 90%);
  --scroll-thumb: hsl(var(--hue-color), 12%, 80%);
  --chart-color: hsl(var(--hue-color), 69%, 61%);
  --chart-color-border: #fff;
  --theme-button: #444;
  --opacity-color-05: rgba(0, 0, 0, 0.005);
  --opacity-color-08: rgba(0, 0, 0, 0.008);
  --opacity-color-10: rgba(0, 0, 0, 0.01);
  --opacity-color-12: rgba(0, 0, 0, 0.012);
  --opacity-color-15: rgba(0, 0, 0, 0.015);
  --opacity-color-20: rgba(0, 0, 0, 0.02);
  --opacity-color-25: rgba(0, 0, 0, 0.025);
  --opacity-color-05-invert: rgba(255, 255, 255, 0.005);
  --opacity-color-08-invert: rgba(255, 255, 255, 0.008);
  --opacity-color-10-invert: rgba(255, 255, 255, 0.01);
  --opacity-color-12-invert: rgba(255, 255, 255, 0.012);
  --opacity-color-15-invert: rgba(255, 255, 255, 0.015);
  --opacity-color-20-invert: rgba(255, 255, 255, 0.02);
  --opacity-color-25-invert: rgba(255, 255, 255, 0.025);

  /*== Font and typography ==*/
  --body-font: "Ubuntu", sans-serif;

  /* 1rem = 16px */
  --big-font: 2rem;
  --h1-font: 1.5rem;
  --h2-font: 1.25rem;
  --h3-font: 1.125rem;
  --normal-font: 0.938rem;
  --small-font: 0.813rem;
  --smallest-font: 0.75rem;

  /*== Font weight ==*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*== Margenes Bottom ==*/
  --mb-0-25: 0.25rem;
  --mb-0-5: 0.5rem;
  --mb-0-75: 0.75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;
  --mb-3: 3rem;

  /*== z index ==*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-model: 1000;
}

/*==Font size for large devices==*/

@media screen and (min-width: 968px) {
  :root {
    --big-font: 3rem;
    --h1-font: 2.25rem;
    --h2-font: 1.5rem;
    --h3-font: 1.25rem;
    --normal-font: 1rem;
    --small-font: 0.875rem;
    --smaller-font: 0.813rem;
  }
}

/* Change Theme */

body.dark-theme {
  /*== Colors ==*/

  --color: hsl(var(--hue-color), 69%, 61%);
  --color-2: hsl(var(--hue-color), 30%, 8%);
  --title-color: hsl(var(--hue-color), 8%, 95%);
  --text-color: hsl(var(--hue-color), 8%, 75%);
  --input-color: hsl(var(--hue-color), 29%, 16%);
  --body-color: hsl(var(--hue-color), 28%, 12%);
  --container-color: hsl(var(--hue-color), 29%, 16%);
  --logo-svg: invert(100%) sepia(91%) saturate(38%) hue-rotate(321deg)
    brightness(110%) contrast(110%);
  --color-alt: hsl(var(--hue-color), 57%, 53%);
  --color-alt-svg: invert(41%) sepia(65%) saturate(1248%) hue-rotate(329deg)
    brightness(83%) contrast(89%);
  --color-lighter: hsl(var(--hue-color), 92%, 85%);
  --color-lighter-svg: invert(76%) sepia(21%) saturate(501%) hue-rotate(315deg)
    brightness(101%) contrast(98%);
  --text-color-light: hsl(var(--hue-color), 8%, 65%);
  --svg-fill: #fff;
  --scroll-bar: hsl(var(--hue-color), 29%, 16%);
  --scroll-thumb: hsl(var(--hue-color), 12%, 36%);
  --chart-color: #fff;
  --chart-color-border: hsl(var(--hue-color), 30%, 8%);
  --theme-button: #fff;
  --opacity-color-05: rgba(255, 255, 255, 0.05);
  --opacity-color-08: rgba(255, 255, 255, 0.08);
  --opacity-color-10: rgba(255, 255, 255, 0.1);
  --opacity-color-12: rgba(255, 255, 255, 0.12);
  --opacity-color-15: rgba(255, 255, 255, 0.15);
  --opacity-color-20: rgba(255, 255, 255, 0.2);
  --opacity-color-25: rgba(255, 255, 255, 0.25);
  --opacity-color-05-invert: rgba(0, 0, 0, 0.05);
  --opacity-color-08-invert: rgba(0, 0, 0, 0.08);
  --opacity-color-10-invert: rgba(0, 0, 0, 0.1);
  --opacity-color-12-invert: rgba(0, 0, 0, 0.12);
  --opacity-color-15-invert: rgba(0, 0, 0, 0.15);
  --opacity-color-20-invert: rgba(0, 0, 0, 0.2);
  --opacity-color-25-invert: rgba(0, 0, 0, 0.25);
}
.popup-container {
  width: 90% !important;
  text-align: left;
  padding: 1rem;
  margin-right: auto;
  margin-left: auto;
}

.popup-container h3 {
  margin: 1rem 0;
}
.popup-container .theme-colors div {
  display: inline-flex;
  margin-top: auto;
  margin-bottom: auto;
  gap: 0.25rem;
}
.popup-container .theme-colors .color {
  margin-top: auto;
  margin-bottom: auto;
  border-radius: 1rem;
  height: 1.5rem;
  width: 1.5rem;
  cursor: pointer;
}

.popup-container .theme-colors .color:hover {
  opacity: 0.5;
}

.nav_btns {
  align-items: center;
}
#theme-button {
  margin-left: 1.5%;
  background-color: var(--theme-button);
  border-radius: 1rem;
  padding: 0.25rem 1.1rem 0.25rem 1.1rem;
}
.theme-name {
  margin-left: 0.2rem;
}
.change-theme {
  font-size: 1.2rem;
  color: var(--container-color);
  cursor: pointer;
  transition: 0.2s;
}
.change-theme:hover {
  color: var(--color);
  transition: 0.2s;
}
.theme-mood {
  display: inline;
  margin-left: 0.5rem;
  color: var(--text-color);
  font-size: var(--h2-font);
}
.popup-container .flex .switch {
  margin-top: auto;
  margin-bottom: auto;
}

/* BASE */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
*:before,
*:after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body {
  font-family: var(--body-font);
  font-size: var(--normal-font);
  margin: 0 0 var(--header-height) 0;
  background-color: var(--body-color);
  color: var(--text-color);
  overflow: hidden;
}
h1,
h2,
h3,
h4 {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
}
img {
  max-width: 100%;
  max-height: auto;
}
a {
  text-decoration: none;
  color: var(--text-color);
  transition: 0.2s;
}
a:hover {
  color: var(--color);
  transition: 0.2s;
}
ul {
  list-style: none;
}
::selection {
  background: var(--color);
  color: #fff;
  user-select: none;
  cursor: default;
}
.flex {
  display: flex;
}
.space-between {
  justify-content: space-between;
}

/* REUSABLE CSS CLASSES */
.section {
  padding: 8% 0 2%;
}
.section_title {
  display: none;
  font-size: var(--h1-font);
  color: var(--text-color);
}
.section_subtitle {
  display: block;
  font-size: var(--small-font);
  margin-bottom: var(--mb-3);
}
.section_title,
.section_subtitle {
  text-align: center;
}

/* LAYOUT */

#loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: var(--body-color);
  z-index: var(--z-model);
  display: flex;
  align-items: center;
  justify-content: center;
}
.load_tahmid {
  width: 40%;
  max-height: 40%;
  fill: var(--svg-fill);
  justify-self: center;
  animation: loading 1.5s;
  animation-iteration-count: infinite;
}
@keyframes loading {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.2;
  }
  20% {
    opacity: 0.4;
  }
  30% {
    opacity: 0.6;
  }
  40% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  70% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

/* LAYOUT */

.container {
  max-width: 95%;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
}
.grid {
  display: grid;
  gap: 1.5rem;
}
.header {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: var(--z-fixed);
}
.header_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--body-color);
  top: -15px;
  left: 0;
  z-index: -1;
  filter: blur(10px);
}
.header_bg-mobile {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--body-color);
  top: 0;
  left: 0;
  z-index: -1;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
}

/*TODO  NAV */
.nav-mobile {
  max-width: 968px;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav_logo-mobile,
.nav_toggle-mobile {
  color: var(--title-color);
  font-weight: var(--font-medium);
}
.nav_logo-mobile:hover {
  color: var(--color);
}
.nav_toggle-mobile {
  font-size: 1.1rem;
  cursor: pointer;
}
.nav_toggle-mobile:hover {
  color: var(--color);
}

@media screen and (max-width: 767px) {
  .nav_menu-mobile {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background-color: var(--body-color);
    padding: 2rem 1.5rem 4rem;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
    border-radius: 1.5rem 1.5rem 0 0;
    transition: 0.3s;
  }
}
.nav_list-mobile {
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}
.nav_link-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--small-font);
  color: var(--title-color);
  font-weight: var(--font-medium);
}
.nav_link-mobile:hover {
  color: var(--color);
}
.nav_icon-mobile {
  font-size: 1.2rem;
}
.nav_close-mobile {
  position: absolute;
  right: 1.3rem;
  bottom: 0.5rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color);
}
.nav_close-mobile:hover {
  color: var(--color-alt);
}
.show_menu-mobile {
  bottom: 0;
}

.active-link-mobile {
  color: var(--color);
}
.scroll-header {
  top: -3px;
  filter: blur(2px);
}
/*TODO  Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  height: 100vh;
  padding: 1rem 1rem 0;
  background-color: var(--container-color);
  box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
  z-index: var(--z-fixed);
  transition: 0.4s;
  border-bottom-right-radius: 2rem;
  border-top-right-radius: 1rem;
}

.sidebar_container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 3rem;
  overflow: auto;
  scrollbar-width: none;
}

/* For Google Chrome and others */
.sidebar_container::-webkit-scrollbar {
  display: none;
}

.sidebar_logo {
  font-weight: var(--font-semi-bold);
  margin-bottom: 2.5rem;
}
.logo_img {
  justify-self: center;
  filter: var(--logo-svg);
  margin-right: 0.5rem;
}
.logo_img:hover {
  filter: var(--color-svg);
}
.login_image {
  justify-self: center;
  height: 5rem;
  width: 5rem;
  margin-top: 1rem;
}
.login_box_container {
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
  padding: 10% 0 1% 0;
}

.sidebar_list,
.sidebar_items {
  display: grid;
}

.sidebar_list {
  row-gap: 2.5rem;
}

.sidebar_items {
  row-gap: 1.5rem;
}

.sidebar_subtitle {
  font-size: var(--normal-font);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: var(--text-color);
}
.sidebar_subtitle-mobile {
  font-size: var(--normal-font);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: var(--text-color);
  text-align: center;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.sidebar_link {
  display: flex;
  align-items: center;
  color: var(--title-color);
}

.sidebar_link:hover {
  color: var(--color);
}

.sidebar_icon {
  font-size: 1.2rem;
  margin-right: 0.5rem;
}

.sidebar_name {
  font-size: var(--small-font);
  font-weight: var(--font-medium);
  white-space: nowrap;
  padding-right: 2rem;
}

.sidebar_logout {
  margin-top: 5rem;
}

/* Dropdown */
.sidebar_dropdown {
  overflow: hidden;
  max-height: 21px;
  transition: 0.4s ease-in-out;
}

.sidebar_dropdown-collapse {
  border-radius: 0.25rem;
  margin-top: 1rem;
}

.sidebar_dropdown-content {
  display: grid;
  row-gap: 0.5rem;
  padding: 0.75rem 2.5rem 0.75rem 1.8rem;
}

.sidebar_dropdown-item {
  font-size: var(--smaller-font);
  font-weight: var(--font-medium);
  color: var(--text-color-light);
}

.sidebar_dropdown-item:hover {
  color: var(--color);
}

.sidebar_dropdown-icon {
  margin-left: auto;
  transition: 0.4s;
}

/* Show dropdown collapse */
.sidebar_dropdown:hover {
  max-height: 100rem;
}

/* Rotate icon arrow */
.sidebar_dropdown:hover .sidebar_dropdown-icon {
  transform: rotate(180deg);
}

.user_image-sidebar {
  width: 2rem;
  border-radius: 3px;
  margin-right: 1rem;
}
.user_image-sidebar:hover {
  border: 1px solid var(--color);
  transition: 0.3s;
}

/*== Show menu ==*/
.show-menu {
  left: 0;
}

/*== Active link ==*/
.active {
  color: var(--color);
}
select {
  color: var(--color);
}
/*TODO  Buttons */
button {
  cursor: pointer;
  border: none;
  outline: none;
  font-size: var(--normal-font);
  font-weight: var(--font-medium);
  font-family: var(--body-font);
}
.loader {
  border: 2px solid var(--opacity-color-20);
  border-top: 2px solid #fff;
  border-radius: 50%;
  width: 1.1rem;
  height: 1.1rem;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.button {
  display: inline-block;
  background-color: var(--color);
  color: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: var(--font-medium);
}
.button-table-data {
  display: inline-block;
  background-color: transparent;
  color: var(--color);
  width: 100%;
  font-weight: var(--font-medium);
}
.button:hover {
  background-color: var(--color-alt);
}
.button_icon {
  font-size: 1.25rem;
  margin-left: var(--mb-0-5);
  transition: 0.3s;
}
.button--flex {
  display: inline-flex;
  align-items: center;
}

/* TODO Switch */
.switch {
  cursor: pointer;
}
.switch input {
  display: none;
}
.switch input + span {
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background-color: var(--text-color-light);
  transition: all 0.3s ease;
  display: block;
  position: relative;
}
.switch input + span:before,
.switch input + span:after {
  content: "";
  display: block;
  position: absolute;
  transition: all 0.3s ease;
}
.switch input + span:before {
  top: 5px;
  left: 5px;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  border: 5px solid var(--color-lighter);
}
.switch input + span:after {
  top: 5px;
  left: 32px;
  width: 6px;
  height: 18px;
  border-radius: 40%;
  transform-origin: 50% 50%;
  background: var(--color-lighter);
  opacity: 0;
}
.switch input + span:active {
  transform: scale(0.92);
}
.switch input:checked + span {
  background: var(--color);
}
.switch input:checked + span:before {
  width: 0px;
  border-radius: 3px;
  margin-left: 27px;
  border-width: 3px;
  background: var(--color-lighter);
}
.switch input:checked + span:after {
  -webkit-animation: blobChecked 0.35s linear forwards 0.2s;
  animation: blobChecked 0.35s linear forwards 0.2s;
}
.switch input:not(:checked) + span:before {
  -webkit-animation: blob 0.85s linear forwards 0.2s;
  animation: blob 0.85s linear forwards 0.2s;
}
.power-switch {
  --color-invert: #ffffff;
  --width: 100px;
  --height: 100px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--width);
  height: var(--height);
}
.power-switch .button {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: transparent;
}
.power-switch .button:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: radial-gradient(circle closest-side, var(--color), transparent);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  transform: perspective(1px) translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.power-switch .button .power-on,
.power-switch .button .power-off {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
  fill: none;
  stroke: var(--color);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.power-switch .button .power-on .line,
.power-switch .button .power-off .line {
  opacity: 0.2;
}
.power-switch .button .power-on .circle,
.power-switch .button .power-off .circle {
  opacity: 0.2;
  transform: rotate(-58deg);
  transform-origin: center 54px;
  stroke-dasharray: 220;
  stroke-dashoffset: 40;
}
.power-switch .button .power-on {
  filter: drop-shadow(0px 0px 25px var(--text-color-light));
}
.power-switch .button .power-on .line {
  opacity: 0;
  transition: opacity 0.3s ease 1s;
}
.power-switch .button .power-on .circle {
  opacity: 1;
  stroke-dashoffset: 220;
  transition: transform 0s ease, stroke-dashoffset 1s ease 0s;
}
.power-switch input {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
}
.power-switch input:checked + .button:after {
  opacity: 0.15;
  transform: scale(2) perspective(1px) translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.power-switch input:checked + .button .power-on,
.power-switch input:checked + .button .power-off {
  -webkit-animation: click-animation 0.3s ease forwards;
  animation: click-animation 0.3s ease forwards;
  transform: scale(1);
}
.power-switch input:checked + .button .power-on .line,
.power-switch input:checked + .button .power-off .line {
  -webkit-animation: line-animation 0.8s ease-in forwards;
  animation: line-animation 0.8s ease-in forwards;
}
.power-switch input:checked + .button .power-on .circle,
.power-switch input:checked + .button .power-off .circle {
  transform: rotate(302deg);
}
.power-switch input:checked + .button .power-on .line {
  opacity: 1;
  transition: opacity 0.05s ease-in 0.55s;
}
.power-switch input:checked + .button .power-on .circle {
  transform: rotate(302deg);
  stroke-dashoffset: 40;
  transition: transform 0.4s ease 0.2s, stroke-dashoffset 0.4s ease 0.2s;
}

@-webkit-keyframes line-animation {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(10px);
  }
  40% {
    transform: translateY(-25px);
  }
  60% {
    transform: translateY(-25px);
  }
  85% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes line-animation {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(10px);
  }
  40% {
    transform: translateY(-25px);
  }
  60% {
    transform: translateY(-25px);
  }
  85% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}
@-webkit-keyframes click-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes click-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes blob {
  0%,
  100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.12, 0.94);
  }
  60% {
    transform: scale(0.96, 1.06);
  }
}

@keyframes blob {
  0%,
  100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.12, 0.94);
  }
  60% {
    transform: scale(0.96, 1.06);
  }
}
@-webkit-keyframes blobChecked {
  0% {
    opacity: 1;
    transform: scaleX(1);
  }
  30% {
    transform: scaleX(1.44);
  }
  70% {
    transform: scaleX(1.18);
  }
  50%,
  99% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}
@keyframes blobChecked {
  0% {
    opacity: 1;
    transform: scaleX(1);
  }
  30% {
    transform: scaleX(1.44);
  }
  70% {
    transform: scaleX(1.18);
  }
  50%,
  99% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

/* TODO List */
.errorlist li {
  margin-top: 0.5rem;
}
.invalid-feedback {
  display: block;
  margin-top: 0.1rem;
  margin-bottom: 0.2rem;
  font-size: 80%;
  color: var(--color-danger);
}
.list_header {
  display: flex;
  align-items: center;
  margin-bottom: var(--mb-1-5);
  cursor: pointer;
  padding-top: 0.5rem;
}
.list_icon,
.list_arrow {
  font-size: 2rem;
  color: var(--color);
}
.list_icon {
  margin-right: var(--mb-0-75);
}

.list_title-main {
  font-size: var(--h3-font);
}
.list_subtitle {
  font-size: var(--small-font);
  color: var(--text-color-light);
}
.list_arrow {
  margin-left: auto;
  transition: 0.4s;
}
.list_title {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--mb-0-5);
}
.list_name,
.list_number {
  font-size: var(--normal-font);
  font-weight: var(--font-medium);
  color: var(--skill-color);
}
.list_bar,
.list_percentage {
  height: 5px;
  border-radius: 0.25rem;
}
.list_bar {
  background-color: var(--color-lighter);
}
.list_percentage {
  display: block;
  background-color: var(--color);
}
.list_datascience {
  width: 70%;
}
.list_ml {
  width: 50%;
}
.list_web {
  width: 65%;
}

.list_close .list_data {
  height: 0;
  overflow: hidden;
  transition: 0.5s;
}
.list_open .list_data {
  height: 1.8rem;
  transition: 0.5s;
}
.list_close .list_list {
  height: 0;
  transition: 0.5s;
  overflow-y: auto;
}
.list_open .list_list {
  height: max-content;
  margin-bottom: var(--mb-2-5);
  transition: 0.5s;
}
.list_open .list_arrow {
  transform: rotate(180deg);
}
/*TODO Range slider*/
.slider-ui {
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 1rem;
  width: 100%;
  height: 2rem;
}
.slider-ui input {
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  width: 100%;
  cursor: pointer;
  opacity: 0;
}
.slider-ui .bar {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #000;
  border-radius: 1rem;
}
.slider-ui .min,
.slider-ui .max {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 800;
  color: #fff;
}
.slider-ui .min {
  left: 10px;
}
.slider-ui .max {
  right: 10px;
}
.slider-ui .track {
  position: absolute;
  z-index: 3;
  left: 15px;
  right: 15px;
  top: 0;
  bottom: 0;
}
.slider-ui .value {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-color);
  background-color: #fff;
  border: 4px solid #000;
  border-radius: 100%;
  box-sizing: border-box;
  transform: translateX(-50%);
  transition: top 0.3s ease-in-out, color 0.3s ease-in-out;
}
.slider-ui .value.up {
  top: -150%;
  color: var(--text-color);
  font-size: 14px;
  width: 3rem;
  height: 3rem;
}

.slider-ui.color3 .bar {
  background-color: var(--text-color-light);
}
.slider-ui.color3 .value {
  border-color: var(--color-lighter);
}
/*TODO Drop down select*/
#device-select {
  margin-top: 2rem;
  margin-bottom: auto;
}
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
  margin-top: auto;
  margin-bottom: auto;
}
.custom-select-wrapper select {
  display: none;
}
.custom-select {
  position: relative;
  display: inline-block;
}
.custom-select-trigger {
  position: relative;
  display: block;
  width: 9rem;
  padding: 0.5rem 1rem;
  font-weight: 300;
  color: #fff;
  background: var(--color);
  border-radius: 1rem;
  cursor: pointer;
}
.custom-select-trigger:after {
  position: absolute;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  top: 50%;
  right: 20px;
  margin-top: -3px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  transition: all 0.4s ease-in-out;
  transform-origin: 50% 0;
}
.custom-select.opened .custom-select-trigger:after {
  margin-top: 3px;
  transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 100%;
  margin: 15px 0;

  border-radius: 0.5rem 1rem 0.5rem 1rem;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  background: var(--container-color);
  transition: all 0.4s ease-in-out;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-15px);
}
.custom-select.opened .custom-options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
  z-index: 20;
}
.custom-options:before {
  position: absolute;
  display: block;
  content: "";
  bottom: 100%;
  right: 20px;
  width: 7px;
  height: 7px;
  margin-bottom: -3px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  background: var(--container-color);
  transform: rotate(45deg);
  transition: all 0.4s ease-in-out;
}
.option-hover:before {
  background: var(--container-color);
}
.custom-option {
  position: relative;
  display: block;
  padding: 1rem;
  color: var(--color);
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}
.custom-option:first-of-type {
  border-radius: 0.5rem 1rem 0 0;
}
.custom-option:last-of-type {
  border-bottom: 0;
  border-radius: 0 0 0.5rem 1rem;
}
.custom-option:hover,
.custom-option.selection {
  background: var(--color-lighter);
}

/*TODO  Box */
.box_container {
  gap: 1.5rem;
  grid-template-columns: repeat(1, 1fr);
}
.analytics_box_container {
  gap: 1.5rem;
  grid-template-columns: repeat(1, 1fr);
}
.cctv_box_container .box_content {
  padding: 0.3rem 0.3rem 0.1rem 0.3rem;
}
.cctv_box_container .box_content img {
  border-radius: 1rem;
  margin: auto;
}
.cctv_box_container {
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
}
.box_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--container-color);
  opacity: 0.6;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 1rem;
}
.box_content {
  position: relative;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: 0.3s;
}
.box_content:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.box_icon {
  display: block;
  font-size: 1.5rem;
  color: var(--color);
  margin-top: auto;
  margin-bottom: auto;
}
.box_header {
  display: flex;
  margin-bottom: 1rem;
}
.box_title {
  font-size: var(--h3-font);
  font-weight: var(--font-medium);
  margin-top: auto;
  margin-bottom: auto;
}
.box_subtitle {
  margin-bottom: var(--mb-0-75);
  margin-top: var(--mb-0-75);
}
.box_subtitle-gap {
  display: flex;
  justify-content: space-between;
}
.box_button {
  cursor: pointer;
  font-size: var(--small-font);
}
.button--small {
  padding: 0.75rem 1rem;
}
.button--link {
  padding: 0;
  background-color: transparent;
  color: var(--color);
}
.button--link:hover {
  background-color: transparent;
  color: var(--color-alt);
}
.box_button:hover .button_icon {
  transform: translateX(0.25rem);
}
.box_model {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 105%;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
}
.box_model-content {
  position: absolute;
  top: 100%;
  left: 100%;
}
.active-model-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  overflow-y: auto;
  height: 95%;
}
.box_model-status {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
  max-height: auto;
  margin-top: 10%;
  margin-bottom: auto;
  padding: 1.25rem;
  border-radius: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: 0.3s;
  background-color: var(--container-color);
}
.active-model-content::-webkit-scrollbar {
  display: none;
  width: 0;
}
.bg-color-table {
  position: absolute;
  width: 100%;
  height: 85%;
  background-color: var(--container-color);
  opacity: 0.9;
  top: 15%;
  left: 0;
  z-index: -1;
}
.box_model-services {
  row-gap: 1rem;
}
.box_model-service {
  display: flex;
}
.box_model-title {
  font-size: var(--h3-font);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-1-5);
}
.box_model-close {
  position: relative;
  margin-top: 0;
  margin-bottom: auto;
  font-size: 1.5rem;
  color: var(--color);
  cursor: pointer;
}
.box_model-icon {
  color: var(--color);
  margin-right: var(--mb-0-25);
}

.active-model {
  opacity: 1;
  visibility: visible;
}
/* Swipe */
.swipe_container {
  overflow: initial;
}
.swipe_content {
  padding: 0 1.5rem;
}
.swipe_img {
  width: 265px;
  border-radius: 0.5rem;
  justify-self: center;
}
.swipe_title {
  font-size: var(--h3-font);
  margin-bottom: var(--mb-0-5);
}
.swipe_description {
  margin-bottom: var(--mb-0-75);
}
.swipe_button:hover .button_icon {
  transform: translateX(0.25rem);
}
.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
}
.swiper-portfolio-icon {
  font-size: 2rem;
  color: var(--color);
}
.swiper-button-prev {
  left: -0.5rem;
}
.swiper-button-next {
  right: -0.5rem;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: -2.5rem;
}
.swiper-pagination-bullet-active {
  background-color: var(--color);
}
.swiper-button-prev,
.swiper-button-next,
.swiper-pagination-bullet {
  outline: none;
}

/*TODO   Large Box */
.lbox {
  text-align: center;
}
.lbox_container {
  border-radius: 0.25rem;
  grid-template-columns: 1fr;
  backdrop-filter: blur(15px);
  height: 86vh;
}
.lbox_title {
  font-size: var(--h2-font);
  margin-bottom: var(--mb-0-75);
}
.lbox_description {
  margin-bottom: var(--mb-1-5);
}
.lbox_title {
  color: #fff;
}
.lbox_description {
  color: var(--color-lighter);
}
.lbox_description:hover {
  color: #fff;
  transition: 0.3s;
}

/* Scroll Up */
.scroll_up {
  position: fixed;
  right: 1rem;
  bottom: -20%;
  background-color: var(--color);
  opacity: 0.5;
  padding: 0 0.3rem;
  border-radius: 0.4rem;
  z-index: var(--z-tooltip);
  transition: 0.4s;
}
.scroll_up:hover {
  background-color: var(--color-alt);
  opacity: 0.8;
}
.scroll_up-icon {
  font-size: 1.5rem;
  color: var(--color-lighter);
}
.show-scroll {
  bottom: 5rem;
}

/* Scroll Bar */
::-webkit-scrollbar {
  width: 0.4rem;
  background-color: var(--scroll-bar);
  border-radius: 0.5rem;
  height: 0.3rem;
}
::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border-radius: 0.5rem;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-color-light);
}
/*TODO Popup */
.popup {
  backdrop-filter: blur(8px);
  left: 0;
  opacity: 0;
  z-index: 20;
  position: fixed;
  transition: all 0.4s ease-out;
  top: 0;
  bottom: 0;
  width: 100vw; /* viewport width */
  height: 100vh; /* viewport height */
  overflow-y: overlay;
  overflow-x: hidden;
  pointer-events: none;
  background-color: var(--opacity-color-20-invert);
}
.popup::-webkit-scrollbar {
  display: none;
  width: 0;
}

.popup.open {
  opacity: 1;
  pointer-events: all;
}
.popup_content {
  position: relative;
  width: 90%;
  max-height: 90%;
  top: 0;
  left: 0;
  transform: scale(0.1);
  transition: 0.3s;
  border-radius: 0.5rem;
}
.popup_content.open {
  transform: scale(1);
  top: 0;
  left: 0;
  margin-top: 5%;
  margin-bottom: 5%;
}
.devices,
.preferences,
.notifications,
.tweaks,
.timerange,
.edit_profile,
.add_device,
.remove_device {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
  transition: 0.3s;
}
.open {
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transform: translateX(-50%) translateY(-50%);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  transition: 0.3s;
}
.popup_box {
  gap: 1.5rem;
  grid-template-columns: repeat(1, 1fr);
  padding-bottom: 4rem;
  padding-top: 1rem;
}
.timerange .popup_box .popup_box-content {
  padding-bottom: 25rem;
}
.popup_box-content {
  position: relative;
  border-bottom-left-radius: 1rem;
  border-top-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border-top-right-radius: 1rem;
  width: 100%;
  margin: auto;
  transition: 0.3s;
}
.popup_bg {
  position: absolute;
  width: 90%;
  height: 100%;
  background-color: var(--container-color);
  opacity: 0.8;
  top: 0;
  left: 5%;
  z-index: -1;
  border-bottom-left-radius: 1rem;
  border-top-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border-top-right-radius: 1rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.popup_icon {
  display: block;
  font-size: 1.5rem;
  color: var(--color);
  margin-top: auto;
  margin-bottom: auto;
}
.popup_header {
  display: flex;
  margin-bottom: 2rem;
}
.popup_title {
  font-size: var(--h1-font);
  font-weight: var(--font-medium);
  margin-top: auto;
  margin-bottom: 2rem;
}
.popup_title-device {
  font-size: var(--h1-font);
  font-weight: var(--font-medium);
  margin-top: auto;
  margin-bottom: auto;
}
.popup_subtitle {
  margin-bottom: var(--mb-1);
}
.popup_subtitle-gap {
  display: flex;
  justify-content: space-between;
}
.popup_button {
  cursor: pointer;
  font-size: var(--small-font);
}
.popup-container .flex h3.power {
  margin-top: auto;
  margin-bottom: auto;
}
.preferences .grid {
  gap: 0;
  row-gap: 8%;
}

/*TODO  Chart js */
/*TODO  Gauge */
.gauge_container {
  width: 250px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}
.gauge {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
}
.gauge-text {
  text-align: center;
  color: var(--text-color);
  font-size: var(--small-font);
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translate(-50%, -14%);
}
.gauge-value {
  text-align: center;
  color: var(--text-color);
  font-size: var(--small-font);
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translate(-50%, -7%);
}
/*TODO Heat map */
.heat_map {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.bar_chart {
  width: 100%;
  min-height: 20rem;
  margin: auto;
}
/*TODO  Map */
#my_map {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  border-radius: 1rem;
  opacity: 0.8;
  transition: 0.3s;
}
.map_content {
  padding: 0;
}
#export {
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 999;
  background: white;
  color: black;
  padding: 6px;
  border-radius: 4px;
  font-family: "Helvetica Neue";
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  top: 90px;
}
.marker-cluster div {
  color: rgba(0, 0, 0, 0.5);
  width: 30px;
  height: 30px;
  margin-left: 5px;
  margin-top: 5px;
  text-align: center;
  border-radius: 15px;
  font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster-small div {
  background-color: transparent;
}
.marker-cluster-small {
  background-color: rgba(255, 255, 255, 0.3);
}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
  font-size: 5px;
}

/*TODO  Profile */
.user_container {
  row-gap: 3rem;
}
textarea::-webkit-scrollbar {
  width: 0px;
}
.user_image {
  width: 60%;
  border-radius: 5%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}
.user_image:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: 0.3s;
}

.user_information {
  display: flex;
  margin-bottom: var(--mb-2);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.device_information {
  display: flex;
  margin-bottom: var(--mb-1);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color);
  border-radius: 1rem 1rem 0rem 0rem;
  height: 2rem;
}
.device_table_title {
  font-size: var(--h3-font);
  font-weight: var(--font-medium);
  color: #fff;
  margin: auto;
}
.user_icon {
  font-size: 2rem;
  color: var(--color);
  margin-right: var(--mb-0-75);
}
.user_title {
  font-size: var(--h3-font);
  font-weight: var(--font-medium);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}
.user_subtitle {
  font-size: var(--small-font);
  color: var(--text-color-light);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.8rem;
}
.user_content {
  background-color: var(--input-color);
  border: 0.1rem solid var(--text-color);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem 0.25rem;
}
.user_input {
  width: 100%;
  background-color: var(--input-color);
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: var(--normal-font);
  border: none;
  outline: none;
  padding: 0.25rem 0.5rem 0.5rem 0;
}
.user_input-subscriber {
  background-color: transparent;
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: var(--normal-font);
  border: none;
  outline: none;
  text-align: end;
}
.datetime_label {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}
.user_input-datetime {
  width: 100%;
  background-color: transparent;
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: var(--normal-font);
  border: none;
  outline: none;
  margin-top: auto;
  margin-bottom: auto;
}
.user_label {
  font-size: var(--smaller-font);
  color: var(--title-color);
}
textarea {
  resize: vertical;
}
#subscriber-info-hider {
  display: block;
  text-align: center;
  justify-items: center;
  justify-content: center;
  margin: auto;
}
/*TODO  Date time picker */
.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: var(--container-color);
  border-radius: 1rem;
  border: 1px solid var(--container-color);
  max-width: none;
  padding: 0;
  margin-top: 7px;
  top: 100px;
  left: 20px;
  z-index: 50;
  display: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.daterangepicker:before,
.daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: "";
}

.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid var(--container-color);
}

.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--container-color);
  border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 10px;
}

.daterangepicker.drop-up {
  margin-top: -7px;
}

.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid var(--color);
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid var(--color);
}

.daterangepicker.single .daterangepicker .ranges,
.daterangepicker.single .drp-calendar {
  float: none;
}

.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 70%;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}

.daterangepicker .drp-calendar.right {
  padding: 8px;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  color: var(--text-color);
  border: solid var(--text-color);
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table {
  border: 1px solid var(--container-color);
  border-radius: 4px;
  background-color: var(--container-color);
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background-color: var(--color);
  border-color: transparent;
  color: inherit;
}

.daterangepicker td.week,
.daterangepicker th.week {
  font-size: 80%;
  color: var(--text-color);
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: var(--container-color);
  border-color: transparent;
  color: var(--text-color-light);
}

.daterangepicker td.in-range {
  background-color: var(--color-lighter);
  border-color: transparent;
  color: #000;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--color);
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled,
.daterangepicker option.disabled {
  color: var(--color);
  cursor: not-allowed;
  text-decoration: line-through;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: var(--color);
  border: 1px solid var(--color);
  padding: 0.15rem;
  outline: 0;
  font-size: 12px;
  border-radius: 0.4rem;
  color: #fff;
}
.daterangepicker select.hourselect option,
.daterangepicker select.minuteselect option,
.daterangepicker select.secondselect option,
.daterangepicker select.ampmselect option {
  overflow: scroll;
  background: var(--color);
  border: 1px solid transparent;
  padding: 5rem;
  font-size: 12px;
  border-radius: 1rem;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: var(--color);
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid var(--color);
  display: none;
  line-height: 12px;
  vertical-align: middle;
  color: #fff;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
  color: var(--text-color);
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  background-color: var(--color);
  border-radius: 0.5rem;
  border-color: transparent;
  font-weight: bold;
  padding: 4px 8px;
  color: #fff;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid var(--color);
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid var(--color);
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid var(--color);
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid var(--color);
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.daterangepicker .ranges li:hover {
  background-color: var(--color-lighter);
  color: #fff;
}

.daterangepicker .ranges li.active {
  background-color: var(--color);
  color: #fff;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }

  .daterangepicker .ranges ul {
    width: 140px;
  }

  .daterangepicker.single .ranges ul {
    width: 100%;
  }

  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }

  .daterangepicker.single .ranges,
  .daterangepicker.single .drp-calendar {
    float: left;
  }

  .daterangepicker {
    direction: ltr;
    text-align: left;
  }

  .daterangepicker .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .daterangepicker .drp-calendar.right {
    margin-left: 0;
  }

  .daterangepicker .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 8px;
  }

  .daterangepicker .ranges,
  .daterangepicker .drp-calendar {
    float: left;
  }
}

@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
  }

  .daterangepicker .ranges {
    float: left;
  }

  .daterangepicker.rtl .ranges {
    float: right;
  }

  .daterangepicker .drp-calendar.left {
    clear: none !important;
  }
}
/*TODO Virtual Select*/
.select_content {
  padding: 0;
  z-index: 1;
}
@-webkit-keyframes vscomp-animation-spin {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@keyframes vscomp-animation-spin {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
body.vscomp-popup-active {
  overflow: hidden;
}
.vscomp-ele {
  display: inline-block;
  width: 100%;
}
.vscomp-wrapper {
  display: inline-flex;
  position: relative;
  width: 100%;
  font-size: var(--h3-font);
  color: var(--text-color);
  text-align: left;
  flex-wrap: wrap;
}
.vscomp-wrapper *,
.vscomp-wrapper *::before,
.vscomp-wrapper *::after {
  box-sizing: border-box;
}
.vscomp-wrapper:focus {
  outline: none;
}
.vscomp-dropbox-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}
.vscomp-toggle-button {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  padding: 1rem;
  border-radius: 1rem;
  background-color: transparent;
  cursor: pointer;
}
.vscomp-value {
  max-width: 100%;
  margin-top: auto;
  margin-bottom: auto;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vscomp-arrow {
  position: absolute;
  display: flex;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.vscomp-arrow::after {
  content: "";
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border: 1px solid transparent;
  border-right-color: var(--text-color);
  border-bottom-color: var(--text-color);
  width: 10px;
  height: 10px;
  margin-top: -6px;
  margin-right: 0.5rem;
}
.vscomp-clear-icon {
  position: relative;
  width: 12px;
  height: 12px;
}
.vscomp-clear-icon::before,
.vscomp-clear-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  width: 2px;
  height: 12px;
  background-color: var(--text-color);
}
.vscomp-clear-icon::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.vscomp-clear-icon::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.vscomp-clear-icon:hover::before,
.vscomp-clear-icon:hover::after {
  background: var(--color);
}
.vscomp-clear-button {
  position: absolute;
  display: none;
  top: 50%;
  right: 30px;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin-top: -12px;
}
.vscomp-clear-button:hover {
  background: var(--color);
}
.vscomp-clear-button:hover .vscomp-clear-icon::before,
.vscomp-clear-button:hover .vscomp-clear-icon::after {
  background-color: var(--color-lighter);
}
.vscomp-dropbox-close-button {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  bottom: -48px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
}
.vscomp-value-tag.more-value-count {
  white-space: nowrap;
}
.vscomp-dropbox-container {
  width: 100%;
  z-index: 2;
  border-radius: 0 0 1rem 1rem;
}
.vscomp-dropbox {
  width: 100%;
  background-color: var(--container-color);
  border-radius: 0 0 1rem 1rem;
}
.vscomp-options-container {
  border-radius: 0 0 1rem 1rem;
  position: relative;
  max-height: 210px;
  overflow: auto;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.vscomp-option {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
  padding: 0 15px;
  height: 40px;
  align-items: center;
  cursor: pointer;
}
.vscomp-option.selected {
  color: var(--text-color);
}
.vscomp-option.focused {
  background-color: var(--color);
  color: #fff;
}
.vscomp-option.disabled {
  opacity: 0.5;
  cursor: default;
}
.vscomp-option.group-title .vscomp-option-text {
  opacity: 0.6;
  cursor: default;
}
.vscomp-option.group-title.selected {
  background-color: transparent;
}
.vscomp-option.group-option {
  padding-left: 30px;
}
.vscomp-new-option-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
}
.vscomp-new-option-icon::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border: 15px solid var(--color);
  border-left-color: transparent;
  border-bottom-color: transparent;
}
.vscomp-new-option-icon::after {
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 1px;
  font-size: 18px;
  color: var(--color);
  width: 15px;
  height: 15px;
}
.vscomp-option-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  user-select: none;
}
.vscomp-option-description {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  line-height: 15px;
  color: var(--color);
  font-size: 13px;
}
.vscomp-search-container {
  display: flex;
  align-items: center;
  position: relative;
  height: 40px;
  padding: 0 5px 0 15px;
  border-bottom: 1px solid var(--color);
}
.vscomp-search-input {
  border: none;
  width: calc(100% - 30px);
  height: 38px;
  padding: 1rem 0;
  font-size: 15px;
  background-color: transparent;
  color: var(--text-color);
}
.vscomp-search-input:focus {
  outline: none;
}
.vscomp-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 25px;
  color: var(--color);
  cursor: pointer;
  user-select: none;
  visibility: hidden;
}
.vscomp-search-clear:hover {
  color: inherit;
}
.vscomp-no-options,
.vscomp-no-search-results {
  color: var(--text-color);
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px 10px;
}
.vscomp-options-loader {
  display: none;
  text-align: center;
  padding: 20px 0;
}
.vscomp-options-loader::before {
  content: "";
  display: inline-block;
  height: 40px;
  width: 40px;
  opacity: 0.7;
  border-radius: 50%;
  background-color: var(--color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  -webkit-animation: vscomp-animation-spin 0.8s infinite linear;
  animation: vscomp-animation-spin 0.8s infinite linear;
}
.vscomp-ele[disabled] {
  cursor: not-allowed;
  user-select: none;
}
.vscomp-ele[disabled] .vscomp-wrapper {
  pointer-events: none;
  opacity: 0.7;
}
.vscomp-wrapper .checkbox-icon {
  display: inline-flex;
  position: relative;
  width: 15px;
  height: 15px;
  margin-right: 10px;
}
.vscomp-wrapper .checkbox-icon::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-lighter);
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
.vscomp-wrapper .checkbox-icon.checked::after {
  width: 50%;
  border-color: var(--color-lighter);
  border-left-color: transparent;
  border-top-color: transparent;
  -webkit-transform: rotate(45deg) translate(1px, -4px);
  transform: rotate(45deg) translate(1px, -4px);
}
.vscomp-wrapper.show-as-popup .vscomp-dropbox-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
.vscomp-wrapper.show-as-popup .vscomp-dropbox {
  position: relative;
  width: 80%;
  max-height: calc(80% - 48px);
  max-width: 500px;
  margin-top: -24px;
}
.vscomp-wrapper.show-as-popup .vscomp-dropbox-close-button {
  display: flex;
}
.vscomp-wrapper.has-select-all .vscomp-toggle-all-button {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.vscomp-wrapper.has-select-all .vscomp-search-input,
.vscomp-wrapper.has-select-all .vscomp-toggle-all-label {
  width: calc(100% - 55px);
}
.vscomp-wrapper.has-select-all .vscomp-toggle-all-label {
  display: none;
}
.vscomp-wrapper:not(.has-search-input) .vscomp-toggle-all-button {
  width: 100%;
}
.vscomp-wrapper:not(.has-search-input) .vscomp-toggle-all-label {
  display: inline-block;
}
.vscomp-wrapper.multiple .vscomp-option .vscomp-option-text {
  width: calc(100% - 25px);
}
.vscomp-wrapper.multiple .vscomp-option .vscomp-option-description {
  padding-left: 25px;
}
.vscomp-wrapper.multiple .vscomp-option.selected .checkbox-icon::after {
  width: 50%;
  border-color: var(--color-lighter);
  border-left-color: transparent;
  border-top-color: transparent;
  -webkit-transform: rotate(45deg) translate(1px, -4px);
  transform: rotate(45deg) translate(1px, -4px);
}

.vscomp-wrapper.closed .vscomp-dropbox-container,
.vscomp-wrapper.closed.vscomp-dropbox-wrapper {
  display: none;
}
.vscomp-wrapper:not(.has-value) .vscomp-value {
  opacity: 0.5;
}
.vscomp-wrapper.has-clear-button.has-value .vscomp-clear-button {
  display: flex;
}
.vscomp-wrapper.has-clear-button .vscomp-toggle-button {
  padding-right: 54px;
}
.vscomp-wrapper.has-no-options .vscomp-options-container,
.vscomp-wrapper.has-no-search-results .vscomp-options-container {
  display: none;
}
.vscomp-wrapper.has-no-options .vscomp-no-options {
  display: flex;
}
.vscomp-wrapper.has-no-search-results .vscomp-no-search-results {
  display: flex;
}
.vscomp-wrapper.has-search-value .vscomp-search-clear {
  visibility: visible;
}
.vscomp-wrapper.has-no-options .vscomp-toggle-all-button {
  opacity: 0.5;
  pointer-events: none;
}
.vscomp-wrapper.keep-always-open .vscomp-toggle-button {
  padding-right: 24px;
}
.vscomp-wrapper.keep-always-open .vscomp-clear-button {
  right: 5px;
}
.vscomp-wrapper.keep-always-open .vscomp-arrow {
  display: none;
}
.vscomp-wrapper.keep-always-open .vscomp-dropbox-container {
  position: relative;
  z-index: 1;
}
.vscomp-wrapper.keep-always-open .vscomp-dropbox {
  -webkit-transition-duration: 0s;
  transition-duration: 0s;
  box-shadow: none;
  border: 1px solid var(--color);
}
.vscomp-wrapper.keep-always-open.focused,
.vscomp-wrapper.keep-always-open:focus,
.vscomp-wrapper.keep-always-open:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.vscomp-wrapper.server-searching .vscomp-options-list {
  display: none;
}
.vscomp-wrapper.server-searching .vscomp-options-loader {
  display: block;
}
.vscomp-wrapper.show-value-as-tags .vscomp-toggle-button {
  padding: 0;
}
.vscomp-wrapper.show-value-as-tags .vscomp-value {
  display: flex;
  flex-wrap: wrap;
  height: auto;
  min-height: 28px;
  overflow: auto;
  white-space: normal;
  text-overflow: unset;
}
.vscomp-wrapper.show-value-as-tags .vscomp-value-tag {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid var(--color);
  margin: 0 4px 4px 0;
  padding: 2px 3px 2px 8px;
  font-size: 12px;
  line-height: 16px;
  border-radius: 20px;
}
.vscomp-wrapper.show-value-as-tags .vscomp-value-tag.more-value-count {
  padding-right: 8px;
}
.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-content {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: calc(100% - 20px);
}
.vscomp-wrapper.show-value-as-tags .vscomp-value-tag-clear-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.vscomp-wrapper.show-value-as-tags
  .vscomp-value-tag-clear-button
  .vscomp-clear-icon {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.vscomp-wrapper.show-value-as-tags .vscomp-arrow {
  height: 34px;
}
.vscomp-wrapper.show-value-as-tags .vscomp-clear-button {
  margin-top: 0;
  top: 5px;
}
.vscomp-wrapper.show-value-as-tags.has-value .vscomp-arrow {
  display: none;
}
.vscomp-wrapper.show-value-as-tags.has-value .vscomp-clear-button {
  right: 2px;
}
.vscomp-wrapper.show-value-as-tags:not(.has-value) .vscomp-toggle-button {
  padding-bottom: 2px;
}
.vscomp-wrapper.show-value-as-tags:not(.has-value) .vscomp-value {
  align-items: center;
  padding-bottom: 3px;
}
.vscomp-wrapper.text-direction-rtl {
  direction: rtl;
}
.vscomp-wrapper.text-direction-rtl .vscomp-toggle-button {
  padding: 7px 10px 7px 30px;
}
.vscomp-wrapper.text-direction-rtl .vscomp-arrow {
  right: auto;
  left: 0;
}
.vscomp-wrapper.text-direction-rtl .vscomp-clear-button {
  right: auto !important;
  left: 30px;
}
.vscomp-wrapper.text-direction-rtl .checkbox-icon {
  margin-right: 0;
  margin-left: 10px;
}
.vscomp-wrapper.text-direction-rtl .checkbox-icon.checked::after {
  -webkit-transform: rotate(45deg) translate(-4px, 1px);
  transform: rotate(45deg) translate(-4px, 1px);
}
.vscomp-wrapper.text-direction-rtl .vscomp-search-container {
  padding: 0 15px 0 5px;
}
.vscomp-wrapper.text-direction-rtl .vscomp-toggle-all-label {
  text-align: right;
}
.vscomp-wrapper.text-direction-rtl .vscomp-option {
  text-align: right;
}
.vscomp-wrapper.text-direction-rtl .vscomp-option.group-option {
  padding-right: 30px;
}
.vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon {
  right: auto;
  left: 0;
}
.vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon::before {
  border-left-color: var(--color);
  border-right-color: transparent;
}
.vscomp-wrapper.text-direction-rtl .vscomp-new-option-icon::after {
  right: auto;
  left: 1px;
}
.vscomp-wrapper.text-direction-rtl.multiple
  .vscomp-option.selected
  .checkbox-icon::after {
  -webkit-transform: rotate(45deg) translate(-4px, 1px);
  transform: rotate(45deg) translate(-4px, 1px);
}
.vscomp-wrapper.text-direction-rtl.has-clear-button .vscomp-toggle-button {
  padding-left: 54px;
}
.vscomp-wrapper.text-direction-rtl.keep-always-open .vscomp-toggle-button {
  padding-left: 24px;
}
.vscomp-wrapper.text-direction-rtl.keep-always-open .vscomp-clear-button {
  left: 5px;
}
.vscomp-wrapper.text-direction-rtl.show-value-as-tags .vscomp-toggle-button {
  padding: 4px 10px 0 22px;
}
.vscomp-wrapper.text-direction-rtl.show-value-as-tags .vscomp-value-tag {
  margin: 0 0 4px 4px;
  padding: 2px 8px 2px 3px;
}
.vscomp-wrapper.text-direction-rtl.show-value-as-tags
  .vscomp-value-tag.more-value-count {
  padding-left: 8px;
}
.vscomp-wrapper.text-direction-rtl.show-value-as-tags.has-value
  .vscomp-clear-button {
  left: 2px;
}

.pop-comp-wrapper {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  color: var(--text-color);
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  border-radius: 0 0 2rem 2rem;
  text-align: left;
  flex-wrap: wrap;
  z-index: 1;
}
.pop-comp-arrow {
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 16px;
  overflow: hidden;
}
.pop-comp-arrow::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.pop-comp-content {
  position: relative;
  z-index: 2;
}
.pop-comp-wrapper.position-bottom .pop-comp-arrow {
  margin-left: -8px;
  left: 0;
  top: -15px;
}
.pop-comp-wrapper.position-bottom .pop-comp-arrow::before {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.pop-comp-wrapper.position-top .pop-comp-arrow {
  margin-left: -8px;
  left: 0;
  bottom: -15px;
}
.pop-comp-wrapper.position-right .pop-comp-arrow {
  margin-top: -8px;
  top: 0;
  left: -15px;
}
.pop-comp-wrapper.position-left .pop-comp-arrow {
  margin-top: -8px;
  top: 0;
  right: -15px;
}
.pop-comp-disable-events {
  pointer-events: none;
}
/*TODO  Notification */
@keyframes awn-fade-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes awn-fade-out {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes awn-slide-right {
  0% {
    left: 100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
@keyframes awn-slide-left {
  0% {
    opacity: 0;
    right: 100%;
  }
  to {
    opacity: 1;
    right: 0;
  }
}
@keyframes awn-bar {
  0% {
    right: 100%;
  }
  to {
    right: 0;
  }
}
.errorlist li {
  margin-bottom: 0.5rem;
}
.awn-popup-loading-dots,
.awn-popup-loading-dots:after,
.awn-popup-loading-dots:before {
  animation-fill-mode: both;
  animation: awn-loading-dots 1s ease-in-out infinite;
  background: #fff;
  border-radius: 50%;
  height: 6px;
  width: 6px;
}
.awn-popup-loading-dots {
  animation-delay: -0.16s;
  color: #fff;
  display: inline-block;
  margin-left: 24px;
  position: relative;
}
.awn-popup-loading-dots:after,
.awn-popup-loading-dots:before {
  content: "";
  position: absolute;
  top: 0;
}
.awn-popup-loading-dots:before {
  animation-delay: -0.32s;
  left: -16px;
}
.awn-popup-loading-dots:after {
  left: 16px;
}
@keyframes awn-loading-dots {
  0%,
  80%,
  to {
    box-shadow: 0 0 0 0;
  }
  40% {
    box-shadow: 0 0 0 2px;
  }
}
#awn-popup-wrapper {
  align-items: center;
  animation-fill-mode: both;
  animation-name: awn-fade-in;
  animation-timing-function: ease-out;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99999;
  backdrop-filter: blur(8px);
}
#awn-popup-wrapper.awn-hiding {
  animation-name: awn-fade-out;
}
#awn-popup-wrapper .awn-popup-body {
  background: var(--color);
  color: #fff;
  border-radius: 0.5rem;
  font-size: 1rem;
  max-width: 500px;
  min-width: 320px;
  padding: 24px;
  position: relative;
  word-break: break-word;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
#awn-popup-wrapper .awn-popup-body.awn-popup-confirm {
  align-items: center;
  display: flex;
  flex-direction: column;
}
#awn-popup-wrapper .awn-popup-body.awn-popup-confirm .fa {
  color: #c26700;
  font-size: 44px;
}
#awn-popup-wrapper .awn-popup-body.awn-popup-async-block {
  background: transparent;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
}
#awn-popup-wrapper .awn-popup-title {
  font-size: 14px;
  font-weight: 700;
  margin-top: 8px;
  text-transform: uppercase;
}
#awn-popup-wrapper .awn-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  width: 100%;
}
#awn-popup-wrapper .awn-buttons .awn-btn {
  border: 0;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 32px;
  transition: background 0.2s linear;
  width: 45%;
}
#awn-popup-wrapper .awn-buttons-1 .awn-btn {
  width: 100%;
}
#awn-popup-wrapper .awn-buttons .awn-btn-success {
  background: #40871d;
}
#awn-popup-wrapper .awn-buttons .awn-btn-success:hover {
  background: #367218;
}
#awn-popup-wrapper .awn-buttons .awn-btn-cancel {
  background: #1c76a6;
}
#awn-popup-wrapper .awn-buttons .awn-btn-cancel:hover {
  background: #186690;
}
#awn-toast-container {
  bottom: 24px;
  box-sizing: border-box;
  position: fixed;
  right: 24px;
  z-index: 99998;
}
#awn-toast-container.awn-top-left,
#awn-toast-container.awn-top-right {
  bottom: auto;
  top: 4rem;
}
#awn-toast-container.awn-top-left .awn-toast:first-child,
#awn-toast-container.awn-top-right .awn-toast:first-child {
  margin-top: 1px;
}
#awn-toast-container.awn-bottom-left,
#awn-toast-container.awn-top-left {
  left: 24px;
  right: auto;
}
#awn-toast-container.awn-bottom-left .awn-toast,
#awn-toast-container.awn-top-left .awn-toast {
  animation-name: awn-slide-left;
  right: 100%;
}
#awn-toast-container.awn-bottom-left .awn-toast.awn-hiding,
#awn-toast-container.awn-top-left .awn-toast.awn-hiding {
  right: 0;
}
#awn-toast-container.awn-bottom-right .awn-toast,
#awn-toast-container.awn-top-right .awn-toast {
  animation-name: awn-slide-right;
  left: 100%;
}
#awn-toast-container.awn-bottom-right .awn-toast.awn-hiding,
#awn-toast-container.awn-top-right .awn-toast.awn-hiding {
  left: 0;
}
.awn-toast {
  animation-fill-mode: both;
  animation-timing-function: linear;
  border-radius: 0.5rem;
  color: var(--color);
  cursor: pointer;
  font-size: var(--font-medium);
  margin-top: 1rem;
  opacity: 0;
  overflow: hidden;
  position: relative;
  width: 320px;
  backdrop-filter: blur(8px);
}
.awn-toast-content {
  word-break: break-word;
}
.awn-toast-label {
  color: #fff;
  display: block;
  font-size: var(--h3-font);
  text-transform: uppercase;
}
.awn-toast-icon {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  right: 16px;
  top: 2px;
  font-size: 42px;
}
.awn-toast-icon .fa {
  color: #fff;
  font-size: 44px;
}
.awn-toast-wrapper {
  border-radius: 0.5rem;
  padding: 10px 75px 10px 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.awn-toast-progress-bar {
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  bottom: 0;
}
.awn-toast-progress-bar:after {
  animation-duration: inherit;
  animation-fill-mode: both;
  animation-name: awn-bar;
  animation-timing-function: linear;
  background: #fff;
  content: " ";
  height: 3px;
  position: absolute;
  right: 100%;
  top: 0;
  width: 100%;
}
.awn-toast.awn-toast-progress-bar-paused .awn-toast-progress-bar:after {
  animation-play-state: paused;
}
.awn-toast.awn-hiding {
  animation-name: awn-fade-out !important;
}
.awn-toast.awn-toast-success {
  background: var(--container-color);
  color: var(--text-color);
}
.awn-toast.awn-toast-success .awn-toast-wrapper {
  border-color: #a7d590;
}
.awn-toast.awn-toast-success .fa,
.awn-toast.awn-toast-success b {
  color: #a2ff73;
}
.awn-toast.awn-toast-success .awn-toast-progress-bar:after {
  background: #a2ff73;
}
.awn-toast.awn-toast-info {
  background: var(--container-color);
  color: var(--text-color);
}
.awn-toast.awn-toast-info .awn-toast-wrapper {
  border-color: #9fd3ef;
}
.awn-toast.awn-toast-info .fa,
.awn-toast.awn-toast-info b {
  color: #307ba3;
}
.awn-toast.awn-toast-info .awn-toast-progress-bar:after {
  background: #307ba3;
}
.awn-toast.awn-toast-alert {
  background: var(--container-color);
  color: var(--text-color);
}
.awn-toast.awn-toast-alert .awn-toast-wrapper {
  border-color: #f0a29d;
}
.awn-toast.awn-toast-alert .fa,
.awn-toast.awn-toast-alert b {
  color: #aa3731;
}
.awn-toast.awn-toast-alert .awn-toast-progress-bar:after {
  background: #aa3731;
}
.awn-toast.awn-toast-warning {
  background: var(--container-color);
  color: var(--text-color);
}
.awn-toast.awn-toast-warning .awn-toast-wrapper {
  border-color: #ffc480;
}
.awn-toast.awn-toast-warning .fa,
.awn-toast.awn-toast-warning b {
  color: #bb7a30;
}
.awn-toast.awn-toast-warning .awn-toast-progress-bar:after {
  background: #bb7a30;
}
[class^="awn-"] {
  box-sizing: border-box;
}
/*TODO  Context Menu */
@-webkit-keyframes cm-spin {
  0% {
    -webkit-transform: translateY(-50%) rotate(0deg);
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-50%) rotate(359deg);
    transform: translateY(-50%) rotate(359deg);
  }
}
@-o-keyframes cm-spin {
  0% {
    -webkit-transform: translateY(-50%) rotate(0deg);
    -o-transform: translateY(-50%) rotate(0deg);
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-50%) rotate(359deg);
    -o-transform: translateY(-50%) rotate(359deg);
    transform: translateY(-50%) rotate(359deg);
  }
}
@keyframes cm-spin {
  0% {
    -webkit-transform: translateY(-50%) rotate(0deg);
    -o-transform: translateY(-50%) rotate(0deg);
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-50%) rotate(359deg);
    -o-transform: translateY(-50%) rotate(359deg);
    transform: translateY(-50%) rotate(359deg);
  }
}

.context-menu-icon::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2em;
  font-size: 1em;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  color: #2980b9;
  text-align: center;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.context-menu-icon.context-menu-hover:before {
  color: #fff;
}

.context-menu-icon.context-menu-disabled::before {
  color: #bbb;
}

.context-menu-icon.context-menu-icon-loading:before {
  -webkit-animation: cm-spin 2s infinite;
  -o-animation: cm-spin 2s infinite;
  animation: cm-spin 2s infinite;
}

.context-menu-icon.context-menu-icon--fa {
  display: list-item;
  font-family: inherit;
  line-height: inherit;
}
.context-menu-icon.context-menu-icon--fa::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2em;
  font-family: FontAwesome;
  font-size: 1em;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  color: #2980b9;
  text-align: center;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.context-menu-icon.context-menu-icon--fa.context-menu-hover:before {
  color: #fff;
}
.context-menu-icon.context-menu-icon--fa.context-menu-disabled::before {
  color: #bbb;
}

.context-menu-icon.context-menu-icon--fa5 {
  display: list-item;
  font-family: inherit;
  line-height: inherit;
}
.context-menu-icon.context-menu-icon--fa5 i,
.context-menu-icon.context-menu-icon--fa5 svg {
  position: absolute;
  top: 0.3em;
  left: 0.5em;
  color: #2980b9;
}
.context-menu-icon.context-menu-icon--fa5.context-menu-hover > i,
.context-menu-icon.context-menu-icon--fa5.context-menu-hover > svg {
  color: #fff;
}
.context-menu-icon.context-menu-icon--fa5.context-menu-disabled i,
.context-menu-icon.context-menu-icon--fa5.context-menu-disabled svg {
  color: #bbb;
}

.context-menu-list {
  position: absolute;
  display: inline-block;
  min-width: 12rem;
  max-width: 24rem;
  padding: 0.5rem 0;
  margin: 0.2rem;
  font-family: inherit;
  font-size: inherit;
  list-style-type: none;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
}

.context-menu-item {
  position: relative;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 0.5rem 1rem;
  color: #2f2f2f;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.context_menu-icon {
  margin-right: 0.25rem;
}

.context-menu-separator {
  padding: 0;
  margin: 0.35em 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.context-menu-item > label > input,
.context-menu-item > label > textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.context-menu-item.context-menu-hover {
  color: #fff;
  cursor: pointer;
  background-color: var(--color);
}

.context-menu-item.context-menu-disabled {
  color: #bbb;
  cursor: default;
  background-color: #fff;
}

.context-menu-input.context-menu-hover {
  color: #2f2f2f;
  cursor: default;
}

.context-menu-submenu:after {
  position: absolute;
  top: 50%;
  right: 0.5em;
  z-index: 1;
  width: 0;
  height: 0;
  content: "";
  border-color: transparent transparent transparent #2f2f2f;
  border-style: solid;
  border-width: 0.25em 0 0.25em 0.25em;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

/**
 * Inputs
 */
.context-menu-item.context-menu-input {
  padding: 0.3em 0.6em;
}

/* vertically align inside labels */
.context-menu-input > label > * {
  vertical-align: top;
}

/* position checkboxes and radios as icons */
.context-menu-input > label > input[type="checkbox"],
.context-menu-input > label > input[type="radio"] {
  position: relative;
  top: 0.12em;
  margin-right: 0.4em;
}

.context-menu-input > label {
  margin: 0;
}

.context-menu-input > label,
.context-menu-input > label > input[type="text"],
.context-menu-input > label > textarea,
.context-menu-input > label > select {
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.context-menu-input > label > textarea {
  height: 7em;
}

.context-menu-item > .context-menu-list {
  top: 0.3em;
  /* re-positioned by js */
  right: -0.3em;
  display: none;
}

.context-menu-item.context-menu-visible > .context-menu-list {
  display: block;
}

.context-menu-accesskey {
  text-decoration: underline;
}

/*TODO: Datatables*/
div.dataTables_wrapper div.dataTables_scrollBody {
  min-height: 350px;
}
table.dataTable tr.dtrg-group td {
  background-color: var(--color-lighter);
  color: var(--color);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  color: var(--color-lighter);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: white !important;
  border: 1px solid var(--color);
  background: var(--color);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--color) !important;
  border: 1px solid var(--color);
  background: transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  outline: none;
  background: transparent;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.02);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-color) !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  background-color: var(--color);
}
table.dataTable.dtr-inline.collapsed
  > tbody
  > tr.parent
  > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed
  > tbody
  > tr.parent
  > th.dtr-control:before {
  background-color: var(--color);
}
.dataTables_wrapper .dataTables_filter input {
  border-radius: 3px;
  padding: 5px;
  background-color: transparent;
  margin-left: 3px;
  color: var(--text-color);
}
.box_model-table-container {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.analytics-table-container {
  width: 100%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.analytics_datatable-container {
  width: 100%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 0rem 0 0.8rem 0 !important;
}
.datatables_box-padding {
  padding: 0 0 0.8rem 0;
}
.dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: transparent;
}
table.dataTable thead .sorting {
  color: #fff;
  background-color: var(--color);
}
.dataTables_wrapper .dataTables_filter {
  float: left;
  text-align: right;
  margin-bottom: 1rem;
}
thead th {
  background-color: var(--container-color);
}
tr.even td {
  background-color: var(--opacity-color-05);
}

tr.odd td {
  background-color: var(--opacity-color-05);
}

tr.selected td {
  background-color: var(--opacity-color-12);
}
table.dataTable tbody tr {
  background-color: var(--container-color);
}
table.dataTable tbody tr.selected {
  background-color: var(--opacity-color-15);
}
table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid var(--color);
}
table.dataTable.row-border tbody th,
table.dataTable.row-border tbody td,
table.dataTable.display tbody th,
table.dataTable.display tbody td {
  border-top: 1px solid var(--text-color-light);
}

table.dataTable.cell-border tbody th,
table.dataTable.cell-border tbody td {
  border-top: 1px solid var(--text-color-light);
  border-right: 1px solid var(--text-color-light);
}
table.dataTable.cell-border tbody tr th:first-child,
table.dataTable.cell-border tbody tr td:first-child {
  border-left: 1px solid var(--text-color-light);
}

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
  background-color: var(--opacity-color-05);
}
table.dataTable.stripe tbody tr.odd.selected,
table.dataTable.display tbody tr.odd.selected {
  background-color: var(--opacity-color-20);
}
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
  background-color: var(--opacity-color-20);
}
table.dataTable.hover tbody tr:hover.selected,
table.dataTable.display tbody tr:hover.selected {
  background-color: var(--opacity-color-25);
}
table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3,
table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3 {
  background-color: var(--opacity-color-05);
}
table.dataTable.order-column tbody tr.selected > .sorting_1,
table.dataTable.order-column tbody tr.selected > .sorting_2,
table.dataTable.order-column tbody tr.selected > .sorting_3,
table.dataTable.display tbody tr.selected > .sorting_1,
table.dataTable.display tbody tr.selected > .sorting_2,
table.dataTable.display tbody tr.selected > .sorting_3 {
  background-color: var(--opacity-color-10);
}
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
  background-color: var(--opacity-color-05);
}
table.dataTable.display tbody tr.odd > .sorting_2,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
  background-color: var(--opacity-color-08);
}
table.dataTable.display tbody tr.odd > .sorting_3,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
  background-color: var(--opacity-color-08);
}
table.dataTable.display tbody tr.odd.selected > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
  background-color: var(--opacity-color-15);
}
table.dataTable.display tbody tr.odd.selected > .sorting_2,
table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
  background-color: var(--opacity-color-15);
}
table.dataTable.display tbody tr.odd.selected > .sorting_3,
table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
  background-color: var(--opacity-color-20);
}
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
  background-color: var(--opacity-color-05);
}
table.dataTable.display tbody tr.even > .sorting_2,
table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
  background-color: var(--opacity-color-08);
}
table.dataTable.display tbody tr.even > .sorting_3,
table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
  background-color: var(--opacity-color-08);
}
table.dataTable.display tbody tr.even.selected > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
  background-color: var(--opacity-color-12);
}
table.dataTable.display tbody tr.even.selected > .sorting_2,
table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
  background-color: var(--opacity-color-10);
}
table.dataTable.display tbody tr.even.selected > .sorting_3,
table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
  background-color: var(--opacity-color-15);
}
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
  background-color: var(--opacity-color-08);
}
table.dataTable.display tbody tr:hover > .sorting_2,
table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
  background-color: var(--opacity-color-08);
}
table.dataTable.display tbody tr:hover > .sorting_3,
table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
  background-color: var(--opacity-color-05);
}
table.dataTable.display tbody tr:hover.selected > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
  background-color: var(--opacity-color-20);
}
table.dataTable.display tbody tr:hover.selected > .sorting_2,
table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
  background-color: var(--opacity-color-25);
}
table.dataTable.display tbody tr:hover.selected > .sorting_3,
table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
  background-color: var(--opacity-color-25);
}
table.dataTable.no-footer {
  border-bottom: 1px solid var(--text-color);
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: var(--text-color);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.dataTables_wrapper .dataTables_length {
  float: right;
}
table.dataTable tbody th.focus,
table.dataTable tbody td.focus {
  box-shadow: inset 0 0 1px 2px var(--color);
}
table.dataTable td.dt-control:before {
  background-color: var(--color);
}
table.dataTable tr.dt-hasChild td.dt-control:before {
  background-color: var(--color);
}
div.DTCR_pointer {
  background-color: var(--color);
}
table.dataTable tbody th.focus,
table.dataTable tbody td.focus {
  box-shadow: inset 0 0 1px 2px var(--color);
}

/*TODO Responsive*/

@media screen and (max-width: 410px) {
  .container {
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }
  .nav_menu-mobile {
    padding: 2rem 0.25rem 4rem;
  }
  .nav_list-mobile {
    column-gap: 0;
  }

  .list_title {
    font-size: var(--normal-font);
  }

  .box_container,
  .analytics_box_container,
  .popup_box {
    justify-content: center;
    gap: 0.5rem;
  }

  .box_model {
    padding: 0 0.5rem;
  }
  .lbox_img {
    width: 220px;
  }
  .leaflet-control-layers-toggle {
    width: 15px;
    height: 15px;
    background-size: 10px 10px;
  }
}
@media screen and (max-width: 460px) {
  .chosen-value {
    padding: 1rem;
    font-size: var(--h1-font);
    font-weight: var(--font-semi-bold);
    color: var(--color);
  }
  .device_display {
    opacity: 0;
  }
}
@media screen and (max-width: 599px) {
  .flex_column-slider {
    flex-direction: column;
  }
  .slider-ui {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    width: 95%;
  }
  .leaflet-touch .leaflet-control-layers-toggle {
    width: 18px;
    height: 18px;
    background-size: 13px 13px;
  }
}

@media screen and (min-width: 600px) {
  .swipe_content,
  .lbox_container {
    border-radius: 1rem;
    grid-template-columns: 1fr;
    backdrop-filter: blur(15px);
  }
  .box_container,
  .analytics_box_container {
    gap: 1rem;
  }
}

@media screen and (min-width: 768px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }
  body {
    margin: 0;
  }
  .section {
    padding: 1.5% 0 1.5%;
  }
  .section_title {
    display: block;
    text-align: left;
    margin-top: 1rem;
    margin-left: 2rem;
  }
  .header {
    top: 0;
    bottom: initial;
  }
  .header,
  .main {
    padding: 0 1rem;
  }
  .nav-mobile {
    display: none;
  }
  .sidebar {
    left: 0;
    padding: 1.2rem 1.5rem 0;
    width: 68px;
  }
  .sidebar_items {
    row-gap: 1.7rem;
  }
  .sidebar_icon {
    font-size: 1.3rem;
  }
  .sidebar_logo-name {
    text-align: center;
    margin-left: auto;
    margin-right: 2.5rem;
  }

  /* Element opacity */
  .sidebar_logo-name,
  .sidebar_name,
  .sidebar_subtitle,
  .sidebar_dropdown-icon {
    opacity: 0;
    transition: 0.3s;
  }

  /* Navbar expanded */
  .sidebar:hover {
    width: 14rem;
  }

  /* Visible elements */
  .sidebar:hover .sidebar_logo-name {
    opacity: 1;
  }
  .sidebar:hover .sidebar_subtitle {
    opacity: 1;
  }
  .sidebar:hover .sidebar_name {
    opacity: 1;
  }
  .sidebar:hover .sidebar_dropdown-icon {
    opacity: 1;
  }
  .content {
    margin-left: 4rem;
    transition: 0.4s;
  }
  .content-gap {
    margin-left: 14rem;
    transition: 0.4s;
  }
  .change-theme {
    margin: 0;
  }
  .analytics_box_container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    justify-content: left;
    grid-template-areas:
      "analytics-box1 analytics-box2"
      "analytics-box3 analytics-box4"
      "analytics-box5 analytics-box5"
      "analytics-box6 analytics-box6"
      "analytics-box7 analytics-box7"
      "analytics-box8 analytics-box8"
      "analytics-box9 analytics-box9";
  }
  .profile_box_container {
    grid-template-columns: 1fr 1fr 1.5fr;
    grid-template-rows: 10fr 1fr;
    justify-content: left;
    grid-template-areas:
      " subscribers-box1 subscribers-box1 subscribers-box2"
      " subscribers-box3 subscribers-box4 subscribers-box2";
  }
  .login_box_container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-content: center;
    grid-template-areas: "login-box";
  }
  .cctv_box_container {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .box_container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 2fr;
    justify-content: left;
    grid-template-areas:
      "box1 box2"
      "box3 box4"
      "box5 box5";
  }

  #box1 {
    grid-area: box1;
  }
  #box2 {
    grid-area: box2;
  }
  #box3 {
    grid-area: box3;
  }
  #box4 {
    grid-area: box4;
  }
  #box5 {
    grid-area: box5;
  }
  #box6 {
    grid-area: box6;
  }
  #analytics-box1 {
    grid-area: analytics-box1;
  }
  #analytics-box2 {
    grid-area: analytics-box2;
  }
  #analytics-box3 {
    grid-area: analytics-box3;
  }
  #analytics-box4 {
    grid-area: analytics-box4;
  }
  #analytics-box5 {
    grid-area: analytics-box5;
  }
  #analytics-box6 {
    grid-area: analytics-box6;
  }
  #analytics-box7 {
    grid-area: analytics-box7;
  }
  #analytics-box8 {
    grid-area: analytics-box8;
  }
  #analytics-box9 {
    grid-area: analytics-box9;
  }
  #subscribers-box1 {
    grid-area: subscribers-box1;
  }
  #subscribers-box2 {
    grid-area: subscribers-box2;
  }
  #subscribers-box3 {
    grid-area: subscribers-box3;
  }
  #subscribers-box4 {
    grid-area: subscribers-box4;
  }
  #login-box {
    grid-area: login-box;
  }
  #device-selection-box1 {
    grid-area: device-selection-box1;
  }
  #device-selection-box2 {
    grid-area: device-selection-box2;
  }

  .box_icon {
    font-size: 2rem;
  }
  .box_content {
    padding: 1rem;
  }
  .map_content,
  .select_content {
    padding: 0;
  }
  .swipe_img {
    width: 320px;
  }
  .swipe_content {
    align-items: center;
  }
  .lbox {
    text-align: initial;
  }
  .lbox_container {
    border-radius: 1rem;
    grid-template-columns: 1fr;
    backdrop-filter: blur(15px);
    height: 86vh;
  }
  .bg_lbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-2);
    z-index: -1;
    opacity: 0.9;
    border-radius: 1rem;
  }
  .popup {
    margin-left: 2rem;
  }
  .popup-gap {
    margin-left: 12rem;
    transition: all 0.4s ease-out;
  }
  .popup_box {
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
  .edit_profile .popup_box .popup_box-content,
  .add_device .popup_box .popup_box-content,
  .remove_device .popup_box .popup_box-content {
    width: 70% !important;
  }
  .preferences .popup_box {
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: 1fr 1fr;
    justify-content: left;
    grid-template-areas:
      "pop_c1 pop_c2"
      "pop_c3 pop_c4";
  }
  .tweaks .popup_box {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    justify-content: left;
    grid-template-areas:
      "pop_c5 pop_c5"
      "pop_c5 pop_c5"
      "pop_c6 pop_c9"
      "pop_c7 pop_c8"
      "pop_c10 pop_c11";
  }
  .edit_profile .popup_box {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    justify-content: left;
    grid-template-areas: "edit-subscribers-box1 edit-subscribers-box1";
  }
  .add_device .popup_box {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    justify-content: left;
    grid-template-areas: "add-device-box1 add-device-box1";
  }
  .remove_device .popup_box {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    justify-content: left;
    grid-template-areas: "remove-device-box1 remove-device-box1";
  }
  .devices .popup_box {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    justify-content: left;
    grid-template-areas:
      "device-selection-box1 device-selection-box1"
      "device-selection-box2 device-selection-box2";
  }
  .timerange .popup_box {
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr;
    justify-content: left;
    grid-template-areas: "none pop_timerange";
  }
  .timerange .popup_box .popup_box-content {
    padding-bottom: 5rem;
  }
  #pop_c1 {
    grid-area: pop_c1;
  }
  #pop_c2 {
    grid-area: pop_c2;
  }
  #pop_c3 {
    grid-area: pop_c3;
  }
  #pop_c4 {
    grid-area: pop_c4;
  }
  #pop_c5 {
    grid-area: pop_c5;
  }
  #pop_c6 {
    grid-area: pop_c6;
  }
  #pop_c7 {
    grid-area: pop_c7;
  }
  #pop_c8 {
    grid-area: pop_c8;
  }
  #pop_c9 {
    grid-area: pop_c9;
  }
  #pop_c10 {
    grid-area: pop_c10;
  }
  #pop_c11 {
    grid-area: pop_c11;
  }
  #pop_timerange {
    grid-area: pop_timerange;
  }
  #edit-subscribers-box1 {
    grid-area: edit-subscribers-box1;
  }
  #add-device-box1 {
    grid-area: add-device-box1;
  }
  #remove-device-box1 {
    grid-area: remove-device-box1;
  }
  .leaflet-control-layers-toggle {
    width: 36px;
    height: 36px;
    background-size: 24px 24px;
  }
  .leaflet-container .leaflet-control-attribution,
  .leaflet-container .leaflet-control-scale {
    font-size: 10px;
  }
}

@media screen and (min-width: 1024px) and (max-height: 1280px) {
  .header,
  .main {
    padding: 0;
  }
  .box_container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1.2fr 2fr;
    justify-content: left;
    grid-template-areas:
      "box1 box2"
      "box3 box4"
      "box5 box5";
  }
  .swipe_content {
    column-gap: 5rem;
  }
  .swiper-portfolio-icon {
    font-size: 3.5rem;
  }
  .swiper-button-prev {
    left: -3.5rem;
  }
  .swiper-button-next {
    right: -3.5rem;
  }
  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: -4.5rem;
  }
  .model_caption {
    font-size: 1.25rem;
    bottom: 1%;
    left: 50%;
    transform: translate(-50%, -1%);
  }
  .slider-ui {
    margin-left: 4rem;
  }
}
@media screen and (min-width: 1024px) and (min-height: 1280px) {
  .header,
  .main {
    padding: 0;
  }
  .box_container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1.5fr 2.5fr;
    justify-content: left;
    grid-template-areas:
      "box1 box2"
      "box3 box4"
      "box5 box5";
  }
  .slider-ui {
    margin-left: 4rem;
  }
}
@media screen and (min-width: 1280px) {
  .box_container {
    grid-template-columns: 1fr 0.7fr 1fr 0.5fr;
    grid-template-rows: 1fr 1.45fr;
    justify-content: left;
    grid-template-areas:
      "box1 box2 box4 box4 "
      "box3 box5 box5 box5 ";
  }
}
/*TODO: Responsive for 2K and 4K*/
@media screen and (min-width: 1960px) {
  .box_container {
    grid-template-columns: 1.5fr 1.2fr 1.5fr 1fr;
    grid-template-rows: 3fr 5fr;
    justify-content: left;
    grid-template-areas:
      "box1 box2 box4 box4 "
      "box3 box5 box5 box5 ";
  }
}
@media screen and (min-width: 2880px) {
  .box_container {
    grid-template-columns: 1fr 0.7fr 1fr 0.5fr;
    grid-template-rows: 1fr 1.45fr;
    justify-content: left;
    grid-template-areas:
      "box1 box2 box4 box4 "
      "box3 box5 box5 box5 ";
  }
}
@media screen and (min-width: 3840px) {
  .box_container {
    grid-template-columns: 1fr 0.7fr 1fr 0.5fr;
    grid-template-rows: 1fr 1.45fr;
    justify-content: left;
    grid-template-areas:
      "box1 box2 box4 box4 "
      "box3 box5 box5 box5 ";
  }
}

canvas {
  display: block;
}
#particles-js {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
  background-color: var(--body-color);
  background-image: url("");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  filter: blur(4px);
}
