/*
  Styling for the FlexMeasures Platform
*/

:root {
    /* colors by name */
    --primary-color: #1a3443;
    --primary-border-color: #102029;
    --primary-hover-color: #152b38;
    --primary-transparent: rgba(26, 52, 67, .2);
    --secondary-color: #f1a122;
    --secondary-hover-color: #ff9d00;
    --secondary-transparent: rgba(241, 161, 34, .2);
    --white: #FFF;
    --black: #000;
    --light-gray: #eeeeee;
    --gray: #bbb;
    --red: #c21431;
    --green: #14c231;

    /* colors by function */
    --nav-default-color: var(--white);
    --nav-default-background-color: var(--primary-color);
    --nav-hover-color: var(--secondary-hover-color);
    --nav-hover-background-color: var(--primary-hover-color);
    --nav-open-color: var(--secondary-color);
    --nav-open-background-color: var(--primary-color);
    --nav-current-color: var(--black);
    --nav-current-background-color: var(--secondary-color);
    --nav-current-hover-color: var(--black);
    --nav-current-hover-background-color: var(--secondary-hover-color);
    --create-color: var(--green);
    --delete-color: var(--red);
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

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

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

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

#spinner {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.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 {
    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 {
    margin-right: 30px;
    color: var(--secondary-color);
}

.navbar-default {
    background-color: var(--nav-default-background-color);
    border: none;
    z-index: 999991;
}

.navbar-default .navbar-nav>.active>a {
    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 {
    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;
}

.navbar-default .dropdown-menu {
    border: none !important;
}

.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;
    width: 200px;
    height: 100%;
}

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

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

.navbar-brand a span img {
    width: 200px;
}

.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: 28px;
        padding-bottom: 28px;
    }

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

}

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

.navbar-default .navbar-nav .open .dropdown-menu,
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: var(--nav-default-color);
    background-color: var(--nav-default-background-color);
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
    color: var(--nav-hover-color);
    background-color: var(--nav-hover-background-color);
}

#navbar-logo {
    height: 50px;
    position: fixed; top: 0; left: 0;
}

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



/* --- 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-container {
    width: 500px;
    height: 500px;
    overflow: hidden;
    position: relative;
    padding:0;
    border-radius: 25px;
}
.carousel {
    width: 500px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -250px;
}
.carousel .item img {
    display: block;
    margin: 0 auto;
    border-radius: 25px;
}
.carousel-control.left, .carousel-control.right {
    background:transparent;
}

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

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


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


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

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

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

.close:focus, .close:hover {
    color: var(--red);
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

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


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

#datepicker {
    margin-top: 50px;
    margin-bottom: 30px;
}

.datetimepicker input {
    width: 100%;
}

.litepicker {
    font-size: 14px;
}

.month-item-name, .month-item-year {
    padding: 7px !important;
    outline: none;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 13px;
    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: 20px;
    margin-right: 10px;
    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;
}

.container__predefined-ranges button {
    font-size: 14px;
    font-weight: 500;
    cursor: pointer !important;
}

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

.month-item-weekdays-row {
    font-size: 14px;
}

.week-number {
    font-size: 14px !important;
}

.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);
    font-size: 14px;
    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[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;
        margin-left: 15px;
        margin-right: 15px;
    }

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

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


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

.sensor-data .sensor-chart-main {
    padding: 0;
}

#sensorchart {
    padding: 20px 15px 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;
}

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

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

#sensorchart {
    margin-bottom: 40px;
}

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


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

.header-action-button {
    padding-top: 30px;
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
    width: 100% !important;
}

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

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

.header-action-button>div button {
    font-size: 15px;
    padding: 17px 35px;
    border: none;
    line-height: 16px;
    outline: none !important;
    box-shadow: none;
    border-radius: 0px;
    text-align: center;
    background: var(--primary-color);
    border-right: 1px solid var(--primary-border-color) !important;
    transition: .4s;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
}

.header-action-button>div button:hover, .header-action-button>div button:focus {
    background: var(--primary-hover-color) !important;
    border-right: 1px solid var(--primary-border-color) !important;
}

.header-action-button>div button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

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

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

}

.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 {
        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;
        padding-right: 15px;
    }
}

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



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

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

.asset-form .form-group .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;
}

/* ---- 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 ---- */
.sensors-asset {
    padding-top: 50px;
}

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

.sensors-asset #DataTables_Table_0_filter {
    margin-bottom: 20px;
}

.sensors-asset #DataTables_Table_0_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_Table_0_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 ---- */


/* ---- Users Page ---- */

.user-data-table {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 30px;
}

.user-data-table>div table {
    margin-top: 30px !important;
    box-shadow: 0 0 10px var(--primary-transparent);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.user-data-table>div table tr:nth-child(even) {
    background: var(--light-gray);
}

.user-data-table>div table tr td {
    padding: 15px;
    word-break: break-all;
    border: none;
}

.user-data-table>div table tr:first-child td {
    border-top: none !important;
}

/* ---- End Users Page ---- */


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