.TPMSPanelInfo {
    height: calc(100% - 46px);
    height: -webkit-calc(100% - 46px);
    height: -moz-calc(100% - 46px);
    margin-top: 10px;
    float: left;
    width: 100%;
    overflow: hidden;
}
.TPMSTemplate {
    float: left;
    width: 100%;
    height: 100%;
    /*position: relative;*/
}
.templateContainer {
    float: left;
    width: 100%;
    height: 100%;
    /*position: absolute;*/
    left: 25px;
    overflow:scroll
}
    


 .templateContainer .imageContainer[type = "empty"] {
    background: url(empty.png) no-repeat center center;
    width: 125px;
    margin-left: -34px;
    height: 577px;
}

 .templateContainer .imageContainer[type = "car"] {
    background: url(binek.png) no-repeat center center;
    margin-left: -44px;
    height: 365px;
}

 .templateContainer .imageContainer[type = "truck"] {
    background: url(kamyon.png) no-repeat center center;
    margin-left: -44px;
    height: 494px;
}

 .templateContainer .imageContainer[type = "towtruck"] {
    background: url(cekici.png) no-repeat center center;
    margin-left: -44px;
    height: 348px;
}

 .templateContainer .imageContainer[type = "pickuptruck"] {
    background: url(kamyonet.png) no-repeat center center;
    margin-left: -44px;
    height: 412px;
}

 .templateContainer .imageContainer[type = "minibus"] {
    background: url(minib�s.png) no-repeat center center;
    margin-left: -44px;
    height: 451px;
}

 .templateContainer .imageContainer[type = "motorcycle"] {
    background: url(motosiklet.png) no-repeat center center;
    height: 287px;
    margin-top: 46px;
}

 .templateContainer .imageContainer[type = "bus"] {
    background: url(otobus.png) no-repeat center center;
    margin-left: -44px;
    height: 549px;
}

 .templateContainer .imageContainer[type = "van"] {
    background: url(panelvan.png) no-repeat center center;
    margin-left: -44px;
    height: 387px;
}

 .templateContainer .imageContainer[type = "longtruck"] {
    background: url(cekici_dorse.png) no-repeat center center;
    margin-left: -44px;
    height: 599px;
}

 .templateContainer .imageContainer[type = "trailertruck"] {
    background: url(cekici_dorse_dorse.png) no-repeat center center;
    margin-left: -44px;
    height: 764px;
}

.leftContainer {
    width: 44px;
    height: 97%;
    text-align: justify;
    position: relative;
    float: left;
    margin-left: 2px;
}

.leftInfoContainer {
    width: 56px;
    float: left;
    height: 97%;
    text-align: justify;
    margin-left: 5px;
}

.leftInfoContainerPrev {
    width: 56px;
    float: left;
    height: 97%;
    margin-left: 5px
}

.rightContainer {
    width: 44px;
    height: 97%;
    text-align: justify;
    margin-left: -44px;
    float: left;
}

.imageContainer[type = "motorcycle"] + .rightContainer {
    margin-left: -86px;
    margin-top: 46px;
}

    .imageContainer[type = "motorcycle"] + .rightContainer + .rightInfoContainer {
        margin-left: -4px;
        margin-top: 46px;
    }

.imageContainer[type = "empty"] + .rightContainer {
    margin-left: -34px;
}

.rightInfoContainer {
    width: 56px;
    float: left;
    height: 100%;
    margin-left: 5px;
    margin-right: 5px;
}

.rightInfoContainerLast {
    width: 50px;
    float: left;
    height: 100%;
    margin-left: 5px;
}

.leftTire {
    background-color: #369E59;
    border-radius: 6px;
    width: 20px;
    height: 52px;
    float: left;
    margin-left: 2px;
}

.rightTire {
    background-color: #369E59;
    border-radius: 6px;
    margin-left: 2px;
    width: 20px;
    height: 52px;
    float: right;
}

.leftTireInfo .tireInfoCircle, .rightTireInfo .tireInfoCircle {
    width: 55px;
    height: 45px;
    float: right;
    border: 1px solid #E3E3E3;
    text-align: center;
    border-radius: 5px;
    padding-top: 5px;
    cursor: pointer;
}

.leftTireDiv, .rightTireDiv, .leftTireInfo, .rightTireInfo {
    height: 0.1px;
    width: 100%;
}

.templateContainer[layout] .tireInfoCirclePressure, .templateContainer[layout] .tireInfoCircleTemperature {
    width: 100%;
    text-align: center;
    font: normal 11px Segoe UI !important;
    letter-spacing: 0px;
    color: #333333;
    font-weight: normal;
}

.leftTire[isActive = "active"], .rightTire[isActive = "active"] {
    background: #AC0303 0% 0% no-repeat padding-box;
}

.leftTire[isActive = "noSignalActive"], .rightTire[isActive = "noSignalActive"] {
    background: #AAAAAA 0% 0% no-repeat padding-box;
}

.leftTire[isActive = "noSensor"], .rightTire[isActive = "noSensor"] {
    background: #000000 0% 0% no-repeat padding-box;
}
.alarmDetailIcon[icon = "lowPressure"] {
    background: url(dusuk_basinc.svg) 0 center no-repeat;
}

.alarmDetailIcon[icon = "highPressure"] {
    background: url(yuksek_basinc.svg) 0 center no-repeat;
}

.alarmDetailIcon[icon = "lowTemperature"] {
    background: url(dusuk_sicaklik.svg) 0 center no-repeat;
}

.alarmDetailIcon[icon = "highTemperature"] {
    background: url(yuksek_sicaklik.svg) 0 center no-repeat;
}

.alarmDetailIcon[icon = "battery"] {
    background: url(pil_seviyesi.svg) 0 center no-repeat;
}

.alarmDetailIcon[icon = "nosignal"] {
    background: url(sensor_iletisim_hatasi.svg) 0 center no-repeat;
}

.alarmDetailIcon[icon = "changePressure"] {
    background: url(hizli_basinc_de�isimi.svg) 0 center no-repeat;
}

.alarmDetailIcon {
    width: 30px;
    height: 30px;
    float: left;
    background-repeat: no-repeat;
    margin-bottom: auto;
    margin-top: auto;
}

.alarmDetail {
    width: 100%;
    height: 45px;
    float: left;
}

.alarmDetailText {
    margin-left: 35px;
}

.leftTire[type = "multipleTire"] {
    margin: 2px;
    float: left;
}

.rightTire[type = "multipleTire"] {
    margin: 2px;
    float: right;
}

.tireInfoCircle[isActive="active"] .tireInfoCirclePressure,
.tireInfoCircle[isActive="active"] .tireInfoCircleTemperature {
    color: #fff;
}

.tireInfoCircle[isActive = "active"] {
    background: #AC0303 0% 0% no-repeat padding-box;
    color: #FFFF;
    cursor: pointer;
}


.tireInfoCircle[isActive = "noSignalActive"] {
    background: #AAAAAA 0% 0% no-repeat padding-box;
    color: #FFFF;
    cursor: pointer;
}
.BottomContainer {
    float: left;
    width: 100%;
    height: 50px;
    background: #EFEFEF 0% 0% no-repeat padding-box;
    opacity: 1;
    margin-top: 20px;
}

.noGraphicData {
    margin-top: 8%;
    font-size: large;
    text-align: center;
}