html, body {
   width:   100%;
   height:  100%;
   margin:  0;
   padding: 0;
}

/* theme */
:root {
   --zone_green:       #008000;
   --zone_orange:      #ff8c00;
   --zone_red:         #ff0000;
   --zone_fiolet:      #8000ff;

   --color_primary:    #bb0404;
   --color_alternate:  #005ca9;
   --color_accent:     #f37121;
   --color_light:      #ffbd69;
   --color_light_semi: #ffbd6966;

   --color_linestop_planned:   #6666ff;
   --color_linestop_unplanned: #ff6666;

   --color_primary_active:   #d00404;
   --color_alternate_active: #005ccc;
   --color_hover_background: #fadada;
}

.colorPrimary { color: var(--color_primary) }

.nnn_th        { width: 2ch; background-color: #ddd; text-align: center}
.nnn_th::after { content: "#" }

.nnn_wo_background,
.nnn {
   text-align: center;
   font-size: 75%;
}

.nnn_wo_background::after,
.nnn::after {
  content: "."
}

.nnn { background-color: #eee }

/* limit zone highlight */
.no_limits    { color: #777 }
.limit_zone_1 { color: var(--zone_green)  }
.limit_zone_2 { color: var(--zone_orange) }
.limit_zone_3 { color: var(--zone_red)    }
.limit_zone_4 { color: var(--zone_fiolet) }

.limit_zone_green  { color: var(--zone_green)  }
.limit_zone_orange { color: var(--zone_orange) }
.limit_zone_red    { color: var(--zone_red)    }
.limit_zone_fiolet { color: var(--zone_fiolet) }

/* tooltips */
.tooltip {
   position: relative;
   cursor:   pointer;
}

.tooltiptext {
   visibility: hidden;
   position:   absolute;
   background-color: #FFFFE0;
   border: 1px solid #aaa;
   border-radius: 5px;
   padding: 10px 20px;
   width: max-content;
   cursor: auto;
   box-shadow: 0px 0px 4px #222;
   color: black;
}

.tooltiptext input { font-size: 85% }

.invisible { visibility: hidden  !important }
.visible   { visibility: visible !important }
.hidden    { display:    none    !important }
.shown     { display:    block   !important }

@media (pointer: fine) {
  .tooltip:hover .tooltiptext {
     visibility: visible;
  }
}

/* ===== popup ===== */
.popup_background {
   display: none;
   z-index: 10;
   width:  100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background-color: rgba(22,22,22,0.5);
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
}

.popup_content {
   position: relative;
   width: fit-content;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 5px;
   background: white;
   -webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);
   -moz-box-shadow:0 0 10px rgba(0,0,0,0.4);
   box-shadow:0 0 10px rgba(0,0,0,0.4);

   box-sizing: border-box;
   max-height: 80vh;
   display: flex;
   flex-direction: column;
   padding: 20px;
}

.popup_content table { border-collapse: collapse }
/* .popup_content table td:nth-child(1)   { vertical-align: top }                                   - ? */
.popup_content table td:nth-child(n+2)    { padding-left: 7px }
.popup_content table tr:nth-child(n+2) td { padding-top:  7px }

.popup_content_no_flex {
   display: block;
   max-height: fit-content;
}

.popup_header {
   font-weight: bold;
   font-size: 105%;
   color: #bb0404;
   text-align: center;
   margin-bottom: 1rem;
   text-transform: uppercase;
   padding: 0 30px;
}

.popup_content_main {
   overflow-y: auto;
   scrollbar-width: thin;
   scroll-behavior: smooth;
   min-height: 30px;
}

.popup_footer {
   text-align: center;
   margin-top: 1rem;
}

.popup_footer .button { min-width: 70px; margin: 1.5px 0; padding: 0 1rem; line-height: 1.7rem }

.btn_close_popup {
   position: absolute;
   top: 0;
   right: 0;
   padding: 10px 15px;
   cursor: pointer;
   font-weight: bold;
   font-size: 20px;
   border-radius: 0 5px 0 5px;
}
.btn_close_popup:hover {background-color: #fadada; }

/* ===== elements ===== */
textarea { font-size: 1rem; padding-left: 0.3rem; padding-right: 0.3rem }

.icon_attachments {
   display: inline-block;
   width:   1.5rem;
   background: right / contain no-repeat url('/img/attachment.png');
}

.button_img_small_action {
   background: var(--color_primary) center no-repeat;
   height: 1.5rem;
   width:  1.5rem;
   padding: 0.3rem;
   background-size: contain;
   background-origin: content-box;
   box-sizing: border-box;
   border-radius: 3px;
   cursor: pointer;
}
.button_img_small_action:hover { background-color: var(--color_primary_active)   }

.highlight_red_border { border-color: red !important; outline-color: red !important }

#demo_mode {
   bottom: 0.4rem;
   display: block;
   position: fixed;
   width: 50px;
   right: 0.4rem;
   opacity: 0.3;
   z-index: 2;
   pointer-events: none;
}

.checkboxes {
   padding: 5px 10px;
   max-height: 300px;
   overflow-y: auto;
   margin-top: 3px;
}

.checkboxes input[type=checkbox] {
   margin-right: 10px;
   vertical-align: middle;
}

.checkboxes label {
   display: block;
   padding: 2px 2px;
}

.checkboxes label:hover { background-color: #1e90ff33 }

/* SELECT - MULTIPLE */
.popup_multi_select .element_checkboxes input[type=checkbox] {
   margin-right: 10px;
   vertical-align: middle;
}

.popup_multi_select .element_checkboxes label {
   display: block;
   padding: 2px 2px;
}

.popup_multi_select .element_checkboxes label:hover { background-color: #1e90ff33 }
.container-multiple-select .element_selected_list { overflow: auto }

.cell_flex .container-multiple-select { display: flex; gap: 7px }
.cell_flex .element_selected_list     { flex-grow: 1; width: 0; resize: none; white-space: pre }
.cell_flex .element_input             { flex-grow: 1; width: 0 }
.cell_flex .element_button_show_popup { height: fit-content }

/* === */
.hint {
   font-size: 0.9rem;
   color: #777;
}

a:link  { text-decoration: none      }
a:hover { text-decoration: underline }

.entries_count {
   color: #aaa;
   font-style: italic;
}
.entries_count span {font-weight: bold; margin-left: 5px}

.collapse_expand_v2 {
    border: 1px dashed #555;
    display: inline-block;
    border-radius: 3px;
    margin-right: 3px;
    width: 0.8rem;
    height: 0.8rem;
    text-align: center;
    user-select: none;
    cursor: pointer;
    color: #666;
    font-size: 0.5rem;
    transform: translate(0, 0.2rem);
    vertical-align: top;
    line-height: 0.8rem;
}
.collapse_expand_v2:hover { background-color: var(--color_hover_background) }

.icon_quick_chart {
   width: 32px;
   height: 32px;
   cursor: pointer;
   object-fit: contain;
   transition: transform .2s;
}
.icon_quick_chart:hover { transform: scale(1.10) }
td > .icon_quick_chart  { vertical-align: middle }

.no_value         { color: #aaa  }
.no_value::before { content: '–' }
.align_center { text-align: center }

/* dropdown animation */
.dropdown-container {
   z-index: 99999;
   position: absolute;
   opacity: 0;
   visibility: hidden;
   transform:  translateY(-10px);
   padding: 1rem 1rem;
   border: 1px solid #999;
   border-radius: 5px;
   background-color: white;
   scrollbar-width: thin;
   -webkit-box-shadow: 1px 1px 10px 1px #5c5c5c;
   box-shadow: 1px 1px 10px 1px #5c5c5c;
}

.dropdown-container.visible {
   opacity:    1;
   transform:  translateY(0);
   transition: all 300ms;
}

/* ===== Desktop ===== */
@media (pointer: fine) {
   .popup_footer .button { min-width: 100px; margin-left: 5px; margin-right: 5px }
   .visible_only_on_mobile { display: none !important}
}

/* ===== Mobile ===== */
@media (pointer: coarse) {
   .visible_only_on_desktop { display: none !important}
}