.state{
    font-weight: bold;
}
.arr{
    text-align: center;
    /*display: none;*/
}
.inner-id{
    text-align: center;
    padding: 2em;
    color: green;
    font-weight: bold;
    font-size: 2em;
}
.back-param{
    text-align: left;   
}
.addr-table{
    border-bottom: 1px solid #777;
    border-top: 1px solid #777;
}
.hidden{
    display: none;
}
.shown{
    display: block;
}
#reply-button{
    width: 20%;
    margin: 0 40% 2em 40%;        
}
.mail-body{
    width:100%; 
    height:300px;
}
.gray{
    background-color: #efefef;
    padding: 7px 0;
}
.cc-subj{
    font-weight: bold; 
}
.mail-row{
    border-bottom: 1px #999 solid;
    padding: 7px;
}
.mess-text{
    background-color: #cecece;
    padding: 7px;
    display:none;
    
}
.green{
    color:green;
}
.red{
    color:red;
}
.flex-container {
  display: flex;
  padding: 37px;
}
#dataTables-example_filter{
    display:none;
}
#dataTables-example_info{
    display:none;
}
#dataTables-example_previous{
    display:none;
}
#dataTables-example_paginate{
    display:none;
}
#dataTables-example_length{
    display:none;
}
.get-button{
    width:17%;
    text-align: center;
    border: solid 1px #ebebeb;
    cursor: pointer;
}
.get-button.active{
    background-color: #ebebeb;
    cursor: inherit;
}
.input-copy-wrap{
    padding:21px 7px;
}
.add-cc-wrap{
    border-bottom: #ddd 1px solid;
    border-top: #ddd 1px solid;
    padding-bottom: 7px;
    margin:14px 0;
}
.email-copy{
    width: 100%;
    height:28px;
    margin: 37px 0;
    border:blue 1px solid;
}
.copy-button{
    margin-right: 7px;
    cursor: pointer;
}
.copy-block{
    padding:3px 0;
}
.check_period{
    width: 70%;
}
/*.glyphicon.list-close{
    display: block;
}
.glyphicon.list-open{
    display: none;
}*/
.delete-truck-dialog{
    display: none;
}
.js-save-truck{
    display: none;
}
.truck-form{
    display: none;   
    padding:21px;
}
.truck-late{
    color:red;
}
.on-load{
    color:green; 
    font-weight:bold;
}
.left-col-button{
    color:#fff;
    background-color: darkorange;
    border-radius: 3px;
    text-align: center;
    width:70%;
    margin:21px 15%;
    padding:7px;
    cursor:pointer;    
}
.left-col-button:hover{
    color:#cecece;
}
.message-window{
    width: 100%;
    height:377px;
    overflow-y: scroll; 
}
.onemessage{
    margin: 21px 14px;
}
.message-date{
    padding:7px 0 0 7px;
    font-size:12px;
    font-weight: bold;
    color:#337acc;
}
.message-author{
    padding:0 7px;
    margin-bottom:7px;
}
.from-message{
    font-size:12px;
    font-weight: bold;
    color:#337acc;
}
.ms-author{
    font-weight: bold;
}

.ms-text{
    font-size:12px;
    padding: 3px;
    color: green;
}

.js-add-new-truck{
    cursor: pointer;
}
.left-button{
    cursor:pointer;
}
.last-message{
    padding:0 15px; 
    font-size:11px; 
    font-weight:bold
}
.js-create-message{
    /*display: none;*/
}
.li-new-message-form{
    padding:3px; 
}
.message-form-block{
    padding: 4px;
    display: none;
}
.from-wrapper{
    text-align: center;
    margin: 7px;
}
.from-message-input{
    width:90%;
    padding-left: 3px;
}
.message-wrapper{
    text-align: center;
    margin: 7px;
}
.message-text-input{
    width:90%;
    padding-left: 3px;
    height: 77px;
    font-size: 11px;    
}
.info-show{
    cursor: pointer;
    color: #999;
}
.info-show:hover{
    color: #cfcfcf;
}
.info-show.red{
    color: red;
}
#logout{
    cursor: pointer;
}
.input-sms-wrap{
    margin : 2em;
}
.input-sms-wrap input{
    width: 300px;
}
#messanger-bar{
    width: 19%;
    margin-top: 3px;
}
.smile{
    cursor           : pointer;
    display          : inline-block;
    padding          : 3px;
    background-color : #fff;
}
.smile:hover{
    background-color : #ebebeb;
}
@media(max-width: 767px) {
    #messanger-bar{
        width: 100%;
        margin-top: 3px;
    }
}

.round-letter{
    width            : 25px;
    height           : 25px;
    border-radius    : 50%;
    color            : #fff;
    background-color : green;
    text-align       : center;
    padding          : 3px; 
    font-weight      : bold;
    vertical-align   : middle;
    font-size        : 12px;
    text-transform   : uppercase; 
}
.m-whom{
    width            : 23px;
    height           : 23px;
    font-size        : 17px;
    font-weight      : bold;
    color            : white;
    text-align       : center;
    border-radius    : 50%;
    background-color : green;
    text-align       : center;
}
.user-small{
    width            : 17px;
    height           : 17px;
    font-size        : 12px;
    font-weight      : bold;
    color            : white;
    text-align       : right;
    border-radius    : 50%;
    background-color : green;
    text-align       : center;
    float            : left;
    text-transform   : uppercase;
    margin-top       : 17px; 
}
.driver-row, .group-row{
    padding          : 7px 0 4px 4px;
    border-bottom    : 1px solid #ebebeb;
    width            : 100%;
    cursor           : pointer;
}
.driver-row:hovern {
    background-color: #bcbcbc;
}
.group-row:hover{
    background-color: #bcbcbc;
}
.driver-name{
    padding-top : 3px;
    font-size   : 12px;
}
.driver-window{
    background-color : #fff;
    height           : 75vh;
    overflow-y       : scroll; 
    padding          : 7px; 
}
.group-window{
    background-color : #fff;
    height           : 75vh;
    overflow-y       : scroll; 
    padding          : 7px; 
}
.mess-search{
    border       : 1px #ebebeb solid;
    height       : 31px;
    padding-left : 4px;
    width        : 320px; 
    margin-top   : 10px;   
}
/*.fa-search{
    cursor       : pointer;
}*/
.main-window{
    background-color : #fff;
    min-height       : 100px;
    max-height       : 71vh;
    margin           : 0 1% 0 20%;
    margin-top       : 21px!important;
    overflow-y       : scroll; 
    padding          : 21px;
}
.header-dialogue{
    height: 37px;
    text-align: center;
    border-bottom: 1px solid #ebebeb;
    padding : 3px 17px 3px 181px;
}
.dialogue-name{
    font-size : 21px;
    color      : green;
    margin-right: 37px;
}
.dialogue-phone{
        font-size : 19px;
        color      : #777;
}
.row.message-in{
    padding: 7px 17px 0 17px;
}
.message-in-wrapper{
    background-color : rgba(70,170,70,0.3);
    border-radius    : 5px;
    padding          : 7px 0 7px 9px; 
    margin-left      : -37px;
}
@media(max-width: 991px) {
    .message-in-wrapper{
        margin-left      : 0;
    }
}
.message-out-wrapper{
    background-color : rgba(255,140,0,0.2);
    border-radius    : 5px;
    padding          : 7px 9px 7px 0; 
    margin-left      : -37px;
}
@media(max-width: 991px) {
    .message-in-wrapper{
        margin-left      : 0;
    }
    .message-out-wrapper{
        margin-left      : 0;
    }
}
.date-in{
    margin-bottom: 7px;
    border-bottom: 1px solid #ebebeb;
    padding        : 7px 13px 7px 13px;
}
.date-out{
    padding-bottom : 14px;
    padding        : 7px 13px 7px 13px;
    border-bottom: 1px solid #ebebeb;
}
.date-in-wrapper{
    color          : #777;
    font-weight    : bold;    
}
.date-in-wrapper{
    color          : #777;
    font-weight    : bold; 
    text-align     : left; 
}
.date-out-wrapper{
    color          : #777;
    font-weight    : bold; 
    text-align     : right; 
}
.date-out-status{
    color        : #ff8c00;
    font-weight  : bold; 
    text-align   : right; 
    font-size    : 14px;
    margin-right : 7px;
}
.img-wrapper{
    width       : 57%;
    
}
.row.message-out{
    padding: 5px 17px 0 17px;
    text-align : right; 
}
.mmm-logo-wrapper{
    width:35px;
    margin-top:0;
}
.find-wrap{
    margin-left : 21px;
    color       : green;
    cursor      : pointer;
}
.find-wrap:hover{
    color       : darkorange;
}

@media(max-width: 991px) {
    .mmm-logo-wrapper{
        margin-top:7px;
    }
}

.write-message{
    background-color : #fff;
    min-height       : 100px;
    margin           : 0 1% 0 20%;
    margin-top       : 37px!important;
    display          : none;
    position         : fixed;
    width            :70%;
    bottom           : 0px;
    
}
.new-textarea{
    width  : 100%;
    border : 1px solid #bcbcbc;
}
.new-text{
    padding : 21px;
}
.send-button{
    vertical-align : middle;
    font-size      : 31px; 
    color          : darkorange;
    cursor         : pointer;
}
.send-wait{
    display     : none;
    color       : green;
    font-weight : bold;
    font-size   : 10px;
}
#dialog-confirm{
    display : none;
}
.js-send-new-message{
    cursor : pointer;
}
.field-wrap{
    padding-top: 7px;
    width      : 100%;
}
.field-message{
    width        : 100%;
    border       : 1px #bcbcbc solid;
    padding-left : 3px;
}
.text-message{
    width        : 100%;
    border       : 1px #bcbcbc solid;
    padding-left : 3px;
}
.error-message{
    color   : red;
    display : none;
}
#simple-send{
    text-decoration : underline;
    cursor          : pointer;
}
.picture-form{
    margin :21px 0;
}
#upload-file{
    border : none;
    color  : #fff;
    
}
.img-container{
    width      : 90%;
    text-align : center;
}
.img-wrap{
    width         : 90%;
    text-align    : center;
    padding       : 7px 0;
    border-bottom : #ebebeb 1px solid;
}
.pic-delete{
    padding     : 21px;
    color       : darkred;
    font-size   : 21px;
    font-weight : bold;    
}
.pic-delete i{
    cursor: pointer;
}
.wait-message{
    color       : green;
    font-size   : 12px;
    font-weight : bold;
    display     : none;
}
.padding-row{
    color      : darkorange;
    font-size  : 37px;
    text-align : center;
    cursor     : pointer;
    padding    : 0;
}
.hidden{
    display : none;
}
.see-more, .see-up{
    background-color : #149063;
    border           : 1px #149063 solid;
    color            : #fff;
    padding          : 7px;
    border-radius    : 3px;
    width            : 10%;
    margin           : 0 45%;
    text-align       : center;
    font-weight      : bold;
    cursor           : pointer; 
    display          : none;
    margin-bottom    : 21px; 
}
.see-more:hover{
    background-color : #fff;
    color            : #e37223;
}
.see-up:hover{
    background-color : #fff;
    color            : #e37223;
}
.not-seen{
    font-weight      : bold;
    color            : #000;
    font-size        : 14px !important;
}
.w-shift{
    width            : 47px;
    height           : 20px;
    border-radius    : 7px;
    background-color : #ebebeb;
    cursor           : pointer; 
}
.w-ball{
    width            : 27px;
    height           : 27px;
    border-radius    : 50%;
    background-color : #999;
    position         : absolute;
    margin-left      : -1px;
    margin-top       : -3px; 
    cursor           : pointer;    
}
.started{
    background-color : rgba(0,100,0,0.3);
}
.started .w-ball{
    background-color : #00f000;
    margin-left      : 50%;
}
.mark-unread{
    display         : none;
    text-decoration : underline;
    cursor          : pointer; 
}
.dr-selected{
   background-color : #bebebe;
}
.edit-driver,.remove-driver{
    font-size    : 27px; 
    color        : #ccc; 
    margin-right : 21px;
    cursor       : pointer;
    display      : none; 
}
.edit-driver:hover{
    color        : #ff8c00;
}
.remove-driver:hover{
    color        : #ff8c00;
}

#driver-form{
    display : none;
}
.driver-input-wrap{
    margin : 11px 0;
}
.driver-input{
    width        : 100%;
    border       : solid 1px #bcbcbc;
    height       : 28px;
    padding-left : 3px; 
}
.add-user{
    margin-left : 49px;
    color       : #ff8c00;
    font-size   : 16px; 
}
.add-user:hover{
    color       : #ebebeb;
}
.sys-phone-label{
    font-size   : 12px;
    margin      : 0 14px 0 21px;
    color       : #777;
    font-weight : bold;
}
.sys-phone{
    font-size   : 16px;
    /*margin      : 21px 0;*/
    color       : #149063;
    font-weight : bold;
}
.not-red{
    color : red;
}
.one-message{
    position         : absolute;
    width            : 330px;
    margin-top       : 22px;
    margin-right     : 449px;
    margin-top       : 35px;
    margin-left      : -126px;
    background-color : #ebebeb;
    text-align       : center; 
    padding          : 14px; 
    display          : none;
}
.sender-name{
    text-transform   : uppercase;
    font-weight      : bold;
    font-size        : 21px;
    color            : green;    
}
.sender-date{
    font-size        : 12px; 
}
.message-body{
    padding   : 7px;
    font-size : 18px;
    color     : green;
}
.del-mes{
    position    : absolute;
    margin-left : 300px;
    cursor      : pointer;
}
#dialog-group{
    display:none;
}
.gr-sms{
    background-color : #149063;
    color            : #fff;
    padding          : 4px 13px;
    border-radius    : 3px;
    cursor           : pointer
} 
.gr-sms:hover{
    background-color : #fff ;
    color            : #ff8c00;
}
.edit-list{
    color: #ff8c00;
    text-decoration : underline;
    font-size       : 10px;
    font-weight     : bold;
    cursor          : pointer;
    margin-left     : 21px;
}
.l-number{
    font-size: 12px;
    color:green;
    font-weight: bold;
}
.l-name{
    font-size: 12px;
    color:#333;
    font-weight: bold; 
}
.list-sel{
    font-size   : 14px;
    color       : #ff8c00;
    font-weight : bold; 
    cursor      : pointer;
}
.list-sel:hover{
    color       : green;
}
.list-sel-dialog{
    font-size   : 14px;
    color       : #ff8c00;
    font-weight : bold; 
    cursor      : pointer;
}
.list-sel-dialog:hover{
    color       : green;
}
.all-buttnon{
    background-color : #ff8c00;
    color            : #fff;
    padding          : 4px 13px;
    border-radius    : 3px;
    cursor           : pointer;
    text-align       : center; 
}
.ss-number{
        font-size: 12px;
        color:#333;
        font-weight: bold; 
}
.ss-name{
        font-size: 12px;
        color: green;
        font-weight: bold; 
}
.list-del{
        font-size   : 14px;
        color       : #ff8c00;
        font-weight : bold; 
        cursor      : pointer;
}
.list-del:hover{
    color       : green;
}
.all-list-row{
    width:100%;
    border-bottom : 1px #ebebeb solid;
}
.original-list{
    width      : 100%; 
    height     : 333px; 
    overflow-y : scroll;
}
.dr-row{
     border-bottom : 1px #ebebeb solid;
}
.js-result-list{
    margin-top:21px;
    width : 90%;
}
.error-group-message{
    width:90%;
    font-size: 14px;
    font-weight: bold;
}
.error-head{
    margin : 12px 0;
    color  : darkorange;
}
.success-head{
    margin      : 12px 0;
    color       : green;
    font-weight : bold;
}
.upper-user{
    font-size   : 14px;
    font-weight : bold;
    color  : darkorange;
}
.add-to-dialog-wrap{
    display:none;
}
.add-to-dialog{
    margin: 0 33px;
    background-color: darkorange;
    color:#fff;
    text-align: center;
    width : 200px;
    border-radius: 5px;
    cursor : pointer;
    padding:4px;
    display: inline-block;
}
.add-to-dialog:hover{
    color            : darkorange;
    background-color : #fff;
}
.dialog-user{
    font-size: 12px;
    font-weight: bold;    
}
.delete-group-dialog-user{
    padding-left  : 4px;
    padding-right : 4px;
    font-weight   : bold;
    color         : darkred;
    cursor        : pointer;
    font-size     : 16px;
    font-weight   : bold;
}
.delete-group-dialog-user:hover{
    color         : red;
}
.hide-group-dialog{
    text-align    : right;
    font-size     : 33px;
    color         : #777;
    cursor        : pointer;
    height        : 20px;
    margin-left   : 82%; 
}
.hide-group-dialog:hover{
    color : #000;
}
.new-member-dialog{
    font-size     : 37px;
    color         : darkorange;
    font-weight   : bold;    
}
.new-member-dialog:hover{
    color         : green;
    cursor        : pointer;
}


.group-dialog-but{
    display     : none;
    cursor      : pointer;
    color       : darkorange;
    font-weight : bold;
}
.gr-dialog-number{
    display     : none;  
    cursor      : pointer;
    color       : darkorange;
    font-weight : bold;
}
.mms-text-wrap{
    width         : 100%;
    padding       : 0 13px;
    margin-bottom : 21px;
}
#mms-text{
    border      : 1px solid #777;
    height      : 33px;
    padding     : 3px 4px;
    width       : 100%;
}

.get-group-button{
    width            : 90%;
    padding          : 2px 4px;
    background-color : #fff;
    border-radius    : 3px;
    color            : darkorange;
    cursor           : pointer;
    text-align       : center;
}
.get-group-button:hover{
    background-color : darkorange;
    color            : #fff;
}
.deletegroup{
    cursor           : pointer;
}
.deletegroup:hover{
    color            : red;
}
.dial-tabs{
    color            : darkorange;
    text-decoration  : underline;
    cursor           : pointer;
    text-align       : center;
    margin-bottom    : 17px;
    background-color : #ebebeb;
    padding          : 7px;
}
.dial-tabs:hover{
    color            : green;
}
.cl-green{
    color : green;
}
.save-group-dialog{
    cursor : pointer;
}

.still-here-yes, .still-here-no{
    width            : 144px;
    padding          : 4px;
    color            : #fff;
    background-color : darkorange;
    text-align       : center;
}
.still-here-yes:hover, .still-here-no:hover{   
    color            : darkorange;
    background-color : #fff;
    cursor           : pointer;
}

.still-here-row{
    width   : 95%;
    margin  : 37px 0;
}
.down-arrow{
    position         : absolute;
    width            : 49px;
    height           : 49px;
    background-color : rgba(100,100,100,0.5);
    border-radius    : 50%;
    margin-left      : 100%;
    cursor           : pointer;
    padding          : 7px 11px 11px 11px;
    text-align       : center;
    font-size        : 24px;
    color            : #000;
}
.down-arrow:hover{
    color            : #fff;
    background-color : rgba(150,150,150,0.5);
}
.clear-search{
    font-size: 21px; 
    cursor:pointer
}
.clear-search:hover{     
    color : #00ff00;
}
.group-driver{
    padding-left : 31px;
    color        : green;
    cursor       : pointer;
    font-size    : 21px;
}
.group-driver:hover{
    color        : darkorange;
}
.drivers{
    display      : none;
}
.group-window{
    display      : none;
}
.driver-phone-left{
    font-weight  : bold;
    font-size    : 10px;
}
.driver-number-left{
    font-size    : 12px;
}
.driver-name-left{
    color        : black; 
}
.driver-date-left{
    font-size : 10px; 
}
.arrow-list{
    color       : darkred;
    font-weight : bold;
    cursor      : inherit;
    font-size   : 21px; 
}
.arrow-list:hover{
    color       : darkred;
}
.arrow-list.unabl{    
    color       : gray;    
    cursor      : pointer;
}
.arrow-list.unabl:hover{
    color       : green;
}
.all-drivers-sort{
    color       : darkred;
    font-weight : bold;
    cursor      : inherit;
    font-size   : 21px;
}
.all-drivers-sort:hover{    
    color       : darkred;    
}
.all-drivers-sort.unabl{
    color       : grey;
    cursor      : pointer;
}
.all-drivers-sort.unabl:hover{
    color:green;
    
}