@layer base {
  /* Form styles */
  
  .form,
  .form-inline {
    max-width: 680px;
  
    @media (max-width: 639.98px) {
      max-width: 100%;
    }
  
    .form-group {
      margin-top: 1.188rem;
    }
  
    .form-heading {
      margin-top: 2.5rem;
    }
  
    .form-actions {
      margin-top: 1.5rem;
    }
  
    .form-link {
      color: var(--color-primary);
    }
  
    .form-help,
    .form-error {
      color: var(--color-grey-600);
      display: block;
      font-size: 0.875rem;
      margin-top: 0.375rem;
    }
  
    .form-error {
      color: var(--color-red-darker);
    }
  
    .error-message {
      color: var(--color-red-darker);
      display: block;
      font-size: 0.875rem;
      margin-top: 0.375rem;
    }
  
    .form-help-link {
      color: var(--color-primary);
    }
  
    hr {
      margin-top: 2rem;
    }
  
    label {
      color: var(--color-grey-900);
      display: inline-block;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 0.75rem;
      padding: 0;
  
      @media (max-width: 639.98px) {
        font-size: 0.938rem;
      }
    }
  
    textarea,
    input[type=text],
    input[type=search],
    input[type=password],
    input[type=email],
    input[type=datetime-local] {
      appearance: none;
      background: var(--color-grey-050);
      border: 1px solid var(--color-grey-200);
      border-radius: 2px;
      color: var(--color-grey-900);
      display: block;
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      font-size: 1rem;
      line-height: 1.25;
      outline: none;
      padding: 0.438em 0.75em;
      position: relative;
      width: 100%;
      transition: 0.2s ease;
  
      @media (max-width: 639.98px) {
        font-size: 0.938rem;
      }
  
      &:focus {
        border: 1px solid var(--color-primary);
        outline: none;
      }
  
      &::placeholder {
        color: var(--color-grey-600);
      }
  
      &:disabled,
      &.disabled {
        background: var(--color-grey-100);
        cursor: not-allowed;
        opacity: 0.5;
      }
  
      &.error {
        border: 1px solid var(--color-red);
      }
  
      &[readonly] {
        background-color: var(--color-grey-100);
      }
  
      &[type="file"] {
        height: auto;
      }
    }
  
    select:not([multiple]) {
      border: 1px solid var(--color-grey-100);
      border-radius: 2px;
      color: inherit;
      font-size: 1rem;
      line-height: 1.2;
      height: 2.8rem;
      outline: none;
      padding: 0.75rem 3rem 0.75rem 1rem;
      vertical-align: middle;
      width: 100%;
      max-width: 100%;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: var(--color-grey-050) url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='rgb(var(--rgb-grey-600))'/></g></svg>") no-repeat;
      background-position: right 0.75rem top 50%;
  
      @media (max-width: 639.98px) {
        font-size: 0.938rem;
      }
  
      &:focus {
        border: 1px solid var(--color-primary);
        outline: none;
      }
  
      &::-ms-expand {
        display: none;
      }
    }
  
    select[multiple] {
      border-radius: 2px;
      color: inherit;
      font-size: 1rem;
      line-height: 1.2;
      height: 10rem;
      outline: none;
      vertical-align: middle;
      width: 100%;
      max-width: 100%;
  
      @media (max-width: 639.98px) {
        font-size: 0.938rem;
      }
  
      option:checked {
        background: var(--color-grey-100);
      }
    }
  
    /* Checkboxes & radio */
    .control {
      position: relative;
      display: block;
      font-weight: 400;
      padding-left: 1.5em;
      margin-bottom: 0.25em;
      cursor: pointer;
  
      &:last-child {
        margin-bottom: 0;
      }
    }
  
    .control input {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }
  
    .control-indicator {
      position: absolute;
      top: 0.125rem;
      left: 0;
      display: block;
      width: 1rem;
      height: 1rem;
      color: var(--color-primary);
      text-align: center;
      background-color: var(--color-grey-100);
      background-size: 50% 50%;
      background-position: center center;
      background-repeat: no-repeat;
      user-select: none;
    }
  
    .control input:focus ~ .control-indicator {
      box-shadow: 0 0 0 0.075em var(--color-white), 0 0 0 0.2rem var(--color-primary);
    }
  
    .control input:checked ~ .control-indicator {
      color: var(--color-white);
      background-color: var(--color-primary);
    }
  
    .control input:active ~ .control-indicator {
      color: var(--color-white);
      background-color: var(--color-primary);
    }
  
    /* Checkbox modifiers */
    .checkbox .control-indicator {
      border-radius: 2px;
    }
  
    .checkbox input:checked ~ .control-indicator {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
    }
  
    /* Radio modifiers */
    .radio .control-indicator {
      border-radius: 50%;
    }
  
    .radio input:checked ~ .control-indicator {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
    }
  
    /* File input */
    .file {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
  
    .file input {
      margin: 0;
      filter: alpha(opacity=0);
      opacity: 0;
    }
  
    .file-custom {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      z-index: 5;
      width: 20rem;
      padding: 0.438em 0.75em;
      line-height: 1.3;
      color: var(--color-grey-900);
      background-color: var(--color-grey-050);
      border: 1px solid var(--color-grey-200);
      border-radius: 2px;
      box-shadow: 0px 1px 2px 0px rgb(var(--rgb-grey-200) / 0.32);
  
      @media (max-width: 639.98px) {
        font-size: 0.938rem;
        width: 17.5rem;
      }
    }
  
    .file-custom:after {
      content: "Choose file...";
      font-size: 1rem;
      font-weight: 400;
    }
  
    .file-custom:before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 6;
      display: block;
      content: "Browse";
      height: auto;
      padding: 0.438em 0.75em;
      line-height: 1.5;
      color: var(--color-grey-900);
      font-size: 1rem;
      font-weight: 700;
      background-color: var(--color-white);
      border-left: 1px solid var(--color-grey-200);
      border-radius: 2px;
  
      @media (max-width: 639.98px) {
        font-size: 0.938rem;
      }
    }
  
    .row {
      margin: 0 -1.125rem;
  
      @media (max-width: 1439.98px) {
        margin: 0 -0.75rem;
      }
  
      @media (max-width: 1199.98px) {
        margin: 0 -0.688rem;
      }
  
      @media (max-width: 991.98px) {
        margin: 0 -0.5rem;
      }
    }
  
    .ql-editor {
      font-size: 1rem;
      min-height: 300px;
    }
  }
  
  .form-group-toggle-switch {
    label {
      font-weight: 400;
      margin-top: 1.5rem;
    }
  }
  
  .form-inline {
    display: flex;
  
    .btn {
      flex: 0 0 auto;
    }
  }
  
  .sm-input {
    width: 10% !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  
  .container {
    .form,
    .form-inline {
      max-width: 520px;
  
      @media (max-width: 639.98px) {
        max-width: 100%;
      }
    }
  }
  
  select#suggestions:not([multiple]) {
    border: 1px solid var(--color-grey-100);
    border-radius: 2px;
    color: inherit;
    font-size: 1rem;
    line-height: 1.2;
    height: 2.8rem;
    outline: none;
    padding: 0.75rem 3rem 0.75rem 1rem;
    vertical-align: middle;
    width: 100%;
    max-width: 60%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--color-grey-050) url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='rgb(var(--rgb-grey-600))'/></g></svg>") no-repeat;
    background-position: right 0.75rem top 50%;
  
    @media (max-width: 639.98px) {
      font-size: 0.938rem;
    }
  
    &:focus {
      border: 1px solid var(--color-primary);
      outline: none;
    }
  
    &::-ms-expand {
      display: none;
    }
  }
}