﻿.vehicleInfoOuterContainer {
    float: left;
    width: 100%;
    height: 36px;
    overflow: hidden;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    -o-transition: height 0.5s;
    transition: height 0.5s;
}

.vehicleInfoTopContainer {
    float: left;
    width: 100%;
    height: 36px;
}

.vehicleInfoBodyContainer {
    float: left;
    width: 100%;
    height: 102px;
    margin-top: 12px;
}

.vehicleInfoInnerContainer {
    float: left;
    width: 100%;
    height: 100%;
}

.vehicleInfoExpander {
    float: right;
    width: 36px;
    height: 36px;
    cursor: pointer;
    margin-left: 5px;
}

.vehicleInfoExpander:hover {
    background-color: #e7e7e7;
}

.vehicleInfoTopBody {
    float: left;
    width: calc(100% - 85px);
    width: -webkit-calc(100% - 85px);
    width: -moz-calc(100% - 85px);
    height: 36px;
}

.vehicleInfoInfoArrow {
    float: left;
    width: 100%;
    height: 100%;
    background: url(arrow.png) center center no-repeat;
}

.vehicleInfoTopData {
    float: left;
    width: calc(100% - 82px);
    width: -webkit-calc(100% - 82px);
    width: -moz-calc(100% - 82px);
    height: 36px;
    line-height: 36px;
    vertical-align: middle;
    text-overflow: ellipsis;
    overflow: hidden;
}

.vehicleInfoTopSearch {
    float: right;
    width: 36px;
    height: 100%;
    overflow: hidden;
    -webkit-transition: width 0.5s;
    -moz-transition: width 0.5s;
    -ms-transition: width 0.5s;
    -o-transition: width 0.5s;
    transition: width 0.5s;
}

.vehicleInfoTopSearch:hover {
    background-color: #e7e7e7;
}

.vehicleInfoSearchIcon {
    float: right;
    width: 36px;
    height: 100%;
    cursor: pointer;
}

.vehicleInfoSearchIcon:hover {
    background-color: #e7e7e7;
}

.vehicleInfoTopFavoriButton {
    float: left;
    width: 36px;
    height: 34px;
    overflow: hidden;
    -webkit-transition: width 0.5s;
    -moz-transition: width 0.5s;
    -ms-transition: width 0.5s;
    -o-transition: width 0.5s;
    transition: width 0.5s;
    background: url('../../../themes/images/favorite/star_icon_01.svg') center center no-repeat;
    border: 1px solid #DDD;
    cursor: pointer;
    margin-left: 5px;
}

.vehicleInfoTopFavoriButton:hover {
    background-color: #e7e7e7;
}

.vehicleInfoTopFavoriButton[isFavorite="true"] {
    background: url('../../../themes/images/favorite/star_icon_02.svg') center center no-repeat;
}

.vehicleInfoTopFavoriButton[isFavorite="true"]:hover {
    background-color: #e7e7e7;
}

.vehicleInfoSearchIcon[expanded="true"] {
    background: url(close.png) center center no-repeat;
}

.vehicleInfoSearchIcon[expanded="false"] {
    background: url(search.png) center center no-repeat;
}

.vehicleInfoSearchText {
    float: left;
    width: calc(100% - 36px);
    width: -webkit-calc(100% - 36px);
    width: -moz-calc(100% - 36px);
    height: 100%;
}

.vehicleInfoExpander[disabled] > .vehicleInfoInfoArrow {
    background: url(arrow-disabled.png) center center no-repeat;
    cursor: default;
}

.vehicleInfoExpander[expanded="false"] > .vehicleInfoInfoArrow {
    -webkit-animation: spinUp 0.5s linear;
    -moz-animation: spinUp 0.5s linear;
    animation: spinUp 0.5s linear;
}

.vehicleInfoExpander[expanded="true"] > .vehicleInfoInfoArrow {
    -webkit-animation: spinDown 0.5s linear;
    -moz-animation: spinDown 0.5s linear;
    animation: spinDown 0.5s linear;
}

.vehicleInfoBodyImageContainer {
    float: left;
    width: 102px;
    height: 102px;
    cursor: pointer;
    overflow: hidden;
}

.vehicleInfoBodyImage {
    float: left;
    width: 100%;
    height: 100%;
    background-size: 100% 100% !important;
    -webkit-transition: margin-left 0.25s;
    -moz-transition: margin-left 0.25s;
    -ms-transition: margin-left 0.25s;
    -o-transition: margin-left 0.25s;
    transition: margin-left 0.25s;
}

.vehicleInfoBodyImageContainer[type="0"] > .vehicleInfoBodyImage, .driverEmpty {
    background: url(driver.png) 0 center no-repeat;
}

.vehicleInfoBodyImageContainer[type="1"] > .vehicleInfoBodyImage, .vehicleEmpty {
    background: url(vehicle.png) 0 center no-repeat;
}

.vehicleInfoBodyImageContainer .dx-fileuploader-button {
    display: none;
}

.vehicleInfoBordered {
    border: 1px solid #E3E3E3;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.vehicleInfoBold {
    font-size: 11pt;
    font-weight: bold;
    color: #162c43;
    -webkit-text-shadow: rgba(110, 141, 170, 0.4) 0 0 1px;
    text-shadow: rgba(110, 141, 170, 0.4) 0 0 1px;
}

.vehicleInfoShadow {
    font-size: 11pt;
    color: #162c43;
    -webkit-text-shadow: rgba(110, 141, 170, 0.4) 0 0 1px;
    text-shadow: rgba(110, 141, 170, 0.4) 0 0 1px;
}

.vehicleInfoBodyDataContainer {
    float: left;
    width: calc(100% - 112px);
    width: -webkit-calc(100% - 112px);
    width: -moz-calc(100% - 112px);
    height: 102px;
    overflow: hidden;
    margin-left: 10px;
}

.vehicleInfoLastCommDate {
    float: left;
    width: 100%;
    margin-top: 10px
}

.vehicleInfoLastAddress {
    float: left;
    width: 100%;
    font-size: 9pt;
    margin-top: 10px;
}

.vehicleInfoSearchText .dx-texteditor-buttons-container {
    display: none;
}

.connectTruckOrTemsa {
    float: left;
    width: 100%;
    height: 22px;
    margin-top: 10px;
    
}
.connectTruckOrTemsa[type= "ConnectTruck"] {
    background: url(connectruck_logo.png) no-repeat white;
}
.connectTruckOrTemsa[type= "Temsa"] {
    background: url(temsa_logo_map.svg) no-repeat white;
    background-position-y: center;
    padding: 3px 0 0 35px !important;
}

.connectTruckOrTemsa .connectTruckOrTemsaInfo {
    float: right;
    width: calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: -moz-calc(100% - 15px);
    margin-top: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
    font: italic 12px Segoe UI;
    color: #616161;
}

@-moz-keyframes spinUp {
    100% {
        -moz-transform: rotate(180deg);
    }
}

@-webkit-keyframes spinUp {
    100% {
        -webkit-transform: rotate(180deg);
    }
}

@keyframes spinUp {
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@-moz-keyframes spinDown {
    100% {
        -moz-transform: rotate(-180deg);
    }
}

@-webkit-keyframes spinDown {
    100% {
        -webkit-transform: rotate(-180deg);
    }
}

@keyframes spinDown {
    100% {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}
