.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;
    }