/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
   body .ui-igpopover > .ui-widget-content {
      background-color: #FFFBC8;
      border-color: #FFFBC8;
      font-size: 1rem;
   }
   body .ui-igpopover > .ui-igpopover-arrow-top {
      border-bottom-color: #FFFBC8;
   }
   .footer {
      /*position: absolute;
      bottom: 0;
      width: 100%;*/
      white-space: nowrap;
      /* Set the fixed height of the footer here */
      height: 41px;
      line-height: 40px; /* Vertically center the text there */
   }

.dropdown-menu a.inline-link {
   display: inline;
   padding: initial;
   clear: initial;
   font-weight: initial;
   line-height: initial;
   white-space: initial;
}

   .dropdown-menu a.inline-link:hover {
      text-decoration: underline;
   }

a.dropdown-toggle {
   text-decoration: none;
}

   a.dropdown-toggle:hover {
      text-decoration: underline;
   }

.pull-right .dropdown-menu a {
   text-decoration: none;
   color: #333333;
}

   .pull-right .dropdown-menu a:hover {
      text-decoration: underline;
   }

.dropdown .dropdown-menu-right {
   right: 0;
   left: auto;
}

.notificationspane-list {
   overflow: hidden;
   list-style: none;
   padding: 0;
   margin: 0;
   width: 100%;
}

#notification_container {
   width: 250px;
}

.notificationmenu-notification-li:last-child {
   border-bottom-width: 1px;
   border-bottom-style: solid;
}

.notificationmenu-notification-li {
   border-top-width: 1px;
   border-top-style: solid;
   border-color: rgba(204,204,204,.8);
   overflow: hidden;
   list-style: none;
   padding: 0;
   margin: 0;
   width: 100%;
}

.notificationmenu-notification-wrapper {
   padding: 10px 5px 10px 10px;
   display: flex;
   position: relative;
}

.notificationmenu-notification {
   width: 100%;
}

.notificationmenu-notification-title {
   display: flex;
   padding-bottom: 2px;
   max-width: calc(100% - 20px);
}

.notificationmenu-notification-description {
   font-size: 13px;
   line-height: normal;
   display: block;
   line-height: 18px;
   max-height: 144px;
   overflow: hidden;
   position: relative;
   padding-top: 5px;
   text-overflow: ellipsis;
   white-space: pre-wrap;
   width: 100%;
}

.notificationmenu-notification-dismissIcon {
   cursor: pointer;
   background-color: transparent;
   border: 0;
   margin: 0;
   padding: 0;
   height: 14px;
   width: 10px;
   opacity: .4;
   margin-left: 4px;
   padding-right: 15px;
   padding-bottom: 8px;
   flex: 0 0 auto;
   position: absolute;
   top: 8px;
   right: 0;
   opacity: 1;
}


.copycontainer:hover .copybutton, .copybutton:hover {
   display: inline-block;
}

#train_config .unit .selected {
   background-color: #ffc000;
   border: 2px solid #1c60dd;
   height: 29px !important;
   line-height: 1.3 !important;
}

#train_config .unit .vehicle-container .vehicle {
   width: 100%;
   text-align: center;
   height: 28px;
   line-height: 1.4;
}

#train_config .unit .vehicle-container .position {
   width: 100%;
   text-align: center;
   font-size: x-small;
   position: relative;
   top: -8px;
}

#train_config .unit {
   height: 100%;
   padding: 0 4px;
}

   #train_config .unit .vehicle-container .leading-indicator {
      background-color: #ffff00;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      left: -15px;
      border: 1px solid #000;
      position: absolute;
   }

   #train_config .unit .vehicle-container .trailing-indicator {
      background-color: #f00;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      right: -15px;
      border: 1px solid #000;
      position: absolute;
   }

   #train_config {
      padding-top: 22px;
   }

#train_config,
#train_config .unit {
   display: flex;
   flex-wrap: wrap;
}
#config_container {
   width: 100%;
   height: 66px;
   position: absolute;
   bottom: 40px;
   text-align: center;
}
#train_config {
   justify-content: flex-start;
   /*align-content: stretch;*/
   max-width: 1000px;
   width: 100%;
   height: 60px;
   position: relative;
   padding: 10px;
   margin: auto;
   flex-wrap: wrap;
}

   #train_config .unit {
      /*align-content: space-around;*/
      align-items: flex-start;
   }

      #train_config .unit,
      #train_config .unit .vehicle-container {
         position: relative;
      }

         #train_config div,
         #train_config .unit div {
            display: inline-block;
         }

         #train_config .unit .vehicle-container {
            width: 10%;
            min-width: 40px;
         }

         #train_config .unit .coupling {
            width: 14px;
            height: 2px;
            background: #000;
            vertical-align: top;
            position: relative;
            top: 12px;
         }

   #train_config .start-coupling {
      transform: rotate(-90deg);
      font-size: 20px;
      line-height: 36px;
      margin: 0 5px 0 -5px;
   }

   #train_config .end-coupling {
      transform: rotate(90deg);
      font-size: 20px;
      line-height: 36px;
      margin: 0 -5px 0 5px;
   }

   /*#train_config .unit .vehicle-container .vehicle::after {
   height: 2px;
   width: 20px;
   content: " ";
   background-color: #000;
   display: block;
   position: absolute;
   right: -10px;
   top: 50%;
}
#train_config .unit .vehicle-container .leading::before {
   height: 10px;
   width: 2px;
   content: " ";
   background-color: #000;
   display: block;
   position: absolute;
}
#train_config .unit .vehicle-container .leading::before(2) {
   height: 2px;
   width: 10px;
   content: " ";
   background-color: #000;
   display: block;
   position: absolute;
}
#train_config .unit .vehicle-container .trailing::after {
   height: 10px;
   width: 2px;
   content: " ";
   background-color: #000;
   display: block;
   position: absolute;
}
#train_config .unit .vehicle-container .trailing::after(2) {
   height: 2px;
   width: 10px;
   content: " ";
   background-color: #000;
   display: block;
   position: absolute;
}*/

   #train_config .unit .power-head {
      text-decoration: underline;
      font-weight: bold;
   }

#eventFilterCollapseBtn + .row {
   height: calc(100% - 210px);
   transition: height 0.35s;
}

#eventFilterCollapseBtn.expndedEvt + .row {
   height: calc(100% - 50px);
}

#selectFilterPrio .row {
   margin: 24px 0;
}

#eventFilterCollapseBtn b {
   display: block;
   transform: rotate(-90deg);
   transition: transform 0.35s;
}

#eventFilterCollapseBtn.expndedEvt b {
   transform: rotate(90deg);
}

#selectFilterPrio .row input {
   margin: 3px 6px;
   width: 20px;
   height: 20px;
   align-self: start;
}

#filterEvtCode,
#selectFilterSysTrain,
#selectFilterSysEam,
#filterGeoNameSelect {
   overflow: hidden;
   border: 0;
}

.hr-text {
   line-height: 1em;
   position: relative;
   outline: 0;
   border: 0;
   color: black;
   text-align: center;
   height: 1.5em;
   opacity: .5;
   margin: 0;
   overflow: visible;
}

   .hr-text:before {
      content: "";
      background: linear-gradient(to right, transparent, #818078, transparent);
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 1px;
   }

   .hr-text:after {
      content: attr(data-content);
      position: relative;
      display: inline-block;
      padding: 0 0.5em;
      line-height: 1.5em;
      color: #818078;
      background-color: #fcfcfa;
      top: -0.75em;
   }

.close-btn {
   width: 37px;
   height: 30px;
   padding: 6px;
   background: transparent;
   border: none;
   vertical-align: middle;
   position: relative;
   border-radius: 0 3px 0 0;
}

   .close-btn:hover::before {
      border-color: white;
   }

   .close-btn:hover::after {
      border-color: white;
   }

   .close-btn::before {
      content: "";
      position: absolute;
      width: 19px;
      height: 0;
      border: 1px;
      border-color: gray;
      border-radius: 2px;
      border-style: solid;
      transform: rotate(45deg);
      left: 8px;
      top: 13px;
   }

   .close-btn::after {
      content: "";
      position: absolute;
      width: 19px;
      height: 0;
      border: 1px;
      border-color: gray;
      border-radius: 2px;
      border-style: solid;
      transform: rotate(-45deg);
      left: 8px;
      top: 13px;
   }

   .close-btn:hover {
      background: red;
   }

.minmax {
   display: none;
}

   .minmax + label {
      width: 37px;
      height: 30px;
      padding: 7px;
      display: inline-block;
      margin: 0;
      vertical-align: middle;
   }

      .minmax + label:hover {
         background: lightgray;
      }

      .minmax + label::after {
         content: "";
         position: absolute;
         width: 19px;
         height: 15px;
         border-width: 2px 1px 1px 1px;
         border-color: gray;
         border-radius: 2px;
         border-style: solid;
         transition: all 0.35s;
      }

   .minmax:checked + label::after {
      transform: translateY(8px);
      height: 0;
      border-width: 2px 1px 1px 1px;
   }

.left-tabs.sideways-tabs, .right-tabs.sideways-tabs {
   margin-top: 2rem;
   border: none;
   position: relative;
   margin-bottom: 0
}

.left-tabs.nav-tabs, .right-tabs.nav-tabs, .left-tabs.sideways-tabs, .right-tabs.sideways-tabs {
   height: 100%;
   flex-direction: column
}

.left-tabs.nav-tabs {
   border-right: 1px solid #dee2e6;
   border-bottom: none
}

.left-tabs .nav-link {
   border-top-left-radius: .25rem;
   border-bottom-left-radius: .25rem;
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
   margin-right: -1px;
   text-align: left
}

.tab-content .left-tabs .nav-link.active {
   background-color: white;
   border-top: 3px solid orange;
   border-right: 1px solid #dee2e6;
   border-bottom: 1px solid transparent;
   border-left: 1px solid #dee2e6;
}

   .left-tabs .nav-link:hover {
      border-right: 1px solid transparent
   }

.left-tabs .nav-item.active .nav-link {
   border-top: 1px solid #dee2e6;
   border-right: 1px solid transparent;
   border-bottom: 1px solid #dee2e6;
   border-left: 1px solid #dee2e6
}

.right-tabs.nav-tabs {
   border-left: 1px solid #dee2e6;
   border-bottom: none
}

.right-tabs .nav-link {
   border-top-right-radius: .25rem;
   border-bottom-right-radius: .25rem;
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
   margin-left: -1px;
   text-align: right
}

   .right-tabs .nav-link:hover {
      border-left: 1px solid transparent
   }

   .right-tabs .nav-link.active {
      border-top: 1px solid #dee2e6;
      border-right: 1px solid #dee2e6;
      border-bottom: 1px solid #dee2e6;
      border-left: 1px solid transparent
   }

.left-tabs.sideways-tabs {
   border-right: none;
   left: -2.0rem
}

.sideways-tabs.left-tabs .nav-item {
   transform: rotate(-90deg);
   height: 2rem;
   margin-bottom: calc(5rem - 1rem)
}

.sideways-tabs.left-tabs .nav-link {
   width: 6rem;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   border-top-right-radius: .25rem;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   border-top-left-radius: .25rem;
   border-bottom: 1px solid #dee2e6;
   font-size: 12px
}

   .sideways-tabs.left-tabs .nav-link:hover {
      border-right: 1px solid #e9ecef
   }

ul.tabs {
}

ul .nav-item.active .nav-link,
.sideways-tabs.left-tabs .nav-item.active .nav-link {
   background-color: var(--colorNeutralBackground1);
   color: var(--colorForegroundBackground1);
   border-top: 3px solid orange;
   border-right: 1px solid #dee2e6;
   border-bottom: 1px solid transparent;
   border-left: 1px solid #dee2e6
}

.right-tabs.sideways-tabs {
   border-left: none;
   right: 3.2rem
}

.sideways-tabs.right-tabs .nav-item {
   transform: rotate(90deg);
   height: 1rem;
   margin-bottom: calc(8rem - 1rem)
}

.sideways-tabs.right-tabs .nav-link {
   width: 8rem;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   border-top-right-radius: .25rem;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   border-top-left-radius: .25rem;
   border-bottom: 1px solid #dee2e6
}

   .sideways-tabs.right-tabs .nav-link:hover {
      border-left: 1px solid #e9ecef
   }

   .sideways-tabs.right-tabs .nav-link.active {
      border-top: 1px solid #dee2e6;
      border-right: 1px solid #dee2e6;
      border-bottom: 1px solid transparent;
      border-left: 1px solid #dee2e6
   }

.summary-bob {
   border-radius: 5px;
   border-color: #999;
   border-width: 2px;
   border-style: solid;
   padding: 5px 10px 10px 10px;
   box-shadow: var(--shadow4); /*5px 3px silver;*/
   margin: 3px 10px;
   position: relative;
}

#event_texts table {
   table-layout: fixed;
   width: 100%;
   max-width: 2000px;
}

#event_texts h4 {
   text-decoration: underline;
   font-size: inherit;
   text-transform: capitalize;
   margin: 0.5rem 0 0.5rem 0;
   font-weight: normal;
}

#event_texts h5 {
   font-weight: 500;
   font-size: inherit;
   text-transform: capitalize;
   margin: 0.5rem 0 0 0;
}

#event_texts td {
   vertical-align: top;
}

@media (min-width: 23em) and (max-width: 48em) {
   .left-tabs.nav-tabs {
      flex-direction: row;
      border-right: none;
      border-left: none;
      min-width: 100%;
      border-bottom: 1px solid #dee2e6;
      left: auto;
      margin-top: auto
   }

   .left-tabs .nav-link {
      width: 8rem;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-top-right-radius: .25rem;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      border-top-left-radius: .25rem;
      margin-right: 0;
      margin-bottom: -1px
   }

      .left-tabs .nav-link.nav-link:hover {
         border-right-color: #dee2e6;
         border-bottom-color: transparent
      }

      .left-tabs .nav-link.active {
         border-top-color: #dee2e6;
         border-right-color: #dee2e6;
         border-bottom-color: transparent;
         border-left-color: #dee2e6
      }

   .sideways-tabs.left-tabs .nav-item, .sideways-tabs.right-tabs .nav-item {
      transform: none;
      height: auto;
      width: auto;
      margin-bottom: 0
   }

   .right-tabs.nav-tabs {
      flex-direction: row;
      border-right: none;
      border-left: none;
      min-width: 100%;
      border-top: 1px solid #dee2e6;
      right: auto;
      margin-top: auto
   }

   .sideways-tabs.right-tabs .nav-link, .right-tabs .nav-link {
      width: 8rem;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-top-right-radius: 0;
      border-bottom-right-radius: .25rem;
      border-bottom-left-radius: .25rem;
      border-top-left-radius: 0;
      margin-left: 0;
      margin-top: -1px;
      border-bottom-color: transparent;
      font-size: 12px
   }

      .right-tabs .nav-link:hover {
         border-top-color: transparent;
         border-left-color: #dee2e6;
         border-bottom-color: #e9ecef
      }

      .sideways-tabs.right-tabs .nav-link.active, .right-tabs .nav-link.active {
         border-top-color: transparent;
         border-right-color: #dee2e6;
         border-bottom-color: #dee2e6;
         border-left-color: #dee2e6
      }
}

@media (max-width: 23em) {
   .left-tabs.nav-tabs {
      flex-direction: row;
      border-right: none;
      border-left: none;
      min-width: 100%;
      border-bottom: 1px solid #dee2e6;
      left: auto;
      margin-top: auto;
      padding-bottom: .25rem
   }

   .right-tabs.nav-tabs {
      flex-direction: row;
      border-right: none;
      border-left: none;
      min-width: 100%;
      border-top: 1px solid #dee2e6;
      right: auto;
      margin-top: auto;
      padding-top: .25rem
   }

   .sideways-tabs.left-tabs .nav-item, .sideways-tabs.right-tabs .nav-item {
      transform: none;
      height: auto;
      width: auto;
      margin-bottom: 0
   }

   .sideways-tabs.left-tabs .nav-link, .sideways-tabs.right-tabs .nav-link, .nav-tabs .nav-link {
      width: 8rem;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-radius: .25rem;
      margin: .25rem;
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
      font-size: 12px
   }

      .sideways-tabs.nav-tabs .nav-link:hover, .nav-tabs .nav-link:hover {
         border: 1px solid #e9ecef;
         border-top-color: #e9ecef;
         border-right-color: #e9ecef;
         border-bottom-color: #e9ecef;
         border-left-color: #e9ecef
      }

   .sideways-tabs.nav-tabs .nav-link.active, .left-tabs .nav-link.active, .right-tabs .nav-link.active {
      border-top-color: #dee2e6;
      border-right-color: #dee2e6;
      border-bottom-color: #dee2e6;
      border-left-color: #dee2e6
   }
}


.flex-table {
   display: flex;
   /*border: solid;*/
}

.table-row {
   flex: 1;
   display: flex;
}

   .table-row:first-of-type {
      flex-flow: wrap;
   }

   .table-row .rowspan2 {
      flex: 1 1 100%;
   }

   .table-row div {
      /*border: solid;
       padding: 1em;*/
      flex: 1;
   }

/* ============================================================== */
/* if display grid and contents is supported then you may use it  */
/* ============================================================== */
@supports (display:grid) and (display:contents) {
   .flex-table {
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      grid-template-areas: "cell1 cell2 cell3 cell3" "cell4 cell4 cell3 cell3";
      border: solid;
   }

   .table-row {
      display: contents /* hide them in the structure. .row respective children become sibblings */
   }

      .table-row:first-child > :first-child {
         grid-area: cell1;
      }

      .table-row:first-child div {
         grid-area: cell2;
      }

      .table-row .table-cell.rowspan2 {
         grid-area: cell3;
         /*grid-row:span 2; no need if grid-template-area is complete*/
      }
   /*div div {
  border: solid;
  padding: 1em;
}*/
   .colspan2 {
      grid-area: cell4;
      /*grid-column : span 2; no need if grid-template-area is complete*/
   }
}

.ball-pulse {
   display: none;
   top: 22px;
   position: absolute;
   width: 21px;
}
.loading .ball-pulse {
   display: inherit;
}

.ball-pulse>div:nth-child(1) {
-webkit-animation: scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08);
animation: scale .75s -.24s infinite cubic-bezier(.2,.68,.18,1.08)
}

.ball-pulse>div:nth-child(2) {
-webkit-animation: scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08);
animation: scale .75s -.12s infinite cubic-bezier(.2,.68,.18,1.08)
}

.ball-pulse>div:nth-child(3) {
-webkit-animation: scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);
animation: scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08)
}

.ball-pulse>div {
width: 3px;
height: 3px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
background: #595959;
border-radius: 2.5px;
display: inline-block;
margin: 1px;
}

@keyframes scale {
30% {
  -webkit-transform: scale(.3);
  transform: scale(.3)
}

100% {
  -webkit-transform: scale(1);
  transform: scale(1)
}
}

:root {
   --before1: #46853c;
   --before2: #3d7336;
   --after1: #c72e2e;
   --after2: #b42c2c;
   --hit1: #006bff;
   --hit2: #0034ff;
}

#workspace {
   position: absolute;
   width: calc(100% - 20px);
   height: calc(100% - 120px);
}

#workspace .hsplitter {
   height: 10px;
   cursor: ns-resize;
}

/*#map {
   height: 50%;
}*/

#grid1_table td {
   white-space: nowrap !important;
}

#grid1_table [aria-describedby="grid1_table_appear_map"],
#grid1_table [aria-describedby="grid1_table_disappear_map"] {
   text-align: center !important;
}

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

.ui-iggrid .ui-iggrid-header, .ui-iggrid table tbody td, .ui-iggrid table th {
   padding: 0 4px !important;
}

#grid1 .ui-widget {
   font-size: 0.8em;
}

.ui-igedit {
   font-size: 1.2em !important;
}

.numericAlignment {
   text-align: right;
}

.centerAlignment {
   text-align: center;
}

/*.ui-state-hover {
     background: none;
  }*/

table {
   border-collapse: collapse !important;
}

   table tr td {
      border: 0 !important;
   }

.row_sametime_before1.row_sametime_after1 td {
   background-image: repeating-linear-gradient( 45deg, var(--before1), var(--before1) 6px, var(--after1) 6px, var(--after1) 12px) !important;
}

.legend_intersection1,
.row_sametime_before1.row_sametime_after2 td {
   background-image: repeating-linear-gradient( 45deg, var(--before1), var(--before1) 6px, var(--after2) 6px, var(--after2) 12px) !important;
}

.row_sametime_before1.row_sametime_before2 td {
   background-image: repeating-linear-gradient( 45deg, var(--before1), var(--before1) 6px, var(--before2) 6px, var(--before2) 12px) !important;
}

.legend_intersection2,
.row_sametime_before2.row_sametime_after1 td {
   background-image: repeating-linear-gradient( 45deg, var(--before2), var(--before2) 6px, var(--after1) 6px, var(--after1) 12px) !important;
}

.row_sametime_before2.row_sametime_after2 td {
   background-image: repeating-linear-gradient( 45deg, var(--before2), var(--before2) 6px, var(--after2) 6px, var(--after2) 12px) !important;
}

.row_sametime_after1.row_sametime_after2 td {
   background-image: repeating-linear-gradient( 45deg, var(--after1), var(--after1) 6px, var(--after2) 6px, var(--after2) 12px) !important;
}

.row_sametime1 td {
   background-color: var(--hit1) !important;
   color: #ffffff;
}

.row_sametime_before1 td {
   background-color: var(--before1) !important;
   color: #ffffff;
}

.row_sametime_before_border1 td {
   border-bottom: 2px solid var(--before1) !important;
}

.row_sametime_before_border2 td {
   border-bottom: 2px solid var(--before2) !important;
}

.row_sametime_after_border1 td {
   border-top: 2px solid var(--after1) !important;
}

.row_sametime_after_border2 td {
   border-top: 2px solid var(--after2) !important;
}

.row_sametime_after1 td {
   background-color: var(--after1) !important;
   color: #ffffff;
}

.row_sametime2 td {
   background-color: var(--hit2) !important;
   color: #ffffff;
}

.row_sametime_before2 td {
   background-color: var(--before2) !important;
   color: #ffffff;
}

.row_sametime_after2 td {
   background-color: var(--after2) !important;
   color: #ffffff;
}

.sametime_row .ui-state-hover {
   /*background-color: initial !important;*/
   color: white !important;
}

/*.selected_sametime td {
   opacity: 0.4;
}*/

.colored_prio .prio_A {
   background-color: red;
   color: white;
}

.colored_prio .prio_B {
   background-color: yellow;
   color: black;
}

.colored_prio .prio_C {
   background-color: white;
   color: black;
}

.colored_prio .prio_D {
   background-color: blue;
   color: white;
}

.colored_prio .prio_E {
   background-color: white;
   color: black;
}

.colored_prio .prio_A,
.colored_prio .prio_B,
.colored_prio .prio_C,
.colored_prio .prio_D,
.colored_prio .prio_E {
   text-align: center;
}


.markerrow_blue th,
.markerrow_blue td {
   background-color: #2A81CB !important;
   color: #fff;
}

.markerrow_gold th,
.markerrow_gold td {
   background-color: #FFD326 !important;
}

.markerrow_red th,
.markerrow_red td {
   background-color: #CB2B3E !important;
   color: #fff;
}

.markerrow_green th,
.markerrow_green td {
   background-color: #2AAD27 !important;
   color: #fff;
}

.markerrow_orange th,
.markerrow_orange td {
   background-color: #CB8427 !important;
   color: #fff;
}

.markerrow_yellow th,
.markerrow_yellow td {
   background-color: #CAC428 !important;
}

.markerrow_violet th,
.markerrow_violet td {
   background-color: #9C2BCB !important;
   color: #fff;
}

.markerrow_grey th,
.markerrow_grey td {
   background-color: #7B7B7B !important;
   color: #fff;
}

.markerrow_black th,
.markerrow_black td {
   background-color: #3D3D3D !important;
   color: #fff;
}


.custom-radios input[type="radio"]#marker_0 + label span {
   background-color: #2A81CB !important;
}

.custom-radios input[type="radio"]#marker_1 + label span {
   background-color: #FFD326 !important;
}

.custom-radios input[type="radio"]#marker_2 + label span {
   background-color: #CB2B3E !important;
}

.custom-radios input[type="radio"]#marker_3 + label span {
   background-color: #2AAD27 !important;
}

.custom-radios input[type="radio"]#marker_4 + label span {
   background-color: #CB8427 !important;
}

.custom-radios input[type="radio"]#marker_5 + label span {
   background-color: #CAC428 !important;
}

.custom-radios input[type="radio"]#marker_6 + label span {
   background-color: #9C2BCB !important;
}

.custom-radios input[type="radio"]#marker_7 + label span {
   background-color: #7B7B7B !important;
}

.custom-radios input[type="radio"]#marker_8 + label span {
   background-color: #3D3D3D !important;
}

.row_coloring_0 td,
.custom-radios input[type="radio"]#coloring_0 + label span {
   background-color: #e69f00 !important;
   color: #000;
}

.row_coloring_1 td,
.custom-radios input[type="radio"]#coloring_1 + label span {
   background-color: #f0e442 !important;
   color: #000;
}

.row_coloring_2 td,
.custom-radios input[type="radio"]#coloring_2 + label span {
   background-color: #cc79a7 !important;
   color: #000;
}

.row_coloring_3 td,
.custom-radios input[type="radio"]#coloring_3 + label span {
   background-color: #000 !important;
   color: #fff;
}

.row_coloring_4 td,
.custom-radios input[type="radio"]#coloring_4 + label span {
   background-color: #56b4e9 !important;
   color: #000;
}

.row_coloring_5 td,
.custom-radios input[type="radio"]#coloring_5 + label span {
   background-color: #009e73 !important;
   color: #000;
}

.row_coloring_6 td,
.custom-radios input[type="radio"]#coloring_6 + label span {
   background-color: #0072b2 !important;
   color: #fff;
}

.row_coloring_7 td,
.custom-radios input[type="radio"]#coloring_7 + label span {
   background-color: #d55e00 !important;
   color: #000;
}

/*label, input {
   display: block;
}*/

input {
   background-color: var(--colorNeutralBackground2);
    color: var(--colorNeutralForeground2);
}

   input.text {
      margin-bottom: 12px;
      width: 95%;
      padding: .4em;
   }

fieldset {
   padding: 0;
   border: 0;
   margin-top: 25px;
}

h1 {
   font-size: 1.2em;
   margin: .6em 0;
}

div#users-contain {
   width: 350px;
   margin: 20px 0;
}

   div#users-contain table {
      margin: 1em 0;
      border-collapse: collapse;
      width: 100%;
   }

      div#users-contain table td, div#users-contain table th {
         border: 1px solid #eee;
         padding: .6em 10px;
         text-align: left;
      }

.ui-dialog .ui-state-error {
   padding: .3em;
}

.validateTips {
   border: 1px solid transparent;
   padding: 0.3em;
}

.card {
   margin-bottom: 15px;
}

.icon-action {
   margin-top: 5px;
   float: right;
   font-size: 80%;
}

.list-group-item .title {
   margin-top: 5px;
   margin-bottom: 12px;
   font-weight: 600;
}

#grid_container {
   /*height: 100%;*/
   bottom: 0px;
   top: 35px;
}



.checkbox-grid label {
   margin: 0;
   padding: 10px;
}

   .checkbox-grid label:hover {
      background-color: #F0F0F0;
   }


.checkbox-grid input:checked + label {
   background: #1a252f;
   color: #ffffff;
}




.tabs > input[type=checkbox] {
   position: absolute;
   opacity: 0;
   z-index: -1;
}

.tabs ul {
   list-style-type: none;
   padding: 0;
}

li input[type=checkbox] {
   margin: 5px;
}

/* Accordion styles */
#filter_container {
   height: calc(100% - 40px);
}

.classic-ribbon .accordion_container {
   height: 100%;
}

.classic-ribbon .tabs {
   height: 100%;
}

.tabs {
   /*border-radius: 8px;*/
   overflow: auto;
   /*box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);*/

   width: 100%;
   color: var(--colorNeutralForegroundOnBrand);
   /*margin: 0;
padding: 0;
display: inline-block;
width: 100%;
height: calc(100vh - 140px);
position: relative;*/

   display: flex;
   flex-flow: column nowrap;
   align-content: stretch;
   height: calc(100vh - 200px);
}

.accordion_container {
   margin: 0;
   padding: 0;
   height: calc(100vh - 170px);
   overflow-y: auto;
   position: relative;
}

.tab-label {
   display: flex;
   justify-content: space-between;
   padding: 1em;
   background: var(--colorBrandBackground4Static); /*#2c3e50;*/
   font-weight: bold;
   cursor: pointer;
}

label {
   margin-bottom: 0.5rem;
}

.container {
   width: 100%;
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

   .tab-label:hover {
      background: var(--colorBrandBackgroundHover); /*#1a252f;*/
   }

   .tab-label::after {
      content: "❯";
      width: 1em;
      height: 1em;
      text-align: center;
      transition: all 0.35s;
   }

.tab-content, .subtab-content .tab-pane {
   max-height: 0;
   background-color:var(--colorNeutralBackground1);
   color:var(--colorNeutralForeground1);
   position: relative;
   transition: all 0.35s;
   overflow: hidden;
}

   .subtab-content .tab-pane.active {
      height: 100%;
      max-height: none;
   }

   .subtab-content label {
      width: auto;
      padding: 0;
   }

.tab-close {
   display: flex;
   justify-content: flex-end;
   padding: 1em;
   font-size: 0.75em;
   background: var(--colorBrandBackground); /*#2c3e50;*/
   cursor: pointer;
}

   .tab-close:hover {
      background: var(--colorNeutralForeground4BrandHover); /* #1a252f;*/
   }

input:checked + .tab-label {
   background: var(--colorNeutralForeground3BrandSelected); /*#1a252f;*/
}

   input:checked + .tab-label::after {
      transform: rotate(90deg);
   }

input:checked + label + .tab-content {
   max-height: calc(100% - 70px);
   /*overflow:auto;*/
   /*flex-grow: 1;*/
}

input:checked + label + .vehicle-content {
   min-height: 200px;
}

input:checked + label + .geo-content {
   min-height: 290px;
}

input:checked + label + .event-content {
   min-height: 370px;
}

input:checked + label + #filterDisplay {
   max-height: 40%;
}

.checkbox-grid li {
   display: inline-block;
   width: 16%;
}

   .checkbox-grid li input[type=checkbox] {
      /*position: absolute;
     opacity: 0;*/
      display: none;
      z-index: -1;
   }

.checkbox-grid label {
   margin: 0;
   padding: 5px 10px;
}


.accordion_container {
   margin: 0;
   padding: 0;
   max-height: calc(100vh - 170px);
   overflow-y: auto;
   position: relative;
}

#filter_sidebar button:focus {
   outline: none;
}

/*#filter_container {
   overflow: hidden;
   max-height: calc(100% - 60px);
}*/

main {
   margin-top: 10px;
   position: relative;
   /*top: 0;
   bottom: 130px;
   min-height: calc(100vh - 230px);*/
   height: 100%;
}

   #filter_container table {
      font-size: 0.8em;
      border-collapse: collapse;
      width: 100%;
   }

   #filter_container td, #filter_container th {
      min-width: 50px;
      padding: 0 5px;
   }

   #filter_container .num-cell {
      text-align: right;
   }

   #filter_container td.value-gt {
      background-color: #9292f6;
   }

   #filter_container td.value-lt {
      background-color: #f480fa;
   }

   #filter_container tr:hover {
      background-color: #f5f5f5;
   }

   #filter_container tr:nth-child(even) {
      background-color: #FFFFDD;
   }

   #filter_container th {
      background-color: #888;
      color: white;
      position: sticky;
      top: 0;
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
   }

   input#filterFromDate,
   input#filterToDate {
      display: inline-block;
      width: 185px;
   }

   input:invalid {
      border: solid 2px red;
      background-color: lightpink;
   }

   input:invalid+span:after {
      content: '✖';
      padding-left: 5px;
      color: red;
   }

   /*input:valid+span:after {
      content: '✓';
      padding-left: 5px;
   }*/

#filter_sidebar .filterButton {
   /*width: 50%;*/
   width: 115px;
   position: absolute;
   border-top-left-radius: var(--borderRadiusMedium);
   border-top-right-radius: var(--borderRadiusMedium);
   border-bottom-left-radius: var(--borderRadiusMedium);
   border-bottom-right-radius: var(--borderRadiusMedium);
   color: var(--colorNeutralForegroundOnBrand);
   background-color: var(--colorBrandBackground);
   right: 15px;
   font-weight: bold;
}

#filter_sidebar .filterButton:hover {
      background: var(--colorBrandBackgroundHover); /* #1a252f;*/
      color: var(--colorNeutralForegroundOnBrand);
   }

#filter_sidebar .filterButton[disabled] {
      background:  #d3d3d3;
   }




.custom-radios div {
   display: inline-block;
}

.custom-radios input[type="radio"] {
   display: none;
}

   .custom-radios input[type="radio"] + label {
      color: #333;
      font-family: Arial, sans-serif;
      font-size: 14px;
   }

      .custom-radios input[type="radio"] + label span {
         display: inline-block;
         width: 36px;
         height: 36px;
         margin: 3px 8px 0 0;
         vertical-align: middle;
         cursor: pointer;
         border-radius: 50%;
         background-repeat: no-repeat;
         background-position: center;
         text-align: center;
         line-height: 34px;
      }

      .custom-radios input[type="radio"] + label span {
         transform: scale(1);
         transition: all .3s ease;
         z-index: 1;
         position: relative;
      }

   .custom-radios input[type="radio"]:checked + label span {
      transform: scale(1.45);
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
      z-index: 10;
   }
   #sametime_panel,
#grid_container {
   left: 0;
   right: 0;
   transition-timing-function: ease-in;
   /*transition: padding 0.2s;*/
   padding: 10px;
   /*min-height: calc(100vh - 150px);*/
   position: absolute;
}


   #sametime_panel.right-sidebar-open,
   #grid_container.right-sidebar-open {
      right: 445px;
      transition-timing-function: ease-out;
      transition: padding 0.25s;
   }

   #sametime_panel.left-sidebar-open,
   #grid_container.left-sidebar-open {
      left: 445px;
      transition-timing-function: ease-out;
      transition: padding 0.25s;
   }

#filter_sidebar {
   position: fixed;
   top: 80px;
   width: 450px;
   /* border-left: 1px solid black;*/
   padding: 10px;
   background-color:var(--colorNeutralBackground1);
   color:var(--colorNeutralForeground1);
   /*box-shadow: 2px 0px 5px -1px rgba(0, 0, 0, 0.4);*/
   box-shadow: var(--shadow4);
   left: -450px;
   transition-timing-function: ease-in;
   transition: transform 0.2s;
}

   #filter_sidebar.open {
      transform: translateX(450px);
      transition-timing-function: ease-out;
      transition: transform 0.25s;
   }

   
   #filter_sidebar #filter_button_container {
      position: absolute;
      right: -90px;
      top: 0px;
      width: 90px;
      height: 41px;
   }

   #filter_sidebar #current_event_count {
      position:absolute;
      padding: 8px;
      width: 200px;
   }

   #filter_button {
      right: -90px;
      top: 0px;
      width: 90px;
      height: 41px;
      background-color:var(--colorNeutralBackground1);
      border-bottom-right-radius: 10px;
      border-top-right-radius: 10px;
      /*border-right: none;*/
      border: none;
      box-shadow: 2px 0px 5px -1px rgba(0, 0, 0, 0.4);
      /*box-shadow: var(--shadow4);*/
   }

.classic-ribbon #env_sidebar,
.classic-ribbon #filter_sidebar {
   top: 110px;
     /*height: calc(100% - 130px);*/
   bottom: 40px;
}

#env_sidebar {
   position: fixed;
   top: 80px;
   width: 450px;
   /* border-left: 1px solid black;
   height: calc(100vh - 100px); */
   padding: 10px;
   background-color:var(--colorNeutralBackground1);
   color:var(--colorNeutralForeground1);
   /*box-shadow: -2px 0px 5px -1px rgba(0, 0, 0, 0.4);*/
   box-shadow: var(--shadow4);
   right: -450px;
   transition-timing-function: ease-in;
   transition: transform 0.2s;
}

   #env_sidebar.open {
      transform: translateX(-450px);
      transition-timing-function: ease-out;
      transition: transform 0.25s;
   }

   #env_sidebar button {
      position: absolute;
      left: -90px;
      top: 0px;
      width: 90px;
      height: 41px;
      border-bottom-left-radius: 10px;
      border-top-left-radius: 10px;
      /*border-right: none;*/
      border: none;
      box-shadow: -2px 0px 5px -1px rgba(0, 0, 0, 0.4);
      /*box-shadow: var(--shadow4);*/
   }

   #env_sidebar button,
      #filter_sidebar button {
      background-color:var(--colorNeutralBackground1);
      color: var(--colorNeutralForeground1);
   }

      #env_sidebar button:hover,
      #filter_sidebar button:hover {
         background-color: var(--colorNeutralBackground1Hover);
         color: var(--colorNeutralForeground1Hover);
      }

      #env_sidebar button:focus {
         outline: none;
      }

#envdata_container {
   overflow: auto;
   height: 100%;
}

   #envdata_container table {
      font-size: 0.8em;
      border-collapse: collapse;
      width: 100%;
   }

   #envdata_container td, #envdata_container th {
      min-width: 50px;
      padding: 0 5px;
   }

   #envdata_container .num-cell {
      text-align: right;
   }

   #envdata_container td.value-gt {
      background-color: #9292f6;
   }

   #envdata_container td.value-lt {
      background-color: #f480fa;
   }

   #envdata_container tr:hover {
      background-color: #f5f5f5;
   }

   #envdata_container tr:nth-child(even) {
      background-color: var(--colorNeutralBackground4);
   }

   #envdata_container th {
      background-color: #888;
      color: white;
      position: sticky;
      top: 0;
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
   }

#selectFilterGeoType input,
#selectFilterGeoCountry input {
   margin: 6px;
}

.boolean-value-true {
   color: #c000c0;
}

/*loader*/
.lds-ring {
   display: inline-block;
   /*position: relative;*/
   width: 80px;
   height: 80px;
   z-index: 100;
   position: absolute;
   left: calc(50% - 40px);
   top: calc(50% - 40px);
}

   .lds-ring div {
      box-sizing: border-box;
      display: block;
      position: absolute;
      width: 64px;
      height: 64px;
      margin: 8px;
      border: 8px solid #000;
      border-radius: 50%;
      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      border-color: #000 transparent transparent transparent;
   }

      .lds-ring div:nth-child(1) {
         animation-delay: -0.45s;
      }

      .lds-ring div:nth-child(2) {
         animation-delay: -0.3s;
      }

      .lds-ring div:nth-child(3) {
         animation-delay: -0.15s;
      }

#grid1_table_hiding_modalDialog_content {
   max-height: calc(100% - 300px);
}

.ui-igsplitter-collapse-button-horizontal-right,
.ui-igsplitter-collapse-button-horizontal-left {
   /* the splitter collapse buttons are hard to click on if we don't do this */
   z-index: 99;
}

.pin2 {
   position: absolute;
   top: 40%;
   left: 50%;
   margin-left: 115px;
   border-radius: 50%;
   border: 8px solid #fff;
   width: 8px;
   height: 8px;
 }
 
   .pin2::after {
     position: absolute;
     content: '';
     width: 0px;
     height: 0px;
     bottom: -30px;
     left: -6px;
     border: 10px solid transparent;
     border-top: 17px solid #000;
   }
 
 .container {
   max-width: 100% !important;
 }
 
 #collapse11 .accordion-button {
   display: inline-block;
   text-align: center;
   background-color: rgba(0,0,0,.03);
 }
 
 #dialog-addtomap form fieldset {
   margin: 0;
 }
 
 #csv_container {
   padding-top: 5px;
 }
 
 #train_config_label {
   position: absolute;
   margin-top: -10px;
   text-decoration: underline;
 }
 
 /*@media screen and (max-width: 1920px) {
   #train_config_label {
     display: none;
   }
 }*/
 
 #grid_container.sametime-panel-open {
   top: 240px;
   height: calc(100% - 190px);
 }
 #grid_container.sametime-panel-closed {
   top: 80px;
   height: calc(100% - 40px);
 }
 
 body {
   overflow: hidden;
 }
 
 
 
 /*#filter_sidebar, #env_sidebar {
   top: 42px;
 }*/
 
 /*#contextViewMap a, #contextViewEventInfo a {
   background-image: url("box.gif");
   background-repeat: no-repeat;
   background-position: left top;
 }
 #contextViewMap.checked, #contextViewEventInfo.checked {
   background-image: url("checkmark.gif"), url("box.gif");
 }*/
 #contextViewMap a::before,
 #contextViewEventInfo a::before,
 #contextViewFilter a::before,
 #contextViewEnvData a::before,
 #contextColorPrio a::before {
   content: "⬜ ";
 }
 #contextViewMap.checked a::before,
 #contextViewEventInfo.checked a::before,
 #contextViewFilter.checked a::before,
 #contextViewEnvData.checked a::before,
 #contextColorPrio.checked a::before {
   content: "✅ ";
 }
 
 .copycontainer {
   position: relative;
 }
 
 .copybutton {
   display: none;
   position: absolute;
   right: 5px;
   top: 5px;
   width: 25px;
   height: 25px;
   padding: 0;
   background: transparent;
   border: 0;
   cursor: pointer;
 }


 #grid_container .ui-iggrid tr.ui-ig-altrecord {
   background-color: var(--colorNeutralBackground4);
 }
 #grid_container .ui-widget-content {
   background: var(--colorNeutralBackground1);
   color: var(--colorNeutralForeground1);
 }
 #grid_container .ui-state-active,
 #grid_container .ui-widget-content .ui-state-active,
 #grid_container .ui-widget-header .ui-state-active {
   background: var(--colorBrandBackgroundInvertedSelected);
   color: var(--colorNeutralForeground1);
 }


@keyframes lds-ring {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}