.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(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(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(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(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(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(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(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(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(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(speed-slow.png), url(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(compass-bg.png) center center no-repeat; z-index: 1906; }
.VehicleHistoryPlayerCompassPin                         { background: url(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(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(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(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(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(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(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(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(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(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(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(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(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(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(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;
}