@charset "UTF-8";
.content-box {
  padding: var(--xlarge) var(--large);
  background: var(--color3); }

.ag-form .file label.field-label.extra {
  top: -10px;
  left: 3px;
  font-size: 12px;
  padding-top: 3px; }

input#custom-topic-input, input#custom-area-input {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23000000" d="M239 401c9.4 9.4 24.6 9.4 33.9 0L465 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-175 175L81 175c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L239 401z"/></svg>');
  background-repeat: no-repeat;
  background-position: right;
  background-size: 20px;
  cursor: pointer;
  background-origin: content-box; }

.form-subtitle h2 {
  font-family: var(--ff1); }

form.ag-form {
  position: relative; }

.selected-option {
  background-color: #f0f0f0;
  /* Haalea harmaa taustaväri */ }

.agRadioRow label {
  width: 100%;
  cursor: pointer; }

.ag-form .form-subtitle-line {
  display: flex;
  justify-content: center;
  margin-bottom: var(--large);
  position: relative;
  text-align: center; }

.ag-form .form-subtitle-line p {
  margin: 0;
  font-size: var(--font-medium);
  background: var(--color3);
  z-index: 2;
  padding: 0 10px;
  color: var(--color4);
  font-family: var(--ff2); }

.ag-form .form-subtitle-line:after {
  content: "";
  width: 70%;
  border-bottom: 2px solid #dadada;
  position: absolute;
  top: var(--medium); }

.custom-options, .custom-department-options, .custom-area-options {
  display: none;
  border: 1px solid #ccc;
  background-color: #fff;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  z-index: 1000;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-top: calc(var(--medium) * -1); }

.custom-option, .custom-department-option, .custom-area-option {
  padding: 10px;
  cursor: pointer;
  font-family: var(--ff2); }

.custom-option:hover, .custom-department-option:hover, .custom-area-option:hover {
  background-color: #f1f1f1; }

.ag-form .same-row .form-row {
  width: 50%;
  position: relative; }

.form-subtitle span {
  position: absolute;
  top: calc(var(--xlarge)* -1);
  left: calc(var(--large)* -1);
  padding: 4px var(--large);
  background: var(--color1);
  color: var(--color3);
  border-radius: 0 0 4px 0;
  display: none;
  font-family: var(--ff2); }

.ag-form .same-row .form-row:first-child {
  margin-right: 4px; }

.ag-form .same-row {
  display: inline-flex;
  width: 100%;
  position: relative; }

.content-box .form-row {
  position: relative; }

.ag-contact-wrap h2 {
  font-family: var(--ff2);
  color: var(--color5); }

.ag-form .form-row label {
  background: var(--color3);
  color: var(--color5);
  font-family: var(--ff2);
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 5px;
  padding: 3px 8px 0px 8px;
  transition: top .3s, left .3s, font-size .3s; }

.ag-form .form-row textarea, .ag-form .form-row input, .ag-form .form-row select {
  background: transparent;
  padding: 9px;
  border: var(--main-border);
  width: 100% !important;
  box-sizing: border-box;
  border-radius: 4px;
  margin-bottom: var(--large); }

.ag-form .form-row textarea, .ag-form .form-row input {
  color: #000; }

.ag-form .form-row textarea {
  min-height: 100px; }

.ag-form .form-row textarea::placeholder, .ag-form .form-row input::placeholder {
  color: var(--color3); }

.ag-form .form-row.active textarea::placeholder, .ag-form .form-row.active input::placeholder {
  color: var(--color5); }

.ag-form button, .ag-form .button-wrapper input {
  border: 0;
  background: var(--color4) !important;
  padding: 10px;
  width: calc(50% - 8px);
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 500;
  color: var(--color3); }

.ag-form .form-row.active label {
  top: -7px;
  left: 3px;
  font-size: 12px;
  padding-top: 0; }

.ag-form {
  width: 100%; }

.agFormRadio {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--xxxlarge); }

.agRadioRow {
  width: 100%;
  border: var(--main-border);
  padding: 5px;
  border-radius: 4px;
  display: flex; }

.agFormRadio .form-subtitle-line {
  width: 100%; }

.agRadioRowWrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 4px; }

input[type="radio"] {
  filter: hue-rotate(135deg);
  cursor: pointer; }

input[type="date"] {
  min-height: 36px; }

.ag-form .same-row.agDatePick .form-row {
  width: 100%;
  margin: 0;
  transition: width 0.35s, opacity 0.35s; }

.ag-form .same-row.agDatePick {
  column-gap: 4px; }

.ag-form .same-row.agDatePick.active .form-row:has(#voimassapaattyen) {
  opacity: 0;
  width: 0; }

.ag-form .same-row.agDatePick.active {
  column-gap: 0; }

.ag-form .same-row.agDatePick .agFormField {
  max-height: 94px;
  overflow: hidden; }

/* checkbox */
.ag-form .checkbox-row {
  display: flex;
  align-items: center;
  padding-bottom: var(--large); }

.ag-form .checkbox-row input[type="checkbox"] {
  display: none; }

/* Custom checkbox */
.ag-form .checkbox-row .agFormCheckbox {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 16px;
  color: var(--color5);
  user-select: none; }

.ag-form .checkbox-row .agFormCheckbox:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color5);
  border-radius: 4px;
  background-color: white; }

.ag-form .checkbox-row input[type="checkbox"]:checked + .agFormCheckbox:before {
  background-color: var(--color1);
  border-color: var(--color1); }

.ag-form .checkbox-row input[type="checkbox"]:checked + .agFormCheckbox:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 5px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg); }

/* Hover-efekti */
.ag-form .checkbox-row .agFormCheckbox:hover:before {
  border-color: var(--color1); }

.ag-mp p.mielipde-text {
  display: block; }

p.mielipde-text {
  display: none; }

.info-box p {
  background: #fff !important;
  color: var(--color5);
  border: 0;
  padding: var(--small);
  font-size: 16px;
  border-radius: 30px;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-family: var(--ff1);
  width: max-content;
  max-width: 100%;
  text-align: center;
  margin: 10px 0px 25px 0px; }

.info-box p.success {
  border: 2px solid #6eea8e; }

.info-box p.fail, .info-box p.failrecapcha {
  border: 2px solid #e35050; }

.info-box p svg {
  width: 22px !important;
  height: 22px !important; }

.info-box p.success svg {
  fill: #6eea8e; }

.info-box p.fail svg, .info-box p.failrecapcha svg {
  fill: #e35050; }

.info-box {
  flex-direction: column;
  align-items: center;
  display: none; }