﻿@font-face{
    font-family: "Roboto Flex";
    src: url('/fonts/robotoflex-variablefont.ttf') format('truetype');
}
body {
  font-family: 'Roboto Flex', Sans-Serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;

  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  height: 100vh;
  background-color: var(--color-body-bg);
  overflow: hidden;
}
a {
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5 {
  margin-top: 0;
}
main {
  height: 100vh;
}
.thin{
    font-weight:300;
    }
.widget {
  box-sizing: border-box;
  border: none;
}
.crazy-checkbox {
  font-family: WebComponentsIcons;
  font-size: 25px;
  cursor: pointer;
}
.crazy-checkbox:before {
  content: "\e304";
}
.crazy-checkbox[checked]:before {
  content: "\e305";
}
.k-av-searchbox-dropdown .group-label {
  color: var(--color-text2);
  font-size: 1.2rem;
}
.k-av-menu.search-dropdown {
  background-color: var(--color-widget4);
}
.k-av-menu.search-dropdown .search-call-item:not(:hover) .window {
  visibility: hidden;
}
.k-av-menu {
  border: none;
  border-radius: var(--border-radius);
  margin-top: var(--dropdown-popup-margin-top);
  background-color: var(--color-widget4);
}
.k-av-menu .k-av-item {
  font-weight: 500;
  height: 2rem;
  line-height: 2rem;
  overflow: hidden;
  padding-left: 1rem;
  padding-right: 1rem;
}
.k-av-menu .k-av-selectable {
  cursor: pointer;
}
.k-av-menu .k-av-selectable:hover {
  background-color: var(--color-widget3);
}
.k-av-menu .k-av-item[disabled] {
  pointer-events: none;
  color: dimgray;
}
.k-av-menu .k-av-item.label {
  color: var(--color-text2);
  padding-left: 6px;
}
.k-av-menu .visited-last {
  color: royalblue;
}
.k-av-menu .highlight {
  color: white;
  background-color: dodgerblue;
}
body.dark .k-av-menu .k-av-selectable:hover {
  background-color: var(--color-widget2);
}
body.light .k-av-menu .k-av-selectable:hover {
  background-color: var(--color-widget3);
}
form,
.form {
  font-size: 0.85rem;
}
form .field-group,
.form .field-group {
  margin-bottom: 0.7rem;
}
form .field-group label:not(.k-checkbox-label):not(.k-radio-label):not(.inline):not(.k-av-radio),
.form .field-group label:not(.k-checkbox-label):not(.k-radio-label):not(.inline):not(.k-av-radio) {
  display: block;
}
form .inline,
.form .inline {
  display: inline-block;
  margin-right: 5px;
}
form .k-radio-label,
.form .k-radio-label {
  margin-right: 2rem;
}
form label,
.form label {
  font-weight: 700;
}
form label b,
.form label b {
  color: royalblue;
}
    form.new {
        label{
                 display: block;
             }
    }
textarea,
.k-widget textarea {
  box-sizing: border-box;
  padding: 6px;
  outline: none;
  border-radius: var(--border-radius);
  font-family: "Roboto Flex", Sans-Serif;
  background: transparent;
  color: currentColor;
  border: 1px solid var(--color-border1);
}
input.switch {
  display: none;
}
input.switch + label {
  width: 38px;
  height: 15px;
  border-radius: 7px;
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
  background-color: gray;
  transition: all 0.25s ease;
  border-right-width: 4px;
}
input.switch + label circle {
  width: 11px;
  height: 11px;
  display: block;
  background-color: #d5d5d5;
  border-radius: 50%;
  margin: 2px;
}
input.switch:checked + label {
  background-color: royalblue;
  color: #d5d5d5;
  padding-left: 23px;
}
input.switch2,
.av-switch input
{
  display: none;
}
input.switch2 + label,
.av-switch {
  width: 31px;
  height: 18px;
  border-radius: 9px;
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
  background-color: gray;
  transition: all 0.25s ease;
  border-right-width: 4px;
}
input.switch2 + label circle,
.av-switch circle{
  width: 18px;
  height: 18px;
  display: block;
  background-color: #d5d5d5;
  border-radius: 50%;
  margin: 0;
}
input.switch2:checked + label,
.av-switch:has(input:checked) {
  background-color: royalblue;
  color: #d5d5d5;
  padding-left: 14px;
}
.bad-connection-notify {
  position: absolute;
  right: 0;
  bottom: 0;
  color: black;
  background-color: #f6f6ac;
  border: 1px solid #cc9c33;
  padding: 0.5rem 1rem;
  font-weight: 500;
}
.bad-connection-notify:hover {
  opacity: 0.1;
}
@keyframes progress-circle {
  0% {
    border-width: 30px;
    width: 4rem;
    height: 4rem;
    opacity: 1;
  }
  30% {
    border-width: 30px;
    width: 8rem;
    height: 8rem;
    opacity: 0.5;
  }
  60% {
    border-width: 0;
    width: 8rem;
    height: 8rem;
    opacity: 0;
  }
  100% {
    border-width: 0;
    width: 8rem;
    height: 8rem;
    opacity: 0;
  }
}
.k-av-progress-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.k-av-progress-overlay .circle {
  height: 4rem;
  width: 4rem;
  border: 4px solid royalblue;
  display: inline-block;
  border-radius: 50%;
  animation-name: progress-circle;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  box-sizing: border-box;
}
.spin {
  color: inherit;
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.employee-status.available {
  color: green;
}
.employee-status.assigned,
.employee-status.taskassigned {
  color: #ffc300;
}
.employee-status.atlocation {
  color: #ff5733;
}
.employee-status.inservice,
.employee-status.taskinprogress {
  color: blue;
}
.employee-status.pending {
  color: #9156ad;
}
.employee-status.onbreak {
  color: red;
}
.employee-status.managed-location {
  color: gray;
}
.validation-error-message {
  background-color: #de0036;
  color: white;
  border-radius: var(--border-radius);
  margin-top: 3px;
  padding: 3px;
  box-sizing: border-box;
}
.validation-warning-message {
  background-color: #fac663;
  color: darkslategray;
  border-radius: var(--border-radius);
  margin-top: 3px;
  padding: 3px;
  box-sizing: border-box;
}
.k-av-radiogroup input {
  display: none;
}
.k-av-radiogroup label.k-av-radio {
  display: inline-block;
}
.k-av-radiogroup input:checked + label.k-button,
.k-av-radiogroup label.k-button:has(input:checked){
  background-color: #3f51b5;
  border-color: #3f51b5;
  color: white;
}
.k-av-radiogroup input:checked + label.k-button.k-av-radio {
  background-color: #3f51b5;
  border-color: #3f51b5;
  color: white;
}
.k-av-radiogroup input:not(:checked) + label.k-button {
  color: lightgray;
  background-color: #717171;
}
.light .k-av-radiogroup input:not(:checked):not(:hover) + label {
  background-color: #fafafa;
}
.k-tooltip-content .validate-icon {
  margin-right: 1rem;
  background-color: red;
  color: white;
  width: 1.2rem;
  height: 1.2rem;
  display: inline-block;
  padding: 3px;
  font-weight: 1000;
  border-radius: var(--border-radius);
}
label.checked, label.highlight:has(input:checked) {
  background: #3f51b5;
}
:root {
  --wide: 15rem;
  --wider: 20rem;
  --tdhighlightblue: rgba(152, 224, 255, 0.4);
  --border-radius: 6px;
  --dropdown-popup-margin-top: 5px;
  --big: 18.72px;
  --newred: #ff7e7e;
}
@keyframes pulse-ani {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes double-blink-red {
  0% {
    color: inherit;
    transform: scale(1);
  }
  3% {
    color: red;
    transform: scale(1.5);
  }
  6% {
    color: inherit;
    transform: scale(1);
  }
  8% {
    color: inherit;
    transform: scale(1);
  }
  11% {
    color: red;
    transform: scale(1.5);
  }
  14% {
    color: inherit;
    transform: scale(1);
  }
}
.double-blink-ani-red {
  animation: double-blink-red 5s ease infinite;
}
.pulse-ani {
  animation: pulse-ani 0.2s ease;
}
.flex {
  display: flex;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-fill {
  flex: 1 1 0%;
}
.flex-fit {
  flex: 0 0 auto;
}
#launcher-frame {
  display: none;
}
.ihatethis:hover {
  color: cornflowerblue !important;
}
.wide,
.k-textbox,
.k-combobox,
.k-textbox.k-av-searchbox-textbox.k-av-flightpicker,
.k-timepicker,
.k-datetimepicker,
.k-dropdown {
  width: var(--wide);
}
#recording-popup {
  position: absolute;
  display: flex;
  align-content: center;
  justify-content: center;
  z-index: 100000;
  background-color: rgba(0, 0, 0, 0.25);
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding-top: 15%;
}
#recording-popup .content {
  background-color: black;
  width: 200px;
  height: 200px;
  position: relative;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  border-radius: var(--border-radius);
}
#recording-popup .dot {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 10px;
  height: 60px;
}
.pill1 {
  background-color: var(--color-widget1);
  padding: 2px 9px 2px 9px;
  border-radius: 15px;
  white-space: nowrap;
}
.vip-component {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background: #F2A93B;
  border-radius: 4px;
  font-weight: 900;
  font-size: 6px;
  letter-spacing: 0.1em;
  color: #363636;
  margin-right: 3px;
}
@keyframes fadeColor {
  0% {
    color: #ffd842;
  }
  50% {
    color: #756527;
  }
  100% {
    color: #ffd842;
  }
}
.dispatch-employee-break-button-red {
  color: red;
}
.dispatch-employee-break-button.purple {
  color: #9156ad;
}
.dispatch-employee-break-button,
.dispatch-employee-break-button-red {
  font-size: 2.5em;
  line-height: 10px;
}
.yellowCoffeeCup {
  color: #ffd842;
}
.yellowCoffeeCupBlink {
  animation: fadeColor 2s ease-in-out infinite;
}
.num-breaks-taken.warning {
  color: red;
}
.dispatch-employee-break-button-red:hover,
.dispatch-employee-break-button:hover {
  color: cornflowerblue;
  cursor: pointer;
}
#good-type {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.3);
}
#good-type input {
  width: 700px;
  height: 60px;
  font-size: 53px;
  padding-left: 9px;
  border-radius: var(--border-radius);
  border: none;
  outline: none;
}
.c-invisible {
  display: none !important;
}

.k-grid .k-grid-content tr:has(.badge) td {
    padding-top: 22px;
    position: relative;
    overflow: visible;
}

.k-grid .k-grid-content .badge-container {
    position: absolute;
    top: 3px;
    height: 0;
    width: 800px;
    display: flex;
}

.k-grid .k-grid-content .badge {
    background: var(--color-text3);
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 6px;
    height: 21px;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-right: 4px;
}
.display-block{
    display:block;
    }

.display-inline-block{
    display:inline-block;
    }

.janitorial-map img[role] {
    filter: brightness(60%) grayscale(80%);
}
.janitorial-map gmp-advanced-marker {
    translate: calc(50% - 16px) 0;
}
.janitorial-map gmp-advanced-marker .content {
    border-radius: 0.5rem !important;
    transition: background-color 0.3s;
}
.janitorial-map gmp-advanced-marker:hover {
    z-index: 1000 !important;

    .content {
        background-color: #000000cc !important;
    }
}

div.lm_goldenlayout,
div.lm_content {
  background-color: transparent;
}
.lm_splitter.lm_horizontal .lm_drag_handle {
  width: 5px;
  left: 0;
}
.lm_splitter.lm_vertical .lm_drag_handle {
  height: 5px;
  top: 0;
}
/*.lm_tab.editable .k-icon
{
    display: inline-block;
    margin-right: 0.5rem;
}*/
.lm_header .lm_tab {
  padding-right: 10px;
  height: 15px;
}
.lm_header .lm_tab .lm_close_tab,
.lm_tab.main .k-i-x {
  display: none;
}
.lm_header .lm_tab.editable .lm_close_tab {
  right: 0;
  display: block;
}
.lm_tab.main.editable .k-i-x {
  display: inline-block;
  position: relative;
  top: -0.25rem;
}
.lm_header .lm_tab.editable .lm_title {
  margin-right: 0.5rem;
}
.lm_tab.editable .k-icon {
  margin-right: 0.5rem;
}
.lm_tab.editable .k-icon:last-child {
  margin-right: 0;
}
.lm_item .lm_header .lm_tab {
  font-size: 0.875rem;
}
.lm_item .lm_header .lm_tab,
.lm_item .lm_header .lm_tab.lm_active {
  box-shadow: none;
}
.lm_root.main > .lm_stack > .lm_header > .lm_tabs {
  height: 100%;
}
.lm_tab.main {
  height: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  padding-top: 0.5rem;
  box-sizing: border-box !important;
  margin-top: 0;
}
.lm_root.main > .lm_stack > .lm_header {
  z-index: 2;
}
.lm_tab:not(.main) {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.lm_header .lm_tab.highlight-diverted {
  background-color: #9f5656;
}
.lm_header .lm_tab.highlight-diverted.lm_active {
  background-color: #dc1818;
  color: white;
}
.lm_header .lm_tab.highlight {
  background-color: #3f51b5;
}
.lm_header .lm_tab.highlight.lm_active {
  background-color: dodgerblue;
  color: white;
}
body.dark .lm_tab.lm_active {
  color: white;
}
.browser a,
.browser a:visited {
  color: inherit;
}
.flight-status.delayed {
    color: red;
}
.flight-status.diverted {
    color: #696dff;
}
.flight-status.ok {
    color: #84cb84;
}
.gm-style canvas {
    filter: brightness(80%);
}
gmp-advanced-marker .content {
    color: white;
}
input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button 
  {
    opacity: 1;
  }
.k-av-item .left{
    width:40px;
    text-align:center;
    margin:0;
    }
.k-av-item:has(.left){
    padding-left:0;
    }
body:not(.ptt-connected){
    #navbar-menu .ptt-icon{
        color: red;
        }
    .ptt-send{
        display:none;
        }
    }