@charset "utf-8";

/* <FORM INPUTS> */

/* Placeholder */

::placeholder {
  color: var(--color-disabled);
}
:-ms-input-placeholder {
  color: var(--color-disabled);
}

/* Label */

label.required::after {
  content: "*";
  color: var(--color-invalid);
}

/* Inputs - Regular */

input,
textarea,
button,
.link-button,
select,
.select-wrapper,
.progress-bar {
  margin: var(--gutter-thin) 0;
}

* + input,
* + textarea,
* + button,
* + .link-button,
* + select,
* + .select-wrapper,
* + .progress-bar {
  margin-top: 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: var(--input-height-default);
  padding: 4px 8px 4px 8px;
  box-sizing: border-box;
  border: 1px solid var(--color-text-xxxlight);
  border-radius: var(--border-radius-default);
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text-default);
  font-weight: normal;
  background-color: white;
}

textarea {
  min-height: 67px;
  resize: vertical;
}

textarea.big {
  min-height: 134px;
}

/* Selects */

.select-wrapper {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}

.select-wrapper::after {
  content: "";
  position: absolute;
  top: calc(50% - (0.8em / 2));
  right: var(--gutter-thin);
  width: 0.8em;
  height: 0.8em;
  background-image: url("img/arrow-down--dark.225a8f39d751.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
}

.select-wrapper > select {
  margin: 0;
  padding-right: calc(15px + 0.8em);
}

select {
  width: 100%;
  cursor: pointer;
}

.select-wrapper,
select {
  max-width: 100%;
}

/* Inputs - Regular - :FOCUS */

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-highlight);
  box-shadow: 0 0 0 3px var(--color-highlight-halo);
}

/* Inputs - Regular - :READ-ONLY || :DISABLED  */

input[type="text"]:read-only,
input[type="text"]:disabled,
input[type="password"]:read-only,
input[type="password"]:disabled,
input[type="email"]:read-only,
input[type="email"]:disabled,
input[type="url"]:read-only,
input[type="url"]:disabled,
input[type="search"]:read-only,
input[type="search"]:disabled,
input[type="number"]:read-only,
input[type="number"]:disabled,
textarea:read-only,
textarea:disabled,
select:disabled {
  color: var(--color-disabled);
}

/* Buttons - Regular */

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.link-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  height: var(--input-height-default);
  margin: 0;
  padding: 4px 8px 4px 8px;
  box-sizing: border-box;
  white-space: nowrap;
  border: 1px solid var(--color-text-xxxlight);
  border-radius: var(--border-radius-default);
  font-family: var(--font-default);
  font-size: 1rem;
  color: var(--color-text-default);
  background-color: white;
  box-shadow: var(--shadow-thin);
  cursor: pointer;
  transition:
    color var(--transition-default),
    box-shadow var(--transition-default);
}

.link-button {
  line-height: calc(var(--input-height-default) - 8px);
  vertical-align: middle;
  text-align: center;
}

/* Buttons - Regular - :HOVER */

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.link-button:hover {
  color: var(--color-text-dark);
  box-shadow: var(--shadow-default);
  text-decoration: none;
}

/* Buttons - Regular - :ACTIVE */

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
.link-button:active {
  box-shadow: var(--shadow-thin);
}

/* Buttons - Highlight */

button.highlight,
input[type="button"].highlight,
input[type="submit"].highlight,
input[type="reset"].highlight,
.link-button.highlight {
  color: white;
  background-color: var(--color-highlight);
  border: none;
}

/* Buttons - Highlight - :HOVER */

button.highlight:hover,
input[type="button"].highlight:hover,
input[type="submit"].highlight:hover,
input[type="reset"].highlight:hover,
.link-button.highlight:hover {
  color: white;
}

/* Buttons - Delete */

button.delete,
input[type="button"].delete,
input[type="submit"].delete,
input[type="reset"].delete,
.link-button.delete {
  color: white;
  background-color: var(--color-invalid);
  border: none;
}

/* Buttons - Delete - :HOVER */

button.delete:hover,
input[type="button"].delete:hover,
input[type="submit"].delete:hover,
input[type="reset"].delete:hover,
.link-button.delete:hover {
  color: white;
}

/* Buttons - Add */

button.add::before,
input[type="button"].add::before,
input[type="submit"].add::before,
input[type="reset"].add::before,
.link-button.add::before {
  /* Preload hover image */
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url("img/plus--light.82e474eec382.svg");
}

button.add:hover::after,
input[type="button"].add:hover::after,
input[type="submit"].add:hover::after,
input[type="reset"].add:hover::after,
.link-button.add:hover::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 8px;
  background-image: url("img/plus--light.82e474eec382.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Buttons - Add Dark */

button.add.dark::before,
input[type="button"].add.dark::before,
input[type="submit"].add.dark::before,
input[type="reset"].add.dark::before,
.link-button.add.dark::before {
  /* Preload hover image */
  content: url("img/plus--dark.2054d237a1d2.svg");
}

button.add.dark:hover::after,
input[type="button"].add.dark:hover::after,
input[type="submit"].add.dark:hover::after,
input[type="reset"].add.dark:hover::after,
.link-button.add.dark:hover::after {
  background-image: url("img/plus--dark.2054d237a1d2.svg");
}

/* Buttons - Loader - (Normal State) */

button.loader::before,
input[type="button"].loader::before,
.link-button.loader::before {
  /* Preload hover images */
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url("img/arrow-up--light.408ca84e8deb.svg") url("img/loading-dots--light.69c2e469a624.svg")
    url("img/checkmark--light.f070ec9705da.svg") url("img/cross--light.9b1a0dabac5a.svg");
}

button.loader:hover::after,
input[type="button"].loader:hover::after,
.link-button.loader:hover::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 8px;
  animation: shake 500ms linear 1s infinite;
  background-image: url("img/arrow-up--light.408ca84e8deb.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Buttons - Loading (When Loading Data) */

button.loader.loading::after,
input[type="button"].loader.loading::after,
.link-button.loader.loading::after {
  transition: width 2s ease;
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 8px;
  animation: loading 1s ease infinite;
  transform-origin: center center;
  background-image: url("img/loading-dots--light.69c2e469a624.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Buttons - Loaded - (Data Finished Loading) */

button.loader.loaded::after,
input[type="button"].loader.loaded::after,
.link-button.loader.loaded::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 8px;
  animation: none;
  background-image: url("img/checkmark--light.f070ec9705da.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Buttons - Loading Failed - (Error While Loading Data) */

button.loader.failed::after,
input[type="button"].loader.failed::after,
.link-button.loader.failed::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 8px;
  animation: none;
  background-image: url("img/cross--light.9b1a0dabac5a.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Buttons - Loader Dark - (Normal State) */

button.loader.dark::before,
input[type="button"].loader.dark::before,
.link-button.loader.dark::before {
  /* Preload hover images */
  content: url("img/arrow-up--dark.c49e4c50fd30.svg") url("img/loading-dots--dark.b4b9f9c9bd8e.svg")
    url("img/checkmark--dark.24d6e5e49b74.svg") url("img/cross--dark.4aa2dc606bb2.svg");
}

button.loader.dark:hover::after,
input[type="button"].loader.dark:hover::after,
.link-button.loader.dark:hover::after {
  background-image: url("img/arrow-up--dark.c49e4c50fd30.svg");
}

/* Buttons - Loading Dark (When Loading Data) */

button.loader.dark.loading::after,
input[type="button"].loader.dark.loading::after,
.link-button.loader.dark.loading::after {
  background-image: url("img/loading-dots--dark.b4b9f9c9bd8e.svg");
}

/* Buttons - Loaded Dark - (Data Finished Loading) */

button.loader.dark.loaded::after,
input[type="button"].loader.dark.loaded::after,
.link-button.loader.dark.loaded::after {
  background-image: url("img/checkmark--dark.24d6e5e49b74.svg");
}

/* Buttons - Loading Failed Dark - (Error While Loading Data) */

button.loader.dark.failed::after,
input[type="button"].loader.dark.failed::after,
.link-button.loader.dark.failed::after {
  background-image: url("img/cross--dark.4aa2dc606bb2.svg");
}

/* Buttons - Regular || Highlight || Delete - :DISABLED */

button:disabled,
button.highlight:disabled,
button.delete:disabled,
input[type="button"]:disabled,
input[type="button"].highlight:disabled,
input[type="button"].delete:disabled,
input[type="submit"]:disabled,
input[type="submit"].highlight:disabled,
input[type="submit"].delete:disabled,
input[type="reset"]:disabled,
input[type="reset"].highlight:disabled,
input[type="reset"].delete:disabled,
.link-button.disabled,
.link-button.highlight.disabled,
.link-button.delete.disabled {
  /*
		!important because it should overwrite any other
		class, like 'delete' or 'highlight'
	*/
  color: white !important;
  background-color: var(--color-disabled) !important;
  border-color: var(--color-disabled) !important;
  cursor: default !important;
  transition: none !important;
  box-shadow: none !important;
}

/* Buttons - Regular || Highlight || Delete - :DISABLED :HOVER */

button:disabled:hover::after,
button.highlight:disabled:hover::after,
button.delete:disabled:hover::after,
input[type="button"]:disabled:hover::after,
input[type="button"].highlight:disabled:hover::after,
input[type="button"].delete:disabled:hover::after,
input[type="submit"]:disabled:hover::after,
input[type="submit"].highlight:disabled:hover::after,
input[type="submit"].delete:disabled:hover::after,
input[type="reset"]:disabled:hover::after,
input[type="reset"].highlight:disabled:hover::after,
input[type="reset"].delete:disabled:hover::after,
.link-button.disabled:hover::after,
.link-button.highlight.disabled:hover::after,
.link-button.delete.disabled:hover::after {
  display: none !important;
}

/* CheckBox + Radio */

input[type="checkbox"],
input[type="radio"] {
  display: none;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  font-weight: normal;
  box-sizing: border-box;
  cursor: pointer;
}

input[type="checkbox"] + label > span,
input[type="radio"] + label > span {
  display: inline-block;
  width: calc((var(--input-height-default) / 2));
  height: calc((var(--input-height-default) / 2));
  background-color: var(--color-text-xxxxxlight);
  border-radius: var(--border-radius-default);
  margin-right: var(--gutter-thin);
  position: relative;
  top: 1px;
  transition: background-color var(--transition-duration-default) ease;
}

input[type="radio"] + label > span {
  border-radius: 50%;
}

input[type="checkbox"] + label > span:hover,
input[type="radio"] + label > span:hover {
  background-color: var(--color-text-xxxxlight);
}

input[type="checkbox"]:checked + label > span,
input[type="radio"]:checked + label > span {
  background-color: var(--color-highlight);
}

input[type="checkbox"]:checked + label > span::after {
  --input-checkbox-checkmark-width: calc(var(--input-height-default) / 3);
  --input-checkbox-checkmark-height: calc(var(--input-height-default) / 5);

  content: "";
  display: block;
  position: absolute;
  width: var(--input-checkbox-checkmark-width);
  height: var(--input-checkbox-checkmark-height);
  top: calc(
    (var(--input-height-default) / 4) -
      (var(--input-checkbox-checkmark-height) / 1.5)
  );
  left: calc(
    (var(--input-height-default) / 4) -
      (var(--input-checkbox-checkmark-width) / 2)
  );
  box-sizing: border-box;
  border-left: calc(var(--input-height-default) / 15) solid white;
  border-bottom: calc(var(--input-height-default) / 15) solid white;
  transform: rotate(-45deg);
}

input[type="radio"]:checked + label > span::after {
  --input-radio-checkmark-width: calc(var(--input-height-default) / 5);
  --input-radio-checkmark-center: calc(
    (var(--input-height-default) / 4) - (var(--input-radio-checkmark-width) / 2)
  );

  content: "";
  display: block;
  position: absolute;
  width: var(--input-radio-checkmark-width);
  height: var(--input-radio-checkmark-width);
  top: var(--input-radio-checkmark-center);
  left: var(--input-radio-checkmark-center);
  border-radius: calc(var(--input-radio-checkmark-width) / 2);
  background-color: white;
}

/* CheckBox - Squared */

input[type="checkbox"].squared {
  display: none;
}

input[type="checkbox"].squared + label {
  font-weight: normal;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  color: white;
  margin: calc(var(--gutter-xthin) / 2) 0;
  padding: 4px 8px 4px 8px;
  border-radius: var(--border-radius-default);
  background-color: var(--color-disabled);
  transition: background-color var(--transition-duration-default) ease;
}

input[type="checkbox"].squared:checked + label {
  background-color: var(--color-highlight);
}

input[type="checkbox"].squared + label:hover,
input[type="checkbox"].squared:checked + label:hover {
  background-color: var(--color-highlight-hover);
}

input[type="checkbox"].squared + label > span {
  display: none;
}

/* CheckBox - Toggle */

input[type="checkbox"].toggle {
  display: none;
}

input[type="checkbox"].toggle + label {
  --input-checkbox-width: calc(var(--input-height-default) * 1.2);
  --input-checkbox-height: calc((var(--input-height-default) / 3) * 2);
  --input-checkbox-button-diameter: calc(var(--input-checkbox-height) * 0.9);
  --input-checkbox-button-margin: calc(
    (var(--input-checkbox-height) - var(--input-checkbox-button-diameter)) / 2
  );
  --input-checkbox-not-checked-button-left: var(--input-checkbox-button-margin);
  --input-checkbox-checked-button-left: calc(
    var(--input-checkbox-width) - var(--input-checkbox-button-diameter) -
      var(--input-checkbox-button-margin)
  );

  font-weight: normal;
  box-sizing: border-box;
  margin-top: calc(
    (var(--input-height-default) - var(--input-checkbox-height)) / 2
  );
  margin-bottom: calc(
    (var(--input-height-default) - var(--input-checkbox-height)) / 2
  );
  cursor: pointer;
}

input[type="checkbox"].toggle + label > span {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--gutter-thin);
  width: var(--input-checkbox-width);
  height: var(--input-checkbox-height);
  background-color: var(--color-text-xxxxxlight);
  border-radius: calc(var(--input-checkbox-height) / 2);
  position: relative;
  top: -1px;
  /*box-shadow: var(--shadow-inset-default);*/
  transition: background-color var(--transition-duration-default) ease;
}

input[type="checkbox"].toggle + label > span:hover {
  background-color: var(--color-text-xxxxlight);
}

input[type="checkbox"].toggle:checked + label > span {
  background-color: var(--color-highlight);
}

input[type="checkbox"].toggle + label > span::after {
  content: "";
  display: block;
  position: absolute;
  width: var(--input-checkbox-button-diameter);
  height: var(--input-checkbox-button-diameter);
  top: var(--input-checkbox-button-margin);
  left: var(--input-checkbox-not-checked-button-left);
  background-color: white;
  border: none;
  border-radius: 50%;
  /*box-shadow: var(--shadow-default);*/
  transition: left var(--transition-duration-default) ease;
}

input[type="checkbox"].toggle:checked + label > span::after {
  left: var(--input-checkbox-checked-button-left);
}

/* Progress Bar */

.progress-bar {
  display: block;
  width: 100%;
  height: var(--progress-bar-height);
  border-radius: calc(var(--progress-bar-height) / 2);
  background-color: var(--color-text-xxxxxlight);
  position: relative;
  visibility: hidden;
}

.progress-bar.shown {
  visibility: visible;
}

.progress-bar > .progress {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  border-radius: inherit;
  width: 42%;
  background-color: var(--color-highlight);
  transition: width 70ms ease;
}

/* Call to actions */

.call-to-action__wrapper {
  display: block;
  opacity: 1 !important;
}

span.call-to-action__wrapper {
  display: inline-block;
}

.call-to-action {
  display: inline-block;
  color: white;
  background-color: var(--color-highlight);
  cursor: pointer;
  text-align: center;
  transition:
    background-color var(--transition-duration-slow) ease,
    border-color var(--transition-duration-slow) ease;
}

.call-to-action:hover {
  color: white;
  text-decoration: none;
  background-color: var(--color-highlight-hover);
}

.call-to-action {
  margin-top: var(--gutter-thin);
  margin-bottom: var(--gutter-thin);
  padding: 15px 30px;
  font-size: 19px;
  line-height: 21px;
}

.call-to-action.small {
  margin-top: var(--gutter-xthin);
  margin-bottom: var(--gutter-xthin);
  padding: 11px 20px;
  font-size: var(--text-size-default);
  line-height: 25px;
}

.call-to-action.smaller {
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 10px 17px;
  font-size: var(--text-size-default);
  line-height: 14px;
}

.call-to-action.transparent {
  color: var(--color-highlight);
  background-color: transparent;
  border: 2px solid var(--color-highlight);
}

.call-to-action.transparent:hover {
  border-color: var(--color-highlight-hover);
}

.call-to-action.transparent:not(.left)::after,
.call-to-action.transparent.left::before {
  content: "";
  visibility: hidden;
  opacity: 0;
  display: inline-block;
  transition:
    transform var(--transition-duration-slow) ease,
    opacity var(--transition-duration-slow) ease;
}

.call-to-action.transparent:not(.left)::after {
  transform: translateX(-2em);
}

.call-to-action.transparent.left::before {
  transform: translateX(2em);
}

.call-to-action.transparent:not(.left):hover::after,
.call-to-action.transparent.left:hover::before {
  visibility: visible;
  opacity: 1;
  transform: translateX(0em);
}

.call-to-action.transparent:not(.left):hover::after {
  content: "→";
  padding-left: 0.6em;
}

.call-to-action.transparent.left:hover::before {
  content: "←";
  padding-right: 0.6em;
}

/* Up to to 920px */
@media all and (max-width: 920px) {
  section.side-by-side .call-to-action__wrapper {
    text-align: center;
  }
}