/**
Variables and configurations
 */
/**
 SCSS main variables file,
***/
/**
Colors
 */
:root {
  --winterMainColor: #004899;
  /* Use a dark colour, the colour will be shaded lighter in menus etc... */
  --winterSecondColour: #e84e0f;
  /* Colour for interactive links and the primary button, use something that stands out */
  --winterMainColorRGB: 0, 72, 153;
  --winterSecondColourRGB: 232, 78, 15;
  --winterThirdColor: #67d876;
  --winterThirdColorRGB: 103, 216, 118;
  --color_primary: var(--winterMainColor);
  --color_secondary: var(--winterSecondColour);
  --DataColor1: hsl(226.99deg 55% 78.63%);
  --DataTextColor1: black;
  --DataColor2: hsl(282.36deg 34% 69.18%);
  --DataTextColor2: black;
  --DataColor3: hsl(335.69deg 70% 76.73%);
  --DataTextColor3: black;
  --DataColor4: hsl(164.63deg 48% 70.59%);
  --DataTextColor4: black;
  --DataColor5: hsl(237.31deg 28% 65.51%);
  --DataTextColor5: black;
  --DataColor6: hsl(189.64deg 45% 77.57%);
  --DataTextColor6: black;
  --DataColor7: hsl(307.96deg 31% 76.8%);
  --DataTextColor7: black;
  --DataColor8: hsl(211deg 56% 73.94%);
  --DataTextColor8: black;
  --DataColor9: hsl(286.42deg 60% 85.08%);
  --DataTextColor9: black;
  --progress_textcolor: black;
  --progress_0: hsl(0deg 96% 81%);
  --progress_10: hsl(13deg 92% 81%);
  --progress_20: hsl(23deg 88% 80%);
  --progress_30: hsl(28deg 86% 79%);
  --progress_40: hsl(35deg 82% 78%);
  --progress_50: hsl(43deg 76% 75%);
  --progress_60: hsl(53deg 68% 73%);
  --progress_70: hsl(65deg 64% 69%);
  --progress_80: hsl(72deg 60% 65%);
  --progress_90: hsl(91deg 54% 64%);
  --progress_100: hsl(132deg 48% 60%);
  --warningColour: hsl(29deg 100% 59%);
  --errorColour: hsl(0deg 100% 59%);
}
/**
Fonts
 */
:root {
  --font-text: "Source Sans Pro";
  --font-headings: "Montserrat";
  --body-weight: 400;
  --headings-weight: 700;
  --headings-color: black;
}
/**
Body
 */
:root {
  --body-color: #000;
  --body-bg: rgba(var(--winterMainColorRGB), 0.05);
  --border-radius-sm: 1px;
  --border-radius-md: 2px;
  --border-radius-lg: 5px;
}
/**
Links
 */
:root {
  --interactive-color: var(--winterMainColor);
  --interactive-color-hover: var(--winterSecondColour);
  --interactive-color-active: #0a836c;
  --interactive-color-disabled: var(--gray_3);
}
/**
Buttons
 */
:root {
  --btn-radius: 3px;
  --btn-default-bg: #456d9a;
  --btn-default-bg-hover: #456d9a;
  --btn-default-bg-active: #6e8ab3;
  --btn-default-bg-disabled: var(--gray_3);
  --btn-default-color: white;
  --btn-secondary-bg: #004899;
  --btn-secondary-bg-hover: #0d2f62;
  --btn-secondary-bg-active: #6e8ab3;
  --btn-secondary-bg-disabled: var(--gray_3);
  --btn-secondary-color: white;
  --btn-primary-bg: #67d876;
  --btn-primary-bg-hover: #5abd6a;
  --btn-primary-bg-active: #78ac80;
  --btn-primary-bg-disabled: var(--gray_3);
  --btn-primary-color: white;
  --btn-info-bg: #84b5ed;
  --btn-info-bg-hover: #7fa0c7;
  --btn-info-bg-active: #b1cceb;
  --btn-info-bg-disabled: var(--gray_3);
  --btn-info-color: white;
  --btn-warning-bg: #fdb53d;
  --btn-warning-bg-hover: #f2a524;
  --btn-warning-bg-active: #ffd183;
  --btn-warning-bg-disabled: var(--gray_3);
  --btn-warning-color: white;
  --btn-danger-bg: #ff7b7b;
  --btn-danger-bg-hover: #e25050;
  --btn-danger-bg-active: #ffbbbb;
  --btn-danger-bg-disabled: var(--gray_3);
  --btn-danger-color: white;
  --btn-success-bg: #04ce2d;
  --btn-success-bg-hover: #109f2d;
  --btn-success-bg-active: #6cda83;
  --btn-success-bg-disabled: var(--gray_3);
  --btn-success-color: white;
}
/**
Grays
 */
:root {
  --gray_1: #f6f6f6;
  --gray_2: #e1e1e1;
  --gray_3: #b9b9b9;
  --gray_4: #858585;
  --gray_5: #565656;
  --gray_6: #363636;
  --gray_7: #171717;
}
/**
Menu
 */
:root {
  --nav-font: var(--font-headings);
  --mainmenu-color: var(--winterMainColor);
  --mainmenu-color-hover: var(--mainmenu-color);
  --mainmenu-color-active: var(--winterSecondColour);
  --nav-bg: #fff;
}
/**
UX
 */
:root {
  --shadow_heavy: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
}
/* Linkstates is a mixin because it can be used on other objects quite easiliy. */
/* Defaults */
.color_primary {
  background: var(--color_primary);
}
.color_secondary {
  background: var(--color_secondary);
}
.DataColorOne {
  background: var(--DataColor1);
}
.DataColorTwo {
  background: var(--DataColor2);
}
.DataColorThree {
  background: var(--DataColor3);
}
.DataColorFour {
  background: var(--DataColor4);
}
.DataColorFive {
  background: var(--DataColor5);
}
.DataColorSix {
  background: var(--DataColor6);
}
.DataColorSeven {
  background: var(--DataColor7);
}
.DataColorEight {
  background: var(--DataColor8);
}
.DataColorNine {
  background: var(--DataColor9);
}
.DataColorTen {
  background: var(--DataColor10);
}
.progress_0 {
  background: var(--progress_0);
}
.progress_10 {
  background: var(--progress_10);
}
.progress_20 {
  background: var(--progress_20);
}
.progress_30 {
  background: var(--progress_30);
}
.progress_40 {
  background: var(--progress_40);
}
.progress_50 {
  background: var(--progress_50);
}
.progress_60 {
  background: var(--progress_60);
}
.progress_70 {
  background: var(--progress_70);
}
.progress_80 {
  background: var(--progress_80);
}
.progress_90 {
  background: var(--progress_90);
}
.progress_100 {
  background: var(--progress_100);
}
.colortest {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 50px;
  color: white;
  font-weight: 600;
  text-align: center;
}
.colortest [class*="progress"], .colortest [class*="color_"], .colortest [class*="DataColor"] {
  flex: 1;
  margin: 0 6px 0 0;
}
body {
  padding-top: 0;
  font-family: var(--font-text);
  font-weight: var(--body-weight);
  background: var(--body-bg);
  height: 100vh;
}
#page {
  padding: 40px;
  max-width: 1960px;
  margin: 0 auto;
  height: 100%;
}
#layout-content {
  position: relative;
  padding-bottom: 2.5rem;
  min-height: calc(100% - 170px);
}
p {
  font-family: var(--font-text);
  color: var(--body-color);
}
h1, h2, h3 {
  font-family: var(--font-headings);
  font-weight: var(--headings-weight);
  color: var(--headings-color);
}
h4, h5, h6 {
  font-family: var(--font-headings);
  font-weight: 500;
  color: var(--headings-color);
}
a {
  color: var(--interactive-color);
}
a:hover, a:focus {
  color: var(--interactive-color-hover);
  text-decoration: none;
}
a:active {
  color: var(--interactive-color-active);
  text-decoration: none;
}
a.disabled, a.disabled:hover, a.disabled:focus, a.disabled:active, a:disabled {
  pointer-events: none;
  color: var(--interactive-color-disabled);
  text-decoration: none;
}
.pa_left {
  left: 0;
}
.pa_right {
  right: 0;
}
.error {
  background: #c84530;
  color: white;
  padding: 24px;
}
.d-none {
  display: none !important;
}
/* no focus style for non-keyboard-inputs elements */
body:not(.user-is-tabbing) .btn:focus, body:not(.user-is-tabbing) .btn:active:focus, body:not(.user-is-tabbing) .btn.active:focus, body:not(.user-is-tabbing) .btn.focus, body:not(.user-is-tabbing) .btn:active.focus, body:not(.user-is-tabbing) .btn.active.focus {
  outline: none;
}
.flex_title_wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.flex-container {
  display: flex;
}
.flex-child:first-child {
  margin-right: -10px;
  width: 40px;
}
.select2-container--default .select2-search--dropdown:after, .select2-container--default.select2-container--open .select2-selection .select2-selection__arrow b:before, .select2-container--default .select2-selection--single .select2-selection__arrow b:before {
  font-family: FontAwesome;
}
.sweet-alert, .control-simplelist, .control-filelist p.no-data, .report-widget, .control-treeview ol > li.dragged > div, ul.mainmenu-nav li span.counter, #layout-sidenav ul li span.counter {
  border-radius: var(--border-radius-sm);
}
.sweet-alert, .control-scrollbar > .scrollbar-scrollbar .scrollbar-track, .control-scrollbar > .scrollbar-scrollbar .scrollbar-track .scrollbar-thumb, .control-treeview a.menu-control, div.control-scrollpad > .scrollpad-scrollbar, div.control-scrollpad > .scrollpad-scrollbar .drag-handle {
  border-radius: var(--border-radius-md);
}
.fancy-layout .control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li a > span.title:before, .fancy-layout.control-tabs.master-tabs > div > div.tabs-container > ul.nav-tabs > li a > span.title:before {
  border-radius: var(--border-radius-lg) 0 0 0;
}
.btn {
  font-weight: 600;
  border-radius: var(--btn-radius);
  text-transform: capitalize;
}
.btn-default {
  border-width: 2px;
  background-color: transparent;
  color: var(--btn-default-bg);
  border-color: var(--btn-default-bg);
}
.btn-default:hover, .btn-default:focus {
  background-color: var(--btn-default-bg-hover);
  border-color: var(--btn-default-bg-hover);
  color: var(--btn-default-color);
}
.btn-default:active, .btn-default:hover:active, .btn-default:focus:active {
  background-color: var(--btn-default-bg-active);
  border-color: var(--btn-default-bg-active);
  color: var(--btn-default-color);
}
.btn-default:disabled, .btn-default.disabled {
  background-color: var(--btn-default-bg-disabled);
  border-color: var(--btn-default-bg-disabled);
  color: var(--btn-default-color);
}
.btn-default.on {
  background-color: var(--interactive-color-active);
}
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-primary-bg);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-color);
}
.btn-primary:active, .btn-primary:hover:active, .btn-primary:focus:active {
  background-color: var(--btn-primary-bg-active);
  border-color: var(--btn-primary-bg-active);
  color: var(--btn-primary-color);
}
.btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--btn-primary-bg-disabled);
  border-color: var(--btn-primary-bg-disabled);
  color: var(--btn-primary-color);
}
.btn-primary.on {
  background-color: var(--interactive-color-active);
}
.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-bg);
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-color);
}
.btn-secondary:active, .btn-secondary:hover:active, .btn-secondary:focus:active {
  background-color: var(--btn-secondary-bg-active);
  border-color: var(--btn-secondary-bg-active);
  color: var(--btn-secondary-color);
}
.btn-secondary:disabled, .btn-secondary.disabled {
  background-color: var(--btn-secondary-bg-disabled);
  border-color: var(--btn-secondary-bg-disabled);
  color: var(--btn-secondary-color);
}
.btn-secondary.on {
  background-color: var(--interactive-color-active);
}
.btn-info {
  background-color: var(--btn-info-bg);
  color: var(--btn-info-color);
  border-color: var(--btn-info-bg);
}
.btn-info:hover, .btn-info:focus {
  background-color: var(--btn-info-bg-hover);
  border-color: var(--btn-info-bg-hover);
  color: var(--btn-info-color);
}
.btn-info:active, .btn-info:hover:active, .btn-info:focus:active {
  background-color: var(--btn-info-bg-active);
  border-color: var(--btn-info-bg-active);
  color: var(--btn-info-color);
}
.btn-info:disabled, .btn-info.disabled {
  background-color: var(--btn-info-bg-disabled);
  border-color: var(--btn-info-bg-disabled);
  color: var(--btn-info-color);
}
.btn-info.on {
  background-color: var(--interactive-color-active);
}
.btn-warning {
  background-color: var(--btn-warning-bg);
  color: var(--btn-warning-color);
  border-color: var(--btn-warning-bg);
}
.btn-warning:hover, .btn-warning:focus {
  background-color: var(--btn-warning-bg-hover);
  border-color: var(--btn-warning-bg-hover);
  color: var(--btn-warning-color);
}
.btn-warning:active, .btn-warning:hover:active, .btn-warning:focus:active {
  background-color: var(--btn-warning-bg-active);
  border-color: var(--btn-warning-bg-active);
  color: var(--btn-warning-color);
}
.btn-warning:disabled, .btn-warning.disabled {
  background-color: var(--btn-warning-bg-disabled);
  border-color: var(--btn-warning-bg-disabled);
  color: var(--btn-warning-color);
}
.btn-warning.on {
  background-color: var(--interactive-color-active);
}
.btn-danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-color);
  border-color: var(--btn-danger-bg);
}
.btn-danger:hover, .btn-danger:focus {
  background-color: var(--btn-danger-bg-hover);
  border-color: var(--btn-danger-bg-hover);
  color: var(--btn-danger-color);
}
.btn-danger:active, .btn-danger:hover:active, .btn-danger:focus:active {
  background-color: var(--btn-danger-bg-active);
  border-color: var(--btn-danger-bg-active);
  color: var(--btn-danger-color);
}
.btn-danger:disabled, .btn-danger.disabled {
  background-color: var(--btn-danger-bg-disabled);
  border-color: var(--btn-danger-bg-disabled);
  color: var(--btn-danger-color);
}
.btn-danger.on {
  background-color: var(--interactive-color-active);
}
.btn-success {
  background-color: var(--btn-success-bg);
  color: var(--btn-success-color);
  border-color: var(--btn-success-bg);
}
.btn-success:hover, .btn-success:focus {
  background-color: var(--btn-success-bg-hover);
  border-color: var(--btn-success-bg-hover);
  color: var(--btn-success-color);
}
.btn-success:active, .btn-success:hover:active, .btn-success:focus:active {
  background-color: var(--btn-success-bg-active);
  border-color: var(--btn-success-bg-active);
  color: var(--btn-success-color);
}
.btn-success:disabled, .btn-success.disabled {
  background-color: var(--btn-success-bg-disabled);
  border-color: var(--btn-success-bg-disabled);
  color: var(--btn-success-color);
}
.btn-success.on {
  background-color: var(--interactive-color-active);
}
.default-color {
  color: var(--btn-default-bg);
  border-color: var(--btn-default-bg);
}
.default-color:hover, .default-color:focus {
  color: var(--btn-default-bg);
  filter: brightness(1.4);
}
.default-color:active {
  color: var(--btn-default-bg);
  filter: brightness(0.9);
}
.primary-color {
  color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
}
.primary-color:hover, .primary-color:focus {
  color: var(--btn-primary-bg);
  filter: brightness(1.4);
}
.primary-color:active {
  color: var(--btn-primary-bg);
  filter: brightness(0.9);
}
.secondary-color {
  color: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-bg);
}
.secondary-color:hover, .secondary-color:focus {
  color: var(--btn-secondary-bg);
  filter: brightness(1.4);
}
.secondary-color:active {
  color: var(--btn-secondary-bg);
  filter: brightness(0.9);
}
/* overrides */
.btn-outline-primary {
  color: #11618c;
  background-image: none;
  background-color: transparent;
  border-color: #1681ba;
}
.btn-outline-primary.focus {
  color: #fff;
  background-color: #1681ba;
  border-color: #1681ba;
}
.open > .dropdown-toggle.btn-outline-primary {
  color: #fff;
  background-color: #1681ba;
  border-color: #1681ba;
}
.open > .dropdown-toggle.btn-outline-primary.focus {
  color: #fff;
  background-color: #0d4b6c;
  border-color: #093248;
}
.btn-outline-primary:disabled.focus {
  border-color: #4cb3ea;
}
.btn-icon:hover:before {
  color: #0181b9;
}
.btn-text a:hover {
  color: #0181b9;
}
.custom-checkbox [type="checkbox"] label {
  margin: 0;
}
.form-group.input-sidebar-control .sidebar-control:hover, .form-group.input-sidebar-control .sidebar-control:focus {
  color: var(--winterSecondColour);
}
.field-checkboxlist .checkboxlist-controls > div > a:hover > i {
  color: var(--winterMainColor);
}
.custom-checkbox input[type=checkbox]:indeterminate + label:before, .custom-radio input[type=checkbox]:indeterminate + label:before, .custom-checkbox input[type=checkbox]:checked + label:before, .custom-radio input[type=checkbox]:checked + label:before {
  border-color: var(--winterSecondColour);
  background-color: var(--winterSecondColour);
}
#layout-side-panel .sidepanel-content-header:after {
  border-top-color: var(--winterSecondColour);
}
.layout .layout-row .layout-cell .layout-container {
  padding: 20px 20px 0 20px;
}
.layout .layout-row .layout-cell .padded-container {
  padding: 24px 24px 0 24px;
}
.layout .layout-row .layout-cell.layout-container {
  padding: 20px 20px 0 20px;
}
.layout .layout-row .layout-cell.padded-container {
  padding: 24px 24px 0 24px;
}
.layout .layout-container {
  padding: 20px 20px 0 20px;
}
.layout .padded-container {
  padding: 24px 24px 0 24px;
}
.layout-cell.layout-container {
  padding: 20px 20px 0 20px;
}
.layout-cell.padded-container {
  padding: 24px 24px 0 24px;
}
/* Menu */
#layout-nav {
  position: sticky;
  z-index: 100;
  height: auto !important;
  background: var(--nav-bg);
  color: var(--mainmenu-color);
  font-family: var(--nav-font);
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  padding: 7px 24px 8px;
  border-bottom: 1px var(--gray_2) solid;
}
#layout-nav.collapse, #layout-nav.collapsing {
  display: flex !important;
}
#layout-nav .navbar-collapse {
  padding: 0;
}
#layout-nav .navbar-favicon {
  display: none;
}
#layout-nav .navbar-header {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#layout-nav .navbar-logo .logo, #layout-nav .navbar-favicon .logo {
  height: 40px;
}
#layout-nav .navbar-nav li.separator {
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
  height: 30px;
  margin: 0 10px 0 11px;
}
#layout-nav .navbar-nav .nav-item {
  font-size: 1em;
  color: var(--mainmenu-color);
  font-weight: 400;
}
#layout-nav .navbar-nav .nav-item a {
  margin-top: 1px;
  padding: 9px 16px 11px 17px;
  color: var(--mainmenu-color);
  position: relative;
  font-weight: 400;
}
#layout-nav .navbar-nav .nav-item:not(.active) a:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background: var(--mainmenu-color-hover);
  bottom: 0;
  left: 0;
  right: 0;
  transition: width 0.4s cubic-bezier(0, 0, 0, 1.11);
  margin: 0 6px;
}
#layout-nav .navbar-nav .nav-item:not(.active) a:hover, #layout-nav .navbar-nav .nav-item:not(.active) a:focus {
  background: none;
  color: var(--mainmenu-color-hover);
}
#layout-nav .navbar-nav .nav-item:not(.active) a:hover:before, #layout-nav .navbar-nav .nav-item:not(.active) a:focus:before {
  width: calc(100% - 12px);
}
#layout-nav .navbar-nav .nav-item.active a {
  color: var(--mainmenu-color-active);
}
#layout-nav button.navbar-toggle {
  padding: 8px;
  margin-right: 0;
}
#layout-nav button.navbar-toggle span.icon-bar {
  background: var(--mainmenu-color);
}
#layout-nav button.navbar-toggle:hover span.icon-bar, #layout-nav button.navbar-toggle:focus span.icon-bar {
  background: var(--mainmenu-color-hover);
}
#layout-nav button.navbar-toggle:active span.icon-bar {
  background: var(--interactive-color-active);
}
@media (max-width: 768px) {
  #layout-nav {
    padding: 12px;
  }
  #layout-nav .navbar-favicon {
    display: block;
  }
  #layout-nav .navbar-logo {
    display: none;
  }
}
#layout-footer #footer {
  background: #fff;
  padding: 40px;
  border-top: 3px var(--winterMainColor) solid;
  display: flex;
  flex-direction: row;
  align-content: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  flex: 100%;
}
#layout-footer #footer .container {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: nowrap;
  align-content: center;
}
#layout-footer #footer .buildFlag {
  margin-left: auto;
}
#layout-footer #footer p.muted.credit {
  margin: 0;
}
.control-breadcrumb {
  background: var(--winterMainColor);
}
.control-breadcrumb ul {
  background: rgba(255, 255, 255, 0.8);
}
.control-breadcrumb ul li {
  background: var(--winterMainColor);
}
.control-breadcrumb ul li:before, .control-breadcrumb ul li:after {
  border-left-color: var(--winterMainColor);
}
.control-breadcrumb ul li:last-child {
  background-color: transparent;
  color: var(--headings-color);
}
.control-breadcrumb ul li:last-child:before, .control-breadcrumb ul li:last-child:after {
  border-left-color: transparent;
}
.action .profile {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  margin: 0 24px;
}
.action .profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.action .menu {
  position: absolute;
  top: 60px;
  right: 10px;
  width: 210px;
  padding: 12px 24px 40px;
  background-color: #fff;
  -webkit-box-shadow: var(--shadow_heavy);
  box-shadow: var(--shadow_heavy);
  box-sizing: border-box;
  border-radius: var(--border-radius-lg);
  transition: 1s;
  visibility: hidden;
  opacity: 0;
}
.action .menu.active {
  visibility: visible;
  opacity: 1;
}
.action .menu::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 28px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  transform: rotate(45deg);
}
.action .menu h3 {
  color: var(--winterMainColor);
  font-size: 1.2em;
  margin: 12px 2px 24px;
}
.action .menu ul li {
  list-style: none;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  align-items: center;
  justify-content: center;
}
.action .menu ul {
  padding-left: 10px !important;
}
.action .menu ul li img {
  max-width: 20px;
}
.schedulernav {
  position: relative;
  display: flex;
  align-items: center;
}
.schedulernav .dropdown {
  margin: 0 4px;
}
/* Partials */
/* Elements */
:root {
  --infoWidth: 20%;
  --contentWidth: 80%;
}
#SubProjectsTable .subProject .subProjectInfo {
  display: flex;
  flex-basis: var(--infoWidth);
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  width: var(--infoWidth);
  padding: 18px 0 0;
}
#SubProjectsTable .subProject .subProjectInfo .name {
  margin: 0;
  padding: 0 24px;
  word-break: break-word;
  text-transform: none;
}
#SubProjectsTable .subProject .subProjectInfo .progressInfo {
  display: flex;
  flex: 100%;
  flex-wrap: nowrap;
  padding: 8px 24px 24px;
  align-items: flex-start;
  align-content: center;
  flex-direction: row;
  padding-bottom: 24px;
}
#SubProjectsTable .subProject .subProjectInfo .progress {
  flex: 1;
  margin-bottom: 0;
  margin: 0;
  height: 40px;
  border-radius: var(--border-radius-sm);
  background: var(--gray_1);
  margin: 0 4px 0 0;
}
#SubProjectsTable .subProject .subProjectInfo .progress .progress-bar {
  font-size: 14px;
  font-weight: 500;
  line-height: 38px;
  color: white;
  background-color: var(--winterThirdColor);
}
#SubProjectsTable .subProject .subProjectInfo .hoursTotal {
  padding: 8px;
  background: var(--gray_1);
  height: 40px;
  width: 50px;
  text-align: center;
}
#AvailabilityTable {
  --infoWidth: 180px;
  --contentWidth: 86%;
}
#AvailabilityTable .tableContents {
  padding-top: 12px;
}
#AvailabilityTable .tableRow .weeksTasks {
  padding-bottom: 0;
}
#AvailabilityTable .infoColumn {
  display: flex;
  flex-basis: var(--infoWidth);
  flex-wrap: nowrap;
  flex-direction: row;
  width: var(--infoWidth);
  justify-content: flex-end;
  align-content: center;
}
#AvailabilityTable .infoColumn h5 {
  word-break: break-all;
  margin: 0;
  padding: 16px 12px;
  font-size: 0.9em;
}
.plannerTable {
  width: 100%;
  background: white;
  padding: 24px 60px 40px 40px;
}
.plannerTable h4.plannerTableHeader {
  border-bottom: 1px var(--gray_3) solid;
  width: 100%;
  padding: 8px 0 12px 12px;
  margin: 0;
}
.plannerTable .tableHeader {
  position: relative;
  width: 100%;
  display: flex;
  flex-basis: var(--infoWidth);
  flex-direction: row;
  flex-wrap: nowrap;
}
.plannerTable .tableHeader:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0px;
  background: var(--gray_4);
  height: 2px;
  width: 100%;
  z-index: 1;
}
.plannerTable .tableHeader .yearIndicator {
  flex-basis: var(--infoWidth);
  display: flex;
}
.plannerTable .tableHeader .yearIndicator h3 {
  margin: auto auto 24px 24px;
}
.plannerTable .tableHeader .weeksHeader {
  display: flex;
  flex-basis: var(--contentWidth);
  flex-direction: row;
  position: relative;
  height: 100px;
  flex-wrap: nowrap;
}
.plannerTable .tableHeader .weeksHeader .weekColumns {
  background: linear-gradient(90deg, transparent, var(--gray_1) 60%, transparent);
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
.plannerTable .tableHeader .weeksHeader .weekColumns .week {
  position: relative;
  flex: 100%;
  height: 100%;
  position: relative;
  padding: 4px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
.plannerTable .tableHeader .weeksHeader .weekColumns .week.isCurrentWeek {
  color: var(--winterMainColor);
  font-weight: 700;
}
.plannerTable .tableHeader .weeksHeader .weekColumns .week .weeknumber {
  font-size: 1.2em;
  font-weight: 500;
}
.plannerTable .tableHeader .weeksHeader .weekColumns .week .weekdates {
  text-align: center;
  font-size: 0.8em;
}
.plannerTable .tableHeader .weeksHeader .weekColumns .week:before {
  position: absolute;
  content: "";
  height: calc(100% - 40px);
  width: 2px;
  background: var(--gray_3);
  right: 0;
  right: 0;
  margin: 20px 0;
}
.plannerTable .tableHeader .weeksHeader .weekColumns .week:last-child:before {
  content: none;
}
.plannerTable .tableNavbutton {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 9px 0 0 0;
  width: 21px;
  height: calc(100% - 18px);
  border: none;
  background: none;
  font-weight: 100;
  font-size: 32px;
  color: var(--interactive-color);
  background: none;
  transition: 0.2s cubic-bezier(0, 0, 0, 1) all;
  padding: 0;
}
.plannerTable .tableNavbutton:hover {
  color: var(--interactive-color-hover);
}
.plannerTable .tableNavbutton:hover.pa_left {
  left: -44px;
}
.plannerTable .tableNavbutton:hover.pa_right {
  right: -44px;
}
.plannerTable .tableNavbutton:active, .plannerTable .tableNavbutton:hover:active {
  color: var(--interactive-color-active);
}
.plannerTable .tableNavbutton.pa_left {
  left: -40px;
}
.plannerTable .tableNavbutton.pa_right {
  right: -40px;
}
.plannerTable .tableNavbutton.small {
  font-size: 24px;
  width: 16px;
}
.plannerTable .tableNavbutton.small.pa_left {
  left: -16px;
}
.plannerTable .tableNavbutton.small.pa_right {
  right: -16px;
}
.plannerTable .tableNavbutton.small:active.pa_left, .plannerTable .tableNavbutton.small:hover:active.pa_left {
  left: -18px;
}
.plannerTable .tableNavbutton.small:active.pa_right, .plannerTable .tableNavbutton.small:hover:active.pa_right {
  right: -18px;
}
.plannerTable .tableContents {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.plannerTable .tableRow {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.plannerTable .tableRow .infoFiller {
  width: var(--infoWidth);
}
.plannerTable .tableRow .PlannedWeeks {
  width: var(--contentWidth);
  position: relative;
}
.plannerTable .tableRow .PlannedWeeks .planningSubProject {
  position: relative;
  height: 100%;
}
.plannerTable .tableRow .weeksTasks {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 0;
  grid-auto-flow: dense;
  padding-bottom: 32px;
}
.plannerTable .tableRow:nth-child(even) {
  background: var(--gray_1);
}
.plannerTable .tableRow:nth-child(even) .subProjectInfo .hoursTotal, .plannerTable .tableRow:nth-child(even) .subProjectInfo .progress {
  background: white;
}
.plannerTable .tableInfo {
  margin: 32px 40px 18px;
}
.plannerTable .weeksCellsWrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex: 100%;
  background: transparent;
  z-index: 0;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}
body:not(.canEdit) #SubProjectsTable button, body:not(.canEdit) #SubProjectsTable a {
  cursor: unset;
}
.cell {
  background: transparent;
  border: 1px var(--gray_2) solid;
  flex: 1;
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  transition: 0.5s cubic-bezier(0, 0, 0, 0.99) all;
  z-index: 1;
}
.cell i {
  color: white;
  opacity: 0;
  transition: 0.5s cubic-bezier(0, 0, 0, 0.99) all;
  font-size: 28px;
}
.cell.closedCell {
  border-color: var(--gray_3);
  background: var(--gray_3);
}
.openCells .cell.closedCell {
  cursor: not-allowed;
}
.openCells .cell.activeCell {
  cursor: cell;
}
.openCells .cell.activeCell.selected, .openCells .cell.activeCell.selected .progressMeter {
  background: var(--winterSecondColour);
}
.openCells .cell.activeCell i {
  display: block;
  margin: auto;
}
.openCells .cell.activeCell:active i, .openCells .cell.activeCell:hover i {
  opacity: 1;
}
.openCells .cell.activeCell:hover, .openCells .cell.activeCell:hover.progressMeter {
  background: var(--interactive-color);
  opacity: 0.45;
}
.openCells .cell.activeCell:active, .openCells .cell.activeCell:hover:active {
  background: var(--interactive-color-hover);
  opacity: 1;
}
.cell.plannedCell, .cell.availabilityCell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cell.plannedCell .progressMeter, .cell.availabilityCell .progressMeter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
.cell.plannedCell span.amount, .cell.availabilityCell span.amount {
  z-index: 1;
  font-weight: 700;
  color: var(--gray_7);
  font-size: 1.2em;
}
.cell.availabilityCell span.amount {
  color: var(--gray_7);
}
.cell.availabilityCell.NoAvailability {
  background: white;
}
.cell.plannedCell span.amount {
  color: var(--progress_textcolor);
}
.cell.plannedCell.overPlanned span.amount {
  color: white;
}
.cell.plannedCell.overPlanned .progressMeter {
  background: var(--errorColour) !important;
}
.cell.plannedCell .progressMeter {
  background: rgba(var(--winterMainColorRGB), 0.2);
}
body.canEdit .task {
  cursor: pointer;
}
body .task {
  position: relative;
  z-index: 1;
  height: 44px;
  display: flex;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.06);
  font-weight: 600;
  overflow: hidden;
}
body .task.ptask {
  cursor: unset;
}
body .task.extendsBefore:before, body .task.extendsAfter:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 21px;
  z-index: 1;
}
body .task.extendsBefore:before {
  left: 0;
  background: linear-gradient(90deg, white, transparent);
}
body .task.extendsAfter:after {
  right: 0;
  background: linear-gradient(90deg, transparent, white);
}
body .task.ptask {
  color: var(--progress_textcolor);
}
body .task.ptask.projectOverPlanned {
  color: var(--errorColour);
  background: var(--progress_100);
}
body .task.ptask .progressRiser {
  display: none;
}
body .task.ptask.OverPlanned .hoursView {
  color: white;
  background: red;
}
body .task .taskInner {
  flex: 1;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 0 8px;
}
body .task .taskInner .taskName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
body .task .taskInner .taskUser {
  overflow: hidden;
  max-height: calc(1.1em + 4px);
  word-break: break-all;
  line-height: 1.1em;
}
body .task.whitecolor {
  color: white;
}
body .task .hoursView {
  position: relative;
  flex-basis: 60px;
  height: 100%;
  flex-shrink: 1;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 1;
}
body .task .progressRiser {
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
body .task.OverPlanned .hoursView {
  color: white;
}
body .task.OverPlanned .progressRiser {
  background: var(--errorColour);
}
body .task.Unavailable {
  background-color: var(--gray_2) !important;
}
body .task.Unavailable .taskInner:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-image: repeating-linear-gradient(-45deg, var(--errorColour), var(--errorColour) 4px, transparent 5px, transparent 10px);
  z-index: -1;
  opacity: 0.6;
}
body .task.Unavailable .taskUser {
  color: var(--errorColour);
  background: var(--gray_2);
  padding: 2px 12px;
  border-radius: var(--border-radius-md);
}
body .task.Unavailable .hoursView {
  background: var(--gray_2);
  color: black;
}
body .task.Unavailable .progressRiser {
  display: none;
}
body .task.Planned .hoursView {
  border: 1px var(--progress_100) solid;
}
body .task.Planned .progressRiser {
  height: 100%;
}
.modal a.close {
  position: relative;
  z-index: 90;
  padding: 8px 24px;
  background: transparent;
  cursor: pointer;
  border: 0;
  -webkit-appearance: none;
  font-size: 64px;
  opacity: 1;
  color: var(--interactive-color);
}
.modal a.close:hover, .modal a.close:focus {
  color: var(--interactive-color-hover);
  text-decoration: none;
}
.modal a.close:active {
  color: var(--interactive-color-active);
  text-decoration: none;
}
.modal a.close.disabled, .modal a.close.disabled:hover, .modal a.close.disabled:focus, .modal a.close.disabled:active, .modal a.close:disabled {
  pointer-events: none;
  color: var(--interactive-color-disabled);
  text-decoration: none;
}
.modal .modal-body {
  padding: 24px 40px 60px;
}
.modal .modal-body .modal-header {
  padding: 16px 0 0;
  margin: 0;
  border-bottom: 0;
}
.plannerModal .popupDateRangePicker {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
  align-items: center;
  padding: 0 0 40px 0;
}
.plannerModal .popupDateRangePicker .datePicker {
  padding: 0 24px 0 0;
}
.plannerModal .submitInfo {
  border: 1px var(--gray_2) solid;
  background: var(--gray_1);
  border-radius: var(--border-radius-lg);
  padding: 6px 24px 10px;
  margin: 24px 0;
}
.plannerModal .modalButtons {
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  padding: 24px 0 0;
}
.plannerModal .modalButtons button {
  margin: 0 0 0 18px;
}
.popupDateRangePicker {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
  align-items: center;
}
#ShortAvailableOverview .progressbar {
  padding: 0 0 12px 0;
}
#ShortAvailableOverview .progressbar.OverPlanned .progress-bar {
  background: var(--errorColour);
}
#ShortAvailableOverview .progressbar .progressLabel {
  padding: 0 0 8px 0;
}
#ShortAvailableOverview .progressbar .progress {
  height: 12px;
  margin: 0;
}
#legendModal a.close {
  padding: 0;
}
.legendContents {
  display: grid;
  padding: 12px 40px 40px;
  border: 1px var(--gray_3) solid;
  background: white;
  border-radius: var(--border-radius-lg);
  justify-content: space-evenly;
  justify-items: end;
  box-shadow: 2px 2px 14px 0px rgba(0, 0, 0, 0.21);
}
.legendContents .task, .legendContents .widthwrapper {
  width: 160px;
}
.legendContents .widthwrapper {
  display: flex;
  justify-content: center;
}
.legendContents .tableNavbutton {
  position: relative;
  height: auto;
  width: auto;
  margin: 0;
  padding: 0 4px;
  left: 0 !important;
  right: 0 !important;
}
.legendItem {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  padding-bottom: 12px;
}
.legendLabel {
  padding-right: 18px;
  line-height: 40px;
  font-size: 1.1em;
}
#legendTrigger {
  text-align: right;
  cursor: pointer;
  color: var(--interactive-color);
}
#legendTrigger:hover, #legendTrigger:focus {
  color: var(--interactive-color-hover);
  text-decoration: none;
}
#legendTrigger:active {
  color: var(--interactive-color-active);
  text-decoration: none;
}
#legendTrigger.disabled, #legendTrigger.disabled:hover, #legendTrigger.disabled:focus, #legendTrigger.disabled:active, #legendTrigger:disabled {
  pointer-events: none;
  color: var(--interactive-color-disabled);
  text-decoration: none;
}
.legendClose {
  cursor: pointer;
  font-size: 28px;
  padding: 0 0 18px 0;
  line-height: 28px;
  color: var(--interactive-color);
  color: black;
  font-family: system-ui;
  font-weight: 400;
}
.legendClose:hover, .legendClose:focus {
  color: var(--interactive-color-hover);
  text-decoration: none;
}
.legendClose:active {
  color: var(--interactive-color-active);
  text-decoration: none;
}
.legendClose.disabled, .legendClose.disabled:hover, .legendClose.disabled:focus, .legendClose.disabled:active, .legendClose:disabled {
  pointer-events: none;
  color: var(--interactive-color-disabled);
  text-decoration: none;
}
.userInfo {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0 40px 24px 40px;
}
.userInfo h3 {
  margin: 0;
  padding: 0 12px;
}
.userInfo .account-avatar {
  border-radius: 50%;
  height: 62px;
  width: auto;
}
.warningBox {
  border: 1px solid var(--warningColour);
  border-radius: var(--border-radius-md);
  padding: 24px;
  background: var(--warningColour);
  margin: 12px 0;
  position: relative;
}
.warningBox .warningShimmer {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.54);
}
.warningBox .warningMessage {
  z-index: 2;
  position: relative;
}
/* Pages */
/**
Custom login page
 */
#UserLogin {
  /* STRUCTURE */
  /* BASIC */
  /* TABS */
  /* FORM TYPOGRAPHY*/
  /* ANIMATIONS */
  /* Simple CSS3 Fade-in-down Animation */
  /* Simple CSS3 Fade-in Animation */
  /* Simple CSS3 Fade-in Animation */
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Show the checkmark when checked */
  /* Style the checkmark/indicator */
}
#UserLogin .wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 60px 40px;
}
#UserLogin .infocolor {
  color: #0074ac;
}
#UserLogin #loginFormContent {
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  background: #fff;
  padding: 32px;
  width: 90%;
  max-width: 450px;
  position: relative;
  padding: 0px;
  -webkit-box-shadow: var(--shadow_heavy);
  box-shadow: var(--shadow_heavy);
  text-align: center;
}
#UserLogin #loginFormContent .logo {
  padding: 60px 40px 52px 40px;
}
#UserLogin #loginFormContent .logo img {
  height: 40px;
}
#UserLogin #loginFormFooter {
  background-color: #f6f6f6;
  border-top: 1px solid #dce8f1;
  padding: 24px;
  text-align: center;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}
#UserLogin h2.inactive {
  color: #cccccc;
}
#UserLogin h2.active {
  color: #0d0d0d;
  border-bottom: 2px solid #5fbae9;
}
#UserLogin p.rememberme {
  font-size: 0.6em;
  margin: 0;
  font-weight: 500;
}
#UserLogin input[type=button], #UserLogin input[type=submit], #UserLogin input[type=reset], #UserLogin .btnscheduler {
  border: none;
  padding: 8px 60px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  font-size: 1.2em;
  -webkit-box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
  box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  margin: 12px 24px 52px;
  transition: all 150ms ease-in-out;
}
#UserLogin input[type=button]:hover, #UserLogin input[type=submit]:hover, #UserLogin input[type=reset]:hover {
  background-color: #39ace7;
}
#UserLogin input[type=button]:active, #UserLogin input[type=submit]:active, #UserLogin input[type=reset]:active {
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -o-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
}
#UserLogin input[type=text], #UserLogin input[type=password] {
  background-color: #f6f6f6;
  border: none;
  color: #0d0d0d;
  padding: 14px 24px;
  margin: 8px 24px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 75%;
  min-width: 240px;
  border: 2px solid #f6f6f6;
  transition: all 250ms ease-in-out;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
#UserLogin input[type=text]:focus, #UserLogin input[type=password]:focus {
  background-color: #fff;
  border-bottom: 2px solid #5fbae9;
}
#UserLogin .alert {
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  padding: 32px;
  width: 90%;
  max-width: 450px;
  position: relative;
  padding: 12px 24px;
  -webkit-box-shadow: var(--shadow_heavy);
  box-shadow: var(--shadow_heavy);
  text-align: center;
}
#UserLogin .fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#UserLogin .fadeIn {
  opacity: 0;
  -webkit-animation: fadeIn ease-in 1;
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 500ms;
  -moz-animation-duration: 500ms;
  animation-duration: 500ms;
}
#UserLogin .fadeIn.first {
  -webkit-animation-delay: 200ms;
  -moz-animation-delay: 200ms;
  animation-delay: 200ms;
}
#UserLogin .fadeIn.second {
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  animation-delay: 300ms;
}
#UserLogin .fadeIn.third {
  -webkit-animation-delay: 400ms;
  -moz-animation-delay: 400ms;
  animation-delay: 400ms;
}
#UserLogin .fadeIn.fourth {
  -webkit-animation-delay: 500ms;
  -moz-animation-delay: 500ms;
  animation-delay: 500ms;
}
#UserLogin .underlineHover:after {
  display: block;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 2px;
  background-color: #56baed;
  content: "";
  transition: width 100ms;
}
#UserLogin .underlineHover:hover {
  color: #0d0d0d;
}
#UserLogin .underlineHover:hover:after {
  width: 100%;
}
#UserLogin #icon {
  width: 60%;
}
#UserLogin label.container {
  display: block;
  position: relative;
  padding-left: 12px;
  line-height: 1.2;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#UserLogin label.container p {
  margin-top: 4px;
}
#UserLogin label.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
#UserLogin .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: var(--gray_2);
}
#UserLogin label.container:hover input ~ .checkmark {
  background-color: var(--gray_3);
}
#UserLogin label.container input:checked ~ .checkmark {
  background-color: var(--winterMainColor);
}
#UserLogin .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
#UserLogin label.container input:checked ~ .checkmark:after {
  display: block;
}
#UserLogin label.container .checkmark:after {
  left: 9px;
  top: 2px;
  width: 8px;
  height: 15px;
  border: solid white;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#UserLogin form .spacer {
  height: 32px;
}
#availabilityOverview form#userSelect {
  padding: 0 24px;
}
#availabilitiesOverview .tableContents {
  padding-top: 0;
  font-size: 0.9em;
}
#availabilitiesOverview .availabilityRow {
  border-top: 1px var(--gray_2) solid;
  padding-bottom: 24px;
}
#availabilitiesOverview .availabilityRow:first-child {
  border-top: none;
}
#availabilitiesOverview .availabilityRow:nth-child(even) {
  background: var(--gray_1);
}
#availabilitiesOverview .availabilityRow .cell.plannedCell {
  border: none;
  font-size: 0.9em;
  height: 32px;
}
#availabilitiesOverview .tableRow.availability {
  height: 40px;
}
#availabilitiesOverview .tableRow.planned {
  height: 32px;
}
#availabilitiesOverview .tableRow:nth-child(even) {
  background: transparent;
}
#availabilitiesOverview .infoColumn h5.username {
  font-size: 1em;
  margin-right: auto;
}
#availabilitiesOverview .infoColumn h6 {
  font-size: 0.9em;
  padding: 0 18px;
  font-weight: 400;
  font-style: italic;
  margin: auto 0;
}
/* to be sorted */