@font-face {
   font-display: swap;
   font-family: 'H1';
   font-style: normal;
   font-weight: 600;
   src: url('h1.woff2') format('woff2'),
      url('h1.woff') format('woff'),
      url('literata-v35-latin-600.ttf') format('truetype')
}
/* roboto-regular */
@font-face {
   font-display: swap;
   font-family: 'Body';
   font-style: normal;
   font-weight: 400;
   src: url('roboto-v32-latin-regular.woff2') format('woff2'),
      url('roboto-v32-latin-regular.woff') format('woff'),
      url('roboto-v32-latin-regular.ttf') format('truetype'),
}
/* roboto-500 */
@font-face {
   font-display: swap;
   font-family: 'Body';
   font-style: normal;
   font-weight: 500;
   src: url('roboto-v32-latin-500.woff2') format('woff2'),
      url('roboto-v32-latin-500.woff') format('woff'),
      url('roboto-v32-latin-500.ttf') format('truetype'),
}
/* roboto-700 */
@font-face {
   font-display: swap;
   font-family: 'Body';
   font-style: normal;
   font-weight: 700;
   src: url('roboto-v32-latin-700.woff2') format('woff2'),
      url('roboto-v32-latin-700.woff') format('woff'),
      url('roboto-v32-latin-700.ttf') format('truetype'),
}
html {
   font-size: 16px;
}
button,
a,
button:hover,
a:hover {
   transition: 0.3s all ease-in-out;
   cursor: pointer;
}
body {
   font-family: 'Body', Arial, sans-serif;
   margin: 0;
   padding: 0;
   line-height: 1.5;
}
body>* {
   padding: 1rem;
}
.sidebar {
   background-color: #003366;
   color: white;
   border-bottom-left-radius: 1.5rem;
   border-bottom-right-radius: 1.5rem;
}
.brand-logo {
   filter: invert(1);
   height: 2.5rem;
   margin-bottom: 1.5rem;
}
.sidebar p {
   color: #CBD8E3;
   margin-bottom: 1rem;
}
.support-section {
   background-color: #002244;
   color: white;
   padding: 15px;
   margin-top: 1.5rem;
   border-radius: 1rem;
}
.support-section a {
   color: #00B6FF;
   text-decoration: underline;
}
.support-section a:hover {
   color: #78d9ff;
}
.form-instructions {
   font-size: 0.875rem;
   color: #6F7477;
}
.required-indicator,
.required-asterisk {
   color: #FF5861;
   font-weight: 400;
}
.form-section {
   margin-top: 1rem;
   margin-bottom: 1rem;
}
h1 {
   font-family: 'H1';
   margin-bottom: 1rem;
}
h2 {
   margin-bottom: 1.5rem;
   color: #2F3538;
   font-size: 1.25rem;
}
h1,
h2,
h3 {
   margin-top: 0;
   line-height: 1.3;
}
.form-group {
   margin-bottom: 2.25rem;
   display: flex;
   flex-direction: column;
   position: relative;
}
.form-group label {
   font-size: 1rem;
   color: #6F7477;
   margin-bottom: 1rem;
   font-weight: 500;
}
input,
textarea,
select {
   padding: 1.0rem 1.5rem;
   border: 2.5px solid #D9E1ED;
   border-radius: .5rem;
   background-color: #FAFBFD;
   font-size: 1.125rem;
   color: #2F3538;
   box-shadow: inset 0px 0px 4px 0px #ffffff;
}
.error input,
.error textarea,
.error select {
   border: 2.5px solid #ffcbce;
   background-color: #f9eff0;
   color: #FF5861;
   box-shadow: none;
}
.error ::placeholder,
textarea::placeholder {
   color: #fe848a;
}
input::placeholder,
textarea::placeholder {
   font-size: 1.125rem;
   color: #6F7477;
   font-family: 'Body', Arial, sans-serif;
}
input:focus,
textarea:focus,
select:focus {
   background-color: white;
   outline-color: #00B6FF;
   border: 2.5px solid #00B6FF;
   box-shadow: 0px 0px 6px -2px #00B6FF;
}
.error input:focus,
.error textarea:focus,
.error select:focus {
   outline-color: #FF5861;
   border: 2.5px solid #FF5861;
   -webkit-box-shadow: 0 0 0 4px rgba(234, 100, 217, 0.1);
   box-shadow: 0 0 0 4px rgba(234, 100, 217, 0.1);
}
.error-message {
   display: none;
   font-size: 0.875rem;
   line-height: 1.25;
   gap: .5rem;
   align-items: center;
   color: #FF5861;
   position: absolute;
   bottom: 0;
   transform: translateY(calc(100% + .125rem));
}
.error .error-message {
   display: flex;
}
.diamond-container {
   display: inline-block;
   width: .75rem;
   height: .75rem;
   position: relative;
}
.diamond {
   width: .75rem;
   height: .75rem;
   background: #FF5861;
   transform: rotate(45deg);
   position: absolute;
   top: 0;
   left: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: .125rem;
}
.diamond span {
   transform: rotate(-45deg);
   font-size: 0.625rem;
   color: white;
   font-weight: bold;
}
.upload-box {
   border: 2.5px dashed #D9E1ED;
   border-radius: .5rem;
   background-color: #FAFBFD;
   padding: 1.0rem;
   text-align: center;
   border-radius: .5rem;
}
.upload-box>* {
   display: flex;
   gap: 1rem;
   align-items: center;
   position: relative;
}
.upload-box.dragover {
   background-color: #e5f8ff;
   border: 2.5px dashed #00B6FF;
}
.upload-icon-container {
   width: 4rem;
   height: 4rem;
   background-color: #D8EECB;
   border-radius: 100%;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
}
.upload-box.dragover .upload-icon-container {
   background-color: #b5eaff;
}
.upload-box.dragover .upload-icon-container svg path {
   fill: #00B6FF;
}
.upload-icon-container {
   position: relative;
   top: -1px;
}
.upload-box p {
   font-size: 1rem;
   color: #6F7477;
   text-align: left;
   flex-grow: 1;
}
.upload-box p a {
   color: #2F3538;
   font-weight: 500;
}
.upload-box p a::after {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
   content: "";
}
.upload-box p small {
   font-size: 0.75rem;
   display: block
}
.error .upload-box {
   border: 2.5px dashed #ffcbce;
   background-color: #f9eff0;
   box-shadow: none;
}
.error .upload-box p,
.error .upload-box p a {
   color: #FF5861;
}
.error .upload-icon-container {
   background-color: #FBC3C7;
}
.error .upload-icon-container svg {
   filter: invert(66%) sepia(86%) saturate(5513%) hue-rotate(327deg) brightness(106%) contrast(101%);
}
.accepted-icon-container {
   position: relative;
}
.accepted-icon-container .filetype {
   position: absolute;
   bottom: .5rem;
   left: 0;
   right: 0;
   font-size: 0.75rem;
   font-weight: 500;
   color: #fff;
}
.accepted-state .cancel-file {
   border: none;
   padding-block: 0;
   padding-inline: 0;
   background: none;
}
.accepted-state .cancel-file svg {
   transition: 0.3s ease-in-out all;
}
.accepted-state .cancel-file:hover svg {
   filter: brightness(50%);
}
.checkbox-group {
   flex-direction: row;
   gap: .5rem;
}
.checkbox-group input[type=checkbox] {
   align-self: flex-start;
   top: 1px;
   position: relative;
}
.checkbox-group label {
   font-weight: 400;
   font-size: 0.875rem;
   margin-bottom: 0;
}
button.submit {
   background-color: #003366;
   color: white;
   border: none;
   border-radius: .5rem;
   cursor: pointer;
   width: 100%;
   height: 3.5rem;
   font-size: 1.125rem;
   font-weight: 700;
   margin-bottom: 2rem;
}
button.submit:hover {
   background-color: #002244;
}
button.secondary {
    background-color: #f9f9f9;
    color: black;
    border: none;
    border-radius: .5rem;
    cursor: pointer;
    width: 100%;
    height: 3.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

    button.secondary:hover {
        background-color: #c9c9c9;
    }
.cadmore {
   text-align: center;
   font-size: 0.875rem;
   color: #6F7477;
   display: block;
   text-decoration: none;
}
.cadmore:hover {
   color: #2F3538;
}
@media only screen and (min-width: 360px) {
   /* CSS rules */
}
@media only screen and (min-width: 500px) {
   /* CSS rules */
}
@media only screen and (min-width: 640px) {
   body>* {
      padding: 1rem 2rem;
   }
   .sidebar {
      padding: 2rem;
   }
   .support-section {
      padding: 1.5rem;
   }
   .form-row {
      display: flex;
      flex-direction: row;
      gap: 2rem;
   }
   .form-row .form-group {
      width: 100%;
   }
}
@media only screen and (min-width: 768px) {
   /* CSS rules */
}
@media only screen and (min-width: 1024px) {
   body {
      display: flex;
      position: relative;
      width: 100%;
   }
   .sidebar {
      border-radius: 0;
      position: sticky;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      max-width: 24rem;
      height: 100vh;
      overflow: hidden;
      left: auto;
      bottom: 0;
   }
   .main-content {
      flex-grow: 1;
   }
   .main-content form {
      max-width: 38rem;
      margin: 0 auto;
   }
}
@media only screen and (min-width: 1280px) {
   /* CSS rules */
}
@media only screen and (min-width: 1536px) {
   .sidebar>div {
      max-width: 24rem;
   }
}