@charset "utf-8";

@font-face {
  font-family: "Text";
  src: url("fonts/Quicksand-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Heading";
  src: url("fonts/Rubrik-Medium.ttf") format("truetype");
}

:root {
    --primary-color:#2a6f97;
    --primary-dark-color:#014f86;
    --primary-dark-hover-color:#003257;
    --accent-color:#ffa8f6;
    --accent-hover-color:#c781c0;
    --header-text-size:2em;
    --text-color-primary:#000;
    --footer-color:var(--primary-color);
    --bg-color:#a9d6e5;
    --footer-height:2em;
    --table-top-color:#266fff;
    --table-color-even:#d9d9d9;
    --table-color-odd:#ffffff;
}
body{
  background-color:var(--bg-color);
  padding:0px;
  margin:0;
  min-height: 100vh;
  display:flex; 
  flex-direction:column;
}
html{
  min-height: 100vh;
}
*{
  font-family: "Text";
}
h1,h2,h3,h4,h5{
  font-family: "Text";
}
.circle {
  background-color: var(--primary-dark-color);
  border-radius: 100%;
  height: calc(var(--header-text-size)*1.2);
  width: calc(var(--header-text-size)*1.2);
  color: #fff;
  font-size: var(--header-text-size);
  font-weight: bold;
  display: inline-flex;
  align-items: center; 
  justify-content: center;
}
header{
  padding: 20px;
  background-color: var(--primary-color);
  text-align: center;
}
header h1{
  display: inline;
  margin: 0;
  margin-left: 20px;
  padding:0;
  color: #fff;
  font-size: var(--header-text-size);
}
.headermenu{
  margin: 0;
  padding: 0;
  display: flex;
  border-radius:12px;
  float: right;
  background-color: var(--primary-dark-color);
}
.headermenu ul{
  padding: 0;
  margin-left: 0.5em;
  margin-right: 0.5em;
  display: inline-block;
}
.headermenu ul li {
  color: #fff;
  display: inline;
}
.headermenubutton{
  font-size: var(--header-text-size);
  color: #fff;
  text-decoration: none;
  background-color: var(--primary-dark-color);
  padding: 10px;
  border-radius:12px;
}
.headermenubutton:hover{
  background-color: var(--primary-dark-hover-color);
}
.headermenubutton.selected{
  background-color: var(--primary-dark-hover-color);
  cursor: default;
}
.headermenu ul li:not(:last-child):after {
  font-size: var(--header-text-size);
  content: "|";
}
.headerleft{
  display: inline;
  float: left;
}
footer{
  margin: 0;
  color: #fff;
  margin-top:auto;
}
footer a img{
  height: var(--footer-height);
  width: var(--footer-height);
}
.footermenu{
  margin: 0;
  padding: 0;
  display: inline;
}
.footermenu ul{
  padding: 0;
  margin:0;
  line-height: 2em;
  display: inline;
}
.footermenu ul li {
  display: inline;
  padding: 0;
  margin:0;
}
.footermenubutton{
  font-size: calc(var(--header-text-size)/2);
  color: #fff;
  margin:0;
  padding:0;
  text-decoration: none;
}
.footermenubutton:hover{
  text-decoration: underline;
}
.footermenu ul li:not(:last-child):after {
  font-size: calc(var(--header-text-size)/2);
  content: "|";
}
.seperator{
  width: calc(100% - 80px);
  height:2px;
  margin-left: 40px;
  margin-right: 40px;
  background-color: #fff;
}
.button{
  background-color: var(--accent-color);
  padding: 20px;
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.button:hover{
  background-color: var(--accent-hover-color);
}
.body{
  width: calc(100% - 20px);
  padding: 10px;
}
table{
  border-collapse: collapse;
}
th{
  color: #fff;
  background-color: var(--table-top-color);
  border: solid #000;
  border-width: 1px 1px 1px 1px;
  padding: 5px;
  background-color: #fdad17;
}
th:nth-child(even){
  background-color: #014f86;
}
tr:nth-child(even){
  border: solid #000;
  border-width: 1px 0 0 0;
}
td{
  border: solid #000;
  border-width: 1px 1px 1px 1px;
  padding: 10px;
}
tr:nth-child(4n+2), tr:nth-child(4n+3) {background-color: var(--table-color-even)}
tr:nth-child(4n+4), tr:nth-child(4n+5) {background:var(--table-color-odd)}
.rotateimage{
  transform-origin: 50% 50%;
  animation: rotate1 .2s linear 0s;
  animation-fill-mode: forwards;
}
.rotateimage2{
  transform-origin: 50% 50%;
  animation: rotate2 .2s linear 0s;
  animation-fill-mode: forwards;
}
@keyframes rotate1 {
  from {transform: rotate(-90deg);}
  to {transform: rotate(0deg);}
}
@keyframes rotate2 {
  from {transform: rotate(0deg);}
  to {transform: rotate(-90deg);}
}
.centerimg{
  text-align: center;
}
.imgarrowdown{
  transform: rotate(-90deg);
}
.explanation{
  border:none;
  border-color: transparent;
  display: none;
}
.widthdiv70{
  width: 70%;
  margin:0 auto;
}
.search-bar {
  display: flex;
}
.search-bar input,
.search-btn {
  width: 3em;
  height: 3em;
}
.search-btn {
  cursor: pointer;
}
.search-bar,
.search-bar input  {
  width: 100%;
}
.search-bar input,
.search-bar input:not(:focus) + .search-btn {
  outline: transparent;
}
.search-bar {
  margin: auto;
  padding: 20px;
  justify-content: center;
  max-width: 40%;
}
.search-bar input {
  padding: 0.75em;
  background: #fff;
  border-radius: 10px 0px 0px 10px;
  border-color: var(--primary-dark-color);
  border-width: 3px;
  border-style: solid;
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,.3);
}
.search-bar input::-webkit-search-decoration {
  -webkit-appearance: none;
}
.search-bar input::-webkit-search-cancel-button{
   display: none;
}
.search-btn {
  padding: 0.75em;
  position: relative;
  background: var(--primary-dark-color);
  border-width: 0px;
  border-radius: 0 0.375em 0.375em 0;
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,.3);
}
.search-btn:before, 
.search-btn:after {
  content: "";
  display: block;
  opacity: 1;
  position: absolute;
  width: 80%;
  height: 4px;
  background-color: #fff;
  border-radius: 20%;
}
.search-btn:before{
    transform: rotate(45deg);
    top:45%;
    left:10%;
}

.search-btn::after {
    transform: rotate(-45deg);
    top: 45%;
    left:10%;
}
.search-btn span {
  display: inline-block;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
.search-btn:hover{
  background: var(--primary-dark-hover-color);
}

.select-wrapper {
  position: relative;
  width: 40%;
  padding: 20px;
}
.downarray{
  font-size: 20px;
  pointer-events: none;
  display:inline-block;
  position: absolute;
  content: url("icons/downarrow.svg");
  width:40px;
  height: 40px;
  right:20px;
  transition: transform 0.2s ease-in-out;
}
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: var(--primary-dark-color);
  border: none;
  border-radius: 3px;
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,.3);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  height: 40px;
  outline: none;
  padding-left: 10px;
  width: 100%;
}

select option {
  color: #fff;
}
.centertext{
  width: 100%;
  text-align: center;
}
.flex{
  display:flex;
  justify-content: center;
  align-items: center;
}
.halfwidth{
  width: 50%;
}
.submitbtn {
  text-decoration: none;
  color: white;
  display:block;
  margin-top: 20px;
  background: var(--primary-dark-color);
  position: relative;
  top: 0px;
  padding: 15px;
  font-size: 20px;
  border-radius: 10px;
  border:none;
  cursor: pointer;
  box-shadow: 0px 10px 0px 0px var(--primary-dark-hover-color), 0px 0px 20px 0px #bbb;
  transition: all 0.2s;
 margin: auto;
}

.submitbtn:active {
  top: 8px;
  box-shadow: 0px 5px 0px 0px var(--primary-dark-hover-color);
}
.textinput {
  box-sizing: border-box;
  width: 500px;
  height: calc(3em + 2px);
  margin: 0 0 1em;
  padding: 1em;
  border: 2px solid #ccc;
  border-radius: 10px;
  background: #fff;
  resize: none;
  outline: none;
}
.textinput[required]:focus,
.invalidmail[required]:focus:invalid {
  border-color: var(--primary-dark-color);
}
label[placeholder]:before{
  left: 0.5em;
  position: relative;
}
.textinput[required]:focus + label[placeholder]:before {
  color: var(--primary-dark-color);
}
.textinput[required]:invalid + label[alt]:before {
  content: attr(alt);
}
.textinput[required]:focus + label[placeholder]:before,
.textinput[required]:valid + label[placeholder]:before,
.invalidmail[required]:invalid:focus + label[placeholder]:before {
  content: attr(placeholder);
  transition-duration: 0.2s;
   transform-origin: bottom left;
  transform: translate(0, -1.55em) scale(1.3, 1.3);
  color: var(--primary-dark-color);
  animation: visiblebg 0.1s ease-in-out 0.1s forwards;
}
.textinput[required] + label[placeholder] {
  display: block;
  pointer-events: none;
  line-height: 1.25em;
  position: relative;
  top: calc(-3em + 2px);
}
.textinput[required] + label[placeholder]:before {
  display: inline-block;
  padding: 0 2px;
  color: #898989;
  white-space: nowrap;
  transition: 0.3s ease-in-out;
}
@keyframes visiblebg {
  0%  {background-color: transparent;}
  100% {background:linear-gradient(to bottom, var(--bg-color) 80%, transparent 20%);}
}
textarea.textinput[required] + label[placeholder] {
  top: calc(-5.5em + 2px);
}
textarea.textinput[required]:focus + label[placeholder]:before,
textarea.textinput[required]:valid + label[placeholder]:before {
  content: attr(placeholder);
  transition-duration: 0.2s;
  transform-origin: bottom left;
  transform: translate(0, -4.2em) scale(1.3, 1.3);
  color: var(--primary-dark-color);
  animation: visiblebg 0.1s ease-in-out 0.1s forwards;
}
textarea.textinput{
  height: 9em;
}
.invalidmail[required]:invalid + label[placeholder]:before{
  content: "Ungültige Email-Adresse";
  transition-duration: 0.2s;
   transform-origin: bottom left;
  transform: translate(0, -1.55em) scale(1.3, 1.3);
  color: #e63946;
  animation: visiblebg 0.1s ease-in-out 0.1s forwards;
}
.invalidmail[required]:invalid {
  border-color: #e63946;
}
.scrollbar{
  cursor: auto; 
}
.scrollbar::-webkit-scrollbar-track
{
  border-radius: 10px;
  background-color: transparent;
}

.scrollbar::-webkit-scrollbar
{
  width: 6px;
  height: 90px;
  margin-right: 5px;
  background:transparent;
  border-radius: 10px;
  position: absolute;
  right: 10px;
  top: 100px;
}
.scrollbar::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  background-color: var(--primary-dark-color);
}
.scrollbar::-webkit-scrollbar-track-piece:end {
    background: #d1d1d1;
    margin-bottom: 10px; 
     border-radius: 10px;
}

.scrollbar::-webkit-scrollbar-track-piece:start {
    background: #d1d1d1;
    margin-top: 10px;
     border-radius: 10px;
}
.alertbox{
  width: 50%;
  min-width: 200px;
  border-radius: 50px;
  padding: 30px;
  background-color: #ff00ff;
  margin-top:20px;
  display: none;
}
.boxh2{
  color: #fff;
}
#succesbox{
  background-color: #45cc5c;
}
#loadingbox{
  background-color: #FFC300;
}
#errorbox{
  background-color: #cc4545;
}
.animatealertbox,.animatealertbox>h2{
  display:block;
  animation: zeroheight 1s ease-in-out 5s forwards;
}
@keyframes zeroheight {
  0%{height: auto}
  100%  {height: 0;padding: 0;font-size: 0;}
}
.link{
  color:var(--primary-dark-color);
  cursor: pointer;
  text-decoration: none;
}
.link:hover{
  text-decoration: underline;
}
.centerdiv{
  display:grid;
  place-items:center;
  padding-left: 5%;
  padding-right: 5%;
}
.leftrightmargin{
  margin-left: 20px;
  margin-right: 20px
}
 #mobilejobtablediv{
    display: none;
  }
  #jobtable{
    display: table;
  }
  .mobilejobtable{
    width: 100%;
    margin-bottom: 20px;
  }
  .mobilejobtable td{
    width: 50%;
  }
  .bgyellow {
    background-color: #fdad17;
    color: white;
  }
  .bgblue {
    background-color: #014f86;
    color: white;
  }
  .greybg{
    background-color: var(--table-color-even);
  }
  .whitebg{
    background-color: var(--table-color-odd);
  }
  .marginleftimg{
  margin-left: 20px;
}
@media only screen and (max-width: 1000px) {
  .mobilenotflex{
    display: block;
  }
  .leftrightmargin{
    margin-right: 0px
  }
  .footermenu ul li {
    display: flex;
    justify-content: center;
  }
  .footermenu ul li:not(:last-child):after {
      content: "";
  }
  .headerleft{
    display: flex;
    justify-content: center;
    align-items: center;
    float: none;
  }
  .headermenu{
    margin-top: 10px;
    border-radius:12px;
    float: none;
    display: inline-flex;
    justify-content: center;
    background-color: var(--primary-dark-color);
  }
  .select-wrapper{
    width: 90%;
    margin-left: 5%;
    padding: 0;
  }
  .search-bar{
    max-width: 90%;
  }
  #mobilejobtablediv{
    display: block;
    table-layout:fixed;
  }
  #jobtable{
    display: none;
  }
  .textinput{
    width:100%;
  }
  #form{
    width: 100%;
  }
  .widthdiv70{
    width: 90%;
    margin:0 auto;
  }
  .marginleft{
    margin-left: 0px;
  }
  .marginleftimg{
  margin: 0 auto;
  }
}


@keyframes rotate360 {
  0% { transform: rotate(0) }
  100% { transform: rotate(360deg) }
}
.spinnerclass div { box-sizing: border-box!important }
.spinnerclass> div {
  width: 100px;
  height: 100px;
  top: 28px;
  left: 28px;
  border-radius: 50%;
  border: 16px solid #000;
  border-color: #fff transparent #fff transparent;
  animation: rotate360 1s linear infinite;
  margin: 0;
}
.spinner {
  margin-right: 40px;
  display: inline;
  overflow: hidden;
}
.spinnerclass {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0;
}
.spinnerclass div { box-sizing: content-box; }

.alertboxloading{
  width: 50%;
  min-width: 200px;
  border-radius: 50px;
  padding: 30px;
  background-color: #ff00ff;
  margin-top:20px;
  display: none;
}
.animalertboxloading,.animalertboxloading>h2,.animalertboxloading>div{
  display:flex;align-items:center;justify-content:center;
  animation: zeroheight2 1s ease-in-out 5s forwards;
}
@keyframes zeroheight2 {
  0%{height: auto}
  100%  {height: 0;padding: 0;font-size: 0;}
}
p{
    font-size:larger;
}
.zeromargin{
  margin: 0;
}
.dispinline{
  display: inline;
}
.px5left{
  margin-left: 5px;
}
.tablecontainer{
  display: flex;
  margin-bottom: 5px;
}
.cookiebanner{
  background: #fff;
  padding:4px 20px 4px 20px;
  justify-content: center;
}
.cookiebanner > p{
  font-size: 14px;
  margin-right:20px;
  color:black;
}
.submitbtnsmall {
  text-decoration: none;
  color: white;
  display:flex;
  background: var(--primary-dark-color);
  position: relative;
  top: 0;
  padding: 7.5px;
  font-size: 14px;
  border-radius: 10px;
  border:none;
  cursor: pointer;
  box-shadow: 0px 5px 0px 0px var(--primary-dark-hover-color), 0px 0px 10px 0px #bbb;
  transition: all 0.2s;
}

.submitbtnsmall:active {
  top: 4px;
  box-shadow: 0px 2.5px 0px 0px var(--primary-dark-hover-color);
}