.TPMSPanelInfo {
    height: calc(100% - 46px);
    height: -webkit-calc(100% - 46px);
    height: -moz-calc(100% - 46px);
    margin-top: 10px;
    float: left;
    width: 100%;
    overflow: hidden;
}


.TPMSParent {
    float: left;
    position: relative;
    display: contents;
}

.TPMSEventSelector {
    height: 27px;
    float: right;
    position: relative;
    /*background-image: url(/ui/ecodrive/images/dnm.png);*/
    background-size: 25px;
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: 5px;
}

.TPMSAlarmWayContainer {
    /*    position: relative;
    width: 100%;
    height: 50px;*/
    position: relative;
    float: left;
    height: 100%;
    /*    width: calc(100% - 400px);
    width: -webkit-calc(100% - 400px);
    width: -moz-calc(100% - 400px);*/
    margin-left: 20px;
    margin-right: 20px;
}

.tpmsAlarmWayLine {
    border-left: 2px dotted #ff8000;
    width: 1px;
    height: 170px;
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.tpmsAlarmWayItem {
    background-image: url(/ui/ecodrive/images/speed_alarm_map_icon.png);
    background-position: center;
    background-size: 30px;
    background-repeat: no-repeat;
    position: absolute;
    left: 51px;
    z-index: 0;
    height: 40px;
    width: 40px;
    margin-top: -13px;
    margin-left: -20px;
}


.WeatherContainer {
    float: left;
    width: 100%;
    height: 50px;
    background: #EFEFEF 0% 0% no-repeat padding-box;
    opacity: 1;
    margin-top: 20px;
}

.WeatherContainer > .footer {
    float: left;
    width: 91px;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    text-indent: 24px;
    margin-right: -10px;
}

.WeatherContainer > .footer[DeviceHeight] {
    background: url(height.svg) 0 center no-repeat;
    margin-left: calc(50% - 210px);
    margin-left: -webkit-calc(50% - 210px);
    margin-left: -moz-calc(50% - 210px);
}

.WeatherContainer > .footer[WeatherTemperature] {
    background: url(temperature.svg) 0 center no-repeat;
    margin-left: 5px;
}

.WeatherContainer > .footer[WeatherHumidity] {
    background: url(humidity.svg) 0 center no-repeat;
    margin-left: 5px;
}

.WeatherContainer > .footer[WeatherWind] {
    background: url(wind.svg) 0 center no-repeat;
    margin-left: -15px;
}

.WeatherContainer > .footer[WeatherPressure] {
    background: url(pressure.svg) 0 center no-repeat;
    margin-left: 20px;
}


.DeviceTPMSTemplate .graphicIcon {
    float: right;
    width: 36px;
    height: 36px;
    background: url(grap.svg) center no-repeat;
    margin-bottom: 20px;
}

.graphicPopup {
    float: left;
    height: 290px;
    transform: translate(520px, 85px) !important;
    width: auto;
}

.graphicPopup .dx-overlay-content {
    float: left;
    width: 100%;
    height: 100%;
    transform: translate(0px, 0px) !important;
}

.graphicPopup .dx-overlay-content .dx-popup-content {
    float: left;
    width: 100%;
    height: 100%;
    transform: translate(0px, 0px) !important;
}

.graphicPopup .axlesList {
    float: left;
    width: 180px;
    height: 100%;
    overflow-y: scroll;
}

.graphicPopup .pressureElement, .graphicPopup .temperatureElement {
    float: left;
    /*    margin-left: 185px;*/
    margin-top: 20px;
    width: 60px;
    height: 186px
}

.pressureElement .dataBlock, .temperatureElement .dataBlock {
    float: left;
    height: 100%;
    width: 1px;
    background-color: #ddd;
}

.pressureElement .pressureDatas, .temperatureElement .temperatureDatas {
    float: left;
    height: 100%;
    width: 55px;
}

.pressureElement .pressureDatas .averagePressure, .pressureElement .pressureDatas .maxPressure,
.temperatureElement .temperatureDatas .averageTemperature, .temperatureElement .temperatureDatas .maxTemperature {
    float: left;
    width: 100%;
    height: 92px;
    text-align: center;
    /* line-height: 92px;*/
    font-weight: bold;
    letter-spacing: 0px;
    color: #43425D;
    opacity: 1;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 30px;
}

.pressureElement .pressureDatas .dataBlockHorizontal,
.temperatureElement .temperatureDatas .dataBlockHorizontal {
    height: 1px;
    width: 100%;
    background-color: #ddd;
    float: left;
}   

.TPMSChart {
    float: left;
    height: 100%;
    width: calc(100% - 400px);
    width: -webkit-calc(100% - 400px);
    width: -moz-calc(100% - 400px);
    margin-left: 20px;
    margin-right: 20px;
    /*    display: inline-flex;
    position: absolute;*/
}

.toolTipElement {
    width: 100%;
    height: 80px;
}

.toolTipElement .toolTipHeaderDate, .toolTipElement .toolTipAxleInfo {
    width: 100%;
    text-align: left;
    font: normal 14px/19px Segoe UI;
    letter-spacing: 0px;
    color: #282828;
    opacity: 1;
    font-weight: bold;
    margin-bottom: 10px;
}

.toolTipLine {
    width: 100%;
    text-align: left;
    font: normal 14px/19px Segoe UI;
    letter-spacing: 0px;
    color: #282828;
    opacity: 1;
    padding-left: 20px;
}

.toolTipLine[toolTipTemperature] {
    background: url(tempIcon.svg) no-repeat 0 3px;
}

.toolTipLine[toolTipPressure] {
    background: url(presIcon.svg) no-repeat 0 3px;
}

.toolTipLine[toolTipConstantTirePressure] {
    background: url(constantPresIcon.svg) no-repeat center left;
    margin-top: -5px;
}

.TPMSPanelInfo .DeviceTPMSTemplate {
    float: left;
    width: 100%;
    height: calc(100% - 70px);
    height: -webkit-calc(100% - 70px);
    height: -moz-calc(100% - 70px);
    /*overflow-x: auto;*/
}

.TPMSPanelInfo .DeviceTPMSTemplate .TPMSTemplate {
    float: left;
    width: 100%;
    height: calc(100% - 70px);
    height: -webkit-calc(100% - 70px);
    height: -moz-calc(100% - 70px);
    position: relative;
}

.TPMSPanelInfo .DeviceTPMSTemplate .TPMSTemplate .templateContainer {
    float: left;
    width: 100%;
    height: 97%;
    position: absolute;
   
}

.TPMSPanelInfo .DeviceTPMSTemplate .TPMSTemplate .templateContainer .imageContainer[type = "empty"] {
    background: url(empty.png) no-repeat center center;
    width: 125px;
    margin-left: -34px;
    height: 577px;
}

.TPMSPanelInfo .DeviceTPMSTemplate .TPMSTemplate .templateContainer .imageContainer[type = "car"] {
    background: url(binek.png) no-repeat center center;
    margin-left: -44px;
    height: 365px;
}

.TPMSPanelInfo .DeviceTPMSTemplate .TPMSTemplate .templateContainer .imageContainer[type = "truck"] {
    background: url(kamyon.png) no-repeat center center;
    margin-left: -44px;
    height: 494px;
}

.TPMSPanelInfo .DeviceTPMSTemplate .TPMSTemplate .templateContainer .imageContainer[type = "towtruck"] {
    background: url(cekici.png) no-repeat center center;
    margin-left: -44px;
    height: 348px;
}

.TPMSPanelInfo .DeviceTPMSTemplate .TPMSTemplate .templateContainer .imageContainer[type = "pickuptruck"] {
    background: url(kamyonet.png) no-repeat center center;
    margin-left: -44px;
    height: 412px;
}

.TPMSPanelInfo .DeviceTPMSTemplate .TPMSTemplate .templateContainer .imageContainer[type = "minibus"] {
    background: url(minibüs.png) no-repeat center center;
    margin-left: -44px;
    height: 451px;
}

.TPMSPanelInfo .DeviceTPMSTemplate .TPMSTemplate .templateContainer .imageContainer[type = "motorcycle"] {
    background: url(motosiklet.png) no-repeat center center;
    height: 287px;
    margin-top: 46px;
}

.TPMSPanelInfo .DeviceTPMSTemplate .TPMSTemplate .templateContainer .imageContainer[type = "bus"] {
    background: url(otobus.png) no-repeat center center;
    margin-left: -44px;
    height: 549px;
}

.TPMSPanelInfo .DeviceTPMSTemplate .TPMSTemplate .templateContainer .imageContainer[type = "van"] {
    background: url(panelvan.png) no-repeat center center;
    margin-left: -44px;
    height: 387px;
}

.TPMSPanelInfo .DeviceTPMSTemplate .TPMSTemplate .templateContainer .imageContainer[type = "longtruck"] {
    background: url(cekici_dorse.png) no-repeat center center;
    margin-left: -44px;
    height: 599px;
}

.TPMSPanelInfo .DeviceTPMSTemplate .TPMSTemplate .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%;
}

.tireInfoCirclePressure, .tireInfoCircleTemperature {
    width: 100%;
    text-align: center;
    font: normal 12px/19px Segoe UI;
    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,
.tireInfoCircle[isActive="noSignalActive"] .tireInfoCirclePressure,
.tireInfoCircle[isActive="noSignalActive"] .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;
}