.vehicleInstantUsage                                        { float: left; width: 100%; height: 100%; overflow: hidden; height: calc(100% - 46px); margin-top: 10px;}
.vehicleInstantUsageInfoContainer                           { float: left; width: 100%; height: calc(100% - 72px); height: -webkit-calc(100% - 72px); height: -moz-calc(100% - 72px); overflow-y: auto; }
.vehicleInstantUsageMapInfoContainer                        { float: left; width: 100%; height: 36px; overflow: hidden; background-color: #d33434; color: #FFFFFF; }
.vehicleInstantUsageMapInfoContainer > .cell                { float: left; width: 85px; height: 36px; line-height: 36px; vertical-align: middle; text-indent: 24px; }
.vehicleInstantUsageMapInfoContainer > .cell[altitude]      { background: url(altitude.png) 0 center no-repeat; margin-left: calc(50% - 185px); margin-left: -webkit-calc(50% - 185px); margin-left: -moz-calc(50% - 185px); }
.vehicleInstantUsageMapInfoContainer > .cell[satellite]     { background: url(satellite.png) 0 center no-repeat; margin-left: 10px; }
.vehicleInstantUsageMapInfoContainer > .cell[ignition]      { background: url(ignition.png) 0 center no-repeat; margin-left: 10px; }
.vehicleInstantUsageMapInfoContainer > .cell[standStill]    { background: url(standStill.png) 0 center no-repeat; margin-left: 10px; }
.vehicleInstantUsageTraceContainer                          { float: left; width: 100%; height: 36px; overflow: hidden; color: #162C43; }
.vehicleInstantUsageTraceSwitch                             { float: left; margin-top: 10px; width: calc(50% - 10px); width: -webkit-calc(50% - 10px); width: -moz-calc(50% - 10px);  }
.vehicleInstantUsageTraceSwitchSeparator                    { float: left; width: 10px; height: calc(100% - 7px); height: -webkit-calc(100% - 7px); height: -moz-calc(100% - 7px); border-right: 1px solid #bbbdbc; -moz-box-sizing: border-box; box-sizing: border-box; margin-right: 10px; margin-top: 7px; }
.vehicleInstantUsageInfoSelectorContainer                   { float: left; width: 100%; height: 50px; }
.vehicleInstantUsageInfoSelectorButton                      { float: right; width: 100px; }
.vehicleInstantUsageInfoUtilizationButton                   { float: right; margin-right: 5px; }
.vehicleInstantUsageInfoSwitchOuterContainer                { float: left; width: 100%; height: calc(100% - 50px); height: -webkit-calc(100% - 50px); height: -moz-calc(100% - 50px); }
.vehicleInstantUsageInfoSwitchBodyContainer                 { position: relative; left: 0; top: 0; width: 100%; height: 100%; }
.vehicleInstantUsageInfoSwitchBody                          { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #FFFFFF; overflow-x: hidden; overflow-y: auto; }
    .vehicleInstantUsageSpeedGaugeOuterContainer            { float: left; width: 100%; height: 212px; }
    .vehicleInstantUsageSpeedGaugeContainer                 { width: 430px; height: 100%; margin-left: auto; margin-right: auto; }
    .vehicleInstantUsageInfoData                            { float: left; width: 100%; height: calc(100% - 10px); height: -webkit-calc(100% - 10px); height: -moz-calc(100% - 10px); }
    .vehicleInstantUsageInfoData .dx-datagrid-rowsview	    { height: calc(100% - 35px) !important; height: -webkit-calc(100% - 35px) !important; height: -moz-calc(100% - 35px) !important;}
    .vehicleInstantUsageInfoData > .dx-datagrid		        { height: 99%;}

.vehicleInstantUsageInfoUtilizationData, .vehicleInstantUsageInfoVehicleAssignmentData, .vehicleInstantUsageInfoETBData {
    float: left;
    width: 100%;
    height: calc(100% - 10px);
    height: -webkit-calc(100% - 10px);
    height: -moz-calc(100% - 10px);
    position: absolute;
    left: 0;
    top: 0;
    background: #FFFFFF;
    overflow-x: hidden;
    overflow-y: auto;
}

.vehicleInstantUsageInfoTemsaSeviceButton {
    float           : right;
    width           : 135px;
    margin-right    : 5px;
}

.vehicleInstantUsageInfoUtilizationData .dx-datagrid-rowsview, .vehicleInstantUsageInfoVehicleAssignmentData .dx-datagrid-rowsview {
    height: calc(100% - 35px) !important;
    height: -webkit-calc(100% - 35px) !important;
    height: -moz-calc(100% - 35px) !important;
}

.vehicleInstantUsageInfoUtilizationData > .dx-datagrid, .vehicleInstantUsageInfoVehicleAssignmentData > .dx-datagrid {
    height: 99%;
}

/*.vehicleInstantUsageInfoUtilizationBody {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    overflow-x: hidden;
    overflow-y: auto;
}*/



.vehicleInstantUsageContainer {
    float: left;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    height: 53px;
}
.vehicleInstantUsageContainer[speed]                        { margin-top: -52px; }
.vehicleInstantUsageSpeed                                   { float: right; padding: 0; font-size: 30pt; font-weight: bold; text-align: right; height: 100%; margin-right: 52px; }
.vehicleInstantUsageSpeed span			                    { font-size: 10pt; font-weight: normal; margin-left: 10px; }
.vehicleInstantUsageBattery                                 { float: left; padding: 0; font-size: 14px; font-weight: bold; margin-left: 52px; margin-top: 26px; width: 100px; text-indent: 30px; background: url(battery.png) left center no-repeat; }

.vehicleInstantUsageContainer[subInfo]                          { margin-top: 15px; height: 118px; }
.vehicleInstantUsageContainer[subInfo] > .cell                  { float: left; height: 100%; }
.vehicleInstantUsageContainer[subInfo] > .cell:nth-of-type(1)   { width: 122px; margin-left : 7px; }
.vehicleInstantUsageContainer[subInfo] > .cell:nth-of-type(2)   { width: 28px; background: url(fuel.png) left 72px no-repeat; }
.vehicleInstantUsageContainer[subInfo] > .cell:nth-of-type(3)   { width: 113px; }
.vehicleInstantUsageContainer[subInfo] > .cell:nth-of-type(4)   { width: 28px; background: url(temperature.png) right 72px no-repeat; }
.vehicleInstantUsageContainer[subInfo] > .cell:nth-of-type(5)   { width: 122px; }
.vehicleInstantUsageContainer[subInfo] .caption                 { float: left; width: 100%; height: 30px; text-align: center; line-height: 30px; vertical-align: middle; color: #c2c2c2; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.vehicleInstantUsageTrip                                        { float: left; padding: 0; font-size: 24pt; font-weight: bold; width: 100%; text-align: center; }
.vehicleInstantUsageTrip span			                        { font-size: 10pt; font-weight: normal; }

.vehicleInstantUsageContainer[subInfoUnit]                      { margin-top: -90px; }
.vehicleInstantUsageFuelUnit                                    { float: left; margin-left: 70px; padding: 0; font-size: 12pt; font-weight: bold; text-align: right; height: 100%; color: #899EB1;}
.vehicleInstantUsageTempUnit                                    { float: right; margin-right: 70px; padding: 0; font-size: 12pt; font-weight: bold; text-align: right; height: 100%; color: #899EB1;}

.specialDeviceImageContainer {
    float: left;
    width: 100%;
    height: calc(100% - 295px);
    height: -webkit-calc(100% - 295px);
    height: -moz-calc(100% - 295px);
    overflow: hidden;
    opacity: 1;
    overflow-y: auto;
    scrollbar-width: none;
}
.specialDeviceImageContainer .busContainer{
    float:left;
    background: url("temsa_bus.png");
    background-position: top;
    background-repeat: no-repeat;
    width: 100%;
    height:670px;
}

.specialDeviceImageContainer[type="show"] {
    height: calc(100% - 25px);
    height: -webkit-calc(100% - 25px);
    height: -moz-calc(100% - 25px);
    transition: width 0.5s ease, height 0.5s ease;
}

.vehicleInstantUsageInfoSpecialDashboard {
    float: left;
    width: 100%;
    height : 100%
}
.specialDeviceInfoContainer {
    float: left;
    width: 100%;
    height: 260px;
    /*margin-bottom: 10px;*/
    
}
.specialDeviceInfoCenterContainer {
    float: left;
    width: 100%;
    height: 190px;
    background: url('bus.svg');
    background-position: center;
    background-repeat: no-repeat;
}
.specialDeviceInfoTopContainer{
    float:left;
    width : 100%;
    height: 20px
}

.specialDeviceInfoCenterContainer .circleInfo {

    background: url('circle.svg');
    background-position: center;
    background-repeat: no-repeat;
    width: 120px;
    height: 120px;

}
.specialDeviceInfoCenterContainer .circleInfo[type="left"] {
    float: left;
    margin-left: 20px;
}
.specialDeviceInfoCenterContainer .circleInfo[type="right"] {
    margin-right: 20px;
    float: right;
}
.circleValue {
    text-align: left;
    font: normal normal bold 38px/51px Segoe UI;
    letter-spacing: 0px;
    color: #0E3C65;
    opacity: 1;
    text-align: center;
    margin-top: 20px;
}
.circleSymbol, .centerOdometerValue {
    text-align: center;
    font: normal normal 600 14px/19px Segoe UI;
    letter-spacing: 0px;
    color: #0E3C65;
    opacity: 1;
    text-align: center;
    margin-bottom: 20px;
}

.centerOdometerInfo {
    float: left;
    width: calc(100% - 280px);
    width: -webkit-calc(100% - 280px);
    width: -moz-calc(100% - 280px);
    margin-top: 20px;
}
.specialDeviceInfoBottomContainer {
    float: left;
    height: calc(100% - 210px);
    height: -webkit-calc(100% - 210px);
    height: -moz-calc(100% - 210px);
    width : 100%;
}

.specialDeviceInfoBottomContainer .leftBottomContainer{
     background: url('box.svg');
     float:left;
     width : 196px;
       height:100%;
}
.specialDeviceInfoBottomContainer .rightBottomContainer {
    background: url('box.svg');
    float:right;
     width : 196px;
    height:100%;
}
.leftbottomInfo, .rightbottomInfo {
    float: left;
    height: 100%;
    width: 50%;
}
.bottomIcon {
    float: left;
    width: 35px;
    height: 25px;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding-top: 20px;
    padding-left: 20px;
}

.bottomIcon[type="batteryIcon"] {
    background: url('battery.svg');
}
.bottomIcon[type="accumulatorIcon"] {
    background: url('accumulator.svg');
}
.bottomIcon[type="fuelIcon"] {
    background: url('fuel.svg');
}

.bottomIcon[type="acceleratorPedalIcon"] {
    background: url('pedal.svg');
}

.iconValue {
    float: left;
    width: calc(100% - 60px);
    width: -webkit-calc(100% - 60px);
    width: -moz-calc(100% - 60px);
    height: 100%;
    padding-top: 15px;
}
.centerBottomContainer{
    float:left;
    width : 28px;
    height : 100%;
}
.centerBottomContainer .selectedgearInfo{
    width: 100%;
    height: 45px;
    background-position: center !important;
    background-repeat: no-repeat !important;
    float: left;
    margin-left: 3px;
}
.centerBottomContainer .airconditioning {
    float: left;
    width: 100%;
    height: 18px;
    background-position: center !important;
    background-repeat: no-repeat !important;
    margin-left:3px;
}
.centerBottomContainer .selectedgearInfo[type="D"] {
    background-image: url('d_gear1.svg');

}
.centerBottomContainer .selectedgearInfo[type="N"] {
    background: url('n_gear.svg');

}
.centerBottomContainer .selectedgearInfo[type="R"] {

    background: url('r_gear.svg');
}
.centerBottomContainer .selectedgearInfo[type="P"] {

    background: url('p_gear.svg');
}
.centerBottomContainer .airconditioning[type="on"] {
    background: url('airconditioning_on.svg');
}
.centerBottomContainer .airconditioning[type="off"] {
    background: url('airconditioning_off.svg');
}
.specialDeviceSeperatorContainer {
    float: left;
    height: 15px;
    width: 100%;
    box-shadow: 0px 3px 4px #0000001A;
    margin-top:10px;
}
.specialDeviceSeperatorContainer .dashboardseperator {
    float: left;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100%;
    height: 15px;
    cursor :pointer;
}
.dashboardseperator[type="up"] {
    background: url('up.svg');
}
.dashboardseperator[type="down"] {
    background: url('down.svg');
}
.specialDeviceImageContainer .axle .tire {

    width: 20px;
    height: 52px;
    background: url('tire_icon.svg');
    background-position: center !important;
    background-repeat: no-repeat !important;
    float:left
}
.specialDeviceImageContainer .tire[state="alarm"] {
    background: url('tire_red.svg');
}
.specialDeviceImageContainer .tire[state="alarm"] {
    background: url('tire_orange.svg');
}

.specialDeviceImageContainer .axle {
    float:left;
    height :50px;
    width: 100%;
}

.specialDeviceImageContainer .axle[first]{
    margin-top: 50px;
}
.specialDeviceImageContainer .axle[second] {
    margin-top  :   220px;
}
 .specialDeviceImageContainer .axle .tire[index="11"] {
    margin-left : 5px;

}
    .specialDeviceImageContainer .axle .tire[index="00"] {
        margin-left: 5px;
    }
.specialDeviceImageContainer .axle .tire[index="13"]{
    margin-left:5px;
}
.specialDeviceInfoTopContainer .cell {
    float: left;
    width: 25px;
    height: 100%;
    background-repeat: no-repeat !important;
    margin-left:5px;
}
.specialDeviceInfoTopContainer .cell:first-of-type{
    margin-left:150px;
}

.specialDeviceInfoTopContainer .cell[accumulatorWarning] {
    background: url('accumulator_disable.svg');
}
.specialDeviceInfoTopContainer .cell[accumulatorWarning][type="alarm"] {
    background: url('accumulator_warning.svg');
}
.specialDeviceInfoTopContainer .cell[brakeWarning] {
    background: url('brakeerrordisable.svg');
}
.specialDeviceInfoTopContainer .cell[brakeWarning][value="1"] {
    background: url('brakeError_Yellow.svg');
}
.specialDeviceInfoTopContainer .cell[brakeWarning][value="2"] {
    background: url('brakeError_Red.svg');
}
.specialDeviceInfoTopContainer .cell[lowTirePressureWarning] {
    background: url('low_tire_pressure_disable.svg');
}
.specialDeviceInfoTopContainer .cell[engineWarning] {
    background: url('engine_disable.svg');
}
.specialDeviceInfoTopContainer .cell[engineWarning][value="1"] {
    background: url('enginewarning_yellow.svg');
}
.specialDeviceInfoTopContainer .cell[engineWarning][value="2"] {
    background: url('enginewarning_red.svg');
}
.specialDeviceInfoTopContainer .cell[gearboxWarning] {
    background: url('gearbox_disable.svg');
}
.specialDeviceInfoTopContainer .cell[gearboxWarning][value="1"] {
    background: url('gearbox_Yellow.svg');
}
.specialDeviceInfoTopContainer .cell[gearboxWarning][value="2"] {
    background: url('gearbox_Red.svg');
}

.SpecialBottomContainer {
    float: left;
    width: 100%;
    height: 50px;
    background: #EFEFEF 0% 0% no-repeat padding-box;
    opacity: 1;
}
.vehicleInstantUsageInfoContainer[type="special"] {
    height: calc(100% - 52px);
    height: -webkit-calc(100% - 52px);
    height: -moz-calc(100% - 52px);
}
.brakePressure {
    width: 30px;
    height: 30px;
    background: url('brakePressureNormal.svg');
    background-repeat: no-repeat !important;
    margin-top: 5px;
    text-align: center;
    color: #FFFFFF;
    opacity: 1;
    font-size: 10px;
}

.brakePressure[alarm="isActive"] {
    background: url('brakePressureAlarm.svg');
}
.leftTireInfo .brakePressure, .rightTireInfo .brakePressure {
    float: left;
    margin-left: 15px;

}

.specialDeviceImageContainer .axle .leftTireInfo, .specialDeviceImageContainer .axle .rightTireInfo {
    float: left;
    width: 50%;
    height: 100%;
}

.brakeLiningWidth {
    background: url('brakeliningwidthnormal.svg');
    width: 40px;
    height: 30px;
    background-repeat: no-repeat !important;
    margin-top: 5px;

    /*line-height: 30px;*/
}
.brakeLiningWidthSymbol {
    width: 100%;
    height: 10px;
    float: left;
    text-align: center;
    font: normal normal bold 7px/8px Segoe UI;
    letter-spacing: 0px;
    color: #79B110;
    opacity: 1;
    margin-top:3px
}

.brakeLiningWidthValue {
    width: 100%;
    height: 15px;
    float: left;
    text-align: center;
    font: normal normal bold 11px/8px Segoe UI;
    letter-spacing: 0px;
    color: #79B110;
    opacity: 1;
}

.brakeLiningWidth[alarm="isActive"] {
    background: url('brakeLiningWidthAlarm.svg');
}
.brakeLiningWidth[alarm="isActive"] .brakeLiningWidthSymbol, .brakeLiningWidth[alarm="isActive"] .brakeLiningWidthValue {
    color: #b70101 !important;
}
.brakeLiningWidth[alarm="noData"], .brakePressure[alarm="noData"] {
    opacity: 0;
}

.specialDeviceImageContainer .axle .leftTireInfo .brakeLiningWidth, .specialDeviceImageContainer .axle .rightTireInfo .brakeLiningWidth {
    float: left;
    margin-left: 10px;
}

.brakePedal {
    float: left;
    width: 100%;
    height: 20px;
    background-repeat: no-repeat !important;
    margin-top: 10px;
    margin-left: 10px;
    text-align: left;
    font: normal normal bold 12px/16px Segoe UI;
    letter-spacing: 0px;
    opacity: 1;
    padding-left: 25px;
    background: url('brakePedalDepressed.svg');
    color: #9B9B9B;
}
.brakePedal[state="pressed"] {
    background  : url('brakePedalPressed.svg');
    color       : #0E3C65;
}
.specialDeviceImageContainer .vehicleSuspension {
    float: right;
    width: 55px;
    height: 35px;
    margin-top: 60px;
    background: url('suspension_tank.svg');
    background-repeat: no-repeat !important;
    background-position: right;
    margin-right: 95px;
    text-align: center;
    color: #FFFFFF;
    opacity: 1;
    font-size: 10px;
    letter-spacing: 0px;
}


.specialDeviceImageContainer .vehicleSuspension[alarm="isActive"]{
    background: url('suspension_tank_alarm.svg');
}
.specialDeviceImageContainer .vehicleSuspension[alarm="noData"] {
    opacity: 0;
}

.tireInfo {
    height: 130px;
    width: 55px;
    margin-top: -75px;
    float: left;
}
.tireInfo[left] {
    margin-left: 90px;
}
.tireInfo[right] {
    margin-left: 5px;

}
.tireInfoCircleData {
    width: 55px;
    height: 50px;
    border: 1px solid #E3E3E3;
    text-align: center;
    border-radius: 5px;
    padding-top: 0px;
    cursor: pointer;
    background: #FFFFFF;
    margin-top: 5px;
    float: left;
    margin-right:5px;
}
.tireInfoCircleDatas {
    width: 125px;
    height: 50px;
    float: left;
}
.specialDeviceImageContainer .axle .tire[index="12"] {
margin-left: 20px;
}
.specialDeviceImageContainer .axle .tire[alarm="red"] {
    background: url('tire_red.svg');
}
.specialDeviceImageContainer .axle .tire[alarm="yellow"] {
    background: url('tire_orange.svg');
}
.specialDeviceImageContainer .axle .tire[alarm="nosignal"] {
    background: url('tire_nosensor.svg');
}
.tireInfoCircleData[alarm="red"] {
    background: #B70101 0% 0% no-repeat padding-box;
}
.tireInfoCircleData[alarm="yellow"] {
    background: #FBB800 0% 0% no-repeat padding-box;
}
.tireInfoCircleData[alarm="nosignal"] {
    background: url('nosensor_icon.svg');
    background-position: center;
    background-repeat: no-repeat;
}
.tireInfoCircleData[alarm="nosignal"] .tireInfoCirclePressure, .tireInfoCircleData[alarm="nosignal"] .tireInfoCircleTemperature {
    display: none;
}

.tireInfoCircleData[alarm="red"] .tireInfoCirclePressure, .tireInfoCircleData[alarm="red"] .tireInfoCircleTemperature,
.tireInfoCircleData[alarm="yellow"] .tireInfoCirclePressure, .tireInfoCircleData[alarm="yellow"] .tireInfoCircleTemperature {
    color: #ffff;
}

.tireInfoCirclePressure, .tireInfoCircleTemperature {
    width: 100%;
    text-align: center;
    font: normal 12px / 19px Segoe UI;
    letter-spacing: 0px;
    font-weight: normal;
}
.tireInfoCirclePressure{
    margin-top:5px;
}

.infoContainerOpened {
    height: 100%;
}
.vehicleInstantUsageInfoVehicleAssignmentButton {
    float: right;
    margin-right: 5px;
    width: 135px;
    color: #d9534f;
    cursor: pointer;
    font-weight: bold;
}

.activeAssignment{
    color: #7cc257 !important;
}

.vehicleInstantUsageInfoETBButton {
    float: right;
    margin-right: 5px;
    width:100px;
}
.activeETB {
    color: #7cc257 !important;
    cursor: pointer;
    font-weight: bold;
}

.ETBListGridDetail {
    float: left;
    width: 100%;
    height: 100%;
    margin-left: -10px;
}
.ETBListGridDetail .dx-scrollable-container { float: left; width: 100% !important; height: 100% !important;}
.ETBListGridDetail .dx-scrollable-content{ float: left; width: 100% !important; height: 100% !important;}
.ETBListGridDetail .dx-datagrid-content { float: left; width: 100% !important; height: 100% !important; }