/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
/**
 * define font-sizes with css custom properties.
 * you can change the values of these properties in a media query
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify
*/
:root {
  --base-font-size: 16px !important;
}
@media only screen and (max-width: 1903.98px) {
:root {
    --base-font-size: 14.4px !important;
}
}

/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
.input--color input {
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  width: 140px;
}
.preferences-tooltip {
  margin: 1em 0;
  word-break: break-word;
  background: whitesmoke;
  padding: 1em;
  border-radius: 5px;
}
.color__error {
  color: #f56c6c;
  font-size: 12px;
  text-align: center;
  margin-bottom: 2em;
}
.color-preview {
  width: 32px;
  height: 34px;
  position: absolute;
  left: 105px;
  display: block;
  top: 4px;
  border-radius: 3px;
}
/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
/**
 * define font-sizes with css custom properties.
 * you can change the values of these properties in a media query
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify
*/
[data-v-55f860d6]:root {
  --base-font-size: 16px !important;
}
@media only screen and (max-width: 1903.98px) {
[data-v-55f860d6]:root {
    --base-font-size: 14.4px !important;
}
}

/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
.loading[data-v-55f860d6] {
  text-align: center;
}
.v-data-table th[data-v-55f860d6]:first-of-type {
  text-align: left;
}
.v-data-table td.checkboxItem[data-v-55f860d6] {
  text-align: center;
}
.v-data-table td.checkboxItem .v-input--checkbox[data-v-55f860d6] {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.v-data-table td.checkboxItem .v-input--checkbox[data-v-55f860d6] .v-input__slot {
  margin-bottom: 0;
}
/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
/**
 * define font-sizes with css custom properties.
 * you can change the values of these properties in a media query
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify
*/
[data-v-7de3aef8]:root {
  --base-font-size: 16px !important;
}
@media only screen and (max-width: 1903.98px) {
[data-v-7de3aef8]:root {
    --base-font-size: 14.4px !important;
}
}

/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
.v-card__text[data-v-7de3aef8] {
  padding: 0px 0px 0px 16px;
}
.text-subtitle-1[data-v-7de3aef8] {
  padding-bottom: 8px;
  padding-top: 8px;
}
.v-select[data-v-7de3aef8] {
  display: inline-block;
}
.v-select.time[data-v-7de3aef8] {
  width: 6em;
}
.v-select.weekday[data-v-7de3aef8] {
  width: 8em;
}
.v-select.agenda-weeks[data-v-7de3aef8] {
  width: 10em;
}
.v-select[data-v-7de3aef8] .v-select__selections .v-select__selection {
  text-align: center;
  width: 100%;
}
[data-v-7de3aef8] .v-radio {
  display: flex;
  align-items: flex-start;
}
[data-v-7de3aef8] .v-radio .innerLabel {
  margin-top: 0.1em;
}
[data-v-7de3aef8] .v-radio label {
  font-size: 0.9em;
}
.v-input--switch[data-v-7de3aef8],[data-v-7de3aef8] .v-messages {
  min-height: 0;
}
.vacation-mode-end-date-box .line[data-v-7de3aef8] {
  display: inline-block;
  width: 1.5em;
  height: 1em;
  margin: 3px 5px 3px 18px;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}
.vacation-mode-end-date-box .line.dark[data-v-7de3aef8] {
  border-color: rgba(0, 0, 0, 0.6);
}
.vacation-mode-end-date-box .line.light[data-v-7de3aef8] {
  border-color: rgba(255, 255, 255, 0.7);
}
.vacation-mode-end-date-box .v-text-field[data-v-7de3aef8] {
  display: inline-block;
  width: 10em;
}
.vacation-mode-end-date-box .v-text-field[data-v-7de3aef8] input {
  text-align: center;
}
[data-v-7de3aef8] .v-picker__actions {
  flex-direction: column;
}
[data-v-7de3aef8] .v-picker__actions .buttons {
  width: 100%;
  text-align: right;
}
[data-v-7de3aef8] .v-picker__actions .buttons .v-btn {
  margin-left: 8px;
}
/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
/**
 * define font-sizes with css custom properties.
 * you can change the values of these properties in a media query
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify
*/
[data-v-29737685]:root {
  --base-font-size: 16px !important;
}
@media only screen and (max-width: 1903.98px) {
[data-v-29737685]:root {
    --base-font-size: 14.4px !important;
}
}

/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
p[data-v-29737685] {
  margin: 7px 0;
}
p[data-v-29737685], p a[data-v-29737685], li[data-v-29737685], li a[data-v-29737685] {
  text-decoration: none;
  color: #004c6f;
  font-family: Arial, Helvetica, sans-serif;
}
.spacer[data-v-29737685] {
  border-top: 2px solid #004c6f;
  margin-top: 12px;
  margin-bottom: 12px;
}
.image-spacer[data-v-29737685] {
  margin-top: 12px;
}
ul li[data-v-29737685] {
  margin: 7.1px 0;
}
/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
/**
 * define font-sizes with css custom properties.
 * you can change the values of these properties in a media query
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify
*/
[data-v-5d679598]:root {
  --base-font-size: 16px !important;
}
@media only screen and (max-width: 1903.98px) {
[data-v-5d679598]:root {
    --base-font-size: 14.4px !important;
}
}

/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
[data-v-5d679598] .v-card {
  max-width: 99%;
  margin-left: auto;
  margin-right: auto;
}
[data-v-5d679598] .v-card .v-card__subtitle {
  padding-left: 0;
  font-size: 1.3em;
}
/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
/**
 * define font-sizes with css custom properties.
 * you can change the values of these properties in a media query
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify
*/
[data-v-063b8567]:root {
  --base-font-size: 16px !important;
}
@media only screen and (max-width: 1903.98px) {
[data-v-063b8567]:root {
    --base-font-size: 14.4px !important;
}
}

/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
.highlighted[data-v-063b8567] {
  color: #00897B;
}
.icons[data-v-063b8567] {
  width: 45px;
  display: flex;
  justify-content: center;
  position: relative;
  margin-left: -5px;
}
.center[data-v-063b8567] {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nudge-down[data-v-063b8567] {
  position: relative;
  margin-top: 1px;
}

.v-progress-linear[data-v-66d40d60] {
  transform: scale(1, -1);
}

/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
/**
 * define font-sizes with css custom properties.
 * you can change the values of these properties in a media query
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify
*/
[data-v-66d40d60]:root {
  --base-font-size: 16px !important;
}
@media only screen and (max-width: 1903.98px) {
[data-v-66d40d60]:root {
    --base-font-size: 14.4px !important;
}
}

/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
.loader[data-v-66d40d60] {
  visibility: hidden;
  height: 6px;
}
.loader--busy[data-v-66d40d60] {
  visibility: visible;
}
/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
/**
 * define font-sizes with css custom properties.
 * you can change the values of these properties in a media query
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify
*/
:root {
  --base-font-size: 16px !important;
}
@media only screen and (max-width: 1903.98px) {
:root {
    --base-font-size: 14.4px !important;
}
}

/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback
 See: https://stackoverflow.com/questions/56603008/how-to-make-font-size-responsive-using-vuetify

*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* IE10+ specific styles go here */
.drawer-left, .drawer-right {
    display: none;
}
}
.v-appbar__extension {
  padding: 0px !important;
}
.drawer-left-wrapper .v-navigation-drawer__border {
  background: linear-gradient(to right, transparent 40%, rgba(0, 0, 0, 0.12) 40% 60%, transparent 60%) !important;
}
@media only screen and (min-width: 992px) {
.drawer-left-wrapper .v-navigation-drawer__border:hover {
    background: linear-gradient(to right, transparent 40%, #26a69a 40% 60%, transparent 60%) !important;
}
}