/* ############ ############ ############ ############ ############ ############ ############ ##
   JOBEXCHANGE CSS v2.3.21 / 2023-07-13
   Copyright Infoniqa Holding GmbH
   Created by Hartwig Waltle
## ############ ############ ############ ############ ############ ############ ############ */



/* ############ ############ ############ ############ ############ ############ ############ ##
   FONTS

   Google Webfont Helper (https://gwfh.mranftl.com/)
## ############ ############ ############ ############ ############ ############ ############ */

/* roboto-regular - latin */
@font-face {
   font-display: swap;
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: url('/fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* roboto-500 - latin */
 @font-face {
   font-display: swap;
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 500;
   src: url('/fonts/roboto-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* roboto-700 - latin */
 @font-face {
   font-display: swap;
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
   src: url('/fonts/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }



/* ############ ############ ############ ############ ############ ############ ############ ##
   CUSTOM CSS CODE


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


/*376*/
@media (max-width: 575px) {
   #headerDiv .header-menu .navbar .navbar-brand img {
      height: 70px;
   }
}

/*420*/
#headerDiv .header-menu .navbar .navbar-nav .nav-link {
   text-transform: uppercase;
}

/*414*/
@media (min-width: 992px) {
    #headerDiv .header-menu .navbar.navbar.navbar-expand-lg .collapse {
        justify-content: right;
    }
}

#headerDiv .header-menu .navbar.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
}

@media (min-width: 992px) {
    #headerDiv .header-menu .navbar.navbar.navbar-expand-lg .collapse .nav-item:first-child {
        position: relative;
    }

    #headerDiv .header-menu .navbar.navbar.navbar-expand-lg .collapse .nav-item:first-child::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 60%; /* <-- Höhe der Border hier anpassen */
        width: 2px;
        background-color: var(--inf-color-dark);
    }
}



/*486-xxx*/
#headerDiv .header-banner.container-fluid {
   position: relative;
}
#headerDiv .header-banner.container-fluid span {
   position: absolute;
   top: calc(50% - (192px / 2));
   right: 5rem;
   color: #ffffff;
   font-size: 4rem;
   font-weight: 700;
   text-shadow: 2px 2px 8px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.4);
   pointer-events: none;
}


/*926*/
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock select {
   height: 178px !important;
   padding-right: 0.5rem;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-image: none;
   -ms-overflow-style: none;
   scrollbar-width: none;
   border: none !important;
   padding: 0 !important;
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock select::-webkit-scrollbar {
   display: none;
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock select::-ms-expand {
   display: none;
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock select option {
   overflow: hidden;
}
#jobOfferSearch aside.jobOfferSearchFilter .filterBlock select:focus {
   box-shadow: none !important;
}

/*1054*/
#jobOfferSearch section.mainSection #jobOfferListResult ul.searchTags {
   display: none !important;
}

/*1213*/
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer {
   border-bottom: 1px solid var(--inf-color-border);
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer:hover {
   border-bottom: 1px solid var(--inf-color-border);
}
section.mainSection #jobOfferListResult ul#jobOffers li.jobOffer:first-child {
   border-top: 1px solid var(--inf-color-border);
}



/*1476*/
@media (min-width: 768px) {
   .jobOffer .jobOfferDataTable .jobOfferDetailView > h2 {
      width: 100%;
   }
}
/*1479*/
@media (min-width: 768px) {
   .jobOffer .jobOfferDataTable .jobOfferDetailView > div {
      width: 100%;
   }
}

/*1671*/
#applyByContent .codePreambleContainer h1 {
   background-color: transparent;
   color: var(--inf-color-primary);
   font-size: 1.5rem;
   margin-bottom: 2rem;
   padding: 0;
   text-align: left;
}

/*1968*/
form #tablecontent .jobOfferData p.jobOfferDescription {
   background-color: transparent;
   color: var(--inf-color-primary);
   font-size: 1.5rem;
   margin-bottom: 2rem;
   padding: 0;
   text-align: left;
}

/*2513*/
#footerDiv footer .nav .nav-link {
    color: var(--inf-color-light);
}

/* ############ ############ ############ ############ ############ ############ ############ ##
   ADDON - JOBLIST > CUSTOMLINKS - Initiativ & Benefits
## ############ ############ ############ ############ ############ ############ ############ */
.container-fluid.addons .row>* {
   padding: 0;
}

.container-fluid.addons .intiativ-link {
   text-align: center;
   width: 100%;
}
.container-fluid.addons .intiativ-link a {
   text-decoration: none;
   width: 100% !important;
}
.container-fluid.addons .intiativ-link a:active {
   color: var(--inf-color-light);
   background-color: #7aa300;
   border-color: #7aa300;
}
.container-fluid.addons .intiativ-link p {
   padding: 0.75rem 0;
   text-align: left;
}
@media (min-width: 992px) {
   .container-fluid.addons .intiativ-link a {
      width: calc(100% - 1rem) !important;
      margin-right: 1rem;
   }
   .container-fluid.addons .intiativ-link p {
      padding-right: 1rem;
   }
}

.container-fluid.addons .benefit-link .button.benefits {
   width: 100% !important;
}
.container-fluid.addons .benefit-link p {
   padding: 0.75rem 0;
   text-align: left;
}
@media (min-width: 992px) {
   .container-fluid.addons .benefit-link p {
      padding-left: 1rem;
   }
   .container-fluid.addons .benefit-link .button.benefits {
      width: calc(100% - 1rem) !important;
      margin-left: 1rem;
   }
}


/* ############ ############ ############ ############ ############ ############ ############ ##
   ADDON - BENFITS - POPUP 
## ############ ############ ############ ############ ############ ############ ############ */
.modal-dialog {
   margin-top: 10rem;
}
@media (min-width: 768px) {
   .modal-dialog {
      max-width: 540px;
  }
}
@media (min-width: 992px) {
   .modal-dialog {
      max-width: 720px;
  }
}
@media (min-width: 1200px) {
   .modal-dialog {
      max-width: 960px;
  }
}
@media (min-width: 1400px) {
   .modal-dialog {
      max-width: 1140px;
  }
}
.modal-content {
   border-radius: 0;
}

/* ############ ############ ############ ############ ############ ############ ############ ##
   ADDON - BENFITS - FLIPCARD
## ############ ############ ############ ############ ############ ############ ############ */

.flip-card {
   background-color: transparent;
   width: 260px;
   height: 260px;
   perspective: 1000px; /* Remove this if you don't want the 3D effect */
   margin: 0.5rem;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
   position: relative;
   width: 100%;
   height: 100%;
   text-align: center;
   transition: transform 0.8s;
   transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
   transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
   position: absolute;
   width: 100%;
   height: 100%;
   -webkit-backface-visibility: hidden; /* Safari */
   backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
   background-color: var(--inf-color-light);
   box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
   color: var(--inf-color-dark);
   padding: 0.5rem;

   display: flex;
   flex-direction: column;
   justify-content: center; /* Center vertically */
   align-items: center; /* Center horizontally */
   text-align: center; /* Center text within the element */
   height: 100%; /* Ensure this is the full height of its container */
}

.flip-card-front img {
   height: 120px;
   margin-bottom: 1rem;
   width: 120px;
}

.flip-card-front h3 {
   color: var(--inf-color-dark);
   font-size: 1.125rem;
   font-weight: 300;
}

/* Style the back side */
.flip-card-back {
   background-color: var(--inf-color-primary);
   color: var(--inf-color-light);
   padding: 0.5rem;
   transform: rotateY(180deg);

   display: flex;
   flex-direction: column;
   justify-content: center; /* Center vertically */
   align-items: center; /* Center horizontally */
   text-align: center; /* Center text within the element */
   height: 100%; /* Ensure this is the full height of its container */
}

.flip-card-back h3 {
   color: var(--inf-color-light);
   font-size: 1.125rem;
   font-weight: 300;
}

.flip-card-back p { 
   line-height: 1.25;
}


/**/
.postamble.beforeButtons + .modal-dialog {
   margin-top: 0;
   margin-bottom: 0;
   padding-left: 0;
   padding-bottom: 0;
}


.postamble.afterButtons + .modal-dialog {
   display: none !important;
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   FORM > Persönliche Angaben (Standard)
## ############ ############ ############ ############ ############ ############ ############ */
form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000006 {
   clear: both;
   display: flex;
   flex-wrap: wrap;
}
form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000006 > * {
   flex: 0 0 auto;
   flex-shrink: 0;
   max-width: 100%;
   width: 100%;
}
form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000006 > div.applicationBlock {
   width: 100%;
}
@media (min-width: 992px) {
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000006 div.formFieldRow:nth-child(n) {
       margin-left: 0.5rem;
       margin-right: 0.5rem;
       width: calc(50% - (1rem / 2));
   }
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000006 div.formFieldRow:nth-child(2),
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000006 div.formFieldRow:nth-child(2n+2) {
       margin-left: 0;
       margin-right: 0.5rem;
   }
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000006 div.formFieldRow:nth-child(3),
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000006 div.formFieldRow:nth-child(2n+3) {
       margin-left: 0.5rem;
       margin-right: 0;
   }
}

/* ############ ############ ############ ############ ############ ############ ############ ##
   FORM > Kontaktdaten (Standard)
## ############ ############ ############ ############ ############ ############ ############ */
form #tablecontent div.applicationBlock_8a8431a674b8b0d90174fdd8a84a65f6 {
   clear: both;
   display: flex;
   flex-wrap: wrap;
}
form #tablecontent div.applicationBlock_8a8431a674b8b0d90174fdd8a84a65f6 > * {
   flex: 0 0 auto;
   flex-shrink: 0;
   max-width: 100%;
   width: 100%;
}
form #tablecontent div.applicationBlock_8a8431a674b8b0d90174fdd8a84a65f6 > div.applicationBlock {
   width: 100%;
}
@media (min-width: 992px) {
   form #tablecontent div.applicationBlock_8a8431a674b8b0d90174fdd8a84a65f6 div.formFieldRow:nth-child(n) {
       margin-left: 0.5rem;
       margin-right: 0.5rem;
       width: calc(50% - (1rem / 2));
   }
   form #tablecontent div.applicationBlock_8a8431a674b8b0d90174fdd8a84a65f6 div.formFieldRow:nth-child(2),
   form #tablecontent div.applicationBlock_8a8431a674b8b0d90174fdd8a84a65f6 div.formFieldRow:nth-child(2n+2) {
       margin-left: 0;
       margin-right: 0.5rem;
   }
   form #tablecontent div.applicationBlock_8a8431a674b8b0d90174fdd8a84a65f6 div.formFieldRow:nth-child(3),
   form #tablecontent div.applicationBlock_8a8431a674b8b0d90174fdd8a84a65f6 div.formFieldRow:nth-child(2n+3) {
       margin-left: 0.5rem;
       margin-right: 0;
   }
}

/* ############ ############ ############ ############ ############ ############ ############ ##
   FORM > Bewerbungsdaten (Standard)
## ############ ############ ############ ############ ############ ############ ############ */
form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000001 {
   clear: both;
   display: flex;
   flex-wrap: wrap;
}
form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000001 > * {
   flex: 0 0 auto;
   flex-shrink: 0;
   max-width: 100%;
   width: 100%;
}
form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000001 > div.applicationBlock {
   width: 100%;
}
@media (min-width: 992px) {
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000001 div.formFieldRow:nth-child(n) {
       margin-left: 0.5rem;
       margin-right: 0.5rem;
       width: calc(50% - (1rem / 2));
   }
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000001 div.formFieldRow:nth-child(2),
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000001 div.formFieldRow:nth-child(2n+2) {
       margin-left: 0;
       margin-right: 0.5rem;
   }
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000001 div.formFieldRow:nth-child(3),
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000001 div.formFieldRow:nth-child(2n+3) {
       margin-left: 0.5rem;
       margin-right: 0;
   }
}

/* ############ ############ ############ ############ ############ ############ ############ ##
   FORM > Ausbildung (Standard)
## ############ ############ ############ ############ ############ ############ ############ */
form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000007 {
   clear: both;
   display: flex;
   flex-wrap: wrap;
}
form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000007 > * {
   flex: 0 0 auto;
   flex-shrink: 0;
   max-width: 100%;
   width: 100%;
}
form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000007 > div.applicationBlock {
   width: 100%;
}
@media (min-width: 992px) {
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000007 div.formFieldRow:nth-child(n) {
       margin-left: 0.5rem;
       margin-right: 0.5rem;
       width: calc(50% - (1rem / 2));
   }
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000007 div.formFieldRow:nth-child(2),
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000007 div.formFieldRow:nth-child(2n+2) {
       margin-left: 0.5rem;
       margin-right: 0;
   }
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000007 div.formFieldRow:nth-child(3),
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000007 div.formFieldRow:nth-child(2n+3) {
       margin-left: 0;
       margin-right: 0.5rem;
   }
}

/* ############ ############ ############ ############ ############ ############ ############ ##
   FORM > Beruflicher Werdegang (Standard)
## ############ ############ ############ ############ ############ ############ ############ */
form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000008 {
   clear: both;
   display: flex;
   flex-wrap: wrap;
}
form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000008 > * {
   flex: 0 0 auto;
   flex-shrink: 0;
   max-width: 100%;
   width: 100%;
}
form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000008 > div.applicationBlock {
   width: 100%;
}
@media (min-width: 992px) {
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000008 div.formFieldRow:nth-child(n) {
       margin-left: 0.5rem;
       margin-right: 0.5rem;
       width: calc(50% - (1rem / 2));
   }
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000008 div.formFieldRow:nth-child(2),
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000008 div.formFieldRow:nth-child(2n+2) {
       margin-left: 0.5rem;
       margin-right: 0;
   }
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000008 div.formFieldRow:nth-child(3),
   form #tablecontent div.applicationBlock_PMPxGLAPPBLKxAPPBLKIDx0000000008 div.formFieldRow:nth-child(2n+3) {
       margin-left: 0;
       margin-right: 0.5rem;
   }
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   FORM > Persönliche Angaben (Lehrling)
## ############ ############ ############ ############ ############ ############ ############ */
form #tablecontent div.applicationBlock_8a8431a651985ce20151aa21ee5b0b2c {
   clear: both;
   display: flex;
   flex-wrap: wrap;
}
form #tablecontent div.applicationBlock_8a8431a651985ce20151aa21ee5b0b2c > * {
   flex: 0 0 auto;
   flex-shrink: 0;
   max-width: 100%;
   width: 100%;
}
form #tablecontent div.applicationBlock_8a8431a651985ce20151aa21ee5b0b2c > div.applicationBlock {
   width: 100%;
}
@media (min-width: 992px) {
   form #tablecontent div.applicationBlock_8a8431a651985ce20151aa21ee5b0b2c div.formFieldRow:nth-child(n) {
       margin-left: 0.5rem;
       margin-right: 0.5rem;
       width: calc(50% - (1rem / 2));
   }
   form #tablecontent div.applicationBlock_8a8431a651985ce20151aa21ee5b0b2c div.formFieldRow:nth-child(2),
   form #tablecontent div.applicationBlock_8a8431a651985ce20151aa21ee5b0b2c div.formFieldRow:nth-child(2n+2) {
       margin-left: 0;
       margin-right: 0.5rem;
   }
   form #tablecontent div.applicationBlock_8a8431a651985ce20151aa21ee5b0b2c div.formFieldRow:nth-child(3),
   form #tablecontent div.applicationBlock_8a8431a651985ce20151aa21ee5b0b2c div.formFieldRow:nth-child(2n+3) {
       margin-left: 0.5rem;
       margin-right: 0;
   }
}



/* ############ ############ ############ ############ ############ ############ ############ ##
   FORM > Bewerbungsdaten (Intiativ)
## ############ ############ ############ ############ ############ ############ ############ */
form #tablecontent div.applicationBlock_8a8431a650e152ea01516229958f3f1a {
   clear: both;
   display: flex;
   flex-wrap: wrap;
}
form #tablecontent div.applicationBlock_8a8431a650e152ea01516229958f3f1a > * {
   flex: 0 0 auto;
   flex-shrink: 0;
   max-width: 100%;
   width: 100%;
}
form #tablecontent div.applicationBlock_8a8431a650e152ea01516229958f3f1a > div.applicationBlock {
   width: 100%;
}
@media (min-width: 992px) {
   form #tablecontent div.applicationBlock_8a8431a650e152ea01516229958f3f1a div.formFieldRow:nth-child(n) {
       margin-left: 0.5rem;
       margin-right: 0.5rem;
       width: calc(50% - (1rem / 2));
   }
   form #tablecontent div.applicationBlock_8a8431a650e152ea01516229958f3f1a div.formFieldRow:nth-child(2),
   form #tablecontent div.applicationBlock_8a8431a650e152ea01516229958f3f1a div.formFieldRow:nth-child(2n+2) {
       margin-left: 0;
       margin-right: 0.5rem;
   }
   form #tablecontent div.applicationBlock_8a8431a650e152ea01516229958f3f1a div.formFieldRow:nth-child(3),
   form #tablecontent div.applicationBlock_8a8431a650e152ea01516229958f3f1a div.formFieldRow:nth-child(2n+3) {
       margin-left: 0.5rem;
       margin-right: 0;
   }
}


/* ############ ############ ############ ############ ############ ############ ############ ##
   BUGFIX V13 - FORM FIREFOX
## ############ ############ ############ ############ ############ ############ ############ */

form #tablecontent div[class*="applicationBlock_"] > .formFieldRow .fileWrapper input[type="file"] {
	right: 40px !important;
}