/* FORMS */
  
  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
  }
  
  ::-webkit-input-placeholder {
    color: var(--color);
  }
  ::placeholder {
    color: var(--color);
  }

	.styled-select,
	.styled-search {
		position: relative;
	}

	.styled-select select,
	li.search input {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	.styled-select select {
		cursor: pointer;
	}








  .form-list li.input input,
  div.range input,
  .form-list li.textarea textarea,
  .form-list li.select select,
  input.step-input {
    
  	font-family: var(--base-font-1-regular);

    --rise: calc(var(--max-font-size, 16) - var(--min-font-size, 16));
    --run: calc(var(--max-vw) - var(--min-vw));
    --slope: calc(var(--rise) / var(--run));

    --min-vw-px: calc(var(--min-vw) * 1px);
    --min-font-size-px: calc(var(--min-font-size) * 1px);

    --fluid-font-size-px:
      calc(
        var(--slope) * (100vw - var(--min-vw-px)) + var(--min-font-size-px)
      );

    --max-font-size-px: calc(var(--max-font-size) * 1px);

    font-size:
      clamp(
        var(--min-font-size-px),
        var(--fluid-font-size-px),
        var(--max-font-size-px)
      );
      
    --min-font-size: 16;
    --max-font-size: 17;
    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    border: 0;
    border-radius: 0;
    padding: 1.2em .7em .6em;
    padding-left: var(--padding-left);
    margin: 0;
    box-shadow: none;
    color: var(--base-color-white);
    --color: var(--base-color-white);
    background: var(--base-color-green);
    --background-color: var(--base-color-green);
    transition: box-shadow 250ms;
    border-bottom: 1px solid var(--base-color-white);
    
  }
  
  input.step-input {
    padding: 0.9em .7em !important;
    text-align: center;
  }
  
  
  .form-list li.input input:is(:focus, :active),
  div.range input:is(:focus, :active),
  .form-list li.textarea textarea:is(:focus, :active),
  .form-list li.select select:is(:focus, :active),
  input.step-input:is(:focus, :active) {
    outline: 0;
  }
  
  
  
  
  
  
  
  .styled-select {
    position: relative;
  }
  
  .styled-select span[aria-hidden] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
  
  .styled-select svg {
    width: max(10px, calc(var(--icon-width) * var(--px)));
    height: auto;
    display: block;
  }
  
  .form-list li .styled-select select {
    /*padding-top: .6em;*/
  }
  
  
  
  
  
  
  
  
  .styled-checkbox,
  li.gdpr .wpcf7-list-item {
    position: relative;
    display: inline-block;
  }
  
  .styled-checkbox > span,
  li.gdpr .wpcf7-list-item .checkbox-wrap > span {
    display: block;
    position: absolute;
    inset: 4px;
    z-index: 2;
    background: var(--base-color-pink);
    opacity: 0;
    transition: opacity 250ms var(--ttf-2);
    pointer-events: none;
  }
  
  .styled-checkbox input:checked + span,
  li.gdpr .wpcf7-list-item .checkbox-wrap input:checked + span {
    opacity: 1;
  }
  
  .styled-checkbox input,
  li.gdpr .wpcf7-list-item .checkbox-wrap input {
    appearance: none;
    display: block;
    --size: 20px;
    width: var(--size);
    height: var(--size);
    border: 1px solid var(--base-color-white);
    background: transparent;
    cursor: pointer;
  }
  
  
  
  
  
  
  
  
  .form-list {
    display: flex;
    flex-flow: column nowrap;
    gap: 1.35294117647058823529em 0;
  }
  
  .form-list li.select label {
    display: none;
  }
  
  
  
  
  
  
  
  
  
  
  .checkbox-list {
    display: flex;
    flex-flow: column nowrap;
    gap: 8px 0px;
  }
  
  .checkbox-list > li,
  div.range .row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    user-select: none;
  }
  
  .checkbox-list label {
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    gap: 0 .70588235294117647058em;
    align-items: center;
    user-select: none;
  }
  
  .checkbox-list > li .styled-checkbox,
  div.range .row .buttons {
    flex-shrink: 0;
    margin-right: .70588235294117647058em;
  }
  
  .checkbox-list > li .styled-checkbox {
    margin-right: 0;
  }
  
  .checkbox-list > li .label {
    width: 100%;
  }
  
  div.range .row .buttons {
    display: flex;
    flex-flow: row nowrap;
    gap: 0px 10px;
  }
  
  div.range {
    display: flex;
    flex-flow: column nowrap;
    gap: 4px 0;
  }
  
  
  
  
  
  
  
  
  
  
  input::placeholder {
    color: transparent;
  }
  
  li.float-label {
    position: relative;
  }
  
  li.float-label label {
    display: block;
    position: absolute;
    user-select: none;
    pointer-events: none;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    transition: transform 250ms var(--ttf-2);
  }
  
  li.float-label:has(input:focus) label,
  li.float-label:has(input:not(:placeholder-shown)) label {
    transform: translateY(calc(-100% - 0.1em)) scale(0.75);
    transform-origin: left top;
  }
  
  
  
  
  
  
  
  
  .form-list .gdpr .col-set {
    display: flex;
    flex-flow: row nowrap;
    gap: 0 1em;
    line-height: 1.3;
  }
  
  .form-list .gdpr .col-set a {
    text-decoration: underline;
  }
  
  @media (hover: hover) {
    .form-list .gdpr .col-set a:is(:focus, :hover) {
      text-decoration: none;
    }
  }
  
  
  
  
  
  
  
  
  .screen-reader-response {
    display: none;
  }
  
  .response-wrapper.top > div {
    margin-bottom: 2em;
  }
  
  .response-wrapper.bottom {
    display: none;
  }
  
  .wpcf7-not-valid-tip {
    display: none;
  }
  
  .form-list > li:has(.wpcf7-not-valid-tip) :is(input, textarea, select) {
    border-color: var(--base-color-pink);
  }
  
  
  
  
  
  
  
  
  @media (max-width: 500px) {
    
    .checkbox-list {
      gap: 15px 0;
    }
    
    div.range {
      gap: 15px 0;
    }
    
  }