/* Colors */
:root {
    --blue1: #83BDF2;
    --blue2: #66ACED;
    --blue3: #1274CC;
    --blue4: #004D94;
    --blue5: #002242;
    --white: #FFFFFF;
    --blueishGray: #F0F4F9;
    --gray: #E0E3EB;
    --defaultFontColor: #757676;
    --black: #000000;
    --focusTeal: #59DBC7;
    --errorRed: #DF021B;
}

/* Fonts */
@font-face{
    font-family:"Praxis W01_n3";
    src:url("../fonts/Praxis/ef2f58db-514f-4b07-b35c-ba9a22e9310e.eot?#iefix") format("eot")
}
@font-face{
    font-family:"Praxis W01";
    src:url("../fonts/Praxis/ef2f58db-514f-4b07-b35c-ba9a22e9310e.eot?#iefix");
    src:url("../fonts/Praxis/ef2f58db-514f-4b07-b35c-ba9a22e9310e.eot?#iefix") format("eot"),url("../fonts/Praxis/9c7f4b25-d3b9-4c0d-8652-9b9a63b04419.woff2") format("woff2"),url("../fonts/Praxis/c07d39a4-7fd2-433f-a170-acda103cc3b0.woff") format("woff"),url("../fonts/Praxis/02747cc4-50bc-4746-9a6c-29b8a83e0a43.ttf") format("truetype"),url("../fonts/Praxis/6964fe0c-adfb-4657-9f5c-9bf2d9a121f4.svg#6964fe0c-adfb-4657-9f5c-9bf2d9a121f4") format("svg");
    font-weight: 300;
    font-style: normal;
}
@font-face{
    font-family:"Praxis W01_n4";
    src:url("../fonts/Praxis/3120e57f-f95f-4d3f-9ea4-ded8d94fc35f.eot?#iefix") format("eot")
}
@font-face{
    font-family:"Praxis W01";
    src:url("../fonts/Praxis/3120e57f-f95f-4d3f-9ea4-ded8d94fc35f.eot?#iefix");
    src:url("../fonts/Praxis/3120e57f-f95f-4d3f-9ea4-ded8d94fc35f.eot?#iefix") format("eot"),url("../fonts/Praxis/ccd9f39a-38d8-4b28-85d0-b4f7189133ea.woff2") format("woff2"),url("../fonts/Praxis/9847166c-c88e-4a11-bd8f-ec1e20cd6d8a.woff") format("woff"),url("../fonts/Praxis/1c5210ba-ea59-4c2a-9325-974777b5994e.ttf") format("truetype"),url("../fonts/Praxis/15c93ca1-97ac-4554-968f-6a9b6766162c.svg#15c93ca1-97ac-4554-968f-6a9b6766162c") format("svg");
    font-weight: 400;
    font-style: normal;
}
@font-face{
    font-family:"Praxis W01_n7";
    src:url("../fonts/Praxis/6ac2dff4-56e7-453a-b8fa-a836dd9c3195.eot?#iefix") format("eot")
}
@font-face{
    font-family:"Praxis W01";
    src:url("../fonts/Praxis/6ac2dff4-56e7-453a-b8fa-a836dd9c3195.eot?#iefix");
    src:url("../fonts/Praxis/6ac2dff4-56e7-453a-b8fa-a836dd9c3195.eot?#iefix") format("eot"),url("../fonts/Praxis/561c2d63-7b6a-4f07-a533-9eabfd3f8608.woff2") format("woff2"),url("../fonts/Praxis/cae652a9-0ca9-4bfb-b591-afc5a772ac96.woff") format("woff"),url("../fonts/Praxis/977dfce2-b45a-4e64-81d0-5d6180ff5f3b.ttf") format("truetype"),url("../fonts/Praxis/cfd81405-553f-4e35-89bc-c72bcbc47177.svg#cfd81405-553f-4e35-89bc-c72bcbc47177") format("svg");
    font-weight: 700;
    font-style: normal;
}

/**
 * Overwrite semantic css html height.
 * Important: DO NOT REMOVE THIS, IS USED FOR iFrameResizer.
 */
html {
    height: inherit;
    box-sizing: border-box;
    scroll-behavior: smooth;
    background-color: var(--white);
    max-width: 100%;
    font-size: 16px;
    line-height: 1.15;
    text-size-adjust: 100%;
}

/* General */
body {
    height: inherit;
    max-width: 100%;
    min-width: 1px;
    font-family: Praxis W01,Arial,Helvetica,sans-serif;
    font-size: 0.9375rem;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    text-size-adjust: 100%;
    margin: 0;
    color: var(--defaultFontColor);
}

button, input, optgroup, select, textarea {
    font-family: Praxis W01,Arial,Helvetica,sans-serif;
}

.flex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
}

h1, h1:last-child {
    font-family: Praxis W01,Arial,Helvetica,sans-serif;
    font-size: 1.75rem;
    line-height: 2.275rem;
    font-weight: 400;
    color: var(--blue5);
    margin: 2rem 0 0.5rem;
    display: block;
}

a, a:visited {
    color: var(--blue5);
    text-decoration: none;
    transition: background-color 0.25s ease-out 0s,
    color 0.25s ease-out 0s,
    box-shadow 0.25s ease-out 0s;
}

a:hover {
    color: var(--blue3);
}

.button, .button:visited {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--white);
    padding: 1rem 2.25rem 1rem 1rem;
    border-radius: 1.75rem;
    line-height: 1rem;
    color: var(--blue5);
    box-shadow: 0 2px 16px 0 rgba(10, 10, 130, 0.08),
    0 1px 2px 0 rgba(10, 10, 130, 0.16);
    text-decoration: none;
    transition: background-color 0.25s ease-out 0s,
    color 0.25s ease-out 0s,
    box-shadow 0.25s ease-out 0s;
    cursor: pointer;
    border: none;
}

.button:hover {
    color: var(--blue3);
    box-shadow: rgba(10, 10, 130, 0.08) 0 6px 32px 0,
    rgba(10, 10, 130, 0.08) 0 4px 16px 0,
    rgba(10, 10, 130, 0.24) 0 1px 4px 0,
    rgba(217, 220, 231, 0.2) 0 0 0 12px;
}

.button.blue {
    background-color: var(--blue4);
    color: var(--white);
}

.button.blue:hover {
    background-color: var(--blue5);
    box-shadow: 0 2px 16px 0 rgba(10, 10, 130, 0.08),
    0 1px 2px 0 rgba(10, 10, 130, 0.16);
    color: var(--white);
}

.button:disabled, .button:disabled:hover {
    background-color: var(--blueishGray);
    color: var(--defaultFontColor);
    cursor: not-allowed;
}

.button:disabled svg line, .button:disabled:hover svg line {
    stroke: var(--defaultFontColor);
}

a:focus-visible, button:focus-visible, button:focus, input:focus-visible {
    outline: 2px solid var(--blue3) !important;
    transition: none;
    outline-offset: 0;
}

/* Header */
header {
    width: 100%;
    background: linear-gradient(to bottom, rgba(18, 116, 204, 1) 0%, rgba(248, 251, 253, 1) 85%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 1) 100%);
}

header .contentContainer {
    width: 100%;
    max-width: 1232px;
    margin: 0 auto;
    padding: 2.225rem 30px 4.5rem;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.75rem;
}

header .headerButtons {
    flex-direction: row;
    gap: 0.75rem;
}

#logo img {
    display: block;
    max-width: 100%;
    width: 120px;
    filter: brightness(0) invert(1);
}

/* Custom CSS classes */
#form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 1.375rem;
    margin-top: 2rem;
}

.selectFilter, .field {
    position: relative;
    width: 100%;
}

.selectFilter svg {
    position: relative;
    top: 2px;
    margin-right: 7px;
}

#search svg {
    position: relative;
    top: 2px;
    margin-right: 4px;
}

.filter .multi-select {
    display: none;
}

/* Form */
.ui.form {
    font-size: inherit;
}

.ui.form input:not([type]), .ui.form input[type=date], .ui.form input[type=datetime-local], .ui.form input[type=email], .ui.form input[type=file], .ui.form input[type=number], .ui.form input[type=password], .ui.form input[type=search], .ui.form input[type=tel], .ui.form input[type=text], .ui.form input[type=time], .ui.form input[type=url], .ui.form textarea, .ui.form input:not([type]):focus, .ui.form input[type=date]:focus, .ui.form input[type=datetime-local]:focus, .ui.form input[type=email]:focus, .ui.form input[type=file]:focus, .ui.form input[type=number]:focus, .ui.form input[type=password]:focus, .ui.form input[type=search]:focus, .ui.form input[type=tel]:focus, .ui.form input[type=text]:focus, .ui.form input[type=time]:focus, .ui.form input[type=url]:focus {
    font-family: Praxis W01,Arial,Helvetica,sans-serif !important;
    height: 48px;
    border: 1px solid var(--blue2);
    border-radius: 23px;
    color: var(--blue3);
}

.ui.form input[type=email]::placeholder {
    color: var(--blue3);
}

/* Labels */
.floating-label {
    position: absolute;
    top: 10px;
    left: 0.75rem;
    pointer-events: none;
    transition: transform 0.2s ease-out, top 0.2s ease-out;
    transform-origin: 0 0;
    padding: 0 0.5rem;
    color: var(--blue3);
}

.field input:not(:placeholder-shown) + .floating-label,
.field input:focus + .floating-label,
.items-selected + .floating-label,
.items-selected:focus + .floating-label,
.ui-multiselect.ui-state-active + .floating-label,
.ui-multiselect.ui-state-active:focus + .floating-label {
    transform: translateY(-34%) scale(0.7);
    top: 0;
    left: 0.75rem;
    background-color: var(--white);
    padding: 0 0.5rem;
}

.field input:not(:placeholder-shown) + .floating-label svg,
.field input:focus + .floating-label svg,
.items-selected + .floating-label svg,
.items-selected:focus + .floating-label svg,
.ui-multiselect.ui-state-active + .floating-label svg,
.ui-multiselect.ui-state-active:focus + .floating-label svg {
    display: none;
}

.items-selected + .floating-label,
.items-selected:focus + .floating-label {
    transition: none;
}

/* Multiselect */
.ui-multiselect {
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--blue2);
    border-radius: 23px;
    height: 48px;
    color: var(--blue3);
    -webkit-transition: color .1s ease,border-color .1s ease;
    transition: color .1s ease,border-color .1s ease;
    padding: 0.75rem 1.25rem;
}
/*
.ui-multiselect:after {
    content: "";
    position: absolute;
    background: url(../images/icons/icon-chevron.svg) no-repeat;
    right: 22px;
    top: 22px;
    height: 6px;
    width: 10px;
    transition: transform 0.2s ease-in-out;
}
*/
.ui-multiselect.ui-state-active:after {
    transform: rotate(180deg);
}

.ui-multiselect span:last-child {
    color: var(--blue3);
    line-height: 1.3rem;
    width: 90%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Praxis W01,Arial,Helvetica,sans-serif !important;
    text-align: left;
}

.ui-multiselect-open {
    display: none;
}

.ui-state-active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ui-state-active.ui-multiselect span:last-child {
    color: var(--blue3);
}

button {
    cursor: pointer;
}

.ui-multiselect-menu {
    display: none;
    position: absolute;
    z-index: 10000;
    text-align: left;
    background: var(--white);
    border: 1px solid var(--blue2);
    border-top: 0;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

.ui-multiselect-checkboxes {
    position: relative;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0;
    padding: 0;
    list-style: none;
    height: inherit !important;
    max-height: 180px !important;
}

.ui-multiselect-checkboxes label {
    cursor: pointer;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    font-family: Praxis W01,Arial,Helvetica,sans-serif !important;
}

.ui-multiselect-checkboxes label input {
    display: none;
}

.ui-multiselect-checkboxes li {
    clear: both;
    padding: 0;
    border-bottom: 1px solid var(--blue2);
}

.ui-multiselect-checkboxes li:hover {
    background-color: var(--blueishGray);
}

.ui-multiselect-checkboxes li:hover span {
    color: var(--blue3) !important;
}

.ui-multiselect-checkboxes li:last-child {
    border-bottom: 0;
}

.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label {
    text-align: center;
    font-weight: bold;
}

.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a {
    display: block;
    padding: 3px;
    margin: 1px 0;
    text-decoration: none;
}

.ui-widget-header.ui-corner-all.ui-multiselect-header.ui-helper-clearfix {
    display: none;
}

.ui-corner-all input[type='checkbox']:not(:checked),
.ui-corner-all input[type='checkbox']:checked {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.ui-corner-all input[type='checkbox'] + span {
    line-height: 24px;
    letter-spacing: -.1px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding-left: 35px;
    color: var(--defaultFontColor);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.ui-corner-all input[type='checkbox'] + span::before,
.ui-corner-all input[type='checkbox'] + span::after {
    position: absolute;
    top: 1px;
    left: 0;
    z-index: 0;
    content: '';
}

.ui-corner-all input[type='checkbox'] + span::before {
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--blue2);
    width: 24px;
    height: 24px;
    border-radius: 3px;
    background-color: var(--white);
}

.ui-corner-all input[type='checkbox']:checked + span::before {
    transition: all 0ms cubic-bezier(0.4, 0, 0.2, 1);
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    line-height: 24px;
    color: var(--blue3);
    font-size: 18px;
    content: "";
    background-image: url(../images/icons/icon-check.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--blue3);
    border: 1px solid var(--blue3);
}

.ui-corner-all li:hover input[type='checkbox']:checked + span::before {
    border: 1px solid var(--blue3);
}

.ui-corner-all input[type='checkbox']:checked + span {
    color: var(--blue3);
}

.ui-corner-all input[type='checkbox']:hover + span::before {
    border: 1px solid var(--blue2);
    border-radius: 3px;
}

.ui-state-hover input[type='checkbox'] + span::after {
    transform: scale(0.5);
    color: var(--blue3);
}

.ui-corner-all input[type='checkbox']:disabled + span,
.ui-corner-all input[type='checkbox']:disabled + span + p {
    opacity: .4;
    pointer-events: none;
}

.grecaptcha-badge {
    display: none !important;
}

/* Confirmation */
.submit-confirmation > svg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

.confirmationContent {
    display: flex;
    flex-direction: column;
    z-index: 100;
    position: relative;
    box-sizing: border-box;
    margin-top: 2rem;
}

.confirmationContent h1 {
    text-align: center;
    font-size: 2rem;
    line-height: 2.4rem;
    font-weight: 500;
    letter-spacing: -0.5px;
}

/* Unsubscribe page */
main > svg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

#jobabo-unsubscribe {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 580px;
    padding: 1.5rem;
    box-sizing: border-box;
    z-index: 100;
    position: relative;
}

#jobabo-unsubscribe h1, #jobabo-unsubscribe p {
    text-align: center;
}

/* Error */
.error {
    color: var(--errorRed);
    margin: 0.5rem 0;
    font-size: 0.6875rem;
    line-height: 0.6875rem;
    padding: 0 1rem;
}

input.error {
    border: 1px solid var(--errorRed) !important;
}

/* Responsive */
@media (min-width: 37.5em) {
    body {
        font-size: 1rem;
    }
    .button {
        font-size: 1rem;
    }
}

@media (min-width: 64em) {
    body {
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 720px) {
    #wrapper.formPage {
        padding: 0 30px 40px;
        box-sizing: border-box;
        width: 100%;
        max-width: 1232px;
        margin: 0 auto;
    }
    .ui-multiselect-menu {
        width: calc(100% - 60px) !important;
    }
}

@media only screen and (min-width: 721px) {
    #wrapper.formPage {
        padding: 0 30px 40px;
        box-sizing: border-box;
        width: 100%;
        max-width: 1232px;
        margin: 0 auto;
    }
    .ui-multiselect-menu {
        width: calc(100% - 60px) !important;
        max-width: 1172px;
    }
}