my/*
  Styling for the FlexMeasures Platform
*/
/* 

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    padding-top: 100px;  /* This default is overridden by flexmeasures.js to support a fluid navbar */
}

body *:not(.fa, .glyphicon) {
    font-family: 'Poppins', sans-serif;
}

@media (min-width: 768px) {
    .on-top-md {
        z-index: 1010;
    }
}

h1 {
    font-size: 35px;
    color: var(--primary-color);
    margin-bottom: 0;
    line-height: 35px;
}

@media (min-width: 768px) {
    h1 {
        margin-bottom: 30px;
    }
}

h1, h2, h3 {
    margin: 0;
    padding-top: 10px;
    font-size: 30px;
    font-weight: 600;
    color: var(--primary-color);
}
.sidepanel-content h1,
.sidepanel-content h2,
.sidepanel-content h3,
.sidepanel-content label {
    color: var(--white) !important;
}

hr {
    border-top: none;
    padding: 0;
}

small {
    font-size: 13px;
    font-style: italic;
    color: var(--gray);
    line-height: 13px;
    padding-top: 5px !important;
    display: inline-block;
}

button.btn {
    color: var(--nav-default-color);
    background: var(--nav-default-background-color);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
button.btn:hover {
    color: var(--nav-hover-color);
    background: var(--nav-hover-background-color);
}

button[type="submit"] {
    background: var(--primary-color) !important;
    outline: none !important;
    border: none;
    padding: 12px 30px;
    font-size: 15px;
    margin-top: 6px;
    margin-left: 0;
    /* margin-left: -15px; */
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}
button[type="submit"] a {
    color: var(--nav-default-color);
    text-decoration: none;
}
button.btn:hover a {
    color: var(--nav-hover-color);
}

.spinner {
    padding-top: 200px;
    text-align: center;
    position: absolute;
    z-index: 10;
    font-size: 8px;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none; /* Prevents the spinner from blocking clicks */
}
.spinner-bottom-right {
    top: auto;
    left: auto;
    right: 20px;
    bottom: 20px;
    width: auto;
    padding-top: 0;
    text-align: right;
}

.legend {
    width: 40px;
    border-top: 2px solid black;
    height: 0px;
    display: block;
    margin-top: 0.5em;
}

/* ---- Errors, alerts and flashes ---- */

p.error {
    color: var(--red);
}

#alerts {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 25%;
    min-width: 200px;
}

.flashes {
    list-style: none;
    border: none;
    text-align: center;
    margin-top: 20px;
    text-transform: uppercase;
    font-weight: 700;
}
.flashes.alert.alert-info {
    color: var(--black);
    background: var(--secondary-color);
}
.flashes .success {
    color: var(--black);
    background: lightgreen;
    padding: 1rem;
    border-radius: 0.375rem;
}
/* ---- End errors, alerts and flashes ---- */


/* responsive buttons with nice word wrap */

.btn-responsive {
    white-space: normal !important;
    word-wrap: break-word;
}


/* --- Nav Bar --- */

.navbar-tool-name {
    color: var(--secondary-color);
}

.navbar{
    padding-top : 0 !important;
    padding-bottom: 0 !important;
}
.navbar-default {
    background-color: var(--nav-default-background-color);
    border: none;
    z-index: 999991;
}

.navbar-default .navbar-nav>.active>a, .btn-info.active {
    color: var(--nav-current-color) !important;
    background-color: var(--nav-current-background-color) !important;
}
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover, .btn-info.active:focus, .btn-info.active:hover {
    color: var(--nav-current-hover-color) !important;
    background-color: var(--nav-current-hover-background-color) !important;
}

.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
    background-color: var(--nav-open-background-color) !important;
    color: var(--nav-open-color) !important;
    border: none;
}

.dropdown-menu {
    border: none !important;
    z-index: 2000;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
    color: var(--nav-hover-color);
    background-color: var(--nav-hover-background-color);
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}

.navbar-default .navbar-nav>li>a {
    color: var(--nav-default-color);
    font: 500 14px/14px;
}

.navbar-brand {
    display: inline-block;
    height: 100%;
    padding: 10px 15px;
}

.navbar-brand a {
    display: inline-block;
}

.navbar-brand a span {
    display: inline-block;
    color: var(--secondary-color) !important;
}

.fa-bars{
    color: var(--white);
}

.d-none{
    display: none !important;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: var(--primary-border-color);
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 20px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: none !important;
    border-radius: 4px;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background: none !important;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--white);
}

@media (min-width: 768px) {
    .navbar-nav>li>a {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .dropdown-menu a {
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
    }

}

@media (max-width: 767px) {
    .dropdown-menu>li>a {
        color: var(--nav-default-color);
        transition: .4s;
        -webkit-transition: .4s;
        -moz-transition: .4s;
        -ms-transition: .4s;
        -o-transition: .4s;
    }
}

.dropdown-menu.center-aligned {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

.dropdown-menu,
.dropdown-menu>li>a:not(.active) {
    color: var(--nav-default-color);
    background-color: var(--nav-default-background-color);
    text-align: center;
}
.dropdown-menu>li>a.active {
    color: var(--nav-current-color) !important;
    background-color: var(--nav-current-background-color) !important;
}
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
    color: var(--nav-hover-color);
    background-color: var(--nav-hover-background-color);
}

#navbar-logo {
    height: 40px;
}

/* --- End Nav Bar --- */


/* --- Switch button --- */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--secondary-color);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--secondary-hover-color);
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* --- End Switch button --- */


/* --- Footer --- */

.footer {
    color: var(--white);
    font-size: tiny;
    margin-top: 25px;
}

.page-footer {
    padding-top: 1px;
    background: var(--primary-color);
}

.footer a {
    color: var(--secondary-color);
}

.footer-logo {
    width: 50px;
    margin-top: 15px;
    margin-bottom: 20px;
}

/* --- End Footer --- */


/* ---- Carousel ---- */

.carousel-inner img {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .carousel-container {
        width: 100%;
        height: auto;
        overflow: hidden;
        position: relative;
        padding: 0;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 20px;
        margin-bottom: 30px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    
    .carousel {
        width: 100%;
        position: relative;
        left: 0;
        margin-left: 0;
    }
}
/* ---- End Carousel ---- */


/* ---- Icons ---- */

.icon-data-set-1:before {
    content: "\f24e";
}

.icon-data-set-2:before {
    content: "\f017";
}

.icon-data-set-3:before {
    content: "\f073";
}

.icon-data-set-4:before {
    content: "\f0d6";
}

.icon-data-set-11:before {
    content: "\f24e";
}

.icon-data-set-12:before {
    content: "\f017";
}

.icon-data-set-21:before {
    content: "\f056";
}

.icon-data-set-22:before {
    content: "\f056";
}

.icon-data-set-31:before {
    content: "\f1b9";
}

.icon-data-set-32:before {
    content: "\f1b9";
}

[class|=icon] img {
    width: 20px;
}

.icon-column .text-muted {
    color: var(--light-gray);
}

.map-icon > i {
    font-size: normal;
    position: relative;
}
.map-icon > i:not(.supersize):before, i:not(.supersize):after {
    font-size: 24px;
}
.map-icon > .supersize {
    font-size: 48px;
}

/* icon on the left (use left-icon class) */
:not(.map-icon) > i.left-icon {
    left: 40px;
    /* Prevent user agent stylesheets from treating this tag as an italics tag */
    font-style: normal;
}
:not(.map-icon) > i.left-icon:after, :not(.map-icon) > i.left-icon:before {
    position: absolute;
    top: 0px;
    left: -40px;
}
/* icon centered (use center-icon class) */
i.center-icon {
    right: 0px;
}
i.center-icon:after, i.center-icon:before {
    position: absolute;
    top: 0px;
    right: -20px;
}

.icon-column {
    text-align: right;
    width: 6.5em;
}

.icon-column a {
    margin-left: 10px;
}


/* map icons */
.map-icon {
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.map-icon > i.overlay:before, .map-icon > i.overlay:after {
    font-size: 20px;
    z-index: 9;
    right: -13px;
    top: -40px;
}
.map-icon > i:before, .map-icon > i:after {
    position: absolute;
    right: -33px;
    top: -50px;
}
.map-icon.opportunity {
    color: var(--red);
}

.icon-empty-marker {
    color: var(--black);
    opacity: 0.7;
}

/* map icon alignment */
.map-icon > i.icon-wind:before, .map-icon > i.icon-wind:after {
    right: -16px !important;
}
.map-icon > i.icon-solar:before, .map-icon > i.icon-solar:after {
    right: -14.5px !important;
}
.map-icon > i.icon-charging_station:before, .map-icon > i.icon-solar:after {
    right: -15.5px !important;
}
.map-icon > i.icon-building:before, .map-icon > i.icon-solar:after {
    right: -13px !important;
}

/* rotating icons, because why not? */
i.icon-wind:hover:before {
    transform: rotate(720deg);
    transform-origin: 37.4% 40.2%;
    transition: transform 3.0s ease;
}
.over > i.icon-wind:before , i.icon-wind.over:before{
    transform: rotate(720deg);
    transform-origin: 37.4% 40.2%;
    transition: transform 3.0s ease;
}

/* custom icons from https://erikflowers.github.io/weather-icons/ */

[class^="wi wi-"]:before, [class*=" wi wi-"]:before {
  font-family: "weathericons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
}

@font-face{font-family:weathericons;src:url(font/weathericons-regular-webfont.eot);src:url(font/weathericons-regular-webfont.eot?#iefix) format('embedded-opentype'),url(font/weathericons-regular-webfont.woff2) format('woff2'),url(font/weathericons-regular-webfont.woff) format('woff'),url(font/weathericons-regular-webfont.ttf) format('truetype'),url(font/weathericons-regular-webfont.svg#weather_iconsregular) format('svg');font-weight:400;font-style:normal}.wi{display:inline-block;font-family:weathericons;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wi-fw{text-align:center;width:1.4em}.wi-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.wi-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.wi-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.wi-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.wi-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}
.icon-wind_speed:before { content: '\f0b1'; } /* wi-wind-direction */
.icon-wind_direction:before { content: '\f050'; } /* wi-strong-wind */
.icon-temperature:before { content: '\f053'; } /* wi-thermometer-exterior */
.icon-irradiance:before { content: '\f046'; } /* wi-horizon-alt */


@font-face {
  font-family: 'seita-webfont';
  src: url('../font/seita-webfont.eot?7470033');
  src: url('../font/seita-webfont.eot?7470033#iefix') format('embedded-opentype'),
       url('../font/seita-webfont.woff2?7470033') format('woff2'),
       url('../font/seita-webfont.woff?7470033') format('woff'),
       url('../font/seita-webfont.ttf?7470033') format('truetype'),
       url('../font/seita-webfont.svg?7470033#seita-webfont') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'seita-webfont';
    src: url('../font/seita-webfont.svg?7470033#seita-webfont') format('svg');
  }
}
*/

 [class^="icon-"]:before, [class*=" icon-"]:before, [class^="icon-"]:after, [class*=" icon-"]:after {
  font-family: "seita-webfont";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-wind:before { content: '\e80e'; } /* '' */
.icon-wind:after { content: '\e80f'; } /* '' */
.icon-battery:before { content: '\e801'; } /* '' */
.icon-binoculars:before { content: '\e802'; } /* '' */
.icon-building:before { content: '\e803'; } /* '' */
.icon-calculator:before { content: '\e804'; } /* '' */
.icon-charging_station:before { content: '\e805'; } /* '' */
.icon-bidirectional_charging_station:before { content: '\e805'; } /* '' */
.icon-one-way_evse:before { content: '\e805'; } /* '' */
.icon-two-way_evse:before { content: '\e805'; } /* '' */
.icon-house:before { content: '\e806'; } /* '' */
.icon-market-EUR:before { content: '\e807'; } /* '' */
.icon-market-KRW:before { content: '\e808'; } /* '' */
.icon-solar:before { content: '\e809'; } /* '' */
.icon-time:before { content: '\e80a'; } /* '' */
.icon-seita_logo:before { content: '\e80b'; } /* '' */
.icon-seita_bird:before { content: '\e80c'; } /* '' */
.icon-seita:before { content: '\e80d'; } /* '' */
.icon-wind-blades:before { content: '\e80e'; } /* '' */
.icon-wind-tower:before { content: '\e80f'; } /* '' */
.icon-empty-marker:before { content: '\e810'; } /* '' */

.icon-batteries:before { content: '\e801'; } /* '' */
.icon-buildings:before { content: '\e803'; } /* '' */
.icon-charging_stations:before { content: '\e805'; } /* '' */
.icon-bidirectional_charging_stations:before { content: '\e805'; } /* '' */

/* --- End Icons --- */


/* --- Leaflet (Maps) --- */

#mapid {
    width: 100%;
    height: 400px;
    margin-top: 20px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.leaflet-bar a {
    color: var(--nav-default-color);
    background-color: var(--nav-default-background-color);
    border-bottom: var(--primary-border-color) 1px solid !important;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}

.leaflet-bar a:last-child {
    border-bottom: none !important;
}

.leaflet-bar a:hover {
    color: var(--nav-hover-color);
    background-color: var(--nav-hover-background-color);
}

.leaflet-marker-popup {
    min-width: 240px;
}

.leaflet-control-layers {
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    background: var(--nav-default-background-color);
    border-radius: 5px;
}

.leaflet-control-layers-overlays label span {
    color: var(--nav-default-color);
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}

.leaflet-control-layers-overlays label span:hover {
    color: var(--nav-hover-color);
}

.leaflet-bar a.leaflet-disabled {
    cursor: default;
    background-color: var(--primary-hover-color);
    color: var(--gray);
}
.leaflet-bar a {
    text-decoration: none;
}

/* --- End Leaflet (Maps) --- */


/* --- Tables ---- */

/* Clickable list items */

table.dataTable.nav-on-click tbody tr:hover {
    background-color: var(--nav-current-hover-background-color) !important;
    cursor: pointer;
}
.table tbody tr {
    border-top-width: 1px;
    border-color: var(--gray);
}


table.dataTable td {
    padding: 8px; 
}


table.dataTable th {
    padding: 10px;
}


table.dataTable button {
    margin: 5px; 
}


table.dataTable input[type="checkbox"] {
    margin: 5px; 
}


div.dataTables_filter input {
    margin-left: 5px;
    padding: 5px; 
}


div.dataTables_paginate {
    margin-top: 10px; 
}


/* scrolling */
.floatThead-wrapper table {
    width: 100%;
}
.floatThead-wrapper thead {
    background-color: var(--white);
}

.floatThead-wrapper th, td {
    padding: 8px;
}

/* bootstrap works on tables with class="table" - here we override their nice styling only with respect to vertical alignment of table elements */

.table > tbody > tr > td {
     vertical-align: middle;
}

/* sorting icons on left when header is not right aligned */

table.dataTable thead tr th:not(.text-right).sorting_asc {
  background: url("https://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center left;
}
table.dataTable thead tr th:not(.text-right).sorting_desc {
  background: url("https://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center left;
}
table.dataTable thead tr th:not(.text-right).sorting {
  background: url("https://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center left;
}
table.dataTable thead tr th.no-sort {
    padding: 9px;
}
table.dataTable thead tr th {
    border-bottom: inherit;
}
table.dataTable.no-footer {
    border-bottom: inherit !important;
}
.dataTables_length label, .dataTables_filter label {
    font-weight: inherit;
}

/* extra buffer for bootstrap rows */
.top-buffer { margin-top:15px; }

.dataTables_wrapper .paginate_button {
    outline: none;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--nav-default-color) !important;
    background: var(--nav-default-background-color);
    border: none !important;
    border-radius: 4px !important;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    -ms-border-radius: 4px !important;
    -o-border-radius: 4px !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled, .current):hover {
    color: var(--nav-hover-color) !important;
    background: var(--nav-hover-background-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: var(--gray) !important;
    background: var(--light-gray) !important;
    box-shadow: none;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: var(--nav-current-color) !important;
    background: var(--nav-current-background-color);
    box-shadow: none !important;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--nav-current-hover-color) !important;
    background: var(--nav-current-hover-background-color);
    box-shadow: none !important;
}

@media screen and (max-width: 640px) {
    .dataTables_wrapper .dataTables_filter {
        float: right !important;
    }

    .dataTables_wrapper .dataTables_length {
        float: left !important;
    }
}

.floatThead-wrapper {
    margin-top: 50px;
    margin-bottom: 20px;
    overflow-y: auto;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.floatThead-wrapper .table {
    margin-bottom: 0 !important;
} 

.floatThead-wrapper .table>thead>tr>th {
    border-bottom: none !important;
    color: var(--primary-color);
    
}

.floatThead-wrapper .table>tbody>tr>td, .floatThead-wrapper .table>tbody>tr>th, .floatThead-wrapper .table>tfoot>tr>td, .floatThead-wrapper .table>tfoot>tr>th, .floatThead-wrapper .table>thead>tr>td, .table>thead>tr>th {
    padding: 15px !important;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid var(--light-gray) ;
}
.sidepanel-label {
    margin-left: 20px !important;
}


/* --- End Tables ---- */


/* ---- Modal ---- */

.modal {
    z-index: 999993 !important;
    color: var(--primary-color);
}

.modal-backdrop {
    z-index: 999992 !important;
}

/* ---- End Modal ---- */


/* ---- Side panel ---- */

:root {
    --z-index-sidepanel: 20;
    --z-index-sidepanel-label: 21;
    --z-index-sidepanel-content: 100;
}

@media (max-width: 767px) {
    .sidepanel-label {
        visibility: collapse;
    }
}

@media (min-width: 768px) {
    .sidepanel {
        position: relative;
        z-index: var(--z-index-sidepanel); /* single shared stacking context for all contained panels */
        margin: 15px 0;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .sidepanel-container {
        position: relative; /* positions label/content relative to this container */
        height: 60px; /* space for the label tab */
        width: calc(var(--sidepanel-width, calc(var(--litepicker-day-width) * 9)) * 0.3); /* match visible tab width (30% of full panel) */
        /* no z-index here — avoids creating a separate stacking context per container */
    }
    .sidepanel-label {
        position: absolute;
        top: 0;
        left: 0;
        z-index: var(--z-index-sidepanel-label);
        transform: translateX(-70%);
        text-align: right;
    }
    .sidepanel-content {
        position: absolute;
        top: 0;
        left: 0;
        z-index: var(--z-index-sidepanel-content);
        visibility: hidden;
        transform: translateX(-106%);
        /* closing: slide off-screen first, then hide from accessibility tree */
        transition: transform 0.3s, visibility 0s 0.3s;
    }
    .sidepanel-content,
    .sidepanel-label {
        color: var(--nav-default-color);
        background: var(--nav-default-background-color);
        width: var(--sidepanel-width, calc(var(--litepicker-day-width) * 9));
        padding: 20px 15px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }
    .sidepanel-label {
        min-height: 60px; /* line-height + padding-top + padding-bottom */
    }
    @media (hover: hover) {
        .sidepanel-container:hover > .sidepanel-content,
        .sidepanel-container:focus-within > .sidepanel-content {
            transform: translateX(0);
            visibility: visible;
            /* opening: reveal immediately, then slide in */
            transition: transform 0.3s, visibility 0s;
        }
    }
    @media (hover: none) {
        .sidepanel-container > .sidepanel-content.sidepanel-show {
            transform: translateX(0);
            visibility: visible;
            /* opening: reveal immediately, then slide in */
            transition: transform 0.3s, visibility 0s;
        }
    }
}

/* ---- End Side panel ---- */


/* ---- Date picker ---- */

.litepicker {
    font-size: 14px;
}

.month-item-name, .month-item-year {
    padding: 7px !important;
    outline: none;
    border-radius: 4px;
    border: 1px solid #ddd;
    color: var(--nav-default-color);
    background: var(--nav-default-background-color);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.container__predefined-ranges {
    padding: 0px;
    margin-bottom: 15px;
    justify-content: space-around;
    box-shadow: 0 0 10px rgba(0,0,0,.1) !important;
    border-radius: 6px !important;
    -webkit-border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    -ms-border-radius: 6px !important;
    -o-border-radius: 6px !important;
}

@media (min-width: 768px) {
    .container__predefined-ranges button {
        color: var(--primary-color);
        border-right: 1px solid var(--primary-border-color) !important;
    }
}
@media (max-width: 767px) {
    .container__predefined-ranges button {
        color: var(--white);
        background-color: var(--primary-color);
        border-right: 1px solid var(--primary-border-color) !important;
    }
}
.container__predefined-ranges button {
    font-weight: 500;
    cursor: pointer !important;
    flex: 1 1 auto;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.container__predefined-ranges > button:first-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.container__predefined-ranges > button:last-child {
    border-right: none !important;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.container__months {
    box-shadow: 0 0 10px rgba(0,0,0,.1) !important;
    border-radius: 6px !important;
    -webkit-border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    -ms-border-radius: 6px !important;
    -o-border-radius: 6px !important;
    justify-content: center;
}

.litepicker .container__days .day-item.is-today {
    color: var(--nav-current-color);
    background: var(--secondary-transparent);
}

.litepicker .container__days .day-item {
    color: var(--litepicker-day-color);
    cursor: pointer;
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    border-radius: 50%;
    transition: .4s;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}

.litepicker .container__days .day-item:hover {
    border: none;
    color: var(--primary-color);
    background: var(--primary-transparent);
}

.litepicker .container__days .day-item.is-in-range {
    color: var(--nav-current-color);
    background-color: var(--secondary-transparent);
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.litepicker .container__days .day-item.is-start-date.is-end-date {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.litepicker .container__days .day-item.is-end-date {
    color: var(--nav-current-color);
    background-color: var(--nav-current-background-color);
    border-radius: 0 50% 50% 0;
    -webkit-border-radius: 0 50% 50% 0;
    -moz-border-radius: 0 50% 50% 0;
    -ms-border-radius: 0 50% 50% 0;
    -o-border-radius: 0 50% 50% 0;
}

.litepicker .container__days .day-item.is-start-date {
    color: var(--nav-current-color);
    background-color: var(--nav-current-background-color);
    border-radius: 50% 0 0 50%;
    -webkit-border-radius: 50% 0 0 50%;
    -moz-border-radius: 50% 0 0 50%;
    -ms-border-radius: 50% 0 0 50%;
    -o-border-radius: 50% 0 0 50%;
}

.litepicker .container__days .day-item.is-end-date.is-flipped {
    border-radius: 50% 0 0 50%;
    -webkit-border-radius: 50% 0 0 50%;
    -moz-border-radius: 50% 0 0 50%;
    -ms-border-radius: 50% 0 0 50%;
    -o-border-radius: 50% 0 0 50%;
}

.litepicker .container__days .day-item.is-start-date.is-flipped {
    border-radius: 0 50% 50% 0;
    -webkit-border-radius: 0 50% 50% 0;
    -moz-border-radius: 0 50% 50% 0;
    -ms-border-radius: 0 50% 50% 0;
    -o-border-radius: 0 50% 50% 0;
}

.month-item {
    padding: 15px !important;
}

.litepicker .container__months.columns-2 {
    width: auto;
}

.litepicker .container__tooltip {
    color: var(--nav-default-color);
    background-color: var(--nav-hover-background-color);
}

.litepicker[data-plugins*="ranges"] > .container__main > .container__predefined-ranges button {
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.litepicker[data-plugins*="ranges"] > .container__main > .container__predefined-ranges button:hover {
    cursor: pointer;
    opacity: 1;
    color: var(--nav-hover-color);
}

.litepicker .container__months .month-item-header .button-next-month:hover>svg {
    fill: var(--secondary-color) !important;
}

.litepicker .container__months .month-item-header .button-previous-month:hover>svg {
    fill: var(--secondary-color) !important;
}

@media (max-width: 525px) {
    #datepicker .container__main {
        flex-wrap: wrap;
    }

    #datepicker .container__predefined-ranges {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }
}

/* ---- End Date picker ---- */


/* --- Sensor Data --- */

.card {
    background: var(--white);
    margin: 15px;
    padding: 20px 15px;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.card.vega-embed summary {
    transform: translate(-15px, 15px);
}

/* Remove default link styling from card anchors */
#kpi-cards a {
  color: inherit; /* keep text color normal */
  border: none !important; /* no dashed underline */
}

/* Hover effect for cards */
#kpi-cards a .card {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#kpi-cards a:hover .card {
  background-color: var(--secondary-transparent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* subtle shadow */
}


.role-title-text text {
    fill: var(--primary-color);
}


#vg-tooltip-element {
    font-size: 16px;
}
#vg-tooltip-element table tr td.value {
    max-height: inherit !important;
}

/* --- End Sensor Data --- */


/* ---- Header action button ---- */

/* Left/right action columns: match the card's 15px margin so pillboxes center correctly */
.col-action-left {
    padding-left: 15px;
}

.col-action-right {
    padding-right: 15px;
}

/* Sidepanels inside a padded action column must be pulled back to the screen edge */
.col-action-left .sidepanel {
    margin-left: -15px;
}

.header-action-button {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.header-action-button .btn {
    padding-left: 15px;
    padding-right: 15px;
    height: 100%;
    align-items: center;
}
.header-action-button>div {
    height: auto;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    padding: 0;
}

.header-action-button>div * {
    float: none !important;
}

.header-action-button>div button,
.header-action-button>div a,
.header-action-button>div label {
    font-size: 15px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 100% !important;
    padding: 15px !important;
    line-height: normal;
    border-radius: 0px !important;
    text-align: center;
    width: 100%;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -ms-border-radius: 0px !important;
    -o-border-radius: 0px !important;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}
.header-action-button>div button,
.header-action-button>div a {
    border: none;
    outline: none !important;
    box-shadow: none;
    background: var(--primary-color);
    color: var(--white);
    border-right: 1px solid var(--primary-border-color) !important;
    text-decoration: none;
}
.rq-style.header-action-button>div button,
.rq-style.header-action-button>div label {
    padding: 15px 25px;
}

.header-action-button>div button:hover, .header-action-button>div button:focus,
.header-action-button>div a:hover, .header-action-button>div a:focus {
    background: var(--primary-hover-color) !important;
}

.header-action-button>div:first-of-type button,
.header-action-button>div:first-of-type a,
.header-action-button>div:first-of-type label {
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
}

.header-action-button>div:last-of-type button,
.header-action-button>div:last-of-type a,
.header-action-button>div:last-of-type label {
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
}
.header-action-button>div:last-of-type button,
.header-action-button>div:last-of-type a {
    border-right: none;
}

.create-button:hover {
    color: var(--create-color) !important;
}
.delete-button:hover {
    color: var(--delete-color) !important;
}
.nav-button:hover {
    color: var(--nav-hover-color) !important;
}

@media screen and (max-width: 767px) {
    .header-action-button {
        padding-left: 15px;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .header-action-button>div button,
    .header-action-button>div label {
        margin-bottom: 15px;
        border-radius: 15px !important;
        -webkit-border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        -ms-border-radius: 15px !important;
        -o-border-radius: 15px !important;
    }

    .header-action-button>div {
        width: 100% !important;
        padding-left: 15px;
    }
}

/* ---- End Header action button ---- */



/* ---- Asset Form ---- */

.asset-form .form-group {
    display: block !important;
    float: none !important;
}

.asset-form .control-label {
    width: auto !important;
    display: inline-block;
    float: none !important;
    text-align: left !important;
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 10px;
    padding-top: 0;
    color: var(--primary-color);
}

.asset-form .form-group input {
    padding: 15px 15px !important;
    height: auto;
    border: 1px solid var(--light-gray);
}

.asset-form .form-group input:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 10px var(--secondary-transparent);
}

.asset-form:first-child .form-group {
    margin-top: 20px !important;
}

.asset-form .form-group>div {
    width: auto !important;
    display: block;
    float: none !important;
}

.asset-form button[type="submit"]:hover {
    color: var(--nav-hover-color);
    background: var(--nav-hover-background-color) !important;
}

.bk-canvas {
    margin-top: 15px;
}

@media (max-width: 767px) {
    .asset-form button[type="submit"]  {
        margin-bottom: 30px;
    }

    .bk-plot-layout {
        margin-bottom: 30px;
    }
}

.form-horizontal .form-group:last-child, .form-horizontal .form-group.last {
    margin-bottom: 0;
}
.form-horizontal {
    margin-top: 15px;
}

.asset-form .form-group-bordered {
    border: 2px solid rgb(169, 176, 176);
    padding: 10px;
    margin-bottom: 10px;
}

/* ---- End Asset Form ---- */


/* ---- New asset form ---- */

.new-asset-form label {
    color: var(--primary-color);
}

.new-asset-form {
    margin-bottom: 50px;
}

.new-asset-form input, .new-asset-form select {
    padding: 10px 15px !important;
    height: auto !important;
    box-shadow: none !important;
    transition: .4s;
    border-radius: 4px;
    border: 1px solid var(--light-gray);
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.new-asset-form input:focus, .new-asset-form select:focus {
    border: 1px solid var(--primary-border-color);
}

.new-asset-form input[type="submit"] {
    color: var(--nav-default-color);
    background: var(--nav-default-background-color);
    border-radius: 4px;
    padding: 12px 35px !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
.new-asset-form input[type="submit"]:hover {
    color: var(--create-color) !important;
    background: var(--nav-hover-background-color) !important;
}

/* ---- End New asset form ---- */



/* ---- Sensors on asset page ---- */
/* [id^=DataTables_Table] [id$=filter] matches all the ids starting with DataTables_Table and ending with filter */

.sensors-asset .dataTables_wrapper {
    margin-top: 30px;
}

.sensors-asset .dataTables_filter input {
    border: var(--light-gray) 1px solid;
    padding: 10px;
    outline: none;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}

.sensors-asset .dataTables_filter input:focus {
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    border-color: var(--secondary-color);
}

.sensors-asset .dataTables_length select {
    border: var(--light-gray) 1px solid !important;
    padding: 10px !important;
    outline: none !important;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}

.sensors-asset .dataTables_length select:focus {
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    border-color: var(--secondary-color) !important;
}

.sensors-asset td a {
    padding: 10px 20px;
    color: var(--nav-default-color);
    background: var(--nav-default-background-color);
    white-space: nowrap;
    line-height: 14px;
    text-decoration: none;
    transition: .4s;
    border-radius: 6px;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.sensors-asset td a:hover {
    color: var(--nav-hover-color);
    background: var(--nav-hover-background-color);
}

.sensors-asset td {
    font-size: 14px;
}

.sensors-asset .floatThead-wrapper {
    margin-bottom: 10px !important;
}

/* ---- Sensors on asset page ---- */



#analysischart {
    margin-top: 40px;
    overflow-x: auto;
}


#actuatorschart {
    margin-top: 40px;
    margin-bottom: 100px;
}


/* ---- User Action Button ---- */

.user-action-button {
    width: auto;
    padding-right: 0 ;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* ---- Login / Reset PWD forms ---- */

.login-form input:not([type="checkbox"], [type="submit"]),
.forgot-pwd-form input:not([type="checkbox"], [type="submit"]){
    width: 100%;
    padding: 10px 15px;
    border-radius: 4px;
    outline: none !important;
    border: 1px solid var(--light-gray);
    transition: .4s;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}

.login-form input:not([type="checkbox"], [type="submit"]):focus,
.forgot-pwd-form input:not([type="checkbox"], [type="submit"]):focus{
    border: 1px solid var(--primary-border-color);
}

.login-form input[type="submit"],
.forgot-pwd-form input[type="submit"]{
    padding: 13px 35px;
    color: var(--white);
    background: var(--primary-color);
    border: none;
    border-radius: 4px;
    transition: .4s;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}

.login-form input[type="submit"]:hover,
.forgot-pwd-form input[type="submit"]:hover {
    background: var(--primary-hover-color);
}

.login-form .btn-link,
.forgot-pwd-form .btn-link {
    background: none !important;
    color: var(--primary-color);
    padding: 0;
}
@media screen and (max-width: 767px) {
    .login-form h1,
    .forgot-pwd-form h1 {
        margin-bottom: 20px;
    }
}

/* ---- End Login / Reset PWD forms ---- */


.mapbox-logo {
  position: absolute;
  display: block;
  height: 20px;
  width: 65px;
  left: 10px;
  bottom: 10px;
  text-indent: -9999px;
  z-index: 99999;
  overflow: hidden;

  /* `background-image` contains the Mapbox logo */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgODAuNDcgMjAuMDIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDgwLjQ3IDIwLjAyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe29wYWNpdHk6MC42O2ZpbGw6I0ZGRkZGRjtlbmFibGUtYmFja2dyb3VuZDpuZXcgICAgO30uc3Qxe29wYWNpdHk6MC42O2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fTwvc3R5bGU+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTc5LjI5LDEzLjYxYzAsMC4xMS0wLjA5LDAuMi0wLjIsMC4yaC0xLjUzYy0wLjEyLDAtMC4yMy0wLjA2LTAuMjktMC4xNmwtMS4zNy0yLjI4bC0xLjM3LDIuMjhjLTAuMDYsMC4xLTAuMTcsMC4xNi0wLjI5LDAuMTZoLTEuNTNjLTAuMDQsMC0wLjA4LTAuMDEtMC4xMS0wLjAzYy0wLjA5LTAuMDYtMC4xMi0wLjE4LTAuMDYtMC4yN2MwLDAsMCwwLDAsMGwyLjMxLTMuNWwtMi4yOC0zLjQ3Yy0wLjAyLTAuMDMtMC4wMy0wLjA3LTAuMDMtMC4xMWMwLTAuMTEsMC4wOS0wLjIsMC4yLTAuMmgxLjUzYzAuMTIsMCwwLjIzLDAuMDYsMC4yOSwwLjE2bDEuMzQsMi4yNWwxLjMzLTIuMjRjMC4wNi0wLjEsMC4xNy0wLjE2LDAuMjktMC4xNmgxLjUzYzAuMDQsMCwwLjA4LDAuMDEsMC4xMSwwLjAzYzAuMDksMC4wNiwwLjEyLDAuMTgsMC4wNiwwLjI3YzAsMCwwLDAsMCwwTDc2Ljk2LDEwbDIuMzEsMy41Qzc5LjI4LDEzLjUzLDc5LjI5LDEzLjU3LDc5LjI5LDEzLjYxeiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02My4wOSw5LjE2Yy0wLjM3LTEuNzktMS44Ny0zLjEyLTMuNjYtMy4xMmMtMC45OCwwLTEuOTMsMC40LTIuNiwxLjEyVjMuMzdjMC0wLjEyLTAuMS0wLjIyLTAuMjItMC4yMmgtMS4zM2MtMC4xMiwwLTAuMjIsMC4xLTAuMjIsMC4yMnYxMC4yMWMwLDAuMTIsMC4xLDAuMjIsMC4yMiwwLjIyaDEuMzNjMC4xMiwwLDAuMjItMC4xLDAuMjItMC4yMnYtMC43YzAuNjgsMC43MSwxLjYyLDEuMTIsMi42LDEuMTJjMS43OSwwLDMuMjktMS4zNCwzLjY2LTMuMTNDNjMuMjEsMTAuMyw2My4yMSw5LjcyLDYzLjA5LDkuMTZMNjMuMDksOS4xNnogTTU5LjEyLDEyLjQxYy0xLjI2LDAtMi4yOC0xLjA2LTIuMy0yLjM2VjkuOTljMC4wMi0xLjMxLDEuMDQtMi4zNiwyLjMtMi4zNnMyLjMsMS4wNywyLjMsMi4zOVM2MC4zOSwxMi40MSw1OS4xMiwxMi40MXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjguMjYsNi4wNGMtMS44OS0wLjAxLTMuNTQsMS4yOS0zLjk2LDMuMTNjLTAuMTIsMC41Ni0wLjEyLDEuMTMsMCwxLjY5YzAuNDIsMS44NSwyLjA3LDMuMTYsMy45NywzLjE0YzIuMjQsMCw0LjA2LTEuNzgsNC4wNi0zLjk5UzcwLjUxLDYuMDQsNjguMjYsNi4wNHogTTY4LjI0LDEyLjQyYy0xLjI3LDAtMi4zLTEuMDctMi4zLTIuMzlzMS4wMy0yLjQsMi4zLTIuNHMyLjMsMS4wNywyLjMsMi4zOVM2OS41MSwxMi40MSw2OC4yNCwxMi40Mkw2OC4yNCwxMi40MnoiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNNTkuMTIsNy42M2MtMS4yNiwwLTIuMjgsMS4wNi0yLjMsMi4zNnYwLjA2YzAuMDIsMS4zMSwxLjA0LDIuMzYsMi4zLDIuMzZzMi4zLTEuMDcsMi4zLTIuMzlTNjAuMzksNy42Myw1OS4xMiw3LjYzeiBNNTkuMTIsMTEuMjNjLTAuNiwwLTEuMDktMC41My0xLjExLTEuMTlWMTBjMC4wMS0wLjY2LDAuNTEtMS4xOSwxLjExLTEuMTlzMS4xMSwwLjU0LDEuMTEsMS4yMVM1OS43NCwxMS4yMyw1OS4xMiwxMS4yM3oiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNNjguMjQsNy42M2MtMS4yNywwLTIuMywxLjA3LTIuMywyLjM5czEuMDMsMi4zOSwyLjMsMi4zOXMyLjMtMS4wNywyLjMtMi4zOVM2OS41MSw3LjYzLDY4LjI0LDcuNjN6IE02OC4yNCwxMS4yM2MtMC42MSwwLTEuMTEtMC41NC0xLjExLTEuMjFzMC41LTEuMiwxLjExLTEuMnMxLjExLDAuNTQsMS4xMSwxLjIxUzY4Ljg1LDExLjIzLDY4LjI0LDExLjIzeiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00My41Niw2LjI0aC0xLjMzYy0wLjEyLDAtMC4yMiwwLjEtMC4yMiwwLjIydjAuN2MtMC42OC0wLjcxLTEuNjItMS4xMi0yLjYtMS4xMmMtMi4wNywwLTMuNzUsMS43OC0zLjc1LDMuOTlzMS42OSwzLjk5LDMuNzUsMy45OWMwLjk5LDAsMS45My0wLjQxLDIuNi0xLjEzdjAuN2MwLDAuMTIsMC4xLDAuMjIsMC4yMiwwLjIyaDEuMzNjMC4xMiwwLDAuMjItMC4xLDAuMjItMC4yMlY2LjQ0YzAtMC4xMS0wLjA5LTAuMjEtMC4yMS0wLjIxQzQzLjU3LDYuMjQsNDMuNTcsNi4yNCw0My41Niw2LjI0eiBNNDIuMDIsMTAuMDVjLTAuMDEsMS4zMS0xLjA0LDIuMzYtMi4zLDIuMzZzLTIuMy0xLjA3LTIuMy0yLjM5czEuMDMtMi40LDIuMjktMi40YzEuMjcsMCwyLjI4LDEuMDYsMi4zLDIuMzZMNDIuMDIsMTAuMDV6Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTM5LjcyLDcuNjNjLTEuMjcsMC0yLjMsMS4wNy0yLjMsMi4zOXMxLjAzLDIuMzksMi4zLDIuMzlzMi4yOC0xLjA2LDIuMy0yLjM2VjkuOTlDNDIsOC42OCw0MC45OCw3LjYzLDM5LjcyLDcuNjN6IE0zOC42MiwxMC4wMmMwLTAuNjcsMC41LTEuMjEsMS4xMS0xLjIxYzAuNjEsMCwxLjA5LDAuNTMsMS4xMSwxLjE5djAuMDRjLTAuMDEsMC42NS0wLjUsMS4xOC0xLjExLDEuMThTMzguNjIsMTAuNjgsMzguNjIsMTAuMDJ6Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTQ5LjkxLDYuMDRjLTAuOTgsMC0xLjkzLDAuNC0yLjYsMS4xMlY2LjQ1YzAtMC4xMi0wLjEtMC4yMi0wLjIyLTAuMjJoLTEuMzNjLTAuMTIsMC0wLjIyLDAuMS0wLjIyLDAuMjJ2MTAuMjFjMCwwLjEyLDAuMSwwLjIyLDAuMjIsMC4yMmgxLjMzYzAuMTIsMCwwLjIyLTAuMSwwLjIyLTAuMjJ2LTMuNzhjMC42OCwwLjcxLDEuNjIsMS4xMiwyLjYxLDEuMTJjMi4wNywwLDMuNzUtMS43OCwzLjc1LTMuOTlTNTEuOTgsNi4wNCw0OS45MSw2LjA0eiBNNDkuNiwxMi40MmMtMS4yNiwwLTIuMjgtMS4wNi0yLjMtMi4zNlY5Ljk5YzAuMDItMS4zMSwxLjA0LTIuMzcsMi4yOS0yLjM3YzEuMjYsMCwyLjMsMS4wNywyLjMsMi4zOVM1MC44NiwxMi40MSw0OS42LDEyLjQyTDQ5LjYsMTIuNDJ6Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTQ5LjYsNy42M2MtMS4yNiwwLTIuMjgsMS4wNi0yLjMsMi4zNnYwLjA2YzAuMDIsMS4zMSwxLjA0LDIuMzYsMi4zLDIuMzZzMi4zLTEuMDcsMi4zLTIuMzlTNTAuODYsNy42Myw0OS42LDcuNjN6IE00OS42LDExLjIzYy0wLjYsMC0xLjA5LTAuNTMtMS4xMS0xLjE5VjEwQzQ4LjUsOS4zNCw0OSw4LjgxLDQ5LjYsOC44MWMwLjYsMCwxLjExLDAuNTUsMS4xMSwxLjIxUzUwLjIxLDExLjIzLDQ5LjYsMTEuMjN6Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTM0LjM2LDEzLjU5YzAsMC4xMi0wLjEsMC4yMi0wLjIyLDAuMjJoLTEuMzRjLTAuMTIsMC0wLjIyLTAuMS0wLjIyLTAuMjJWOS4yNGMwLTAuOTMtMC43LTEuNjMtMS41NC0xLjYzYy0wLjc2LDAtMS4zOSwwLjY3LTEuNTEsMS41NGwwLjAxLDQuNDRjMCwwLjEyLTAuMSwwLjIyLTAuMjIsMC4yMmgtMS4zNGMtMC4xMiwwLTAuMjItMC4xLTAuMjItMC4yMlY5LjI0YzAtMC45My0wLjctMS42My0xLjU0LTEuNjNjLTAuODEsMC0xLjQ3LDAuNzUtMS41MiwxLjcxdjQuMjdjMCwwLjEyLTAuMSwwLjIyLTAuMjIsMC4yMmgtMS4zM2MtMC4xMiwwLTAuMjItMC4xLTAuMjItMC4yMlY2LjQ0YzAuMDEtMC4xMiwwLjEtMC4yMSwwLjIyLTAuMjFoMS4zM2MwLjEyLDAsMC4yMSwwLjEsMC4yMiwwLjIxdjAuNjNjMC40OC0wLjY1LDEuMjQtMS4wNCwyLjA2LTEuMDVoMC4wM2MxLjA0LDAsMS45OSwwLjU3LDIuNDgsMS40OGMwLjQzLTAuOSwxLjMzLTEuNDgsMi4zMi0xLjQ5YzEuNTQsMCwyLjc5LDEuMTksMi43NiwyLjY1TDM0LjM2LDEzLjU5eiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik04MC4zMiwxMi45N2wtMC4wNy0wLjEyTDc4LjM4LDEwbDEuODUtMi44MWMwLjQyLTAuNjQsMC4yNS0xLjQ5LTAuMzktMS45MmMtMC4wMS0wLjAxLTAuMDItMC4wMS0wLjAzLTAuMDJjLTAuMjItMC4xNC0wLjQ4LTAuMjEtMC43NC0wLjIxaC0xLjUzYy0wLjUzLDAtMS4wMywwLjI4LTEuMywwLjc0bC0wLjMyLDAuNTNsLTAuMzItMC41M2MtMC4yOC0wLjQ2LTAuNzctMC43NC0xLjMxLTAuNzRoLTEuNTNjLTAuNTcsMC0xLjA4LDAuMzUtMS4yOSwwLjg4Yy0yLjA5LTEuNTgtNS4wMy0xLjQtNi45MSwwLjQzYy0wLjMzLDAuMzItMC42MiwwLjY5LTAuODUsMS4wOWMtMC44NS0xLjU1LTIuNDUtMi42LTQuMjgtMi42Yy0wLjQ4LDAtMC45NiwwLjA3LTEuNDEsMC4yMlYzLjM3YzAtMC43OC0wLjYzLTEuNDEtMS40LTEuNDFoLTEuMzNjLTAuNzcsMC0xLjQsMC42My0xLjQsMS40djMuNTdjLTAuOS0xLjMtMi4zOC0yLjA4LTMuOTctMi4wOWMtMC43LDAtMS4zOSwwLjE1LTIuMDIsMC40NWMtMC4yMy0wLjE2LTAuNTEtMC4yNS0wLjgtMC4yNWgtMS4zM2MtMC40MywwLTAuODMsMC4yLTEuMSwwLjUzYy0wLjAyLTAuMDMtMC4wNC0wLjA1LTAuMDctMC4wOGMtMC4yNy0wLjI5LTAuNjUtMC40NS0xLjA0LTAuNDVoLTEuMzJjLTAuMjksMC0wLjU3LDAuMDktMC44LDAuMjVDNDAuOCw1LDQwLjEyLDQuODUsMzkuNDIsNC44NWMtMS43NCwwLTMuMjcsMC45NS00LjE2LDIuMzhjLTAuMTktMC40NC0wLjQ2LTAuODUtMC43OS0xLjE5Yy0wLjc2LTAuNzctMS44LTEuMTktMi44OC0xLjE5aC0wLjAxYy0wLjg1LDAuMDEtMS42NywwLjMxLTIuMzQsMC44NGMtMC43LTAuNTQtMS41Ni0wLjg0LTIuNDUtMC44NGgtMC4wM2MtMC4yOCwwLTAuNTUsMC4wMy0wLjgyLDAuMWMtMC4yNywwLjA2LTAuNTMsMC4xNS0wLjc4LDAuMjdjLTAuMi0wLjExLTAuNDMtMC4xNy0wLjY3LTAuMTdoLTEuMzNjLTAuNzgsMC0xLjQsMC42My0xLjQsMS40djcuMTRjMCwwLjc4LDAuNjMsMS40LDEuNCwxLjRoMS4zM2MwLjc4LDAsMS40MS0wLjYzLDEuNDEtMS40MWMwLDAsMCwwLDAsMFY5LjM1YzAuMDMtMC4zNCwwLjIyLTAuNTYsMC4zNC0wLjU2YzAuMTcsMCwwLjM2LDAuMTcsMC4zNiwwLjQ1djQuMzVjMCwwLjc4LDAuNjMsMS40LDEuNCwxLjRoMS4zNGMwLjc4LDAsMS40LTAuNjMsMS40LTEuNGwtMC4wMS00LjM1YzAuMDYtMC4zLDAuMjQtMC40NSwwLjMzLTAuNDVjMC4xNywwLDAuMzYsMC4xNywwLjM2LDAuNDV2NC4zNWMwLDAuNzgsMC42MywxLjQsMS40LDEuNGgxLjM0YzAuNzgsMCwxLjQtMC42MywxLjQtMS40di0wLjM2YzAuOTEsMS4yMywyLjM0LDEuOTYsMy44NywxLjk2YzAuNywwLDEuMzktMC4xNSwyLjAyLTAuNDVjMC4yMywwLjE2LDAuNTEsMC4yNSwwLjgsMC4yNWgxLjMyYzAuMjksMCwwLjU3LTAuMDksMC44LTAuMjV2MS45MWMwLDAuNzgsMC42MywxLjQsMS40LDEuNGgxLjMzYzAuNzgsMCwxLjQtMC42MywxLjQtMS40di0xLjY5YzAuNDYsMC4xNCwwLjk0LDAuMjIsMS40MiwwLjIxYzEuNjIsMCwzLjA3LTAuODMsMy45Ny0yLjF2MC41YzAsMC43OCwwLjYzLDEuNCwxLjQsMS40aDEuMzNjMC4yOSwwLDAuNTctMC4wOSwwLjgtMC4yNWMwLjYzLDAuMywxLjMyLDAuNDUsMi4wMiwwLjQ1YzEuODMsMCwzLjQzLTEuMDUsNC4yOC0yLjZjMS40NywyLjUyLDQuNzEsMy4zNiw3LjIyLDEuODljMC4xNy0wLjEsMC4zNC0wLjIxLDAuNS0wLjM0YzAuMjEsMC41MiwwLjcyLDAuODcsMS4yOSwwLjg2aDEuNTNjMC41MywwLDEuMDMtMC4yOCwxLjMtMC43NGwwLjM1LTAuNThsMC4zNSwwLjU4YzAuMjgsMC40NiwwLjc3LDAuNzQsMS4zMSwwLjc0aDEuNTJjMC43NywwLDEuMzktMC42MywxLjM4LTEuMzlDODAuNDcsMTMuMzgsODAuNDIsMTMuMTcsODAuMzIsMTIuOTdMODAuMzIsMTIuOTd6IE0zNC4xNSwxMy44MWgtMS4zNGMtMC4xMiwwLTAuMjItMC4xLTAuMjItMC4yMlY5LjI0YzAtMC45My0wLjctMS42My0xLjU0LTEuNjNjLTAuNzYsMC0xLjM5LDAuNjctMS41MSwxLjU0bDAuMDEsNC40NGMwLDAuMTItMC4xLDAuMjItMC4yMiwwLjIyaC0xLjM0Yy0wLjEyLDAtMC4yMi0wLjEtMC4yMi0wLjIyVjkuMjRjMC0wLjkzLTAuNy0xLjYzLTEuNTQtMS42M2MtMC44MSwwLTEuNDcsMC43NS0xLjUyLDEuNzF2NC4yN2MwLDAuMTItMC4xLDAuMjItMC4yMiwwLjIyaC0xLjMzYy0wLjEyLDAtMC4yMi0wLjEtMC4yMi0wLjIyVjYuNDRjMC4wMS0wLjEyLDAuMS0wLjIxLDAuMjItMC4yMWgxLjMzYzAuMTIsMCwwLjIxLDAuMSwwLjIyLDAuMjF2MC42M2MwLjQ4LTAuNjUsMS4yNC0xLjA0LDIuMDYtMS4wNWgwLjAzYzEuMDQsMCwxLjk5LDAuNTcsMi40OCwxLjQ4YzAuNDMtMC45LDEuMzMtMS40OCwyLjMyLTEuNDljMS41NCwwLDIuNzksMS4xOSwyLjc2LDIuNjVsMC4wMSw0LjkxQzM0LjM3LDEzLjcsMzQuMjcsMTMuOCwzNC4xNSwxMy44MUMzNC4xNSwxMy44MSwzNC4xNSwxMy44MSwzNC4xNSwxMy44MXogTTQzLjc4LDEzLjU5YzAsMC4xMi0wLjEsMC4yMi0wLjIyLDAuMjJoLTEuMzNjLTAuMTIsMC0wLjIyLTAuMS0wLjIyLTAuMjJ2LTAuNzFDNDEuMzQsMTMuNiw0MC40LDE0LDM5LjQyLDE0Yy0yLjA3LDAtMy43NS0xLjc4LTMuNzUtMy45OXMxLjY5LTMuOTksMy43NS0zLjk5YzAuOTgsMCwxLjkyLDAuNDEsMi42LDEuMTJ2LTAuN2MwLTAuMTIsMC4xLTAuMjIsMC4yMi0wLjIyaDEuMzNjMC4xMS0wLjAxLDAuMjEsMC4wOCwwLjIyLDAuMmMwLDAuMDEsMCwwLjAxLDAsMC4wMlYxMy41OXogTTQ5LjkxLDE0Yy0wLjk4LDAtMS45Mi0wLjQxLTIuNi0xLjEydjMuNzhjMCwwLjEyLTAuMSwwLjIyLTAuMjIsMC4yMmgtMS4zM2MtMC4xMiwwLTAuMjItMC4xLTAuMjItMC4yMlY2LjQ1YzAtMC4xMiwwLjEtMC4yMSwwLjIyLTAuMjFoMS4zM2MwLjEyLDAsMC4yMiwwLjEsMC4yMiwwLjIydjAuN2MwLjY4LTAuNzIsMS42Mi0xLjEyLDIuNi0xLjEyYzIuMDcsMCwzLjc1LDEuNzcsMy43NSwzLjk4UzUxLjk4LDE0LDQ5LjkxLDE0eiBNNjMuMDksMTAuODdDNjIuNzIsMTIuNjUsNjEuMjIsMTQsNTkuNDMsMTRjLTAuOTgsMC0xLjkyLTAuNDEtMi42LTEuMTJ2MC43YzAsMC4xMi0wLjEsMC4yMi0wLjIyLDAuMjJoLTEuMzNjLTAuMTIsMC0wLjIyLTAuMS0wLjIyLTAuMjJWMy4zN2MwLTAuMTIsMC4xLTAuMjIsMC4yMi0wLjIyaDEuMzNjMC4xMiwwLDAuMjIsMC4xLDAuMjIsMC4yMnYzLjc4YzAuNjgtMC43MSwxLjYyLTEuMTIsMi42LTEuMTFjMS43OSwwLDMuMjksMS4zMywzLjY2LDMuMTJDNjMuMjEsOS43Myw2My4yMSwxMC4zMSw2My4wOSwxMC44N0w2My4wOSwxMC44N0w2My4wOSwxMC44N3ogTTY4LjI2LDE0LjAxYy0xLjksMC4wMS0zLjU1LTEuMjktMy45Ny0zLjE0Yy0wLjEyLTAuNTYtMC4xMi0xLjEzLDAtMS42OWMwLjQyLTEuODUsMi4wNy0zLjE1LDMuOTctMy4xNGMyLjI1LDAsNC4wNiwxLjc4LDQuMDYsMy45OVM3MC41LDE0LjAxLDY4LjI2LDE0LjAxTDY4LjI2LDE0LjAxeiBNNzkuMDksMTMuODFoLTEuNTNjLTAuMTIsMC0wLjIzLTAuMDYtMC4yOS0wLjE2bC0xLjM3LTIuMjhsLTEuMzcsMi4yOGMtMC4wNiwwLjEtMC4xNywwLjE2LTAuMjksMC4xNmgtMS41M2MtMC4wNCwwLTAuMDgtMC4wMS0wLjExLTAuMDNjLTAuMDktMC4wNi0wLjEyLTAuMTgtMC4wNi0wLjI3YzAsMCwwLDAsMCwwbDIuMzEtMy41bC0yLjI4LTMuNDdjLTAuMDItMC4wMy0wLjAzLTAuMDctMC4wMy0wLjExYzAtMC4xMSwwLjA5LTAuMiwwLjItMC4yaDEuNTNjMC4xMiwwLDAuMjMsMC4wNiwwLjI5LDAuMTZsMS4zNCwyLjI1bDEuMzQtMi4yNWMwLjA2LTAuMSwwLjE3LTAuMTYsMC4yOS0wLjE2aDEuNTNjMC4wNCwwLDAuMDgsMC4wMSwwLjExLDAuMDNjMC4wOSwwLjA2LDAuMTIsMC4xOCwwLjA2LDAuMjdjMCwwLDAsMCwwLDBMNzYuOTYsMTBsMi4zMSwzLjVjMC4wMiwwLjAzLDAuMDMsMC4wNywwLjAzLDAuMTFDNzkuMjksMTMuNzIsNzkuMiwxMy44MSw3OS4wOSwxMy44MUM3OS4wOSwxMy44MSw3OS4wOSwxMy44MSw3OS4wOSwxMy44MUw3OS4wOSwxMy44MXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTAsMS4yMWMtNC44NywwLTguODEsMy45NS04LjgxLDguODFzMy45NSw4LjgxLDguODEsOC44MXM4LjgxLTMuOTUsOC44MS04LjgxQzE4LjgxLDUuMTUsMTQuODcsMS4yMSwxMCwxLjIxeiBNMTQuMTgsMTIuMTljLTEuODQsMS44NC00LjU1LDIuMi02LjM4LDIuMmMtMC42NywwLTEuMzQtMC4wNS0yLTAuMTVjMCwwLTAuOTctNS4zNywyLjA0LTguMzljMC43OS0wLjc5LDEuODYtMS4yMiwyLjk4LTEuMjJjMS4yMSwwLDIuMzcsMC40OSwzLjIzLDEuMzVDMTUuOCw3LjczLDE1Ljg1LDEwLjUsMTQuMTgsMTIuMTl6Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTEwLDAuMDJjLTUuNTIsMC0xMCw0LjQ4LTEwLDEwczQuNDgsMTAsMTAsMTBzMTAtNC40OCwxMC0xMEMxOS45OSw0LjUsMTUuNTIsMC4wMiwxMCwwLjAyeiBNMTAsMTguODNjLTQuODcsMC04LjgxLTMuOTUtOC44MS04LjgxUzUuMTMsMS4yLDEwLDEuMnM4LjgxLDMuOTUsOC44MSw4LjgxQzE4LjgxLDE0Ljg5LDE0Ljg3LDE4LjgzLDEwLDE4LjgzeiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xNC4wNCw1Ljk4Yy0xLjc1LTEuNzUtNC41My0xLjgxLTYuMi0wLjE0QzQuODMsOC44Niw1LjgsMTQuMjMsNS44LDE0LjIzczUuMzcsMC45Nyw4LjM5LTIuMDRDMTUuODUsMTAuNSwxNS44LDcuNzMsMTQuMDQsNS45OHogTTExLjg4LDkuODdsLTAuODcsMS43OGwtMC44Ni0xLjc4TDguMzgsOS4wMWwxLjc3LTAuODZsMC44Ni0xLjc4bDAuODcsMS43OGwxLjc3LDAuODZMMTEuODgsOS44N3oiLz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEzLjY1LDkuMDEgMTEuODgsOS44NyAxMS4wMSwxMS42NSAxMC4xNSw5Ljg3IDguMzgsOS4wMSAxMC4xNSw4LjE1IDExLjAxLDYuMzcgMTEuODgsOC4xNSAiLz48L2c+PC9zdmc+);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 65px 20px;
}


/* ---- Classes as shortcuts for styling (keep?) ---- */

/* For rows with equal height columns */
.eq-height {
    display: flex;
}

.top-bottom {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
}

.spread {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.justify {
    text-align: justify;
}

/* ---- End Classes as shortcuts for styling (keep?) ---- */



/* ---- Unsure / potential Legacy ---- */

.sample-plot {
    height: 250px;
}

.data-set-plot {
    height: 320px;
}
.noeva {
    color: rgb(51, 122, 183);
}

.witheva {
    color: rgb(255, 127, 14);
}

#demo-page-link {
    display: none;
}

.agg-group {
    background-color: #F8F8F8;
}

.form-group.row {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  align-items: center;
}

#att-heading {
    display: flex;
    justify-content: flex-start;
}

div.heading-group {
    display: flex;
    align-items: center;
}

/* ---- End Unsure / potential Legacy ---- */


/* ---- Play/Pause button ---- */
.replay-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  bottom: 100px;
  top: 100px;
}

.replay-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* "Fast chart" toggle, relocated to the top of the replay column so it shares a
   column with the replay button (its top). Keep it clear of the play button and,
   in the narrow replay column, let it wrap and stay inside the column instead of
   overflowing onto the chart card. */
.fast-chart-toggle {
  /* Switch + "Fast chart (beta)" on a single line, centered. In the narrow replay
     column this can overflow the column a little — that's accepted, in exchange for
     the cleaner single-line look. */
  margin: 0.5rem 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  padding-left: 0; /* override Bootstrap .form-check's 2.5em */
}
.fast-chart-toggle .form-check-input {
  margin-left: 0; /* override the -2.5em float offset so the switch stays in flow */
  float: none;
}
.fast-chart-toggle .form-check-label {
  white-space: nowrap;
}

/* Mobile: let a one-finger vertical swipe scroll the page over the fast chart,
   while a two-finger pinch still zooms it (handled by ECharts). Without this the
   canvas would swallow the swipe. Desktop (mouse) is unaffected by touch-action. */
#fast-chart-container,
#fast-chart-container canvas {
  touch-action: pan-y !important;
}

#replay-time {
  margin-top: 15px;
}
#replay {
  cursor: pointer !important;
  margin-top: 190px;
  width: 50px;
  height: 50px;
  position: relative;
  border: none;
}
#replay:before, #replay:after {
  content: "";
  position: absolute;
  width: 0;
  border-style: solid;
  border-color: transparent;
  border-left-color: var(--secondary-color);
  transition: 0.3s;
}
#replay:not(.playing):before {
  height: 50px;
  border-width: 25px 0px 25px 50px;
}
#replay:not(.playing):after {
  left: 25px;
  top: 12.5px;
  height: 0;
  border-width: 12.5px 0 12.5px 25px;
}
#replay:before {
  left: 0;
  height: 50px;
  border-width: 0 0 0 16.6666666667px;
}
#replay:after {
  left: 33.3333333333px;
  top: 0px;
  height: 50px;
  border-width: 0 0 0 16.6666666667px;
}

#exportToCSVAction {
  cursor: pointer;
}

/* override rq-dashboard ellipsis styling to unhide important parts of the job kwargs */
.ellipsify {
  overflow: visible !important;
  white-space: normal !important;
}

/* Breadcrumb */
.breadcrumb {
  margin: 0px;
  background: var(--light-gray);
}
.breadcrumb .dropdown-menu {
    z-index: 1050;
    position: absolute;
}
.breadcrumb .dropdown-menu li a {
    text-decoration: none;
    color: var(--white);
}
.breadcrumb li a {
    text-decoration: none;
}
.breadcrumb a {
  color: var(--primary-color);
}
.breadcrumb a:hover {
  color: var(--primary-hover-color);
}
.breadcrumb-item + .breadcrumb-item::before {
  content: " > ";
  color: var(--primary-color);
}


/* Tooltip alignment */
.replay-tooltip > .tooltip-inner {
  text-align: left;
}

/* Show tooltip titles on touch screens */
[title] {
	position: relative;
}
body.touched [title]:hover > * {
	user-select: auto
}
body.touched [title]:hover:after {
	position: absolute;
	top: 100%;
	right: -10%;
	content: attr(title);
	border: 1px solid rgba(0, 0, 0, 0.2);
	background-color: white;
	box-shadow: 1px 1px 3px;
	padding: 0.3em;
	z-index: 1;
}

.table-responsive{
    padding: 20px;
    scrollbar-width: none;
}

.border-on-click {
    border: 2px solid var(--primary-color);
    border-radius: 4px;
}

.hidden-important {
    display: none !important;
}

.dropdown-toggle.fa-info::after {
    content: none;
}

/* FlexContext Modal Dialogue - Start */
.bg-fixed-val.nav-link.active {
    background-color: #E0F2E0 !important;
    border-bottom: 0 !important;
}

.bg-dynamic-val.nav-link.active {
    background-color: #C2E8C2 !important;
    border-bottom: 0 !important;
}

.bg-fixed-val.nav-link {
    background-color: var(--white) !important;
    color: #000;
}

.bg-dynamic-val.nav-link {
    background-color: var(--white) !important;
    color: #000;
}

.bg-fixed-val{
    background-color: #E0F2E0 !important;
    color: #000;
}

.bg-dynamic-val{
    background-color: #C2E8C2 !important;
    color: #000;
}
/* FlexContext Modal Dialogue - End*/

.jobs-time-ago, .time-ago {
    color: var(--gray);
}

/* Custom CSS for SVG */
.mark-image image {
  transform: translate(1px, 10px) !important;
  width: 34px !important;
  height: 20px !important;
  vertical-align: middle;
}

/* Custom CSS for No Style Link */
.no-style-link {
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
    background-color: transparent !important;
    padding: 0 !important;
}
.no-style-link:hover {
    color: inherit !important;
    background-color: transparent !important;
}

.bg-primary-custom {
    background-color: var(--primary-color) !important;
}

/* Toast highlighting */
.toast.highlight {
  animation: pulse 0.6s;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0px 0 var(--secondary-color); }
  50%  { box-shadow: 0 0 10px 4px var(--secondary-color); }
  100% { box-shadow: 0 0 0px 0 var(--secondary-color); }
}

#rescue-email {
  padding-inline-start: 0 !important;
  margin: 0 !important;
}

#rescue-email li {
  display: inline-block !important;
  border: 1px solid var(--gray);
  background: azure;
  margin-right: 1em;
  text-align: center;
  border-radius: 0.275rem;
}

.flex-nav.nav-link.active {
  border-bottom-color: #fff;
  background-color: #fff;
}


/* ---- JSON attributes editor (@json-editor/json-editor + Bootstrap 5) ---- */

/* Plain-text JSON textarea (JSON tab) */
.fm-json-textarea {
  min-height: 420px;
  height: 420px;     /* explicit height so Bootstrap's form-control baseline
                        doesn't shrink it to a single row on some browsers   */
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
}

/* Keep the form editor from collapsing to zero height */
.fm-je-container {
  min-height: 200px;
}

/* Remove Bootstrap validation decorations inside the form editor.
 * @json-editor/json-editor marks all fields .is-valid because our open schema
 * ({}) validates everything.  Bootstrap then adds a green border + checkmark
 * background-image to <select> elements, which overlaps the selected text. */
.fm-je-container .form-select.is-valid,
.fm-je-container .was-validated .form-select:valid {
  border-color: var(--bs-border-color);
  padding-right: 2.25rem;   /* back to normal — only the dropdown arrow       */
  /* Restore the plain dropdown-arrow background image (no checkmark overlay) */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-size: 16px 12px;
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
}

/* Type-switcher dropdown: give enough right-padding so the selected text
 * does not slide under the native dropdown arrow (which sits at ~40 px). */
.fm-je-container .je-switcher {
  padding: 0px 50px 0px 3px;
}

.fm-je-container .form-control.is-valid,
.fm-je-container .was-validated .form-control:valid {
  border-color: var(--bs-border-color);
  padding-right: 0.75rem;
  background-image: none;
}

/* ---- Fix: .je-modal divs must not affect .btn-group border-radius ---- *
 * @json-editor/json-editor places a div.je-modal inside .btn-group as a   *
 * panel container (not a button).  Bootstrap's sibling selectors treat it *
 * as a positional marker and strip radius from the adjacent buttons:       *
 *   • ":not(:last-child)" → strips right-radius from last .btn when       *
 *     .je-modal trails the group                                            *
 *   • ":not(.btn-check)+.btn" → strips left-radius from a .btn that       *
 *     directly follows .je-modal                                            *
 * Restore the expected radii with explicit overrides.                       */

/* Last button in a group that contains a .je-modal sibling: restore right radius */
.fm-je-container .btn-group:has(> div.je-modal) > button:last-of-type {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}

/* Button immediately following a .je-modal div: restore left radius */
.fm-je-container .btn-group > div.je-modal + button {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}

/* ---- Edit Attributes modal: ensure generous initial height ---- */
.fm-json-modal .modal-content {
  min-height: 70vh;
}

/* ---- Inline JSON panel (.je-modal) inside json-editor ---- *
 * Clicking the 'Edit JSON' button opens a div.je-modal that contains       *
 * a textarea and Save / Copy / Cancel buttons.  By default the panel       *
 * is width-constrained which wraps the footer buttons onto a second row.   *
 * Stretch it to the full container width; the textarea inherits that.      */
.fm-je-container .je-modal {
  width: 150% !important;
  max-width: 150% !important;
  box-sizing: border-box;
}

.fm-je-container .je-modal textarea {
  width: 100% !important;
  box-sizing: border-box;
}