/**
Variables and configurations
 */
/**
 SCSS main variables file,
***/
/**
Colors
 */
:root {
  --winterMainColor: #005C5A;
  /* Use a dark colour, the colour will be shaded lighter in menus etc... */
  --winterSecondColour: #c27a0a;
  /* Colour for interactive links and the primary button, use something that stands out */
  --winterMainColorRGB: 0, 92, 90;
  --winterSecondColourRGB: 194, 122, 10;
  --winterThirdColor: #005C5A;
  --winterThirdColorRGB: 194, 122, 10;
  --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: "Open Sans";
  --font-headings: "Open Sans";
  --body-weight: 400;
  --headings-weight: 700;
  --headings-color: var(--body-color);
}
/**
Body
 */
:root {
  --body-color: #000;
  --body-bg: rgba(var(--winterMainColorRGB), 0.05);
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
}
/**
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: var(--winterSecondColour);
  --btn-secondary-bg-hover: rgba(var(--winterSecondColourRGB), 0.8);
  --btn-secondary-bg-active:  rgba(var(--winterSecondColourRGB), 0.6);
  --btn-secondary-bg-disabled: var(--gray_3);
  --btn-secondary-color: white;
  --btn-primary-bg: var(--winterMainColor);
  --btn-primary-bg-hover: rgba(var(--winterMainColorRGB), 0.8);
  --btn-primary-bg-active: rgba(var(--winterMainColorRGB), 0.6);
  --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(--gray_1);
  --mainmenu-color-hover: var(--winterSecondColour);
  --mainmenu-color-active: var(--winterSecondColour);
  --nav-bg: var(--winterMainColor);
}
/**
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, button, input, optgroup, select, textarea, label, .form-control {
  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.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-primary-bg);
}
.btn.btn-primary:hover, .btn.btn-primary:focus {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-color);
}
.btn.btn-primary:active, .btn.btn-primary:hover:active, .btn.btn-primary:focus:active {
  background-color: var(--btn-primary-bg-active);
  border-color: var(--btn-primary-bg-active);
  color: var(--btn-primary-color);
}
.btn.btn-primary:disabled, .btn.btn-primary.disabled {
  background-color: var(--btn-primary-bg-disabled);
  border-color: var(--btn-primary-bg-disabled);
  color: var(--btn-primary-color);
}
.btn.btn-primary.on {
  background-color: var(--interactive-color-active);
}
.btn.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-bg);
}
.btn.btn-secondary:hover, .btn.btn-secondary:focus {
  background-color: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-color);
}
.btn.btn-secondary:active, .btn.btn-secondary:hover:active, .btn.btn-secondary:focus:active {
  background-color: var(--btn-secondary-bg-active);
  border-color: var(--btn-secondary-bg-active);
  color: var(--btn-secondary-color);
}
.btn.btn-secondary:disabled, .btn.btn-secondary.disabled {
  background-color: var(--btn-secondary-bg-disabled);
  border-color: var(--btn-secondary-bg-disabled);
  color: var(--btn-secondary-color);
}
.btn.btn-secondary.on {
  background-color: var(--interactive-color-active);
}
.btn.btn-info {
  background-color: var(--btn-info-bg);
  color: var(--btn-info-color);
  border-color: var(--btn-info-bg);
}
.btn.btn-info:hover, .btn.btn-info:focus {
  background-color: var(--btn-info-bg-hover);
  border-color: var(--btn-info-bg-hover);
  color: var(--btn-info-color);
}
.btn.btn-info:active, .btn.btn-info:hover:active, .btn.btn-info:focus:active {
  background-color: var(--btn-info-bg-active);
  border-color: var(--btn-info-bg-active);
  color: var(--btn-info-color);
}
.btn.btn-info:disabled, .btn.btn-info.disabled {
  background-color: var(--btn-info-bg-disabled);
  border-color: var(--btn-info-bg-disabled);
  color: var(--btn-info-color);
}
.btn.btn-info.on {
  background-color: var(--interactive-color-active);
}
.btn.btn-warning {
  background-color: var(--btn-warning-bg);
  color: var(--btn-warning-color);
  border-color: var(--btn-warning-bg);
}
.btn.btn-warning:hover, .btn.btn-warning:focus {
  background-color: var(--btn-warning-bg-hover);
  border-color: var(--btn-warning-bg-hover);
  color: var(--btn-warning-color);
}
.btn.btn-warning:active, .btn.btn-warning:hover:active, .btn.btn-warning:focus:active {
  background-color: var(--btn-warning-bg-active);
  border-color: var(--btn-warning-bg-active);
  color: var(--btn-warning-color);
}
.btn.btn-warning:disabled, .btn.btn-warning.disabled {
  background-color: var(--btn-warning-bg-disabled);
  border-color: var(--btn-warning-bg-disabled);
  color: var(--btn-warning-color);
}
.btn.btn-warning.on {
  background-color: var(--interactive-color-active);
}
.btn.btn-danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-color);
  border-color: var(--btn-danger-bg);
}
.btn.btn-danger:hover, .btn.btn-danger:focus {
  background-color: var(--btn-danger-bg-hover);
  border-color: var(--btn-danger-bg-hover);
  color: var(--btn-danger-color);
}
.btn.btn-danger:active, .btn.btn-danger:hover:active, .btn.btn-danger:focus:active {
  background-color: var(--btn-danger-bg-active);
  border-color: var(--btn-danger-bg-active);
  color: var(--btn-danger-color);
}
.btn.btn-danger:disabled, .btn.btn-danger.disabled {
  background-color: var(--btn-danger-bg-disabled);
  border-color: var(--btn-danger-bg-disabled);
  color: var(--btn-danger-color);
}
.btn.btn-danger.on {
  background-color: var(--interactive-color-active);
}
.btn.btn-success {
  background-color: var(--btn-success-bg);
  color: var(--btn-success-color);
  border-color: var(--btn-success-bg);
}
.btn.btn-success:hover, .btn.btn-success:focus {
  background-color: var(--btn-success-bg-hover);
  border-color: var(--btn-success-bg-hover);
  color: var(--btn-success-color);
}
.btn.btn-success:active, .btn.btn-success:hover:active, .btn.btn-success:focus:active {
  background-color: var(--btn-success-bg-active);
  border-color: var(--btn-success-bg-active);
  color: var(--btn-success-color);
}
.btn.btn-success:disabled, .btn.btn-success.disabled {
  background-color: var(--btn-success-bg-disabled);
  border-color: var(--btn-success-bg-disabled);
  color: var(--btn-success-color);
}
.btn.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: 9px 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, #layout-nav .navbar-favicon {
  padding-right: 24px;
}
#layout-nav .navbar-logo .logo, #layout-nav .navbar-favicon .logo {
  height: 24px;
}
#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: 5px 14px 11px;
  color: var(--mainmenu-color);
  position: relative;
}
#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 0;
  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;
  padding: 0 40px;
}
#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;
}
/* Partials */
/* Elements */
.control-filter-popover .filter-active-items a:hover, .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--winterMainColor);
}
#form-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
#Form {
  display: flex;
  flex-direction: column;
  flex-basis: 900px;
  margin: 0 40px;
  background: white;
  padding: 24px 40px 60px;
  margin-top: 40px;
  /**
    These are largely fallback values for when there is no style selected
     */
  /***
    Nice styling apply to all custom styling
    */
  /***
    Form Sleek style
     */
  /** Sleek only */
}
#Form .question {
  margin: 0 0 24px 0;
}
#Form .question.type_html {
  margin: 0 0 40px 0;
}
#Form .questionTitle {
  font-size: 1em;
  position: relative;
}
#Form .questionTitle.required:before {
  content: "*";
  font-size: 24px;
  font-family: sans-serif;
  color: #e30000;
  position: absolute;
  top: -10px;
  left: -12px;
}
#Form .formTitle {
  font-size: 1.75em;
  margin: 12px 0 40px;
}
#Form ul.list {
  padding-inline-start: 20px;
}
#Form li {
  list-style: none;
}
#Form .pika-single {
  width: auto;
  padding: 12px 32px 12px 12px;
}
#Form .pika-single .is-selected .pika-button {
  background: var(--winterSecondColour);
  color: white;
}
#Form .select2-container--default {
  width: 100% !important;
}
#Form .number {
  position: absolute;
  top: 2.1875rem;
  left: -1.25rem;
  color: var(--winterMainColor);
  font-size: 2rem;
}
#Form .label--checkbox, #Form .label--radio {
  position: relative;
  font-weight: 400;
  cursor: pointer;
}
#Form .label--text {
  width: 100%;
}
#Form .label--text input[type="text"], #Form .label--text input[type="password"], #Form .label--text textarea {
  border: 1px var(--gray_3) solid;
  border-radius: var(--border-radius-lg);
  width: 100%;
  height: 40px;
  padding: 0 8px;
}
#Form .label--fileinput input[type="file"] {
  font-size: 14px;
  color: gray;
}
#Form .label--fileinput input[type="file"]::file-selector-button {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-primary-bg);
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  padding: 12px 15px;
  border-radius: var(--btn-radius);
  box-shadow: none;
  border: none;
}
#Form .label--fileinput input[type="file"]::file-selector-button:hover, #Form .label--fileinput input[type="file"]::file-selector-button:focus {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-color);
}
#Form .label--fileinput input[type="file"]::file-selector-button:active, #Form .label--fileinput input[type="file"]::file-selector-button:hover:active, #Form .label--fileinput input[type="file"]::file-selector-button:focus:active {
  background-color: var(--btn-primary-bg-active);
  border-color: var(--btn-primary-bg-active);
  color: var(--btn-primary-color);
}
#Form .label--fileinput input[type="file"]::file-selector-button:disabled, #Form .label--fileinput input[type="file"]::file-selector-button.disabled {
  background-color: var(--btn-primary-bg-disabled);
  border-color: var(--btn-primary-bg-disabled);
  color: var(--btn-primary-color);
}
#Form.FormSleek input[type="text"], #Form.FormSleek input[type="password"], #Form.FormSleek textarea, #Form.FormCentered input[type="text"], #Form.FormCentered input[type="password"], #Form.FormCentered textarea, #Form.FormSleekMinimalistic input[type="text"], #Form.FormSleekMinimalistic input[type="password"], #Form.FormSleekMinimalistic textarea {
  width: 100%;
  border: 1px solid var(--gray_3);
  border-radius: var(--border-radius-md);
  font-weight: normal;
}
#Form.FormSleek .question.type_html ul.list, #Form.FormCentered .question.type_html ul.list, #Form.FormSleekMinimalistic .question.type_html ul.list {
  padding: 0;
}
#Form.FormSleek .htmlblock, #Form.FormCentered .htmlblock, #Form.FormSleekMinimalistic .htmlblock {
  padding: 24px;
  background: var(--gray_1);
}
#Form.FormSleek .checkbox, #Form.FormCentered .checkbox, #Form.FormSleekMinimalistic .checkbox {
  position: relative;
  top: 0;
  margin: 0 1rem 0 0;
  cursor: pointer;
}
#Form.FormSleek .checkbox:before, #Form.FormCentered .checkbox:before, #Form.FormSleekMinimalistic .checkbox:before {
  transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
  transform: rotate(-45deg) scale(0, 0);
  content: "";
  position: absolute;
  left: 0.1875rem;
  top: 0.125rem;
  z-index: 1;
  width: 0.75rem;
  height: 0.375rem;
  border: 3px solid var(--winterMainColor);
  border-top-style: none;
  border-right-style: none;
}
#Form.FormSleek .checkbox:checked:before, #Form.FormCentered .checkbox:checked:before, #Form.FormSleekMinimalistic .checkbox:checked:before {
  transform: rotate(-45deg) scale(1, 1);
}
#Form.FormSleek .checkbox:after, #Form.FormCentered .checkbox:after, #Form.FormSleekMinimalistic .checkbox:after {
  content: "";
  position: absolute;
  top: -0.125rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  background: #fff;
  border: 2px solid var(--gray_2);
  cursor: pointer;
}
#Form.FormSleek .radio, #Form.FormCentered .radio, #Form.FormSleekMinimalistic .radio {
  position: relative;
  margin: 0 1rem 0 0;
  cursor: pointer;
}
#Form.FormSleek .radio:before, #Form.FormCentered .radio:before, #Form.FormSleekMinimalistic .radio:before {
  transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
  transform: scale(0, 0);
  content: "";
  position: absolute;
  top: 0;
  left: 0.125rem;
  z-index: 1;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--winterMainColor);
  border-radius: 50%;
}
#Form.FormSleek .radio:checked:before, #Form.FormCentered .radio:checked:before, #Form.FormSleekMinimalistic .radio:checked:before {
  transform: scale(1, 1);
}
#Form.FormSleek .radio:after, #Form.FormCentered .radio:after, #Form.FormSleekMinimalistic .radio:after {
  content: "";
  position: absolute;
  top: -0.25rem;
  left: -0.125rem;
  width: 1rem;
  height: 1rem;
  background: #fff;
  border: 2px solid var(--gray_2);
  border-radius: 50%;
}
#Form.FormSleek .question, #Form.FormSleekMinimalistic .question {
  margin: 0 0 40px 0;
}
#Form.FormSleek .question.type_html, #Form.FormSleekMinimalistic .question.type_html {
  padding: 0;
}
#Form.FormSleek .formTitle, #Form.FormSleekMinimalistic .formTitle {
  font-size: 1.75em;
}
#Form.FormSleek .questionTitle, #Form.FormSleekMinimalistic .questionTitle {
  font-size: 1.1em;
  padding: 0 20px;
  margin-bottom: 24px;
}
#Form.FormSleek .questionTitle.required:before, #Form.FormSleekMinimalistic .questionTitle.required:before {
  font-size: 52px;
  top: -14px;
  left: unset;
  right: -12px;
}
#Form.FormSleek .pika-single, #Form.FormSleekMinimalistic .pika-single {
  width: auto;
  padding: 12px 32px 12px 12px;
}
#Form.FormSleek .pika-single .is-selected .pika-button, #Form.FormSleekMinimalistic .pika-single .is-selected .pika-button {
  background: var(--winterSecondColour);
}
#Form.FormSleek .select2-container--default, #Form.FormSleekMinimalistic .select2-container--default {
  width: 100% !important;
}
#Form.FormSleek .number, #Form.FormSleekMinimalistic .number {
  color: var(--winterMainColor);
  font-size: 2rem;
}
#Form.FormSleek .label--checkbox, #Form.FormSleek .label--radio, #Form.FormSleekMinimalistic .label--checkbox, #Form.FormSleekMinimalistic .label--radio {
  margin: 0 0 12px;
  line-height: 135%;
}
#Form.FormSleek .label--text input[type="text"], #Form.FormSleek .label--text input[type="password"], #Form.FormSleek .label--text textarea, #Form.FormSleekMinimalistic .label--text input[type="text"], #Form.FormSleekMinimalistic .label--text input[type="password"], #Form.FormSleekMinimalistic .label--text textarea {
  border: 1px var(--gray_3) solid;
  border-radius: var(--border-radius-lg);
}
#Form.FormSleek .checkbox:before, #Form.FormSleekMinimalistic .checkbox:before {
  border: 3px solid var(--winterMainColor);
  border-top-style: none;
  border-right-style: none;
}
#Form.FormSleek .checkbox:after, #Form.FormSleekMinimalistic .checkbox:after {
  border: 2px solid var(--gray_2);
}
#Form.FormSleek .radio:before, #Form.FormSleekMinimalistic .radio:before {
  background: var(--winterMainColor);
}
#Form.FormSleek .radio:after, #Form.FormSleekMinimalistic .radio:after {
  background: #fff;
  border: 2px solid var(--gray_2);
}
#Form.FormSleek .question:not(.type_html) {
  border-left: 3px solid var(--winterMainColor);
}
#Form.FormCentered .question {
  display: flex;
  flex-direction: row;
}
#Form.FormCentered .questionTitle {
  margin-top: 4px;
  flex: 20%;
}
#Form.FormCentered ul.list {
  flex: 80%;
}
#Form.FormCentered ul.list .label--textarea {
  width: 100%;
}
#Form.FormCentered ul.list textarea, #Form.FormCentered ul.list .datePicker, #Form.FormCentered ul.list input[type="text"], #Form.FormCentered ul.list input[type="password"], #Form.FormCentered ul.list input[type="datepicker"] {
  width: -webkit-fill-available;
  width: -moz-available;
}
#Form.FormCentered button[type="submit"] {
  float: right;
}
#Form .repeaterItem {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0 0 12px 0;
}
#Form .repeaterItem input[type=text] {
  padding-right: 32px;
}
#Form .repeaterItem .repeaterClose {
  display: inline;
  position: absolute;
  right: 12px;
  color: #6c6c6c;
}
#Form .repeaterItem .repeaterClose:hover {
  color: black;
}
#Form .repeaterItem .repeaterClose:focus, #Form .repeaterItem .repeaterClose:active {
  color: var(--winterMainColor);
}
#Form .btn.repeaterAddBtn {
  width: 100%;
  margin: 12px 0;
}
/* Pages */
#page\ FormPage .organisation {
  padding: 24px 40px;
}
/* to be sorted */