/**
Basis
 */
/*-------------------------*\
    colors vars
\*-------------------------*/
:root {
  --urbic-color-red: #bf111b;
  --urbic-color-grey: #4b4b4d;
  --urbic-color-yellow: #faba00;
  --urbic-color-green: #4b9b3e;
  --urbic-color-white: #fff;
  --urbic-color-success: #3A7930;
  --urbic-color-secondary-light: #efefef;
  --urbic-color-secondary-dark: #b3b3b3;
  /**/
  --primary-color: #707070;
  --secondary-color: var(--urbic-color-secondary-dark);
  --sub-color: var(--urbic-color-secondary-light);
  --primary-text: var(--urbic-color-grey);
  --secondary-text: var(--urbic-color-secondary-dark);
  --information-text-danger: var(--urbic-color-red);
  --information-text-attention: var(--urbic-color-yellow);
  --information-text-success: var(--urbic-color-success);
  --information-text-inform: var(--urbic-color-grey);
  --information-color-danger: var(--urbic-color-red);
  --information-color-attention: var(--urbic-color-yellow);
  --information-color-success: var(--urbic-color-success);
  --information-color-inform: var(--urbic-color-grey);
  --highlight-color: var(--urbic-color-yellow);
  /* normally based on 16px */
  --spacing: 0.5rem;
  --spacing-s: calc(var(--spacing) + var(--spacing) / 2);
  --spacing-m: calc(var(--spacing) * 2);
  --spacing-l: calc(var(--spacing) * 3);
  --spacing-xl: calc(var(--spacing) * 4);
  --space: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --urbic-color-red: #bf111b;
    --urbic-color-grey: #c7c0c0;
    --urbic-color-yellow: #faba00;
    --urbic-color-green: #4b9b3e;
    --urbic-color-white: #fff;
    --urbic-color-secondary-light: #efefef;
    --urbic-color-secondary-dark: #b3b3b3;
  }
}
/* reset */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

/* colors */
.urbic-secondary-light {
  color: var(--urbic-color-secondary-light);
}

.urbic-secondary-dark {
  color: var(--urbic-color-secondary-dark);
}

/*-------------------------*\
    Base Helpers
\*-------------------------*/
.is-slidable {
  display: none;
  /* pure css hack, has problems with dynamic heights
  height: 0;
  overflow: hidden;
  -webkit-transition: height 1s ease-in-out;
  -moz-transition: height 1s ease-in-out;
  -ms-transition: height 1s ease-in-out;
  -o-transition: height 1s ease-in-out;
  transition: height 1s ease-in-out;
  */
}

.is-hidden {
  display: none;
}

.has-outline {
  outline: var(--urbic-color-secondary-light) solid 1px;
}

.urbic-text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.urbic-action-link {
  cursor: pointer;
}

.urbic-line {
  border-bottom: 1px dot-dot-dash;
}

.urbic-display-none {
  display: none;
}

/*-------------------------*\
    container
\*-------------------------*/
.urbic-container {
  /**/
  margin: 0;
  display: inline;
  position: relative;
}

/* effects */
/*-------------------------*\
   effects
\*-------------------------*/
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ----------------------------------------------
  Generated by AnimatiSS
  Licensed under FreeBSD License
  URL: https://xsgames.co/animatiss
  Twitter: @xsgames_
---------------------------------------------- */
.blur-in {
  animation: blur-in 0.4s linear both;
}

@keyframes blur-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
.shadow-drop-left {
  animation: shadow-drop-left 0.4s linear both;
}

@keyframes shadow-drop-left {
  0% {
    box-shadow: 0 0 0 0 transparent;
  }
  100% {
    box-shadow: -12px 0 20px -12px rgba(255, 255, 255, 0.55);
  }
}
.slide-left {
  animation: slide-left 0.4s linear both;
}

@keyframes slide-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-300px);
  }
}
/* ----------------------------------------------
Generated by AnimatiSS
Licensed under FreeBSD License
URL: https://xsgames.co/animatiss
Twitter: @xsgames_
---------------------------------------------- */
.shadow-pop-top-right {
  animation: shadow-pop-top-right 0.4s linear both;
}

@keyframes shadow-pop-top-right {
  0% {
    box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    transform: translateX(0) translateY(0);
  }
  100% {
    box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e, 8px -8px #3e3e3e;
    transform: translateX(-8px) translateY(8px);
  }
}
.blur-out-expand {
  animation: blur-out-expand 0.4s linear both;
}

@keyframes blur-out-expand {
  0% {
    transform: scale(1);
    filter: blur(0.01px);
  }
  100% {
    transform: scale(2);
    filter: blur(12px);
    opacity: 0;
  }
}
.slide-right {
  animation: slide-right 0.4s linear both;
}

@keyframes slide-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(1px);
  }
}
/* effects */
/*-------------------------*\
   dimensions
   basic dimension
\*-------------------------*/
.dim-s {
  height: 8px;
  width: 8px;
}

.dim-m {
  height: 16px;
  width: 16px;
}

.dim-l {
  height: 24px;
  width: 24px;
}

.dim-xl {
  height: 32px;
  width: 32px;
}

/**
components
 */
/*------------------------*\
    autocomplete
\*-------------------------*/
.urbic-autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}

.urbic-autocomplete-items {
  position: absolute;
  border: 1px solid var(--urbic-color-secondary-light);
  z-index: 1;
  /*position the autocomplete items to be the same width as the container:
  top: 35px;
  left: 0;
  right: 0;*/
  text-align: left;
  min-height: 35px;
  max-height: 350px;
  overflow: auto;
  background-color: white;
}
.urbic-autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px dashed var(--urbic-color-secondary-light);
}
.urbic-autocomplete-items div:last-child {
  border-bottom: none;
}
.urbic-autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: var(--urbic-color-secondary-light);
}

.urbic-autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: var(--urbic-color-yellow) !important;
  color: #ffffff;
}

/*-------------------------*\
    urbic-basic-badges
\*-------------------------*/
.urbic-badge-container {
  display: inline-table;
  vertical-align: middle;
  font-family: Arial;
  font-size: 1em;
}
.urbic-badge-container div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border-radius: 50%;
  font-weight: 500;
}

.urbic-badge-s {
    width: calc(var(--space) * 4);
    height: calc(var(--space) * 4);
  font-size: 1.1em;
}

.urbic-badge-xs {
    width: calc(var(--space) * 6);
    height: calc(var(--space) * 6);
    font-size: calc(var(--space) * 1.5);
}

.urbic-badge-m {
    width: calc(var(--space) * 8);
    height: calc(var(--space) * 8);
    font-size: calc(var(--space) * 2);
}

.urbic-badge-l {
    width: calc(var(--space) * 10);
    height: calc(var(--space) * 10);
    font-size: calc(var(--space) * 3);
}

.urbic-badge-xl {
    width: calc(var(--space) * 12);
    height: calc(var(--space) * 12);
    font-size: calc(var(--space) * 3.5);
}

/*------------------------*\
    urbic-button
\*-------------------------*/
.urbic-button {
  background-color: var(--urbic-color-secondary-light);
  color: var(--urbic-color-grey);
  /*background-color: transparent;
  border: 1px solid var(--urbic-color-secondary-dark);*/
  margin: 4px;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  font-size: inherit;
  font-family: inherit;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  opacity: 1;
  box-shadow: 0 1px 4px 0.5px var(--urbic-color-secondary-dark);
  transition: all 0.2s ease-in-out;
  /* notifications */
  /* notification  types */
  /* notification dimensions */
}
.urbic-button:not([disabled]):hover, .urbic-button:not([disabled]):focus-visible {
  background-color: var(--urbic-color-secondary-dark);
  color: white;
  outline: 1px solid var(--primary-color);
  outline-offset: 2px;
}
.urbic-button:active {
  opacity: 0.5;
}
.urbic-button.urbic-button-notify {
  margin-right: 16px;
}
.urbic-button.urbic-button-notify::after {
  content: attr(data-notification);
  background-color: var(--urbic-color-grey);
  width: 32px;
  height: 32px;
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  margin-top: -25px;
  margin-left: 8px;
  color: white;
  padding: 4px;
}
.urbic-button.urbic-button-notify-error::after {
  background-color: var(--urbic-color-red);
}
.urbic-button.urbic-button-notify-success::after {
  background-color: var(--urbic-color-green);
}
.urbic-button.urbic-button-notify-warning::after {
  background-color: var(--urbic-color-yellow);
}
.urbic-button.urbic-button-notify-s::after {
  width: 24px;
  height: 24px;
  font-size: 12px;
}
.urbic-button.urbic-button-notify-m::after {
  width: 32px;
  height: 32px;
  font-size: 16px;
  margin-top: -30px;
  margin-left: 0px;
}
.urbic-button.urbic-button-notify-l:after {
  width: 40px;
  height: 40px;
  font-size: 24px;
  margin-top: -32px;
  margin-left: -5px;
}
.urbic-button.urbic-button-notify-xl:after {
  width: 48px;
  height: 48px;
  font-size: 32px;
  margin-top: -40px;
  margin-left: -8px;
}
.urbic-button.urbic-button-primary {
  background-color: var(--primary-color);
  color: var(--urbic-color-white);
  border-color: var(--urbic-color-grey);
}
.urbic-button.urbic-button-primary:not([disabled]):hover {
  background-color: darkgrey;
  border-color: var(--highlight-color);
  outline-color: black;
}
.urbic-button.urbic-button-primary[disabled=disabled] {
  background-color: var(--primary-color);
}
.urbic-button.urbic-button-success {
  background-color: var(--urbic-color-success);
  color: var(--urbic-color-white);
  border-color: var(--urbic-color-green);
}
.urbic-button.urbic-button-success:not([disabled]):hover, .urbic-button.urbic-button-success:not([disabled]):focus-visible {
  background-color: darkgreen;
  outline-color: darkgreen;
}
.urbic-button.urbic-button-secondary {
  background-color: var(--urbic-color-yellow);
  color: var(--urbic-color-grey);
}
.urbic-button.urbic-button-danger, .urbic-button.urbic-button-error {
  background-color: #A92622;
  border-color: var(--urbic-color-red);
  color: var(--urbic-color-white);
}
.urbic-button.urbic-button-danger:not([disabled]):hover, .urbic-button.urbic-button-danger:not([disabled]):focus-visible, .urbic-button.urbic-button-error:not([disabled]):hover, .urbic-button.urbic-button-error:not([disabled]):focus-visible {
  background-color: darkred;
  outline-color: darkred;
}
.urbic-button.urbic-button[disabled=disabled] {
  opacity: 0.3;
  box-shadow: none;
  cursor: not-allowed;
}
.urbic-button.urbic-button[disabled=disabled]:hover, .urbic-button.urbic-button[disabled=disabled]:focus-visible {
  border-color: var(--urbic-color-secondary-dark);
  outline: none;
}
.urbic-button.urbic-button-pressed {
  box-shadow: none;
  transform: none;
  background-color: var(--primary-color);
  color: var(--urbic-color-white);
  border: 1px solid var(--urbic-color-grey);
}
.urbic-button.urbic-button-s {
  font-size: 0.9rem;
}
.urbic-button.urbic-button-l {
  font-size: 1.25rem;
}
.urbic-button.urbic-button-xl {
  font-size: 1.5rem;
}
.urbic-button.urbic-button-xxl {
  font-size: 2rem;
}

.urbic-button-large, .urbic-large {
  width: 100%;
}

/*================================*/
/*    button-set                  */
/*================================*/
.urbic-button-set {
  display: flex;
  flex-direction: row;
  /* flex-wrap: nowrap; */
  /* align-content: flex-start; */
  align-items: center;
  justify-content: flex-start;
  background-color: white;
  line-height: 1.5;
}
.urbic-button-set input[type=checkbox], .urbic-button-set input[type=radio] {
  height: 2px;
  width: 2px;
  position: absolute;
}
.urbic-button-set input[type=checkbox]:focus + label, .urbic-button-set input[type=radio]:focus + label {
  border: 1px solid var(--urbic-color-yellow);
}
.urbic-button-set input + label {
  z-index: 1;
  /* make the label not selectable from user */
  user-select: none;
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--urbic-color-secondary-light);
  margin: 0;
  color: var(--urbic-color-grey);
  font-size: inherit;
  box-shadow: 0 1px 4px 0.5px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  border: 1px solid var(--urbic-color-secondary-dark);
}
.urbic-button-set input + label:hover {
  border: 1px solid var(--urbic-color-yellow);
  /*
  box-shadow:  0 2px 5px 0.5px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);*/
}
.urbic-button-set input:checked + label {
  background-color: var(--primary-color);
  color: var(--urbic-color-white);
}

.urbic-button-set input:first-child + label {
  border-radius: 0.5rem 0 0 0.5rem;
}

.urbic-button-set label:last-child {
  border-radius: 0 0.5rem 0.5rem 0;
  border: 1px solid var(--urbic-color-secondary-dark);
}

/*------------------------*\
    urbic-collapsible-list
\*-------------------------*/
.collapsible-header-container {
  display: flex;
  cursor: auto;
  align-items: center;
}
.collapsible-header-container .collapse-header {
  flex-grow: 1;
  justify-self: stretch;
  align-self: center;
  margin-left: var(--spacing);
}
.collapsible-header-container .collapse-control {
  padding: 8px 16px;
}
.collapsible-header-container .collapse-symbolize {
  border: none;
  font-size: 1.4em;
  font-weight: bold;
  justify-self: end;
  align-self: center;
  /*transform: rotate(0deg);*/
  transition: transform 0.8s ease-in-out;
  padding: 8px 16px;
}

.collapse-content {
  background-color: white;
  opacity: 0.1;
  height: 0;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  margin-top: 0;
}

.collapsible-control-open {
  transform: rotate(-90deg);
  color: var(--urbic-color-yellow);
}

.collapsible-content-open {
  opacity: 1;
  height: max-content;
}

/*-------------------------*\
    container
\*-------------------------*/
.urbic-container {
  /**/
  margin: 0;
  display: inline;
  position: relative;
}

/*------------------------*\
    dropdown
\*-------------------------*/
.urbic-dropdown {
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.urbic-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: var(--urbic-color-white);
  min-width: 200px;
  border-radius: 8px;
  border: 1px solid var(--urbic-color-grey);
  z-index: 100000;
  text-align: left;
  margin-right: 1em;
}
.urbic-dropdown-content div.dropdown-header {
  color: var(--urbic-color-white);
  background-color: var(--urbic-color-green);
  border-radius: 5px 5px 0 0;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}
.urbic-dropdown-content a, .urbic-dropdown-content div {
  color: var(--urbic-color-grey);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.urbic-dropdown-content ul li:first-child {
  border-radius: 8px 8px 0 0;
}
.urbic-dropdown-content ul li:last-child {
  border-radius: 0 0 8px 8px;
}
.urbic-dropdown-content ul li:hover {
  background-color: var(--urbic-color-yellow);
}

.urbic-dropdown-btn {
  display: flex;
  justify-content: center;
  align-content: center;
  border-radius: 50%;
  border: 2px solid var(--urbic-color-yellow);
  padding: 0.5em;
  font-size: 1.1em;
  font-family: "NettoWeb-Bold", serif;
}

.urbic-dropdown:hover .urbic-dropdown-content {
  display: block;
}

.urbic-dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

/*-------------------------*\
    input field for date
\*-------------------------*/
.urbic-date input {
  width: 140px;
  text-indent: 7px;
}

.urbic-date input[data-type=time] {
  width: 80px;
  text-indent: 1px;
}

/* ============================= */
/* COMPONENT DIALOG */
/* ============================= */
.dialog {
  /* ============================= */
  /* GLOBAL LAYOUT */
  /* ============================= */
  --border-radius: 7px;
  /* ============================= */
  /* CONTENT LAYOUT */
  /* ============================= */
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  overflow: auto;
  backdrop-filter: blur(2px);
  background: rgba(175, 175, 175, 0.6);
  grid-template-columns: auto 500px auto;
  justify-items: center;
}
.dialog .container {
  grid-column-start: 2;
  margin: auto;
  background-color: var(--urbic-color-white);
  border-radius: var(--border-radius);
}
.dialog .container .header {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  border: 1px solid var(--urbic-color-grey);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--urbic-color-grey);
  color: var(--urbic-color-white);
  padding: var(--spacing-m);
}
.dialog .container .header .btn-close {
  cursor: pointer;
}
.dialog .container .header .title {
  margin-right: 1em;
}
.dialog .container .header-danger {
  background-color: var(--urbic-color-red);
  border-color: var(--urbic-color-red);
}
.dialog .container .header-success {
  background-color: var(--urbic-color-green);
  border-color: var(--urbic-color-green);
}
.dialog .container .header-warning {
  background-color: var(--urbic-color-yellow);
  border-color: var(--urbic-color-yellow);
}
.dialog .container .message {
  padding: var(--spacing-m);
  border-width: 0px 1px 0 1px;
  border-color: var(--urbic-color-grey);
  border-style: solid;
}
.dialog .container .footer {
  padding: var(--spacing-m);
  display: flex;
  justify-content: space-around;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  border-width: 0px 1px 1px 1px;
  border-color: var(--urbic-color-grey);
  border-style: solid;
}
.dialog .container .footer .urbic-button {
  margin: 5px;
}
.dialog .dialog-animate {
  position: relative;
  animation: animatedialog 0.4s;
}
@keyframes animatedialog {
  from {
    top: -500px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

.dialog-is-visible {
  display: grid;
}

@media screen and (max-width: 600px) {
  .dialog {
    grid-template-columns: auto auto auto;
  }

  .dialog .container .footer {
    display: block;
  }
}
/* ============================= */
/* COMPONENT HTML DIALOG */
/* ============================= */
dialog {
  border: 1px solid var(--urbic-color-grey);
  border-radius: 8px;
  padding: 0;
  /* animations
  animation: fade-out 0.7s ease-out;
  &[open]{
    animation: fade-in 0.7s ease-out;
    &::backdrop{
      transition: all 0.7s allow-discrete;
      //animation: backdrop-fade-in 0.7s ease-out forwards;
    }
  }*/
}
dialog .header {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--urbic-color-grey);
  color: var(--urbic-color-white);
  padding: var(--spacing-m);
}
dialog .header .btn-close {
  cursor: pointer;
}
dialog .header .title {
  margin-right: 1em;
}
dialog .header-danger {
  background-color: var(--urbic-color-red);
}
dialog .header-success {
  background-color: var(--urbic-color-green);
}
dialog .header-warning {
  background-color: var(--urbic-color-yellow);
}
dialog .message {
  padding: var(--spacing-m);
  border-width: 0px 1px 0 1px;
  border-color: var(--urbic-color-grey);
  border-style: solid;
}
dialog .footer {
  padding: var(--spacing-m);
  display: flex;
  justify-content: space-around;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  border-width: 0px 1px 1px 1px;
  border-color: var(--urbic-color-grey);
  border-style: solid;
}
dialog .footer .urbic-button {
  margin: 5px;
}
dialog .footer-right-align {
  justify-content: flex-end;
}

/*-------------------------*\
    urbic-input icon
\*-------------------------*/
.urbic-input-icon i.fa {
  position: relative;
  left: -15px;
  top: 1px;
    margin-left: -15px;
    /* no space */
}

/*-------------------------*\
    urbic-count-icon
\*-------------------------*/
.urbic-count-icon span {
  position: relative;
  left: -22px;
  top: -6px;
  font-size: 11px;
  font-weight: bold;
}

/*-------------------------*\
    label with icon and
\*-------------------------*/
.urbic-labeled-input {
  background-color: var(--urbic-color-secondary-dark);
  border-radius: 5px;
}
.urbic-labeled-input label {
  padding-left: 12px;
  padding-right: 8px;
  text-align: center;
  min-width: 25px;
  color: var(--urbic-color-white);
}
.urbic-labeled-input label i {
  color: var(--urbic-color-white);
}

/*------------------------*\
    input elements
\*-------------------------*/
input:not([type=range]), textarea, select {
  padding: 0.4em 0.6em;
  line-height: 1.25;
  color: #4b4b4d;
  background-image: none;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.2s;
}
input:not([type=range]):not([disabled]):hover, textarea:not([disabled]):hover, select:not([disabled]):hover {
  border-color: var(--urbic-color-yellow);
}
input:not([type=range]):not([disabled]):focus, textarea:not([disabled]):focus, select:not([disabled]):focus {
  border-color: var(--urbic-color-yellow);
}
input:not([type=range]):disabled, textarea:disabled, select:disabled {
  background-color: var(--urbic-color-secondary-light);
}

/*-------------------------*\
    urbic-basic-lists
\*-------------------------*/
.urbic-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.urbic-list-item {
  border: solid 1px var(--urbic-color-grey);
  border-radius: 5px;
  margin: 5px 0;
}

.urbic-list-item-secondary {
  border: solid 1px var(--urbic-color-secondary-light);
  border-radius: 5px;
  margin: 1px 0;
}

/*-------------------------*\
    urbic-styled-lists
    for display contents like
    results of reports
\*-------------------------*/
.urbic-list-cards {
  padding: 8px;
}
.urbic-list-cards .urbic-list-cards-item {
  min-height: 100px;
  background-color: var(--urbic-color-white);
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: var(--spacing);
}
.urbic-list-cards .urbic-list-cards-item:hover {
  border-color: var(--urbic-color-yellow);
}

/*------------------------*\
    user profile card
\*-------------------------*/
.profile-container {
  display: flex;
  flex-direction: column;
  padding: 1em;
  justify-content: space-evenly;
}

.profile-container .profile-card {
  flex-basis: 40%;
}

.profile-container .tabs {
  flex-basis: 60%;
}

@media screen and (min-width: 800px) {
  .profile-container {
    flex-direction: row;
  }
}
.profile-card .profile-meta div {
  font-size: 1.2em;
  padding: 0.5em;
  margin: 0.2em;
  text-align: center;
}

.profile-card .profile-meta div:not(:first-child) {
  border-top: 1px solid var(--urbic-color-grey);
}

.profile-card .profile-meta div i.fa {
  margin-right: 5px;
}

.profile-name {
  border-radius: 0.3em 0.3em 0 0;
  text-align: center;
  font-size: 2em;
  padding: 0.5em 1em;
  background-color: var(--urbic-color-grey);
  color: #fff;
}

.profile-short-name {
  display: flex;
  justify-content: space-around;
  align-content: space-around;
  font-size: 3em;
  padding: 0.5em;
}

.profile-short-name div {
  padding: 0.5em;
  border-radius: 50%;
  border: 2px solid var(--urbic-color-green);
}

/*================================*/
/* side-panel                     */
/*================================*/
.side-panel {
  width: 0;
  position: fixed;
    z-index: 2000;
    /* open layers cards has many items */
  top: 115px;
  height: 90vh;
  background-color: var(--urbic-color-white);
  overflow-x: hidden;
  transition: 0.75s ease-out;
  border: 1px solid var(--urbic-color-grey);
}
.side-panel .side-panel-content {
  padding: 1em;
}

.side-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background-color: var(--urbic-color-grey);
  color: var(--urbic-color-white);
}
.side-panel-header .side-panel-close-btn {
  transition: 0.3s;
  color: var(--urbic-color-white);
  margin-right: 20px;
  font-weight: bold;
  font-size: 1.2em;
}
.side-panel-header .side-panel-close-btn:hover {
  color: var(--urbic-color-yellow);
  cursor: pointer;
}

.side-panel.side-panel-margin {
  margin-top: 10vh;
}

.side-panel.side-panel-right {
  right: -5px;
  border: 1px solid var(--urbic-color-green);
}

.side-panel.side-panel-left {
  left: -5px;
  border: 1px solid var(--urbic-color-yellow);
}

/*================================*/
/* slider                         */
/*================================*/
/* normal slider*/
.slider-container {
  display: flex;
  /* The slider itself */
  /* Mouse-over effects */
  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
}
.slider-container .slider {
  appearance: none;
    width: 100%;
    /* Full-width */
    height: 2px;
    /* Specified height */
    background: var(--urbic-color-yellow);
    /* Grey background */
    outline: none;
    /* Remove outline */
    opacity: 1;
    /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: 0.2s;
    /* 0.2 seconds transition on hover */
  transition: opacity 0.2s;
  border-radius: 8px;
}
.slider-container datalist {
  display: flex;
  justify-content: space-between;
  height: auto;
  overflow: hidden;
  font-size: 14px;
  margin-top: 5px;
}
.slider-container datalist option {
  color: var(--urbic-color-grey);
}
.slider-container datalist option:nth-child(even) {
  color: var(--urbic-color-secondary-dark);
}
.slider-container .slider:hover {
    opacity: 0.7;
    /* Fully shown on mouse-over */
}
.slider-container .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
  appearance: none;
    width: 16px;
    /* Set a specific slider handle width */
    height: 16px;
    /* Slider handle height */
  border-radius: 50%;
    background: var(--urbic-color-grey);
    /* Green background */
    cursor: pointer;
    /* Cursor on hover */
  position: relative;
}
.slider-container .slider::-webkit-slider-thumb:hover {
  background: var(--urbic-color-yellow);
}
.slider-container .slider::-webkit-slider-thumb:active {
  box-shadow: inset 0 0 3px var(--urbic-color-yellow), 0 0 9px var(--urbic-color-yellow);
  /*-webkit-box-shadow: inset 0 0 3px var(--urbic-color-yellow), 0 0 9px var(--urbic-color-yellow);*/
}
.slider-container .slider::-moz-range-thumb {
    width: 16px;
    /* Set a specific slider handle width */
    height: 16px;
    /* Slider handle height */
  border-radius: 50%;
    background: var(--urbic-color-grey);
    /* Green background */
    cursor: pointer;
    /* Cursor on hover */
}

/*multi slider*/
.multi-slider-container {
  display: flex;
  flex-direction: column;
  border: 1px solid #fff;
}
.multi-slider-container .range-description, .multi-slider-container .range-values {
  position: relative;
  display: flex;
  justify-content: space-between;
  color: #635a5a;
  margin-bottom: 8px;
}
.multi-slider-container .range-description input[type=number], .multi-slider-container .range-values input[type=number] {
  color: #8a8383;
  width: 50px;
  min-height: 26px;
  border: none;
  text-align: center;
  font-size: 1em;
}
.multi-slider-container .range-description .slider-display, .multi-slider-container .range-values .slider-display {
  color: var(--urbic-color-grey);
  min-width: 26px;
  min-height: 26px;
  text-align: center;
  vertical-align: center;
}
.multi-slider-container .range-control {
  position: relative;
  min-height: 20px;
  /* webkit css :-( */
}
.multi-slider-container .range-control .range-control-slider {
  appearance: none;
  webkit-appearance: none;
  height: 2px;
  width: 100%;
  position: absolute;
  background-color: #C6C6C6;
  pointer-events: none;
}
.multi-slider-container .range-control .slider-from {
  height: 0;
  z-index: 1;
  top: 1px;
}
.multi-slider-container .range-control input[type=range]::-webkit-slider-thumb:hover {
  background: var(--urbic-color-yellow);
}
.multi-slider-container .range-control input[type=range]::-webkit-slider-thumb:active {
  box-shadow: inset 0 0 3px var(--urbic-color-yellow), 0 0 9px var(--urbic-color-yellow);
  /*-webkit-box-shadow: inset 0 0 3px var(--urbic-color-yellow), 0 0 9px var(--urbic-color-yellow);*/
}
.multi-slider-container .range-control input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 16px;
  height: 16px;
  background-color: var(--urbic-color-grey);
  border-radius: 50%;
  box-shadow: 0 0 0 1px #C6C6C6;
  cursor: pointer;
}
.multi-slider-container .range-control input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 16px;
  height: 16px;
  background-color: var(--urbic-color-grey);
  border-radius: 50%;
  box-shadow: 0 0 1px #C6C6C6;
  cursor: pointer;
}

/*-------------------------*\
    supply quality
    display a direction with additional information's
    like quality, lost time ans so on
\*-------------------------*/
.supply-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  transition: all 0.5s ease-out;
  align-items: flex-start;
  margin-top: 16px;
}
.supply-container .ca {
  text-align: center;
}
.supply-container .ra {
  text-align: right;
}
.supply-container .clamped {
  max-width: 330px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.supply-container .supply-card {
  width: 350px;
  height: 350px;
  color: var(--urbic-color-grey);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.supply-container .supply-card .supply-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 1.05em;
}
.supply-container .supply-card .supply-settings {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.supply-container .supply-card .supply-view {
  margin: var(--spacing);
}
.supply-container .supply-card .supply-footer {
  font-size: 0.8em;
  color: var(--urbic-color-secondary-dark);
  display: flex;
  justify-content: space-between;
}
.supply-container .supply-chart {
  min-height: 350px;
  flex-grow: 2;
  opacity: 1;
  transition-property: opacity;
  transition-duration: 3s;
}

text.los-A {
  fill: #fff;
}

text.los-B {
  fill: #fff;
}

text.los-E {
  fill: #fff;
}

text.los-F {
  fill: #fff;
}

text.los-I {
  fill: #fff;
}

/*------------------------*\
    tabs
\*-------------------------*/
.tabs {
  margin: 1em;
}

.tabs-content {
  border-radius: 0 10px 0 0;
}

.tabs-content > div {
  padding: 1.5em;
  border: 1px solid var(--urbic-color-secondary-dark);
  border-radius: 0;
  transition: 0.3s;
  display: none;
  min-height: 50px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

.tabs-content > div.active {
  display: block;
}

.tabs-header {
  display: block;
  border-top: 1px solid var(--urbic-color-secondary-dark);
  border-left: 1px solid var(--urbic-color-secondary-dark);
  border-right: 1px solid var(--urbic-color-secondary-dark);
  background-color: var(--urbic-color-secondary-light);
  border-radius: 5px 5px 0 0;
}
.tabs-header button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 15px 16px;
  transition: 0.3s;
  color: var(--urbic-color-grey);
  margin: 0;
  border-top: 2px solid var(--urbic-color-secondary-light);
  /*border-bottom: 1px solid var(--urbic-color-secondary-light);*/
  display: block;
  width: 100%;
}
.tabs-header button:first-child {
  border-radius: 5px 0 0 0;
}
.tabs-header button:last-child {
  border-radius: 0 5px 0 0;
}
.tabs-header button:hover {
  background-color: var(--urbic-color-secondary-dark);
  border-top: 2px solid var(--urbic-color-grey);
  color: var(--urbic-color-white);
}
.tabs-header button.active {
  background-color: var(--urbic-color-white);
  color: var(--urbic-color-grey);
  border-top: 2px solid var(--urbic-color-yellow);
  border-bottom: 1px solid var(--urbic-color-white);
}

.tabs-header-container {
  display: block;
  justify-content: space-between;
  background-color: var(--urbic-color-white);
  border-radius: 0 5px 0 0;
  outline: none;
}
.tabs-header-container .urbic-input-icon i {
  left: -1.5em;
}

@media screen and (min-width: 800px) {
  .tabs-header, .tabs-header-container {
    display: flex;
  }

    .tabs-header button {
    display: inline;
    width: auto;
  }

    .tabs-content > div {
    border-radius: 0 5px 0 0;
  }
}
/* ============================= */
/* COMPONENT Table */
/* ============================= */
.urbic-table {
  border-collapse: collapse;
  width: 100%;
  /* outline: 1px solid var(--urbic-color-secondary-light);*/
}
.urbic-table thead tr {
  padding-bottom: 10px;
}
.urbic-table thead tr th {
  text-align: left;
  padding: 1em;
  color: var(--urbic-color-grey);
  border-bottom: 2px solid var(--urbic-color-secondary-dark);
  font-weight: 600;
}
.urbic-table thead tr th.selectable {
  width: 50px;
}
.urbic-table tbody tr {
  transition: 0.2s;
}
.urbic-table tbody tr:nth-child(odd) {
  background: var(--urbic-color-secondary-light);
  border-width: 1px 0;
  border-color: var(--urbic-color-secondary-dark);
  border-style: solid;
}
.urbic-table tbody tr:hover {
  background: var(--urbic-color-grey);
  opacity: 0.7;
}
.urbic-table tbody tr:hover td:first-child {
  border-right: 1px solid var(--urbic-color-yellow);
}
.urbic-table tbody tr:hover td {
  color: var(--urbic-color-white);
}
.urbic-table tbody tr:hover a {
  color: var(--urbic-color-white);
}
.urbic-table tbody tr:hover .profile-short-name div {
  border-color: var(--urbic-color-yellow);
}
.urbic-table tbody tr td, .urbic-table tfoot tr td {
  padding: 1em;
  font-weight: normal;
  color: var(--urbic-color-grey);
}
.urbic-table tbody tr td .profile-short-name, .urbic-table tfoot tr td .profile-short-name {
  padding: var(--spacing);
  font-size: 1em;
}
.urbic-table tbody tr td .profile-short-name div, .urbic-table tfoot tr td .profile-short-name div {
  padding: var(--spacing);
}
.urbic-table tfoot tr td {
  padding-top: 2em;
  border-top: 1px solid var(--urbic-color-secondary-dark);
  text-align: right;
  color: var(--urbic-color-secondary-dark);
}
.urbic-table .selectable {
  border-right: 1px solid var(--urbic-color-secondary-dark);
}

@media screen and (max-width: 800px) {
  .urbic-table tbody, .urbic-table tr, .urbic-table td, .urbic-table thead, .urbic-table tfoot, .urbic-table th {
    display: block;
  }
  .urbic-table thead tr th, .urbic-table .selectable {
    border: none;
  }
}
/*------------------------*\
    urbic-tags
\*-------------------------*/
.urbic-tag-container {
  overflow: auto;
  width: 100%;
}

.urbic-tag {
  margin: 7px;
  padding: 7px;
  border-radius: 7px;
  border: 1px solid var(--urbic-color-grey);
  color: var(--urbic-color-grey);
  float: left;
  display: flex;
  flex-direction: row;
  background-color: var(--urbic-color-white);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.urbic-tag-delete {
  margin-left: 5px;
  position: relative;
  top: -7px;
  left: 3px;
  font-weight: bold;
  cursor: pointer;
}

/*====================================================*/
/* toggle                                             */
/* see on: https://codepen.io/ChrisSargent/pen/MaKJxO */
/*====================================================*/
.toggle-container {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  /*justify-content: center;*/
  align-items: center;
  margin: 5px;
}

.toggle input[type=checkbox] {
  display: none;
}
.toggle input:checked + .slide-toggle {
  background-color: var(--urbic-color-success);
}
.toggle input:checked + .slide-toggle::before {
  transform: scale(0);
}
.toggle input:checked + .slide-toggle::after {
  transform: translate3d(20px, 0, 0);
}
.toggle .slide-toggle {
  display: block;
  position: relative;
  flex: none;
  width: 50px;
  height: 30px;
  border-radius: 30px;
  background-color: #d7d2cb;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
  z-index: 1;
  /*margin: 10px;*/
}
.toggle .slide-toggle::before, .toggle .slide-toggle::after {
  content: " ";
  display: block;
  position: absolute;
  top: 1px;
  border-radius: 30px;
  height: 28px;
  background-color: var(--urbic-color-white);
  transform: translate3d(0, 0, 0);
  transition: 0.2s cubic-bezier(0, 1.1, 1, 1.1);
  border: 1px solid var(--urbic-color-secondary-dark);
}
.toggle .slide-toggle::before {
  z-index: -1;
  width: 48px;
  right: 1px;
  transform: scale(1);
}
.toggle .slide-toggle::after {
  z-index: 1;
  width: 28px;
  left: 1px;
  box-shadow: 0 1px 4px 0.5px rgba(0, 0, 0, 0.25);
}
.toggle.toggle-s .slide-toggle {
  width: 40px;
  height: 20px;
  border-radius: 20px;
}
.toggle.toggle-s .slide-toggle::before, .toggle.toggle-s .slide-toggle::after {
  border-radius: 20px;
  height: 18px;
}
.toggle.toggle-s .slide-toggle::before {
  width: 38px;
}
.toggle.toggle-s .slide-toggle::after {
  width: 18px;
}

/*-------------------------*\
    Week Display
    show selected days in a week
\*-------------------------*/
.week-visualizer {
  display: flex;
}
.week-visualizer > div {
  background-color: var(--urbic-color-secondary-light);
  margin: 0.5px;
  color: var(--urbic-color-white);
  font-size: inherit;
  border: 1px solid var(--urbic-color-secondary-dark);
}
.week-visualizer > div:nth-child(6) {
  margin-left: 5px;
}
.week-visualizer > div[data-selected=selected] {
  background-color: var(--urbic-color-grey);
  border: 1px solid var(--urbic-color-secondary-dark);
}

.week-visualizer-s > div {
  width: 16px;
  height: 16px;
}

.week-visualizer-m > div {
  width: 20px;
  height: 20px;
}

.week-visualizer-l > div {
  width: 24px;
  height: 24px;
}

.week-visualizer-xl > div {
  width: 32px;
  height: 32px;
}

.week-visualizer-xxl > div {
  width: 64px;
  height: 64px;
}

/*# sourceMappingURL=app-main.css.map */