.grecaptcha-badge {
    margin-bottom: 140px;
  }
  
  .error {
    margin-top: .25rem;
    font-size: .875rem;
    color: #dc3545; 
  }
  .hidden {
    display:none;
  }
  .link {
    color: #00ADC3
  }
  .exam-image {
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
  
  .select-eq-height {
    height: 50px;
  }
  
  .noselect {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }

.overview-buttons .btn{
  margin-left: 2px;
  resize: none;
}

.overview-buttons .btn:last-child,
.overview-buttons .btn:first-child{
  margin:0;
}
@media (max-width: 575px){
  .overview-buttons{
      flex-direction: column !important;
  }
  
  .overview-buttons .btn{
    margin-left: 0 !important;
    margin-top: 8px !important;
  }
}


/* sector company overview buttons style small screens  */
@media (max-width: 575.98px) {
  .overview-buttons .btn{
    width: 100%;
    margin-left: 0;
  }
  select.filter-groups-dropdown{
    width: 100%;
  }
}

.alert.alert-success button.close span{
  display:none;
} 


  .dataTables_filter label {
    float:left;
  }

  .dataTables_filter input[type=search] {
    height: 48px;
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    user-select: text;
    cursor: auto;
    padding: 5px 15px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0px !important;
  }
  
  .internal-link {
    text-decoration: underline;
  }
  
  .internal-link:hover {
    text-decoration: underline;
    color: black;
  }
  
  .search {
    height: 48px;
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    user-select: text;
    cursor: auto;
    padding: 5px 15px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0px !important;
  }
  
  .inner_link {
    color: black !important; 
    text-decoration: underline;
  }
  
  .inner_link:hover {
    color: black !important; 
    text-decoration: underline;
  }
  
  .table tbody tr td:last-child {
    white-space: nowrap;
  }
  
  .table tbody tr td:last-child a {
    margin-right: 15px;
  }
  
  .table .form-check-input {
    margin-left: 0px;
  }
  
  .dataTables_wrapper .dataTables_info {
    clear: both;
    float: left;
    padding-top: 0.755em;
  }
  
  .module_group > .error {
    margin-top: 0px !important;
    display: block !important;
  }
  
  a.disabled {
    pointer-events: none !important;
    cursor: default;
  }
  
  .form-mark {
    display: inline-block; 
  }
  
  /* CSS VOOR READSPEAK BUTTON
  .rsbtn ~ * {
    visibility: hidden;
    z-index: -1;
    position: absolute;
  }
  
  .rsbtn {
    margin: 0;
    height: 27px;
    display: inline-block;
    padding: 0;
    width: 35px !important;
  }
  
  .rsbtn a.rsbtn_play {
    font-size: 32px;
    color: #ccc;
    outline:none;
  }
  
  .rsbtn a.rsbtn_play:hover {
    color: #333;
  }*/
  
  
  .main-pointers p {
    width:100%; 
  }
  
  .cover {
     height: 380px; 
  }
  
  .btn-custom-disabled {
    pointer-events: none;
    
  }
  
  .modal-dialog {
      margin: 0 auto;
      max-height: 90vh;
      overflow-y: scroll;
  }
  
  _:-ms-fullscreen, :root .modal-content{
    left:0;
  }
  
  @media all and (min-width:768px){
    .fade.modal > .modal-dialog, .show.modal > .modal-dialog{position:relative}
    .modal.fade>.modal-dialog, .modal.show>.modal-dialog{
      position:fixed;
      width: 100vw;
      transform: translateY(-50%)
    }
  }
  
  @media (max-width: 768px) {
    .dataTables_wrapper .dataTables_info {
      width: 100%;
      margin-bottom: 20px;
    }
    .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
      text-align: left;
    }
    .change_group {
      margin-top: 20px;
    }
    .button_row {
      flex-direction: column;
    }
    .responsive-button {
      margin-top: .5rem !important;
      margin-left: 0px !important;
      width: 100% !important;
    }
  }
  
  @media (max-width: 992px) {
      .cover {
        height: auto;
      }
  }
  
  .input-group-btn:not(:first-child)>.btn:active, .input-group-btn:not(:first-child)>.btn:focus, .input-group-btn:not(:first-child)>.btn:hover {
    box-shadow: none;
    cursor: auto;
  }
  
  #footer {
    position: absolute;
    width: 100%;
    bottom: 0;
  }
  input[type=radio].wrong:checked+label {
    border: none;
  }
  input[type=radio].wrong:checked+label>img {
    outline: 3px solid #D0021B;
  }
  input[type=radio].correct:checked+label {
    border: none;
  }
  input[type=radio].correct:checked+label>img {
    outline: 3px solid #42af49;
  }
  button:focus {
    outline: none;
  }
  .video-wrapper {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
  
  @media (min-width: 768px) {
    .carousel-item {
      min-height: 1000px;
    }
  }
  
  .hero a {
    text-decoration: underline;
  }
  #download-anchor {
    text-decoration: none;
  }
  
  .dataTables_wrapper {
    margin: 45px 10px;
  }
  
  .dataTables_filter {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .dataTables_length {
    float: right !important;
    padding-top: 20px;
  }
  
  .dataTables_length select {
    display: inline-block; 
  }
  
  .dataTables_filter {
    width: 50%;
    float: left !important;
  }
  .dt-buttons {
    float: right !important;
    text-align: right;
  }
  .fixed-top.np+div {
    margin-top: 226px;
  }
  .form-check-input:only-child {
    position: static;
  }
  .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    background-color: #F06600;
  }

.nogroup-select {
  white-space: nowrap;
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-top: 0 !important;
  padding: 0 !important;
  margin-right: 2px;
}

.nogroup-select:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.nogroup-select input:not(:checked) + .checkmark {
  border: 2px solid #FF732E;
}

.nogroup-select input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.nogroup-select .checkmark {
  padding: 11px 23px 11px 23px;
  height: 100%;
  z-index: -1;
  width: 100%;
  display: block;
  background: #FF732E;
  color: #fff;
  margin-right: 0;
  text-align: center;
}

.nogroup-select input:checked ~ .checkmark {
  background-color: white;
  border: 2px solid #FF732E;
  color: black;
  padding: 11px 23px 11px 23px;
  resize: none;
}

/* Grey overlay on hover */
.nogroup-select:hover .checkmark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.10); /* Grey overlay color */
  opacity: 0; /* Initially invisible */
  transition: opacity 0.3s ease; /* Smooth transition for opacity */
}

.nogroup-select:hover input:checked ~ .checkmark::before {
  opacity: 0.7; /* Make the overlay visible when checked and on hover */
}

  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }
  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    width: 100%;
    height: 100%;                     
  }
  
  .selection-border-white {
    border-width: 3px!important; 
    border-color: white !important
  }
  
  .selection-border-primary {
    border-width: 3px!important; 
    border-color: #FF732E !important
  }
  
  .image-icon-bottom-left {
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 50%;
    background-color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0;
    text-shadow: 0 0 2px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .2);
    -webkit-transition: background .3s;
    transition: background .3s;
    font-size: 1.8rem;
  }
  
  .row.equal-cols {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .row.equal-cols:before,
  .row.equal-cols:after {
    display: block;
  }
  
  .row.equal-cols > [class*='col-'] {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  
  .row.equal-cols > [class*='col-'] > * {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto; 
  }
  
  .btn-to-top{
        display: none;
      	position: fixed;
        right: 1%;
        bottom: 30%;
        z-index: 1000;
  }
  
  .graduation-button {
   margin-top: 28px;
  }
  
  .graduation-button, .gratuated-button{
    margin-right: 5px;
  }
  
  @media only screen and (max-width: 767px) {
    .graduated-button {
    margin-top: 10px;
    }
  }
  
  @media only screen and (max-width: 576px) {
    .graduation-button {
     width: 51%;
    margin-top: 10px;
    }
    a.graduation-button{
      margin-top: 28px;
    }
  }
  
  @media only screen and (max-width: 400px) {
    .graduation-button {
     width: 100%;
    margin-top: 10px;
    }
  }
  
  .align-push{
    padding-left: 25px;
  }
  
  #inviteCandidate label h3{
    display:inline;
  }

.search-bar {
    width: 100%;
}

.custom-button-gpi {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid black;
    cursor: pointer;
}

.custom-button-gpi:hover {
    background-color: #E8F0FE; 
}




@keyframes gradientFlow {
    0% {
        background-position: 0% 50%; /* Start with left side bright */
    }
    50% {
        background-position: 100% 50%; /* Move to right side bright */
    }
    100% {
        background-position: 0% 50%; /* Move back to left side bright */
    }
}

.settings-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e2e6ea 100%);
    background-size: 200% 200%; /* Make the gradient larger for smoother transition */
    animation: gradientFlow 6s ease infinite; /* Apply the animation */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}




.settings-container h3 a {
    position: relative; /* Ensure the link is positioned */
    display: inline-flex; /* Flex for alignment */
/*     align-items: center; /* Center items vertically */ 
  cursor: pointer;
}

.settings-container h3 a svg {
    margin-left: 5px; /* Space between text and arrow */
    transition: transform 0.3s ease; /* Smooth rotation */
}

/* Rotate arrow based on collapse state for main settings */
.settings-container > h3 > a.collapsed svg {
    transform: rotate(0deg); /* Rotate right when collapsed */
}

.settings-container > h3 > a:not(.collapsed) svg {
    transform: rotate(90deg); /* Point down when expanded */
}





.settings-section .form-group .form-control {
/*     background-color: #00000005 !important; /* Light grey background */
    border: 1px solid #ced4da !important; /* Light border */
    border-radius: 0.25rem !important; /* Rounded corners */
}

.settings-section {
   border: 1px solid #ddd; /* Light border for each section */
    border-radius: 5px; /* Rounded corners for sections */
    padding: 15px; /* Padding for content */
    margin-bottom: 15px; /* Spacing between sections */
/*     text-align: center; /* Center text */ 
    transition: box-shadow 0.3s ease, background-color 0.3s ease; /* Transition only these properties */
}

.settings-section:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
    transform: translateY(-2px); /* Slight lift effect */
/*     background-color: #e9ecef; /* Slightly darker background on hover */ 
    /* No changes to padding here */
}

.settings-section h3 {
  	 
    margin-bottom: 10px; /* Space below the heading */
/*   	text-align: center; /* Center text */ 

}


.settings-section p {
/*     text-align: center; /* Center paragraphs */ 
}



.settings-section h3 a {
    position: relative; /* Ensure the link is positioned */
    display: inline-flex; /* Flex for alignment */
/*     align-items: center; /* Center items vertically */ 
    cursor: pointer;
    text-decoration: none; /* Remove the underline by default */
}

.settings-section h3 a:hover {
    text-decoration: underline; /* Underline on hover */
}

.settings-section h3 a svg {
    margin-left: 10px; /* Space between text and arrow */
    transition: transform 0.3s ease; /* Smooth rotation */
}

.settings-section h3 a:hover svg {
    transform: scale(1.2); /* Slightly enlarge the icon */
}

/* Rotate arrow based on collapse state for individual sections */
.settings-section h3 a.collapsed svg {
    transform: rotate(0deg); /* Rotate right when collapsed */
}

.settings-section h3 a:not(.collapsed) svg {
    transform: rotate(90deg); /* Point down when expanded */
}

.form-check-input {
    margin-top: 0.3rem; /* Adjust vertical alignment for checkboxes */
}

.checkbox-container {
    display: flex; /* Flexbox for better alignment of checkboxes */
    flex-direction: row; /* Horizontal arrangement */
/*     align-items: center; /* Center items vertically */ 
}

.text-danger {
    font-weight: bold; /* Emphasize error messages */
}

[data-toggle="popover"] {
    cursor: pointer; /* Indicate that popovers are clickable */
    color: #007bff; /* Bootstrap primary color for popovers */
}

[data-toggle="popover"]:hover {
    text-decoration: underline; /* Underline on hover for better UX */
}