.ar {text-align:right;}
.accordion-button {display:block;font-weight:300;border-radius:4px;border-color:var(--bol-color-border);background-color:var(--bol-color-background-secondary);color:var(--bol-color-text-primary);}
.accordion-flush .accordion-item .accordion-button {border-radius:10px;}
.accordion-button:not(.collapsed) {color:var(--bol-color-text-primary);background-color:var(--bol-color-background-secondary);}
.accordion-button:focus {border-color:var(--bol-color-border);}

.btn-outline-primary {border-color:var(--bol-color-primary);color:var(--bol-color-primary);}
.btn-outline-primary:hover {background-color:var(--bol-color-primary);border-color:var(--bol-color-primary);}

.accordion-button .customer {font-weight:500;max-width:60%;}
.accordion-button .address {max-width:90%;}
.offcanvas {background-color:var(--bol-color-background-secondary);color:var(--bol-color-text-primary);}
.table {color:var(--bol-color-text-primary);}
.form-control {background-color:var(--bol-color-background-secondary);color:var(--bol-color-text-primary);}

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.check {-webkit-mask-image:url(/images/check.svg);mask-image:url(/images/check.svg);}
i.checked {-webkit-mask-image:url(/images/checked.svg);mask-image:url(/images/checked.svg);}
i.plus {-webkit-mask-image:url(/images/plus.svg);mask-image:url(/images/plus.svg);}
i.cart {-webkit-mask-image:url(/images/cart.svg);mask-image:url(/images/cart.svg);}
i.delivered {-webkit-mask-image:url(/images/delivered.svg);mask-image:url(/images/delivered.svg);}
i.truck {-webkit-mask-image:url(/images/truck.svg);mask-image:url(/images/truck.svg);}
i.photo {-webkit-mask-image:url(/images/photo.svg);mask-image:url(/images/photo.svg);}
i.pcheck {-webkit-mask-image:url(/images/checkmark.svg);mask-image:url(/images/checkmark.svg);}
i.photo-done {-webkit-mask-image:url(/images/photo-done.svg);mask-image:url(/images/photo-done.svg);}

#shifts-div {padding:10px 0;}
.task {background-color:var(--bol-color-background-secondary);margin:10px;position:relative;border-radius:4px;}

.task .accordion-header {position:relative;}
.task .accordion-header .time {position:absolute;top:16px;right:16px;font-size:0.8em;}
.task .accordion-header .status {padding:2px 8px;border:1px solid var(--bol-color-text-secondary);border-radius:4px;position:absolute;top:13px;right:160px;color:var(--bol-color-text-secondary);}
.task.finished {opacity:0.5;}
.task.started {border:1px solid var(--bol-color-primary);}
.task.started .accordion-button {background-color:var(--bol-color-background-tertiary);}
.task .delivery-status {font-size:0.8em;color:var(--bol-color-primary);position:absolute;bottom:16px;right:16px;display:none;}
.task.delivered .delivery-status {display:block;}

.task.eta .time {color:var(--bol-color-blue);}

.task .accordion-body {position:relative;}
.task .accordion-body .details {display:block;position:absolute;top:15px;right:15px;padding:5px;border-radius:4px;}

.task .details i {width:28px;height:28px;mask-size:28px;color:var(--bol-color-text-secondary);}

.task .activities {display:none;background-color:var(--bol-color-background-tertiary);padding:10px 10px 50px 10px;border-radius:10px;margin:20px 0;position:relative;}
.task.started .activities {display:block;}
.activity {position:relative;background-size:30px;margin:2px 0;padding:5px 10px 5px 40px;}
.activity .checkmark {display:inline-block;position:absolute;left:0px;top:0px;width:30px;height:30px;mask:url(/images/check.svg);mask-size:30x;background-color:var(--bol-color-text-primary);}
.activity.checked .checkmark {mask:url(/images/checked.svg);}
.activity .camera {position:absolute;top:0;right:10px;cursor:pointer;color:var(--bol-color-text-primary);padding:5px;}

.activities .order {margin-top:20px;}
.order-btn {width:40px;height:40px;line-height:40px;text-align:center;border-radius:100px;background-color:var(--bol-color-primary);color:#000;position:absolute;bottom:16px;right:16px;}
.order-btn:hover {color:#fff;}

.date-marker {text-align:left;padding:2px 20px;color:var(--bol-color-text-secondary);font-weight:500;}
.date-marker > span {padding:5px 10px;}

.address .name {font-weight:bold;}

.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;}

#details-window {height:70vh;max-height:70vh;}
#order-window {height:70vh;max-height:70vh;}
#maps {position:relative;}
#details-window #map {width:50%;height:260px;border-radius:10px;overflow:hidden;border:4px solid var(--bol-color-background-secondary);}
#details-window #streetview {width:50%;height:260px;position:absolute;top:0;right:0;border-radius:10px;border:4px solid var(--bol-color-background-secondary);}

.task-buttons {margin-top:20px;text-align:left;}
#location-details {padding:20px 0;}

.task-details {}
.task-duration {display:inline-block;padding:2px 10px;border:1px solid var(--bol-color-accent);color:var(--bol-color-accent);border-radius:10px;position:absolute;top:16px;right:20px;font-size:0.8em;}

#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;}

.location {margin:20px 0 0 0;}

#live {width:100%;height:300px;border-radius:10px;overflow:hidden;margin-bottom:20px;}
#live #live-location {width:100%;height:300px;}

#camera {display:none;}
.note {text-align:center;padding:20px;}