h2 {
    color: black;
    font-size: 18px;
    display: block;
    position: absolute;
}

.debug-jwt-container {
    max-width: 500px;
}

.main-bg {
    background: #E0E0E0;
}

code.debug {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}

.hidden {
    display: none;
}

input.form-control.parsley-error {
    border-color: brown;
    background-color: mistyrose;
}

.menu-bar {
    border-top: 4px solid #F2B329 !important;
    border-bottom: 1px solid #E3E3E1 !important;
}

.nav > li, .nav-link {
    font-style: normal;
    font-size: 20px;
    line-height: 24px;
    color: black !important;
}

.checkbox-top-label {
    font-size: 14px !important;
    line-height: 15px;
}

a.nav-link {
    display: block;
    position: relative;
}

a.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #ffe022, #f9bb24);
    transition: transform .5s;
    transform: scale(0);
    transform-origin: center;
}

a.nav-link.active::after,
a.nav-link:hover::after,
a.nav-link:focus::after {
    transform: scale(1);
}

input[type=text].writable-item,
input[type=number].writable-item { 
    text-align: right;
    min-width: 150px !important;
}

.savebar {
    z-index: 1000;
    background-color: rgba(56, 166, 224, 0.3);
}

.footbar {
    background-color: #efefef;
}

.footbar-label {
    color: black;
    font-size: 16px;
}

tr.modifiable-frame td:first-child {
    width: 100%;
    vertical-align: middle;
}

.card {
    border: 0px !important;
}

.card-header {
    /* Jablo color */
    /*background-color: #F2B329 !important;*/
    background-color: white !important;
    border-bottom: 3px solid #F2B329 !important;
    color: black;
    font-size: 1.3rem;
}

.modal-header {
    /* Jablo color */
    background-color: #F2B329 !important;
    font-weight: bold;
    color: black;
}

.fade-out {
    animation-name: fade-out;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

@keyframes fade-out {
    from {
        opacity: 0.0;
    }
    to {
        opacity: 1.0;
    }
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
}


.spin {
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.chart-container {
    min-height: 500px;
}

.loading-background {
    background-color: rgba(0, 0, 0, 0.1);
}

.overview-futura-img {
    background: url("/img/futura.png") no-repeat center center;
    background-size: contain;
    position: relative;
    text-align: center;
    display: block;
    min-height: 718px;
    min-width: 700px;
}

.overview-volta-img {
    background: url("/img/volta.png") no-repeat center center;
    background-size: contain;
    position: relative;
    text-align: center;
    display: block;
    min-height: 494px;
    min-width: 600px;
}

.overview-delta-img {
    background-size: contain;
    position: relative;
    text-align: center;
    display: block;
    min-height: 500px;
    min-width: 350px;
}

.overview-volta-pump-left-img {
    position: absolute;
    top: 227px;
    left: calc(50% - 216px);
    width: 40px;
}

.overview-volta-pump-right-img {
    position: absolute;
    top: 227px;
    right: calc(50% - 216px);
    width: 40px;
}

.overview-volta-house-left {
    position: absolute;
    top: 232px;
    left: calc(50% - 170px);
    width: 30px;
}

.overview-volta-house-right {
    position: absolute;
    top: 232px;
    right: calc(50% - 170px);
    width: 30px;
}

.overview-img-card {
    min-width: 714px;
}

.overview-delta-img-card {
    min-width: 400px;
}

.overview-delta-circ-table-div {
    max-width: 210px;
}

.overview-delta-circ-table {
    border-collapse: collapse;
    border-spacing: 1px;

}

.overview-delta-img-fut {
    position: absolute;
    top: 15px;
    left: 35px;
    width: 220px;
}

.overview-delta-img-delta {
    position: absolute;
    top: 300px;
    left: 35px;
    width: 220px;
}

.overview-delta-img-fut-alfa {
    position: absolute;
    top: 90px;
    left: 355px;
    width: 80px;
}

.overview-delta-img-alfa {
    position: absolute;
    top: 235px;
    left: 355px;
    width: 80px;
}

.overview-delta-img-ja100 {
    position: absolute;
    top: 365px;
    left: 335px;
    width: 120px;
}

.overview-delta-icon-err {
    background-color: white;
    color: red;
    position: absolute;
    font-size: 25px;
}

.overview-delta-warn-fut-alfa {
    top: 105px;
    left: 280px;
}

.overview-delta-warn-fut {
    top: 220px;
    left: 135px;
}

.overview-delta-warn-alfa {
    top: 250px;
    left: 245px;
}

.overview-delta-warn-ja100 {
    top: 396px;
    left: 280px;
}

.table-pg {
    table-layout: fixed;
    width: 100%;
}

.rotate-table-grid {
    vertical-align : middle;
    text-align:center;
}

.overview-delta-circ-table-tr {
    padding: 0;
    margin: 0;
}

.overview-delta-circ-table-td {
    padding: 0;
    margin: 0;
}


.overview-temp-value-text {
    position: absolute;
    top: 6px;
    left: 0;
}

.overview-humi-value-text {
    position: absolute;
    top: 23px;
    left: 0;
}

.overview-abs-humi-value-text {
    position: absolute;
    top: 40px;
    left: 0;
}

.overview-amb-value-text {
    left: calc(50% - 193px - 33px);
}

.overview-was-value-text {
    left: calc(50% - 59px - 33px);
}

.overview-fre-value-text {
    left: calc(50% + 69px - 33px);
}

.overview-ind-value-text {
    left: calc(50% + 200px - 33px);
}

.overview-duct-caption-text {
    position: absolute;
    top: 86px;
    transform: translate(-50%, -50%);
    overflow-wrap: break-word;
    max-width: 80px;
    line-height: 14px;
}

.overview-clogged-text {
    position: absolute;
    top: 210px;
    transform: translate(-50%, -50%);
    line-height: 14px;
}

.overview-filter-date {
    position: absolute;
    top: 230px;
    transform: translate(-50%, -50%);
    line-height: 14px;
}

.overview-inner-heating-value-text {
    position: absolute;
    top: 350px;
    left: calc(50% + 105px);
    transform: translate(-50%, -50%);
    line-height: 14px;
}

.overview-fan-flow-pd-value-text {
    position: absolute;
    top: 530px;
    transform: translate(-50%, -50%);
}

.overview-fan-pwm-rpm-value-text {
    position: absolute;
    top: 550px;
    transform: translate(-50%, -50%);
}

.overview-fan-sup {
    left: calc(50% - 120px);
}

.overview-fan-exh {
    left: calc(50% + 130px);
}

.overview-filter-sup {
    left: calc(50% - 170px);
}

.overview-filter-exh {
    left: calc(50% + 170px);
}

.overview-futura-path-box {
    position: absolute;
    top: 290px;
    left: calc(50% - 210px);
}

.overview-volta-path-box {
    position: absolute;
    top: 70px;
    left: calc(50% - 215px);
}

.overview-delta-path-box {
    position: absolute;
}

.overview-volta-power {
    position: absolute;
    top: 247px;
    transform: translate(-50%, -50%);
    line-height: 14px;
}

.overview-volta-power-left {
    left: calc(50% - 250px);
}

.overview-volta-power-right {
    left: calc(50% + 250px);
}

.overview-volta-circuit {
    position: absolute;
    transform: translate(-50%, -50%);
    top: calc(50% + 30px);
}

.overview-volta-temper {
    position: absolute;
    transform: translate(-50%, -50%);
    line-height: 14px;
}

.overview-rect-high-rpm {
    position: absolute;
    top: 540px;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 50px;
    border-radius: 20px;
    -webkit-animation: blinking 3s infinite;
    animation: blinking 3s infinite;
}

@keyframes blinking {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: #ffc107;
    }
}

.overview-volta-circuit-left {
    left: calc(50% - 154px);
}

.overview-volta-temper-out-left {
    top: calc(15%);
    left: calc(50% - 250px);
}

.overview-volta-temper-ret-left {
    top: calc(85%);
    left: calc(50% - 250px);
}

.overview-volta-circuit-right {
    left: calc(50% + 154px);
}

.overview-volta-temper-out-right {
    top: calc(15%);
    left: calc(50% + 250px);
}

.overview-volta-temper-ret-right {
    top: calc(85%);
    left: calc(50% + 250px);
}

path {
    fill: none
}

.path-fut {
    fill: none;
    stroke-dasharray: 1;
    stroke-width: 0.8;
}

.path-volta {
    fill: none;
    stroke-dasharray: 1;
    stroke-width: 0.8;
}

.path-delta {
    stroke-width: 0.5;
    stroke: darkgray;
}

.path-anim {
    animation: dash-animation 30s linear infinite;
}

@keyframes dash-animation {
    to {
        stroke-dashoffset: -50;
    }
}

#bypass-sup-path {
    stroke: rgba(0, 128, 0, 0.4);
}

#bypass-exh-path {
    stroke: rgba(255, 0, 0, 0.4);
}

#circ-path {
    stroke: rgba(255, 0, 0, 0.4);
}

#supply-path {
    stroke: url(#supply-grad);
}

#exhaust-path {
    stroke: url(#exhaust-grad);
}

.heating-path {
    stroke: url(#heating-grad);
}

.heating-path-ambienta-fan {
    stroke: url(#heating-grad-ambienta-fan);
}

.heating-path-ambienta-compressor {
    stroke: url(#heating-grad-ambienta-compressor);
}

#shortcut-path {
    stroke: rgba(255, 0, 0, 0.4);
}

path.tooltip-path {
    stroke-dasharray: 0;
    stroke-width: 0.1;
    stroke: black;
}

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

.table-device tr {
    line-height: 15px;
    min-height: 15px;
    height: 15px;
}

input[type=range] {
    -webkit-appearance: none;
    margin: 20px 0;
    width: 100%;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    /*animate: 0.2s;*/
    background: #03a9f4;
    border-radius: 25px;
}

input[type=range]::-webkit-slider-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #03a9f4;
}

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button { margin-left: 10px; }

.range-wrap {
    width: 500px;
    position: relative;
}

.range-value {
    position: absolute;
    top: -50%;
}

.range-value span {
    width: 30px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #03a9f4;
    color: #fff;
    font-size: 12px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 6px;
}

.range-value span:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid #03a9f4;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    margin-top: -1px;
}



.overview-ambienta-img {
    background: url("/img/ambienta.png") no-repeat center center;
    background-size: contain;
    position: relative;
    text-align: center;
    display: block;
    min-height: 600px;
    opacity: 80%;
    margin-top:40px;
}

.path-ambienta {
    fill: none;
    stroke-dasharray: 2.5;
    stroke-width: 3.0;
}

.overview-ambienta-path-box {
    position: absolute;
    left: calc(50% - 215px);
}

.overview-ambienta-fan-case-img {
    position: absolute;
    top: 70px;
    right: 292px;
    width: 50px;
}

.overview-ambienta-fan-center-img {
    position: absolute;
    top: 74px;
    right: 296px;
    width: 4%;
}

.overview-ambienta-compressor-div {
    position: absolute;
    top: 120px;
    right: 287px;
}

.overview-ambienta-compressor-img {
    width: 50px;
}

.overview-ambienta-evap-img {
    height: 115px;
}

.overview-ambienta-evap-div {
    position: absolute;
    top: 65px;
    right: 355px;
}

.overview-ambienta-heater-img {
    height: 115px;
}

.overview-ambienta-heater-div {
    position: absolute;
    bottom: 11px;
    right: 309px;
    transform: rotate(-90deg);
}

.overview-ambienta-sun-div {
    position: absolute;
    bottom: 44px;
    right: 395px;
}

.overview-ambienta-sun-img {
    font-size: 35px;
    color: gold;
}

.overview-ambienta-values {
    position: absolute;
    line-height: 14px;
}

.overview-ambienta-temper-water {
    top: calc(51%);
    left: calc(22%);
}

.overview-ambienta-temper-evaporator {
    top: calc(14%);
    left: calc(22%);
}

.overview-ambienta-temper-compressor {
    top: calc(25%);
    right: calc(22%);
}

.overview-ambienta-temper-outside {
    top: calc(0%);
    right: calc(22%);
}

.overview-ambienta-fan-power {
    top: calc(10%);
    right: calc(24%);
}

.overview-ambienta-fan-rpm {
    top: calc(14%);
    right: calc(22%);
}

.path-ambienta-temper {
    stroke-width: 0.25;
    stroke: rgba(0, 0, 0, 0.6);
}


.h-shake {
    animation-name: horizontal-shaking;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes horizontal-shaking {
    0% { transform: translateX(0) }
    25% { transform: translateX(1px) }
    50% { transform: translateX(-1px) }
    75% { transform: translateX(1px) }
    100% { transform: translateX(0) }
}