/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.left {
    float: left;
 }
 
 .right {
    float: right;
 }
 
 .bold {
    font-weight: bold;
 }
 
 a,
 button {
    cursor: pointer !important;
 }
 
 .text-left {
    text-align: left;
 }

 .text-center {
   text-align: center;
 }
 
 .form-table td {
    border-collapse: collapse;
    padding: 4px;
    margin: 0px;
    font-size: 13px;
 }

 .form-table input[type="text"] {
   margin: 0px;
   border: 1px solid #b6b6b6;
   margin: 0px!important;
 }

 .form-table input[type="password"] {
   margin: 0px;
   border: 1px solid #b6b6b6;
   margin: 0px!important;
 }

 .form-table input[type="date"] {
 padding: 1%;
 border: 1px solid #7e7e7e;
    line-height: 20px;
    width: 25%;
    background-color: #f8f8f8;
    border-radius: 3px;
 }

 .form-table input[type="number"] {
   padding: 1%;
   border: 1px solid #7e7e7e;
      line-height: 20px;
      width: 25%;
      background-color: #f8f8f8;
      border-radius: 3px;
   }

   .form-table input[type="file"] {
      padding: 1%;
      border: 1px solid #7e7e7e;
         line-height: 20px;
         width: 75%;
         background-color: #f8f8f8;
         border-radius: 3px;
         margin-bottom: 10px;
      }

      .form-table textarea {
         padding: 1%;
         border: 1px solid #7e7e7e;
            line-height: 20px;
            width: 100%;
            background-color: #f8f8f8;
            border-radius: 3px;
            margin-bottom: 0px;
         }

         .form-table select {
            padding: 1%;
            border: 1px solid #7e7e7e;
               line-height: 20px;
               width: 100%;
               background-color: #f8f8f8;
               border-radius: 3px;
               margin-bottom: 0px;
            }

         .form-table label {
            margin-top: 10px;
            display: block;
            font-weight: 700;
            font-size: 14px;
         }

         .form-table input[type="radio"] {
            margin-top: 0px;
         }

.batch-container {
   display: block;
} 
 
 .intranet-container {
    background-color: #ffffff;
 }
 
 .primary-bg {
    background-color: #007BFF;
    color: #FFFFFF;
 }
 
 .secondary-bg {
    background-color: #6C757D;
    color: #FFFFFF;
 }
 
 .success-bg {
    background-color: #28A745;
    color: #FFFFFF;
 }
 
 .danger-bg {
    background-color: #DC3545;
    color: #FFFFFF;
 }
 
 .warning-bg {
    background-color: #FFC107;
    color: #000000;
 }
 
 .info-bg {
    background-color: #17A2B8;
    color: #FFFFFF;
 }
 
 .light-bg {
    background-color: #e7e7e7;
    color: #000000;
 }
 
 .dark-bg {
    background-color: #343A40;
    color: #FFFFFF;
 }
 
 .btn {
    border: none;
    padding: 2px 12px 4px 12px;
    font-size: 14px;
    font-weight: 600;
    min-width: 130px;
    margin-bottom: 20px;
 }
 
 .btn:hover {
    background-color: #28A745;
    color: white;
 }

 .no-wrap {
   white-space: nowrap;
 }
 
 .badge {
    border-radius: 4px;
    padding: 2px 4px 2px 4px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
    text-transform: uppercase;
 }

 .cource-link {
   font-weight: 900;

 }
 
 
 .card-container {
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    /* padding-bottom: 10px; */
    width: 100%;
    position: relative;
    /* min-width: 255px; */
    /* max-width: 520px; */
 
 }
 
 .card-header {
    padding: 15px;
    background-color: #F7F7F7;
    border-bottom: 2px solid #E4E4E4;
    /* border-radius: 5px 5px 0px 5px;
    border-radius: solid; */
    font-size: 18px;
    font-weight: 600;
 }
 
 .card-body {
    padding: 16px;
    font-size: 13px;
 }

 .card-body p {
   font-size: 13px;
 }
 
 h5 {
    font-size: 20px;
 }
 
 
 /* screen and (min-width:769px) {
    .card-container {
       width: 100%;
    }
 } */
 
 .card-wrapper {
    display: flex;
    width: 100%;
    column-gap: 20px;
 }
 
 @media (min-width:321px) and (max-width:768px) {
    .card-wrapper {
       flex-direction: row;
       column-gap: 20px;
    }
 }
 
 @media (max-width:320px) {
    .card-wrapper {
       flex-direction: row;
       column-gap: 20px;
    }
 }
 
 
 .card-container table {
    padding-top: 2px;
    padding-bottom: 2px;
 }
 
 tr.group,
 tr.group:hover {
    background-color: #ddd !important;
 }
 
 .info-msg,
 .success-msg,
 .warning-msg,
 .error-msg {
    margin: 10px 0;
    padding: 10px;
    border-radius: 3px 3px 3px 3px;
 }
 
 .info-msg {
    color: #059;
    background-color: #BEF;
 }
 
 .success-msg {
    color: #270;
    background-color: #DFF2BF;
 }
 
 .warning-msg {
    color: #9F6000;
    background-color: #FEEFB3;
 }
 
 .error-msg {
    color: #D8000C;
    background-color: #FFBABA;
 }
 
 #programma-modal, #cert-modal, #adm-programma-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
 }
 
 .modal-content {
    background-color: #fefefe;
    margin: 3% auto;
    /* 15% from the top and centered */
    border: 1px solid #888;
    width: 80%;
    height: 80%;
    text-align: center;
    margin-top: 40px;
    /* Could be more or less, depending on screen size */
 }

 .modal-content embed{
    height: 100%!important;
 } 
 
 .modal-content img{
    height: 100%!important;
    width: auto!important;
    margin-left: auto!important;
    margin-right: auto!important;
 }
 
 .modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
 }
 
 .modal-close:hover,
 .modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
 }

 ul.naav-bar {
   list-style-type: none!important;
   margin: 0 0 20px 0;
   padding: 0;
   overflow: hidden;
   background-color: #eeeff1!important;
}

ul.naav-bar a{
   color: black;
}

.naav-item {
   float: left;
}

.naav-item a {
   display: block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-weight: 900;
}

.naav-item a:hover:not(.active) {
   background-color: #006bb7;
   color: white!important;
}

.nav-active a{
   background-color: #006bb7;
   color: white!important;
}

#afmelden-nav  {
   float: right;
   color: #ffffff!important;
}

.active {
   background-color: rgb(21, 94, 221);
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: white!important;
}


/* ACCREDITATIE TABLE */

#sum_table.table {
   border-collapse: collapse;
   width: 100%;
   border: 1px solid #c6c6c6 !important;
   margin-bottom: 20px;
 }
 #sum_table.table th {
   border-collapse: collapse;
   border-right: 1px solid #c6c6c6 !important;
   border-bottom: 1px solid #c6c6c6 !important;
   background-color: #eee !important;
   /* font-weight: bold; */
 }
 #sum_table.table td {
   border-collapse: collapse;
   border-right: 1px solid #c6c6c6 !important;
   border-bottom: 1px solid #c6c6c6 !important;
   word-break: break-all;
   font-size: 12px!important;
 }
 #sum_table .table tr:nth-child(odd) {
   background-color: #fff !important;
 }
 #sum_table.table tr:nth-child(even) {
   background-color: #f8f8f8 !important;
 }
 .icon-a,.icon-r,.icon-c{
   display: inline-block;
   background-color: rgb(233, 233, 233);
   border-radius: 5px;
   color: red;
   text-align: center;
   font-size: 10px;
   padding: 2px 4px;
   margin-left: 10px;
   font-weight: 900;
 }
 .icon-totaal{
   display: inline-block;
   color: #000000;
   margin-left: 5px;
 }
 .tips{
  text-align: left !important;
  width: 240px;
 }

 .bg {
   margin: 5px 5px 0 5px;
   width: 70%;
   height: 6px;
   border-radius: 4px;
   background-color: rgb(222, 228, 247);
   display: inline-block;
   align-items: center;
 }
 .bg-line {
   background-color: rgb(222, 228, 247);
 }

 .inner {
   height: 100%;
   border-radius: 4px;
 }

 .line-a,.line-r {
   width: 0%;
   background-color: red;
 }

 /* FLEX BOXES */

 .flex-row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
}

.flex-50 {
   display: flex;
   flex-direction: column;
   flex-basis: 100%;
   flex: 2;
}

.flex-col-3 {
   display: flex;
   flex-direction: column;
   flex-basis: 100%;
   flex: 3;
}

/* TABLE DATATABLES */

.dataTables_wrapper .table tr th {
   font-size: 11px;
}
.dataTables_wrapper {
   font-size: 13px;
}

.dataTables_wrapper td {
   vertical-align: middle;
}

.dt-table-header, .dt-table-footer {
   font-size: 12px!important;
}

.dt-edit {
   font-size: 9px;
   font-weight: 700;

}

.dt-button {
   padding: 2px 4px!important;
}

.dt-date {
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
 }

 .dt-title {
   font-size: 13px;
   font-weight: 700;
 }

 .dataTables_info {
   font-size: 13px;
   font-weight: 600;
 }

 .dt-table-body {
   font-size: 13px;
 }

 .dt-points {
   text-align: center;
   font-size: 12px;
 }



 .paginate_button {
   padding: 0px 4px 0px 4px!important;
   font-size: 13px;
   font-weight: 600;
   margin-top: 4px;
   border: 1px solid black;
 }

 .paginate_button.current{
   padding: 0px!important;
   background-color: rgb(226, 226, 226)!important;
   font-size: 13px;
   font-weight: 600;
   border: 1px solid black;
 }

 .paginate_button.previous{
   padding: 0px!important;
   font-size: 13px;
   font-weight: 600;
   border: 1px solid black;

 }
 .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover {
   background: transparent;
   border: 1px solid white;
   color:rgb(145, 145, 145)!important;
 }

 .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
   background: transparent;
   border: 1px solid white;
   color:rgb(145, 145, 145)!important;
 }

 .paginate_button.next{
   padding: 0px!important;
   font-size: 13px;
   font-weight: 600;
   border: 1px solid black;
 }

 .paginate_button.next a:hover {
   background: transparent!important;
 }

 .paginate_button.disabled{
   padding: 0px!important;
   margin-top: 4px;
 }

 /* #accr-approve-tabel_previous, #accr-approve-tabel_next {
   font-size: 13px!important;
   font-weight: 700!important;
 } */

 .profile-card {
   border: 1px solid #dbdbdb;
   border-radius: 5px;
   padding: 15px;
   font-size: 13px;
   margin-right: 10px!important;
   color: black!important;
 }

 .profile-card title {
   width: 60px;
   display: block; 
   float: left;
   color: black!important;
}

 .profile-card-end {
   border: 1px solid #dbdbdb;
   border-radius: 5px;
   padding: 15px;
   font-size: 13px;
   margin-right: 0px!important;
 }

 .profile-card-big {
   border: 1px solid #dbdbdb;
   border-radius: 5px;
   padding: 15px;
   width: 100%;
   font-size: 13px;
 }

 .profile-card-border {
   border: 1px solid #dbdbdb;
   border-radius: 5px;
   padding: 15px;
   width: 100%;
   font-size: 13px;
 }

 .profile-card-header {
   font-size: 16px;
   margin-bottom: 8px;
   font-weight: 600;
 }

 .profile-card-points {
   border: 1px solid #dbdbdb;
   border-radius: 5px;
   font-size: 13px;
   margin-right: 10px!important;
 }

 .profile-card-points-last {
   border: 1px solid #dbdbdb;
   border-radius: 5px;
   font-size: 13px;
   margin-right: 0px;
 }
 .dash-points {
   background-color: #28A745;
   width: 80px;
   text-align: center;
   color: #ffffff;
   margin-right: 20px;
   height: 60px;
   padding-top: 10px;
 }

 .dash-points-type {
   font-size: 24px;
   font-weight: 700;
 }

 .dash-points-totaal {
   font-size: 18px;
   font-weight: 700;
   height: 100%;
   padding-top:8px;
 }

 .dash-points-content {
   font-size: 14px;
   font-weight: 500;
   padding: 6px;
 }

 #cursuslijst-tabel_wrapper div.dt-buttons  {
   margin-top: 26px;
 }

 /* .nav-beheer-active{
   background-color: red!important;
   color: white!important;
 } */

 ul.naav-bar .nav-beheer a {
   /* color: white!important; */
   font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   background-color: transparent!important;
   text-decoration: none!important;
   display: inline-block!important;
   text-align: center!important;
   transition: all 0.3s ease 0s;
   -webkit-transition: all 0.3s ease 0s;
   -moz-transition: all 0.3s ease 0s;
   -o-transition: all 0.3s ease 0s;
   -ms-transition: all 0.3s ease 0s;
 }
 
 ul.naav-bar .nav-beheer a:hover{
      background: #006bb7!important;
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
   }

   .nav-beheer a{
      color: black!important;
   }
   .nav-beheer-actief{
      background-color: red!important;
      color: white!important;
   }
   .nav-beheer-actief a{
      color: white!important;
   }

   #afmelden-nav:hover {
      background: #010101!important;
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: white!important;
   }

 .select2-dropdown--below {
   top: -2.8rem; /*your input height*/
}

th{
   letter-spacing: normal!important;
}

table.dataTable thead th, table.dataTable thead td {
  padding: 3px!important;
}

td {
   background-color: white!important;
}

table.dataTable thead th, table.dataTable thead td {
   padding: 3px!important;
 }

 button {
   padding: 8px!important;
   margin-bottom: 6px!important;
 }

 .select2-container {
   width: 100% !important;
   }
   
   .select2-selection--multiple {
   border-color: #ddd !important;
   }
   
   .select2-container--default .select2-selection--multiple {
   height: auto;
   }
   
   .select2-selection__rendered {
   line-height: 1.8em !important;
   font-size: 15px !important;
   }
   
   .select2-selection__rendered {
   margin-bottom: -5px !important;
   }
   
   input[type="search"].select2-search__field {
   border: 0px;
   box-shadow: inset 0 0px 2px rgba( 0, 0, 0, 0 );
   padding: 5px 0 0 0;
   -webkit-box-shadow: inset 0 0px 2px rgba( 0, 0, 0, 0 );
   -webkit-appearance: searchfield;
   width: auto !important;
   }

.white-txt {
   color: white!important;
}