/* Minification failed. Returning unminified contents.
(1337,108): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1337,152): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-size-14'
(1337,211): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing--0-34'
(1341,114): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1341,197): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1342,115): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1342,198): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1358,97): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1358,149): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-line-spacing-16'
(1358,206): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1361,97): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1361,149): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-line-spacing-16'
(1361,206): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1364,97): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1364,149): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-line-spacing-16'
(1364,206): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1365,123): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1365,205): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1366,122): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1366,205): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1367,125): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1367,208): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1368,142): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1368,189): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-size-14'
(1368,248): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1369,143): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1369,190): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-size-14'
(1369,249): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1370,143): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1370,190): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-size-14'
(1370,249): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1388,117): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1388,164): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-size-14'
(1388,223): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1389,141): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1389,188): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-size-14'
(1389,247): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1390,139): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1390,186): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-size-14'
(1390,245): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1788,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1788,56): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-weight-bold'
(1788,88): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-size-14'
(1789,26): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1808,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1808,68): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-line-spacing-16'
(1809,26): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1826,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1826,68): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-line-spacing-16'
(1827,26): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(1869,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1888,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1888,68): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-line-spacing-16'
(1930,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1949,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(1949,68): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-line-spacing-16'
(1990,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(2009,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(2009,68): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-line-spacing-16'
(2026,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(2026,68): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-line-spacing-16'
(2027,26): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(2043,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(2043,68): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-line-spacing-16'
(2044,26): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(2115,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(2115,56): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-weight-bold'
(2230,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(2230,60): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-size-14'
(2231,26): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing--0-34'
(2255,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(2255,56): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-weight-bold'
(2256,26): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(2272,16): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-style-normal'
(2272,56): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-font-weight-bold'
(2273,26): run-time error CSS1039: Token not allowed after unary operator: '-unnamed-character-spacing-0'
(3348,12): run-time error CSS1038: Expected hex color, found '#ffff'
(6792,25): run-time error CSS1046: Expect comma, found '255'
(6792,33): run-time error CSS1046: Expect comma, found '/'
(8692,25): run-time error CSS1046: Expect comma, found '255'
(8692,33): run-time error CSS1046: Expect comma, found '/'
(11796,33): run-time error CSS1030: Expected identifier, found '!important'
(11796,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '!important'
(13933,12): run-time error CSS1038: Expected hex color, found '#FFFF'
(13939,12): run-time error CSS1038: Expected hex color, found '#FFFF'
 */

.alarmListContainer                                  
{   
    width   : 30px;
    height  : 50px;
    position: relative;
    cursor  : pointer;
    position: relative;
    background: transparent url(/plugins/app25/AlarmList/alarm_button.svg) center no-repeat padding-box;
    float: right;
    margin-left: 10px;
}

.alarmListContainer[isActive="true" ] {
    background: transparent url(/plugins/app25/AlarmList/alarm_button_2.svg) center no-repeat padding-box;
}
.alarmListContainer[isNew] {
    background: transparent url(/plugins/app25/AlarmList/alarm_button_reddot.svg) no-repeat padding-box;
    background-position: -1px center;
}

.alarmListPopupContainer
{
    float       : left;
    width       : 100%;
    height      : 100%;
}

.alarmListPopupContainer .emergencyListButton                   
{
    float               : left; 
    width               : 100%; 
    height              : 50px;
    margin-bottom       : 20px;
}

.alarmListPopupContainer .gridContainer                   
{
    float               : left; 
    width               : 100%; 
    height              : calc(100% - 70px); height: -moz-calc(100% - 70px); height: -webkit-calc(100% - 70px); 
}




.alarmListPopupContainer .dx-datagrid-search-panel        
{   
    float               : left; 
    margin-left         : 0; 
    margin-top          : -2px;
    width               : calc(100% - 5px) !important;
}

.alarmListPopupContainer .dx-toolbar                      
{
    float               : left; 
    width               : calc(100% - 190px); width: -moz-calc(100% - 190px); width: -webkit-calc(100% - 190px); 
    display             : inline-block; 
    margin-left         : 4px;
}
.alarmListPopupContainer .dx-toolbar-after {
    display: inline !important;
}

.alarmListPopupContainer .dx-toolbar-center {
    display: inline !important;
}

.alarmListPopupContainer.dx-toolbar-before {
    display: inline !important;
}

.alarmListPopupContainer .dx-toolbar-after {
    display: inline !important;
}

.alarmListPopupContainer .dx-toolbar .dx-toolbar-after {
    padding-left: 1px;
}

.alarmListPopupContainer .dx-toolbar-after {
    left: 0px !important
}

.alarmListPopupContainer .dx-toolbar-item {
    display: inline !important;
}

.alarmListPopupContainer .dx-toolbar-after                
{   
    padding             : 0; 
    width               : 100%;
}

.alarmListPopupContainer .AlarmListContainer_SwitchButton 
{
    float               : left;
    width               : 36px; 
}

.alarmListPopupContainer .AlarmListContainer_TextBox
{
    float               : right;
    width               : auto;
    margin-left         : -25px;
    color               : #d33434;
    font-size           : 16px;
    font-weight         : bold;
    line-height         : 36px;
    text-align          : left;
    white-space         : nowrap;
}
.alarmListPopupContainer .AlarmListContainer_TextBoxLabel 
{ 
    text-align      : left;
    font            : normal normal normal 14px/19px Segoe UI;
    letter-spacing  : 0px;
    color           : #333333;
    max-width       : 125px;
    overflow        : hidden;
    text-overflow   : ellipsis;
    float           : left;
    margin-top      : 8px;
    margin-right    : 2px;
}
.alarmListPopupContainer .AlarmListContainer_TextBoxLabelCount
{
    float           : right;
}

.AlarmListRow 
{
    /*min-height          : unset !important;*/
    /*height              : auto !important;*/
    width               : 100%;
    background-color    : #f9f9f9;
    display             : flex;
    min-width           : 490px;
}

.AlarmListRow[isSelected]
{
    background-color    : #ddd;
}

.AlarmListRow[shade]
{
    background-color    : #EFF1F2;
}

.AlarmListRow[shade][isSelected]
{
    background-color    : #ddd;
}

.AlarmListRow > tr,
.AlarmListRow > tr > td
{
    width               : 100%;
    min-height              : 88px;
}

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

.AlarmListRowWest .AlarmListRowWestIcon
{
    float               : left;
    width               : 30px;
    height              : 30px;
    background-position : center center;
    background-repeat   : no-repeat;
    /*position            : relative;
    top                 : 50%;
    transform           : translateY(-50%);*/
    margin-left         : 10px;
    background-size     : 30px;
    margin-top:10px;
}

.AlarmListRowEast
{
    top                 : -40px;
    float               : left;
    min-width           : 426px;
    width				: calc(100% - 50px); width: -moz-calc(100% - 50px); width: -webkit-calc(100% - 50px); 
    height              : 100%;
    padding-right       : 10px;

}

.AlarmListRowEastCell
{
    float               : left;
    width               : 426px;
    height              : 100%;
    line-height         : 16px;
}

.AlarmListRowEastCell:nth-child(1)
{
    font-weight         : bold;
    height              : 26px;
    padding-top         : 10px;
}

.AlarmListRowEastCell:nth-child(2)
{
    height              : 36px;
    padding-top         : 10px;
    padding-bottom      : 10px;
}

.AlarmListRowEastCell:nth-child(3), 
.AlarmListRowEastCell:nth-child(4)
{
    height               : 26px;
    padding-bottom       : 10px;
    overflow             : hidden !important;
    text-overflow        : ellipsis;
    white-space          : nowrap;
}

.AlarmListRowEastCell:nth-child(1)[alarm]
{
    color                : #FF0000;
}

.AlarmListRowEastCellWest 
{
    overflow             : hidden !important ;
    text-overflow        : ellipsis;
    white-space          : nowrap;
    font-weight          : bold;
    float                : left;
    width				 : calc(100% - 60px); width: -moz-calc(100% - 60px); width: -webkit-calc(100% - 60px); 
    height               : 100%;
}

.AlarmListRowEastCellEast
{
    float               : right;
    width               : 60px;
    height              : 100%;
}

.AlarmListRow .dx-freespace-row 
{
    background-color    : white;

}

.speedAlarmIcon 
{
    width               : 30px;
    height              : 20px;
    background-position : center center;
    background-repeat   : no-repeat;
    border              : 0;
    position            : relative;
    background-size     : 20px;
}

.AlarmListContextMenuItem 
{  float:left;
   margin:5px;
   width: 100%;
}

.AlarmListContextMenuItem .dx-icon-check
{
    float: left;
    line-height: 19px;
}

.AlarmListContextMenuItem .ContextMenuItemContent
{
    float: left;
    margin-left: 21px;
}

.AlarmListContextMenuItem .ContextMenuItemContent[selected]
{
    margin-left: 5px;
}
.AlarmListContextMenuItem .ContextMenuItemContent[main]
{
    margin-left: 0px;
}

.externalMapContent { height: 100%; }
.externalMapContent .ol-popup 
{
    position                : absolute;
    background-color        : white;
    -webkit-box-shadow      : 3px 3px 6px rgba(0, 0, 0, 0.25); -moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25); box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
    padding                 : 15px;
    -webkit-border-radius   : 3px; -moz-border-radius: 3px; border-radius: 3px;
    border                  : 1px solid #cccccc;
    bottom                  : 20px; 
    left                    : -55px;
    min-width               : 280px;
    z-index                 : 5000;
    opacity                 : 0.8;
    font                    : 12px 'Segoe UI', 'Helvetica Neue', Helvetica, Verdana, sans-serif;
    color                   : #475867;
}
.externalMapContent .ol-popup:after, .ol-popup:before 
{
    top                     : 100%;
    border                  : solid transparent;
    content                 : " ";
    height                  : 0;
    width                   : 0;
    position                : absolute;
    pointer-events          : none;
}
.externalMapContent .ol-popup:after 
{
    border-top-color        : white;
    border-width            : 10px;
    left                    : 48px;
    margin-left             : -10px;
}
.externalMapContent .ol-popup:before 
{
    border-top-color        : #cccccc;
    border-width            : 11px;
    left                    : 48px;
    margin-left             : -11px;
}
.alarmListMapContainer .dx-popover-arrow:after { display: none; } 

/*X4 VIDEO*/

.AlarmListX4VideoIcon {
    float: left;
    width: 24px;
    height: 24px;
    background-color: #FF9900;
    border-radius: 50%;
    display: inline-block;
    text-align:center;
    line-height:24px;
}

.custom-icon{
    color:white;
}
.AlarmListX4VideoLink {
    float: left;
    height: 20px;
    /*text-align: left;*/
    text-decoration: underline;
    font: normal normal normal 13px/17px Segoe UI !important;
    /*letter-spacing: -0.26px;*/
    color: #338CDB;
    /*opacity: 1;*/
    padding-left: 5px;
    line-height:24px;
}

.X4-slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

.X4-prev, .X4-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    color: black;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.X4-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.X4-prev:hover, .X4-next:hover {
    background-color: rgba(0,0,0,0.8);
}

.X4-text {
    color: black;
    font-size: 15px;
    padding: 8px 12px;
    /*position: absolute;*/
    bottom: 8px;
    width: 100%;
    text-align: center;
    float: left;
}

/* Number text (1/3 etc) */
.X4-numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.X4-dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

    .X4-active, .X4-dot:hover {
        background-color: #717171;
    }

/* Fading animation */
.X4-fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .X4-prev, .X4-next, .X4-text {
        font-size: 11px
    }
}

.X4-Slides {
    display: none
}

.X4-prevDiv {
    float: left;
    min-height: 200px;
    width: 2%;
}

.X4-nextDiv {
    min-height: 200px;
    width: 2%;
}

.X4-VideoFirst {
    float: left;
    width: 23%;
}

.X4-Video {
    float: left;
    width: 23%;
    margin-left: 10px;
}

.X4-VideoCapture {
    /*width: 188px;*/
    height: 180px;
    background-repeat: round;
}

.X4-VideoFirstPopup {
    float: left;
    width: 44%;
}

.X4-VideoPopup {
    float: left;
    width: 44%;
    margin-left: 10px;
}

.X4-prevPopup, .X4-nextPopup {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    color: black;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.X4-nextPopup {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    .X4-prevPopup:hover, .X4-nextPopup:hover {
        background-color: rgba(0,0,0,0.8);
    }

.X4-prevDivPopup {
    float: left;
    min-height: 200px;
    width: 5%;
}

.X4-nextDivPopup {
    min-height: 200px;
    width: 5%;
}
.emergencyPopup {
    float: left;
   
}

.emergencyPopup .dx-overlay-content{
    
    margin-left : 22px !important;
}
.EmergencyAlarmListDetailedSDate, .EmergencyAlarmListDetailedEDate {
    float: left;
    margin-left: 10px;
}

.EmergencyAlarmListDetailedDateText {
    float: left;
    font-size: 16px;
    font-weight: bold;
    line-height: 36px;
    text-align: left;
    white-space: nowrap;
}
.emergencyGrid {
    float: left;
    height :100%;
    width : 100%;
}

.alarmListPackage {
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-color:#EFF1F2;
    text-indent: 30px;
    width: 32px;
    height: 32px;
    float:left;
    margin:0px 10px 10px 0px;
}

.RotPlus {
    background-image: url(/plugins/app25/AlarmList/Images/ROTPLUS.svg);
}

.RotMinus {
    background-image: url(/plugins/app25/AlarmList/images/ROTMINUS.svg);
}

.DeviceAttached {
    background-image: url(/plugins/app25/AlarmList/images/C551.svg);
}

.DeviceDeAttached {
    background-image: url(/plugins/app25/AlarmList/images/C552.svg);
}

.Pause {
    background-image: url(/plugins/app25/AlarmList/images/SPDMINUS.svg);
}

.BatteryChargeLevel {
    background-image: url(/plugins/app25/AlarmList/images/C554.svg);
}

.GprsConnected {
    background-image: url(/plugins/app25/AlarmList/images/NTID.svg);
}

.alarmListPopupContainer .AlarmListContainer_SettingsButton {
    width: 36px;
}

.AlarmFilterPopupBox {
    height: 450px;
}

.AlarmFilterBottom {
    border-top: 1px solid #ddd;
    color: #333;
    height: 75px;
    padding-top: 20px;
}

.AlarmFilterBottomCancelButton {
    margin-left: 40px;
    margin-right: 15px;
    width: 122px;
    height: 37px;
}

.AlarmFilterBottomSaveButton {
    width: 122px;
    height: 37px;
}

.AlarmFilterBottomConfirmBox {
    height: 80px;
    width: 266px;
    margin-left: 36px;
    text-align: center;
}

.AlarmFilterBottomConfirmCancelButton {
    margin-left: 35px !important;
    margin-right: 15px !important;
    width: 122px;
    height: 37px
}

.AlarmFilterBottomConfirmSaveButton {
    width: 122px;
    height: 37px
}




@keyframes changeAlertBackground {
  from {
      background  : url(/plugins/app25/ApplicationAlarmSoundPlayer/alert.png) center center no-repeat;
  }

  to {
      background  : url(/plugins/app25/ApplicationAlarmSoundPlayer/noalert.png) center center no-repeat;
  }
}
.ApplicationAlarmPlayer 
{ /*float: right; width: 33px; height: 33px; cursor: pointer;*/ 
    position                : absolute;
    top                     : 0;
    margin-left             : -42px;
    width                   : 36px; 
    height                  : 36px; 
    -webkit-border-radius   : 3px; 
    -moz-border-radius      : 3px; 
    border-radius           : 3px;
    -webkit-box-shadow      : 3px 3px 6px rgba(0, 0, 0, 0.25); 
    -moz-box-shadow         : 3px 3px 6px rgba(0, 0, 0, 0.25); 
    box-shadow              : 3px 3px 6px rgba(0, 0, 0, 0.25);
    z-index                 : 1010;
    background-color        : rgba(255, 255, 255, 0.8);

}
.ApplicationAlarmPlayer .alert{ width:100%; height: 100%; animation-duration: 0.6s; animation-name: changeAlertBackground; animation-iteration-count: infinite; animation-direction: alternate; }
.MapRigthClickContextMenuItem
{
    padding         : 5px !important;
}

.ApplicationContextMenuIcon {
    margin-right    : 8px;
    margin-top      : 2px;
    width           : 15px;
    height          : 15px;
    float           : left;
}

.ApplicationContextItemText{
    width           : 60%;
    height          : 30px;
    float           : left;
}

.ApplicationContextMenuIcon1Screen {
    background: url(/plugins/app25/ApplicationContextMenu/mapcontextmenu.png) 0 0 no-repeat;
}

.ApplicationContextMenuIcon2Screen {
    background: url(/plugins/app25/ApplicationContextMenu/mapcontextmenu.png) -15px 0 no-repeat;
}

.ApplicationContextMenuIcon3Screen {
    background: url(/plugins/app25/ApplicationContextMenu/mapcontextmenu.png) -30px 0 no-repeat;
}

.ApplicationContextMenuIcon4Screen {
    background: url(/plugins/app25/ApplicationContextMenu/mapcontextmenu.png) -45px 0 no-repeat;
}


.ApplicationReporter_Container          { float: left; width: 100%; height: 100%; }
.ApplicationReporter_Wrapper            { position: relative; width: 100%; height: 100%; left: 0; top: 0; }
.ApplicationReporter_Body               { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url(/plugins/app25/ApplicationReporter/bg.png) center center no-repeat; }
.ApplicationReporter_Toolbar            { float: left; width: 100%; height: 36px; }
.ApplicationReporter_Grid               { float: left; width: 100%; height: 100%;  }
.ApplicationReporter_Grid[hasToolbar]   { height: calc(100% - 46px); height: -webkit-calc(100% - 46px); height: -moz-calc(100% - 46px); margin-top: 10px; }
.ApplicationReporter_ToolbarButton		{ float: right; margin: 0 5px !important;}
.dx-icon-exp-excel                      { width: 20px !important; height: 20px !important; background: url(/plugins/app25/ApplicationReporter/exp-xlsx.png) center center no-repeat; }
.dx-icon-exp-pdf                        { width: 20px !important; height: 20px !important; background: url(/plugins/app25/ApplicationReporter/exp-pdf.png) center center no-repeat; }
.dx-icon-exp-csv                        { width: 20px !important; height: 20px !important; background: url(/plugins/app25/ApplicationReporter/exp-csv.png) center center no-repeat; }

.ApplicationPivotReporter_Toolbar       { float: left; width: 100%; height: 50px; }
.ApplicationPivotReporter_Grid,          
.ApplicationPivotReporter_Chart         { float: left; width: 100%; height: calc(100% - 60px); height: -webkit-calc(100% - 60px); height: -moz-calc(100% - 60px); margin-top: 10px; background:#fff; }
.ApplicationPivotReporter_Switcher      { float: right; }
.ApplicationPivotReporter_EmailSender   { float: right; }
.ApplicationReporter_EmailSenderButton  { float: right; margin-top: 20px !important; margin-right: 0 !important;}

.reportProgressBar
{
    float                               : left;
    width                               : 320px;
    height                              : 45px;
}
.reportProgressBar > #nodesProgressBar
{
    margin-top                          : 20px;
    float                               : left;
    margin-left                         : 10px;
}
.reportProgressBar > .finishedText
{
    float                               : left;
    width                               : 250px;
    height                              : 45px;
    line-height                         : 45px;
    color                               : #767676;
    font-size                           : 14px;
}
.reportProgressBar > .playerButton
{
    float                               : left;
    width                               : 16px;
    height                              : 17px;
    margin-top                          : 12px;
    margin-left                         : 4px;
    cursor                              : pointer;
}
.reportProgressBar > .playerButton[type="play"]
{
    background                          : url(/plugins/app25/ApplicationReporter/report-extreme.png) -32px 0 no-repeat;
}
.reportProgressBar > .playerButton[type="pause"]
{
    background                          : url(/plugins/app25/ApplicationReporter/report-extreme.png) 0 0 no-repeat;
}
.reportProgressBar > .playerButton[type="stop"]
{
    background                          : url(/plugins/app25/ApplicationReporter/report-extreme.png) -16px 0 no-repeat;
}

.applicationSearcher                                                    { float: left;width: 100%;height: 100%; }
.applicationSearcher .separator 
{
    float                   : left;
    width                   : 1px;
    height                  : 28px;
    margin-top              : 4px;
    margin-bottom           : 4px;
    background-color        : #d1d1d1;
}  
.applicationSearcher .dx-icon                                           { width: 16px;height: 100%;text-align: center;line-height: 50px;padding-left: 16px;}
.applicationSearcher .dx-icon.icon-search                               { float: left; background: url(/plugins/app25/ApplicationSearcher/search.png) center center no-repeat;}
.applicationSearcher .dx-icon.icon-clear                                { float: right; margin-right: 3px; cursor: pointer; background: url(/plugins/app25/ApplicationSearcher/clear.png) center center no-repeat;}
.applicationSearcher input                                              { float: left;width: calc(100% - 73px);width: -webkit-calc(100% - 73px);width: -moz-calc(100% - 73px); color:#475867;  height: 100%;border: 0;padding: 0;margin: 0;font-size: 14px; background: rgba(255, 255, 255, 0);}
.applicationSearcher input[empty]                                       { width: calc(100% - 56px); width: -webkit-calc(100% - 56px); width: -moz-calc(100% - 56px); }
.applicationSearcher ::-webkit-input-placeholder                        { color: #b4b4b4;}
.applicationSearcher ::-moz-placeholder                                 { color: #b4b4b4;}
.applicationSearcher :-ms-input-placeholder                             { color: #b4b4b4;}

.applicationDropDown                                                    { float: left; width: 408px; height: 400px; }
.applicationDropDown .dropDownBand                                      { float: left; width: 100%; max-height: 150px; }
.applicationDropDown .dropDownBandHeader                                { float: left; width: 100%; height: 36px; margin-bottom: 10px; border-bottom: 1px solid #d3d3d3; }
.applicationDropDown .dropDownBandText                                  { float: left; width: calc(100% - 121px); width: -webkit-calc(100% - 121px); width: -moz-calc(100% - 121px); height: 36px; line-height: 36px; color: #d3d6d8; font-size: 20px; font-weight: bold; }
.applicationDropDown .dropDownBandStats                                 { float: left; width: 121px; height: 36px; line-height: 36px; text-align: right; }
.applicationDropDown .dropDownBand[loading] .dropDownBandStats          { background: url(/plugins/app25/ApplicationSearcher/loading.gif) center center no-repeat; }
.applicationDropDown .dropDownBandLines                                 { float: left; width: 100%; max-height: 150px; }
.applicationDropDown .dropDownBandLine                                  { float: left; width: 100%; cursor: pointer; }
.applicationDropDown .dropDownBandLine:last-of-type                     { margin-bottom: 10px; }
.applicationDropDown .vehicleInfo                                       { float: left; width: 100%; background-position-x:left; background-position-y:center; background-size:14px 14px; background-repeat:no-repeat; text-indent: 20px; height: 30px; line-height: 29px; font-size: 10pt; 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; overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap; }
.applicationDropDown .vehicleAddress                                    { float: left; width: 100%; }
.applicationDropDown .vehicleAddress[extended]                          { float: left; width: 100%; margin-bottom: 10px;}
.applicationDropDown .vehicleAddress span                               { font-size: 10pt; 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; }
.applicationDropDown .searchGroupInfo                                   { font-weight: normal !important; margin-left: 10px;}
.ApplicationSettings                                        {}
.ApplicationSettingsBody					                { float: right; width: 780px; height: 477px; }
.ApplicationSettingsWrapper					                { position: relative; left: 0; top: 0; width: 100%; height: 100%; }
.ApplicationSettingsContainer					            { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.ApplicationSettingsTabControl				                { float: left; width: 758px; height: 36px;	margin-left: 20px; }
.ApplicationSettingsTabControl .dx-tab-text                 { line-height: 16px; }
.ApplicationSettingsContainer > .dx-button                  { float: right; height: 36px; margin-right:0px; margin-top: 20px; }
/*Labels*/
.ApplicationSettingsDeviceType                              { float: left; height: 33px; }
.ApplicationSettingsDeviceLabels                            { float: left; width: 758px; height: 363px; margin-left: 20px ; margin-top: 20px; }  
.ApplicationSettingsDeviceBody                              { float: left; width: 100%;  height: 100%;  margin-top: 20px; }
.ApplicationSettingsDeviceLabelCheckBox                     { float: left; width: 252px; margin-bottom: 10px; }
.ApplicationSettingsDeviceWrapper                           {float: left; width: 101%; height: calc(100% - 75px); height: -webkit-calc(100% - 75px); height: -moz-calc(100% - 75px);}
/*Program Settings*/
.ApplicationSettingsProgramSettings                         { float: left; width: 758px; height: 363px; margin-top: 20px; }
.ApplicationSettingsProgramData                             { width: 100%; height:100%; }
.ApplicationSettingsProgramType                             { width: 200px; margin-left: 20px; margin-bottom: 20px }
.programSubPanel                                            { margin-left: 20px; margin-right:20px; width:480px; height:100%; }
.smallInput                                                 { width: 100px; float: left; }
.programSettingsCheckBox                                    { float: left !important; margin-top:5px; }
.field-value                                                { float: left; }
.dx-field-help                                              { margin-left:10px; float:left; height:36px; width:36px; cursor:pointer; /*background: url(/plugins/app25/ApplicationSettings/helpicon.png) center center no-repeat;*/}
.ProgramBuildingRegionSettings .dx-field-help               { margin-right: 200px; float: right; }
.ProgramBuildingRegionSettings                              { width: 100%; }
.ProgramDurationSettings                                    { width: 100%; }
.ProgramDurationSettings .dx-field-label                    { width: 60%; }
.dx-field-help > a                                          { height: 33px; width: 33px; display: block; background: url(/plugins/app25/ApplicationSettings/helpicon.png) center center no-repeat;}
.ProgramGeneralSettings                                     { width: 700px;}
.ProgramGeneralSettings .field-value                        { width: 50%;}
/*Alarm Settings*/
.ApplicationSettingsAlarmSettings                           { float: left; width: 758px; height: 363px; margin-left: 20px; margin-top: 20px; }
.ApplicationSettingsAlarmBody                               { float: left; width: 100%; height: 100%; }
.ApplicationSettingsAlarmSettingsRow                        { float: left; width: 100%; height: 33px; margin-top: 10px; }
.ApplicationSettingsAlarmType                               { float: left; height: 33px; }
.ApplicationSettingsAlarmLabel                              { float: left; height: 28px; width: 300px; margin-top: 5px; }
.ApplicationSettingsAlarmSoundType                          { float: left; height: 33px; width: 185px; margin-left: 10px; }
.ApplicationSettingsAlarmPopup                              { float: left; height: 28px; margin-left: 10px;  margin-top: 5px; vertical-align: top;}
.ApplicationSettingsAlarmPopup .dx-checkbox-text            { vertical-align: top;}
.ApplicationSettingsAlarmApplyAll                           { float: left; width: 100%; margin-top: 20px; }
.ApplicationSettingsAlarmApplyAll
.ApplicationSettingsAlarmLabel                              { margin-top: 0px; color: #000000; }
.ApplicationSettingsAlarmBody > hr                          { float: left; width: 100%; height: 0px; margin-top: 10px; background: #fff; }
.ApplicationSettingsAlarmsWrapper                            { float: left; width: 100%; height: calc(100% - 106px); height: -webkit-calc(100% - 106px); height: -moz-calc(100% - 106px); }
.ApplicationSettingsVehicleAlarms                           { float: left; width: 100%; height: 100%; }
.ApplicationSettingsDeviceAlarms                            { float: left; width: 100%; height: 100%; }
.ApplicationSettingsSpeedAlarms                             { float: left; width: 100%; height: 100%; }
.ApplicationSettingsDoorAlarms                              { float: left; width: 100%; height: 100%; }
.ApplicationSettingsCanbusAlarms                            { float: left; width: 100%; height: 100%; }
.ApplicationSettingsOtherAlarms                             { float: left; width: 100%; height: 100%; }
.ApplicationSettingsSaveButton                              { margin-right:2px;}
.ApplicationSettingsCancelButton                            { margin-left:2px;}
/*Password Settings*/
.ApplicationSettingsChangePassword                          { float: left; width: 758px; height: 363px; margin-left: 20px; margin-top: 20px; }
.ApplicationSettingsChangePasswordBody                      { float: left; width: 100%; height: 100%; }
.ApplicationSettingsChangePasswordData .dx-field-value      { float: left; width: 40% !important; }
.ApplicationRightMenuPopupItemIcon[icon="settings"] { background: transparent url(/plugins/app25/ApplicationSettings/settings.svg) 0% 0% no-repeat padding-box; }

#ApplicationSettingsPrivateUsage {
    position: absolute;
    right: 30px;
    bottom: 32px;
    top: 54px;
    width: 150px;
    height: 20px;
    padding: 1px 0 0 5px;
    font: bold 12px Segoe UI;
    color: #616161;
    z-index: 1500;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    opacity: 1;
}

.ApplicationSettingsPrivateUsageHead {
    text-align: left;
    font: normal normal bold 14px/33px Segoe UI;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}
.DeviceAlarmPopupNotifier {
    position: absolute;
    right: -400px;
    bottom: 30px;
    width: 400px;
    min-height: 50px;
    background-color: #FFFFFF;
    border: 1px solid #d3d3d3;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
    z-index: 1500;
}

.DeviceAlarmPopupNotifier > TABLE {
    float: left;
    margin: 10px;
    width:95%;
}

.DeviceAlarmPopupCloseButton {
    position: absolute;
    top: 10px;
    right: 10px;
    border: white;
}
.alarmCell {
    min-height: 24px;
    line-height: 24px;
    text-indent: 44px;
}
.vehicleAlarms                              { margin-top: 10px; float: left; width: 100%; overflow: auto!important; }
.vehicleAlarmsData                          { float: left; width: 100%; height:fit-content !important; overflow-x: hidden; overflow-y: auto !important; }
.vehicleAlarmsGraph                         { float: left; width: 100%;  margin-top: 28px !important; overflow:auto; position:relative !important; bottom:25px !important; padding-top:15px !important;}
.vehicleAlarmContainer                      { float: left; width: 100%; }
.vehicleAlarmContainer:nth-child(even)      { background-color: rgba(211, 211, 211, 0.2); }
.vehicleAlarmRow                            { float: left; width: calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); height: 22px; display: inline-block; margin-left: 10px; }
.vehicleAlarmRow:last-of-type               { margin-bottom: 10px; }
.vehicleAlarmHeader                         { float: left; width: calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); height: 28px; line-height: 28px; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap;  overflow: hidden; text-indent: 30px; font-size: 10pt; display: inline-block; margin-left: 10px; margin-top: 10px; margin-bottom: 10px; font-family:"segoe ui semibold"; }
.vehicleAlarmIcon                           { float: left; width: 28px; height: 28px; }
.vehicleAlarmTitle                          { float : left; width : 350px; height : 100%; }
.vehicleAlarmCell                           { float: left; width: 100px; height: 22px; line-height: 22px; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap;  overflow: hidden; }
.vehicleAlarmCell:first-of-type             { margin-left: 30px; }
.vehicleAlarmCell:not(:first-of-type)       { width: calc(100% - 140px); width: -webkit-calc(100% - 140px); width: -moz-calc(100% - 140px); margin-left: 10px; }
.dxc-tooltip                                { z-index: 2000; }
.descriptionText                            { margin: 10px 40px;}

.vehicleCommands 							{ float: left; width: 100%; height: 100%; }
.vehicleCommandsCommandLine					{ float: left; width: calc(100% - 20px); width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); height: 70px; -moz-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #E8E9ED; margin-left: 10px; }
.vehicleCommandsCommandLineIcon				{ float: left; width: 40px; height: 100%; background-position: 0 center; background-repeat: no-repeat; }
.deviceShutdownK12WarningIcon {
    float: left;
    width: 25px;
    height: 100%;
    background-position: 0 top;
    background-repeat: no-repeat;
    background-image: url(/plugins/app25/DeviceCommands/unlem.svg);
    margin-top:5px;
}
.vehicleCommandsCommandLineIcon[ear]		{ background-image: url(/plugins/app25/DeviceCommands/ear.png); 		}
.vehicleCommandsCommandLineIcon[stop]		{ background-image: url(/plugins/app25/DeviceCommands/stop.png); 		}
.vehicleCommandsCommandLineIcon[siren]		{ background-image: url(/plugins/app25/DeviceCommands/siren.png); 	}
.vehicleCommandsCommandLineIcon[position]   { background-image: url(/plugins/app25/DeviceCommands/pin.png); 	    }
.vehicleCommandsCommandLineText				{ float: left; width: 220px; height: 70px; line-height: 70px; vertical-align: middle; font-size: 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.deviceShutdownK12WarningLineText {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 5px;
    margin-bottom: 10px;
}
.deviceShutdownK12WarningLine {
    float: left;
    width: calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    width: -webkit-calc(100% - 20px);
    height: 135px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #E8E9ED;
    margin-left: 10px;
}
ul.orangestyle {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
    ul.orangestyle li::before {
        content: "\2022";
        color: orange;
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
        word-wrap:break-word;
    }
.vehicleCommandsCommandLineText[disabled]	{ color: #E8E9ED; }
.vehicleCommandsCommandLineText > span		{ color: red; font-weight: bold; }
.vehicleCommandsCommandLineCheck			{ float: right; margin-top: 18px; }
.vehicleCommandsCommandLinePhone			{ float: right; width: 140px; margin-top: 18px; }	
.vehicleCommandsCommandLineCall				{ float: right; width: 36px; height: 36px; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #D3D3D3; cursor: pointer; background: #FAFAFA url(/plugins/app25/DeviceCommands/phone.png) center center no-repeat; margin-top: 18px; margin-left: 4px; }
.vehicleCommandsCommandLineCall[disabled]	{ background-image: url(/plugins/app25/DeviceCommands/phone-disabled.png); cursor: default; }
.vehicleCommandsCommandLineCallout			{ float: left; width: 100%; height: 100%; }
.vehicleCommandsCommandLineCalloutBody		{ float: left; width: 100%; height: 75px; }
.vehicleCommandsCommandLineCalloutButtons	{ float: left; width: 100%; height: 50px; }
.vehicleCommandsCommandLineCalloutButton	{ float: right; }
.vehicleCommandsCommandSelectCountry        { float: left; width: 80px; margin-top: 18px; }
.vehicleCommandsCallCommandLineText         { float: left; width: 103px; height: 70px;padding-top: 16px; line-height: initial; vertical-align: middle; font-size: 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.regionImage > img                          { left: 5px; position: absolute; top: 50%; margin-top: -15px; z-index: 99; width: 30px; }
.regionImage                                { position: relative; min-height: 30px; }
.regionImage .regionImageUrl                { padding-left: 20px; text-indent: 0; line-height: 30px; font-size: 15px; width: 100%; }
.deviceConfiguration {
    height: calc(100% - 46px);
    margin-top: 10px;
    float: left;
    width: 100%;
    overflow: hidden;
}

.DeviceConfigurationGrid {
    float: left;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 430px;
}

    .DeviceConfigurationGrid .dataRow .content {
        float: left;
        width: calc(100% - 20px);
        width: -webkit-calc(100% - 20px);
        width: -moz-calc(100% - 20px);
        display: inline-block;
        margin-left: 15px;
    }

    .DeviceConfigurationGrid .dataRow .header {
        float: left;
        width: 100%;
        height: 40px;
        vertical-align: middle;
        text-overflow: ellipsis;
        /*white-space: nowrap;*/
        overflow: hidden;
        font-size: 10pt;
        display: inline-block;
    }

        .DeviceConfigurationGrid .dataRow .header .textDataCell {
            float: left;
            height: 100%;
            width: calc(100% - 130px);
            width: -webkit-calc(100% - 130px);
            width: -moz-calc(100% - 130px);
        }

    .DeviceConfigurationGrid .dataRow .operationDataCell {
        float: right;
        width: 130px;
        height: 100%; /*margin-right:10px*/
    }

        .DeviceConfigurationGrid .dataRow .operationDataCell .deleteButton, .DeviceConfigurationGrid .dataRow .operationDataCell .updateButton, .DeviceConfigurationGrid .dataRow .operationDataCell .linkButton {
            float: right;
            height: 20px;
            margin-left: 5px;
            text-align: right;
        }

    .DeviceConfigurationGrid .dataRow .textDataCell .detailIcon {
        margin-top: 5px;
        float: left;
        width: 15px;
        height: 12px;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjcyMjQ2N0QyNUJGMTFFODkwRUFBOTJGRDhDMUM5NUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjcyMjQ2N0UyNUJGMTFFODkwRUFBOTJGRDhDMUM5NUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGNzIyNDY3QjI1QkYxMUU4OTBFQUE5MkZEOEMxQzk1QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGNzIyNDY3QzI1QkYxMUU4OTBFQUE5MkZEOEMxQzk1QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pmkt5KcAAAB5SURBVHjaYvz//z8DKYAJlfvp//t3DP9J0PCE4dC6VQwnX+DWxIQh8vM1w5ktuDUxYTUGjyYmnI4Fadq6m+EhA6om3BqY+Bi0nK0Z5BkYGAlrACn2DGZwVOBiJOwkPIrBABRxCPzq/4P7X/+jiqFiRlJjmmQNAAEGAKf7T9oTCtgcAAAAAElFTkSuQmCC');
    }

    .DeviceConfigurationGrid .dataRow .textDataCell .detailIconCollapse {
        margin-top: 5px;
        float: left;
        width: 15px;
        height: 12px;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDU4NUUzMkMyNUMwMTFFODkwRUFBOTJGRDhDMUM5NUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDU4NUUzMkQyNUMwMTFFODkwRUFBOTJGRDhDMUM5NUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGNzIyNDY3RjI1QkYxMUU4OTBFQUE5MkZEOEMxQzk1QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGNzIyNDY4MDI1QkYxMUU4OTBFQUE5MkZEOEMxQzk1QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PohgBuUAAACDSURBVHjaYvz//z8DKYCJgURAsgYWCPXp/5NrDxne/8GlSpBBXkuGgY+BgRGqgY9RiOvN//3brzF8+ofuBi4GJZdwBl2gYhQncSk4MgZ7ajHwMWEq9lTlYoQJMaKH0rcH+/+vBdnEgKkYDEAa0PHX+yf+n7j19T82OcbBFw8kawAIMACk3kbvyFrOcQAAAABJRU5ErkJggg==');
    }

    .DeviceConfigurationGrid .dataRow .textDataCell .detailIconExpand {
        margin-top: 5px;
        float: left;
        width: 15px;
        height: 12px;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDU4NUUzMkMyNUMwMTFFODkwRUFBOTJGRDhDMUM5NUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDU4NUUzMkQyNUMwMTFFODkwRUFBOTJGRDhDMUM5NUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGNzIyNDY3RjI1QkYxMUU4OTBFQUE5MkZEOEMxQzk1QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGNzIyNDY4MDI1QkYxMUU4OTBFQUE5MkZEOEMxQzk1QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PohgBuUAAACDSURBVHjaYvz//z8DKYCJgURAsgYWCPXp/5NrDxne/8GlSpBBXkuGgY+BgRGqgY9RiOvN//3brzF8+ofuBi4GJZdwBl2gYhQncSk4MgZ7ajHwMWEq9lTlYoQJMaKH0rcH+/+vBdnEgKkYDEAa0PHX+yf+n7j19T82OcbBFw8kawAIMACk3kbvyFrOcQAAAABJRU5ErkJggg==');
    }

    .DeviceConfigurationGrid .dataRow .textDataCell .notPeriodicIcon {
        margin-top: 5px;
        float: left;
        width: 8px;
        height: 8px;
        margin-right: 5px;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCI+DQogIDxkZWZzPg0KICAgIDxzdHlsZT4NCiAgICAgIC5jbHMtMSB7DQogICAgICAgIGZpbGw6ICM5MzkzOTM7DQogICAgICAgIHN0cm9rZTogIzkzOTM5MzsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICA8L2RlZnM+DQogIDxnIGlkPSJidWxsZXQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuNSAwLjUpIj4NCiAgICA8cGF0aCBpZD0iUGF0aF8xIiBkYXRhLW5hbWU9IlBhdGggMSIgY2xhc3M9ImNscy0xIiBkPSJNNC41LDlBNC41LDQuNSwwLDAsMSwxLjMxOCwxLjMxOCw0LjUsNC41LDAsMSwxLDcuNjgyLDcuNjgyLDQuNDcxLDQuNDcxLDAsMCwxLDQuNSw5Wk00LjUuNzI3QTMuNzczLDMuNzczLDAsMSwwLDguMjczLDQuNSwzLjc3NywzLjc3NywwLDAsMCw0LjUuNzI3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCkiLz4NCiAgPC9nPg0KPC9zdmc+DQo=');
    }

    .DeviceConfigurationGrid .dataRow {
        float: left;
        width: 100%;
        white-space: normal;
        cursor: pointer;
        padding: 7px 0;
        /* height: 96px;*/
    }

    .DeviceConfigurationGrid td[role="gridcell"] {
        width: calc(100% - 20px) !important;
        float: left;
    }

    .DeviceConfigurationGrid .dx-row > .dx-master-detail-cell:first-child {
        padding-left: 10px !important;
    }


.DeviceConfigurationRowTop {
    float: left;
    width: 100%;
    height: 25px;
    padding-bottom: 3px;
    padding-top: 3px;
}

.Receiver {
    float: left;
    font-weight: bold;
    width: calc(100% - 75px);
    width: -moz-calc(100% - 75px);
    width: -webkit-calc(100% - 75px);
}

.TopRightOperation {
    float: right;
    width: 75px;
    height: 20px;
}

.Region {
    float: left;
    font-weight: bold;
    cursor: pointer;
    width: calc(100% - 180px);
    width: -moz-calc(100% - 180px);
    width: -webkit-calc(100% - 180px);
}

.notiDeleteButton, .notiUpdateButton {
    float: right;
    height: 20px;
    margin-left: 5px; /*text-align:right;*/
}


.DeviceConfigurationRowMiddle {
    float: left;
    height: 36px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
}

.Days {
    float: left;
    min-width: 280px;
    width: calc(100% - 90px);
    width: -moz-calc(100% - 90px);
    width: -webkit-calc(100% - 90px);
    margin-right: 5px;
}

.TimeRange {
    float: left;
    width: 75px;
    margin-left: 5px;
}

.notiActiveButton {
    float: right;
    width: 70px;
}

    .notiActiveButton .dx-switch-on, .notiActiveButton .dx-switch-off {
        font-size: 9pt !important;
    }

/*.notiActiveButton[aria-pressed='true'] .dx-switch-inner {
    margin-left: 0px !important;
}

.notiActiveButton[aria-pressed='false'] .dx-switch-inner {
    margin-left: -50px !important;
}*/
.DeviceConfigurationRowBottom, .DeviceConfigurationRowButton {
    float: left;
    height: 36px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
}

.formButtons {
    float: left;
    width: 100%;
    text-align: right;
    margin-top: 10px;
}

    .formButtons .dx-button {
        margin-left: 10px;
    }

.PhoneScreen { float: left; width: 100%; height: 100%; max-height: 700px; }
.PhoneScreen .top { float: left; width: 100%; }
.PhoneScreen .button { float: right; margin-top: 10px; }
.PhoneScreen .dx-field-item-label-text { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 10pt; font-weight: bold; color: #333; }
.PhoneScreen .dx-item-content .dx-toolbar-item-content { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold !important; color: #333; }
.dx-menu-separator {
    background-color: rgba(221, 221, 221, 0.5) !important;
}
.dx-menu-separator {
    width   : 90% !important;
    margin  : auto !important;
}

.DeviceRigthClickContextMenuItem{
    padding : 5px !important;
}

.dx-icon-spinright{
    float   : right !important;
}

.DeviceContextItemText{
    width   : 60%;
    height  : 30px;
    float   : left;
}
.VehicleGroupDefinitionContainer                            { width: 100%; height: 100%; }
.VehicleGroupDefinitionContainerWrapper                     { position: relative; left:0; top: 0; width: 100%; height: 100%; }
.VehicleGroupDefinitionContainerBody                        { position: absolute; left:0; top: 0; width: 100%; height: 100%; background-color: #FFFFFF; }
.VehicleGroupDefinitionListContainer                        { float: left; width: calc(100% - 500px); width: -moz-calc(100% - 500px); width: -webkit-calc(100% - 500px); height: 688px; }
.VehicleGroupDefinitionGridHeaderCountInfo, .VehicleGroupDefinitionEditorHeaderCountInfo { float: right; width: 50%; font-family: 'Segoe UI'; font-size: 14px; font-weight: bold; color: #475969; height: 27px; line-height: 27px; margin-right: 20px; text-align: right; }
.VehicleGroupDefinitionGridContainer                        { float: left; width: calc(100%); width: -moz-calc(100%); width: -webkit-calc(100%); height: 661px; }
.VehicleGroupDefinitionGridContainer > .dx-datagrid         { float: left; width: calc(100% - 40px); width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); height: calc(100% - 40px); height: -moz-calc(100% - 40px); height: -webkit-calc(100% - 40px); margin: 20px; }
.VehicleGroupDefinitionGridContainer .dx-datagrid-rowsview  { height: calc(100% - 60px) !important; height: -moz-calc(100% - 60px) !important; height: -webkit-calc(100% - 60px) !important;}
.VehicleGroupDefinitionTreeContainer                        { float: left; width: 500px; height: 100%; border-left: 1px solid #dddddd; overflow-y: auto;}
.VehicleGroupDefinitionTreeInnerContainer                   { float: left; width: calc(100% - 10px); width: -moz-calc(100% - 10px); width: -webkit-calc(100% - 10px); height: 100%; margin-left: 10px;}
.VehicleGroupDefinitionTreeTitle                            { float: left; width: 100%;  height: 30px; line-height: 30px; font-weight: bold;}
.VehicleGroupDefinitionTree                                 { float: left; width: 100%; height: calc(100% - 40px); height: -moz-calc(100% - 40px); height: -webkit-calc(100% - 40px); margin-top: 10px;}
.VehicleGroupDefinitionTreeLine                             { width: 100%; height: 36px; line-height: 36px; display: flex; }
.VehicleGroupDefinitionTreeLineLabel                        { float: left; width: calc(100% - 10px); width: -moz-calc(100% - 10px); width: -webkit-calc(100% - 10px); height: 100%; text-overflow: ellipsis; word-wrap: normal; white-space: nowrap; overflow: hidden }
.VehicleGroupDefinitionTreeLineButton                       { float: right;width: 36px; margin: 0 5px 0 0 !important; }
.VehicleGroupDefinitionTreeLineButton .dx-icon              { margin-right: 0 !important; }
.VehicleGroupDefinitionTreeLineButtonGroup                  { display: flex;  }
.VehicleGroupDefinitionEditorContainer                      { float: left; width: 500px; height: 100%; border-left: 1px solid #dddddd;}
.VehicleGroupDefinitionEditorButtonContainer                { float: left; width: 48px; position: relative; top: calc(50% - 46px); top: -webkit-calc(50% - 46px); top: -moz-calc(50% - 46px);}
.VehicleGroupDefinitionEditorButton                         { margin: 5px !important; }
.VehicleGroupDefinitionEditorInnerContainer                 { float: left; width: calc(100% - 48px); width: -moz-calc(100% - 48px); width: -webkit-calc(100% - 48px); height: 100%;}
.VehicleGroupDefinitionEditorHeader                         { float: left; width: 100%; margin-bottom: 5px; font-size: 12pt; line-height: 30px; color: #3e5267;}
.VehicleGroupDefinitionEditorText                           { float: left; width: 50%;  }
.VehicleGroupDefinitionEditorShowAll                        { padding-left:10px; width: 50%; }
.VehicleGroupDefinitionEditorTagSelector                    { float: left; width: calc(50% - 10px); width: -moz-calc(50% - 10px); width: -webkit-calc(50% - 10px); margin-left: 10px;}
.VehicleGroupDefinitionEditorGrid                           { float: left; width: 100%; height: calc(100% - 122px); height: -moz-calc(100% - 122px); height: -webkit-calc(100% - 122px); margin: 5px 0; }
.VehicleGroupDefinitionEditorGrid > .dx-datagrid            { width: 100%; height: 100%; }
.VehicleGroupDefinitionEditorGrid .dx-datagrid-rowsview     { height: calc(100% - 70px) !important; height: -moz-calc(100% - 70px) !important; height: -webkit-calc(100% - 70px) !important;}
.VehicleGroupDefinitionEditorSaveButton                     { float: right; margin: 0 5px !important;}
.VehicleGroupDefinitionEditorCancelButton                   { float: right; margin: 0 5px !important;}
.VehicleGroupDefinitionEditorBulkSaveButton                 { float: left; margin:0; max-width: 250px;}
.VehicleGroupDefinitionTree.dx-treeview .dx-treeview-node.dx-treeview-item-with-checkbox .dx-checkbox,
.VehicleGroupDefinitionTree.dx-treeview .dx-treeview-toggle-item-visibility {margin-top: 5px; }
.VehicleGroupDefinitionTree.dx-treeview .dx-treeview-node:not(.dx-treeview-item-with-checkbox).dx-state-focused > .dx-treeview-item {  background-color: #f5f5f5; }
.VehicleGroupDefinitionTree.dx-treeview .dx-treeview-node:not(.dx-treeview-item-with-checkbox).dx-state-focused > .dx-treeview-item * {  color: #000; }

.VehicleGroupDefinitionEditorHeader .dx-invalid-message { width: 100% !important; }

.VehicleGroupDefinitionEditorHeader .dx-invalid-message > .dx-overlay-content { max-width: 100% !important; }

.VehicleGroupDefinitionBulkInsert { float: left; height: 100%; width: 100%; }
.VehicleGroupDefinitionBulkInsertContainer { float: left; height: 100%; width: 100%; }
.VehicleGroupDefinitionDeviceInfoList { float: left; width: 100%; height: calc(100% - 50px) !important; height: -moz-calc(100% - 50px) !important; height: -webkit-calc(100% - 50px) !important; }
.VehicleGroupDefinitionBulkInsertButtonContainer{ float:left; width:100%; height:auto; padding:10px 0 10px 0; }
.VehicleGroupDefinitionBulkInsertSaveButton { float: right; margin: 0 5px !important; }
.VehicleGroupDefinitionBulkInsertCancelButton { float: right; }
.VehicleGroupDefinitionBulkInsertOkButton { float: left;margin-left: 130px; }
.VehicleGroupDefinitionBulkInsertMessageBlock { float: left; width: 100%; height: auto; margin: 0 0 10px 0; }
.VehicleGroupDefinitionBulkInsertMessageSeperator { width: 100%; height: 1px; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjM2IiB2aWV3Qm94PSIwIDAgMSAzNiI+DQogIDxsaW5lIGlkPSJsaW5lIiB5Mj0iMzYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuNSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RjZGNkYyIgc3Ryb2tlLXdpZHRoPSIxIi8+DQo8L3N2Zz4NCg=='); float: left; margin: 7px 0px 7px 0px;}
.VehicleGroupDefinitionBulkInsertMessage { float: left; width: 100%; height: auto; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAABHNCSVQICAgIfAhkiAAAAZ9JREFUSEu9lsFVwkAQhv/hkKtLB1iB8SA5ChWoFYAV+KyAKYEOhAqkA7hJ8CB0oB2sR/Q9x7eBICSbZA0JuRLe9+3szD8hnOjhN6WwxjMIPgiP3NYjg6ZT8CP4F6YA+Tseyb2RqF3ACo8sRHOgm/ULzNUERDfpSsuKA+3XKsChGgHUs8HhocOXWtcm4AKvrQmz4AJ8kictc/K4KpVXgOdqCKKHZNkjOEmH23q5/1ulArxQfQg9ucJ3V2BGhdboCeGDAz0pkw1l4JFAak63AfEfibLwjUCoZgBdHwAb0uUrPXORyIJv/it3RRWlQdg0s3h2CBMNQjfZMEkhflUd/NDUKupYSco+Qb4EL5QPifJdpQQc4X9NGCoGaGBJLGslqoIfBFFOcml4OI/Do0p4KglzJJbw0MU3Wpllh4w50H2Xxs0NIutURA0t7yAo652XhFt3wTYXzGheuJ2m3Mlzd4G7xHHw3G3IL6olDVqmMyJ2Px5euI5Nx4vQzBJUq/iDwu2ast8q3IZpCakMXliB2NukpQgNCWLG8Xb/g+LYCvwCF3nrGUTUKGsAAAAASUVORK5CYII='); background-position: top; background-repeat: no-repeat; text-align: center; padding-top: 35px; }
.VehicleGroupDefinitionBulkInsertError { float: left; width: 100%; height: auto; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAYAAAAfrhY5AAAABHNCSVQICAgIfAhkiAAAAdlJREFUSEutlz1Lw1AUht+TtptClfYPODk6q0PFVhyqkyDo4u7k5iKiv8LVQfAHuNgsLu7dRKFQNyEihY4pHrmJSZs2uV+5IVO+nvc9N+fjEgBwe/UCXuUcjC+EYZdeRiNx3eXBuyun8KpdgD/I/74W36YIjMoNPFoGs7j26loAtxsPAB3CoyWAxXlPfnBG3GkOQLSWunQs4B98EJmbQt6pF6wLeA9AB0Qz99xEIB8s1pmfyQ/2iVv1Omq1JwBbLgUUg3/fADohP+hHdl0L0AFHP1wSa1cCdMEZuIsImIAX4GUEmIJz4TYCbMCFcBMBtmApXEsA8ydAcwVEpM80nWQleqay5D8mzQLGOFu59MFK58o0nNer6Th5TelcW4AhWNt5KiDuTjlrbNcL9J0XgVNl5gK04JLuhDLNSAlX5PFPmW4ohasKCMJwWKYdF8JVYNGPtQqRZCbMheuClWmoGMkW4KbgMgIycFuwrYDpJFNYQPSahI2AeIZzBDYVQNFOgqp38UA/c1jU6szriqmY/GCbeK/5CNCxS7BWBJh3iDuNWxBdpYNsSccLXTYvAoIRTjbjNY/cYwOMIYDLpIDIphCTe9mBhAdgOko3DSYfKvMstxstTCb9ZBf8B6VV1yUtvQJPAAAAAElFTkSuQmCC'); background-position: top; background-repeat: no-repeat; padding-top: 35px; text-align: center; }

.DeviceHistoryContainer             				    { float: left; 	width: calc(103% - 13px); 	height: calc(100% - -12px); height: -webkit-calc(100% - -12px); height: -moz-calc(100% - -12px);	overflow: hidden; top: -6px;	position:relative}

.VehicleHistoryDateFilter								{ float: left; margin-top:10px;  	width: 100%; 	height: 36px; -webkit-transition: height 0.5s; -moz-transition: height 0.5s; -o-transition: height 0.5s; transition: height 0.5s; overflow: hidden; }

.VehicleHistoryDateFilter > .line						{ float: left; width: 100%; height: 36px; }
.VehicleHistoryDateFilter > .line:not(:first-of-type)	{ margin-top: 10px; }

.VehicleHistoryDateType									{ float: left; 	width: 154px; 	height: 36px; display: flex;}
.VehicleHistoryDateButtons								{ float: left; 	width: calc(100% - 164px); width: -webkit-calc(100% - 164px); width: -moz-calc(100% - 164px); height: 100%; margin-left: 10px; }
.VehicleHistoryDateButton 								{ position: relative; float: right; margin-left: 14px; width: 130px; background-color: #79B110; color: white;}
.VehicleHistoryBuildingSwitchContainer                  { float: left; width: calc(100% - 145px); width: -webkit-calc(100% - 145px); width: -moz-calc(100% - 145px); height: 100%; }
.VehicleHistoryBuildingSwitchLabel                      { float: left; width: calc(100% - 50px); width: -webkit-calc(100% - 50px); width: -moz-calc(100% - 50px); height: 100%; line-height: 36px; vertical-align: middle; text-align: left; color: #232323; font-size: 12px; white-space: nowrap; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; }
.VehicleHistoryBuildingSwitchBody                       { float: right; width: 50px; height: 100%; }
.VehicleHistoryBuildingSwitch                           { float: left; margin-left: 5px; margin-top: 6px; width: 100%; }
/*.VehicleHistoryBuildingSwitch[aria-pressed='true'] .dx-switch-inner          { margin-left: 0px !important;}
.VehicleHistoryBuildingSwitch[aria-pressed='false'] .dx-switch-inner          { margin-left: -40px !important;}*/
.VehicleHistoryRouteSaveButton							{ float: right; margin-left:10px;}

.VehicleHistoryDetailedDate								{ float: left; width: 200px; height: 34px; }
.VehicleHistoryDetailedDate:not(:first-of-type)			{ margin-left: 10px; }
.VehicleHistoryDetailedDateError                        { color: #c70000; text-align:center; }

.VehicleHistoryBodyContainer							{ float: left; width: 100%; height: calc(100% - 46px); height: -webkit-calc(100% - 46px); height: -moz-calc(100% - 46px); margin-top: 5px; background: url(/plugins/app25/DeviceHistory/history-bg.png) center center no-repeat; background-size: 250px 250px; overflow: hidden; }
.VehicleHistoryBodyContainerWrapper                     { position: relative; left: 0; top: 0; width: 100%; height: 100%; }
.VehicleHistoryBody                                     { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: top 0.5s; -moz-transition: top 0.5s; -o-transition: top 0.5s; transition: top 0.5s; background-color: #FFFFFF; }
.VehicleHistoryBody[info]                               { height: calc(100% - 30px); height: -webkit-calc(100% - 30px); height: -moz-calc(100% - 30px); z-index: 1906; }
.VehicleHistoryBody[toolbar]                            { top: calc(100% - 90px); top: -webkit-calc(100% - 90px); top: -moz-calc(100% - 90px); height: 40px; z-index: 1910; }
.VehicleHistoryBody[player]                             { top: 100%; z-index: 1909; }
.VehicleHistoryBody[analyser]                           { top: 100%; z-index: 1908; }
.VehicleHistoryBody[route]                              { top: 100%; z-index: 1907; }

.VehicleHistoryBody .captionButton                      { float: left; width: 49%; height: 36px; }
.VehicleHistoryBody .captionButton:not(:first-of-type)  { margin-left: 2%; }
.VehicleHistoryBody .closeContainer                     { float: right; width: 100px; height: 36px; }
.VehicleHistoryBody .closeButton                        { float: right; width: 36px; height: 36px; }

.VehicleHistoryInfoLineContainer					    { float: left; width: 100%; height: calc(100% - 170px); height: -webkit-calc(100% - 170px); height: -moz-calc(100% - 170px); overflow-x: hidden; overflow-y: auto; }
.VehicleHistoryInfoLine								    { float: left; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #ebebeb;  overflow: hidden; }
.VehicleHistoryInfoCellIconFirstLast				    { display: flex; top: 537px; left: 104px; width: 410px; height: 154px; opacity: 1; }
.VehicleHistoryInfoCellFistLast	          			    { margin-left: 10px; }
.VehicleHistoryInfoCellTextButton	          		    { float:right; height:15px; display: flex; cursor: pointer; }
.VehicleHistoryInfoCellTextButton:hover	          	    { color: aqua }
.VehicleHistoryInfoCellListText:hover:after             { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
.VehicleHistoryInfoCellListText	          			    { width:100px; justify-content: space-between; font: var(--unnamed-font-style-normal) normal 600 var(--unnamed-font-size-14)/19px Segoe UI; letter-spacing: var(--unnamed-character-spacing--0-34); text-align: right; font: normal normal 600 14px/19px Segoe UI; letter-spacing: -0.34px; color: #0394DF; opacity: 1; }
.VehicleHistoryInfoCellListRightArrow     			    { margin-top: 3px; width: 14px; height: 16px; opacity: 1; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceHistory/right-arrow.png); }
.VehicleHistoryInfoCellFirst	        	            { top: 537px; left: 136px; width: 423px; height: 78px; opacity: 1; }
.VehicleHistoryInfoCellLast	          			        { top: 629px; left: 136px; width: 416px; height: 62px; opacity: 1; }
.VehicleHistoryInfoCaptionFirst	     			        { top: 537px; left: 136px; width: 63px; height: 16px; font: var(--unnamed-font-style-normal) normal normal 12px/31px Segoe UI; letter-spacing: var(--unnamed-character-spacing-0); text-align: left; font: normal normal normal 12px/31px Segoe UI; letter-spacing: 0px; color: #475969; opacity: 0.6; }
.VehicleHistoryInfoCaptionLast	        		        { top: 629px; left: 136px; width: 26px; height: 16px; font: var(--unnamed-font-style-normal) normal normal 12px/31px Segoe UI; letter-spacing: var(--unnamed-character-spacing-0); text-align: left; font: normal normal normal 12px/31px Segoe UI; letter-spacing: 0px; color: #475969; opacity: 0.6; }
.VehicleHistoryInfoCellIcon             			    { top: 537px; left: 104px; width: 20px; height: 122px; opacity: 1; }
.VehicleHistoryInfoCellIconFist                         { top: 537px; left: 104px; width: 44px; height: 30px; margin-left:-8px; margin-top:-4px; opacity: 1; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceHistory/start-icon.svg); }
.VehicleHistoryInfoCellIconDashed             		    { top: 550px; left: 114px; width: 0px; margin-left:11px; margin-top: -2px; height: 54px; border: 1px dashed #B7B7B7; opacity: 1; }
.VehicleHistoryInfoCellIconLast         			    { top: 632px; left: 104px; width: 40px; margin-left: -8px; margin-top: -4px; height: 43px; opacity: 1; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceHistory/finish-icon.svg); }
.VehicleHistoryInfoLine[noData]					        { height: 53px; text-indent: 10px; line-height: 53px; font-size: 16px; }
.VehicleHistoryInfoLine[distance]					    { height: 103px; }
.VehicleHistoryInfoLine[filters]					    { height: 170px; overflow: hidden; }
.VehicleHistoryInfoLine[speed]						    { height: 83px; }
.VehicleHistoryInfoLine[points]						    { height: 225px; }
.VehicleHistoryInfoLine[usage]						    { height: 280px; }
.VehicleHistoryInfoLineUsageGraph                       { height: 250px; width: 400px; padding:10px;}
.VehicleHistoryInfoLineUsageGraphIconGroupGraph         { margin-top:10px; height: 250px; }
.VehicleHistoryInfoLineUsageGraphIconGroup              { width: auto; height: 16px; opacity: 1; display: flex; padding-left: 100px; }
.VehicleHistoryInfoLineUsageGraphIconTextMotion         { width: auto; height: 16px; opacity: 1; padding-right:10px; display:flex; }
.VehicleHistoryInfoLineUsageGraphIconMotion             { margin-top: -6px; width: 32px; height: 32px; opacity: 1; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceHistory/motion-icon.svg); }
.VehicleHistoryInfoLineUsageGraphTextMotion             { width: auto; height: 32px; font: var(--unnamed-font-style-normal) normal normal 12px/var(--unnamed-line-spacing-16) Segoe UI; letter-spacing: var(--unnamed-character-spacing-0); text-align: left; font: normal normal normal 12px/16px Segoe UI; letter-spacing: 0px; color: #349ad4; opacity: 1; }
.VehicleHistoryInfoLineUsageGraphIconTextStill          { width: auto; height: auto; opacity: 1; padding-right:10px; display: flex; }
.VehicleHistoryInfoLineUsageGraphIconStill              { margin-top: -6px; width: 32px; height: 32px; opacity: 1; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceHistory/still-icon.svg); }
.VehicleHistoryInfoLineUsageGraphTextStill              { width: auto; height: 32px; font: var(--unnamed-font-style-normal) normal normal 12px/var(--unnamed-line-spacing-16) Segoe UI; letter-spacing: var(--unnamed-character-spacing-0); text-align: left; font: normal normal normal 12px/16px Segoe UI; letter-spacing: 0px; color: #EF4118; opacity: 1; }
.VehicleHistoryInfoLineUsageGraphIconTextIdling         { width: auto; height: auto; opacity: 1; padding-right:10px; display: flex; }
.VehicleHistoryInfoLineUsageGraphIconIdling             { margin-top: -6px; width: 32px; height: 32px; opacity: 1; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceHistory/idling-icon.svg);}
.VehicleHistoryInfoLineUsageGraphTextIdling             { width: auto; height: 32px; font: var(--unnamed-font-style-normal) normal normal 12px/var(--unnamed-line-spacing-16) Segoe UI; letter-spacing: var(--unnamed-character-spacing-0); text-align: left; font: normal normal normal 12px/16px Segoe UI; letter-spacing: 0px; color: #FF78CE; opacity: 1; }
.VehicleHistoryInfoCaption							    { top: 266px; left: 104px; width: 100px; margin-left: 10px; height: 16px; font: var(--unnamed-font-style-normal) normal normal 12px/23px Segoe UI;letter-spacing: var(--unnamed-character-spacing-0); text-align: left; font: normal normal normal 12px/23px Segoe UI; letter-spacing: 0px; color: #282F3E; opacity: 0.6; }
.VehicleHistoryInfoFirst    						    { top: 394px; left: 104px; width: 83px; height: 20px; margin-left:10px; font: var(--unnamed-font-style-normal) normal normal 12px/23px Segoe UI; letter-spacing: var(--unnamed-character-spacing-0); text-align: left; font: normal normal normal 12px/23px Segoe UI; letter-spacing: 0px; color: #282F3E; opacity: 0.6; }
.VehicleHistoryInfoLast    		    				    { top: 394px; left: 104px; width: 83px; height: 20px; margin-left:10px; font: var(--unnamed-font-style-normal) normal normal 12px/23px Segoe UI; letter-spacing: var(--unnamed-character-spacing-0); text-align: left; font: normal normal normal 12px/23px Segoe UI; letter-spacing: 0px; color: #282F3E; opacity: 0.6; }
.VehicleHistoryInfoFigCaption						    { top: 596px; left: 136px; width: 113px; height: 19px; margin-left:10px; margin-top:-10px; font: var(--unnamed-font-style-normal) normal normal var(--unnamed-font-size-14)/31px Segoe UI; letter-spacing: var(--unnamed-character-spacing-0); text-align: left; font: normal normal normal 14px/31px Segoe UI; letter-spacing: 0px; color: #475969; opacity: 0.6; }
.VehicleHistoryInfoDatetimeFirst					    { top: 596px; left: 136px; width: 366px; height: 19px; margin-left:10px; margin-top:-7px; font: var(--unnamed-font-style-normal) normal normal var(--unnamed-font-size-14)/31px Segoe UI; letter-spacing: var(--unnamed-character-spacing-0); text-align: left; font: normal normal normal 14px/31px Segoe UI; letter-spacing: 0px; color: #475969; opacity: 0.6; }
.VehicleHistoryInfoDatetimeLast						    { top: 596px; left: 136px; width: 366px; height: 19px; margin-left:10px; margin-top:-7px; font: var(--unnamed-font-style-normal) normal normal var(--unnamed-font-size-14)/31px Segoe UI; letter-spacing: var(--unnamed-character-spacing-0); text-align: left; font: normal normal normal 14px/31px Segoe UI; letter-spacing: 0px; color: #475969; opacity: 0.6; }
.VehicleHistoryInfoCell								    { float: left; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; }
.VehicleHistoryInfoCell:first-of-type				    { width: 210px; }
.VehicleHistoryInfoCell:last-of-type				    { width: calc(100% - 210px); width: -webkit-calc(100% - 210px); width: -moz-calc(100% - 210px); border-left: 1px solid #ebebeb; }
.VehicleHistoryTotalDistance						    { float: left; width: 200px; height: 72px; margin-left: 10px; font-size: 38pt; line-height: 72px; vertical-align: middle; font-weight: bold; }
.VehicleHistoryDisplayTypeButtonContainer				{ top: 503px; left: 494px; cursor: pointer; margin-top: 6px; width: 36px; margin-left: 333px; height: 36px; background: #FFFFFF 0% 0% no-repeat padding-box;border: 1px solid #DFDFDF; border-radius: 3px; opacity: 1; }
.VehicleHistoryDisplayTypeButtonContainer:hover 		{ background-color: #e7e7e7; }
.VehicleHistoryDisplayTypeButton                        { top: 518px; left: 510px; width: 30px; height: 30px; margin-left:4px; margin-top:4px; opacity: 1; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceHistory/line.svg); }
.VehicleHistoryFilterButtonContainer				    { top: 503px; left: 541px; cursor: pointer; margin-top: -38px; margin-left: 377px; width: 36px; height: 36px; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #DFDFDF; border-radius: 3px; opacity: 1; }
.VehicleHistoryFilterButtonContainer:hover      		{ background-color: #e7e7e7; }
.VehicleHistoryFilterButtonText				            { float: left; width: 88px; height: 36px; font-weight: bold; font-size: 14px; text-align: center; padding: 7px 0 0 0; }
.VehicleHistoryFilterButton							    { top: 514px; left: 552px; margin-top:11px; margin-left:11px; width: 15px; height: 15px; opacity: 1; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceHistory/filter-icon.png); }
.VehicleHistoryInfoLine span, .VehicleHistoryTotalDistance span { font-size: 10pt; font-weight: normal; margin-left: 10px; }
.VehicleHistoryInfoFilter							    { float: left; width: 100%; height: 100%; }
.VehicleHistoryInfoFilter .dx-list-item                 { float: left; width: 100%; height: 100%; border-top: 0px solid #ddd; }
.VehicleHistoryInfoLine	.dx-list-item				    { border: 0; }
.VehicleHistoryAvgSpeed								    { float: left; width: calc(100% - 10px); width: -webkit-calc(100% - 10px); width: -moz-calc(100% - 10px); height: 52px; margin-left: 10px; font-size: 30pt; line-height: 52px; vertical-align: middle; font-weight: bold; }
.VehicleHistoryMaxSpeed								    { float: left; width: calc(100% - 10px); width: -webkit-calc(100% - 10px); width: -moz-calc(100% - 10px); height: 52px; margin-left: 10px; font-size: 30pt; line-height: 52px; vertical-align: middle; font-weight: bold; }
.VehicleHistoryPoint								    { top: 555px; left: 136px; margin-left:10px; width: 376px; height: 40px; font: var(--unnamed-font-style-normal) normal normal var(--unnamed-font-size-14)/18px Segoe UI; letter-spacing: var(--unnamed-character-spacing-0); text-align: left; font: normal normal normal 14px/18px Segoe UI; letter-spacing: 0px; color: #475969; opacity: 1; }
.VehicleHistoryAddressFirst							    { top: 555px; left: 136px; margin-left:10px; width: 366px; height: auto; max-height: 40px; font: var(--unnamed-font-style-normal) normal normal var(--unnamed-font-size-14)/18px Segoe UI; letter-spacing: var(--unnamed-character-spacing-0); text-align: left; font: normal normal normal 14px/18px Segoe UI; letter-spacing: 0px; color: #475969; opacity: 1; text-overflow: ellipsis; overflow: hidden; }
.VehicleHistoryAddressLast							    { top: 555px; left: 136px; margin-left:10px; width: 366px; height: auto; max-height:40px; font: var(--unnamed-font-style-normal) normal normal var(--unnamed-font-size-14)/18px Segoe UI; letter-spacing: var(--unnamed-character-spacing-0); text-align: left; font: normal normal normal 14px/18px Segoe UI; letter-spacing: 0px; color: #475969; opacity: 1; text-overflow: ellipsis; overflow: hidden; }

.VehicleHistoryPlayerNumCounter .Odometer               { width: 240px; height: 100%; float: left; margin-left: 70px; }
.VehicleHistoryPlayerNumCounter .OdometerUnit           { margin-top: 10px; line-height: 50px; text-align: center; width: 40px;height: 50px; float: left; font-size: 14px; color: #767676; }
.VehicleHistoryPlayerNumCounter                         { float: left; width: 100%; height: 70px; margin-top: 10px; }
.VehicleHistoryPlayerMovingTime                         { float: left; width: 100%; height: 50px; margin-top: 10px; font-weight: bold; }
.VehicleHistoryPlayerMovingTime .movingTime             { float: left; width: 100%; margin-left: 120px; height: 30px; }
.VehicleHistoryPlayerMovingTime .totalTime              { float: left; width: 100%; height: 5px; background-color: #ddd; }
.VehicleHistoryPlayerMovingTime .instantTime            { float: left; width: 0; height: 5px; background-color: #337ab7; margin-top: -5px; }

.VehicleHistorySpeedGaugeContainer                      { float: left; width: 100%; height: 170px; margin-top: 10px; }
.VehicleHistorySpeedGauge                               { margin-left: auto; margin-right: auto; width: 350px; height: 200px; }

.VehicleHistoryPlayerTools                              { float: left; width: 100%; height: 100%; width: calc(100% - 44px); width: -webkit-calc(100% - 44px); width: -moz-calc(100% - 44px); }
.VehicleHistoryPlayerTool                               { float: left; }
.VehicleHistoryPlayerTool[stop]                         { margin-left: 10px; }
.VehicleHistoryPlayerSliderContainer                    { float: left; margin-left: 10px; margin-top: 4px; height: 28px; width: calc(100% - 92px); width: -webkit-calc(100% - 92px); width: -moz-calc(100% - 92px); background-image: url(/plugins/app25/DeviceHistory/speed-slow.png), url(/plugins/app25/DeviceHistory/speed-fast.png); background-repeat: no-repeat, no-repeat; background-position: center left, center right; }
.VehicleHistoryPlayerSlider                             { float: left; margin-left: 26px; width: calc(100% - 48px); width: -webkit-calc(100% - 48px); width: -moz-calc(100% - 48px); }

.VehicleHistoryPlayerPointContainer                     { float: left; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; margin-top: 10px; }
.VehicleHistoryPlayerPointInnerContainer                { float: left; width: 100%; }
.VehicleHistoryPlayerPointInnerContainer[speed]         { margin-top: -130px; }
.VehicleHistoryPlayerPointDateTime                      { float: left; padding: 10px; font-size: 18px; font-weight: bold; }
.VehicleHistoryPlayerPointAddress                       { float: left; padding: 0 10px 10px 10px; font-size: 14px; height: 60px; }
.VehicleHistoryPlayerPointSpeed                         { float: left; padding: 0; font-size: 30pt; font-weight: bold; margin-left: 170px; margin-top: 8px; width: 150px; text-align: right; }
.VehicleHistoryPlayerPointSpeed span			        { font-size: 10pt; font-weight: normal; margin-left: 10px; }

.VehicleHistoryPlayerCompassContainer                   { float: left; width: 100%; height: 280px; margin-top: -20px; }
.VehicleHistoryPlayerCompassInnerContainer              { margin-left: auto; margin-right: auto; margin-top: 10px; height: 280px; width: 280px; }
.VehicleHistoryPlayerCompassRelativeContainer           { position: relative; left: 0; top: 0; width: 100%; height: 100%; }
.VehicleHistoryPlayerCompassAbsContainer                { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.VehicleHistoryPlayerCompassBackground                  { background: url(/plugins/app25/DeviceHistory/compass-bg.png) center center no-repeat; z-index: 1906; }
.VehicleHistoryPlayerCompassPin                         { background: url(/plugins/app25/DeviceHistory/compass-pin.png) center center no-repeat; z-index: 1907; }

.VehicleHistoryPlayerScroller,
.VehicleHistoryAnalyserScroller,
.VehicleHistoryRouteScroller                            { float: left; width: 100%; padding-top:10px; height: calc(100% - 140px); height: -webkit-calc(100% - 140px); height: -moz-calc(100% - 140px); overflow-x: hidden; overflow-y: auto; /*background: url(/plugins/app25/DeviceHistory/compass-bg.png) center center no-repeat;*/ }
.VehicleHistoryAnalyserScroller,
.VehicleHistoryRouteScroller,
.VehicleHistoryPlayerScroller[running]                  { background: #FFFFFF; }

.VehicleHistoryRouteEditor                              { float: left; width: calc(100% - 40px); width: -webkit-calc(100% - 40px); width: -moz-calc(100% - 40px); }

.VehicleHistoryAnalyserGraph                            { float: left; width: 100%; height: 260px; }
.VehicleHistoryAnalyserGraphRange                       { float: left; width: 100%; height: 60px; margin-bottom: 20px;}

/*.dxc-tooltip                                            { float: left; width: 100px; height: 60px;}*/

.HistoryPlayer
{
    position                : fixed;
    top                     : 40px;
    right                   : 0;
    width                   : 140px;
    height                  : 140px;
    margin                  : 20px 20px;
    z-index                 : 5001;
    display                 : none; 
}
.HistoryPlayer .playerContainer
{
    float                   : right;
    height                  : 140px;
    position                : relative;
}
.HistoryPlayer .notification
{
    position                : absolute;
    width                   : 400px;
    height                  : 200px;
    left                    : -400px;
    margin-top              : -30px;
}
.HistoryPlayer .notification .info      { float: left; width: 100%; height: 100%; }
.HistoryPlayer .notification .info img  { float: right; width: 130px; } 
.HistoryPlayer .notification .info span { float: left; width: 270px; font-family: arial; font-weight: bold; font-size: 4em; margin: 10px 0; -webkit-text-stroke: 1.5px #f2ecde; -webkit-text-fill-color: #234F70; letter-spacing: -2px; } 

.HistoryPlayer .movingBlock
{
    width                   : 100%;
    height                  : 100%;
    background-color        : rgba(84, 101, 119, 0.4);
    -webkit-border-radius   : 9px;
    -moz-border-radius      : 9px;
    border-radius           : 9px;
    border-top-right-radius : 50px;
    animation               : flipInX 1s infinite;
    -webkit-animation       : flipInX 1s infinite;
    animation-iteration-count: 1;  
    -webkit-border-top-right-radius: 50px;
    -moz-border-radius-topright: 50px;
}

.HistoryPlayer .stoppedBlock
{
    width                   : 100%;
    height                  : 100%;
}

.HistoryPlayer .buttonBlock
{
    float                   : left;
    width                   : 100%;
    height                  : 90px;
}

.HistoryPlayer .stopButton
{
    float                   : left;
    width                   : 34px;
    height                  : 34px;
    background-color        : #263647;
    background-image        : url(/plugins/app25/DeviceHistory/stopicon.png);
    background-position     : center;
    background-repeat       : no-repeat;
    border                  : 2px solid #979fa3;
    border-radius           : 100px;
    -webkit-box-shadow      : 0px 0px 49px -6px rgba(255,255,255,1);
    -moz-box-shadow         : 0px 0px 49px -6px rgba(255,255,255,1);
    box-shadow              : 0px 0px 49px -6px rgba(255,255,255,1);
    margin                  : 28px 0px 0px 10px;
}

.HistoryPlayer .stopButton:hover
{
    cursor                  : pointer;
    background-color        : #285f8f;
}

.HistoryPlayer .stopButton2
{
    float                   : left;
    width                   : 34px;
    height                  : 34px;
    border                  : 2px solid transparent;
    margin                  : 28px 0px 0px 10px;
}

.HistoryPlayer .mainButton
{
    float                   : right;
    width                   : 66px;
    height                  : 66px;
    background-color        : #263647;
    background-image        : url(/plugins/app25/DeviceHistory/pauseicon.png);
    background-position     : center;
    background-repeat       : no-repeat;
    border                  : 2px solid #979fa3;
    border-radius           : 100px;
    -webkit-box-shadow      : 0px 0px 49px -6px rgba(255,255,255,1);
    -moz-box-shadow         : 0px 0px 49px -6px rgba(255,255,255,1);
    box-shadow              : 0px 0px 49px -6px rgba(255,255,255,1);
    margin                  : 11px 10px 0px 10px;
}

.HistoryPlayer .mainButton:hover
{
    background-color        : #285f8f;
}

.HistoryPlayer .mainButton[play]
{
    background-image        : url(/plugins/app25/DeviceHistory/playicon.png);
}

.HistoryPlayer .sliderBlock
{
    float                   : left;
    width                   : 100%;
    height                  : 50px;
}

.HistoryPlayer .slider
{
    float                   : left;
    width                   : 100%;
    height                  : 18px;
}

.HistoryPlayer .slider[speed]
{
    margin-top              : 5px;
}

.HistoryPlayer .slider-simple
{
      width                 : 120px;
      height                : 18px;
      margin-left           : 10px;
}

.HistoryPlayer .slider-simple[speed]
{
    width                   : 90px;
}

.HistoryPlayer .speedImage
{
    position                : absolute;
    width                   : 20px;
    height                  : 25px;
    background              : url(/plugins/app25/DeviceHistory/speedicon.png) no-repeat;
    z-index                 : 10002;
    margin-top              : -18px;
    margin-left             : 105px;
}

.HistoryPlayer .dx-slider-bar {
    margin                  : 5px 5px;
    background              : rgba(84, 101, 119, 0.4);
}

.HistoryPlayer .dx-slider-handle {
    margin-top              : -8px;
    margin-right            : -7px;
    width                   : 10px;
    height                  : 18px;
    border                  : 1px solid rgba(84, 101, 119, 0.3);
    background-color        : #fff;
    margin-left             : 1px;
}

.HistoryPlayer .dx-slider-range.dx-slider-range-visible {
    border                  : 1px solid #fff;
    background              : #fff;
}


.VehicleHistoryPlayerNumCounter .numCounter {
    font-family             : Arial, Tahoma, 'Helvetica Neue', Geneva, Tahoma, sans-serif; 
    font-size               : 30px;
    display                 : inline-block;
    height                  : 30px;
    line-height             : 42px;
    color                   : #767676;
    margin-top              : 10px;
}
.VehicleHistoryPlayerNumCounter .numCounter > b {
  display                   : inline-block;
  width                     : 30px;
  height                    : 40px;
  margin                    : 5px 3px;
  border-radius             : 6px;
  background                : #f9f9f9;
  text-align                : center;
  box-shadow                : 1px 1px rgba(255, 255, 255, 0.02), 1px 1px 3px #999 inset;
  overflow                  : hidden;
}
.VehicleHistoryPlayerNumCounter .numCounter > b:before {
  content                   : ' 0 1 2 3 4 5 6 7 8 9 ';
  display                   : block;
  word-break                : break-all;
  word-break                : break-word;
  -webkit-transition        : 0.4s cubic-bezier(0.12, 0.78, 0.52, 1.2);
  transition                : 0.4s cubic-bezier(0.12, 0.78, 0.52, 1.2);
}
.VehicleHistoryPlayerNumCounter .numCounter > span {
  display                   : inline-block;
  font-size                 : 40px;
  vertical-align            : top;
  color                     : #767676; 
}

.VehicleHistoryPlayerNumCounter .numCounter {
  overflow                  : hidden;
  /*position                  : absolute;*/
  width                     : 240px;
  height                    : 50px;
  text-align                : center;
  background                : #dddddd;
  background                : -webkit-linear-gradient(top, #f1f1f1 1%, #f9f9f9 10%,  #f7f7f7 50%, #ededed 51%, #ededed 100%);
  background                : linear-gradient(to bottom, #f1f1f1 1%, #f9f9f9 10%,  #f7f7f7 50%, #ededed 51%, #ededed 100%);
  border-radius             : 9px;
  border                    : 1px solid #ddd;
}

.VehicleHistoryPlayerNumCounter .numCounter > b.d1:before {
  margin-top: -42px;
}
.VehicleHistoryPlayerNumCounter .numCounter > b.d2:before {
  margin-top: -84px;
}
.VehicleHistoryPlayerNumCounter .numCounter > b.d3:before {
  margin-top: -126px;
}
.VehicleHistoryPlayerNumCounter .numCounter > b.d4:before {
  margin-top: -168px;
}
.VehicleHistoryPlayerNumCounter .numCounter > b.d5:before {
  margin-top: -210px;
}
.VehicleHistoryPlayerNumCounter .numCounter > b.d6:before {
  margin-top: -252px;
}
.VehicleHistoryPlayerNumCounter .numCounter > b.d7:before {
  margin-top: -294px;
}
.VehicleHistoryPlayerNumCounter .numCounter > b.d8:before {
  margin-top: -336px;
}
.VehicleHistoryPlayerNumCounter .numCounter > b.d9:before {
  margin-top: -378px;
}

.VehicleHistoryTripListGridContainer {
    top: 50px;
    position:absolute;
    width: 100%;
    max-height: calc(100vh - 300px);
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 1;
}

.VehicleHistoryListMain {
    top: 213px;
    left: 82px;
    width: 436px;
    height: 134px;
    opacity: 1;
    display: flex;
}

.VehicleHistoryListMain > tr > td {
    width: 100%;
    height: 88px;
}

.VehicleHistoryListMain[selected=false] {
    background-color: #F9F9F9;
}

.VehicleHistoryListMain[selected=false][shade] {
    background-color: #EFF1F2;
}

.VehicleHistoryListMain[selected=true] {
    background-color: rgba(160, 219, 253, 0.26);
}

.VehicleHistoryListMain .dx-freespace-row {
    background-color: #FFFFFF;
}

.VehicleHistoryListIcon {
    top: 213px;
    left: 109px;
    width: 20px;
    height: 143px;
    opacity: 1;
    margin-left: 30px;
}

.VehicleHistoryListLeftUnderIcon {
    position:relative;
    top: -21px;
    left: -1px;
    width: 25px;
    height: 25px;    
    margin-top: 9px;     
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border: 2px solid #FF9900;
    border-radius:20px;
    opacity: 1;
}

.VehicleHistoryListLeftUnderIconLarge {
    position: relative;
    top: -21px;
    left: -1px;
    width: 30px;
    height: 25px;
    margin-top: 9px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border: 2px solid #FF9900;
    border-radius: 20px;
    opacity: 1;
}


.VehicleHistoryListLeftIconNumber {
    top: 213px;
    left: 109px;
    width: 20px;
    height: 143px;
    opacity: 1;
    margin-left: -5px;
}

.VehicleHistoryListLeftNumber {
    position:relative;
    z-index:111;
    top: 10px;
    left: 7px;
    width: 20px;
    height: 20px;
    margin-left: -6px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-14)/19px Segoe UI;
    letter-spacing: var(--unnamed-character-spacing-0);
    text-align: center;
    font: normal normal bold 14px/19px Segoe UI;
    letter-spacing: 0px;
    color: #282F3E;
    opacity: 1;
}

.VehicleHistoryAddress {
    margin-left: 20px;
}

.VehicleHistoryFirstAddress {
    top: 213px;
    left: 166px;
    width: 320px;
    margin-left: 10px;
    height: auto;
    max-height: 40px;
    font: var(--unnamed-font-style-normal) normal normal 12px/var(--unnamed-line-spacing-16) Segoe UI;
    letter-spacing: var(--unnamed-character-spacing-0);
    text-align: left;
    font: normal normal normal 14px/18px Segoe UI;
    letter-spacing: 0px;
    color: #495967;
    opacity: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
}

.VehicleHistoryFirstDatetime {
    top: 248px;
    left: 166px;
    width: 112px;
    margin-left: 10px;
    height: 16px;
    font: var(--unnamed-font-style-normal) normal normal 12px/var(--unnamed-line-spacing-16) Segoe UI;
    letter-spacing: var(--unnamed-character-spacing-0);
    text-align: left;
    font: normal normal normal 12px/16px Segoe UI;
    letter-spacing: 0px;
    color: #495967;
    opacity: 0.6;
}

.VehicleHistoryAvarageSpeed {
    top: 281px;
    left: 166px;
    width: 71px;
    height: 24px;
    opacity: 1;
    display:flex;
    margin-right: 25px;
}

.VehicleHistoryAvarageSpeedIcon {
    top: 286px;
    left: 166px;
    width: 25px;
    height: 20px;
    opacity: 1;
    background-repeat: no-repeat;
    background-image: url(/plugins/app25/DeviceHistory/average.svg);
}

.VehicleHistoryAvarageSpeedValueText {
    top: 281px;
    left: 190px;
    width: 47px;
    height: 24px;
    opacity: 1;
    display: flex;
}

.VehicleHistoryAvarageSpeedValue {
    top: 281px;
    left: 317px;
    width: 26px;
    height: 24px;
    font: var(--unnamed-font-style-normal) normal 600 18px/24px Segoe UI;
    text-align: right;
    font: normal normal 600 18px/24px Segoe UI;
    letter-spacing: -0.43px;
    color: #495967;
    opacity: 1;
    margin-top: -3px;
    margin-left: 2px;
    margin-right: 2px;
    display: flex;
}

.VehicleHistoryAvarageSpeedText {
    top: 286px;
    left: 345px;
    width: 25px;
    height: 16px;
    margin-top: 3px;
    margin-right: 5px;
    font: var(--unnamed-font-style-normal) normal normal 12px/var(--unnamed-line-spacing-16) Segoe UI;
    text-align: left;
    font: normal normal normal 12px/16px Segoe UI;
    letter-spacing: -0.29px;
    color: #495967;
    opacity: 1;
}

.VehicleHistoryMaximumSpeed {
    top: 281px;
    left: 293px;
    width: 76px;
    height: 24px;
    opacity: 1;
    display: flex;
    margin-right: 25px;
}

.VehicleHistoryMaximumSpeedIcon {
    top: 290px;
    left: 299px;
    width: 25px;
    height: 20px;
    opacity: 1;
    background-repeat: no-repeat;
    background-image: url(/plugins/app25/DeviceHistory/maximum.svg);
}

.VehicleHistoryMaximumSpeedValueText {
    top: 281px;
    left: 317px;
    width: 53px;
    height: 24px;
    opacity: 1;
    display: flex;
}

.VehicleHistoryMaximumSpeedValue {
    top: 281px;
    left: 317px;
    width: 26px;
    height: 24px;
    font: var(--unnamed-font-style-normal) normal 600 18px/24px Segoe UI;
    text-align: right;
    font: normal normal 600 18px/24px Segoe UI;
    letter-spacing: -0.43px;
    color: #495967;
    opacity: 1;
    margin-top: -3px;
    margin-left: 2px;
    margin-right: 2px;
    display: flex;
}

.VehicleHistoryMaximumSpeedText {
    top: 286px;
    left: 345px;
    width: 25px;
    height: 16px;
    margin-top: 3px;
    margin-right: 5px;
    font: var(--unnamed-font-style-normal) normal normal 12px/var(--unnamed-line-spacing-16) Segoe UI;
    text-align: left;
    font: normal normal normal 12px/16px Segoe UI;
    letter-spacing: -0.29px;
    color: #495967;
    opacity: 1;
}

.VehicleHistoryDurationSpeed {
    top: 281px;
    left: 429px;
    width: 80px;
    height: 24px;
    opacity: 1;
    display: flex;
}

.VehicleHistoryDurationSpeedIcon {
    top: 284px;
    left: 429px;
    width: 25px;
    height: 20px;
    opacity: 1;
    background-repeat: no-repeat;
    background-image: url(/plugins/app25/DeviceHistory/duration.svg);
}

.VehicleHistoryDurationSpeedValueText {
    top: 281px;
    left: 452px;
    width: 56px;
    height: 24px;
    opacity: 1;
    display: flex;
}

.VehicleHistoryDurationSpeedValue {
    top: 281px;
    left: 317px;
    width: 26px;
    height: 24px;
    font: var(--unnamed-font-style-normal) normal 600 18px/24px Segoe UI;
    text-align: right;
    font: normal normal 600 18px/24px Segoe UI;
    letter-spacing: -0.43px;
    color: #495967;
    opacity: 1;
    margin-top: -3px;
    margin-left: 2px;
    margin-right: 2px;
    display:flex;
}

.VehicleHistoryDurationSpeedText {
    top: 286px;
    left: 345px;
    width: 25px;
    height: 16px;
    margin-top: 3px;
    margin-right: 5px;
    font: var(--unnamed-font-style-normal) normal normal 12px/var(--unnamed-line-spacing-16) Segoe UI;
    text-align: left;
    font: normal normal normal 12px/16px Segoe UI;
    letter-spacing: -0.29px;
    color: #495967;
    opacity: 1;
}


.VehicleHistoryLastAddress {
    top: 322px;
    left: 166px;
    width: 306px;
    margin-left: 10px;
    margin-top: 5px;
    height: auto;
    max-height: 40px;
    font: var(--unnamed-font-style-normal) normal normal 12px/var(--unnamed-line-spacing-16) Segoe UI;
    letter-spacing: var(--unnamed-character-spacing-0);
    text-align: left;
    font: normal normal normal 14px/18px Segoe UI;
    letter-spacing: 0px;
    color: #495967;
    opacity: 1;
    text-overflow: ellipsis;
    overflow: hidden;
}

.VehicleHistoryLastDatetime {
    top: 341px;
    left: 166px;
    width: 112px;
    margin-left: 10px;
    height: 16px;
    font: var(--unnamed-font-style-normal) normal normal 12px/var(--unnamed-line-spacing-16) Segoe UI;
    letter-spacing: var(--unnamed-character-spacing-0);
    text-align: left;
    font: normal normal normal 12px/16px Segoe UI;
    letter-spacing: 0px;
    color: #495967;
    opacity: 0.6;
}

.VehicleHistoryListFirstIcon {
    top: 213px;
    left: 109px;
    width: 40px;
    height: 40px;    
    opacity: 1;
    margin-left: -9px;
    margin-top: -10px;
    background-repeat: no-repeat;
    background-image: url(/plugins/app25/DeviceHistory/start-icon2.svg);
}

.VehicleHistoryListFirstIconDashed {
    top: 237px;
    left: 119px;
    width: 0px;
    height: 26px;
    border:1px solid #B7B7B7;
    opacity: 1;
    margin-left: 10px;
    margin-top: -15px;
}

.VehicleHistoryListFirstIconDashedButtom {
    top: 237px;
    left: 119px;
    width: 0px;
    height: 20px;
    border: 1px solid #B7B7B7;
    opacity: 1;
    margin-left: 10px;
}

.VehicleHistoryListLastIconDashed {
    top: 237px;
    left: 119px;
    width: 0px;
    height: 18px;
    border: 1px dashed #B7B7B7;
    opacity: 1;
    margin-left: 10px;
    margin-top: -8px;
}

.VehicleHistoryListLastIconDashedPop {
    top: 237px;
    left: 119px;
    width: 0px;
    height: 18px;
    border: 1px dashed #B7B7B7;
    opacity: 1;
    margin-left: 10px;
    margin-top: -12px;
    margin-bottom: -5px;
}

.VehicleHistoryListIconValue {
    top: 273px;
    left: 93px;
    width: 52px;
    height: 26px;
    opacity: 1;
    margin-left: -15px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) 18px/24px Segoe UI;
    text-align: right;
    font: normal normal bold 18px/24px Segoe UI;
    letter-spacing: -0.43px;
    color: #495967;
    opacity: 1;
}

.VehicleHistoryListLastIconContinue {
    top: 328px;
    left: 109px;
    width: 40px;
    height: 42px;
    opacity: 1;
    margin-left: -9px;
    background-repeat: no-repeat;
    background-image: url(/plugins/app25/DeviceHistory/start-icon.svg);
}

.VehicleHistoryListLastIconFinish {
    top: 328px;
    left: 109px;
    width: 40px;
    height: 50px;
    opacity: 1;
    margin-top: -8px;
    margin-left: -9px;
    background-repeat: no-repeat;
    background-image: url(/plugins/app25/DeviceHistory/finish-icon.svg);
}

.VehicleHistoryListFirstLine {
    top: 273px;
    left: 166px;
    width: 351px;
    margin-top: 10px;
    margin-left: 10px;
    height: 0px;
    border: 1px solid #DCDCDC;
    opacity: 1;
}

.VehicleHistoryListLastLine {
    top: 314px;
    left: 166px;
    width: 351px;
    margin-top: 10px;
    margin-left: 10px;
    height: 0px;
    border: 1px solid #DCDCDC;
    opacity: 1;
}

.VehicleHistoryListTreeIcon {
    margin-top: 10px;
    margin-left: 10px;
    display: flex;
}

.VehicleHistoryListFooterLine {
    margin-top: 140px;
    margin-left: -455px;
    top: 160px;
    width: 100%;
    height: 0px;
    border: 1px solid #DCDCDC;
    opacity: 1;
}

.VehicleHistoryListHeaderLine {
    position: absolute;
    width: 427px;
    height: 0px;
    border: 1px solid #DCDCDC;
    opacity: 1;
    top: 0px;
}

.VehicleHistoryTripListHeader {
    margin-top: -30px;
    float: left;
    width: 100%;
    height: 36px;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -o-transition: height 0.5s;
    transition: height 0.5s;
    overflow: hidden;
}
.VehicleHistoryButtonSaveAsRoute {
    position: absolute;
    top: 42px;
    left: 288px;
    width: 139px;
    height: 34px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DFDFDF;
    border-radius: 4px;
    opacity: 1;
    color: #333333;
}
.VehicleHistoryTripListTextButton {
    top: 12px;
    display: flex;
    position: absolute;
    left: 0px;
    width: 140px;
    height: 18px;
    opacity: 1;
    cursor: pointer;
}
.VehicleHistoryTripListText {
    position:relative;
    width: 133px;
    height: 18px;
    font: var(--unnamed-font-style-normal) normal 600 var(--unnamed-font-size-14)/19px Segoe UI;
    letter-spacing: var(--unnamed-character-spacing--0-34);
    text-align: left;
    font: normal normal 600 14px/19px Segoe UI;
    letter-spacing: -0.34px;
    color: #0394DF;
    opacity: 1;
}
.VehicleHistoryTripListLeftArrow {
    position: relative;
    margin-right: 2px;
    top: 2px;
    left: 0px;
    width: 10px;
    height: 15px;
    opacity: 1;
    background-repeat: no-repeat;
    background-image: url(/plugins/app25/DeviceHistory/left-arrow.png);
}
.VehicleHistoryTripListMidleText {
    position: absolute;
    top: 6px;
    left: 140px;
    width: 140px;
    height: 34px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) 20px/27px Segoe UI;
    letter-spacing: var(--unnamed-character-spacing-0);
    text-align: center;
    font: normal normal bold 20px/27px Segoe UI;
    letter-spacing: 0px;
    color: #0394DF;
    opacity: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
}
.VehicleHistoryTripListButtons {
    position: absolute;
    top: 5px;
    left: 350px;
    width: 110px;
    height: 34px;
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) 20px/27px Segoe UI;
    letter-spacing: var(--unnamed-character-spacing-0);
    text-align: left;
    font: normal normal bold 20px/27px Segoe UI;
    letter-spacing: 0px;
    color: #0394DF;
    opacity: 1;
}
.VehicleHistoryTripListDisplayTypeButtonContainer {
    position:absolute;
    cursor: pointer;
    width: 36px;
    height: 36px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DFDFDF;
    border-radius: 3px;
    opacity: 1;
}

.VehicleHistoryTripListDisplayTypeButtonContainer:hover {
    background-color: #e7e7e7;    
}

.VehicleHistoryTripListDisplayTypeButton {
    top: 518px;
    left: 510px;
    width: 30px;
    height: 30px;
    margin-left: 4px;
    margin-top: 4px;
    opacity: 1;
    background-repeat: no-repeat;
    background-image: url(/plugins/app25/DeviceHistory/line.svg);
}

.VehicleHistoryTripListFilterButtonContainer {
    position:absolute;
    cursor: pointer;
    margin-left: 43px;
    width: 34px;
    height: 36px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DFDFDF;
    border-radius: 3px;
    opacity: 1;
}

.VehicleHistoryTripListFilterButtonContainer:hover {
    background-color: #e7e7e7;
}

.VehicleHistoryTripListFilterButton {
    margin-top: 11px;
    margin-left: 10px;
    width: 15px;
    height: 15px;
    opacity: 1;
    background-repeat: no-repeat;
    background-image: url(/plugins/app25/DeviceHistory/filter-icon.png);
}

.FilterPopup .dx-popup-content {
    padding: 0;
}

.FilterPopup .dx-overlay-content {
    overflow: auto;
}

.DeviceHistoryEventFilterPopupContent .dx-treeview-node-is-leaf {
    margin-bottom: 5px;
    margin-top: 5px;
}

.DeviceHistoryEventFilterPopupContent li.dx-treeview-node.dx-treeview-item-with-checkbox:not(.dx-treeview-node-is-leaf) {
    border-bottom: 1px solid #DDDDDD;
    padding-bottom: 5px;
    margin-top: 5px;
    min-height: 52px;
}

.DeviceHistoryEventFilterPopupContent {
    height: 100%;
    width: 100%;
}

.DeviceHistoryEventFilterPopupContentWrapper {
    height: 100%;
    width: 100%;
    position: relative;
}

.VehicleHistoryTripListGridContainer  .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td {
    background-color: transparent;
}

.VehicleHistoryTripListGridContainer  .dx-datagrid .dx-row-alt > td {
    background-color: transparent;
    border-top: unset;
    border-bottom: unset;
}

.VehicleHistoryTripListGridContainer  .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-lines) > td {
    border-top: unset;
    border-bottom: unset;
}

.VehicleHistoryTripListGridContainer  .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover {
    background-color: rgba(160, 219, 253, 0.26);
}

    .VehicleHistoryTripListGridContainer  .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover .VehicleHistoryListIconValue {
        background-color: rgba(160, 219, 253, 0.26);
    }

.VehicleHistoryTripListGridContainer  .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused)::selection {
    background-color: rgba(160, 219, 253, 0.26);
}
.VehicleHistoryScrollBar {
    max-height: 300px !important;
    overflow-y: scroll;
}


.DeviceHistoryListContainer  .textEllipsis                              { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.DeviceHistoryListContainer                                             { float: left; width: 100%; height: 100%; font-size: 10px; }
.DeviceHistoryListContainer .dx-widget                                  { color: #333; font-weight: normal; font-size: 12px; font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif;}

.DeviceHistoryListContainer .DeviceHistoryListGridHeader                { float: left;  width: 100%; height: 50px; }
.DeviceHistoryListGridHeader_SwitchButton                               { float: left;  width:36px; margin-right: 4px;  }
.DeviceHistoryListGridHeader_HistoryItemCount                           { float: right; width:calc(100% - 40px); width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); color:rgb(211, 52, 52); font-size: 16px; font-weight: bold; line-height: 36px; text-align:right;}
.DeviceHistoryListGridHeader_HistoryItemCount[reduce]                   { width:calc(100% - 120px); width: -moz-calc(100% - 120px); width: -webkit-calc(100% - 120px);}
.DeviceHistoryListGridHeader_ColumChooserButton                         { float: right; width:36px; margin-left : 4px;  }
.DeviceHistoryListGridHeader_SaveColumsButton                           { float: right; width:36px; margin-left : 4px;  }

.DeviceHistoryListContainer .DeviceHistoryListGridContainer             { float: left; width: 100%; height:calc(100% - 50px); height: -moz-calc(100% - 50px); height: -webkit-calc(100% - 50px); }
.DeviceHistoryListGridContainer .dx-datagrid-header-panel               { border-top: 1px solid #ddd; }
.DeviceHistoryListGridContainer .dx-datagrid-headers                    { border-top: 1px solid #ddd; }

.DeviceHistoryListRow > tr > td                                         { width: 100%;  height:88px;}
.DeviceHistoryListRow[selected=false]                                   { background-color: #F9F9F9;}
.DeviceHistoryListRow[selected=false][shade]                            { background-color: #EFF1F2;}
.DeviceHistoryListRow[selected=true]                                    { background-color: #CCCCCC;}
.DeviceHistoryListRow .dx-freespace-row                                 { background-color: #FFFFFF;}

.DeviceHistoryListRow   .DeviceHistoryRowTop                            { float: left; width:100%; height:26px; padding-top:10px;}
.DeviceHistoryRowTop    .DeviceHistoryItemKey                           { float: left; width: 36px; height:100%; text-align: center; font-weight: bold;}
.DeviceHistoryRowTop    .DeviceHistoryItemAddress                       { float: left; width:calc(70% - 36px); width: -moz-calc(70% - 36px); width: -webkit-calc(70% - 36px);}
.DeviceHistoryRowTop    .DeviceHistoryItemDate                          { float:right; width:25%; text-align:right; padding-right: 10px;}

.DeviceHistoryListRow   .DeviceHistoryRowMiddle                         { float: left;  width:100%;     height: 36px; padding-top:10px; padding-bottom:10px; }

.DeviceHistoryRowMiddle .DeviceHistoryItemIconEvent                     { float: left;  width:36px;     height: 20px; background-position-x: center; background-position-y: center;  background-repeat:no-repeat; background-size: 20px 20px;}
.DeviceHistoryRowMiddle .DeviceHistoryItemIconState                     { float: left;  width:36px;     height: 14px; background-position-x: center; background-position-y: center;  background-repeat:no-repeat; background-size: 14px 14px;}
.dx-datagrid-content    .DeviceHistoryItemIconEvent                     { float: left;  width:36px;     height: 20px; background-position-x: center; background-position-y: center;  background-repeat:no-repeat; background-size: 20px 20px;}
.dx-datagrid-content    .DeviceHistoryItemIconState                     { float: left;  width:36px;     height: 14px; background-position-x: center; background-position-y: center;  background-repeat:no-repeat; background-size: 14px 14px;}

.DeviceHistoryRowMiddle .DeviceHistoryItemPositionIcon                  { float: left;  width: 25px;    height:100%; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceHistoryList/latlon.png);}
.DeviceHistoryRowMiddle .DeviceHistoryItemPosition                      { float: left;  cursor:pointer; width:calc(63% - 111px); width: -moz-calc(63% - 111px); width: -webkit-calc(63% - 111px);}
.DeviceHistoryRowMiddle .DeviceHistoryItemAltitudeIcon                  { float: left;  width: 25px;    height:100%; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceHistoryList/altitude.png);}
.DeviceHistoryRowMiddle .DeviceHistoryItemAltitude                      { float: left;  width: 7%;      font-weight:bold;}
.DeviceHistoryRowMiddle .DeviceHistoryItemAltitudeUnit                  { float: left;  width: 5%;      height:100%;}
.DeviceHistoryRowMiddle .DeviceHistoryItemTemperatureIcon               { float: left;  width: 25px;    height:100%; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceHistoryList/temperature.png);}
.DeviceHistoryRowMiddle .DeviceHistoryItemTemperature                   { float: left;  width: 6%;      font-weight:bold;}
.DeviceHistoryRowMiddle .DeviceHistoryItemTemperatureUnit               { float: left;  width: 5%;      height:100%;}
.DeviceHistoryRowMiddle .DeviceHistoryItemSource                        { float: right;  width:14%;      text-align:right; padding-right: 10px; }

.DeviceHistoryListRow   .DeviceHistoryRowBottom                         { float:left;   width:100%; height:26px; padding-bottom:10px;}
.DeviceHistoryRowBottom .DeviceHistoryItemDistanceIcon                  { float:left;   width:35px; height:100%; padding-left:60px; background-position-x: right; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceHistoryList/distance.png);}
.DeviceHistoryRowBottom .DeviceHistoryItemDistance                      { float:left;   margin-left: 4px; font-weight:bold; width:13%;} 
.DeviceHistoryRowBottom .DeviceHistoryItemDistanceUnit                  { float:left;   width:8%; }
.DeviceHistoryRowBottom .DeviceHistoryItemSpeedIcon                     { float:left;   width:25px; height:100%; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceHistoryList/speed.png);}
.DeviceHistoryRowBottom .DeviceHistoryItemSpeed                         { float:left;   font-weight:bold; width:13%;}
.DeviceHistoryRowBottom .DeviceHistoryItemSpeedUnit                     { float:left;   width:8%; }
.DeviceHistoryRowBottom .DeviceHistoryItemFuelIcon                      { float:left;   width:25px; height:100%; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceHistoryList/fuel.png);}
.DeviceHistoryRowBottom .DeviceHistoryItemFuelVolume                    { float:left;   font-weight:bold; width:13%;}
.DeviceHistoryRowBottom .DeviceHistoryItemFuelVolumeUnit                { float:left;   width:8%;}
.DeviceHistoryRowBottom .DeviceHistoryItemFuelPercentage                { float:left;   width:calc(37% - 149px); width: -moz-calc(37% - 149px); width: -webkit-calc(37% - 149x);}

.DeviceHistoryListContextMenuItem                                       { float:left;  margin:5px;  width:100%;}
.DeviceHistoryListContextMenuItem .dx-icon-check                        { float: left; line-height: 20px;   }
.DeviceHistoryListContextMenuItem .ContextMenuItemContent               { float: left; margin-left: 40px;   }
.DeviceHistoryListContextMenuItem .ContextMenuItemContent[selected]     { margin-left: 16px; }
.DeviceHistoryListContextMenuItem .ContextMenuItemContent[main]         { margin-left: 0px; }

.DeviceHistoryListContextMenuSortingStyler .dx-submenu                  {overflow-y: scroll; max-height: 620px; height:calc(100vh - 175px); height: -moz-calc(100vh - 175px); height: -height-calc(100vh - 175px); }
.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(/plugins/app25/DeviceInfo/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(/plugins/app25/DeviceInfo/close.png) center center no-repeat;
}

.vehicleInfoSearchIcon[expanded="false"] {
    background: url(/plugins/app25/DeviceInfo/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(/plugins/app25/DeviceInfo/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(/plugins/app25/DeviceInfo/driver.png) 0 center no-repeat;
}

.vehicleInfoBodyImageContainer[type="1"] > .vehicleInfoBodyImage, .vehicleEmpty {
    background: url(/plugins/app25/DeviceInfo/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(/plugins/app25/DeviceInfo/connectruck_logo.png) no-repeat white;
}
.connectTruckOrTemsa[type= "Temsa"] {
    background: url(/plugins/app25/DeviceInfo/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);
    }
}

.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(/plugins/app25/DeviceInstantUsage/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(/plugins/app25/DeviceInstantUsage/satellite.png) 0 center no-repeat; margin-left: 10px; }
.vehicleInstantUsageMapInfoContainer > .cell[ignition]      { background: url(/plugins/app25/DeviceInstantUsage/ignition.png) 0 center no-repeat; margin-left: 10px; }
.vehicleInstantUsageMapInfoContainer > .cell[standStill]    { background: url(/plugins/app25/DeviceInstantUsage/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(/plugins/app25/DeviceInstantUsage/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(/plugins/app25/DeviceInstantUsage/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(/plugins/app25/DeviceInstantUsage/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("/plugins/app25/DeviceInstantUsage/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('/plugins/app25/DeviceInstantUsage/bus.svg');
    background-position: center;
    background-repeat: no-repeat;
}
.specialDeviceInfoTopContainer{
    float:left;
    width : 100%;
    height: 20px
}

.specialDeviceInfoCenterContainer .circleInfo {

    background: url('/plugins/app25/DeviceInstantUsage/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('/plugins/app25/DeviceInstantUsage/box.svg');
     float:left;
     width : 196px;
       height:100%;
}
.specialDeviceInfoBottomContainer .rightBottomContainer {
    background: url('/plugins/app25/DeviceInstantUsage/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('/plugins/app25/DeviceInstantUsage/battery.svg');
}
.bottomIcon[type="accumulatorIcon"] {
    background: url('/plugins/app25/DeviceInstantUsage/accumulator.svg');
}
.bottomIcon[type="fuelIcon"] {
    background: url('/plugins/app25/DeviceInstantUsage/fuel.svg');
}

.bottomIcon[type="acceleratorPedalIcon"] {
    background: url('/plugins/app25/DeviceInstantUsage/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('/plugins/app25/DeviceInstantUsage/d_gear1.svg');

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

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

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

    background: url('/plugins/app25/DeviceInstantUsage/p_gear.svg');
}
.centerBottomContainer .airconditioning[type="on"] {
    background: url('/plugins/app25/DeviceInstantUsage/airconditioning_on.svg');
}
.centerBottomContainer .airconditioning[type="off"] {
    background: url('/plugins/app25/DeviceInstantUsage/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('/plugins/app25/DeviceInstantUsage/up.svg');
}
.dashboardseperator[type="down"] {
    background: url('/plugins/app25/DeviceInstantUsage/down.svg');
}
.specialDeviceImageContainer .axle .tire {

    width: 20px;
    height: 52px;
    background: url('/plugins/app25/DeviceInstantUsage/tire_icon.svg');
    background-position: center !important;
    background-repeat: no-repeat !important;
    float:left
}
.specialDeviceImageContainer .tire[state="alarm"] {
    background: url('/plugins/app25/DeviceInstantUsage/tire_red.svg');
}
.specialDeviceImageContainer .tire[state="alarm"] {
    background: url('/plugins/app25/DeviceInstantUsage/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('/plugins/app25/DeviceInstantUsage/accumulator_disable.svg');
}
.specialDeviceInfoTopContainer .cell[accumulatorWarning][type="alarm"] {
    background: url('/plugins/app25/DeviceInstantUsage/accumulator_warning.svg');
}
.specialDeviceInfoTopContainer .cell[brakeWarning] {
    background: url('/plugins/app25/DeviceInstantUsage/brakeerrordisable.svg');
}
.specialDeviceInfoTopContainer .cell[brakeWarning][value="1"] {
    background: url('/plugins/app25/DeviceInstantUsage/brakeError_Yellow.svg');
}
.specialDeviceInfoTopContainer .cell[brakeWarning][value="2"] {
    background: url('/plugins/app25/DeviceInstantUsage/brakeError_Red.svg');
}
.specialDeviceInfoTopContainer .cell[lowTirePressureWarning] {
    background: url('/plugins/app25/DeviceInstantUsage/low_tire_pressure_disable.svg');
}
.specialDeviceInfoTopContainer .cell[engineWarning] {
    background: url('/plugins/app25/DeviceInstantUsage/engine_disable.svg');
}
.specialDeviceInfoTopContainer .cell[engineWarning][value="1"] {
    background: url('/plugins/app25/DeviceInstantUsage/enginewarning_yellow.svg');
}
.specialDeviceInfoTopContainer .cell[engineWarning][value="2"] {
    background: url('/plugins/app25/DeviceInstantUsage/enginewarning_red.svg');
}
.specialDeviceInfoTopContainer .cell[gearboxWarning] {
    background: url('/plugins/app25/DeviceInstantUsage/gearbox_disable.svg');
}
.specialDeviceInfoTopContainer .cell[gearboxWarning][value="1"] {
    background: url('/plugins/app25/DeviceInstantUsage/gearbox_Yellow.svg');
}
.specialDeviceInfoTopContainer .cell[gearboxWarning][value="2"] {
    background: url('/plugins/app25/DeviceInstantUsage/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('/plugins/app25/DeviceInstantUsage/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('/plugins/app25/DeviceInstantUsage/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('/plugins/app25/DeviceInstantUsage/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('/plugins/app25/DeviceInstantUsage/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('/plugins/app25/DeviceInstantUsage/brakePedalDepressed.svg');
    color: #9B9B9B;
}
.brakePedal[state="pressed"] {
    background  : url('/plugins/app25/DeviceInstantUsage/brakePedalPressed.svg');
    color       : #0E3C65;
}
.specialDeviceImageContainer .vehicleSuspension {
    float: right;
    width: 55px;
    height: 35px;
    margin-top: 60px;
    background: url('/plugins/app25/DeviceInstantUsage/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('/plugins/app25/DeviceInstantUsage/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('/plugins/app25/DeviceInstantUsage/tire_red.svg');
}
.specialDeviceImageContainer .axle .tire[alarm="yellow"] {
    background: url('/plugins/app25/DeviceInstantUsage/tire_orange.svg');
}
.specialDeviceImageContainer .axle .tire[alarm="nosignal"] {
    background: url('/plugins/app25/DeviceInstantUsage/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('/plugins/app25/DeviceInstantUsage/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; }
.DeviceListContainer                                            { float: left;  width: 100%; height: 100%;}
.DeviceListContainer .textEllipsis                              { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.DeviceListContainer .gridContainer                             { float: left;  width: 100%; height: 100%;}
.DeviceListContainer .dx-datagrid-rowsview .dx-selection.dx-row > td { background-color: rgba(237, 150, 37, 0.6) !important; }
.DeviceStateIcon                                                { float:left;   height: 100%; width:100%; background-position-x: center; background-position-y: center;  background-repeat:no-repeat; background-size: 14px 14px;}
.DeviceStateIconNonTemplate                                     { float:left;   height: 16px; width:100%; background-position-x: center; background-position-y: center;  background-repeat:no-repeat; background-size: 12px 12px;}
.DeviceListContainer .dx-widget                                 { color: #333;  font-weight: normal; font-size: 12px; font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif; line-height: 1.35715; }
.DeviceListContainer .dx-placeholder                            { font-size: 14px; }
.DeviceListContainer .gridContainer .gridCell                   { width: 100%;  height: 79px}
.DeviceListContainer .dx-datagrid-header-panel                  { background-color:white !important;}
.DeviceListContainer .dx-datagrid-search-panel                  { float: left;  margin-left: 0; width: 100% !important;}
.DeviceListContainer .dx-toolbar                                { float: left;  width: calc(90% - 150px); width: -moz-calc(100% - 150px); width: -webkit-calc(100% - 150px); display: inline-block; }
.DeviceListContainer .dx-toolbar[reduce]                        { float: left;  width: calc(100% - 230px); width: -moz-calc(100% - 230px); width: -webkit-calc(100% - 230px); display: inline-block; }
.DeviceListContainer .dx-toolbar-after                          { display: inline !important; }
.DeviceListContainer .dx-toolbar-center                         { display: inline !important; }
.DeviceListContainer.dx-toolbar-before                          { display: inline !important; }
.DeviceListContainer .dx-toolbar-after                          { display: inline !important; }
.DeviceListContainer .dx-toolbar .dx-toolbar-after              { padding-left: 1px; }
.DeviceListContainer .dx-toolbar-after                          { left: 0px !important }
.DeviceListContainer .dx-toolbar-item                           { display: inline !important; }
.DeviceListContainer_SwitchButton                               { float: left; width: 36px; margin-right: 4px; }
.DeviceListContainer_GridDeviceCount                            { float: left;  width:102px;margin-left:4px; color:#EF9700; font-size: 16px; font-weight: bold; line-height: 36px; text-align:center;}
.DeviceListContainer_ColumChooserButton                         { float: left;  width:36px; margin-left:4px;    }
.DeviceListContainer_SaveColumsButton                           { float: left;  width:36px; margin-left:4px;    }

.DeviceListRow                                                                                  { width: 100%;  height:74px;}
.DeviceListRow[flash]                                                                           { background-color: rgba(237, 150, 37, 0.3);}
.DeviceListContainer .dx-datagrid   .dx-row                                                     { border:none;}
.DeviceListContainer .dx-datagrid   .dx-row[flash]  > td                                        { background-color: rgba(237, 150, 37, 0.3);}
.DeviceListContainer .dx-datagrid   .dx-freespace-row > td                                      { background-color: #FFFFFF;}
.DeviceListContainer .dx-datagrid-rowsview .dx-selection.dx-row > td                            { background-color: rgba(237, 150, 37, 0.6); }
.DeviceListContainer .dx-datagrid-rowsview .dx-selection.dx-row > td .DeviceSpeedIcon           { background-image: url(/plugins/app25/DeviceListV2/speedw.png);}
.DeviceListContainer .dx-datagrid-rowsview .dx-selection.dx-row > td .DeviceDistanceIcon        { background-image: url(/plugins/app25/DeviceListV2/distancew.png);}
.DeviceListContainer .dx-datagrid-rowsview .dx-selection.dx-row > td .DevicePositionIcon        { background-image: url(/plugins/app25/DeviceListV2/latlonw.png);}
.DeviceListContainer .dx-datagrid-rowsview .dx-selection.dx-row > td .DevicePlate[empty=empty]  { color: white;}  
.DeviceListContainer .dx-datagrid-rowsview .dx-selection.dx-row > td .DeviceDriver[empty=empty] { color: white;} 


.DeviceListRow[flash] .DeviceSpeedIcon      { background-image: url(/plugins/app25/DeviceListV2/speedw.png);}
.DeviceListRow[flash] .DeviceDistanceIcon   { background-image: url(/plugins/app25/DeviceListV2/distancew.png);}
.DeviceListRow[flash] .DevicePositionIcon   { background-image: url(/plugins/app25/DeviceListV2/latlonw.png);}

.DeviceListRowLeft                                              { float:left;   width: 36px; height:100%; background-position:center; background-repeat:no-repeat;}  
.DeviceStateIcon                                                { float:left;   height: 100%; width:100%; background-position-x: center; background-position-y: center;  background-repeat:no-repeat; background-size: 14px 14px;}
.DeviceStateIconNonTemplate                                     { float:left;   height: 16px; width:100%; background-position-x: center; background-position-y: center;  background-repeat:no-repeat; background-size: 12px 12px;}

.DeviceListRowRight                                             { float: right; width:calc(100% - 40px); width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); padding-bottom:3px; padding-top:3px;}
.DeviceListRowRightCellTop                                      { float:left;   height:16px; width:100%;}
.DeviceNode                                                     { float:left;   font-weight:bold; width:75px;}
.DevicePlate                                                    { float:left;   font-weight:bold; cursor:pointer; margin-left:5px; width:90px;}
.DevicePlate[empty]                                             { float:left;   font-weight:normal; color:silver;}
.DevicePlate[empty]:hover                                       { color:inherit; font-weight:bold}
.DeviceDriver                                                   { float:left;   font-weight:bold; cursor:pointer; margin-left:5px; width:calc(100% - 290px); width: -moz-calc(100% - 290px); width: -webkit-calc(100% - 290px);}
.DeviceDriver[empty]                                            { float:left;   font-weight:normal; color:silver;}
.DeviceDriver[empty]:hover                                      { color:inherit; font-weight:bold}

.DeviceDriver[empty]:hover                                      { color:inherit; font-weight:bold}
.DeviceDate                                                     { float:right;  width:115px; text-align:right;}

.DeviceListRowRightCellMiddle                                   { float:left;   height:36px; padding-top:10px; padding-bottom:10px; width: 100%; }
.DeviceAddress                                                  { float:left;   padding-right:10px; min-width:345px; width:calc(100% - 32px); width: -moz-calc(100% - 32px); width: -webkit-calc(100% - 32px); }
.DeviceDvr                                                      { float:left; background: url(/plugins/app25/DeviceListV2/dvrs.png) no-repeat center center; display: none; width:24px; height:20px; background-size: 24px 20px;}
.DeviceDvr[hasDVR=true]                                         { display: block;}

.DeviceListRowRightCellBottom                                   { float:left;   height:16px; width:100%;}
.DevicePositionIcon                                             { float:left;   width:20px; height:100%; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceListV2/latlon.png);}
.DevicePosition                                                 { float:left;   width:160px; cursor:pointer; }
.DeviceDistanceIcon                                             { float:left;   width:24px; height:100%; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceListV2/distance.png);}
.DeviceDistance                                                 { float:left;   font-weight:bold; width:50px;}
.DistanceUnit                                                   { float:left;   width:40px;}
.DeviceSpeedIcon                                                { float:left;   width:24px; height:100%; background-repeat:no-repeat; background-image: url(/plugins/app25/DeviceListV2/speed.png);}
.DeviceSpeed                                                    { float:left;   font-weight:bold; width:35px;}
.SpeedUnit                                                      { float:left;   width:calc(100% - 353px); width: -moz-calc(100% - 353px); width: -webkit-calc(100% - 353px); }    

.DeviceListContextMenuItem                                      { float: left; margin:5px; height:20px; width: 100%;}
.DeviceListContextMenuItem .dx-icon-check                       { float: left; line-height: 20px;   }
.DeviceListContextMenuItem .ContextMenuItemContent              { float: left; margin-left: 40px;   }
.DeviceListContextMenuItem .ContextMenuItemContent[selected]    { margin-left: 16px; }
.DeviceListContextMenuItem .ContextMenuItemContent[main]        { margin-left: 0px; }

.DeviceListContainer .selectBoxSortGrid                         { float:left; }
.DevicePropertyPopupContentSelectBox                            { float:left;   height:36px; width:77%; top: -5px; left: -5px;}
.DeviceAddPropertyPopupContentButton                            { float:left;  position: relative; height:36px; top: -5px; left: -10px;}
.DeviceEditPropertyPopupContentButton                           { position: relative; height:36px; top: -41px; left: 310px;}
.DevicePropertyPopupContentCancelButton                         { float:right; position: relative; top: 20px; left: 15px;}
.DevicePropertyPopupContentSaveButton                           { float:right; position: relative; top: 20px; left: 30px;}

.DevicePropertyPopup .dx-popup-content > .dx-button             { margin: 0px 0px 20px 5px;}
.DevicePropertyPopup .dx-popup-content                          { padding: 15px;}

.ConnectTruckOrTemsaEnabled {
    position: absolute;
    right: 20px;
    bottom: 8px;
    height: 19px;
    width: 120px;
    padding: 1px 0 0 100px;
    font: bold 12px Segoe UI;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #616161;
    /*background: url(/plugins/app25/DeviceListV2/connectruck_logo.png) no-repeat white;*/
    z-index: 1500;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
}
.ConnectTruckOrTemsaEnabled[type = "ConnetTruck"] {
    background: url(/plugins/app25/DeviceListV2/connectruck_logo.png) no-repeat white;
}
.ConnectTruckOrTemsaEnabled[type = "Temsa"] { 
    background: url(/plugins/app25/DeviceListV2/temsa_logo_map.svg) no-repeat white;
    background-position-y: center;
    padding: 1px 0 0 60px !important;
    background-position-x: 10px;
    line-height: 19px;
}
.vehicleSelectionContainer { float: left; width: 100%; height: 36px; margin: 0 }
.vehicleSelectionContainer input, .vehicleSelectionContainer textarea { font-weight: bold; }

.vehicleShortcutReportsContainer                    { float: left; width: 100%; height: 100%; overflow: hidden; }
.vehicleShortcutReportsToolbar                      { float: left; width: 100%; margin-top: 30px; }
.vehicleShortcutReportsTool                         { float: left; width: 136px; height: 100%; }
.vehicleShortcutReportsTool:not(:first-of-type)     { margin-left: 11px; }
.vehicleShortcutReportsToolIcon                     { float: left; width: 100%; height: 60px; background-position: center center; background-repeat: no-repeat; }
.vehicleShortcutReportsToolText                     { float: left; width: 100%; height: 20px; text-align: center; line-height: 20px; color: #162c42; }
.vehicleShortcutReportsTool[selected="false"]       { cursor: pointer; }
.vehicleShortcutReportsTool[selected="true"]        { cursor: default; }
.vehicleShortcutReportsTool[toolType="distance"] .vehicleShortcutReportsToolIcon                    { background-image: url(/plugins/app25/DeviceShortcutReports/distance.png);}
.vehicleShortcutReportsTool[toolType="distance"][selected="true"] .vehicleShortcutReportsToolIcon   { background-image: url(/plugins/app25/DeviceShortcutReports/distance-selected.png);}
.vehicleShortcutReportsTool[toolType="speed"] .vehicleShortcutReportsToolIcon                       { background-image: url(/plugins/app25/DeviceShortcutReports/speed.png);}
.vehicleShortcutReportsTool[toolType="speed"][selected="true"] .vehicleShortcutReportsToolIcon      { background-image: url(/plugins/app25/DeviceShortcutReports/speed-selected.png);}
.vehicleShortcutReportsTool[toolType="operating"] .vehicleShortcutReportsToolIcon                   { background-image: url(/plugins/app25/DeviceShortcutReports/operating.png);}
.vehicleShortcutReportsTool[toolType="operating"][selected="true"] .vehicleShortcutReportsToolIcon  { background-image: url(/plugins/app25/DeviceShortcutReports/operating-selected.png);}

.vehicleShortcutReportsFilter						    { float: left; 	width: 100%;  -webkit-transition: height 0.5s; -moz-transition: height 0.5s; -o-transition: height 0.5s; transition: height 0.5s; overflow: hidden; margin-top: 15px; }
.vehicleShortcutReportsLine                                 { float: left; width: 100%;     height: 36px; }
.vehicleShortcutReportsLine:not(:first-of-type)	            { margin-top: 10px; }
.vehicleShortcutReportsDateType	                            { float: left; width: 210px;    height: 36px; }
.vehicleShortcutReportsDetailedDate							{ float: left; width: 210px; height: 34px; }
.vehicleShortcutReportsDetailedDate:not(:first-of-type)		{ margin-left: 10px; }
.vehicleShortcutReportsDetailedDateError                    { color: #c70000; }
.vehicleShortcutReportsStartButtonLine                      { margin-top: 20px; float: left; width: 100%;     height: 36px; }
.vehicleShortcutReportsStartButton                          { float:right }
.vehicleShortcutReportsSpeedFilter						    { float: left; 	width: 100%; 	height: 100px; margin-top: 20px; -webkit-transition: height 0.5s; -moz-transition: height 0.5s; -o-transition: height 0.5s; transition: height 0.5s; overflow: hidden; }

.vehicleShortcutReportsFilter .dx-dropdowneditor { margin: 5px;width: -moz-calc(100% - 10px);width: -webkit-calc(100% - 10px);width: calc(100% - 10px);
}
.vehicleShortcutReportsWrapper {
    float: left;
    width: 100%;
    height: calc(100% - 160px);
    height: -webkit-calc(100% - 160px);
    height: -moz-calc(100% - 160px);
}

.reportPopup {
    height: -moz-calc(100%);
    height: -webkit-calc(100%);
    height: calc(100%);
}

.reportWindow .rightToolbar {
    float: left;
    width: 100%;
    height: 50px;
}

.reportGrid {
    float: left;
    width: 100%;
    height: 100%;
}

.reportWindow .rightGridChart {
    float: left;
    width: 100%;
    height: -moz-calc(50% - 110px);
    height: -webkit-calc(50% - 110px);
    height: calc(50% - 110px);
    /*margin-top: 50px;*/
    background-color: #FFFFFF;
}

.reportWindow .rightGridChartWaiter {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: -moz-calc(50% - 20px);
    height: -webkit-calc(50% - 20px);
    height: calc(50% - 110px);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.85);
    background-image: url(/plugins/app25/images/load.gif);
}


.reportGrid .bottomWrapper {
    float: left;
    width: 100%;
    height: 100%;
    margin-top: 30px;
    z-index: 1000;
}

.reportGrid .bottomWrapperCloser {
    float: right;
    margin-top: 50px;
    margin-right: 5px;
}

.reportGrid .runButton {
    float: right;
    width: 120px;
    margin: 20px 20px 0 0;
}

.reportGrid .exportButton {
    width: 36px;
    height: 36px;
    margin: 0 5px;
    border-radius: 5px;
}

    .reportGrid .exportButton[type="0"] {
        background: url(/themes/images/json.png) no-repeat center;
    }

    .reportGrid .exportButton[type="1"] {
        background: url(/themes/images/xml.png) no-repeat center;
    }

    .reportGrid .exportButton[type="2"] {
        background: url(/themes/images/xls.png) no-repeat center;
    }

    .reportGrid .exportButton[type="3"] {
        background: url(/themes/images/xlsx.png) no-repeat center;
    }

    .reportGrid .exportButton[type="4"] {
        background: url(/themes/images/pdf.png) no-repeat center;
    }

    .reportGrid .exportButton[type="5"] {
        background: url(/themes/images/csv.png) no-repeat center;
    }

    .reportGrid .exportButton[type="6"] {
        background: url(/themes/images/chart.png) no-repeat center;
    }

.reportGrid .playButton {
    float: left;
    width: 32px;
    height: 32px;
    margin: 2px 2px;
    background: url(/themes/images/play.png) no-repeat center;
}

.reportGrid .pauseButton {
    float: left;
    width: 32px;
    height: 32px;
    margin: 2px 2px;
    background: url(/themes/images/pause.png) no-repeat center;
}

.reportGrid .stopButton {
    float: left;
    width: 32px;
    height: 32px;
    margin: 2px 2px;
    background: url(/themes/images/stop.png) no-repeat center;
}

.reportGrid .progressBar {
    float: left;
    width: 200px;
    height: 20px;
    margin: 8px 0 0 20px;
    position: relative;
}

    .reportGrid .progressBar .full {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #ddd;
    }

    .reportGrid .progressBar .counter {
        position: absolute;
        height: 100%;
        background: #475867;
    }

.reportGrid .counterBox {
    float: left;
    margin: 5px 0 0 20px;
    font-weight: bold;
    font-size: 13pt;
    white-space: nowrap;
}

/*.reportGrid .dx-datagrid {
    height: 60%;
}*/


/*.reportGrid  .dx-datagrid-rowsview {
    height:570px !important;
}*/


.deviceUserMatchLeft {
    border-right: 1px solid #DCDCDC;
    float: left;
    width: 50%;
    margin-bottom: 15px;
    margin-top: 15px;
    padding-right: 15px;
}

.deviceUserMatchTitle {
    text-align: left;
    font: Bold 16px/21px Segoe UI;
    letter-spacing: -0.32px;
    color: #333333;
    opacity: 1;
    float: left;
    margin-bottom: 9px;
}

.deviceUserMatchDevicesGrid {
    width: 100%;
    height: 385px;
    float: left;
}

.deviceUserMatchDevicesGrid .dx-toolbar {
    float: left;
    width: 344px;
    display: inline-block;
}

.deviceUserMatchDevicesGrid .dx-toolbar-after {
    display: inline !important;
}

.deviceUserMatchDevicesGrid .dx-toolbar-center {
    display: inline !important;
}

.deviceUserMatchDevicesGrid.dx-toolbar-before {
    display: inline !important;
}

.deviceUserMatchDevicesGrid .dx-toolbar-after {
    display: inline !important;
}

.deviceUserMatchDevicesGrid .dx-toolbar .dx-toolbar-after {
    padding-left: 1px;
}

.deviceUserMatchDevicesGrid .dx-toolbar-after {
    left: 0px !important
}

.deviceUserMatchDevicesGrid .dx-toolbar-item {
    display: inline !important;
}


.deviceUserMatchDevicesGrid .dx-datagrid-search-panel {
        float: left;
        margin-left: 0;
        width: 100% !important;
    }

.DeviceUserMatchContainer_AddDevicesButton {
    float: left;
    width: 36px;
    margin-left: 8px;
}

.DeviceUserMatchContainer_RemoveDevicesButton {
    background: url(/plugins/app25/DeviceUserMatch/remove_device_icon.svg) no-repeat center center;
    width: 100%;
    height: 16px;
    cursor: pointer;
}


.deviceUserMatchPassiveRow {
    color: #949494;
}

.deviceUserMatchAddDevicesGrid {
    width: 100%;
    height: 333px;
    float: left;
    margin-bottom: 10px;
}

.deviceUserMatchAddDevicesGrid .dx-toolbar {
        float: left;
        width: 344px;
        display: inline-block;
    }

.deviceUserMatchAddDevicesGrid .dx-toolbar-after {
        display: inline !important;
    }

.deviceUserMatchAddDevicesGrid .dx-toolbar-center {
        display: inline !important;
    }

.deviceUserMatchAddDevicesGrid.dx-toolbar-before {
        display: inline !important;
    }

.deviceUserMatchAddDevicesGrid .dx-toolbar-after {
        display: inline !important;
    }

.deviceUserMatchAddDevicesGrid .dx-toolbar .dx-toolbar-after {
        padding-left: 1px;
    }

.deviceUserMatchAddDevicesGrid .dx-toolbar-after {
        left: 0px !important
    }

.deviceUserMatchAddDevicesGrid .dx-toolbar-item {
        display: inline !important;
    }


.deviceUserMatchAddDevicesGrid .dx-datagrid-search-panel {
        float: left;
        margin-left: 0;
        width: 100% !important;
    }

.deviceUserMatchAddSaveButton {
    width: 139px;
    height: 36px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    opacity: 1;
}

.deviceUserMatchAddCancelButton {
    width: 139px;
    height: 36px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    opacity: 1;
    margin-left: 30px !important;
}

.deviceUserMatchRight {
    float: left;
    width: 50%;
    margin-bottom: 15px;
    margin-top: 15px;
    padding-left: 15px;
}

.deviceUserMatchUserTypeSelector {
    float: left;
    min-height: 36px;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 5px;
    width: 85%;
}

.deviceUserMatchCompanyUsersDiv {
    float: left;
    width: 100%;
}

.deviceUserMatchCompanyUsersGrid {
    width: 100%;
    height: 344px;
    float: left;
}

.deviceUserMatchCompanyUsersGrid .dx-toolbar {
        float: left;
        width: 344px;
        display: inline-block;
}

.deviceUserMatchCompanyUsersGrid .dx-toolbar-after {
        display: inline !important;
}

.deviceUserMatchCompanyUsersGrid .dx-toolbar-center {
        display: inline !important;
}

.deviceUserMatchCompanyUsersGrid.dx-toolbar-before {
        display: inline !important;
}

.deviceUserMatchCompanyUsersGrid .dx-toolbar-after {
        display: inline !important;
}

.deviceUserMatchCompanyUsersGrid .dx-toolbar .dx-toolbar-after {
        padding-left: 1px;
}

.deviceUserMatchCompanyUsersGrid .dx-toolbar-after {
        left: 0px !important
}

.deviceUserMatchCompanyUsersGrid .dx-toolbar-item {
        display: inline !important;
}

.deviceUserMatchCompanyUsersGrid .dx-datagrid-search-panel {
        float: left;
        margin-left: 0;
        width: 100% !important;
}

.deviceUserMatchPassiveSearchBox {
    opacity: 0.5;
}

.DeviceUserMatchContainer_AddCompanyUsersButton {
    float: left;
    width: 36px;
    margin-left: 8px;
}

.deviceUserMatchExternalCompanyUsersDiv {
    float: left;
    border-top: 1px solid #DCDCDC;
}

.deviceUserMatchInfo {
    text-align: left;
    font: normal 14px/19px Segoe UI;
    letter-spacing: -0.28px;
    color: #333333;
    opacity: 1;
    float: left;
    width: 100%;
}

.deviceUserMatchInfoExternalCompany {
    text-align: left;
    font: normal 14px/19px Segoe UI;
    letter-spacing: -0.28px;
    color: #333333;
    opacity: 1;
    float: left;
    width: 100%;
    margin-left:32px;
    margin-top: 10px;
}

.deviceUserMatchInfoField {
    width: 100%;
    margin-top: 10px;
    float: left;
}

.deviceUserMatchInfoIcon {
    width: 29px;
    background: url(/plugins/app25/DeviceUserMatch/info.svg) no-repeat 0px 0px;
    float: left;
    height: 29px;
}

.deviceUserMatchInfoText {
    width: 349px;
    float: left;
    height: 40px;
    text-align: justify;
    font: normal 12px/16px Segoe UI;
    letter-spacing: 0px;
    color: #333333;
    opacity: 0.64;
    margin-left: 3px;
}

.deviceUserMatchShowOldDataCheckBox {
    float: left;
    width: 100%;
    height: 22px;
    margin-bottom: 10px;
    margin-top: 30px;
}

.deviceUserMatchShowOldDataCheckBox .dx-checkbox-text{
    padding-left: 31px !important;
}

.deviceUserMatchUserNameTextBox {
    float: left;
    width: 100%;
    height: 36px;
    margin-bottom: 20px;
    margin-top: 10px;
}

.captchaContiner {
    float: left;
    width: 100%;
    /*display: none;*/
}

.captcha {
    /*display: none;*/
    float: left;
    margin-top: 5px;
}

.refreshCaptcha {
    /*display: none;*/
    width: 19px;
    height: 19px;
    background: transparent url('/plugins/app25/DeviceUserMatch/Icon-refresh.svg') 0% 0% no-repeat padding-box;
    opacity: 1;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    cursor: pointer;
}

.captchaTextBox {
    float: left;
    width: 250px;
    height: 36px;
    opacity: 1;
    margin-left: 10px;
}

.deviceUserMatchDevicesGrid .dx-datagrid-nodata {
    text-align: center;
    font: normal 14px/19px Segoe UI;
    letter-spacing: -0.28px;
    color: #333333;
    opacity: 1;
    width: 215px;
}

.deviceUserMatchCompanyUsersGrid .dx-datagrid-nodata {
    text-align: center;
    font: normal 14px/19px Segoe UI;
    letter-spacing: -0.28px;
    color: #333333;
    opacity: 1;
    width: 215px;
}



.deviceUserMatchCompanyUsersGrid .dx-icon {
    cursor: pointer;
}

.deviceUserMatchDevicesGrid .dx-icon {
    cursor: pointer;
}

.deviceUserMatchButtons {
    text-align: right;
    float: left;
    width: 100%;
    border-top: 1px solid #DDDDDD;
    padding-top: 15px;
}
.deviceUserMatchCancelButton, .deviceUserMatchUnpairButton, .deviceUserMatchMatchButton {
    width: 139px;
    height: 36px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    opacity: 1;
}

.errorMessagePopupIcon {
    background: url(/plugins/app25/DeviceUserMatch/cross_icon.svg) no-repeat;
    opacity: 1;
    height: 30px;
    width: 100%;
    background-position: center;
    margin-bottom: 5px;
}

.errorMessagePopupContent {
    text-align: center;
    font: normal 14px/19px Segoe UI;
    letter-spacing: -0.42px;
    color: #333333;
    opacity: 1;
    border-bottom: 1px solid #DDDDDD;
    padding-bottom: 5px;
    min-height: 55px;
}

.successMessagePopupIcon {
    background: url(/plugins/app25/DeviceUserMatch/check_icon.svg) no-repeat;
    opacity: 1;
    height: 30px;
    width: 100%;
    background-position: center;
    margin-bottom: 10px;
}

.successMessagePopupContent {
    text-align: center;
    font: normal 14px/19px Segoe UI;
    letter-spacing: -0.42px;
    color: #333333;
    opacity: 1;
    border-bottom: 1px solid #DDDDDD;
    padding-bottom: 10px;
}

.approveMessagePopupContent {
    text-align: center;
    font: normal 14px/19px Segoe UI;
    letter-spacing: -0.42px;
    color: #333333;
    opacity: 1;
    width: 100%;
    height: 65px;
    margin-bottom: 13px;
    margin-top: 25px;
    border-bottom: 1px solid #DDDDDD;
}

.messagePopupYesButton {
    width: 90px;
    height: 35px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    opacity: 1;
    margin-left: 45px !important;
}

.messagePopupNoButton {
    width: 90px;
    height: 35px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    opacity: 1;
}

.messagePopupOkButton {
    width: 90px;
    height: 35px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    opacity: 1;
    margin-left: 100px !important;
    margin-top: 12px !important;
}

.deviceUserCrossMappingsLink {
    font-size   : 14px;
    line-height : 30px;
    margin-right: 10px;
    height      : 100%;
    cursor      : pointer;
    color       : #337AB7;
    float       : right;

}

.deviceExternalCompanyDevicesLink {
    font-size: 14px;
    line-height: 30px;
    margin-right: 10px;
    height: 100%;
    cursor: pointer;
    color: #337AB7;
    float: right;
}
.DriverGroupDefinition {
    width: 100%;
    height: 100%;
}

.DriverGroupDefinitionContainer {
    float: left;
    width: 100%;
    height: 100%;
}

.DriverGroupDefinitionEditTreeList {
    float: left;
    width: 100%;
    height: 100%;
}

.DriverGroupDefinitionEditTreeListItem {
    float: left;
    width: 100%;
    height: 100%;
}

.DriverGroupDefinitionEditTreeList .dx-treelist .dx-row > td {
    padding-top: 15px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    padding-bottom: 15px !important;
}

.GroupDefinition_TabContainer {
    float: left;
    width: 100%;
    height: 100%;
}

.GroupDefinition_GroupTabs {
    float: left;
    width: 100%;
    height: 100%;
}

.NodeGroupTabContent {
    float: left;
    width: 100%;
}

.DriverGroupTabContent {
    float: left;
    width: 100%;
}

.dx-icon-custom-style {
    font-size: 24px;
    color: blue;
}

.treeListItemButtonContainer {
    width: 100%;
    float: right;
}

.treeListItemAddContainer {
    float: right;
    margin-right: 7px;
    cursor: pointer;
}
.treeListItemEditContainer {
    float: right;
    margin-right: 7px;
    cursor: pointer;
}
.treeListItemListContainer {
    float: right;
    margin-right: 7px;
    cursor: pointer;
}
.treeListItemDeleteContainer {
    float: right;
    cursor: pointer;
    margin-right: 7px;
}
.DriverGroupDefinitionDriverListContainer {
    width: 100%;
    height: 100%;
}

.DriverGroupDefinitionDriverListGridContainer {
    width: 100%;
    height: 95%;
    float: left;
}

.DriverGroupDefinitionDriverListGrid {
    width: 100%;
    height: 93%;
    float: left;
}


.DriverGroupDefinitionDriverListGridHeader {
    width: 100%;
    float: left;
    height: 7%;
}

.DriverGroupDefinitionDriverListGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
}

.DriverGroupDefinitionDriverListGridHeaderCount {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    text-align: right;
}

.DriverGroupDefinitionDriverListButtonContainer {
    width: 100%;
    float: right;
    height: 5%;
}

.backButton {
    width: 140px;
    height: 40px;
    float: right;
}
.DriverGroupDefinitionEditContainer {
    width: 100%;
    height: 97%;
}

.DriverGroupDefinitionEditGridContainer{
    width: 100%;
    height: 100%;
}

.DriverGroupDefinitionEditSourceGridContainer {
    width: 48%;
    height: 100%;
    float: left;
}

.DriverGroupDefinitionEditTargetGridContainer {
    width: 48%;
    height: 100%;
    float: left;
}

.DriverGroupDefinitionEditSourceGrid{
    width: 100%;
    height: 100%;
    float: left;
}

.DriverGroupDefinitionEditTargetGrid {
    width: 100%;
    height: calc(100% - 71px);
    height: -webkit-calc(100% - 71px);
    height: -moz-calc(100% - 71px);
    float: left;
    margin-top: 10px;
}

.DriverGroupDefinitionEditButtonContainer {
    width: 4%;
    height: 100%;
    float: left;
    padding-left: 13px;
}

.DriverGroupDefinitionEditSourceGridHeader {
    width: 100%;
    float: left;
}

.DriverGroupDefinitionEditTargetGridHeader {
    width: 100%;
    height:40px;
    float: left;
}

.DriverGroupDefinitionEditSourceGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
}

.DriverGroupDefinitionEditSourceGridHeaderCountInfo {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    margin-right: 0px;
    text-align: right;
}

.DriverGroupDefinitionEditTargetGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
}

.DriverGroupDefinitionEditTargetGridHeaderCountInfo {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    margin-right: 0px;
    text-align: right;
}

.DriverGroupDefinitionEditTargetGridNav {
    width: 100%;
    height: 20px;
    float: left;
}

.DriverGroupDefinitionEditGroupName {
    float: left;
    width: 237px;
    height: 36px;
    margin-top: 5px;
}

.DriverGroupDefinitionEditAddButton {
    position: relative;
    top: calc(50% - 56px);
    top: -webkit-calc(50% - 56px);
    top: -moz-calc(50% - 56px);
}

.DriverGroupDefinitionEditRemoveButton {
    position: relative;
    top: calc(50% - 46px);
    top: -webkit-calc(50% - 46px);
    top: -moz-calc(50% - 46px);
}
.DVRCamContainer {
    visibility: hidden;
}

.DVRCamContent {
    height: 100%;
    width: 100%;
}

.DVRCamContentWrapper {
    height: 100%;
    width: 100%;
    position: relative;
}

.DVRCamItem {
    border: 1px solid #cacaca;
    height: 50%;
    width: 50%;
    float: left;
    background-color: #6b6a6a;
    overflow:hidden;
}

.DVRCamItemHeader {
    height: 10%;
    background-color: #DDDDDD;
    position: relative;
    z-index:9999;
}

.DVRCamItemContent {
    height: 90%
}

.DVRCamItemHeaderText {
    position: absolute;
    left: 30px;
    right: 30px;
    text-align: center;
    height: 100%;
    display: table-cell;
    top: 10%;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
}

.DVRCamItemHeaderButton {
    background-size: contain;
    background-repeat: no-repeat;
    right: 5px;
    background-image: url(/ui/reporting/images/closeicon.png);
    height: 54%;
    width: 19px;
    cursor: pointer;
    position: absolute;
    top: 22%;
}

#DVRDeviceList {
    width: 100% !important;
    height: calc( 100% - 40px);
    float:left;
}

#DVRVehicleFilter{
    float:left;
    height : 36px;
    width :100% 
}

.DVRLeftWindow {
    width: 285px;
    height: 100%;
    top: 50px;
    float: left;
    padding: 10px;
}

.DVRCamView {
    width: calc(100% - 285px);
    height: 100%;
    right: 0;
    float: left;
    background-color: #ececec;
    padding: 2px;
}

.DVRPopup .dx-popup-content {
    padding: 0;
}

#DVRFullScreenButton {
    position: absolute;
    margin-top: -53px;
    float: right;
    right: 48px;
    width: 16px;
    height: 16px;
    background-size: cover;
    background-image: url(/plugins/app25/DVRCam/fullscreen.png);
    cursor: pointer;
}

.disabledCam {
    height: 23px;
    width: 23px;
    background-repeat: no-repeat;
    background-size: 23px;
    background-image: url(/plugins/app25/DVRCam/passive.png);
}

.videoItem {
    background-color: black;
    height: 100%;
    width: 100%;
}

.DVRCamContent li.dx-treeview-node.dx-treeview-item-with-checkbox:not(.dx-treeview-node-is-leaf) {
    border-bottom: 1px solid #DDDDDD;
    padding-bottom: 5px;
    margin-top: 5px;
    min-height: 52px;
}

.itemSerialNumberText {
    font-size: 13px;
}

.itemNodeText {
    font-weight: normal;
    font-size: 10px;
    height: 15px;
}

    .itemNodeText .itemNodeTextNodegroup {
        overflow: hidden;
        height: 25px;
    }

    .itemNodeText .itemNodeTextDeviceId {
        float: right;
    }

.dvrItemIcon {
    height: 21px;
    width: 24px;
    background-repeat: no-repeat;
    float: left;
    background-size: contain;
    background-position: center;
    margin-right: 10px;
}

.dvrItemText, .dvritemtext {
    font-size: 13px;
}

.DVRCamContent .dx-treeview-node-is-leaf {
    margin-bottom: 5px;
    margin-top: 5px;
}

.titleCamIcon {
    float: right;
}

    .titleCamIcon img {
        height: 11px;
        margin-right: 3px;
        padding-top: 2px;
    }

.DVRMapFocusButton {
    cursor: pointer;
    float: left;
    height: 100%;
    position: absolute;
    background-image: url(/plugins/app25/DVRCam/map.png);
    background-repeat: no-repeat;
    background-size: 85%;
    background-position: center;
    z-index: 99999999999999;
}

.DVRTreeView_DeviceCount {
    float: right;
    margin-right: 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding-top:5px;
}
.DVRTreeView_RefreshButton {
    float: left;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
}

.fieldAnalysisCursorIcon {
    /*display: none;*/
    /*z-index: -1;*/
    z-index: 9999;
    width:30px;
    height:30px;
    background: url(/plugins/app25/FieldAnalysis/green_field_analysis.svg) no-repeat center;
}

.FieldAnalysisDiplayer {
    width: 30px;
    float: right;
    z-index: 1010;
    display: inline-block;
    margin-right: 20px;
}

.FieldAnalysisDiplayer .buttonFieldAnalysis {
    float: left;
    width: 29px;
    height: 29px;
    margin-bottom: 13px;
    background: url(/plugins/app25/FieldAnalysis/field_analysis_button.png) no-repeat center;
    background-color: #FFFFFF;
    border-radius: 2px;
    opacity: 1;
    cursor: pointer;
    box-shadow: 0px 3px 6px #00000066;
}

.fieldAnalysisDialogContent .dx-popup-title {
    border: none !important;
}

.fieldAnalysisDialogContent .dx-popup-content {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    margin-top: -15px !important;
}

.fieldAnalysisPopup {
    overflow:hidden;
    padding: 0;
    margin: 0;
    margin-top: -15px !important;
}

.fieldAnalysisPopupImage {
    height: 250px;
    width: 100%;
    float: left;
    min-width: 90px;
    margin-bottom: 15px;
    position: relative;
}

.fieldAnalysisPopupText h3 {
    text-align: left;
    font: normal normal bold 16px/21px Segoe UI;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}

.fieldAnalysisPopupText p {
    text-align: left;
    font: normal normal normal 12px/18px Segoe UI;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
}

.fieldAnalysisPopupText ul {
    list-style-type: none;
    padding-left: 0 !important;
}
.fieldAnalysisPopupText li {
    text-align: left;
    font: normal normal normal 12px/16px Segoe UI;
    letter-spacing: 0px;
    color: #333333;
    margin-bottom: 21px;
}



.FieldAnalysisContainerAnimasion {
    width: 30px;
    height: 40px;
    cursor: pointer;
    display: none;
}

.circle {
    border-radius: 50%;
    background-color: #FF9900;
    width: 29px;
    height: 29px;
    position: absolute;
    opacity: 0;
}

.circle {
    border-radius: 50%;
    background-color: #FF9900;
    width: 29px;
    height: 29px;
    position: absolute;
    opacity: 0;
    animation: scaleIn 3s infinite cubic-bezier(.36, .11, .89, .32);
}

@keyframes scaleIn {
    0% {
        transform: scale(.3, .3);
        opacity: 0;
    }

    10% {
        transform: scale(.5, .5);
        opacity: .5;
    }

    20% {
        transform: scale(.7, .7);
        opacity: .5;
    }

    30% {
        transform: scale(1, 1);
        opacity: .5;
    }

    40% {
        transform: scale(1.3, 1.3);
        opacity: .5;
    }

    50% {
        transform: scale(1.5, 1.5);
        opacity: .5;
    }

    60% {
        transform: scale(1.3, 1.3);
        opacity: .5;
    }

    70% {
        transform: scale(1, 1);
        opacity: .5;
    }

    80% {
        transform: scale(.7, .7);
        opacity: .5;
    }

    90% {
        transform: scale(.5, .5);
        opacity: .5;
    }

    100% {
        transform: scale(.3, .3);
        opacity: .5;
    }
}


@-webkit-keyframes fieldAnalysisPopupImageFadeInOut {
    0% {
        opacity: 1;
    }

    17% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    92% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fieldAnalysisPopupImageFadeInOut {
    0% {
        opacity: 1;
    }

    17% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    92% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fieldAnalysisPopupImageFadeInOut {
    0% {
        opacity: 1;
    }

    17% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    92% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fieldAnalysisPopupImageFadeInOut {
    0% {
        opacity: 1;
    }

    17% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    92% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fieldAnalysisPopupImage img {
    position: absolute;
    width:340px
}

.fieldAnalysisPopupImage img {
    -webkit-animation-name: fieldAnalysisPopupImageFadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 8s;
    -moz-animation-name: fieldAnalysisPopupImageFadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 8s;
    -o-animation-name: fieldAnalysisPopupImageFadeInOut;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    -o-animation-duration: 8s;
    animation-name: fieldAnalysisPopupImageFadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 8s;
}

.fieldAnalysisPopupImage img:nth-of-type(1) {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    animation-delay: 6s;
}

.fieldAnalysisPopupImage img:nth-of-type(2) {
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    animation-delay: 4s;
}

.fieldAnalysisPopupImage img:nth-of-type(3) {
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;
}

.fieldAnalysisPopupImage img:nth-of-type(4) {
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -o-animation-delay: 0;
    animation-delay: 0;
}

div[style*='crosshair'] {
    cursor: url(/plugins/app25/FieldAnalysis/cursor_green.cur), crosshair !important
}
.FooterAddressDisplayer
{
    float                   : left;
    height                  : 24px;
}
.FooterAddressDisplayer > .text
{
    float                   : left;
    height                  : 28px;
    vertical-align          : middle;
    margin                  : 6px;
}
.FooterAddressDisplayer > .separator
{
    float                   : left;
    width                   : 1px;
    height                  : 20px;
    margin-top              : 4px;
    margin-bottom           : 4px;
    background-color        : #e9edf1;
}
.FooterAreaMeasure 
{
    float                   : left;
    width                   : 28px;
    height                  : 28px;
    background              : url(/plugins/app25/FooterAreaMeasure/FooterAreaMeasure.png) no-repeat 0 center;
    cursor                  : pointer;
    vertical-align          : middle;
}

.FooterAreaMeasure:hover 
{
    background-position-x   : -28px;
}

.FooterAreaMeasure[on] 
{
    background-position-x   : -28px;
}

.FooterBaseLayerSelector                                            { float: left; width: 28px; height: 100%; background: url(/plugins/app25/FooterBaseLayerSelector/FooterBaseLayerSelector.png) no-repeat 0 center; cursor: pointer; }
.FooterBaseLayerSelector:hover                                      { background-position-x   : -28px; }
.FooterBaseLayerSelector[on]                                        { background-position-x   : -28px; }
.FooterBaseLayerSelectorDialog                                      { float: left; width: 324px; background-color: #FFFFFF; overflow: hidden; }
.FooterBaseLayerSelectorDialog[layers]                              { margin-top: 20px; padding-top: 20px; border-top: solid 3px #ddd; }
.FooterBaseLayerSelectorDialog > .row                               { float: left; width: 100%; height: 98px; margin-top: 8px; }
.FooterBaseLayerSelectorDialog > .row > .cell                       { float: left; width: 98px; height: 98px; margin-left: 8px; font-size: 10px; cursor: pointer; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="gostreet"]       { background: url(/plugins/app25/FooterBaseLayerSelector/gostreet.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="arvento"]        { background: url(/plugins/app25/FooterBaseLayerSelector/arvento.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="gosatellite"]    { background: url(/plugins/app25/FooterBaseLayerSelector/gosatellite.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="gosatelliteh"]   { background: url(/plugins/app25/FooterBaseLayerSelector/gosatelliteh.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="gophysicalh"]    { background: url(/plugins/app25/FooterBaseLayerSelector/gophysicalh.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="osm"]            { background: url(/plugins/app25/FooterBaseLayerSelector/osm.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="osmtr"]          { background: url(/plugins/app25/FooterBaseLayerSelector/osmtr.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="mapquest"]       { background: url(/plugins/app25/FooterBaseLayerSelector/mapquest.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell > .caption            { float: left; width: 100%; height: 18px; line-height: 18px; vertical-align: middle; text-align: center; color: #FFFFFF; background-color: #162C43; margin-top: 80px; }
.FooterBaseLayerSelectorDialog > .row > .cell[selected] > .caption  { background-color: #92BA6F; }

.FooterBaseLayerSelectorDialog > .row > .cell[tag="goapistreet"]    { background: url(/plugins/app25/FooterBaseLayerSelector/gostreet.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="goapisatellite"] { background: url(/plugins/app25/FooterBaseLayerSelector/gosatellite.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="goapisatelliteh"]{ background: url(/plugins/app25/FooterBaseLayerSelector/gosatelliteh.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="goapiphysicalh"] { background: url(/plugins/app25/FooterBaseLayerSelector/gophysicalh.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="goapistreettraffic"]    { background: url(/plugins/app25/FooterBaseLayerSelector/gostreet.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="goapisatellitetraffic"] { background: url(/plugins/app25/FooterBaseLayerSelector/gosatellite.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="goapisatellitehtraffic"]{ background: url(/plugins/app25/FooterBaseLayerSelector/gosatelliteh.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="goapiphysicalhtraffic"] { background: url(/plugins/app25/FooterBaseLayerSelector/gophysicalh.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="goapistreetdark"]    { background: url(/plugins/app25/FooterBaseLayerSelector/gostreet.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="goapistreetnight"]    { background: url(/plugins/app25/FooterBaseLayerSelector/gostreet.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="goapistreetsilver"]    { background: url(/plugins/app25/FooterBaseLayerSelector/gostreet.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="goapistreetaubergine"]    { background: url(/plugins/app25/FooterBaseLayerSelector/gostreet.png) top center no-repeat; }
.FooterBaseLayerSelectorDialog > .row > .cell[tag="goapistreetretro"]    { background: url(/plugins/app25/FooterBaseLayerSelector/gostreet.png) top center no-repeat; }
.FooterCluster
{
    float                   : left;
    width                   : 28px;
    height                  : 28px;
    background              : url(/plugins/app25/FooterCluster/FooterCluster.png) no-repeat 0 center;
    cursor                  : pointer;
}

.FooterCluster:hover
{
    background-position-x   : -28px;
}

.FooterCluster[on]
{
    background-position-x   : -28px;
}
.FooterDeviceCounterDisplayer
{
    float           : left;
    height          : 28px;
    cursor          : pointer;
}

.FooterDeviceCounterDisplayer > .text 
{
    float           : left;
    height          : 28px;
    vertical-align  : middle;
    margin          : 6px;
}
.FooterFilter                                                   { float         : left; width: 85px; height: 28px; cursor: pointer; }
.FooterFilter > .buttonDivisor                                  { width         : 100%; height: 100%; }
.FooterFilter > .buttonDivisor > .buttonToggleFilterPanel       { height        : 16px; width: 80%; border: 1px solid #e9edf1; border-radius: 3px; font-size: 10px; text-align: center; margin: 4px auto;}
.FooterFilter > .separator                                      { float         : left; width: 1px; height: 20px; margin-top: 4px; margin-bottom: 4px; background-color: #e9edf1;}
.FooterFilter  .textEllipsis                                    { white-space   : nowrap; text-overflow: ellipsis; overflow: hidden; }

.FooterFilterPopup 
{
    width: 100%;
    float: left;
    background-color: #FFFFFF;
    overflow: hidden;
    min-height: 170px;
    overflow-x: hidden;
    overflow-y: auto;
}

.FooterFilterTreeBody 
{
    width             : 100%;
    height            : calc(100% - 36px);
    position          : relative;
    -moz-box-sizing   : border-box;
    -webkit-box-sizing: border-box;
    box-sizing        : border-box;
}

.FooterFilterButtonBody 
{
    width             : 100%;
    height            : 36px;
    position          : relative;
    -moz-box-sizing   : border-box;
    -webkit-box-sizing: border-box;
    box-sizing        : border-box;
}

.FooterFilterButton
{
    float           :right;
}

.dx-treeview-item 
{
    cursor : pointer;
}

.group-tree-border-top {
    border-top: 2px solid #C1C1C1
}
.FooterFitDevices
{
    float           : left;
    width           : 28px;
    height          : 28px;
    background      : url(/plugins/app25/FooterFitDevices/FooterFitDevices.png) no-repeat 0 center;
    cursor          : pointer;
    vertical-align  : middle;
}

.FooterFitDevices:hover{
    background-position-x   : -28px;
}


.FooterHand 
{
    float           : left;
    height          : 28px;
    width           : 28px;
    color           : #FFFFFF;
    cursor          : pointer;
    vertical-align  : middle;
    background      : url(/plugins/app25/FooterHand/FooterHand.png) no-repeat 0 center;
}


.FooterHand:hover 
{
    background-position-x   : -28px;
}

.FooterHand[on] 
{
    background-position-x   : -28px;
}
.FooterLineMeasure {
    float                   : left;
    width                   : 28px;
    height                  : 28px;
    background              : url(/plugins/app25/FooterLineMeasure/FooterLineMeasure.png) no-repeat 0 center;
    cursor                  : pointer;
    vertical-align          : middle;
    text-align              : center;
}

.FooterLineMeasure:hover
{
    background-position-x   : -28px;
}


.FooterLineMeasure[on] 
{
    background-position-x   : -28px;
}

.FooterLineMeasure > .separator 
{
    float                   : left;
    width                   : 1px;
    height                  : 20px;
    margin-top              : 4px;
    margin-bottom           : 4px;
    background-color        : #e9edf1;
}
.FooterPositionDisplayer              { float: left; height: 28px; cursor: pointer; }
.FooterPositionDisplayer > .text      { float: left; height: 28px; vertical-align: middle; margin: 6px;}
.FooterPositionDisplayer > .separator { float: left; width: 1px; height: 20px; margin-top: 4px; margin-bottom: 4px; background-color: #e9edf1; }

.FooterSplitter
{
    float           : left;
    height          : 28px;
    color           : #FFFFFF;
}
.FooterSplitter > .button
{
    float                   : left;
    width                   : 28px;
    height                  : 28px;
    background-position-y   : center;
    cursor                  : pointer;
}
.FooterSplitter > .button[type="split"][deactive="false"]
{
    background-image        : url(/plugins/app25/FooterSplitter/FooterSplit.png);
    background-position-x   : 0;
}
.FooterSplitter > .button[type="split"][deactive="false"]:hover
{
    background-image        : url(/plugins/app25/FooterSplitter/FooterSplit.png);
    background-position-x   : -28px;
}

.FooterSplitter > .button[type="split"][deactive="true"]
{
    background-image        : url(/plugins/app25/FooterSplitter/FooterSplit.png);
    background-position-x   : -56px;
    cursor                  : default;
}
.FooterSplitter > .button[type="merge"][deactive="false"]
{
    background-image        : url(/plugins/app25/FooterSplitter/FooterMerge.png);
    background-position-x   : 0;
}

.FooterSplitter > .button[type="merge"][deactive="false"]:hover
{
    background-image        : url(/plugins/app25/FooterSplitter/FooterMerge.png);
    background-position-x   : -28px;
}

.FooterSplitter > .button[type="merge"][deactive="true"]
{
    background-image        : url(/plugins/app25/FooterSplitter/FooterMerge.png);
    background-position-x   : -56px;
    cursor                  : default;
}

.FooterSplitter > .separator 
{
    float                   : left;
    width                   : 1px;
    height                  : 20px;
    margin-top              : 4px;
    margin-bottom           : 4px;
    background-color        : #e9edf1;
}  

.FooterStartup 
{
    float                   : left;
    width                   : 28px;
    height                  : 28px;
    background              : url(/plugins/app25/FooterStartup/FooterStartup.png) no-repeat 0 center;
    cursor                  : pointer;
    vertical-align          : middle;
    text-align              : center;
}

.FooterStartup:hover 
{
    background-position-x   : -28px;
}

.FooterStartup[on] 
{
    background-position-x   : -28px;
}

.FooterStartup > .separator 
{
    float                   : left;
    width                   : 1px;
    height                  : 20px;
    margin-top              : 4px;
    margin-bottom           : 4px;
    background-color        : #e9edf1;
}

.FooterSaveStartupMessage 
{
    float                   : left;
    height                  : 54px;
    width                   : 100%;
}

.FooterSaveStartupSaveButton 
{
    float                   : right;
}

.FooterSaveStartupCancelButton 
{
    float                   : right;
}

.SaveStartupOptions .dx-popup-content > .dx-button 
{
    margin                  : 20px 0px 20px 5px;
}

.FooterTraffic 
{
    float                   : left;
    width                   : 28px;
    height                  : 28px;
    background              : url(/plugins/app25/FooterTraffic/FooterTraffic.png) no-repeat 0 center;
    cursor                  : pointer;
}

.FooterTraffic:hover
{
    background-position-x   : -28px;
}

.FooterTraffic[on]
{
    background-position-x   : -28px;
}

.FooterTraffic > .separator 
{
    float                   : left;
    width                   : 1px;
    height                  : 20px;
    margin-top              : 4px;
    margin-bottom           : 4px;
    background-color        : #e9edf1;
}
.FooterZoomDisplayer 
{
    float                   : left;
    height                  : 24px;
    cursor                  : pointer;
}

.FooterZoomDisplayer > .text 
{
    float                   : left;
    height                  : 28px;
    vertical-align          : middle;
    margin                  : 6px;

}

.FooterZoomDisplayer > .separator 
{
    float                   : left;
    width                   : 1px;
    height                  : 20px;
    margin-top              : 4px;
    margin-bottom           : 4px;
    background-color        : #e9edf1;
}
.FooterZoomInOutGeoLocDisplayer {
    width: 30px;
    float: right;
    margin-bottom: 24px;
    height: 100px;
    z-index: 1010;
    display: inline-block;
    margin-right: 20px;
}

/* Dynamic positioning for southFooterRight based on ETB authorization */
.southFooterRight {
    bottom: 25px !important;
}

.southFooterRight.with-custom-group {
    bottom: 67px !important;
}

    .FooterZoomInOutGeoLocDisplayer > .buttonGeoloc {
        float: left;
        width: 29px;
        height: 29px;
        margin-bottom: 13px;
        background: url('/plugins/app25/FooterZoomInOutGeoLoc/location.png') no-repeat center;
        background-color: #FFFFFF;
        border-radius: 2px;
        opacity: 1;
        cursor: pointer;
        box-shadow: 0px 3px 6px #00000066;
    }

    .FooterZoomInOutGeoLocDisplayer > .buttonOut {
        float: left;
        width: 29px;
        height: 29px;
        background: url('/plugins/app25/FooterZoomInOutGeoLoc/zoom_out.png') no-repeat center;
        background-color: #FFFFFF;
        cursor: pointer;
        border-radius: 0px 0px 2px 2px;
        box-shadow: 0px 3px 6px #00000066;
    }

    .FooterZoomInOutGeoLocDisplayer > .buttonCustomGroupFilter {
        float: left;
        width: 29px;
        height: 29px;
        margin-bottom: 13px;
        background-color: #FFFFFF;
        border-radius: 2px;
        cursor: pointer;
        box-shadow: 0px 3px 6px #00000066;
        text-align: center;
        line-height: 29px;
        font-size: 11px;
        font-weight: bold;
        color: #666666;
        transition: all 0.3s ease;
        user-select: none;
        display: none; /* Hidden by default until authorization check */
    }

    .FooterZoomInOutGeoLocDisplayer > .buttonCustomGroupFilter[on="on"] {
        background-color: #4CAF50;
        color: #FFFFFF;
    }

    .FooterZoomInOutGeoLocDisplayer > .buttonCustomGroupFilter[on="off"] {
        background-color: #FFFFFF;
        color: #666666;
    }

    .FooterZoomInOutGeoLocDisplayer > .buttonCustomGroupFilter:hover {
        opacity: 0.8;
    }

    .FooterZoomInOutGeoLocDisplayer > .buttonCustomGroupFilter:disabled,
    .FooterZoomInOutGeoLocDisplayer > .buttonCustomGroupFilter[disabled="disabled"] {
        opacity: 0.5;
        cursor: not-allowed;
        background-color: #F0F0F0;
        color: #999999;
    }

    .FooterZoomInOutGeoLocDisplayer > .buttonIn {
        float: left;
        width: 29px;
        height: 29px;
        background: url('/plugins/app25/FooterZoomInOutGeoLoc/zoom_in.png') no-repeat center;
        background-color: #FFFFFF;
        border-radius: 2px 2px 0px 0px;
        cursor: pointer;
        box-shadow: 0px 3px 6px #00000066;
    }
.groupsTreeOuterContainer       { float: left; width: 100%; height: 100%; overflow: hidden; }
.groupsTreeTools                { float: left; width: 100%; height: 36px; }
.groupsTreeDisplayType          { float: left; width: 142px; height: 36px; }
/*.groupsTreeSearcher             { float: left; width: 180px; height: 36px; margin-left: 5px; }*/

.groupsTreeSearcher             { float: left; width: calc(100% - (142px + 5px)); width: -webkit-calc(100% - (142px + 5px)); width: -moz-calc(100% - (142px + 5px)); height: 36px; margin-left: 5px; }
/*.GroupsTreeEdit                 { float: left; width: calc(100% - (142px + 180px + 10px)); margin-left: 5px; }*/
.VehicleGroupDefinitionEdit     { height: 500px; width :500px;}
.groupsTreeContainer            { float: left; width: 100%; height: calc(100% - 96px); height: -webkit-calc(100% - 96px); overflow-x: hidden; overflow-y: auto; margin-top: 10px;}
.groupsTreeBody                 { float: left; width: 100%; display: inline-block; }
.groupsTreeBottomTools          { float: left; width: 100%; height: 40px; margin-top: 10px;}
.groupsTreeSwitch               { float: right; margin-top:8px; }
.groupsTreeSwitchCaption        { float: right; line-height: 24px; margin-right: 10px; vertical-align: middle; margin-top:8px; }
.groupsTreeApply                { float: right; width: 142px; margin-top: 2px; }
.GroupsTreeEdit {
    float: left;
    width: calc(100% - (142px + 5px));
    width: -webkit-calc(100% - (142px + 5px));
    width: -moz-calc(100% - (142px + 5px));
    margin-top: 2px;
}
.AAPI-ExTreeNodeText            { cursor:pointer; }
.MapPOIPanel {
    position: relative;
    height: 100%;
}

.ineligible {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#mapPOIPanelContainer {
    height: 100%;
}

#mapPOIPanelTabSelector {
    display: flex;
    height: 39px;
}

.mapPOIPanelTabInner {
    margin: 0 auto;
    padding: 10px 0 10px 20px;
    display: table;
    border-bottom: 2px solid #ffffff00;
    background-repeat: no-repeat;
    background-position: 0;
    font-size: 14px;
    color: #d33434;
}

.mapPOIPanelTabButton {
    cursor: pointer;
    opacity: 0.5;
    width: 50%;
    margin: 0 5%;
    overflow: hidden;
    white-space: nowrap;
}

    .mapPOIPanelTabButton.mapPOIPanelTabButtonSelected {
        font-weight: 600;
        opacity: 1;
        border-bottom: 2px solid #FF6600;
    }

    .mapPOIPanelTabButton[data-content="mapPOIcreate"] .mapPOIPanelTabInner {
        background-image: url(/plugins/app25/MapPOIPanel/Images/mapPOIcreate.svg);
    }

    .mapPOIPanelTabButton[data-content="mapPOIlist"] .mapPOIPanelTabInner {
        /*background-image: url(/plugins/app25/MapPOIPanel/Images/mapPOIlist.svg);*/
    }

#mapPOIPanelTabContentContainer {
    position: absolute;
    top: 41px;
    bottom: 0;
    left: 0;
    right: 0;
}

.mapPOIPanelTabContent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

    .mapPOIPanelTabContent[mapPOIcreate] {
        display: none;
    }

.mapPOIPanelInnerContent {
    position: absolute;
    bottom: 0;
    top: 10px;
    left: 0;
    box-sizing: border-box;
    right: 0;
    /*overflow-y: auto;*/
}

.mapPOIPanelSeperator {
    height: 1px;
    background-color: #DCDCDC;
    box-shadow: 0px 1px 3px #DCDCDC;
}

/* MapPOI Create */

.mapPOIPanelScrollView {
    overflow-y: auto;
    position: absolute;
    top: 0;
    bottom: 60px;
    left: 0;
    right: 0;
    padding: 20px 10px;
    box-sizing: border-box;
}

.mapPOIFormContainer {
    position: absolute;
    padding: 0 10px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

    .mapPOIFormContainer table {
        width: 100%;
        border-spacing: 0;
    }

        .mapPOIFormContainer table td {
            padding-top: 8px;
            padding-bottom: 8px;
            box-sizing: border-box;
        }

.mapPOIPanelInnerContent
.mapPOIFormContainer table td.mapPOIPanelFormHeader:first-child {
    width: 100px;
    width: 20%;
}

.mapPOIPanelNameAlert {
    color: #ff0e0e;
    font-size: 11px;
    font-weight: bold;
    position: absolute;
    display: none
}

.mapPOIPanelFormHeader {
    text-align: right;
    font-weight: bold;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 73px;
    text-overflow: ellipsis;
}

.mapPOISelectedCoordinates {
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    height: 18.5px;
}

.mapPOIPanelCreateButtons {
    left: 0;
    right: 0;
    padding: 15px 10px 5px;
    position: absolute;
    box-sizing: inherit;
    bottom: 0;
    background-color: white;
    border-top: 1px solid #ddd;
}

.mapPOIIconButton {
    box-sizing: content-box;
}

#mapPOIPanelSaveButton {
    float: right;
}

.iconPopupContent {
    display: none;
}

.MapPOIGroupDefinitionEditContainer .dx-datagrid-headers .dx-datagrid-table .dx-row > td:not(:first-child) {
    text-align: left !important;
}


/* ICON POPUP */

.dx-popup-content .iconPopupContent {
    display: block;
    position: absolute;
    top: 55px;
    bottom: 0;
    left: 0;
    right: 0;
}

.iconPopupFooter {
    border-top: 1px solid #DCDCDC;
    position: absolute;
    bottom: 0;
    padding: 15px 25px;
    width: 100%;
    text-align: right;
}

.iconPopupTabButtonContainer {
    display: inline-flex;
}

.iconPopupTabButton {
    color: #caf083;
    padding: 5px 10px;
    text-align: center;
    margin-right: 10px;
}

    .iconPopupTabButton:not(.iconPopupSelectedTabButton) {
        cursor: pointer;
    }

.iconPopupSelectedTabButton {
    color: #79B110;
    border-bottom: 2px solid #79B110;
}

.iconPopupHeader {
    padding: 0 25px;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
}

.iconPopupIconList {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 100px;
    top: 40px;
    overflow: hidden;
}

.iconPageChanger {
    height: 36px;
    bottom: 65px;
    position: absolute;
    left: 0;
    right: 0;
    padding: 0 25px;
    text-align: right;
    padding-top: 5px;
}

    .iconPageChanger div {
        padding: 0 !important;
    }



.iconSelectionBox {
    float: left;
    border: 1px solid #f5f5f5;
    padding: 3px;
}

    .iconSelectionBox:not(.iconSelectedBox):hover {
        cursor: pointer;
        background-color: #ececec;
    }

.iconSelectedBox {
    border: 2px solid #1ABEF2;
    padding: 2px;
}

.iconBoxContent {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    margin: auto;
}

.iconPopupPageContainer {
    position: relative;
    background-color: antiquewhite;
}

.iconPopupPage {
    position: absolute;
    left: 0;
}

.mapPOIIconPreview {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 35px;
    width: 35px;
    float: right;
    margin-right: 10px;
}

.iconPopupActionButtonContainer {
    position: absolute;
    right: 25px;
    top: 0;
    display: inline-flex;
    height: 100%;
}

    .iconPopupActionButtonContainer div {
        padding: 0 !important;
        margin: auto 0;
    }

.iconPopupSeperator {
    width: 1px;
    background-color: #DCDCDC;
    margin: 0px 15px !important;
    height: 90%;
}

/*mapPOI LIST*/

.mapPOIPanelListHeaderRow {
    display: flex;
    position: relative;
    margin-bottom: 10px;
    height: 36px;
}

#mapPOIPanelListContextMenu {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    z-index: 999;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding: 5px 0;
}

.mapPOIPanelContextMenuItem {
    height: 36px;
    padding: 5px 13px;
    min-width: 120px;
}

    .mapPOIPanelContextMenuItem:hover {
        background-color: #ddd;
        cursor: pointer;
    }

#mapPOIPanelCircleSwitch {
    margin-right: 5px;
}

.mapPOIPanelContextMenuItemText {
    vertical-align: middle;
    display: table-cell;
    height: 36px;
    font-size: 14px;
}

.mapPOIPanelListHeader {
    padding: 0 10px;
}

.mapPOIPanelButtonContainerSeperator {
    background-color: #DCDCDC;
    width: 1px;
    /*    height: 36px;*/
    margin: 0 3px;
}

.mapPOIPanelButtonContainer {
    display: inline-flex;
    position: absolute;
    right: 0;
}

    .mapPOIPanelButtonContainer .dx-icon {
        font-size: 22px;
        position: absolute;
        height: 22px;
        width: 22px;
        margin: auto;
        left: 0;
        right: 0;
        line-height: 23px;
    }

    .mapPOIPanelButtonContainer .dx-button-content {
        height: 36px;
        width: 36px;
        position: relative;
    }

#mapPOIPanelListGroupButton {
    position: absolute;
    height: 36px;
    padding: 3px 10px 0;
    width: 50%;
    background-color: #79B110;
    color: white;
}

#mapPOIPanelListGroupSelectionBox {
    width: 100%;
}

/* GROUP TREE VIEW */

.mapPOIListGroupTreeView .dx-treeview-item-with-checkbox .dx-checkbox {
    top: 14px;
    bottom: 0;
    left: 28px;
}

.mapPOIListGroupTreeView .dx-treeview-node {
    padding-left: 3px;
    border-left: 6px solid #79B110;
}

.mapPOIListGroupTreeView .dx-treeview-item-with-checkbox .dx-treeview-item {
    height: 52px;
    padding-top: 13px;
    padding-left: 61px;
}

.mapPOIListGroupTreeView .dx-treeview-toggle-item-visibility {
    top: 10px;
    left: 5px;
}

.mapPOIListGroupTreeView li.dx-treeview-node dx-treeview-item-with-checkbox {
}

.mapPOIListGroupBoxPopup {
    padding: 10px 0;
    max-height: 400px !important;
}

.mapPOIListGroupTreeView .dx-treeview-select-all-item {
    padding: 9px 0 11px 34px;
    margin: 0;
}

.mapPOIListGroupTreeView .dx-searchbox {
    margin: 0 10px 10px 10px;
}

.mapPOIPanelListContainer {
    padding: 0 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 177px;
    border-top: 1px solid #dcdcdc;
}

.mapPOIPanelListScroolView {
    /*overflow-y: scroll;*/
}

/* checkBox */

.mapPOIPanelListSelectAll {
    height: 35px;
    width: 100%;
    position: absolute;
    margin-left: 10px;
}

input[type=checkbox].mapPOIPanelListItemCheckBoxSelectAll + .mapPOIPanelListItemName {
    font-weight: 500;
}

input[type=checkbox].mapPOIPanelListItemCheckBoxSelectAll,
input[type=checkbox].mapPOIPanelListItemCheckBox {
    display: none;
}

    input[type=checkbox].mapPOIPanelListItemCheckBoxSelectAll + .mapPOIPanelListItemName,
    input[type=checkbox].mapPOIPanelListItemCheckBox + .mapPOIPanelListItemName {
        padding-left: 35px;
        height: 22px;
        top: 0;
        bottom: 0;
        left: 10px;
        right: 71px;
        margin: auto 0;
        position: absolute;
        display: inline-block;
        line-height: 22px;
        background-repeat: no-repeat;
        background-position: 0 0;
        vertical-align: middle;
        cursor: pointer;
    }

    input[type=checkbox].mapPOIPanelListItemCheckBoxSelectAll:checked + .mapPOIPanelListItemName,
    input[type=checkbox].mapPOIPanelListItemCheckBox:checked + .mapPOIPanelListItemName {
        background-position: 0 -22px;
    }

.mapPOIPanelListItemName {
    background-image: url(/plugins/app25/MapPOIPanel/Images/checkbox.png);
    background-size: 22px;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* checkBox end */
.mapPOIPanelListItem {
    padding: 0 10px;
}

.mapPOIPanelListItemShortView {
    position: relative;
    height: 52px;
}

.mapPOIPanelListItemIcon {
    height: 32px;
    width: 32px;
    background-image: url(/ArventoWebExternalFiles/Map/images/poiicons/set001/SmallBuilding.png);
    background-size: contain;
    right: 33px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-repeat: no-repeat;
    background-position: center;
}

.mapPOIPanelListExpandButton {
    height: 25px;
    width: 25px;
    background-image: url(/plugins/app25/MapPOIPanel/Images/arrow.png);
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    cursor: pointer;
    right: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    transform: rotate( -90deg);
}

.mapPOIPanelListItem[opened] .mapPOIPanelListExpandButton {
    transform: rotate(0deg);
}

.mapPOIGroupItem {
    display: flex;
    justify-content: space-between;
    padding-top: 2px;
}

.mapPOIGroupItemCount {
    padding: 0 10px;
}

.mapPOIGroupItemName {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mapPOIPanelMapPOIList {
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
}

    .mapPOIPanelMapPOIList .dx-list-item {
        border: none !important;
    }

        .mapPOIPanelMapPOIList .dx-list-item:nth-child(2n) {
            background-color: #f5f5f5;
        }

    .mapPOIPanelMapPOIList .dx-list-item-content {
        padding: 0 !important;
    }

    .mapPOIPanelMapPOIList .dx-list .dx-empty-message, .dx-list-item-content {
        border-top: none !important;
    }

    .mapPOIPanelMapPOIList .dx-empty-message {
        text-align: center;
    }

.mapPOIPanelListItemDetailedView {
    font-size: 12px;
    white-space: initial;
    padding: 0 5px 10px 44px;
    display: none;
}

    .mapPOIPanelListItemDetailedView > div {
        white-space: initial;
        margin-bottom: 6px;
    }

.mapPOIPanelListItemFlexRow {
    display: flex;
    justify-content: stretch;
}

.mapPOIPanelListItemDetailedView .mapPOIPanelButtonContainerSeperator {
    margin: 0 15px;
}



.mapPOIPanelListItemView, .mapPOIPanelListItemHistory, .mapPOIPanelListItemFavorite {
    color: #A3A3A3;
    font-size: 10px;
    background-size: 17px;
    padding-right: 24px;
    background-position: right;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 17px;
    line-height: 17px;
}

.mapPOIPanelListItemView {
    background-image: url(/plugins/app25/MapPOIPanel/Images/eye_on.svg);
}

.mapPOIPanelListItem[hasgeometry="false"] .mapPOIPanelListItemView {
    background-image: url(/plugins/app25/MapPOIPanel/Images/eye_off.svg);
}

.mapPOIPanelListItemHistory {
    background-image: url(/plugins/app25/MapPOIPanel/Images/history.svg);
}

.mapPOIPanelListItemFavorite {
    background-image: url(/plugins/app25/MapPOIPanel/Images/favorite.svg);
    padding: 0;
    width: 17px;
    margin-top: -1px;
}

.mapPOIPanelListItem[infavorites="true"] .mapPOIPanelListItemFavorite {
    background-image: url(/plugins/app25/MapPOIPanel/Images/favorite_selected.svg);
}


.mapPOIPanelListItem[opened] .mapPOIPanelListItemDetailedView {
    display: block;
    cursor: default;
}

.mapPOIPanelListContainer .mapPOIPanelListItemLocationRow {
    cursor: pointer;
}

.mapPOIPanelListItemLocation, .mapPOIIconType1, .mapPOIIconType2 {
    background-image: url(/plugins/app25/MapPOIPanel/Images/circle.svg);
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: left;
    padding-left: 20px;
}

.mapPOIPanelListItemLocation {
    background-image: url(/plugins/app25/MapPOIPanel/Images/coordinates.svg);
}

.mapPOIIconType1 {
    background-image: url(/plugins/app25/MapPOIPanel/Images/circle.svg);
}

.mapPOIIconType2 {
    background-image: url(/plugins/app25/MapPOIPanel/Images/polygon.svg);
    width: 14px;
    overflow: hidden;
    box-sizing: border-box;
}

/* HISTORY POPUP */

.mapPOIPanelHistoryContent {
    padding-top: 5px;
}

.mapPOIPanelHistoryHeader {
    display: flex;
    /*margin-bottom: 15px;*/
    /*margin-top: 5px;*/
    justify-content: space-between;
    z-index: 99;
    position: absolute;
    padding: 0px 17px;
}

.mapPOIPanelHistoryFilter {
    float: left;
    display: flex;
}

    .mapPOIPanelHistoryFilter > div {
        margin-right: 10px;
    }

#mapPOIPanelHistoryExcelButton {
    border: 1px solid #dcdcdc;
    border-radius: 4px;
}

    #mapPOIPanelHistoryExcelButton .dx-button-content {
        padding: 4px !important;
        width: 34px;
        height: 34px;
    }

    #mapPOIPanelHistoryExcelButton img.dx-icon {
        width: 100%;
        height: 100%;
    }

#mapPOIPanelHistoryList {
    height: 100%;
}

    #mapPOIPanelHistoryList .dx-datagrid-header-panel {
        border-bottom: none !important;
        padding: 0 15px;
    }

.mapPOIPanelHistoryLoadingBar {
    float: left;
    display: none;
    height: 34px;
    align-items: center;
}

    .mapPOIPanelHistoryLoadingBar > div {
        margin-right: 10px;
    }

.mapPOIPanelHistoryLoadingOuter {
    height: 24px;
    border: 1px solid #dcdcdc;
    width: 350px;
}

.mapPOIPanelHistoryLoadingInner {
    height: 100%;
    background-color: #337ab7;
    width: 0%;
}

#mapPOIPanelHistoryList .dx-datagrid .dx-row > td {
    padding: 0 20px;
    line-height: 54px;
}

#mapPOIPanelHistoryList .dx-datagrid-headers {
    margin-top: 5px;
}

    #mapPOIPanelHistoryList .dx-datagrid-headers .dx-datagrid-content {
        display: flex;
        align-items: center;
        height: 37px;
    }

.mapPOIPanelHistoryContent {
    height: 100%;
}

    .mapPOIPanelHistoryContent .dx-icon-export-excel-button {
        background-image: url(/themes/images/xlsx.png);
    }

        .mapPOIPanelHistoryContent .dx-icon-export-excel-button::before {
            content: none;
        }


/*mapPOI POPUP*/


.mapPOIPanelNewGroupPopup {
    float: left;
    width: 100%;
    height: 100%;
}


    .mapPOIPanelNewGroupPopup .dx-treelist .dx-row > td {
        padding-top: 15px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
        padding-bottom: 15px !important;
    }

.mapPOIRadiusIconGrid {
    width: 75%;
    background: url(/plugins/app25/MapPOIPanel/Images/circle.svg);
    background-position: initial;
    background-repeat: no-repeat;
    background-size: 20px;
    padding: 0px 30px 3px;
    margin: 3px auto 0;
}

/*.mapPOIRadiusInfoGrid {
    float: left;
    line-height: 26px;
}*/

.mapPOIGroupRowMainDiv {
}

.mapPOIGroupRowColorDiv {
    width: 6px;
    background: transparent;
    height: 92px;
    float: left;
}

.mapPOIGroupRowRightDiv {
    padding-left: 0;
}



.mapPOIGroupTree .dx-scrollable-content ul > li > div:first-child + div {
    padding-left: 0;
    top: 20px;
}

.mapPOIGroupTree .dx-scrollable-content ul > li > div:first-child {
    padding: 0;
}

.mapPOIGroupTree > .dx-scrollable {
    left: -20px;
    position: relative;
}

.mapPOIGroupDefinitionEditSourceGrid {
    width: 100%;
    float: left;
    position: absolute;
    bottom: 0;
    top: 85px;
}

.mapPOIGroupDefinitionEditTargetGrid {
    width: 100%;
    float: left;
    bottom: 0;
    position: absolute;
    top: 165px;
}

.mapPOIGroupInputContainer {
    display: inline-flex;
}

.mapPOIGroupDefinitionEditSourceGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
}

.mapPOIGroupDefinitionEditTargetGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
}

.mapPOIGroupDefinitionEditSourceGridHeaderCountInfo {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    margin-right: 0px;
    text-align: right;
}

.mapPOIGroupDefinitionEditTargetGridHeaderCountInfo {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    margin-right: 0px;
    text-align: right;
}

.mapPOIGroupDefinitionEditAddButton {
    position: relative;
    top: calc(50% - 56px);
    top: -webkit-calc(50% - 56px);
    top: -moz-calc(50% - 56px);
}

.mapPOIGroupDefinitionEditRemoveButton {
    position: relative;
    top: calc(50% - 46px);
    top: -webkit-calc(50% - 46px);
    top: -moz-calc(50% - 46px);
}

.mapPOIGroupDefinitionEditTargetGridNav {
    max-height: 30px;
    font-weight: 600;
    font-size: 11px;
    text-overflow: ellipsis;
    word-break: break-all;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 3px;
    overflow: hidden;
}

.mapPOIGroupDefinitionEditGroupName {
    float: left;
    height: 36px;
    width: 100%;
}

.mapPOIGroupColorMainDiv {
    height: 50px;
    width: 100%;
    float: left;
    padding-top: 5px;
}

.mapPOIGroupInputTable {
    border-spacing: 0 7px;
}

    .mapPOIGroupInputTable tr {
        margin: 5px;
    }

.mapPOIGroupInputItemTitle {
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
}

.mapPOIGroupInputTable td.mapPOIGroupInputItemTitle {
    padding-right: 10px;
}

.mapPOIGroupInputContainerRight .mapPOIGroupInputItemTitle {
    text-align: left;
    margin-bottom: 15px;
}

.mapPOIGroupInputContainerRight {
    padding-left: 30px;
    box-sizing: border-box;
    margin-top: -13px;
}

.mapPOIGroupColorContainer {
    float: left;
    padding: 5px 2.5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    display: inline-flex;
}

.mapPOIGroupColorPicker {
    width: 26px;
    height: 26px;
    float: left;
    margin: 0 5px;
    border-radius: 3px;
    cursor: pointer;
}

    .mapPOIGroupColorPicker:not(.SelectedMapPOIGroupColorPicker):hover {
        border: 2px solid #ddd;
    }

.SelectedMapPOIGroupColorPicker {
    border: 2px solid #337ab7;
    cursor: default;
}

.mapPOIGroupDefinitionUserListGridContainer {
    width: 100%;
    height: 95%;
    float: left;
}

.mapPOIGroupDefinitionUserListGridHeader {
    width: 100%;
    float: left;
    height: 5%;
}

.mapPOIGroupDefinitionUserListGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 10px;
}

.mapPOIGroupDefinitionUserListGridHeaderCount {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 10px;
    text-align: right;
}

.mapPOIGroupDefinitionUserListGrid {
    width: 100%;
    height: 95%;
    float: left;
}

.mapPOIGroupDefinitionUserListButtonContainer {
    width: 100%;
    float: right;
    height: 5%;
}

.mapPOIGroupDefinitionEditContainer {
    width: 100%;
    height: 100%;
}

.mapPOIGroupDefinitionEditGridContainer {
    width: 100%;
    height: 100%;
    display: flex;
}

.mapPOIGroupDefinitionEditSourceGridContainer {
    width: 50%;
    height: 100%;
    position: relative;
}

.mapPOIGroupDefinitionEditSourceGridHeader {
    width: 100%;
    float: left;
    height: 40px;
}

.mapPOIGroupDefinitionEditButtonContainer {
    height: 100%;
    text-align: center;
}

.mapPOIGroupDefinitionEditTargetGridContainer {
    width: 50%;
    height: 100%;
    position: relative;
}

.mapPOIGroupDefinitionEditTargetGridHeader {
    width: 100%;
    height: 40px;
    float: left;
}

.mapPOIGroupTree > .dx-scrollable > .dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-content > .dx-empty-message {
    padding-top: 50px;
    padding-left: 50px
}

.mapPOIPolygonIcon {
    width: 75%;
    height: 26px;
    position: relative;
    top: 50%;
    background: url(/plugins/app25/MapPOIPanel/Images/polygon.svg);
    background-position: center center;
    background-repeat: no-repeat;
    filter: grayscale(1);
    background-position: initial;
    background-repeat: no-repeat;
    background-size: 25px;
    padding: 0 30px 0px;
    margin: 3px auto 0;
}

.mapPOIGroupDefinitionTreeLineLabelTextNonGroup {
    width: 100%;
    height: 30px;
    font-weight: bold;
    padding-left: 35px;
}

#mapPOIPanelListContainer .mapPOIPlugin_GridContainer .dx-treeview-node-container:first-child > .dx-treeview-node {
    padding-left: 0;
}

.mapPOIGroupDefinitionEditGridContainer .dx-datagrid-table tr {
    height: 40px;
}

.mapPOIGroupDefinitionEditGridContainer .dx-datagrid-table td {
    vertical-align: middle !important;
}

.mapPOIGroupDefinitionEditContainer .dx-datagrid-headers .dx-datagrid-table .dx-row > td:not(:first-child) {
    text-align: left !important;
}

.mapPOIGroupDefinitionEditTreeListItem {
    position: absolute;
    bottom: 25px;
    top: 85px;
    left: 25px;
    right: 25px;
}

.mapPOIPanelNewGroupPopup {
    float: left;
    width: 100%;
    height: 100%;
}


    .mapPOIPanelNewGroupPopup .dx-treelist .dx-row > td {
        padding-top: 15px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
        padding-bottom: 15px !important;
    }

.mapPOIGroupDefinitionContainer {
    float: left;
    width: 100%;
    height: 100%;
}

.addGroupButtonToRoot {
    position: absolute;
    right: 32px;
    top: 82px;
    z-index: 99;
}

.mapPOIItemGroupView {
    border-radius: 6px;
    padding: 2px 9px 3px;
    margin-right: 4px;
    /*font-weight: 500;*/
    display: inline-flex;
    /*line-height: 2;*/
    margin-bottom: 5px;
}

/* BULK OPERATION */

.mapPOIPanelBulkOperationContainer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px 10px;
    display: none;
}

.mapPOIPanelBulkOperationWindow {
    background: white;
    border-radius: 4px;
    border: 1px solid #dcdcdc;
    padding: 15px;
}

    .mapPOIPanelBulkOperationWindow > div {
        margin-bottom: 10px;
    }

.mapPOIPanelBulkOperationCancelButtonContainer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    line-height: 36px;
}

.mapPOIPanelBulkOperationCancelButton {
    min-width: 90px;
}

.mapPOIPanelBulkOperationDetailedInfo,
.mapPOIPanelBulkOperationFileInfo {
    color: #7f7f7f;
    font-weight: 600;
    font-size: 11px;
    overflow-y: scroll;
}

.mapPOIPanelBulkOperationIcon {
    display: flex;
    margin-bottom: 15px !important;
    margin-top: 15px;
}

.mapPOIPanelBulkOperationUploader {
    border: 1px solid #dcdcdc;
    border-radius: 5px;
}

.mapPOIPanelBulkOperationTypeRadio {
    justify-content: center;
    display: flex;
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 11px;
    margin-bottom: 20px !important;
}

.mapPOIPanelBulkOperationDetailedInfo {
    /*display: none;*/
}

.mapPOIPlugin_MapPOIImageBlock {
    background: url(/plugins/app25/MapPOIPanel/Images/mapPOIImport.png) center center no-repeat;
    width: 430px;
    height: 150px;
    margin: auto;
}

.mapPOIPlugin_MapPOIWithAddressImageBlock {
    background: url(/plugins/app25/MapPOIPanel/Images/mapPOIImportWithAddress.png) center center no-repeat;
    width: 430px;
    height: 150px;
    margin: auto;
}

.mapPOIPanelBulkOperationDetailButton {
    color: #1361a3;
    cursor: pointer;
    font-weight: bold;
    text-decoration: underline;
}

.mapPOIPanelUploadAlert {
    color: #ff0e0e;
    font-size: 11px;
    font-weight: bold;
    display: none
}

.mapPOIDetailPopover {
    display: none;
    background: white;
    background: rgb(255 255 255 / 90%);
    box-shadow: 0px 3px 6px #00000029;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    position: fixed;
    padding: 10px;
}

    .mapPOIDetailPopover .mapPOIPanelListItemDetailedView {
        display: block;
        padding: 0;
    }

    .mapPOIDetailPopover .mapPOIPanelButtonContainerSeperator {
        background-color: #7d7d7d;
    }

    .mapPOIDetailPopover .mapPOIPanelListItemView,
    .mapPOIDetailPopover .mapPOIPanelListItemHistory,
    .mapPOIDetailPopover .mapPOIPanelListItemFavorite {
        color: black;
    }

.mapPOIDetailPopoverHeaderContainer {
    display: flex;
    justify-content: space-between;
}

.mapPOIDetailPopoverButtonContainer {
    display: flex;
}

    .mapPOIDetailPopoverButtonContainer .mapPOIPanelButtonContainerSeperator {
        height: 28px;
        margin: auto 5px;
    }

.mapPOIDetailPopoverContent {
    color: black !important;
}

.mapPOIDetailPopoverName {
    font-weight: 600;
    font-size: 16px;
    margin: auto 10px;
    overflow-y: hidden;
}

.mapPOIDetailPopoverCloseButton {
    height: 15px;
    width: 15px;
    background-image: url(/_internals/login/themes/images/close.png);
    /*position: absolute;*/
    background-size: 15px;
    /*    top: 10px;
    right: 10px;*/
    margin-bottom: 35px;
    cursor: pointer;
}

.mapPOIGroupDefinitionEditDropDownContainer {
    width: 100%;
    float: left;
    height: 50px;
    text-align: left;
}

.mapPOIGroupDefinitionEditDropDownText {
    float: left;
    width: 20%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    text-align: left;
}

.mapPOIGroupDefinitionEditDropDown {
    float: left;
    width: 40%;
}

.mapPOIPanelExcelIndicatorContainer {
    margin: auto;
    height: 46px !important;
    width: 158px !important;
    bottom: 0;
    right: 0;
    position: absolute;
    top: 61px;
    text-align: right;
}



.MapPOIPanelListContainer {
    float: left;
    width: 100%;
    height: calc(100%);
    height: -webkit-calc(100%);
    height: -moz-calc(100%);
}
.MapPOIPanelListContainer .dx-toolbar {
        float: left;
        width: calc(100% - 230px);
        width: -webkit-calc(100% - 230px);
        width: -moz-calc(100% - 230px);
        display: inline-block;
    }

    .MapPOIPanelListContainer .dx-toolbar-after {
        padding: 0;
        width: 100%;
    }

    .MapPOIPanelListContainer .gridButtonGroup {
        float: right;
        width: 50%;
    }

    .MapPOIPanelListContainer .dx-datagrid-search-panel {
        float: left;
        margin-left: 0;
        width: 100% !important;
    } 


.MapPOIPanelListGridContainer {
    float: left;
    width: 100%;
    height: 100%;
}
 .MapPOIPanelListGridContainer tr.main-row td {
        height: 100px;
        width: 100%;
        padding: 0;
        cursor: pointer;
    }

    .MapPOIPanelListGridContainer tr.main-row[odd="false"] {
        background-color: rgba(211,211,211,0.2);
    }

    .MapPOIPanelListGridContainer tr.main-row:hover {
        background-color: rgba(96,96,96,0.1);
    }

    .MapPOIPanelListGridContainer .dx-datagrid-rowsview {
        height: 100% !important;
    }

    .MapPOIPanelListGridContainer .dx-datagrid-bottom-load-panel {
        display: none;
    }

.MapPOIPlugin_ToolButton {
    float: right;
    margin-left: 10px;
}
.mapPOIListContainer                                            { width: 100%; height: 100%; }
.mapPOIListContainer .MapPoiList_GridContainer                  { z-index: 1906;float: left; width: 100%; height: 100%; }
.mapPOIListContainer .dx-datagrid-search-panel                  { float: left; margin-left: 0; width: 100% !important;}

.mapPOIListTopData                                              { float: left; width: calc(100% - 36px); width: -webkit-calc(100% - 36px); width: -moz-calc(100% - 36px); height: 36px; line-height: 36px; vertical-align: middle; }
.mapPOIListBold                                                 { font-size: 12pt; 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; }
.MapPOIList_GridButton							                { float: right; margin-left: 10px;}
              
.mapPOIListContainer .dx-toolbar                                { float: left; width: calc(100% - 184px); width: -webkit-calc(100% - 184px); width: -moz-calc(100% - 184px); display: inline-block;}
.mapPOIListContainer .dx-toolbar-after                          { padding: 0; width: 100%;}
.mapPOIListContainer .gridButtonGroup                           { float: right; width: 50%; }

.MapPoiList_CloseButton                                         { float: right; margin-left: 10px; }


/*.MapPoiList_DetailGridContainer                                 { position: absolute;top: 100%; z-index: 1908;height: calc(100% - 60px); height: -webkit-calc(100% - 60px); height: -moz-calc(100% - 60px); width:calc(100% - 17px); }*/
.MapPoiList_DetailGridContainer                                 { z-index: 1908;float:left;height: calc(50%); height: -webkit-calc(50%); height: -moz-calc(50%); width:100%;top: 100%; }


.MapPoiList_DetailGridContainer .dx-datagrid-search-panel       { float: left; margin-left: 0; width: 100% !important;}
.MapPoiList_DetailGridContainer .dx-datagrid-header-panel       { padding-top:10px;}
.MapPoiList_DetailGridContainer .dx-toolbar                     { float: left; width: calc(100% - 184px); width: -webkit-calc(100% - 184px); width: -moz-calc(100% - 184px); display: inline-block;}
.MapPoiList_DetailGridContainer .dx-toolbar-after               { padding: 0; width: 100%;}

/*.MapPoiList_GridContainer[collapsed] .dx-datagrid-rowsview		{ height: calc(100%); height: -webkit-calc(100%); height: -moz-calc(100%) !important;}*/

.taskEndbutton .dx-button-content {
    padding: 0px 18px 0px 18px;
}

  
.MapPOIPlugin_MapPOIContainer                                             { float: left;  width: 100%; height: 100%;  }
.MapPOIPlugin_MapPOITopContainer                                          { position: relative; left: 0; top: 0; width: 100%; height: calc(100%);  }
.MapPOIPlugin_MapPOIContainerWrapper                                      { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #FFFFFF; }

.MapPOIPlugin_MapPOIGridContainer                                         { float: left; width: 100%; height: calc(100%); height: -webkit-calc(100%); height: -moz-calc(100%); }
.MapPOIPlugin_MapPOIGridToolbarContainer                                  { float: left; width: 100%; height: 30px; }
/*.MapPOIPlugin_MapPOIGridGridContainer                                     { float: left; width: 100%; height: calc(100% - 30px); height: -webkit-calc(100% - 30px); height: -moz-calc(100% - 30px); }*/
.MapPOIPlugin_MapPOIGridGridContainer                                     { float: left; width: 100%; height: 100%; }
.MapPOIPlugin_MapPOIBottomToolContainer                                   { float: left; width: 100%; height: 40px; margin-top: 10px;}  

.MapPOIPlugin_MapPOIGridRow                                               { float: left; width: 100%; height: 100px;  }
.MapPOIPlugin_MapPOIGridCell[idx="0"]                                     { float: left; width: 50px; height: 100%;   }
.MapPOIPlugin_MapPOIGridCell[idx="1"]                                     { float: left; width: 211px; height: 100%;  }
.MapPOIPlugin_MapPOIGridCell[idx="2"]                                     { float: left; width: calc(100% - 261px); width: -webkit-calc(100% - 261px); width: -moz-calc(100% - 261px); height: 100%;  }
.MapPOIPlugin_MapPOIGridTypeField                                         { margin-left: auto; margin-right: auto; margin-top: 10px; width: 25px; height: 25px; background-position: center center; background-repeat: no-repeat; }
.MapPOIPlugin_MapPOIGridDoorField                                         { width: 100%;height: 50px;text-align: center; line-height: 25px; font-size: 12px; background: url(/plugins/app25/MapPOI_001_Editor/door.png) center center no-repeat;}
.MapPOIPlugin_MapPOIGridIdentifierField                                   { margin-left: 5px; height: 30px; line-height: 30px; font-weight: bold; width: calc(100% - 10px); width: -webkit-calc(100% - 10px); width: -moz-calc(100% - 10px); }
.MapPOIPlugin_MapPOIGridIdentifierField span[selected]                    { color:#961a1a; font-weight: bold; }
.MapPOIPlugin_MapPOIGridBrandField                                        { margin-left: 5px; width: calc(100% - 10px); width: -webkit-calc(100% - 10px); width: -moz-calc(100% - 10px); font-size: 10px; }
.MapPOIPlugin_MapPOIGridAddressField                                      { margin: 5px; height: 60px; width: calc(100% - 10px); width: -webkit-calc(100% - 10px); width: -moz-calc(100% - 10px); white-space: normal; word-wrap: break-word; text-overflow: ellipsis; font-size: 12px; color: #999; }
.MapPOIPlugin_MapPOIGridDateTimeField                                     { float: left; width: calc(100% - 5px); width: -webkit-calc(100% - 5px); width: -moz-calc(100% - 5px); height: 30px; line-height: 30px; text-align: right; font-size: 10px; }
.MapPOIPlugin_MapPOIGridDateTimeField[hasError="true"]                    { color: #961a1a; font-weight: bold; }
.MapPOIPlugin_MapPOIGridGridContainer tr.main-row td                      { height: 100px; width: 100%; padding : 0; cursor  : pointer; }
.MapPOIPlugin_MapPOIGridGridContainer tr.main-row[odd="false"]            { background-color: rgba(211,211,211,0.2);  }
.MapPOIPlugin_MapPOIGridGridContainer tr.main-row:hover                   { background-color: rgba(96,96,96,0.1);     }
.dx-selection .MapPOIPlugin_MapPOIGridAddressField                        { color: #333333; }
.MapPOIPlugin_MapPOIGridSubtypeField                                      { margin-left: 5px; width: calc(100% - 10px); width: -webkit-calc(100% - 10px); width: -moz-calc(100% - 10px); font-size: 12px; font-weight: 500;}

.MapPOIPlugin_MapPOIGridSearchBar                                         { float: left; margin-left: 0; }
.MapPOIPlugin_ToolButton                                                     { float: right; margin-left: 10px;}

.MapPOIPlugin_MapPOIEditorContainer                                       { float: left; width: 100%; height: 100%; }
.MapPOIPlugin_MapPOIEditorContainer .dx-fieldset                          { margin: 0; }
.MapPOIPlugin_MapPOIEditorContainer .dx-field:first-of-type               { margin-top: 50px; }
.MapPOIPlugin_MapPOIEditorContainer .dx-field-value-static                { padding: 0; }
.MapPOIPlugin_MapPOIEditorContainer .dx-field-value-static[error]         { color: #ea4444; line-height: 36px; font-weight: bold; }

.MapPOIPlugin_EditorButton                                                   { float: right; }
.MapPOIPlugin_EditorButton:not(:first-of-type)                               { margin-right: 10px; }



.MapPOIPlugin_MapPOIGridGridContainer .dx-datagrid-rowsview               { height: 100% !important;}
.MapPOIPlugin_MapPOIGridGridContainer .dx-datagrid-bottom-load-panel      { display: none; }
.MapPOIPlugin_MapPOIGridContainer .dx-toolbar                             { float: left; width: calc(100% - 230px); width: -webkit-calc(100% - 230px); width: -moz-calc(100% - 230px); display: inline-block;}
.MapPOIPlugin_MapPOIGridContainer .dx-toolbar-after                       { padding: 0; width: 100%;}
.MapPOIPlugin_MapPOIGridContainer .gridButtonGroup                        { float: right; width: 50%; }
.MapPOIPlugin_MapPOIGridContainer .dx-datagrid-search-panel	              { float: left; margin-left: 0; width: 100% !important;}

.dx-field-value[radius]                                                   { float: left; width: 25% !important; }
.dx-field-label[meter]                                                    { width: 15%; margin-left: 50px; }
.dx-field-value[startstop]                                                    {    float: left; margin-left: -236px; }
.MapPOIEditor_BottomConfigButton                                          { float: right;}
.mapPOIListContainer                                            { width: 100%; height: 100%; }
.mapPOIListContainer .MapPoiList_GridContainer                  { z-index: 1906;float: left; width: 100%; height: 100%; }
.mapPOIListContainer .dx-datagrid-search-panel                  { float: left; margin-left: 0; width: 100% !important;}

.mapPOIListTopData                                              { float: left; width: calc(100% - 36px); width: -webkit-calc(100% - 36px); width: -moz-calc(100% - 36px); height: 36px; line-height: 36px; vertical-align: middle; }
.mapPOIListBold                                                 { font-size: 12pt; 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; }
.MapPOIList_GridButton							                { float: right; margin-left: 10px;}
              
.mapPOIListContainer .dx-toolbar                                { float: left; width: calc(100% - 184px); width: -webkit-calc(100% - 184px); width: -moz-calc(100% - 184px); display: inline-block;}
.mapPOIListContainer .dx-toolbar-after                          { padding: 0; width: 100%;}
.mapPOIListContainer .gridButtonGroup                           { float: right; width: 50%; }

.MapPoiList_CloseButton                                         { float: right; margin-left: 10px; }


/*.MapPoiList_DetailGridContainer                                 { position: absolute;top: 100%; z-index: 1908;height: calc(100% - 60px); height: -webkit-calc(100% - 60px); height: -moz-calc(100% - 60px); width:calc(100% - 17px); }*/
.MapPoiList_DetailGridContainer                                 { z-index: 1908;float:left;height: calc(50%); height: -webkit-calc(50%); height: -moz-calc(50%); width:100%;top: 100%; }


.MapPoiList_DetailGridContainer .dx-datagrid-search-panel       { float: left; margin-left: 0; width: 100% !important;}
.MapPoiList_DetailGridContainer .dx-datagrid-header-panel       { padding-top:10px;}
.MapPoiList_DetailGridContainer .dx-toolbar                     { float: left; width: calc(100% - 184px); width: -webkit-calc(100% - 184px); width: -moz-calc(100% - 184px); display: inline-block;}
.MapPoiList_DetailGridContainer .dx-toolbar-after               { padding: 0; width: 100%;}

/*.MapPoiList_GridContainer[collapsed] .dx-datagrid-rowsview		{ height: calc(100%); height: -webkit-calc(100%); height: -moz-calc(100%) !important;}*/

.taskEndbutton .dx-button-content {
    padding: 0px 18px 0px 18px;
}

.RegionHistoryContainer                     { left: 0; top: 0; width: 850px; height: 490px; position: relative; }
.RegionHistoryContainerWrapper              { left: 0; top: 0; width: 100%; height: 100%; position: absolute; }

.RegionHistoryToolbarContainer              { float: left; width: 100%;  height: auto;  }
.RegionHistoryToolbar {
    float: left;
    width: 100%;
    height: 100%;
    margin-top: 5px;
    margin-bottom: -5px;
}
.RegionHistoryAreaRadius {
    float: left;
    margin-left: 5px;
    width: 240px;
    height: 100%;
    text-align: left;
    font: normal normal 600 14px/30px Segoe UI;
    letter-spacing: 0px;
    color: #3379B7;
    opacity: 1;
    background: url(/plugins/app25/RegionHistory/radius.svg) no-repeat 5px 17px;
    background-position: left;
    padding-left: 25px;
    margin-top: 5px;
}
.RegionHistoryToolbarButton                 { float: right; margin-left: 5px !important; margin-right: 0 !important; border:none !important }
.RegionHistoryContextContainer              { float: left; width: 100%; height: calc(100% - 68px); height: -moz-calc(100% - 68px); height: -webkit-calc(100% - 68px); position:relative}

.RegionHistoryGridContainer {
    float: left;
    width: 100%;
    height: 100%;
    margin-top: 4px;
}

.RegionHistoryReportContainer {
    float: left;
    width: 100%;
    margin-top: 4px;
}
.RegionHistoryReportGrid                    { float: left; width: 100%; height: 210px;  }

.RegionHistoryReportBody {
    margin-top: 5px;
    float: left;
    width: 85%;
    height: 100%;
    padding-left: 55px;
    margin-bottom: 5px;
}
.RegionHistoryReportDate {
    float: left;
    position: relative;
    z-index: 999;
}
.RegionHistoryReportDate a{
display:block !important;
}
.RegionHistoryReportStartTime {
    float: left;
    position: relative;
    margin-left: 8px;
    margin-top: 20px;
}
.RegionHistoryReportEndTime {
    float: left;
    position: relative;
    margin-left: 8px;
    margin-top: 20px;
}

.RegionHistoryGridContainer > .dx-data-row  { cursor : pointer;}
.RegionHistoryHeader {
    border-bottom: 1px solid #DCDCDC;
    height: auto;
    float: left;
    width: 100%;
}
.RegionHistoryHeaderTitle {
    text-align: left;
    font: normal normal normal 20px/27px Segoe UI;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    float:left;
}
.RegionHistoryToolbarButton[tooltype="close"] {
    border: none !important;
    margin-top: -3px !important;
}
.RegionHistoryToolbarButton[tooltype="excel"] .dx-icon {
    width: 25px !important;
    height: 25px !important;
}

.RegionHistoryReportStartDateContainer{
    width:50%;
    float:left;
}

.RegionHistoryReportEndDateContainer {
    width: 50%;
    float: left;
}

.RegionHistoryReportDateTimeContainer {
    float: right;
    width: 285px;
}

.RegionHistoryReportStartDateTimeContainer {
    float: left;
    width: 285px;
}

.RegionHistoryReportDateTimeTitle {
    text-align: left;
    font: normal normal 600 14px/50px Segoe UI;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    float: left;
    margin-top: 15px;
}

.RegionHistoryReportHeader {
    text-align: left;
    font: normal normal normal 14px/19px Segoe UI;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    background: url(/plugins/app25/RegionHistory/info.svg) no-repeat 5px 17px;
    height: 20px;
    background-position: inherit;
    padding-left: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.RegionHistoryReportStartDateInfo, .RegionHistoryReportEndDateInfo {
    text-align: center;
    font: normal normal 600 16px/16px Segoe UI;
    letter-spacing: 0px;
    color: #3379B7;
    opacity: 1;
    margin-bottom: 5px;
}
.RegionHistoryReportBackButton {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    opacity: 1;
    width: 140px;
    float: left
}

.RegionHistoryReportRunButton {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    opacity: 1;
    width: 140px;
    float: right
}
.RegionHistoryReportGridContainer {
    float: left;
    width: 100%;
    height: 82%;
    margin-top: 4px;
    border-bottom: 2px solid #DCDCDC;
}
.RegionHistoryReportGridBody {
    margin-top: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid #DCDCDC;
    float: left;
    width: 100%;
    height: 100%;
}
.RegionHistoryReportGridBottom{
    float: left;
    width: 100%;
    height: 40px;
}

.RegionHistoryReportGridBackButton {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    opacity: 1;
    width: 140px;
    float: left
}

.RegionHistoryReportGridCounterField {
    float: right;
    margin: 0 45px;
}

.RegionHistoryGridPercentBox {
    float: right;
    width: 150px;
    height: 20px;
    position: relative;
}

.RegionHistoryGridPercentBox .totalPercent {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    z-index: 5;
    margin-left: -25%;
}

.RegionHistoryGridPercentBox .countPercent {
    position: absolute;
    height: 100%;
    background-color: #337ab7;
    z-index: 6;
    margin-left: -25%;
}

.RegionHistoryGridPercentBox .stopButton {
        position: relative;
        float: right;
        width: 32px;
        height: 32px;
        z-index: 6;
        margin-top: -4%;
        background: url("/plugins/app25/RegionHistory/Stop.png") no-repeat center;
    }



.RegionHistoryReportGridDateDetail {
    text-align: left;
    font: normal normal 600 14px/30px Segoe UI;
    letter-spacing: 0px;
    color: #3379B7;
    opacity: 1;
    float: right;
    margin-top: 5px;
}
.RegionHistoryReportBottom {
    border-top: 2px solid #DCDCDC;
    width: 100%;
    float: left;
    padding-top: 10px;
}
.RegionHistoryReportEndTimeDiv{
    float:right;
}

.regionHistoryGoogleApiInfoWindow .gm-style-iw-d {
    overflow: hidden !important;
}

.regionHistoryGoogleApiInfoWindow .gm-style-iw-c {
    padding: 0 !important;
    width: 870px !important;
    height: 510px !important;
    max-width: 870px !important;
    max-height: 510px !important;
    padding-top: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 0px !important;
}

    .regionHistoryGoogleApiInfoWindow .gm-style-iw-c button {
        display: none !important
    }

.regionHistoryMasterDetailContainer, .regionHistoryMasterDetailContainer .dx-master-detail-cell {
    padding: 0 !important;
    padding-left: 30px !important;
}

/*    .regionHistoryMasterDetailContainer .dx-widget {
        max-width: 660px !important;
    }*/

.RegionHistoryDetailTable {
    width: 100%;
}
.RegionHistoryDetailTableIndex {
    max-width: 40px;
    min-width: 40px;
}

.RegionHistoryDetailTableNode {
    max-width: 80px;
    min-width:80px;
}

.RegionHistoryDetailTableAdress {
    max-width: 100px;
    padding: 7px;
    overflow: hidden;
    padding-left: 2px;
}

.RegionHistoryDetailTableEnterTime {
    max-width: 100px;
}

.RegionHistoryDetailTableExitTime {
    max-width: 100px;
}

.RegionHistoryDetailTableDuration {
    max-width: 100px;
}
.regionHistoryLicensePlate {
    text-align: left;
    font: normal normal 600 14px/12px Segoe UI;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    margin-left: 10px;
}
.RegionPanel {
    position: relative;
    height: 100%;
}

.ineligible {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#regionPanelContainer {
    height: 100%;
}

#regionPanelTabSelector {
    display: flex;
    height: 39px;
}

.regionPanelTabInner {
    margin: 0 auto;
    padding: 10px 0 10px 20px;
    display: table;
    border-bottom: 2px solid #ffffff00;
    background-repeat: no-repeat;
    background-position: 0;
    font-size: 14px;
    color: #FF6600;
}

.regionPanelTabButton {
    cursor: pointer;
    opacity: 0.5;
    width: 50%;
    margin: 0 5%;
    overflow: hidden;
    white-space: nowrap;
}

    .regionPanelTabButton.regionPanelTabButtonSelected {
        font-weight: 600;
        opacity: 1;
        border-bottom: 2px solid #FF6600;
    }

    .regionPanelTabButton[data-content="regioncreate"] .regionPanelTabInner {
        background-image: url(/plugins/app25/RegionPanel/Images/regioncreate.svg);
    }

    .regionPanelTabButton[data-content="regionlist"] .regionPanelTabInner {
        /*background-image: url(/plugins/app25/RegionPanel/Images/regionlist.svg);*/
    }

#regionPanelTabContentContainer {
    position: absolute;
    top: 41px;
    bottom: 0;
    left: 0;
    right: 0;
}

.regionPanelTabContent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

    .regionPanelTabContent[regioncreate] {
        display: none;
    }

    .regionPanelInnerContent {
        position: absolute;
        bottom: 0;
        top: 10px;
        left: 0;
        box-sizing: border-box;
        right: 0;
        /*overflow-y: auto;*/
    }

.regionPanelSeperator {
    height: 1px;
    background-color: #DCDCDC;
    box-shadow: 0px 1px 3px #DCDCDC;
}

/* Region Create */

.regionPanelScrollView {
    overflow-y: auto;
    position: absolute;
    top: 0;
    bottom: 60px;
    left: 0;
    right: 0;
    padding: 20px 10px;
    box-sizing: border-box;
}

.regionFormContainer {
    position: absolute;
    padding: 0 10px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

    .regionFormContainer table {
        width: 100%;
        border-spacing: 0;
    }

        .regionFormContainer table td {
            padding-top: 8px;
            padding-bottom: 8px;
            box-sizing: border-box;
        }

.regionPanelInnerContent
.regionFormContainer table td.regionPanelFormHeader:first-child {
    width: 100px;
    width: 20%;
}

.regionPanelNameAlert {
    color: #ff0e0e;
    font-size: 11px;
    font-weight: bold;
    position: absolute;
    display: none
}

.regionPanelFormHeader {
    text-align: right;
    font-weight: bold;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 73px;
    text-overflow: ellipsis;
}

.regionSelectedCoordinates {
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    height: 18.5px;
}

.regionPanelCreateButtons {
    left: 0;
    right: 0;
    padding: 15px 10px 5px;
    position: absolute;
    box-sizing: inherit;
    bottom: 0;
    background-color: white;
    border-top: 1px solid #ddd;
}

.regionIconButton {
    box-sizing: content-box;
}

#regionPanelSaveButton {
    float: right;
}

.iconPopupContent {
    display: none;
}

.RegionGroupDefinitionEditContainer .dx-datagrid-headers .dx-datagrid-table .dx-row > td:not(:first-child) {
    text-align: left !important;
}


/* ICON POPUP */

.dx-popup-content .iconPopupContent {
    display: block;
    position: absolute;
    top: 55px;
    bottom: 0;
    left: 0;
    right: 0;
}

.iconPopupFooter {
    border-top: 1px solid #DCDCDC;
    position: absolute;
    bottom: 0;
    padding: 15px 25px;
    width: 100%;
    text-align: right;
}

.iconPopupTabButtonContainer {
    display: inline-flex;
}

.iconPopupTabButton {
    color: #caf083;
    padding: 5px 10px;
    text-align: center;
    margin-right: 10px;
}

    .iconPopupTabButton:not(.iconPopupSelectedTabButton) {
        cursor: pointer;
    }

.iconPopupSelectedTabButton {
    color: #79B110;
    border-bottom: 2px solid #79B110;
}

.iconPopupHeader {
    padding: 0 25px;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
}

.iconPopupIconList {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 100px;
    top: 40px;
    overflow: hidden;
}

.iconPageChanger {
    height: 36px;
    bottom: 65px;
    position: absolute;
    left: 0;
    right: 0;
    padding: 0 25px;
    text-align: right;
    padding-top: 5px;
}

    .iconPageChanger div {
        padding: 0 !important;
    }



.iconSelectionBox {
    float: left;
    border: 1px solid #f5f5f5;
    padding: 3px;
}

    .iconSelectionBox:not(.iconSelectedBox):hover {
        cursor: pointer;
        background-color: #ececec;
    }

.iconSelectedBox {
    border: 2px solid #1ABEF2;
    padding: 2px;
}

.iconBoxContent {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    margin: auto;
}

.iconPopupPageContainer {
    position: relative;
    background-color: antiquewhite;
}

.iconPopupPage {
    position: absolute;
    left: 0;
}

.regionIconPreview {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 35px;
    width: 35px;
    float: right;
    margin-right: 10px;
}

.iconPopupActionButtonContainer {
    position: absolute;
    right: 25px;
    top: 0;
    display: inline-flex;
    height: 100%;
}

    .iconPopupActionButtonContainer div {
        padding: 0 !important;
        margin: auto 0;
    }

.iconPopupSeperator {
    width: 1px;
    background-color: #DCDCDC;
    margin: 0px 15px !important;
    height: 90%;
}

/*REGION LIST*/

.regionPanelListHeaderRow {
    display: flex;
    position: relative;
    margin-bottom: 10px;
    height: 36px;
}

#regionPanelListContextMenu {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    z-index: 999;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding: 5px 0;
}

.regionPanelContextMenuItem {
    height: 36px;
    padding: 5px 13px;
    min-width: 120px;
}

    .regionPanelContextMenuItem:hover {
        background-color: #ddd;
        cursor: pointer;
    }

#regionPanelCircleSwitch {
    margin-right: 5px;
}

.regionPanelContextMenuItemText {
    vertical-align: middle;
    display: table-cell;
    height: 36px;
    font-size: 14px;
}

.regionPanelListHeader {
    padding: 0 10px;
}

.regionPanelButtonContainerSeperator {
    background-color: #DCDCDC;
    width: 1px;
    /*    height: 36px;*/
    margin: 0 3px;
}

.regionPanelButtonContainer {
    display: inline-flex;
    position: absolute;
    right: 0;
}

    .regionPanelButtonContainer .dx-icon {
        font-size: 22px;
        position: absolute;
        height: 22px;
        width: 22px;
        margin: auto;
        left: 0;
        right: 0;
        line-height: 23px;
    }

    .regionPanelButtonContainer .dx-button-content {
        height: 36px;
        width: 36px;
        position: relative;
    }

#regionPanelListGroupButton {
    position: absolute;
    height: 36px;
    padding: 3px 10px 0;
    width: 50%;
    background-color: #79B110;
    color: white;
}

#regionPanelListGroupSelectionBox {
    width: 100%;
}

/* GROUP TREE VIEW */

.regionListGroupTreeView .dx-treeview-item-with-checkbox .dx-checkbox {
    top: 14px;
    bottom: 0;
    left: 28px;
}

.regionListGroupTreeView .dx-treeview-node {
    padding-left: 3px;
    border-left: 6px solid #79B110;
}

.regionListGroupTreeView .dx-treeview-item-with-checkbox .dx-treeview-item {
    height: 52px;
    padding-top: 13px;
    padding-left: 61px;
}

.regionListGroupTreeView .dx-treeview-toggle-item-visibility {
    top: 10px;
    left: 5px;
}

.regionListGroupTreeView li.dx-treeview-node dx-treeview-item-with-checkbox {
}

.regionListGroupBoxPopup {
    padding: 10px 0;
    max-height: 400px !important;
}

.regionListGroupTreeView .dx-treeview-select-all-item {
    padding: 9px 0 11px 34px;
    margin: 0;
}

.regionListGroupTreeView .dx-searchbox {
    margin: 0 10px 10px 10px;
}

.regionPanelListContainer {
    padding: 0 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 177px;
    border-top: 1px solid #dcdcdc;
}

.regionPanelListScroolView {
    /*overflow-y: scroll;*/
}

/* checkBox */

.regionPanelListSelectAll {
    height: 35px;
    width: 100%;
    position: absolute;
    margin-left: 10px;
}

input[type=checkbox].regionPanelListItemCheckBoxSelectAll + .regionPanelListItemName {
    font-weight: 500;
}

input[type=checkbox].regionPanelListItemCheckBoxSelectAll,
input[type=checkbox].regionPanelListItemCheckBox {
    display: none;
}

    input[type=checkbox].regionPanelListItemCheckBoxSelectAll + .regionPanelListItemName,
    input[type=checkbox].regionPanelListItemCheckBox + .regionPanelListItemName {
        padding-left: 35px;
        height: 22px;
        top: 0;
        bottom: 0;
        left: 10px;
        right: 71px;
        margin: auto 0;
        position: absolute;
        display: inline-block;
        line-height: 22px;
        background-repeat: no-repeat;
        background-position: 0 0;
        vertical-align: middle;
        cursor: pointer;
    }

    input[type=checkbox].regionPanelListItemCheckBoxSelectAll:checked + .regionPanelListItemName,
    input[type=checkbox].regionPanelListItemCheckBox:checked + .regionPanelListItemName {
        background-position: 0 -22px;
    }

.regionPanelListItemName {
    background-image: url(/plugins/app25/RegionPanel/Images/checkbox.png);
    background-size: 22px;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* checkBox end */
.regionPanelListItem {
    padding: 0 10px;
}

.regionPanelListItemShortView {
    position: relative;
    height: 52px;
}

.regionPanelListItemIcon {
    height: 32px;
    width: 32px;
    background-image: url(/ArventoWebExternalFiles/Map/images/poiicons/set001/SmallBuilding.png);
    background-size: contain;
    right: 33px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-repeat: no-repeat;
    background-position: center;
}

.regionPanelListExpandButton {
    height: 25px;
    width: 25px;
    background-image: url(/plugins/app25/RegionPanel/Images/arrow.png);
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    cursor: pointer;
    right: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    transform: rotate( -90deg);
}

.regionPanelListItem[opened] .regionPanelListExpandButton {
    transform: rotate(0deg);
}

.regionGroupItem {
    display: flex;
    justify-content: space-between;
    padding-top: 2px;
}

.regionGroupItemCount {
    padding: 0 10px;
}

.regionGroupItemName {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.regionPanelRegionList {
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
}

    .regionPanelRegionList .dx-list-item {
        border: none !important;
    }

        .regionPanelRegionList .dx-list-item:nth-child(2n) {
            background-color: #f5f5f5;
        }

    .regionPanelRegionList .dx-list-item-content {
        padding: 0 !important;
    }

    .regionPanelRegionList .dx-list .dx-empty-message, .dx-list-item-content {
        border-top: none !important;
    }

    .regionPanelRegionList .dx-empty-message {
        text-align: center;
    }

.regionPanelListItemDetailedView {
    font-size: 12px;
    white-space: initial;
    padding: 0 5px 10px 44px;
    display: none;
}

    .regionPanelListItemDetailedView > div {
        white-space: initial;
        margin-bottom: 6px;
    }

.regionPanelListItemFlexRow {
    display: flex;
    justify-content: stretch;
}

.regionPanelListItemDetailedView .regionPanelButtonContainerSeperator {
    margin: 0 15px;
}



.regionPanelListItemView, .regionPanelListItemHistory, .regionPanelListItemFavorite {
    color: #A3A3A3;
    font-size: 10px;
    background-size: 17px;
    padding-right: 24px;
    background-position: right;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 17px;
    line-height: 17px;
}

.regionPanelListItemView {
    background-image: url(/plugins/app25/RegionPanel/Images/eye_on.svg);
}

.regionPanelListItem[hasgeometry="false"] .regionPanelListItemView {
    background-image: url(/plugins/app25/RegionPanel/Images/eye_off.svg);
}

.regionPanelListItemHistory {
    background-image: url(/plugins/app25/RegionPanel/Images/history.svg);
}

.regionPanelListItemFavorite {
    background-image: url(/plugins/app25/RegionPanel/Images/favorite.svg);
    padding: 0;
    width: 17px;
    margin-top: -1px;
}

.regionPanelListItem[infavorites="true"] .regionPanelListItemFavorite {
    background-image: url(/plugins/app25/RegionPanel/Images/favorite_selected.svg);
}


.regionPanelListItem[opened] .regionPanelListItemDetailedView {
    display: block;
    cursor: default;
}

.regionPanelListContainer .regionPanelListItemLocationRow {
    cursor: pointer;
}

.regionPanelListItemLocation, .regionIconType1, .regionIconType2 {
    background-image: url(/plugins/app25/RegionPanel/Images/circle.svg);
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: left;
    padding-left: 20px;
}

.regionPanelListItemLocation {
    background-image: url(/plugins/app25/RegionPanel/Images/coordinates.svg);
}

.regionIconType1 {
    background-image: url(/plugins/app25/RegionPanel/Images/circle.svg);
}

.regionIconType2 {
    background-image: url(/plugins/app25/RegionPanel/Images/polygon.svg);
    width: 14px;
    overflow: hidden;
    box-sizing: border-box;
}

/* HISTORY POPUP */

.regionPanelHistoryContent {
    padding-top: 5px;
}

.regionPanelHistoryHeader {
    display: flex;
    /*margin-bottom: 15px;*/
    /*margin-top: 5px;*/
    justify-content: space-between;
    z-index: 99;
    position: absolute;
    padding: 0px 17px;
}

.regionPanelHistoryFilter {
    float: left;
    display: flex;
}

    .regionPanelHistoryFilter > div {
        margin-right: 10px;
    }

#regionPanelHistoryExcelButton {
    border: 1px solid #dcdcdc;
    border-radius: 4px;
}

    #regionPanelHistoryExcelButton .dx-button-content {
        padding: 4px !important;
        width: 34px;
        height: 34px;
    }

    #regionPanelHistoryExcelButton img.dx-icon {
        width: 100%;
        height: 100%;
    }

#regionPanelHistoryList {
    height: 100%;
}

    #regionPanelHistoryList .dx-datagrid-header-panel {
        border-bottom: none !important;
        padding: 0 15px;
    }

.regionPanelHistoryLoadingBar {
    float: left;
    display: none;
    height: 34px;
    align-items: center;
}

    .regionPanelHistoryLoadingBar > div {
        margin-right: 10px;
    }

.regionPanelHistoryLoadingOuter {
    height: 24px;
    border: 1px solid #dcdcdc;
    width: 350px;
}

.regionPanelHistoryLoadingInner {
    height: 100%;
    background-color: #337ab7;
    width: 0%;
}

#regionPanelHistoryList .dx-datagrid .dx-row > td {
    padding: 0 20px;
    line-height: 54px;
}

#regionPanelHistoryList .dx-datagrid-headers {
    margin-top: 5px;
}

    #regionPanelHistoryList .dx-datagrid-headers .dx-datagrid-content {
        display: flex;
        align-items: center;
        height: 37px;
    }

.regionPanelHistoryContent {
    height: 100%;
}

    .regionPanelHistoryContent .dx-icon-export-excel-button {
        background-image: url(/themes/images/xlsx.png);
    }

        .regionPanelHistoryContent .dx-icon-export-excel-button::before {
            content: none;
        }


/*REGION POPUP*/


.RegionPanelNewGroupPopup {
    float: left;
    width: 100%;
    height: 100%;
}


    .RegionPanelNewGroupPopup .dx-treelist .dx-row > td {
        padding-top: 15px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
        padding-bottom: 15px !important;
    }

.RegionRadiusIconGrid {
    width: 75%;
    background: url(/plugins/app25/RegionPanel/Images/circle.svg);
    background-position: initial;
    background-repeat: no-repeat;
    background-size: 20px;
    padding: 0px 30px 3px;
    margin: 3px auto 0;
}

/*.RegionRadiusInfoGrid {
    float: left;
    line-height: 26px;
}*/

.RegionGroupRowMainDiv {
}

.RegionGroupRowColorDiv {
    width: 6px;
    background: transparent;
    height: 92px;
    float: left;
}

.RegionGroupRowRightDiv {
    padding-left: 0;
}



.regionGroupTree .dx-scrollable-content ul > li > div:first-child + div {
    padding-left: 0;
    top: 20px;
}

.regionGroupTree .dx-scrollable-content ul > li > div:first-child {
    padding: 0;
}

.regionGroupTree > .dx-scrollable {
    left: -20px;
    position: relative;
}

.RegionGroupDefinitionEditSourceGrid {
    width: 100%;
    float: left;
    position: absolute;
    bottom: 0;
    top: 85px;
}

.RegionGroupDefinitionEditTargetGrid {
    width: 100%;
    float: left;
    bottom: 0;
    position: absolute;
    top: 165px;
}

.RegionGroupInputContainer {
    display: inline-flex;
}

.RegionGroupDefinitionEditSourceGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
}

.RegionGroupDefinitionEditTargetGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
}

.RegionGroupDefinitionEditSourceGridHeaderCountInfo {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    margin-right: 0px;
    text-align: right;
}

.RegionGroupDefinitionEditTargetGridHeaderCountInfo {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    margin-right: 0px;
    text-align: right;
}

.RegionGroupDefinitionEditAddButton {
    position: relative;
    top: calc(50% - 56px);
    top: -webkit-calc(50% - 56px);
    top: -moz-calc(50% - 56px);
}

.RegionGroupDefinitionEditRemoveButton {
    position: relative;
    top: calc(50% - 46px);
    top: -webkit-calc(50% - 46px);
    top: -moz-calc(50% - 46px);
}

.RegionGroupDefinitionEditTargetGridNav {
    max-height: 30px;
    font-weight: 600;
    font-size: 11px;
    text-overflow: ellipsis;
    word-break: break-all;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 3px;
    overflow: hidden;
}

.RegionGroupDefinitionEditGroupName {
    float: left;
    height: 36px;
    width: 100%;
}

.RegionGroupColorMainDiv {
    height: 50px;
    width: 100%;
    float: left;
    padding-top: 5px;
}

.RegionGroupInputTable {
    border-spacing: 0 7px;
}

    .RegionGroupInputTable tr {
        margin: 5px;
    }

.RegionGroupInputItemTitle {
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
}

.RegionGroupInputTable td.RegionGroupInputItemTitle {
    padding-right: 10px;
}

.RegionGroupInputContainerRight .RegionGroupInputItemTitle {
    text-align: left;
    margin-bottom: 15px;
}

.RegionGroupInputContainerRight {
    padding-left: 30px;
    box-sizing: border-box;
    margin-top: -13px;
}

.RegionGroupColorContainer {
    float: left;
    padding: 5px 2.5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    display: inline-flex;
}

.RegionGroupColorPicker {
    width: 26px;
    height: 26px;
    float: left;
    margin: 0 5px;
    border-radius: 3px;
    cursor: pointer;
}

    .RegionGroupColorPicker:not(.SelectedRegionGroupColorPicker):hover {
        border: 2px solid #ddd;
    }

.SelectedRegionGroupColorPicker {
    border: 2px solid #337ab7;
    cursor: default;
}

.RegionGroupDefinitionUserListGridContainer {
    width: 100%;
    height: 95%;
    float: left;
}

.RegionGroupDefinitionUserListGridHeader {
    width: 100%;
    float: left;
    height: 5%;
}

.RegionGroupDefinitionUserListGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 10px;
}

.RegionGroupDefinitionUserListGridHeaderCount {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 10px;
    text-align: right;
}

.RegionGroupDefinitionUserListGrid {
    width: 100%;
    height: 95%;
    float: left;
}

.RegionGroupDefinitionUserListButtonContainer {
    width: 100%;
    float: right;
    height: 5%;
}

.RegionGroupDefinitionEditContainer {
    width: 100%;
    height: 100%;
}

.RegionGroupDefinitionEditGridContainer {
    width: 100%;
    height: 100%;
    display: flex;
}

.RegionGroupDefinitionEditSourceGridContainer {
    width: 50%;
    height: 100%;
    position: relative;
}

.RegionGroupDefinitionEditSourceGridHeader {
    width: 100%;
    float: left;
    height: 40px;
}

.RegionGroupDefinitionEditButtonContainer {
    height: 100%;
    text-align: center;
}

.RegionGroupDefinitionEditTargetGridContainer {
    width: 50%;
    height: 100%;
    position: relative;
}

.RegionGroupDefinitionEditTargetGridHeader {
    width: 100%;
    height: 40px;
    float: left;
}

.regionGroupTree > .dx-scrollable > .dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-content > .dx-empty-message {
    padding-top: 50px;
    padding-left: 50px
}

.RegionPolygonIcon {
    width: 75%;
    height: 26px;
    position: relative;
    top: 50%;
    background: url(/plugins/app25/RegionPanel/Images/polygon.svg);
    background-position: center center;
    background-repeat: no-repeat;
    filter: grayscale(1);
    background-position: initial;
    background-repeat: no-repeat;
    background-size: 25px;
    padding: 0 30px 0px;
    margin: 3px auto 0;
}

.RegionGroupDefinitionTreeLineLabelTextNonGroup {
    width: 100%;
    height: 30px;
    font-weight: bold;
    padding-left: 35px;
}

#regionPanelListContainer .RegionPlugin_GridContainer .dx-treeview-node-container:first-child > .dx-treeview-node {
    padding-left: 0;
}

.RegionGroupDefinitionEditGridContainer .dx-datagrid-table tr {
    height: 40px;
}

.RegionGroupDefinitionEditGridContainer .dx-datagrid-table td {
    vertical-align: middle !important;
}

.RegionGroupDefinitionEditContainer .dx-datagrid-headers .dx-datagrid-table .dx-row > td:not(:first-child) {
    text-align: left !important;
}

.RegionGroupDefinitionEditTreeListItem {
    position: absolute;
    bottom: 25px;
    top: 85px;
    left: 25px;
    right: 25px;
}

.RegionPanelNewGroupPopup {
    float: left;
    width: 100%;
    height: 100%;
}


    .RegionPanelNewGroupPopup .dx-treelist .dx-row > td {
        padding-top: 15px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
        padding-bottom: 15px !important;
    }

.RegionGroupDefinitionContainer {
    float: left;
    width: 100%;
    height: 100%;
}

.addGroupButtonToRoot {
    position: absolute;
    right: 32px;
    top: 82px;
    z-index: 99;
}

.regionItemGroupView {
    border-radius: 6px;
    padding: 2px 9px 3px;
    margin-right: 4px;
    /*font-weight: 500;*/
    display: inline-flex;
    /*line-height: 2;*/
    margin-bottom: 5px;
}

/* BULK OPERATION */

.regionPanelBulkOperationContainer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px 10px;
    display: none;
}

.regionPanelBulkOperationWindow {
    background: white;
    border-radius: 4px;
    border: 1px solid #dcdcdc;
    padding: 15px;
}

    .regionPanelBulkOperationWindow > div {
        margin-bottom: 10px;
    }

.regionPanelBulkOperationCancelButtonContainer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    line-height: 36px;
}

.regionPanelBulkOperationCancelButton {
    min-width: 90px;
}

.regionPanelBulkOperationDetailedInfo,
.regionPanelBulkOperationFileInfo {
    color: #7f7f7f;
    font-weight: 600;
    font-size: 11px;
    overflow-y: scroll;
}

.regionPanelBulkOperationIcon {
    display: flex;
    margin-bottom: 15px !important;
    margin-top: 15px;
}

.regionPanelBulkOperationUploader {
    border: 1px solid #dcdcdc;
    border-radius: 5px;
}

.regionPanelBulkOperationTypeRadio {
    justify-content: center;
    display: flex;
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 11px;
    margin-bottom: 20px !important;
}

.regionPanelBulkOperationDetailedInfo {
    /*display: none;*/
}

.RegionPlugin_RegionImageBlock {
    background: url(/plugins/app25/RegionPanel/Images/regionImport.png) center center no-repeat;
    width: 430px;
    height: 150px;
    margin: auto;
}

.RegionPlugin_RegionWithAddressImageBlock {
    background: url(/plugins/app25/RegionPanel/Images/regionImportWithAddress.png) center center no-repeat;
    width: 430px;
    height: 150px;
    margin: auto;
}

.regionPanelBulkOperationDetailButton {
    color: #1361a3;
    cursor: pointer;
    font-weight: bold;
    text-decoration: underline;
}

.regionPanelUploadAlert {
    color: #ff0e0e;
    font-size: 11px;
    font-weight: bold;
    display: none
}

.regionDetailPopover {
    display: none;
    background: white;
    background: rgb(255 255 255 / 90%);
    box-shadow: 0px 3px 6px #00000029;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    position: fixed;
    padding: 10px;
}

    .regionDetailPopover .regionPanelListItemDetailedView {
        display: block;
        padding: 0;
    }

    .regionDetailPopover .regionPanelButtonContainerSeperator {
        background-color: #7d7d7d;
    }

    .regionDetailPopover .regionPanelListItemView,
    .regionDetailPopover .regionPanelListItemHistory,
    .regionDetailPopover .regionPanelListItemFavorite {
        color: black;
    }

.regionDetailPopoverHeaderContainer {
    display: flex;
    justify-content: space-between;
}

.regionDetailPopoverButtonContainer {
    display: flex;
}

    .regionDetailPopoverButtonContainer .regionPanelButtonContainerSeperator {
        height: 28px;
        margin: auto 5px;
    }

.regionDetailPopoverContent {
    color: black !important;
}

.regionDetailPopoverName {
    font-weight: 600;
    font-size: 16px;
    margin: auto 10px;
    overflow-y: hidden;
}

.regionDetailPopoverCloseButton {
    height: 15px;
    width: 15px;
    background-image: url(/_internals/login/themes/images/close.png);
    /*position: absolute;*/
    background-size: 15px;
    /*    top: 10px;
    right: 10px;*/
    margin-bottom: 35px;
    cursor: pointer;
}

.RegionGroupDefinitionEditDropDownContainer {
    width: 100%;
    float: left; 
    height: 50px;
   text-align:left;
}

.RegionGroupDefinitionEditDropDownText {
    float: left;
    width: 20%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    text-align:left;
}

.RegionGroupDefinitionEditDropDown{
    float: left;
    width: 40%;
  
}

.regionPanelExcelIndicatorContainer {
    margin: auto;
    height: 46px !important;
    width: 158px !important;
    bottom: 0;
    right: 0;
    position: absolute;
    top: 61px;
    text-align: right;
}
.RoutePanel {
    position: relative;
    height: 100%;
}

#routePanelContainer {
    height: 100%;
}

.routePanelTextInput {
    height: 34px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding: 4px 8px 6px;
    /* font-weight: 600; */
    color: #333333;
    width: 100%;
    box-sizing: border-box;
}

    .routePanelTextInput[selected] {
        font-weight: 600;
        border: none;
        cursor: pointer;
    }

    .routePanelTextInput[resulted] {
        border-radius: 4px 4px 0 0;
    }

.ineligible {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#routePanelTabSelector {
    display: flex;
    height: 39px;
}

.routePanelSeperator {
    height: 1px;
    background-color: #DCDCDC;
    box-shadow: 0px 1px 3px #DCDCDC;
}

.routePanelTabInner {
    margin: 0 auto;
    padding: 10px 0 10px 20px;
    display: table;
    /* margin-top: 0; */
    border-bottom: 2px solid #ffffff00;
    background-repeat: no-repeat;
    background-position: 0;
    font-size: 14px;
    color: rgb(239, 151, 0);
}

.routePanelTabButton {
    cursor: pointer;
    opacity: 0.5;
    width: 50%;
    margin: 0 5%;
    overflow: hidden;
    white-space: nowrap;
}

    .routePanelTabButton.routePanelTabButtonSelected {
        font-weight: 600;
        opacity: 1;
        border-bottom: 2px solid #FFBA00;
    }

    .routePanelTabButton[data-content="routecreate"] .routePanelTabInner {
        background-image: url(/plugins/app25/RoutePanel/Images/routecreate.svg);
    }

    .routePanelTabButton[data-content="routelist"] .routePanelTabInner {
        background-image: url(/plugins/app25/RoutePanel/Images/routelist.svg);
    }

#routePanelTabContentContainer {
    position: relative;
}

.routePanelTabContent {
    display: none;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.routePanelInnerContent {
    width: 100%;
    position: absolute;
    padding: 20px 10px;
    bottom: 0;
    top: 0;
    box-sizing: border-box;
    overflow-y: auto;
}

#routePanelPointListTable tr:not(#routePanelPointListTableConstantRow):nth-child(2n+1) td:first-child {
    background-position: top;
    background-repeat: no-repeat;
    background-size: 27px;
}

#routePanelPointListTable tr:nth-child(2n+1) td:last-child {
    vertical-align: middle;
    display: contents;
    text-align: center;
}

    #routePanelPointListTable tr:nth-child(2n+1) td:last-child div {
        cursor: pointer;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        color: #BE0A0A;
    }

#routePanelPointListTable tr td:nth-child(2) {
    /*position: relative;*/
}

#routePanelPointList table tr:nth-child(2n) td:last-child {
    font-weight: 600;
    margin: auto 0;
    padding-left: 10px;
}

    #routePanelPointList table tr:nth-child(2n) td:last-child div,
    #routePanelResultTable table tr:last-child td:last-child div,
    .routePanelDetailRowInfo div:not(:first-child) {
        padding: 2px 10px;
        background-position: left;
        background-repeat: no-repeat;
        background-size: 12px;
        padding-left: 17px;
        white-space: nowrap;
        float: left;
    }

        #routePanelPointList table tr:nth-child(2n) td:last-child div:empty,
        #routePanelResultTable table tr:last-child td:last-child div:empty,
        .routePanelDetailRowInfo div:not(:first-child):empty {
            display: none;
        }

        #routePanelPointList table tr:nth-child(2n) td:last-child div:first-child,
        #routePanelTotalDistanceValue,
        .routePanelDetailRowInfo div:nth-child(2) {
            background-image: url(/plugins/app25/RoutePanel/Images/range.svg);
        }

        #routePanelPointList table tr:nth-child(2n) td:last-child div:last-child,
        #routePanelTotalDurationValue,
        .routePanelDetailRowInfo div:nth-child(3) {
            background-image: url(/plugins/app25/RoutePanel/Images/duration.svg);
        }

#routePanelPointListTable tr td:first-child div:first-child {
    position: absolute;
    width: 0;
    left: 0;
    right: 0;
    height: 100%;
    margin: 0 auto;
    z-index: -1;
    top: 0;
    border: 1px solid #B7B7B7;
    height: 36px;
    background-color: #B7B7B7;
}

#routePanelPointList {
}

    #routePanelPointList table {
        width: 100%;
        border-spacing: 0;
        /*display: grid;*/
    }

#routePanelPointListTable {
    /*display: table-caption;*/
    max-height: 203px;
    /*overflow-y: hidden;*/
    padding-bottom: 3px;
}

    #routePanelPointListTable tr {
        display: flex;
    }

        #routePanelPointListTable tr td:first-child {
            position: relative;
        }

        #routePanelPointListTable tr:last-child {
            height: 20px !important;
        }

            #routePanelPointListTable tr:last-child td:first-child div {
                border-style: dashed !important;
                height: 20px !important;
                background-color: white !important;
            }

#routePanelPointList table tr {
    height: 36px;
}

#routePanelResultTable tr:first-child {
    background-color: #f5f5f5;
    height: 36px;
    width: 100%;
    color: #FF9900;
    font-weight: 600;
    cursor: pointer;
}

    #routePanelResultTable tr:first-child:hover {
        background-color: #f2f2f2;
    }

    #routePanelResultTable tr:first-child td:first-child {
        background-image: url(/plugins/app25/RoutePanel/Images/addpoint.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 14px;
        cursor: pointer;
    }

    #routePanelResultTable tr:first-child td:last-child {
        padding-left: 8px;
    }

#routePanelResultTable tr:nth-child(2) td:first-child {
    padding: 0 15px;
    font-weight: bold;
    font-size: 10px;
    height: 40px;
}

#routePanelPointsContainer {
    overflow-y: auto;
    max-height: 203px;
    min-height: 60px;
    overflow-x: hidden;
    box-sizing: border-box;
}

#routePanelAltRouteList {
    position: absolute;
    width: 100%;
    bottom: 0;
}

    #routePanelAltRouteList table {
        width: 100%;
        border-spacing: 0;
        font-weight: 600;
        padding: 0 10px 10px;
    }

        #routePanelAltRouteList table tr {
            height: 50px;
        }

            #routePanelAltRouteList table tr:hover:not(:only-child) {
                background-color: #f2f2f2;
                cursor: pointer;
            }

        #routePanelAltRouteList table td {
            border-bottom: 1px solid #DCDCDC;
        }

.routePanelAltLine {
    padding: 0 15px;
    min-width: 13px;
}

    .routePanelAltLine div {
        background-color: #adb9c3;
        border-radius: 5px;
        height: 5px;
    }

#routePanelAltRouteList table tr:only-child {
    cursor: initial !important;
}

    #routePanelAltRouteList table tr:only-child td div {
        background-color: #1A8CF2 !important;
    }


#routePanelAltRouteList table tr[selected] td div {
    background-color: #1A8CF2;
}

/*#routePanelRouteListScrollView {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 160px;
}*/

.routePanelAltRouteItem {
}

.routePanelCreateButtons {
    left: 0;
    right: 0;
    padding: 10px;
    position: absolute;
    box-sizing: inherit;
    bottom: 0;
    background-color: white;
}

#routePanelCreateButton, #routePanelSaveButton {
    float: right;
}

.routePanelCancelButton {
}

#routeSaveContainer {
    position: absolute;
    padding: 0 10px;
    left: 0;
    right: 0;
}

    #routeSaveContainer table {
        width: 100%;
        border-spacing: 0;
    }

        #routeSaveContainer table tr td {
            padding-bottom: 10px;
            padding-top: 20px;
        }

        #routeSaveContainer table tr:first-child td {
            padding-top: 0 !important;
        }

        #routeSaveContainer table tr.routePanelBorderBottom td {
            border-bottom: 1px solid #dcdcdc;
            padding-bottom: 20px;
            padding-top: 10px;
        }

        #routeSaveContainer table tr.routePanelSingleRow td {
            padding-top: 20px;
        }

#routePanelColorPicker {
    height: 24px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding: 4px 4px 4px;
    width: 52px;
    position: relative;
}

    #routePanelColorPicker[opened] {
        height: 25px;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        z-index: 9;
    }

.routePanelColor {
    background-color: #0080FF;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    float: left;
}

#routePanelColorPickerButton {
    background-image: url(/plugins/app25/RoutePanel/Images/down.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
    cursor: pointer;
    float: left;
    width: 24px;
    height: 24px;
    margin-left: 4px;
    border-radius: 4px;
}

    #routePanelColorPickerButton:hover {
        background-color: #f2f2f2;
    }

#routePanelToleranceBox {
    margin: 2px 0px 2px 10px;
    width: 50px !important;
    float: right;
    height: 22px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding: 4px 8px 6px;
    /*font-weight: 600;*/
    color: #333333;
}

#routePanelSpeedBox1, #routePanelSpeedBox2 {
    margin: 2px 0px;
    /*width: 100px !important;*/
    height: 22px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding: 4px 8px 6px;
    color: #333333;
}

#routePanelColorSelector {
    position: absolute;
    top: 31px;
    background-color: white;
    border: 1px solid #DCDCDC;
    width: 113px;
    padding: 2px;
    border-radius: 0 4px 4px 4px;
    left: -1px;
    display: none;
}

    #routePanelColorSelector .routePanelColor {
        width: 24px;
        height: 24px;
        margin: 2px;
        box-sizing: border-box;
    }

        #routePanelColorSelector .routePanelColor:hover {
            cursor: pointer;
            border: 1px solid #646464;
        }

#routePanelColorPicker[opened] #routePanelColorSelector {
    display: block;
}
/*Route List Page*/
#routePanelListBar {
    width: 100%;
    display: inline-flex;
    padding-top: 10px;
    border-bottom: 1px solid #dcdcdc;
    z-index: 1;
    background-color: white;
}
#routePanelListSearchBox {
    width: 100%;
    height: 34px;
}

#routePanelClear {
    width: 23%;
    white-space: nowrap;
    position: static !important;
    font: normal normal normal 14px/19px Segoe UI;
    padding-top: 9px;
}

#routePanelClear > .dx-checkbox-container > .dx-checkbox-text {
    white-space: nowrap;
}

#routePanelClear > .dx-checkbox-container {
    height: auto;
    padding-left: 19px;
}

#routePanelListButtons {
    width: 27%;
    position: relative;
    text-align: right;
}

    #routePanelListButtons .routePanelListSeperator {
        top: 0;
    }

    #routePanelListButtons div:not(.routePanelListSeperator) {
        /*transform: scale(0.9, 0.9);*/
        border-radius: unset;
        display: inline-table;
    }

.routePanelListSeperator {
    position: absolute;
    width: 2px;
    background-color: #f1f1f1;
    height: 80%;
    margin: auto;
    /*bottom: 0;
    top: 0;*/
    box-sizing: border-box;
}

#routePanelListContainer {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 110px;
    padding: 0 0px;
    bottom: 0;
    box-sizing: border-box;
    overflow: auto;
}

    #routePanelListContainer table {
        width: 100%;
        border-spacing: 0;
        /*border-bottom: 1px solid #dcdcdc;*/
    }

        #routePanelListContainer table td {
            word-break: break-all;
        }

            #routePanelListContainer table td .routePanelListSeperator {
                left: -2px;
                height: 100%;
            }

        #routePanelListContainer table tr {
            height: 48px;
        }

            #routePanelListContainer table tr:not(.routePanelDetailRow) {
                cursor: pointer;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

        #routePanelListContainer table:not([filtered]) tbody tr:nth-child(4n-1) {
            background-color: #F5F5F5;
        }

        #routePanelListContainer table tr[selected] {
            box-shadow: 0px 3px 6px #00000029;
        }

        #routePanelListContainer table tr:not([style*="display: none"])[selected] + tr {
            display: table-row;
        }

        #routePanelListContainer table tr[selected] + tr td {
            position: relative;
            height: 80px;
            border-top: 1px solid #dcdcdc;
            border-bottom: 1px solid #dcdcdc;
        }

        #routePanelListContainer table td:nth-child(1) {
            width: 10%;
            text-align: left;
        }

        #routePanelListContainer table td:nth-child(2) {
            font-weight: bold;
            padding-right: 10px;
        }

        #routePanelListContainer table td:nth-child(3), #routePanelListContainer table td:nth-child(4) {
            width: 102px;
            font: normal normal normal 12px/14px Segoe UI;
        }

            #routePanelListContainer table td:nth-child(3) div:only-child, #routePanelListContainer table td:nth-child(4) div:only-child {
                position: relative;
            }

.routePanelDetailRow {
    display: none;
    font-weight: 600;
    box-sizing: border-box;
}

    .routePanelDetailRow td {
        padding: 10px 30px;
    }

        .routePanelDetailRow td div.AAPI-SnakeWaiter:not(:only-child) {
            display: none;
        }

.routePanelDetailRowPoint {
    padding-left: 34px;
    text-align: left;
    min-height: 34px;
    position: relative;
    padding-top: 6px;
    max-height: 50px;
    overflow: hidden;
    font-size: 12px;
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Verdana, sans-serif;
}

    .routePanelDetailRowPoint div {
        background-image: url(/plugins/app25/RoutePanel/Images/routepoint.svg);
        background-position: initial;
        background-repeat: no-repeat;
        background-size: 35px;
        width: 35px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        padding: 7px 0;
        font-weight: bold;
        font-size: 11px;
        text-align: center;
    }

.routePanelDetailRowInfo {
    width: 100%;
    text-align: left;
    padding-left: 34px;
    height: 34px;
    display: table-cell;
    position: relative;
    vertical-align: middle;
}

.routePanelDetailLine {
    width: 2px;
    position: absolute;
    left: 16px;
    top: -32px;
    bottom: -17px;
    background-color: #B7B7B7;
    z-index: -1;
    height: 100px;
}

.routePanelListItemValue {
    background-position: left;
    background-repeat: no-repeat;
    background-size: 12px;
    padding-left: 17px;
    white-space: nowrap;
}

#routePanelListContainer table td:nth-child(3) .routePanelListItemValue {
    background-image: url(/plugins/app25/RoutePanel/Images/range.svg);
}

#routePanelListContainer table td:nth-child(4) .routePanelListItemValue {
    background-image: url(/plugins/app25/RoutePanel/Images/duration.svg);
}

.routePanelListItemHeader {
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #B7B7B7;
}

.routePanelListItemContainer {
    margin: 0 10px;
    display: table;
}

.routePanelSearchResults {
    position: fixed;
    background-color: white;
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
    border-radius: 0 0 4px 4px;
    display: none;
    z-index: 999;
}

    .routePanelSearchResults div {
        width: 100%;
        min-height: 30px;
        padding: 6px 20px;
        box-sizing: border-box;
    }

        .routePanelSearchResults div.routePanelSearchItem:hover {
            cursor: pointer;
            background-color: #f2f2f2;
        }

.routePanelSearchItemHeader {
    font-weight: 600;
    background-color: #DCDCDC;
    color: #333333;
}

.routePanelAlert {
    color: #7f7f7f;
    font-weight: 600;
    background-image: url(/plugins/app25/RoutePanel/Images/info.svg);
    background-repeat: no-repeat;
    background-size: 40px;
    display: table-cell;
    padding: 4px 0 4px 45px;
    font-size: 11px;
    text-align: justify;
}

    .routePanelAlert b {
        color: #464545;
    }

#routePanelUploadContent {
    display: none;
}

#routePanelUpload .dx-widget, #routePanelUpload .dx-fileuploader-input-label {
    margin-left: -6px !important;
    margin-top: -7px !important;
}

#routePanelUpload {
    background: white;
    bottom: auto;
    border-radius: 4px;
    border: 1px solid #dcdcdc;
    padding: 15px;
}

    #routePanelUpload table {
        width: 100%;
    }

        #routePanelUpload table tr:not(:first-child) {
            height: 50px;
        }

            #routePanelUpload table tr:not(:first-child):not(:last-child) td:first-child {
                text-align: left;
                font-weight: bold;
                padding: 18px 10px 18px 5px;
                min-width: 72px;
                vertical-align: top;
            }

#routePanelUploadCancelButton {
    float: right;
}

.routePanelInform {
    color: #7f7f7f;
    font-weight: 600;
    background-image: url(/plugins/app25/RoutePanel/Images/info.svg);
    background-position: left;
    background-repeat: no-repeat;
    background-size: 20px;
    display: table-cell;
    padding: 2px 0 4px 22px;
    font-size: 10px;
    position: absolute;
    margin-top: 8px;
}

.routePanelFormHeader {
    text-align: right;
    font-weight: bold;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 73px;
    text-overflow: ellipsis;
    /*    overflow-wrap: anywhere;*/
}

#routePanelTimePickerEnd,
#routePanelTimePickerStart {
    max-width: 105px;
}

#routePanelSpeedBox1,
#routePanelSpeedBox2 {
    max-width: 86px;
}

#routeSaveContainer
.dx-datebox.dx-auto-width .dx-texteditor-input, .dx-datebox:not(.dx-texteditor-empty).dx-auto-width .dx-texteditor-input {
    padding-right: 0px;
}

#routeSaveContainer
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
}

#routePanelNameAlert, #routePanelUploadAlert {
    color: #ff0e0e;
    font-size: 11px;
    font-weight: bold;
    position: absolute;
    margin-top: 2px;
    display: none
}

#routeSaveContainer .errorIndicator {
    border: 2px solid #ff7d7d;
}

    #routeSaveContainer .errorIndicator + div {
        display: block;
    }

.routePanelScrollView {
    overflow-y: auto;
    position: absolute;
    top: 0;
    bottom: 55px;
    left: 0;
    right: 0;
    padding: 20px 10px;
    box-sizing: border-box;
}

.routePanelResultHeader {
    background-color: #cfcfcf;
    background-position: left;
    background-repeat: no-repeat;
    background-size: 64px;
    font-weight: bold;
    text-align: center;
    padding: 5px 50px;
    box-sizing: border-box;
}

.routePanelResultList {
    padding-bottom: 5px;
    background-color: white;
}

#routePanelDaysBox {
    max-width: 303px;
}

#routePanelSaveResultMask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: white;
    display: none;
}

#routePanelSaveResult {
    position: relative;
    box-shadow: 0px 3px 6px #00000029;
    background-color: #ffffff;
    margin: 10px;
    border-radius: 5px;
    max-height: 80%;
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    padding: 15px 15px 60px 15px;
    overflow: hidden;
    display: none;
}

#routePanelSaveResultScroll {
    overflow-y: auto;
    box-sizing: border-box;
    position: absolute;
    bottom: 60px;
    left: 15px;
    top: 15px;
    right: 15px;
}

.routePanelCorrectResults {
}

    .routePanelCorrectResults .routePanelResultHeader {
        background-image: url(/plugins/app25/RoutePanel/Images/done.svg);
        /*border-top: 2px solid #58c558;*/
    }

.routePanelFailedResults {
}

    .routePanelFailedResults .routePanelResultHeader {
        background-image: url(/plugins/app25/RoutePanel/Images/error.svg);
        /*border-top: 2px solid #ca5353;*/
    }

#routePanelSaveResultButton {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.routePanelGroupButtons {
    text-align: center;
}

#routePanelGroupNewButton {
    width: 180px;
    background-image: url(/plugins/app25/RoutePanel/Images/addpoint.svg);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: left;
    background-position-x: 5px;
    font: normal normal 600 14px/19px Segoe UI;
    color: #FF9900;
    background-color: #DCDCDC;
    margin-right: 20px;
}

.RoutePanel_SaveButton {
    background-color: #5cb85c;
    border-color: transparent;
    color: #fff;
    margin-left: 10px;
}

.RoutePanel_SaveCancel > .dx-button-text {
    font-weight: bold;
}

#routePanelGroupListNewButton {
    width: 70%;
    height: 36px;
    /*background-image: url(/plugins/app25/RoutePanel/Images/addpoint.svg);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: left;
    background-position-x: 100px;*/
    font: normal normal 600 14px/19px Segoe UI;
    background-color: #79B110;
    margin-bottom: 10px;
    /*margin-left: 10px;*/
}

    #routePanelGroupListNewButton > .dx-button-content{
        padding: 0 0 0 0;
    }

    #routePanelGroupAssignButton {
        width: 180px;
        font: normal normal 600 14px/19px Segoe UI;
        letter-spacing: 0px;
        color: #333333;
    }

.routePanelGroupAlert {
    color: #7f7f7f;
    font-weight: 600;
    background-image: url(/plugins/app25/RoutePanel/Images/info.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    display: table-cell;
    padding: 4px 0 4px 45px;
    font-size: 11px;
}

    .routePanelGroupAlert b {
        color: #464545;
    }

.RouteNewGroupDefinitionTree {
    float: left;
    width: 100%;
    height: 550px;
    margin-top: 10px;
}

.RoutePanelEditGroupPopup {
    overflow: hidden;
}

.RouteNewGroupDefinitionTreeLine {
    width: 100%;
    height: 36px;
    line-height: 36px;
}

.RouteNewGroupDefinitionTreeLineLabel {
    float: left;
    width: calc(100% - 125px);
    width: -moz-calc(100% - 125px);
    width: -webkit-calc(100% - 125px);
    height: 100%;
    text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap;
}

.RouteNewGroupDefinitionTreeLineButton {
    float: right;
    width: 36px;
    margin: 0 5px 0 0 !important;
    border: none;
}

    .RouteNewGroupDefinitionTreeLineButton .dx-icon {
        margin-right: 0 !important;
        color: #1A8CF2;
    }

.RouteNewGroupDefinitionTree.dx-treeview .dx-treeview-node.dx-treeview-item-with-checkbox .dx-checkbox,
.RouteNewGroupDefinitionTree.dx-treeview .dx-treeview-toggle-item-visibility {
    margin-top: 5px;
}

.RouteNewGroupDefinitionTree.dx-treeview .dx-treeview-node:not(.dx-treeview-item-with-checkbox).dx-state-focused > .dx-treeview-item {
    background-color: #f5f5f5;
}

    .RouteNewGroupDefinitionTree.dx-treeview .dx-treeview-node:not(.dx-treeview-item-with-checkbox).dx-state-focused > .dx-treeview-item * {
        color: #000;
    }

.routeNewGroupSearchTitle {
    text-align: right;
    font-weight: bold;
    padding: 0 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 30%;
}

.routePanelNewGroupTextInput {
    height: 34px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding: 4px 8px 6px;
    /* font-weight: 600; */
    color: #333333;
    box-sizing: border-box;
}

    .routePanelNewGroupTextInput[selected] {
        font-weight: 600;
        border: none;
        cursor: pointer;
    }

    .routePanelNewGroupTextInput[resulted] {
        border-radius: 4px 4px 0 0;
    }

#routePanelGroupNameAlert {
    color: #ff0e0e;
    font-size: 11px;
    font-weight: bold;
    position: absolute;
    margin-top: 2px;
    display: none
}

.NewGroupTable {
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.NewGroupTableBottom {
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.RoutePanel_SaveCancel {
    margin-top: 10px;
    text-align: right;
}

.RouteGroupsListTitle {
    font: normal normal normal 14px/19px Segoe UI;
    letter-spacing: 0px;
    color: #949494;
    opacity: 1;
    height: 35px;
}

.RouteNewGroupDefinitionTree {
    float: left;
    width: 100%;
    height: 550px;
    margin-top: 10px;
}

.RouteNewGroupDefinitionTreeLine {
    width: 100%;
    height: 36px;
    line-height: 36px;
}

.RouteNewGroupDefinitionTreeLineLabel {
    float: left;
    width: calc(100% - 125px);
    width: -moz-calc(100% - 125px);
    width: -webkit-calc(100% - 125px);
    height: 100%;
    text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap;
}

.RouteGroupDefinitionTreeLineButton {
    float: right;
    width: 36px;
    margin: 0 5px 0 0 !important;
    border: none;
}

    .RouteGroupDefinitionTreeLineButton .dx-icon {
        margin-right: 0 !important;
        color: #1A8CF2;
    }

.RouteGroupDefinitionTree {
    /*overflow-x: scroll;
    display: inline-block;
    overflow-y:hidden;*/
}

    .RouteGroupDefinitionTree.dx-treeview .dx-treeview-node.dx-treeview-item-with-checkbox .dx-checkbox,
    .RouteGroupDefinitionTree.dx-treeview .dx-treeview-toggle-item-visibility {
        margin-top: 5px;
    }

    .RouteGroupDefinitionTree.dx-treeview .dx-treeview-node:not(.dx-treeview-item-with-checkbox).dx-state-focused > .dx-treeview-item {
        background-color: #f5f5f5;
    }

        .RouteGroupDefinitionTree.dx-treeview .dx-treeview-node:not(.dx-treeview-item-with-checkbox).dx-state-focused > .dx-treeview-item * {
            color: #000;
        }

    .RouteGroupDefinitionTree.dx-treeview .dx-treeview-search {
        width: 300px;
        margin-bottom: 15px;
        z-index: 2;
    }

    .RouteGroupDefinitionTree > .dx-scrollable > .dx-scrollable-wrapper > .dx-scrollable-container {
        overflow-x: auto;
        display: flex;
        flex-flow: column wrap;
    }

.FlexElement {
    display: flex;
    justify-content: space-between;
}

.routeGroupName {
    max-width: 102px;
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    width: 102px;
    font-size: 12px;
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Verdana, sans-serif;
}

    .routeGroupName > div {
        max-height: 48px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: initial;
    }

        

.RouteParentRouteLineCheck {
    /*width: 80%;*/
    text-align: left;
    position: static !important;
    float: left;
    /*white-space: nowrap;*/
    /*word-break: break-all;*/
}

.RouteParentRouteLineNode {
    width: 65px;
    text-align: right;
    float: right;
    flex: none;
}

.RouteParentRouteLineCheck > .dx-checkbox-container > .dx-checkbox-text {
    word-break: break-word;
    white-space: nowrap;
}

.ChkRouteList {
    margin: 0px 0px 0px 8px;
}
/*PURE JS TREE*/
.RouteGroupsTree {
    width: 420px;
    /*overflow-x: auto;*/
    display: flex;
    flex-flow: column wrap;
}

    .RouteGroupsTree li {
        list-style-type: none;
        list-style: none;
    }

.routeGroupParent {
    display: flex;
    justify-content: space-between;
    font: normal normal normal 14px/19px Segoe UI;
    height: 54px;
    padding-right: 15px;
}

.routeGroupLeft {
    white-space: nowrap;
    position: static !important;
    font: normal normal normal 14px/19px Segoe UI;
    padding-top: 15px;
}

.routeGroupRight {
    white-space: nowrap;
    flex: none;
    width: 65px;
    text-align: right;
    float: right;
    font: normal normal normal 14px/19px Segoe UI;
    padding-top: 15px;
}

.routeGroupLeft > .dx-checkbox-container > .dx-checkbox-text {
    white-space: nowrap;
}

.routeGroupLeft > .dx-checkbox-container {
    height: auto;
    padding-left: 5px;
}

.RouteGroupsTree ul {
    padding-left: 20px;
}

.firstTier {
    padding-left: 0px !important;
}

.RouteGroupsTree ul:nth-child(0) {
    padding-left: 0px;
}

.routeGroupFirstTier {
    font: normal normal bold 14px/19px Segoe UI;
}

/*.parent_li {
    list-style-type: disclosure-closed !important;
}*/
/*.RouteGroupsTree li {
    list-style: none;
    position: relative;
    padding: 6px 0 0 20px;
}

.RouteGroupsTree ul li:before {
    background-image: url('/plugins/app25/RoutePanel/Images/down.svg');
    background-repeat: no-repeat;
    background-size: 18px;
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 8px;
}

.RouteGroupsTree ul li:before {
    background-position: 0px -16px;
}*/
.contentOdd {
    background-color: #F5F5F5;
}

.contentEven {
    background-color: #FFFFFF;
}

.routeTable:not([filtered]) tbody tr:nth-child(4n-1) {
    background-color: #F5F5F5;
}

.routeTable{
    padding-left:20px;
    width:400px !important;
}
.routeGroupsRoot {
    line-height: 54px;
    padding-left: 10px;
}

.parent_li > .contentOdd::before {
    content: "\25BC";
    height: 16px;
    width: 16px;
    display: block;
    position: absolute;
    top: 17px;
    left: 5px;
    transform: rotate(-90deg);
}

.parent_li > .contentEven::before {
    content: "\25BC";
    height: 16px;
    width: 16px;
    display: block;
    position: absolute;
    top: 17px;
    left: 5px;
    transform: rotate(-90deg);
}

.parent_li > .contentOdd.active::before {
    transform: rotate(0deg);
}

.parent_li > .contentEven.active::before {
    transform: rotate(0deg);
}

.RouteGroupsTree li > .contentOdd {
    padding-left: 24px;
    position: relative;
}


.RouteGroupsTree li > .contentEven {
    padding-left: 24px;
    position: relative;
}


.routeGroupOther {
    padding-left: 32px;
    color: #333;
}

/*NEW DESIGN*/

.RouteGroupDefinitionEditTreeListItem {
    float: left;
    width: 100%;
    height: 100%;
}

.RouteGroupDefinitionContainer {
    float: left;
    width: 100%;
    height: 100%;
}

.RouteGroupDefinitionUserListGrid {
    width: 100%;
    height: 95%;
    float: left;
}

.RouteGroupDefinitionUserListGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 10px;
}

.RouteGroupDefinitionUserListGridHeaderCount {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 10px;
    text-align: right;
}

.RouteGroupDefinitionUserListGridContainer {
    width: 100%;
    height: 95%;
    float: left;
}

.RouteGroupDefinitionUserListGridHeader {
    width: 100%;
    float: left;
    height: 5%;
}

.RouteGroupDefinitionUserListButtonContainer {
    width: 100%;
    float: right;
    height: 5%;
}

.RouteGroupDefinitionEditContainer {
    width: 100%;
    height: 100%;
}

.RouteGroupDefinitionEditGridContainer {
    width: 100%;
    height: 100%;
}

.RouteGroupDefinitionEditSourceGridContainer {
    width: 48%;
    height: 100%;
    float: left;
    margin-top: 84px;
}

.RouteGroupDefinitionEditSourceGridHeader {
    width: 100%;
    float: left;
}

.RouteGroupDefinitionEditSourceGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
}

.RouteGroupDefinitionEditSourceGridHeaderCountInfo {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    margin-right: 0px;
    text-align: right;
}

.RouteGroupDefinitionEditSourceGrid {
    width: 100%;
    height: calc(100% - 71px);
    height: -webkit-calc(100% - 71px);
    height: -moz-calc(100% - 71px);
    float: left;
}

.RouteGroupDefinitionEditButtonContainer {
    width: 4%;
    height: 100%;
    float: left;
    padding-left: 13px;
}

.RouteGroupDefinitionEditAddButton {
    position: relative;
    top: calc(50% - 56px);
    top: -webkit-calc(50% - 56px);
    top: -moz-calc(50% - 56px);
}

.RouteGroupDefinitionEditRemoveButton {
    position: relative;
    top: calc(50% - 46px);
    top: -webkit-calc(50% - 46px);
    top: -moz-calc(50% - 46px);
}

.RouteGroupDefinitionEditTargetGridContainer {
    width: 47%;
    height: 100%;
    float: left;
    margin-left:5px;
}

.RouteGroupDefinitionEditTargetGridHeader {
    width: 100%;
    height: 40px;
    float: left;
}

.RouteGroupDefinitionEditTargetGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
}

.RouteGroupDefinitionEditTargetGridHeaderCountInfo {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    margin-right: 0px;
    text-align: right;
}

.RouteGroupDefinitionEditTargetGridNav {
    width: 100%;
    height: 20px;
    float: left;
}

.RouteGroupDefinitionEditGroupName {
    float: left;
    width: 237px;
    height: 36px;
    margin-top: 5px;
}

.RouteGroupDefinitionEditTargetGrid {
    width: 100%;
    height: calc(100% - 71px);
    height: -webkit-calc(100% - 71px);
    height: -moz-calc(100% - 71px);
    float: left;
    margin-top: 10px;
}

.RouteGridDistanceCell {
    background-image: url(/plugins/app25/RoutePanel/Images/range.svg);
}

.RouteGridDurationCell {
    background-image: url(/plugins/app25/RoutePanel/Images/duration.svg);
}

#routePanelListButtons > .dx-button > .dx-button-content > .ion-upload {
    transform: scale(1.3, 1.3);
}

.RoutePanelNewGroupPopup {
    float: left;
    width: 100%;
    height: 100%;
}


    .RoutePanelNewGroupPopup .dx-treelist .dx-row > td {
        padding-top: 15px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
        padding-bottom: 15px !important;
    }

/* Route Panel Vehicle Info*/

#routePanelListSearchVehicleBox {
    width: 100%;
    height: 34px;
}

#routePanelListVehicleBar {
    width: 100%;
    display: inline-flex;
    padding-top: 10px;
    position: relative;
    z-index: 1;
    background-color: white;
}

#routePanelListVehicleContainer {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    padding: 0 0px;
    bottom: 0;
    box-sizing: border-box;
    overflow: auto;
}

    #routePanelListVehicleContainer table {
        width: 100%;
        border-spacing: 0;
        /*border-bottom: 1px solid #dcdcdc;*/
    }

        #routePanelListVehicleContainer table td {
            word-break: break-all;
        }

            #routePanelListVehicleContainer table td .routePanelListSeperator {
                left: -2px;
                height: 100%;
            }

        #routePanelListVehicleContainer table tr {
            height: 48px;
        }

            #routePanelListVehicleContainer table tr:not(.routePanelDetailRow) {
                cursor: pointer;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

        #routePanelListVehicleContainer table:not([filtered]) tbody tr:nth-child(4n-1) {
            background-color: #F5F5F5;
        }

        #routePanelListVehicleContainer table tr[selected] {
            box-shadow: 0px 3px 6px #00000029;
        }

        #routePanelListVehicleContainer table tr:not([style*="display: none"])[selected] + tr {
            display: table-row;
        }

        #routePanelListVehicleContainer table tr[selected] + tr td {
            position: relative;
            height: 80px;
            border-top: 1px solid #dcdcdc;
            border-bottom: 1px solid #dcdcdc;
        }

        #routePanelListVehicleContainer table td:nth-child(1) {
            width: 10%;
            text-align: left;
        }

        #routePanelListVehicleContainer table td:nth-child(2) {
            font-weight: bold;
            padding-right: 10px;
        }

        #routePanelListVehicleContainer table td:nth-child(3), #routePanelListVehicleContainer table td:nth-child(4) {
            width: 102px;
            font: normal normal normal 12px/14px Segoe UI;
        }

            #routePanelListVehicleContainer table td:nth-child(3) div:only-child, #routePanelListVehicleContainer table td:nth-child(4) div:only-child {
                position: relative;
            }



            #routePanelListVehicleContainer table td:nth-child(3) .routePanelListItemValue {
                background-image: url(/plugins/app25/RoutePanel/Images/range.svg);
            }

            #routePanelListVehicleContainer table td:nth-child(4) .routePanelListItemValue {
                background-image: url(/plugins/app25/RoutePanel/Images/duration.svg);
            }

.shareVehiclesLinkContainer
{

}

.shareVehiclesLinkPeriod {
    width: 96%;
}

.shareVehiclesLinkMail {
    width: 96%;
    margin: 0px 0px 14px;
}

.shareVehiclesLinkGSM {
    width: 96%;
}

.shareVehiclesLinkContainer .dx-popup-title .dx-closebutton .dx-icon {
    display: none;
}

.shareVehiclesLinkContainer .dx-popup-title {
    text-align: right;
    font: normal normal bold 19px/26px Segoe UI;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    border-bottom: 1px solid #fff !important;
}


.rightGrid {
    width: 48%;
    height: 92%;
    float: right;
    opacity: 1;
}
.leftGrid {
    width: 42%;
    height: 92%;
    float: left;
    opacity: 1;
}
.shareVehiclesLinkContainer .dx-datagrid-header-panel .dx-toolbar {
    margin-bottom: 0px !important;
}

.validityPeriodText {
    text-align: left;
    font: normal normal bold 14px/19px Segoe UI;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    margin:0px 0px 12px 0px;
}
.deviceGrid {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    opacity: 1;
    height: 95% !important;
}
.mailGsmBox {
    height: 61%;
    margin: 50px 0px 0px 0px;
}

.shareVehiclesLinkContainer .dx-placeholder {
    font: normal normal normal 14px/19px Segoe UI !important;
    letter-spacing: -0.28px !important;
    color: #333333 !important;
    opacity: 1 !important;
}
.buttonGroupBox {
    justify-content: space-around;
    display: flex;
    position: absolute;
    bottom: 36px;
    width: 49%;
    margin-left: -8px;
}

.shareVehiclesLinkContainer .dx-datagrid .dx-row-alt > td, .dx-datagrid .dx-row-alt > tr > td {
    background-color: transparent !important;
    border-top: 1px solid #f5f5f5 !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.shareVehiclesLinkContainer .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td, .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td, .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td, .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td {
    background-color: transparent !important;
    color: #333;
}

.dateRangeBox {
    display: none;
}

.shareVehiclesLinkSave {
  width:120px
}
.shareVehiclesLinkCancel {
    width: 120px
}

.startDateBox {
    margin-left: 3px;
}
.endDateBox {
    margin-left: 26px;
}

.startDateIcon {
    background-image: url(/plugins/app25/ShareVehiclesLinkPopup/Images/clock_icon.svg);
    height: 16px;
    width: 16px;
    background-position: center;
    background-repeat: no-repeat;
    margin: 14px 0px 0px 3px;
}
.dateText {
    text-align: right;
    font: normal normal bold 14px/19px Segoe UI;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    margin: 14px 4px;
}

.endDateText {
    text-align: left;
    font: normal normal bold 14px/19px Segoe UI;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    margin: 14px 4px;
    margin-left: 66px;
}

.dateStartGroupBox {
    display: none;
}

.endDateIcon {
    background-image: url(/plugins/app25/ShareVehiclesLinkPopup/Images/clock_icon.svg);
    height: 16px;
    width: 16px;
    background-position: center;
    background-repeat: no-repeat;
    margin: 10px 0px 0px 0px;
}

.deviceGridSummary {
    text-align: left;
    font: normal normal bold 11px/19px Segoe UI;
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
    padding: 9px 0px 0px 0px;
    float: right;
}


.StreamaxDVR {
    float: left;
    width: 100%;
    height: calc(100% - 40px);
    height: -webkit-calc(100% - 40px);
    height: -moz-calc(100% - 40px);
    overflow-y: hidden;
    overflow-x: hidden;
    margin-top: 4px;
}

.StreamaxDVRLiveWrapper {
    float: left;
    width: 100%;
    height: 410px;
}

.video-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 4px solid #ccc;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.IFrameDVRWrapper {
    position: relative;
    float: left;
    width: 100%;
    height: 410px;
}

#availableTimeChart {
    visibility:hidden;
    height:180px;
    width:100%;
}

#StreamaxTabControl {
    width: 100%;
    height: 100%;
    background-color: white;
}

    #StreamaxTabControl .dx-tabs {
        border: none;
    }

    #StreamaxTabControl .dx-tab {
        left: 15px;
    }

    #StreamaxTabControl .dx-tab-selected {
        border-top: 1px solid #ddd;
    }

    #StreamaxTabControl .dx-multiview-wrapper {
        border: none;
        border-top: 1px solid #ddd;
    }

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.StreamaxTabContent {
    height: 100%;
    width: 100%;
    padding: 15px;
}

.StreamaxDVRVideoContainer {
    float: left;
    width: 214px;
    height: 200px;
    border: #ddd 1px solid;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background: center center #f6f6f6 no-repeat;
    cursor: pointer;
    position: relative; 
}

    .StreamaxDVRVideoContainer[channel][leftmargin] {
        margin-left: 2px;
    }

    .StreamaxDVRVideoContainer[channel][topmargin] {
        margin-top: 2px;
    }

    .StreamaxDVRVideoContainer[active="true"] {
        background-image: url(/plugins/app25/StreamaxDVR/active.png);
    }

    .StreamaxDVRVideoContainer[active="false"] {
        background-image: url(/plugins/app25/StreamaxDVR/passive.png);
    }

.IFrameDVRVideoContainer {
    float: left;
    width: 214px;
    height: 200px;
    border: #ddd 1px solid;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background: center center #f6f6f6 no-repeat;
    cursor: pointer;
}

.IFrameDVRVideoContainer[channel][leftmargin] {
    margin-left: 2px;
}

.IFrameDVRVideoContainer[channel][topmargin] {
    margin-top: 2px;
}

.IFrameDVRVideoContainer[active="true"] {
    background-image: url(/plugins/app25/StreamaxDVR/active.png);
}

.IFrameDVRVideoContainer[active="false"] {
    background-image: url(/plugins/app25/StreamaxDVR/passive.png);
}

.StreamaxDVRChannelNo {
    position: relative;
    top: 49%;
    margin-right: 90px;
    font-size: 20px;
    font-weight: bold;
    color: #ddd;
    text-align: center;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.StreamaxDVRVideoContainer[active="false"]
.StreamaxDVRChannelNo {
    display: none;
}

.IFrameDVRVideoContainer[active="false"]
.StreamaxDVRChannelNo {
    display: none;
}

.IFrameDVRVideo {
    position: relative;
    width: 212px;
    height: 198px;
    object-fit: fill;
}

.StreamaxDVRProgressLine {
    float: left;
    width: 100%;
    margin-top: 148px;
}

    .StreamaxDVRProgressLine[history] {
        margin-left: 30px;
        width: calc(100% - 60px);
        margin-top: 210px;
    }

.StreamaxDVRProgressBar {
    float: left;
    margin-left: 10px;
}

    .StreamaxDVRProgressBar .dx-progressbar-range {
        border: 1px solid #57b43d;
        background-color: #57b43d;
    }

.StreamaxDVRCancelButton {
    float: left;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    background: url(/plugins/app25/StreamaxDVR/close.png) -16px center no-repeat;
    cursor: pointer;
}

.StreamaxDVRVideo {
    position: relative;
    top: -16px;
    width: 212px;
    height: 198px;
    object-fit: fill;
}

    .StreamaxDVRVideo[fullsize="true"] {
        width: 430px;
        height: 400px;
    }

    .StreamaxDVRVideo[history] {
        top: -10px;
    }

.UrlEmptyWarning {
    position: relative;
    top: 20px;
    text-align: center;
    font-size: 14px;
    margin: 5px 5px 5px 5px;
    font-weight: bold;
    color: #DC143C;
    text-align: center;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.HistoryUrlEmptyWarning {
    position:absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 14px;
    font-weight: bold;
    color: #DC143C;
    text-align: center;
    margin-top:100px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.ChannelName {
    font-size: 32px;
    font-weight: bold;
    color: #a9a69f;
    text-align: center;
    top: 30px;
    right: 5px;
    width: 60px;
    height: 60px;
    position: absolute;
    z-index: 9999;
    width: 50px;
    height: 50px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.RemainingDuration {
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    bottom: -3px;
    left: 2px;
    width: 60px;
    height: 60px;
    position: absolute;
    z-index: 5001;
    width: 15px;
    height: 15px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.StreamaxDVRSnapShot {
    position: relative;
    width: 36px;
    height: 36px;
    top: -228px;
    opacity: 0.5;
    border: none;
    border-radius: 0;
}

    .StreamaxDVRSnapShot[fullsize="true"] {
        top: -446px;
    }

    .StreamaxDVRSnapShot[history] {
        top: -440px;
    }

.StreamaxDVRCloseButton {
    position: relative;
    margin-top: -27px;
    margin-left: 196px;
    width: 16px;
    height: 16px;
    background: url(/plugins/app25/StreamaxDVR/close.png) 0px center no-repeat;
    cursor: pointer;
    z-index: 5002;
}
    .StreamaxDVRCloseButton.hidden {
        display: none !important;
    }

.IFrameDVRCloseButton {
    position: absolute;
    margin-left: 196px;
    width: 16px;
    height: 16px;
    background: url(/plugins/app25/StreamaxDVR/close.png) 0px center no-repeat;
    cursor: pointer;
    z-index: 5002;
}

.StreamaxDVRCloseButton[fullsize="true"] {
    margin-left: 411px;
    display: none !important;
}

    .StreamaxDVRCloseButton[history] {
        position: absolute;
        width: 16px;
        height: 16px;
        top: 0;
        left: 415px;
        margin: 0;
        z-index: 5008;
        background: url(/plugins/app25/StreamaxDVR/close.png) 0px center no-repeat;
    }

.StreamaxDVRHistoryWrapper {
    float: left;
    width: 100%;
    margin-top: 4px;
}

.StreamaxDVRHistoryVideoContainer {
    float: left;
    width: 100%;
    height: 100%;
}

.StreamaxDVRHistoryButton {
    float: right;
}

.StreamaxDVRHistoryPanel {
    float: left;
    width: 100%;
}

.StreamaxDVRHistoryDateTypeSelector {
    float: left;
    width: 70%;
}

.StreamaxDVRHistoryStartButton {
    float: left;
    margin-left: 10px;
    width: calc(30% - 10px);
    width: -webkit-calc(30% - 10px);
    width: -moz-calc(30% - 10px);
}

.StreamaxDVRHistoryDateRange {
    float: left;
    width: 100%;
    margin-top: 10px;
}

.StreamaxDVRHistoryStartDate {
    float: left;
    width: calc(50% - 5px);
    width: -webkit-calc(50% - 5px);
    width: -moz-calc(50% - 5px);
}

.StreamaxDVRHistoryEndDate {
    float: left;
    margin-left: 10px;
    width: calc(50% - 5px);
    width: -webkit-calc(50% - 5px);
    width: -moz-calc(50% - 5px);
}

.StreamaxDVRHistoryDownloadButton {
    float: right;
    margin-top: 10px;
    width: calc(30% - 10px);
    width: -webkit-calc(30% - 10px);
    width: -moz-calc(30% - 10px);
}

.StreamaxDVRHistoryCancelButton {
    float: right;
    margin-top: 10px;
    width: calc(30% - 10px);
    width: -webkit-calc(30% - 10px);
    width: -moz-calc(30% - 10px);
}

.StreamaxDVRHistoryLoadingButton {
    float: left;
    margin-top: 10px;
    width: calc(30% - 10px);
    width: -webkit-calc(30% - 10px);
    width: -moz-calc(30% - 10px);
}

.StreamaxDVRFlvJsError {
    float: left;
    width: 100%;
    margin-top: 150px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.StreamaxDVRHistoryErrorLine {
    float: left;
    margin-top: 5px;
    color: red;
}

StreamaxDVRVideo::-webkit-media-controls-fullscreen-button {
}

StreamaxDVRVideo::-webkit-media-controls-play-button {
    display: none;
}

StreamaxDVRVideo::-webkit-media-controls-timeline {
    display: none;
}

StreamaxDVRVideo::-webkit-media-controls-current-time-display {
}

StreamaxDVRVideo::-webkit-media-controls-time-remaining-display {
}

StreamaxDVRVideo::-webkit-media-controls-mute-button {
}

StreamaxDVRVideo::-webkit-media-controls-toggle-closed-captions-button {
}

StreamaxDVRVideo::-webkit-media-controls-volume-slider {
}

#StreamaxDVRNewHistoryButton {
    float: right;
    margin: 7px 0 6px;
}

#StreamaxHistoryPopupContent {
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 10px;
    background-color: #f7f7f7;
}

#StreamaxHistoryHeader {
    height: 50px;
}

#StreamaxAlarmHeader {
    height: 50px;
}

#newRecordingTaskButton {
    float: right;
}

#newRecordingTaskPopover {
    position: absolute;
    border-radius: 5px;
    right: 0;
    top: 40px;
    box-shadow: 0px 3px 6px #00000029;
    border: 1px solid #DCDCDC;
    display: none;
    padding: 20px;
    background-color: white;
    z-index: 999;
}

.newRecordingTaskButtonArea {
    width: 100%;
    bottom: 0px;
    margin-bottom: 5px;
    position: absolute;
    padding: 5px;
    right: 0px;
}

    .newRecordingTaskButtonArea div {
        /*margin-left: 10px;*/
        float: right;
        width: 100px;
    }

.newRecordingTaskFilterArea {
}

.newRecordingTaskFilterRow {
    width: 100%;
    display: inline-block;
    margin-bottom: 5px;
}

    .newRecordingTaskFilterRow table {
        width: 100%;
    }

.newRecordingChannelIcon {
    background-image: url(/plugins/app25/StreamaxDVR/dvricon.png);
    height: 32px;
    width: 41px;
    display: inline-block;
    margin-bottom: -2px;
    margin-left: 5px;
    background-repeat: no-repeat;
    background-position: left;
    text-align: right;
    padding: 5px;
    font-weight: bold;
    background-size: 45%;
    margin-left: 8px;
}

.newRecordingTaskFilterItem {
}

.newRecordingTaskFilterHeader {
    margin-bottom: 5px;
    color: #959595;
    font-size: 13px;
}

.newRecordingTaskFilterItemDouble {
    width: 50%;
    float: right;
}

.newRecordingTaskHeader {
    float: left;
    color: #475867;
    font-size: 18px;
    font-weight: bold;
    margin-top: 7px;
    margin-left: 10px;
}

#streamaxAlarmDatePicker {
    width: 160px;
    float: right;
    height: 34px;
    margin: 5px;
}

#newRecordingTaskDetailedRow {
    margin-bottom: 5px;
}

/*asda*/

.tabItemClickable {
    cursor: pointer;
}

.taskRecordItemActionArea {
    /*border-left: 1px solid #DDDDDD;*/
    position: relative;
}

.taskRecordItemInfo {
    color: #475867;
    text-align: right;
    padding-right: 15px;
    font-size: 12px;
    padding-top: 13px;
    width: 100%;
    vertical-align: baseline;
    font-weight: bold;
}

.taskRecordProgressBar {
    width: 80%;
    height: 5px;
    background-color: #DCDCDC;
    border-radius: 4px;
    float: left;
    margin: 7px 5px 0 7px;
}

.alarmRecordProgressBar {
    width: 80%;
    height: 5px;
    background-color: #DCDCDC;
    border-radius: 4px;
    float: left;
    margin: 7px 5px 0 7px;
}

.taskRecordProgressValueBar {
    background-color: #00C1BA;
    width: 0%;
    height: 100%;
    border-radius: 4px;
}

.alarmRecordProgressValueBar {
    background-color: #00C1BA;
    width: 0%;
    height: 100%;
    border-radius: 4px;
}

.taskRecordProgressText {
    float: left;
    /* font-weight: bold; */
    font-size: 13px;
}

.alarmRecordProgressText {
    float: left;
    /* font-weight: bold; */
    font-size: 13px;
}

.taskRecordItemDate {
    font-weight: bold;
    font-size: 13px;
}

.alarmRecordItemDate {
    position: relative;
    font-weight: bold;
    font-size: 13px;
    color: red;
}

    .alarmRecordItemDate .tooltiptext {
        visibility: hidden;
        width: 180px;
        background-color: lightgray;
        color: #475867;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        /* Position the tooltip */
        position: absolute;
        z-index: 1000;
        top: 100%;
        left: 50%;
        margin-left: -60px;
    }

    .alarmRecordItemDate:hover .tooltiptext {
        visibility: visible;
    }

.taskRecordItemCollapsedIcon {
    transform: matrix(0, 1, 1, 0, 0, 0);
    background: url(/plugins/app25/StreamaxDVR/arrow.png);
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 7px;
    margin-right: 10px;
}

.taskRecordItemsContainer {
    /*border-top: 1px solid #DDDDDD;*/
}

    .taskRecordItemsContainer table {
        width: 100%;
        border-collapse: collapse;
    }

        .taskRecordItemsContainer table tr td {
            height: 43px;
        }

.taskItemLeftBorder {
    width: 1px;
    height: 30px;
    position: absolute;
    left: 0;
    background-color: #DDDDDD;
    top: 6px;
}

.alarmItemLeftBorder {
    width: 1px;
    height: 30px;
    position: absolute;
    left: 0;
    background-color: #DDDDDD;
    top: 6px;
}



.taskItemActionButton {
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    cursor: pointer;
}
    .taskItemActionButton.alarmItemDownloadButton {
        background-image: url(/plugins/app25/StreamaxDVR/download_icon_small.png);
        width: 20px;
        margin-top: -5px;
        margin-right: 5px;
    }

    .taskItemActionButton.alarmRecordItemWatchButton {
        background-image: url(/plugins/app25/StreamaxDVR/play_icon.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        margin: 15px;
        cursor: pointer;
    }

    .taskItemActionButton.taskRecordItemCancelButton {
        background-image: url(/plugins/app25/StreamaxDVR/cancelicon.png);
    }

    .taskItemActionButton.taskRecordItemDeleteButton {
        background-image: url(/plugins/app25/StreamaxDVR/delete_icon.png);
    }

.taskItemHeaderTableRow {
    border-bottom: 1px solid #DDDDDD;
}

.taskItemContentTableRow {
    border-bottom: 1px solid #DDDDDD;
}

    .taskItemContentTableRow td {
        /*display: none;*/
    }

.taskItemDownloadItemContainer {
    position: relative;
    font-size: 13px;
}

.alarmItemDownloadItemContainer {
    position: relative;
    font-size: 13px;
}

.taskDownloadItem {
    margin: 10px auto;
    /*width: 66%;*/
    text-align: center;
}

.alarmDownloadItem {
    margin: 10px auto;
    /*width: 66%;*/
    text-align: center;
}

.alarmDownloadItemIcon {
    background-image: url(/plugins/app25/StreamaxDVR/dvricon.png);
    height: 20px;
    width: 32%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-top: 5px;
    margin-left: 20px;
}

    .alarmDownloadItemIcon.alarmDownloadNotReady {
        background-image: url(/plugins/app25/StreamaxDVR/dvricon_disabled.png);
    }

.taskDownloadItemIcon {
    background-image: url(/plugins/app25/StreamaxDVR/dvricon.png);
    height: 20px;
    width: 32%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-top: 5px;
    margin-left: 20px;
}

    .taskDownloadItemIcon.taskDownloadNotReady {
        background-image: url(/plugins/app25/StreamaxDVR/dvricon_disabled.png);
    }

.alarmDownloadItemNumber {
    font-weight: bold;
    color: #475867;
    float: left;
    margin-left: 110%;
    width: 21px;
}

.taskDownloadItemNumber {
    font-weight: bold;
    color: #475867;
    float: left;
    margin-left: 110%;
    width: 21px;
}

.alarmDownloadNotReady .alarmDownloadItemNumber {
    font-weight: normal;
    color: #DDDDDD;
}

.taskDownloadNotReady .taskDownloadItemNumber {
    font-weight: normal;
    color: #DDDDDD;
}

.taskDownloadItemLink {
    text-decoration: underline;
    color: #338CDB;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
}

    .taskDownloadItemLink.taskDownloadNotReady {
        text-decoration: none;
        color: #DDDDDD;
        cursor: default;
    }

.alarmDownloadItemLink {
    text-decoration: underline;
    color: #338CDB;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
}

    .alarmDownloadItemLink.alarmDownloadNotReady {
        text-decoration: none;
        color: #DDDDDD;
        cursor: default;
    }

.taskItemHeaderTableRow[data-taskstate="-5"] .taskRecordItemInfo,
.taskItemHeaderTableRow[data-taskstate="-4"] .taskRecordItemInfo,
.taskItemHeaderTableRow[data-taskstate="-3"] .taskRecordItemInfo,
.taskItemHeaderTableRow[data-taskstate="-1"] .taskRecordItemInfo,
.taskItemHeaderTableRow[data-taskstate="0"] .taskRecordItemInfo,
.taskItemHeaderTableRow[data-taskstate="1"] .taskRecordItemInfo {
    color: #00C1BA;
}

.taskItemHeaderTableRow[data-taskstate="3"] .taskRecordItemInfo {
    color: #24BC00;
}

.taskItemHeaderTableRow[data-taskstate="5"] .taskRecordItemInfo,
.taskItemHeaderTableRow[data-taskstate="2"] .taskRecordItemInfo,
.taskItemHeaderTableRow[data-taskstate="4"] .taskRecordItemInfo,
.taskItemHeaderTableRow[data-taskstate="6"] .taskRecordItemInfo,
.taskItemHeaderTableRow[data-taskstate="8"] .taskRecordItemInfo {
    color: #cc1741;
}

.taskItemHeaderTableRow[data-taskstate="10"] .taskItemActionState {
    cursor:pointer;
}

#newRecordingChannelTable td {
    max-width: 4px;
}


tr.taskItemHeaderTableRow:hover, tr.taskItemHeaderTableRow.selectedRow {
    background-color: #f6f6f6;
}

.screenReaderText {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.taskRecordEmptyInfo {
    width: 100%;
    height: 95%;
    background-color: white;
    position: absolute;
    font-size: 13px;
    color: #959595;
    display: none;
}

.taskRecordEmptyIcon {
    background-image: url(/plugins/app25/StreamaxDVR/dvr_info_icon.png);
    width: 10%;
    height: 13%;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-size: contain;
    margin-top: 12%;
    margin-bottom: 2%;
}

.taskRecortdEmptyText {
    width: 50%;
    margin: 0 auto;
    text-align: center;
}

.taskRecordLoadIndicator {
    margin: auto;
    height: 40px;
    width: 40px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

.taskRecordIndicatorText {
    position: absolute;
    left: -10px;
    text-align: center;
}

.taskRecordIndicatorIcon, .taskRecordIndicatorText {
    display: none;
}

.availableTimeChartLoadIndicator {
    margin: auto;
    height: 40px;
    width: 40px;
    top: 150px;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

.availableTimeChartIndicatorText {
    position: absolute;
    left: -10px;
    text-align: center;
}

.availableTimeChartIndicatorIcon, .availableTimeChartIndicatorText {
    display: none;
}

.VideoLoadIndicator {
    margin: auto;
    height: 40px;
    width: 40px;
    top: 8%;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

#taskCancelInformPopover {
    position: relative;
}

.taskCancelInformPopoverButtonContainer {
    width: 100%;
    display: inline-flex;
}

.taskCancelInformText {
    max-width: 200px;
    margin-bottom: 10px;
}

#taskCancelInformPopoverCancelButton {
    width: 100%;
    float: left;
    margin-right: 2.5px;
}

#taskCancelInformPopoverOkButton {
    width: 100%;
    float: left;
    margin-left: 2.5px;
}

#newRecordingTaskButtonAlertText {
    color: #cc1741;
    font-weight: 600;
    font-size: 12px;
    margin-top: 3px;
    display: none;
}

.StreamaxContentScrollview {
    border-top: 1px solid #DDDDDD;
}

.StreamaxAlarmContentScrollview {
    border-top: 1px solid #DDDDDD;
}

.taskItemCamContainer {
    float: left;
}

.newRecordingTaskButtonContainer {
    position: relative;
}

#StreamaxHistoryPopupPlayerPopover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}

#StreamaxHistoryPopupPlayerContent {
    position: absolute;
    width: 75%;
    height: 90%;
    background-color: white;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 5px;
}

#StreamaxHistoryPopupPlayerHeader {
    height: 40px;
    border-bottom: 1px solid #ddd;
    position: relative;
    background-color: white;
    border-radius: 5px 5px 0 0;
}

#StreamaxHistoryPopupPlayerHeaderText {
    font-size: 16px;
    font-weight: 500;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    margin: auto;
    height: 22px;
}

#StreamaxHistoryPopupPlayerHeaderCloseIcon {
    background-image: url(/plugins/app25/StreamaxDVR/closeicon.png);
    float: right;
    position: absolute;
    right: 15px;
    height: 17px;
    width: 17px;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 85%;
    background-position: center;
    z-index:9999;
}

#StreamaxHistoryPopupPlayerSelector {
    background-color: #f6f6f6;
    height: 15%;
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid #ddd;
}

#StreamaxHistoryPopupPlayerSelectorContainer {
    height: 100%;
    display: flex;
    padding: 0 10px;
    margin: 0 auto;
}

#StreamaxHistoryPopupPlayerSelectorContainerScroll {
    float: left;
    width: 100%;
    height: calc(100% - 10px);
    height: -webkit-calc(100%) !!important;
    height: -moz-calc(100% -50px);
}

.StreamaxHistoryPopupPlayerSelectorItem {
    background-color: #f6f6f6;
    margin: auto 5px;
    cursor: pointer;
    border: 1px solid #f6f6f6;
    position: relative;
}

    .StreamaxHistoryPopupPlayerSelectorItem:hover {
        border: 1px solid #ddd;
    }

.StreamaxHistorySelectorText {
    color: #bfb7b7;
    font-weight: bold;
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 50%;
    font-size: 16px;
}

.StreamaxHistorySelectorIcon {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url(/plugins/app25/StreamaxDVR/dvricon_disabled.png);
    height: 60%;
    width: 49%;
    top: 0;
    bottom: 0;
    left: 13px;
    right: 0;
    margin: auto;
}

.StreamaxHistoryPopupPlayerSelectorItem.selectedCamItem div.StreamaxHistorySelectorIcon {
    background-image: url(/plugins/app25/StreamaxDVR/dvricon.png);
}

.StreamaxHistoryPopupPlayerSelectorItem.selectedCamItem div.StreamaxHistorySelectorText {
    color: #475867;
}

#StreamaxHistoryPopupPlayer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15%;
    top: 40px;
}

#StreamaxHistoryPopupPlayerContainer {
    height: 100%;
    width: 100%;
    padding: 2px;
}

.StreamaxHistoryPopupPlayerItem {
    float: left;
    position: relative;
    margin-right:-4px;
}

#StreamaxHistoryPopupPlayerAlertText {
    color: #cc1741;
    font-weight: 600;
    font-size: 12px;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    display: table-cell;
    text-align: center;
    display: none;
}

.StreamaxHistoryPopupPlayerItemInner {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    right: 2px;
    margin: auto;
    border: 1px solid #ddd;
    background-color: #475867;
}

.taskItemActionState, .alarmItemDownloadButton{
    float:right;
}

.StreetViewContainer {
    position: absolute;
    right : 10px;
    bottom: 10px;
    width: 800px;
    height: 600px;
    background-color: #FFFFFF;
    border: 1px solid #d3d3d3;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
    z-index: 1600;
}

.StreetViewImageContainer {
    position: absolute;
    width:100%;
    height:100%;
    /*top: 40px;
    width: 800px;
    height: 560px;*/
    min-height: 200px;
    border: 1px solid #d3d3d3;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
    z-index: 1600;
}

.StreetViewCloseButton {
    position: absolute;
    top: 10px;
    right: 9px;
    border: white;
    z-index: 1650;
    width:43px;
    height:42px;

}

.StreetViewInvalidViewDisplayer { 
    position: absolute;
    color: red;
    z-index: 1700;
    float: left;
    width: 100%;
    margin-top: 250px;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
}

.StreetViewOuterContainer{
    position:relative;
    width:100%;
    height:100%;
}

.vehicleAlarms                              { height: calc(100% - 46px); margin-top: 10px; float: left; width: 100%; overflow: hidden; }
.vehicleAlarmsData                          { float: left; width: 100%; height: calc(100% - 170px); height: -webkit-calc(100% - 170px); height: -moz-calc(100% - 170px); overflow-x: hidden; overflow-y: auto; }
.vehicleAlarmsGraph                         { float: left; width: 100%; height: 160px; overflow: hidden; margin-top: 10px; }
.vehicleAlarmContainer                      { float: left; width: 100%; }
.vehicleAlarmContainer:nth-child(even)      { background-color: rgba(211, 211, 211, 0.2); }
.vehicleAlarmRow                            { float: left; width: calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); height: 22px; display: inline-block; margin-left: 10px; }
.vehicleAlarmRow:last-of-type               { margin-bottom: 10px; }
.vehicleAlarmHeader                         { float: left; width: calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); height: 28px; line-height: 28px; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap;  overflow: hidden; text-indent: 30px; font-size: 10pt; display: inline-block; margin-left: 10px; margin-top: 10px; margin-bottom: 10px; font-family:"segoe ui semibold"; }
.vehicleAlarmIcon                           { float: left; width: 28px; height: 28px; }
.vehicleAlarmTitle                          { float : left; width : 350px; height : 100%; }
.vehicleAlarmCell                           { float: left; width: 100px; height: 22px; line-height: 22px; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap;  overflow: hidden; }
.vehicleAlarmCell:first-of-type             { margin-left: 30px; }
.vehicleAlarmCell:not(:first-of-type)       { width: calc(100% - 140px); width: -webkit-calc(100% - 140px); width: -moz-calc(100% - 140px); margin-left: 10px; }
.dxc-tooltip                                { z-index: 2000; }
.backgroundTemp                             {width: 400px;}
.driverRow                                  {width: 100%;}
.titleDriverName                            {text-align: left;  font: normal normal bold 14px/19px Segoe UI; letter-spacing: 0px; color: #525252; opacity: 1;height: 16px;margin: 10px 0px 0px 0px;}
.driverName, .plateNumber {
    text-align: left;
    font: Bold 14px Segoe UI;
    letter-spacing: 0;
    color: #475867;
    opacity: 1;
    margin: 5px 3px 4px 0px;
    height: 22px
}
/*.cardNumber                                 {text-align: left; font: 12px Segoe UI;  letter-spacing: 0;   color: #475867;   opacity: 1;   padding: 1px 0px 4px 0px;height:16px}*/
.lastStatus                                 {text-align: right;font: normal normal bold 13px/17px Segoe UI;letter-spacing: 0px;opacity: 1; padding-top: 3px; margin-left: 30px;}
.lastStatusIsTestMode {
    text-align: right;
    font: normal normal bold 13px/17px Segoe UI;
    letter-spacing: 0px;
    color: #338CDB;
    opacity: 1;
    padding-top: 5px;
    margin-left:15px;
}
.iconContainer                              {padding-right: 70px;    float: left;}
.driveTresholdTime                          {text-align: left;    font: 11px Segoe UI;    letter-spacing: 0;    color: #A7A7A7;    opacity: 1;    padding-left: 8px;    padding-right: 5px;    max-width: 106px;}
.rectangle1                                 {width: 10px;    height: 9px;    background: #475867 0% 0% no-repeat padding-box;    opacity: 1;}
.rectangle2                                 {width: 8px;    height: 7px;    border: 1px solid #A7A7A7;    opacity: 0.5;}
.borders                                    {width: 182px;    height: 0px;    border: 0.5px solid #DDDDDD;    opacity: 1;    margin-top: 51px;}
.statesTimes                                {text-align: left;font: 12px/17px Segoe UI;letter-spacing: 0;color: #A7A7A7;opacity: 1; margin: 7px 0px 3px 31px;}
.timeRight {
    font: normal normal normal 13px/17px Segoe UI;
    letter-spacing: 0px;
    color: #A7A7A7;
    opacity: 1;
    text-align: left;
    padding: 2px
}
.TotalDrivingTime                           {text-align: left;   font: Bold 16px/21px Segoe UI;    letter-spacing: 0;    color: #475867;    opacity: 1;}
.dailySummaryEndText                        {text-align: left;    font: 600 13px/17px Segoe UI;    letter-spacing: 0;    color: #525252;    opacity: 1;    padding-left: 12px;    padding-top: 100px;}
.splitters                                  {width: 99%;    height: 0px;    border: 1px solid #f2eeee;    opacity: 1;   margin-top: 8px;}
.TotalDrivingTimeRed                        {text-align: right;    font: Bold 20px/27px Segoe UI;    letter-spacing: 0;    color: #FF0000;    opacity: 1;}
.driver1Row                                 {padding-left: 12px;    padding-top: 8px;    float: left;    width: 53%;    padding-bottom: 12px;}
.driver1LastState                            {padding-bottom: 35px;}
.dailyInfoLeft                              {padding-left: 12px;    float: left;    width: 50%;}
.driver1Icons                               { padding: 3px 4px 3px 0px;    min-width: 95px;}
.driverRowColor                             {background-color: #F6F6F6;}
.driverDailyInfoRow                         {padding-left: 12px;    float: left;    width: 55%;    padding-bottom: 8px;}
.drivingTimeLeft                            {float: right;    width: 45%;}
.info_icon                                  {float: right;    padding: 5px;}
.violationStatus1                           {float: right;}
.violationStatus2                           {float: right;}
.dailyStatus1                               {float: left;}
.dailyStatus2                               {float: left;}
.TachoDeviceInfoGridContainer               {display: inline-block; height: calc(100% - 20px) !important; overflow: auto !important;}
/*Colored Icons*/
.driveStatesIcon {
    background-image: url('/plugins/app25/TachoDeviceInfo/images/driver_icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    height: 24px;
    width: 24px;
    float: left;
    margin-right: 6px;
    background-size: contain;
    color: #80C911;
    text-align: left;
    font: normal normal bold 16px/21px Segoe UI;
    letter-spacing: 0px;
    opacity: 1;
}
.restStatesIcon {
    background-image: url('/plugins/app25/TachoDeviceInfo/images/rest_icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    height: 30px;
    width: 25px;
    float: left;
    margin-right: 6px;
    background-size: contain;
    color: #F81D1D;
    text-align: left;
    font: normal normal bold 16px/21px Segoe UI;
    letter-spacing: 0px;
    opacity: 1;
}

.workingStatesIcon {
    background-image: url('/plugins/app25/TachoDeviceInfo/images/working_icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    height: 21px;
    width: 25px;
    float: left;
    margin-right: 6px;
    background-size: contain;
    color: #FCBB0B;
    text-align: left;
    font: normal normal bold 16px/21px Segoe UI;
    letter-spacing: 0px;
    opacity: 1;
}
.prepareStatesIcon {
    background-image: url('/plugins/app25/TachoDeviceInfo/images/available_icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    height: 30px;
    width: 25px;
    float: left;
    margin-right: 6px;
    background-size: contain;
    color: #525252;
    text-align: left;
    font: normal normal bold 16px/21px Segoe UI;
    letter-spacing: 0px;
    opacity: 1;
}
/*Gray State Icons*/
.driveStateGray                               { background-image: url(/plugins/app25/TachoDeviceInfo/Images/surus_icon.svg);background-repeat: no-repeat; background-position: center;height: 30px; width: 25px; float: left;background-size: contain;}
.workStateGray                                {background-image: url(/plugins/app25/TachoDeviceInfo/Images/calisma_icon.svg); background-repeat: no-repeat; background-position: center;height: 30px; width: 25px;float: left;background-size: contain;}
.restStateGray                               {background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC41IiBoZWlnaHQ9IjE2LjUiIHZpZXdCb3g9IjAgMCAyMC41IDE2LjUiPjxkZWZzPjxzdHlsZT4uYXtmaWxsOiNhN2E3YTc7c3Ryb2tlOiNhN2E3YTc7c3Ryb2tlLXdpZHRoOjAuNXB4O308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iYSIgZD0iTTE3LjY2Niw1LjY2N0g3LjIyNUExLjA1NSwxLjA1NSwwLDAsMCw3LjMzMyw1LjJWNC44QTEuMTg2LDEuMTg2LDAsMCwwLDYuMDgyLDMuNjY3SDIuMjE0QTEuMTc2LDEuMTc2LDAsMCwwLDIsMy42ODVWLjY2N0EuNjY4LjY2OCwwLDAsMCwxLjMzMywwSC42NjdBLjY2OC42NjgsMCwwLDAsMCwuNjY3VjE1LjMzM0EuNjY5LjY2OSwwLDAsMCwuNjY3LDE2aC42NjdBLjY2OS42NjksMCwwLDAsMiwxNS4zMzNWMTFIMTh2NC4zMzNhLjY2OS42NjksMCwwLDAsLjY2Ny42NjdoLjY2N0EuNjY5LjY2OSwwLDAsMCwyMCwxNS4zMzNWOEEyLjMyLDIuMzIsMCwwLDAsMTcuNjY2LDUuNjY3Wk0yLjEzNCw0LjMzM0g2LjA4M0EuNDgxLjQ4MSwwLDAsMSw2LjYsNC44di40YS40ODEuNDgxLDAsMCwxLS41MTUuNDY3SDIuMTM0Wk0uNjY3LjY2N2guNjY3djVILjY2N1ptMSw5LjY2NmEuMzE1LjMxNSwwLDAsMC0uMzMzLjMzM3Y0LjY2N0guNjY3di05aDR2NFptMTcuNjY2LDVoLS42NjdWMTAuNjY2YS4zMTUuMzE1LDAsMCwwLS4zMzMtLjMzM2gtMTN2LTRIMTcuNjY2QTEuNjUxLDEuNjUxLDAsMCwxLDE5LjMzMyw4djcuMzMzWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4yNSAwLjI1KSIvPjwvc3ZnPg==);
                                              background-repeat: no-repeat; background-position: center; height: 30px; width: 25px;float: left;background-size: contain;}
.prepareStateGray                            {background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMC4xMTQiIHZpZXdCb3g9IjAgMCAyMCAyMC4xMTQiPjxkZWZzPjxzdHlsZT4uYSwuY3tmaWxsOm5vbmU7fS5he3N0cm9rZTojYTdhN2E3O3N0cm9rZS13aWR0aDoxLjhweDt9LmJ7c3Ryb2tlOm5vbmU7fTwvc3R5bGU+PC9kZWZzPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMjg4IDAuMTcxKSI+PGcgY2xhc3M9ImEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjI4OCAtMC4xNzEpIj48cmVjdCBjbGFzcz0iYiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIi8+PHJlY3QgY2xhc3M9ImMiIHg9IjAuOSIgeT0iMC45IiB3aWR0aD0iMTguMiIgaGVpZ2h0PSIxOC4yIi8+PC9nPjxsaW5lIGNsYXNzPSJhIiB4MT0iMTguMjUzIiB5Mj0iMTguMjUzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjM1MSAxLjA1MykiLz48L2c+PC9zdmc+);
                                              background-repeat: no-repeat;background-position: center; height: 30px; width: 25px; float: left;background-size: contain;}
#infosIcon                                   {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAASFBMVEUAAABFVWVIWGhHWGdGWGZHWGdGWGZGV2ZGV2dGV2ZGV2ZHWGd6hpGOmKKqsbi0u8G+xMnO09fV2dzc3+Lj5ejo6+z6+vv///+VNM0YAAAAC3RSTlMAMECfoL/Az9Dv8FMHzdcAAAB/SURBVHgBXY5BDoMwDATXxoSAKaUt4P//tCSxOWROo5FWWlR4mFSngRHQqM5IXmZ9mClK11LV9TjXtgVYKx+zXzOGNNmua28myNoxwcXM3q6RTrPdNYbbkzKkTxInvmaHn4irdvMqkgDQUoc35f5CiFaJAlCKkggBS1bNwij8AdZ7C+DkYO9cAAAAAElFTkSuQmCC);
                                              width: 18px;float: left;background-position: center;height: 18px;}
.processBarConcainer                         {width: 150px; background-color: #ece7e7;  border-radius: 5px;}
.processBarProcess                           {height: 5px; margin: 10px 0px 8px 0px; border-radius: 5px;}
.popbox                                      {display: none; position: absolute; z-index: 99999; width: 100px; padding: 10px;  background: #EEEFEB; color: #000000;  border: 1px solid #4D4F53; margin: 0px;}
.infoPopup                                   {font: 600 13px/17px Segoe UI; width: 308px;}
#scrollContainer                             {min-height: 950px; height: auto;}
.driverStatusText {
    text-align: left;
    font: normal normal normal 13px/17px Segoe UI;
    letter-spacing: 0px;
    color: #A7A7A7;
    opacity: 1;
    padding: 0px 0px 10px 0px;
    float: left;
}
.driverDateText {
    text-align: left;
    margin: 25px 4px 0px 0px;
    text-align: left;
    font: normal normal normal 13px/17px Segoe UI;
    letter-spacing: 0px;
    color: #475867;
    opacity: 1;
}


.driverTimeIcon                              {background-image: url(/plugins/app25/TachoDeviceInfo/Images/clock_icon.svg);height: 16px;width: 16px;background-position: center;background-repeat: no-repeat;float: left;margin-right: 3px;background-size: contain;}
.driverLastPackage                           {float:right;padding:85px 4px 4px 0px;}
.tacholabel{
    text-align: left;
    font: normal normal normal 13px/17px Segoe UI;
    letter-spacing: 0px;
    color: #A7A7A7;
    opacity: 1;
    float: left;
}
.warningViolationIcon {
    padding: 0px 0px 5px 40px;
    font: normal normal normal 12px/6px Segoe UI;
    letter-spacing: 0px;
    color: white;
    opacity: 1;
    background-image: url(/plugins/app25/TachoDeviceInfo/Images/warning_icon.svg);
    background-repeat: no-repeat;
    background-position: 18px 0px;
}

.warningViolation {
    height: 20px;
    margin: 35px 0px 0px 0px;
}

.driverRestDateText {text-align: right;font: normal normal bold 13px/17px Segoe UI;letter-spacing: 0px;color: #475867;opacity: 1;float: right;margin-bottom: 10px;}

.driveActivityIcon[type="0"] {
    height: 24px;
    width: 24px;
    background-image: url(/plugins/app25/TachoDeviceInfo/Images/dinlenme_color_icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    float: left;
}

.driveActivityIcon[type="1"] {
    height: 24px;
    width: 24px;
    background-image: url(/plugins/app25/TachoDeviceInfo/Images/hazirlik_color_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    float: left;
}

.driveActivityIcon[type="2"] {
    height: 24px;
    width: 24px;
    background-image: url(/plugins/app25/TachoDeviceInfo/Images/calisma_color_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    float: left;
}

.driveActivityIcon[type="3"] {
    height: 24px;
    width: 24px;
    background-image: url(/plugins/app25/TachoDeviceInfo/Images/surus_color_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    float: left;
}

.driveActivityIcon[type="-1"] {
    height: 24px;
    width: 24px;
    background-image: url(/plugins/app25/TachoDeviceInfo/Images/unknow.svg);
    background-repeat: no-repeat;
    background-position: center;
    float: left;
}


.cellDailyStatusText {
    float: left;
    padding: 2px 10px;
}

.weeklyRestText {
    text-align: left;
    font: normal normal normal 13px/17px Segoe UI;
    letter-spacing: 0px;
    color: #A7A7A7;
    opacity: 1;
    padding: 3px 6px 1px 0px;
}

.weeklyRestDate {
    text-align: right;
    letter-spacing: 0;
    color: #475867;
    opacity: 1;
    padding: 5px 0px 0px 0px;
    font: normal normal bold 13px/17px Segoe UI;
}

.dailyRestDate {
    text-align: right;
    letter-spacing: 0;
    color: #475867;
    opacity: 1;
    padding: 5px 0px 0px 0px;
    font: normal normal bold 13px/17px Segoe UI;
}

.dailyStartDate {
    text-align: right;
    letter-spacing: 0;
    color: #475867;
    opacity: 1;
    padding: 5px 0px 0px 0px;
    font: normal normal bold 13px/17px Segoe UI;
}

.tacoDeviceInfoPanel {
    margin-top: 8px;
}


.tacoDeviceInfoTitle {
    height: 100%;
    float: left;
    font-weight: bold;
    font-size: 13px;
    color: #465867;
    cursor: pointer;
}

.tacoDeviceInfoArrow {
    float: right;
    width: 29px;
    height: 29px;
    background: url(/plugins/app25/TachoDeviceInfo/Images/arrow.png) center center no-repeat;
    -webkit-transition: -webkit-transform .5s linear;
}

.tacoDeviceInfoExpander[expanded="false"] > .tacoDeviceInfoArrow {
    -webkit-animation: spinUp 0.5s linear;
    -moz-animation: spinUp 0.5s linear;
    animation: spinUp 0.5s linear;
}

.tacoDeviceInfoExpander[expanded="true"] > .tacoDeviceInfoArrow {
    -webkit-animation: spinDown 0.5s linear;
    -moz-animation: spinDown 0.5s linear;
    animation: spinDown 0.5s linear;
}

.tacoDeviceInfoExpanderInfo {
    float: left;
    width: 100%;
    height: 24px;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    -o-transition: height 0.5s;
    transition: height 0.5s;
}

.applicationFeedbackFooterPanel {
    float: left;
}

.tacoDeviceInfoExpander {
    padding: 8px 6px 5px 10px;
    justify-content: space-between;
    display: flex;
    border-bottom: 1px solid #dddddd;
    -moz-box-sizing: border-box;
    background-color: #F6F6F6;
    margin: 8px 0px 0px 0px;
}

.Driver2GridContainer .dx-datagrid-borders .dx-datagrid-rowsview, .dx-datagrid-headers + .dx-datagrid-rowsview {
    /* border-top: 1px solid #ddd; */
}

.DriverGridContainer .dx-datagrid-borders .dx-datagrid-rowsview, .dx-datagrid-headers + .dx-datagrid-rowsview {
    /* border-top: 1px solid #ddd; */
}
.TachoDeviceInfoGridContainer .lineDriver {
    width: 100%;
    height: 0px;
    border-bottom: 1px solid #0000001A;
    position: absolute;
}
.TachoDeviceInfoGridContainer .line2 {
    width: 100%;
    height: 5px;
    border-bottom: 1px solid #0000001A;
    position: absolute;
}
.TachoDeviceInfoGridContainer .titleDriver2 {
    text-align: left;
    font: normal normal bold 14px/19px Segoe UI;
    letter-spacing: 0px;
    color: #525252;
    opacity: 1;
}

.TachoDeviceInfoGridContainer .driverLastPackageDriver2 {
    float: right;
    padding: 76px 4px 2px 0px;
}

.violationDriver1 .dx-datagrid-toolbar-button.dx-datagrid-export-button.dx-button.dx-button-normal.dx-button-mode-contained.dx-widget.dx-button-has-icon, 
.violationDriver2 .dx-datagrid-toolbar-button.dx-datagrid-export-button.dx-button.dx-button-normal.dx-button-mode-contained.dx-widget.dx-button-has-icon,
.gridDriver1 .dx-datagrid-toolbar-button.dx-datagrid-export-button.dx-button.dx-button-normal.dx-button-mode-contained.dx-widget.dx-button-has-icon, .gridDriver2 .dx-datagrid-toolbar-button.dx-datagrid-export-button.dx-button.dx-button-normal.dx-button-mode-contained.dx-widget.dx-button-has-icon {
    background: url(/themes/images/xlsx.png) no-repeat center;
}

.violationDriver1 .dx-datagrid-export-button .dx-icon-export-excel-button:before,
.violationDriver2 .dx-datagrid-export-button .dx-icon-export-excel-button:before, .gridDriver1 .dx-datagrid-export-button .dx-icon-export-excel-button:before, .gridDriver2 .dx-datagrid-export-button .dx-icon-export-excel-button:before {
    content: "" !important;
}
.driverRightsCount {
    float: right;
    padding: 79px 4px 2px 0px;
}

.TachoDeviceInfoGridContainer .lineViolation {
    width: 100%;
    height: 49px;
    border-bottom: 1px solid #8377771a;
    position: absolute;
    background: #E28B34;
    margin: 0px 0px 0px -13px;
    -webkit-mask-composite: xor;
    border-radius: 5px 5px 0px 0px;
    padding: 6px 0px 0px 0px;
    cursor : pointer;
}

.violationRightIcon {
    float: right;
    padding: 0px 0px 12px 0px;
    background-image: url(/plugins/app25/TachoDeviceInfo/Images/chevron-right.svg);
    height: 12px;
    width: 12px;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 6px;
    cursor:pointer;
}

.violationStatus-1 .dx-overlay-content.dx-popup-normal.dx-resizable, .violationStatus-2 .dx-overlay-content.dx-popup-normal.dx-resizable {
    height: calc(100% - 133px) !important;
    transform: translate(495px, 85px) !important;
    left: 21px !important;
}

.dailyStatus-1 .dx-overlay-content.dx-popup-normal.dx-resizable, .dailyStatus-2 .dx-overlay-content.dx-popup-normal.dx-resizable {
    height: calc(100% - 133px) !important;
    transform: translate(495px, 85px) !important;
    left: 21px !important;
}

.violationStatus-1 .dx-popover-wrapper.dx-position-left .dx-popover-arrow, .dx-popover-wrapper.dx-position-right .dx-popover-arrow, .violationStatus-2 .dx-popover-wrapper.dx-position-left .dx-popover-arrow, .dx-popover-wrapper.dx-position-right .dx-popover-arrow {
    width: 0px !important;
}
.timeRightShortenedIcon {
    font: 13px/17px Segoe UI;
    letter-spacing: -0.26px;
    color: #A7A7A7;
    opacity: 1;
    text-align: right;
}
.timeRightExtendedIcon {
    font: 13px/17px Segoe UI;
    letter-spacing: -0.26px;
    color: #A7A7A7;
    opacity: 1;
    text-align: right;
    padding: 1px;
    margin: 0px 17px;
}
.dotBlue {
    height: 14px;
    width: 14px;
    background-color: #55BBD3;
    border-radius: 50%;
    display: inline-block;
    margin: 1px 1px -3px 3px;
}
.dotGray {
    height: 14px;
    width: 14px;
    background-color: #ACACAC;
    border-radius: 50%;
    display: inline-block;
    margin: 1px 1px -3px 3px;
}

.driver2StatusText {
    text-align: left;
    font: normal normal normal 13px/17px Segoe UI;
    letter-spacing: 0px;
    color: #A7A7A7;
    opacity: 1;
    padding: 15px 0px 4px 0px;
    float: left;
}
.leftDetail {
    width: 45%;
    float: left;
    height: 100%;
    padding: 0px 0px 0px 5px;
}
.rightDetail {
    width: 45%;
    float: right;
    height: 100%;
    padding: 0px 5px 0px 0px;
}
.detailTitleIcon {
    background-image: url(/plugins/app25/TachoDeviceInfo/Images/surus_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    height: 30px;
    width: 25px;
    float: left;
    background-size: contain;
}
.detailTitleIcon2 {
    background-image: url(/plugins/app25/TachoDeviceInfo/Images/dinlenme_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    height: 30px;
    width: 25px;
    float: left;
    background-size: contain;
}
.detailTitleText  {
    text-align: left;
    font: Bold 14px Segoe UI;
    letter-spacing: 0;
    color: #475867;
    opacity: 1;
    margin: 20px 3px 4px 30px;
    height: 40px;
    /*padding-top: 5px;*/
}

.leftDetail .info, .rightDetail .info {
    padding: 3px 6px 1px 0px;
    text-align: left;
    font: normal normal normal 12px/16px Segoe UI;
    letter-spacing: 0px;
    color: #A7A7A7;
    opacity: 1;
    height: 35px;
    overflow-y:auto;
}

.dateInfo {
    text-align: right;
    font: normal normal normal 12px/16px Segoe UI;
    letter-spacing: -0.24px;
    color: #A7A7A7;
    opacity: 1;
  
}
.processBarContainer {
    background: #CFCFCF 0% 0% no-repeat padding-box;
    border-radius: 10px;
    opacity: 1;
}
.DetailSeperator {
    border-bottom: 1px solid #DDDDDD;
    opacity: 1;
    width: 100%;
    float: left;
    margin-top: 5px;
}
.infoBottomText {
    text-align: left;
    font: normal normal normal 12px/14px Segoe UI;
    letter-spacing: 0px;
    color: #A7A7A7;
    margin-top: 5px;
}
.firstDetail .separator, .secondDetail .separator {
    border-left: 1px solid #DDDDDD;
    opacity: 1;
    float: left;
    margin-top: 20px;
    margin-left: 16px;
    margin-right: 15px;
    height: 120px;
}

    .firstDetail .separator[type="second"] {
        height: 150px;
    }
    /*.defaultCellHeader {
    white-space: normal !important;
    vertical-align: top;
    width: 100%;
  
}*/
    .fleetGrid .dx-datagrid-text-content {
        white-space: normal !important;
    }

.tachoListContainer                                  
{   
    float               : left; 
    width               : 100%; 
    height              : 100%; 
}

.tachoListContainer .gridContainer                   
{
    float               : left; 
    width               : 100%; 
    height              : 100%;
}

.tachoListContainer .dx-datagrid-search-panel        
{   
    float               : left; 
    margin-left         : 0; 
    width               : 100% !important;
}

.tachoListContainer .dx-toolbar                      
{
    float               : left; 
    width               : calc(100% - 150px); width: -moz-calc(100% - 150px); width: -webkit-calc(100% - 150px); 
    display             : inline-block; 
    margin-left         : 4px;
}
.tachoListContainer .dx-toolbar-after {
    display: inline !important;
}

.tachoListContainer .dx-toolbar-center {
    display: inline !important;
}

.tachoListContainer.dx-toolbar-before {
    display: inline !important;
}

.tachoListContainer .dx-toolbar-after {
    display: inline !important;
}

.tachoListContainer .dx-toolbar .dx-toolbar-after {
    padding-left: 1px;
}

.tachoListContainer .dx-toolbar-after {
    left: 0px !important
}

.tachoListContainer .dx-toolbar-item {
    display: inline !important;
} 
 
.tachoListContainer .dx-toolbar-after                
{   
    padding             : 0; 
    width               : 100%;
}

 .tachoListContainer_SwitchButton {
        float: left;
        width: 36px;
    }
.tachoListContainer_TextBox
{
    float               : left;
    width               : 102px;
    margin-left         : 4px;
    color               : rgb(33, 148, 252);;
    font-size           : 16px;
    font-weight         : bold;
    line-height         : 36px;
    text-align          : center;
}

.tachoListRow 
{
    height              : 88px;
    width               : 100%;
    background-color    : #f9f9f9;
}

.tachoListRow[isSelected]
{
    background-color    : #ddd;
}

.tachoListRow[shade]
{
    background-color    : #EFF1F2;
}

.tachoListRow[shade][isSelected]
{
    background-color    : #ddd;
}

.tachoListRow > tr,
.tachoListRow > tr > td
{
    width               : 100%;
    height              : 88px;
}

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

.tachoListRowWest .tachoListRowWestIcon
{
    float               : left;
    width               : 30px;
    height              : 30px;
    background-position : center center;
    background-repeat   : no-repeat;
    position            : relative;
    top                 : 50%;
    transform           : translateY(-50%);
    margin-left         : 10px;
    background-size     : 30px;
}

.tachoListRowEast
{
    float               : left;
    width				: calc(100% - 50px); width: -moz-calc(100% - 50px); width: -webkit-calc(100% - 50px); 
    height              : 100%;
    padding-right       : 10px;

}

.tachoListRowEastCell
{
    float               : left;
    width               : 100%;
    height              : 100%;
    line-height         : 16px;
}

.tachoListRowEastCell:nth-child(1)
{
    font-weight         : bold;
    height              : 26px;
    padding-top         : 10px;
}

.tachoListRowEastCell:nth-child(2)
{
    height              : 36px;
    padding-top         : 10px;
    padding-bottom      : 10px;
}

.tachoListRowEastCell:nth-child(3)
{
    height               : 26px;
    padding-bottom       : 10px;
    overflow             : hidden !important;
    text-overflow        : ellipsis;
    white-space          : nowrap;
       
}

.tachoListRowEastCell:nth-child(1)[alarm]
{
    color                : #FF0000;
}

.tachoListRowEastCellWest 
{
    overflow             : hidden !important ;
    text-overflow        : ellipsis;
    white-space          : nowrap;
    font-weight          : bold;
    float                : left;
    width				 : calc(100% - 60px); width: -moz-calc(100% - 60px); width: -webkit-calc(100% - 60px); 
    height               : 100%;
}

.tachoListRowEastCellEast
{
    float               : right;
    width               : 60px;
    height              : 100%;
}

.tachoListRow .dx-freespace-row 
{
    background-color    : white;

}

.speedAlarmIcon 
{
    width               : 30px;
    height              : 20px;
    background-position : center center;
    background-repeat   : no-repeat;
    border              : 0;
    position            : relative;
    background-size     : 20px;
}

.tachoListContextMenuItem {
    float               : left;
    margin              : 5px;
    width               : 100%;
}

.tachoListContextMenuItem .dx-icon-check
{
    float               : left;
    line-height         : 19px;
}

.tachoListContextMenuItem .ContextMenuItemContent
{
    float               : left;
    margin-left         : 21px;
}

.tachoListContextMenuItem .ContextMenuItemContent[selected]
{
    margin-left         : 5px;
}
.tachoListContextMenuItem .ContextMenuItemContent[main]
{
    margin-left         : 0px;
}
.backgroundTemp {
    width               : 400px;
}

.mainRow {
    width               : 100%;
    background          : #F6F6F6 0% 0% no-repeat padding-box;
}

.icons {
    padding             : 10px;
    float               : left;
    width               : 24px;
    height              : 24px;
    opacity             : 1;
    margin              : 13px 9px 0px 4px;
    background-position : center center;
    background-repeat   : no-repeat;
    border              : 0;
    position            : relative;
    background-size     : 20px;
}

.TachoDriverNames {
    text-align          : left;
    font                : Bold 14px/19px Segoe UI;
    letter-spacing      : -0.28px;
    color               : #475867;
    opacity             : 1;
    float               : left;
    padding-top         : 15px;
}

.splitter {
    background-color    : aqua;
    border-right        : 1px solid #DDDDDD;
    opacity             : 1;
    float               : left;
}

.cardnumber {
    text-align          : right;
    font                : 12px Segoe UI;
    letter-spacing      : 0;
    color               : #525252;
    opacity             : 1;
    float               : right;
    padding-right       : 10px;
    padding-top         : 15px;
}

.dailyMinuteLeft {
    text-align          : left;
    font                : 13px Segoe UI;
    letter-spacing      : 0;
    color               : #A7A7A7;
    opacity             : 1;
    padding-top         : 10px;
    padding-right       : 13px;
}

.dailyDrivingToltalLeft {
    text-align          : left;
    font                : 14px Segoe UI;
    letter-spacing      : 0;
    color               : #525252;
    opacity             : 1;
    float               : left;
}

.minute_left {
    text-align          : left;
    font                : 13px/17px Segoe UI;
    letter-spacing      : 0;
    color               : #525252;
    opacity             : 1;
    padding             : 6px 0px 6px 0px;
}
.TachoNode{
    display             :none;
}
/*Colored Icons*/
.driveStateIcon {
    background-image    : url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMS43OSIgaGVpZ2h0PSIyMS43OSIgdmlld0JveD0iMCAwIDIxLjc5IDIxLjc5Ij4NCiAgPGcgaWQ9InN1cnVzX2ljb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMjUgMC4yNSkiPg0KICAgIDxwYXRoIGlkPSJQYXRoXzcyMjYiIGRhdGEtbmFtZT0iUGF0aCA3MjI2IiBkPSJNMTk4LjI0NSwyMTkuMTIzYTMuMTIzLDMuMTIzLDAsMSwwLTMuMTIzLDMuMTIzQTMuMTI2LDMuMTI2LDAsMCwwLDE5OC4yNDUsMjE5LjEyM1ptLTUuMiwwYTIuMDgyLDIuMDgyLDAsMSwxLDIuMDgyLDIuMDgyQTIuMDg0LDIuMDg0LDAsMCwxLDE5My4wNDEsMjE5LjEyM1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xODQuNDc3IC0yMDcuNTM3KSIgZmlsbD0iIzgwYzkxMSIgc3Ryb2tlPSIjODBjOTExIiBzdHJva2Utd2lkdGg9IjAuNSIvPg0KICAgIDxwYXRoIGlkPSJQYXRoXzcyMjciIGRhdGEtbmFtZT0iUGF0aCA3MjI3IiBkPSJNMTAuNjQ1LDBBMTAuNjQ1LDEwLjY0NSwwLDEsMCwyMS4yOSwxMC42NDUsMTAuNjU3LDEwLjY1NywwLDAsMCwxMC42NDUsMFptMCwyMC41ODFhOS45MzUsOS45MzUsMCwxLDEsOS45MzUtOS45MzVBOS45NDYsOS45NDYsMCwwLDEsMTAuNjQ1LDIwLjU4MVoiIGZpbGw9IiM4MGM5MTEiIHN0cm9rZT0iIzgwYzkxMSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4NCiAgICA8cGF0aCBpZD0iUGF0aF83MjI4IiBkYXRhLW5hbWU9IlBhdGggNzIyOCIgZD0iTTU1LjUyMyw0OGE3LjUyMyw3LjUyMywwLDEsMCw3LjUyMyw3LjUyM0E3LjUzMSw3LjUzMSwwLDAsMCw1NS41MjMsNDhabTAsLjYyN2E2LjkwNiw2LjkwNiwwLDAsMSw2LjQzNSw0LjQyMWwtMi4zNDguNzgzYTMuMzg3LDMuMzg3LDAsMCwxLTIuNDUzLS4xMTksNC4wMjYsNC4wMjYsMCwwLDAtMy4yNjYsMGwtLjExOS4wNTNhMy40LDMuNCwwLDAsMS0yLjI1My4xNzhsLTIuNTExLS42N0E2LjkwNiw2LjkwNiwwLDAsMSw1NS41MjMsNDguNjI3Wm0tNi45LDYuOWMwLS4wNjQsMC0uMTI3LDAtLjE5bC4yMTguMDcyYTguMzU2LDguMzU2LDAsMCwxLDUuNjY1LDYuOTM5QTYuOTA2LDYuOTA2LDAsMCwxLDQ4LjYyNyw1NS41MjNabTYuNTI1LDYuODg2YTguOTgyLDguOTgyLDAsMCwwLTYuMS03LjZsLS4zNjktLjEyM2E2Ljg2NSw2Ljg2NSwwLDAsMSwuMTQ4LS44MTRsMi41MjguNjc0YTQuMDMyLDQuMDMyLDAsMCwwLDIuNjY5LS4yMTFsLjExOS0uMDUzYTMuNCwzLjQsMCwwLDEsMi43NTgsMCw0LjAxMyw0LjAxMywwLDAsMCwyLjkuMTRsMi4zNDktLjc4M2E2LjgzNyw2LjgzNywwLDAsMSwuMjEsMS4wNDZMNjIsNTQuODExYTguOTgxLDguOTgxLDAsMCwwLTYuMSw3LjZjLS4xMjMuMDA3LS4yNDYuMDEtLjM3MS4wMVM1NS4yNzUsNjIuNDE1LDU1LjE1Miw2Mi40MDhabTEuMzgtLjA2NEE4LjM1Nyw4LjM1NywwLDAsMSw2Mi4yLDU1LjRsLjIxOC0uMDcyYzAsLjA2MywwLC4xMjcsMCwuMTlBNi45MDYsNi45MDYsMCwwLDEsNTYuNTMxLDYyLjM0NFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00NC44NzcgLTQ0Ljg3NykiIGZpbGw9IiM4MGM5MTEiIHN0cm9rZT0iIzgwYzkxMSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4NCiAgPC9nPg0KPC9zdmc+DQo=);
    background-repeat   : no-repeat;
    /* background-attachment: fixed; */
    background-position : center;
    padding             : 10px;
    float               : left;
    width               : 24px;
    height              : 24px;
    opacity             : 1;
    margin              : 13px 9px 0px 4px;
    border              : 0;
    position            : relative;
    background-size     : 20px;
}
.restStateIcon {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMS43OSIgaGVpZ2h0PSIxNy41MzIiIHZpZXdCb3g9IjAgMCAyMS43OSAxNy41MzIiPg0KICA8cGF0aCBpZD0iZGlubGVubWVfaWNvbiIgZD0iTTE4LjgwNiw2LjAzMkg3LjY5MWExLjEyMywxLjEyMywwLDAsMCwuMTE1LS41VjUuMTFBMS4yNjMsMS4yNjMsMCwwLDAsNi40NzUsMy45SDIuMzU2YTEuMjUyLDEuMjUyLDAsMCwwLS4yMjcuMDJWLjcxQS43MTIuNzEyLDAsMCwwLDEuNDE5LDBILjcxQS43MTIuNzEyLDAsMCwwLDAsLjcxVjE2LjMyMmEuNzEyLjcxMiwwLDAsMCwuNzEuNzFoLjcxYS43MTIuNzEyLDAsMCwwLC43MS0uNzFWMTEuNzA5SDE5LjE2MXY0LjYxM2EuNzEyLjcxMiwwLDAsMCwuNzEuNzFoLjcxYS43MTIuNzEyLDAsMCwwLC43MS0uNzFWOC41MTZBMi40NjksMi40NjksMCwwLDAsMTguODA2LDYuMDMyWk0yLjI3Miw0LjYxM2g0LjJhLjUxMi41MTIsMCwwLDEsLjU0OC41di40MjZhLjUxMi41MTIsMCwwLDEtLjU0OC41aC00LjJaTS43MS43MWguNzFWNi4wMzJILjcxWk0xLjc3NCwxMWEuMzM1LjMzNSwwLDAsMC0uMzU1LjM1NXY0Ljk2OEguNzFWNi43NDJINC45NjhWMTFaTTIwLjU4LDE2LjMyMmgtLjcxVjExLjM1NUEuMzM1LjMzNSwwLDAsMCwxOS41MTYsMTFINS42NzdWNi43NDJIMTguODA2QTEuNzU3LDEuNzU3LDAsMCwxLDIwLjU4LDguNTE2djcuODA2WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4yNSAwLjI1KSIgZmlsbD0iI2Y4MWQxZCIgc3Ryb2tlPSIjZjgxZDFkIiBzdHJva2Utd2lkdGg9IjAuNSIvPg0KPC9zdmc+DQo=);
    background-repeat   : no-repeat;
    /* background-attachment: fixed; */
    background-position : center;
    padding             : 10px;
    float               : left;
    width               : 24px;
    height              : 24px;
    opacity             : 1;
    margin              : 13px 9px 0px 4px;
    border              : 0;
    position            : relative;
    background-size     : 20px;
}
.workingStateIcon {
    background-image    : url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMi4wOSIgaGVpZ2h0PSIyMC4yNjIiIHZpZXdCb3g9IjAgMCAyMi4wOSAyMC4yNjIiPg0KICA8ZyBpZD0iY2FsaXNtYV9pY29uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjQwMSAwLjQpIj4NCiAgICA8cGF0aCBpZD0iVW5pb25fMiIgZGF0YS1uYW1lPSJVbmlvbiAyIiBkPSJNMTQuNTM4LDE5LjQ2MWExLjAyNywxLjAyNywwLDAsMS0uNzIyLS4zM0wxMC41LDE1LjU0MSw3LjQ3MywxOC44MTlhMS4wMzksMS4wMzksMCwwLDEtMS40NjUuMDU0TDQuOTY2LDE3LjlhMS4wMzUsMS4wMzUsMCwwLDEtLjA1My0xLjQ2NGwzLjIwNy0zLjQ3Mkw0LjM3OCw4LjkxNSwxLjY1NSwxMS40NDZhLjguOCwwLDAsMS0xLjEyMS0uMDM5bC0uMzIxLS4zNDVBLjc4Ni43ODYsMCwwLDEsMCwxMC40NWwuMzQ5LTRBLjguOCwwLDAsMSwuNiw1LjkzOEw2LjQyNi41MjNBLjc4My43ODMsMCwwLDEsNywuMzExYS43OTEuNzkxLDAsMCwxLC41NTMuMjUzTDkuNywyLjg4MUEuOC44LDAsMCwxLDkuNjYsNEw2LjkzOCw2LjUzMywxMC41LDEwLjM5bDMuODUtNC4xNjZMMTEuNjI4LDMuNjkxYS43OTQuNzk0LDAsMCwxLS4wNDEtMS4xMjFMMTMuNzQyLjI1M0EuNzkzLjc5MywwLDAsMSwxNC4yOTQsMGEuNzgyLjc4MiwwLDAsMSwuNTY5LjIxMWw1LjgyNCw1LjQxNGEuOC44LDAsMCwxLC4yNS41MTJsLjM0OSw0YS44LjgsMCwwLDEtLjIwOS42MTJsLS4zMjEuMzQ2YS44LjgsMCwwLDEtMS4xMjIuMDM5TDE2LjkxMiw4LjYwNWwtNC4wMzEsNC4zNjIsMy40OTQsMy43ODNhMS4wMzYsMS4wMzYsMCwwLDEtLjA1MiwxLjQ2NmwtMS4wNDIuOTY5YTEuMDI4LDEuMDI4LDAsMCwxLS43LjI3N1pNNC44MDUsOC41MThsOS40MzksMTAuMjE3YS40NTIuNDUyLDAsMCwwLC42NC4wMjJsMS4wNDItLjk2OWEuNDYyLjQ2MiwwLDAsMCwuMDIzLS42MzlMNi41MTEsNi45MzJabS41MzYsOC4zMThhLjQ2Mi40NjIsMCwwLDAsLjAyMy42MzlsMS4wNDIuOTdhLjQ1NC40NTQsMCwwLDAsLjY0LS4wMjJsMy4wNTctMy4zMUw4LjUxOCwxMy40Wm03LjE0Mi00LjMsNC00LjMzMUwxNC43NzksNi42MTksMTAuOSwxMC44MlpNNi44MjMuOTUsMSw2LjM2NUEuMjA1LjIwNSwwLDAsMCwuOTM1LDYuNWwtLjM1MSw0YS4yMDkuMjA5LDAsMCwwLC4wNTYuMTZsLjMyMS4zNDVhLjIwOS4yMDksMCwwLDAsLjMuMDFMOS4yNjMsMy41NzNhLjIxNC4yMTQsMCwwLDAsLjAxLS4zTDcuMTIuOTYxQS4yMTIuMjEyLDAsMCwwLDYuOTczLjg5NEg2Ljk2N0EuMjExLjIxMSwwLDAsMCw2LjgyMy45NVpNMTQuMzE2LjU4M0EuMjEyLjIxMiwwLDAsMCwxNC4xNy42NUwxMi4wMTYsMi45NjZhLjIxNC4yMTQsMCwwLDAsLjAxLjNsOC4wMDYsNy40NDZhLjIxLjIxLDAsMCwwLC4zLS4wMWwuMzIxLS4zNDZhLjIxNC4yMTQsMCwwLDAsLjA1NC0uMTZoMGwtLjM0OC00YS4yMDcuMjA3LDAsMCwwLS4wNjUtLjEzNkwxNC40NjYuNjM4YS4yMS4yMSwwLDAsMC0uMTQtLjA1NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiIGZpbGw9IiNmY2JiMGIiIHN0cm9rZT0iI2ZjYmIwYiIgc3Ryb2tlLXdpZHRoPSIwLjgiLz4NCiAgPC9nPg0KPC9zdmc+DQo=);
    background-repeat   : no-repeat;
    /* background-attachment: fixed; */
    background-position : center;
    padding             : 10px;
    float               : left;
    width               : 24px;
    height              : 24px;
    opacity             : 1;
    margin              : 13px 9px 0px 4px;
    border              : 0;
    position            : relative;
    background-size     : 20px;
}
.prepareStateIcon {
    background-image    : url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMi4yNDQiIGhlaWdodD0iMjIuMjQ0IiB2aWV3Qm94PSIwIDAgMjIuMjQ0IDIyLjI0NCI+PGRlZnM+PHN0eWxlPi5hLC5je2ZpbGw6bm9uZTt9LmF7c3Ryb2tlOiNiNDE1OTQ7c3Ryb2tlLXdpZHRoOjEuOHB4O30uYntzdHJva2U6bm9uZTt9PC9zdHlsZT48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc5Ljc1NiAtMjcxKSI+PGcgY2xhc3M9ImEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgwIDI3MSkiPjxyZWN0IGNsYXNzPSJiIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiLz48cmVjdCBjbGFzcz0iYyIgeD0iMC45IiB5PSIwLjkiIHdpZHRoPSIyMC4yIiBoZWlnaHQ9IjIwLjIiLz48L2c+PGxpbmUgY2xhc3M9ImEiIHgxPSIyMC40MjkiIHkyPSIyMC40MjkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgwLjM5MyAyNzIuMTc5KSIvPjwvZz48L3N2Zz4=);
    background-repeat   : no-repeat;
    /* background-attachment: fixed; */
    background-position : center;
    padding             : 10px;
    float               : left;
    width               : 24px;
    height              : 24px;
    opacity             : 1;
    margin              : 13px 9px 0px 4px;
    border              : 0;
    position            : relative;
    background-size     : 20px;
}
.drivingSummary {
    float               : left;
    padding             :0px 0px 8px 36px;
}

.TachoListRow {
    height: 108px;
    background-color: #f9f9f9;
    display: flex;
    min-width: 430px;
}

.TachoListRow[isSelected] {
   background-color     : #ddd;
}

.TachoListRow[shade] {
    background-color    : #EFF1F2;
    }
.dx-freespace-row {
    height              : auto !important;
}

.tachoListContainer .dx-toolbar {
  
    width: 90%;
}

.TachoListRow > tr {
    width: 100%;
    min-height: 88px;
}

    .TachoListRow > tr > td {
        min-width: 430px;
        min-height: 88px;
    }

.DeviceListContainer {
    float: left;
    width: 100%;
    height: 100%;
}

    .DeviceListContainer .textEllipsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .DeviceListContainer .gridContainer {
        float: left;
        width: 100%;
        height: 100%;
    }

    .DeviceListContainer .dx-datagrid-rowsview .dx-selection.dx-row > td {
        background-color: rgba(237, 150, 37, 0.6) !important;
    }

.DeviceStateIcon {
    float: left;
    height: 100%;
    width: 100%;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
}

.DeviceStateIconNonTemplate {
    float: left;
    height: 16px;
    width: 100%;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
}

.DeviceListContainer .dx-widget {
    color: #333;
    font-weight: normal;
    font-size: 12px;
    font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif;
    line-height: 1.35715;
}

.DeviceListContainer .dx-placeholder {
    font-size: 14px;
}

.DeviceListContainer .gridContainer .gridCell {
    width: 100%;
    height: 79px
}

.DeviceListContainer .dx-datagrid-header-panel {
    background-color: white !important;
}

.DeviceListContainer .dx-datagrid-search-panel {
    float: left;
    margin-left: 0;
    width: 100% !important;
}

.DeviceListContainer .dx-toolbar {
    float: left;
    width: calc(90% - 150px);
    width: -moz-calc(100% - 150px);
    width: -webkit-calc(100% - 150px);
    display: inline-block;
}

    .DeviceListContainer .dx-toolbar[reduce] {
        float: left;
        width: calc(100% - 230px);
        width: -moz-calc(100% - 230px);
        width: -webkit-calc(100% - 230px);
        display: inline-block;
    }

.DeviceListContainer .dx-toolbar-after {
    display: inline !important;
}

.DeviceListContainer .dx-toolbar-center {
    display: inline !important;
}

.DeviceListContainer.dx-toolbar-before {
    display: inline !important;
}

.DeviceListContainer .dx-toolbar-after {
    display: inline !important;
}

.DeviceListContainer .dx-toolbar .dx-toolbar-after {
    padding-left: 1px;
}

.DeviceListContainer .dx-toolbar-after {
    left: 0px !important
}

.DeviceListContainer .dx-toolbar-item {
    display: inline !important;
}

.DeviceListContainer_SwitchButton {
    float: left;
    width: 36px;
    margin-right: 4px;
}

.DeviceListContainer_GridDeviceCount {
    float: left;
    width: 102px;
    margin-left: 4px;
    color: #EF9700;
    font-size: 16px;
    font-weight: bold;
    line-height: 36px;
    text-align: center;
}

.DeviceListContainer_ColumChooserButton {
    float: left;
    width: 36px;
    margin-left: 4px;
}

.DeviceListContainer_SaveColumsButton {
    float: left;
    width: 36px;
    margin-left: 4px;
}

.DeviceListRow {
    width: 100%;
    height: 74px;
}

    .DeviceListRow[flash] {
        background-color: rgba(237, 150, 37, 0.3);
    }

.DeviceListContainer .dx-datagrid .dx-row {
    border: none;
}

    .DeviceListContainer .dx-datagrid .dx-row[flash] > td {
        background-color: rgba(237, 150, 37, 0.3);
    }

.DeviceListContainer .dx-datagrid .dx-freespace-row > td {
    background-color: #FFFFFF;
}

.DeviceListContainer .dx-datagrid-rowsview .dx-selection.dx-row > td {
    background-color: rgba(237, 150, 37, 0.6);
}

    .DeviceListContainer .dx-datagrid-rowsview .dx-selection.dx-row > td .DeviceSpeedIcon {
        background-image: url(/plugins/app25/TemsaDeviceList/speedw.png);
    }

    .DeviceListContainer .dx-datagrid-rowsview .dx-selection.dx-row > td .DeviceDistanceIcon {
        background-image: url(/plugins/app25/TemsaDeviceList/distancew.png);
    }

    .DeviceListContainer .dx-datagrid-rowsview .dx-selection.dx-row > td .DevicePositionIcon {
        background-image: url(/plugins/app25/TemsaDeviceList/latlonw.png);
    }

    .DeviceListContainer .dx-datagrid-rowsview .dx-selection.dx-row > td .DevicePlate[empty=empty] {
        color: white;
    }

    .DeviceListContainer .dx-datagrid-rowsview .dx-selection.dx-row > td .DeviceDriver[empty=empty] {
        color: white;
    }


.DeviceListRow[flash] .DeviceSpeedIcon {
    background-image: url(/plugins/app25/TemsaDeviceList/speedw.png);
}

.DeviceListRow[flash] .DeviceDistanceIcon {
    background-image: url(/plugins/app25/TemsaDeviceList/distancew.png);
}

.DeviceListRow[flash] .DevicePositionIcon {
    background-image: url(/plugins/app25/TemsaDeviceList/latlonw.png);
}

.DeviceListRowLeft {
    float: left;
    width: 36px;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.DeviceStateIcon {
    float: left;
    height: 100%;
    width: 100%;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
}

.DeviceStateIconNonTemplate {
    float: left;
    height: 16px;
    width: 100%;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
}

.DeviceListRowRight {
    float: right;
    width: calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    padding-bottom: 3px;
    padding-top: 3px;
}

.DeviceListRowRightCellTop {
    float: left;
    height: 16px;
    width: 100%;
}

.DeviceNode {
    float: left;
    font-weight: bold;
    width: 75px;
}

.DevicePlate {
    float: left;
    font-weight: bold;
    cursor: pointer;
    margin-left: 5px;
    width: 90px;
}

    .DevicePlate[empty] {
        float: left;
        font-weight: normal;
        color: silver;
    }

        .DevicePlate[empty]:hover {
            color: inherit;
            font-weight: bold
        }

.DeviceDriver {
    float: left;
    font-weight: bold;
    cursor: pointer;
    margin-left: 5px;
    width: calc(100% - 290px);
    width: -moz-calc(100% - 290px);
    width: -webkit-calc(100% - 290px);
}

    .DeviceDriver[empty] {
        float: left;
        font-weight: normal;
        color: silver;
    }

        .DeviceDriver[empty]:hover {
            color: inherit;
            font-weight: bold
        }

        .DeviceDriver[empty]:hover {
            color: inherit;
            font-weight: bold
        }

.DeviceDate {
    float: right;
    width: 115px;
    text-align: right;
}

.DeviceListRowRightCellMiddle {
    float: left;
    height: 36px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
}

.DeviceAddress {
    float: left;
    padding-right: 10px;
    min-width: 345px;
    width: calc(100% - 32px);
    width: -moz-calc(100% - 32px);
    width: -webkit-calc(100% - 32px);
}

.DeviceDvr {
    float: left;
    background: url(/plugins/app25/TemsaDeviceList/dvrs.png) no-repeat center center;
    display: none;
    width: 24px;
    height: 20px;
    background-size: 24px 20px;
}

    .DeviceDvr[hasDVR=true] {
        display: block;
    }

.DeviceListRowRightCellBottom {
    float: left;
    height: 16px;
    width: 100%;
}

.DevicePositionIcon {
    float: left;
    width: 20px;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url(/plugins/app25/TemsaDeviceList/latlon.png);
}

.DevicePosition {
    float: left;
    width: 160px;
    cursor: pointer;
}

.DeviceDistanceIcon {
    float: left;
    width: 24px;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url(/plugins/app25/TemsaDeviceList/distance.png);
}

.DeviceDistance {
    float: left;
    font-weight: bold;
    width: 50px;
}

.DistanceUnit {
    float: left;
    width: 40px;
}

.DeviceSpeedIcon {
    float: left;
    width: 24px;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url(/plugins/app25/TemsaDeviceList/speed.png);
}

.DeviceSpeed {
    float: left;
    font-weight: bold;
    width: 35px;
}

.SpeedUnit {
    float: left;
    width: calc(100% - 353px);
    width: -moz-calc(100% - 353px);
    width: -webkit-calc(100% - 353px);
}

.DeviceListContextMenuItem {
    float: left;
    margin: 5px;
    height: 20px;
    width: 100%;
}

    .DeviceListContextMenuItem .dx-icon-check {
        float: left;
        line-height: 20px;
    }

    .DeviceListContextMenuItem .ContextMenuItemContent {
        float: left;
        margin-left: 40px;
    }

        .DeviceListContextMenuItem .ContextMenuItemContent[selected] {
            margin-left: 16px;
        }

        .DeviceListContextMenuItem .ContextMenuItemContent[main] {
            margin-left: 0px;
        }

.DeviceListContainer .selectBoxSortGrid {
    float: left;
}

.DevicePropertyPopupContentSelectBox {
    float: left;
    height: 36px;
    width: 77%;
}

.DevicePropertyPopupContentCancelButton {
    float: right;
}

.DevicePropertyPopupContentSaveButton {
    float: right;
}

.DevicePropertyPopup .dx-popup-content > .dx-button {
    margin: 0px 0px 20px 5px;
}

.DevicePropertyPopup .dx-popup-content {
    padding: 15px;
}

.ConnectTruckOrTemsaEnabled {
    position: fixed;
    right: 20px;
    bottom: 8px;
    height: 19px;
    width: 120px;
    padding: 1px 0 0 100px;
    font: bold 12px Segoe UI;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #616161;
    /*background: url(/plugins/app25/TemsaDeviceList/connectruck_logo.png) no-repeat white;*/
    z-index: 1500;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
}

    .ConnectTruckOrTemsaEnabled[type = "ConnetTruck"] {
        background: url(/plugins/app25/DeviceListV2/connectruck_logo.png) no-repeat white;
    }

    .ConnectTruckOrTemsaEnabled[type = "Temsa"] {
        background: url(/plugins/app25/DeviceListV2/temsa_logo_map.svg) no-repeat white;
        background-position-y: center;
        padding: 1px 0 0 60px !important;
        background-position-x: 10px;
        line-height: 19px;
    }

.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(/plugins/app25/TPMSPanel/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(/plugins/app25/TPMSPanel/temperature.svg) 0 center no-repeat;
    margin-left: 5px;
}

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

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

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


.DeviceTPMSTemplate .graphicIcon {
    float: right;
    width: 36px;
    height: 36px;
    background: url(/plugins/app25/TPMSPanel/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(/plugins/app25/TPMSPanel/tempIcon.svg) no-repeat 0 3px;
}

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

.toolTipLine[toolTipConstantTirePressure] {
    background: url(/plugins/app25/TPMSPanel/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(/plugins/app25/TPMSPanel/empty.png) no-repeat center center;
    width: 125px;
    margin-left: -34px;
    height: 577px;
}

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

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

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

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

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

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

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

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

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

.TPMSPanelInfo .DeviceTPMSTemplate .TPMSTemplate .templateContainer .imageContainer[type = "trailertruck"] {
    background: url(/plugins/app25/TPMSPanel/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(/plugins/app25/TPMSPanel/dusuk_basinc.svg) 0 center no-repeat;
}

.alarmDetailIcon[icon = "highPressure"] {
    background: url(/plugins/app25/TPMSPanel/yuksek_basinc.svg) 0 center no-repeat;
}

.alarmDetailIcon[icon = "lowTemperature"] {
    background: url(/plugins/app25/TPMSPanel/dusuk_sicaklik.svg) 0 center no-repeat;
}

.alarmDetailIcon[icon = "highTemperature"] {
    background: url(/plugins/app25/TPMSPanel/yuksek_sicaklik.svg) 0 center no-repeat;
}

.alarmDetailIcon[icon = "battery"] {
    background: url(/plugins/app25/TPMSPanel/pil_seviyesi.svg) 0 center no-repeat;
}

.alarmDetailIcon[icon = "nosignal"] {
    background: url(/plugins/app25/TPMSPanel/sensor_iletisim_hatasi.svg) 0 center no-repeat;
}

.alarmDetailIcon[icon = "changePressure"] {
    background: url(/plugins/app25/TPMSPanel/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;
}
.UserGroupDefinition {
    width: 100%;
    height: 100%;
}

.UserGroupDefinitionContainer {
    float: left;
    width: 100%;
    height: 100%;
}

.UserGroupDefinitionEditTreeList {
    float: left;
    width: 100%;
    height: 100%;
} 

.UserGroupDefinitionEditTreeListItem {
    float: left;
    width: 100%;
    height: 100%;
}

.UserGroupDefinitionEditTreeList .dx-treelist .dx-row > td {
    padding-top: 15px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    padding-bottom: 15px !important;
}

.GroupDefinition_TabContainer {
    float: left;
    width: 100%;
    height: 100%;
}

.GroupDefinition_GroupTabs {
    float: left;
    width: 100%;
    height: 100%;
}

.NodeGroupTabContent {
    float: left;
    width: 100%;
}

.DriverGroupTabContent {
    float: left;
    width: 100%;
}

.dx-icon-custom-style {
    font-size: 24px;
    color: blue;
}

.treeListItemButtonContainer {
    width: 100%;
    float: right;
}

.treeListItemAddContainer {
    float: right;
    margin-right: 7px;
    cursor: pointer;
}

.treeListItemEditContainer {
    float: right;
    margin-right: 7px;
    cursor: pointer;
}

.treeListItemPairContainer {
    float: right;
    margin-right: 7px;
    cursor: pointer;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAASCAYAAACEnoQPAAAABHNCSVQICAgIfAhkiAAAAfZJREFUOE+NUl1IU2EYfp7vbLjh5rCMoZCyxdkEIbrwOiIiqwuFroTAm7qrKEgqc8IhgropooLIC7uoC0EIGoQKUd53NQhak/0oWESRUStt55zvjQ2cZmfN7/Lh+Xvf9yM8XvfNpXbDXX9IcLWQMc9hhq4Xj9vBvanFff6AvqcoJzTwtDCeHAEoTcXxVN5koPKCpKmFLwtOYgAWtZewitWTO66VOtta1xYUmBBRb4WcAuGZCMcF4bypi7ut3F2/X1+oAgJuunrECgSi+Wpz5kOvffEjnWlFHBew4Go8IGE3qmyXnbm/Fha/ko9I2J42iGMCzOdtdxBWX6XpzBuEjsvZcKQNMyQGNPissPRjGJP9ng3+OVXVJDqaaQ3tCj52tfuxtPxzDJP9v5qeaishfPbd7j1R9VyIlbLrnP5s9ZW3G3gm10iPxB//kptWkJManP1mq+Gvlvl9q0FjcZV1frElHnXSijyqBbOOETy1PNazumHAmPX+jPLhYKONitAgZZCUkCuYL34yhnDf/F37YbEb2QzB/Y3EVVzV+glEgPWKMbJy3XxSE3elCslAS+Vw42R0KSUXSYYESOfHe4fqtf+X2JPKxnxBzAFMaMGdYip5aUcLa7+Vj7Q79oICDrjC28WJ5OjOT2WJL+bLTYnIh9JE71Wvhn8ASHS2j4sODzsAAAAASUVORK5CYII=);
    background-position: left;
    background-repeat: no-repeat;
    padding-left: 15px;
    background-size: 15px;
}

.treeListItemListContainer {
    float: right;
    margin-right: 7px;
    cursor: pointer;
}

.treeListItemDeleteContainer {
    float: right;
    cursor: pointer;
    margin-right: 7px;
}

.pairingPopupContainer {
    float: left;
    width: 100%;
    height: 100%;
}

    .pairingPopupContainer .header {
        height: 40px;
        width: 100%;
        border-bottom: 1px solid #ddd;
        float: left;
        font-size: 20px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis
    }

    .pairingPopupContainer .content {
        width: 100%;
        float: left;
        padding: 20px 0 20px 0;
        height: auto;
        max-height: 440px;
    }

        .pairingPopupContainer .content .vehicleGroups {
            min-height: 36px;
            max-height: 400px;
            height: auto;
            width: 100%;
            float: left;
        }         

    .pairingPopupContainer .footer {
        height: 40px;
        width: 100%;
        float: left;
    }

        .pairingPopupContainer .footer .save {
            height: 36px;
            width: 107px;
            float: right;
            margin-right: 5px;
        }

        .pairingPopupContainer .footer .cancel {
            height: 36px;
            width: 107px;
            float: right;
        }

.UserGroupDefinitionEditContainer {
    width: 100%;
    height: 100%;
}

.UserGroupDefinitionEditGridContainer{
    width: 100%;
    height: 100%;
}

.UserGroupDefinitionEditSourceGridContainer {
    width: 48%;
    height: 100%;
    float: left;
}

.UserGroupDefinitionEditTargetGridContainer {
    width: 48%;
    height: 100%;
    float: left;
}

.UserGroupDefinitionEditSourceGrid{
    width: 100%;
    height: 100%;
    float: left;
}

.UserGroupDefinitionEditTargetGrid {
    width: 100%;
    height: calc(100% - 71px);
    height: -webkit-calc(100% - 71px);
    height: -moz-calc(100% - 71px);
    float: left;
    margin-top: 10px;
}

.UserGroupDefinitionEditButtonContainer {
    width: 4%;
    height: 100%;
    float: left;
    padding-left: 13px;
}

.UserGroupDefinitionEditSourceGridHeader {
    width: 100%;
    float: left;
}

.UserGroupDefinitionEditTargetGridHeader {
    width: 100%;
    height:40px;
    float: left;
}

.UserGroupDefinitionEditSourceGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
}

.UserGroupDefinitionEditSourceGridHeaderCountInfo {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    margin-right: 0px;
    text-align: right;
}

.UserGroupDefinitionEditTargetGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
}

.UserGroupDefinitionEditTargetGridHeaderCountInfo {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 27px;
    margin-right: 0px;
    text-align: right;
}

.UserGroupDefinitionEditTargetGridNav {
    width: 100%;
    height: 20px;
    float: left;
}

.UserGroupDefinitionEditGroupName {
    float: left;
    width: 237px;
    height: 36px;
    margin-top: 5px;
}

.UserGroupDefinitionEditAddButton {
    position: relative;
    top: calc(50% - 56px);
    top: -webkit-calc(50% - 56px);
    top: -moz-calc(50% - 56px);
}

.UserGroupDefinitionEditRemoveButton {
    position: relative;
    top: calc(50% - 46px);
    top: -webkit-calc(50% - 46px);
    top: -moz-calc(50% - 46px);
}
.UserGroupDefinitionUserListContainer {
    width: 100%;
    height: 100%;
}

.UserGroupDefinitionUserListGridContainer {
    width: 100%;
    height: 95%;
    float: left;
}

.UserGroupDefinitionUserListGrid {
    width: 100%;
    height: 95%;
    float: left;
}


.UserGroupDefinitionUserListGridHeader {
    width: 100%;
    float: left;
    height: 5%;
}

.UserGroupDefinitionUserListGridHeaderText {
    float: left;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 10px;
}

.UserGroupDefinitionUserListGridHeaderCount {
    float: right;
    width: 50%;
    font-family: 'Segoe UI';
    font-size: 14px;
    font-weight: bold;
    color: #475969;
    height: 27px;
    line-height: 10px;
    text-align: right;
}

.UserGroupDefinitionUserListButtonContainer {
    width: 100%;
    float: right;
    height: 5%;
}

.backButton {
    width: 140px;
    height: 40px;
    float: right;
}