body {
    color: #888;
}

html {
    background-color: #2b2427;
}

.wrapper {
}

.modal #modal-windows {
    background: #0000002e;
}

.shadow, .ui-widget-content {
    box-shadow: 0px 0px 1em #000000ba;    
}

.date, .time {
    color: #cdcdcd;
}

.mainmenu h1, .mainmenu .btn {
    color: white;
}

.notifications .item p {
    color: burlywood;
}

.notifications .item .header {
    color: white;
}

#modal-windows > .view,
#windows > .view {
    box-shadow: 0px 0px 1em #000000ba;
    background: #333;
}

.bottom-layer > .view {
    background: #333;
}

.bottom-layer > .view:nth-child(1) {
    box-shadow: 0px 0px 1em #000000ba;
}

.bottom-layer > .view:nth-child(+2)::before {
    content: "";
    width: 100%;
    height: 4px;
    background-color: #594b3c;
    border-top: 1px solid #000000;
}

.view > .title h3 {
    color: #8d8d8d;
}

.field p {
    color: #d0feff;
}

.content .title {
    color: #ffffff75;
}

.button, .toolbar a, .button-flat {
    color: white;
    background-color: transparent;
}

.datetime-field {
    color: gray;
}

.button {
    background-color: #ffffff54;
    box-shadow: 0px 0px 12px black;
}

.items .button {
    color: #ebebeb;
    background-color: #AAA;
}

.button:active {
    color: black;
    background-color: white;
    box-shadow: 0px 0px 12px white;
}

.button:hover {
    box-shadow: 0px 0px 12px #ffffff40;
}

#DriverMenu {
    background-color: #333;
    background-image: url(images/menu.png);
}

.date, .time {
    background: transparent !important;
}

.btn {
    background: #40a7e3;
}

.btn:active {
    background: #2e76a0;
}

.car button {
    border-color: gray;
    box-shadow: 0 0 1em black;
    color: #4f4f4f;
}

.footer .slider .notify, .car {
    color: gray;
}

.light.chess {
    background-color: #FFF;
    background-image: linear-gradient( 45deg, #CCC 25%, transparent 25%, transparent 74%, #CCC 75%, #CCC), 
                        linear-gradient( 45deg,#CCC 25%, transparent 25%, transparent 74%, #CCC 75%, #CCC);
}

.dark.chess {
    background-color: #333;
    background-image: linear-gradient( 45deg, #444 25%, transparent 25%, transparent 74%, #444 75%, #444), 
                        linear-gradient( 45deg,#444 25%, transparent 25%, transparent 74%, #444 75%, #444);
}

.auto {
    background-image: url(images/car01.png);
}

.auto.offline {
    opacity: 0.5;
}

.position {
    width: 12px;
    height: 12px;
    border: 1px solid black;
    border-radius: 6px;
    background-color: black;
    animation-name: positionAnim;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

@keyframes positionAnim {
  0% {
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
    background-color: black;
  }
  50% {
    box-shadow: 0px 0px 0px rgba(0,0,0,0.5);
    background-color: blue;
  }
  100% {
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
    background-color: black;
  }
}

.driver-position {
    background-image: url('images/driver-position.png');
}

.user-marker.execution {
    filter: hue-rotate(280deg);
}

.user-marker.accepted {
    filter: hue-rotate(168deg);
}

.user-marker.driver_move {
    filter: hue-rotate(126deg);
}

.user-marker.wait_meeting {
    filter: hue-rotate(22deg);
}

.user-marker {
    background-image: url('images/user-marker.png');
}

.user-marker.expired {
    opacity: 0.5;
}

.notifications .item {
    background: #333;
}

.field label {
    color: #888;
}

.field input, select, .datetime {
    background: #454545;
    border-color: #0000008c;
    color: #AAA;
}

input:is(:-webkit-autofill, :autofill) {
    background-color: #454545 !important;
    border-color: #0000008c;
    color: #AAA;
}

select.time {
    background: #454545 !important;
}

.field input:focus, .datetime:focus {
    background: #4d4c5f;
}

.close, .closed:after {
    background-image: url(images/close-w.png);
}

.popup .close {
    background-image: url(images/close-b.png);
}

.info .button {
    background: #333;
}

.divider {
    border-color: #4b4b4b;
}

.hr {
    border-color: #4b4b4b;
}

.infoView {
    color: gray;
}

.datetime > .now {
    color: #8b8b8b;
}

.button {
    opacity: 1;
}

.button:disabled {
  background-color: #69696929 !important;
  opacity: 0.4 !important;
}

.toolbar {
    background: #333;
}

.toolbar a {
    color: #AAA;
}

.menu img {
    filter: brightness(0.7);
}

.submenu {
    background: #333;
}

.submenu {
    color: #aaa;
}

.submenu a {
    color: #aaa !important;
}

.submenu a:hover {
    color: white;
}

.submenu i {
    text-shadow: 1px 1px 2px black;
    color: #777;
}

.submenu .item {
    box-shadow: 1px 1px 3px #00000052;
}

form > .footer{
    background-color: #333;
    box-shadow: 0px 0px 8px #00000059;
}

.warning, .warning::before {    
    background-color: #975224;
    color: white;
}

.warning {
    box-shadow: 8px 8px 1px #0000009c;
    border-radius: 0.5em;
}

.selectView .popup-button::before {
    border-top-color: black;
    border-left-color: black;
}

.selectView .button {
    background-color: #EEE;
}

.windows .popup {
    background-color: white;
}

/*------------------selectView----------------*/

.selectView .block {
    border-color: gray;
    background-color: #a7a7a7;
    box-shadow: inset 0 0 0.5em #0000009c;
}


.selectView .value {
    color: #2b2427;
}

.items {
    background-color: #DDD;
}

.items .option:hover {
    background-color: white;
}

.items .option:active {
    background-color: white;
}

.items .option .header {
    color: #737373;
}

.listView {
    background-color: #a7a7a7;
    border: 1px solid gray;
    box-shadow: inset 0 0 0.8em #000000bf;
}

.listView .option {
    color: #0000009e;
    
}

.edit {
    background-image: url(images/edit-32.png);
}

.items .notifyItem .trash {
    background-image: url(images/trash-black.png);
}

.data .block {
    border: 1px solid #ffffff12;
    box-shadow: 2px 2px 1em #00000059;
}

.trips .data .block h3 {
    background: #2b2427;
}

#windows .view .data .block h3,
#modal-windows .view .data .block h3 {
    background: #333;
}

.data .block .name {
    color: #ffffffab;
}

.order.finished .stateHead .state {
    color: cyan;
}

.order.wait_meeting .stateHead .state {
    color: coral;
}

.execution .state {
    color: coral;
}

.rejected .state {
    color: orange;
}

.cancel .state {
    color: orange;
}

.view .settings {
    background-image: url(images/settings-white.png);
}

.orderView.execution .stepInfo {
    background: #00000099;
}

.gm-control-active {
    background: #424242 !important
}

.gm-control-active:hover {
    background: #000 !important;
}

.orderInfo .stepInfo {
    padding-left: 1em;
}

.vidget .block {
    color: #cccccc;
    background: #00000099;
}

.markers .marker.finish {
    background: white;
}

.markers .marker.start .arrow {
    border-top: solid 5px white;
    border-right: solid 5px white;
}

.marker .tip {
    background: #333;
}

.marker .up {
    box-shadow: 0px 0px 4px #33333382;
}

.tracerBar {
    background: #919191;
}

.tracerBar > div {
    background: #696969;
}

.timeLine .startTime,
.timeLine .finishTime {
    background: #333;
}