.block {
    display: inline-block;
    vertical-align: top;
    background-image: linear-gradient(90deg, #FFFFFF, #FFFFFF) !important;
}

.value {
    height: 32px;
    line-height: 32px;
    font-size: 1.5em;
    vertical-align: middle;
    padding-left: 44px;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #DDDDDD;
    width: 120px;
}

.block h3 {
    color: #000000;
    text-shadow: none;
}

.block .inline {
    background-color: #F6F6F6;
    border: 1px solid #DDDDDD;
    vertical-align: top;
}

.block .value {
    width: auto !important;
}

.block label {
    margin-bottom: 0 !important;
}

.temperature {
    background: url('/gbs/gfx/icons/32x32/thermometer.png') 4px center no-repeat;
}

.dewpoint {
    background: url('/gbs/gfx/icons/32x32/raindrop.png') 4px center no-repeat;
}

.cooling {
    background: url('/gbs/gfx/icons/32x32/cooling.png') 4px center no-repeat;
}

.pue {
    background: url('/gbs/gfx/icons/32x32/lightning.png') 4px center no-repeat;
}

.float-value {
    position: absolute;
    color: #8de455;
    font-size: 1.2rem;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    min-width: 63px;
    text-align: center;
}

.float-value.black {
    color: #000000 !important;
    text-shadow: 0 0 1px #FFFFFF !important;
}

.float-value.white {
    color: #FFFFFF !important;
}

.float-value.status {
    color: #FFFFFF !important;
}

.float-value.alert {
    color: #FFFFFF !important;
    font-weight: bold;
    font-size: 12px !important;
    text-shadow: 1px 0 #333333 !important;
    background-color: #ff2215;
    padding: 0 1px;
    border: 1px solid #fc3322;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.detail-block {
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
}

.detail-block div.link {
    position: absolute;
    min-height: 20px;
    cursor: pointer;
}

.detail-block div.text {
    position: absolute;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.5rem;
}

.detail-block .link:hover {
    background-color: rgba(200, 200, 200, 0.6);
    opacity: 0.7;
    border-radius: 5px;
}

#bit2a-cooling {
    background: url('/gbs/gfx/bit2a/cooling.png') no-repeat;
    width: 1272px;
    height: 786px;
}

.bit2a-ccu-detail1 {
    background: url('/gbs/gfx/bit2a/ccu_detail1.png') no-repeat;
    width: 1110px;
    height: 706px;
}

.bit2a-ccu-detail2 {
    background: url('/gbs/gfx/bit2a/ccu_detail2.png') no-repeat;
    width: 1110px;
    height: 706px;
}

.bit2b-ccu-details {
    background: url('/gbs/gfx/bit2b/ccu.png') no-repeat;
    width: 1110px;
    height: 706px;
}

.bit2c-ccu-details {
    background: url('/gbs/gfx/bit2c/ccu.png') no-repeat;
    width: 1110px;
    height: 706px;
}

#bit2bcd-cooling {
    background: url('/gbs/gfx/bit2bcd/cooling.png') no-repeat;
    width: 813px;
    height: 618px;
}

#bit2b-ccus-details {
    background: url('/gbs/gfx/bit2b/ccus.png') no-repeat;
    width: 1125px;
    height: 580px;
}

#bit2c-ccus-details {
    background: url('/gbs/gfx/bit2c/ccus.png') no-repeat;
    width: 1125px;
    height: 580px;
}

#bit1-downflow1 {
    background: url('/gbs/gfx/bit1/downflow_unit_1.png') no-repeat;
    width: 732px;
    height: 549px;
}

#bit1-downflow2 {
    background: url('/gbs/gfx/bit1/downflow_unit_2.png') no-repeat;
    width: 743px;
    height: 550px;
}

#bit1-upflow {
    background: url('/gbs/gfx/bit1/upflow_unit.png') no-repeat;
    width: 812px;
    height: 560px;
}

#bit1-tr-humidifier {
    background: url('/gbs/gfx/bit1/hum_tr.png') no-repeat;
    width: 813px;
    height: 469px;
}

#bit1-cmf-box {
    background: url('/gbs/gfx/bit1/cmfbox.png') no-repeat;
    width: 812px;
    height: 251px;
}

#bit1-colo-humidifier {
    background: url('/gbs/gfx/bit1/hum_colo.png') no-repeat;
    width: 790px;
    height: 472px;
}

#bit1-colo1-condenser-fans {
    background: url('/gbs/gfx/bit1/colo1_condenser_fans.png') no-repeat;
    width: 415px;
    height: 322px;
}

#bit1-colo2-condenser-fans {
    background: url('/gbs/gfx/bit1/colo2_condenser_fans.png') no-repeat;
    width: 422px;
    height: 271px;
}

#bit1-colo3-condenser-fans {
    background: url('/gbs/gfx/bit1/colo3_condenser_fans.png') no-repeat;
    width: 423px;
    height: 271px;
}

#bit2d-overview {
    background: url('/gbs/gfx/bit2d/overzicht.png') no-repeat;
    width: 920px;
    height: 688px;
}

#bit2d-details-lbk1 {
    background: url('/gbs/gfx/bit2d/lbk01.png') no-repeat;
    width: 819px;
    height: 603px;
}

#bit2d-details-lbk2 {
    background: url('/gbs/gfx/bit2d/lbk02.png') no-repeat;
    width: 818px;
    height: 606px;
}

#bit2d-details-lbk3 {
    background: url('/gbs/gfx/bit2d/lbk03.png') no-repeat;
    width: 812px;
    height: 603px;
}

#bit2d-details-lbk4 {
    background: url('/gbs/gfx/bit2d/lbk04.png') no-repeat;
    width: 824px;
    height: 603px;
}

#bit2bcd-details-drycoolers {
    background: url('/gbs/gfx/bit2bcd/drycoolers.png') no-repeat;
    width: 899px;
    height: 629px;
}

#bit2bcd-details-koudeopwekking {
    background: url('/gbs/gfx/bit2bcd/koudeopwekking.png') no-repeat;
    width: 899px;
    height: 629px;
}

#bitmeetme-details {
    background: url('/gbs/gfx/bit-meetme/overview.png') no-repeat;
    width: 1021px;
    height: 598px;
}

.compressor {
    width: 11px;
    height: 11px;
    line-height: 11px;
    position: absolute;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    text-shadow: none;
    text-align: center;
    vertical-align: middle;
    font-size: 8px;
    border: 1px solid;
}

.chiller {
    width: 30px;
    height: 13px;
    line-height: 13px;
    position: absolute;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    text-shadow: none;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    border: 1px solid #000000;
}

.webeasy-status-text {
    width: 158px;
    height: 29px;
    line-height: 26px;
    color: #000000;
    background-color: #45f420;
    vertical-align: middle;
    font-weight: bold;
    font-size: 1.1em;
    position: absolute;
}

.webeasy-status {
    width: 14px;
    height: 14px;
    position: absolute;
}

.webeasy-status-active-text {
    position: absolute;
    min-width: 40px;
    min-height: 20px;
}

.webeasy-status-active-text:after {
    content: "uit" !important;
}

.webeasy-status-active-text.active:after {
    content: "in" !important;
}

.webeasy-fail {
    position: absolute;
    width: 132px;
    height: 22px;
    line-height: 22px;
    vertical-align: middle;
    font-weight: bold;
    font-size: 1.1em;
    text-align: left;
}

.webeasy-fail.active {
    background-color: #dd0e1e;
}

.compressor.active,
.chiller.active {
    background-color: #45f420;
    color: #000000;
    border-color: #000000;
}

.webeasy-status.active {
    background-color: #dd0e1e;
}

.compressor.inactive {
    background-color: #dd3c14;
    color: #FFFFFF;
    border-color: #c53614;
}

.chiller.inactive {
    background-color: #000000;
    color: #888888;
}

.priva-container {
    background-image: url('/gbs/gfx/priva-bg.png');
    text-align: center;
}

.webeasy-container {
    background: #DDDDDD;
}

.content.webeasy-container {
    border: 1px solid #6B86AD;
    text-align: center;
    overflow-x: auto;
    padding: 10px;
}

.content.webeasy-container .float-value {
    color: #000000 !important;
}

#forecast-plot {
    width: 500px;
    height: 300px;
}

td.vertical {
    width: 1em;
    word-break: break-all;
    text-align: center;
    padding: 2px 4px;
    font-family: monospace;
    font-weight: bold;
    color: #FFFFFF;
    background-color: rgb(0, 35, 75);
}

table.values td {
    border-bottom: 1px solid rgba(234, 234, 234, 0.5);
}

.gbs-button {
    border: 2px outset #6EB1DC;
    background-color: #5A82A5;
    font-size: 2.5rem;
    padding: 0.2rem 1rem;
}

#dynamic-view-image {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 44px);
    background-repeat: no-repeat;
}