.howapply,
.howapply-form,
.howapply-form-modal,
.howapply-overlay{
    --how-text:#212529;
    --how-heading:#00334a;
    --how-muted:#495057;
    --how-line:#dee2e6;
    --how-border:#ccc;
    --how-addon:#e9ecef;
    --how-addon-border:#ced4da;
    --how-accent:#f08008;
    --how-accent-hover:#003249;
    --how-check:#28a745;
    --how-required:#dc3545;
    --how-focus:#86b7fe;
    --how-band:#f4f8fa;
}
.howapply{
    color:var(--how-text);
    font-size:16px;
    line-height:1.45;
}
.howapply *,
.howapply *::before,
.howapply *::after,
.howapply-form-modal *,
.howapply-form-modal *::before,
.howapply-form-modal *::after,
.howapply-overlay *,
.howapply-overlay *::before,
.howapply-overlay *::after{box-sizing:border-box}

.howapply-form{
    border:0;
    margin:25px 0 0;
    padding:0;
    overflow:visible;
    background:var(--how-band);
    container-type:inline-size;
    container-name:howapply;
}
.howapply-header{
    display:block;
    margin:0;
    padding:24px 30px 25px;
    background:var(--how-band);
    font-weight:400;
}
.howapply-header .howapply-title,
.howapply-header h3{
    display:block;
    margin:0 0 6px;
    color:var(--how-heading);
    font-size:1.25rem;
    font-weight:700;
    line-height:1.2;
}
.howapply-header .howapply-lead{
    display:block;
    margin:0;
    color:var(--how-text);
    font-size:1rem;
    font-weight:400;
    line-height:1.45;
}
.howapply-star{color:var(--how-accent);font-weight:700}

.howapply-fieldset{
    display:block;
    margin:0;
    padding:0 30px 15px;
    border:0;
    border-radius:0;
    background:#e7f0f4;
    min-width:0;
}
.howapply-fieldset:nth-of-type(even){
    background:var(--how-band);
}
.howapply-fieldset legend{
    float:left;
    display:block;
    width:100%;
    margin:0 0 14px;
    padding:18px 0 0;
    border:0;
    background:transparent;
    color:#00334a;
    font-size:1.05rem;
    font-weight:700;
    line-height:1.2;
}
.howapply-fieldset legend + *{clear:both}

.howapply-row{
    display:flex;
    flex-wrap:wrap;
    margin:0 -8px;
}
.howapply-col{
    width:100%;
    padding:0 8px;
}
@container howapply (min-width: 560px){
    .howapply-col-3{width:25%}
    .howapply-col-6{width:50%}
    .howapply-col-third{width:33.333%}
}

.howapply-field{position:relative;margin-bottom:14px}
.howapply-field > label,
.howapply-check{
    display:block;
    margin:0 0 6px;
    color:#00334a;
    font-weight:600;
    font-size:.92rem;
    line-height:1.3;
}
.howapply-field:has(:required) > label::after,
.howapply-optin:has(:required) > span::after{
    content:" *";
    color:var(--how-accent);
    font-weight:600;
}
.howapply-error{
    display:block;
    margin:6px 0 0;
    color:#1a6f8c;
    font-size:.8125rem;
    font-weight:400;
    line-height:1.35;
}
.howapply-optin + .howapply-error{
    margin:-2px 0 4px 28px;
}
.howapply-field.is-invalid > .form-control,
.howapply-field.is-invalid > .form-control:focus,
.howapply-field.is-invalid .howapply-picker-btn,
.howapply-field.is-invalid .howapply-picker-btn:focus,
.howapply-field.is-invalid .howapply-picker-btn:hover{
    border-color:var(--how-accent);
    box-shadow:0 0 0 3px rgba(240,128,8,.16);
}
.howapply-optin.is-invalid input{
    border-color:var(--how-accent);
    box-shadow:0 0 0 3px rgba(240,128,8,.16);
}
.howapply-hint{margin:6px 0 0;font-size:.9rem;color:var(--how-muted)}
.howapply-status{margin:12px 0;font-size:1rem}
.howapply-status-error{color:var(--how-required)}

.howapply-form .form-control,
.howapply-form select.form-control,
.howapply-form textarea.form-control{
    display:block;
    width:100%;
    max-width:100%;
    height:38px;
    padding:6px 12px;
    border:1px solid var(--how-line, #ced4da);
    border-radius:6px;
    background:#fff;
    color:var(--how-text);
    font:inherit;
    line-height:1.5;
}
.howapply-form select.form-control{
    appearance:none;
    line-height:normal;
    font-variation-settings:normal;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path fill='%23495057' d='M0 0l6 8 6-8z'/></svg>");
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:32px;
}
.howapply-form select.form-control option{
    line-height:normal;
    font-size:16px;
    font-family:Arial, Helvetica, sans-serif;
    font-variation-settings:normal;
}
.howapply-picker{position:relative}
.howapply-native-select{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.howapply-picker-btn{
    display:flex;
    align-items:center;
    width:100%;
    height:38px;
    padding:6px 32px 6px 12px;
    border:1px solid var(--how-line, #ced4da);
    border-radius:6px;
    background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path fill='%23495057' d='M0 0l6 8 6-8z'/></svg>") no-repeat right 12px center;
    color:var(--how-text);
    font:inherit;
    font-weight:400;
    line-height:normal;
    letter-spacing:normal;
    text-align:left;
    text-transform:none;
    cursor:pointer;
}
.howapply-picker-btn.is-placeholder{color:rgba(33,37,41,.55)}
.howapply-picker-list{
    position:absolute;
    z-index:40;
    left:0;
    right:0;
    top:calc(100% + 4px);
    margin:0;
    padding:4px 0;
    list-style:none;
    background:#fff;
    border:1px solid var(--how-line, #ced4da);
    border-radius:6px;
    box-shadow:0 8px 24px rgba(0,0,0,.16);
    max-height:240px;
    overflow:auto;
}
.howapply-picker-option{
    display:block;
    width:100%;
    padding:8px 12px;
    border:0;
    background:transparent;
    color:#212529;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:400;
    line-height:1.3;
    letter-spacing:normal;
    text-align:left;
    text-transform:none;
    cursor:pointer;
}
.howapply-picker-option:hover,
.howapply-picker-option.is-selected{
    background:#00334a;
    color:#fff;
}
form .howapply-picker button.howapply-picker-btn,
form .howapply-picker button.howapply-picker-option{
    height:auto;
    overflow:visible;
    position:static;
    transform:none;
    white-space:normal;
    box-shadow:none;
}
form .howapply-picker button.howapply-picker-option{
    background-image:none;
}
form .howapply-picker button.howapply-picker-btn{
    height:38px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
form .howapply-picker button.howapply-picker-btn::before,
form .howapply-picker button.howapply-picker-btn::after,
form .howapply-picker button.howapply-picker-option::before,
form .howapply-picker button.howapply-picker-option::after{
    content:none;
    display:none;
}
form .howapply-picker button.howapply-picker-btn:hover{
    transform:none;
    background-color:#fff;
    color:var(--how-text);
}
form .howapply-picker button.howapply-picker-option:hover,
form .howapply-picker button.howapply-picker-option.is-selected{
    transform:none;
    background:#00334a;
    background-image:none;
    color:#fff;
}
.howapply-form textarea.form-control{
    height:auto;
    min-height:96px;
    resize:vertical;
}
.howapply-form .form-control::placeholder{
    color:rgba(0,51,74,.4);
}
.howapply-form .form-control:focus{
    outline:0;
    border-color:#7aa0b0;
    box-shadow:0 0 0 .2rem rgba(0,51,74,.15);
}
.howapply-form input[type="file"].form-control{
    height:auto;
    padding:4px;
    background:var(--how-addon);
}

.howapply-licences{
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    padding:8px 12px;
    border:1px solid var(--how-line, #ced4da);
    border-radius:6px;
    background:#fff;
}
.howapply-licences label{
    display:flex;
    align-items:center;
    gap:6px;
    margin:0;
    font-weight:400;
    font-size:.95rem;
    cursor:pointer;
}
.howapply-licences input{
    width:16px;
    height:16px;
    margin:0;
}

.howapply-optin{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:0;
    padding:7px 0;
    font-weight:400;
    font-size:.95rem;
    line-height:1.4;
    cursor:pointer;
}
.howapply-optin span{flex:1}
.howapply-optin a{color:#00334a}
.howapply-optin input{
    appearance:none;
    flex:0 0 18px;
    width:18px;
    height:18px;
    margin:2px 0 0;
    border:1px solid #9bb0ba;
    border-radius:3px;
    background:#fff;
    cursor:pointer;
    position:relative;
}
.howapply-optin input:checked{
    background:#00334a;
    border-color:#00334a;
}
.howapply-optin input:checked::after{
    content:"";
    position:absolute;
    left:5px;
    top:1px;
    width:5px;
    height:9px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.howapply-open{margin-top:25px}
.howapply-actions{
    padding:30px 30px 50px;
    text-align:right;
}
.howapply-dialog-close{margin-top:18px}
.howapply-form[data-howapply-busy]{pointer-events:none}

.howapply-overlay{
    position:fixed;
    inset:0;
    z-index:2147483000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(17,24,32,.45);
    backdrop-filter:blur(4px);
}
.howapply-overlay[hidden]{display:none}
.howapply-dialog{
    width:min(420px,100%);
    padding:28px 24px 22px;
    border-radius:4px;
    background:#fff;
    box-shadow:0 24px 60px rgba(15,23,42,.22);
    text-align:center;
}
.howapply-dialog-icon{
    width:56px;
    height:56px;
    margin:0 auto 16px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.howapply-dialog[data-state="sending"] .howapply-dialog-icon{background:#fff4ec}
.howapply-dialog[data-state="ok"] .howapply-dialog-icon{background:#e8f7ee;color:#157347;font-size:1.6rem}
.howapply-dialog[data-state="error"] .howapply-dialog-icon{background:#fdecec;color:#b42318;font-size:1.6rem}
.howapply-spinner{
    width:28px;
    height:28px;
    border:3px solid #f3d2bf;
    border-top-color:var(--how-accent);
    border-radius:50%;
    animation:howapply-spin .7s linear infinite;
}
@keyframes howapply-spin{to{transform:rotate(360deg)}}
.howapply-overlay .howapply-dialog-title{
    margin:0 0 6px;
    font-family:inherit;
    font-size:1.15rem;
    font-weight:700;
    line-height:1.25;
    letter-spacing:0;
    text-transform:none;
    color:var(--how-heading,#003249);
}
.howapply-dialog-text{margin:0;color:#4b5563;line-height:1.45;white-space:pre-wrap}
.howapply-dialog[data-state="sending"] .howapply-dialog-close{display:none}
.howapply-body-locked{overflow:hidden}
.howapply-is-hidden{display:none}

.howapply-form-modal{
    position:fixed;
    inset:0;
    z-index:2147482000;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:32px 16px;
    overflow:auto;
    background:rgba(17,24,32,.45);
}
.howapply-form-modal[hidden]{display:none}
.howapply-form-dialog{
    position:relative;
    width:min(850px,100%);
    max-width:850px;
    margin:auto;
    background:var(--how-band);
    border-radius:8px;
    box-shadow:0 24px 60px rgba(15,23,42,.22);
}
.howapply-form-modal .howapply-form{
    margin:0;
    border:0;
    border-radius:8px;
    overflow:hidden;
}
.howapply-form-modal .howapply-header{
    padding:24px 64px 25px 30px;
    background:#0f2c49;
}
.howapply-form-modal .howapply-header .howapply-title,
.howapply-form-modal .howapply-header h3{
    color:#f08008;
    font-size:2rem;
}
.howapply-form-modal .howapply-header .howapply-lead{color:#fff}
.howapply-form-dialog .howapply-form-close{
    position:absolute;
    top:18px;
    right:18px;
    z-index:2;
    width:30px;
    height:30px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:transparent;
    font-size:0;
    line-height:0;
    letter-spacing:normal;
    text-transform:none;
    overflow:visible;
    cursor:pointer;
}
.howapply-form-dialog .howapply-form-close::before,
.howapply-form-dialog .howapply-form-close::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:30px;
    height:2px;
    margin:-1px 0 0 -15px;
    background:#fff;
    border-radius:1px;
}
.howapply-form-dialog .howapply-form-close::before{transform:rotate(45deg)}
.howapply-form-dialog .howapply-form-close::after{transform:rotate(-45deg)}
.howapply-form-dialog .howapply-form-close:hover::before,
.howapply-form-dialog .howapply-form-close:hover::after,
.howapply-form-dialog .howapply-form-close:focus::before,
.howapply-form-dialog .howapply-form-close:focus::after{background:#f08008}
