.fieten-tankpas * {
  box-sizing: border-box;
}

.fieten-tankpas {
  margin:30px 0;
  width:100%;
}
.fieten-tankpas h1 {
  color:#203569;
  text-align: center;
  text-transform: uppercase;
  padding:15px 0;
  font-size:26px;
}
.fieten-tankpas .step-description {
  text-align: center;
  padding:30px 0;
  color:#203569;
}
.fieten-tankpas .step-description h3 {
  font-size: 21px;
}

.fieten-tankpas #search-options {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.fieten-tankpas #search-options .btn-default {
  border-radius: 6px;
  width: max-content;
}

.fieten-tankpas input,
.fieten-tankpas textarea {
    font-size: 1em;
    line-height: 1.5em;
    font-weight: 300;
    padding: 0.5rem 1rem;
    border-radius: 0.438rem;
    border: 1px solid #404040;
}
.info-alert {
  font-size:12px;
  color:#777;
  padding:5px 0;
  font-family: 'arial',sans-serif;
}

.info-alert a{
  color: #ff0;
}
@media only screen and (max-width: 580px) {
  .fieten-tankpas .step-description {
    padding:15px 0;
  }
}
.fieten-tankpas .no-padding {
   padding: 0 !important;
   margin: 0 !important;
}
.fieten-tankpas .no-gutters {
  padding: 0 !important;
  margin: 0 !important;
}
.fieten-tankpas .btn-secondary {
  background-color: #ddd;
  border-color: #ddd;
  color:#777;
}
.fieten-tankpas .btn-secondary:hover {
  background-color: #eee;
  border-color: #ddd;
}
.fieten-tankpas .btn i {
  margin:0 5px;
}
/********************************************************* STEPS */
.steps-wrapper {
  position: relative;
}
.steps-wrapper .steps-line {
  width:100%;
  height:3px;
  background-color:#d2d2d2;
  position:absolute;
  top:50%;
  left:0;
   -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.steps-wrapper .steps {
  width:50%;
  margin:0 auto;
  text-align: center;
}
@media only screen and (max-width: 991px) {
  .steps-wrapper .steps {
    width:80%;
  }
}

.steps-wrapper .steps .stepholder {
  display:inline-block;
  width:14%;
  padding-top:14%;
  margin:0 2%;
  position: relative;
}

.steps-wrapper .steps .stepholder .step {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:50%;
  border:4px solid #d2d2d2;
  box-sizing: border-box;
  background-color: #f9f9f9;
}
.steps-wrapper .steps .stepholder .step span {
  display:block;
  position: relative;
  margin:10%;
  width:80%;
  height:80%;
  border-radius:50%;
  border:3px solid #f9f9f9;

}
.steps-wrapper .steps .stepholder .step .number {

  font-weight:700;
  color:#d2d2d2;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  font-size: calc(1vw + 1vh + .5vmin);
   -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
/* step done */
.steps-wrapper .steps .stepholder .step.done {
  border-color:#2a4483;
  cursor: pointer;
}
.steps-wrapper .steps .stepholder .step.done span {
  border-color:#f9f9f9;
}
.steps-wrapper .steps .stepholder .step.done .number {
  color:#2a4483
}
/* step active */
.steps-wrapper .steps .stepholder .step.active {
  border-color:#be4426;
}
.steps-wrapper .steps .stepholder .step.active span {
  border-color:#2a4483;
}
.steps-wrapper .steps .stepholder .step.active .number {
  color:#be4426
}

@media only screen and (max-width: 580px) {
  .steps-wrapper .steps {
    width:100%;
  }
  .steps-wrapper .steps .stepholder {
    margin:0 1.5%;
  }
  .steps-wrapper .steps .stepholder .step {
    border-width:3px;
  }
  .steps-wrapper .steps .stepholder .step span {
    margin:5%;
    width:90%;
    height:90%;
    border-width:2px;
  }
}
@media only screen and (max-width: 400px) {
  /*fix*/
  .ws-header-top-right {
    height:48px;
  }
  .steps-wrapper .steps .stepholder .step .number {
      font-size: calc(1.3vw + 1.3vh + .7vmin);
  }
}
/********************************************************* RESULTS step 01 */
.result-line {
  width:100%;
  height:3px;
  margin:80px 0 15px 0;
  background-color: #d2d2d2;
  position: relative;
}
.result-line span {
  width:25px;
  height:25px;
  background-color: #fff;
  text-align:center;
  position:absolute;
  top:-12px;
  left:50%;
   -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%) rotate(-45deg);
    border-left:3px solid #d2d2d2;
    border-bottom:3px solid #d2d2d2;
    border-top:3px solid #fff;
    border-right:3px solid #fff;

}
/******************************** Company cards */
.results{
  display: none;
}

   .results .company-card {
  display:block;
  width:100%;
  padding:30px;
  background-color:#f2f2f2;
  border:1px solid #ddd;
  border-radius: 4px;
  font-size:1em;
  margin-bottom:30px;
  font-family: 'arial',sans-serif;
  cursor: pointer;
}

.results .company-card h4 {
  line-height:19px;
  height: 40px;
  overflow:hidden;
  font-size: 16px;
  font-style: normal;
  font-family: 'arial',sans-serif;
  margin:0;
  padding:0;
  color:#555;
}
.results .company-card p {
  font-size: 14px;
  color:#555;
}
/**/
.results .company-card:hover {
  text-decoration: none;
  background-color: #5cb85c;
  border:1px solid #4cae4c;
  color:#fff;
}
.results .company-card:hover h4,
.results .company-card:hover p {
  color:#fff;
}
@media only screen and (max-width: 580px) {
  .result-line {
    margin:30px 0 10px;
  }
  .results .company-card {
    margin-bottom:15px;
    padding:15px;
  }
}
/********************************************************* COMPANY naw step 02 */

.fieten-tankpas .company-naw {
  width:100%;
  padding:30px;
  background-color:#f2f2f2;
  border:1px solid #ddd;
  border-radius: 4px;
  margin-bottom:30px;
  color:#2a4483;
}
.fieten-tankpas .company-naw h2 {
  font-size: 20px;
  font-family: 'arial',sans-serif;
  margin:0 0 30px 0;
  padding:0 0 15px 0;
  border-bottom:1px solid #ddd;
  color:#777;
}
.fieten-tankpas .form-group {

}
.fieten-tankpas .form-group.row {

}
.fieten-tankpas form .row p {
  font-size: 1.2em;
  font-weight: 300;
  margin: 0;
  padding-top: 7px;
}
@media screen and (max-width: 768px) {
  .fieten-tankpas form .row p {
    padding-top: 10px;
  }
}

.fieten-tankpas .banken .bank {
  border:1px solid #ccc;
  background-color:#f6f6f6;
  padding:7px 7px 7px 28px;
  border-radius:4px;
  margin-bottom:4px;
  margin-left:0;
  margin-right: 5px;
  width: 40%;
}
.fieten-tankpas .banken .bank img {
  margin:-2px 4px;
}
/********************************************************* PASSES step 03 */

.fieten-tankpas .pass {
  background-color:#f2f2f2;
  border:2px solid #2a4483;
  border-radius:4px;
  margin-bottom:30px;
  position: relative;
}
.fieten-tankpas .pass .pass-number {
  background-color:#2a4483;
  position: static;
}
.fieten-tankpas .pass .pass-number .number {
  width:16.66%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  background-color:#2a4483;
  color: #ffffff;
  text-align: center;
  font-size:20px;
  font-weight:700;
}
.fieten-tankpas .pass .pass-number .number span {
  display:block;
  position:absolute;
  top:50%;
  left:50%;
   -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
@media only screen and (max-width: 991px) {
  .fieten-tankpas .pass .pass-number .number {
    position: static;
    width:auto;
    height:auto;
    top:auto;
    left:auto;
    text-align: left;
  }
  .fieten-tankpas .pass .pass-number {
    padding:15px !important;
  }
  .fieten-tankpas .pass .pass-number .number span {
    display:inline;
    position:static;
    top:auto;
    left:auto;
     -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
      transform: none;
  }
}
.fieten-tankpas .pass .close {
  position: absolute;
  right:8px;
  top:8px;
  font-size:18px;
  z-index: 2;
}
.fieten-tankpas .pass .pass-content .content::after {
  content:"";
  clear:both;
  display:block;
  width:100%;
}
.fieten-tankpas .pass .pass-content .content {
  padding:5px 5px 15px 5px;
}
.fieten-tankpas form label {
  color:#2a4483;
  font-size:20px;
  font-weight: 400;
  padding-top:10px;
}
.fieten-tankpas form label span {
  padding-left:8px;
}
.fieten-tankpas .options {
  margin-top:10px;
}
.fieten-tankpas .options .option {
  border:1px solid #ccc;
  background-color:#f6f6f6;
  padding:7px 7px 7px 27px;
  border-radius:4px;
  margin-bottom:4px;
  margin-left:0px;
  font-size:16px;
  color:#555;
}
@media only screen and (max-width: 580px) {
  .fieten-tankpas .options .option {
    width:calc(50% - 8px);
  }
}
@media only screen and (max-width: 380px) {
  .fieten-tankpas .options .option {
    width:100%;
  }
}

.fieten-tankpas .btn-secondary.extra-pass {
  background-color: #2a4483;
  border-color: #2a4483;
  color: #fff;
  margin: 0px 20% 30px 20%;
  width: 60%;
}
.fieten-tankpas .btn-secondary.extra-pass:hover {
  opacity: 0.85;
  color: #fff;
}
.fieten-tankpas .btn-secondary.extra-pass:focus {
  color: #fff;
  outline: 0;
}

/****** modal ****/
.fieten-tankpas .modal {
  z-index: 99991;
}

.fieten-tankpas .modal .modal-dialog h3 {
  margin-top:0;
  padding-top:0;
  color:#2a4483;
  font-size:26px;
  text-transform: uppercase;
}
.fieten-tankpas .modal .modal-dialog h3 small {
  text-transform:none;
}
.fieten-tankpas .modal .modal-dialog table {
  color:#2a4483;
}
.fieten-tankpas .modal .modal-dialog th {
  font-weight:700;
  color:#2a4483;
  border-top:0px;
}
.fieten-tankpas .modal .modal-dialog th span {
  display:block;
}
/********************************************************* DATACHECK step 04 */

.fieten-tankpas .data.company-naw {
  font-size: 0.9em;
}
.fieten-tankpas .data.pass {

}
.fieten-tankpas .data.pass h3 {
    background-color:#ddd;
    margin:0;
    padding:8px 15px;
    color:#555;
    font-size:1.3em;
}
.fieten-tankpas .data.pass .content {
    padding:15px;
    color:#2a4483;
    font-size:20px;
}
.fieten-tankpas .data.pass .content .row {
  padding-bottom:4px;
  margin-bottom:4px;
}
.fieten-tankpas .data.pass .content ul {
  padding:0;
  margin:0;

}
.fieten-tankpas .data.pass .content ul li {
  color:#2a4483;
  font-size:16px;
  padding:0;
  margin:0;
}
.fieten-tankpas .data.pass .content ul li:before {
font-size: 1em;
color:#2a4483;
padding-right: 1.1rem;

}
.fieten-tankpas .line {
  width:100%;
  height:3px;
  margin:30px 0 15px 0;
  background-color: #d2d2d2;
  position: relative;
}

/*** loader ***/
.loader {
  display: none;
  text-align: center;
  font-size: 60px;
  width: 100%;
  position: relative;
}

.loader-spinning {
  margin-top: 100px;
}

.field-error{
  border: solid red 1px !important;
}

/*** for the input fields and buttons ***/
input:focus{
  outline-style:none !important;
  box-shadow:none !important;
  border-color:black !important;
}

.email{
  word-break: break-all;
}

.alert-error{
  height: auto;
  font-size: 15px;
  padding: 5px !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/*** thanks page ***/
.thank-container{
  min-height: 700px;
  margin-top: 30px;
  width: 100%;
  text-align: center;
}

.thank-container .fa-check{
  font-size: 200px;
  color: #47982a;
}

.thank-container p{
  margin-top: 30px;
}
.back-to-homepage{
  width: 100%;
  margin-top: 50px
}
.avlink{
  color: #f00;
}