/* ############ ############ ############ ############ ############ ############ ############ ##
   JOBEXCHANGE CSS v2.4.21 / 2023-11-29
   Copyright Infoniqa Holding GmbH
   Created by Hartwig Waltle
## ############ ############ ############ ############ ############ ############ ############ */



/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT

## ############ ############ ############ ############ ############ ############ ############ */

html {
    
    background-color: var(--inf-footer-bgcolor);
}

body {
    background: var(--inf-color-light);
    color: var(--inf-color-dark);
    font-family: var(--inf-font-family);
    font-size: var(--inf-font-size);
    font-weight: var(--inf-font-weight);
    line-height: var(--inf-line-height);
    text-align: var(--inf-text-align);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--inf-heading-color);
    font-family: var(--inf-heading-font-family);
    font-weight: var(--inf-heading-font-weight);
    line-height: var(--inf-heading-line-height);
    margin-bottom: 0.5rem;
    margin-top: 0;    
}
h1 {
    font-size: var(--inf-heading-font-size-h1);
}
h2 {
    font-size: var(--inf-heading-font-size-h2);
}
h3, h4, h5, h6 {
    font-size: var(--inf-heading-font-size-h3);
}
p {
    margin-bottom: 0.5rem;
}
a {
    color: var(--inf-link-color);
    text-decoration: var(--inf-link-text-decoration);
}
a:hover {
    color: var(--inf-link-hover-color);
    text-decoration: var(--inf-link-hover-text-decoration);
}
ol, ul {
    padding-left: 1.25rem;
}
ul {
    list-style-type: circle;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT | FORM | TEXT
   <input type="password"> // <input type="text"> // <textarea>
## ############ ############ ############ ############ ############ ############ ############ */

/* bootstrap forms > form control | .form-control */
input[type=password],
input[type=text],
textarea {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-clip: padding-box;
    background-color: var(--inf-form-bgcolor);
    border: var(--inf-form-border);
    border-radius: var(--inf-form-border-radius);   
    color: var(--inf-form-color);
    display: block;
    font-size: var(--inf-form-font-size);
    font-weight: var(--inf-form-font-weight);
    line-height: var(--inf-form-line-height);
    max-width: none !important; /* reset inline css */
    padding: 0.375rem 0.75rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 100% !important; /* reset inline css */
}

/* bootstrap forms > form control focus | .form-control:focus */
input[type=password]:focus,
input[type=text]:focus,
textarea:focus {
    background-color: var(--inf-form-bgcolor);
    border: var(--inf-form-focus-border);
    box-shadow: var(--inf-form-focus-shadow);
    color: var(--inf-form-color);
    outline: 0;
}

/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT | FORM | SELECT
   <select>
## ############ ############ ############ ############ ############ ############ ############ */

/* bootstrap forms > select | .form-select */
select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: var(--inf-form-bgcolor);
    background-image: var(--info-icon-form-select);
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    border: var(--inf-form-border);
    border-radius: var(--inf-form-border-radius);
    color: var(--inf-form-color);
    display: block;
    font-size: var(--inf-form-font-size);
    font-weight: var(--inf-form-font-weight);
    line-height: var(--inf-form-line-height);
    max-width: none !important; /* reset inline css */
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 100% !important; /* reset inline css */
}
/* bootstrap forms > select focus | .form-select:focus */
select:focus {
    border: var(--inf-form-focus-border);
    box-shadow: var(--inf-form-focus-shadow);
    outline: 0;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT | FORM | CHECK
   <input type="checkbox"> // <input type="radio">
## ############ ############ ############ ############ ############ ############ ############ */

/* bootstrap forms > checks / radios | .form-check */
.checkboxContainer,
.radioItem {
    display: block;
    margin-bottom: 0.125rem;
    min-height: 1.5rem;
    padding-left: 1.5rem;
}
/* bootstrap forms > checks / radios | .form-check .form-check-input */
input[type=checkbox],
input[type=radio] {
    float: left;
    margin-left: -1.5rem;
}
/* bootstrap forms > checks / radios | .form-check-input */
input[type=checkbox],
input[type=radio] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: var(--inf-form-bgcolor);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border: var(--inf-form-border);
    color-adjust: exact;
    height: 1rem;
    margin-top: 0.25rem;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    vertical-align: top;
    width: 1rem !important;
}
/* bootstrap forms > checks / radios | .form-check-input[type=checkbox] */
input[type=checkbox] {
    border-radius: var(--inf-form-check-border-radius);
}
/* bootstrap forms > checks / radios | .form-check-input[type=radio] */
input[type=radio] {
    border-radius: 50%;
}
/* bootstrap forms > checks / radios | .form-check-input:focus */
input[type=checkbox]:focus,
input[type=radio]:focus {
    border: var(--inf-form-focus-border);
    outline: 0;
    box-shadow: var(--inf-form-focus-shadow);
}
/* bootstrap forms > checks / radios | .form-check-input:checked */
input[type=checkbox]:checked,
input[type=radio]:checked {
    background-color: var(--inf-form-checked-bgcolor);
    border: var(--inf-form-focus-border);
}
/* bootstrap forms > checks / radios | .form-check-input:checked[type=checkbox] */
input:checked[type=checkbox] {
    background-image: var(--info-icon-form-checkbox);
}
/* bootstrap forms > checks / radios | .form-check-input:checked[type=radio] */
input:checked[type=radio] {
    background-image: var(--info-icon-form-radio);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT | BUTTON
   <input type="button">
## ############ ############ ############ ############ ############ ############ ############ */

/* bootstrap buttons | .btn */
.button {
    background-color: var(--inf-button-bgcolor);
    border: var(--inf-button-border);
    border-radius: var(--inf-button-border-radius);
    color: var(--inf-button-color);
    cursor: pointer;
    display: inline-block;
    font-family: var(--inf-button-font-family);
    font-size: var(--inf-button-font-size);
    font-weight: var(--inf-button-font-weight);
    height: initial !important; /* reset inline css */
    line-height: var(--inf-button-line-height);
    padding: var(--inf-button-padding);
    text-align: center;
    text-decoration: none;
    text-transform: var(--inf-button-text-transform);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    width: initial !important; /* reset inline css */
}
/* bootstrap buttons | .btn:hover */
.button:hover {
    background-color: var(--inf-button-hover-bgcolor);
    border: var(--inf-button-hover-border);
    color: var(--inf-button-hover-color);
}
/* bootstrap buttons | .btn:focus-visible */
.button:focus-visible {
    background-color: var(--inf-button-hover-bgcolor);
    border: var(--inf-button-hover-border);
    box-shadow: var(--inf-button-focus-shadow);
    color: var(--inf-button-hover-color);
    outline: 0;
}
/* bootstrap buttons | .btn:disabled, .btn.disabled, fieldset:disabled .btn */
.button:disabled {
    opacity: 0.5;
    pointer-events: none;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT | LAYOUT
   <div class="jexResponsive">
## ############ ############ ############ ############ ############ ############ ############ */

.jexResponsive {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
    width: 100%;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT | ERROR MESSAGE
   <div class="jexResponsive"> ... <div class="errorMessage">
## ############ ############ ############ ############ ############ ############ ############ */

.errorMessage:not(:empty) {
    background-color: var(--inf-error-bgcolor);
    border-radius:var(--inf-error-border-radius); 
    color: var(--inf-error-color);
    display: inline-block;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    width: 100%;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   DEFAULT | PLEASE WAIT
   <div class="jexResponsive"> ... <div class="blockUI">
## ############ ############ ############ ############ ############ ############ ############ */

/* overlay */
body > .blockUI.blockOverlay,
.jexResponsive .blockUI.blockOverlay {
    background-color: var(--inf-wait-overlay-bgcolor) !important;
    filter: initial !important;
    opacity: initial !important;
    z-index: 9000 !important;
}
/* message */
body > .blockUI.blockMsg,
.jexResponsive .blockUI.blockMsg {
  background-color: var(--inf-wait-message-bgcolor) !important;
  border: var(--inf-wait-message-border) !important;
  border-radius: var(--inf-wait-message-border-radius);
  filter: initial !important;
  font-size: 1rem;
  padding: 1rem !important;
  opacity: initial !important;
  z-index: 9001 !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   HEADER | LAYOUT
   <div class="jexResponsive"> <div id="headerDiv">
## ############ ############ ############ ############ ############ ############ ############ */

#headerDiv {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
    margin-right: -1rem;
}
#headerDiv > * {
    flex-shrink: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}
#headerDiv .header {
    flex: 1 0 0%;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   HEADER | NAVBAR
   <div class="jexResponsive"> <div id="headerDiv"> <div class="header-menu">
## ############ ############ ############ ############ ############ ############ ############ */

#headerDiv .header-menu {
    background-color: var(--inf-navbar-bgcolor);
    box-shadow: var(--inf-navbar-shadow);
    left: var(--inf-navbar-position-value);
    position: var(--inf-navbar-position);
    right: var(--inf-navbar-position-value);
    top: var(--inf-navbar-position-value);
    z-index: 8950;
}
#headerDiv .header-menu .navbar {
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
}
#headerDiv .header-menu .navbar .container {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* logo */
#headerDiv .header-menu .navbar .navbar-brand {
    margin-right: var(--inf-navbar-logo-margin-right);
    padding: 0;
}
#headerDiv .header-menu .navbar .navbar-brand img {
    height: var(--inf-navbar-logo-height);
}

/* mobile menu toggler */
#headerDiv .header-menu .navbar .navbar-toggler {
    background-color: var(--inf-navbar-toggler-bgcolor);
    border: var(--inf-navbar-toggler-border);
    border-radius: var(--inf-navbar-toggler-border-radius);
    color: var(--inf-navbar-color);
    font-size: var(--inf-navbar-toggler-font-size);
    line-height: 1;
    padding: var(--inf-navbar-toggler-padding);
    transition: box-shadow 0.15s ease-in-out;
}
#headerDiv .header-menu .navbar .navbar-toggler:focus {
    box-shadow: var(--inf-navbar-toggler-focus-shadow);
    outline: 0;
    text-decoration: none;
}
#headerDiv .header-menu .navbar .navbar-toggler-icon {
    background-image: var(--inf-icon-navbar-toggler);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: inline-block;
    height: 1.5rem;
    vertical-align: middle;
    width: 1.5rem;
}

/* menu breakpoints */
@media (min-width: 768px) {
    #headerDiv .header-menu .navbar.navbar.navbar-expand-md .collapse {
        position: relative;
    }
}
@media (min-width: 992px) {
    #headerDiv .header-menu .navbar.navbar.navbar-expand-lg .collapse {
        position: relative;
    }
}

/* menu link */
#headerDiv .header-menu .navbar .navbar-nav .nav-link {
    color: var(--inf-navbar-color);
    display: block;
    font-size: var(--inf-navbar-font-size-mobile);
    font-weight: var(--inf-navbar-font-weight);
    margin-top: 0.5rem;
    padding: 0;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#headerDiv .header-menu .navbar .navbar-nav .nav-link:hover,
#headerDiv .header-menu .navbar .navbar-nav .nav-link:focus {
    color: var(--inf-navbar-color-hover);
}
@media (min-width: 768px) {
    #headerDiv .header-menu .navbar.navbar-expand-md .navbar-nav .nav-link {
        font-size: var(--inf-navbar-font-size);
        margin-top: 0;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
}
@media (min-width: 992px) {
    #headerDiv .header-menu .navbar.navbar-expand-lg .navbar-nav .nav-link {
        font-size: var(--inf-navbar-font-size);
        margin-top: 0;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   HEADER | NAVBAR | LANGUAGE
   <div class="jexResponsive"> <div id="headerDiv"> <div class="header-menu"> <div class="navbar"> <div class="container"> <div class="navbar-collapse"> <form>
## ############ ############ ############ ############ ############ ############ ############ */

#headerDiv .header-menu .navbar form {
    margin-top: 0.5rem;
}
@media (min-width: 768px) {
    #headerDiv .header-menu .navbar.navbar.navbar-expand-md form {
        margin-top: 0;
        position: absolute;
        right: 0;
    }
}
@media (min-width: 992px) {
    #headerDiv .header-menu .navbar.navbar.navbar-expand-lg form {
        margin-top: 0;
        position: absolute;
        right: 0;
    }
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   HEADER | BANNER
   <div class="jexResponsive"> <div id="headerDiv"> <div class="header-banner">
## ############ ############ ############ ############ ############ ############ ############ */

#headerDiv .header-banner {
    margin-top: var(--inf-navbar-margin-banner);
}
#headerDiv .header-banner.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

#headerDiv .header-banner img {
    height: var(--inf-banner-height-mobile);
    object-fit: cover;
    object-position: var(--inf-banner-position-mobile);
    width: 100%;
}
@media (min-width: 992px) {
    #headerDiv .header-banner img {
        height: var(--inf-banner-height);
        object-position: var(--inf-banner-position);
    }
}
body.jobOfferList #headerDiv .header-banner img {
    display: var(--inf-banner-img-display);
}


#headerDiv .header-banner video {
    display: none;
}
body.jobOfferList #headerDiv .header-banner video {
    display: var(--inf-banner-vid-display);
    height: var(--inf-banner-height-mobile);
    object-fit: cover;
    object-position: var(--inf-banner-position);
    width: 100%;
}
@media (min-width: 992px) {
    body.jobOfferList #headerDiv .header-banner video {
        height: var(--inf-banner-height);
        object-position: var(--inf-banner-position);
    }
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | LAYOUT
   <div class="jexResponsive"> <div class="jexContent">
## ############ ############ ############ ############ ############ ############ ############ */

.jexContent {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-top: 2rem;
    max-width: initial !important; /* reset inline css */
}
@media (min-width: 576px) {
    .jexContent {
        margin-left: auto;
        margin-right: auto;
        max-width: 540px !important;
    }
}
@media (min-width: 768px) {
    .jexContent {
        max-width: 720px !important;
    }
}
@media (min-width: 992px) {
    .jexContent {
        max-width: 960px !important;
    }
}
@media (min-width: 1200px) {
    .jexContent {
        max-width: 1140px !important;
    }
}
@media (min-width: 1400px) {
    .jexContent {
        max-width: 1320px !important;
    }
}
.jexContent > * {
    flex-shrink: 0;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
}
.jexContent .jexInnerContent {
    flex: 1 0 0%;
}

.jexContent .jexInnerContent .contentWidth {
    max-width: initial !important; /* reset inline css */
}

/**/
#leftDiv {
    display: none !important;
}
#rightDiv {
    display: none !important;
}
/**/
.layoutHeaderAreaDiv {
    display: none !important;
}
.layoutMiddleAreaDivs {
    display: initial !important; /* reset inline css */
}
.layoutMiddleAreaDivs .layoutMiddleAreaDivLEFT {
    display: none !important;
}
.layoutMiddleAreaDivs .layoutMiddleAreaDivTEXT .layoutBackgroundImage {
    background-image: none !important; /* reset inline css */
}
.layoutFooterAreaDiv {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | TOP | HEADER
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="top"> <div class="topHeader">
## ############ ############ ############ ############ ############ ############ ############ */

.jexContent .jexInnerContent .top {
    position: relative;
}

.jexContent .jexInnerContent .top .topHeader {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | TOP | COOKIE
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="top"> <div class="topCookie">
## ############ ############ ############ ############ ############ ############ ############ */

.jexContent .jexInnerContent .top .topCookie {
    background-color: var(--inf-cookie-overlay-bgcolor);
    display: block;
    height: 100%;
    left: 0;
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9000;
}
.jexContent .jexInnerContent .top .topCookie .topCookieMessage {
    background-color:  var(--inf-cookie-message-bgcolor);
    border: var(--inf-cookie-message-border);
    border-radius: var(--inf-cookie-message-border-radius);
    margin: 1.75rem;
    padding: 2rem;
    position: relative;
    text-align: center;
    width: auto;
    z-index: 9001;
}
@media (min-width: 576px) {
    .jexContent .jexInnerContent .top .topCookie .topCookieMessage {
        margin-right: auto;
        margin-left: auto;
        max-width: 500px;
    }
}
.jexContent .jexInnerContent .top .topCookie .topCookieMessage .topCookieMessageButton {
    bottom: 0;
    margin: 0 auto 2rem auto;
    position: absolute;
    width: calc(100% - 4rem);
}
.jexContent .jexInnerContent .top .topCookie .topCookieMessage .topCookieMessageButton .button {
    width: 100%;
}
.jexContent .jexInnerContent .top .topCookie .topCookieMessage .topCookieMessageText {
    margin-bottom: 4rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | TOP | LOGIN
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="top"> <div class="topLogin">
## ############ ############ ############ ############ ############ ############ ############ */

.jexContent .jexInnerContent .top .topLogin {
    background-color: rgba(var(--inf-color-light-rgb),0.9);
    bottom: 2rem;
    left: -1rem;
    min-width: var(--inf-joblist-filter-width);
    padding: 1rem 1rem 0 1rem;
    position: absolute;
    z-index: 8900;
}

.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 {
    background-color:  var(--inf-joblist-filter-bg);
    border: var(--inf-joblist-filter-border);
    overflow: hidden;
    padding: 0.5rem 0.75rem;
    width: 100%;
}

.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 br {
    display: none !important;
}

.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 a {
    color: var(--inf-joblist-filter-caption-color);
    font-size: var(--inf-joblist-filter-caption-font-size);
    font-weight: var(--inf-joblist-filter-caption-font-weight);
}

.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 .loginImgContainer a {
    display: block;
    line-height: 1;
    text-transform: var(--inf-joblist-filter-caption-text-transform);
    width: 100%;
}
.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 .loginImgContainer a:hover {
    text-decoration: none;
}

.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 .loginImgContainer img {
    display: none !important;
}

/* login container */
.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 .loginContentContainer {
    border-top: var(--inf-joblist-filter-border);
    display: none;
    float: initial !important; /* reset inline css */
    margin: 0.5rem -1rem 0 -1rem;
    padding: 0.5rem 1rem 0 1rem;
}
.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 .loginContentContainer.visible {
    background-color: var(--inf-color-light);
    clear: both;
    display: block;
}

.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 .loginContentContainer #logInNameLoginLabel0,
.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 .loginContentContainer #pwdPinLoginLabel0 {
    color: var(--inf-form-label-color);
    font-size: var(--inf-form-label-font-size);
    font-weight: var(--inf-form-label-font-weight);
    line-height: 1;
    margin-bottom: 0;
    width: auto !important;
}
.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 .loginContentContainer .labelDoublePoint {
    display: none !important;
}

.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 .loginContentContainer input[type=text],
.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 .loginContentContainer input[type=password]{
    border-radius: var(--inf-joblist-filter-block-border-radius);
    font-size: var(--inf-joblist-filter-block-font-size);
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-top: 0.25rem;
}

.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 .loginContentContainer #loginApplicantAccount0 {
    font-size: 0.875rem;
    padding: 0.25rem 1rem;
}


.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 .loginContentContainer .errorMessage {
    margin-top: 0.5rem;
}

.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 .loginContentContainer .forgotPasswordApplicantLinkDiv a {
    display: block;
    font-size: 0.875rem;
    margin-bottom: -0.5rem;
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-transform: capitalize;
}

/* login user */
.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 #loginApplicantAccountLoginText0 {
    color: var(--inf-joblist-filter-caption-color);
    display: block;
    font-size: 1rem;
}

.jexContent .jexInnerContent .top .topLogin #loginApplicantAccountDiv0 .loginApplicantAccountSeparator {
    color: var(--inf-joblist-filter-caption-color);
    font-size: var(--inf-joblist-filter-caption-font-size);
    font-weight: var(--inf-joblist-filter-caption-font-weight);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | MENU
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="topMenu">
## ############ ############ ############ ############ ############ ############ ############ */

.jexContent .jexInnerContent .topMenu {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | HEADER
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <h1 class="caption">
## ############ ############ ############ ############ ############ ############ ############ */

.jexContent .jexInnerContent h1.caption {
    background-color: var(--inf-joblist-header-bgcolor);
    color: var(--inf-joblist-header-color);
    margin-bottom: 2rem;
    padding: var(--inf-joblist-header-padding);
    text-align: var(--inf-joblist-header-text-align);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | LAYOUT
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch">
## ############ ############ ############ ############ ############ ############ ############ */

#jobOfferSearch {
    display: flex;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
}
#jobOfferSearch>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
}
#jobOfferSearch aside.jobOfferSearchFilter {
    flex: 0 0 auto;
    width: 100%;
}
@media (min-width: 768px) {
    #jobOfferSearch aside.jobOfferSearchFilter {
        width: var(--inf-joblist-filter-width);
    }
}
#jobOfferSearch section.mainSection {
    flex: 0 0 auto;
    width: calc(100%);
}
@media (min-width: 768px) {
    #jobOfferSearch section.mainSection {
        flex: 1 0 0%;
        width: calc(100% - var(--inf-joblist-filter-width));
    }
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | FILTER
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <aside class="jobOfferSearchFilter">
## ############ ############ ############ ############ ############ ############ ############ */

#jobOfferSearch aside.jobOfferSearchFilter h3 {
    display: none !important;
}

#jobOfferSearch aside.jobOfferSearchFilter .filterBlock {
    background-color:  var(--inf-joblist-filter-bg);
    border: var(--inf-joblist-filter-border);
    margin-bottom: var(--inf-joblist-filter-gutter);
    padding: 0.5rem 0.75rem;
    overflow: hidden;   
}

#jobOfferSearch aside.jobOfferSearchFilter .filterBlock .filterCaption {
    float: left;
    width: 100%;
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock .filterCaption h5 {
    color: var(--inf-joblist-filter-caption-color);
    float: left;
    font-size: var(--inf-joblist-filter-caption-font-size);
    font-weight: var(--inf-joblist-filter-caption-font-weight);
    margin: 0;
    text-transform: var(--inf-joblist-filter-caption-text-transform);
}

#jobOfferSearch aside.jobOfferSearchFilter .filterBlock .filterCaption .arrow span {
    background-color: var(--inf-joblist-filter-caption-icon-bgcolor);
    float: right;
    height: var(--inf-joblist-filter-caption-icon-size);
    line-height: var(--inf-joblist-filter-caption-icon-size);
    margin-top: var(--inf-joblist-filter-caption-icon-margin);
    mask-image: var(--inf-icon-joblist-filter-caption-open);
    -webkit-mask-image: var(--inf-icon-joblist-filter-caption-open);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100%;
    -webkit-mask-size: 100%;
    width: var(--inf-joblist-filter-caption-icon-size);
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock .filterCaption .arrow span.collapse {
    -webkit-mask-image: var(--inf-icon-joblist-filter-caption-close);
    mask-image: var(--inf-icon-joblist-filter-caption-close);
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock .filterCaption .arrow span.collapse:not(.show) {
    display: block;
}

#jobOfferSearch aside.jobOfferSearchFilter .filterBlock .filter:nth-child(2) {
    border-top: var(--inf-joblist-filter-border);
    margin-top: 0.5rem;
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock .filter:last-child {
    margin-bottom: -0.5rem;
}

#jobOfferSearch aside.jobOfferSearchFilter .filterBlock input[type=text],
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock select {
    border-radius: var(--inf-joblist-filter-block-border-radius);
    font-size: var(--inf-joblist-filter-block-font-size);
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-top: 0.25rem;
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock select {
    display: block !important;
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock label {
    font-size: var(--inf-joblist-filter-block-font-size);
}

#jobOfferSearch aside.jobOfferSearchFilter .filterBlock .filter {
    background-color: var(--inf-joblist-filter-block-bgcolor);
    float: left;
    margin-left: -1rem;
    margin-right: -1rem;
    overflow: hidden;
    padding: 0.5rem 1rem;
    width: calc(100% + 2rem);
}

/* filter suche */
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock .filter .findInList {
    display: none !important;
}

#jobOfferSearch aside.jobOfferSearchFilter .filterBlock .filter .checklist {
    height: initial !important; /* reset inline css */
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock .filter .checklist ul {
    float: left;
    list-style: none;
    margin-bottom: 0;
    padding-left: 1.5rem;
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock .filter .checklist ul li {
    width: 100%;
}

/* filter "region" */
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock.officeFilterBlock .officeCountryFilter {
    margin-bottom: -0.5rem;
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock.officeFilterBlock .officeFilter {
    padding: 0;
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock.officeFilterBlock .officeFilter ul:not(:empty) {
    padding: 0.5rem 1rem 0.5rem 2.5rem;
}

/* filter "umkreissuche" */
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock.geolocationSearchBlock .filterValue input:first-child {
    margin-bottom: 0.5rem;
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock.geolocationSearchBlock .filterValue .distanceUnit {
    display: none !important;
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock.geolocationSearchBlock .filterValue #geoLocationError.errorMessage:not(:empty) {
    margin-bottom: 0;
    margin-top: 0.5rem;
    width: 100%;
}

/* filter button */
#jobOfferSearch aside.jobOfferSearchFilter .filterButtons input[type=button] {
    background-color: var(--inf-color-light);
    color: var(--inf-color-dark);
    border-color: transparent;
    border-radius: 0;
    margin-bottom: 1rem;
    width: 100% !important;
}
#jobOfferSearch aside.jobOfferSearchFilter .filterButtons input[type=button]:hover {
    background-color: var(--inf-button-hover-bgcolor);
    border: var(--inf-button-hover-border);
    color: var(--inf-button-hover-color);
}
#jobOfferSearch aside.jobOfferSearchFilter .filterFooter {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | SEARCH
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <div class="jobOfferFreeTextSearch">
## ############ ############ ############ ############ ############ ############ ############ */

#jobOfferSearch section.mainSection .jobOfferFreeTextSearch {
    margin-bottom: 1rem;
    position: relative;
}

/* icon */
#jobOfferSearch section.mainSection .jobOfferFreeTextSearch::before{
    content: var(--inf-icon-joblist-search);
    display: block;
    height: var(--inf-joblist-search-icon-size);
    margin: calc(0.375rem + 1px) calc(0.75rem + 1px);
    position: absolute;
    right: 0;
    width: var(--inf-joblist-search-icon-size);
}
#jobOfferSearch section.mainSection .jobOfferFreeTextSearch img {
    content: var(--inf-icon-joblist-search);
    display: block;
    height: var(--inf-joblist-search-icon-size);
    margin: calc(0.375rem + 1px) calc(0.75rem + 1px);
    position: absolute;
    right: 0;
    top: 0;
    width: var(--inf-joblist-search-icon-size);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | FILTER ICON
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <div class="filterIconContainer">
## ############ ############ ############ ############ ############ ############ ############ */

#jobOfferSearch section.mainSection .filterIconContainer {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | SEARCH TAGS
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <div class="filterIconContainer"> <section id="jobOfferListResult"> <ul class="searchTags">
## ############ ############ ############ ############ ############ ############ ############ */

#jobOfferSearch section.mainSection #jobOfferListResult ul.searchTags {
    display: flow-root;
    list-style-type: none;
    margin-bottom: 0;
    padding-left: 0;
    position: relative;
}

#jobOfferSearch section.mainSection #jobOfferListResult ul.searchTags li {
    background: var(--inf-joblist-searchtag-bgcolor);
    border: var(--inf-joblist-searchtag-border);
    color: var(--inf-joblist-searchtag-color);
    float: left;
    font-size: var(--inf-joblist-searchtag-font-size);
    font-weight: var(--inf-joblist-searchtag-font-weight);
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.25rem 0 0.25rem 0.5rem;
    width: auto;
}
#jobOfferSearch section.mainSection #jobOfferListResult ul.searchTags li:hover {
    cursor: pointer;
}

#jobOfferSearch section.mainSection #jobOfferListResult ul.searchTags li::after {
    content: var(--inf-icon-joblist-searchtag);
    display: block;
    float: right;
    height: 1.25rem;
    margin-left: 0.5rem;
    margin-right: 0.25rem;
    width: 1.25rem;
}
#jobOfferSearch section.mainSection #jobOfferListResult ul.searchTags li:hover::after {
    content: var(--inf-icon-joblist-searchtag-hover);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | RSS FEED
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <div class="filterIconContainer"> <section id="jobOfferListResult"> <p class="feed">
## ############ ############ ############ ############ ############ ############ ############ */


#jobOfferSearch section.mainSection #jobOfferListResult p.feed a {
    background-color: var(--inf-joblist-offer-info-icon-bgcolor);
    display: block;
    height: var(--inf-joblist-offer-info-icon-size);
    line-height: var(--inf-joblist-offer-info-icon-size);
    margin-right: 0.375rem;
    mask-image: var(--inf-icon-joblist-rss);
    -webkit-mask-image: var(--inf-icon-joblist-rss);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100%;
    -webkit-mask-size: 100%;
    width: var(--inf-joblist-offer-info-icon-size);
}
#jobOfferSearch section.mainSection #jobOfferListResult p.feed a:hover {
    background-color: var(--inf-joblist-offer-info-icon-bgcolor-hover);
}

#jobOfferSearch section.mainSection #jobOfferListResult p.feed a img {
    display: none !important;
}


/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | SEARCH INFO
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <div class="filterIconContainer"> <section id="jobOfferListResult"> <p class="searchResultInfo">
## ############ ############ ############ ############ ############ ############ ############ */

#jobOfferSearch section.mainSection #jobOfferListResult p.searchResultInfo {
    background: var(--inf-joblist-searchinfo-bgcolor);
    border: var(--inf-joblist-searchinfo-border);
    color: var(--inf-joblist-searchinfo-color);
    display: inline-block;
    font-size: var(--inf-joblist-searchinfo-font-size);
    font-weight: var(--inf-joblist-searchinfo-font-weight);
    padding: 0.375rem 0.75rem;
    margin-bottom: 1rem;
    width: 100%;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | PREAMBLE
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <div class="filterIconContainer"> <section id="jobOfferListResult"> <p class="preamble">
## ############ ############ ############ ############ ############ ############ ############ */

#jobOfferSearch section.mainSection #jobOfferListResult p.preamble {
    margin-bottom: 1rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | GOOGLE MAPS
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <div class="filterIconContainer"> <section id="jobOfferListResult"> <p class="geoLocInfo">
## ############ ############ ############ ############ ############ ############ ############ */

#jobOfferSearch section.mainSection #jobOfferListResult p.geoLocInfo {
    background: var(--inf-joblist-gmap-bgcolor);
    border: var(--inf-joblist-gmap-border);
    border-bottom: 0;
    color: var(--inf-joblist-gmap-color);
    display: inline-block;
    font-size: var(--inf-joblist-gmap-font-size);
    font-weight: var(--inf-joblist-gmap-font-weight);
    margin-bottom: 0;
    padding: 0.375rem 0.75rem;
    width: 100%;
}
#jobOfferSearch section.mainSection #jobOfferListResult div#map_canvas {
    background: var(--inf-joblist-gmap-bgcolor);
    border: var(--inf-joblist-gmap-border);
    border-top: 0;
    display: inline-block;
    margin-bottom: 1rem;
    width: 100%;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | PORTFOLIO | LAYOUT
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <div class="filterIconContainer"> <section id="jobOfferListResult"> <ul class="jobOffers">
## ############ ############ ############ ############ ############ ############ ############ */

section.mainSection #jobOfferListResult ul#jobOffers {
    display: flex;
    flex-wrap: wrap;
}
section.mainSection #jobOfferListResult ul#jobOffers > * {
    flex: 0 0 auto;
    flex-shrink: 0;
    overflow: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 100%;
    width: 100%;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | PORTFOLIO
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <div class="filterIconContainer"> <section id="jobOfferListResult"> <ul class="jobOffers">
## ############ ############ ############ ############ ############ ############ ############ */

section.mainSection #jobOfferListResult ul#jobOffers,
section.mainSection #jobOfferListResult ul#jobOffers ul {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer {
    background: var(--inf-joblist-offer-bg);
    border: var(--inf-joblist-offer-border);
    border-radius: var(--inf-joblist-offer-border-radius);
    box-shadow: var(--inf-joblist-offer-box-shadow);
    margin-bottom: 1rem;
    padding: 0.75rem;
    position: relative;
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer:hover {
    background: var(--inf-joblist-offer-bg-hover);
    border: var(--inf-joblist-offer-border-hover);
    box-shadow: var(--inf-joblist-offer-box-shadow-hover);
    cursor: pointer;
}

/* company logo */
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer .accountUserGroupLogo {
    float: right;
    height: var(--inf-joblist-offer-company-logo-height);
    margin-left: 0.75rem;
}

/* company text */
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer .accountUserGroupText {
    float: right;
    font-size: var(--inf-joblist-offer-compnay-text-font-size);
    margin-left: 0.75rem;
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer:hover .accountUserGroupText {
    color: var(--inf-joblist-offer-title-color-hover);
}

/* jobtitle */
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer .descriptionAndApplicationArea {
    float: left;
    margin-bottom: 0.5rem;
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer .descriptionAndApplicationArea h2 {
    color: var(--inf-joblist-offer-title-color);
    font-size: var(--inf-joblist-offer-title-font-size);
    font-weight: var(--inf-joblist-offer-title-font-weight);
    overflow: hidden;
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer:hover .descriptionAndApplicationArea h2 {
    color: var(--inf-joblist-offer-title-color-hover);
}

/* application area */
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer .descriptionAndApplicationArea h3 {
    color: var(--inf-joblist-offer-color);
    font-size: var(--inf-joblist-offer-application-font-size);
    font-weight: var(--inf-joblist-offer-application-font-weight);
    margin-bottom: 0;
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer:hover .descriptionAndApplicationArea h3 {
    color: var(--inf-joblist-offer-color-hover);
}

/* jobinfo */
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders {
    clear: both !important;
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader {
    display: inline-flex;
    flex-wrap: wrap;
    margin-right: 1.5rem;
    margin-top: 0.5rem;
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader > * {
    flex-shrink: 0;
    max-width: 100%;
    width: 100%;
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader > div {
    color: var(--inf-joblist-offer-color);
    flex: 1 0 0%;
    font-size: var(--inf-joblist-offer-info-font-size);
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer:hover ul.fieldHeaders li.fieldHeader > div {
    color: var(--inf-joblist-offer-color-hover);
}

/* jobinfo label */
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader .label {
    display: none !important;
}

/* jobinfo icon */
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader .icon {
    background-color: var(--inf-joblist-offer-info-icon-bgcolor);
    flex: 0 0 auto;
    float: right;
    height: var(--inf-joblist-offer-info-icon-size);
    line-height: var(--inf-joblist-offer-info-icon-size);
    margin-right: 0.375rem;
    mask-image: var(--inf-icon-default);
    -webkit-mask-image: var(--inf-icon-default);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100%;
    -webkit-mask-size: 100%;
    width: var(--inf-joblist-offer-info-icon-size);
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer:hover ul.fieldHeaders li.fieldHeader .icon {
    background-color: var(--inf-joblist-offer-info-icon-bgcolor-hover);
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader .icon img {
    display: none !important;
}

/* arbeitszeit (employementDimension) */
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader.fh_JobOffer_employementDimension .icon {
    mask-image: var(--inf-icon-arbeitszeit);
    -webkit-mask-image: var(--inf-icon-arbeitszeit);
}
/* berfusgruppe (shortDescription) */
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader.fh_JobGroup_shortDescription .icon {
    mask-image: var(--inf-icon-berfusgruppe);
    -webkit-mask-image: var(--inf-icon-berfusgruppe);
}
/* einsatzadresse (exertionPlaceAddress) */
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader.fh_JobOffer_exertionPlaceAddress .icon {
    mask-image: var(--inf-icon-einsatzadresse);
    -webkit-mask-image: var(--inf-icon-einsatzadresse);
}
/* einsatzland (exertionCountry) */
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader.fh_JobOffer_exertionCountry .icon {
    mask-image: var(--inf-icon-einsatzland);
    -webkit-mask-image: var(--inf-icon-einsatzland);
}
/* einsatzort (exertionPlace) */
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader.fh_JobOffer_exertionPlace .icon {
    mask-image: var(--inf-icon-einsatzort);
    -webkit-mask-image: var(--inf-icon-einsatzort);
}
/* eintrittsdatum (engagementDateText)*/
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader.fh_JobOffer_engagementDateText .icon {
    mask-image: var(--inf-icon-eintrittsdatum);
    -webkit-mask-image: var(--inf-icon-eintrittsdatum);
}
/* karrierelevel (careerLevel) */
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader.fh_JobOfferCareerLevel_careerLevel .icon {
    mask-image: var(--inf-icon-karrierelevel);
    -webkit-mask-image: var(--inf-icon-karrierelevel);
}

/* jobinfo text */
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader .value li {
    float: left;
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader .value li::after {
    content: "/";
    margin: 0 0.25rem;
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer ul.fieldHeaders li.fieldHeader .value li:last-child::after {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBLIST | POSTAMBLE
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form id="jobOfferSearch"> <section class="mainSection"> <p class="postAmble">
## ############ ############ ############ ############ ############ ############ ############ */

#jobOfferSearch section.mainSection p.postAmble {
    margin-bottom: 0;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBOFFER | PREAMBLE
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <p class="preamble">
## ############ ############ ############ ############ ############ ############ ############ */

body.jobOfferDetail .jexContent .jexInnerContent p.preamble {
    margin-bottom: 1rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBOFFER | LAYOUT
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <section class="contentWidth">
## ############ ############ ############ ############ ############ ############ ############ */

.jexContent .jexInnerContent section.contentWidth {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
    margin-right: -1rem;
    max-width: initial !important; /* reset inline css */
}
.jexContent .jexInnerContent section.contentWidth > * {
    flex-shrink: 0;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBOFFER | HEADER
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <section class="contentWidth"> <div class="jobOffer"> <div class="jobOfferDetailHeader">
## ############ ############ ############ ############ ############ ############ ############ */

.jobOffer .jobOfferDetailHeader {
    text-align: var(--inf-joblist-header-text-align);
}

/* company logo */
.jobOffer .jobOfferDetailHeader .accountUserGroupLogo {
    height: var(--inf-joblist-offer-company-logo-height);
    margin-bottom: 0.5rem;
}

/* company text */
.jobOffer .jobOfferDetailHeader .accountUserGroupText {
    display: block;
    margin-bottom: 0.5rem;
}

/* jobtitle */
.jobOffer .jobOfferDetailHeader h1.jobOfferDescription {
    background-color: var(--inf-joblist-header-bgcolor);
    clear: both !important;
    color: var(--inf-joblist-header-color);
    margin-bottom: 2rem;
    padding: var(--inf-joblist-header-padding);
    text-align: var(--inf-joblist-header-text-align);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBOFFER | DETAIL | LAYOUT
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <section class="contentWidth"> <div class="jobOffer"> <div class="jobOfferDataTable"> . . . <div class="jobOfferDetailView">
## ############ ############ ############ ############ ############ ############ ############ */

.jobOffer .jobOfferDataTable .jobOfferDetailView {
    display: flex;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
}
.jobOffer .jobOfferDataTable .jobOfferDetailView > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
}
.jobOffer .jobOfferDataTable .jobOfferDetailView > h2,
.jobOffer .jobOfferDataTable .jobOfferDetailView > div {
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 768px) {
    .jobOffer .jobOfferDataTable .jobOfferDetailView > h2 {
        width: 320px;
    }
    .jobOffer .jobOfferDataTable .jobOfferDetailView > div {
        width: calc(100% - 320px);
    }
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBOFFER | DETAIL
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <section class="contentWidth"> <div class="jobOffer"> <div class="jobOfferDataTable"> . . . <div class="jobOfferDetailView">
## ############ ############ ############ ############ ############ ############ ############ */

.jobOffer .jobOfferDataTable .jobOfferDetailView ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.jobOffer .jobOfferDataTable .jobOfferDetailView > h2,
.jobOffer .jobOfferDataTable .jobOfferDetailView > div {
    margin-bottom: 1rem;
}
.jobOffer .jobOfferDataTable .jobOfferDetailView > h2:last-of-type,
.jobOffer .jobOfferDataTable .jobOfferDetailView > div:last-of-type {
    margin-bottom: 0;
}

.jobOffer .jobOfferDataTable .jobOfferDetailView > h2 {
    font-size: var(--inf-joboffer-detail-h2-font-size);
    font-weight: var(--inf-joboffer-detail-h2-font-weight);
}
.jobOffer .jobOfferDataTable .jobOfferDetailView > h2 .labelDoublePoint {
    display: none;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBOFFER | IMAGE
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <section class="contentWidth"> <div class="jobOffer"> <div class="jobOfferDataTable"> . . . <div class="jobOfferImage">
## ############ ############ ############ ############ ############ ############ ############ */

.layoutMiddleAreaDivRIGHT .jobOfferImageContainer {
    margin: 2rem 0 1rem 0;
}

.jobOfferImageContainer .jobOfferImage {
    height: var(--inf-joboffer-image-height-mobile);
    object-fit: cover;
    object-position: var(--inf-joboffer-image-position-mobile);
    width: 100%;
}
@media (min-width: 992px) {
    .jobOfferImageContainer .jobOfferImage {
        height: var(--inf-joboffer-image-height);
        object-position: var(--inf-joboffer-image-position);
    }
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBOFFER | SOCIAL MEDIA
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <section class="contentWidth"> <div class="jobOffer"> <div class="jobOfferDataTable"> <div class="buttonRow socialMediaRow">
## ############ ############ ############ ############ ############ ############ ############ */

.jobOffer .jobOfferDataTable .buttonRow.socialMediaRow {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBOFFER | POSTAMBLE BEFORE
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <section class="contentWidth"> <div class="postamble beforeButtons">
## ############ ############ ############ ############ ############ ############ ############ */

.postamble.beforeButtons {
    margin-top: 1rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBOFFER | BUTTONS
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <section class="contentWidth"> <div class="buttonRow">
## ############ ############ ############ ############ ############ ############ ############ */

.jobOfferDetail .buttonRow {
    margin-top: 1rem;
}

.jobOfferDetail .buttonRow .printButtonCell {
    margin-bottom: 0.5rem;
}

.jobOfferDetail .buttonRow .printButtonCell a {
    background-color: var(--inf-joblist-offer-info-icon-bgcolor);
    display: block;
    height: var(--inf-joblist-offer-info-icon-size);
    line-height: var(--inf-joblist-offer-info-icon-size);
    margin-right: 0.375rem;
    mask-image: var(--inf-icon-print);
    -webkit-mask-image: var(--inf-icon-print);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100%;
    -webkit-mask-size: 100%;
    width: var(--inf-joblist-offer-info-icon-size);
}
.jobOfferDetail .buttonRow .printButtonCell a:hover {
    background-color: var(--inf-joblist-offer-info-icon-bgcolor-hover);
}
.jobOfferDetail .buttonRow .printButtonCell a img {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | JOBOFFER | POSTAMBLE AFTER
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <section class="contentWidth"> <div class="postamble afterButtons">
## ############ ############ ############ ############ ############ ############ ############ */

.postamble.afterButtons {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | BLINDOFFER | PREAMBLE
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form> <div class="selectBlindJobOfferContent"> <div class="selectBlindJobOfferInnerContent"> <p class="preamble">
## ############ ############ ############ ############ ############ ############ ############ */

.selectBlindJobOfferContent .preamble {
    margin-bottom: 1rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | BLINDOFFER
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form> <div class="selectBlindJobOfferContent">
## ############ ############ ############ ############ ############ ############ ############ */

.selectBlindJobOfferContent .blindJobOffers {
    margin-bottom: 1rem;
}

.selectBlindJobOfferContent .blindJobOffers .blindJobOfferInput input[type=radio] {
    float: left;
    margin-left: 0;
}
.selectBlindJobOfferContent .blindJobOffers .blindJobOfferLabel {
    margin-left: 1.5rem;
    width: inherit !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | BLINDOFFER | POSTAMBLE
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form> <div class="selectBlindJobOfferContent"> <div class="selectBlindJobOfferInnerContent"> <p class="postamble">
## ############ ############ ############ ############ ############ ############ ############ */

.selectBlindJobOfferContent .postamble {
    margin-bottom: 1rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | BLINDOFFER | BUTTONS
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <form> <div class="selectBlindJobOfferContent"> <div class="buttonContainer">
## ############ ############ ############ ############ ############ ############ ############ */

.selectBlindJobOfferContent .buttonContainer {
    text-align: initial !important; /* reset inline css */
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLYBY | PREAMBLE
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="contentWidth"> <div id="applyByContent"> <div class="codePreambleContainer">
## ############ ############ ############ ############ ############ ############ ############ */

#applyByContent .codePreambleContainer {
    margin-bottom: 1.5rem;
}

/* jobtitle */
#applyByContent .codePreambleContainer h1 {
    background-color: var(--inf-joblist-header-bgcolor);
    color: var(--inf-joblist-header-color);
    margin-bottom: 2rem;
    padding: var(--inf-joblist-header-padding);
    text-align: var(--inf-joblist-header-text-align);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLYBY | FIELDSET
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="contentWidth"> <div id="applyByContent"> <fieldset id="applyByFieldset">
## ############ ############ ############ ############ ############ ############ ############ */

.contentWidth #applyByContent #applyByFieldset {
    border-bottom: var(--inf-applyby-border);
    border-top: var(--inf-applyby-border);
    padding: 1rem 0;
    margin-bottom: 1rem;
}

.contentWidth #applyByContent #applyByFieldset .caption {
    color: var(--inf-heading-color);
    font-size: 1rem;
    font-weight: var(--inf-heading-font-weight);
}
.contentWidth #applyByContent #applyByFieldset input[type=button] {
    width: var(--inf-applyby-button-width) !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLYBY | ACCOUNT
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="contentWidth"> <div id="applyByContent"> <fieldset id="applyWithApplicantAccount">
## ############ ############ ############ ############ ############ ############ ############ */

.contentWidth #applyByContent #applyWithApplicantAccount {
    border-bottom: var(--inf-applyby-border);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.contentWidth #applyByContent #applyWithApplicantAccount .caption {
    color: var(--inf-heading-color);
    font-size: 1rem;
    font-weight: var(--inf-heading-font-weight);
}


.contentWidth #applyWithApplicantAccount #loginApplicantAccountForm1 {
    background-color:  var(--inf-joblist-filter-bg);
    border: var(--inf-joblist-filter-border);
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    overflow: hidden;
}

.contentWidth #applyWithApplicantAccount .loginImgContainer a {
    color: var(--inf-color-light);
    display: block;
    line-height: 1;
    width: 100%;
}
.contentWidth #applyWithApplicantAccount .loginImgContainer a:hover {
    text-decoration: none;
}
.contentWidth #applyWithApplicantAccount .loginImgContainer img {
    display: none !important;
}

/* login container */
.contentWidth #applyWithApplicantAccount .loginContentContainer {
    border-top: var(--inf-joblist-filter-border);
    display: none;
    float: initial !important; /* reset inline css */
    margin: 0.5rem -1rem 0 -1rem;
    padding: 0.5rem 1rem 0 1rem;
}
.contentWidth #applyWithApplicantAccount .loginContentContainer.visible {
    background-color: var(--inf-color-light);
    display: block;
}

.contentWidth #applyWithApplicantAccount .loginContentContainer #logInNameLoginLabel1,
.contentWidth #applyWithApplicantAccount .loginContentContainer #pwdPinLoginLabel1 {
    color: var(--inf-form-label-color);
    font-size: var(--inf-form-label-font-size);
    font-weight: var(--inf-form-label-font-weight);
    margin-bottom: 0.25rem;
    width: auto !important;
}
.contentWidth #applyWithApplicantAccount .loginContentContainer .labelDoublePoint {
    display: none !important;
}

.contentWidth #applyWithApplicantAccount .loginContentContainer input[type=text],
.contentWidth #applyWithApplicantAccount .loginContentContainer input[type=password]{
    border-radius: var(--inf-joblist-filter-block-border-radius);
    font-size: var(--inf-joblist-filter-block-font-size);
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-top: 0.25rem;
}

.contentWidth #applyWithApplicantAccount .loginContentContainer .loginApplicantAccountErrorContainer .errorMessage {
    margin-top: 1rem;
}

.contentWidth #applyWithApplicantAccount .loginContentContainer .forgotPasswordApplicantLinkDiv {
    font-size: 0.875rem;
    margin-top: 1rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLYBY | CV
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="contentWidth"> <div id="applyByContent"> <fieldset id="applyByCV">
## ############ ############ ############ ############ ############ ############ ############ */

.contentWidth #applyByCV {
    border-bottom: var(--inf-applyby-border);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    position: relative;
}
.contentWidth #applyByContent #applyByCV .caption {
    color: var(--inf-heading-color);
    font-size: 1rem;
    font-weight: var(--inf-heading-font-weight);
}

.contentWidth #applyByCV .fileWrapper {
    float: left;
    margin-bottom: 0.5rem;
    width: 100% !important;
}
.contentWidth #applyByCV .fileWrapper input[type=file] {
    font-size: 1rem !important;
    height: var(--inf-applyby-height) !important;
    left: 0;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
}
.contentWidth #applyByCV .fileWrapper:hover input[type=file] {
    cursor: pointer;
}
.contentWidth #applyByCV .fileWrapper input[type=button] {
    background-color: var(--inf-button-hover-bgcolor);
    border: var(--inf-button-hover-border);
    color: var(--inf-button-hover-color) !important;
    float: left;
}
.contentWidth #applyByCV .fileWrapper:hover input[type=button] {
    background-color: var(--inf-button-bgcolor);
    border: var(--inf-button-border);
    color: var(--inf-button-color) !important;
    cursor: pointer;
}
.contentWidth #applyByCV .fileWrapper input[type=text] {
    background-color: rgba(var(--inf-color-border-rgb),0.25);
    border: 0;
    float: left;
    height: var(--inf-applyby-height) !important;
    line-height: initial !important;
    margin-left: 0.25rem;
    margin-top: initial !important;
    width: calc(100% - var(--inf-applyby-button-width) - 0.25rem) !important;
}

.contentWidth #applyByCV input[type=button] {
    width: var(--inf-applyby-button-width) !important;
}

.contentWidth #applyByCV .errorMessage:not(:empty) {
    margin-top: 0.5rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLYBY | XING
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="contentWidth"> <div id="applyByContent"> <fieldset id="applyByXing">
## ############ ############ ############ ############ ############ ############ ############ */

.contentWidth #applyByXing {
    border-bottom: var(--inf-applyby-border);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    position: relative;
}
.contentWidth #applyByContent #applyByXing .caption {
    color: var(--inf-heading-color);
    font-size: 1rem;
    font-weight: var(--inf-heading-font-weight);
}
.contentWidth #applyByXing .caption:before {
    background-color: var(--inf-color-primary);
    content: '';
    flex: 0 0 auto;
    float: left;
    height: 1.5rem;
    line-height: 1.5rem;
    margin-right: 0.5rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    width: 1.25rem;
    -webkit-mask-image: var(--inf-icon-xing);
    mask-image: var(--inf-icon-xing);
}
.contentWidth #applyByXing input[type=button] {
    width: var(--inf-applyby-button-width) !important;
}
.contentWidth #applyByXing img {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLYBY | LIKEDIN
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="contentWidth"> <div id="applyByContent"> <fieldset id="applyByLinkedIn">
## ############ ############ ############ ############ ############ ############ ############ */

.contentWidth #applyByLinkedIn {
    border-bottom: var(--inf-applyby-border);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    position: relative;
}
.contentWidth #applyByContent #applyByLinkedIn .caption {
    color: var(--inf-heading-color);
    font-size: 1rem;
    font-weight: var(--inf-heading-font-weight);
}
.contentWidth #applyByLinkedIn .caption:before {
    background-color: var(--inf-color-primary);
    content: '';
    flex: 0 0 auto;
    float: left;
    height: 1.5rem;
    line-height: 1.5rem;
    margin-right: 0.5rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    width: 1.25rem;
    -webkit-mask-image: var(--inf-icon-linkedin);
    mask-image: var(--inf-icon-linkedin);
}
.contentWidth #applyByLinkedIn input[type=button] {
    width: var(--inf-applyby-button-width) !important;
}
.contentWidth #applyByLinkedIn img {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLYBY | BUTTONS
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="contentWidth"> <div id="applyByContent"> <div class="mainButtonCell">
## ############ ############ ############ ############ ############ ############ ############ */

.contentWidth #applyByContent .mainButtonCell {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLYBY | POSTAMBLE
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="contentWidth"> <div id="applyByContent"> <div class="codePostambleContainer">
## ############ ############ ############ ############ ############ ############ ############ */

.contentWidth #applyByContent .codePostambleContainer p {
    margin-bottom: 0;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLICATION | HEADER
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="applicationForm"> <div class="contentWidth"> <form> <div id="tablecontent"> <div class="jobOfferData">
## ############ ############ ############ ############ ############ ############ ############ */

form #tablecontent .jobOfferData p.caption {
    display: none !important;
}

form #tablecontent .jobOfferData p.jobOfferDescription {
    background-color: var(--inf-joblist-header-bgcolor);
    color: var(--inf-joblist-header-color);
    font-size: var(--inf-heading-font-size-h1);
    font-weight: var(--inf-heading-font-weight);
    line-height: var(--inf-heading-line-height);
    margin-bottom: 2rem;
    padding: var(--inf-joblist-header-padding);
    text-align: var(--inf-joblist-header-text-align);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLICATION | PREAMBLE
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="applicationForm"> <div class="contentWidth"> <form> <div id="tablecontent"> <div class="preamble">
## ############ ############ ############ ############ ############ ############ ############ */

form #tablecontent .preamble {
    margin-bottom: 1.5rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLICATION | BLOCK | LAYOUT
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="applicationForm"> <div class="contentWidth"> <form> <div id="tablecontent"> <div class="applicationBlock_">
## ############ ############ ############ ############ ############ ############ ############ */

form #tablecontent div[class*="applicationBlock_"] {
    display: flex;
    flex-wrap: wrap;
}
form #tablecontent div[class*="applicationBlock_"] > div {
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-bottom: 1rem;
    max-width: 100%;
    width: 100%;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLICATION | BLOCK
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="applicationForm"> <div class="contentWidth"> <form> <div id="tablecontent"> <div class="applicationBlock_">
## ############ ############ ############ ############ ############ ############ ############ */

/* caption */
form #tablecontent div[class*="applicationBlock_"] > .applicationBlock .applicationBlockCaption {
    color: var(--inf-form-blockcapt-color);
    font-size: var(--inf-form-blockcapt-font-size);
    font-weight: var(--inf-form-blockcapt-font-weight);
    margin-bottom: 0;
}

/* field label */
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .fieldLabel {
    color: var(--inf-form-label-color);
    font-size: var(--inf-form-label-font-size);
    font-weight: var(--inf-form-label-font-weight);
    margin-bottom: 0.25rem;
    width: auto !important;
}

/* field label - mandatory */
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .mandatoryLabelSign {
    color: var(--bs-danger);
    padding-left: 0.25rem;
}

/* field label - doublepoint */
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .labelDoublePoint {
    display: none !important;
}

/* field label - tooltip */
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .tooltipIcon,
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .tooltipInfo {
    display: none !important;
}

/* field value */
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .fieldValue {
    position: relative;
}
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .fieldValue br {
    display: none !important;
}

/* field value - radio */
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .fieldValue .radioItem {
    float: left;
    margin-right: 1rem;
    padding-bottom: 0.375rem;
    padding-top: 0.375rem;
}

/* field value - file wrapper */
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .fileWrapper {
    float: left;
    margin-bottom: calc(-1 * var(--inf-font-size) * var(--inf-line-height));
    width: 100% !important;
}

form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .fileWrapper input[type=file] {
    font-size: 1rem !important;
    height: var(--inf-form-wrapper-height) !important;
    left: 0;
    right: auto !important;
    top: auto !important;
    width: calc(100% - var(--inf-form-wrapper-height)) !important;
}
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .fileWrapper:hover input[type=file] {
    cursor: pointer;
}

form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .fileWrapper input[type=button] {
    background-color: var(--inf-button-hover-bgcolor);
    border: var(--inf-button-hover-border);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    color: var(--inf-button-hover-color) !important;
    float: left;
    height: initial !important;
    width: var(--inf-form-wrapper-button-width) !important;
}
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .fileWrapper:hover input[type=button] {
    background-color: var(--inf-button-bgcolor);
    border: var(--inf-button-border);
    color: var(--inf-button-color) !important;
    cursor: pointer;
}

form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .fileWrapper input[type=text],
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .fieldValue.multiupload {
    background-color: var(--inf-form-bgcolor);
    border: var(--inf-form-border);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    float: left;
    height: var(--inf-applyby-height) !important;
    line-height: initial !important;
    margin-top: initial !important;
    width: calc(100% - var(--inf-applyby-button-width) - var(--inf-form-wrapper-height)) !important;
}
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .fieldValue.multiupload {
    border: var(--inf-form-border);
    border-right: 0;
    border-radius: var(--inf-form-border-radius);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    height: var(--inf-applyby-height) !important;
    line-height: var(--inf-applyby-height) !important;
    margin-left: 0;
    padding-left: 0.75rem;
    width: calc(100% - var(--inf-form-wrapper-height)) !important;
}

/* field value - file wrapper - icon */
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow img.multiupload {
    background-color: var(--inf-button-hover-bgcolor);
    border: var(--inf-button-hover-border);
    border-radius: var(--inf-button-border-radius);
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    height: var(--inf-form-wrapper-height);
    padding: 0.25rem 0;
    position: absolute;
    right: 0;
    top: 0;
    width: var(--inf-form-wrapper-height);
    z-index: 500;
}
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .fieldValue.multiupload img.multiupload {
    right: calc(-1 * var(--inf-form-wrapper-height));
    top: -2px;
}
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow img.multiupload:hover {
    background-color: var(--inf-button-bgcolor);
    border: var(--inf-button-border);
}

form #tablecontent div[class*="applicationBlock_"] > .formFieldRow img.multiupload.addIcon {
    content: var(--inf-icon-add);
    display: block;
}
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow img.multiupload.addIcon:hover {
    content: var(--inf-icon-add-hover);
    display: block;
}

form #tablecontent div[class*="applicationBlock_"] > .formFieldRow img.multiupload.deleteIcon,
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow img.multiupload.multiUploadDeleteImg {
    content: var(--inf-icon-delete);
    display: block;
}

form #tablecontent div[class*="applicationBlock_"] > .formFieldRow:hover img.multiupload.deleteIcon,
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow:hover img.multiupload.multiUploadDeleteImg {
    content: var(--inf-icon-delete-hover);
    display: block;
}

/* field value - file wrapper - select */
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .multiuploadFieldLabel select.multiUploadCategory {
    border-radius: 0.25rem;
    font-size: 0.875rem;
    padding: 0.25rem 2.25rem 0.25rem 0.5rem;
}


/* field value - error message */
form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .errorMessage:not(:empty) {
    margin-top: 0.5rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLICATION | BUTTONS
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="applicationForm"> <div class="contentWidth"> <form> <div id="footer">
## ############ ############ ############ ############ ############ ############ ############ */

form #footer .buttonBack {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLICATION | PAGING
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="applicationForm"> <div class="contentWidth"> <form> <div class="pagingArea"> <div class="paging">
## ############ ############ ############ ############ ############ ############ ############ */

form .pagingArea .paging {
    margin-top: 1rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | APPLICATION | POSTAMBLE
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="applicationForm"> <div class="contentWidth"> <form> <div class="pagingArea"> <div class="postamble">
## ############ ############ ############ ############ ############ ############ ############ */

form .pagingArea .postamble {
    margin-bottom: 0;
    margin-top: 2rem;
}
form .pagingArea .postamble .postambleEveryPage {
    margin-bottom: 0.5rem;
}


/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | THANKS
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="contentWidth"> <div class="finishContent">
## ############ ############ ############ ############ ############ ############ ############ */

.finishContent br {
    display: none !important;
}


.finishContent .finishText p.caption {
    background-color: var(--inf-joblist-header-bgcolor);
    color: var(--inf-joblist-header-color);
    font-size: var(--inf-heading-font-size-h1);
    margin-bottom: 2rem;
    padding: var(--inf-joblist-header-padding);
    text-align: var(--inf-joblist-header-text-align);
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | THANKS | CREATE ACCOUNT
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="contentWidth"> <div class="finishContent"> <div class="createApplicantAccount">
## ############ ############ ############ ############ ############ ############ ############ */

.finishContent .createApplicantAccount #createApplicantAccountDiv {
    border-top: var(--inf-applyby-border);
    padding-top: 1rem;
}
.finishContent .createApplicantAccount #createApplicantAccountDiv .caption {
    color: var(--inf-heading-color);
    font-size: 1rem;
    font-weight: var(--inf-heading-font-weight);
}
.finishContent .createApplicantAccount #createApplicantAccountDiv label {
    color: var(--inf-form-label-color);
    font-size: var(--inf-form-label-font-size);
    font-weight: var(--inf-form-label-font-weight);
    margin-bottom: 0.25rem;
    width: auto !important;
}
.finishContent .createApplicantAccount #createApplicantAccountDiv label .labelDoublePoint {
    display: none !important;
}
.finishContent .createApplicantAccount #createApplicantAccountDiv input[type=text], 
.finishContent .createApplicantAccount #createApplicantAccountDiv input[type=password] {
    border-radius: var(--inf-joblist-filter-block-border-radius);
    font-size: var(--inf-joblist-filter-block-font-size);
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-top: 0.25rem;
}
.finishContent .createApplicantAccount #createApplicantAccountDiv #pwdPin {
    margin-bottom: 0;
}
.finishContent .createApplicantAccount #createApplicantAccountDiv .passStrengthify {
    margin-bottom: 0.5rem;
}
.finishContent .createApplicantAccount #createApplicantAccountDiv .passStrengthify span {
    font-size: 0.75rem !important;
}
.finishContent .createApplicantAccount #createApplicantAccountDiv .errorMessage {
    margin-bottom: 0.5rem;
}

.finishContent .createApplicantAccount #createApplicantAccountDivAfter {
    margin-top: 0.5rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | THANKS | BUTTONS
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="contentWidth"> <div class="finishContent"> <div class="createApplicantAccount"> <div class="buttonBackToJobexchangeContainer">
## ############ ############ ############ ############ ############ ############ ############ */

.finishContent .createApplicantAccount .buttonBackToJobexchangeContainer {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | LOGIN | RESET PASSWORD
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent">
## ############ ############ ############ ############ ############ ############ ############ */

#forgotPasswordApplicantAccountDivHeader {
    background-color: var(--inf-joblist-header-bgcolor);
    color: var(--inf-joblist-header-color);
    margin-bottom: 2rem;
    padding: var(--inf-joblist-header-padding);
    text-align: var(--inf-joblist-header-text-align);
}

#forgotPasswordApplicantAccountDiv br {
    display: none !important;
}
#forgotPasswordApplicantAccountDiv .forgotPasswordApplicantAccountEmailDiv #emailLabel {
    color: var(--inf-form-label-color);
    font-size: var(--inf-form-label-font-size);
    font-weight: var(--inf-form-label-font-weight);
    margin-bottom: 0.25rem;
    width: auto !important;
}
#forgotPasswordApplicantAccountDiv #submitForgotPasswordApplicantAccount {
    margin-top: 1rem;
}
#forgotPasswordApplicantAccountDiv .errorMessage {
    margin-top: 1rem;
}

.forgotPasswordApplicantAccountButtonDiv {
    margin-top: 1rem;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | LOGIN | MANAGE ACCOUNT
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent">
## ############ ############ ############ ############ ############ ############ ############ */


.editApplicantAccountContainer,
.changePasswordOnEditPage,
.deleteAccountOnEditPage {
    border-bottom: var(--inf-applyby-border);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.editApplicantAccountContainer {
    padding-top: 1rem;
}

.editApplicantAccountContainer .caption,
.changePasswordOnEditPage .caption,
.deleteAccountOnEditPage .caption {
    color: var(--inf-form-blockcapt-color);
    font-size: var(--inf-form-blockcapt-font-size);
    font-weight: var(--inf-form-blockcapt-font-weight);
    margin-bottom: 1rem;
}

.editApplicantAccountContainer label,
.changePasswordOnEditPage label {
    color: var(--inf-form-label-color);
    font-size: var(--inf-form-label-font-size);
    font-weight: var(--inf-form-label-font-weight);
    margin-bottom: 0.25rem;
    width: auto !important;
}
.editApplicantAccountContainer label .labelDoublePoint,
.changePasswordOnEditPage label .labelDoublePoint {
    display: none !important;
}
.editApplicantAccountContainer input,
.changePasswordOnEditPage input {
    margin-bottom: 1rem;
}

.editApplicantAccountContainer .errorMessage,
.changePasswordOnEditPage .errorMessage {
    margin-bottom: 1rem;
}

.editApplicantAccountContainer {
    max-width: initial !important; /* reset inline css */
}
.editApplicantAccountContainer input[type=text] {
    background-color: rgba(var(--inf-color-border-rgb),0.25);
    border: 0;
    height: var(--inf-applyby-height) !important;
    line-height: initial !important;
}

.changePasswordOnEditPage .newPwdPinDiv #newPwdPin {
    margin-bottom: 0;
}
.changePasswordOnEditPage .newPwdPinDiv .passStrengthify {
    margin-bottom: 1rem;
}

.deleteAccountOnEditPage .textBeforeDeleteAccountContainer,
.deleteAccountOnEditPage .deleteApplicantAccountButtonLabel,
.deleteAccountOnEditPage #deleteApplicantAccount {
    margin-bottom: 1rem;
}

.applicantAccountDeletedSuccess {
    margin-bottom: 1rem;
}




/* ############ ############ ############ ############ ############ ############ ############ ##
   CONTENT | FOOTER
   <div class="jexResponsive"> <div class="jexContent"> <div class="jexInnerContent"> <div class="footer">
## ############ ############ ############ ############ ############ ############ ############ */

.jexContent .jexInnerContent .footer {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   FOOTER | LAYOUT
   <div class="jexResponsive"> <div id="footerDiv">
## ############ ############ ############ ############ ############ ############ ############ */

#footerDiv {
    background-color: var(--inf-footer-bgcolor);
    color: var(--inf-footer-color);
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
    margin-right: -1rem;

    margin-top: 2rem;
}
#footerDiv > * {
    flex-shrink: 0;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
}
#footerDiv footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* breakpoints */
@media (min-width: 768px) {
    #footerDiv footer {
        margin-left: auto;
        margin-right: auto;
        max-width: 720px !important;
    }
}
@media (min-width: 992px) {
    #footerDiv footer {
        max-width: 960px !important;
    }
}
@media (min-width: 1200px) {
    #footerDiv footer {
        max-width: 1140px !important;
    }
}
@media (min-width: 1400px) {
    #footerDiv footer {
        max-width: 1320px !important;
    }
}

/* 2 colums */
@media (min-width: 768px) {
    #footerDiv footer .footer-col-left,
    #footerDiv footer .footer-col-right {
        flex: 0 0 auto;
        width: 50%;
    }
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   FOOTER
   <div class="jexResponsive"> <div id="footerDiv">
## ############ ############ ############ ############ ############ ############ ############ */

/* text */
#footerDiv footer p {
    margin-bottom: 0;
}

/* links */
#footerDiv footer  .nav {
    justify-content: flex-end;
}
#footerDiv footer .nav .nav-link {
    color: var(--inf-navbar-color);
    display: block;
    font-size: var(--inf-font-size);
    font-weight: var(--inf-font-weight);
    margin-left: 1rem;
    padding: 0;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

#footerDiv footer .nav .nav-link:hover {
    text-decoration: underline;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   UI SELECT MENU
   <div class="ui-selectmenu-menu">
## ############ ############ ############ ############ ############ ############ ############ */

.ui-selectmenu-menu {
    display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   PRINT

## ############ ############ ############ ############ ############ ############ ############ */

@media print {
    #headerDiv,
    #footerDiv {
        display: none !important;
    }

    .jobOffer .jobOfferDetailHeader h1.jobOfferDescription {
        background-color: transparent;
        color: var(--inf-color-primary);
        margin-bottom: 2rem;
    }
    * {
        background-color: transparent !important;
    }
}