html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  /*height: 100vh;
  display: flex;*/
  margin: 10px auto;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  font-family: fface1;
  min-width:1000px;
  max-width:1200px;
}

input[type=text] {
  padding-left: 15px;
  color: #000000/*#707274*/;
  font-size:14px;
  font-family: fface2;
}

label {
  color: #707274;
  font-size:14px;
  /*font-family: fface2;*/
}

:focus { outline: none; }


/* @font-face {
  font-family: fface1;
  src: url(FiraSans-SemiBold.ttf);
}

@font-face {
  font-family: fface2;
  src: url(FiraSans-Regular.ttf);
}

@font-face {
  font-family: FiraSans-Bold;
  src: url(FiraSans-Bold.ttf);
}

@font-face {
  font-family: HW-Regular;
  src: url(HW-Regular.ttf);
} */

@font-face {
  font-family: fface1;
  src:url("https://use.typekit.net/af/ba6817/00000000000000007735fdd1/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/ba6817/00000000000000007735fdd1/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/ba6817/00000000000000007735fdd1/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
}

@font-face {
  font-family: fface2;
  src:url("https://use.typekit.net/af/0b3ef7/00000000000000007735fdcc/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/0b3ef7/00000000000000007735fdcc/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/0b3ef7/00000000000000007735fdcc/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
}

@font-face {
  font-family: FiraSans-Bold;
  src:url("https://use.typekit.net/af/5a8c6a/00000000000000007735fdd4/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/5a8c6a/00000000000000007735fdd4/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/5a8c6a/00000000000000007735fdd4/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
}

@font-face {
  font-family: HW-Regular;
  src:url("https://use.typekit.net/af/0b3ef7/00000000000000007735fdcc/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/0b3ef7/00000000000000007735fdcc/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/0b3ef7/00000000000000007735fdcc/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
}



/*input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
        background-color: #202c3e;
}*/

.test_name {
  font-size:30px;
}

.test_main_question {
  font-size:20px;
  margin: 0 10% 0 10%;
}

.questions_with_answers{
  background-color: #eef0f3;
  /*box-shadow: 3px 3px 3px 3px #aaaaaa;*/
  border-radius: 10px;
  margin: 50px 10% 50px 10%;/*20px;*/
  padding:20px;
}

.zwmodulbuttons{
  width:80%;
  height:100px;
  text-align: center;
  margin: 50px 10% 50px 10%;
}

#auswertcall {
  text-align: center;
}

.zw_buttons {
  width:  120px;
  height: 40px;
  font-family: fface1;
  font-size:20px;
  background: linear-gradient(to right, #202c3e 0%, #7286a4 100%);
  border-radius: 20px;
  border: none;
  color: white;
}

.questions_text {
  color: #3f3d3d;
  margin:10px 0;
}

.textbox_image { position: relative; width:240px; }
.textbox_image input {  background-color:#fff; display:block; box-sizing: border-box; border-radius: 0 20px 20px 0; border-color: #aaaaaa; margin-left:20%; height:35px;}
.textbox_image img { position: absolute; top: 0px; left: 0;  background:linear-gradient(to right, #202c3e 0%, #7286a4 100%); width: 20%; height:35px; border-radius: 20px 0 0 20px;padding: 2px 2px 2px 5px}









.textbox_image2 { position: relative; width:100%;}
.textbox_image2 input[type=text] { background-color:#eef0f3; display:block; border-radius: 0 15px 15px 0; border:none; margin-left:16%; height:30px; width: 80%;}
.textbox_image2 img { position: absolute; top: 0px; left: 0;  background-color:#eef0f3; width: 15%; height:30px; border-radius: 15px 0 0 15px;padding: 5px 5px 5px 8px}
.textbox_image2 input[type=submit] { position: absolute; top: 10px; left: 300px; background-color:#ffffff; border:none; font-family: fface1;}


.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  background: #888888;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #ffffff;
  cursor: pointer;
  border-radius: 10px;
  border-width: 2px;
  border-style: solid;
  border-color: #888888;
}

.slider::-moz-range-thumb {
/*  width: 20px;
  height: 20px;
  background: #4CAF50;
  cursor: pointer;*/
  appearance: none;
  width: 17px;
  height: 17px;
  background-color: #ffffff;
  cursor: pointer;
  border-radius: 10px;
  border-width: 2px;
  border-style: solid;
  border-color: #888;
}


.gslidecontainer {
  width: 100%;
}

.gslider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  /*background: linear-gradient(to right, #5ff7b5 0%, #fffc00 50%, #ff2064 100%);*/
  background: linear-gradient(to right, #5ff7b5 0%, #fffc00 33%, #fffc00 67%, #ff2064 100%);
  outline: none;
  border-radius: 5px;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.gslider:hover {
  opacity: 1;
}

.gslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #ffffff;
  cursor: pointer;
  border-radius: 10px;
  border-width: 2px;
  border-style: solid;
  border-color: #000000;
}

.gslider::-moz-range-thumb {
/*  width: 20px;
  height: 20px;
  background: #4CAF50;
  cursor: pointer;*/
  appearance: none;
  width: 17px;
  height: 17px;
  background-color: #ffffff;
  cursor: pointer;
  border-radius: 10px;
  border-width: 2px;
  border-style: solid;
  border-color: #888;

}


.collapsible {
  background-color: transparent;
  color: white;
  cursor: pointer;
  padding: 10px 0 10px 0;
  margin:0 25px 0 25px;
  width: 90%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  /*border-radius: 15px 15px 0 0;*/
}

.active, .collapsible:hover {
  /*background-color: #555;*/
  opacity:.5;
}

.collapsible:after {
  content: '\FE40';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\FE3F";
}

.collcontent {
  background-color: transparent;
  color: white;
  /*padding: 10px 0 10px 0;*/
  margin:0 25px 0 25px;
  width: 90%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.bewicollapsible {
  background-color: transparent;
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: fface1;
}

.bewicollcontent {
  background-color: transparent;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  font-family: fface1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}




.factor_description{
  width:400px;
  height:300px;
  float:left;
  background-color:#eef0f3;
  border-radius:25px;
  margin:20px;
  font-size: 15px;
  font-family: fface2;
  padding:20px;
  /*text-align: justify;
  text-justify: inter-word;*/
}

.STBC_factor_description{
  width:auto;
  height:auto;
  float:left;
  background-color:#eef0f3;
  border-radius:25px;
  margin:0;
  font-size: 15px;
  font-family: fface2;
  padding:20px;
  /*text-align: justify;
  text-justify: inter-word;*/
}

.factor_methoden{
  font-size: 15px;
  font-family: fface2;
}

.wirbel_text { position: relative; width:300px; }
.wirbel_text input {  background-color:#eef0f3;border:none;height:30px;width:200px; display:block; border-radius: 20px 0 0 20px;}
.wirbel_text div { position: absolute; top: 0; left: 205px;  background-color:#eef0f3; width: 80px; height:30px; border-radius: 0 20px 20px 0; padding: 5px 10px 5px 10px; }


.bewindex_text { position: relative; width:100%; }
.bewindex_text input {  background-color:#ffffff;border:none;height:40px;width:30%; display:block; border-radius: 20px 0 0 20px;}
.bewindex_text div { position: absolute; top: 0; left: 30%;  background-color:#ffffff; width: 70%; height:40px; border-radius: 0 20px 20px 0; padding:10px 5px 10px 5px; }

.bewindex_c { position: relative; width:100%; box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.2); border-radius: 20px;}
.bewindex_c input {  background-color:#ffffff;border:none;height:40px;width:30%; display:block; border-radius: 20px 0 0 20px; padding:10px 0px 10px 15px;  font-size: 15px; font-family: fface2;}
.bewindex_c div { position: absolute; top: 0; left: 30%;  background-color:#ffffff; width: 70%; height:40px; border-radius: 0 20px 20px 0; padding:10px 5px 10px 5px; }

.schmat_c { position: relative; width:100%; box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.2); border-radius: 20px;}
.schmat_c input {  background-color:#ffffff;border:none;height:40px;width:50%; display:block; border-radius: 20px 0 0 20px; padding:10px 0px 10px 15px;  font-size: 15px; font-family: fface2; text-align: right;}
.schmat_c div { position: absolute; top: 0; left: 50%;  background-color:#ffffff; width: 50%; height:40px; border-radius: 0 20px 20px 0; padding:10px 5px 10px 5px; text-align: left;}

/*
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
*/
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  text-align: left;
}

.dropdown-content a {
  color:  #707274;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

/*.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
*/


.aptooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;*/
}

.aptooltip .aptooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 70%;
  margin-left: 0;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 13px;
}

.aptooltip .aptooltiptext::after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.aptooltip:hover .aptooltiptext {
  visibility: visible;
  opacity: 1;
}





.kundetooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;*/
}

.kundetooltip .kundetooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 80%;
  margin-left: 0;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 13px;
}

.kundetooltip .kundetooltiptext::after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.kundetooltip:hover .kundetooltiptext {
  visibility: visible;
  opacity: 1;
}







.bewitooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;*/
}

.bewitooltip .bewitooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 80%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 14px;
  font-family: fface2;
  padding:5px;
}

.bewitooltip .bewitooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.bewitooltip:hover .bewitooltiptext {
  visibility: visible;
  opacity: 1;
}




.sztooltip {
  position: relative;
  display: inline-block;
}

.sztooltip .sztooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 14px;
  font-family: fface2;
  padding:5px;
}

.sztooltip .sztooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.sztooltip:hover .sztooltiptext {
  visibility: visible;
  opacity: 1;
}




.szelimg:hover {
  animation: shake 0.5s;
  animation-iteration-count: 1/*infinite*/;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.PSP_circle {
  text-align: center;
  float:left;
  border-style: solid; 
  transition: transform .2s;
}
.PSP_circle div {
  opacity: 0;
}

.PSP_circle:hover {
  transform: scale(1.5);
}
.PSP_circle:hover div{
  opacity: 1;
}

.persgroups:hover{
  transform:scale(1.2) translateY(20px);
  transition: transform 0.5s;
  margin-top:100px;
  border-radius:60px;
  box-shadow: 0px 0px 5px 4px #aaaaaa;
  z-index:1;
}