::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
}

html::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 0.7rem;
}

::-webkit-scrollbar-thumb {
  border-radius: 0.7rem;
  background-color: var(--mud-palette-gray-light);
}

::-webkit-scrollbar-thumb:hover {
  background-color: #8098ab;
}

.body-with-background {
}

.body-normal {

}

/*.app-background {
    background: #E6EAEE;
}*/

.dashboard-item {
    width: 100%;
}

.dashboard-item-graph {
    height: 380px;
}

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

.navLogo .v-blue {
    fill: #003057;
}

.navLogo .v-white {
    fill: #ffffff;
}

.navLogo .v-orange {
    fill: #ff621a;
}

.ldr-item-container {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.direction-stop {
    height: 15px;
    width: 30px;
    font-size: 8px;
    font-weight: 200;
}

.direction-stop-compact {
    height: 9px;
    width: 18px;
    font-size: 8px;
    font-weight: 200;
}

.direction-in-stop {
    text-align: center;
    padding-top: 4px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0px);
    border-radius: 50px 50px 0 0;
    background-color: #95B2C2;
}

/*.direction-in-stop-v1 {
    height: 12px;
    width: 12px;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}*/

.direction-out-stop {
    text-align: center;
    padding-top: 1px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0px);
    border-radius: 0px 0px 50px 50px;
    background-color: #95B2C2;
}

/*.direction-out-stop-v1 {
    height: 12px;
    width: 12px;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}*/

.direction-stop-dark {
    background-color: #95B2C250;
}

.direction-no-stop {
    height: 15px;
}

.direction-no-stop-compact {
    height: 9px;
}

.base-stop {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    width: 95px;
    border-radius: 10px;
    padding: 2px;
    font-size: 12px;
    font-weight: 600;
    margin: 0 auto;
    background-color: #EAD99C;
    text-align: center;
    vertical-align: middle;
}

.base-stop-compact {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 94px;
    width: 46px;
    border-radius: 4px;
    padding: 2px;
    font-size: 14px;
    font-weight: 600;
    margin: 0 auto;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background-color: #EAD99C;
    /*color: black;*/
    text-align: center;
    vertical-align: middle;
}

.base-stop-dark {
    background-color: #F3E59A50;
}

.base-no-stop {
}

.direction-label-in {
    color: #637174;
    text-align: center;
    font-size: 20px;
    padding: 2px;
    margin-bottom: -10px;
}

.direction-label-out {
    color: #637174;
    text-align: center;
    font-size: 20px;
    padding: 2px;
    margin-top: -10px;
}

.debug-info {
    color: #637174;
    text-align: center;
    font-size: 20px;
    padding: 2px;
    margin-top: -200px;
}

.veh-ldr-container-dir-in {
    height: 40px;
    margin-bottom: 12px;
    margin-top: 10px;
}

.veh-ldr-container-dir-out {
    height: 40px;
    margin-bottom: 12px;
    margin-top: 10px;
    float: right;
}

/*.veh-ldr-container-dir-out-v1 {
    height: 50px;
    width: 100%;
}*/

.layover-rotation-wrapper-outer-first {
    display: table;
    float: right;
    height: 100%;
    width: 100%;
}

.layover-rotation-wrapper-inner-first {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-flow: row wrap;
    height: 100%;
    width: 100%;
    /*transform: rotate(-90deg);*/
    /*transform-origin: left center;*/
    gap: 2px;
    position: relative;
}

.layover-rotation-wrapper-outer-last {
    display: table;
    height: 100%;
    width: 100%;
}

.layover-rotation-wrapper-inner-last {
    display: flex;
    /*justify-content: flex-start;*/
    align-items: center;
    flex-flow: row wrap;
    height: 100%;
    width: 100%;
    /*transform: rotate(-90deg);*/
    /*transform-origin: right center;*/
    gap: 2px;
}

/*.container-vehldr-layover-first-v1 {
    height: 100%;
    width: 100%;
    position: relative;
    display: inline-block;
}*/

/*.container-vehldr-layover-last-v1 {
    height: 100%;
    width: 100%;
    background-color: #ff621a;
    position: relative;
    display: inline-block;
}*/

.veh-ldr-container-layover-last {
    display: block;
    transform: rotate(90deg);
    white-space: nowrap;
}

.veh-ldr-location {
    height: 40px;
    margin-bottom: 12px;
    margin-top: 10px;
}

.veh-adherence-unknown {
    background-color: gray;
    color: #003A9D;
    /*border-radius: 3px;*/
}
.veh-adherence-early {
    background-color: #00305A;
    color: #FFFFFF;
    /*border-radius: 3px;*/
}
.veh-adherence-ontime {
    background-color: #BFCBD6;
    color: #00305A;
    /*border-radius: 3px;*/
}
.veh-adherence-late {
    background-color: #FFFFFF;
    color: #00305A;
    /*border-radius: 3px;*/
}

.veh-ldr-direction-out {
    padding-top: 0px;
    padding-left: 0px;
}

.veh-ldr-direction-in {
    padding-top: 0px;
    padding-right: 0px;
}

.veh-ldr-item {
    background-color: #295172;
    color: black;
    width: 88px;
    border-radius: 8px;
    padding: 2px;
    vertical-align: middle;
}

.veh-ldr-item-dark {
    background-color: #29517250
}

.ldr_location_filler {
    color: #B6C6D6;
    text-align: center;
    font-size: 30px
}

.vehicle-headway {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    padding-top: 8px;
    font-size: 12px;
    font-weight: 400;
    width: 29px;
    height: 32px;
    display: inline-block;
    text-align: center;
}

.vehicle-property-tag {
    font-size: 18px;
    font-weight: normal;
    line-height: 24px;
    text-align: center;
    padding-top: 0px;
    display: inline-block;
    margin: auto;
    vertical-align: middle;
    width: 48px;
    background-color: #00000000;
    color: white;
}

.current-load {
    font-size: 14px;
    font-weight: 400;
    padding-top: 5px;
    padding-left: 7px
}

mud-tab.mud-tab-active.mud-ripple, mud-tab.mud-ripple {
    min-width: 90px;
}