/**
 * @file
 * Color functions.
 *
 * @package Functions.
 */
/* Tint. */
/* Shade. */
/**
 * @file
 * Global settings.
 *
 * @package Settings.
 */
/* Import. */
/* * @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); */
/* Font family. */
/* Font size. */
/* Font weight. */
/* Line height. */
/* Basic colors. */
/* Status colors. */
/* Border radius. */
/* Outline. */
/* Shadow. */
/* Spacing. */
/* Width. */
/* Breakpoints. */
/* Grid breakpoints. */
/* Grid. */
/**
 * @file
 * Form group styles.
 *
 * @package Molecules.
 */
/* Import */
/* Form group. */
.m-form-group:not(.m-form-group--is-horizontal) > *:first-child {
  margin-top: 0;
}
.m-form-group--is-horizontal {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.m-form-group--is-horizontal > * {
  flex: 0 1 auto;
  margin: 0.65rem 0;
}

.paragraphs-select--container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
}
.paragraphs-select--container .m-form-group {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: center;
  width: 100%;
  gap: 20px;
  align-items: center;
}
@media screen and (min-width: 720px) {
  .paragraphs-select--container .m-form-group {
    flex-direction: row;
  }
}
.paragraphs-select--container input {
  display: none;
}
.paragraphs-select--container input:checked + label {
  border: 2px solid #b00057;
}
.paragraphs-select--container label {
  width: 100%;
  height: 360px;
  padding: 2rem;
  background-color: #fff;
  border: 2px solid #fff;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background-image: url(https://staging.qraphy.nl/wp-content/uploads/2021/11/Video.png);
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  align-content: flex-end;
  align-items: flex-end;
  justify-content: center;
}
@media screen and (min-width: 720px) {
  .paragraphs-select--container label {
    height: 450px;
  }
}
.paragraphs-select--container label:before {
  content: none;
}

.qrcode--editor {
  height: 100%;
  padding-top: 4rem;
  background-color: #06354D;
}
@media screen and (min-width: 720px) {
  .qrcode--editor {
    padding-top: 5rem;
  }
}

.qr-form--edit,
.qr-form--step-1,
.qr-form--step-2 {
  max-width: 94%;
}
.qr-form--edit .m-logo,
.qr-form--step-1 .m-logo,
.qr-form--step-2 .m-logo {
  margin-bottom: 2rem;
}
.qr-form--edit .m-logo svg,
.qr-form--step-1 .m-logo svg,
.qr-form--step-2 .m-logo svg {
  width: 18rem;
  height: 7.6rem;
}
.qr-form--edit .form-actions,
.qr-form--edit .form-actions .form-wrapper,
.qr-form--step-1 .form-actions,
.qr-form--step-1 .form-actions .form-wrapper,
.qr-form--step-2 .form-actions,
.qr-form--step-2 .form-actions .form-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: center;
}
.qr-form--edit .form-item,
.qr-form--step-1 .form-item,
.qr-form--step-2 .form-item {
  width: 100%;
}
.qr-form--edit label,
.qr-form--step-1 label,
.qr-form--step-2 label {
  color: #ffffff;
}
.o-dashboard .qr-form--edit label,
.o-dashboard .qr-form--step-1 label,
.o-dashboard .qr-form--step-2 label {
  color: #171725;
}
.qr-form--edit input + label,
.qr-form--step-1 input + label,
.qr-form--step-2 input + label {
  color: #171725;
}
.qr-form--edit .m-button--secondary,
.qr-form--step-1 .m-button--secondary,
.qr-form--step-2 .m-button--secondary {
  width: 100%;
  max-width: 20rem;
  text-align: center;
  justify-content: center;
}
.qr-form--edit #edit-message-format,
.qr-form--step-1 #edit-message-format,
.qr-form--step-2 #edit-message-format {
  display: none;
}

.qr-form--edit {
  margin: 0 auto;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 2rem;
}
.qr-form--edit .paragraphs-select--container label {
  background-image: url(https://staging.qraphy.nl/wp-content/uploads/2021/11/Video.png);
}
.o-dashboard .qr-form--edit {
  margin-top: 3rem;
}
@media screen and (min-width: 720px) {
  .o-dashboard .qr-form--edit {
    margin-top: 5rem;
  }
}
.qr-form--edit__intro {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
  text-align: center;
}
.qr-form--edit__intro h1 {
  margin-bottom: 1.6rem;
  font-size: 2.6rem;
  color: #171725;
}
.qr-form--edit__intro h3 {
  font-size: 1.6rem;
  margin: 0;
  color: #171725;
}
.qr-form--edit__intro p {
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 0;
  text-align: left;
}
.qr-form--edit label {
  color: #171725;
}
.qr-form--edit__options {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: flex-start;
}
.qr-form--edit__options .m-form-item {
  width: 100%;
}
.qr-form--edit__options label.paragraph-select {
  flex: 1 0 0;
  height: 100%;
  background-color: #ffffff;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: center;
  border: 2px solid #ffffff;
  transition: border 0.15s ease-in-out;
}
.qr-form--edit__options label.paragraph-select:hover {
  border: 2px solid #171725;
}
.qr-form--edit__options label.paragraph-select img {
  margin: 0;
  width: 100%;
  margin-bottom: 2rem;
}
.qr-form--edit__options label.paragraph-select span {
  font-size: 1.6rem;
}
.qr-form--edit .m-button--secondary {
  width: 100%;
  max-width: 20rem;
  text-align: center;
  justify-content: center;
}
.qr-form--edit .form-actions,
.qr-form--edit .form-actions .form-wrapper {
  justify-content: end;
}

.qr-form--step-1 {
  margin: 0 auto;
  padding: 4rem 0;
}
.qr-form--step-1__intro {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}
.qr-form--step-1__intro h1 {
  font-size: 2.6rem;
  color: #ffffff;
}
.o-dashboard .qr-form--step-1__intro h1 {
  color: #171725;
}
.qr-form--step-1__intro h3 {
  font-size: 1.6rem;
  margin: 0;
  color: #ffffff;
}
.o-dashboard .qr-form--step-1__intro h3 {
  color: #171725;
}
.qr-form--step-1__options {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: flex-start;
  gap: 2rem;
}
.qr-form--step-1__options label.paragraph-select {
  flex: 1 0 0;
  height: 100%;
  background-color: #ffffff;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: center;
  border: 2px solid #ffffff;
  transition: border 0.15s ease-in-out;
}
.qr-form--step-1__options label.paragraph-select:hover {
  border: 2px solid #171725;
}
.qr-form--step-1__options label.paragraph-select img {
  margin: 0;
  width: 100%;
  margin-bottom: 2rem;
}
.qr-form--step-1__options label.paragraph-select span {
  font-size: 1.6rem;
  color: #171725;
}
.qr-form--step-1 .form-actions,
.qr-form--step-1 .form-actions .form-wrapper {
  justify-content: end;
}

.qr-form--step-2 {
  margin: 0 auto;
  padding: 4rem 0;
  color: #ffffff;
}
.qr-form--step-2 .paragraphs-select--container {
  display: none;
}
.qr-form--step-2__intro {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}
.qr-form--step-2__intro h1 {
  font-size: 2.6rem;
  color: #ffffff;
}
.o-dashboard .qr-form--step-2__intro h1 {
  color: #171725;
}
.qr-form--step-2__intro h3 {
  font-size: 1.6rem;
  margin: 0;
  color: #ffffff;
}
.o-dashboard .qr-form--step-2__intro h3 {
  color: #171725;
}
.qr-form--step-2__media {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: flex-start;
  gap: 1rem;
}
.qr-form--step-2__media label.paragraph-select {
  flex: 1 0 0;
  height: 100%;
  background-color: #ffffff;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: center;
  border: 2px solid #ffffff;
  transition: border 0.15s ease-in-out;
}
.qr-form--step-2__media label.paragraph-select:hover {
  border: 2px solid #171725;
}
.qr-form--step-2__media label.paragraph-select img {
  margin: 0;
  width: 100%;
  margin-bottom: 2rem;
}
.qr-form--step-2__media label.paragraph-select span {
  font-size: 1.6rem;
}
.qr-form--step-2 input[type=file] {
  color: #ffffff;
}
.o-dashboard .qr-form--step-2 input[type=file] {
  color: #171725;
}

.qr-welcome {
  width: 100%;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: flex-start;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  gap: 2rem;
  background-color: #fff;
}
.qr-welcome.qr-form--edit {
  margin: 3.6rem 4.5rem;
  padding: 4.4rem 6rem;
}
.qr-welcome__wrapper {
  width: 100%;
  max-width: 75rem;
}
.qr-welcome .m-logo {
  margin: 0;
}
.qr-welcome__container {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  gap: 2rem;
}
.qr-welcome__pre-content {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
  gap: 15px;
}
.qr-welcome__pre-content--avatar {
  border-radius: 500px;
  width: 60px;
  height: 60px;
  margin: 0;
}
.qr-welcome__pre-content--content {
  flex: 0 1 1;
}
.qr-welcome__pre-content h1, .qr-welcome__pre-content h2 {
  margin: 0;
  color: #06354D;
}
@media screen and (max-width: 719px) {
  .qr-welcome__pre-content h1, .qr-welcome__pre-content h2 {
    font-size: 1.4rem;
  }
}
.qr-welcome__content {
  gap: 1rem;
  display: inline-flex;
  flex-direction: column;
}
.qr-welcome__content h1 {
  font-size: 2.4rem;
  color: #1e293b;
}
.qr-welcome__content p {
  margin: 0;
  font-weight: 400;
}
.qr-welcome__buttons {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  gap: 2.8rem;
}

/*# sourceMappingURL=form-group.css.map */