/* Je CSS stijlen hier... */

.user-form-container-cap-basic {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
    background-color: #ffffff;
}

.user-form-container-cap-basic h2 {
    text-align: center;
    margin-bottom: 20px;
}

.user-form-container-cap-basic .input-group {
    margin-bottom: 15px;
}

.user-form-container-cap-basic .input-group label {
    display: block;
    margin-bottom: 5px;
}

.user-form-container-cap-basic .input-group input[type="text"],
.user-form-container-cap-basic .input-group input[type="email"],
.user-form-container-cap-basic .input-group input[type="date"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.user-form-container-cap-basic .input-group input[type="checkbox"] {
    margin-right: 10px;
}

.user-form-container-cap-basic button {
    width: 100%;
    padding: 10px 15px;
    background-color: #007BFF;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.user-form-container-cap-basic button:hover {
    background-color: #0056b3;
}

.user-form-container-cap-basic  .input-group input[type="checkbox"] {
      display: inline-block;
      vertical-align: middle;  /* voor verticale uitlijning met het label */
      margin-right: 10px;      /* optioneel, voor wat ruimte tussen het vinkje en de tekst */
      float:left;
  }


.user-form-container-cap-basic  .input-group input[type="checkbox"] {
  /*  display: inline-block;*/
    vertical-align: middle;  /* voor verticale uitlijning met het label */
    margin-right: 10px;      /* optioneel, voor wat ruimte tussen het vinkje en de tekst */
}

input#registrationToggle {
    display: none;
}

.user-form-container-cap-basic .input-group label {

    vertical-align: middle;  /* voor verticale uitlijning met de checkbox */
}


.user-form-container-cap-basic input[type="checkbox"] {
    display: none; /* Verbergt de standaard checkbox */
}

.user-form-container-cap-basic .slider {
    width: 60px;
    height: 34px;
    position: relative;
    display: inline-block;
    background-color: gray;
    border-radius: 34px;
    cursor: pointer;
    margin-left: 10px;
    vertical-align: middle;
}

.user-form-container-cap-basic .slider:before {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

.user-form-container-cap-basic input#dob {
    
    width: 96%;
}

.user-form-container-cap-basic input[type="checkbox"]:checked + .slider {
    background-color: #2196F3; /* Blauwe kleur wanneer aangevinkt */
}

.user-form-container-cap-basic input[type="checkbox"]:checked + .slider:before {
    transform: translateX(26px); /* Zorgt voor de verschuivende animatie */
}
.user-form-container-cap-basic .radio-button-wrapper {
    
    display: flex;
    align-items: center;
    margin: 0;
    position: relative;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
    width: 100%;           /* voorbeeldbreedte, pas aan naar wens */
    text-align: left;     /* centreert de tekst binnen de knop */
    color:#000;
    min-height: 20px;
    margin-bottom: 5px;
    padding-top: 2px;
    border-radius: 5px;
    background: #dad6d6;
}

.user-form-container-cap-basic .problemlist.radio-button-wrapper input[type="radio"] {
    position: absolute;
    left: -9999px;  /* verberg de standaard radioknop */
}

.user-form-container-cap-basic .radio-button-wrapper label {
    background-color: rgb(218, 214, 214);
    font-size: 16px;
    cursor: pointer;
    color: rgb(0, 0, 0);
    width: 100%;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 0px;
}

.user-form-container-cap-basic .radio-button-wrapper input[type="radio"]:checked + label {
    background-color: blue; /* Kleur wanneer geselecteerd */
    color: white; /* Tekstkleur in geselecteerde staat */
}


.user-form-container-cap-basic .radio-button-wrapper input[type="radio"]:checked + label + .user-form-container-cap-basic .radio-button-wrapper {
    background-color: blue; /* Kleur wanneer geselecteerd */
    color: white; /* Tekstkleur in geselecteerde staat */
}


.user-form-container-cap-basic .radio-button-wrapper input[type="radio"]:checked + label + .user-form-container-cap-basic .radio-button-wrapper,
.user-form-container-cap-basic .radio-button-wrapper input[type="radio"]:checked + .user-form-container-cap-basic .radio-button-wrapper {
    background-color: blue; /* Kleur wanneer geselecteerd */
}


.user-form-container-cap-basic .problem-info-icon {
    cursor: pointer;
    background-color: grey;
    border-radius: 50%;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 5px;
    position: absolute;
    /* float: left; */
    right: 10px;

}

.user-form-container-cap-basic .problem-info-icon:hover {
    background-color: darkgrey;
}

.user-form-container-cap-basic .problem-description {
    display: none;
}

button.next-question {
   /* width: 85%;*/

}


h3.questions-cap-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 30px;
}


/* Voeg deze CSS-stijl toe aan jouw stijlblad */
.user-form-container-cap-basic .problem-description {
    display: none;
    position: absolute;
 /*   top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    width: 300px; /* Pas de breedte aan naar jouw wens */
    height: auto; /* Laat de hoogte automatisch aanpassen aan de inhoud */
    overflow-y: auto; /* Voeg een schuifbalk toe als de inhoud te hoog wordt */
}

/* Stijl voor de knop om de pop-up te sluiten */
.user-form-container-cap-basic .close-popup {
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    color: #999;
    font-size: 16px;
}
.user-form-container-cap-basic button.rotating-border-button {
    padding: 10px 20px;
    border: 3px solid transparent;
    border-radius: 50%;
    background-color: red;
    color: white;
    font-size: 10px !important;
    outline: none;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
    width: 70px;
    height: 70px;
    font-size: 10px;
    position: relative;
    margin-top: 20px;
    margin-bottom: -50px;
   /* top: 20%;*/
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 10px;
    white-space: nowrap;
}

.page-template-page-fullwidth-utilewebsites-capbasic-php .row{
  
        margin-left: 0px !important;
    
}

input#loginPassword, input#registerPassword {
    width: 206px;
    display: inline-block;
    height: 24px;
    padding: 4px 6px !important;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 24px;
    color: #555;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    vertical-align: middle;
    box-sizing: unset;
    min-height: 0px;
}

.privacy-container {
    margin-top: 20px; /* Voegt ruimte toe boven de container */
    padding: 15px; /* Voegt binnenruimte toe */
    background-color: #f5f5f5; /* Lichte achtergrondkleur */
    border: 1px solid #ddd; /* Subtiele rand */
    border-radius: 5px; /* Licht afgeronde hoeken */
    font-size: 0.95em; /* Iets kleinere tekstgrootte */
    line-height: 1.4; /* Ruimte tussen de regels voor betere leesbaarheid */
    color: #333; /* Donkergrijze tekst voor contrast */
}

.privacy-container h4 {
    margin-top: 0; /* Verwijdert extra ruimte aan de bovenkant van de titel */
    color: #222; /* Iets donkerder voor de titel */
}

.privacy-container p {
    margin-bottom: 10px; /* Voegt ruimte toe tussen paragrafen */
}

/* Optioneel: Stijlen voor links binnen de privacy-container */
.privacy-container .link-style {
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
}

.separator {
    margin: 0 5px; /* Kleine ruimte rond de scheidingsteken */
    font-size: 1em; /* Zorg dat het scheidingsteken dezelfde grootte heeft als de tekst */
}

button#standaloneButton {
    margin-bottom: 4px;
}

.user-form-container-cap-basic h2.headcapquestions {
    text-align: left;
}

img.capbasiclogo {
    width: 100px;
    height: 100px;
}

.rapportview {
    text-align: left;
}

.rapportview h2 {
    text-align: left;
    font-size: 20px !important;
}

#loadline {
    width: 0;
    height: 4px; /* Hoogte van de laadbalk */
    background: blue; /* Kleur van de laadbalk */

    transition: width 4s ease; /* Duur en type van de animatie */
}

/* Voeg een klasse toe die de laadbalk animeert */
.activeloadline {
    width: 100% !important; /* Volledige breedte bij activering */
}

.rapportview h1 {
    font-size: 30px;
}
  /* Roterende rand */
  .user-form-container-cap-basic button.rotating-border-button::before {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    bottom: -3px;
    left: -3px;
    border: 10px solid transparent;
    border-top-color: blue; /* Kleur van de roterende rand */
    border-radius: 50%;
    animation: rotate 2s linear infinite; /* Animatie die de rand laat draaien */
    width: 70px;
    height: 70px;
    font-size: 10px;
  }
  
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  /* Hover effect */
  .user-form-container-cap-basic button.rotating-border-button:hover {
    background-color: darkred;
  }
  .motopress-wrapper.content-holder.clearfix.capbasicapp {
    background: #000;
    padding-top: 40px;
    padding-bottom: 40px;
}

.ui-dialog.ui-corner-all {
    border-radius: 5%;
}

.versioncapshow {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.load-dialog, .load-dialog .ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix {
    background: #000;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.load-dialog .ui-dialog-titlebar {
    border-bottom: 5px solid #dcdcdd;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.load-dialog .ui-dialog-titlebar {
    background: #000;
    height: 36px;
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    padding: 0 36px 0 16px;
    position: relative; /* Voeg deze regel toe voor positionering van de pseudo-elementen */
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.load-dialog .ui-dialog-content {
   color:#fff;
    text-align: center;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.load-dialog .ui-dialog-titlebar::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 5px;
    top: 36px;
    background: blue; /* Kleur van de bewegende balk */
    animation: moveBorder 2s linear infinite; /* Definieer de animatie */
}

img.loaderlogo {
    width: 100px;
}

.questionsanalyser {
    background: #e2e7de;
    padding: 10px;
    color: #000;
    border-radius: 10px;
    margin-bottom: 10px;
}

.questionsanalyser .showselectquestions:checked + label {
    color: white;
  }
  
  .questionsanalyser.selected-question {
    background: blue;
}
  
 .showselectquestions input[type="checkbox"] {
    display: none;
  }

  .questionsanalyser .showselectquestions + label::before {
    display: none;

  }

  button#privacyButton {
    max-width: 150px;
    font-size: 10px;
    padding: 5px;
    margin-bottom: 20px;
}
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.cdatacap-dialog-class {
    max-width: 600px;
    width: auto !important;
    border-radius: 5px;
    max-height: 300px; /* Zorgt dat de inhoud niet meer dan 300px hoog is */
    overflow-y: auto; /* Voegt een verticale scrollbar toe indien nodig */
    font-size: 11px;
}
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.releasenotecap-dialog-class {
    max-width: 600px;
    width: auto !important;
    border-radius: 5px;
    max-height: 300px; /* Zorgt dat de inhoud niet meer dan 300px hoog is */
    overflow-y: auto; /* Voegt een verticale scrollbar toe indien nodig */
    font-size: 11px;
}

a#releasenotes {
    text-decoration: underline;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.cdatacap-dialog-class h2 {
    font-size: 16px !important;
    padding: 0px;
    line-height: 15px;
    margin: 0 0 10px 0;
}
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.cdatacap-dialog-class h3{

    font-size: 14px;
    padding: 0px;
    line-height: 15px;
    margin: 0 0 10px 0;
    
}


.user-info-container {
   /* margin: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;*/
}

.user-info-container .user-info h3 {
    margin-top: 0;
}

.user-info-container .tabs {
    list-style-type: none;
    padding: 0;
    display: flex;
    margin: 0;
    border-bottom: 1px solid #ddd;
}

.user-info-container .tabs li {
    margin-right: 10px;
}

.user-info-container .tabs li a {
    padding: 10px;
    display: block;
    text-decoration: none;
    color: #0073aa;
    border: 1px solid #ddd;
    border-bottom: none;
    background-color: #f1f1f1;
}

.user-info-container .tabs li a:hover {
    background-color: #e9e9e9;
}
.user-info-container .lookslikea{
    padding: 10px;
    display: block;
    text-decoration: none;
    color: #0073aa;
    border: 1px solid #ddd;
    border-bottom: none;
    background-color: #f1f1f1;
}


.user-info-container .capaccount li.active a {
    background-color: #0073aa; /* Achtergrondkleur voor actieve tab */
    color: white; /* Tekstkleur voor actieve tab */
}

.user-info-container .capaccount li a {
    background-color: #f1f1f1; /* Achtergrondkleur voor niet-actieve tabs */
    color: #333; /* Tekstkleur voor niet-actieve tabs */
}




@keyframes moveBorder {
    0% {
        width: 0;
        left: 0;
    }
    50% {
        width: 100%;
        left: 0;
    }
    100% {
        width: 0;
        left: 100%;
    }
}