/*
 * Colors
 */
:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --white: #444444;
    --dark-white: #303030;
    --black: white;
    --dark-black: #F2F2F2;
    --light-black: #AAAAAA;
    --primary-color-dark: #5F607B;
    --primary-color: #46475D;
    --on-primary-color-dark: var(--black);
    --on-primary-color: var(--black);
    --secondary-color-dark: #40B771;
    --secondary-color: #309459;
    --on-secondary-color-dark: var(--black);
    --on-secondary-color: var(--black);
    --tertiary-color-dark: #D1EDFB;
    --tertiary-color: #184861;
    --on-tertiary-color-dark: var(--white);
    --on-tertiary-color: var(--black);
    --error: #DD4343;
    --error-light: color-mix(in oklab, var(--white) 40%, var(--error));
    --on-error: var(--black);
    --warning-light: #FFD115;
    --on-warning-light: var(--white);
    --warning: #FFED92;
    --on-warning: var(--white);
    --success: var(--secondary-color-dark);
    --on-success: var(--black);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --black: #444444;
    --white: white;
    --primary-color: #5F607B;
    --secondary-color: #648C68;
    --tertiary-color: #8A668A;
    --quaternary-color: #477582;
    --quinary-color: #B3834F;
    --error: #DD4343;
    --success: #5F876F;
    --warning: #FFD115;

    --on-primary-color: var(--white);
    --on-secondary-color: var(--white);
    --on-tertiary-color: var(--white);
    --on-quaternary-color: var(--white);
    --on-quinary-color: var(--white);
    --on-error: var(--white);
    --on-success: var(--white);
    --on-warning: var(--black);

    --primary-color-dark: color-mix(in oklch, var(--primary-color), black 25%);
    --secondary-color-dark: color-mix(in oklch, var(--secondary-color), black 25%);
    --tertiary-color-dark: color-mix(in oklch, var(--tertiary-color), black 25%);
    --quaternary-color-dark: color-mix(in oklch, var(--quaternary-color), black 25%);
    --quinary-color-dark: color-mix(in oklch, var(--quinary-color), black 25%);
    --error-light: color-mix(in oklab, var(--white) 40%, var(--error));
    --success-light: color-mix(in oklab, var(--white) 40%, var(--success));
    --warning-light: color-mix(in oklab, var(--white) 40%, var(--warning));

    --on-primary-color-dark: var(--white);
    --on-secondary-color-dark: var(--white);
    --on-tertiary-color-dark: var(--white);
    --on-quaternary-color-dark: var(--white);
    --on-quinary-color-dark: var(--white);
    --on-error-light: var(--black);
    --on-success-light: var(--black);
    --on-warning-light: var(--black);
  /*   primary, secondary, tertiary, quaternary, quinary, senary, septenary, octonary, nonary, and denary. */

    --dark-black: color-mix(in oklab, var(--black), black 25%); /* #303030 */
    --light-black: color-mix(in oklab, var(--black), white 25%); /* #666666 */
    --dark-white: color-mix(in oklab, var(--white), black 4%); /* #F2F2F2 */
  }
}


:root {
  --important: var(--error);

  --root-bg: var(--dark-white);
  --main-fg: var(--black);
  --main-bg: var(--white);
  --link-fg: var(--dark-black);

  --header-fg: var(--main-fg);
  --header-bg: var(--white);
  --search-bg: color-mix(in oklab, var(--dark-white) 60%, var(--white));
  --search-fg: var(--dark-black);
  --menu-fg: var(--white);
  --menu-bg: var(--primary-color-dark);
  --menu-subMenu-bg: color-mix(in oklab, var(--menu-bg) 75%, var(--white));
  --menu-subMenu-fg: var(--menu-fg);
  --menu-subMenu-active-bg: color-mix(in oklab, var(--menu-bg) 85%, var(--white));
  --menu-subMenu-active-fg: var(--menu-fg);
  --menu-fg-hover: var(--menu-selected-fg);
  --menu-bg-hover: var(--menu-selected-bg);
  --menu-selected-fg: var(--menu-bg);
  --menu-selected-bg: var(--menu-fg);

  --large-button-fg: var(--white);
  --large-button-bg: var(--primary-color-dark);
  --large-button-bg-hover: var(--primary-color);
  --small-button-fg: var(--main-fg);
  --small-button-bg: var(--white);
  --small-button-fg-hover: var(--white);
  --small-button-bg-hover: var(--primary-color-dark);

  --tooltip-fg: var(--white);
  --tooltip-bg: var(--dark-black);
  --tooltip-shadow: var(--tooltip-bg);

  --dropdownMenu-fg: var(--black);
  --dropdownMenu-bg: var(--white);
  --dropdownMenu-border: color-mix(in oklab, var(--black) 26%, var(--white));
  --dropdownMenu-bg-hover: color-mix(in oklab, var(--black) 9%, var(--white));
  --dropdownMenu-shadow: color-mix(in srgb, var(--dark-black), transparent 20%);
  --dropdownMenu-separator: color-mix(in oklab, var(--black) 25%, var(--white));

  --form-title-fg: var(--primary-color-dark);
  --form-title-border: color-mix(in oklab, var(--black) 8%, var(--white));
  --form-update-fg: var(--white);
  --form-update-bg: var(--primary-color-dark);
  --form-update-bg-hover: var(--primary-color);
  --form-submit-fg: var(--white);
  --form-submit-bg: var(--secondary-color);
  --form-submit-bg-hover: var(--secondary-color-dark);
  --form-cancel-fg: var(--light-black);
  --form-cancel-fg-hover: var(--error);
  --form-legend-fg: var(--tertiary-color-dark);
  --form-legend-bg: var(--tertiary-color);
  --form-label: var(--light-black);
  --form-field-fg: var(--black);
  --form-field-bg: var(--white);
  --form-field-border: color-mix(in oklab, var(--black) 27%, var(--white));
  --form-field-border-hover: var(--primary-color-dark);
  --form-checkbox-bg-hover: var(--secondary-color);
  --form-checkbox-checked: var(--secondary-color);
  --form-checkbox-checked-fg: var(--white);
  --form-checkbox-unchecked: var(--error);
  --form-seeMore-fg: var(--black);
  --form-seeMore-bg: color-mix(in oklab, var(--black) 19%, var(--white));
  --form-seeMore-fg-hover: var(--white);
  --form-seeMore-bg-hover: var(--primary-color-dark);
  --input-success: var(--secondary-color);
  --input-updated: orange;
  --form-fields-header-bg: color-mix(in oklab, var(--black) 10%, var(--white));
  --form-fields-header-border: color-mix(in oklab, var(--black) 18%, var(--white));

  --modal-bg: var(--white);
  --modal-title-fg: color-mix(in oklab, var(--black) 89%, var(--white));
  --modal-title-bg: var(--dark-white);
  --modal-button-fg: var(--primary-color-dark);
  --modal-button-bg: var(--modal-title-bg);

  --tab-color: var(--error);
  --table-header-fg: var(--white);
  --table-header-bg: var(--error);
  --table-body-evenRow-bg: color-mix(in oklab, var(--black) 4%, var(--white));
  --table-row-shadow-hover: color-mix(in srgb, var(--light-black), transparent 60%);

  --large-list-bg: var(--white);
  --large-list-border: color-mix(in oklab, var(--black) 27%, var(--white));
  --large-list-bg-hover: color-mix(in oklab, var(--black) 7%, var(--white));
  --large-list-fg: var(--black);
  --large-list-selected-bg: var(--primary-color);
  --large-list-selected-fg: var(--white);

  --groupedList-pagingBtn-bg: var(--white);
  --groupedList-pagingBtn-fg: var(--light-black);
  --groupedList-pagingBtn-border: var(--form-field-border);
  --groupedList-pagingBtn-bg-hover: var(--form-field-border-hover);
  --groupedList-pagingBtn-fg-hover: var(--white);
}



/*
 * Fonts
 */
@font-face {
  font-family: 'lato';
  src: url("../fonts/lato-Regular.eot?");
  src: url("../fonts/lato-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-Regular.woff") format("woff"), url("../fonts/lato-Regular.ttf") format("truetype"), url("../fonts/lato-Regular.svg#lato-Regular") format("svg");
}

@font-face {
  font-family: 'cabin';
  src: url("../fonts/cabin.eot?");
  src: url("../fonts/cabin.eot?#iefix") format("embedded-opentype"), url("../fonts/cabin.woff") format("woff"), url("../fonts/cabin.ttf") format("truetype"), url("../fonts/cabin.svg#lato-Regular") format("svg");
}

/* @font-face { */
/*   font-family: 'Material Icons'; */
/*   font-style: normal; */
/*   font-weight: 400; */
/*   src: url(../fonts/MaterialIcons-Regular.ttf); */
/*   /* For IE6-8 */
/*   src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype"); */
/* } */
/**/

.icon {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
}

.icon-filled {
  font-variation-settings: 'FILL' 1;
}



/*
 * General tags
 */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  background: var(--root-bg);
  font-family: "lato", "Arial", sans-serif;
  font-size: 11pt;
  color: var(--main-fg);
}

body {
  --header-height: 60px;
  padding: 0px;
  margin: 0px;
  display: grid;
  height: 100svh;
  grid-template-rows: var(--header-height) auto;
}

body:has(#menu) {
  grid-template-columns: 230px auto;
  grid-template-areas: 
    "header header"
    "menu main";
}
body:not(:has(#menu)):not(.empty) {
  grid-template-columns: auto;
  grid-template-areas: 
    "header"
    "main";
}

/* p, a, li { */
/*   font-size: 0.875rem; */
/* } */

a:visited {
  color: var(--main-fg);
}

a {
  color: var(--link-fg);
  text-decoration: none;
}

body.empty {
  padding: 0px;
  margin: 0px;
  display: grid;
  height: 100svh;
  grid-template-columns: auto;
  grid-template-rows: auto 40px;
  grid-template-areas: 
    "main"
    "footer";
}

.hidden {
  display: none;
}

[data-showOnDevice] {
  display: none;
}

.rotate180
{
  transform: rotate(180deg);
}



/*
 * header
 */
#header {
  grid-area: header;
  align-items: center;
  display: flex;
  background: var(--header-bg);
  color: var(--header-fg);
}

#header div.logo {
  padding-left: 20px;
  width: 230px;
}

#header div.searchBar {
  padding-left: 32px;
  padding-right: 32px;
  flex: auto;
}

#header div.buttons {
  padding-right: 20px;
}

#header div.searchBar div.inputGroup {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid var(--search-bg) !important;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  background-color: var(--search-bg);
  color: var(--search-fg);
}

#header div.searchBar div.inputGroup:has(input[type="text"]:focus),
#header div.searchBar div.inputGroup:hover {
  border: 1px solid var(--form-field-border-hover);
  box-shadow: inset 0 0 0 1px var(--form-field-border-hover);
}

#header div.searchBar input[type="text"]:focus,
#header div.searchBar input[type="text"]:hover {
  border: 0px !important;
  box-shadow: none;
}

#header div.searchBar .field {
  margin: 0px;
}

#header div.searchBar input,
#header div.searchBar div.prepend {
  transition: all 0.2s ease-in-out;
  background: none !important;
  color: var(--search-fg) !important;
  border: 0px;
}

#header h1 {
  vertical-align: middle;
}



/*
 * menu
 */
nav.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav.menu li {
    transition: all 0.3s ease;
}

nav.menu li > span,
nav.menu li > a {
    display: flex;
    align-items: center;
    padding: 12px;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    color: var(--menu-fg);
}

nav.menu li:has(ul) > span::after,
nav.menu li:has(ul) > a::after {
    font-family: 'Material Symbols Outlined';
    font-size: 1.5rem;
    content: "expand_more";
    margin-left: auto;
    transition: transform 0.3s ease;
}

nav.menu li:has(ul).active > span::after,
nav.menu li:has(ul).active > a::after {
  transform: rotate(180deg);
}


nav.menu li ul {
    height: 0;
    overflow: hidden;
    background-color: var(--menu-subMenu-bg);
    transition: height 0.3s ease;
}

nav.menu li ul,
nav.menu li ul a {
    color: var(--menu-subMenu-fg);
}

nav.menu li.active {
    background-color: var(--menu-subMenu-active-bg);
    color: var(--menu-subMenu-active-fg);
}

nav.menu li.selected {
  border-left: 3px solid var(--error);
}

nav.menu li.selected,
nav.menu li.selected a {
    background-color: var(--menu-selected-bg);
    color: var(--menu-selected-fg);
}

nav.menu li:not(:has(ul)):hover,
nav.menu li:has(> ul):not(:has(li:hover)):hover > span,
nav.menu li:has(> ul):not(:has(li:hover)):hover > a {
    background-color: var(--menu-bg-hover);
    color: var(--menu-fg-hover);
}
nav.menu li:not(:has(ul)):hover > span,
nav.menu li:not(:has(ul)):hover > a
{
    color: var(--menu-fg-hover);
}


nav.menu li:has(ul > li:hover) > a,
nav.menu li:has(ul > li:hover) > span
{
  background: inherit;
  color: inherit;
}

nav.menu li ul > li {
    padding-left: 30px;
    font-size: 0.95em;
}

nav.menu li i.icon {
  margin-right: 1ex;
}

#menu {
  grid-area: menu;
  background: var(--menu-bg);
  color: var(--menu-fg);
  padding-top: 20px;
  overflow: auto;
}



/*
 * Main area and footer
 */
#main {
  grid-area: main;
  background: var(--root-bg);
  overflow: auto;
}

#footer {
  background: var(--root-bg);
  vertical-align: middle;
}

#footer p {
  width: 100%;
  text-align: center;
  font-size: 80%;
}



/*
 * Page header
 */
#pageHeader {
  padding: 7px 32px 0px 32px;
}

#pageTitleBlock {
  display: flex;
  margin-top: 28px;
  margin-bottom: 32px;
  width: 100%;
}

#pageTitleBlock .buttonsList.onRight {
  display: flex;
  justify-content: flex-end;
  flex-grow: 1;
  align-items: flex-start;
}

#pageTitleContainer h1 {
  font-family: "cabin", "Arial", sans-serif;
  margin: 0px;
  font-size: 1.772rem;
}

#pageTitleContainer h2 {
  font-family: "cabin", "Arial", sans-serif;
  font-weight: normal;
  font-size: 1.227rem;
  margin: 8px 0px 0px 0px;
}



/*
 * Page content
 */
.breadcrumb {
  font-size: 0.85rem;
  display: inline-flex;
  gap: .4rem;
}

.breadcrumb .icon {
  font-size: 1rem;
}

#filterFormContainer {
  margin: 10px 32px 32px 32px;
  padding: 16px;
  background-color: var(--main-bg);
}

#content {
  --content-padding: 0px;
}
#content:has(*) {
  --content-padding: 32px;
  padding: 32px 32px 32px 32px;
  background-color: var(--main-bg);
}



/*
 * buttons
 */
.buttonsList {
  display: flex;
  align-items: center;
  gap: 10px;
  /* justify-content: center; */
}

.modal .buttonsList {
  margin-bottom: 16px;
}

.buttonsList.onRight{
  justify-content: flex-end;
}

.buttonsList.floatRight{
  float: right;
}

.button {
  position: relative;
  user-select: none;
  cursor: pointer;
  display: inline-flex;
  padding: 0 2.2ex;
  text-decoration: none;
  /* line-height: 35px; */
  align-items: center;
  height: 5ex;
  border-radius: 3px;
  transition: all 0.2s ease-in;
}

.button.large > .icon {
  margin-right: 0.25ex;
  /* font-weight: bold; */
}

.button.large {
  color: var(--large-button-fg);
  background: var(--large-button-bg);
}
.button.small {
  color: var(--small-button-fg);
  background: var(--small-button-bg);
  border-radius: 100%;
  width: 36px;
  padding: 0px 0px;
  justify-content: center;
  font-weight: bold;
}

.button.large:hover,
.button.large:focus
{
  background: var(--large-button-bg-hover);
  border-color: var(--large-button-bg-hover);
}

.button.small:hover,
.button.small:focus
{
  color: var(--small-button-fg-hover);
  background: var(--small-button-bg-hover);
  border-color: var(--small-button-bg-hover);
}

button .icon {
  font-size: 1rem;
}



/*
 * Tooltips
 */
#tooltipContainer {
  position: fixed;
  z-index: 99999;
  padding: 7px 11px;
  /* background: #111; */
  background: var(--tooltip-bg);
  /* color: #fff; */
  color: var(--tooltip-fg);
  /* font-size: 13px; */
  line-height: 1.5;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  word-break: break-word;
  white-space: normal;
  box-sizing: border-box;
  max-width: 240px;
  width: max-content;
  box-shadow: 0 1px 5px var(--tooltip-shadow);
}

#tooltipContainer.tooltip-visible {
  opacity: 1;
}

#tooltipContainer[data-pos="bottom"] { transform: translateY(4px); }
#tooltipContainer[data-pos="top"] { transform: translateY(-4px); }
#tooltipContainer[data-pos="left"] { transform: translateX(-4px); }
#tooltipContainer[data-pos="right"] { transform: translateX(4px); }

#tooltipContainer[data-pos="bottom"].tooltip-visible,
#tooltipContainer[data-pos="top"].tooltip-visible {
  transform: translateY(0);
}
#tooltipContainer[data-pos="left"].tooltip-visible,
#tooltipContainer[data-pos="right"].tooltip-visible {
  transform: translateX(0);
}

#tooltipContainer::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
}
#tooltipContainer[data-pos="top"]::after {
  top: 100%;
  left: var(--arrow-x, 50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  /* border-top: 6px solid #111; */
  border-top: 6px solid var(--tooltip-bg);
}
#tooltipContainer[data-pos="bottom"]::after {
  bottom: 100%;
  left: var(--arrow-x, 50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  /* border-bottom: 6px solid #111; */
  border-bottom: 6px solid var(--tooltip-bg);
}
#tooltipContainer[data-pos="left"]::after {
  left: 100%;
  top: var(--arrow-y, 50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  /* border-left: 6px solid #111; */
  border-left: 6px solid var(--tooltip-bg);
}
#tooltipContainer[data-pos="right"]::after {
  right: 100%;
  top: var(--arrow-y, 50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  /* border-right: 6px solid #111; */
  border-right: 6px solid var(--tooltip-bg);
}



/*
 * Titles
 */
h3 {
  font-family: "cabin", "Arial", sans-serif;
  font-size: 1.5rem;
  font-weight: normal;
  color: var(--form-title-fg);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--form-title-border);
  margin-bottom: 16px;
}

h3:first-child {
  margin-top: 0px;
}



/*
 * Grid management
 */
.gridRow {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.grid-2 {
  grid-column-end: span 2;
}
.grid-3 {
  grid-column-end: span 3;
}
.grid-4 {
  grid-column-end: span 4;
}
.grid-5 {
  grid-column-end: span 5;
}
.grid-6 {
  grid-column-end: span 6;
}
.grid-7 {
  grid-column-end: span 7;
}
.grid-8 {
  grid-column-end: span 8;
}
.grid-9 {
  grid-column-end: span 9;
}
.grid-10 {
  grid-column-end: span 10;
}
.grid-11 {
  grid-column-end: span 11;
}
.grid-12 {
  grid-column-end: span 12;
}



/*
 * Loader
 */
#loading {
  width: 100%;
  height: 100%;
  top: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.3);
  z-index: 8000;
}
#loading .loading-content {
  top: 50%;
  left: 50%;
  position: absolute;
  margin-right: -50%;
  background: var(--white);
  padding: 10px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  box-shadow: var(--dark-black) 0px 0px 10px 0px;
}

#loading .loading-content svg {
  position: absolute;
  z-index: 10000;
  top: 2px;
  left: 2px;
}
#loading .loading-content p {
  margin-bottom: 0px;
  color: var(--black);
}



/*
 * Modal window
 */
div.modalContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000068;
  z-index: 1000;
  backdrop-filter: blur(3px);
  transition: all 0.2s ease-in-out;
}

div.modal {
  position: fixed;
  top: 7%;
  background-color: var(--modal-bg);
  right: 30%;
  left: 30%;
  border-radius: 5px;
}

div.modal.modalSize-xs {
  right: 35%;
  left: 35%;
}
div.modal.modalSize-m {
  right: 23%;
  left: 23%;
}
div.modal.modalSize-l {
  right: 18%;
  left: 18%;
}

div.modalTitle {
  background: var(--modal-title-bg);
  color: var(--modal-title-fg);
  display: flex;
  padding: 10px 20px;
  align-items: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

div.modalTitle h1 {
  font-family: "cabin", "Arial", sans-serif;
  flex: auto;
  font-size: 100%;

}

div.modalTitle .modalClose {
  flex: initial;
  cursor: pointer;
  user-select: none;
}

div.modalContent {
  padding: 20px;
  overflow-y: auto;
  max-height: 60vh;
}

div.modalHeader div.buttonsList {
  float: right;
}

div.modalHeader div.buttonsList .button.small,
div.modal div.buttonsList .button.small {
  background-color: var(--modal-button-bg);
  color: var(--modal-button-fg);
}


div.modalBottom {
  border-top: 1px solid var(--modal-title-bg);
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

div.modalBottom > .left {
  display: inline-flex;
  justify-content: left;
  gap: 6px;
}

div.modalBottom > .middle {
  display: inline-flex;
  justify-content: center;
  gap: 6px;
}

div.modalBottom > .right {
  display: inline-flex;
  justify-content: right;
  gap: 6px;
}

div.modal:not(.warning) .modalButtonOk {
  color: var(--form-submit-fg);
  background: var(--form-submit-bg) !important;
}


div.modal.warning {
  background-color: var(--warning-light);
}

div.modal.warning div.modalTitle,
div.modal.warning div.modalBottom {
  background: var(--warning);
}

div.modal.warning div.modalBottom {
  border-color: var(--warning);
}

div.modal.warning .modalButtonOk {
  order: 1;
}

div.modal.warning .modalButtonClose {
  order: 2;
  color: var(--form-submit-fg);
  background: var(--form-submit-bg) !important;
}


/*
 * Tabs
 */
#main > .tabs > .tabsHeader {
  padding: 0px 32px;
}

.modalContent > .tabs > .tabsHeader {
  border-bottom: 1px solid #F2F2F2; /* XXX */
  margin-bottom: 16px;
}

div.tabs ul {
  margin: 0px;
  padding: 0px;
  overflow: auto;
  list-style: none;
}

div.tabs ul li {
  display: inline-block;
  padding: 0 8px;
}

div.tabs ul li.activeTab {
  border-bottom: 4px solid var(--tab-color);
}

div.tabs ul li a {
  text-decoration: none;
  color: var(--main-fg);
}

div.tabs ul li.activeTab a {
  color: var(--tab-color);
}

#main > .tabs > div.tabsContent {
  background-color: var(--main-bg);
  padding: 32px;
}
/**/
/* div.tabContent { */
/*   display: none; */
/* } */



/*
 * Form
 */
.field {
  margin-bottom: 20px;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0; }

legend {
  width: 100%;
  display: block;
  padding: 15px;
  margin-bottom: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: var(--form-legend-bg);
  color: var(--form-legend-fg);
}

.field label,
.fieldLabel label {
  font-size: 0.875rem;
  padding-bottom: 8px;
  font-size: 0.875rem;
  color: var(--form-label);
  display: block;
  text-align: left;
  /* padding-top: 1px;  */
}

.field label.radio {
  margin-right: 2ex;
  display: inline-block;
}

.field label i.tooltipIcon::after {
  font-family: 'Material Symbols Outlined';
  content: 'info';
  vertical-align: middle;
  font-size: 130%;
  margin-left: 4px;
  font-style: normal;
}


/* form[data-showMode='1'] .field .label { */
/*   width: 40%; */
/* } */


form:not([data-showMode='1']) .field .label:not(:has(~ div.select)).required:after
{
  color: var(--important);
  content: '*';
  margin-left: 4px;
}

input, select, textarea, div.fake-select, .cancelFormButton {
  width: auto;
  height: 35px;
  outline: none;
  border: 1px solid var(--form-field-border);
  padding: 8px;
  color: var(--form-field-fg);
  background: var(--form-field-bg);
  font-family: "lato", "Arial", sans-serif;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-weight: 600;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }

select:hover,
select:focus,
input[type="text"]:hover, input[type="text"]:focus,
input[type="password"]:hover, input[type="password"]:focus,
input[type="email"]:hover, input[type="email"]:focus,
input[type="tel"]:hover, input[type="tel"]:focus,
input[type="url"]:hover, input[type="url"]:focus,
input[type="number"]:hover, input[type="number"]:focus,
input[type="date"]:hover, input[type="date"]:focus,
input[type="time"]:hover, input[type="time"]:focus,
input[type="datetime-local"]:hover, input[type="datetime-local"]:focus,
input[type="color"]:hover, input[type="color"]:focus,
textarea:hover,
textarea:focus {
  border: 1px solid var(--form-field-border-hover);
  box-shadow: inset 0 0 0 1px var(--form-field-border-hover);
}

select:hover:has(~ p.error),
select:focus:has(~ p.error),
input[type="text"]:hover:has(~ p.error), input[type="text"]:focus:has(~ p.error),
input[type="password"]:hover:has(~ p.error), input[type="password"]:focus:has(~ p.error),
input[type="email"]:hover:has(~ p.error), input[type="email"]:focus:has(~ p.error),
input[type="tel"]:hover:has(~ p.error), input[type="tel"]:focus:has(~ p.error),
input[type="url"]:hover:has(~ p.error), input[type="url"]:focus:has(~ p.error),
input[type="number"]:hover:has(~ p.error), input[type="number"]:focus:has(~ p.error),
input[type="date"]:hover:has(~ p.error), input[type="date"]:focus:has(~ p.error),
input[type="time"]:hover:has(~ p.error), input[type="time"]:focus:has(~ p.error),
input[type="datetime-local"]:hover:has(~ p.error), input[type="datetime-local"]:focus:has(~ p.error),
input[type="color"]:hover:has(~ p.error), input[type="color"]:focus:has(~ p.error),
textarea:hover:has(~ p.error),
textarea:focus:has(~ p.error) {
  border: 1px solid var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

input[type="color"] {
  width: 150px;
}

.field input.error,
.field select.error,
.field textarea.error {
    border-color: var(--error);
}

.field input.success,
.field select.success,
.field textarea.success {
    border-color: var(--input-success);
}

.field input.updated,
.field select.updated,
.field textarea.updated {
    border-color: var(--input-updated);
}

form[data-showMode="1"] .fieldGroup {
  display: grid;
  grid-template-columns: 40% auto;
  gap: 1ex;
}

form:not([data-showMode='1']) .fieldGroup .fieldLabel {
  display: none;
}

form .fieldGroup:has(.fieldInput:empty) {
  display: none;
}

.fieldInput {
  display: grid;
  grid-template-columns: fit-content(50%) auto;
  gap: 1ex;
}

.fieldInput .field .showMode {
  grid-column: 1/3 !important;
}

.buttonsForm {
  margin-top: 3em;
  display: inline-flex;
  gap: 16px;
}

.modalBottom .buttonsForm {
  margin-top: 0em;
}

input[type="submit"] {
  color: var(--form-submit-fg);
  border: 0px;
  background: var(--form-submit-bg);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}

input[type="submit"]:hover,
input[type="submit"]:focus
{
    background: var(--form-submit-bg-hover);
    box-shadow: none;
    -webkit-transition: background 0.3s ease-in;
    -moz-transition: background 0.3s ease-in;
    transition: background 0.3s ease-in;
}

input[type="reset"], .cancelFormButton {
  border: 0px;
  /* margin: 0 16px 0 24px; */
  border-bottom: 2px solid var(--form-cancel-fg);
  color: var(--form-cancel-fg);
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  height: 4ex;
  border-radius: 0px;
  cursor: pointer;
  user-select: none;
}

input[type="reset"]:hover, .cancelFormButton:hover,
input[type="reset"]:focus, .cancelFormButton:focus
{
    border-bottom: 2px solid var(--form-cancel-fg-hover);
    color: var(--form-cancel-fg-hover);
}

.field:has(input[type="checkbox"] ~ div.fakeField),
label.radio:has(.fakeField) {
  position: relative;
  vertical-align: middle;
}

form:not([data-showMode="1"]) .field label:has(~ input[type="checkbox"] ~ div.fakeField)
{
  padding: 3px 0 0 29px;
}

form:not([data-showMode="1"]) .field label.radio:has(div.fakeField)
{
  padding: 3px 0 0 4ex;
}

input[type="radio"] {
  margin-right: 1ex;
}

input[type="checkbox"] {
  opacity: 0;
  z-index: 1;
}

input[type="checkbox"],
input[type="radio"],
input[type="checkbox"] + div.fakeField,
input[type="radio"] + div.fakeField{
  position: absolute;
  margin: 0px;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  border: 0px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="checkbox"] + div.fakeField,
input[type="radio"] + div.fakeField {
  border: 1px solid var(--form-field-border) !important;
  color: var(--form-checkbox-checked-fg);
  background: var(--form-field-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type="radio"] + div.fakeField {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.field:hover input[type="checkbox"] + div.fakeField,
input[type="checkbox"]:focus + div.fakeField,
label.radio:hover input[type="radio"] + div.fakeField,
input[type="radio"]:focus + div.fakeField {
  border-color: var(--form-checkbox-checked) !important;
}

input[type="checkbox"]:checked + div.fakeField,
input[type="radio"]:checked + div.fakeField {
  background: var(--form-checkbox-checked);
}

input[type="checkbox"]:checked + div.fakeField:before {
  content: 'check';
  font-size: 1.2rem;
  font-weight: bold;
  font-family: 'Material Symbols Outlined';
}

div.showMode .fieldIsChecked:before {
  content: 'check';
  font-size: 1.5rem;
  font-family: 'Material Symbols Outlined';
  color: var(--form-checkbox-checked);
}

div.showMode .fieldIsUnchecked:before {
  content: 'block';
  font-size: 1.5rem;
  font-family: 'Material Symbols Outlined';
  color: var(--form-checkbox-unchecked);
}

input[type="radio"]:checked + div.fakeField:before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--form-field-bg);
  border-radius: 50%;
}

div.inputGroup {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

div.inputGroup > .input {
  flex: 1 1 auto;
  width: auto;
}

div.inputGroup > .append,
div.inputGroup > .prepend
{
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--large-button-fg);
  background: var(--large-button-bg);
  transition: all 0.2s ease-in;
}

div.inputGroup > .append > a,
div.inputGroup > .prepend > a {
  color: var(--large-button-fg);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.inputGroup > .append:has(> a):hover,
div.inputGroup > .prepend:has(> a):hover {
  background: var(--large-button-bg-hover);
}

div.inputGroup > .append {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
div.inputGroup > .prepend {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
div.inputGroup > *:has(+.append) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
div.inputGroup > .prepend + * {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}



div.showMode .empty:after {
  content: '\2014';
}


form[data-showMode='1'] div.field,
form.formInColumn div.field,
.formFieldsWithHeader .formFieldsHeader {
  display: grid;
  grid-template-columns: 40% auto;
  gap: 1ex;
}

form[data-showMode='1'] div.field label {
  grid-column: 1/2;
}

form[data-showMode='1'] div.field div.showMode {
  grid-column: 2/2;
}

form.formInColumn div.field label {
  display: flex;
  align-items: center;
}

button.updateFormButton {
  font-family: "lato", "Arial", sans-serif;
  font-size: 0.875rem;
  user-select: none;
  cursor: pointer;
  display: inline-flex;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  line-height: 35px;
  color: var(--form-update-fg);
  background: var(--form-update-bg);
  border: 0px;
  margin-bottom: 3ex;
}

button.updateFormButton:hover,
button.updateFormButton:focus
{
  background: var(--form-update-bg-hover);
}

button.updateFormButton i {
  font-size: 0.875rem;
  padding-right: 1.5ex;
}

.field p.error {
  margin: 0px;
  margin-top: .7ex;
  color: var(--error);
}

form[data-showMode='0'] .onlyShowMode {
  display: none;
}

form[data-showMode='1'] .onlyEditMode {
  display: none;
}

/*
 * Special field form
 */
input[name="zipCode"],
input[name="birthPlaceZipCode"]
{
  width: 14ex;
}

form .field ul.listField
{
  margin: 0px;
  padding: 0px;
}

form .field ul.listField li
{
  margin: 0px;
  padding: 0px;
  display: block;
}

form div.field div.list {
  width: 40ex;
}

form div.field div.list button {
  width: 32px;
  padding: 0px;
}

form div.field div.list button i {
  font-size: 0.875rem;
}

form div.field div.list .listInput {
  display: grid;
  grid-template-columns: auto 32px;
  gap: 16px;
}

form div.field div.list div.listContainer {
  padding-top: 8px;
  display: grid;
  grid-template-columns: auto 32px;
  gap: 16px;
}

form div.field div.list select.list {
  height: 18ex;
}

form div.field div.list div.listContainer div.listButtons button {
  margin-bottom: 8px;
  height: 35px;
}



/*
 * New style list
 */
div.listInput-newStyle {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

div.listInput-newStyle div.item {
  border: 1px solid var(--dropdownMenu-border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

div.listInput-newStyle:not([data-reordering]) div.item div.reorder {
  display: none;
}

div.listInput-newStyle div.item > div.reorder:after {
  content: 'drag_indicator';
}

div.listInput-newStyle div.item > div.reorder {
  font-size: 1rem;
  font-family: 'Material Symbols Outlined';
  margin-left: 5px;
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

div.listInput-newStyle div.item > span {
  padding: 5px;
  flex: 1;
}

div.listInput-newStyle div.item > input {
  flex: 1;
}

div.listInput-newStyle div.item > .append {
  display: none;
}

div.listInput-newStyle div.item > .append .icon {
  font-size: 115%;
  margin-right: 7px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  vertical-align: middle;
}

div.listInput-newStyle div.item > .append .icon:hover {
  color: var(--error);
}

div.listInput-newStyle div.item:hover:not(:has(input)) > .append {
  display: block;
}

div.listInput-newStyle div.item:hover {
  background-color: var(--dropdownMenu-bg-hover);
}

div.listInput-newStyle + .addInput {
  margin-top: 7px;
  width: 100%;
}



/*
 * Tag style list
 */
form div.field.tagStyle div.list {
  width: auto;
}

div.listInput-tagStyle {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

div.listInput-tagStyle div.item {
  display: inline-flex;
  border: 1px solid lightgray;
  border-radius: 3px;
  padding: 3px 6px;
  align-items: center;
  gap: 5px;
}


div.listInput-tagStyle:has(+ select[data-isOrdered="1"]) div.item {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

div.listInput-tagStyle div.item > .append .icon {
  font-size: 115%;
  /* margin-right: 7px; */
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  vertical-align: middle;
}


div.listInput-tagStyle div.item > .append .icon:hover {
  color: var(--error);
}

div.listInput-tagStyle input.addInput {
  height: 3.9ex;
}



/*
 * Form fields header
 */
.formFieldsWithHeader {
  border-radius: 5px;
  border: 1px solid var(--form-fields-header-border);
  background-color: var(--form-fields-header-bg);
}

.formFieldsWithHeader .formFieldsHeader {
  padding: 16px 12px;
  font-weight: bold;
}

.formFieldsWithHeader .field {
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--white);
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 2px;
  margin-left: 2px;
  margin-right: 2px;
}



/*
 * Filter forms
*/
#filterFormContainer:has(.seeMoreFilters) {
  padding-bottom: 0px;
}

.filterForm fieldset,
.seeMoreFilters {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 16px;
}

.filterForm input
{
  width: 100%;
}

.filterForm .field {
  margin-bottom: 0px;
}

.moreFilters
{
  grid-column-end: span 12;
}

.filterForm a.seeMoreButton {
  /* grid-column-end: span 12; */
  padding: 12px;
  margin: 0px -16px -16px -16px;
  /* margin-top: 16px; */
  text-align: center;
  display: block;
  background: var(--form-seeMore-bg);
  color: var(--form-seeMore-fg);
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  font-size: 0.92rem;
}

.filterForm .seeMoreButton:hover,
.filterForm .seeMoreButton:focus
{
  background: var(--form-seeMore-bg-hover);
  color: var(--form-seeMore-fg-hover);
}

.filterForm .seeMoreButton i
{
  vertical-align: middle; 
}


/*
 * Fullscreen mode
*/
.fullscreenMode {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100dvh;
  z-index: 10;
}


/*
 * Toggle show/hide
 */
.toggleShowHide
{
  transition: height 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
  overflow: hidden;
  height: 0px;
  padding-bottom: 0px;
}

.toggleShowHide + a > i {
  transition: 0.3s ease-in-out;
}



/*
 * Tables
 */
table {
  width: 100%;
  border: 0px;
  border-collapse: collapse;
  border-spacing: 0px;
}

table th, table td {
  padding: 0.7em 1.0em;
  text-align: left;
}

table > thead {
  position: sticky;
  top: 0px;
}

.modalContent table > thead {
  top: -20px;
}

table > thead > tr {
  background-color: var(--table-header-bg);
  color: var(--table-header-fg);
  height: 40px;
  font-weight: 600;
  user-select: none;
}

table > tbody tr:nth-child(2n) {
  background-color: var(--table-body-evenRow-bg);
}

table > tbody tr:hover {
  user-select: none;
  cursor: pointer;
  transform: scale(1.01);
  box-shadow: 0px 0px 4px --var(--table-row-shadow-hover);
  border: none;
}

i.sort-icon {
  vertical-align: middle;
  padding-left: 3px;
}

div.paging-loading {
  text-align: center;
}
div.paging-loading > img {
  height: 32px;
}

i.sort-icon .asc-icon,
i.sort-icon .desc-icon {
  opacity: 0.5;
}

.sort-desc i.sort-icon .desc-icon,
.sort-asc i.sort-icon .asc-icon
{
  opacity: 1 !important;
}


/*
 * Lists
 */
ul.largeClickableItems {
  list-style: none;
  margin: 0px 10px;
  padding: 0px;
  display: flex;
  gap: 8px;
  flex-direction: column;
}

ul.largeClickableItems:not(:last-child) {
  margin-bottom: 32px;
}

ul.largeClickableItems > li:has(> a),
ul.blockRowClickableItems > li:has(> a) {
  border: 1px solid var(--large-list-border);
  border-radius: 5px;
  padding: 0px;
  background: var(--large-list-bg);
  color: var(--large-list-fg);
}

ul.largeClickableItems > li > a,
ul.blockRowClickableItems > li > a {
  display: flex;
  padding: 15px;
  border-radius: 5px;
  color: var(--large-list-fg);
  transition: 0.2s ease-in-out;
  align-items: center;
}

ul.blockRowClickableItems > li > a {
  flex-direction: column;
}


ul.largeClickableItems > li.selected,
ul.blockRowClickableItems > li.selected {
  border: 2px solid var(--large-list-selected-bg);
  position: relative;
}

ul.largeClickableItems > li.selected:after,
ul.blockRowClickableItems > li.selected:after {
  content: "check";
  font-family: 'Material Symbols Outlined';
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--large-list-selected-bg);
  color: var(--large-list-selected-fg);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

ul.largeClickableItems > li.selected:after {
  top: calc(50% - 9px);

}

ul.largeClickableItems > li > a:hover,
ul.blockRowClickableItems > li > a:hover {
  background: var(--large-list-bg-hover);
}

ul.largeClickableItems > li > a:after {
  text-align: right;
  flex: 1;
  content: 'arrow_forward_ios';
  font-size: 1.5rem;
  font-family: 'Material Symbols Outlined';
}

ul.largeClickableItems.noIcon > li > a:after {
  content: '' !important;
}

ul.largeClickableItems.addIcon > li > a:after {
  content: 'add' !important;
}

ul.largeClickableItems.deleteIcon > li > a:after {
  content: 'delete' !important;
}

ul.largeClickableItems.saveIcon > li > a:after {
  content: 'save' !important;
}



dl:has(> dt) {
  display: grid;
  grid-template-columns: 40% auto;
  gap: 1ex;
  grid-auto-flow: row;
}

dl > dt {
  font-size: 0.875rem;
  padding-bottom: 8px;
  font-size: 0.875rem;
  color: var(--form-label);
  display: block;
  text-align: left;
  grid-column: 1/2;
} 

dl > dd {
  grid-column: 2/2;
} 


ul.blockRowClickableItems {
  list-style: none;
  margin: 0px 10px;
  padding: 0px;
  display: flex;
  gap: 8px;
  flex-direction: row;
}

ul.blockRowClickableItems > li:has(> a) {
  border: 1px solid var(--large-list-border);
  border-radius: 5px;
  padding: 0px;
  background: var(--large-list-bg);
  color: var(--large-list-fg);
}



/*
 * Grouped lists
 */
a.button.groupedList-paging {
  color: var(--groupedList-pagingBtn-fg);
  background: var(--groupedList-pagingBtn-bg);
  border: 1px solid var(--groupedList-pagingBtn-border);
}
a.button.groupedList-paging:hover {
  background: var(--groupedList-pagingBtn-bg-hover);
  border-color: var(--groupedList-pagingBtn-bg-hover);
  color: var(--groupedList-pagingBtn-fg-hover);
}

ul.largeClickableItems + a.button.groupedList-paging {
  width: 100%;
  display: flex;
  justify-content: center;
}



/*
 * Dropdown menu
 */
.dropdownMenu {
  position: absolute;
  display: none;
  background: var(--dropdownMenu-bg);
  color: var(--dropdownMenu-fg);
  border: 1px solid var(--dropdownMenu-border);
  box-shadow: 0 2px 6px var(--dropdownMenu-shadow);
  z-index: 1000;
}

.dropdownMenu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1ex;
  margin: 0;
  padding: 0px;
  /* padding: 5px 0; */
}

.dropdownMenu li {
  padding: 8px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 1ex;
}

.dropdownMenu li:hover {
  background-color: var(--dropdownMenu-bg-hover);
}

.dropdownMenu li.separator {
  margin: 2px 12px;
  padding: 0px;
  border-top: 1px solid var(--dropdownMenu-separator);
}

.dropdownMenu li.separator:hover {
  background-color: none;
}



/*
 * Toggle switch
 */
.toggleSwitch {
  /* --fs: 15px; */
  --pad: 5px;
  --gap: 8px;
  display: inline-block;
  /* font-size: var(--fs); */
  /* font-family: sans-serif; */
  cursor: pointer;
  user-select: none;
} 

.toggleSwitch input {
  display: none;
}

.toggleSwitch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: var(--pad);
  background: linear-gradient(145deg, #e74c3c, #c0392b);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.38),
    inset 0 1px 2px rgba(0,0,0,0.22),
    0 1px 0 rgba(255,255,255,0.12);
  transition: background 0.3s ease;
  box-sizing: border-box;
}

.toggleSwitch input:checked ~ .toggleSwitch-track {
  background: linear-gradient(145deg, #2ecc71, #27ae60);
}

.toggleSwitch-thumb {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  width: 1em;
  height: 1em;
  border-radius: 50%;
  /* background: #fff; */
  /* box-shadow: */
  /*   0 2px 5px rgba(0,0,0,0.32), */
  /*   0 1px 2px rgba(0,0,0,0.18), */
  /*   inset 0 1px 0 rgba(255,255,255,0.9), */
  /*   inset 0 -1px 0 rgba(0,0,0,0.08); */
  background: linear-gradient(145deg, #ffffff, #dcdcdc);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.3),
    inset 0 -2px 3px rgba(0,0,0,0.2);
    /* box-shadow:  */
    /*   0 4px 8px rgba(0,0,0,0.3), */
    /*   inset 0 2px 4px rgba(255,255,255,0.8); */
  transition: left 0.3s cubic-bezier(0.4,0,0.2,1);
}

.toggleSwitch input:checked ~ .toggleSwitch-track .toggleSwitch-thumb {
  left: auto;
  right: var(--pad);
}

.toggleSwitch-labels {
  display: grid;
  grid-template-areas: "cell";
  margin-left: calc(1em + var(--gap));
  margin-right: var(--gap);
}

.toggleSwitch-labels span {
  grid-area: cell;
  /* font-size: var(--fs); */
  font-weight: bold;
  white-space: nowrap;
  color: white;
  line-height: 1em;
  text-align: center;
  transition: opacity 0.3s ease;
}

.toggleSwitch-off {
  opacity: 1;
}

.toggleSwitch-on {
  opacity: 0;
}

.toggleSwitch input:checked ~ .toggleSwitch-track .toggleSwitch-off {
  opacity: 0;
}

.toggleSwitch input:checked ~ .toggleSwitch-track .toggleSwitch-on {
  opacity: 1;
}

.toggleSwitch-labels {
  margin-left: calc(1em + var(--gap));
  margin-right: var(--gap);
  transition: margin 0.3s ease;
}

.toggleSwitch input:checked ~ .toggleSwitch-track .toggleSwitch-labels {
  margin-left: var(--gap);
  margin-right: calc(1em + var(--gap));
}



/* width <= 1024 -- mobile or tablet devices */
@media screen and (max-width: 1024px) {
  body:not(.empty) {
    grid-template-columns: auto !important;
    grid-template-areas: 
      "header"
      "main" !important;
  }
  body {
    font-size: 0.875rem;
  }

  #menu {
    display: none;
  }

  #pageHeader {
    padding: 10px 15px 0px 15px;
  }

  .breadcrumb {
    font-size: 0.8125rem;
  }

  #content {
  --content-padding: 0px;
    padding: 0px;
  }


  /* 641 <= width <= 1024 -- Tablet device */
  @media screen and (min-width: 641px) {
    [data-hideOnDevice~="tablet"] {
      display: none !important;
    }

    [data-showOnDevice~="tablet"] {
      display: initial !important;
    }

    div.modal {
      top: 4%;
      right: 15%;
      left: 15%;
      bottom: 4%;
    }
    div.modal.modalSize-xs {
      right: 18%;
      left: 18%;
    }
    div.modal.modalSize-m {
      right: 12%;
      left: 12%;
    }
    div.modal.modalSize-l {
      right: 8%;
      left: 8%;
    }


    /* .gridRow { */
    /*   display: grid; */
    /*   grid-template-columns: repeat(2, 1fr); */
    /*   gap: 16px; */
    /* } */
    /**/
    /* .grid-2, */
    /* .grid-4, */
    /* .grid-8{ */
    /*   grid-column-end: span 12; */
    /**/
    /* } */
    /* .grid-3, */
    /* .grid-4, */
    /* .grid-5, */
    /* .grid-6, */
    /* .grid-7, */
    /* .grid-8, */
    /* .grid-9, */
    /* .grid-10, */
    /* .grid-11, */
    /* .grid-12 { */
    /*   grid-column-end: span 12; */
    /* } */
  }


  /* width <= 640 -- Mobile device */
  @media screen and (max-width: 640px) {
    [data-hideOnDevice~="phone"] {
      display: none !important;
    }

    [data-showOnDevice~="phone"] {
      display: initial !important;
    }

    #header .logo {
      flex: auto;
    }

    #header .searchBar {
      display: none;
    }

    .button {
      padding: 0 8px;
    }
    .button > .icon + span:not(.pastille) {
      display: none;
    }

    .button > .icon {
      margin-left: 5px !important;
      margin-right: 5px !important;
    }

    #pageTitleBlock h1 {
      font-size: 1.625rem;
    }
    #pageTitleBlock h2 {
      font-size: 1.125rem;
    }

    div.modal {
      display: grid;
      /* width: 100%; */
      grid-template-columns: 100%;
      grid-template-rows: min-content auto min-content;
      grid-template-areas:
        "modalHeader"
        "modalContent"
        "modalBottom";
      right: 0 !important;
      left: 0 !important;
      top: 0;
      bottom: 0;
      border-radius: 0;
    }

    div.modal > form {
      grid-area: modalContent;
      display: grid;
      /* width: 100%; */
      grid-template-columns: 100%;
      grid-template-rows: auto min-content;
      grid-template-areas:
        "modalContent"
        "modalBottom";
      max-height: calc(100svh - 54.75px);
    }

    div.modalTitle {
      border-radius: 0;
      grid-area: modalHeader;
    }

    div.modalContent {
      grid-area: modalContent;
    }

    div.modalBottom {
      grid-area: modalBottom;
    }

    div.modalContent {
      max-height: initial;
    }

    div.field {
      display: block;
    }

    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6,
    .grid-7,
    .grid-8,
    .grid-9,
    .grid-10,
    .grid-11,
    .grid-12 {
      grid-column-end: span 12;
    }
  }
}

/*
 * Special render for login webpage
 */
#login {
  display: flex;
  min-height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#login fieldset{
  border-radius: 10px;
  border: 0px;
  padding: 32px;
  background-color: white;
}

#login input[type='password'],
#login input[type='text']
{
  width: 40ex;
  background-color: #F2F2F2;
}



/*
 * Configuration panel
 */
/* #configurationPanel { */
/*   display: flex; */
/*   min-height: 80%; */
/*   border-radius: 10px; */
/*   background: white; */
/*   height: 70svh; */
/*   margin: 0px 10px; */
/* } */
/**/
/* #configurationPanel > .verticalMenu { */
/*   background-color: var(--primary-color-dark); */
/*   width: 25ex; */
/*   border-top-left-radius: 10px; */
/*   border-bottom-left-radius: 10px; */
/*   overflow: auto; */
/*   padding: 10px 0px 10px 10px; */
/* } */
/**/
/* #configurationPanel > .verticalMenu + .verticalMenu { */
/*   background-color: var(--primary-color); */
/*   border-radius: 0px; */
/* } */
/**/
/* #configurationPanel > .verticalMenu ul { */
/*   list-style: none; */
/*   margin: 0px; */
/*   padding: 0px; */
/*   display: flex; */
/*   gap: 8px; */
/*   flex-direction: column; */
/* } */
/**/
/* #configurationPanel > .verticalMenu ul li { */
/*   margin: 0px; */
/*   padding: 0px; */
/* } */
/**/
/* #configurationPanel > .verticalMenu ul li.selected { */
/*   border-right: 3px solid red; */
/* } */
/**/
/* #configurationPanel > .verticalMenu ul li i { */
/*   margin-right: 2ex; */
/* } */
/**/
/* #configurationPanel > .verticalMenu ul li a { */
/*   color: white; */
/*   padding: 2ex 1ex 2ex 2ex; */
/*   display: block; */
/*   min-height: 2.5ex; */
/*   transition: 0.2s ease-in-out; */
/*   border-top-left-radius: 10px; */
/*   border-bottom-left-radius: 10px; */
/* } */
/**/
/* #configurationPanel > .verticalMenu ul li a:hover, */
/* #configurationPanel > .verticalMenu ul li.selected a { */
/*   color: var(--black); */
/*   background-color: white; */
/* } */
/**/
/* #mainConfigPanel { */
/*   overflow: auto; */
/*   padding: 2ex; */
/*   width: 100%; */
/* } */
/**/
/* #configPanelHeader { */
/*   margin-top: 2ex; */
/*   margin-bottom: 6ex; */
/*   display: flex; */
/*   width: 100%; */
/* } */
/**/
/* #configPanelHeader .buttonsList.onRight { */
/*   display: flex; */
/*   justify-content: flex-end; */
/*   flex-grow: 1; */
/*   align-items: flex-start; */
/* } */
/**/
/* #configPanelTitleContainer h1 { */
/*   font-family: "cabin", "Arial", sans-serif; */
/*   margin: 0px; */
/*   font-size: 1.772rem; */
/* } */
/**/
/* #configPanelTitleContainer h2 { */
/*   font-family: "cabin", "Arial", sans-serif; */
/*   font-weight: normal; */
/*   font-size: 1.227rem; */
/*   margin: 8px 0px 0px 0px; */
/* } */



/*
 * Rights configuration panel
 */
div.step {
  border: 1px solid var(--dropdownMenu-border);
  border-radius: 5px;
  background: var(--dark-white);
  padding: 15px;
}

div.step h5 {
  margin: 0px;
  padding: 0px;
  font-size: 110%;
  margin-bottom: 8px;
}

#rightsConfig-listOfActivities {
  margin-top: 18px;
  font-size: 110%;
}

#rightsConfig-listOfActivities li a {
  padding-top: 23px;
  font-weight: bold;
}

#rightsConfig-listOfActivities .toggleSwitch {
  margin-top: 24px;
  font-size: 85%;
}

#rightsConfig-modulesAndPerm {
  display: grid;
  margin-top: 2ex;
  grid-template-columns: 400px auto;
  gap: 2ex;
}

#rightsConfig-listOfModules {
  margin-top: 18px;
}


#rightsConfig-listOfModules li:not(:has(a)) {
  font-style: italic;
}

#rightsConfig-listOfModules li a {
  font-weight: bold;
  font-size: 110%;
  display: block;
}

#rightsConfig-listOfModules li a > div {
  display: flex;
  justify-content: space-between;
}

#rightsConfig-listOfModules li a > div > div {
  display: flex;
  align-items: center;
}

#rightsConfig-listOfModules li a i {
  margin-right: 6px;
}

#rightsConfig-listOfModules .toggleSwitch {
  margin-right: 10px;
  font-size: 85%;
}

#rightsConfig-permissions p {
  margin-top: 18px;
  font-style: italic;
  margin-left: 10px;
}

#form-rightsForm {
  margin-top: 18px;
}

#form-rightsForm .rightForAdmin {
  background-color: var(--warning-light);
}
/*
 * Notification icon
 */
#notificationButton {
  position: relative;
}

.pastille {
  width: auto;
  position: absolute;
  border-radius: 50%;
  z-index: 2;
  overflow: hidden;
  background: var(--black);
  font-size: 0.8rem;
  padding: .3ex .8ex;
}

.pastille.notificationsNr {
  background: var(--secondary-color);
  color: var(--on-secondary-color);
  bottom: 4ex;
  left: 5ex;
}

.pastille.pendingActionNr {
  background: var(--error);
  color: var(--on-error);
  bottom: 4ex;
  right: 5ex;
}



/*
 * Notification panel
 */
.notificationsPanel {
  --panel-width: 460px;

  position:absolute;
  top: 60px;
  right: 0;
  width: var(--panel-width);
  max-height:500px;
  background: var(--white);
  border-radius: 10px;
  box-shadow:0 5px 20px rgba(0,0,0,.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: .25s;
  z-index: 999;
}

.notificationsPanel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media screen and (max-width: 640px) {
  .notificationsPanel {
      --panel-width: 100vw;

      position: fixed;
      top: var(--header-height);
      right: 0;
      height: calc(100vh - var(--header-height));
      max-height: none;
      border-radius: 0;
      transform: translateX(105%);
      opacity: 1;
      visibility: visible;
  }

  .notificationsPanel.open{
    transform: translateX(0);
  }
}



/*
 * Notification loading
 */
#notifications .notificationLoading {
  display: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8000;
  background: rgba(0, 0, 0, 0.3);
}

#notifications .notificationLoading .loader-icon {
  margin-top: 5ex;
  margin-bottom: 5ex;
  width: 6ex;
}



/*
 * Notification title
 */
.notificationBlock h5 {
  width: 100%;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  margin: 0px;
  padding: 2ex;
  border-bottom: 1px solid var(--form-title-border);
}

.notificationBlock h5 .number:not(:empty) {
  border-radius: 50%;
  padding: 0.5ex 1.2ex;
  margin-left: 1ex;
  font-size: 0.875rem;
}

.notificationBlock.notifications h5 .number {
  background-color: color-mix(in oklab, var(--white) 80%, var(--secondary-color));
  color: var(--secondary-color);
}

.notificationBlock.pendingActions h5 .number {
  background-color: color-mix(in oklab, var(--white) 80%, var(--error));
  color: var(--error);
}

.notificationBlock h5 .seeMore {
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: normal;
}

.notificationBlock h5 .seeMore a,
.notificationBlock h5 .seeMore a:visited {
  color: var(--primary-color-dark);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.notificationBlock h5 .seeMore a:hover {
  color: var(--primary-color);
}


/*
 * Notification list
 */

.notificationsList {
  display: flex;
  flex-direction: column;
  gap: 1ex;
  list-style: none;
  margin: 0px;
  padding: 1ex;
}

.notificationEntry {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  grid-template-rows: auto 1fr;
  width: 100%;
  padding: 1ex;
}

.notificationEntry:has(.notificationNotSeen) {
  background-color: color-mix(in oklab, var(--dark-white) 50%, var(--white));
  border-radius: 5px;
}

/* Icon */
.notificationIcon {
  margin-right: 1.5ex;
  grid-column: 1;
  grid-row: 1 / span 2;
}

.notificationIcon i.icon {
  font-size: 2rem;
  border-radius: 50%;
  background-color: color-mix(in oklab, var(--white) 75%, var(--primary-color));
  color: var(--primary-color);
  padding: .35ex;
}

/* Content */
.notificationEntry h6 {
  font-size: 1rem;
  margin: 0px;
  margin-bottom: .5ex;
  padding: 0px;
  grid-column: 2;
  grid-row: 1;
}

.notificationContent {
  grid-column: 2 / 4;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 3ex;
}

.notificationContent > p {
  margin: 0px;
  padding: 0px;
}

.notificationContent .notificationNotSeen {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  font-size: 1rem;
  text-align: right;
}

.notificationDate {
  font-size: 0.84rem;
  color: var(--light-black);
  grid-column: 3;
  grid-row: 1;
  text-align: right;
}

.notificationAuthor {
  grid-row: 3;
  grid-column: 2/4;
  text-align: right;
  font-style: italic;
  font-size: 0.875rem;
  margin-top: 1ex;
}

.notificationButtons {
  margin-left: calc(1ex + 48px);
  margin-bottom: 1ex;
  display: inline-flex;
  gap: 1ex;
  font-size: 0.85rem;
}

.notificationButtons > .button > i {
  font-size: 1.2rem;
}

.notificationEntry .notificationContent:has(.notificationNotSeen) + .notificationDate::after {
  content: '•';
  margin-left: .9ex;
  margin-right: .4ex;
  font-size: 1rem;
}

.notifications .notificationNotSeen,
.notifications .notificationContent:has(.notificationNotSeen) + .notificationDate::after
{
  color: var(--secondary-color-dark);
}

.notifications .notificationNotSeen:hover {
  color: var(--secondary-color);
}


/*
 * Notification configuration panel
 */

#notificationsConfig-listOfActivities {
  margin-top: 18px;
  font-size: 110%;
}

#notificationsConfig-listOfActivities li a {
  padding-top: 23px;
  font-weight: bold;
}

#notificationsConfig-modulesAndNotif {
  display: grid;
  margin-top: 2ex;
  grid-template-columns: 400px auto;
  gap: 2ex;
}

#notificationsConfig-listOfModules {
  margin-top: 18px;
}


#notificationsConfig-listOfModules li:not(:has(a)) {
  font-style: italic;
}

#notificationsConfig-listOfModules li a {
  font-weight: bold;
  font-size: 110%;
  display: block;
}

#notificationsConfig-listOfModules li a > div {
  display: flex;
  justify-content: space-between;
}

#notificationsConfig-listOfModules li a > div > div {
  display: flex;
  align-items: center;
}

#notificationsConfig-listOfModules li a i {
  margin-right: 6px;
}

#notificationsConfig-permissions p {
  margin-top: 18px;
  font-style: italic;
  margin-left: 10px;
}

#form-notificationsForm {
  margin-top: 18px;
}

@media screen and (max-width: 640px) {
  #content:has(#notificationsConfig-modulesAndNotif) {
    padding: 2ex;
  }
  #notificationsConfig-modulesAndNotif {
    grid-template-columns: auto;
    gap: 2ex;
  }
}
:root {
  --operations-myInterventions-bg: color-mix(in oklab, var(--main-bg) 96%, var(--main-fg));
  --operations-myInterventions-shadow: color-mix(in oklab, var(--main-bg) 80%, var(--main-fg));
  --operations-myInterventions-rules: color-mix(in oklab, var(--main-bg) 75%, var(--main-fg));
  --operations-myInterventions-timeline: color-mix(in oklab, var(--main-bg) 45%, var(--main-fg));
  --operations-regulationCenter-hover: color-mix(in oklab, var(--main-bg) 92%, var(--main-fg));
  --operations-regulationCenter-rule: color-mix(in oklab, var(--main-bg) 85%, var(--main-fg));
  --operations-resourceState-notified-fg: var(--primary-color-dark);
  --operations-resourceState-notified-bg: oklch(from var(--primary-color) 98% c h);
  --operations-resourceState-inTransit-fg: var(--secondary-color-dark);
  --operations-resourceState-inTransit-bg: oklch(from var(--secondary-color) 98% c h);
  --operations-resourceState-onAssignment-fg: var(--tertiary-color-dark);
  --operations-resourceState-onAssignment-bg: oklch(from var(--tertiary-color) 98% c h);
  --operations-resourceState-transfering-fg: var(--quaternary-color-dark);
  --operations-resourceState-transfering-bg: oklch(from var(--quaternary-color) 98% c h);
  --operations-resourceState-available-fg: var(--quinary-color-dark);
  --operations-resourceState-available-bg: oklch(from var(--quinary-color) 98% c h);
}

.operationsEventListIcon {
  max-width: 48px;
  max-height: 48px;
}

.operationsEventListIconContainer {
  display: inline-flex;
  align-items: center;
  gap: .7ex;
}

#operationsRegulationCenter {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 5ex repeat(6, minmax(0, 1fr));
  gap: 1.5ex;
  height: 75dvh;
}

.fullscreenMode #operationsRegulationCenter {
  grid-template-columns: 1.7fr 1.7fr 1.7fr 1.7fr 1fr 1fr;
  grid-template-rows: 5ex repeat(4, minmax(0, 1.5fr)) repeat(2, minmax(0, 1fr));
  height: calc(100dvh - 2 * var(--content-padding));
}


/*
 * Badges
 */
.operationsBadge {
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  color: var(--on-primary-color);
}

.operationsBadge .label {
  position: relative;
  flex: 1;
  background: var(--primary-color);
  display: flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 20px;
  justify-content: center;
  font-weight: bold;
}

.operationsBadge .label::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 20px;
  height: 100%;
  background: var(--primary-color-dark);
  transform: skewX(-25deg);
  transform-origin: top;
  z-index: 1;
}

.operationsBadge .number {
  position: relative;
  z-index: 2;
  background: var(--primary-color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  padding-right: 15px;
  padding-left: 10px;
}

#operationsNCurrentInterventions {
  grid-row: 1;
  grid-column: 1;
}
#operationsNCurrentInterventions .label {
  background: var(--tertiary-color);
}
#operationsNCurrentInterventions .label::after {
  background: var(--tertiary-color-dark);
}
#operationsNCurrentInterventions .number {
  background: var(--tertiary-color-dark);
}

#operationsNTotalInterventions {
  grid-row: 1;
  grid-column: 2;
}
#operationsNTotalInterventions .label {
  background: var(--quaternary-color);
}
#operationsNTotalInterventions .label::after {
  background: var(--quaternary-color-dark);
}
#operationsNTotalInterventions .number {
  background: var(--quaternary-color-dark);
}

#operationsNAbsoluteEmergency {
  grid-row: 1;
  grid-column: 3;
}
#operationsNAbsoluteEmergency .label {
  background: var(--quinary-color);
}
#operationsNAbsoluteEmergency .label::after {
  background: var(--quinary-color-dark);
}
#operationsNAbsoluteEmergency .number {
  background: var(--quinary-color-dark);
}

#operationsWSState {
  grid-row: 1;
  grid-column: 6;
}


/*
 * WS connection
 */
#operationsWSState {
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

#operationsWSState .ifOffline,
#operationsWSState .ifOnline
{
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  color: var(--on-secondary-color);
  background: var(--secondary-color);
  align-items: center;
  justify-content: center;
  gap: 1ex;
  font-weight: bold;
  height: 100%;
  padding: 0px 2ex;
}

#operationsWSState .ifOnline {
  color: var(--on-secondary-color);
  background: var(--secondary-color);
}

#operationsWSState .ifOffline {
  color: var(--on-error);
  background: var(--error);
}

#operationsWSState[data-state="1"] .ifOffline,
#operationsWSState[data-state="0"] .ifOnline,
#operationsWSState[data-state=""] .ifOffline,
#operationsWSState[data-state=""] .ifOnline
{
  display: none;
}



/*
 * Ordering elements into the regulation room
 */
#operationsRegulationCenter .operationsRegulationBox {
  border: 1px solid var(--light-black);
  border-radius: 5px;
  background: var(--white);
  box-shadow: 0px 2px 5px var(--light-black);
  display: flex;
  flex-direction: column;
  height: 100%;
}

#operationsRegulationCenter .operationsRegulationBoxContent {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1ex;
}

#operationsRegulationCenter .operationsRegulationBox ul {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* gap: 2ex; */
}

#operationsRegulationCenter .operationsRegulationBox ul > li {
  border-bottom: 1px solid var(--operations-regulationCenter-rule);
  padding-bottom: 1ex;
  padding-top: 1ex;
}
#operationsRegulationCenter .operationsRegulationBox ul > li:first-child {
  padding-top: 0ex;
}
#operationsRegulationCenter .operationsRegulationBox ul > li:hover {
  background-color: var(--operations-regulationCenter-hover);
}
/* #operationsRegulationCenter .operationsRegulationBox ul > li:last-child { */
/*   padding-bottom: 0ex; */
/* } */

#operationsRegulationCenter .operationsRegulationBox h5 {
  padding: 1.5ex;
  margin: 0px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background: linear-gradient(to right, var(--primary-color), var(--primary-color-dark));
  color: var(--on-primary-color);
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 1ex;
}

#operationsRegulationCenter div.operationsMap {
  border: 1px solid var(--light-black);
  border-radius: 5px;
  grid-row: 2/6;
  grid-column: 1/5;
}

#operationsLastActions {
  grid-row: 2/5;
  grid-column: 5/7;
}

#operationsCurrentInterventions {
  grid-row: 5/8;
  grid-column: 5/7;
}

#operationsAvailableResources {
  grid-row: 6/8;
  grid-column: 1/3;
}

#operationsOtherResources {
  grid-row: 6/8;
  grid-column: 3/5;
}

#operationsRegulationCenter .resourceIcon img {
  max-width: 48px;
  max-height: 48px;
}



/*
 * Map
 */
#operationsRegulationCenter .vehicle-marker {
    background: none;
    border: none;
}

#operationsRegulationCenter .vehicle-marker-content {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

#operationsRegulationCenter .vehicle-marker-content img {
    width: 54px;
    /* max-height: 35px; */
    height: auto;
    display: block;
}

#operationsRegulationCenter .vehicle-marker-content span {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    text-shadow:
        -1px -1px 2px black,
         1px -1px 2px black,
        -1px  1px 2px black,
         1px  1px 2px black;
}


/*
 * Render current interventions box
 */
#operationsCurrentInterventions ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#operationsCurrentInterventions ul > li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1ex;
  /* margin: 1ex; */
}

#operationsCurrentInterventions .resourceIcon {
  grid-row: 1/3;
  grid-column: 1;
}

#operationsCurrentInterventions h6 {
  grid-row: 1;
  grid-column: 2;
  font-size: 1.12rem;
  margin: 0px;
  padding: 0px;
}

#operationsCurrentInterventions li[data-isAbsoluteEmergency="1"] h6::after {
  margin-left: .7ex;
  content: 'siren';
  color: var(--error);
  font-family: 'Material Symbols Outlined';
}

#operationsCurrentInterventions .resourceInfo {
  grid-row: 2;
  grid-column: 2;
  display: inline-flex;
}

#operationsCurrentInterventions .resourceState:before {
  content: ' - ';
}

#operationsCurrentInterventions .interventionSince {
  grid-row: 1/3;
  grid-column: 3;
}

#operationsCurrentInterventions .interventionSince {
  display: flex;
  align-items: center;
  gap: .5ex;
}
#operationsCurrentInterventions .interventionSince:before {
  content: 'schedule';
  font-family: 'Material Symbols Outlined';
}



/*
 * Render last action box
 */
#operationsLastActions ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#operationsLastActions ul > li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1ex;
  /* margin: 1ex; */
}

#operationsLastActions .lastActionTime {
  grid-row: 1/3;
  grid-column: 1;
  border-right: 3px solid var(--primary-color-dark);
  padding-right: 1ex;
}


#operationsLastActions .lastActionReason {
  grid-row: 2;
  grid-column: 2;
}

#operationsLastActions .resourceInfo {
  grid-row: 1;
  grid-column: 2;
  font-weight: bold;
}

#operationsLastActions .resourceName:after {
  content: ' -';
}

#operationsLastActions .resourceInfo {
  display: inline-flex;
  align-items: center;
  gap: .5ex;
}

#operationsLastActions .highlightNew {
  animation: operationsHighlightNew 10s ease-out;
}

@keyframes operationsHighlightNew {
  0% {color: inherit;}
  5% {color: var(--secondary-color);}
  65% {color: var(--secondary-color);}
  100% {color: inherit;}
}


/*
 * Render resources state box
 */
#operationsRegulationCenter div.operationsResourcesState ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#operationsRegulationCenter div.operationsResourcesState ul > li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1ex;
  /* margin: 1ex; */
}

#operationsRegulationCenter div.operationsResourcesState .resourceIcon {
  grid-row: 1/3;
  grid-column: 1;
}

#operationsRegulationCenter div.operationsResourcesState h6 {
  grid-row: 1;
  grid-column: 2;
  font-size: 1.12rem;
  margin: 0px;
  padding: 0px;
  display: inline-flex;
  justify-content: space-between;
}

#operationsRegulationCenter div.operationsResourcesState .resourceInfo {
  grid-row: 2;
  grid-column: 2;
  display: inline-flex;
}

#operationsAvailableResources .resourceState {
  display: none;
}

#operationsAvailableResources .resourceSince,
#operationsOtherResources .resourceSince
{
  display: flex;
  align-items: center;
  gap: .5ex;
}
#operationsAvailableResources .resourceSince:before {
  content: 'schedule';
  font-family: 'Material Symbols Outlined';
}

#operationsOtherResources .resourceSince {
  margin-left: 2ex;
}
#operationsOtherResources .resourceSince:before {
  content: 'schedule';
  font-family: 'Material Symbols Outlined';
}


#operationsRegulationCenter div.resourceGenericState {
  padding: .5ex 2ex;
  text-align: center;
  border-radius: 15px;
  font-size: .825rem;
}

#operationsRegulationCenter div.resourceGenericState.notified {
  color: var(--operations-resourceState-notified-fg);
  border: 1px solid var(--operations-resourceState-notified-fg);
  background: var(--operations-resourceState-notified-bg);
}
#operationsRegulationCenter div.resourceGenericState.inTransit {
  color: var(--operations-resourceState-inTransit-fg);
  border: 1px solid var(--operations-resourceState-inTransit-fg);
  background: var(--operations-resourceState-inTransit-bg);
}
#operationsRegulationCenter div.resourceGenericState.onAssignment {
  color: var(--operations-resourceState-onAssignment-fg);
  border: 1px solid var(--operations-resourceState-onAssignment-fg);
  background: var(--operations-resourceState-onAssignment-bg);
}
#operationsRegulationCenter div.resourceGenericState.transfering {
  color: var(--operations-resourceState-transfering-fg);
  border: 1px solid var(--operations-resourceState-transfering-fg);
  background: var(--operations-resourceState-transfering-bg);
}
#operationsRegulationCenter div.resourceGenericState.available {
  color: var(--operations-resourceState-available-fg);
  border: 1px solid var(--operations-resourceState-available-fg);
  background: var(--operations-resourceState-available-bg);
}



/*
 * Render my current interventions box
 */
#operationsMyCurrentInterventions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3ex;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.operationsTitleWithState {
  display: flex;
  justify-content: space-between;
}

.operationsTitleWithState #operationsWSState {
  height: auto;
  font-size: 1rem;
}

.operationsMyInterventions {
  background-color: var(--operations-myInterventions-bg);
  border-radius: 10px;
  padding: 2ex;
  display: grid;
  grid-template-columns: 1fr auto;
  border-left: 2px solid var(--warning);
  width: fit-content;
  box-shadow: 2px 2px 7px 0px var(--operations-myInterventions-shadow);
}

.operationsMyInterventions[data-isAbsoluteEmergency='1'] {
  border-left: 2px solid var(--error);
}

.operationsSummary {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 1ex;
  column-gap: 2ex;
  align-items: center;
  border-right: 1px solid var(--operations-myInterventions-rules);
}

.operationsSummary .emergencyState {
  grid-column: 1/3;
  margin-right: 2ex;
}

.operationsSummary .emergencyState div {
  display: inline-block;
  border-radius: 3px;
  color: var(--on-warning);
  border: 1px solid var(--warning);
  background-color: var(--warning-light);
  padding: 1ex 3ex;
  font-weight: bold;
}

.operationsMyInterventions[data-isAbsoluteEmergency='1'] .emergencyState div {
  color: var(--on-error);
  border: 1px solid var(--error);
  background-color: var(--error-light);
}

.operationsSummary .emergencyState div span {
  display: none;
}
.operationsMyInterventions[data-isAbsoluteEmergency=''] .emergencyState .unknownEmergency,
.operationsMyInterventions[data-isAbsoluteEmergency='0'] .emergencyState .relativeEmergency,
.operationsMyInterventions[data-isAbsoluteEmergency='1'] .emergencyState .absoluteEmergency
{
  display: inline;
}

.operationsSummary .summaryEntry {
  display: contents;
}

.operationsSummary .summaryEntry .unknownGender,
.operationsSummary .summaryEntry .isMale,
.operationsSummary .summaryEntry .isFemale {
  display: none;
}
.operationsMyInterventions[data-isMale=''] .summaryEntry .unknownGender,
.operationsMyInterventions[data-isMale='1'] .summaryEntry .isMale,
.operationsMyInterventions[data-isMale='0'] .summaryEntry .isFemale
{
  display: inline;
}



/*
 * Timeline
 */
.timeline {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  margin: 0 auto;
  padding: 0;
}

.timeline-item {
  display: contents;
}

.timeline-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--operations-myInterventions-rules);
  transform: translateX(-50%);
}

.timeline-item:first-child .timeline-marker::before {
  top: 50%;
}

.timeline-item:last-child .timeline-marker::before {
  bottom: 50%;
}

.timeline-dot {
  position: relative;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--operations-myInterventions-rules);
}

.timeline-content {
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-size: .875rem;
  /* line-height: 1.3; */
  color: var(--operations-myInterventions-timeline);
}

.timeline-time {
  display: flex;
  align-items: center;
  padding-left: 20px;
  white-space: nowrap;
  font-size: .835rem;
  font-weight: 500;
  color: var(--operations-myInterventions-timeline);
}

.timeline-item:not(:has(.timeline-time:empty)) .timeline-dot {
  background: var(--success);
}
.timeline-item:not(:has(.timeline-time:empty)) .timeline-content,
.timeline-item:not(:has(.timeline-time:empty)) .timeline-time {
  color: var(--success);
}
.timeline-item:not(:has(.timeline-time:empty)):not(:has(+ * .timeline-time:empty)) .timeline-dot {
  background: var(--error);
}
.timeline-item:not(:has(.timeline-time:empty)):not(:has(+ * .timeline-time:empty)) .timeline-content,
.timeline-item:not(:has(.timeline-time:empty)):not(:has(+ * .timeline-time:empty)) .timeline-time {
  color: var(--error);
}
.timeline-item:last-child:not(:has(.timeline-time:empty)) .timeline-dot {
  background: var(--success) !important;
}
.timeline-item:last-child:not(:has(.timeline-time:empty)) .timeline-content,
.timeline-item:last-child:not(:has(.timeline-time:empty)) .timeline-time {
  color: var(--success) !important;
}

/* Mobile */
@media screen and (max-width: 640px) {
    .operationsMyInterventions {
      width: calc(100% - 2ex);
      margin: 1ex;
    }

    .timeline {
        display: block;
        width: 100%;
    }

    .timeline-item {
        display: grid;
        grid-template-columns: 40px 1fr;
    }

    .timeline-marker {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .timeline-content {
        grid-column: 2;
        grid-row: 1;
    }

    .timeline-time {
        grid-column: 2;
        grid-row: 2;
        min-height: 0;
        padding-left: 10px;
        padding-bottom: 10px;
        justify-content: flex-start;
    }
}

/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	width:100%;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	user-select: none;
	-webkit-user-drag: none;
	}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}
.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
	}

.leaflet-container.leaflet-touch-zoom {
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	box-sizing: border-box;
	z-index: 800;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	transition: transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
/* prevent showing outline-box on Chromium when clicking on a vector with a tooltip */
path.leaflet-interactive:focus:not(:focus-visible) {
	outline: 0;
	}

.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url('img:/plugin/leaflet/layers.svg');
	width: 36px;
	height: 36px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-list {
	border: 0;
	margin: 0;
	padding: 0;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url('img:/plugin/leaflet/marker-icon.png');
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	margin-right: 0.277em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}