@font-face {
  font-family: 'Oswald';
  src: url("/fonts/Oswald/Oswald-Regular.ttf") format("truetype");
  font-weight: normal; }

@font-face {
  font-family: 'Oswald';
  src: url("/fonts/Oswald/Oswald-Bold.ttf") format("truetype");
  font-weight: bold; }

@font-face {
  font-family: 'Lato';
  src: url("/fonts/Lato/Lato-Regular.ttf") format("truetype");
  font-weight: normal; }

@font-face {
  font-family: 'Lato';
  src: url("/fonts/Lato/Lato-Bold.ttf") format("truetype");
  font-weight: bold; }

@font-face {
  font-family: 'icomoon';
  src: url("/fonts/icomoon.eot?p0cimt");
  src: url("/fonts/icomoon.eot?p0cimt#iefix") format("embedded-opentype"), url("/fonts/icomoon.ttf?p0cimt") format("truetype"), url("/fonts/icomoon.woff?p0cimt") format("woff"), url("/fonts/icomoon.svg?p0cimt#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer; }
  [class^="icon-"]:hover, [class*=" icon-"]:hover {
    opacity: 0.8; }

.icon-play:before {
  content: "\e900";
  color: #5e5e5e;
  border: 1px solid #dbdcdb;
  padding: 7px 12px;
  border-radius: 2px; }

.icon-help:before {
  content: "\e906";
  color: #212020;
  background: white;
  border-radius: 50%;
  padding: 3px 8px;
  border: 1px solid #b5b5b5; }

.icon-arrow-down:before {
  content: "\e901"; }

.icon-arrow-left:before {
  content: "\e902"; }

.icon-arrow-right:before {
  content: "\e903"; }

.icon-burger-menu:before {
  content: "\e904"; }

.icon-calendar:before {
  content: "\e905"; }

.icon-checkmark:before {
  content: "\e908"; }

.icon-delete:before,
.icon-close:before {
  content: "\e913"; }

.icon-envelope:before {
  content: "\1f397"; }

.icon-trashcan:before {
  content: "\e90a"; }

.icon-inbox:before {
  content: "\e90b"; }

.icon-new-message:before {
  content: "\e90c"; }

.icon-send:before {
  content: "\e90d"; }

.icon-paperclip:before {
  content: "\e90e"; }

.icon-pencil:before {
  content: "\e90f";
  color: black;
  display: inline-block;
  transform: rotate(180deg); }

.icon-person:before {
  content: "\e910"; }

.icon-plus:before {
  content: "\e911"; }

.add-icon {
  width: 16px;
  height: 16px;
  object-fit: contain; }

.edit-icon {
  width: 16px;
  height: 16px;
  object-fit: contain; }

.delete-icon {
  width: 12px;
  height: 12px;
  object-fit: contain; }

.save-btn,
.add-btn,
.edit-btn,
.delete-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  padding: 5px; }
  .save-btn:focus,
  .add-btn:focus,
  .edit-btn:focus,
  .delete-btn:focus {
    outline: none; }
  .save-btn:active,
  .add-btn:active,
  .edit-btn:active,
  .delete-btn:active {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color; }

.icon-help {
  position: fixed;
  bottom: 20px;
  left: 20px;
  font-size: 18px; }

.custom-select {
  border-radius: 5px;
  border: 1px solid #d7d8d6;
  background-color: white;
  letter-spacing: 0.4px;
  color: #f0f2f5;
  color: var(--gray-header);
  text-align: left;
  padding-right: 16px;
  background-image: url("/images/icons/arrow-down.svg");
  background-size: 15px 9px; }

input,
input[type=search],
.create-button,
.custom-select,
.default-btn,
textarea {
  height: 42px;
  border-radius: 5px; }

.uppercase-btn,
.create-button,
.default-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.3px;
  color: var(--body-color);
  background-color: #f0f2f5;
  border: 1px solid #d7d8d6; }

.confirm-btn {
  width: 100px;
  margin-top: 30px; }

.spinner-border {
  margin-right: 10px; }

.input-validation-error {
  border: 1px solid var(--error-color) !important; }

.error,
.text-danger {
  color: var(--error-color) !important;
  font-weight: normal; }

input[type="radio"] {
  width: 20px;
  height: 20px;
  cursor: pointer; }

input[type=text] {
  padding: 0 15px;
  border: 1px solid #dedede; }
  input[type=text]::-webkit-input-placeholder {
    opacity: 0.4; }

input[type=time],
input[type=number] {
  width: 115px;
  padding-left: 15px;
  padding-right: 0;
  border: 1px solid #dedede;
  padding-right: 0;
  color: #212020; }
  input[type=time]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-inner-spin-button,
  input[type=number]::-webkit-calendar-picker-indicator,
  input[type=number]::-webkit-inner-spin-button {
    cursor: pointer;
    opacity: 1;
    font-size: 18px;
    height: 40px;
    padding: 0 7px;
    border-left: 1px solid #dedede;
    background-position-y: center; }

.datepicker-input {
  width: 218px;
  height: 42px;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 5px;
  border: solid 1px var(--border-color);
  cursor: pointer;
  margin-right: 20px; }
  .datepicker-input label {
    padding: 0 15px; }
  .datepicker-input .icon-calendar {
    display: inline-block;
    margin-left: auto;
    font-size: 18px;
    border-left: 1px solid #dedede;
    padding: 12px 9px; }

.checkbox {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center; }
  .checkbox::selection {
    background: transparent; }
  .checkbox input + span {
    background: white;
    content: "";
    display: inline-block;
    margin: 0 .5em 0 0;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    border: 1px solid #bcbcbc;
    height: 24px;
    width: 24px;
    padding: 4px; }
    .checkbox input + span::after {
      content: "";
      display: block;
      transform: scale(0);
      transition: transform .2s; }
  @media screen and (min-width: 768px) {
    .checkbox:hover input + span {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } }
  .checkbox input:active + span {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }
  .checkbox input:focus + span {
    box-shadow: 0 0 0 3px lightblue; }
  .checkbox input:checked + span::after {
    transform: scale(1); }
  .checkbox input {
    position: absolute;
    cursor: pointer;
    opacity: 0; }

.checkbox input + span {
  border-radius: 2px; }
  .checkbox input + span::after {
    background: url(../images/icons/checkmark.svg) no-repeat center;
    background-size: contain;
    width: 100%;
    height: 100%; }

/*.radio {
  @extend %controller;
  
  input + span {
    border-radius: 100%;
    
    &::after {
      border-radius: 100%;
      margin: .65em;
      width: .75em;
      height: .75em;
    }
  }
  
  input:checked + span::after {
    background: black;
  }
}*/
.react-select-container {
  min-width: 200px; }

.react-select-container,
.react-select__value-container,
.react-select__control {
  height: 42px; }

.react-select__input input {
  height: initial; }

.selected-menu-item {
  margin-bottom: 3px;
  padding-left: 34px;
  font-weight: normal; }
  .selected-menu-item.mobile {
    display: none; }

.nav-header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000; }

.navbar {
  height: 61px;
  background-color: #282828;
  padding: 0 1rem;
  user-select: none; }
  .navbar * {
    color: white; }
  .navbar .dropdown-toggle.nav-item.nav-link {
    height: 55px;
    padding-left: 3px; }
    .navbar .dropdown-toggle.nav-item.nav-link:after {
      display: none; }
  .navbar .dropdown-menu {
    max-height: 90vh;
    overflow: auto;
    background-color: #282828;
    padding: 19px 0 24px;
    font-family: var(--body-font);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: 0; }
  .navbar .dropdown-divider {
    border-top: 1px solid black;
    border-bottom: 1px solid #363636;
    margin: 20px 0; }
    .navbar .dropdown-divider.top {
      margin-top: 0; }
  .navbar .dropdown-header {
    color: #868686;
    letter-spacing: 0.8px;
    font-size: 12px;
    text-transform: uppercase;
    margin-top: 10px; }
  .navbar .dropdown-item {
    margin-top: 10px; }
    .navbar .dropdown-item:hover {
      background-color: lightgray; }

.nav-item {
  align-items: center;
  display: flex; }
  .nav-item .nav-link:hover {
    color: lightgray; }

.custom-switch {
  margin-left: 6px; }
  .custom-switch .custom-control-label:before {
    top: 0.10rem;
    width: 48px;
    height: 24px;
    border-radius: 12px;
    background-color: #ebeaea; }
  .custom-switch .custom-control-label:after {
    top: 4px;
    width: 18px;
    height: 18px;
    left: calc(-2.25rem + 3px);
    background-color: #a70c23; }
  .custom-switch .custom-control-input:checked ~ .custom-control-label:before {
    border-color: #0ca722;
    background-color: #17a70c; }
  .custom-switch .custom-control-input:checked ~ .custom-control-label:after {
    transform: translateX(1.45rem); }

.modal .modal-dialog {
  max-width: 404px;
  margin-top: 90px; }

.modal .modal-header,
.modal .modal-body,
.modal .modal-footer {
  padding: 0 40px;
  border: none; }

.modal .modal-header {
  position: relative;
  font-family: var(--header-font);
  font-size: 26px;
  padding-top: 32px;
  padding-bottom: 20px;
  color: #5a5a5a; }
  .modal .modal-header .day-name,
  .modal .modal-header .job-name {
    width: 100%;
    margin-bottom: 20px;
    color: #810101; }
  .modal .modal-header .close {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    color: var(--header-color);
    opacity: 1; }
    .modal .modal-header .close span:first-of-type {
      display: none; }
    .modal .modal-header .close:before {
      content: '\e913';
      font-family: "icomoon";
      speak: none;
      font-size: 12px; }

.modal .modal-footer {
  padding-top: 26px;
  padding-bottom: 40px; }

.modal input {
  border: 1px solid #d7d8d6; }
  .modal input:focus-visible {
    outline: none; }

.modal .custom-select:focus {
  border-color: #d7d8d6;
  box-shadow: none; }

.modal .default-btn {
  width: 100%;
  background: white;
  color: var(--gray-header);
  border: 1px solid var(--button-border-color);
  font-size: 16px;
  text-transform: none; }

.modal .error.select {
  margin-left: 13px; }

:root {
  --header-font: 'Oswald', sans-serif;
  --body-font: 'Lato', sans-serif;
  --header-color: #282828;
  --body-color: #212020;
  --gray-header: #46484c;
  --gray-body: #6c6d6e;
  --light-gray: #838383;
  --dark-gray: #36383b;
  --gray-topbar-background: linear-gradient(to bottom, #f0f2f5, #f0f2f5);
  --border-color: #dee0e3;
  --button-border-color: #909399;
  --error-color: #b72727;
  --uppercase-color: #7f7f7f;
  --placeholder-color: #bababa; }

input[type=button],
input[type=submit],
input[type=reset] {
  padding: 0; }

html {
  font-size: 16px; }

html, body {
  width: 100%;
  min-height: 100vh;
  font-size: 100%;
  font-family: var(--body-font);
  letter-spacing: 0.4px;
  background: transparent;
  background-color: transparent; }

body {
  color: var(--body-color);
  display: flex;
  flex-direction: column; }

.App {
  width: 100%;
  min-height: 400px; }

.content {
  flex: 1 0 auto;
  padding-top: 60px; }

.container-fluid {
  max-width: 1160px;
  margin: auto; }

.row {
  margin-right: 0;
  margin-left: 0; }

h1, h2, h3, h4, h5, h6,
.header-font,
.navbar {
  font-family: var(--header-font);
  color: var(--header-color); }

h2 {
  font-size: 1.6em; }

a {
  color: var(--body-color); }

a:hover,
.btn-link:hover {
  color: gray; }

label {
  margin-bottom: 0; }

iframe {
  border: 0; }

.disabled {
  color: #aeaeae;
  pointer-events: none; }
  .disabled:hover {
    cursor: default; }

.dim {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: all .5s ease-out;
  cursor: default;
  pointer-events: none; }

.slide-up {
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1); }

.slide-down {
  overflow-y: hidden;
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1); }

.fade-in {
  visibility: visible;
  opacity: 1;
  transition: all .5s linear; }

.fade-out {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-out;
  cursor: default; }

footer {
  padding: 20px;
  flex-shrink: 0; }