@CHARSET "UTF-8";

/* hidden shit, javascript should remove this class
   after cloning or before expected display */
*{
    outline:none !important;
}
.template {
    display: none;
}

/*#mapContainer {
    width: 100% !important;
    position: absolute;
}*/

#map_device_list_control {
    display: none;
}

#noTourWarning {
    padding: 10px;
    color: #900;
    font-size: larger;
    font-weight: bold;
    text-decoration: blink;
    animation-fill-mode: forwards;
    text-align: center;
}


.card {
    background-color: #FDFDFD;
    border-radius: 4px;
    box-shadow: rgba(0,0,0,0.14) 0px 2px 4px 0px, rgba(0,0,0,0.12) 0px 4px 5px 0px, rgba(0,0,0,0.2) 0px 1px 10px 0px;
    margin-bottom: 16px;
}

.settings-container {
    border-radius: 0px 0px 4px 4px;
}

#toolboxContainer {
    background-color: #fff;
    padding: 8px;
    box-shadow: rgba(0,0,0,0.14) 0px 2px 4px 0px, rgba(0,0,0,0.12) 0px 4px 5px 0px, rgba(0,0,0,0.2) 0px 1px 10px 0px;
    /*    position: absolute;
        top: 0;
        left: 0;*/
}

/* dialog that contains the day report */
#tourReport {
    margin: 5px;
    border-width: 1px;
    border-style: solid;
}
#tourReport th {
    padding: 0.5em;
}
#tourReport td {
    padding: 0.2em 0.1em 0.2em 2em;
    border-bottom: 1px solid;
}
#tourReport thead, #tourReport tfoot {
    font-weight: bold;
}
#tourReport thead tr th {
    border-bottom: 1px solid;
}
.tripID, .startTime, .endTime, .totalTime,
.totalDistance, .stillTime,
#hmsTravelAllTours, #kmAllTours, #hmsStillAllTours {
    text-align: right;
}

/* box that contains calendar
   and speed colors, time/tour selection */
#deviceSelect {
    padding:  8px 12px;
    position: relative;
}

#deviceSelect input {
    font-family: "CircularPro", sans-serif;
    font-size: 14px;
    color: #212121;
}
#deviceSelect input#tags {
    color: #000 !important;
    background: #eaeaea;
    border-radius: 32px;
    padding: 15px 50px;
    box-sizing: border-box;
    box-shadow: none !important;
    border: none !important;
    width: 100%;
    margin: 0 auto;
}
#deviceSelect .search_icon {
    position: absolute;
    top: 22px;
    left: 22px;
    color: #757575;
}
#deviceSelect  ::-webkit-input-placeholder { /* Edge */
    color: rgb(117, 117, 117);
    font-weight: 100;
    pointer-events: none !important;
}

#deviceSelect  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgb(117, 117, 117);
    font-weight: 100;
    pointer-events: none !important;
}

#deviceSelect  ::placeholder {
    color: rgb(117, 117, 117);
    font-weight: 100;
    pointer-events: none !important;
}

.mdc-datepicker {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 20px 40px;
    border-radius: 16px;
}

#calendar.mdc-datepicker .ui-datepicker {
    padding: 16px;
}


#calendar.mdc-datepicker .ui-datepicker-calendar a,
#calendar.mdc-datepicker .ui-datepicker-calendar span,
#calendar.mdc-datepicker  .ui-datepicker-title span {
    font-size: 14px;
}

#calendar.mdc-datepicker table.ui-datepicker-calendar td {
    height: 40px;
    width: 40px;
    line-height: 31px !important;
}

#calendar.mdc-datepicker table.ui-datepicker-calendar a {
    height: 36px;
    width: 36px;
    line-height: 32px !important;
}

#calendar.mdc-datepicker table.ui-datepicker-calendar td,
#calendar.mdc-datepicker table.ui-datepicker-calendar a {
    color: #212121;
}

div#calendar{
    padding:0 10px;
}
div#calendar .ui-datepicker{
    -webkit-box-flex: 2.5;
    -webkit-flex: 2.5 auto;
    -ms-flex: 2.5 auto;
    flex: 2.5 auto;
    width:100%;
    border:none;
}

div#calendar .ui-datepicker .ui-datepicker-header{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    line-height: 25px;
}
div#calendar .ui-datepicker .ui-datepicker-header a span{
    background:none !important;
}
div#calendar .ui-datepicker .ui-datepicker-header a.ui-datepicker-prev:before{
    font-family: 'Material Icons' !important;
    display:block;
    color: #000;
    content: "\e5cb";
    font-size:20px;
}
div#calendar .ui-datepicker .ui-datepicker-header a.ui-datepicker-next:before{
    font-family: 'Material Icons' !important;
    display:block;
    color:#000 !important;
    content: "\e5cc";
    font-size:20px;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover:before{
    color: #00B0FF;
    cursor:pointer;
}
.ui-widget-header .ui-state-hover.ui-datepicker-prev{
    border: none !important;
    background: none;
    left: 2px !important;
    font-weight: bold;
    color: #00B0FF;
    top:initial !important;
    width:initial !important;
    height:initial !important;
}
.ui-widget-header .ui-state-hover.ui-datepicker-next{
    border: none !important;
    background: none;
    font-weight: bold;
    top:initial !important;
    left:initial !important;
    right:2px !important;
}
table.ui-datepicker-calendar td,table.ui-datepicker-calendar tr{
    border:none !important;
}
table.ui-datepicker-calendar td span{
    border:none !important;
    text-align:center;
}
#calendar table.ui-datepicker-calendar td a{
    border:none !important;
    text-align:center;
    border-radius:50%;
    width:25px;
    height:25px;
    line-height: 23px !important;
    margin:0 auto;
}
#calendar table.ui-datepicker-calendar td.ui-datepicker-current-day a{
    color:#fff !important;
    background:#00B0FF !important;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight{
    background:#fff;
}

#calendar table.ui-datepicker-calendar tbody tr:first-child td{
    padding-top:10px;
}

/* controls for switching time / tour division */
#viewType {
    margin-top: 0px;
    text-align: center;
}
#viewType label {
    margin-bottom: 5px;
}
/* controls for setting speeds of color changes */

.settings.colorPick {
    display: flex;
    width: 100%;
    position: relative;
    height: auto;
    flex-wrap: wrap;
    padding: 8px;
}

.colorPick .color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
    margin-right: 8px;
}

.colorPick .speed0 .color { background-color: #000000; }
.colorPick .speed0 { background-color: #00000012; }

.colorPick .speed1 { background-color: #00aa0012; }
.colorPick .speed1 .color { background-color: #00aa00; }

.colorPick .speed2 { background-color: #ffff0012; }
.colorPick .speed2 .color { background-color: #ffff00; }

.colorPick .speed3 { background-color: #ff8c0012; }
.colorPick .speed3 .color { background-color: #ff8c00; }

.colorPick .speed4 { background-color: #f6000012; }
.colorPick .speed4 .color { background-color: #f60000; }


.colorPick .speed {
    display: flex;
    align-items: center;
    height: 32px;
    border-radius: 16px;
    margin-right: 4px;
    margin-bottom: 4px;
    padding: 0px 8px;
    line-height: 32px;
    font-size: 13px;
    font-family: "CircularPro", sans-serif;
};

/* show clickability */
#toolboxContainer .colorPick { cursor: pointer }
/* horizontal-oriented display in the dialog */
#colorDialog .speedView {
    margin-top: 20px;
}
#colorDialog .speedView .colorPick {
    width: 100%;
}

#toolboxContainer .ui-datepicker,  .ui-widget {
    /*margin: auto;*/
}

/* define the background images of the controls */
.visibility i,#tourSettings i,#dayReport{
    color:#00B0FF;
}
.detail i {
    color:#00B0FF;
}
.zoom i {
    color:#00B0FF;
}
/* change bg image position for the controls */
.tourControl .controls span.on {
    background-position: 0px 0px;
}
.tourControl .controls span.off {
    background-position: 0px -20px;
}


/* the container around the PDF / CSV export buttons */
.export_option {
    padding: 3px
}

.export_option a {
    padding: 5px;
}

/* the span to create the monthly report for a single device */
#MapWaitMessage img {
    display: block;
    float:left;
    margin: 5px;
}

/* header for the mode, i.e. Tour view, or Time View, above controls */
div#tourDiv {
    /*padding:10px;*/
    box-sizing:border-box;
    width:100%;
    overflow:auto;
    margin: 0;
}

div#timeDiv .typeHeader{
    display: flex;
}
div#timeDiv .typeHeader .info {
    margin: auto;
    margin-left: 0;   
} 

div#timeDiv .typeHeader .controls {
    margin: auto;
    margin-right: 0;
}

div#timeDiv .typeHeader .controls i {
    color: #00b0ff;
    cursor: pointer;
}

div#tourDiv .ui-widget-header.typeHeader,
div#timeDiv .ui-widget-header.typeHeader{
    display: flex;
    padding: 12px;
    border-bottom: solid 1px #cbcbcb;
}
div#tourDiv .ui-widget-header.typeHeader  .info {
    display:inline-block;
    vertical-align:middle;
    width:49%;
}
div#tourDiv .ui-widget-header.typeHeader  .controls {
    display:inline-block;
    text-align:right;
    width:49%;
    vertical-align:middle;
}

div#tourDiv .ui-widget-header.typeHeader  .controls a {
    color: #00b0ff;
}

div#tourDiv .ui-widget-header.typeHeader  .controls a:hover i{
    cursor:pointer;
    color:#0091ea !important;
}
div#tourDiv .ui-widget-content.smallControl{
    border:none;
}

div#tourDiv .ui-widget-content.smallControl{
    font-family: "CircularPro", sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #212121;
    font-weight: 600;
    padding: 9px 12px 12px;
    letter-spacing: 0.24px;
}

.color-selection {
    border-bottom: solid 1px #cbcbcb;
}

.color-selection.hidden {
    display: none;
}

span#viewType.select-dropdown select,
span#lineColor.select-dropdown select,
span#viewProfile.select-dropdown select{
    background-color: #00b0ff22;
    color: #00b0ff;
    border: none;
    border-radius: 4px;
    font-family: "CircularPro",sans-serif;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 1.25px;
    height: 40px;
}

.info .date {
    font-size: 15px;
}

.start-time,
.end-time {
    text-align: left;
    min-width: 32px;
}

.duration, .distance-info {
    text-align: left;
    font-size: 13px;
    line-height: 14px;
    /*letter-spacing: 1.88px;*/
    color: #757575;
    opacity: 1;
    font-weight: 100;
}


.line---dotted {
    height: 1px;
    width: 16px;
    position: absolute;
    min-width: 16px;
    font-size: 21px;
    color: #757575;
}

.smallControl > span.info,
.smallControl .time-range {
    display: flex !important;
    float: none !important;
}

.smallControl > span.info > div {
    margin-right: 8px;
    position: relative;
}

.duration {
    margin-right: 16px;
}


/* IE caused flickering when an iDobber name is too long */

#deviceSelect input {
    width: 99%;
}

/**
 * tooltip div for point detail
 */
#pointTooltip {
    font-family: 'CircularPro',sans-serif;
    font-size: 14px;
    color: #212121;
    width: 200px;
    font-weight: 100;
    font-size: larger;
    padding: 12px;
    border-radius: 4px;
    border: none;
    box-shadow: rgba(0,0,0,0.14) 0px 2px 4px 0px, rgba(0,0,0,0.12) 0px 4px 5px 0px, rgba(0,0,0,0.2) 0px 1px 10px 0px;
}
#pointTooltip.fillTooltip {
    font-weight: normal;
    color: #666;
    font-style: italic;
}

.history_settings {
    font-size: 10pt;
}

.history_settings input[type=checkbox]
{
    /* Double-sized Checkboxes */
    -ms-transform: scale(1.5); /* IE */
    -moz-transform: scale(1.5); /* FF */
    -webkit-transform: scale(1.5); /* Safari and Chrome */
    -o-transform: scale(1.5); /* Opera */
}

#pointTooltip .boagui-stateChipGroup {
    justify-content: flex-start;
}


span#viewType,
span#lineColor{
    width: 100%;
    display: block;
    padding:10px;
    box-sizing:border-box;
}
span#viewType select,
#lineColor select,
span#viewProfile select {
    width: 100%;
    display: block;
    height:30px;
    background:#fff;
    border:solid 1px #00B0FF;
    border-radius:20px;
    padding:0 15px
}
.other-filters{
    display: flex;
    justify-content: space-evenly;
    padding: 10px;
    box-sizing: border-box;
}
.other-filters > *{
    width:33% !important;
}
#zoneView{
    padding:5px 10px;
    box-sizing:border-box;
}
#zoneView > *{
    display:inline-block;
    vertical-align:middle;
}

#farben > a{
    display:flex;
    background:#fff;
    border:solid 1px #00B0FF;
    font-size:12px;
    align-items: center;
    border-radius: 20px;
    justify-content:space-evenly;
    color:#00B0FF;
    height:30px;
    cursor:pointer;
}
#farben > a:hover{
    background:rgba(0,176,255,0.15);
}

.playControl {
    margin: auto;
    margin-left: 0;
    margin-right: auto;
}

#playDiv .speed {
    font-size: 13px !important;
    color: #757575;
    background-color: transparent;
    border: none;
    font-family: 'CircularPro', sans-serif !important;
    /* line-height: 12px !important; */
    height: 48px;
    /* width: 100%; */
    display: inline-flex;
    /*letter-spacing: 2.1px;*/
    margin: auto;
    margin-left: 0;
    margin-right: 64px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
}

.speedSlider a,div#timeSlider a,#playSlider a {
    background: #FE1D48 !important;
    border-radius: 50%;
    width: 1.5em !important;
    height: 1.5em !important;
    top:-0.8em !important;
    border:none;
}
.speedSlider,div#timeSlider,#playSlider{
    height: 0px;
    font-size: 1em;
    border: 2px solid #cbcbcb;
    background: #fff;
    color: #343434;
    margin-top:12px !important;
}

.ui-dialog .ui-dialog-content {
    box-sizing: border-box;
}

.ui-dialog-titlebar-close{
    border:none !important;
}

#playDiv,
#timeDiv {
    border-radius: 4px;
    box-shadow: rgba(0,0,0,0.14) 0px 2px 4px 0px, rgba(0,0,0,0.12) 0px 4px 5px 0px, rgba(0,0,0,0.2) 0px 1px 10px 0px;
    background-color: #fff;
    margin: 0 auto;
    width: 100%;
}

.time {
    font-family: "CircularPro", sans-serif;
    font-size: 13px;
    color: #757575;
}

#playDiv .ui-widget-header {
    border: none;
    background-color: none;
}

#playDiv {
    padding: 16px 24px;
    box-sizing:border-box;
    margin: 0;
}

div#timeDiv .typeHeader, #playDiv .typeHeader{
    padding-bottom:10px;
    text-align:left;
}

div#timeDiv .smallControl, #playDiv > .ui-widget-content {
    border:none;
}

div#timeDiv .smallControl {
    padding: 16px 24px;
}
div#timeDiv .panel{
    width:50%;
    display:block;
    float:left;
    position:relative;
}
div#timeDiv .panel input{
    display:block;
    width:95%;
    line-height:20px;
    border:solid 1px #00B0FF;
    border-radius:20px;
    padding:10px 15px 5px;
    box-sizing:border-box;
}
div#timeDiv .panel label{
    background:#fff;
    position:absolute;
    left:8px;
    padding:0 10px;
    top:-5px;
}
div#timeDiv .sliderBox{
    clear:both;
    padding:10px 0;
}


#playDiv .controls.info{
    display:flex;
    justify-content: space-between;
    padding: 10px;
}
#playDiv .controls.info select{width:40%;height:30px;background:#fff;border:solid 1px #00B0FF;border-radius:20px;padding:0 15px;}
#playDiv .controls.info button{
    border-radius:50%;
    background:#2c96f3;
    border:none;
}
#playDiv .controls.info button:hover{
    background:#fff;
    border:solid 1px #2c96f3;
}

#playDiv .controls.info button span:first-child{
    display:none;
}#playDiv .controls.info button span:last-child i{
    display:block;
    color:#fff;
    font-size:19px;
    text-indent:0;
}
#playDiv .controls.info  .time{
    font-size:20px;
}
#playDiv .controls.info button:hover  span i{
    color:#2c96f3;
}


.slider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.slider-row .sliderBox {
    width: 100%;
}

.slider-row .time,
.slider-row .end-time {
    height: 24px;
    min-width: 48px;
    line-height: 20px;
}

.slider-row .end-time {
    text-align: right;
    margin-right: 0;
}

.ui-widget-content.tourControl.smallControl{
    position:relative;
    border-bottom:solid 1px #cbcbcb !important;
}
.ui-state-hover, .ui-widget-content .ui-state-hover{
    background:rgba(0,176,255,0.12);
}
.ui-widget-content.tourControl.smallControl > span  {
    float:left;
    display:block;
}
/*.ui-widget-content.tourControl.smallControl .info{
    padding:6px 12px;
}*/


.ui-widget-content.tourControl.smallControl .controls{
    position:absolute;
    right:16px;
    top:5px;
    width:100px;
    text-align:right; 
}
.ui-widget-content.tourControl.smallControl .controls div{
    float:right;
    margin: 10px 2px;
}



div#tourfilters .filters .filter,div#tourfilters .filters {
    border:none;
}
div#tourfilters .filters {
    padding-bottom:10px;
}

div#tourfilters .tourfilters-header {
    border-top: 1px solid #cbcbcb;
    border-bottom: 1px solid #cbcbcb;
}

div#tourfilters .save {
    margin-right: 0px;
    margin-left: 0px;
}

div#tourfilters #viewProfile select{
    background-color: #eaeaea;
    color: #212121;
}


div#tourfilters .load {
    margin-left: 16px;
    margin-right: auto;
}

div#tourfilters .tourfilters-header,
div#tourfilters .tourfilters-footer {
    display: flex;
    padding: 8px 0px;
    align-items: center;
}

div#tourfilters .filters .filter{
    border-bottom:solid 1px #cbcbcb;
    border-radius:0;
    padding:10px 0;
    display: flex;
    align-items: center;
}

.filter-bottom-control {
    display: flex;
    justify-content: space-between;
}
.filter-bottom-control select{
    width:auto;
}
.filter-bottom-control button.ui-state-default.ui-corner-all{
    color:#fff;
    font-size:13px !important;
    margin:0;
    border:none !important;
}
.filter-bottom-control button.ui-state-default.ui-corner-all:hover{
    color:#fff !important;
    border:none !important;
}
#tourfilters .filters input[type="text"] {
    margin: 0;
    text-align: center;
    padding: 0 !important;
    font-weight: bold;
    color: #000;
    height: 1rem;
}

#tourfilters  select{
    width: 200px;
    height:30px;
    background:#fff;
    border:solid 1px #00B0FF;
    border-radius:20px;
    padding:0 15px
}

#tourfilters .typo--button {
    height:40px;
    background:#fff;
    border:none;
    /*border-radius:20px;*/
    /*padding:0 15px;*/
    /*margin-left:10px;*/
}


.ui-dialog .ui-button-icon-only.ui-dialog-titlebar-close:after{
    background:none;
    content: '\e5cd';
    margin: 0;
    font-family: 'Material Icons';
    color: #343434;
    font-size:25px;
    display: block;
    position:absolute;
    top:0;
    right:0;
}

.ui-dialog .ui-button-icon-only.ui-dialog-titlebar-close .ui-icon {
    background-image: none;
}


.ui-dialog-buttonset button{
    color: #3d8ce3 !important;
    height:30px;
    background: #fff;
    border:solid 1px #00B0FF;
    border-radius:20px;
    padding:0 15px;
}
#tourfilters  button:hover,.ui-dialog-buttonset button:hover{

    background: rgba(0,176,255,0.15) !important;

    border:solid 1px #00B0FF;

}
button#tourPDF ,button#tourCSV {
    float:right;
    height:30px;
    background:#fff;
    border:solid 1px #00B0FF;
    border-radius:20px;
    padding:0 15px;
    margin-left:10px;
}
button#tourPDF:hover ,button#tourCSV:hover{
    background: rgba(0,176,255,0.15);
    border:solid 1px #00B0FF;
}

#tourReport{
    clear:both;
    padding-top:20px;
    border:none;
    width:100%;
}

#tourReport td{
    padding:10px 0;
    text-align:center;
}

.progress {
    position: relative;
    height: 4px;
    display: block;
    width: 100%;
    background-color: rgba(61, 140, 227, 0.5);
    border-radius: 2px;
    margin: .5rem 0 1rem 0;
    overflow: hidden;
}
.progress .indeterminate {
    background-color: #00B0FF;
}
.progress .indeterminate:before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress .indeterminate:after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
#calenderButton:hover {
    cursor: pointer;
    color: #00b0ff;
    background: rgba(0,176,255,0.15);
}
#calenderButton {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0 auto;
    font-size: 20px;
    width: 40px;
    height: 40px;
    line-height: 48px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
}
#calenderButton i.valid:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: #3d8ce3;
    border-radius: 50%;
    position: absolute;
    border: 4px solid #fff;
    box-sizing: content-box;
    right: -4px;
    top: -6px;
}

@-webkit-keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@-webkit-keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}

/* hide elements */
#appbar.onArchive #btn-menu, 
#appbar.onArchive #btn-show-notifications {
    display: none;
}