/* Z-Indexes */
.bounce-in {
  animation: scale-fade-in 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.fadeIn {
  animation: fade-in 0.2s;
}
.introSlide {
  animation-name: intro-slide;
  animation-duration: 0.5s;
}
.dialogSlideIn {
  animation-name: dialog-slide-in;
  animation-duration: 0.5s;
}
.spin {
  animation: spin 2s linear infinite;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes intro-slide {
  0% {
    opacity: 0;
    left: -50%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
@keyframes dialog-slide-in {
  0% {
    left: 0;
  }
  100% {
    left: 50%;
  }
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.5;
  }
  70% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 0.8;
  }
  70% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}
:root {
  --safe-area-bottom: env(safe-area-inset-bottom);
  --almobile-logo-color: #1e5594;
  --invert-background-color: #fff;
  --invert-text-color: #444444;
  --invert-almobile-text-color: #4187d8;
  --box-shadow-color: rgba(0, 0, 0, 0.5);
  --border-color: #E5E5E5;
  --dark-mode-border-color: transparent;
  --command-menu-background-color: #4187d8;
  --white-to-light-grey: #fff;
  --white-to-medium-grey: #fff;
  --white-to-dark-grey: #fff;
  --white-to-dark-grey-contrast: #fff;
  --white-to-black: #fff;
  --light-blue-to-white: #e9f1fb;
  --light-blue-to-medium-grey: #e9f1fb;
  --light-blue-to-black: #e9f1fb;
  --light-grey-to-white: #E5E5E5;
  --light-grey-to-medium-grey: #E5E5E5;
  --light-grey-to-black: #E5E5E5;
  --light-grey-to-dark-grey: #E5E5E5;
  --light-grey-to-dark-grey-contrast: #E5E5E5;
  --medium-blue-to-white: #4187d8;
  --medium-blue-to-light-grey: #4187d8;
  --medium-grey-to-white: #AAAAAA;
  --medium-grey-to-medium-blue: #AAAAAA;
  --medium-blue-to-dark-blue: #4187d8;
  --medium-blue-to-dark-grey: #4187d8;
  --medium-grey-to-dark-grey: #AAAAAA;
  --medium-grey-to-black: #AAAAAA;
  --dark-grey-to-white: #444444;
  --dark-grey-to-light-grey: #444444;
  --dark-grey-to-medium-blue: #444444;
  --dark-grey-to-medium-grey: #444444;
  --dark-grey-to-black: #444444;
  --dark-blue-to-white: #1e5594;
  --dark-blue-to-medium-blue: #1e5594;
  --dark-blue-to-light-grey: #1e5594;
  --dark-blue-to-medium-grey: #1e5594;
  --dark-blue-to-dark-grey: #1e5594;
  --dark-blue-to-black: #1e5594;
}
body[data-theme="darkMode"] {
  --almobile-logo-color: #fff;
  --invert-background-color: #444444;
  --invert-text-color: #fff;
  --invert-almobile-text-color: #fff;
  --box-shadow-color: rgba(77, 77, 77, 0.5);
  --dark-mode-border-color: #fff;
  --command-menu-background-color: #252525;
  --white-to-light-grey: #E5E5E5;
  --white-to-medium-grey: #AAAAAA;
  --white-to-dark-grey-contrast: #666666;
  --white-to-dark-grey: #444444;
  --white-to-black: #252525;
  --light-blue-to-white: #fff;
  --light-blue-to-medium-grey: #AAAAAA;
  --light-blue-to-black: #252525;
  --light-grey-to-white: #fff;
  --light-grey-to-medium-grey: #AAAAAA;
  --light-grey-to-black: #252525;
  --light-grey-to-dark-grey: #444444;
  --light-grey-to-dark-grey-contrast: #666666;
  --medium-blue-to-white: #fff;
  --medium-blue-to-light-grey: #E5E5E5;
  --medium-grey-to-white: #fff;
  --medium-grey-to-medium-blue: #4187d8;
  --medium-blue-to-dark-blue: #1e5594;
  --medium-blue-to-dark-grey: #444444;
  --medium-grey-to-dark-grey: #444444;
  --medium-grey-to-black: #252525;
  --dark-grey-to-white: #fff;
  --dark-grey-to-light-grey: #E5E5E5;
  --dark-grey-to-medium-blue: #4187d8;
  --dark-grey-to-medium-grey: #AAAAAA;
  --dark-grey-to-black: #252525;
  --dark-blue-to-white: #fff;
  --dark-blue-to-medium-blue: #4187d8;
  --dark-blue-to-light-grey: #E5E5E5;
  --dark-blue-to-medium-grey: #AAAAAA;
  --dark-blue-to-dark-grey: #444444;
  --dark-blue-to-black: #252525;
}
.filterFadeOut {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
.filterFadeOut.filter {
  opacity: 0;
}
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sup,
sub,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  font-family: 'Calibri', sans-serif;
  -webkit-user-select: none;
  user-select: none;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
div {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input {
  font-family: 'Calibri';
  outline: none;
  padding: 0;
  border-radius: 0;
  text-align: left;
}
button {
  font: inherit;
}
@font-face {
  font-family: 'WebComponentsIcons';
  src: url("fonts/glyphs/WebComponentsIcons.eot");
  src: url("fonts/glyphs/WebComponentsIcons.eot") format('embedded-opentype'), url('fonts/glyphs/WebComponentsIcons.ttf') format('truetype'), url('fonts/glyphs/WebComponentsIcons.woff') format('woff'), url('fonts/glyphs/WebComponentsIcons.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}
.k-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  text-decoration: none;
  list-style: none;
}
.k-autocomplete,
.k-tabstrip .k-button,
.k-button,
.k-button .k-sprite,
.k-sprite {
  line-height: 1;
  padding: 0;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  background-position: inherit;
  background-color: transparent;
  background-image: none;
  opacity: 1;
}
.k-autocomplete.k-disabled,
.k-tabstrip .k-button.k-disabled,
.k-button.k-disabled,
.k-button .k-sprite.k-disabled,
.k-sprite.k-disabled {
  opacity: 1;
}
.k-input-value-text {
  text-indent: 10px;
  line-height: 1;
}
.k-numeric-wrap {
  border: none;
  border-radius: inherit;
  overflow: hidden;
}
.k-input {
  padding: 10px 0;
  line-height: 1;
}
.k-numerictextbox {
  width: auto;
  padding: 5px 0;
}
.k-numerictextbox .k-input-inner {
  box-sizing: border-box;
}
.k-numerictextbox.k-focus {
  border: 1px solid rgba(28, 78, 137, 0.7);
  transition: box-shadow 400ms ease-out;
  box-shadow: 0 8px 4px -2px rgba(28, 78, 137, 0.7);
}
.k-button,
.k-button.k-icon-button {
  overflow: visible;
  width: auto;
  height: auto;
  padding: initial;
  gap: 0;
}
.k-button .k-icon,
.k-button.k-icon-button .k-icon {
  margin: 0;
  opacity: 1;
  text-indent: 0;
}
.k-button {
  overflow: hidden;
}
.k-button .k-button-text {
  line-height: inherit;
  white-space: normal;
}
.k-button .k-button-text.icon {
  overflow: initial;
}
.k-button-icontext .k-icon,
.k-button-icontext .k-image,
.k-button-icontext .k-sprite {
  margin: 0;
}
.k-sprite,
.k-icon {
  width: initial;
  height: initial;
  margin: 0;
  font-size: inherit;
  font-weight: normal;
  color: inherit;
  overflow: visible;
  text-indent: 0;
}
.k-sprite:before,
.k-icon:before {
  position: relative;
}
.k-dropdowntree,
.k-dropdownlist,
.k-combobox {
  background-color: #fff;
  color: #444444;
}
.k-dropdowntree *,
.k-dropdownlist *,
.k-combobox * {
  border: none;
  border-radius: inherit;
  background-color: inherit;
  color: inherit;
}
.k-dropdowntree .k-input-value-text,
.k-dropdownlist .k-input-value-text,
.k-combobox .k-input-value-text {
  line-height: normal;
}
.k-dropdowntree .k-input-inner,
.k-dropdownlist .k-input-inner,
.k-combobox .k-input-inner {
  padding: 10px 0;
}
.k-dropdowntree .k-select,
.k-dropdownlist .k-select,
.k-combobox .k-select {
  width: 2em;
}
.k-autocomplete input {
  line-height: normal;
  text-indent: 10px;
}
.k-autocomplete .k-clear-value {
  width: auto;
  height: auto;
  padding: 0 10px;
  color: inherit;
}
.k-switch {
  box-shadow: none;
  overflow: hidden;
}
.k-switch.k-switch-off .k-switch-track,
.k-switch.k-switch-on .k-switch-track {
  border-color: transparent;
}
.k-switch.k-switch-off .k-switch-thumb,
.k-switch.k-switch-on .k-switch-thumb {
  border: none;
  background-color: inherit;
  background-image: none;
  background-position: initial;
  color: inherit;
}
.k-toolbar {
  border: none;
  background-image: none;
  background-position: initial;
}
.k-list {
  box-shadow: none;
  line-height: 1.2;
  font-size: inherit;
  color: inherit;
  background-color: inherit;
}
.k-list * {
  box-shadow: none;
  background-color: inherit;
  color: inherit;
}
.k-tabstrip {
  padding: 0;
  outline: none;
  border: none;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}
.k-tabstrip .k-tabstrip-items-wrapper {
  background-color: var(--light-grey-to-black);
  border-bottom: 1px solid var(--light-blue-to-medium-grey);
}
.k-tabstrip .k-content,
.k-tabstrip .k-tabstrip-content {
  outline: none;
  border: none;
}
.k-tabstrip .k-content:focus,
.k-tabstrip .k-tabstrip-content:focus,
.k-tabstrip .k-content.k-state-focused,
.k-tabstrip .k-tabstrip-content.k-state-focused {
  outline: none;
}
.k-tabstrip > .k-content.k-state-focused,
.k-tabstrip > .k-content:focus {
  outline: none;
}
.k-tabstrip .k-tabstrip-items {
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-bottom: none;
}
.k-tabstrip .k-tabstrip-items .k-item {
  position: relative;
  flex-direction: column;
  margin: 0;
  padding: 15px 10px;
  top: 8px;
  transition: all 250ms ease-in-out;
  border-top: 1px solid #AAAAAA;
  border-right: 1px solid #AAAAAA;
  cursor: pointer;
  border-left: none;
  border-bottom: none;
  border-radius: 0.4rem 0.4rem 0 0;
  font-size: 20px;
  background-image: none;
  background-color: var(--white-to-dark-grey);
  color: var(--dark-grey-to-white);
  filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.5));
}
.k-tabstrip .k-tabstrip-items .k-item .k-loading {
  border: none;
}
.k-tabstrip .k-tabstrip-items .k-item .k-link {
  padding: 0;
  justify-content: center;
  color: inherit;
}
.k-tabstrip .k-tabstrip-items .k-item.k-active {
  top: 4px;
  background-color: var(--light-blue-to-medium-grey);
}
.k-tabstrip .k-tabstrip-items .k-item + .k-item {
  margin: 0;
}
.k-tabstrip .k-input-value-text {
  line-height: normal;
  padding-top: 5px;
  padding-bottom: 5px;
}
.k-tabstrip .k-input-inner {
  padding: 0;
}
.k-tabstrip .k-content {
  margin: 0;
  padding: 10px 37.5px;
  zoom: normal;
  background-image: none;
  background-color: inherit;
}
.k-dropdowntree,
.k-dropdownlist,
.k-combobox {
  overflow: hidden;
  border: none;
  border-radius: 0.4rem;
  box-sizing: border-box;
  font-size: 20px;
  transition: border 400ms ease-out;
}
.k-dropdowntree .k-input,
.k-dropdownlist .k-input,
.k-combobox .k-input {
  border-radius: inherit;
  text-indent: 10px;
  color: #444444;
}
.k-dropdowntree.large,
.k-dropdownlist.large,
.k-combobox.large {
  width: 100%;
  margin-top: 10px;
}
.k-dropdowntree.k-state-border-down,
.k-dropdownlist.k-state-border-down,
.k-combobox.k-state-border-down {
  border: 1px solid var(--dark-blue-to-medium-blue) !important;
}
.k-dropdowntree .k-chip-label {
  line-height: normal;
}
.k-checkbox,
.k-radio {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.k-checkbox {
  border-color: var(--dark-grey-to-white);
  border-width: 3px;
  font-size: 12.5px;
  text-align: center;
}
.k-checkbox:indeterminate::before {
  height: 12.5px;
  width: 12.5px;
  border-radius: 50%;
  background-color: #444444;
}
.k-checkbox:checked {
  border-color: var(--dark-blue-to-medium-blue);
  font-size: 20px;
  background-color: var(--dark-blue-to-medium-blue);
  color: #fff;
}
.k-checkbox:checked::before {
  height: 20px;
  width: 20px;
  font-size: 20px;
}
.k-radio {
  border: none;
  background-color: #AAAAAA;
  transition: background-color 400ms ease-out;
}
.k-radio:before {
  width: 100%;
  height: 100%;
}
.k-radio:checked:before {
  background-color: var(--dark-blue-to-medium-blue);
}
.k-radio-label {
  box-sizing: border-box;
  font-size: 25px;
  color: var(--invert-text-color);
}
.k-radio-label_extraSmall {
  font-size: 16px;
}
.k-radio-label_small {
  font-size: 20px;
}
.k-radio-label_large {
  font-size: 32px;
}
.k-radio-label_extraLarge {
  font-size: 40px;
}
.k-radio-label_empID {
  margin-bottom: 5px;
  line-height: 1;
  font-size: 20px;
  font-weight: 300;
  text-align: left;
  color: #4187d8;
}
.k-radio-list:empty {
  min-height: 25px;
}
.k-group {
  padding: 0;
  border: none;
  background-color: inherit;
}
.k-group .k-list-scroller,
.k-group .k-virtual-content {
  position: relative;
  overflow: hidden;
  height: 100%;
  flex: none;
  padding: 0;
}
.k-group .k-input {
  padding: 0;
}
.k-group .k-list-filter {
  padding: 10px;
  border: none;
}
.k-group .k-list-filter .k-input-icon {
  width: auto;
  height: auto;
  font-size: 16px;
}
.k-group .k-list-filter .k-input-inner {
  padding: 0;
  border: none;
  text-indent: 10px;
  background-color: inherit;
  color: inherit;
}
.k-group .k-list-filter .k-textbox,
.k-group .k-list-filter .k-searchbox {
  padding: 5px;
  border: 1px solid #E5E5E5;
  font-size: 25px;
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
.k-group .k-list-item-text {
  font-size: 25px;
  background-color: inherit;
}
.k-group .k-list-item {
  border: none;
  border-radius: 0;
  padding: 5px 10px;
  box-shadow: none;
  box-sizing: border-box;
  font-size: 25px;
}
.k-group .k-list-item.k-selected {
  color: #fff;
  background-color: var(--dark-blue-to-medium-blue);
}
.k-group .k-list-item.k-hover {
  border: none;
  background-color: #E5E5E5;
  color: inherit;
  cursor: pointer;
}
.k-group .k-list-item.k-hover .k-list-item-text {
  background-color: inherit;
}
.k-group .k-list-item + .k-list-item {
  border-top: 1px solid #E5E5E5;
}
.k-popup {
  box-sizing: border-box;
}
.k-popup-dropdowntree .k-treeview-toggle {
  margin: 0;
  padding: 0 5px;
}
.k-popup-dropdowntree .k-treeview-toggle .k-icon {
  flex-shrink: 0;
  width: 50%;
}
.k-popup-dropdowntree .k-treeview-toggle .k-icon::before {
  margin-left: -6.5px;
}
.k-popup-dropdowntree .k-checkbox {
  border-color: #444444;
}
.k-popup-dropdowntree .k-checkbox:checked {
  border-color: var(--dark-blue-to-medium-blue);
}
.k-popup-dropdowntree .k-check-all {
  padding: 5px 10px;
}
.k-popup-dropdowntree .k-treeview {
  position: relative;
  overflow: hidden;
}
.k-popup-dropdowntree .k-treeview-leaf {
  flex-flow: wrap row;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  pointer-events: none;
}
.k-popup-dropdowntree .k-treeview-leaf-text {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.k-popup-dropdowntree .k-treeview-top,
.k-popup-dropdowntree .k-treeview-mid,
.k-popup-dropdowntree .k-treeview-bot {
  width: 100%;
  justify-content: flex-start;
  padding: 5px;
  box-sizing: border-box;
}
.k-popup-dropdowntree .k-treeview-top .k-checkbox,
.k-popup-dropdowntree .k-treeview-mid .k-checkbox,
.k-popup-dropdowntree .k-treeview-bot .k-checkbox {
  border-color: #444444;
}
.k-popup-dropdowntree .k-treeview-top .k-checkbox-wrapper,
.k-popup-dropdowntree .k-treeview-mid .k-checkbox-wrapper,
.k-popup-dropdowntree .k-treeview-bot .k-checkbox-wrapper {
  padding: 0 5px 0 25px;
}
.k-popup-dropdowntree .k-treeview-top .k-treeview-toggle ~ .k-checkbox-wrapper,
.k-popup-dropdowntree .k-treeview-mid .k-treeview-toggle ~ .k-checkbox-wrapper,
.k-popup-dropdowntree .k-treeview-bot .k-treeview-toggle ~ .k-checkbox-wrapper {
  padding-left: 0;
}
.k-popup-dropdowntree .k-treeview-item {
  padding: 0;
}
.k-popup-dropdowntree .k-treeview-group:not(.k-treeview-lines) {
  padding-left: 12.5px;
}
.k-popup-dropdowntree .k-checkbox-wrapper {
  flex-shrink: 0;
}
.k-animation-container {
  overflow: hidden;
  border-radius: 0.4rem;
  background-color: transparent;
}
.k-animation-container .k-popup {
  border: none;
  border-radius: inherit;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #fff;
  color: #444444;
  box-shadow: 0 2px 8px var(--box-shadow-color);
}
.application-page {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  background-color: inherit;
}
.body-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
  overflow: hidden;
  background-color: var(--light-blue-to-black);
  touch-action: none;
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  /* required to prevent rogue scrollbars */
  overflow: hidden;
}
body.overlay {
  background-size: cover;
  background-position: center;
}
body.overlay .body-container {
  display: none;
}
html {
  box-sizing: border-box;
}
html.k-mobile body {
  touch-action: none;
}
/* Base Stylings */
.bscroll-vertical-scrollbar {
  background-color: transparent;
}
.text {
  box-sizing: border-box;
  font-size: 25px;
  color: var(--invert-text-color);
}
.text_extraSmall {
  font-size: 16px;
}
.text_small {
  font-size: 20px;
}
.text_large {
  font-size: 32px;
}
.text_extraLarge {
  font-size: 40px;
}
.text_empID {
  margin-bottom: 5px;
  line-height: 1;
  font-size: 20px;
  font-weight: 300;
  text-align: left;
  color: #4187d8;
}
.strong {
  font-weight: 600;
}
.list-bullet {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.list-bullet:before {
  display: block;
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: var(--invert-text-color);
}
.noData {
  font-weight: 600;
  font-size: 25px;
  color: var(--invert-text-color);
}
.loading[data-type="spinner"] {
  border: 5px solid var(--light-grey-to-dark-grey);
  border-radius: 50%;
  border-top: 5px solid #4187d8;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
}
.loading[data-type="bubbles"] {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.loading[data-type="bubbles"] .bubble {
  background-color: #4187d8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}
.loading[data-type="bubbles"] .bubble + .bubble {
  margin-left: 10px;
}
.loading[data-type="bubbles"] .bubble:nth-of-type(2) {
  animation-delay: 0.25s;
}
.loading[data-type="bubbles"] .bubble:nth-of-type(3) {
  animation-delay: 0.5s;
}
.loading[data-type="tailSpinner"] {
  position: relative;
  width: 48px;
  height: 48px;
  margin: auto;
}
.loading[data-type="tailSpinner"] div {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  box-sizing: border-box;
  border: 6px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.loading[data-type="tailSpinner"] div:nth-child(1) {
  animation-delay: -0.45s;
}
.loading[data-type="tailSpinner"] div:nth-child(2) {
  animation-delay: -0.3s;
}
.loading[data-type="tailSpinner"] div:nth-child(3) {
  animation-delay: -0.15s;
}
.scrollerContainer {
  position: relative;
  overflow: hidden;
}
.ui-disabled {
  display: none !important;
  pointer-events: none !important;
}
.card {
  display: flex;
  flex-direction: column;
  margin: 10px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 0.4rem;
  background-color: var(--white-to-dark-grey);
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
.card.k-button {
  width: calc(100% - (10px * 2));
}
.k-button .text {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#AppBar {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: 0;
  background-color: var(--white-to-dark-grey);
}
#AppBar .appItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  opacity: 1;
  overflow: visible;
  text-decoration: none;
  cursor: pointer;
  color: var(--invert-text-color);
}
#AppBar .appItem .k-icon,
#AppBar .appItem .k-sprite,
#AppBar .appItem .text,
#AppBar .appItem .k-button-text {
  opacity: 0.7;
}
#AppBar .appItem .k-icon,
#AppBar .appItem .k-sprite {
  margin: auto auto 5px auto;
  font-size: 30px;
}
#AppBar .appItem .k-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  top: 5px;
  padding: 2.5px;
  background-color: var(--white-to-dark-grey);
}
#AppBar .appItem .k-badge .notification-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e30400;
}
#AppBar .appItem.active {
  opacity: 1;
  color: var(--dark-blue-to-white);
}
#AppBar .appItem.active .k-icon,
#AppBar .appItem.active .k-sprite,
#AppBar .appItem.active .text,
#AppBar .appItem.active .k-button-text {
  opacity: 1;
}
#AppBar .appItem.active .text {
  font-weight: 600;
  color: inherit;
}
#AppBar .appItem-wrapper {
  flex-shrink: 0;
  padding: 10px 0;
  overflow: hidden;
}
#AppBar .itemWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
}
#AppBar .overflowWrapper {
  flex-wrap: wrap;
}
#AppBar .appBar-bar,
#AppBar .appBar-overflowPopUp {
  width: 100%;
  background-color: inherit;
}
#AppBar .appBar-overflowPopUp {
  position: absolute;
  overflow: hidden;
}
#AppBar .appBar-bar {
  position: relative;
  height: 80px;
  border-top: 1px solid #AAAAAA;
}
#AppBar.filter-supervisor-approval {
  background-color: #FFCB41;
}
#AppBar.filter-supervisor-approval .appItem {
  color: #444444;
}
.footer_inset .appBar-bar {
  padding-bottom: var(--safe-area-bottom);
}
.AttachmentsPanel .k-upload-button {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px;
  border-radius: 0.4rem;
  font-size: 25px;
  background-color: var(--dark-blue-to-medium-blue);
  color: #fff;
}
.AttachmentsPanel .k-upload-status {
  opacity: 1;
}
.AttachmentsPanel .k-upload-status .k-upload-action {
  font-size: 25px;
  color: #fff;
}
.AttachmentsPanel .attachment {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.AttachmentsPanel .attachment + .attachment {
  margin-top: 5px;
}
.AttachmentsPanel .attachment-data {
  overflow: hidden;
  font-size: 25px;
}
.AttachmentsPanel .attachment-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 25px;
  font-weight: 300;
}
.AttachmentsPanel .attachment-size {
  font-size: 16px;
}
.AttachmentsPanel .attachment-group {
  margin-right: 10px;
  overflow: hidden;
}
.AttachmentsPanel .attachment-group-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  overflow: hidden;
}
.AttachmentsPanel .attachment-memo-wrapper,
.AttachmentsPanel .attachment-tags-wrapper,
.AttachmentsPanel .attachment-action-wrapper,
.AttachmentsPanel .attachment-loading-wrapper {
  width: 100%;
  margin-top: 10px;
}
.AttachmentsPanel .attachment-memo-wrapper .memoTextArea {
  font-size: 20px;
}
.AttachmentsPanel .attachment-memo-wrapper .characterCount {
  font-size: 18px;
}
.AttachmentsPanel .attachment-memo-wrapper .memoActions {
  margin: 5px;
}
.AttachmentsPanel .attachment-tags {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  width: 100%;
  gap: 5px;
}
.AttachmentsPanel .attachment-tags .attachment-tag {
  font-size: 14px;
}
.AttachmentsPanel .attachment-tags .attachment-tag .k-list-item {
  font-size: inherit;
}
.AttachmentsPanel .attachment-tags .attachment-tag .k-button {
  padding: 5px 10px 5px 5px;
  line-height: 17px;
  font-size: inherit;
}
.AttachmentsPanel .attachment-tags .attachment-tag .k-button .k-icon {
  line-height: inherit;
  font-weight: 300;
}
.AttachmentsPanel .attachment-tags .attachment-tag .k-button-text {
  margin-left: 5px;
  line-height: inherit;
}
.AttachmentsPanel .attachment-tags .attachment-tag-input .k-autocomplete {
  width: 150px;
  padding: 0;
}
.AttachmentsPanel .attachment-tags .attachment-tag-input .k-autocomplete .k-input-inner,
.AttachmentsPanel .attachment-tags .attachment-tag-input .k-autocomplete .k-clear-value {
  opacity: 1;
  padding: 5px;
}
.AttachmentsPanel .attachment-tags .attachment-tag-input .k-autocomplete .k-input-inner {
  text-indent: 0;
}
.AttachmentsPanel .attachment-tags .attachment-tag-container {
  position: relative;
  border: none;
  border-radius: 0.4rem;
  background-color: var(--dark-blue-to-medium-blue);
  color: #fff;
}
.AttachmentsPanel .attachment-action {
  width: 100%;
  font-size: 25px;
}
.AttachmentsPanel .attachment-action.deleteAttachmentButton {
  padding: 10px;
  border-radius: 0.4rem;
  background-color: #ce4242;
  color: #fff;
}
.AttachmentsPanel .attachment-action-wrapper {
  margin-top: 20px;
}
.AttachmentsPanel .attachment-loading {
  width: 100%;
  border: 1px solid var(--light-grey-to-medium-grey);
  border-radius: 0.4rem;
  overflow: hidden;
}
.AttachmentsPanel .attachment-loading-progress {
  height: 10px;
  width: 0;
  background-color: var(--dark-blue-to-medium-blue);
}
.AttachmentsPanel .attachment-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.AttachmentsPanel .attachment-events-container {
  width: 100%;
}
.AttachmentsPanel .attachment-icon-wrapper {
  flex-shrink: 0;
  width: 90px;
  padding-right: 10px;
  box-sizing: border-box;
  text-align: center;
}
.AttachmentsPanel .attachment-icon-wrapper .icon-attachment {
  font-size: 20px;
}
.AttachmentsPanel .attachment-icon-wrapper .icon-attachment-img {
  max-width: 100%;
  vertical-align: middle;
  object-fit: contain;
  border-radius: 0.4rem;
}
.AttachmentsPanel .k-file {
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--light-grey-to-dark-grey);
  border-radius: 0.4rem;
  overflow: hidden;
  background-color: var(--white-to-dark-grey);
  color: var(--invert-text-color);
}
.AttachmentsPanel .k-file + .k-file {
  margin-top: 10px;
}
.AttachmentsPanel .k-dropzone {
  padding: 10px;
}
.AttachmentsPanel .k-upload-files {
  width: 100%;
  padding: 10px;
  border: none;
  box-sizing: border-box;
}
.AttachmentsPanel .k-upload {
  border: none;
}
#listViewWrapper #listView.AttendanceAdminListView .listHeader #adminCheckoutButton {
  margin-right: 10px;
  margin-left: auto;
  font-size: 30px;
}
#listViewWrapper #listView.AttendanceAdminListView .listItem.attendance-card {
  background-color: #b9dfb9;
  color: #444444;
}
#listViewWrapper #listView.AttendanceAdminListView .listItem.attendance-card.k-disabled {
  background-color: var(--invert-background-color);
  color: var(--invert-text-color);
}
#AttendanceTrackingDetailPanel .overview {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
#AttendanceTrackingDetailPanel .overview-employee .text {
  color: inherit;
}
#AttendanceTrackingDetailPanel .overview-total {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 100px;
  overflow: hidden;
  margin-left: auto;
  border-radius: 0.4rem;
  background-color: #E5E5E5;
}
#AttendanceTrackingDetailPanel .overview-total .text {
  padding: 5px 0 0;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  color: #444444;
}
#AttendanceTrackingDetailPanel .overview-total .progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  overflow: hidden;
  background-color: #AAAAAA;
}
#AttendanceTrackingDetailPanel .overview-total .progress-fill {
  width: 0;
  height: 10px;
  flex-shrink: 0;
  background-color: #4187d8;
  transition: width 0.3s ease-out;
}
#AttendanceTrackingDetailPanel .overview-total .progress-fill.over-allocated {
  background-color: #ce4242;
}
#AttendanceTrackingDetailPanel .overview-total .progress-new {
  background-color: #479e45;
}
#AttendanceTrackingDetailPanel .overview-container {
  background: linear-gradient(133deg, #4187d8 30%, #1e5594 75%);
  color: #fff;
}
#AttendanceTrackingDetailPanel .detail-date-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--medium-grey-to-dark-grey);
  border-bottom: 1px solid var(--medium-grey-to-dark-grey);
  padding: 10px;
  background-color: var(--light-grey-to-dark-grey);
}
#AttendanceTrackingDetailPanel .detail-date-header .text {
  font-weight: 600;
  color: var(--medium-blue-to-white);
}
#AttendanceTrackingDetailPanel .detail-date-header-total {
  min-width: 100px;
  overflow: hidden;
  font-size: 28px;
  text-align: center;
}
#AttendanceTrackingDetailPanel .detail-record {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  margin: 10px;
  padding: 10px;
  border-radius: 0.4rem;
  background-color: var(--white-to-medium-grey);
}
#AttendanceTrackingDetailPanel .detail-record.other-kiosk-checkin {
  background-color: var(--dark-blue-to-medium-blue);
}
#AttendanceTrackingDetailPanel .detail-record.other-kiosk-checkin .text {
  color: #fff;
}
#AttendanceTrackingDetailPanel .detail-record-in,
#AttendanceTrackingDetailPanel .detail-record-out {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
}
#AttendanceTrackingDetailPanel .detail-record-in .text.label,
#AttendanceTrackingDetailPanel .detail-record-out .text.label {
  margin-bottom: 1rem;
}
#AttendanceTrackingDetailPanel .detail-record-in .text:not(.label),
#AttendanceTrackingDetailPanel .detail-record-out .text:not(.label) {
  font-weight: 600;
  font-size: 28px;
}
#AttendanceTrackingDetailPanel .detail-record + .detail-record {
  margin-top: 0;
}
#AttendanceTrackingDetailPanel .detail-container .divider {
  height: calc(25px + 28px + 1rem);
  width: 5px;
  flex-shrink: 0;
  border-radius: 0.4rem;
  background: #4187d8;
  background: linear-gradient(133deg, #4187d8 30%, #1e5594 75%);
}
#AttendanceTrackingDetailPanel .detail-container:last-child {
  padding-bottom: 10px;
}
#BreakTimeSelector .hoursEntry {
  position: relative;
  overflow: hidden;
  padding: 0;
}
#BreakTimeSelector .hoursEntry .hoursEntryContainer {
  padding: 1rem;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper {
  height: 500px;
  border-radius: 0.4rem;
  background-color: var(--white-to-dark-grey);
  box-shadow: 5px 5px 8px -2px var(--box-shadow-color);
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-button {
  transition: color 0.4s;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timesArea {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .clearButton {
  font-size: 32px;
  margin-left: auto;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 200px;
  margin: auto;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .label {
  display: inline-block;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 25px;
  font-weight: 500;
  color: var(--invert-text-color);
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 25px;
  transition: all 0.4s;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.disabled {
  pointer-events: none;
  background-color: var(--light-grey-to-medium-grey);
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.disabled .time {
  color: #444444;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.focused {
  background-color: #fff;
  border: 1px solid rgba(28, 78, 137, 0.7);
  transition: box-shadow 400ms ease-out;
  box-shadow: 0 8px 4px -2px rgba(28, 78, 137, 0.7);
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.focused .time,
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.focused .clearButton {
  color: #444444;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.invalid {
  border-color: #444444;
  background-color: #f0c6c6;
  box-shadow: none;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.focused.invalid {
  box-shadow: 0px 8px 4px -2px rgba(240, 198, 198, 0.7);
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton .time {
  justify-content: flex-start;
  height: 32px;
  width: 100%;
  font-weight: 600;
  color: var(--invert-text-color);
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton .clearButton {
  display: inline-flex;
  margin-left: auto;
  color: var(--invert-text-color);
  transition-duration: 0.2s;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton .clearButton.k-disabled {
  display: none;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton .clearButton.k-state-active {
  color: #4187d8;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch {
  height: 45px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  background-color: transparent;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-off .k-switch-label-on {
  color: #fff;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-off .k-switch-label-off {
  color: var(--invert-text-color);
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-off .k-switch-thumb {
  background-color: #4187d8;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-off .k-switch-thumb-wrap {
  left: 0;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-track {
  background-color: var(--white-to-dark-grey);
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-label-on {
  color: var(--invert-text-color);
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-label-off {
  color: #fff;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-thumb {
  background-color: #4187d8;
  filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.5));
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-thumb-wrap {
  left: 50%;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track {
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: inherit;
  background-color: var(--white-to-dark-grey);
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track .k-switch-label-on,
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track .k-switch-label-off {
  width: auto;
  z-index: 2;
  font-size: 25px;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track .k-switch-label-on {
  left: 35px;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track .k-switch-label-off {
  right: 35px;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch .k-switch-thumb {
  height: 100%;
  width: 100%;
  border-radius: 0.4rem;
  transform: translate(0, 0);
  transition: left 0.2s, filter 0.2s;
}
#BreakTimeSelector .hoursEntry .timeSelectorWrapper .k-switch .k-switch-thumb-wrap {
  top: 0;
  height: 100%;
  width: 50%;
}
#BreakTimeSelector .hoursEntry .numpadWrapper {
  position: relative;
  bottom: 186px;
  margin: 0 10px;
}
.calendarContainer {
  display: none;
  position: absolute;
  z-index: 20;
  height: 100%;
  width: 100%;
}
.calendarContainer[data-visible="visible"] {
  display: block;
  animation: fade-in 200ms;
}
.calendarContainer .calendar {
  padding: 0;
  border: none;
  border-radius: 0.4rem;
  font-size: 25px;
  background-color: var(--invert-background-color);
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
.calendarContainer .calendar .k-link {
  color: var(--dark-blue-to-medium-blue);
  font-size: 28px;
}
.calendarContainer .calendar .k-header {
  border: none;
  background-color: var(--light-grey-to-medium-grey);
  color: var(--dark-blue-to-white);
}
.calendarContainer .calendar .k-header .k-disabled {
  opacity: 0;
}
.calendarContainer .calendar .k-header .k-icon {
  text-indent: 0;
}
.calendarContainer .calendar .k-header .k-icon-button {
  width: 48px;
  height: 48px;
}
.calendarContainer .calendar .k-header .k-button {
  color: var(--dark-blue-to-white);
}
.calendarContainer .calendar .k-header .k-button.k-state-hover {
  background-color: inherit;
  color: #1e5594;
}
.calendarContainer .calendar .k-calendar-view {
  max-width: 425px;
  height: 100%;
  width: 100%;
  padding: 0;
}
.calendarContainer .calendar .k-calendar-view thead th {
  height: auto;
  padding: 10px 0 0;
  border: none;
  background-color: inherit;
  color: var(--dark-blue-to-white);
}
.calendarContainer .calendar .k-calendar-view tbody td {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 500;
}
.calendarContainer .calendar .k-calendar-view tbody td .k-link {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  text-decoration: none;
  list-style: none;
  display: inline-block;
  width: auto;
  height: auto;
  padding: 5px;
  line-height: 1;
  box-sizing: content-box;
  border-radius: 0;
  box-shadow: none;
}
.calendarContainer .calendar .k-calendar-view tbody td .k-link .day {
  width: 48px;
  padding: 10px 0;
  border-radius: 50%;
  box-sizing: border-box;
  font-size: inherit;
  background-color: transparent;
}
.calendarContainer .calendar .k-calendar-view tbody td .open {
  color: var(--dark-blue-to-medium-blue);
}
.calendarContainer .calendar .k-calendar-view tbody td .locked {
  color: var(--dark-grey-to-white);
}
.calendarContainer .calendar .k-calendar-view tbody td .closed {
  color: var(--light-grey-to-medium-grey);
}
.calendarContainer .calendar .k-calendar-view tbody td.k-selected .k-link .day,
.calendarContainer .calendar .k-calendar-view tbody td.k-today .k-link .day {
  font-weight: 600;
}
.calendarContainer .calendar .k-calendar-view tbody td.k-today .k-link .day {
  box-shadow: inset 0 0 0 3px var(--dark-blue-to-medium-blue);
}
.calendarContainer .calendar .k-calendar-view tbody td.k-selected .k-link .day {
  border: none;
  background-color: var(--dark-blue-to-medium-blue);
  color: #fff;
}
.calendarContainer .calendar .k-calendar-view tbody td.k-disabled {
  opacity: 1;
}
.calendarContainer .calendar .k-calendar-view tbody td.k-disabled .day {
  background-color: transparent;
  box-shadow: none;
}
.calendarContainer .calendar .k-calendar-view tbody .k-calendar-tr {
  height: auto;
}
.calendarContainer .calendar .k-calendar-view:not(.k-calendar-monthview) .k-calendar-td {
  padding: 5px;
}
.calendarContainer .calendar .k-calendar-view:not(.k-calendar-monthview) .k-calendar-td .k-link {
  width: 48px;
  padding: 10px 0;
  border-radius: 0.4rem;
  box-sizing: border-box;
  background-color: transparent;
}
.calendarContainer .calendar .k-calendar-view:not(.k-calendar-monthview) .k-calendar-td .k-link:empty {
  opacity: 0;
}
.calendarContainer .calendar .k-calendar-view:not(.k-calendar-monthview) .k-calendar-td.k-out-of-range {
  pointer-events: none;
}
.calendarContainer .calendar .k-calendar-view:not(.k-calendar-monthview) .k-calendar-td.k-disabled .k-link {
  background-color: transparent;
  box-shadow: none;
}
.calendarContainer .calendar .k-footer .k-disabled {
  opacity: 1;
}
#CheckInOutPanel .contentWrapper {
  display: flex;
  flex-direction: column;
}
#CheckInOutPanel .attendee {
  flex-shrink: 0;
  padding: 10px;
  background-color: var(--medium-blue-to-light-grey);
}
#CheckInOutPanel .attendee .text {
  color: var(--invert-background-color);
}
#CheckInOutPanel .attendee .text:not(.text_empID) {
  font-weight: 600;
}
#CheckInOutPanel .video-camera-canvas,
#CheckInOutPanel .video-camera-video {
  width: 100%;
  height: 100%;
}
#CheckInOutPanel .video-camera-video {
  object-fit: cover;
}
#CheckInOutPanel .video-camera-canvas {
  position: absolute;
  top: 0;
  left: 0;
}
#CheckInOutPanel .video-camera-container {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#CheckInOutPanel .validation-indicator-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 0.4rem;
}
#CheckInOutPanel .validation-indicator-container.check-in {
  background-color: #479e45;
}
#CheckInOutPanel .validation-indicator-container.check-out {
  background-color: #ce4242;
}
#CheckInOutPanel .validation-indicator-spinner {
  width: 60px;
  height: 60px;
}
#CheckInOutPanel .validation-indicator-text {
  font-size: 28px;
  text-align: center;
  color: #fff;
}
#CheckInOutPanel .validation-indicator-text div + div {
  margin-top: 5px;
}
#CheckInOutPanel .validation-indicator-status {
  position: relative;
}
#CheckInOutPanel .validation-indicator-status .k-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  font-size: 48px;
}
#CheckInOutPanel .validation-indicator-status.success {
  color: #fff;
}
#CheckInOutPanel .validation-indicator-status.success .validation-indicator-spinner {
  border-color: #fff;
  animation: none;
}
#CheckInOutPanel .validation-indicator-status.success .k-icon {
  display: block;
}
.Checklist .icon {
  font-size: 20px;
  color: var(--invert-text-color);
}
.Checklist .icon + .icon {
  margin-left: 5px;
}
.Checklist .asterisk {
  display: none;
  font-size: 25px;
  color: #ce4242;
}
.Checklist .k-i-dollar {
  margin-left: auto;
  font-size: 25px;
  color: #479e45;
}
.Checklist .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 25px;
  font-weight: 600;
  color: var(--invert-text-color);
}
.Checklist .label .unit {
  margin-left: 5px;
}
.Checklist .labels {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-top: auto;
}
.Checklist .labels .label {
  font-size: 28px;
}
.Checklist .detailIcons {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: flex-end;
  height: 20px;
  padding: 5px 0;
}
.Checklist .detailIcons .icon {
  display: none;
  margin-left: 0;
}
.Checklist .detailIcons .icon.active {
  display: inline-block;
}
.Checklist .detailIcons .icon.active + .active {
  margin-left: 5px;
}
.Checklist .detailsToggle {
  flex-direction: column;
  width: 100%;
  margin-left: 10px;
}
.Checklist .checkbox {
  font-size: 48px;
  color: var(--invert-text-color);
}
.Checklist .checkbox .k-i-check-circle {
  color: #4187d8;
}
.Checklist .display {
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 90px;
  padding: 0 10px;
  transition: box-shadow 200ms ease-in;
}
.Checklist .display.active {
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
.Checklist span.modifyQuantityButton {
  justify-content: space-evenly;
  padding: 0;
  border: 1px solid #AAAAAA;
  border-radius: 0.4rem;
  font-size: 25px;
  background-color: #fff;
}
.Checklist span.modifyQuantityButton .k-i-warning {
  color: #ce4242;
}
.Checklist span.modifyQuantityButton .k-select {
  display: none;
}
.Checklist span.modifyQuantityButton .k-input-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 200px;
  padding: 0 0 0 10px;
}
.Checklist span.modifyQuantityButton.k-focus {
  border: 1px solid rgba(28, 78, 137, 0.7);
  transition: box-shadow 400ms ease-out;
  box-shadow: 0 8px 4px -2px rgba(28, 78, 137, 0.7);
}
.Checklist .memo {
  border-color: #AAAAAA;
}
.Checklist .details {
  height: 0;
  padding: 10px;
  overflow: hidden;
  background-color: var(--light-grey-to-dark-grey);
}
.Checklist .details .label {
  display: flex;
  margin: 5px 0;
  font-weight: 500;
  color: var(--invert-text-color);
}
.Checklist .item {
  box-sizing: border-box;
  border-bottom: 1px solid var(--light-grey-to-dark-grey);
  background-color: var(--white-to-black);
}
.Checklist .item.required .asterisk {
  display: initial;
}
.Checklist .attachments-button {
  width: 100%;
  padding: 16.5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 25px;
  background-color: #fff;
  color: #444444;
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
.Checklist .attachments-button .icon-attachment {
  color: var(--dark-blue-to-medium-blue);
}
.Checklist .attachments-button .label.k-button-text {
  margin-left: 10px;
  font-size: inherit;
  font-weight: 500;
  color: inherit;
}
.Checklist .attachments-button-wrapper {
  position: absolute;
  bottom: 90px;
  width: 100%;
  padding: 10px 10px env(safe-area-inset-bottom);
  box-sizing: border-box;
  text-align: center;
}
#commandMenu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  height: 100%;
  box-sizing: border-box;
  background-color: var(--dark-blue-to-dark-grey);
}
#commandMenu .section {
  width: 100%;
}
#commandMenu .section .header,
#commandMenu .section .menubutton .k-icon,
#commandMenu .section .menubutton .label {
  line-height: normal;
  color: #fff;
}
#commandMenu .section .header {
  padding: 0 0 5px 20px;
  border-bottom: 2px solid #fff;
  font-size: 30px;
}
#commandMenu .section .options > * {
  padding: 10px 0;
  width: 100%;
}
#commandMenu .section .options .k-autocomplete,
#commandMenu .section .options .k-switch {
  background-color: inherit;
}
#commandMenu .section .options .k-autocomplete {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 0;
  background-color: #E5E5E5;
  color: #444444;
}
#commandMenu .section .options .k-autocomplete .k-clear-value {
  display: block;
  font-size: 25px;
  color: inherit;
}
#commandMenu .section .options .k-autocomplete .k-input-inner {
  width: 100%;
  padding: 10px 0;
  text-indent: 20px;
  font-size: 25px;
  color: inherit;
  background-color: inherit;
}
#commandMenu .section .options .switchWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: calc(100% - 10px);
  margin-left: auto;
}
#commandMenu .section .options .switchWrapper .switchLabel {
  flex-shrink: 0;
  font-size: 25px;
  font-weight: 300;
  color: #fff;
}
#commandMenu .section .options .switchWrapper .switchLabel:nth-of-type(1) {
  margin-right: 10px;
}
#commandMenu .section .options .switchWrapper .switchLabel:nth-of-type(2) {
  margin-left: 10px;
}
#commandMenu .section .options .switchWrapper .k-switch {
  height: 35px;
  width: auto;
  padding: 5px;
  font-size: 15px;
  color: inherit;
  background-color: #fff;
}
#commandMenu .section .options .switchWrapper .k-switch.k-switch-off .k-switch-track,
#commandMenu .section .options .switchWrapper .k-switch.k-switch-on .k-switch-track {
  flex: 0 1 auto;
  width: 80px;
  height: 100%;
  border: none;
}
#commandMenu .section .options .switchWrapper .k-switch.k-switch-off .k-switch-thumb,
#commandMenu .section .options .switchWrapper .k-switch.k-switch-on .k-switch-thumb {
  border: none;
  background-color: #4187d8;
}
#commandMenu .section .options .menubutton {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
#commandMenu .section .options .menubutton .k-icon {
  flex-shrink: 0;
  margin: 0 10px;
  font-size: 30px;
}
#commandMenu .section .options .menubutton .k-icon:empty {
  width: 30px;
}
#commandMenu .section .options .menubutton .label {
  flex-shrink: 0;
  line-height: normal;
  font-size: 25px;
  font-weight: 300;
}
#commandMenu .section .options .ui-sortable-placeholder {
  height: 51px;
}
#commandMenu .section .ui-sortable {
  position: relative;
}
#commandMenu .section .ui-sortable .label {
  flex-shrink: 1;
  white-space: nowrap;
  text-align: left;
  text-overflow: ellipsis;
}
#commandMenu .section #dateFilter {
  opacity: 1;
  transition: opacity 200ms ease-out;
}
#commandMenu .section #dateFilter .label {
  width: auto;
  padding: 0.25em;
  border: 2px solid #fff;
  border-radius: 0.4rem;
  user-select: none;
  background-color: var(--dark-blue-to-medium-blue);
  color: #fff;
  text-align: center;
  font-weight: 500;
  font-size: 25px;
}
#commandMenu .section #dateFilter .label.not-today {
  background-color: #444444;
}
#commandMenu .section #dateFilter.k-disabled {
  opacity: 0.5;
}
#commandMenu .commandMenu-scroller {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 10px 0;
}
#commandMenu .commandMenu-scroller-wrapper {
  position: relative;
  overflow: hidden;
  height: 100%;
}
#commandMenu .commandMenu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100%;
  width: 100vw;
}
#commandMenu.commandMenu-active {
  box-shadow: 8px 5px 10px -10px var(--box-shadow-color);
}
#content {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background-color: inherit;
}
#content .contentScroller {
  /* This helps with weird issue of scroll bar overlap */
  transform: translate3d(0, 0, 0);
}
.dateSelector {
  display: block;
  width: 98%;
  margin: auto;
  border-radius: 0.4rem;
  padding: 10px 0;
  text-align: center;
  background-color: var(--dark-blue-to-medium-grey);
  color: white;
}
.dateSelector .label {
  margin: 0 1rem 5px;
  font-size: 25px;
}
.dateSelector .k-i-calendar {
  position: absolute;
  right: 10px;
}
.dateSelector .data {
  width: 100%;
  text-align: center;
}
.dateSelector .dataWrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}
.dateSelector .dataWrapper.includeCalendar .data {
  text-align: left;
}
.dateSelector .currentDate {
  display: inline-block;
  min-width: 200px;
  padding: 0.25em 0;
  margin: auto;
  border: 2px solid white;
  border-radius: 0.4rem;
  user-select: none;
  background-color: var(--dark-blue-to-medium-blue);
  color: white;
  text-align: center;
  font-size: 28px;
  font-weight: 500;
}
.dateSelector .currentDate.not-today {
  background-color: #444444;
}
#DefaultTimeSelector .hoursEntry {
  position: relative;
  overflow: hidden;
  padding: 0;
}
#DefaultTimeSelector .hoursEntry .hoursEntryContainer {
  padding: 1rem;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper {
  height: 500px;
  border-radius: 0.4rem;
  background-color: var(--white-to-dark-grey);
  box-shadow: 5px 5px 8px -2px var(--box-shadow-color);
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-button {
  transition: color 0.4s;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timesArea {
  display: grid;
  grid-template-areas: "timeSelector1 timeSelector2" "timeSelector3 timeSelector4";
  grid-template-rows: auto 100px;
  padding: 10px;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .clearButton {
  font-size: 32px;
  margin-left: auto;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 200px;
  margin: auto;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .label {
  display: inline-block;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 25px;
  font-weight: 500;
  color: var(--invert-text-color);
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 25px;
  transition: all 0.4s;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.disabled {
  pointer-events: none;
  background-color: var(--light-grey-to-medium-grey);
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.disabled .time {
  color: #444444;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.focused {
  background-color: #fff;
  border: 1px solid rgba(28, 78, 137, 0.7);
  transition: box-shadow 400ms ease-out;
  box-shadow: 0 8px 4px -2px rgba(28, 78, 137, 0.7);
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.focused .time,
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.focused .clearButton {
  color: #444444;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.invalid {
  border-color: #444444;
  background-color: #f0c6c6;
  box-shadow: none;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.focused.invalid {
  box-shadow: 0px 8px 4px -2px rgba(240, 198, 198, 0.7);
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton .time {
  justify-content: flex-start;
  height: 32px;
  width: 100%;
  font-weight: 600;
  color: var(--invert-text-color);
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton .clearButton {
  display: inline-flex;
  margin-left: auto;
  color: var(--invert-text-color);
  transition-duration: 0.2s;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton .clearButton.k-disabled {
  display: none;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .timeSelector .timeButton .clearButton.k-state-active {
  color: #4187d8;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch {
  height: 45px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  background-color: transparent;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-off .k-switch-label-on {
  color: #fff;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-off .k-switch-label-off {
  color: var(--invert-text-color);
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-off .k-switch-thumb {
  background-color: #4187d8;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-off .k-switch-thumb-wrap {
  left: 0;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-track {
  background-color: var(--white-to-dark-grey);
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-label-on {
  color: var(--invert-text-color);
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-label-off {
  color: #fff;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-thumb {
  background-color: #4187d8;
  filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.5));
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-thumb-wrap {
  left: 50%;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track {
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: inherit;
  background-color: var(--white-to-dark-grey);
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track .k-switch-label-on,
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track .k-switch-label-off {
  width: auto;
  z-index: 2;
  font-size: 25px;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track .k-switch-label-on {
  left: 35px;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track .k-switch-label-off {
  right: 35px;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch .k-switch-thumb {
  height: 100%;
  width: 100%;
  border-radius: 0.4rem;
  transform: translate(0, 0);
  transition: left 0.2s, filter 0.2s;
}
#DefaultTimeSelector .hoursEntry .timeSelectorWrapper .k-switch .k-switch-thumb-wrap {
  top: 0;
  height: 100%;
  width: 50%;
}
#DefaultTimeSelector .hoursEntry .numpadWrapper {
  position: relative;
  bottom: 186px;
  margin: 0 10px;
}
#dialogContainer {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 100;
  overflow: hidden;
}
#dialogContainer .dialogBox {
  position: absolute;
  left: 50%;
  overflow: hidden;
  border-radius: 0.4rem;
  transform: translate(-50%);
  background-color: var(--invert-background-color);
  box-shadow: 5px 5px 15px -2px var(--box-shadow-color);
}
#dialogContainer .dialogBox .dialog-content {
  position: relative;
  overflow: hidden;
}
#dialogContainer .dialogBox .dialog-content .contentScroller {
  padding: 10px;
  line-height: 1.3em;
}
#dialogContainer .dialogBox .dialog-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
}
#dialogContainer .dialogBox .dialog-actions .k-button-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#dialogContainer .dialogBox .dialog-actions .action {
  padding: 1rem 0;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 25px;
  text-transform: uppercase;
  color: #444444;
  background-color: #E5E5E5;
}
#dialogContainer .dialogBox .dialog-actions .action:first-of-type {
  border-color: var(--dark-blue-to-medium-blue);
  background-color: var(--dark-blue-to-medium-blue);
  color: white;
}
#dialogContainer .dialogBox .dialog-actions .action + .action {
  margin-left: 10px;
}
#dialogContainer .dialogBox .dialog-actions .action:nth-of-type(3) {
  color: #fff;
  background-color: #444444;
}
#dialogContainer .dialogBox.general,
#dialogContainer .dialogBox.errorAlert,
#dialogContainer .dialogBox.alert {
  border-radius: 0.4rem;
  max-height: 90%;
  width: 375px;
  box-shadow: none;
}
#dialogContainer .dialogBox.general .dialog-title,
#dialogContainer .dialogBox.errorAlert .dialog-title,
#dialogContainer .dialogBox.alert .dialog-title {
  width: 100%;
  padding: 1rem 0;
  font-size: 30px;
  text-align: center;
  color: var(--invert-text-color);
}
#dialogContainer .dialogBox.general .dialog-content,
#dialogContainer .dialogBox.errorAlert .dialog-content,
#dialogContainer .dialogBox.alert .dialog-content {
  font-size: 25px;
  color: var(--invert-text-color);
}
#dialogContainer .dialogBox.syncDialog {
  width: 375px;
  height: 475px;
  background-color: rgba(60, 60, 60, 0.7);
  box-shadow: none;
  border-radius: 45px;
}
#dialogContainer .dialogBox.syncDialog .icon-almobile-logo {
  font-size: 128px;
  color: #fff;
}
#dialogContainer .dialogBox.syncDialog .syncMessage {
  margin-top: 35px;
  color: white;
  font-size: 35px;
  font-weight: 600;
}
#dialogContainer .dialogBox.syncDialog #progressContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 128px;
  width: 128px;
  margin-top: 1em;
}
#dialogContainer .dialogBox.syncDialog #progressContainer #progressPercent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 35px;
  color: #fff;
}
#dialogContainer .dialogBox.syncDialog #progressContainer .progressSpinner {
  position: relative;
  display: inline-block;
  height: 96px;
  width: 96px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  animation: spin 1.5s linear infinite;
}
#dialogContainer .dialogBox.syncDialog #progressContainer .progressSpinner:after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  transform: translate(-50%, -50%);
  width: 108px;
  height: 108px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 5px solid transparent;
  border-bottom-color: var(--dark-blue-to-medium-blue);
}
#dialogContainer .dialogBox.syncDialog #progressContainer.complete .progressSpinner::after {
  border-bottom-color: #479e45;
}
#dialogContainer .dialogBox.syncDialog .dialog-content .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
#dialogContainer .dialogBox.SupervisorApproval {
  width: 375px;
}
#dialogContainer .dialogBox.SupervisorApproval .syncMessage {
  margin-top: 20px;
}
#dialogContainer .dialogBox.SupervisorApproval #progressContainer {
  margin: 1em 0;
}
#dialogContainer .dialogBox.SupervisorApproval .sync-approvee {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #fff;
  opacity: 0.75;
  transition: opacity 400ms ease-out;
}
#dialogContainer .dialogBox.SupervisorApproval .sync-approvee .k-icon {
  margin-left: auto;
  font-size: 20px;
}
#dialogContainer .dialogBox.SupervisorApproval .sync-approvee .k-icon.spin {
  color: #4187d8;
}
#dialogContainer .dialogBox.SupervisorApproval .sync-approvee .text_small {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dialogContainer .dialogBox.SupervisorApproval .sync-approvee .k-i-check {
  color: #479e45;
}
#dialogContainer .dialogBox.SupervisorApproval .sync-approvee .k-i-x {
  color: #ce4242;
}
#dialogContainer .dialogBox.SupervisorApproval .sync-approvee-syncing {
  opacity: 1;
}
#dialogContainer .dialogBox.SupervisorApproval .sync-approvee + .sync-approvee {
  margin-top: 10px;
}
#dialogContainer .dialogBox.SupervisorApproval .sync-approvees-container {
  position: relative;
  overflow: hidden;
  max-height: 90px;
  max-width: 80%;
  margin: 0 auto;
}
#dialogContainer .pin-code-dialog .dialog-title {
  width: 100%;
  padding: 1rem 0 10px;
  font-size: 30px;
  text-align: center;
  color: var(--invert-text-color);
}
#dialogContainer .pin-code-input {
  width: 100%;
  padding: 5px 0;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  box-sizing: border-box;
  outline: none;
  font-size: 25px;
  text-align: center;
  color: var(--invert-text-color);
  background-color: inherit;
}
#dialogContainer .pin-code-input::-webkit-outer-spin-button,
#dialogContainer .pin-code-input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
#dialogContainer .pin-code-container {
  padding: 0 10px 1rem;
}
#dialogContainer .user-pw-dialog .dialog-title {
  width: 100%;
  padding: 1rem 10px;
  font-size: 30px;
  text-align: center;
  color: var(--invert-text-color);
}
#dialogContainer .user-pw-input {
  width: 100%;
  padding: 5px 0;
  text-indent: 38px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  outline: none;
  font-size: 28px;
  text-align: left;
  color: var(--invert-text-color);
  background-color: inherit;
}
#dialogContainer .user-pw-input::-ms-reveal {
  display: none;
}
#dialogContainer .user-pw-container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10px 1rem;
}
#dialogContainer .user-pw-container .k-icon {
  position: absolute;
  font-size: 28px;
  color: var(--dark-blue-to-white);
}
#dialogContainer .user-pw-container .icon-password {
  left: 15px;
}
#dialogContainer .user-pw-container .icon-capslock {
  display: none;
  right: 15px;
}
#dialogContainer .check-out-success {
  padding: 10px;
  background-color: #ce4242;
}
#dialogContainer .check-out-success .k-i-check {
  display: block;
  line-height: 60px;
  font-size: 48px;
  color: #fff;
}
#dialogContainer .check-out-success .check-circle {
  width: 60px;
  height: 60px;
  border: 5px solid #fff;
  border-radius: 50%;
  margin: auto auto 10px;
}
#dialogContainer .check-out-success .text {
  font-size: 28px;
  text-align: center;
  color: #fff;
  line-height: 1;
}
#dialogContainer .check-out-success .text + .text {
  margin-top: 5px;
}
#dialogContainer .sync-starting-dialog {
  width: 375px;
  height: 475px;
  border-radius: 45px;
}
#dialogContainer .sync-starting-dialog .icon-almobile-logo {
  font-size: 128px;
  text-align: center;
  color: var(--almobile-logo-color);
}
#dialogContainer .sync-starting-dialog .dialog-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
#dialogContainer .sync-starting-dialog .dialog-content .text_large {
  margin-top: 35px;
  font-size: 35px;
}
#dialogContainer .sync-starting-dialog .dialog-content .text-countdown {
  font-size: 96px;
}
#dialogContainer .sync-starting-dialog .dialog-actions {
  padding: 0;
}
#dialogContainer .sync-starting-dialog .dialog-actions .action {
  border-radius: 0;
}
#distributionSelection .k-tabstrip-items .tabContainer {
  min-width: 96px;
  box-sizing: border-box;
}
#distributionSelection .k-tabstrip-items .tabContainer .label {
  height: 25px;
  width: 100%;
  line-height: 1;
  font-size: 25px;
  text-align: center;
  color: inherit;
}
#distributionSelection .distElements {
  overflow: visible;
}
#distributionSelection .distElements .distElem {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#distributionSelection .distElements .distElem .header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 5px;
}
#distributionSelection .distElements .distElem .header .label,
#distributionSelection .distElements .distElem .header .actionButton {
  line-height: 1;
  font-weight: 500;
  color: var(--invert-text-color);
}
#distributionSelection .distElements .distElem .header .label {
  margin: 0;
  font-size: 25px;
}
#distributionSelection .distElements .distElem .header .actionButton {
  margin-left: auto;
  margin-right: 12.5px;
  /* center with k-select */
  font-size: 30px;
}
#distributionSelection .distElements .distElem .header .clearButton {
  font-size: 20px;
  margin-right: 15.5px;
}
#distributionSelection .distElements .distElem .inputWrapper {
  position: relative;
  width: 100%;
  background-color: transparent;
}
#distributionSelection .distElements .distElem .inputWrapper .distElemSelect,
#distributionSelection .distElements .distElem .inputWrapper .k-popup {
  border: 1px solid var(--border-color);
}
#distributionSelection .distElements .distElem .inputWrapper .distElemSelect {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  font-size: 25px;
  background-color: #fff;
  color: #444444;
  opacity: 1;
  transition: background-color 0.4s;
}
#distributionSelection .distElements .distElem .inputWrapper .distElemSelect .k-input-button {
  width: 2em;
  line-height: 45px;
}
#distributionSelection .distElements .distElem .inputWrapper .distElemSelect.k-disabled {
  opacity: 1;
  border-color: var(--light-grey-to-dark-grey);
  background-color: var(--light-grey-to-dark-grey);
  color: var(--dark-grey-to-medium-grey);
}
#distributionSelection .distElements .distElem .inputWrapper .distElemSelect.k-disabled .k-input-button {
  display: none;
}
#distributionSelection .distElements .distElem .inputWrapper .k-list-container {
  overflow: hidden;
}
#distributionSelection .distElements .distElem .inputWrapper .k-list-container .k-list-filter {
  margin: 0 0 8px 0;
}
#distributionSelection .distElements .distElem .inputWrapper .k-list-container .k-list-filter .k-textbox {
  padding-right: 37.5px;
}
#distributionSelection .distElements .distElem .inputWrapper .k-list-container .k-list-filter .k-textbox:focus {
  border: 1px solid rgba(28, 78, 137, 0.7);
  transition: box-shadow 400ms ease-out;
  box-shadow: 0 8px 4px -2px rgba(28, 78, 137, 0.7);
}
#distributionSelection .distElements .distElem .inputWrapper .k-list-container .k-item {
  font-size: 25px;
}
#distributionSelection .distElements .distElem .inputWrapper .k-list-container .k-item.k-state-selected {
  background-color: #E5E5E5;
}
#distributionSelection .distElements .distElem + .distElem {
  margin-top: 10px;
}
#distributionSelection .distElements .distElem.masterFileFilter .header .filterButton {
  color: #4187d8;
}
#distributionSelection .distElements .distElem.masterFileFilter .inputWrapper .distElemSelect {
  border-color: #4187d8;
}
#DefaultsPanel .p-header .title {
  margin-left: auto;
}
#DefaultsPanel .content {
  position: relative;
  overflow: hidden;
}
#DefaultsPanel .distributionSelectionWrapper .distElements {
  padding-bottom: 0;
  padding-left: 37.5px;
  padding-right: 37.5px;
}
#DefaultsPanel .hoursWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
}
#DefaultsPanel .hoursWrapper .primary-label {
  color: var(--invert-text-color);
}
#DefaultsPanel .hoursWrapper .label {
  line-height: 1;
  font-size: 25px;
  font-weight: 500;
}
#DefaultsPanel .hoursWrapper .hoursType,
#DefaultsPanel .hoursWrapper .defaultTimes {
  width: 100%;
  max-width: 400px;
  color: var(--invert-text-color);
}
#DefaultsPanel .hoursWrapper .hoursType .header,
#DefaultsPanel .hoursWrapper .defaultTimes .header {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--invert-text-color);
}
#DefaultsPanel .hoursWrapper .hoursType .header .clearButton,
#DefaultsPanel .hoursWrapper .defaultTimes .header .clearButton {
  margin-left: auto;
  margin-right: 15.5px;
  font-size: 20px;
  color: inherit;
}
#DefaultsPanel .hoursWrapper .hoursType .primary-label,
#DefaultsPanel .hoursWrapper .defaultTimes .primary-label {
  display: block;
  margin-bottom: 5px;
}
#DefaultsPanel .hoursWrapper .hoursType .inputWrapper {
  position: relative;
  width: 100%;
}
#DefaultsPanel .hoursWrapper .hoursType .inputWrapper .k-dropdownlist,
#DefaultsPanel .hoursWrapper .hoursType .inputWrapper .k-popup {
  border: 1px solid var(--border-color);
}
#DefaultsPanel .hoursWrapper .hoursType .inputWrapper .k-dropdownlist {
  width: 100%;
  font-size: 25px;
}
#DefaultsPanel .hoursWrapper .defaultTimes {
  margin-top: 1rem;
}
#DefaultsPanel .hoursWrapper .defaultTimes #defaultTimesButton {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  border-radius: 0.4rem;
  border: 1px solid var(--border-color);
  background-color: #fff;
  color: #444444;
}
#DefaultsPanel .hoursWrapper .defaultTimes #defaultTimesButton .time {
  display: flex;
  align-items: center;
  padding: 10px 0;
  font-size: 25px;
}
#DefaultsPanel .hoursWrapper .defaultTimes #defaultTimesButton .time .label {
  margin-left: 10px;
}
#DefaultsPanel .hoursWrapper .defaultTimes #defaultTimesButton .time .data {
  margin-left: 5px;
}
#DefaultsPanel .editButtons {
  padding-left: 37.5px;
  padding-right: 37.5px;
}
#DefaultsPanel .editButtons .editButton .locked {
  background-color: #444444;
}
#ElectronicSignatureReportPanel .k-disabled {
  opacity: 0.5;
}
#ElectronicSignatureReportPanel .signUser {
  font-size: 38px;
  margin-left: auto;
}
#ElectronicSignatureReportPanel .k-list .k-item {
  font-size: 25px;
}
#ElectronicSignatureReportPanel .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 28px;
  text-align: left;
  color: var(--invert-text-color);
}
#ElectronicSignatureReportPanel .text .loading {
  margin: auto;
}
#ElectronicSignatureReportPanel .text-id {
  font-size: 20px;
}
#ElectronicSignatureReportPanel .cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}
#ElectronicSignatureReportPanel .recordFilter-Cell,
#ElectronicSignatureReportPanel .dateSelector-Cell {
  width: 50%;
  margin: 0 5px;
}
#ElectronicSignatureReportPanel .recordFilter-Cell {
  position: relative;
  overflow: visible;
}
#ElectronicSignatureReportPanel .recordFilter-Cell .k-input-value-text {
  line-height: 1;
}
#ElectronicSignatureReportPanel .recordFilter-Cell .k-dropdownlist {
  width: 100%;
  border: 1px solid transparent;
  font-size: 25px;
  background-color: #fff;
}
#ElectronicSignatureReportPanel .dateSelector-Cell .dateSelector {
  width: 100%;
  padding: 0;
  background-color: inherit;
  transition: opacity 200ms ease-out;
}
#ElectronicSignatureReportPanel .dateSelector-Cell .dateSelector .currentDate {
  display: block;
  width: 100%;
  min-width: auto;
  padding: 10px 0;
  font-size: 25px;
  border: 1px solid transparent;
  filter: none;
  background-color: #fff;
  color: #444444;
}
#ElectronicSignatureReportPanel .description {
  flex-shrink: 0;
  width: 200px;
  margin-right: 5px;
}
#ElectronicSignatureReportPanel .approvalProgress {
  width: 100%;
  margin-top: auto;
  background-color: #AAAAAA;
}
#ElectronicSignatureReportPanel .approvalProgress .fill {
  height: 10px;
  width: 0;
  max-width: 100%;
  background-color: #4187d8;
  transition: all 200ms ease-out;
}
#ElectronicSignatureReportPanel .hours {
  width: 100%;
  text-align: center;
}
#ElectronicSignatureReportPanel .hours .text {
  text-align: center;
}
#ElectronicSignatureReportPanel .hours + .hours {
  margin-left: 5px;
}
#ElectronicSignatureReportPanel .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
}
#ElectronicSignatureReportPanel .reportBody-Row {
  margin: 10px auto;
  box-shadow: 0px 5px 5px -2px var(--box-shadow-color);
}
#ElectronicSignatureReportPanel .reportBody-Row .hours {
  border: 1px solid var(--white-to-light-grey);
  border-radius: 0.4rem;
  background-color: #E5E5E5;
}
#ElectronicSignatureReportPanel .reportBody-Row .hours .text {
  margin: auto;
  padding: 5px 5px 0;
  font-weight: 600;
  color: #444444;
}
#ElectronicSignatureReportPanel .reportBody-Row .hours.approved .k-i-check {
  color: #479e45;
}
#ElectronicSignatureReportPanel .reportBody-Row .hours.approved .fill {
  background-color: #479e45;
}
#ElectronicSignatureReportPanel .reportBody-Row .hours.notAvailable .fill {
  background-color: #444444;
}
#ElectronicSignatureReportPanel .reportBody-Row.loading {
  opacity: 1;
}
#ElectronicSignatureReportPanel .reportHeader {
  background-color: var(--dark-blue-to-medium-grey);
}
#ElectronicSignatureReportPanel .reportHeader .text {
  text-align: center;
  color: #fff;
}
#ElectronicSignatureReportPanel .reportBody-Wrapper {
  padding: 5px 0;
}
#ElectronicSignatureReportPanel .reportBody-Wrapper .cell {
  min-height: 48px;
}
#ElectronicSignatureReportPanel .reportBody {
  position: relative;
  overflow: hidden;
  height: 100%;
}
#ElectronicSignatureReportPanel.tablet {
  max-width: 600px;
}
#ElectronicSignatureReportPanel.tablet .description {
  width: 40%;
}
#DefaultsPanel.EmployeeDefaultsPanel .navButtons {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 20px 37.5px;
  box-sizing: border-box;
  background-color: #b9dfb9;
}
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .navButton {
  transition: opacity 0.4s;
}
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .navButton.k-disabled {
  opacity: 0;
}
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .navButton.loading {
  pointer-events: none;
}
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .navLeft,
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .navRight {
  height: 2em;
  width: 2em;
  font-size: 32px;
  border-radius: 50%;
  background-color: #479e45;
  color: #fff;
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .navLeft .icon-left-arrow,
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .navRight .icon-left-arrow,
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .navLeft .icon-right-arrow,
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .navRight .icon-right-arrow {
  font-weight: 600;
}
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .navLeft .icon-left-arrow:before,
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .navRight .icon-left-arrow:before,
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .navLeft .icon-right-arrow:before,
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .navRight .icon-right-arrow:before {
  width: 100%;
}
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .employeeSelect {
  padding: 5px 10px;
  margin-left: auto;
  border: 1px solid #444444;
  border-radius: 0.4rem;
  font-size: 22px;
  text-align: center;
  background-color: transparent;
  color: #444444;
}
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .employeeSelect span + span {
  margin-left: 5px;
}
#DefaultsPanel.EmployeeDefaultsPanel .navButtons .navRight {
  margin-left: auto;
}
#DefaultsPanel.EmployeeDefaultsPanel .distributionSelectionWrapper #distributionSelection .k-tabstrip-items-wrapper {
  background-color: #b9dfb9;
}
#EmployeeInfoPanel.panel .navigation {
  background-color: transparent;
}
#EmployeeInfoPanel #employeeCounterBtn {
  display: block;
  margin: auto auto 10px auto;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 22px;
  text-align: center;
  background-color: var(--dark-blue-to-white);
  color: var(--white-to-dark-grey);
}
#EmployeeInfoPanel .navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 37.5px;
  background-color: var(--white-to-dark-grey);
}
#EmployeeInfoPanel .navigation #employeeCounterBtn {
  margin: 0 0 0 auto;
}
#EmployeeInfoPanel .navigation #rightNavButton {
  margin-left: auto;
}
#EmployeeInfoPanel .navigation .navButton {
  transition: opacity 0.4s;
}
#EmployeeInfoPanel .navigation .navButton.k-disabled {
  opacity: 0;
}
#EmployeeInfoPanel .navigation .navButton .k-sprite {
  font-size: 36px;
  color: var(--dark-blue-to-white);
}
#EmployeeInfoPanel .employeeInfo {
  position: relative;
  overflow: hidden;
  padding: 0 10px;
}
#EmployeeInfoPanel .employeeInfo .label,
#EmployeeInfoPanel .employeeInfo .data {
  color: var(--invert-text-color);
  font-size: 32px;
}
#EmployeeInfoPanel .employeeInfo .employeeOverview {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#EmployeeInfoPanel .employeeInfo .employeeOverview .label {
  margin-right: 5px;
  font-weight: 600;
}
#EmployeeInfoPanel .employeeInfo .employeeOverview .info {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 5px;
}
#EmployeeInfoPanel .employeeInfo .employeeOverview .name,
#EmployeeInfoPanel .employeeInfo .employeeOverview .code {
  display: block;
}
#EmployeeInfoPanel .employeeInfo .employeeOverview .name .label,
#EmployeeInfoPanel .employeeInfo .employeeOverview .code .label {
  float: left;
}
#EmployeeInfoPanel .employeeInfo .employeeOverview .hours {
  margin-bottom: 0;
}
#EmployeeInfoPanel .employeeInfo .employeeOverview .rightSection {
  margin-left: auto;
}
#EmployeeInfoPanel .employeeInfo .employeeExpenseItems,
#EmployeeInfoPanel .employeeInfo .employeeDetails {
  margin: 10px 0;
  padding: 0 5px;
  border-radius: 0.4rem;
  background-color: var(--invert-background-color);
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
#EmployeeInfoPanel .employeeInfo .employeeExpenseItems .label,
#EmployeeInfoPanel .employeeInfo .employeeDetails .label,
#EmployeeInfoPanel .employeeInfo .employeeExpenseItems .data,
#EmployeeInfoPanel .employeeInfo .employeeDetails .data {
  color: var(--invert-text-color);
  font-size: 25px;
}
#EmployeeInfoPanel .employeeInfo .employeeExpenseItems .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 10px 0;
}
#EmployeeInfoPanel .employeeInfo .employeeExpenseItems .item + .item {
  border-top: 1px solid #AAAAAA;
}
#EmployeeInfoPanel .employeeInfo .employeeExpenseItems .item .label {
  max-width: calc(100% - 220px);
  /* 240 is a sum of units width and quantity */
  width: 100%;
  word-break: break-word;
  font-weight: 600;
}
#EmployeeInfoPanel .employeeInfo .employeeExpenseItems .item .data {
  flex-shrink: 0;
  padding-left: 5px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: auto;
}
#EmployeeInfoPanel .employeeInfo .employeeExpenseItems .item .units {
  width: 100px;
  text-align: left;
}
#EmployeeInfoPanel .employeeInfo .employeeExpenseItems .item .quantity {
  width: 120px;
  margin-left: 0;
  text-align: right;
}
#EmployeeInfoPanel .employeeInfo .employeeDetails .simple {
  display: flex;
  flex-flow: wrap row;
  align-items: center;
}
#EmployeeInfoPanel .employeeInfo .employeeDetails .simple .label {
  margin-right: 5px;
  font-weight: 600;
}
#EmployeeInfoPanel .employeeInfo .employeeDetails .detail {
  padding: 10px 0;
}
#EmployeeInfoPanel .employeeInfo .employeeDetails .detail + .detail {
  border-top: 1px solid #AAAAAA;
}
#EmployeeInfoPanel .employeeInfo .employeeDetails .detail.location .address + .region {
  margin-top: 5px;
}
#EmployeeInfoPanel .employeeInfo .employeeDetails .detail.phone {
  display: grid;
  grid-template-areas: "icon label" "icon data";
  align-items: center;
  grid-template-columns: 45px 1fr;
}
#EmployeeInfoPanel .employeeInfo .employeeDetails .detail.phone .k-icon {
  grid-area: icon;
  margin-right: auto;
  font-size: 35px;
  color: #1e5594;
}
#EmployeeInfoPanel .employeeInfo .employeeDetails .detail.phone .k-icon.notAvailable {
  color: #AAAAAA;
  pointer-events: none;
}
#EmployeeInfoPanel .employeeInfo .employeeDetails .detail.phone .label {
  grid-area: label;
  font-weight: 600;
}
#EmployeeInfoPanel .employeeInfo .employeeDetails .detail.phone .data {
  grid-area: data;
}
#EmployeeInfoPanel .employeeInfo .hoursTypeBreakdown {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  margin: 10px 0;
  padding: 5px 0;
  border-radius: 0.4rem;
  background-color: var(--invert-background-color);
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
#EmployeeInfoPanel .employeeInfo .hoursTypeBreakdown .label,
#EmployeeInfoPanel .employeeInfo .hoursTypeBreakdown .data {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: var(--invert-text-color);
}
#EmployeeInfoPanel .employeeInfo .hoursTypeBreakdown .label {
  margin: 0 0 10px 0;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 0.4rem;
  background-color: var(--dark-grey-to-medium-grey);
  font-weight: 500;
  color: #fff;
}
#EmployeeInfoPanel .employeeInfo .hoursTypeBreakdown .info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5px;
  margin: 0;
  box-sizing: border-box;
}
#EmployeeInfoPanel .employeeInfo .hoursTypeBreakdown .info + .info {
  border-left: 1px solid #AAAAAA;
}
#EmployeeInfoPanel .employeeInfo .hoursTypeBreakdown .info.hoursType[spot="1"] .label {
  background-color: #1e5594;
}
#EmployeeInfoPanel .employeeInfo .hoursTypeBreakdown .info.hoursType[spot="2"] .label {
  background-color: #479e45;
}
#EmployeeInfoPanel .employeeInfo .hoursTypeBreakdown .info.hoursType[spot="3"] .label {
  background-color: #ce4242;
}
#EmployeeInfoPanel .employeeInfo .employeeInfoWrapper {
  max-width: 480px;
  margin: auto;
  padding: 10px 0;
}
.EstimationBoard {
  position: relative;
  top: 40px;
  height: calc(100% - 40px);
  overflow: hidden;
}
.EstimationBoard .tableName {
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 600;
  color: var(--invert-text-color);
}
.EstimationBoard .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  border-top: 2px solid #E5E5E5;
}
.EstimationBoard .row .cell,
.EstimationBoard .row .label,
.EstimationBoard .row .data {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.EstimationBoard .row .cell {
  width: 100%;
  box-sizing: border-box;
  font-size: 25px;
  text-align: center;
  color: var(--invert-text-color);
}
.EstimationBoard .row .cell .label,
.EstimationBoard .row .cell .data {
  padding: 5px;
}
.EstimationBoard .row .cell .label {
  min-height: 18px;
  font-size: 18px;
  text-align: left;
}
.EstimationBoard .row .cell .data {
  min-height: 28px;
  font-size: 28px;
  text-align: right;
}
.EstimationBoard .row .cell + .cell {
  border-left: 1px solid #E5E5E5;
}
.EstimationBoard .row_header .cell {
  padding: 5px 10px;
  color: var(--dark-blue-to-medium-blue);
  font-size: 20px;
  font-weight: 600;
}
.EstimationBoard .totalsTable,
.EstimationBoard .estimationTable {
  padding: 10px;
  border-radius: 0.4rem;
  background-color: var(--white-to-dark-grey);
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
.EstimationBoard .totalsTable .row {
  height: 100%;
  align-items: flex-start;
  border-top: none;
}
.EstimationBoard .totalsTable .row .label,
.EstimationBoard .totalsTable .row .data {
  padding: 0 0 5px 0;
  text-align: center;
}
.EstimationBoard .totalsTable .row .cell .data {
  font-size: 40px;
}
.EstimationBoard .totalsTable .row .actEst {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 10px;
  padding-bottom: 0;
}
.EstimationBoard .totalsTable .row .actEst .progressBar {
  width: 100%;
  border-radius: 0.4rem;
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--light-grey-to-medium-grey);
}
.EstimationBoard .totalsTable .row .actEst .progressBar .bar {
  height: 15px;
  max-width: 100%;
  border-radius: 0 0.4rem 0.4rem 0;
  background-color: var(--dark-blue-to-medium-blue);
}
.EstimationBoard .totalsTable .row .actEst .data {
  min-height: 0;
}
.EstimationBoard .estimationTable + .estimationTable {
  margin-top: 10px;
}
.EstimationBoard .wrapper {
  padding: 10px 0;
}
.EstimationBoard .wrapper_estimationTables,
.EstimationBoard .wrapper_totalsTable {
  max-width: 1024px;
  margin: auto;
}
@media (max-width: 480px) {
  .EstimationBoard .wrapper {
    padding: 10px 37.5px;
  }
}
.EstimationBoard .container {
  height: 100%;
}
.EstimationBoard .container_estimationTables {
  position: relative;
  overflow: hidden;
}
#Drawer {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  background-color: var(--light-blue-to-black);
}
#Drawer #drawerHandle {
  display: inline-block;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  overflow: visible;
  user-select: none;
  text-align: center;
  background-color: transparent;
}
#Drawer #drawerHandle .icon-left-arrow {
  transform: rotate(90deg);
  color: var(--dark-blue-to-white);
  font-size: 40px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 400ms ease-out;
  text-shadow: 0 0 5px var(--box-shadow-color);
}
#Drawer #drawerContainer {
  position: relative;
  height: 100%;
  overflow: hidden;
}
#footer {
  position: fixed;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
}
#footer > .wrapper {
  padding: 0;
}
#footer .editButtons {
  position: relative;
}
.footer_inset > *:last-child {
  padding-bottom: var(--safe-area-bottom);
}
#GridColumnPicker .distElements {
  padding-bottom: 0;
}
#GridColumnPicker .work-order {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 25px;
  background-color: #fff;
  color: #444444;
}
#GridColumnPicker .work-order.k-dropdownlist {
  padding: 0;
}
#GridColumnPicker .work-order.k-dropdownlist .k-input-button {
  width: 2em;
  line-height: 45px;
}
#GridColumnPicker .work-order.k-dropdownlist .k-input-inner {
  padding: 5px 0;
}
#GridColumnPicker .work-order.k-dropdownlist.k-disabled {
  opacity: 1;
  border-color: var(--light-grey-to-dark-grey);
  background-color: var(--light-grey-to-dark-grey);
  color: var(--dark-grey-to-medium-grey);
}
#GridColumnPicker .work-order.k-dropdownlist.k-disabled .k-input-button {
  display: none;
}
#GridColumnPicker .work-order-wrapper {
  position: relative;
}
#GridColumnPicker .work-order-container {
  padding: 1rem 37.5px 0 37.5px;
}
#GridColumnPicker .work-order-container .header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 5px;
}
#GridColumnPicker .work-order-container .header .icon-work-order {
  margin-right: 1rem;
  color: #4187d8;
}
#GridColumnPicker .work-order-container .header .clear-button {
  margin-left: auto;
  margin-right: 15.5px;
  font-size: 20px;
}
#GridColumnPicker .work-order-container .header .clear-button.k-disabled {
  display: none;
}
#GridColumnPicker .hoursTypeSelection {
  width: 100%;
  border: 1px solid var(--border-color);
  font-size: 25px;
}
#GridColumnPicker .hoursTypeSelection-container {
  max-width: 400px;
  padding: 1rem 37.5px 0 37.5px;
  margin: auto;
}
#GridColumnPicker .hoursTypeSelection-container .header {
  padding-bottom: 5px;
}
#GridColumnPicker .hoursTypeSelection-wrapper {
  position: relative;
}
#GridColumnPicker .hoursTypeSelection-wrapper .k-popup {
  border: 1px solid var(--border-color);
}
#GridColumnPicker .hoursTypeSelection .k-input-value-text {
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}
#GridColumnPicker .hoursTypeSelection .k-input-button {
  width: 2em;
  line-height: 45px;
}
#GridColumnPicker .editButtons {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: calc(100% - 20px);
  padding-left: 10px;
  padding-right: 10px;
}
#GridColumnPicker .editButtons .editButton {
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
#GridColumnPicker .editButtons .editButton + .editButton {
  margin-left: 10%;
}
#GridColumnPicker .editButtons .editButton.locked {
  background-color: #444444;
}
#GridColumnPicker.edit-mode .p-header {
  background-color: #ffe6a6;
  color: #444444;
}
#GridColumnPicker.edit-mode #distributionSelection .k-tabstrip-items-wrapper {
  background-color: #ffe6a6;
}
.GridEquipmentMaintenancePanel .masterFileData-moduleSummary {
  display: flex;
  flex-flow: wrap row;
  align-items: center;
  gap: 5px;
}
.GridEquipmentMaintenancePanel .MeterInput {
  border: none;
  border-radius: 0;
  overflow: hidden;
}
#HoursEntryPanel.GridHoursEntryPanel .entry {
  font-size: 25px;
  font-weight: 500;
}
#HoursEntryPanel.GridHoursEntryPanel .primary-label {
  margin-bottom: 5px;
}
#HoursEntryPanel.GridHoursEntryPanel .loading {
  animation: pulse infinite 3.5s;
}
#HoursEntryPanel.GridHoursEntryPanel .hoursType {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  padding: 0 1rem;
}
#HoursEntryPanel.GridHoursEntryPanel .hoursType .inputWrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 0.4rem;
  background-color: #fff;
}
#HoursEntryPanel.GridHoursEntryPanel .hoursType .inputWrapper + .inputWrapper {
  margin-top: 1rem;
}
#HoursEntryPanel.GridHoursEntryPanel .hoursType .inputWrapper .label {
  position: absolute;
  z-index: 2;
  display: block;
  width: 100px;
  padding: 5px 0;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  border-top-left-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
  background-color: #444444;
  color: #fff;
}
#HoursEntryPanel.GridHoursEntryPanel .hoursType .inputWrapper .k-dropdownlist {
  width: 100%;
  border: 1px solid var(--border-color);
  font-size: 25px;
}
#HoursEntryPanel.GridHoursEntryPanel .hoursType .inputWrapper .k-dropdownlist .k-input-button {
  line-height: 67px;
}
#HoursEntryPanel.GridHoursEntryPanel .hoursType .inputWrapper .k-dropdownlist .k-input-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 32px 0 5px;
}
#HoursEntryPanel.GridHoursEntryPanel .hoursType .inputWrapper .k-dropdownlist .k-input-inner .k-input-value-text {
  font-size: 25px;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}
#HoursEntryPanel.GridHoursEntryPanel .hoursType .inputWrapper .k-list-container .k-item .k-state-selected {
  background-color: #E5E5E5;
}
#HoursEntryPanel.GridHoursEntryPanel .icon,
#HoursEntryPanel.GridHoursEntryPanel .MeterInput .icon-meter-change {
  width: 1em;
  margin-right: 1rem;
  margin-left: 0;
  color: #4187d8;
}
#HoursEntryPanel.GridHoursEntryPanel .moduleButton {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  background-color: #fff;
  font-size: 25px;
  color: #444444;
}
#HoursEntryPanel.GridHoursEntryPanel #quantityButton.k-disabled,
#HoursEntryPanel.GridHoursEntryPanel #equipmentMaintenanceButton.k-disabled {
  display: none !important;
  pointer-events: none !important;
}
#HoursEntryPanel.GridHoursEntryPanel .module {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
#HoursEntryPanel.GridHoursEntryPanel .module .label {
  color: #444444;
}
#HoursEntryPanel.GridHoursEntryPanel .module + .module {
  margin-top: 1rem;
}
#HoursEntryPanel.GridHoursEntryPanel .editButton {
  width: 100%;
}
#HoursEntryPanel.GridHoursEntryPanel .editButton + .editButton {
  margin-left: 10%;
}
#HoursEntryPanel.GridHoursEntryPanel .editButton.deleteButton {
  background-color: #ce4242;
}
#HoursEntryPanel.GridHoursEntryPanel .editButton.locked {
  background-color: #444444;
}
#HoursEntryPanel.GridHoursEntryPanel .contentWrapper > .wrapper {
  margin-top: 1rem;
  padding: 0 1rem;
}
#GridLinkDataPanel .p-header {
  border-bottom: 1px solid var(--border-color);
}
#GridLinkDataPanel .p-header .linkButton {
  margin-left: auto;
  font-size: 35px;
  transition: color 250ms ease-out;
}
#GridLinkDataPanel .promptContainer {
  width: 100%;
}
#GridLinkDataPanel .promptContainer .promptOverview {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--dark-blue-to-medium-blue);
  color: #fff;
  transition: all 250ms ease-out;
}
#GridLinkDataPanel .promptContainer .promptOverview .employeeList {
  width: 100%;
  text-align: left;
}
#GridLinkDataPanel .promptContainer .promptOverview .employeeList .employee {
  justify-content: flex-start;
  height: 35px;
  width: 100%;
  text-align: left;
  transition: all 400ms ease-out;
}
#GridLinkDataPanel .promptContainer .promptOverview .employeeList .employee .employeeName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 25px;
}
#GridLinkDataPanel .promptContainer .promptOverview .employeeList .employee .icon-close {
  flex-shrink: 0;
  margin-left: -36px;
  margin-right: 18px;
  overflow: hidden;
  font-size: 18px;
  transition: margin-left 250ms ease-out;
}
#GridLinkDataPanel .promptContainer .promptOverview .employeeList .employee-placeholder {
  filter: blur(1px);
}
#GridLinkDataPanel .promptContainer .promptOverview .distCodes {
  display: flex;
  flex-direction: row;
  padding: 5px 0 0;
  margin-left: -2.5px;
  font-size: 28px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#GridLinkDataPanel .promptContainer .promptOverview .distCodes .code {
  padding: 0 2.5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 28px;
}
#GridLinkDataPanel .promptContainer .promptOverview .linkButton {
  position: absolute;
  top: 50%;
  right: -55px;
  height: 100%;
  padding: 0 10px;
  transform: translateY(-50%);
  font-size: 35px;
  background-color: #E5E5E5;
  color: #444444;
  transition: all 250ms ease-out;
}
#GridLinkDataPanel .promptContainer .promptOverview .linkButton.linkActive {
  color: #479e45;
}
#GridLinkDataPanel .promptContainer .selection-container {
  overflow: hidden;
}
#GridLinkDataPanel .promptContainer .selection-container .work-order {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 25px;
  background-color: #fff;
  color: #444444;
}
#GridLinkDataPanel .promptContainer .selection-container .work-order.k-dropdownlist {
  padding: 0;
}
#GridLinkDataPanel .promptContainer .selection-container .work-order.k-dropdownlist .k-input-button {
  width: 2em;
  line-height: 45px;
}
#GridLinkDataPanel .promptContainer .selection-container .work-order.k-dropdownlist .k-input-inner {
  padding: 5px 0;
}
#GridLinkDataPanel .promptContainer .selection-container .work-order.k-dropdownlist.k-disabled {
  opacity: 1;
  border-color: var(--light-grey-to-dark-grey);
  background-color: var(--light-grey-to-dark-grey);
  color: var(--dark-grey-to-medium-grey);
}
#GridLinkDataPanel .promptContainer .selection-container .work-order.k-dropdownlist.k-disabled .k-input-button {
  display: none;
}
#GridLinkDataPanel .promptContainer .selection-container .work-order-wrapper {
  position: relative;
}
#GridLinkDataPanel .promptContainer .selection-container .work-order-container {
  padding: 0 37.5px 10px;
}
#GridLinkDataPanel .promptContainer .selection-container .work-order-container .header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 5px;
}
#GridLinkDataPanel .promptContainer .selection-container .work-order-container .header .icon-work-order {
  margin-right: 1rem;
  color: #4187d8;
}
.GridModulePanel .text_header {
  margin-bottom: 5px;
}
.GridModulePanel .moduleToggle {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  background-color: var(--dark-blue-to-medium-blue);
  color: #fff;
  transition: background-color 250ms ease-out;
}
.GridModulePanel .moduleToggle.saved {
  background-color: #479e45;
}
.GridModulePanel .masterFileData {
  padding: 10px;
}
.GridModulePanel .masterFileData-codes {
  font-size: 28px;
  font-weight: 600;
}
.GridModulePanel .masterFileData-descriptions {
  font-size: 20px;
  line-height: normal;
}
.GridModulePanel .masterFileData-moduleSummary {
  margin-top: 5px;
  font-size: 18px;
  font-weight: 600;
}
.GridModulePanel .masterFileData-moduleSummary:empty {
  margin: 0;
}
.GridModulePanel .QuantityCollectionForm {
  border-radius: 0;
}
.GridModulePanel .QuantityCollectionForm .text_header {
  display: none;
}
.GridModulePanel .moduleContainer {
  border-bottom: 1px solid var(--medium-grey-to-dark-grey);
}
.GridQuantityPanel .QuantityCollectionForm {
  border-radius: 0;
  border: none;
}
.GridQuantityPanel .QuantityCollectionForm .text_header {
  display: none;
}
#GroupPanel .inputWrapper {
  width: 100%;
  padding: 0 37.5px;
  box-sizing: border-box;
  background-color: var(--light-grey-to-black);
}
#GroupPanel .groupNameWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#GroupPanel .groupNameWrapper .is-attendance-button {
  padding: 5px;
  font-size: 30px;
  border: 1px solid var(--dark-grey-to-light-grey);
  border-radius: 0.4rem;
  color: var(--dark-grey-to-light-grey);
}
#GroupPanel .groupNameWrapper .is-attendance-button.active {
  border-color: var(--dark-blue-to-medium-blue);
  background-color: var(--dark-blue-to-medium-blue);
  color: #fff;
}
#GroupPanel .groupNameWrapper .k-textbox {
  display: inline-block;
  width: 100%;
  margin: auto;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  background-color: inherit;
}
#GroupPanel .groupNameWrapper .k-textbox:hover {
  background-color: inherit;
  border-color: var(--border-color);
  box-shadow: none;
}
#GroupPanel .groupNameWrapper .k-textbox #groupName {
  line-height: 1;
  padding: 10px 0;
  background-color: inherit;
  color: var(--dark-blue-to-medium-blue);
  font-size: 32px;
  text-indent: 10px;
}
#GroupPanel .groupNameWrapper .k-textbox #groupName::placeholder {
  color: var(--dark-blue-to-medium-blue);
}
#GroupPanel .searchWrapper {
  position: relative;
  padding-bottom: 10px;
  text-align: center;
}
#GroupPanel .searchWrapper .k-autocomplete {
  width: 100%;
  margin-top: 10px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  border-radius: 0.4rem;
  box-shadow: none;
  background-color: #fff;
}
#GroupPanel .searchWrapper .k-autocomplete.k-focus {
  border: 1px solid rgba(28, 78, 137, 0.7);
  transition: box-shadow 400ms ease-out;
  box-shadow: 0 8px 4px -2px rgba(28, 78, 137, 0.7);
}
#GroupPanel .searchWrapper .k-autocomplete #searchInput {
  padding: 10px 0;
  box-sizing: border-box;
  border-radius: inherit;
  background-color: inherit;
  font-size: 25px;
  color: #252525;
}
#GroupPanel .searchWrapper .k-autocomplete .k-clear-value {
  font-size: 25px;
}
#GroupPanel #listStrip .k-tabstrip-items .tabContainer {
  min-width: 40%;
}
#GroupPanel #listStrip .k-tabstrip-items .tabContainer .label,
#GroupPanel #listStrip .k-tabstrip-items .tabContainer .count {
  width: 100%;
  text-align: center;
  color: inherit;
}
#GroupPanel #listStrip .k-tabstrip-items .tabContainer .count {
  display: flex;
  align-items: center;
  justify-content: center;
}
#GroupPanel #listStrip .k-tabstrip-items .tabContainer .count .data {
  margin-left: 30px;
  /* Centers the number */
}
#GroupPanel #listStrip .k-tabstrip-items .tabContainer .count .k-icon {
  padding-left: 10px;
}
#GroupPanel #listStrip .employeeList {
  position: relative;
  overflow: hidden;
  padding: 0;
}
#GroupPanel #listStrip .employeeList .listWrapper {
  width: 100%;
  padding: 10px 37.5px;
  box-sizing: border-box;
}
#GroupPanel #listStrip .employeeList .listCheckbox {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 5px 0;
  padding: 10px;
  border-radius: 0.4rem;
  box-sizing: border-box;
  background-color: var(--invert-background-color);
  box-shadow: 0px 5px 5px -2px var(--box-shadow-color);
}
#GroupPanel #listStrip .employeeList .listCheckbox .k-checkbox {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
#GroupPanel #listStrip .employeeList .listCheckbox .k-checkbox:before {
  display: none;
  width: 35px;
  height: 35px;
  transform: translate(-50%, -50%);
  font-size: 35px;
}
#GroupPanel #listStrip .employeeList .listCheckbox .k-checkbox:checked {
  color: #fff;
}
#GroupPanel #listStrip .employeeList .listCheckbox .k-checkbox:checked:before {
  display: block;
}
#GroupPanel #listStrip .employeeList .listCheckbox .label-checkbox {
  flex-grow: 1;
  padding-left: 1rem;
  cursor: pointer;
  color: var(--invert-text-color);
}
#GroupPanel #listStrip .employeeList .listCheckbox .label-checkbox .employeeName {
  font-size: 32px;
}
#GroupPanel .editButtons .editButton {
  padding: 10px 0;
  font-size: 25px;
  box-sizing: content-box;
}
#GroupPanel .editButtons .editButton .buttonLabel {
  font-size: inherit;
  color: var(--invert-text-color);
}
#GroupPanel .editButtons .editButton:is(.deleteButton, .saveButton) {
  padding: 7.5px 0;
  font-size: 30px;
}
#GroupPanel .editButtons .editButton:is(.deleteButton, .saveButton) .buttonLabel {
  color: #fff;
}
#header[data-type="standard"] {
  background-color: var(--dark-blue-to-dark-grey);
}
#header[data-type="standard"] #backButton {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#header[data-type="standard"] #backButton .k-icon {
  flex-shrink: 0;
}
#header[data-type="standard"] #backButton .k-icon:before {
  width: 100%;
}
#header[data-type="standard"] #backButton .icon-left-arrow {
  font-size: 44px;
}
@media (max-width: 480px) {
  #header[data-type="standard"] #backButton .icon-left-arrow {
    font-size: 35px;
  }
}
#header[data-type="standard"] #backButton .icon-almobile-logo {
  padding: 5px;
  font-size: 64px;
}
@media (max-width: 480px) {
  #header[data-type="standard"] #backButton .icon-almobile-logo {
    font-size: 48px;
  }
}
#header[data-type="standard"] #pageName {
  margin-left: 10px;
  font-size: 30px;
  font-weight: 300;
}
@media (max-width: 480px) {
  #header[data-type="standard"] #pageName {
    font-size: 25px;
  }
}
#header[data-type="standard"] #headerExtras {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 48px;
  margin-left: auto;
}
#header[data-type="standard"] #headerExtras > * {
  font-size: 35px;
}
#header[data-type="standard"] #headerExtras > * + * {
  margin-left: 10px;
}
#header[data-type="standard"] #headerExtras .k-button {
  height: 100%;
  width: 48px;
}
#header[data-type="standard"] .headerContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
}
@supports (padding: max(0px)) {
  #header[data-type="standard"] .headerContainer {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
}
#header[data-type="standard"] .headerContainer > * {
  color: #fff;
}
#helpContainer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  height: 100%;
  width: 0;
  background-color: transparent;
}
#helpContainer #endHelpBookmark {
  display: none;
}
#helpContainer #helpWrapper {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  height: 100%;
}
#helpContainer #helpWrapper #helpButton {
  height: 40px;
  margin-top: 110px;
  font-size: 40px;
  background-color: transparent;
  color: var(--dark-blue-to-white);
  transition: 0.4s;
  transform: rotate(0deg);
  filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.5));
}
#helpContainer #helpWrapper #helpButton .icon-left-arrow {
  font-weight: 600;
}
#helpContainer #helpWrapper #helpContentContainer {
  position: relative;
  overflow: hidden;
  height: 100%;
  background-color: var(--dark-blue-to-dark-grey);
}
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper {
  padding: 10px;
  color: white;
}
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper #helpHeader,
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper h2,
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper h3 {
  font-weight: 600;
}
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper #helpHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 32px;
}
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper #helpHeader .icon-almobile-logo {
  margin-right: 10px;
  font-size: 40px;
  color: white;
}
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper h2 {
  margin: 1em 0 4px;
  font-size: 25px;
}
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper h3 {
  margin: 1em 0 4px;
  font-size: 22px;
}
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper p {
  line-height: 1.3em;
  margin: 8px 0;
  font-size: 18px;
}
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper ul,
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper ol {
  padding: 0 10px;
}
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper ul li + li,
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper ol li + li {
  margin-top: 10px;
}
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper ._figure {
  margin: 5px 0;
  padding: 10px;
  background-color: #fff;
  border-radius: 0.4rem;
  text-align: center;
}
#helpContainer #helpWrapper #helpContentContainer #helpContentWrapper ._figure .text {
  color: #444444;
}
#HoursEntryPanel .label {
  display: inline-block;
  font-size: 25px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--invert-text-color);
}
#HoursEntryPanel .p-header .hoursTotal {
  margin-left: 1rem;
  font-size: 30px;
  font-weight: 300;
}
#HoursEntryPanel .p-header .hoursTotal .data {
  margin-right: 10px;
}
#HoursEntryPanel .p-header .multiday {
  margin-left: auto;
  font-size: 40px;
  background-color: inherit;
}
#HoursEntryPanel .k-tabstrip-wrapper #tabStrip .k-tabstrip-items {
  padding-top: 20px;
  background-color: var(--light-grey-to-black);
}
#HoursEntryPanel .k-tabstrip-wrapper #tabStrip .tabContainer {
  padding: 0;
}
#HoursEntryPanel .content {
  position: relative;
  overflow: hidden;
}
#HoursEntryPanel .hoursEntry {
  padding: 0;
}
#HoursEntryPanel .hoursEntry .hoursEntryContainer {
  padding: 1rem;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper {
  height: 500px;
  border-radius: 0.4rem;
  background-color: var(--white-to-dark-grey);
  box-shadow: 5px 5px 8px -2px var(--box-shadow-color);
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-button {
  transition: color 0.4s;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timesArea {
  display: grid;
  grid-template-areas: "timeSelector1 timeSelector2" "timeSelector3 timeSelector4";
  grid-template-rows: auto 100px;
  padding: 10px;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .clearButton {
  font-size: 32px;
  margin-left: auto;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 200px;
  margin: auto;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector.wholeHours .label {
  text-align: center;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector .label {
  margin-bottom: 5px;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector .timeButton {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  -moz-outline-radius: 0.4rem;
  font-size: 25px;
  transition: all 0.4s;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.disabled {
  pointer-events: none;
  background-color: var(--light-grey-to-medium-grey);
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.disabled .time {
  color: #444444;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.focused {
  background-color: #fff;
  border: 1px solid rgba(28, 78, 137, 0.7);
  transition: box-shadow 400ms ease-out;
  box-shadow: 0 8px 4px -2px rgba(28, 78, 137, 0.7);
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.focused .time,
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.focused .clearButton {
  color: #444444;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.invalid {
  border-color: #444444;
  background-color: #f0c6c6;
  box-shadow: none;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector .timeButton.focused.invalid {
  box-shadow: 0px 8px 4px -2px rgba(240, 198, 198, 0.7);
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector .timeButton .time {
  justify-content: flex-start;
  height: 32px;
  width: 100%;
  font-weight: 600;
  color: var(--invert-text-color);
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector .timeButton .clearButton {
  display: inline-flex;
  margin-left: auto;
  color: var(--invert-text-color);
  transition-duration: 0.2s;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector .timeButton .clearButton.k-disabled {
  display: none;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .timeSelector .timeButton .clearButton.k-state-active {
  color: #4187d8;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch {
  height: 45px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  background-color: transparent;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch.k-switch-off .k-switch-label-on {
  color: #fff;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch.k-switch-off .k-switch-label-off {
  color: var(--invert-text-color);
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch.k-switch-off .k-switch-thumb {
  background-color: #4187d8;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch.k-switch-off .k-switch-thumb-wrap {
  left: 0;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-track {
  background-color: var(--white-to-dark-grey);
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-label-on {
  color: var(--invert-text-color);
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-label-off {
  color: #fff;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-thumb {
  background-color: #4187d8;
  filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.5));
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch.k-switch-on .k-switch-thumb-wrap {
  left: 50%;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track {
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: inherit;
  background-color: var(--white-to-dark-grey);
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track .k-switch-label-on,
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track .k-switch-label-off {
  width: auto;
  z-index: 2;
  font-size: 25px;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track .k-switch-label-on {
  left: 35px;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch .k-switch-track .k-switch-label-off {
  right: 35px;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch .k-switch-thumb {
  height: 100%;
  width: 100%;
  border-radius: 0.4rem;
  transform: translate(0, 0);
  transition: left 0.2s, filter 0.2s;
}
#HoursEntryPanel .hoursEntry .timeSelectorWrapper .k-switch .k-switch-thumb-wrap {
  top: 0;
  height: 100%;
  width: 50%;
}
#HoursEntryPanel .hoursEntry .numpadWrapper {
  position: relative;
  bottom: 186px;
  margin: 0 10px;
}
#hoursReport {
  position: relative;
  height: 200px;
  width: 200px;
}
#hoursReport ._text {
  position: absolute;
  top: 28px;
  left: 28px;
  width: 144px;
  height: 144px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}
#hoursReport ._text ._label {
  color: #fff;
  font-size: 18px;
  line-height: 14px;
}
#hoursReport ._text ._data {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}
#hoursReport ._text ._start {
  margin-top: 18px;
}
#hoursReport ._text ._total {
  margin-top: 6px;
}
#hoursReport ._text ._total ._softHours {
  font-size: 16px;
  font-weight: 500;
  margin-top: -2px;
}
.infoPanel {
  width: 400px;
  height: 500px;
  background-color: var(--invert-background-color);
  box-shadow: 5px 5px 15px -2px var(--box-shadow-color);
}
.infoPanel .dialog-title {
  text-align: center;
  padding: 10px;
}
.infoPanel .dialog-title .buttonContainer {
  margin-bottom: 1em;
  text-align: right;
  font-size: 30px;
}
.infoPanel .dialog-title .buttonContainer #closeButton {
  color: #AAAAAA;
}
.infoPanel .dialog-title .icon-almobile-logo {
  color: var(--almobile-logo-color);
  font-size: 128px;
}
.infoPanel .dialog-title .almobileVersion {
  margin-top: 1em;
  color: var(--almobile-logo-color);
  font-size: 25px;
}
.infoPanel .dialog-title .subInfo {
  padding-top: 10px;
  font-size: 20px;
  color: var(--invert-text-color);
}
.infoPanel .dialog-title .browserInfo {
  text-transform: capitalize;
}
.infoPanel .dialog-content {
  display: flex;
  flex-direction: column;
}
.infoPanel .dialog-content #checkUpdatesButton {
  display: block;
  width: 70%;
  margin: auto;
  padding: 8px 0;
  border: 2px solid var(--dark-grey-to-light-grey);
  border-radius: 0.4rem;
  font-size: 20px;
  font-weight: 600;
  background-color: transparent;
  color: var(--dark-grey-to-light-grey);
}
.infoPanel .dialog-content .licenseWrapper {
  padding: 10px;
}
.infoPanel .dialog-content .licenseWrapper .license {
  font-size: 20px;
  text-align: center;
  color: var(--invert-text-color);
}
.infoPanel .dialog-content .licenseWrapper .license + .license {
  margin-top: 10px;
}
.infoPanel .dialog-footer .copyrightContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 25px;
}
.infoPanel .dialog-footer .copyrightContainer .copyright {
  color: var(--almobile-logo-color);
  font-size: 20px;
}
.infoPanel .dialog-footer .copyrightContainer .copyright:nth-of-type(1) {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}
.infoPanel .dialog-footer .copyrightContainer .copyright .icon-copyright {
  margin-right: 10px;
}
#listViewWrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  /* Start below the base index of the dialogBoxes */
  height: 100%;
  width: 100%;
}
#listViewWrapper #listView {
  position: relative;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -20%);
  max-width: 600px;
  min-width: 480px;
  overflow: hidden;
  border-radius: 0.4rem;
  background-color: var(--light-blue-to-black);
  box-shadow: 5px 5px 15px -2px var(--box-shadow-color);
}
#listViewWrapper #listView .listHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  background-color: var(--dark-blue-to-dark-grey);
  color: #fff;
}
#listViewWrapper #listView .listHeader #closeListButton {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#listViewWrapper #listView .listHeader #closeListButton .k-icon {
  flex-shrink: 0;
}
#listViewWrapper #listView .listHeader #closeListButton .k-icon:before {
  width: 100%;
}
#listViewWrapper #listView .listHeader #closeListButton .icon-left-arrow {
  font-size: 44px;
}
@media (max-width: 480px) {
  #listViewWrapper #listView .listHeader #closeListButton .icon-left-arrow {
    font-size: 35px;
  }
}
#listViewWrapper #listView .listHeader #closeListButton .icon-almobile-logo {
  padding: 5px;
  font-size: 64px;
}
@media (max-width: 480px) {
  #listViewWrapper #listView .listHeader #closeListButton .icon-almobile-logo {
    font-size: 48px;
  }
}
#listViewWrapper #listView .listHeader #closeListButton .icon-left-arrow {
  font-size: 35px;
}
#listViewWrapper #listView .listHeader #closeListButton .icon-almobile-logo {
  font-size: 48px;
}
#listViewWrapper #listView .listHeader .listTitle {
  margin-left: 1rem;
  font-size: 30px;
  font-weight: 300;
}
#listViewWrapper #listView .listSearchWrapper {
  position: relative;
  padding: 10px;
  border-radius: 0.4rem;
  background-color: var(--light-grey-to-black);
  text-align: center;
}
#listViewWrapper #listView .listSearchWrapper .k-autocomplete {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  box-shadow: none;
  background-color: #fff;
  transform: translateY(0px);
  transition: all 0.4s;
}
#listViewWrapper #listView .listSearchWrapper .k-autocomplete.k-focus {
  border: 1px solid rgba(28, 78, 137, 0.7);
  transition: box-shadow 400ms ease-out;
  box-shadow: 0 8px 4px -2px rgba(28, 78, 137, 0.7);
  transform: translateY(-2px);
}
#listViewWrapper #listView .listSearchWrapper .k-autocomplete #listSearch {
  width: calc(100% - 35px);
  padding: 10px 0;
  text-indent: 10px;
  border: none;
  border-radius: inherit;
  box-sizing: border-box;
  background-color: inherit;
  font-size: 25px;
  color: #444444;
}
#listViewWrapper #listView .listSearchWrapper .k-autocomplete .k-clear-value {
  right: 10px;
  font-size: 25px;
}
#listViewWrapper #listView .listItem {
  /* Base css class each item in the list */
  min-height: 60px;
  margin: 5px 0;
  padding: 10px 5px;
  box-sizing: border-box;
  border: 1px solid var(--medium-grey-to-dark-grey);
  border-radius: 0.4rem;
  text-align: left;
  overflow: hidden;
  background-color: var(--invert-background-color);
}
#listViewWrapper #listView .listItem.special {
  color: #4187d8;
}
#listViewWrapper #listView .listItem.work-order-display .k-sprite {
  margin-right: 10px;
  color: #4187d8;
}
#listViewWrapper #listView .listItem.attendance-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#listViewWrapper #listView .listItem.attendance-card .attendance-info {
  text-align: center;
}
#listViewWrapper #listView .listItem.attendance-card .attendance-info-container {
  min-width: 130px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 0.4rem;
  background-color: #E5E5E5;
}
#listViewWrapper #listView .listItem.attendance-card .attendance-info-container .text {
  font-weight: 600;
  text-transform: uppercase;
  color: #444444;
}
#listViewWrapper #listView .listItem.attendance-card .attendance-info-container .text:not(.text_small) {
  font-size: 28px;
}
#listViewWrapper #listView .listCheckbox {
  width: 100%;
  justify-content: flex-start;
  color: var(--invert-text-color);
}
#listViewWrapper #listView .listCheckbox .k-icon {
  font-size: 48px;
}
#listViewWrapper #listView .listCheckbox .k-icon.k-i-check-circle {
  color: var(--dark-blue-to-medium-blue);
}
#listViewWrapper #listView .listCheckbox .itemLabel {
  margin-left: 10px;
  font-size: 32px;
}
#listViewWrapper #listView .listButton {
  display: block;
  width: 100%;
  padding-left: 1rem;
  text-align: left;
  color: var(--invert-text-color);
  font-size: 32px;
}
#listViewWrapper #listView .list {
  position: relative;
  overflow: hidden;
  padding: 0 10px;
}
#listViewWrapper #listView .k-item {
  min-width: 96px;
  padding: 1rem 0;
  text-align: center;
  box-sizing: border-box;
}
#listViewWrapper #listView .k-item .k-link {
  padding: 0 10px;
  border-radius: 0;
  font-size: 25px;
}
#listViewWrapper #listView .listControls {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
}
#listViewWrapper #listView .listControls .listControl {
  min-width: 100px;
  padding: 10px 0;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 25px;
  background-color: var(--light-grey-to-dark-grey);
  color: var(--invert-text-color);
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
#listViewWrapper #listView .listControls #listDeleteButton {
  border-color: #ce4242;
  background-color: #ce4242;
  color: #fff;
}
#listViewWrapper #listView .listControls #listDoneButton {
  border-color: #479e45;
  background-color: #479e45;
  color: #fff;
}
.memo {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  background-color: #fff;
}
.memo .memoTextArea {
  height: auto;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  overflow: hidden auto;
  word-break: break-word;
  text-indent: 0;
  line-height: 1;
  border: none;
  outline: none;
  border-radius: 0;
  background-color: inherit;
  color: #444444;
  font-family: 'Calibri', sans-serif;
  font-size: 25px;
  resize: none;
}
.memo .memoTextArea::placeholder {
  color: #AAAAAA;
}
.memo .memoTextArea::selection {
  background-color: #1e5594;
  color: #fff;
}
.memo .characterCount {
  font-size: 20px;
  color: #4187d8;
}
.memo .memoActions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 10px;
}
.memo .phrase {
  justify-content: flex-start;
  margin-left: 5px;
  margin-bottom: 5px;
  padding: 10px;
  border-radius: 0.4rem;
  font-size: 20px;
  background-color: #4187d8;
  color: #fff;
}
.memo .phrase .k-button-text {
  line-height: normal;
}
.memo .commonPhrases {
  display: flex;
  flex-flow: wrap row;
  padding: 0 5px;
}
.memo .commonPhrasesWrapper {
  position: relative;
  overflow: hidden;
  max-height: 90px;
  /* Allow for two rows */
}
.memo .commonPhrasesWrapper.large {
  max-height: 180px;
}
.memo .k-animation-container {
  opacity: 0;
}
.MeterInput {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  background-color: #fff;
}
.MeterInput .k-numerictextbox {
  display: flex;
  padding: 5px 10px;
  border: 1px solid #AAAAAA;
  border-radius: 0.4rem;
}
.MeterInput .k-numerictextbox.k-disabled {
  opacity: 1;
  border-color: #E5E5E5;
  background-color: #E5E5E5;
  color: #444444;
}
.MeterInput .k-numerictextbox .k-input-inner {
  padding: 0;
}
.MeterInput .k-numerictextbox .k-input-spinner {
  width: auto;
}
.MeterInput .k-numerictextbox .k-input-spinner .k-button {
  font-size: 12.5px;
}
.MeterInput .icon-meter-change {
  width: 40px;
  margin-right: 10px;
  margin-left: -5px;
  color: #4187d8;
}
.MeterInput .meter-entry-label {
  margin-bottom: 5px;
}
.MeterInput .meter-defaultChange {
  margin-left: 5px;
}
.MeterInput .meter-defaultChange-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 5px;
  font-size: 18px;
  color: #4187d8;
}
.MeterInput .meter-defaultChange-container:not(.ui-disabled) + .k-numerictextbox {
  color: #4187d8;
}
.MeterInput .meter-defaultChange-container .meter-entry-label {
  margin-bottom: 0;
}
.MeterInput .meter-header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
}
.MeterInput .meter-entry-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 5px 10px;
}
.MeterInput .meter-editButton-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px 10px;
}
.MeterInput .meter-editButton-container .deleteButton {
  background-color: #ce4242;
  color: #fff;
}
.MeterInput .meter-editButton-container .saveButton {
  background-color: #479e45;
  color: #fff;
}
.MeterInput .meter-editButton-container .k-button {
  width: 100%;
  border-radius: 0.4rem;
  padding: 5px 0;
  font-size: 32px;
}
.MeterInput .meter-editButton-container .k-button.k-disabled {
  opacity: 1;
  border-color: #E5E5E5;
  background-color: #E5E5E5;
  color: #444444;
}
.MeterInput .meter-editButton-container .k-button + .k-button {
  margin-left: 10px;
}
.MeterInput :is(.meter-header-container, .meter-entry-container) {
  font-size: 25px;
  color: #444444;
}
.k-notification {
  display: flex;
  flex-direction: column;
  margin: 10px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 0.4rem;
  padding: 10px;
  max-width: 400px;
  margin: auto;
  border: none;
  background-color: var(--white-to-dark-grey);
  background-image: none;
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
.k-notification.k-button {
  width: calc(100% - (10px * 2));
}
.k-notification .header,
.k-notification .message {
  font-size: 20px;
  color: var(--invert-text-color);
}
.k-notification .header {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-bottom: 1em;
}
.k-notification .header .text {
  width: 100%;
  padding: 0 25px;
  white-space: normal;
  word-break: break-word;
  font-size: 20px;
  text-align: center;
  color: var(--dark-blue-to-medium-blue);
}
.k-notification .header #notificationCloseButton {
  position: absolute;
  right: 0;
  font-size: 25px;
  color: #AAAAAA;
}
.k-notification .message {
  max-width: 90%;
  text-align: center;
  white-space: initial;
  margin: auto;
  line-height: 1.3em;
}
.numpadWrapper {
  max-width: 480px;
  margin: auto;
  padding: 1rem;
  box-sizing: border-box;
  background-color: #E5E5E5;
  border-radius: 0.4rem;
  box-shadow: 5px 5px 8px -2px var(--box-shadow-color);
}
.numpadWrapper .numpad {
  display: grid;
  grid-template-columns: 252px 1fr 84px;
  justify-content: center;
  border-radius: 0.4rem;
  background-color: #fff;
}
.numpadWrapper .numpad .divider {
  width: 4px;
  margin: 10px auto;
  border-radius: 0.4rem;
  background-color: #E5E5E5;
}
.numpadWrapper .numpad .digitButton {
  flex-shrink: 0;
  height: 64px;
  width: 64px;
  margin: 10px auto;
  border: 2px solid #e9f1fb;
  border-radius: 50%;
  box-shadow: 0px 0px 8px 4px transparent;
  color: #4187d8;
  font-size: 40px;
  font-weight: 500;
  transition: box-shadow 0.4s ease-out;
}
.numpadWrapper .numpad .digitButton.active,
.numpadWrapper .numpad .digitButton.k-selected {
  box-shadow: 0px 0px 8px 4px #4187d8;
}
.numpadWrapper .numpad .digitButton.disabled {
  pointer-events: none;
  background-color: #E5E5E5;
  border-color: #444444;
  color: #444444;
}
.numpadWrapper .numpad .digits {
  display: flex;
  flex-flow: wrap row;
}
.numpadWrapper .numpad .digits .digitButton.k-disabled {
  display: none;
}
.numpadWrapper .numpad .extraDigits {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 0.4rem;
}
#ElectronicSignatureReportPanel.OneSignatureReportPanel .totalHours .text {
  padding-top: 0;
}
#loadingDialog {
  position: absolute;
  z-index: 100;
  border-radius: 0.4rem;
  left: 50%;
  width: 375px;
  height: 475px;
  transform: translate(-50%);
  background-color: var(--invert-background-color);
  box-shadow: 5px 5px 15px -2px var(--box-shadow-color);
}
#loadingDialog .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0;
}
#loadingDialog .wrapper .icon-almobile-logo {
  overflow: visible;
  font-size: 128px;
  color: var(--almobile-logo-color);
}
#loadingDialog .wrapper .loadingContainer {
  width: 100%;
  margin-top: 4em;
}
#loadingDialog .wrapper .loadingContainer .loadingText {
  color: var(--invert-text-color);
  text-align: center;
  font-size: 22px;
}
#loadingDialog .wrapper .loadingContainer #loader {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 1em;
  width: 100%;
  text-align: center;
}
#loadingDialog .wrapper .loadingContainer #loader div {
  background-color: var(--invert-almobile-text-color);
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
#loadingDialog .wrapper .loadingContainer #loader #updateProgressBar {
  background-image: none;
  background-position: initial;
  background-color: transparent;
  width: 70%;
  height: auto;
  border: 1px solid white;
  border-radius: 0.4rem;
}
#loadingDialog .wrapper .loadingContainer #loader #updateProgressBar #progressBar {
  width: 0;
  height: 15px;
  transition: width 300ms ease-out;
  border-radius: 0.4rem;
  background-color: #4187d8;
}
#loadingDialog[data-load-mode="pageUpdate"] {
  border-radius: 45px;
  background-color: rgba(60, 60, 60, 0.7);
  box-shadow: none;
}
#loadingDialog[data-load-mode="pageUpdate"] .wrapper .icon-almobile-logo {
  color: #fff;
}
#loadingDialog[data-load-mode="pageUpdate"] .wrapper .loadingContainer .loadingText {
  color: white;
  font-weight: 600;
}
#loadingDialog[data-load-mode="quick-load"] {
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0);
}
#loadingDialog[data-load-mode="quick-load"] .loading {
  width: 96px;
  height: 96px;
}
#loadingDialog[data-load-mode="quick-load"] .loading div {
  border-width: 6px;
  border-color: #fff transparent transparent transparent;
}
.panel {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(0, 0);
  height: 100%;
  width: 100%;
  z-index: 20;
  overflow: hidden;
  background-color: var(--light-blue-to-black);
}
.panel .p-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  background-color: var(--dark-blue-to-dark-grey);
  color: #fff;
}
.panel .p-header .closeButton {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.panel .p-header .closeButton .k-icon {
  flex-shrink: 0;
}
.panel .p-header .closeButton .k-icon:before {
  width: 100%;
}
.panel .p-header .closeButton .icon-left-arrow {
  font-size: 44px;
}
@media (max-width: 480px) {
  .panel .p-header .closeButton .icon-left-arrow {
    font-size: 35px;
  }
}
.panel .p-header .closeButton .icon-almobile-logo {
  padding: 5px;
  font-size: 64px;
}
@media (max-width: 480px) {
  .panel .p-header .closeButton .icon-almobile-logo {
    font-size: 48px;
  }
}
.panel .p-header .closeButton .icon-left-arrow {
  font-size: 35px;
}
.panel .p-header .closeButton .icon-almobile-logo {
  font-size: 48px;
}
.panel .p-header .title {
  margin-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 30px;
  font-weight: 300;
}
.panel .p-header-button {
  margin-left: auto;
}
@supports (padding: max(0px)) {
  .panel .p-header {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
}
.panel .editButton {
  width: 100%;
  border-radius: 0.4rem;
  padding: 5px 0;
  border: 1px solid var(--border-color);
  font-size: 48px;
  background-color: var(--light-grey-to-dark-grey);
  color: #fff;
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
.panel .editButton + .editButton {
  margin-left: 10px;
}
.panel .deleteButton {
  border-color: #ce4242;
  background-color: #ce4242;
}
.panel .saveButton {
  border-color: #479e45;
  background-color: #479e45;
}
.panel .lockedButton {
  border-color: #444444;
  background-color: #444444;
}
.panel .editButtons {
  position: absolute;
  z-index: 2;
  bottom: env(safe-area-inset-bottom);
  left: 50%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 0.4rem;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  transform: translateX(-50%);
  overflow: hidden;
}
.panel .contentWrapper {
  transform: translate3d(0, 0, 0);
}
.panel .content {
  position: relative;
  overflow: hidden;
}
.panel.tablet,
.panel.mobile {
  margin: auto;
  border-radius: 0.4rem;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: 5px 5px 15px -2px var(--box-shadow-color);
}
.panel.tablet {
  max-width: 1024px;
}
@media (max-width: 1024px) {
  .panel.tablet {
    border-radius: 0;
  }
}
.panel.mobile {
  max-width: 480px;
}
@media (max-width: 480px) {
  .panel.mobile {
    border-radius: 0;
  }
}
.QuantityCollectionForm {
  width: 100%;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  overflow: hidden;
}
.QuantityCollectionForm input,
.QuantityCollectionForm .k-input-value-text {
  font-size: 25px;
  text-indent: 0;
  color: #444444;
}
.QuantityCollectionForm .k-input-inner {
  padding: 0;
}
.QuantityCollectionForm .k-numerictextbox,
.QuantityCollectionForm .k-dropdownlist {
  padding: 5px 10px;
}
.QuantityCollectionForm .k-numerictextbox.k-disabled,
.QuantityCollectionForm .k-dropdownlist.k-disabled {
  opacity: 1;
  border-color: #E5E5E5;
  background-color: #E5E5E5;
  color: #444444;
}
.QuantityCollectionForm .k-numerictextbox,
.QuantityCollectionForm .k-dropdownlist,
.QuantityCollectionForm .k-popup {
  border: 1px solid #AAAAAA;
}
.QuantityCollectionForm .k-numerictextbox {
  border-radius: 0.4rem;
}
.QuantityCollectionForm .k-popup.k-state-border-up {
  border-top: none;
}
.QuantityCollectionForm .deleteButton {
  background-color: #ce4242;
  color: #fff;
}
.QuantityCollectionForm .saveButton {
  background-color: #479e45;
  color: #fff;
}
.QuantityCollectionForm .text,
.QuantityCollectionForm .label {
  color: #444444;
}
.QuantityCollectionForm .label {
  margin-bottom: 5px;
}
.QuantityCollectionForm .text_header {
  padding: 10px;
}
.QuantityCollectionForm .text_header .icon-quantity {
  margin-right: 10px;
  color: #4187d8;
}
.QuantityCollectionForm .laborTypeContainer {
  position: relative;
}
.QuantityCollectionForm > .wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
}
.QuantityCollectionForm > .wrapper_editButtons {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.QuantityCollectionForm > .wrapper_editButtons .k-button {
  width: 100%;
  border-radius: 0.4rem;
  padding: 5px 0;
  font-size: 32px;
}
.QuantityCollectionForm > .wrapper_editButtons .k-button.k-disabled {
  opacity: 1;
  border-color: #E5E5E5;
  background-color: #E5E5E5;
  color: #444444;
}
.QuantityCollectionForm > .wrapper_editButtons .k-button + .k-button {
  margin-left: 10px;
}
.SignaturePanel .p-header-button {
  font-size: 38px;
}
.SignaturePanel .k-i-check {
  font-size: 24px;
  color: #479e45;
}
.SignaturePanel .asterisk {
  color: #ce4242;
}
.SignaturePanel .text {
  font-size: 25px;
  color: var(--invert-text-color);
}
.SignaturePanel .text_header {
  margin-bottom: 10px;
  font-weight: 600;
}
.SignaturePanel .approvalCounter .text:not(:first-of-type) {
  margin-left: 5px;
}
.SignaturePanel .signatureHours {
  min-width: 120px;
  padding: 10px;
  border: 1px solid #AAAAAA;
  border-radius: 0.4rem;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  background-color: var(--light-grey-to-white);
  color: #444444;
}
.SignaturePanel .signatureHours.text,
.SignaturePanel .signatureHours .text {
  font-weight: 600;
  color: inherit;
}
.SignaturePanel .info {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}
.SignaturePanel .info-hours {
  color: var(--invert-text-color);
}
.SignaturePanel .info.hoursSummary {
  padding-left: 5px;
  padding-right: 5px;
}
.SignaturePanel .info.hoursSummary .icon-equipment {
  position: absolute;
  top: 0;
  left: 10px;
  font-size: 20px;
  color: var(--dark-grey-to-light-grey);
}
.SignaturePanel .info.hoursSummary .hoursType {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 5px;
}
.SignaturePanel .info.hoursSummary .hoursType-text,
.SignaturePanel .info.hoursSummary .hoursType-hours {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.SignaturePanel .info.hoursSummary .hoursType-text {
  margin: 0 0 10px 0;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 0.4rem;
  background-color: #AAAAAA;
  font-weight: 500;
  color: #fff;
}
.SignaturePanel .info.hoursSummary .hoursType[spot="1"] .hoursType-text {
  background-color: #1e5594;
}
.SignaturePanel .info.hoursSummary .hoursType[spot="2"] .hoursType-text {
  background-color: #479e45;
}
.SignaturePanel .info.hoursSummary .hoursType[spot="3"] .hoursType-text {
  background-color: #ce4242;
}
.SignaturePanel .info.hoursSummary .hoursType + .hoursType {
  border-left: 1px solid #E5E5E5;
}
.SignaturePanel .info.hoursSummary_eq .hoursType {
  margin-top: 15px;
}
.SignaturePanel .info.approved {
  opacity: 0.7;
}
.SignaturePanel .info_clear {
  padding-bottom: 0;
}
.SignaturePanel .detailBlock {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.SignaturePanel .detailBlock-code {
  font-size: 20px;
}
.SignaturePanel .detailBlock-name {
  font-size: 32px;
}
.SignaturePanel .section {
  position: relative;
  overflow: hidden;
}
.SignaturePanel .section-wrapper {
  position: relative;
  overflow: hidden;
}
.SignaturePanel .section_date {
  background-color: #1e5594;
}
.SignaturePanel .section_date .text {
  color: #fff;
}
.SignaturePanel .section_details {
  margin-bottom: 10px;
}
.SignaturePanel .section_details .info {
  background-color: var(--invert-background-color);
}
.SignaturePanel .section_details .info-approvee {
  padding: 5px 10px;
  border-top: 1px solid var(--light-blue-to-black);
  background-color: var(--light-grey-to-medium-grey);
}
.SignaturePanel .section_details .info-approvee .approvee {
  display: flex;
  flex-direction: column;
}
.SignaturePanel .section_details .info-approvee .approvee .text {
  font-size: 20px;
  font-weight: 600;
}
.SignaturePanel .section_details .info-approvee .approvee .text_empID {
  font-size: 18px;
  font-weight: 300;
  color: #4187d8;
}
.SignaturePanel .section_timeDetail {
  max-height: 300px;
}
.SignaturePanel .section_timeDetail .k-i-check {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  background-color: #E5E5E5;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.SignaturePanel .section_timeDetail .k-i-check:before {
  margin-top: 5px;
  margin-left: 20px;
}
.SignaturePanel .section_timeDetail .text {
  font-size: 22px;
  color: #444444;
}
.SignaturePanel .section_timeDetail .text:not(:last-of-type) {
  margin-bottom: 5px;
}
.SignaturePanel .section_timeDetail .text.detailBlock-code {
  font-size: 20px;
  margin-bottom: 10px;
}
.SignaturePanel .section_timeDetail .recordEmployee {
  font-weight: 600;
}
.SignaturePanel .section_timeDetail .recordMemo {
  color: #4187d8;
}
.SignaturePanel .section_timeDetail .detailBlock {
  width: 100%;
}
.SignaturePanel .section_timeDetail .card {
  background-color: #fff;
}
.SignaturePanel .section_timeDetail:not(.active) {
  border-top: none;
}
.SignaturePanel .section_memo .detailBlock {
  align-items: flex-start;
  width: 100%;
}
.SignaturePanel .section_memo .detailBlock .memo {
  width: 100%;
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
.SignaturePanel .section_extras .text_header {
  margin-bottom: 0;
}
.SignaturePanel .section_extras .card {
  width: calc(100% - (10px * 2));
}
.SignaturePanel .section_prompt .text_header {
  margin-bottom: 0;
}
.SignaturePanel .section_prompt .prompt {
  flex-direction: row;
  justify-content: flex-start;
  font-size: 25px;
  text-align: left;
}
.SignaturePanel .section_prompt .prompt .k-icon {
  padding-right: 5px;
  font-size: 48px;
}
.SignaturePanel .section_prompt .prompt .k-i-check-circle {
  color: #4187d8;
}
.SignaturePanel .section_prompt .prompt .text {
  white-space: normal;
}
.SignaturePanel .section_prompt .info {
  justify-content: flex-start;
}
.SignaturePanel .section_signature .signatureToggle {
  justify-content: flex-start;
  width: 100%;
  padding: 10px;
  background-color: #479e45;
  color: #fff;
}
.SignaturePanel .section_signature .signatureToggle .text {
  text-align: left;
  color: #fff;
}
.SignaturePanel .section_signature .signatureToggle .arrowIcons {
  position: relative;
  height: 30px;
  width: 30px;
  margin: 0 0 0 auto;
  font-size: 25px;
  font-weight: 600;
}
.SignaturePanel .section_signature .signatureToggle .arrowIcons .icon-arrow-angled {
  position: absolute;
  height: 12px;
  width: 25px;
  transition: all 0.25s ease-in;
}
.SignaturePanel .section_signature .signatureToggle .arrowIcons .icon-arrow-angled:first-of-type {
  top: 0;
  right: -12px;
  transform: rotate(180deg);
}
.SignaturePanel .section_signature .signatureToggle .arrowIcons .icon-arrow-angled:last-of-type {
  bottom: 0;
  left: -12px;
  transform: rotate(0deg);
}
.SignaturePanel .section_signature .signatureToggle.collapsed .icon-arrow-angled:first-of-type {
  right: 0px;
  transform: rotate(0deg);
}
.SignaturePanel .section_signature .signatureToggle.collapsed .icon-arrow-angled:last-of-type {
  left: 0px;
  transform: rotate(180deg);
}
.SignaturePanel .section_signature .signatureVerbiage {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  max-height: 120px;
  padding: 0;
}
.SignaturePanel .section_signature .signatureVerbiage .text {
  width: 100%;
  padding: 10px;
  font-size: 18px;
  line-height: 1.3em;
}
.SignaturePanel .section_signature .clearButton {
  margin-left: auto;
  margin-right: 10px;
  font-size: 25px;
  color: var(--invert-text-color);
}
.SignaturePanel .section_signature .signaturePad {
  flex-direction: column;
  height: 150px;
  width: calc(100% - 20px);
  margin: 10px;
  padding: 0;
  border: 2px dashed var(--border-color);
  border-radius: 0.4rem;
}
.SignaturePanel .section_signature .signaturePad .pad {
  cursor: crosshair;
}
.SignaturePanel .section_signature .signatureControls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.SignaturePanel .section_signature .signatureControls-button {
  min-width: 200px;
  padding: 10px;
  border: 1px solid #AAAAAA;
  border-radius: 0.4rem;
  background-color: var(--light-grey-to-white);
  color: #444444;
}
.SignaturePanel .section_signature .signatureControls-button .text {
  color: inherit;
}
.SignaturePanel .section_signature .signatureControls-button.approve {
  border: none;
  background-color: #479e45;
}
.SignaturePanel .section_signature .signatureControls-button.approve .text {
  color: #fff;
}
.SignaturePanel .section_signature .signaturePadWrapper {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}
.SignaturePanel .splashScreen {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--invert-background-color);
}
.SignaturePanel .splashScreen .k-i-check {
  font-size: 48px;
}
.SignaturePanel .splashScreen .text {
  text-align: center;
}
.SignaturePanel .splashScreen .strong {
  font-size: 32px;
}
.SignaturePanel .splashScreen .detailBlock {
  justify-content: center;
  height: 90%;
  padding: 0 10px;
}
.SignaturePanel .contentWrapper {
  padding-bottom: var(--safe-area-bottom);
}
#videoWindow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
#videoWindow #videoClose {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: transparent;
}
#videoWindow #videoClose .k-icon {
  font-size: 40px;
  color: #E5E5E5;
}
#videoWindow #videoArea {
  width: 90%;
  height: 60%;
  margin: auto;
}
#videoWindow #videoArea .k-draghandle,
#videoWindow #videoArea .k-slider-selection {
  border-color: #4187d8;
  background-color: #4187d8;
}
.WorkforceCalculatorPanel .entryContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  background-color: #fff;
  color: #444444;
  transition: all 250ms ease-out;
}
.WorkforceCalculatorPanel .entryContainer .k-numerictextbox {
  width: 100%;
  padding: 0;
  border: none;
  color: inherit;
}
.WorkforceCalculatorPanel .entryContainer .k-numerictextbox .k-input-inner {
  padding: 0 0 0 10px;
}
.WorkforceCalculatorPanel .entryContainer .k-numerictextbox .inputEntry {
  font-size: 25px;
}
.WorkforceCalculatorPanel .entryContainer .calculateButton {
  font-size: 48px;
  color: inherit;
}
.WorkforceCalculatorPanel .entryContainer.calculated {
  background-color: #e9f1fb;
  color: #4187d8;
}
.WorkforceCalculatorPanel .entryContainer.error {
  background-color: #f0c6c6;
  color: #ce4242;
}
.WorkforceCalculatorPanel .wrapper .label {
  margin-bottom: 5px;
}
.WorkforceCalculatorPanel .wrapper .resetButton {
  width: 100%;
  margin-top: 20px;
  padding: 10px 0;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 25px;
  background-color: var(--light-grey-to-dark-grey);
  color: var(--invert-text-color);
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
.WorkforceCalculatorPanel .wrapper + .wrapper {
  margin-top: 10px;
}
.WorkforceCalculatorPanel .calculatorContainer {
  padding: 10px;
}
.WorkOrderPanel .section-header {
  display: flex;
  flex-shrink: 0;
  width: 100%;
  padding: 10px;
  font-size: 25px;
  background-color: var(--dark-blue-to-medium-blue);
  color: #fff;
}
.WorkOrderPanel .section-header .collapseIcons {
  position: relative;
  height: 30px;
  width: 30px;
  margin: 0 0 0 auto;
  overflow: visible;
  font-size: 25px;
  font-weight: 600;
}
.WorkOrderPanel .section-header .collapseIcons .icon-arrow-angled {
  position: absolute;
  height: 12px;
  width: 25px;
  transition: all 0.25s ease-in;
}
.WorkOrderPanel .section-header .collapseIcons .icon-arrow-angled:first-of-type {
  top: 0;
  right: -12px;
  transform: rotate(180deg);
}
.WorkOrderPanel .section-header .collapseIcons .icon-arrow-angled:last-of-type {
  bottom: 0;
  left: -12px;
  transform: rotate(0deg);
}
.WorkOrderPanel .section-header.collapsed .icon-arrow-angled:first-of-type {
  right: 0px;
  transform: rotate(0deg);
}
.WorkOrderPanel .section-header.collapsed .icon-arrow-angled:last-of-type {
  left: 0px;
  transform: rotate(180deg);
}
.WorkOrderPanel .field {
  padding: 10px;
  font-size: 25px;
  color: var(--invert-text-color);
}
.WorkOrderPanel .field-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 5px;
}
.WorkOrderPanel .field-text .asterisk {
  color: #ce4242;
}
.WorkOrderPanel .field-value {
  border: 2px solid #E5E5E5;
  border-radius: 0.4rem;
  overflow: hidden;
}
.WorkOrderPanel .field-value-checkbox {
  border-color: transparent;
}
.WorkOrderPanel .field-value-checkbox .checkbox {
  width: 40px;
  height: 40px;
}
.WorkOrderPanel .field-value-checkbox .checkbox:before {
  width: 30px;
  height: 30px;
  font-size: 30px;
}
.WorkOrderPanel .field .memo {
  border: none;
  border-radius: 0;
}
.WorkOrderPanel .field .dateSelector {
  width: 100%;
  padding: 0;
  border-radius: 0;
  background-color: inherit;
}
.WorkOrderPanel .field .dateSelector .currentDate {
  display: block;
  width: 100%;
  border: none;
  border-radius: inherit;
}
.WorkOrderPanel .field span.number-input {
  width: 100%;
  padding: 5px 10px;
  border: none;
  background-color: #fff;
}
.WorkOrderPanel .field span.number-input .k-input-inner {
  padding: 0;
  color: #444444;
}
.WorkOrderPanel .field-disabled {
  display: none !important;
  pointer-events: none !important;
}
.WorkOrderPanel .wo-number .field-value {
  border: none;
}
.WorkOrderPanel .wo-number .k-input-inner {
  padding: 5px 10px;
}
.WorkOrderPanel .wo-number.k-disabled {
  opacity: 1;
  border-color: var(--light-grey-to-dark-grey);
  background-color: var(--light-grey-to-dark-grey);
  color: var(--dark-grey-to-medium-grey);
}
.WorkOrderPanel .wo-number.k-disabled .k-input-button {
  display: none;
}
.WorkOrderPanel .wo-number.k-state-border-down {
  border-width: 2px !important;
}
.WorkOrderPanel .wo-number-container {
  position: relative;
}
.WorkOrderPanel .wo-number-container :is(.field-text, .field-value) {
  font-size: 25px;
}
.WorkOrderPanel .wo-number-container .field-value {
  border-color: var(--light-grey-to-dark-grey);
}
.WorkOrderPanel .wo-number-container .field-text {
  color: var(--invert-text-color);
}
.WorkOrderPanel .wo-number-container .k-list .k-list-item-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.WorkOrderPanel .wo-number-container .k-list .k-list-item-text .k-i-check {
  color: #479e45;
}
.WorkOrderPanel .wo-number-container .k-list .k-list-item-text:before {
  display: none;
}
.WorkOrderPanel .attachments-button {
  width: 100%;
  padding: 16.5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 25px;
  background-color: #fff;
  color: #444444;
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
.WorkOrderPanel .attachments-button .icon-attachment {
  color: var(--dark-blue-to-medium-blue);
}
.WorkOrderPanel .attachments-button .label.k-button-text {
  margin-left: 10px;
  font-size: inherit;
  font-weight: 500;
  color: inherit;
}
.WorkOrderPanel .attachments-button-wrapper {
  position: absolute;
  bottom: 90px;
  width: 100%;
  padding: 10px 10px env(safe-area-inset-bottom);
  box-sizing: border-box;
  text-align: center;
}
.WorkOrderPanel .workOrder-section {
  display: flex;
  flex-direction: column;
  margin: 10px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 0.4rem;
  background-color: var(--white-to-dark-grey);
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
  margin: 0;
  margin-top: 10px;
}
.WorkOrderPanel .workOrder-section.k-button {
  width: calc(100% - (10px * 2));
}
.WorkOrderPanel .contentWrapper {
  padding: 10px;
}
/* Pages */
#EmployeeListPage #header .headerContainer #pageName {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 10px;
  font-size: 20px;
}
#EmployeeListPage #header .headerContainer #pageName #headerTitle {
  margin-right: 10px;
  white-space: nowrap;
}
#EmployeeListPage #header .headerContainer #pageName #hoursShown {
  margin-left: 10px;
  white-space: nowrap;
}
#EmployeeListPage #header #crewEntryButton.k-disabled {
  display: none;
}
#EmployeeListPage .groupContainer {
  background-color: var(--light-grey-to-black);
  width: 100%;
  padding: 10px 0;
}
#EmployeeListPage .groupContainer #groupButton {
  margin-left: 10px;
  color: var(--dark-blue-to-medium-blue);
  font-weight: 300;
  font-size: 30px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
#EmployeeListPage #employeeTabStrip .k-tabstrip-items {
  background-color: var(--light-grey-to-black);
}
#EmployeeListPage #employeeTabStrip .k-tabstrip-items .tabContainer {
  min-width: 40%;
}
#EmployeeListPage #employeeTabStrip .k-tabstrip-items .tabContainer .label,
#EmployeeListPage #employeeTabStrip .k-tabstrip-items .tabContainer .hours {
  width: 100%;
  text-align: center;
  color: inherit;
}
#EmployeeListPage #employeeTabStrip .employee {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px 0;
  padding: 10px;
  transition: 0.4s;
}
#EmployeeListPage #employeeTabStrip .employee .empIcon {
  height: 48px;
  width: 48px;
  flex-shrink: 0;
  margin-right: 10px;
  text-align: center;
  font-weight: 300;
}
#EmployeeListPage #employeeTabStrip .employee .empIcon .employeeInitials {
  width: 100%;
  line-height: 48px;
  border-radius: 50%;
  background-color: #AAAAAA;
  color: white;
  font-size: 25px;
}
#EmployeeListPage #employeeTabStrip .employee .empIcon .icon-equipment {
  color: #AAAAAA;
  font-size: 48px;
}
#EmployeeListPage #employeeTabStrip .employee .employeeInfo {
  display: block;
  flex-grow: 1;
  text-align: left;
  color: var(--invert-text-color);
}
#EmployeeListPage #employeeTabStrip .employee .employeeInfo .employeeName {
  font-weight: 600;
  font-size: 28px;
}
#EmployeeListPage #employeeTabStrip .employee .employeeDetail {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 100px;
  margin-left: auto;
  border-radius: 0.4rem;
  background-color: #E5E5E5;
}
#EmployeeListPage #employeeTabStrip .employee .employeeDetail .employeeHours {
  padding: 5px 0 0;
  color: #444444;
  font-size: 28px;
  font-weight: 600;
}
#EmployeeListPage #employeeTabStrip .employee .employeeDetail .employeeProgress {
  width: 100%;
  background-color: #AAAAAA;
}
#EmployeeListPage #employeeTabStrip .employee .employeeDetail .employeeProgress .fill {
  height: 10px;
  background-color: #4187d8;
  transition: width 0.3s ease-out;
}
#EmployeeListPage #employeeTabStrip .employee.filtered {
  display: none;
}
#EmployeeListPage #content {
  background-color: var(--light-blue-to-black);
}
.body-container[data-language="en-US"] #EmployeeListPage #header #pageName {
  flex-wrap: wrap;
  font-size: 25px;
}
#AttendanceTrackingPage .section {
  width: 100%;
  padding: 0.5rem 37.5px;
  box-sizing: border-box;
}
#AttendanceTrackingPage .group-header-button {
  font-size: 30px;
  font-weight: 300;
  color: var(--dark-blue-to-medium-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
#AttendanceTrackingPage .group-header-section {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#AttendanceTrackingPage .attendance-counter-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 0.4rem;
  margin-left: auto;
  margin-right: 10px;
  /* Align with attendance-info box */
  background-color: #b9dfb9;
}
#AttendanceTrackingPage .attendance-counter-container .text {
  width: auto;
  font-weight: 600;
  color: #444444;
}
#AttendanceTrackingPage .employee-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  background-color: var(--invert-background-color);
  opacity: 0.5;
  transition: opacity 200ms ease-out;
}
#AttendanceTrackingPage .employee-search-input {
  width: calc(100% - 20px);
  border: none;
  outline: none;
  font-size: 25px;
  background-color: inherit;
  color: var(--invert-text-color);
}
#AttendanceTrackingPage .employee-search-section {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#AttendanceTrackingPage .employee-search-pincode {
  padding: 0 10px 0 20px;
  font-size: 30px;
  color: var(--invert-text-color);
}
#AttendanceTrackingPage .employee-search .clearButton {
  font-size: 20px;
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
  color: var(--invert-text-color);
}
#AttendanceTrackingPage .employee-search .clearButton.visible {
  opacity: 1;
  pointer-events: auto;
}
#AttendanceTrackingPage .employee-search.focused {
  opacity: 1;
  border: 1px solid rgba(28, 78, 137, 0.7);
  transition: box-shadow 400ms ease-out;
  box-shadow: 0 8px 4px -2px rgba(28, 78, 137, 0.7);
}
#AttendanceTrackingPage .attendance-info .text {
  font-weight: 600;
  text-transform: uppercase;
  color: #444444;
}
#AttendanceTrackingPage .attendance-info .text:not(.text_small) {
  font-size: 28px;
}
#AttendanceTrackingPage .attendance-info-container {
  margin-left: auto;
  border-radius: 0.4rem;
  background-color: #E5E5E5;
}
#AttendanceTrackingPage .kiosk-checkin-container {
  background-color: #1e5594;
  text-align: left;
  width: 100%;
  padding: 10px;
  color: #fff;
  font-size: 20px;
  box-sizing: border-box;
}
#AttendanceTrackingPage .employee-detail-icon {
  flex-shrink: 0;
  height: 48px;
  width: 48px;
  line-height: 48px;
  margin-right: 10px;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
  background-color: #AAAAAA;
}
#AttendanceTrackingPage .employee-detail-icon .text {
  font-weight: 300;
  color: white;
}
#AttendanceTrackingPage .employee-detail-icon .template-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#AttendanceTrackingPage .employee-detail-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
}
#AttendanceTrackingPage .employee-detail-info .text:not(.text_empID) {
  font-size: 28px;
  font-weight: 600;
}
#AttendanceTrackingPage .employee-detail-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 0.4rem;
}
#AttendanceTrackingPage .attendance-section {
  position: relative;
  overflow: hidden;
  padding: 0;
}
#AttendanceTrackingPage .attendance-scroller {
  position: relative;
  margin: 0 37.5px;
  padding: 0.5rem 0;
}
#AttendanceTrackingPage .attendance-card {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
#AttendanceTrackingPage .attendance-card.kiosk {
  background-color: #1e5594;
}
#AttendanceTrackingPage .attendance-card .checked-in {
  background-color: #b9dfb9;
  color: #444444;
}
#AttendanceTrackingPage .attendance-card .checked-in .employee-detail-info .text:not(.text_empID) {
  color: inherit;
}
#AttendanceTrackingPage .attendance-info-container,
#AttendanceTrackingPage .attendance-counter-container,
#AttendanceTrackingPage .clock-time {
  min-width: 130px;
  padding: 10px;
  box-sizing: border-box;
}
#AttendanceTrackingPage .employee-pincode-section {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  background-color: var(--light-blue-to-black);
}
#AttendanceTrackingPage .employee-pincode-button {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15%;
  font-size: 8rem;
  border-radius: 0.4rem;
  background-color: var(--dark-blue-to-medium-blue);
  color: #fff;
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
#AttendanceTrackingPage .employee-pincode-button.k-disabled {
  background-color: var(--light-grey-to-medium-grey);
}
#AttendanceTrackingPage .admin-checkout-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 10px;
  font-size: 30px;
  border-radius: 0.4rem;
  background-color: transparent;
  color: var(--dark-grey-to-white);
}
#AttendanceTrackingPage #header .clock-time {
  display: flex;
  flex-direction: column;
  text-align: center;
}
#AttendanceTrackingPage #header .clock-time .text {
  color: #fff;
}
#AttendanceTrackingPage #header .clock-time .text:nth-of-type(2) {
  font-size: 30px;
}
#AttendanceTrackingPage #header .headerContainer {
  padding-right: 37.5px;
}
#AttendanceTrackingPage .load-marker {
  position: absolute;
  display: block;
  margin: 0;
}
#DailyDiary.EntryPage .errorLocation {
  color: #ce4242;
}
#DailyDiary.EntryPage .weatherLocation {
  margin-bottom: 1em;
  font-size: 40px;
  font-weight: 300;
}
#DailyDiary.EntryPage .weatherDescription {
  text-transform: capitalize;
  font-weight: 600;
}
#DailyDiary.EntryPage .weatherDetails .detail {
  padding: 5px 0;
}
#DailyDiary.EntryPage .weatherWind .label {
  margin-right: 5px;
}
#DailyDiary.EntryPage .weatherData {
  display: flex;
  flex-direction: column;
}
#DailyDiary.EntryPage .weatherTemperature {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
  text-align: center;
  font-size: 128px;
  font-weight: 300;
}
#DailyDiary.EntryPage .weatherTemperature .data,
#DailyDiary.EntryPage .weatherTemperature sup {
  height: 100%;
}
#DailyDiary.EntryPage .weatherTemperature sup {
  display: inline-block;
  margin-top: 10px;
  font-size: 25px;
  color: var(--dark-blue-to-medium-blue);
}
@media (max-width: 480px) {
  #DailyDiary.EntryPage .weatherTemperature {
    font-size: 96px;
  }
}
#DailyDiary.EntryPage .weatherIcon {
  align-self: flex-start;
  font-size: 64px;
  color: var(--invert-text-color);
}
#DailyDiary.EntryPage .weatherIcon .k-icon {
  vertical-align: top;
}
#DailyDiary.EntryPage .weatherReport {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin-left: 0;
  margin-right: 0;
  background-color: inherit;
}
#DailyDiary.EntryPage .wrapper:not(.distributionSelectionWrapper) {
  padding: 10px 37.5px;
}
#DailyDiary.EntryPage .wrapper:not(.distributionSelectionWrapper) .label {
  margin-bottom: 5px;
}
#DailyDiary.EntryPage .wrapper:not(.distributionSelectionWrapper).moduleWrapper .k-sprite,
#DailyDiary.EntryPage .wrapper:not(.distributionSelectionWrapper).moduleWrapper .k-icon {
  width: 40px;
  margin-right: 10px;
  margin-left: -5px;
  /*Offset width (40px) with the font size (25px) and left padding (10px) */
  color: #4187d8;
}
#DailyDiary.EntryPage .wrapper:not(.distributionSelectionWrapper).moduleWrapper .k-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 25px;
  background-color: #fff;
  color: #444444;
}
#DailyDiary.EntryPage .wrapper:not(.distributionSelectionWrapper).moduleWrapper .k-button .label {
  margin: 0;
  color: #444444;
}
#DailyDiary.EntryPage .wrapper:not(.distributionSelectionWrapper).moduleWrapper .module {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
#DailyDiary.EntryPage .wrapper:not(.distributionSelectionWrapper).moduleWrapper .module:not(.ui-disabled) + .module:not(.ui-disabled) {
  margin-top: 1rem;
}
#DailyDiary.EntryPage .contentScroller {
  max-width: 1024px;
  margin: 0 auto;
}
#DailyDiary.EntryPage .editButton {
  display: block;
  padding: 5px 0;
  height: 48px;
  width: 100%;
  box-sizing: content-box;
  border: none;
  font-size: 48px;
  color: #fff;
}
#DailyDiary.EntryPage .editButton .k-icon {
  vertical-align: initial;
}
#DailyDiary.EntryPage .icon-locked {
  background-color: #444444;
}
#DailyDiary.EntryPage .saveButton {
  background-color: #479e45;
}
#DailyDiary.EntryPage .deleteButton {
  background-color: #ce4242;
}
#DailyDiary.EntryPage .editButtons {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 95%;
  margin: auto;
  border-radius: 0.4rem;
  overflow: hidden;
}
.DetailPage .searchWrapper {
  position: relative;
  margin: auto;
  padding: 10px 37.5px;
  background-color: inherit;
  text-align: center;
}
.DetailPage .searchWrapper #recordSearch {
  padding: 10px 0;
  border: none;
  border-radius: inherit;
  box-sizing: border-box;
  background-color: inherit;
  font-size: 25px;
  color: #252525;
}
.DetailPage .searchWrapper .k-clear-value {
  font-size: 25px;
  color: #444444;
}
.DetailPage .searchWrapper .k-autocomplete {
  width: 100%;
  margin: auto;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  box-shadow: none;
  background-color: #fff;
}
.DetailPage .searchWrapper .k-autocomplete.k-focus {
  border: 1px solid rgba(28, 78, 137, 0.7);
  transition: box-shadow 400ms ease-out;
  box-shadow: 0 8px 4px -2px rgba(28, 78, 137, 0.7);
  transform: translateY(-2px);
  transition: all 0.4s ease-out;
}
.DetailPage .noData {
  padding: 10px 37.5px;
}
.DetailPage .record-header {
  justify-content: flex-start;
  width: 100%;
  padding: 10px 37.5px;
  border-top: 1px solid var(--medium-grey-to-dark-grey);
  border-bottom: 1px solid var(--medium-grey-to-dark-grey);
  background-color: var(--light-grey-to-dark-grey);
  color: var(--medium-blue-to-white);
  font-size: 28px;
}
.DetailPage .record-header .date {
  font-weight: 600;
}
.DetailPage .record {
  display: block;
  width: 100%;
  background-color: var(--white-to-medium-grey);
}
.DetailPage .record .recordDetails {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 37.5px;
}
.DetailPage .record .recordDetails .recordOverview {
  text-align: left;
  color: var(--dark-grey-to-black);
}
.DetailPage .record .recordDetails .recordOverview .overview {
  display: flex;
  flex-flow: wrap row;
  align-items: center;
  font-size: 25px;
}
.DetailPage .record .recordDetails .recordOverview .overview + .overview {
  margin-top: 10px;
}
.DetailPage .record .recordDetails .recordOverview .recordCodes {
  font-size: 32px;
}
.DetailPage .record .recordDetails .recordOverview .recordTimes .divider {
  margin: 0 5px;
}
.DetailPage .record .recordDetails .recordOverview .recordMemo {
  color: var(--medium-blue-to-white);
}
.DetailPage .record .recordDetails .recordModules {
  margin-left: auto;
  border-radius: 0.4rem;
  background-color: var(--light-grey-to-dark-grey);
}
.DetailPage .record .recordDetails .recordModules [class^="icon-"] {
  margin: 10px auto auto auto;
}
.DetailPage .record .recordDetails .recordModules .icon-locked {
  color: #4187d8;
}
.DetailPage .record .recordDetails .recordModules .modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-content: flex-start;
  color: var(--invert-text-color);
  font-size: 25px;
}
.DetailPage .record .recordDetails .recordModules .wrapper {
  width: 150px;
  padding: 5px;
  margin: auto;
}
@media (max-width: 480px) {
  .DetailPage .record .recordDetails {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .DetailPage .record .recordDetails .recordModules {
    width: 100%;
    margin: 10px auto 0;
  }
  .DetailPage .record .recordDetails .recordModules [class^="icon-"] {
    display: flex;
    flex-flow: wrap row;
    margin: 5px;
  }
  .DetailPage .record .recordDetails .recordModules .modules {
    display: flex;
    flex-flow: wrap row;
  }
  .DetailPage .record .recordDetails .recordModules .wrapper {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: calc(100% - 20px);
    padding: 5px 10px;
  }
}
.DetailPage .record:not(.filter) ~ .record:not(.filter) {
  border-top: 2px solid #E5E5E5;
}
.DetailPage .record.selected {
  background-color: #ffe6a6;
  color: #444444;
}
.DetailPage .record.selected .recordDetails .recordOverview {
  color: #444444;
}
.DetailPage .record.filter {
  display: none;
}
.DetailPage .recordBar {
  overflow: hidden;
}
.DetailPage .recordBar.filter {
  display: none;
}
.DetailPage .recordBar[data-active="false"] + .recordBar {
  border-top: 1px solid var(--border-color);
}
.DetailPage #header #headerExtras {
  display: none;
}
.DetailPage #footer .editButton {
  position: absolute;
  right: 15px;
  bottom: 100px;
  height: 70px;
  width: 70px;
  opacity: 0;
  border-radius: 50%;
  box-shadow: 0px 5px 5px -2px var(--box-shadow-color);
  font-size: 40px;
  background-color: var(--light-grey-to-dark-grey);
  color: var(--invert-text-color);
}
.DetailPage #footer .editButton.toggled {
  background-color: #4187d8;
  color: #fff;
}
.DetailPage #footer .cancelButton {
  font-size: 30px;
}
.DetailPage #footer .deleteButton {
  background-color: #ce4242;
  color: #fff;
}
.DetailPage #footer .createButton {
  z-index: 1;
  opacity: 1;
  background-color: #479e45;
  color: #fff;
}
.DetailPage #footer .createButton.k-disabled {
  background-color: #444444;
}
.DetailPage #footer.footer_inset .editButton {
  bottom: calc(100px + var(--safe-area-bottom));
}
#GridPage #header .headerContainer #pageName {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 10px;
  font-size: 20px;
}
#GridPage #header .headerContainer #pageName #headerTitle {
  margin-right: 10px;
  white-space: nowrap;
}
#GridPage #header .headerContainer #pageName .gridView {
  margin-left: 10px;
  white-space: nowrap;
}
#GridPage #content .gridHeader {
  display: flex;
  flex-flow: wrap row;
  width: 100%;
  padding: 10px 0;
  margin-top: -10px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--light-grey-to-black);
}
#GridPage #content .gridHeader #groupButton {
  flex-direction: column;
  align-items: flex-start;
  height: 76px;
  width: 240px;
  padding: 5px 10px;
  margin: 10px 0 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 20px;
  text-align: left;
  background-color: #fff;
  color: #444444;
}
#GridPage #content .gridHeader #groupButton .label {
  margin-bottom: auto;
  color: #AAAAAA;
}
#GridPage #content .gridHeader #groupButton .data {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-size: 32px;
  text-overflow: ellipsis;
}
#GridPage #content .gridHeader .entryDates {
  display: grid;
  grid-template-columns: repeat(7, 72px);
  column-gap: 10px;
  margin: 10px 0 0 10px;
}
@media (max-width: 480px) {
  #GridPage #content .gridHeader .entryDates {
    grid-template-columns: repeat(7, 62px);
    column-gap: 5px;
  }
}
#GridPage #content .gridHeader .entryDates .dayButton {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.4rem;
  background-color: #fff;
}
#GridPage #content .gridHeader .entryDates .dayButton.closed,
#GridPage #content .gridHeader .entryDates .dayButton.locked {
  background-color: #AAAAAA;
  color: #fff;
}
#GridPage #content .gridHeader .entryDates .dayButton.closed .monthName,
#GridPage #content .gridHeader .entryDates .dayButton.locked .monthName {
  padding-right: 5px;
  text-align: right;
  background-color: #444444;
}
#GridPage #content .gridHeader .entryDates .dayButton.selected {
  background-color: #1e5594;
  color: #fff;
}
#GridPage #content .gridHeader .entryDates .dayButton .iconContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 40px solid #444444;
  border-right: 36px solid transparent;
  text-align: left;
  overflow: visible;
  background-color: transparent;
  filter: drop-shadow(0 1px 0 #252525);
}
@media (max-width: 480px) {
  #GridPage #content .gridHeader .entryDates .dayButton .iconContainer {
    border-right-width: 26px;
  }
}
#GridPage #content .gridHeader .entryDates .dayButton .iconContainer .icon {
  position: relative;
  top: -36px;
  left: 6px;
  font-size: 12px;
  color: #fff;
}
@media (max-width: 480px) {
  #GridPage #content .gridHeader .entryDates .dayButton .iconContainer .icon {
    left: 4px;
    font-size: 10px;
  }
}
#GridPage #content .gridHeader .entryDates .dayButton .monthName {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 20px;
  background-color: #1e5594;
  color: #fff;
}
#GridPage #content .gridHeader .entryDates .dayButton .dateDay {
  font-size: 36px;
  font-weight: 600;
}
#GridPage #content .gridHeader .entryDates .dayButton .dayName {
  font-size: 20px;
}
#GridPage #content .grid {
  position: relative;
  overflow: hidden;
}
#GridPage #content .grid .label,
#GridPage #content .grid .data {
  box-sizing: border-box;
}
#GridPage #content .grid .gridWrapper {
  position: relative;
  padding: 10px;
}
#GridPage #content .grid .gridWrapper .overlayContainer {
  position: absolute;
  z-index: 3;
  background-color: var(--light-blue-to-black);
}
#GridPage #content .grid .gridWrapper .overlayContainer.right {
  right: 10px;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 96px;
  width: 240px;
  box-sizing: border-box;
  border-top-left-radius: 0.4rem;
  border-bottom-left-radius: 0.4rem;
  box-shadow: 0 5px 4px 0 rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .timeBanner {
  height: 100%;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--medium-grey-to-dark-grey);
  border-radius: inherit;
  box-sizing: border-box;
  background-color: #fff;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .timeBanner .timeBannerWrapper {
  position: relative;
  height: 70px;
  width: 100%;
  border-radius: inherit;
  overflow: hidden;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .timeBanner .timeBannerWrapper .timeBannerSlider {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .timeBanner .timeBannerWrapper .timeBannerSlider .gridTimeButton {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  height: 100%;
  width: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
  font-size: 20px;
  text-align: left;
  background-color: #fff;
  color: #444444;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .timeBanner .timeBannerWrapper .timeBannerSlider .gridTimeButton .label {
  width: 100%;
  margin-bottom: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #AAAAAA;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .timeBanner .timeBannerWrapper .timeBannerSlider .gridTimeButton .data {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-size: 32px;
  text-overflow: ellipsis;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .timeBanner .timeBannerWrapper .timeBannerSlider .gridTimeButton.corporate .label {
  color: var(--dark-blue-to-medium-blue);
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .timeBanner .timeIndicators {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: calc(100% - 70px);
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .timeBanner .timeIndicators .bubble {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #E5E5E5;
  transition: background-color 0.2s;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .timeBanner .timeIndicators .bubble + .bubble {
  margin-left: 5px;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .timeBanner .timeIndicators .bubble.active {
  background-color: #4187d8;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .employeeDefaultsToggle {
  height: 100%;
  width: 64px;
  font-size: 32px;
  border: 1px solid var(--medium-grey-to-dark-grey);
  background-color: #1e5594;
  color: #fff;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .employeeDefaultsToggle.active .icon-left-arrow {
  transform: rotate(0deg);
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .employeeDefaultsToggle.k-disabled {
  display: none;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .employeeDefaultsToggle .icon-left-arrow {
  transform: rotate(180deg);
  transition: transform 250ms ease-in;
  font-weight: 600;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .gridTotalsBreakdownView {
  position: relative;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  padding: 10px;
  border-radius: inherit;
  border: 1px solid var(--medium-grey-to-dark-grey);
  background-color: #1e5594;
  color: #fff;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .gridTotalsBreakdownView .subLabel,
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .gridTotalsBreakdownView .label {
  width: 100%;
  text-align: left;
  align-self: flex-start;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .gridTotalsBreakdownView .subLabel {
  font-size: 20px;
  color: #E5E5E5;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .gridTotalsBreakdownView .label {
  margin: auto;
  font-size: 32px;
}
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .timeBanner,
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .employeeDefaultsToggle,
#GridPage #content .grid .gridWrapper .overlayContainer .cornerContainer .gridTotalsBreakdownView {
  flex-grow: 0;
  flex-shrink: 0;
}
#GridPage #content .grid .gridWrapper .overlayContainer .totalsHeader {
  height: 96px;
  width: 120px;
  margin-left: auto;
  padding: 0 10px;
  border-color: var(--border-color);
  border-top-right-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
  font-size: 32px;
  background-color: #1e5594;
  color: #fff;
  box-shadow: 0 5px 4px 0 rgba(0, 0, 0, 0.5);
  transition: background-color 250ms ease-in;
}
#GridPage #content .grid .gridWrapper .overlayContainer .totalsHeader .icon-left-arrow {
  font-weight: 600;
  font-size: 20px;
}
#GridPage #content .grid .gridWrapper .overlayContainer .totalsHeader .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#GridPage #content .grid .gridWrapper .gridTotalsOverlay {
  right: 130px;
  z-index: 2;
  overflow: hidden;
  background-color: transparent;
}
#GridPage #content .grid .gridWrapper .gridTable {
  height: 100%;
  background-color: transparent;
}
#GridPage #content .grid .gridWrapper .gridTable .topLeft {
  border-top-left-radius: 0.4rem;
}
#GridPage #content .grid .gridWrapper .gridTable .topRight {
  border-top-right-radius: 0.4rem;
}
#GridPage #content .grid .gridWrapper .gridTable .bottomLeft {
  border-bottom-left-radius: 0.4rem;
}
#GridPage #content .grid .gridWrapper .gridTable .bottomRight {
  border-bottom-right-radius: 0.4rem;
}
#GridPage #content .grid .gridWrapper .gridTable .cellHeader {
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 60px;
  width: 240px;
  padding: 0 10px;
  font-size: 28px;
  font-weight: 600;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: transparent;
  color: var(--invert-text-color);
}
#GridPage #content .grid .gridWrapper .gridTable .cellHeader .arrowIcons {
  position: relative;
  height: 28px;
  width: 28px;
  margin: 0 0 0 auto;
  font-weight: 600;
}
#GridPage #content .grid .gridWrapper .gridTable .cellHeader .arrowIcons .icon-arrow-angled {
  position: absolute;
  height: 14px;
  width: 28px;
  transition: all 0.25s ease-in;
}
#GridPage #content .grid .gridWrapper .gridTable .cellHeader .arrowIcons .icon-arrow-angled:first-of-type {
  top: 0;
  right: -14px;
  transform: rotate(180deg);
}
#GridPage #content .grid .gridWrapper .gridTable .cellHeader .arrowIcons .icon-arrow-angled:last-of-type {
  bottom: 0;
  left: -14px;
  transform: rotate(0deg);
}
#GridPage #content .grid .gridWrapper .gridTable .cellHeader.k-disabled {
  background-color: inherit;
}
#GridPage #content .grid .gridWrapper .gridTable .cellHeader .label {
  font-size: 28px;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell).collapsed .cellHeader .icon-arrow-angled:first-of-type {
  right: 0px;
  transform: rotate(0deg);
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell).collapsed .cellHeader .icon-arrow-angled:last-of-type {
  left: 0px;
  transform: rotate(180deg);
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .nestedContent {
  position: relative;
  overflow: hidden;
  width: 100%;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  height: 96px;
  width: 120px;
  padding: 5px 10px;
  box-sizing: border-box;
  border: 1px solid var(--medium-grey-to-dark-grey);
  background-color: #fff;
  color: #444444;
  transition: background-color 400ms ease-out;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.employee {
  z-index: 1;
  width: 240px;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.employee .label {
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.employee .data {
  text-align: left;
  color: #444444;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.default {
  padding: 0;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.default .data {
  font-size: 16px;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.default .data .code.disabled {
  opacity: 0.5;
  color: #f0c6c6;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.columnTotal {
  height: 60px;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--dark-grey-to-light-grey);
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.columnTotal .label,
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.columnTotal .data {
  font-size: 32px;
  color: var(--white-to-dark-grey);
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.total {
  align-items: center;
  justify-content: center;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.total .approval-status {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 18px;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.total .icon-activity-log {
  color: #479e45;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.total .icon-unapproved-status {
  color: #ce4242;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.total .metsDot {
  position: absolute;
  bottom: 5px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: #4187d8;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.disableMultiSelect,
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.k-disabled,
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell.disabled {
  background-color: #E5E5E5;
  opacity: 0.5;
  pointer-events: none;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .cell .data {
  width: 100%;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header-container,
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .gridColumnFooter,
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .gridTotalsBreakdownFooter {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .default,
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header-container,
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .dataHeader {
  box-shadow: 0 5px 4px 0 rgba(0, 0, 0, 0.5);
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header-container,
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .dataHeader {
  min-height: 96px;
  height: initial;
  padding: 0;
  margin-bottom: 9px;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header-container .label,
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .dataHeader .label {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  padding: 5px 0;
  border-bottom-right-radius: 0.4rem;
  font-size: 16px;
  font-weight: 600;
  background-color: var(--dark-grey-to-light-grey);
  color: var(--white-to-dark-grey);
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  height: 96px;
  width: 120px;
  padding: 5px 10px;
  box-sizing: border-box;
  border: 1px solid var(--medium-grey-to-dark-grey);
  background-color: #fff;
  color: #444444;
  transition: background-color 400ms ease-out;
  position: relative;
  background-color: inherit;
  color: inherit;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.employee {
  z-index: 1;
  width: 240px;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.employee .label {
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.employee .data {
  text-align: left;
  color: #444444;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.default {
  padding: 0;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.default .data {
  font-size: 16px;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.default .data .code.disabled {
  opacity: 0.5;
  color: #f0c6c6;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.columnTotal {
  height: 60px;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--dark-grey-to-light-grey);
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.columnTotal .label,
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.columnTotal .data {
  font-size: 32px;
  color: var(--white-to-dark-grey);
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.total {
  align-items: center;
  justify-content: center;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.total .approval-status {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 18px;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.total .icon-activity-log {
  color: #479e45;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.total .icon-unapproved-status {
  color: #ce4242;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.total .metsDot {
  position: absolute;
  bottom: 5px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: #4187d8;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.disableMultiSelect,
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.k-disabled,
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header.disabled {
  background-color: #E5E5E5;
  opacity: 0.5;
  pointer-events: none;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header .data {
  width: 100%;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header .data {
  line-height: 84px;
  font-size: 20px;
  text-align: center;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .attendance-header-container {
  overflow: hidden;
  background: #4187d8;
  background: linear-gradient(133deg, #4187d8 30%, #1e5594 75%);
  color: #fff;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .dataHeader .dataDescriptions,
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .dataHeader .data {
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .dataHeader .data {
  height: 94px;
  /* subtract from cell top and bottom border */
  flex-shrink: 0;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .dataHeader .data .code {
  display: inline-block;
  margin: 2.5px;
  font-size: 16px;
  vertical-align: top;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .dataHeader .data .code.invalid {
  color: #ce4242;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .dataHeader .dataDescriptions {
  width: 100%;
  padding: 5px;
  border-top: 1px solid var(--medium-grey-to-dark-grey);
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .dataHeader .dataDescriptions .description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .dataHeader .dataDescriptions .description + .description {
  padding-top: 5px;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-header .dataHeader.mets .label {
  background-color: #4187d8;
  color: #fff;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .gridColumnHeader .default {
  height: 96px;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .gridColumnHeader .default .label {
  width: 100%;
  padding: 5px;
  font-size: 16px;
  font-weight: 600;
  background-color: var(--dark-grey-to-light-grey);
  color: var(--white-to-dark-grey);
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .gridColumnHeader .default .data {
  display: block;
  margin: auto;
  font-size: 32px;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .gridTotalsBreakdownHeader .dataHeader {
  position: relative;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .gridTotalsBreakdownHeader .dataHeader .label {
  text-align: center;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .gridTotalsBreakdownHeader .dataHeader .data {
  display: block;
  line-height: 96px;
  font-size: 32px;
  text-align: center;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .gridTotalsBreakdownHeader .dataHeader .data_codes {
  line-height: 1;
  font-size: 16px;
  text-align: left;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .gridTotalsBreakdownHeader .dataHeader .data_codes:before {
  display: inline-block;
  content: '';
  height: 26px;
  width: 60px;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-footer-container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-footer-container .gridColumnFooter {
  position: relative;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell) .column-footer-container .attendance-cell-container {
  overflow: hidden;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell).fixed-row {
  left: 240px;
  z-index: 1;
  overflow: hidden;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell).totals-row {
  z-index: 2;
  /* Needs to be greater than totals table layering */
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell).totals-row .data {
  font-weight: 600;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell).totals-row .cell .disabled {
  opacity: 1;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell).totals-row .cell.employee .label {
  overflow: visible;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell).totals-row .cell.columnTotal {
  height: 45px;
}
#GridPage #content .grid .gridWrapper .gridTable .row:not(.cell).totals-row .cell.totalsTable-cell {
  position: absolute;
  right: 0;
}
#GridPage #content .grid .gridWrapper .gridTable .totals-row,
#GridPage #content .grid .gridWrapper .gridTable .fixed-row {
  position: absolute;
  left: 0;
  align-items: flex-start;
}
#GridPage #content .grid .gridWrapper .employeeTable {
  position: relative;
  z-index: 1;
}
#GridPage #content .grid .gridWrapper .employeeTable .cell .data {
  display: -moz-box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  font-size: 32px;
  overflow: hidden;
}
#GridPage #content .grid .gridWrapper .dataTable {
  position: relative;
  top: 0;
  height: auto;
  width: auto;
}
#GridPage #content .grid .gridWrapper .dataTable .row .cell .k-i-check {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 25px;
  color: transparent;
}
#GridPage #content .grid .gridWrapper .dataTable .row .cell .data {
  font-weight: 600;
}
#GridPage #content .grid .gridWrapper .dataTable .row .cell.multiSelect {
  background-color: #4187d8;
  color: #fff;
}
#GridPage #content .grid .gridWrapper .dataTable .row .cell.multiSelect .k-i-check {
  color: #fff;
}
#GridPage #content .grid .gridWrapper .dataTable .dataCell .data {
  margin: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 32px;
  text-align: center;
}
#GridPage #content .grid .gridWrapper .dataTable .dataCell.hasModuleData::before {
  position: absolute;
  display: block;
  opacity: 1;
  top: 0;
  left: initial;
  right: 0;
  content: "";
  width: 30%;
  height: 30%;
  background-color: #1e5594;
  clip-path: polygon(20% 0, 100% 100%, 100% 0);
}
#GridPage #content .grid .gridWrapper .dataTable .attendance-cell-container {
  overflow: hidden;
}
#GridPage #content .grid .gridWrapper .dataTable .attendance-cell-container .cell.dataCell {
  height: 100%;
}
#GridPage #content .grid .gridWrapper .totalsTable {
  position: relative;
  z-index: 2;
  top: 0;
  right: 0;
}
#GridPage #content .grid .gridWrapper .totalsTable .cellHeader {
  width: 120px;
}
#GridPage #content .grid .gridWrapper .totalsTable .cell .data {
  margin: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 32px;
  font-weight: 600;
}
#GridPage #content .grid .gridWrapper .mainTable.gridTable {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 0.4rem;
}
#GridPage #content .grid .gridWrapper .mainTable.gridTable > .row {
  align-items: flex-start;
  width: 100%;
}
#GridPage #content .grid .gridWrapper .mainTable.gridTable .row .gridColumnHeader .dataHeader .data:before {
  display: inline-block;
  content: '';
  height: 26px;
  width: 60px;
}
#GridPage #footer #addColumnButton {
  position: absolute;
  top: 10px;
  right: 35px;
  z-index: 1;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  font-size: 40px;
  box-shadow: -5px 5px 5px -3px rgba(0, 0, 0, 0.5);
  background-color: #479e45;
  color: #fff;
  transition: opacity 400ms ease-in;
}
#GridPage #footer #addColumnButton.k-disabled {
  opacity: 0.5;
}
#GridPage #footer .multiSelectControls {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 95%;
  margin: auto;
  border-radius: 0.4rem;
  background-color: transparent;
  overflow: hidden;
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
#GridPage #footer .multiSelectControls .control {
  display: block;
  padding: 5px 0;
  height: 48px;
  width: 100%;
  box-sizing: content-box;
  border: none;
  font-size: 48px;
  background-color: #444444;
  color: #fff;
}
#GridPage #footer .multiSelectControls .control .k-icon {
  vertical-align: initial;
}
#GridPage #footer .multiSelectControls .control.multiSelectSave {
  background-color: #479e45;
}
#GridPage.GridPage-SupervisorApproval #header:before {
  display: block;
  content: "";
  width: 100%;
  height: 10px;
  background-color: #FFCB41;
}
#GridPage.GridPage-SupervisorApproval #content .gridHeader {
  border-color: #FFCB41;
}
#GridPage.GridPage-SupervisorApproval #content .gridHeader .entryDates .dayButton:not(.selected, .locked, .closed) .monthName {
  background-color: #FFCB41;
}
#GridPage.GridPage-SupervisorApproval #content .gridHeader .supervisor-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100%;
  padding: 10px 37.5px;
  box-sizing: border-box;
}
#GridPage.GridPage-SupervisorApproval #content .gridHeader .supervisor-header .navButton {
  padding: 10px;
  border-radius: 0.4rem;
  font-size: 25px;
  font-weight: 600;
  background-color: #1e5594;
  color: #fff;
}
#GridPage.GridPage-SupervisorApproval #content .gridHeader .supervisor-header .navButton:not(.navButton-supervisor) {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  font-size: 32px;
  box-sizing: content-box;
}
#GridPage.GridPage-SupervisorApproval #content .gridHeader .supervisor-header .navButton-next .k-icon {
  transform: rotate(180deg);
}
#GridPage.GridPage-SupervisorApproval #content .gridHeader .supervisor-header .navButton.k-disabled {
  opacity: 0.7;
}
.body-container[data-language="en-US"] #GridPage #header .headerContainer #pageName {
  font-size: 25px;
}
#HomePage .messageContainer {
  width: 100%;
  padding: 1em 0;
}
#HomePage .iconContainer {
  position: absolute;
  top: 25%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%, -25%);
  width: 100%;
  text-align: center;
}
#HomePage .iconContainer .icon-almobile-logo {
  font-size: 100px;
  color: white;
}
#HomePage #header {
  height: 290px;
  width: 100%;
}
#HomePage #header .headerContainer {
  position: relative;
  width: 100%;
  height: 100%;
}
#HomePage #header .headerContainer .banner {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#HomePage #header .headerContainer .banner_placeholder {
  opacity: 0.75;
  filter: blur(10px);
  transform: scale(1);
  background-color: #fff;
}
#HomePage #header .headerContainer .banner_loading {
  opacity: 0;
}
#HomePage #header .headerContainer .header-content-container {
  position: relative;
  height: 100%;
}
#HomePage #header .headerContainer .header-content-container .userInfo {
  position: absolute;
  top: 0;
  left: 0;
}
#HomePage #header .headerContainer .header-content-container .userInfo #companyLogo {
  max-width: 150px;
  max-height: 105px;
  position: relative;
}
#HomePage #header .headerContainer .header-content-container .userInfo .introContainer {
  position: relative;
  font-size: 20px;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 0.4rem;
  background-color: rgba(255, 255, 255, 0.5);
  color: #444444;
}
#HomePage #header .headerContainer .header-content-container .syncButton-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 275px;
  border-radius: 0.4rem 32px 32px 0.4rem;
  overflow: hidden;
}
#HomePage #header .headerContainer .header-content-container .syncButton-container #syncButton {
  position: absolute;
  top: 0;
  right: 0;
  height: 64px;
  width: 64px;
  border-radius: 64px;
  background-color: #479e45;
  color: white;
  font-size: 48px;
}
#HomePage #header .headerContainer .header-content-container .syncButton-container #syncButton .icon-sync {
  border-radius: 64px;
}
#HomePage #header .headerContainer .header-content-container .syncButton-container .syncButton-message {
  height: 64px;
  padding: 5px 69px 5px 5px;
  box-sizing: border-box;
  font-size: 18px;
  background-color: #FFCB41;
  color: #444444;
}
@media (max-width: 480px) {
  #HomePage #header .headerContainer .header-content-container .syncButton-container .syncButton-message {
    font-size: 16px;
  }
}
#HomePage #header .headerContainer .header-content-container #learnMoreButton {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 25px;
  background-color: rgba(68, 68, 68, 0.8);
  text-align: center;
  font-size: 20px;
  color: white;
  border: none;
  border-radius: 0.4rem;
}
#HomePage #header .headerContainer .header-content-wrapper {
  height: 100%;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
@supports (padding: max(0px)) {
  #HomePage #header .headerContainer .header-content-wrapper {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
}
#HomePage .dashboard {
  padding: 10px 10px 10px;
}
#HomePage .dashboard .donut-remaining {
  fill: #E5E5E5;
  stroke: transparent;
  opacity: 0.45;
}
#HomePage .dashboard .donut-text {
  font-size: 20px;
  font-weight: 600;
  fill: var(--invert-text-color);
}
#HomePage .dashboard .svg-columnChart .text {
  font-size: 12px;
  fill: var(--invert-text-color);
}
#HomePage .dashboard .svg-columnChart .text-unapproved {
  fill: #ce4242;
}
#HomePage .dashboard .svg-columnChart .text-approved {
  fill: #479e45;
}
#HomePage .dashboard .svg-columnChart .column-track,
#HomePage .dashboard .svg-columnChart .column-fill {
  stroke: transparent;
}
#HomePage .dashboard .svg-columnChart .column-track {
  fill: #E5E5E5;
  stroke: transparent;
  opacity: 0.45;
}
#HomePage .dashboard .svg-barChart .text {
  font-size: 20px;
  fill: var(--invert-text-color);
}
#HomePage .dashboard .svg-barChart .bar {
  fill: #666666;
}
#HomePage .dashboard .svg-barChart .bar-track {
  fill: #E5E5E5;
  stroke: transparent;
  opacity: 0.45;
}
#HomePage .dashboard .report-chart {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 10px 20px;
}
#HomePage .dashboard .report-chart svg {
  margin-bottom: 10px;
}
#HomePage .dashboard .report-chart .k-icon {
  font-size: 20px;
}
#HomePage .dashboard .report-chart .k-i-check {
  color: #479e45;
}
#HomePage .dashboard .report-chart .k-i-close {
  color: #ce4242;
}
#HomePage .dashboard .report-chart-label {
  font-size: 20px;
  text-align: center;
}
#HomePage .dashboard .report-chart .text_empID {
  font-size: 18px;
}
#HomePage .dashboard .report-chart.report-chart-center {
  align-items: center;
}
#HomePage .dashboard .report-chart-production .report-chart-label {
  text-align: left;
}
#HomePage .dashboard .report-chart-production .report-chart-label:not(.text_empID) {
  margin-bottom: 10px;
}
#HomePage .dashboard .report-chart-production svg {
  margin-bottom: 0;
}
#HomePage .dashboard .report-chart-production .scoreboard,
#HomePage .dashboard .report-chart-production .earnedManHours {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
#HomePage .dashboard .report-chart-production .scoreboard-data .text_small:last-of-type,
#HomePage .dashboard .report-chart-production .earnedManHours-data .text_small:last-of-type {
  margin-top: 5px;
  text-align: center;
}
#HomePage .dashboard .report-chart-weather {
  align-items: center;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  gap: 1em;
}
#HomePage .dashboard .report-chart-weather .text {
  font-size: 20px;
}
#HomePage .dashboard .report-chart-weather .k-icon {
  grid-area: icon;
  font-size: 40px;
  color: var(--invert-text-color);
}
#HomePage .dashboard .report-chart-weather .temp {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}
#HomePage .dashboard .report-chart-weather .temp sup {
  color: var(--dark-blue-to-medium-blue);
}
#HomePage .dashboard .report-chart-weather .current-weather {
  display: flex;
  flex-direction: row;
}
#HomePage .dashboard .report-chart-weather .current-weather .temp {
  font-size: 48px;
}
#HomePage .dashboard .report-chart-weather .current-weather .temp sup {
  font-size: 40%;
}
#HomePage .dashboard .report-chart-weather .current-weather .k-icon {
  padding-left: 10px;
}
#HomePage .dashboard .report-chart-weather .weather {
  display: grid;
  grid-template-areas: "icon date" "icon temp";
  align-items: center;
  flex-shrink: 0;
}
#HomePage .dashboard .report-chart-weather .weather .date {
  margin-bottom: 5px;
}
#HomePage .dashboard .report-chart-weather .weather .k-icon {
  padding-right: 10px;
}
#HomePage .dashboard .report-chart-weather .weather .temp {
  text-align: center;
}
#HomePage .dashboard .report-chart-weather .weather .temp sup {
  font-size: 65%;
}
#HomePage .dashboard .report-chart-weather .weather-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#HomePage .dashboard .analytic-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1rem;
}
#HomePage .dashboard .analytic-header .analytic-label {
  font-size: 20px;
  color: #AAAAAA;
}
#HomePage .dashboard .analytic-header .analytic-label .text {
  align-self: flex-end;
  font-size: inherit;
  color: inherit;
}
#HomePage .dashboard .analytic-header .analytic-label .icon-equipment {
  margin-right: 5px;
  vertical-align: bottom;
}
#HomePage .dashboard .analytic-header .analytic-filter {
  margin-left: auto;
  padding: 10px;
  border-radius: 0.4rem;
  font-size: 20px;
  background-color: #AAAAAA;
  color: #fff;
}
#HomePage .dashboard .analytic-header .analytic-filter .icon-filter {
  margin-right: 5px;
}
#HomePage .dashboard .analytic-header .analytic-filter-active {
  background-color: var(--dark-blue-to-medium-blue);
}
#HomePage .dashboard .analytic-chart-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}
#HomePage .dashboard .analytic-chart-toggle .k-button {
  padding: 10px;
  border-radius: 0.4rem;
  font-size: 25px;
  color: #fff;
  background-color: var(--dark-blue-to-medium-blue);
}
#HomePage .dashboard .analytic-chart-toggle .k-button .k-sprite {
  min-width: 25px;
}
#HomePage .dashboard .analytic-report {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid var(--light-grey-to-dark-grey-contrast);
  background-color: inherit;
  box-sizing: border-box;
  box-shadow: none;
}
#HomePage .dashboard .analytic-report-container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 100%;
}
#HomePage .dashboard .analytic-report-rendering {
  height: 183px;
  background-color: var(--light-grey-to-dark-grey-contrast);
}
#HomePage .dashboard .analytic-report-rendering::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-color: var(--light-grey-to-dark-grey-contrast);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0));
  animation: shimmer 2s infinite;
  content: '';
}
#HomePage .dashboard .analytic-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#HomePage .dashboard .analytic-hidden {
  position: absolute;
  z-index: -1;
}
#HomePage .dashboard .analytic:not(.analytic-hidden) ~ .analytic:not(.analytic-hidden) {
  margin-top: 1rem;
}
#HomePage .dashboard-wrapper {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: var(--white-to-dark-grey);
}
#HomePage #footer,
#HomePage #Drawer {
  background-color: var(--white-to-dark-grey);
}
#HomePage #Drawer.active .dashboard {
  padding-top: 40px;
}
#commandMenu[data-pageid='HomePage'] .menubutton[id^="dashboard-"] .label {
  flex-shrink: 1;
  white-space: normal;
}
#commandMenu[data-pageid='HomePage'] .menubutton[id^="dashboard-"].ui-sortable-helper {
  position: absolute;
}
#LoginPage #content {
  padding: 0;
}
#LoginPage #content .content-header {
  position: relative;
  height: 290px;
  width: 100%;
}
#LoginPage #content .content-header .banner {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#LoginPage #content .content-header .banner_placeholder {
  opacity: 0.75;
  filter: blur(10px);
  transform: scale(1);
  background-color: #fff;
}
#LoginPage #content .content-header .banner_loading {
  opacity: 0;
}
#LoginPage #content .content-header .wrapper {
  position: relative;
  height: 100%;
  padding: 1em;
  box-sizing: border-box;
}
#LoginPage #content .content-header .wrapper #companyLogo {
  max-width: 150px;
  max-height: 105px;
}
#LoginPage #content #loginPanel {
  position: relative;
  height: 475px;
  width: 400px;
  margin: auto;
  border-radius: 0.4rem;
  background-color: var(--invert-background-color);
  box-shadow: 5px 5px 15px -2px var(--box-shadow-color);
}
#LoginPage #content #loginPanel .wrapper {
  padding: 0px 50px;
  overflow: visible;
}
#LoginPage #content #loginPanel .wrapper .section {
  margin: auto;
  height: 200px;
}
#LoginPage #content #loginPanel .wrapper .section .input-container {
  width: 100%;
}
#LoginPage #content #loginPanel .wrapper .section .input-container + .input-container {
  margin-top: 1rem;
}
#LoginPage #content #loginPanel .wrapper .section .input-container .label {
  color: var(--invert-text-color);
  font-size: 25px;
  margin-bottom: 5px;
}
#LoginPage #content #loginPanel .wrapper .section .input-container .inputField:not(.inputField_autoComplete),
#LoginPage #content #loginPanel .wrapper .section .input-container .k-autocomplete,
#LoginPage #content #loginPanel .wrapper .section .input-container .k-popup {
  border: 1px solid var(--invert-text-color);
}
#LoginPage #content #loginPanel .wrapper .section .input-container .inputField:not(.inputField_autoComplete),
#LoginPage #content #loginPanel .wrapper .section .input-container .k-autocomplete {
  height: 50px;
  width: 100%;
  border-radius: 0.4rem;
  box-sizing: border-box;
}
#LoginPage #content #loginPanel .wrapper .section .input-container .inputField {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#LoginPage #content #loginPanel .wrapper .section .input-container .inputField.focus {
  box-shadow: 0px 8px 4px -2px rgba(66, 130, 206, 0.7);
}
#LoginPage #content #loginPanel .wrapper .section .input-container .inputField .k-icon {
  font-size: 28px;
  color: var(--dark-blue-to-white);
}
#LoginPage #content #loginPanel .wrapper .section .input-container .inputField .k-icon.input-icon {
  position: absolute;
}
#LoginPage #content #loginPanel .wrapper .section .input-container .inputField input {
  width: calc(100% - 35px);
  box-sizing: border-box;
  background-color: inherit;
  margin-left: 38px;
  border: none;
  border-radius: 0;
  font-size: 28px;
  color: var(--invert-text-color);
}
#LoginPage #content #loginPanel .wrapper .section .input-container .inputField input:focus {
  outline: none;
  box-shadow: none;
}
#LoginPage #content #loginPanel .wrapper .section .input-container .inputField input::-ms-reveal {
  display: none;
}
#LoginPage #content #loginPanel .wrapper .section .input-container .inputField:not(.inputField_autoComplete) {
  padding: 0 5px;
}
#LoginPage #content #loginPanel .wrapper .section .input-container .inputField_autoComplete .k-icon {
  left: 5px;
}
#LoginPage #content #loginPanel .wrapper .section .input-container .inputField_autoComplete input {
  padding: 0;
}
#LoginPage #content #loginPanel .wrapper .section .input-container.passwordContainer .inputField.capslock input {
  width: calc(100% - 65px);
}
#LoginPage #content #loginPanel .wrapper .section .input-container.passwordContainer .inputField.capslock .icon-capslock {
  display: block;
}
#LoginPage #content #loginPanel .wrapper .section .input-container.passwordContainer .inputField .icon-capslock {
  display: none;
  color: var(--dark-blue-to-medium-blue);
}
#LoginPage #content #loginPanel .wrapper .section .input-container.locationContainer {
  position: relative;
}
#LoginPage #content #loginPanel .wrapper .section .input-container.deployContainer {
  margin-top: calc(1rem + 25px);
}
#LoginPage #content #loginPanel .wrapper .section .input-container.deployContainer .inputField {
  border: 1px solid #AAAAAA;
  background-color: #E5E5E5;
}
#LoginPage #content #loginPanel .wrapper .section .input-container.deployContainer .inputField .label {
  font-size: 25px;
  color: #444444;
  margin-bottom: 0;
  padding-left: 10px;
}
#LoginPage #content #loginPanel .wrapper .section .input-container.deployContainer .inputField .k-switch {
  margin-left: auto;
}
#LoginPage #content #loginPanel .wrapper .section .input-container.deployContainer .inputField .k-switch.k-switch-off .k-switch-track {
  background-color: #444444;
}
#LoginPage #content #loginPanel .wrapper .section .input-container.deployContainer .inputField .k-switch.k-switch-on .k-switch-track {
  background-color: var(--dark-blue-to-medium-blue);
}
#LoginPage #content #loginPanel .wrapper .section .input-container.deployContainer .inputField .k-switch.k-switch-off .k-switch-thumb,
#LoginPage #content #loginPanel .wrapper .section .input-container.deployContainer .inputField .k-switch.k-switch-on .k-switch-thumb {
  border: none;
  background-color: #E5E5E5;
}
#LoginPage #content #loginPanel .loginTitle {
  width: 100%;
  text-align: right;
  margin: auto;
  padding: 20px 0;
}
#LoginPage #content #loginPanel .loginTitle #ALMobileBtn {
  margin-right: 20px;
}
#LoginPage #content #loginPanel .loginTitle #ALMobileBtn .icon-almobile-logo {
  font-size: 90px;
  color: var(--dark-blue-to-white);
}
#LoginPage #content #loginPanel .loginContent {
  position: relative;
  overflow: hidden;
  width: 100%;
}
#LoginPage #content #loginPanel .loginFooter {
  overflow: hidden;
  height: 120px;
  width: 100%;
}
#LoginPage #content #loginPanel .loginFooter #locationButton,
#LoginPage #content #loginPanel .loginFooter #userButton {
  color: var(--dark-blue-to-white);
  padding-left: 5px;
  font-size: 28px;
}
#LoginPage #content #loginPanel .loginFooter #loginButton {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10px;
  margin-left: auto;
  height: 50px;
  width: calc(100% - 60px);
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background-color: var(--dark-blue-to-medium-blue);
  transition: 0.2s;
  outline: none;
  appearance: none;
}
#LoginPage #content #loginPanel .loginFooter #loginButton[aria-disabled="true"] {
  background-color: #444444;
  border-color: var(--dark-mode-border-color);
}
#LoginPage #content #loginPanel .loginFooter #loginButton[aria-disabled="true"] .arrowButton .icon-login-arrow {
  color: #444444;
}
#LoginPage #content #loginPanel .loginFooter #loginButton .label {
  line-height: normal;
  padding-left: 10px;
  font-size: 25px;
  color: white;
}
#LoginPage #content #loginPanel .loginFooter #loginButton .arrowButton {
  margin-left: auto;
  border-radius: 0.4rem;
  background-color: white;
  width: 60px;
  text-align: center;
}
#LoginPage #content #loginPanel .loginFooter #loginButton .arrowButton .icon-login-arrow {
  font-size: 20px;
  font-weight: 600;
  padding: 5px 0;
  color: #1e5594;
}
#LoginPage #content #loginPanel .loginFooter .section {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: auto;
  margin-top: 20px;
  border: 1px solid transparent;
}
#LoginPage #content #loginPanel #location-list {
  padding: 0;
  margin: 0;
  border: none;
}
#LoginPage #content #loginPanel #location-list #location_listbox {
  background-color: var(--invert-background-color);
  color: var(--invert-text-color);
  border: none;
}
#LoginPage #content #loginPanel #location-list #location_listbox .k-item {
  border: none;
  text-indent: 10px;
  font-size: 28px;
  padding: 0;
}
#LoginPage #content #loginPanel #location-list #location_listbox .k-item + .k-item {
  border-top: 1px solid var(--border-color);
}
#LoginPage #content .tryDemoContainer {
  width: 100%;
  padding: 3em 0;
  text-align: center;
}
#LoginPage #content .tryDemoContainer #tryDemo {
  width: 200px;
  padding: 10px;
  border: 2px solid var(--dark-grey-to-light-grey);
  border-radius: 0.4rem;
  font-size: 25px;
  background-color: var(--light-blue-to-black);
  color: var(--invert-text-color);
}
#DailyDiary.ListingPage .modules {
  display: flex;
  flex-flow: row wrap;
  min-height: 25px;
}
#DailyDiary.ListingPage .modules [class^="icon-"] {
  margin: auto;
}
#PasswordResetPage header {
  position: absolute;
  height: 290px;
  width: 100%;
}
#PasswordResetPage header .headerContainer {
  position: relative;
  width: 100%;
  height: 100%;
}
#PasswordResetPage header .headerContainer .saas {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#PasswordResetPage header .headerContainer #companyLogo {
  position: absolute;
  margin: 1em;
  max-width: 200px;
}
#PasswordResetPage #content #passwordResetPanel {
  position: relative;
  background-color: var(--invert-background-color);
  width: 400px;
  min-height: 475px;
  border-radius: 0.4rem;
  margin: auto;
  box-shadow: 5px 5px 15px -2px var(--box-shadow-color);
}
#PasswordResetPage #content #passwordResetPanel .passwordResetTitle {
  width: 100%;
  text-align: right;
  margin: auto;
  padding: 20px 0;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetTitle .icon-almobile-logo {
  margin-right: 20px;
  font-size: 90px;
  color: var(--almobile-logo-color);
}
#PasswordResetPage #content #passwordResetPanel .passwordResetTitle .title {
  text-align: left;
  font-size: 25px;
  font-weight: 600;
  padding: 20px 50px 0 50px;
  color: var(--almobile-logo-color);
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent {
  width: 100%;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .details {
  padding: 20px 50px;
  color: var(--invert-text-color);
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .details .requirement {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--invert-text-color);
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .details .requirement + .requirement {
  margin-top: 1rem;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .details .requirement .text {
  margin-left: 10px;
  font-size: 22px;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .details .requirement .k-i-close,
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .details .requirement .k-i-check {
  font-size: 22px;
  font-weight: 600;
  overflow: visible;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .details .requirement .k-i-close {
  color: #ce4242;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .details .requirement .k-i-check {
  color: #479e45;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .wrapper {
  padding: 0px 50px;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .wrapper .input-container + .input-container {
  margin-top: 1rem;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .wrapper .input-container .label {
  color: var(--invert-text-color);
  font-size: 25px;
  margin-bottom: 5px;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .wrapper .input-container .inputField {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 50px;
  width: calc(100% - 12px);
  border: 1px solid var(--invert-text-color);
  border-radius: 0.4rem;
  padding: 0 5px;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .wrapper .input-container .inputField.focus {
  box-shadow: 0px 8px 4px -2px rgba(66, 130, 206, 0.7);
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .wrapper .input-container .inputField.capslock input {
  width: calc(100% - 35px);
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .wrapper .input-container .inputField.capslock .icon-capslock {
  display: block;
  font-size: 30px;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .wrapper .input-container .inputField .icon-capslock {
  display: none;
  color: #4187d8;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .wrapper .input-container .inputField input {
  height: 30px;
  line-height: 30px;
  width: 100%;
  box-sizing: border-box;
  background-color: inherit;
  padding-left: 5px;
  font-size: inherit;
  border: none;
  border-radius: 0;
  font-size: 28px;
  color: var(--invert-text-color);
  margin: 0;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetContent .wrapper .input-container .inputField input:focus {
  outline: none;
  box-shadow: none;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetFooter {
  overflow: hidden;
  height: 120px;
  width: 100%;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetFooter .wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px 50px;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetFooter .wrapper #passwordResetButton {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10px;
  height: 50px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background-color: #4187d8;
  transition: 0.2s;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetFooter .wrapper #passwordResetButton[aria-disabled="true"] {
  background-color: #444444;
  border-color: var(--dark-mode-border-color);
}
#PasswordResetPage #content #passwordResetPanel .passwordResetFooter .wrapper #passwordResetButton[aria-disabled="true"] .arrowButton .icon-login-arrow {
  color: #444444;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetFooter .wrapper #passwordResetButton .label {
  padding-left: 10px;
  font-size: 25px;
  color: white;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetFooter .wrapper #passwordResetButton .arrowButton {
  margin-left: auto;
  border-radius: 0.4rem;
  background-color: white;
  width: 60px;
  text-align: center;
}
#PasswordResetPage #content #passwordResetPanel .passwordResetFooter .wrapper #passwordResetButton .arrowButton .icon-login-arrow {
  font-size: 20px;
  font-weight: 600;
  padding: 5px 0;
  color: #4187d8;
}
#Prod.DetailPage .recordDescriptions {
  line-height: 1.3em;
}
#Prod.DetailPage .percentComplete,
#Prod.DetailPage .units {
  box-sizing: border-box;
  font-size: 25px;
  color: var(--invert-text-color);
  font-weight: 600;
}
#Prod.DetailPage .percentComplete_extraSmall,
#Prod.DetailPage .units_extraSmall {
  font-size: 16px;
}
#Prod.DetailPage .percentComplete_small,
#Prod.DetailPage .units_small {
  font-size: 20px;
}
#Prod.DetailPage .percentComplete_large,
#Prod.DetailPage .units_large {
  font-size: 32px;
}
#Prod.DetailPage .percentComplete_extraLarge,
#Prod.DetailPage .units_extraLarge {
  font-size: 40px;
}
#Prod.DetailPage .percentComplete_empID,
#Prod.DetailPage .units_empID {
  margin-bottom: 5px;
  line-height: 1;
  font-size: 20px;
  font-weight: 300;
  text-align: left;
  color: #4187d8;
}
@media (max-width: 480px) {
  #Prod.DetailPage .percentComplete,
  #Prod.DetailPage .units {
    text-align: left;
  }
}
#Prod.DetailPage .percentComplete {
  margin-top: 5px;
}
#Prod.DetailPage #headerExtras {
  display: flex;
}
#Prod.EntryPage #content .entryBox {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#Prod.EntryPage #content .entryBox .inputEntry {
  border-radius: 0.4rem;
  color: #444444;
}
#Prod.EntryPage #content .entryBox .inputEntry.k-numerictextbox {
  width: 165px;
  padding: 0;
  border: 1px solid var(--border-color);
  background-color: #fff;
  color: #444444;
}
#Prod.EntryPage #content .entryBox .inputEntry.k-numerictextbox.k-disabled {
  opacity: 1;
  border-color: var(--light-grey-to-dark-grey);
  background-color: var(--light-grey-to-dark-grey);
  color: var(--dark-grey-to-medium-grey);
}
#Prod.EntryPage #content .entryBox .inputEntry .k-input-inner {
  width: 100%;
  padding: 5px 10px;
  box-sizing: content-box;
  color: inherit;
}
#Prod.EntryPage #content .entryBox .deleteEntryButton {
  margin-left: 10px;
  padding: 5px 7.5px 5px 10px;
  border: 1px solid #ce4242;
  border-radius: 0.4rem;
  font-size: 31px;
  /* 31 is random but matches the input entry box height */
  background-color: #ce4242;
  color: #fff;
}
#Prod.EntryPage #content .entryBox .deleteEntryButton.k-disabled {
  display: none;
}
#Prod.EntryPage #content .entryBox .entryOptions {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#Prod.EntryPage #content .entryBox.transferTimeButton {
  position: absolute;
  left: 135px;
  z-index: 1;
  flex-direction: row;
  align-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--dark-blue-to-medium-blue);
  border-radius: 50%;
  font-size: 40px;
  font-weight: 600;
  color: #fff;
  background-color: var(--dark-blue-to-medium-blue);
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
#Prod.EntryPage #content .entryBox.transferTimeButton.k-disabled {
  opacity: 0.95;
  border-color: #444444;
  background-color: #444444;
  color: #AAAAAA;
}
#Prod.EntryPage #content .entryBox.unassociatedTime {
  width: 165px;
  padding: 5px 10px 5px 30px;
  border: 1px solid var(--light-grey-to-dark-grey);
  border-radius: 0.4rem;
  box-sizing: border-box;
  background-color: var(--light-grey-to-dark-grey);
  color: var(--dark-grey-to-medium-grey);
}
#Prod.EntryPage #content .entryBox.unassociatedTime .text {
  width: 100%;
  line-height: normal;
  text-align: right;
  color: inherit;
}
#Prod.EntryPage #content .wrapper {
  position: relative;
}
#Prod.EntryPage #content .wrapper_hours {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 30px;
}
#Prod.EntryPage #content .wrapper_hours .label {
  position: absolute;
  top: -30px;
  margin-bottom: 0;
}
#Prod.EntryPage #content .wrapper_hours .inputEntry.k-numerictextbox .k-input-inner {
  padding-right: 30px;
}
#Prod.EntryPage #content .wrapper_production {
  margin-top: 20px;
}
#Prod.EntryPage #content .wrapper_production .entryBox + .entryBox {
  margin-top: 10px;
}
#Prod.EntryPage #content .wrapper_modules .k-sprite,
#Prod.EntryPage #content .wrapper_modules .k-icon {
  width: 40px;
  margin-right: 10px;
  margin-left: -5px;
  /*Offset width (40px) with the font size (25px) and left padding (10px) */
  color: #4187d8;
}
#Prod.EntryPage #content .wrapper_modules .k-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 25px;
  background-color: #fff;
  color: #444444;
}
#Prod.EntryPage #content .wrapper_modules .k-button .label {
  margin: 0;
  color: #444444;
}
#Prod.EntryPage #content .wrapper_modules .module {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
#Prod.EntryPage #content .wrapper_modules .module:not(.ui-disabled) + .module:not(.ui-disabled) {
  margin-top: 1rem;
}
#Prod.EntryPage #content .container {
  max-width: 1024px;
  padding: 10px 37.5px 0;
  margin: auto;
  box-sizing: border-box;
}
#Prod.EntryPage #content .container .distElements {
  padding: 0;
}
#Prod.EntryPage #content .container_distributionSelection {
  padding-bottom: 5px;
}
#Prod.EntryPage #content .container_memo {
  padding-bottom: 10px;
}
#Prod.EntryPage #content .container:not(.container_distributionSelection) .wrapper > .label {
  display: inline-block;
  margin-bottom: 5px;
}
#Prod.EntryPage .editButton {
  display: block;
  padding: 5px 0;
  height: 48px;
  width: 100%;
  box-sizing: content-box;
  border: none;
  font-size: 48px;
  color: #fff;
}
#Prod.EntryPage .editButton .k-icon {
  vertical-align: initial;
}
#Prod.EntryPage .icon-locked {
  background-color: #444444;
}
#Prod.EntryPage .saveButton {
  background-color: #479e45;
}
#Prod.EntryPage .deleteButton {
  background-color: #ce4242;
}
#Prod.EntryPage #headerExtras .workForceCalcButton {
  font-size: 48px;
}
#Prod.EntryPage #headerExtras .workForceCalcButton.k-disabled {
  display: none;
}
#Prod.EntryPage #footer .container_editButtons {
  width: 95%;
  max-width: none;
  padding: 0;
  box-sizing: border-box;
  margin: auto;
  overflow: hidden;
}
#Prod.EntryPage #footer .container_editButtons .wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  border-radius: 0.4rem;
  overflow: hidden;
}
#Prod.Scoreboard.CostCodePage .jobDataTable {
  margin: 0;
  border: 1px solid var(--light-grey-to-dark-grey);
  border-radius: 0.4rem;
}
#Prod.Scoreboard.CostCodePage .jobDataTable .label {
  margin-bottom: 5px;
}
#Prod.Scoreboard.CostCodePage .jobDataTable .cell {
  display: flex;
  flex-direction: column;
  padding: 10px;
}
#Prod.Scoreboard.CostCodePage .jobDataTable .cell.job .text {
  font-weight: 600;
}
#Prod.Scoreboard.CostCodePage .jobDataTable .cell.progress {
  width: 100%;
  padding-top: 0;
}
#Prod.Scoreboard.CostCodePage .jobDataTable .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#Prod.Scoreboard.CostCodePage .jobDataTable-header {
  border-bottom: 1px solid #E5E5E5;
}
#Prod.Scoreboard.CostCodePage .jobDataTable-body .row {
  justify-content: space-between;
}
#Prod.Scoreboard.CostCodePage .jobDataTable-body .row .cell {
  align-items: center;
}
#Prod.Scoreboard.CostCodePage .container_jobData {
  width: 100%;
  max-width: calc(1024px / 2);
  padding-top: 10px;
  padding-bottom: 10px;
}
#Prod.UnassociatedTimePage .noData {
  padding: 5px 37.5px;
}
#Prod.UnassociatedTimePage .text {
  display: block;
  min-width: 0;
}
#Prod.UnassociatedTimePage .filter {
  display: none;
}
#Prod.UnassociatedTimePage .recordBar {
  overflow: hidden;
}
#Prod.UnassociatedTimePage .recordBar-header {
  justify-content: flex-start;
  width: 100%;
  padding: 5px 37.5px;
  border-top: 1px solid var(--medium-grey-to-dark-grey);
  border-bottom: 1px solid var(--medium-grey-to-dark-grey);
  background-color: var(--light-grey-to-dark-grey);
  color: var(--medium-blue-to-white);
  font-size: 28px;
  text-align: left;
}
#Prod.UnassociatedTimePage .recordBar-header .text {
  line-height: normal;
  font-weight: 600;
}
#Prod.UnassociatedTimePage .recordBar-record {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 10px 37.5px;
  background-color: var(--white-to-medium-grey);
}
#Prod.UnassociatedTimePage .recordBar-record-details {
  text-align: left;
}
#Prod.UnassociatedTimePage .recordBar-record-details .text {
  white-space: normal;
  word-break: break-all;
}
#Prod.UnassociatedTimePage .recordBar-record-unassociatedTime {
  flex-shrink: 0;
  width: 150px;
  margin-left: auto;
  text-align: center;
}
#Prod.UnassociatedTimePage .recordBar-record-unassociatedTime .text {
  border-radius: 0.4rem;
  padding: 10px;
  background-color: var(--light-grey-to-dark-grey);
}
#Prod.UnassociatedTimePage .recordBar-record:not(.filter) + .recordBar-record {
  border-top: 2px solid #E5E5E5;
}
#Prod.UnassociatedTimePage .searchContainer {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 1;
  max-width: 1024px;
  margin: auto;
  padding: 10px 37.5px;
  box-sizing: border-box;
  background-color: var(--light-blue-to-black);
}
#Prod.UnassociatedTimePage .searchContainer .search {
  width: 100%;
  padding: 10px 0;
  border: none;
  outline: none;
  font-size: 25px;
  background-color: inherit;
  color: var(--invert-text-color);
}
#Prod.UnassociatedTimePage .searchContainer .clearButton {
  font-size: 20px;
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
  color: var(--invert-text-color);
}
#Prod.UnassociatedTimePage .searchContainer .clearButton.visible {
  opacity: 1;
  pointer-events: auto;
}
#Prod.UnassociatedTimePage .searchContainer .searchWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 0.4rem;
  background-color: var(--invert-background-color);
  opacity: 0.5;
  transition: opacity 200ms ease-out;
}
#Prod.UnassociatedTimePage .searchContainer .searchWrapper.focused {
  opacity: 1;
  border: 1px solid rgba(28, 78, 137, 0.7);
  transition: box-shadow 400ms ease-out;
  box-shadow: 0 8px 4px -2px rgba(28, 78, 137, 0.7);
}
#RemoteReportsPage .asterisk {
  color: #ce4242;
}
#RemoteReportsPage .empty {
  padding: 40px 0 10px;
}
#RemoteReportsPage .text_empID {
  line-height: 1;
  font-size: 18px;
}
#RemoteReportsPage .mItem {
  padding: 5px;
  border: none;
  border-radius: 0.4rem;
  background-color: var(--dark-blue-to-medium-blue);
  color: #fff;
}
#RemoteReportsPage .mItem .text_empID {
  margin: 0;
  color: inherit;
}
#RemoteReportsPage .mItem-codes {
  display: flex;
  flex-flow: wrap row;
  font-size: 20px;
}
#RemoteReportsPage .selection-header {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid var(--medium-grey-to-dark-grey);
  border-radius: 0.4rem;
  background-color: var(--white-to-dark-grey);
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
#RemoteReportsPage .selection-header .text {
  margin-bottom: 5px;
  text-transform: capitalize;
}
#RemoteReportsPage .separator {
  height: 2px;
  border-radius: 0.4rem;
  background-color: #AAAAAA;
}
#RemoteReportsPage .listSelection {
  border: 1px solid #AAAAAA;
  font-size: inherit;
  background-color: #fff;
  color: #444444;
}
#RemoteReportsPage .listSelection .k-input-inner {
  padding: 5px 0;
}
#RemoteReportsPage .listSelection .k-input-inner :is(.k-input-value-text,
            .template-text) {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#RemoteReportsPage .listSelection .k-input-inner .template-text {
  padding: 0 10px;
}
#RemoteReportsPage .listSelection-wrapper {
  position: relative;
  z-index: 1;
  font-size: 25px;
}
#RemoteReportsPage .listSelection-wrapper .k-popup {
  border: 1px solid #AAAAAA;
}
#RemoteReportsPage .listSelection-wrapper .k-popup .k-list,
#RemoteReportsPage .listSelection-wrapper .k-popup .k-list .k-list-item {
  font-size: inherit;
}
#RemoteReportsPage .report {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}
#RemoteReportsPage .report .dateSelector {
  width: auto;
  padding: 0;
  background-color: inherit;
}
#RemoteReportsPage .report .dateSelector .currentDate {
  font-size: 25px;
}
#RemoteReportsPage .report .dateSelector .currentDate .label {
  display: none;
}
#RemoteReportsPage .report .dateSelector-wrapper {
  display: inline-block;
}
#RemoteReportsPage .report .k-numerictextbox {
  padding: 5px 10px;
  font-size: 25px;
  border: 1px solid var(--border-color);
  background-color: #fff;
  color: #444444;
}
#RemoteReportsPage .report .k-numerictextbox .k-input-inner {
  padding: 0;
}
#RemoteReportsPage .report .k-numerictextbox .k-spin-button {
  font-size: 12.5px;
}
#RemoteReportsPage .report .k-dropdowntree {
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  font-size: 25px;
  background-color: #fff;
}
#RemoteReportsPage .report .k-dropdowntree .k-chip {
  position: relative;
  height: auto;
  padding: 5px;
  border: none;
  border-radius: 0.4rem;
  font-size: inherit;
  background-color: var(--dark-blue-to-medium-blue);
  color: #fff;
}
#RemoteReportsPage .report .k-dropdowntree .k-chip-employee :is(.text, .text_empID) {
  margin: 0;
  color: #fff;
}
#RemoteReportsPage .report .k-dropdowntree .k-chip-employee .text:not(.text_empID) {
  font-size: 20px;
}
#RemoteReportsPage .report .k-dropdowntree .k-chip-content {
  display: block;
  margin: 0;
}
#RemoteReportsPage .report .k-dropdowntree .k-chip-list {
  padding: 0;
}
#RemoteReportsPage .report .k-dropdowntree .k-clear-value {
  margin-left: 10px;
}
#RemoteReportsPage .report .k-dropdowntree .k-input-inner {
  padding: 0;
}
#RemoteReportsPage .report .k-popup {
  border: 1px solid var(--border-color);
}
#RemoteReportsPage .report :is(.masterFileSelection-wrapper,
        .checkboxList-wrapper,
        .ComboBox-wrapper) {
  position: relative;
}
#RemoteReportsPage .report :is(.masterFileSelection-wrapper, .checkboxList-wrapper) .k-treeview {
  font-size: inherit;
}
#RemoteReportsPage .report :is(.masterFileSelection-wrapper, .checkboxList-wrapper) .k-treeview .k-checkbox {
  height: 100%;
  width: 100%;
  border-color: #444444;
  vertical-align: top;
}
#RemoteReportsPage .report :is(.masterFileSelection-wrapper, .checkboxList-wrapper) .k-treeview .k-checkbox:checked {
  border-color: var(--dark-blue-to-medium-blue);
}
#RemoteReportsPage .report :is(.masterFileSelection-wrapper, .checkboxList-wrapper) .k-treeview .k-checkbox-wrapper {
  height: 25px;
  width: 25px;
  margin: 0;
}
#RemoteReportsPage .report :is(.masterFileSelection-wrapper, .checkboxList-wrapper) .k-treeview-leaf-text {
  display: block;
  font-size: 25px;
}
#RemoteReportsPage .report :is(.masterFileSelection-wrapper, .checkboxList-wrapper) .k-treeview-employee {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#RemoteReportsPage .report :is(.masterFileSelection-wrapper, .checkboxList-wrapper) .k-treeview-employee .text:not(.text_empID) {
  color: inherit;
}
#RemoteReportsPage .report :is(.masterFileSelection-wrapper, .checkboxList-wrapper) .k-treeview-employee .text_empID {
  margin-bottom: 0;
}
#RemoteReportsPage .report .ComboBox.k-combobox {
  padding: 5px 0;
  border: 1px solid var(--border-color);
  font-size: 25px;
}
#RemoteReportsPage .report .ComboBox.k-combobox .k-input-inner {
  padding: 0 10px;
}
#RemoteReportsPage .report .CorpDataSelection {
  flex-flow: wrap row;
  justify-content: flex-start;
  width: 100%;
  min-height: 25px;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid #AAAAAA;
  border-radius: 0.4rem;
  font-size: 25px;
  background-color: #fff;
}
#RemoteReportsPage .report .CorpDataSelection:empty {
  width: calc(100% - 20px);
  box-sizing: content-box;
}
#RemoteReportsPage .report .CheckBox-wrapper .k-checkbox,
#RemoteReportsPage .report .GroupRadio .k-radio {
  width: 32px;
  height: 32px;
}
#RemoteReportsPage .report .GroupRadio {
  padding: 5px 0;
}
#RemoteReportsPage .report .GroupRadio .k-radio-label {
  margin-left: 10px;
}
#RemoteReportsPage .report .GroupRadio .k-radio-item.k-state-disabled .k-radio {
  display: none;
}
#RemoteReportsPage .report .GroupRadio .k-radio-item.k-state-disabled .k-radio-label {
  margin: 0;
}
#RemoteReportsPage .report .reportOption > .text {
  margin-bottom: 5px;
  font-weight: 600;
}
#RemoteReportsPage .report-wrapper {
  padding-left: 37.5px;
  padding-right: 37.5px;
}
#RemoteReportsPage .content-fixed {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 0 37.5px;
  width: 100%;
  box-sizing: border-box;
  background-color: inherit;
}
#RemoteReportsPage #footer .editButtons {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 95%;
  margin: auto;
  border-radius: 0.4rem;
  overflow: hidden;
}
#RemoteReportsPage #footer .editButtons .editButton {
  display: block;
  padding: 5px 0;
  height: 48px;
  width: 100%;
  box-sizing: content-box;
  border: none;
  font-size: 48px;
  color: #fff;
}
#RemoteReportsPage #footer .editButtons .editButton .k-icon {
  vertical-align: initial;
}
#RemoteReportsPage #footer .editButtons .editButton.k-disabled {
  background-color: #444444;
}
#RemoteReportsPage #footer .editButtons .saveButton {
  background-color: #479e45;
}
#RemoteReportsPage #footer .editButtons .deleteButton {
  background-color: #ce4242;
}
#RemoteReportsPage #footer .requestList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 37.5px;
  padding: 40px 0 10px;
}
#RemoteReportsPage #footer .requestList .reportDate {
  display: flex;
  flex-direction: row;
  flex-flow: nowrap row;
  align-items: center;
  min-width: 0;
}
#RemoteReportsPage #footer .requestList .reportDate .text_small {
  line-height: normal;
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#RemoteReportsPage #footer .requestList .reportDate .text_small:not(.data) {
  flex-shrink: 0;
}
#RemoteReportsPage #footer .requestList .reportDate .data {
  padding-left: 5px;
  font-weight: 500;
}
#RemoteReportsPage #footer .requestList .reportDate-selection {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 5px;
  overflow: hidden;
}
#RemoteReportsPage #footer .requestList .requestHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 25px;
  text-align: left;
}
#RemoteReportsPage #footer .requestList .requestHeader .icon-reports,
#RemoteReportsPage #footer .requestList .requestHeader .syncStatus {
  position: absolute;
  top: 0.65em;
  font-size: 30px;
}
#RemoteReportsPage #footer .requestList .requestHeader .icon-reports {
  left: 10px;
}
#RemoteReportsPage #footer .requestList .requestHeader .text {
  line-height: 1.2em;
}
#RemoteReportsPage #footer .requestList .requestHeader .syncStatus {
  right: 10px;
}
#RemoteReportsPage #footer .requestList .requestHeader .syncStatus.k-i-check {
  color: #479e45;
}
#RemoteReportsPage #footer .requestList .reportOption {
  display: flex;
  flex-flow: wrap row;
  width: 100%;
  line-height: normal;
  overflow: hidden;
  word-break: break-all;
}
#RemoteReportsPage #footer .requestList .reportOption .masterFileValue {
  padding: 5px;
  border: none;
  border-radius: 0.4rem;
  background-color: var(--dark-blue-to-medium-blue);
  color: #fff;
}
#RemoteReportsPage #footer .requestList .reportOption .masterFileValue-path {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 18px;
}
#RemoteReportsPage #footer .requestList .reportOption .masterFileValue-path:empty {
  display: none;
}
#RemoteReportsPage #footer .requestList .reportOption :is(.value, .text_label) {
  display: inline-block;
  font-size: 20px;
}
#RemoteReportsPage #footer .requestList .reportOption .value {
  margin-left: 5px;
}
#RemoteReportsPage #footer .requestList .reportOption .value-container {
  display: flex;
  flex-flow: wrap row;
  gap: 5px;
  width: 100%;
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
}
#RemoteReportsPage #footer .requestList .reportOption .text {
  width: auto;
}
#RemoteReportsPage #footer .requestList .reportOption .text_label {
  font-weight: 600;
}
#RemoteReportsPage #footer .requestList .requestMain,
#RemoteReportsPage #footer .requestList .requestBody {
  position: relative;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: left;
}
#RemoteReportsPage #footer .requestList .requestMain {
  padding: 10px 50px;
}
#RemoteReportsPage #footer .requestList .requestBody {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid var(--light-blue-to-black);
}
#RemoteReportsPage #footer .requestList .request {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  border: 1px solid var(--medium-grey-to-dark-grey);
  border-radius: 0.4rem;
  background-color: var(--white-to-dark-grey);
  color: var(--invert-text-color);
}
#RemoteReportsPage #footer .requestList-wrapper {
  height: 100%;
  max-width: 1024px;
  margin: auto;
  box-sizing: border-box;
}
#Prod.Scoreboard .filterButton {
  margin-left: auto;
  padding: 0 10px;
  font-size: 32px;
  color: var(--invert-text-color);
}
#Prod.Scoreboard .filterButton.active {
  color: #4187d8;
}
#Prod.Scoreboard .jobCodes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  margin-left: 10px;
  text-align: left;
}
#Prod.Scoreboard .jobCodes .description {
  font-weight: 600;
}
#Prod.Scoreboard .detail {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
  color: var(--invert-text-color);
}
#Prod.Scoreboard .detail .icon-link {
  flex-shrink: 0;
  font-size: 40px;
}
#Prod.Scoreboard .progressBar {
  width: 100%;
  border-radius: 0.4rem;
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--light-grey-to-medium-grey);
}
#Prod.Scoreboard .progressBar .bar {
  height: 15px;
  width: 0;
  max-width: 100%;
  background-color: var(--dark-blue-to-medium-blue);
  transition: width 200ms ease-out;
}
#Prod.Scoreboard .scoreboardSelectButton {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
#Prod.Scoreboard .jobDetailButton {
  margin-left: auto;
  margin-right: -10px;
  font-size: 64px;
  font-weight: 600;
  color: var(--invert-text-color);
}
#Prod.Scoreboard .scoreboard {
  display: flex;
  flex-flow: nowrap row;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
  padding: 10px;
  box-sizing: border-box;
}
#Prod.Scoreboard .scoreboard:first-of-type {
  margin-top: 0;
}
#Prod.Scoreboard .scoreboard:last-of-type {
  margin-bottom: 0;
}
#Prod.Scoreboard .scoreboard.filtered,
#Prod.Scoreboard .scoreboard.search_notMatch {
  display: none;
}
#Prod.Scoreboard .wrapper_search {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 0.4rem;
  background-color: var(--invert-background-color);
  opacity: 0.5;
  transition: opacity 200ms ease-out;
}
#Prod.Scoreboard .wrapper_search .search {
  width: calc(100% - 20px);
  padding: 10px 0;
  border: none;
  outline: none;
  font-size: 25px;
  background-color: inherit;
  color: var(--invert-text-color);
}
#Prod.Scoreboard .wrapper_search .clearButton {
  font-size: 20px;
  opacity: 1;
  transition: opacity 200ms ease-out;
  color: var(--invert-text-color);
}
#Prod.Scoreboard .wrapper_search .clearButton[disabled='disabled'] {
  opacity: 0;
  pointer-events: none;
}
#Prod.Scoreboard .wrapper_search.focused {
  opacity: 1;
  border: 1px solid rgba(28, 78, 137, 0.7);
  transition: box-shadow 400ms ease-out;
  box-shadow: 0 8px 4px -2px rgba(28, 78, 137, 0.7);
}
#Prod.Scoreboard .wrapper_scoreboard {
  padding: 10px 0;
}
#Prod.Scoreboard .container {
  position: relative;
  max-width: 1024px;
  margin: auto;
  padding: 0 37.5px;
  box-sizing: border-box;
}
#Prod.Scoreboard .container_search {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 37.5px;
  z-index: 1;
  background-color: var(--light-blue-to-black);
}
#Prod.Scoreboard .container_scoreboard {
  position: relative;
  overflow: hidden;
}
#Prod.Scoreboard #header .unassociatedTimeButton {
  width: auto;
  font-size: 35px;
}
#Prod.Scoreboard #header .unassociatedTimeButton .counter {
  margin: 0 5px;
  color: #fff;
}
#Prod.Scoreboard #commandMenu .menubutton {
  transition: opacity 200ms ease-out;
}
#Prod.Scoreboard #commandMenu .menubutton.inactive {
  opacity: 0.5;
}
#SupervisorApproval .approvee {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: normal;
  width: 100%;
  font-size: 25px;
}
#SupervisorApproval .approvee .loading {
  width: 32px;
  height: 32px;
}
#SupervisorApproval .approvee .loading div {
  border-width: 3px;
  border-top-color: var(--dark-blue-to-medium-blue);
}
#SupervisorApproval .approvee-approvals {
  font-weight: 600;
}
#SupervisorApproval .approvee-approvals-wrapper {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 100px;
  padding: 0 10px;
  margin-left: auto;
  border-radius: 0.4rem;
  font-size: 28px;
  text-align: center;
  background-color: #E5E5E5;
  color: #444444;
}
#SupervisorApproval .approvee-approvals-wrapper .k-icon {
  margin-left: auto;
}
#SupervisorApproval .approvee-approvals-wrapper.approvee-needsToSync {
  background-color: var(--dark-blue-to-medium-blue);
  color: #fff;
}
#SupervisorApproval .approvee-approvals-wrapper.approvee-needsToSync .k-icon {
  font-weight: 600;
}
#SupervisorApproval .approvee-approvals-wrapper.approvee-hasNewRecords {
  background-color: #479e45;
  color: #fff;
}
#SupervisorApproval .approvee-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 28px;
  font-weight: 600;
}
#SupervisorApproval .approvee-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 5px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--invert-text-color);
}
#SupervisorApproval .approvee + .approvee {
  margin-top: 10px;
}
#SupervisorApproval .approvee-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: normal;
  width: 100%;
  padding: 10px;
  border-radius: 0.4rem;
  overflow: hidden;
  background-color: var(--white-to-dark-grey);
  box-shadow: 0px 5px 5px -2px var(--box-shadow-color);
}
#SupervisorApproval .approvee-inner > .k-icon {
  font-size: 48px;
  color: var(--invert-text-color);
}
#SupervisorApproval .approvee-inner > .k-icon.k-i-check-circle {
  color: var(--dark-blue-to-medium-blue);
}
#SupervisorApproval .approvee-delete {
  position: absolute;
  top: 0;
  right: 0;
  flex-shrink: 0;
  height: 100%;
  padding: 0 2.5px 0 10px;
  border-radius: 0 0.4rem 0.4rem 0;
  font-size: 40px;
  background-color: #ce4242;
  color: #fff;
}
#SupervisorApproval .approvee-delete.k-disabled {
  opacity: 0.7;
  background-color: #444444;
}
#SupervisorApproval .approvee-container {
  padding: 10px 37.5px;
}
#SupervisorApproval .selectButton {
  min-width: 100px;
  padding: 10px 0;
  border-radius: 0.4rem;
  border: 1px solid var(--border-color);
  font-size: 25px;
  background-color: var(--light-grey-to-dark-grey);
  color: var(--invert-text-color);
  transition: opacity 400ms ease-out;
  box-shadow: 0px 5px 8px -2px var(--box-shadow-color);
}
#SupervisorApproval .selectButton-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
}
#TimeDetailPage .record-header .recordTotal {
  width: 150px;
  margin-left: auto;
  padding-right: 5px;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
}
@media (max-width: 480px) {
  #TimeDetailPage .record-header .recordTotal {
    width: auto;
  }
}
#TimeDetailPage .record .recordDetails {
  position: relative;
  padding: 33px 37.5px 10px;
}
#TimeDetailPage .record .recordDistribution {
  position: absolute;
  top: 0;
  left: 37.5px;
  min-width: 48px;
  padding: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: var(--light-grey-to-dark-grey);
  color: var(--invert-text-color);
}
#TimeDetailPage .record.mets {
  pointer-events: none;
  background-color: #e9f1fb;
}
#TimeDetailPage .record.mets + .record {
  border-top: 2px solid transparent;
}
#TimeDetailPage .record.mets .recordDetails .recordOverview {
  color: #444444;
}
#TimeDetailPage .record .metsHeader {
  padding: 5px 10px;
  background-color: #1e5594;
  text-align: left;
  color: #fff;
  font-size: 25px;
}
#TimeDetailPage .record .recordModules .wrapper {
  color: var(--invert-text-color);
}
#TimeDetailPage .record .recordModules .wrapper .hoursContainer {
  text-align: center;
  color: inherit;
}
@media (max-width: 480px) {
  #TimeDetailPage .record .recordModules .wrapper .hoursContainer {
    margin-left: auto;
  }
}
#TimeDetailPage .record .recordModules .wrapper .hoursContainer .hours {
  font-size: 32px;
  font-weight: 600;
}
#TimeDetailPage .record .recordModules .wrapper .hoursContainer .hoursType {
  margin-top: 5px;
  font-size: 25px;
}
#TimeDetailPage .record .recordModules .wrapper .modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-content: flex-start;
  font-size: 25px;
  color: inherit;
}
#TimeDetailPage .record .recordModules .wrapper .modules .icon-approvals {
  font-size: 28px;
  color: #479e45;
}
#TimeDetailPage .headerContainer #pageName {
  margin-left: auto;
}
#TimeDetailPage #footer .editButton {
  bottom: 150px;
}
#TimeDetailPage #footer .sigButton {
  z-index: -1;
  font-size: 28px;
}
#TimeDetailPage #footer #hoursTotalButton {
  display: inline-block;
  height: 100%;
  width: 30px;
  flex-shrink: 0;
  padding: 1rem 0;
  text-align: center;
  background-color: #444444;
}
#TimeDetailPage #footer #hoursTotalButton .triangle {
  height: 20px;
  width: 15px;
  margin: auto;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  background-color: var(--light-grey-to-medium-grey);
  transition: transform 0.4s;
}
#TimeDetailPage #footer .hours {
  display: flex;
  flex-direction: row;
  margin-left: auto;
}
#TimeDetailPage #footer .hours .label,
#TimeDetailPage #footer .hours .data {
  display: flex;
  align-items: center;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 28px;
}
#TimeDetailPage #footer .hours .data {
  justify-content: center;
  width: 150px;
  padding: 0 42.5px 0 5px;
  background-color: #444444;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  color: #E5E5E5;
}
@media (max-width: 480px) {
  #TimeDetailPage #footer .hours .data {
    width: auto;
    padding-left: 10px;
    padding-right: 47.5px;
  }
}
#TimeDetailPage #footer .hoursTotal {
  position: relative;
  right: 0;
  display: flex;
  flex-direction: row;
  height: 52px;
  width: 100%;
  margin-left: auto;
  box-sizing: border-box;
  background-color: var(--light-grey-to-medium-grey);
  overflow: hidden;
}
#TimeDetailPage #footer.footer_inset .editButton {
  bottom: calc(150px + var(--safe-area-bottom));
}
#SettingsPage .contentScroller {
  max-width: 480px;
  padding: 10px 0;
  margin: auto;
}
#SettingsPage .k-radio[data-checked=true] {
  background-color: var(--dark-blue-to-medium-blue);
}
#SettingsPage .k-switch.k-switch-off {
  background-color: #AAAAAA;
}
#SettingsPage .k-switch.k-switch-on {
  background-color: var(--dark-blue-to-medium-blue);
}
#SettingsPage .k-switch.k-switch-off .k-switch-thumb,
#SettingsPage .k-switch.k-switch-on .k-switch-thumb {
  border: none;
  background-color: #E5E5E5;
}
#SettingsPage .k-dropdownlist,
#SettingsPage .k-combobox {
  width: 100%;
}
#SettingsPage .k-list .k-list-item-text {
  font-size: 20px;
}
#SettingsPage .k-searchbox {
  font-size: 20px;
}
#SettingsPage .setting {
  position: relative;
  display: flex;
  padding: 1em 10px;
  background-color: inherit;
  color: inherit;
}
#SettingsPage .setting.row {
  flex-direction: row;
  align-items: center;
}
#SettingsPage .setting.column {
  flex-direction: column;
}
#SettingsPage .setting .label {
  color: var(--invert-text-color);
  font-size: 18px;
  font-weight: 300;
}
#SettingsPage .setting .inputWrapper {
  position: relative;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-left: auto;
}
#SettingsPage .setting .inputWrapper .k-dropdownlist,
#SettingsPage .setting .inputWrapper .k-combobox,
#SettingsPage .setting .inputWrapper .k-popup {
  border: 1px solid var(--border-color);
}
#SettingsPage .setting .k-picker,
#SettingsPage .setting > input,
#SettingsPage .setting > button {
  position: relative;
  margin-left: auto;
}
#SettingsPage .setting[data-setting="hoursType0"] .k-dropdownlist,
#SettingsPage .setting[data-setting="hoursType1"] .k-dropdownlist,
#SettingsPage .setting[data-setting="hoursType2"] .k-dropdownlist,
#SettingsPage .setting[data-setting="hoursType0"] .k-popup,
#SettingsPage .setting[data-setting="hoursType1"] .k-popup,
#SettingsPage .setting[data-setting="hoursType2"] .k-popup {
  border-width: 2px !important;
}
#SettingsPage .setting[data-setting="hoursType0"] .k-dropdownlist,
#SettingsPage .setting[data-setting="hoursType1"] .k-dropdownlist,
#SettingsPage .setting[data-setting="hoursType2"] .k-dropdownlist {
  outline: none;
}
#SettingsPage .setting[data-setting="hoursType0"] .k-list-item,
#SettingsPage .setting[data-setting="hoursType1"] .k-list-item,
#SettingsPage .setting[data-setting="hoursType2"] .k-list-item {
  padding: 0;
}
#SettingsPage .setting[data-setting="hoursType0"] .k-list-item .ht,
#SettingsPage .setting[data-setting="hoursType1"] .k-list-item .ht,
#SettingsPage .setting[data-setting="hoursType2"] .k-list-item .ht {
  display: block;
  width: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
}
#SettingsPage .setting[data-setting="hoursType0"] .k-list-item .ht.k-disabled,
#SettingsPage .setting[data-setting="hoursType1"] .k-list-item .ht.k-disabled,
#SettingsPage .setting[data-setting="hoursType2"] .k-list-item .ht.k-disabled {
  opacity: 1;
  background-color: var(--light-grey-to-dark-grey);
  color: var(--dark-grey-to-medium-grey);
}
#SettingsPage .setting[data-setting="hoursType0"] .k-list-item-text,
#SettingsPage .setting[data-setting="hoursType1"] .k-list-item-text,
#SettingsPage .setting[data-setting="hoursType2"] .k-list-item-text {
  display: block;
  width: 100%;
}
#SettingsPage .setting[data-setting="hoursType0"] .k-list-item-text:before,
#SettingsPage .setting[data-setting="hoursType1"] .k-list-item-text:before,
#SettingsPage .setting[data-setting="hoursType2"] .k-list-item-text:before {
  display: none;
}
#SettingsPage .setting[data-setting="hoursType0"] .k-dropdownlist,
#SettingsPage .setting[data-setting="hoursType0"] .k-popup {
  border-color: #4187d8 !important;
}
#SettingsPage .setting[data-setting="hoursType0"] .k-dropdownlist {
  background-color: #4187d8;
  color: #fff;
}
#SettingsPage .setting[data-setting="hoursType1"] .k-dropdownlist,
#SettingsPage .setting[data-setting="hoursType1"] .k-popup {
  border-color: #479e45 !important;
}
#SettingsPage .setting[data-setting="hoursType1"] .k-dropdownlist {
  background-color: #479e45;
  color: #fff;
}
#SettingsPage .setting[data-setting="hoursType2"] .k-dropdownlist,
#SettingsPage .setting[data-setting="hoursType2"] .k-popup {
  border-color: #ce4242 !important;
}
#SettingsPage .setting[data-setting="hoursType2"] .k-dropdownlist {
  background-color: #ce4242;
  color: #fff;
}
#SettingsPage .setting[data-setting="resetToCorp"] .label {
  margin-right: 1rem;
}
#SettingsPage .setting[data-setting="resetToCorp"] button {
  min-width: 100px;
  padding: 10px;
  border: 1px solid #AAAAAA;
  border-radius: 0.4rem;
  font-size: 20px;
  background-color: white;
  color: #444444;
}
#SettingsPage .settingHeader {
  padding: 5px 0 5px 10px;
  border-bottom: 1px solid var(--border-color);
  color: var(--invert-text-color);
  font-size: 20px;
  font-weight: 300;
}
#SettingsPage .sectionHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 5px;
  margin-bottom: 1em;
  border-bottom: 1px solid var(--border-color);
}
#SettingsPage .sectionHeader .k-icon {
  color: var(--almobile-logo-color);
  font-size: 30px;
}
#SettingsPage .sectionHeader .sectionName {
  margin-left: 1rem;
  color: var(--invert-text-color);
  font-size: 20px;
  font-weight: 600;
}
#SettingsPage .section {
  padding: 0 10px;
}
#WeeklyReportPage .title {
  white-space: nowrap;
  font-weight: 600;
  color: var(--dark-blue-to-medium-blue);
}
#WeeklyReportPage .noData {
  width: 100%;
  padding: 10px;
  border-top: 2px solid #E5E5E5;
}
#WeeklyReportPage .reportHeader {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding: 10px;
}
#WeeklyReportPage .reportHeader .hours {
  min-width: 100px;
  margin-left: auto;
  padding: 5px 0;
  border-radius: 0.4rem;
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  background-color: #E5E5E5;
  color: #444444;
}
#WeeklyReportPage .column {
  flex-shrink: 0;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
}
#WeeklyReportPage .column:not(.column_placeholder) + .column {
  border-left: 1px solid #E5E5E5;
}
#WeeklyReportPage .column_dynamic {
  width: 220px;
}
#WeeklyReportPage .column_hoursType {
  flex-shrink: 0;
  width: 200px;
  text-align: right;
}
#WeeklyReportPage .column_hoursType .text {
  width: 100%;
}
#WeeklyReportPage .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top: 2px solid #E5E5E5;
}
#WeeklyReportPage .row_distDesc .column {
  width: 100%;
  text-align: left;
  font-weight: 600;
}
#WeeklyReportPage .reportGridHead,
#WeeklyReportPage .reportGridBody {
  padding: 0 10px;
}
#WeeklyReportPage .reportGridFooter {
  padding-bottom: 7px;
  background-color: #1e5594;
}
#WeeklyReportPage .reportGridFooter .row {
  padding: 0 10px;
  border-top: none;
}
#WeeklyReportPage .reportGridFooter .text {
  font-weight: 600;
  color: #fff;
}
#WeeklyReportPage .reportGrid {
  position: relative;
  overflow: hidden;
  width: 100%;
}
#WeeklyReportPage .reportGrid-container {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
}
#WeeklyReportPage .card {
  margin-left: 0;
  margin-right: 0;
}
#WeeklyReportPage .searchContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 0.4rem;
  background-color: var(--invert-background-color);
  opacity: 0.5;
  transition: opacity 200ms ease-out;
}
#WeeklyReportPage .searchContainer .groupSearch {
  width: calc(100% - 20px);
  padding: 10px 0;
  border: none;
  outline: none;
  font-size: 25px;
  background-color: inherit;
  color: var(--invert-text-color);
}
#WeeklyReportPage .searchContainer .clearButton {
  font-size: 20px;
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
  color: var(--invert-text-color);
}
#WeeklyReportPage .searchContainer .clearButton.visible {
  opacity: 1;
  pointer-events: auto;
}
#WeeklyReportPage .searchContainer + .searchContainer {
  margin-top: 10px;
}
#WeeklyReportPage .searchContainer.focused {
  opacity: 1;
  border: 1px solid rgba(28, 78, 137, 0.7);
  transition: box-shadow 400ms ease-out;
  box-shadow: 0 8px 4px -2px rgba(28, 78, 137, 0.7);
}
#WeeklyReportPage .wrapper {
  padding: 10px 37.5px;
}
#WeeklyReportPage .wrapper_groupSummary {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 47.5px;
}
#WeeklyReportPage .wrapper_groupSummary .text {
  padding: 10px 0;
}
#WeeklyReportPage .wrapper_groupSummary .text_extraLarge {
  font-weight: 600;
}
#WeeklyReportPage .wrapper_groupSummary .groupName {
  width: 100%;
  font-size: 48px;
  font-weight: 300;
  color: var(--dark-blue-to-medium-blue);
}
#WeeklyReportPage .wrapper_groupSummary .reportDate {
  padding: 5px 0;
}
#WeeklyReportPage .wrapper_groupSummary .reportDate .text {
  font-weight: 600;
  color: var(--dark-blue-to-medium-blue);
}
#WeeklyReportPage .wrapper_groupSummary .groupSum {
  flex-shrink: 0;
  min-width: 100px;
  margin-left: auto;
  padding: 5px 0;
  border-radius: 0.4rem;
  text-align: center;
  background-color: #E5E5E5;
  color: #444444;
}
@media (max-width: 480px) {
  #WeeklyReportPage .wrapper_groupSummary .groupName,
  #WeeklyReportPage .wrapper_groupSummary .text_extraLarge {
    font-size: 32px;
  }
}
#TimeEntryPage #header .headerContainer {
  padding-right: 15px;
}
#TimeEntryPage #header .headerContainer #pageName {
  margin-left: auto;
}
#TimeEntryPage #header .headerContainer #headerExtras {
  display: none;
}
#TimeEntryPage .content-wrapper {
  padding: 0 37.5px;
}
#TimeEntryPage .content-wrapper-label {
  display: inline-block;
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--invert-text-color);
}
#TimeEntryPage .content-wrapper.hoursWrapper {
  padding: 0 10px;
}
#TimeEntryPage .content-wrapper:last-of-type {
  padding-bottom: 10px;
}
#TimeEntryPage #content .loading {
  animation: pulse infinite 3.5s;
  pointer-events: none;
}
#TimeEntryPage #content .distributionSelectionWrapper:before {
  display: block;
  content: '';
  height: 50px;
  background-color: var(--light-grey-to-black);
}
#TimeEntryPage #content .attendance-report-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#TimeEntryPage #content .attendance-report-wrapper {
  padding: 10px;
}
#TimeEntryPage #content .attendance-report-container {
  margin-top: 17.5px;
  /* Took the header height and halfed it */
  margin-bottom: 10px;
}
#TimeEntryPage #content .attendance-report-overview,
#TimeEntryPage #content .attendance-report-overview-employee {
  border-radius: 0.4rem;
  background: #4187d8;
  background: linear-gradient(133deg, #4187d8 30%, #1e5594 75%);
  color: #fff;
}
#TimeEntryPage #content .attendance-report-overview .k-i-marker-pin-target,
#TimeEntryPage #content .attendance-report-overview-employee .k-i-marker-pin-target {
  flex-shrink: 0;
  margin-right: 10px;
  font-size: 32px;
}
#TimeEntryPage #content .attendance-report-overview .label,
#TimeEntryPage #content .attendance-report-overview-employee .label {
  color: inherit;
}
#TimeEntryPage #content .attendance-report-overview .total-attendance-button,
#TimeEntryPage #content .attendance-report-overview-employee .total-attendance-button {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 100px;
  overflow: hidden;
  margin-left: auto;
  border-radius: 0.4rem;
  background-color: #E5E5E5;
}
#TimeEntryPage #content .attendance-report-overview .total-attendance-button .text,
#TimeEntryPage #content .attendance-report-overview-employee .total-attendance-button .text {
  padding: 5px 0 0;
  font-size: 28px;
  font-weight: 600;
  color: #444444;
}
#TimeEntryPage #content .attendance-report-overview .total-attendance-button .progress,
#TimeEntryPage #content .attendance-report-overview-employee .total-attendance-button .progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  overflow: hidden;
  background-color: #AAAAAA;
}
#TimeEntryPage #content .attendance-report-overview .total-attendance-button .progress-fill,
#TimeEntryPage #content .attendance-report-overview-employee .total-attendance-button .progress-fill {
  width: 0;
  height: 10px;
  flex-shrink: 0;
  background-color: #4187d8;
  transition: width 0.3s ease-out;
}
#TimeEntryPage #content .attendance-report-overview .total-attendance-button .progress-fill.over-allocated,
#TimeEntryPage #content .attendance-report-overview-employee .total-attendance-button .progress-fill.over-allocated {
  background-color: #ce4242;
}
#TimeEntryPage #content .attendance-report-overview .total-attendance-button .progress-new,
#TimeEntryPage #content .attendance-report-overview-employee .total-attendance-button .progress-new {
  background-color: #479e45;
}
#TimeEntryPage #content .attendance-report-list-detail {
  height: 0;
  max-height: 200px;
  opacity: 0;
  position: relative;
  overflow: hidden;
}
#TimeEntryPage #content .attendance-report-list-detail .text {
  color: #444444;
}
#TimeEntryPage #content .attendance-report-list-detail .attendance-report-overview-employee {
  margin-top: 10px;
  background-color: initial;
  background: var(--dark-blue-to-medium-blue);
}
#TimeEntryPage #content .attendance-report-list-detail .attendance-report-overview-employee .label,
#TimeEntryPage #content .attendance-report-list-detail .attendance-report-overview-employee .text_empID {
  color: #fff;
}
#TimeEntryPage #content .attendance-report-list-detail .attendance-report-overview-employee .attendance-report-row {
  justify-content: space-between;
}
#TimeEntryPage #content .attendance-report-list-detail .attendance-record {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
}
#TimeEntryPage #content .attendance-report-list-detail .attendance-record .text.label {
  margin-bottom: 1rem;
}
#TimeEntryPage #content .attendance-report-list-detail .attendance-record .text:not(.label) {
  font-weight: 600;
  font-size: 28px;
}
#TimeEntryPage #content .attendance-report-list-detail .divider {
  height: calc(25px + 28px + 1rem);
  width: 5px;
  flex-shrink: 0;
  border-radius: 0.4rem;
  background: #4187d8;
  background: linear-gradient(133deg, #4187d8 30%, #1e5594 75%);
}
#TimeEntryPage #content .attendance-report-list-detail .attendance-detail {
  margin-top: 10px;
  border-radius: 0.4rem;
  background-color: #E5E5E5;
}
#TimeEntryPage #content .attendance-report-list-detail-scroller {
  padding-top: 10px;
}
#TimeEntryPage #content .hoursWrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 480px;
  overflow: hidden;
  margin: auto;
}
#TimeEntryPage #content .hoursWrapper .leftSection {
  width: 50%;
}
#TimeEntryPage #content .hoursWrapper .leftSection .entry {
  font-size: 25px;
  font-weight: 500;
}
#TimeEntryPage #content .hoursWrapper .leftSection .hoursEntry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
#TimeEntryPage #content .hoursWrapper .leftSection .hoursEntry #hoursEntryButton {
  display: block;
  min-height: 45px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  background-color: #fff;
  color: #444444;
  text-align: left;
}
#TimeEntryPage #content .hoursWrapper .leftSection .hoursEntry #hoursEntryButton.hasBreak {
  padding: 0;
}
#TimeEntryPage #content .hoursWrapper .leftSection .hoursEntry #hoursEntryButton .fullHours {
  padding: 10px;
}
#TimeEntryPage #content .hoursWrapper .leftSection .hoursEntry #hoursEntryButton .breakHours {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-top: 1px solid #AAAAAA;
}
#TimeEntryPage #content .hoursWrapper .leftSection .hoursEntry #hoursEntryButton .breakHours .label,
#TimeEntryPage #content .hoursWrapper .leftSection .hoursEntry #hoursEntryButton .breakHours .split {
  font-size: 20px;
  color: #4187d8;
}
#TimeEntryPage #content .hoursWrapper .leftSection .totalHours {
  margin-top: 10px;
  font-size: 25px;
  font-weight: 600;
  color: var(--dark-blue-to-white);
}
#TimeEntryPage #content .hoursWrapper .leftSection .totalHours-hours {
  margin-left: 10px;
}
#TimeEntryPage #content .hoursWrapper .leftSection .totalHours-label:last-of-type {
  margin-left: 5px;
}
@media (max-width: 480px) {
  #TimeEntryPage #content .hoursWrapper .leftSection {
    width: calc(100% - 200px);
  }
}
#TimeEntryPage #content .hoursWrapper .rightSection {
  margin-left: auto;
}
#TimeEntryPage #content .hoursWrapper .rightSection:empty {
  min-height: 200px;
}
#TimeEntryPage #content .hoursType {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
}
#TimeEntryPage #content .hoursType .inputWrapper {
  position: relative;
  background-color: transparent;
}
#TimeEntryPage #content .hoursType .inputWrapper .k-dropdownlist,
#TimeEntryPage #content .hoursType .inputWrapper .k-popup {
  border: 1px solid var(--border-color);
}
#TimeEntryPage #content .hoursType .inputWrapper .k-dropdownlist {
  width: 100%;
  font-size: 25px;
}
#TimeEntryPage #content .hoursType .inputWrapper .k-dropdownlist .k-input-value-text {
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}
#TimeEntryPage #content .hoursType .inputWrapper .k-dropdownlist .k-input-button {
  line-height: 45px;
}
#TimeEntryPage #content .hoursType .inputWrapper .k-list-container .k-item .k-state-selected {
  background-color: #E5E5E5;
}
#TimeEntryPage #content .modulesWrapper {
  margin-top: 1rem;
  padding-top: 10px;
}
#TimeEntryPage #content .modulesWrapper .icon {
  width: 40px;
  margin-right: 10px;
  margin-left: -5px;
  /*Offset width (40px) with the font size (25px) and left padding (10px) */
  color: #4187d8;
}
#TimeEntryPage #content .modulesWrapper .moduleButton {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 0.4rem;
  font-size: 25px;
  background-color: #fff;
  color: #444444;
}
#TimeEntryPage #content .modulesWrapper .moduleButton .label {
  margin: 0;
  color: #444444;
}
#TimeEntryPage #content .modulesWrapper .module {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
#TimeEntryPage #content .modulesWrapper .module.quantity > .k-button.k-disabled,
#TimeEntryPage #content .modulesWrapper .module.equipmentMaintenance > .k-button.k-disabled {
  display: none !important;
  pointer-events: none !important;
}
#TimeEntryPage #content .modulesWrapper .module.quantity .label,
#TimeEntryPage #content .modulesWrapper .module.quantity .text {
  color: #444444;
}
#TimeEntryPage #content .modulesWrapper .module.quantity .QuantityCollectionForm .text_header .icon-quantity {
  display: inline-block;
  width: 40px;
  margin-right: 10px;
  margin-left: -5px;
  text-align: center;
}
#TimeEntryPage #content .modulesWrapper .module:not(.ui-disabled) ~ .module:not(.ui-disabled) {
  margin-top: 1rem;
}
#TimeEntryPage #footer .editButtons {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 95%;
  margin: auto;
  border-radius: 0.4rem;
  overflow: hidden;
}
#TimeEntryPage #footer .editButtons .editButton {
  display: block;
  padding: 5px 0;
  height: 48px;
  width: 100%;
  box-sizing: content-box;
  border: none;
  font-size: 48px;
  color: #fff;
}
#TimeEntryPage #footer .editButtons .editButton .k-icon {
  vertical-align: initial;
}
#TimeEntryPage #footer .editButtons .icon-locked {
  background-color: #444444;
}
#TimeEntryPage #footer .editButtons .saveButton {
  background-color: #479e45;
}
#TimeEntryPage #footer .editButtons .deleteButton {
  background-color: #ce4242;
}