.col-group-cyan {
  background-color: #9dffff !important;
}

.col-group-yellow {
  background-color: #fdff9d !important;
}

.col-group-green {
  background-color: #9dffb2 !important;
}

.tabulator .tabulator-row-even.tabulator-tree-level-1 {
  background-color: #CCE5FF !important;
}

.tabulator .tabulator-row-odd.tabulator-tree-level-1 {
  background-color: #CCFFFF !important;
}

.card-div-back {
  background-image: url("/images/stripes-light.png");
  background-repeat: repeat;
}

.card-div-shadow {
  box-shadow: 2px 2px 4px #000000;
}

.tablesmallline {
  line-height: 1em;
}

.tablesmallline td {
  height: 1em;
  text-align: center;
}

.card-login-form {
  padding-top: 1em;
}

.card-register-form {
  padding-top: 1em;
}

.myfooter {
  margin-top: 1em;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f5f5f5;
  text-align: center;
}

.map {
  min-height: 400px;
  width: 100%;
}

.mapCenter {
  height: 400px;
  min-height: 300px;
  width: 100%;
}

.mapArea {
  height: 400px;
  min-height: 300px;
  width: 100%;
}

.mapTC {
  height: 400px;
  min-height: 300px;
  width: 100%;
}

.config-block {
  padding-top: 2em;
  padding-left: 0em;
  padding-right: 0em;
}

.table-myhover tbody tr:hover {
  outline: thin solid;
  outline-color: rgb(0, 0, 0);
}

.myDiv-overflow-x {
  overflow-x: scroll;
}

.tdNotConnected {
  background: rgb(255, 0, 0);
}

.tdConnected {
  background: rgb(0, 255, 0);
}

.emergencyStatus {
  background: rgb(255, 145, 0);
}

table caption {
  caption-side: top;
}

/* Animated Traffic Ligths in TC page */
#TLsContainer div.TLsprite {
  position: relative;
  display: inline-block;
  height: 70px;
  width: 33px;
  background: url('/images/sprites/TLs.png') 0px 0px;
}

/* Intersection Editor */
#intersec_edit {
  margin-top: 10px;
  height: 900px;
  width: 1400px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f0f0f0;
}

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

/* Intersection Viewer */
div[id^='intersec_view'],
div[id*=' intersec_view'] {
  background-color: #f0f0f0;
}

div[id^='intersec_container'],
div[id*=' intersec_container'] {
  width: 100%;
}

/* OL popup */
.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}

.ol-popup-light {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 0px;
  border-radius: 0px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 150px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}

#quill-editor {
  margin: 10px;
  padding: 0px;
  margin: 0px;
  height: 30vh;
}

#quill-scrolling-container {
  padding: 0px;
  margin: 0px;
}

/* ReP */
.screenline {
  white-space: nowrap;
  text-align: center;
  font-size: 100%;
  font-weight: bold;
  color: #00FF00;
  font-family: 'Courier New', Courier, monospace;
}

@media only screen and (max-width: 430px) {
  .screenline {
    font-size: 65%;
  }
}

.screenlineMT {
  white-space: nowrap;
  text-align: center;
  font-size: 100%;
  font-weight: bold;
  color: #00FF00;
  font-family: 'Courier New', Courier, monospace;
}

.panelButtonKeypad {
  display: block;
  max-width: 3em;
  max-height: 3em;
  min-width: 2.3rem;
  min-height: 2.3rem;
  font-size: 0.5em;
}

.panelButtonImg {
  color: rgba(0, 0, 0, 0);
  background-repeat: no-repeat;
  background-position: center center;
}

.panelButton {
  display: block;
  width: 3em;
  height: 3em;
}

.panelButtonF {
  text-align: center;
  vertical-align: middle;
  line-height: 2em;
  display: inline-block;
  width: 4em;
  height: 2em;
  white-space: nowrap;
}

.panelButtonFmt {
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  line-height: 2em;
  width: 3.8em;
  height: 3em;
  white-space: nowrap;
}

#full-map:-webkit-full-screen,
#full-map:-moz-full-screen,
#full-map:-ms-fullscreen,
#full-map:fullscreen{
  width: 100%;
  height: 100%;
}

#full-map:-webkit-full-screen #map,
#full-map:-moz-full-screen #map,
#full-map:-ms-fullscreen #map,
#full-map:fullscreen #map{
  width: 100%;
  height: 100%;
}