/* body{
  background-color: #70e1fd;
} */

  .bg-primary {
    background-color: #a7d0c4;
  }

  .btn-info, .badge-info {
    color: #000;
    background-color: #a7d0c4;
    border-color: #a7d0c4;
  }

  .badge-primary {
    color: #000;
    background-color: #f7f7f7;
    border-color: #a7d0c4;
    font-size: 18px;
  }

  .bg-dark {
    background-color: #a7d0c4;
  }

  .rn-primary, .btn-primary {
    background-color: #6baf9b;
    color: #000;
    border: 0px;
  }

  .btn-primary:hover {
    background-color: #6baf9b;
    color: #000;
  }

  .rn-secondary, .btn-secondary {
    background-color: #ffdd91;
    color: #000;
    border: 0px;
  }

  .badge-warning {
    background-color: #fdb939;
    color: #000;
    border: 0px;
    padding: 8px;
  }

  .rn-primary-font {
    color: #a7d0c4;
  }

  th {
    background-color: #ffdd91;
  }

  .dataTables_paginate.paging_simple_numbers {
    display: inline-block;
  }

  .dataTables_paginate.paging_simple_numbers a {
    color: black;
    float: right;
    padding: 8px 16px;
    text-decoration: none;
    background-color: #ffdd91;
    color: black;
  }

  .dataTables_paginate.paging_simple_numbers a.active {
    background-color: #a7d0c4;
    color: white;
  }

  .dataTables_paginate.paging_simple_numbers a:hover:not(.active) {
    background-color: #ddd;
  }

  .paginate_button.current {
    background-color: #fdb939;
  }

  li.nav-item {
    color: #fdb939;
  }

  a {
    color: #6baf9b;
  }

  a:hover {
    color: #000;
  }

  .nav-tabs {
    border-bottom: 1px solid #fdb939;
  }

  .nav-tabs .nav-item .nav-link:not(.active) {
    background-color: #e5e5e5;
    border-color: #ccc #ccc #fdb939;
    color: #000;
  }

  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #fdb939;
    background-color: #fff;
    border-color: #fdb939 #fdb939 #fff;
  }

  h1, h2, h3, h4 {
    color: #a7d0c4;
  }

  /* -----------------
Styles voor pagina's met leerlingenlijst
----------------- */

  .rnleerlingen {
    padding-top: 50px;
    padding-left: 2%;
    padding-bottom: 30px;
    /* width: 18%; */
    /* width: 140px; */
    float: left;
  }

  .rncontent {
    width: 85%;
    float: left;
    margin-top: 25px;
    margin-bottom: 75px;
  }

  .list-group-item {
    position: relative;
    display: block;
    padding: .20rem .7rem;
    margin-bottom: -1px;
    background-color: #ffdd91;
    border: 1px solid rgba(0, 0, 0, .125);
    color: #000;
  }

  .leerlingActief, a.list-group-item.list-group-item-action:hover {
    background-color: #6baf9b;
    color: #FFF;
    border: 1px solid #000;
  }

  /* -----------------
einde Styles voor pagina's met leerlingenlijst
----------------- */

  /* -----------------
Styles voor klasindeling
----------------- */

  #klas div, #set div {
    width: 65px;
    height: 65px;
    padding: 20px 0 0 0;
    float: left;
    margin: 0 10px 10px 0;
    border: 1px solid #000;
    text-align: center;
    font-size: 11px;
    position: absolute;
    -webkit-box-shadow: 0px 10px 13px -7px #999, 2px 2px 7px 2px #777;
box-shadow: 0px 10px 13px -7px #999, 2px 2px 7px 2px #777;
  }

  #klas div {
    position: absolute;
  }

  #klas {
    float: left;
    margin-left: 0px;
    width: 100%;
    height: 450px;
    border: 3px dashed #fdb939;
    position: relative;
  }

  .tafel0 {
    background-color: #ccc;
  }

  .tafel1, .tafel3, .tafel6 {
    background-color: #fdb939;
  }

  .tafel2, .tafel4, .tafel7 {
    background-color: #6baf9b;
  }

  .tafel5, .tafel8 {
    background-color: #a7d0c4;
  }

  #set {
    clear: both;
    float: left;
    margin-left: 0px;
    width: 100%;
    border: 3px dashed #ccc;
    position: relative;
  }

  p {
    clear: both;
    margin: 0;
    padding: 1em 0;
  }

  /* -----------------
Einde Styles voor klasindeling
----------------- */

  textarea.form-control {
    height: 300px;
    border: 2px solid #6baf9b;
    margin: 10px 10px 10px 0;
    padding: 10px;
    border-radius: 10px;
    background-color: #ffffff;
  }

  .rn-center {
    text-align: center;
  }

  .rn-fluid {
    background-color: #a7d0c4;
    border: 3px solid #6baf9b;
    border-radius: 10px;
    text-align: center;
  }

  .ui-widget-header {
    border: 1px solid #dddddd;
    background: #ffdd91;
    color: #333333;
    font-weight: bold;
  }

  .observatie_tekst, .actie_tekst, .overdracht_tekst, .actie_archief {
    border: 1px solid #6baf9b;
    margin: 0px;
    padding: 10px;
    border-radius: 10px;
    background-color: #ffffff;
  }

  .actie_archief {
    color: #cc0000;
  }

  /*
Leerlijnen
*/

  .row div {
    text-align: center;
  }

  .rn-geel {
    background-color: #ffdd91;
    font-size: 11px;
    border: 1px solid #000;
    padding: 2px;
    line-height: 1.2;
    color: #000000;
  }
  .rn-maand {
    background-color: #fff;
    font-size: 10px;
    color:rgb(0, 0, 0);
    border: 1px solid #000;
    padding: 3px;
    line-height: 1;
  }
  .rn-maand2 {
    background-color: #000;
    font-size: 10px;
    color:#fff;
    border: 1px solid #fff;
    padding: 3px;
    line-height: 1;
  }
  .rn-geel-donker {
    background-color: #fdb939;
    color: #000;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #000;
  }

  .rn-groen {
    background-color: #a7d0c4;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #000;
    color: #000000;
  }

  .rn-leeg-top {
    background-color: #ccc;
    font-weight: bold;
    font-size: 14px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #ccc;
  }

  .rn-leeg-bottom {
    background-color: #ccc;
    font-weight: bold;
    font-size: 14px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
  }

  .rn-groen-donker {
    background-color: #6baf9b;
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #000;
  }

  .rn-voortgang-0 {
    /* background-color: #ffe5e5; */
    height: 20px;
    border: 1px solid #000;
  }

  .rn-voortgang-10 {
    background: linear-gradient(to right, #b0ffb0 0%, #b0ffb0 10%, #ffe5e5 10%, #ffe5e5 100%);
    height: 20px;
    border: 1px solid #000;
  }

  .rn-voortgang-20 {
    background: linear-gradient(to right, #b0ffb0 0%, #b0ffb0 20%, #ffe5e5 20%, #ffe5e5 100%);
    height: 20px;
    border: 1px solid #000;
  }

  .rn-voortgang-25 {
    background: linear-gradient(to right, #b0ffb0 0%, #b0ffb0 25%, #ffe5e5 25%, #ffe5e5 100%);
    height: 20px;
    border: 1px solid #000;
  }

  .rn-voortgang-30 {
    background: linear-gradient(to right, #b0ffb0 0%, #b0ffb0 30%, #ffe5e5 30%, #ffe5e5 100%);
    height: 20px;
    border: 1px solid #000;
  }

  .rn-voortgang-40 {
    background: linear-gradient(to right, #b0ffb0 0%, #b0ffb0 40%, #ffe5e5 40%, #ffe5e5 100%);
    height: 20px;
    border: 1px solid #000;
  }

  .rn-voortgang-50 {
    background: linear-gradient(to right, #b0ffb0 0%, #b0ffb0 50%, #ffe5e5 50%, #ffe5e5 100%);
    height: 20px;
    border: 1px solid #000;
  }

  .rn-voortgang-60 {
    background: linear-gradient(to right, #b0ffb0 0%, #b0ffb0 60%, #ffe5e5 60%, #ffe5e5 100%);
    height: 20px;
    border: 1px solid #000;
  }

  .rn-voortgang-70 {
    background: linear-gradient(to right, #b0ffb0 0%, #b0ffb0 70%, #ffe5e5 70%, #ffe5e5 100%);
    height: 20px;
    border: 1px solid #000;
  }

  .rn-voortgang-75 {
    background: linear-gradient(to right, #b0ffb0 0%, #b0ffb0 75%, #ffe5e5 75%, #ffe5e5 100%);
    height: 20px;
    border: 1px solid #000;
  }

  .rn-voortgang-80 {
    background: linear-gradient(to right, #b0ffb0 0%, #b0ffb0 80%, #ffe5e5 80%, #ffe5e5 100%);
    height: 20px;
    border: 1px solid #000;
  }

  .rn-voortgang-90 {
    background: linear-gradient(to right, #b0ffb0 0%, #b0ffb0 90%, #ffe5e5 90%, #ffe5e5 100%);
    height: 20px;
    border: 1px solid #000;
  }

  .rn-voortgang-100 {
    background-color: #00ff00;
    height: 20px;
    border: 1px solid #000;
  }

  /*
Eind Leerlijnen
*/

  /*
Loginscherm auth
*/

  .card {
    padding: 20px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 0px 20px 0px;
  }

  /*
Eind Loginscherm auth
*/

  .navbar {
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
  }

  footer {
    padding: 10px;
    height: 40px;
    z-index: 20;
  }

  /* boxes op homepage met klassen */

  .flex-container {
    display: flex;
    flex-wrap: wrap;
    background-color: DodgerBlue;
    margin: auto;
    width: 488px;
  }

  .flex-container>div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
    border-radius: 3px;
    border: 1px #000 solid;
  }

  .bovenbouw {
    background-color: #6baf9b;
  }

  .middenbouw {
    background-color: #fdb939;
  }

  .onderbouw {
    background-color: #a7d0c4;
  }

  /*
Slider voor de voorgang leerlijnen
*/

  .slidecontainer {
    width: 100%;
  }

  .slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 25px;
    background: #ffdd91;
    outline: none;
    /* opacity: 0.7; */
    -webkit-transition: .2s;
    transition: opacity .2s;
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
  }

  .slider:hover {
    opacity: 1;
  }

  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #6baf9b;
    cursor: pointer;
  }

  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
  }

  /*
Einde slider voor de voorgang leerlijnen
*/

  textarea.form-control.rnTextSmall {
    height: 100px;
  }

  /*
Styling modal header */

  .modal-header {
    background-color: #6baf9b;
    color: #fff;
  }

  .card-header {
    background-color: #ffdd91;
    ;
  }

  .card-header a {
    color: #000;
  }

  /* Checkbox toggle voor criteria leerlijn */

  .custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #6baf9b;
    background-color: #6baf9b;
  }

  .custom-checkbox {
    padding: 4px;
    font-size: 15px;
  }

  hr {
    margin-top: 0;
    margin-bottom: 0;
    border: 1px;
    border-top: 1px solid #6baf9b;
  }

  /* checkbox voor soort observatie */

  .form-control:disabled, .form-control[readonly] {
    font-size: 15px;
  }

  /* Voortgangblokken */
  .progress-bar.progress-bar-periode11, .progress-bar.progress-bar-periode61 {
    background-color:#0051ff;
    color: #000;
  }

  .progress-bar.progress-bar-periode12, .progress-bar.progress-bar-periode62 {
    background-color: #3cfe16;
  }

  .progress-bar.progress-bar-periode21, .progress-bar.progress-bar-periode41, .progress-bar.progress-bar-periode71 {
    background-color: #26b6fe;
    color: #000;
  }
  .progress-bar.progress-bar-periode22, .progress-bar.progress-bar-periode42, .progress-bar.progress-bar-periode72 {
    background-color: #2dae47;
    color: rgb(0, 0, 0);
  }

  .progress-bar.progress-bar-periode51, .progress-bar.progress-bar-periode81, .progress-bar.progress-bar-periode31 {
    background-color:#00fff7;
    color: #000;
  }
  .progress-bar.progress-bar-periode52, .progress-bar.progress-bar-periode82, .progress-bar.progress-bar-periode32 {
    background-color:#baff65;
    color: #000;
  }



/* Legenda */

.periode31 {
  background-color:#0051ff;
  color: white;
  border: 1px solid black;
}


.periode32 {
  background-color: #3cfe16;
  border: 1px solid black;
}


.periode41 {
  background-color: #26b6fe;
  border: 1px solid black;
  color: #000;
}

.periode42 {
  background-color: #2dae47;
  border: 1px solid black;
  color: white;
}


.periode51 {
  background-color:#00fff7;
  border: 1px solid black;
  color: #000;
}

.periode52 {
  background-color:#baff65;
  border: 1px solid black;
  color: #000;
}


  .rn-voortgang-0 {
    height: 20px;
    border: 1px solid #000;
    padding: 0px;
  }

  .progress {
    height: 100%;
    border-radius: 0;
    background-color: #FFF;
    font-size: .65rem;
  }


/* Begin tijdelijk voor ontwikkeling */


  a.btn.btn-admin {
    background-color: #82ff3d;
    color: red;
}

/* Einde tijdelijk voor ontwikkeling */

.rnlijn{
  position: relative;
}

.streeflijn1{
  position:absolute;
  top:0;
  left: 90%;
  /* rode lijn loopt van -1.5% tot 101.5% */
  bottom:0; margin:0;
  border:none;
  border-right:solid 3px #f00;
  z-index:10;
}

/* .streeflijn2 {
  position:absolute;
  top:0;
  left:10%;
  bottom:0; margin:0;
  border:none;
  border-right:solid 3px rgb(0, 255, 0);
  z-index:10;
} */

/* Datatable search highlighting */
mark{background:#6baf9b; color:#fff;}

.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary{
  color:rgb(0, 0, 0);
}


/* print tabje bij leerlijnen */

.rnwit, .rnterug {
    background-color: white;
    color: black;
}