.ar {text-align:right !important;}
.ac {text-align:center !important;}
.al {text-align:left !important;}
.warning {color:var(--bol-color-negative);}

i {vertical-align:text-bottom;width:20px;height:20px;display:inline-block;background-color:currentColor;mask-position:center;mask-size:20px;mask-repeat:no-repeat;}
i.marker-outline {-webkit-mask-image:url(/images/marker-outline.svg);mask-image:url(/images/marker-outline.svg);}
i.phone {-webkit-mask-image:url(/images/phone.svg);mask-image:url(/images/phone.svg);}
i.mail {-webkit-mask-image:url(/images/mail.svg);mask-image:url(/images/mail.svg);}
i.cart {-webkit-mask-image:url(/images/cart.svg);mask-image:url(/images/cart.svg);}
i.truck {-webkit-mask-image:url(/images/truck.svg);mask-image:url(/images/truck.svg);}
i.checkmark {-webkit-mask-image:url(/images/checkmark.svg);mask-image:url(/images/checkmark.svg);}
i.circle {-webkit-mask-image:url(/images/circle.svg);mask-image:url(/images/circle.svg);}
i.failed {-webkit-mask-image:url(/images/failed.svg);mask-image:url(/images/failed.svg);}
i.creation {-webkit-mask-image:url(/images/creation.svg);mask-image:url(/images/creation.svg);}
i.late {-webkit-mask-image:url(/images/late.svg);mask-image:url(/images/late.svg);}
i.search {-webkit-mask-image:url(/images/search.svg);mask-image:url(/images/search.svg);}
i.chevron {-webkit-mask-image:url(/images/chevron.svg);mask-image:url(/images/chevron.svg);}

.main-title {padding:5px 20px;font-size:1.3em;font-weight:500;text-transform:uppercase;}

#search-btn {position:fixed;top:85vh;right:38vw;left:38vw;text-align:center;border-radius:10px;padding:2px 5px;background-color:var(--bol-color-text-disabled);color:#fff;box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);text-decoration:none;}
#search-btn.selected {left:5vw;right:5vw;}
#search-btn i {width:20px;height:20px;mask-size:20px;}

.table {color:var(--bol-color-text-primary);}

.section {background:var(--bol-color-background-tertiary);border-radius:10px;padding:10px;margin:20px 0;}
.section:first-of-type {margin-top:0;}
.section .table>:not(caption)>*>* {border-bottom:0;padding:5px;}
.section .title {font-weight:500;}
.section .store-stats {float:right;}
.section .store-stats i {color:var(--bol-color-focus);}

.crd {background:var(--bol-color-background-tertiary);border-radius:10px;padding:10px;text-align:center;margin:10px;}
.crd .n {font-size:1.2em;padding:10px 0;font-weight:500;}
.crd .l {font-size:0.8em;}

#content {padding-top:65px;}

#searchdiv {position:fixed;width:100%;z-index:9999;padding:16px 10px;background-color:var(--bol-color-background-secondary);}
#product-search {background-color:var(--bol-color-background-tertiary);border:none;}
#search {background-color:var(--bol-color-background-tertiary);border:none;color:var(--bol-color-text-primary);}

#auto-suggest {position:relative;top:0.7rem;border-radius:10px;max-height:80vh;overflow:hidden;overflow-y:auto;padding:10px;font-size:0.9em;font-weight:300;z-index:9999;background-color:var(--bol-color-background-tertiary);display:none;box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);}
#auto-suggest ul {list-style:none;margin:0;padding:0;}
#auto-suggest ul li {padding:10px 10px 10px 36px;margin:5px 0;background-color:var(--bol-color-background-secondary);border-radius:10px;position:relative;}
#auto-suggest ul li .label {display:block;font-size:0.8em;}
#auto-suggest ul li i.marker-outline {position:absolute;left:10px;top:12px;}
#auto-suggest ul li i.chevron {position:absolute;top:20px;right:10px;color:var(--bol-color-primary);}

#stops-div {padding:10px 0;}
.stop {background-color:var(--bol-color-background-secondary);margin:10px;position:relative;border-radius:4px;}
.stop.filtered {display:none;}

.accordion-flush .accordion-item {border-radius:10px;box-shadow:none;border:0;}
.accordion-flush .accordion-item .accordion-button.collapsed {border:1px solid var(--bol-color-border);background-color:var(--bol-color-background-secondary);}
.accordion-item:last-of-type .accordion-button.collapsed {border-radius:10px;}
.accordion-flush .accordion-item .accordion-button:not(.collapsed) {box-shadow:none;border:1px solid var(--bol-color-border);border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;}
.stop .accordion-header {position:relative;border-radius:10px;}
.stop .accordion-header .time {position:absolute;bottom:16px;right:16px;font-size:0.9em;color:var(--bol-color-text-secondary);}
.stop .accordion-header .time.late {color:var(--bol-color-negative);font-weight:500;}
.stop .accordion-header .time.late i.late {mask-size:16px;width:16px;height:16px;margin-left:6px;}
.stop .accordion-header .status {display:inline-block;padding:2px 8px;background-color:var(--bol-color-primary);font-size:0.9em;border-radius:4px;color:#fff;margin-top:10px;}

.stop.finished .status {background-color:var(--bol-color-positive);}
.stop.skipped .status {background-color:var(--bol-color-negative);}
.stop.eta .status {background-color:var(--bol-color-accent);}
.stop.planned .status {background-color:var(--bol-color-primary);}
.stop.eta .location i {color:var(--bol-color-accent);}

.stop .accordion-body {position:relative;font-size:0.9rem;border:1px solid var(--bol-color-border);border-top:0;border-bottom-left-radius:10px;border-bottom-right-radius:10px;box-shadow:none;}
.accordion-flush .accordion-item .accordion-button {display:block;font-size:0.9rem;border-radius:10px;color:var(--bol-color-text-primary);}
.stop .location {display:block;position:absolute;top:10px;right:10px;padding:5px;border-radius:4px;}
.stop .location i {width:28px;height:28px;mask-size:28px;color:var(--bol-color-text-secondary);}
.date-marker {text-align:left;padding-left:20px;color:var(--bol-color-text-primary);font-weight:500;}
.date-marker > span {padding:5px 10px;}
.sssssstop .location i.failed.skipped {color:var(--bol-color-negative);}
.stop .location i.checkmark {color:var(--bol-color-positive);}

.address {}
.address .address-name {font-weight:500;max-width:75vw;}
.address .address-label {color:var(--bol-color-text-secondary);max-width:75vw;}
.address-details {height:30px;}

.timeline {font-size:0.9em;width:100%;margin:20px 0;}
.timeline td {text-align:center;width:33.33%;}
.timeline hr {height:5px;margin:5px 0;}
.timeline td.finished hr {color:#008035;opacity:1;}
.timeline .phase {display:block;text-transform:uppercase;}
.timeline .dt {display:block;}

#store-stats-window {height:70vh;max-height:70vh;border-top-left-radius:10px;border-top-right-radius:10px;background-color:var(--bol-color-background-secondary);}

#history-window {width:100vw;background-color:var(--bol-color-background-primary);}
#history-body {padding:0;}

#details-window {height:70vh;max-height:70vh;border-top-left-radius:10px;border-top-right-radius:10px;background-color:var(--bol-color-background-secondary);}
#details-window #map {width:100%;height:260px;border-radius:10px;overflow:hidden;}

#order-window {height:70vh;max-height:70vh;z-index:99999;border-top-right-radius:10px;border-top-left-radius:10px;background-color:var(--bol-color-background-secondary);color:var(--bol-color-text-primary);}
#product-list {padding:40px 0 40px 0;}
#product-list .quantity {display:block;font-size:0.8em;}
#product-list tr.filtered {display:none;}
#product-search-div {position:absolute;top:60px;left:0;width:100%;background-color:var(--bol-color-background-secondary);padding:10px 16px;}
#order-button-div {position:absolute;bottom:0;left:0;width:100%;background-color:var(--bol-color-background-primary);padding:10px 16px;}

.order-list {margin:10px 0;overflow:hidden;overflow-x:auto;white-space:nowrap;}
.order-list .order {display:inline-block;border-radius:10px;background-color:var(--bol-color-background-secondary);padding:10px;margin:10px;min-width:150px;border-color:var(--bol-color-border);}
.order-list .order-table {margin-bottom:0;}
.order-list .order-table td, .order-list .order-table th {padding:0;}

.timeline {width:100%;margin-top:20px;}
.timeline .circle {color:var(--bol-color-border);}
.timeline td {position:relative;text-align:center;}
.timeline span.b {background-color:var(--bol-color-border);display:block;height:4px;position:absolute;top:50%;margin-top:-2px;}
.timeline td.first {text-align:left;}
.timeline td.first .b {left:30px;right:0;width:calc(100% - 30px);}
.timeline td .b {left:0px;width:calc(50% - 15px);}
.timeline td .b2 {left:calc(50% + 15px);right:0;}
.timeline td.last {text-align:right;}
.timeline td.last .b {right:30px;left:0;width:calc(100% - 30px);}

td.done .b {background-color:var(--bol-color-primary);}
td.done i {color:var(--bol-color-primary);}

#live-location {width:100%;height:300px;border-radius:10px;overflow:hidden;margin-bottom:10px;}
tr.planned.finished td.amount {text-decoration:line-through;}

#message .notice {text-align:center;font-weight:bold;padding:20px;}

.vehicle-marker {display:block;width:16px;height:16px;background:var(--bol-color-primary);top:-8px;left:-8px;border-radius:20px;animation:pulse 1s infinite ease-in-out;}

@keyframes pulse {
	0% {opacity:1;}
	50% {opacity:0.4;}
	100% {opacity:1;}
}

.driver-name {margin:10px 0;text-align:right;font-weight:400;}
.driver-name .name {color:var(--bol-color-primary);}

#details-msg {display:none;margin:20px 0 0 0;color:var(--bol-color-negative);text-align:center;font-weight:500;}
