html, body {
  overflow: hidden;
  color:#010101;
}

/* Lists */
ul {
  margin: 0;
  padding: 0;
}

p {
    margin:0px;
}
/* Header */
.site-header {
  position: fixed;
  background: #6ebd52;
  color: #ffffff;
  width: 100%;
  height:47px;
  text-align: left;
  font-size:24px;
  z-index: 9998;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 7px;
}
#headerTitle {
    /*position:absolute; 
    left:65px; 
    top:7px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    flex: 1 1 auto;
}
#seachDiv{
    width: 20vw;
    min-width: 150px;
    /*display:none;*/
    margin-right: 5px;
    position: relative;
}
#seachDiv i {
    position: absolute;
    right:7px;
    top:5px;
    cursor: pointer;
    color: #c1c1c1;
}
#alertRedString{
    cursor:pointer;
    position: absolute;
    width: 100vw;
    padding:10px;
    left:0px !important;/*for being as google fullscreen element*/
    right: 0px;
    top: 47px;
    display:none;
    background: #d9534f;
}
#alertRedString span{
    color:#ffffff;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    animation: marquee 15s linear infinite;
}
#alertRedString:hover span {
  animation-play-state: paused
}
@keyframes marquee {
  0% {
    transform: translate(100vw, 0);
    opacity:0;
  }
  10% {
    transform: translate(70vw, 0);
    opacity:1;
  }
  90% {
    transform: translate(-70%, 0);
    opacity:1;
  }
  100% {
    transform: translate(-100%, 0);
    opacity:0;
  }
}
@media screen and (max-width: 767px) {
    .site-header { 
      font-size:22px;
    }
    #headerTitle {
        top: 13px;
        left: 58px;
        font-size: 16px;
    }
}

#alertRedPopup{
    width:500px; 
    height:auto; 
    background:#d9534f; 
    color:#ffffff; 
    display:none;    
    font-size:20px;
    padding:20px;
        margin: 10px;
        cursor:pointer;
}


/* Container main body screen */
#container {
  position: relative;
  padding: 0px 0px;
  background: #ffffff;
  width:100%;
  height:100vh;
}
#systemSelector,
#routeSelector,
#navigator,
#terms,
#login {
  position: absolute;
  padding-top: 47px;
  background: #ffffff;
  left:0px;
  top:0px;
  width:100%;
  height:100vh;
  display: none; /* flex will be */
  justify-content: center;
  align-items: center;
}
#systemSelector{
    flex-direction: column;
}
#navigator,
#terms,
#login {
  background: transparent;
  margin: 0px;
  padding: 0px;
  z-index: 9999999;
}
.popupDimmer{
  position: absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  background: #0000004f;
}
#navigatorView,
#termsView,
#loginView {
  position: relative;
    background: #ffffff;
    max-height: 80vh;
    max-width: 80vw;
    min-height: 30vh;
    min-width: 30vw;
    box-shadow: #2d2d2d70 16px 13px 3px;
    border-radius: 5px;
    overflow: auto;
}
#termsView{
    min-height: 50vh;
    min-width: 50vw;
}
#messages{
    display: none;
    background: #ffffff;
    width: 500px;
    height: 100vh;
    top: 47px;
    right: 0px;
    margin: 0px;
    padding: 20px;
    padding-top: 47px;
    position: absolute;
    overflow-y: auto;
    box-shadow: #e1e1e1 -5px 5px 5px;
}
@media screen and (max-width: 767px) {
    #navigatorView,
    #termsView,
    #loginView { 
      max-height:inherit;
      min-height:inherit;
      min-width:inherit;
    }
}
#navigator {
    left:50%;
    right:0px;
    width:50%;
}
#navigatorView {
    overflow-y: auto;
}

.gmnoprint.gm-style-mtc, .gm-fullscreen-control {
    margin-top:50px !important;
}

.gm-style .gm-style-iw-c{
    /*gmap click cloud*/
    border-radius: 0px;
    padding: 8px;
}
.gm-style .gm-style-iw-c{
 opacity:0.88;/*infowindow*/
 border-radius: 7px;
}
.jsgrid-grid-body{
    overflow-x:hidden;
}
.client-0 {
    background: #ffffff;
}
.client-1 {
    background: #f7f7f788;
}
.client-fullname{
    display:flex; flex-direction:column;justify-content: center;
    font-size:18px;
    margin-left: 25px;
}
.client-fullname a{
    overflow: hidden;max-width: 25vw;display: block;text-overflow: ellipsis;font-size: 14px; text-decoration: underline;
}
.client-photo { 
    width: 200px;
    height: 80px;
    float: left; 
    margin: 0px; 
    cursor:pointer;
}
.client-selected { 
    background: linear-gradient(to right, #23cb23 0%,#ffffff 0.5%) no-repeat; 
    background-size: cover;/**/
    /*it jumps! border-left: 10px solid #23cb23;/**/
}
.client-selected .jsgrid-cell{ 
    background: none;
}
.client-photo img { 
    /*position: absolute;dont.set in code cuz old UI doesnt use so*/
    width: 200px;
    max-height: 80px;
    object-fit: contain;
    overflow: hidden;
    border-radius: 5px; 
    border: 1px solid #e0e0e0; 
    padding: 5px;
    transition: all 0.25s linear;
}
.client-photo .back{
    position: absolute;
    width: 200px;
    height: 80px;
    background:#6ebd52;
    border-radius: 5px; 
    border: 1px solid #e0e0e0; 
    padding: 5px;
    display:flex;
    justify-content: center;
    align-items: center;
    color:#ffffff;
    font-weight: bold;
    font-size:20px;
    cursor:pointer;
    transition: all 0.25s linear;
}
.client-photo .back:hover{
    background:#569e3c;
}
.client-compacted{
    width:100px !important;
    height:40px !important;
        margin-left: 5px;
    margin-right: 15px;
}
.flipped {
    transform: rotate3d(0, 1, 0, 90deg);
    transform-origin: 50% 50%;
    transition: all 0.15s linear;
}
.client-row {
    font-size: 20px;
}
.infowindow {
    font-size:16px;
    /*padding:5px;*/
}
@media screen and (max-width: 767px) {
    .client-photo { 
        float: left; 
        margin: 0px; 
    }
    .client-photo img { 
        width: 50px;
    }
    .client-row {
        font-size: 18px;
    }
    .infowindow {
        font-size:15px;
        padding:0px;
    }
    .btn {
        height:30px;
        font-size:14px;
    }
    .btn img {
        height:16px;
    }
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus{
    outline:none;
}

    
/*  material switch */
.material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative; 
    width: 45px;  
    margin: 10px;
    margin-right:20px;
    margin-left:20px;
    font-size: 0px;color: transparent;/*ADA*/
}

.material-switch > label::before {
    background: #000000;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.2;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: rgb(142, 142, 142);
    border-radius: 16px;
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    opacity: 0.8;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: #23cb23;
    left: 20px;
}
.material-switch.grayed > input[type="checkbox"]:checked + label::after {
    background: #000000;
    left: 20px;
}
@media screen and (max-width: 767px) {
    .material-switch > label {
        margin: 3px;
    }
}
/* mat sw */



/* NOTY */
.noty_message {
    font-size:18px;
}
.noty_effects_open {
  opacity: 0;
  transform: translate(50%);
  animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.noty_effects_close {
  animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes noty_anim_in {
  100% {
    transform: translate(0);
    opacity: 1;
  }
}

@keyframes noty_anim_out {
  100% {
    transform: translate(50%);
    opacity: 0;
  }
}
/* nty*/


.glyphicon-refresh-animate {
    animation: spin .7s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}


tr.highlight {
  background-color: #6ebd5240;/*#026f001f;*/
}
tr.highlight>.jsgrid-cell {
    background: inherit;
}
.ui-front {
    z-index: 1000000;
}


#rightMenuMessages.blink{
    animation: newblink 1.5s linear infinite alternate;
}
@keyframes newblink {
    0% { 
        background: #ffeeee;
        transform: scale(1.05);
    }
    100% { 
        background: #ffaaaa;
        transform: scale(1.0);
    }
}

.stopEtaTitle{
    margin: 7px;
    margin-left: 0px;
    text-align:left; 
    position:relative; 
    cursor:pointer;
    flex: 1 1 auto;
}
.stopEtaTitle:hover{
    text-decoration: underline;
}

.navheaderlink{
    /*display:inline  !important; */
    color:#fdfdfd !important;
    display:block;
}
.navheaderlink:hover{
    color:#0000ff !important;
}
.routestopsDetailStop{
    color:#808080;
    cursor:help;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}
.routestopsDetailStop:hover{
    color:#0000ff;
    /*text-decoration: underline;*/
}
.routestopsDetailStop .thestop{
    width:25px;
    height:25px;
    border-radius:50%;
    border:2px solid #ffffffba;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-shadow: 0px 0px 2px #000000;
    margin: 2px;
    margin-right: 5px;
}

.man-shrugging{
    display:inline-block;
    width: 30px;
    height:30px;
    background: url(../img/man-shrugging.png) no-repeat;
    background-size: 100%;
    
}
.markerLabel{
    color:#000000;
    font-size:11px;
    border-radius: 3px;
    font-size:11px;
}
.routeScreenRbadge{
    height:21px; width:auto; padding: 5px;padding-left: 7px;padding-right: 7;margin-right: 10px;box-shadow: 1px 1px 2px #80808055;border-radius:5px; 
    color:#ffffff; text-shadow:1px 1px 2px #555555; font-size:18px; display:flex; align-items:center;
    min-width: 40px;
    justify-content: center;
}

.busstop_eta{
    width: 45px;
    height: 45px;
    margin-left: -6px;
    transform: translateY(3px);
    filter: grayscale(1) brightness(0.6) contrast(1.5);
}


.bottomPanel{
    position:fixed; 
    bottom:-100vh;
    left:0px;
    width:100vw; 
    height: auto;
    min-height: 100px;
    max-height: 90vh;
    overflow: hidden; 
    /*visibility: hidden;*/
    /*opacity: 0;*/
    box-shadow:#3C4652 0px -5px 17px; 
    transition: all 0.3s;/**/
    z-index: 10000;
}
.bottomPanelDiv{
    /*position:absolute; 
    top:0px; 
    left:0px;*/
    width:100%; 
    height:100%;
    /*max-height:75vh;*/
    padding:20px;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    overflow: auto; 
    font-size:22px;   
    background:#ffffff;
    color:#000000;
    text-align:center;
}
.bottomPanelOpen{
    bottom:0px;
    /*visibility: visible;*/
    /*opacity: 1;*/
    transition: all 0.3s;
}
.rightScheduleTable td{
    /*border-bottom:1px solid #e5e5e5;*/
    padding:0px;
    padding-left:5px;
    font-size:14px;
}
.scheduleTimeStopNo{
    width:25px;
    min-width: 25px;/*надо!*/
    height:25px;
    border-radius:50%;
    /*margin: 7px;*/
    display:flex;
    align-items: center;
    border: 1px solid gray;
    justify-content: center;
    color: ffffff;
    text-shadow: 1px 1px 1px #000000;
}
.scheduleTimeLabel{
    width:55px; 
    color:#000000;
    text-align: center;
    font-weight: normal;
    margin: 3px;
    overflow: hidden;
    font-size: 13px;
}
.scheduleTimeLabel:hover{
    background:#c1ffc9;
    border-radius: 3px;
    color:#000000;
}


#mailboxImg{
        height: 36px;
    border-radius: 30%;
    margin: 0px 5px 0px 0px;
    cursor: pointer;
    filter: sepia(100%) hue-rotate(35deg);
}




/*RideRequest*/
.rrPanel{
    position:fixed; 
    bottom:-100vh;
    right:15px;
    width:450px; 
    height: auto;
    min-height: 200px;
    max-height: 90vh;
    padding: 50px 7px 7px 7px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden; 
    box-shadow:#3C4652 0px -5px 17px; 
    transition: all 0.3s;
    z-index: 10000;
    background: #ffffff;
    border-radius: 5px 5px 0px 0px;
}
.rrPanelTitle{
    position:absolute; 
    top:0px; 
    left:0px;
    width:100%; 
    height:50px;
    padding:5px;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    background:#6ebd52;
    color:#ffffff;
    font-size: 18px;
}
.rrPanel.opened{
    bottom:0px;
    transition: all 0.3s;
}
.rrTitleIco{
    position:absolute; left:5px; top:2px; height:45px;
}
.rrTitleIco.shake1{
    -webkit-animation-name:              shake;    
    -webkit-animation-duration:          0.8s;
    -webkit-animation-iteration-count:   infinite;
    -webkit-animation-timing-function:   linear;
    -webkit-transform-origin:            50% 100%;
}
@-webkit-keyframes shake {
  0%  { -webkit-transform:     translate(2px, 1px) rotate(0deg); }
  10% { -webkit-transform:     translate(-1px, -2px) rotate(-2deg); }
  20% { -webkit-transform:     translate(-3px, 0px) rotate(3deg); }
  30% { -webkit-transform:     translate(0px, 2px) rotate(0deg); }
  40% { -webkit-transform:     translate(1px, -1px) rotate(1deg); }
  50% { -webkit-transform:     translate(-1px, 2px) rotate(-1deg); }
  60% { -webkit-transform:     translate(-3px, 1px) rotate(0deg); }
  70% { -webkit-transform:     translate(2px, 1px) rotate(-2deg); }
  80% { -webkit-transform:     translate(-1px, -1px) rotate(4deg); }
  90% { -webkit-transform:     translate(2px, 2px) rotate(0deg); }
  100%{ -webkit-transform:     translate(1px, -2px) rotate(-1deg); }
 }
.rrRoute{
    width: 100%;display:flex;align-items: center; justify-content: space-between;font-size:16px;
    margin-top: 10px;
}
.kc_fab_wrapper{
  /*z-index: 1;
  width:100%;
  height:50px;*/
  position:fixed;
  right:10px;
  bottom:20px;
  pointer-events:none;
  display:none;
}
/*small menu item circle*/
.sub_fab_btn{
    width:300px !important;
    height:25px !important;
    margin-right:11px !important;
    border-radius: 10% !important;
    font-size: 15px !important;
    /*white-space: nowrap;*/
    overflow: hidden;
}
/*floating hint at the left*/
.sub_fab_btns_wrapper button[data-link-title]:hover:after{
        font-size: 14px;
        background:#ffffffee;
        color:#555555;
        margin-top: -13px;
    overflow: hidden;
}



.rrBtn{
    width:40px; height:40px;  margin-left:10px;    padding: 5px; border-radius:50%; 
    /*background:#6ebd52; */
    margin: 3px 7px; cursor:pointer;
}




.socBtn{
    width: 40px;
    height:40px;
    border-radius: 5px;
    font-size: 25px;
        background: #ffffff;
        color: #333333;
        position: initial;
    display: flex;
    align-items: center;
    justify-content: center;
        margin: 0px 10px;
    transition: all 0.3s;
    cursor:pointer;
    border: 1px solid #80808055;
    padding: 3px;
}
.socBtn:hover{
    box-shadow: 0px 0px 9px 1px #6ebd52aa;
    transition: all 0.3s;
}
.socBtn:active{
    box-shadow: 0px 0px 1px #6ebd52aa;
}
@media screen and (max-width: 767px) {
    .socBtn{
        margin: 0px 3px;
    }
}


.routeBadge{
    height:20px; width:auto; transform: translateY(-2px);padding: 5px;margin-right: 5px;box-shadow: 2px 2px 2px #80808055;border-radius:7px; 
    color:#ffffff; text-shadow:0px 0px 1px #000000; 
    font-size:12px; display:inline-flex; align-items:center;
}
.routeBadge span{
    text-overflow: ellipsis;
    max-width: 75px;
    overflow: hidden;
    min-width: 10px;
    text-align: center;
}






/*LAST!*/
@media screen and (max-width: 1500px) {
    .hideOn1500{
        display:none !important;
    }
}
@media screen and (max-width: 1100px) {
    .hideOn1000{
        display:none !important;
    }
}


/* styles for WCAG issues fixing by pure-accessibility */
*:focus {
    border: 2px solid red !important;
    outline: 2px solid red !important;
}
.skip-content-btn {
    position: fixed;
    top: 20px;
    left: 10px;
    width: fit-content;
    max-width: 100%;
    padding: 10px 20px;
    background-color: #010101;
    color: #fff;
    font-size: 20px;
    z-index: 100000;
    display: block;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
}
.skip-content-btn:focus {
    pointer-events: all;
    visibility: visible;
    opacity: 100%;
    color: #fff;
    text-decoration: none;
}
.skip-map-btn {
    position: fixed;
    top: 20px;
    left: 10px;
    width: fit-content;
    max-width: 100%;
    padding: 10px 20px;
    background-color: #010101;
    color: #fff;
    font-size: 20px;
    z-index: 100000;
    display: block;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
}
.skip-map-btn:focus {
    pointer-events: all;
    visibility: visible;
    opacity: 100%;
    color: #fff;
    text-decoration: none;
}
#headerTitle {
    margin: 0px;
    font-size: 24px;
}
.noty_close {
    opacity: 100% !important;
    display: block !important;
    top: 5px !important;
    right: 5px !important;
    /* background: none !important; */
    width: 15px !important;
    height: 15px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover;
    border: 1px solid #FFF;
    border-radius: 50%;
    content: 'X';
    padding: 5px;
}
.noty_close:focus {
    border: 1px solid gold !important;
    outline: 1px solid gold !important;
}
.form-control::placeholder {
    color: #757575;
}

.pop-close-btn {
    position: relative;
    top: calc(25px - 25vh);
}