/* index_suche */
/* Generelle Elemente */
@import "https://fonts.googleapis.com/css?family=Montserrat:400,700|Raleway:300,400";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,900&display=swap');
@import url(https://use.fontawesome.com/releases/v5.15.1/css/all.css);
@import url(https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap);
.panel-default.job{border: 1px solid #929daf;border-radius: 1em;}
.panel-heading.job {
   font-family: "Montserrat";
   background: rgb(146 188 236);
   font-weight: 350;
   text-align: center;
   border-bottom: 1px solid #929daf;
   padding: .5em 0em;
   color: #fff;
   border-top-right-radius: 1em;
   border-top-left-radius: 1em;
}
.panel-body{background: #fafafa;}
#headlineSvgJob {position: relative;float: right;right: 10px;}
.panel-footer.job{text-align: center;border-bottom-right-radius: 1em;border-bottom-left-radius: 1em;padding-top:1em;}
.fa-map-marker-alt{color: lightgray;}
.fa-map-marker-alt:hover{color: #495057;}
.tabs{border-radius: 1em;background: #fafafa; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;}
.tabs input[name="tab-control"] { display: none;}
.surroundingPill {background: transparent;border: 1px solid #929daf;border-radius: 2em;padding: .75em 2em;display: inline-block;}
.surroundingPill.active {background: rgb(146 188 236);display: inline-block;box-shadow: 0 0 10px rgba(0,0,0,.1);border: 1px solid #929daf;}
/* .surroundingPill.active > .pillSpan {color: rgb(146 188 236);} */
.surroundingPill > .tabLabel {color: #929daf;}
.surroundingPill.active > .tabLabel {color: #fff;}
.pillSpan {font-size: 1.5em;font-family: 'Montserrat';font-weight: 300;}
.flex-container{display: flex;justify-content: center;flex-wrap: wrap;}
.filterFlexPill{display: flex;flex-direction: column;margin: .2em .5em;padding: .5em 1em;border: 1px solid #929daf;border-radius: 2em;cursor: pointer;background: #fff;box-shadow: 0 0 10px rgba(0,0,0,.1);color: grey;font-weight: 300;}
.tabs ul.tabUl {
   list-style-type: none;
   padding-left: 0;
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   flex-direction: row;
   margin-bottom: 0;
   -webkit-box-pack: justify;
   justify-content: space-between;
   -webkit-box-align: end;
   align-items: flex-end;
   flex-wrap: wrap;
}
.tabs ul.tabUl li {
   box-sizing: border-box;
   -webkit-box-flex: 1;
   flex: 1;
   width: 50%;
   padding: 0 10px;
   text-align: center;
}
.tabs ul.tabUl li .tabLabel {
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   margin-bottom: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
   cursor: pointer;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   white-space: nowrap;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.tabs ul.tabUl li .tabLabel svg {
   fill: #929daf;
   height: 2em;
   vertical-align: bottom;
   margin-right: 0.2em;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.tabs ul.tabUl li .tabLabel:hover, .tabs ul.tabUl li .tabLabel:focus, .tabs ul.tabUl li .tabLabel:active {
   outline: 0;
   color: #5f5d5d;
}
.tabs ul.tabUl li .tabLabel:hover svg, .tabs ul.tabUl li .tabLabel:focus svg, .tabs ul.tabUl li .tabLabel:active svg {
   fill: #5f5d5d;
}
.tabs .slider {
   position: relative;
   width: 25%;
   -webkit-transition: all 0.5s cubic-bezier(0.38, 0.8, 0.32, 1.07);
   transition: all 0.5s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}
.tabs .slider .indicator {
   position: relative;
   width: 100%;
   margin: 0 auto;
   height: 1px;
   background: #929daf;
   border-radius: 1px;
}
.tabs ul.tabUl li .tabLabel br {display: none;}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul.tabUl > li:nth-child(1) > .tabLabel {cursor: default;color: white;}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul.tabUl > li:nth-child(1) > .tabLabel svg {fill: white;}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider {-webkit-transform: translateX(50%);transform: translateX(50%);margin-bottom: -.2em;}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) {display: block;}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul.tabUl > li:nth-child(2) > .tabLabel {cursor: default;color: white;}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul.tabUl > li:nth-child(2) > .tabLabel svg {fill: rgba(146,188,236,1);;}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider {-webkit-transform: translateX(250%);transform: translateX(250%);margin-bottom: -.2em;}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) {display: block;}
@-webkit-keyframes content {
   from {opacity: 0;-webkit-transform: translateY(5%);transform: translateY(5%);}
   to {opacity: 1;-webkit-transform: translateY(0%);transform: translateY(0%);}
}
@keyframes content {
   from {opacity: 0;-webkit-transform: translateY(5%);transform: translateY(5%);}
   to {opacity: 1;-webkit-transform: translateY(0%);transform: translateY(0%);}
}

/* innerhalb der tabs */
/* .content {margin: 3em 0em 5em 0em;} */
.content section {
   display: none;
   -webkit-animation-name: content;
   animation-name: content;
   -webkit-animation-direction: normal;
   animation-direction: normal;
   -webkit-animation-duration: 0.3s;
   animation-duration: 0.3s;
   -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
   line-height: 1.4;
}
.jobNav ul {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 0;
}
.jobNav li {
   list-style: none;
   -webkit-box-align: center;
   align-items: center;
   background: white;
   cursor: pointer;
   width: 40%;
   height: 85px;
   border:1px solid #929daf;
   padding: .5em 1em;
   box-shadow: rgba(0, 0, 0, 0.172549) 0 5px 8px -2px;
   text-align: left;
   flex-grow: .5;border-top-left-radius: .25em;border-bottom-left-radius: .25em;
}
.cardHeader{margin: 0px;padding: 0px 0px 15px 0px;font-family: 'Noto Sans KR', sans-serif;}
.cardHr{display: block;border: none;height: 3px;background-color: #92bcec;margin: 0px;}
#txtHint {
   display: none; /* initial: none */
   top: 1.3em;
   left: -.9em;
   z-index: 1000;
   background: #fff;
   border: 1px solid rgba(0,0,0,.15);
   border-radius: .25em;
   position: relative;
   box-shadow: 0 6px 12px rgba(0,0,0,.175);
   -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
   max-height: 376px;
   overflow: hidden scroll;
}
#txtHint>text{font-size: .9em;}
#txtHintGesuche {
   display: none; /* initial: none */
   z-index: 1000;
   top: 1.3em;
   left: -.9em;
   background: #fff;
   border: 1px solid rgba(0,0,0,.15);
   border-radius: .25em;
   position: relative;
   box-shadow: 0 6px 12px rgba(0,0,0,.175);
   -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
   max-height: 376px;
   overflow: hidden scroll;
}
#txtHintGesuche>text{font-size: .9em;}
.ortHint{display: block;padding: .4em 1em;border-bottom: 1px solid #eee;}
.ortHint.highlight{background: #eee;}
.ortHint:hover{background: #eee;}

/* Custom Scrollbar */
#txtHint::-webkit-scrollbar{display: none;}
#txtHint:hover::-webkit-scrollbar {display: inline;width: 8px;background-color: #F5F5F5;}
#txtHint:hover::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #e4e2e2;border-radius:5px;}
#txtHint:hover::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}

.fas.fa-backspace {padding-top: 0em;margin: 0;font-size: 1.3em;color: lightgray;cursor: pointer;float: right;}
.fas.fa-backspace:hover {color: #495057;}

/* Zusatzoptionen */
.row.werbung{text-align: left;padding-left: 0;font-size: 1.2em;margin-bottom: .5em;}
.zusatzOption {
   margin: .5em 2em;
   background: #fff;
   font-weight: 300;
   display: inline-block;
   padding: .5em 1em;
   border-radius: 1em;
   width: 128px;
   height: 128px;
   border: 1px solid lightgray;
   filter: grayscale(1);
   cursor: pointer;
}
.zusatzOption:hover{box-shadow: rgba(0, 0, 0, 0.172549) 0 6px 12px 0;font-weight: 500;border: 1px solid rgba(146,188,236,1);filter: grayscale(0);}
.zusatzOption:hover .zusatzsvg {filter: grayscale(0);}
.surroundFas{display:block; padding:0;}
svg.zusatzsvg {height:70px; filter: grayscale(1);}

/* Werbung */
.ownUeberschrift {text-align: center;font-size: 1.5em;color: black;direction: ltr;}
.journeyWrapper {display: table;height: 40px;width: 40px;text-align: center;margin: 0 auto;font-size: 1.5em;color: white;overflow: hidden;}
.journeyStep{display: table-cell; vertical-align: middle;}
.ownContainer {padding-top:2em;position: relative;overflow: hidden;}
.ownContainer:before {top: -150px;left: 50%;margin-left: 11px;width: 2px;height: 100%;z-index: 1;content: '';position: absolute;border-right: 4px dotted #92bcec;}
.timeline-block {
   width: -webkit-calc(50% + 8px);
   width: -moz-calc(50% + 8px);
   width: calc(50% + 8px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
}
.timeline-block-right{float: right;}
.timeline-block-left {float: left;direction: rtl;}
.marker {width: 40px;height: 40px;border-radius: .5em;background: rgba(146,188,236,1);z-index: 999;margin-right: -25px;}
.timeline-content {width: 100%;padding: 1em;border-radius: 1em;background: white;box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);}
.timeline-content.ml3 {margin-left: 3em;}
.timeline-content.mr3 {margin-right: 3em;}
.timeline-content h3 {margin-bottom: 5px;}
.timeline-content p {word-spacing: 1px;line-height: 1.5em;}
.anzeigenButton{padding: 2em 3em 3em 3em}

/* Dropdown */
.filterElementStyle {display: inline-block;font-size: 1.2em;color: grey;font-weight: 300;}
.dropdown-menu a {padding: 0.5em 1em;text-decoration: none;display: block;color:grey;}
.dropdown a:hover {background-color: #ddd;color:black}
.show {display: block;}
.search-input::placeholder {color: #928f8f;}

/* Suchbutton */
.search-label {font-size: 1.3em;font-weight: 500;margin-bottom: 6px;}
.search-input {
   border: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   outline: none;
   padding-bottom: 5px;
   box-shadow: 0px 2px 0px 0px white;
   width: 90%;
}
.search-input:focus{box-shadow: 0px 2px 0px 0px #337ab7;}
.search-button {
   height: 85px;
   line-height: 85px;
   min-width: 50px;
   padding-right: 1px;
   min-width: 90px !important;
   text-align: center;
   font-size: 1.2em;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   color: white !important;
   background: #337ab7;
   -webkit-transition: background-color 0.4s ease;
   transition: background-color 0.4s ease;
   box-shadow: rgba(0, 0, 0, 0.172549) 0 5px 8px -2px;
}
.search-button:hover {
  background: #286090;
  border-color: #204d74;
  text-decoration: none;
  cursor: pointer;
}
.submit-zusatz{
   display: none;
   padding: .5em 1em;
   cursor: pointer;
   text-align: center;
   min-width: 200px;
   font-size: 1.2em;
   border-radius: 5px;
   color: white !important;
   background: #337ab7;
   box-shadow: rgba(0, 0, 0, 0.172549) 0 5px 8px -2px;
}

/* sich drehender ladespinner */
.loader {
   position: absolute;
   top: 50%;
   left: 46%;
   border: 16px solid #eee;
   border-radius: 50%;
   border-top: 16px solid #336699;
   width: 120px;
   height: 120px;
   -webkit-animation: spin 2s linear infinite; /* Safari */
   animation: spin 2s linear infinite;
   z-index: 10;
}
/* Safari */
@-webkit-keyframes spin {
   0% { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

/* media queries*/
@media screen and (max-width: 320px) {
   .cardHeader{font-size:1.5em !important}
}  

@media (max-width: 375px) {
   .fas.fa-backspace{display: none;}
   .search-label{font-size:1em;}
}
@media (max-width: 425px) {
   .panel-body{padding:15px 0px !important}
}

@media screen and (max-width: 480px) {
   svg#jobfindensvg{display: none;}
   svg#mafindensvg{display: none;}
   .row.werbung{display: inline-flex;}
   .timeline-content{padding: .75em .5em;}
   .tabs ul.tabUl li{padding:0px !important;}
   h2{font-size: 25px !important;}
   #txtHint{left: 0em;}
   #txtHintGesuche{left: 0em;}
}

@media (max-width: 615px) {
   .tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {background: rgba(0, 0, 0, 0.08);}
   .tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {background: rgba(0, 0, 0, 0.08);}
   .tabs ul li label {padding: 5px;border-radius: 5px;}
   .tabs ul li label span {display: block;font-size: 1em;}
   .tabs .slider {display: block;}
   .tabs .content {margin-top: 20px;}
   .surroundingPill{padding:.2em !important;}
   .filterElementStyle{margin-bottom:.5em;}
   .jobNav {padding:0em .5em;}
   .jobNav li {flex: 1 1 100%;border-radius: .25em;margin-bottom:1em;padding: 0em 0.5em;}
   .search-button {
      height: 40px !important;
      line-height: 40px !important;
      width: 100%;
      text-align: center;
      font-size: 1.2em;
      border-radius: 5px;
      color: white !important;
      background: #337ab7;
      -webkit-transition: background-color 0.4s ease;
      transition: background-color 0.4s ease;
      box-shadow: rgba(0, 0, 0, 0.172549) 0 5px 8px -2px;
   }
   .fa.fa-search{margin-right: 0px;line-height: 40px;}
   .zusatzOption {margin:.5em 1em !important;}
   .anzeigenButton>a {display: block;}
   .fas.fa-backspace{padding-top: 5px;}
   #headlineSvg{display:none;}
}
@media screen and (max-width: 768px) {
   .ownContainer:before {left: 8px;width: 2px;}
   .timeline-block {width: 100%;margin-bottom: 30px;}
   .timeline-block-right {float: none;}
   .timeline-block-left {float: none;direction: ltr;}
   .timeline-content.mr3{margin-left: 3em;margin-right:0em;}
   .anzeigenButton{font-size: 0.8em;}
}