/**
 * General style adjustments
 */

 @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap');

  body{
    font-family: "Red Hat Text", sans-serif;
    }

  .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'Red Hat Text';
  }

 h1, h2, h3 {
    color: #7720AF !important;
   }
  
 h4, h5, h6 {
    color: #7720AF !important;
   }

   h1 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 0px;
   }

   h2 {
    font-size: 24px;
    font-weight: 450;
    margin-bottom: 20px;
    margin-top: 0px;
   }

   h3 {
    font-size: 20px;
    font-weight: 450;
   }

   h4 {
    font-size: 18px;
    font-weight: 400;
   }

   h5 {
    font-size: 18px;
    font-style: italic;
    font-weight: 300;
   }  

  
   .btn-primary {
      padding: 7px;
      text-align: center;
      color: #FFFFFF;
      font-weight: 700;
      text-decoration: none;
      margin: 0;
      background: #CAA8F5;
      border-radius: 5px;
      border-color: #CAA8F5;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
    }
    .btn-primary:hover {
      background: #f2f2f2;
      border-color: #f2f2f2;
    }
    .btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary {
        background: #f2f2f2;
        border-color: #f2f2f2;
    }
    .btn-default {
        background: #CAA8F5;
        border-color:#CAA8F5;
        color:white;
        -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
    }
    .btn-default:hover {
      background: #f2f2f2;
      border-color: #f2f2f2;
    }
    .screen-frame {
        width: 95% !important;
        z-index: -10;
        margin-left: 2%;
    }
    .screen-video, .content-iframe {
        width: 85% !important;
        height: 86% !important;
        margin-left: 7%;
        margin-top: 1.5%;
    }
    
    .login-top {
        position: fixed;
        float: left;
        right: auto;
        left: 5px;
        top: 5px;
        z-index: 100;
        text-align: left;
        background-position: 0 0;
        background-position: top;
        background-size: 7em auto;
        padding-top:80px;
        font-size:1.6rem;
        font-family: "Red Hat Text", sans-serif;
    }
  
    .login-top, .login-top a {
      color: #7720AF;
      padding-left: 5px;
    }

    /* werkte niet
    .login-top__start {
      font: 1.6rem !important;
    } */
    
    .page-step__header__title {font-size:1.6rem;}
    
    .login-top-navigation-wrapper, .page-course__header, .app--layout-new .page-course__header {
        background-color: transparent;
        box-shadow: none;
        height: 100px;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20%;
        position: absolute;
        top:0;
    }

    .login-top-navigation {
      right: 5px !important;
      left: auto;
      position: absolute;
      top: 8px;
    }
    
    .login-top-navigation__go-back {
        background-color: #CAA8F5;
        margin-left:5px;
    }

    /* zelf toegevoegd door veerle 240108 */
    .dropdown-menu {
      float: right;
      text-align: right;
      right: 0;
      left: auto;
    }

    
    .app--layout-new .page-step__header .dropdown-menu li, .login-top-navigation .dropdown-menu li {
        font-size:1.6rem;
        padding:8px;
    }
    
    /* step */
    .app--layout-new .page-step__header, .app--layout-new .page-course__header {
        height: 50px;
        padding: 10px 0;
        background-color: transparent;
        box-shadow: none;
        font-size:1.6rem !important;
        position: relative;
    }
    
    .app--layout-new .page-step__header__close, .app--layout-new .page-step__header__menu, .app--layout-new .page-course__header__close {
        padding: 10px;
    }
    
    #page-step-header-dropdown, .page-step__header__close .btn, .page-course__header__close .btn, .login-top-navigation button {
        font-size: 1.8rem;
    }

    /* zelf toegevoegd door veerle 240108  */
    .app--layout-new .page-step__header__menu {
      left: auto;
      right: 55px;
      float: right;
    }

    /**
     * /General style adjustments
     */


    .ivyContent {
        background:white; 
        padding:5%;
        margin:2% 15%;
    }
    .ivyDocument {
        width:100%; 
        height:100%;
        min-height:850px;
    }
    
    
    /**
     * Step quiz styling
     */
    .step-quiz:before {
      background: transparent url(ivy_bg_quiz.jpg) no-repeat center;
      background-size: cover;
        border: 10px solid rgba(233, 233, 233, 1);
        border-radius: 10px;
    }
    .step-quiz__nav__item {
      width: 18px;
      height: 18px;
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 11px;
      font-weight: bold;
      line-height: 15px;
      text-align: center;
      color: white;
      background: transparent;
      border-color: transparent;
      border-radius: 4px;
    }
    .step-quiz__nav__item--current {
      color: #4ea659;
      background: white;
      border-color: white;
    }
    .step-quiz__content h3 {
      position: relative;
      padding-bottom: 6px;
      color: white;
      font-weight: normal;
    }
    .step-quiz__content h3:after {
      content: "";
      position: absolute;
      left: 12%;
      right: 12%;
      bottom: 0;
      display: block;
      border-bottom: 1px solid white;
    }
    .step-quiz__content .question__content {
      margin-top: 20px;
      font-size: 18px;
      color: white;
    }
    .step-quiz__content .question__answers__answer__content {
      color: white;
      border-radius: 20px;
      border: 1px solid white;
    }
    .step-quiz__content input[type=radio]:checked~.question__answers__answer__content {
      color: #4ea659;
      background: white;
      border-color: white;
    }
    .step-quiz__next,
    .step-quiz__next:hover,
    .step-quiz__next:active {
      position: relative;
      /*padding-left: 30px;*/
      padding-right: 30px;
      margin-top: 20px;
      margin-bottom: 40px;
      font-weight: bold;
      color: white;
      background: transparent;
      border: 1px solid transparent;
    }
    .step-quiz__next:after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      width: 0;
      height: 0;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      border-style: solid;
      border-width: 10px 0 10px 19px;
      border-color: transparent transparent transparent white;
    }
    .step-quiz__next[disabled] {
      color: white;
      background: transparent;
      border: 1px solid transparent;
    }
    .step-quiz.step-quiz--intro,
    .step-quiz.step-quiz--complete,
    .step-quiz.step-quiz--completed {
      padding: 2em 20px;
      min-height: 580px;
    }
    .step-quiz.step-quiz--intro h3,
    .step-quiz.step-quiz--complete h3,
    .step-quiz.step-quiz--completed h3 {
      position: relative;
      padding-bottom: 6px;
      color: white;
      font-weight: normal;
    }
    .step-quiz.step-quiz--intro h3:after,
    .step-quiz.step-quiz--complete h3:after,
    .step-quiz.step-quiz--completed h3:after {
      content: "";
      position: absolute;
      left: 12%;
      right: 12%;
      bottom: 0;
      display: block;
      border-bottom: 1px solid white;
    }
    .step-quiz.step-quiz--intro h3 + p,
    .step-quiz.step-quiz--complete h3 + p,
    .step-quiz.step-quiz--completed h3 + p {
      font-size: 20px;
      font-weight: 500;
      line-height: 1.1em;
      color: #FFFFFF;
    
    }
    .step-quiz.step-quiz--complete h3 + p {
      margin-bottom: 2em;
    }
    .step-quiz.step-quiz--complete .checkbox {
      color: white;
    }
    .step-quiz.step-quiz--intro .btn-primary {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      padding-right: 40px;
      font-weight: bold;
      font-size: 28px;
      color: white;
      background: transparent;
      border: 1px solid transparent;
    }
    .step-quiz.step-quiz--intro .btn-primary:after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      width: 0;
      height: 0;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      border-style: solid;
      border-width: 13px 0 13px 24px;
      border-color: transparent transparent transparent white;
    }
    
    .step-quiz__score {
      margin-top: 2em;
      margin-bottom: 3em;
      color: #FFFFFF;
    }
    
    .step-quiz__completion-message{
    color:white;
    font-size:20px;
    }
    
    /**
     * /Step quiz styling
     */
    
    
    /*Feedback bg*/
    .feedback-modal__body:after {
        background-image: url(windmolens.jpg)}
    
    
    /**
     * Login style
     */
    .page-login:after {
      content: "";
      z-index: -1;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: transparent url(ivy_bg_login.jpg) center/cover no-repeat;
    }
    .page-login__form .btn,
    .page-logout__form .btn,
    .page-password-reset__form .btn {
      display: inline-block;
      width: auto;
      margin: 10px 0px;
      padding-left: 25px;
      padding-right: 25px;
      border-radius: 20px;
    }
    .page-login__content .language-switcher {
      margin-top: 0;
    }
    .page-login__content,
    .page-logout__content,
    .page-password-reset__content {
      background: white;
      width: 370px;
      height: auto;
      text-align: left;
      border-radius: 10px;
      border: 2px solid white;
      box-shadow: 1px 2px 10px rgba(0, 0, 0, .5);
    }
    .page-password-reset__content {
      width: 400px;
    }
    @media screen and (max-width: 420px) {
      .page-password-reset__content {
        width: 370px;
      }
    }
    .page-login__form .form-control,
    .page-password-reset__form .form-control {
      color: #7b7b7b;
      background-color: white;
      box-shadow: none;
    }
    .page-login__content h2,
    .page-logout__content h2,
    .page-password-reset__content h2 {
      margin-bottom: 4em;
      font: 500 14px/1.3em Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
      text-align: left;
      color: #7b7b7b;
    }
    .page-login__content h1,
    .page-logout__content h1,
    .page-password-reset__content h1 {
      margin-bottom: .2em;
      font: 400 8px/1.3em Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
      font-family: 'Asap', sans-serif !important;
      font-size: 20px !important;
      color: #7720AF !important;
      text-align: left;
    }
    .page-login__password-reset-link,
    .page-login__password-reset-link:active,
    .page-login__password-reset-link:focus,
    .page-login__password-reset-link:hover,
    .page-login__register-link,
    .page-login__register-link:active,
    .page-login__register-link:focus,
    .page-login__register-link:hover,
    .page-logout__content a,
    .page-logout__content a:active,
    .page-logout__content a:focus,
    .page-logout__content a:hover,
    .page-password-reset__login-link,
    .page-password-reset__login-link:active,
    .page-password-reset__login-link:focus,
    .page-password-reset__login-link:hover {
      color: #7b7b7b;
    }
    /**
     * /Login style
     */
    
    
    /*Quiz pijl*/
    .pijl {
        width: 20%;
        float: right;
    }
    
    .eon-titel{
        color: #7720AF;
    }
    .panel-default>.panel-heading {
        border-color:#7720AF;
        box-shadow: 0px;
        -webkit-box-shadow: 0px;
    }
    .panel-default{
        border-color:#7720AF;
    }
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
        border-top: 1px solid #7720AF;
    }
    .panel-default>.panel-heading{
            border: 1px solid #7720AF;
    }
    .panel-default>.panel-heading {
        color: #fff;
        background-color: #7720AF;
    }
    /*/Quiz pijl*/
   
    /*Widgets
    .page-course-index__content:before {
        content: '';
        width: 100%;
        margin:auto;
        background-color: #29abe2;
        color: white;
        padding: 20px;
        border-radius: 10px;
        margin-top: 1vh;
        text-align: center;
        display:block;
        font-size: 145%;
    }
    
    /*Widgets*/
  
    /*test voor extra ruimte in header boven 'tiles'
    .page-course-index__content:before {
        margin-top: 100px;
    }
  
    */


   /* zelf toegevoegd door veer 240801 */
    .page-course-index__content {
      padding-top: 150px;
      padding-bottom: 15rem;
    }  

    .page-course-index__content__teasers {
      grid-template-columns: 1fr 1fr 1fr 1fr;
     /* padding-bottom: 150px;*/
    }

    .page-course__content__teasers {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .app-content__content.container {
      padding-bottom: 15rem;
    }
  
  /* make keyframes that tell the start state and the end state of our object */
    @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
    @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
    
    .fade-in {
      opacity:0;  /* make things invisible upon start */
      -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
      -moz-animation:fadeIn ease-in 1;
      animation:fadeIn ease-in 1;
    
      -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
      -moz-animation-fill-mode:forwards;
      animation-fill-mode:forwards;
    
      -webkit-animation-duration:1s;
      -moz-animation-duration:1s;
      animation-duration:1s;
    }
    
    .fade-in.one {
      -webkit-animation-delay: 0.7s;
      -moz-animation-delay: 0.7s;
      animation-delay: 0.7s;
    }
    
    .fade-in.two {
      -webkit-animation-delay: 1.2s;
      -moz-animation-delay:1.2s;
      animation-delay: 1.2s;
    }
    
    .fade-in.three {
      -webkit-animation-delay: 1.6s;
      -moz-animation-delay: 1.6s;
      animation-delay: 1.6s;
    }
    
    /*---make a basic box ---*/
    .box{
      width: 200px;
      height: 200px;
      position: relative;
      margin: 10px;
      float: left;
      border: 1px solid #333;
      background: #999;
    
    }
    .js-header {
          -webkit-animation-name: greenPulse;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
        background-color: #f4180a;
        border: none;
        border-radius: 0px;
        color: #FFFFFF;
        display: inline-block;
        border-radius:12px;
        margin-top:20px;
        width: 100%;
        text-align: center;
    }
    .js-container {
        background-color: #FFFFFF;
    height: 100%;
        padding-bottom: 20px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    
    @-webkit-keyframes greenPulse {
      from { background-color: #f4180a; -webkit-box-shadow: 0 0 9px #f4180a; }
      50% { background-color: #f4180a; -webkit-box-shadow: 0 0 18px #ff7575; }
      to { background-color: #f4180a; -webkit-box-shadow: 0 0 9px #f4180a; }
    }
    
    
    .txt-white{
        color:#ffffff;
        margin-top: 20px;
    }
    .btn-info.active, .btn-info.focus, .btn-info:active, .btn-info:focus, .btn-info:hover, .open>.dropdown-toggle.btn-info {
        background-color:#e2e2e2!important;
        border-color:black!important;
        color:#6A6A6A!important;
    }
    
    
    .fullscreen-bg {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
    
    }
    .fullscreen-bg-video {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    
    }
    
    .app--layout-new .page-step__content {
        max-width: 1600px;
    }
    
    @media (max-width: 1690px) {
        .app--layout-new .page-step__content {
            padding-left: 6%;
            padding-right: 5%;
        }
    }
    
    .app--layout-new .page-step__content {
        -webkit-transition: 0;
        transition: 0;
    }
    
    .frame{
        width:95% !important;
        z-index:-10;
        margin-left:2%;
    }
    
    .film{
        width:90% !important;
        height:90% !important;
        margin-left:4.6%;
        margin-top:1.6%;
    }
    .stand{
        height:200px;
        width:150px;
        width:100%;
    }
   

 /* toegevoegd_veerle */
    
.button-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.button-container button {
    padding: 10px 20px; /* Increased padding for larger buttons */
    margin: 0px 10px; /* Increased margin on extra space between the buttons */
    background-color: #7720AF !important; /* Purple background */
    color: white; /* White text */
    border: none;
    border-radius: 8px; /* Rounded corners */
    cursor: pointer;
    font-size: 16px; /* Larger font size */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Added shadow for depth */
    transition: 0.3s; /* Smooth transition for hover effect */
}

.button-container button:hover {
    background-color: #CAA8F5 !important; /* Different shade on hover */
    box-shadow: 0 6px 12px 0 rgba(0,0,0,0.3); /* Larger shadow on hover */
    transform: translateY(-2px); /* Slight raise effect on hover */
}

button, input, select, textarea {
    font-family: "Red Hat Text", sans-serif, !important;
}

.intro-text {
    background-color: #fcf8ff; 
    color: #7720AF;
    border:  1px solid #7720AF;
    border-radius: 10px;
    padding: 30px;
    margin: 3% 0%;
    text-align: center;
    transition: transform 0.3s ease; /* Voeg een transitie toe aan het 'transform' eigenschap */
}

.intro-text:hover {
  transform: scale(1.1); /* Schaal de tekst op wanneer de muis eroverheen gaat */
}

section {
  max-width: 1000px;
  margin: 10px auto;
  background-color: #fcf8ff; 
  border: 1px solid #7720AF;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 20px;
}
/* tm hier */