flexmeasures-main/flexmeasures/ui/static/css/flexmeasures.css

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 h1,
.sidepanel h2,
.sidepanel h3,
.sidepanel 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 */
}

.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-type: none
}

.flashes.alert.alert-info {
    color: var(--black);
    background: var(--secondary-color);
    border: none;
    text-align: center;
    margin-top: 20px;
    text-transform: uppercase;
    font-weight: 700;
}

#tzwarn,#dstwarn,#sourcewarn {
    margin-top: 20px;
    margin-bottom: 20px;
    color: var(--secondary-color);
    background: var(--primary-color);
    border: none;
}

/* ---- 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);
}

i {
    font-size: normal;
    position: relative;
}
i:not(.supersize):before, i:not(.supersize):after {
    font-size: 24px;
}
.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 {
    margin-bottom: 20px;
}

.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) ;
}
.left-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 ---- */

@media (max-width: 767px) {
        .left-sidepanel-label {
            visibility: collapse;
        }
    }
@media (min-width: 768px) {
    .sidepanel h1,
    .sidepanel h2,
    .sidepanel h3,
    .sidepanel label {
        color: var(--nav-default-color) !important;
    }
    .leftside-dropdown {
        margin-left: -95px !important;
        color: var(--nav-default-color);
        background: var(--nav-default-background-color);
        width: calc(var(--litepicker-day-width) * 6);
        padding: 13px 10px;
        min-height: 35px;  // line-height + padding-top + padding-bottom
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        text-align: right;
    }
    .sidepanel-container {
        z-index: 20;
        position: relative;
    }
    .sidepanel,
    .left-sidepanel-label {
        color: var(--nav-default-color);
        background: var(--nav-default-background-color);
        width: calc(var(--litepicker-day-width) * 9);
        margin: 15px;
        padding: 20px 15px;
        min-height: 60px; /* line-height + padding-top + padding-bottom */
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
    }
    .left-sidepanel,
    .left-sidepanel-label {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }
    .sidepanel-container > .left-sidepanel:not(.sidepanel-show) {
        transform: translateX(-106%);
    }
    .left-sidepanel-label {
        margin: 0px;
        transform: translateX(-70%);
        text-align: right;
        position: absolute;
    }
    @media (hover: hover) {
        .sidepanel-container:hover > .left-sidepanel,
        .sidepanel-container:focus-within > .left-sidepanel {
            transform: translateX(-30px);
        }
    }
    @media (hover: none) {
        .sidepanel-container > .left-sidepanel.sidepanel-show {
            transform: translateX(-30px);
        }
    }
}


/* ---- 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-top: 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);
}

.role-title-text text {
    font-size: 20px;
    fill: var(--primary-color);
}

.sensor-data .row {
    margin: 0 !important;
}

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

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


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

.header-action-button {
    padding-top: 5px;
    display: flex;
    justify-content: space-around;

    width: 100% !important;
}

.header-action-button>div {
    flex: 1 1 auto;
    width: auto !important;
    padding: 0;
}

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

.header-action-button>div button,
.header-action-button>div label {
    font-size: 15px;
    padding: 15px 30px;
    line-height: 16px;
    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 {
    border: none;
    outline: none !important;
    box-shadow: none;
    background: var(--primary-color);
    border-right: 1px solid var(--primary-border-color) !important;
}
.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 {
    background: var(--primary-hover-color) !important;
}

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

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

.create-button:hover {
    color: var(--create-color) !important;
}
.delete-button:hover {
    color: var(--delete-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: 30px;
}

.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;
}

.user-action-button button {
    border-radius: 50px;
    transition: .4s;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}

@media screen and (max-width: 575.98px) {

    .user-action-button {
        padding-right: 15px;
    }
    
    .user-action-button button {
        width: 100%;
    }
}

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


/* ---- 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;
  justify-content: center;
}
#replay-time {
  margin-top: 15px;
}
#replay {
  cursor: pointer !important;
  margin-top: 190px;
  width: 50px;
  height: 50px;
  position: relative;
}
#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);
}


/* Show tooltip titles on touch screens */
[title] {
	border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius:2px;
	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;
}

.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;
}