/** TABLE OF CONTENTS
 *  1. General
 *  2. Contact Form
 *    2.1 Columns & Rows
 *    2.2 Control spacings in contact form
 *    2.3 Control contact forms field stylings
 *      2.3.1 Customize Select Menus
 *      2.3.2 Customize Checkboxes
 *  3. Responsiveness
 */

#clanguage {
  display: none;
}
/* 1. General */

html {
  box-sizing: border-box;
}

body {
  margin: 0;
}

#custom-contact-form .missing-form-field {
  border-color: red;
}

/* 2. Contact Form */

/* 2.1 Columns & Rows */
.full-width {
  width: 100%;
}

.half-width {
  width: 48%;
}

.quarter-width {
  width: 25%;
}

.three-quarters-width {
  width: 75%;
}

.eight-width {
  width: 12.5%;
}

.three-eights-width {
  width: 37.5%;
}

.half-width-left-margin {
  width: 48%;
  margin-left: 4%;
}

.quarter-width-left-margin {
  width: 23%;
}

.three-quarters-width-left-margin {
  width: 73%;
}

.eight-width-left-margin {
  width: 10.5%;
}

.three-eights-left-margin {
  width: 35.5%;
}

.quarter-width-left-margin,
.three-quarters-width-left-margin,
.eight-width-left-margin,
.three-eights-left-margin {
  margin-left: 2%;
}

#custom-contact-form {
  display: flex;
  flex-direction: column;
}

#custom-contact-form textarea,
#custom-contact-form input,
#custom-contact-form select,
.select-menu-container {
  width: 100%;
}

.custom-contact-form-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.custom-contact-form-column {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.custom-contact-form-inner-row {
  display: flex;
  flex-direction: column;
}

.custom-contact-form-column .custom-contact-form-inner-row:not(:last-child) {
  margin-bottom: 15px;
}

.left-aligned-column {
  align-items: flex-start;
}

.right-aligned-column {
  align-items: flex-end;
}

.centered-column {
  align-items: center;
}

/* 2.2 Control spacings in contact form */
.contact-form-label {
  padding-bottom: 10px;
}

/* 2.3 Control contact forms field stylings */
#custom-contact-form textarea,
#custom-contact-form input,
#custom-contact-form select {
  border: 1px solid lightgray;
  border-radius: 6px;
  height: 40px;
  /* Add left and right padding from field content to borders, and box-sizing added again to avoid that this resizes widths*/
  padding: 0 7px;
  box-sizing: border-box;
}

/* Add box shadow when focused */
#custom-contact-form textarea:focus,
#custom-contact-form input:focus,
#custom-contact-form select:focus {
  box-shadow: 1px 1px 9px #13aff0;
}

select,
input,
textarea {
  padding: 0;
}

/* 2.3.1 Customize Select Menus */
.select-menu-container {
  position: relative;
  display: flex;
  align-items: center;
  /* Select tag must be set to slightly higher height than inputs to have the same height */
}

#custom-contact-form select {
  /* Auto-adapts height */
  flex-grow: 1;
  /* Removes default select arrow */
  /*-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;*/
  /* Height has to be set to be higher as inputs to have the same size on FE */
  color: grey;
  height: 42px;
}

/* Remove focusring added by browser */
*:-moz-focusring {
	outline: none;
}

/* Remove focusring in Chrome and Safari from form elements */
*:focus {
  outline: none;
}

#custom-contact-form select:hover {
  cursor: pointer;
}

.select-menu-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.select-menu-icon::after {
  content: "";
}

/* 2.3.2 Customize Checkboxes */
input[type="checkbox"], input[type="radio"] {
  display: none;
}

.checkbox-option-description {
  position: relative;
  padding-left: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.customized-checkbox {
  position: absolute;
  left: 10px;
  width: 20px;
  height: 20px;
  border: 1px solid lightgray;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.customized-checkbox::after {
  position: absolute;
  width: 5px;
  height: 10px;
  border-bottom: 2px solid black;
  border-right: 2px solid black;
  transform: rotate(45deg);
  content: "";
  bottom: 5px;
  display: none;
}

input:checked ~ .customized-checkbox::after {
  display: block;
}

.checkbox-option-description:hover input:not(:checked) ~ .customized-checkbox {
  background-color: lightgray;
}

.checkbox-option-description:focus input ~ .customized-checkbox {
  box-shadow: 1px 1px 9px #13aff0;
}

.checkbox-option-description:hover {
  cursor: pointer;
}

/* 2.3.3 Customize Upload Buttons */

/* When using visibility hidden or display none, assistive technology interprets to mean the file input isn't interactive. */
input[type="file"] {
  display: none;
}

.custom-upload-button {
  padding: 12px 20px;
  background-color: red;
  border-radius: 2px;
}

.custom-upload-button:hover {
  cursor: pointer;
  color: white;
}

.upload-button-label-container {
  display: flex;
  margin: 1.5rem 0;
}

.upload-file-preview {
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-file-preview ul {
  margin: 0;
  padding: 0;
}

.upload-file-preview li {
  list-style-position: inside;
}

.upload-button-container {
  display: flex;
  flex-direction: column;
}

.file-upload-error {
  color: red;
  margin-left: 20px;
}

/* 3. Responsiveness - Double all the column widths at the breakpoint of 1280px */

@media (max-width:1200px) {

  /* By setting the half-width to 100%, it now becomes the new reference for quarters / eights,
   so there's no need to resize the rest, as their values are set in relation to 100, and not 96,
   because there's no need of any middle margin of 4%, just spacings of 2% */
  .half-width,
  .half-width-left-margin {
    width: 100%;
    margin-left: 0;
  }

  /* If the row of contact form columns shall be reversed when switching to mobile view */
  .reverse-on-mobile {
    flex-direction: column-reverse;
  }

}