@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

  #title-firstname {
    width: 75%;
  }

    #title-firstname .field:nth-child(2) {
      margin-left: 0.75rem;
    }

  .bg-black {
    background-color: rgba(0, 0, 0, 1);
  }

  .bg-white {
    background-color: rgba(255, 255, 255, 1);
  }

  .bg-gray-300 {
    background-color: rgba(212, 212, 212, 1);
  }

  .bg-gray-900 {
    background-color: rgba(23, 23, 23, 1);
  }

  .bg-red-100 {
    background-color: rgba(242, 201, 203, 1);
  }

  .bg-teal-400 {
    background-color: rgba(77, 168, 177, 1);
  }

  .bg-teal-500 {
    background-color: rgba(0, 130, 144, 1);
  }

  .bg-teal {
    background-color: rgba(0, 130, 144, 1);
  }

  .bg-aqua {
    background-color: rgba(0, 255, 200, 1);
  }

  .hover\:bg-teal-50:hover {
    background-color: rgba(242, 249, 249, 1);
  }



  .border-gray-100 {
    border-color: rgba(245, 245, 245, 1);
  }

  .border-red-300 {
    border-color: rgba(222, 119, 125, 1);
  }

  .border-teal {
    border-color: rgba(0, 130, 144, 1);
  }

  .border-aqua {
    border-color: rgba(0, 255, 200, 1);
  }

  .modal .modal-btn:hover {
    background-color: rgba(242, 249, 249, 1);
  }

  .modal .modal-btn {
    border-color: rgba(229, 229, 229, 1);
    color: rgba(0, 130, 144, 1);
  }

  .text-white {
    color: rgba(255, 255, 255, 1);
  }


  .flex.hidden {
    display: none;
  }






















  .text-white {
    color: rgba(255, 255, 255, 1);
  }

  .text-gray-400 {
    color: rgba(163, 163, 163, 1);
  }

  .text-gray-500 {
    color: rgba(115, 115, 115, 1);
  }

  .text-gray-600 {
    color: rgba(82, 82, 82, 1);
  }

  .text-gray-700 {
    color: rgba(64, 64, 64, 1);
  }

  .text-gray-900 {
    color: rgba(23, 23, 23, 1);
  }

  .text-red-500 {
    color: rgba(192, 47, 55, 1);
  }

  .text-red {
    color: rgba(192, 47, 55, 1);
  }

  .text-teal {
    color: rgba(0, 130, 144, 1);
  }


  .focus-ring-teal:focus {
    border-color: rgba(153, 205, 211, 1);
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(191, 224, 227, var(--tw-ring-opacity));
  }


  .link {
    color: rgba(0, 130, 144, 1);
  }

    .link:hover {
      color: rgba(0, 98, 108, 1);
    }

  /* Buttons */

  .btn {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
  }

    .btn:hover {
      --tw-bg-opacity: 1;
      background-color: rgba(242, 249, 249, 1);
    }

  .btn {
    --tw-border-opacity: 1;
    border-color: rgba(0, 130, 144, 1);
    color: rgba(0, 130, 144, 1);
  }

    .btn:focus {
      --tw-border-opacity: 1;
      border-color: rgba(153, 205, 211, 1);
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
      --tw-ring-opacity: 1;
      --tw-ring-color: rgba(191, 224, 227, var(--tw-ring-opacity));
    }


    .btn:active, .btn:hover:active {
      --tw-bg-opacity: 1;
      background-color: rgba(230, 243, 244, 1);
      --tw-ring-offset-width: 2px;
    }

    .btn:not(.btn-solid).processing svg {
      color: rgba(0, 130, 144, 1);
    }

  .btn-solid {
    --tw-bg-opacity: 1;
    background-color: rgba(0, 130, 144, 1);
  }

    .btn-solid:hover {
      --tw-bg-opacity: 1;
      background-color: rgba(0, 117, 130, 1);
    }

  .btn-solid {
    color: rgba(255, 255, 255, 1);
    text-transform: uppercase;
  }

    .btn-solid:active, .btn-solid:hover:active {
      --tw-bg-opacity: 1;
      background-color: rgba(0, 98, 108, 1);
    }

  .modal .modal-btn {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
  }

    .modal .modal-btn:hover {
      --tw-bg-opacity: 1;
      background-color: rgba(242, 249, 249, 1);
    }

  .modal .modal-btn {
    --tw-border-opacity: 1;
    border-color: rgba(229, 229, 229, 1);
    color: rgba(0, 130, 144, 1);
  }

    .modal .modal-btn:focus {
      --tw-border-opacity: 1;
      border-color: rgba(153, 205, 211, 1);
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
      --tw-ring-opacity: 1;
      --tw-ring-color: rgba(191, 224, 227, var(--tw-ring-opacity));
    }

    .modal .modal-btn:active, .modal .modal-btn:hover:active {
      --tw-bg-opacity: 1;
      background-color: rgba(230, 243, 244, 1);
      --tw-ring-offset-width: 1px;
    }


  .btn-info:after {
    --tw-border-opacity: 1;
    border-color: rgba(0, 130, 144, 1);
  }


  .btn-radio-group.horizontal > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * 0);
    margin-left: calc(0.75rem * 1);
  }

  .btn-radio-group.horizontal {
    display: flex;
    width: 100%; /*sm:max-w-xs; if we want to cap the field widths */
  }

  .btn-radio-group:not(.horizontal) > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * 1);
    margin-bottom: calc(0.5rem * 0);
  }


  .btn-radio-group input[type=radio] + label {
    min-width: 60px;
    min-height: 3.5rem;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, 1);
  }

    .btn-radio-group input[type=radio] + label:hover {
      --tw-bg-opacity: 1;
      background-color: rgba(242, 249, 249, 1);
    }

  .btn-radio-group input[type=radio] + label {
    --tw-border-opacity: 1;
    border-color: rgba(0, 130, 144, 1);
    color: rgba(0, 130, 144, 1);
  }

    .btn-radio-group input[type=radio] + label:focus {
      --tw-border-opacity: 1;
      border-color: rgba(153, 205, 211, 1);
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
      --tw-ring-opacity: 1;
      --tw-ring-color: rgba(191, 224, 227, var(--tw-ring-opacity));
    }

  @media (min-width: 640px) {
    .btn-radio-group input[type=radio] + label {
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
    }
  }

  .btn-radio-group input[type=radio]:checked + label {
    background-color: rgba(0, 130, 144, 1);
    color: rgba(255, 255, 255, 1);
  }

  .btn-radio-group input[type=radio] + label:active, .btn-radio-group input[type=radio] + label:hover:active {
    background-color: rgba(230, 243, 244, 1);
  }

  label.optional:after {
    content: '(optional)';
    display: inline-block;
    font-size: 0.75rem;
    line-height: 1rem;
    margin-left: 0.5rem;
    color: rgba(163, 163, 163, 1);
  }

  input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, select:focus, textarea:focus {
    background-color: rgba(242, 249, 249, 1);
  }

  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
    border-color: rgba(212, 212, 212, 1);
  }

    input:not([type=checkbox]):not([type=radio]):not([type=file]):hover, select:hover, textarea:hover {
      border-color: rgba(163, 163, 163, 1);
    }


    input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, select:focus, textarea:focus {
      --tw-border-opacity: 1;
      border-color: rgba(153, 205, 211, 1);
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
      --tw-ring-opacity: 1;
      --tw-ring-color: rgba(191, 224, 227, var(--tw-ring-opacity));
    }


  option {
    background-color: white !important;
  }

  input[type=checkbox] {
    border-color: rgba(212, 212, 212, 1);
  }

    input[type=checkbox]:hover {
      border-color: rgba(163, 163, 163, 1);
    }


    input[type=checkbox]:focus {
      --tw-border-opacity: 1;
      border-color: rgba(153, 205, 211, 1);
      outline: 2px solid transparent;
      outline-offset: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
      --tw-ring-opacity: 1;
      --tw-ring-color: rgba(191, 224, 227, var(--tw-ring-opacity));
    }

    input[type=checkbox]:checked {
      border-color: transparent;
      color: rgba(0, 130, 144, 1);
    }


  .field input.invalid, .field select.invalid, .field textarea.invalid {
    --tw-border-opacity: 1;
    border-color: rgba(222, 119, 125, 1);
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(232, 160, 164, var(--tw-ring-opacity));
  }

  .field small {
    display: block;
    font-size: 0.75rem;
    line-height: 1rem;
    margin-top: 0.5rem;
    color: rgba(115, 115, 115, 1);
  }

  .field ul.validation {
    display: block;
    font-size: 0.75rem;
    line-height: 1rem;
    margin-top: 0.5rem;
    color: rgba(192, 47, 55, 1);
  }

  div.password span:after {
    color: rgba(0, 130, 144, 1);
    width: 2rem;
  }


  .sm\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
    margin-right: calc(0.75rem *0);
    margin-left: calc(0.75rem *1);
  }

  .sm\:space-x-12 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(3rem * 0);
    margin-left: calc(3rem * 1);
  }


  .flex {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    -ms-flex: 1 1 auto;
  }

  .inline-flex {
    display: inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-inline-box;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-1 {
    flex: 1 1 0%;
  }

  .flex-grow {
    flex-grow: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .btn-radio-group.horizontal {
    display: -ms-flexbox;
  }


  .btn-radio-group input[type=radio] + label {
    display: -ms-inline-flexbox;
  }

  .field ul.validation li {
    display: -ms-flexbox;
  }

  @media (min-width: 400px) {
    .xs\:flex {
      display: -ms-flexbox;
    }

    .xs\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
      margin-top: calc(0px * 1);
      margin-bottom: calc(0px * 0);
    }

    .xs\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
      margin-right: calc(0.75rem * 0);
      margin-left: calc(0.75rem * 1);
    }
  }

  @media (min-width: 640px) {
    .sm\:flex {
      display: -ms-flexbox;
    }
  }


  @media (min-width: 640px) {
    .sm\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
      margin-right: calc(0.75rem * 0);
      margin-left: calc(0.75rem * 1);
    }

    .sm\:space-x-12 > :not([hidden]) ~ :not([hidden]) {
      margin-right: calc(3rem * 0);
      margin-left: calc(3rem * 1);
    }
  }
}