* {
  box-sizing: inherit;
}

:root {
/* A copy of our theme template */
  --primary-color: #056E76;
  --secondary-color: #034F56;
  --accent-color: #FF7A00;
  --main-bg: #F6FBFF;

  --info-color: #5789DF;
  --success-color: #55E07C;
  --warning-color: #D97706;
  --error-color: #FD4E5D;

  --primary-hover-color: #039DA1;
  --secondary-hover-color: #E0F4F4;
  --main-hover-bg: #D8F1F4;

  --primary-shadow-color: #C2E1E1;
  --error-shadow-color: #FD4E5D30;
  --warning-shadow-color: #FBC7565C;

  --black-89: #000000E3; /* Used for primary black - headers, titles etc */
  --black-64: #000000A3; /* Used for secondary titles, subtitles etc */
  --black-48: #0000007A; /* Used for non-essential information, and input borders */
  --black-36: #0000005C;
  --black-28: #00000047;
  --black-18: #0000002E;

  --white-89: #FFFFFFE3;
  --white-64: #FFFFFFA3;
  --white-48: #FFFFFF7A;
  --white-36: #FFFFFF5C;
  --white-28: #FFFFFF47;
  --white-18: #FFFFFF2E;
}

/* autoColor sets font-color as white or black
 * based on the background color of the element
 *
 * ref:
 * 1. https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/
 *
 */
.autoColor {
  --threshold: 0.6;
  --r: calc(var(--red) * 0.2126);
  --g: calc(var(--green) * 0.7152);
  --b: calc(var(--blue) * 0.0722);
  --sum: calc(var(--r) + var(--g) + var(--b));
  --perceived-lightness: calc(var(--sum) / 255);
  color: hsl(0, 0%, calc((var(--perceived-lightness) - var(--threshold)) * -10000000%)) !important;
}

{% comment %}Less brutal than a CSS reset - some *really basic* css rules {% endcomment %}
body {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--black-89);
}

h1, h2, h3, h4, h5, h6, p, a, span, li, label, input, select {
  line-height: inherit;
}

{% comment %}Maybe extend this list in future...{% endcomment %}
label {
  cursor: inherit;
  margin-bottom: 1rem;
}

h1 {
  font-weight: 500;
  font-size: 2.063rem; /* 33px */
  margin: 0 0 1rem 0;
}

h1.heavy {
  font-weight: 600;
}

h2 {
  font-weight: 500;
  font-size: 1.438rem; /* 23px */
  line-height: 2rem;
  margin: 0 0 1rem 0;
}

h2.heavy {
  font-weight: 600;
}

h2.light {
  font-weight: 400;
}

h3 {
  font-weight: 500;
  font-size: 1.25rem; /* 20px */
  margin: 0 0 0.3rem 0;
}

h3.heavy {
  font-weight: 600;
}

h3.light {
  font-weight: 400;
}

h4 {
  font-size: 0.938rem; /* 15px */
  font-weight: 400;
  margin: 0 0 1rem 0;
  color: var(--black-64);
}

h4.dark {
  color: var(--black-89); /* Used when there are multiple lines of h4, and we want to highlight the first line */
}

h4.heavy {
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
}

h5 {
  font-size: 1rem; /* 16px */
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}

p {
  font-weight: 400;
}

p, a, li {
  margin: 0 0 1rem 0;
}

b {
  font-weight: bold;
}

ul {
  list-style: circle;
  list-style-position: inside;
  margin: 0 0 0.3rem 0;
}

ul p {
  display: inline;
}

ol {
  list-style: decimal;
  list-style-position: inside;
  margin: 0 0 0.3rem 0;
}

ol p {
  display: inline;
}

li ul {
	margin-left: 1rem;
	margin-top: 0.2rem;
	font-size: 0.9rem;
}

li ul li {
	margin-bottom: 0.25rem;
}

h1:first-child, h2:first-child, h3:first-child, p:first-child {
  padding-top: 0
}

.material-icons,
.material-icons-outlined,
.material-icons-round {
  font-size: 1.5rem;
  color: var(--primary-color);
}

span.warning, small.warning {
  color: var(--warning-color);
}

span.error, small.error {
  color: var(--error-color);
}

/********* React Select Styling *********/
div.react-select-v4 input {
  margin: 0;
  max-width: 250px;
}

div.Select-control {
  border-style: solid;
  border-color: var(--black-48);
  border-width: 1px;
  border-radius: 0.813rem !important;
  height: initial !important;
  background-color: white;
}

div.Select-control:focus-within {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0.813rem var(--primary-shadow-color);
}

span.Select-arrow-zone {
  padding-right: 1.563rem !important;
}

div.Select-input {
  height: 1.5rem;
  margin-left: 0 !important;
  padding-left: 0;
}

div.Select-input > input {
  border-radius: 0;
  line-height: 1.4rem;
  max-width: 250px;
}

div.Select-input > input:hover {
  border-color: unset !important;
  box-shadow: unset !important;
}

div.Select-input > input:focus {
  border-color: unset !important;
  box-shadow: unset !important;
}

div.Select-control input {
  padding: 0;
}

/* Select--single and Select--multi differ that for the Select-value the first
 uses position: absolute and the latter uses static, so need completely different
 rules */ 

/* Select--single styling */
div.Select--single div.Select-multi-value-wrapper {
  padding: 0.8125rem 1rem;
}

div.Select > div.Select-control div.Select-value {
  color: var(--black-64);
  font-weight: 500;
  border-radius: 1rem;
}

div.Select--single > div.Select-control div.Select-value,
div.Select--single > div.Select-control div.Select-placeholder {
/* Select--single has a Select-value that is position absolutely */
  line-height: 1.5;
  padding: 0.8125rem 2.3rem 0.8125rem 1rem;
  border: none;
}

/* Select--multi styling */
div.Select--multi div.Select-multi-value-wrapper {
  padding: 0.8125rem 1rem;
}

div.Select--multi > div.Select-control div.Select-value {
/* Select--multi has a Select-value positioned statically */
  line-height: 1.5;
  margin: 0 0.5rem 0.5rem 0;
  border: none;
}

div.Select--multi > div.Select-control div.Select-placeholder {
  line-height: 1.5;
  padding: 0.8125rem 1rem;
  font-weight: 500;
}

div.Select--single > div.Select-control div.Select-value .Select-value-label {
  margin: 0;
  text-decoration: none;
  color: inherit;
}

div.Select--multi > div.Select-control div.Select-value .Select-value-label {
  display: flex;
  margin: 0;
  padding: 0 0.4rem 0 1rem;
  text-decoration: none;
  color: inherit;
  line-height: 1.75rem;
}

div.Select--multi > div.Select-control div.Select-value .Select-value-label i.material-icons {
  margin-right: 0.4rem;
  line-height: inherit;
}

div.Select--multi.is-disabled > div.Select-control div.Select-value .Select-value-label {
  padding: 0 1rem;
}

span.Select-value-icon {
/* Hide the default Select-value-icon and replace with a material icon */
  float: right;
  padding: 0 0.2rem !important;
  border: none !important;
  font-size: 0; /* hack to hide the icon */
}

span.Select-value-icon:after {
  font-family: "Material Icons Round";
  content: "cancel";
  color: var(--black-64);
  line-height: 1.8rem;
  font-size: 1.4rem; /* hack to create a new icon */
}

/* Dropdown underneath react select */
div.Select-menu-outer {
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.12);
  border-radius: 1rem;
  overflow: hidden;
  top: calc(100% + 0.2rem);
  left: 3rem;
  right: 1rem;
  width: initial;
}

@media screen and (max-width: 800px) {
  div.Select-menu-outer {
    left: 0;
    right: 0;
  }
}

/******* Basic input styling *******/
input, textarea, select {
  outline: none;
  font-family: inherit;
  font-size: inherit;
  text-overflow: ellipsis;
}

input.warning {
  border-color: var(--warning-color) !important;
}

input.error {
  border-color: var(--error-color) !important;
}

/******* Checkbox Input Styling *******/
label input[type="checkbox"] + span {
  display: block;
  margin: -2.1rem 0 1rem 2.4rem;
}

label input[type="checkbox"] {
  vertical-align: middle;
  margin-right: 0.7rem;
}

input[type="checkbox"] {
  border: none;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  cursor: pointer;
}

input[type="checkbox"]:after {
  content: 'check_box_outline_blank';
  font-family: 'Material Icons Round';
  color: var(--black-48);
  font-size: 1.5rem;
}

input[type="checkbox"]:checked {
}

input[type='checkbox']:checked:after {
  content: 'check_box';
  color: var(--primary-color);
}

input[type=checkbox]:disabled + span {
  color: var(--black-28);
}

input[type='checkbox']:disabled:after {
  color: var(--black-28);
}

/******* Toggle Input Styling *******/
label input[type="checkbox"].toggle + span {
  display: block;
  margin: -2.25rem 0 1rem 3rem;
}

input[type="checkbox"].toggle {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  margin: 1rem 1rem 1rem 0;
}

input[type="checkbox"].toggle:before {
  content: " ";
  width: 2.125rem;
  height: 0.875rem;
  border-radius: 2.125rem;
  background-color: #B8B8B8;
  display: block;
}

input[type="checkbox"].toggle:after {
  content: " ";
  width: 1.313rem;
  height: 1.313rem;
  border-radius: 1.313rem;
  top: -0.188rem;
  left: -0.188rem;  
  background-color: #858585;
  position: absolute;
  display: block;
}

input[type="checkbox"].toggle:checked:before {
  background-color: #81b6ba; /* background of toggle button in active state */
}

input[type="checkbox"].toggle:checked:after {
  left: 1.125rem;
  background-color: var(--primary-color);  
}

input[type="checkbox"].toggle:disabled:before, input[type="checkbox"].toggle:disabled:after {
  background-color: #d3d7cf;
  cursor: initial;
}

/******* Text Input Styling *******/

label span + input[type="text"],
label span + input[type="email"],
label span + input[type="url"],
label span + input[type="password"],
label span + input[type="number"],
label span + input[type="time"],
label span + input[type="date"],
label span + input[type="tel"],
label span + input:not([type]),
label span + textarea {
  margin-left: 1rem;
  margin-bottom: 1.25rem;
}


label p + input[type="text"],
label p + input[type="email"],
label p + input[type="url"],
label p + input[type="password"],
label p + input[type="number"],
label p + input[type="time"],
label p + input[type="date"],
label p + input:not([type]),
label p + textarea {
  margin-bottom: 1.25rem;
}

label p {
  margin-bottom: 0.5rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input:not([type]) {
/* Failed attempt to get input fields to get narrowed on mobile screens */
/*  max-width: 350px;
  width: 100%; */
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="time"],
input[type="date"],
input[type="tel"],
input:not([type]),
textarea {
  border-style: solid;
  border-color: var(--black-48);
  border-width: 1px;
  border-radius: 0.813rem;
  background-color: white;
  margin: 0 0 1.25rem 0;
  padding: 0.8125rem 1rem;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="time"]:hover,
input[type="date"]:hover,
input[type="tel"]:hover,
input:not([type]):hover,
textarea:hover {
  box-shadow: 0 0 0.813rem var(--black-18);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0.813rem var(--primary-shadow-color);
}

input[type="text"].warning:focus,
input[type="email"].warning:focus,
input[type="url"].warning:focus,
input[type="password"].warning:focus,
input[type="number"].warning:focus,
input[type="time"].warning:focus,
input[type="date"].warning:focus,
input[type="tel"].warning:focus,
input:not([type]).warning:focus,
select.warning:focus,
textarea.warning:focus {
  border-color: var(--warning-color);
  box-shadow: 0 0 0.813rem var(--warning-shadow-color);
}

input[type="text"].error:focus,
input[type="email"].error:focus,
input[type="url"].error:focus,
input[type="password"].error:focus,
input[type="number"].error:focus,
input[type="time"].error:focus,
input[type="date"].error:focus,
input[type="tel"].error:focus,
input:not([type]).error:focus,
select.error:focus,
textarea.error:focus {
  border-color: var(--error-color);
  box-shadow: 0 0 0.813rem var(--error-shadow-color);
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="url"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="time"]:disabled,
input[type="date"]:disabled,
input[type="tel"]:disabled,
input:not([type]):disabled,
select:disabled,
textarea:disabled {
  background-color: #f3f3f3;
}

/******* select styling *******/
/* Unless you add extra elements, it's not possible to restyle the dropdown or arrow against a select element */
select {
  border-style: solid;
  border-color: var(--black-48);
  border-width: 1px;
  border-radius: 0.813rem;
  background-color: white;
  margin: 0 0 1.25rem 0;
  padding: 0.8125rem 1rem;
}

span + select {
  margin-left: 1rem;
}

select:after {
  position: absolute;
  content: "";
  top: 0.875rem;
  right: 0.625rem;
  width: 0;
  height: 0;
  border: 0.375rem solid green;
  border-color: red transparent transparent transparent;
}

/******* radio button styling *******/
label input[type="radio"] {
  vertical-align: middle;
}

input[type="radio"] {
  appearance: none;
  border: none;
  -webkit-appearance: none;
  font-size: 1.25rem;
  margin-right: 0.5rem;
  cursor: pointer;
}

input[type="radio"]:after {
  font-family: 'Material Icons';
  content: "radio_button_unchecked";
  color: var(--black-48);
}

input[type="radio"]:checked:after {
  content: "radio_button_checked";
  color: var(--primary-color);
}

input[type="radio"]:disabled:after,
input[type="radio"]:disabled:checked:after,
input[type="radio"]:disabled + span {
  color: var(--black-28);
}


/******* text block styling *******/
em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

small {
  font-size: 0.8rem;
}

/******* Buttons styling *******/
button, .button {
  font-size: 0.875rem; /* 14px */
  font-family: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  background-color: var(--primary-color);
  transition: background-color 0.3s ease;  
  color: #fff;
  border: none;
  border-radius: 0.813rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  padding: 0.625rem 1rem;
  margin: 0 0 1rem 0;
  white-space: nowrap;
}

button.small, .button.small {
  padding: 0.2rem 0.6rem;
  border-radius: 0.6rem;
  font-size: 0.75rem;
}

button > *, .button > * {
  vertical-align: middle;
}

button i:not(:only-child), .button i:not(:only-child),
button img:not(:only-child), .button img:not(:only-child) {
  /* Put icons at a nice place on buttons */
  line-height: 1; /* Less than the text next to it, so it sits fitting against the top left */
  margin: -.2rem .813rem -.2rem -.1rem;
}

button .material-icons,
.button .material-icons,
button .material-icons-round,
.button .material-icons-round,
button .material-icons-outlined,
.button .material-icons-outlined {
  color: var(--white-89);
  font-size: 1.25rem;
}

button .material-icons:not(:only-child):last-child,
.button .material-icons:not(:only-child):last-child,
button .material-icons-outlined:not(:only-child):last-child,
.button .material-icons-outlined:not(:only-child):last-child {
    margin-left: 1rem;
}


button:disabled .material-icons,
.button:disabled .material-icons,
button:disabled .material-icons-round,
.button:disabled .material-icons-round,
button:disabled .material-icons-outlined,
.button:disabled .material-icons-outlined {
  color: var(--black-28);
}

/* Put spacing between buttons placed side by side */
button + button, .button + .button, button + .button, .button + button {
  margin-left: 1rem;
}

button:hover, .button:hover {
  background-color: var(--primary-hover-color);
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.14))
          drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.12))
          drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.2));
}

button:active, .button:active {
  background-color: var(--secondary-color);
  filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.14))
          drop-shadow(0px 3px 14px rgba(0, 0, 0, 0.12))
          drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.2));
}

button:disabled, .button:disabled {
  cursor: initial;
  background-color: var(--black-18);
  color: var(--black-28);
  filter: none;
}

button.secondary, .button.secondary {
  color: var(--black-89);
  background-color: white;
  border: var(--black-48) 1px solid;
}

button.secondary .material-icons,
.button.secondary .material-icons,
button.secondary .material-icons-round,
.button.secondary .material-icons-round,
button.secondary .material-icons-outlined,
.button.secondary .material-icons-outlined {
  color: var(--black-89);
}

button.secondary:hover, .button.secondary:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background-color: var(--secondary-hover-color);
}

button.secondary:active, .button.secondary:active {
  background-color: #034F5666;
}

button.secondary:disabled, .button.secondary:disabled {
  cursor: initial;
  background-color: transparent;
  color: #0000005C;
}

button.text, .button.text {
  background-color: white;
  color: var(--primary-color);
  padding: 0.3rem 0.813rem;
}

button.text .material-icons,
.button.text .material-icons,
button.text .material-icons-round,
.button.text .material-icons-round,
button.text .material-icons-outlined,
.button.text .material-icons-outlined {
  color: var(--primary-color);
  margin-right: 0.3rem;
}

button.text:hover, .button.text:hover {
  background-color: var(--secondary-hover-color);
  filter: unset;
}

button.delete, .button.delete {
  color: var(--white-89);
  background-color: var(--error-color);
}

.deleteFullBtnImg {
  height: 1rem;
}

button.delete .material-icons,
.button.delete .material-icons,
button.delete .material-icons-round,
.button.delete .material-icons-round,
button.delete .material-icons-outlined,
.button.delete .material-icons-outlined {
  color: var(--white-89);
}

button.delete:hover, .button.delete:hover {
  color: var(--white-89);
  border-color: var(--error-color);
  background-color: #FA2B3C;
}

button.delete:disabled, .button.delete:disabled {
  cursor: initial;
  background-color: var(--black-18);
  color: var(--black-28);
  filter: none;
}

button.cancel, .button.cancel {
  background-color: white;
  border: var(--error-color) 1px solid;
  color: var(--error-color);
}

button.cancel:hover, .button.cancel:hover {
  color: var(--error-color);
  border-color: var(--error-color);
  background-color: var(--white-89);
}

button.link, .button.link {
  color: var(--primary-color);
  background-color: unset;
}

button.link:hover, .button.link:hover {
  background-color: var(--secondary-hover-color);
  filter: unset;
}

button.icon, .button.icon {
  background-color: white;
  color: var(--primary-color);
  padding: 0.625rem !important;
}

button.icon i, .button.icon i {
  color: var(--primary-color);
  font-size: 2rem;
}

button.icon:hover, .button.icon:hover {
  background-color: var(--secondary-hover-color);
  filter: unset;
}

/******* Useful tooltip for hover-over help *******/
.tooltip-area {
  position: relative;
}

.tooltip-area span {
  visibility: hidden;
  position: absolute;
  min-width: 5rem;
  max-width: 15rem;
  width:fit-content;
  font-weight: normal;
  font-size: 1rem;
  background-color: black;
  color: white;
  padding: 0.5rem;
  border-radius: 0.313rem;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -50%;
}

.tooltip-area i {
  vertical-align: baseline;
  font-size: 1rem;
  margin-left: 0.5rem;
}

.tooltip-area:hover span {
  visibility: visible;
}

/* Generic material piece, in case you need more control over how it appears */
.material {
  box-shadow: 0 7px 30px -10px #74ade657,0px 8px 12px -3px  #0000000a;
  border: 1px solid #0000001a;
  border-radius: 0.75rem;
  background-color: white;
}

/* A wide piece of material used for a section */
.material-section {
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.12);
  border-radius: 0.75rem;
  box-sizing: border-box;
  max-width: 1000px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  background-color: white;
}

hr {
  width: 100%;
  margin: 1px 0 1rem 0;
  border-bottom-color: var(--black-18);
  border-bottom-style: solid;
  border-width: 0px 0px 1px 0px;
}

/* Background body for a page */
.page-background {
  background-color: var(--main-bg);
  /* The 1rem bottom padding matches with the trailing 1rem of .material-section */
  padding: 2rem 8rem 1rem 8rem;
  min-height: 100%;
}

@media screen and (max-width: 800px) {
  .page-background {
    /* Use a tiny bottom padding to stop margin collapse */
    padding: 1rem 1rem 0.01rem 1rem;
  }
  .material-section {
    padding: 0.7rem;
    margin-left: 0.7rem;
    margin-right: 0.7rem;
  }
}


/* Level 2 material */
.card-l2 {
  border: solid 1px var(--black-18);
  border-radius: 0.813rem;
  box-shadow: unset;
}

.card-l2:hover {
  box-shadow: 0px 0px 12px 3px #00000020;
}

/* Level 2 material section */
.l2-material-section {
  border: solid 1px var(--black-18);
  border-radius: 0.813rem;
  box-shadow: unset;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.l2-material-section:hover {
  box-shadow: 0px 0px 12px 3px #00000020;
}

/* material inputs */
.material-outlined-input {
  position: relative;
  margin: 0 0 1.25rem 0;
}

.material-outlined-input i.prefix-icon ,
.material-outlined-input span.prefix-icon {
  position: absolute;
  padding: 1rem 0.813rem;
}

.material-outlined-input .prefix-icon + input {
  padding-left: 2rem !important;
}

.material-outlined-input input {
  margin: 0 !important;
}

.material-outlined-input span.hint {
  padding-left: 1.25rem;
  font-size: 0.9rem;
  line-height: 2rem !important;
}

.material-outlined-input input + label {
  position: absolute;
  font-size: 1rem;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  color: inherit;
  padding: 0 0.3rem;
  margin: 0 0.813rem;
  transition: 0.1s ease-out;
  transform-origin: left top;
  pointer-events: none;
}

.material-outlined-input select + label {
  position: absolute;
  font-size: 1rem;
  left: 0;
  top: 0;
  transform: translateY(-100%);
  background-color: white;
  color: inherit;
  padding: 0 0.3rem;
  margin: 0 0.813rem;
  transition: 0.1s ease-out;
  transform-origin: left top;
  pointer-events: none;
}


.material-outlined-input textarea + label {
  position: absolute;
  font-size: 1rem;
  left: 0;
  top: 50%;
  transform: translateY(-150%);
  background-color: white;
  color: inherit;
  padding: 0 0.3rem;
  margin: 0 0.813rem;
  transition: 0.1s ease-out;
  transform-origin: left top;
  pointer-events: none;
}

.material-outlined-input input:focus + label, 
.material-outlined-input textarea:focus + label,
.material-outlined-input select:focus + label {
  color: var(--primary-color);
  top: 0;
  transform: translateY(-50%) scale(0.9) !important;
  font-size: 0.75rem;
}

.material-outlined-input input.warning,
.material-outlined-input textarea.warning,
.material-outlined-input select.warning {
  border-color: var(--warning-color);
}

.material-outlined-input input.warning + label,
.material-outlined-input textarea.warning + label,
.material-outlined-input select.warning + label {
  color: var(--warning-color);
  top: 45%;
  transform: translateY(-100%);
}

.material-outlined-input > input.warning ~ span.hint,
.material-outlined-input > textarea.warning ~ span.hint,
.material-outlined-input > select.warning ~ span.hint {
  color: var(--warning-color);
}

.material-outlined-input input.warning:focus + label,
.material-outlined-input textarea.warning:focus + label,
.material-outlined-input select.warning:focus + label {
  top: 0;
  transform: translateY(-50%) scale(0.9) !important;
  font-size: 0.75rem;
}

.material-outlined-input input.error,
.material-outlined-input textarea.error,
.material-outlined-input select.error {
  border-color: var(--error-color);
}

.material-outlined-input input.error + label,
.material-outlined-input textarea.error + label,
.material-outlined-input select.error + label {
  color: var(--error-color);
  top: 45%;
  transform: translateY(-100%);
}

.material-outlined-input > input.error ~ span.hint,
.material-outlined-input > textarea.error ~ span.hint,
.material-outlined-input > select.error ~ span.hint {
  color: var(--error-color);
}

.material-outlined-input input.error:focus + label,
.material-outlined-input textarea.error:focus + label,
.material-outlined-input select.error:focus + label {
  top: 0;
  transform: translateY(-50%) scale(0.9) !important;
  font-size: 0.75rem;
}

.material-outlined-input input:not([value=""]):not(:focus) + label,
.material-outlined-input textarea:not(:placeholder-shown):not(:focus) + label,
.material-outlined-input select:not(:placeholder-shown):not(:focus) + label {
  top: 0;
  transform: translateY(-50%) scale(0.9) !important;
  font-size: 0.75rem;
  color: var(--black-48);
}

.material-outlined-input input.warning:not([value=""]):not(:focus) + label,
.material-outlined-input textarea.warning:not(:placeholder-shown):not(:focus) + label,
.material-outlined-input select.warning:not(:placeholder-shown):not(:focus) + label {
  color: var(--warning-color);
}

.material-outlined-input input.error:not([value=""]):not(:focus) + label,
.material-outlined-input textarea.error:not(:placeholder-shown):not(:focus) + label,
.material-outlined-input select.error:not(:placeholder-shown):not(:focus) + label {
  color: var(--error-color);
}

.material-outlined-input input:not(:focus)::placeholder, 
.material-outlined-input textarea:not(:focus)::placeholder, 
.material-outlined-input select:not(:focus)::placeholder {
  opacity: 0;
}

.search-bar input {
  background-color: rgba(0, 0, 0, 0.07);
  border: none; 
}

.search-bar input:focus {
  outline: 1px solid var(--primary-color);
}

input:not([type]).hiddenInput, input[type="text"].hiddenInput {
	border: none;
	outline: none;
	background-color: transparent;
	padding: 0.5rem;
}