input[type="date"]::-webkit-calendar-picker-indicator{
    display: none;
}

.table.firstKey>tbody>tr>td:first-child {
    font-weight:    bold;
    width:          250px;
}
table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
    text-align: left;
}

i.hand {
    cursor:         pointer;
}

/* PanArt huisstijl */
.btn {
  font-weight: 600;
}
.btn-default {
  background-color: #A7B1C2;
  color: white;
}
.btn-default.active,.btn-default.active:hover, .btn-default.active:focus {
  background-color: #6D7D8D;
  color: white;
  box-shadow: none;
}

#crm_zoeken {
  border: 1px solid black;
}



.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary.active:hover, .btn-primary.active:focus,      .btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
    font-weight:        normal;
}
.btn-success.groen {
    background-color:   #c8d200;
    border-color:       #c8d200;
}
.btn-danger {
  background-color: #E63719;
}
.btn-primary.btn-paars, .btn-danger.btn-paars, .btn-order-aandachtspunten{
  padding: 2px 10px;
  border-radius: 4px !important;
  font-weight: normal;
  font-size: 13px;
  border: none;
}
.breadcrumbs a {
  font-weight: normal;
  color: #707070;
  text-transform: capitalize;
}
@media(max-width:768px){
  .nav .navbar-minimalize.btn {
    display: none;
  }
}
.label-danger, .badge-danger {
  background-color: red;
}
.label-warning, .badge-warning {
  background-color: #F09600;
}
.label-success, .badge-success {
  background-color: #C8D200;
}



.form-control:focus, .single-line:focus{

    border-color:       #F09600;
}
.note-editable.form-control {
  width: 100%;
}
.note-editable {
  padding: 6px 12px !important;
}
.note-editable > p {
  margin-bottom: 0px;
}
.note-status-output {
  display: inline;
}
.row.submit {
  padding-left: 15px;
}
.nav > li.active > a {
    margin-left: -4px;
}
.nav .fa, .btn .fa {
    color:              white;
}
mark {
  background-color: #F0E164;
}

/* Blog */
.blog .filters .filter.active, .blog .categorien .categorie.active{
    font-weight:        bold;
}
.blog .content {
    position:           relative;
}
.blog .content .tags {
    position:           absolute;
    width:              100%;
    bottom:             10px;
}
.blog a .blog-box {
    text-decoration:    none;
    color:              #676a6c;
}

.blog-detail, .blog-detail-andereBlogs {
    padding-top:        40px;
}
.ibox .ibox-tools {
    float:              right;
}
.blog-detail .ibox-content {
    padding-left:       40px;
}
.blog-detail .blog-bewerken, .blog-detail .blog-bewerken * {
    color:              black;
    text-decoration:    underline;
}
.blog-detail .aangemaakt-op, .blog-detail .aangemaakt-door {
    font-weight:        bold;
    font-style:         italic;
}
.blog-detail .tags {
    display:            inline-block;
}
.blog-detail .tags .aangemaakt-door {
    float:              left;
}
.blog-detail .tags .aangemaakt-op {
    float:              right;
}

.blog-detail .intro, .blog-detail .samenvatting, .blog-detail .fotos, .blog-detail .content, .blog-detail .comments {
    margin-top:         50px;
}

.blog-detail .intro {
    font-size:          15px;
}
.blog-detail .samenvatting img {
    width:              100%;
    max-width:          300px;
    max-height:         300px;
}
.blog-detail .samenvatting {
    column-count:       2;
}
.blog-detail h1,.blog-detail h2,.blog-detail h3,.blog-detail h4,.blog-detail h5,.blog-detail strong,.blog-detail b,.blog-detail blockquote {
    color:              #01A5AC;
    font-weight:        bold;
}
.blog-detail blockquote {
    padding:            0px;
    border:             none;
    font-weight:        bold;
    font-size:          28px;
}
.blog-detail .fotos {
    display:            inline-block;
    width:              100%;
    margin-top:         50px;
}
.blog-detail .fotos > a {
    margin-bottom:      10px;
}



/* Parts */
.blog-box {
    background-color:   white;
    margin-bottom:      10px;
}
.blog-box h2 {
    background-color:   red;
    color:              white;
    padding:            15px;
    margin:             0px;
}
.blog-box .image img {
    width:              100%;
}
.blog-box .content {
    padding:            10px;
}
.blog-box .content .auteur {
    float:              left;
}
.blog-box .content .aangemaakt-op {
    float:              right;
}
.blog-box .content .intro {
    padding-top:        15px;
    clear:              both;
}

.blog-categorie-communicatie {
    background-color:   #01A5AC;
}
.blog-categorie-design {
    background-color:   #F09D00;
}
.blog-categorie-marketing {
    background-color:   #ED71A2;
}
.blog-categorie-internet {
    background-color:   #01A5AC;
}


/* Mijn panart - vakantiedagen */
.calenderLegenda .legenda {
    display:            block;
}
.calenderLegenda .statussen {
    display:            inline-block;
}
.calenderLegenda .status {
    padding:            5px 10px;
    float:              left;
    margin-right:       10px;
}






/* PANCRM */
  /* HTML base */
    a {
      font-weight: 600;
    }
  /* Base */
    .nav-header {
      padding: 15px 25px;
    }
    .btn {
      border-radius: 0px;
    }
    .nav#side-menu hr {
      margin-top: 10px;
      margin-bottom: 10px;
      border-top: 1px solid white !important;
      width: 100%;
    }
    body {
      color: #707070;
      font-family: Arial, sans-serif;
    }
    body:not(.mini-navbar) .nav .nav-header .navbar-minimalize {
      margin-left: -25px;
      float: left;
    }
    body:not(.mini-navbar) .nav .nav-header .profile-element {
      padding-left: 30px;
      color: white;
    }

    body .nav .nav-header .navbar-minimalize .fa-arrow-custom-toggle:before {
        content: "\f060";
    }
    body.mini-navbar .nav .nav-header .navbar-minimalize{
      width: 70px;
    }
    body.mini-navbar .nav .nav-header .navbar-minimalize .fa-arrow-custom-toggle:before {
        content: "\f061";
    }

    .locked > .fa::before, .locked.fa::before {
      content: "\f023" !important
    }

    .plusmin button {
      padding-top: 7px;
      padding-bottom: 7px;
    }

  /* NAV */
    @media(max-width:450px){
      .nav > li > a {
        padding: 14px 10px 14px 13px;
      }
      body.mini-navbar .navbar-static-side, body.mini-navbar .nav .nav-header .navbar-minimalize {
        width: 40px;
      }
      body.mini-navbar #page-wrapper {
        width: calc(100% - 40px);
      }
    }

    body.mini-navbar .navbar-static-side {
        display: inline-block !important;;
    }

  /* Table */
    @media(max-width:400px){
      .table:not(.dataTable) tbody tr > td {
        display:  block;
        clear:    both;
        width:    100% !important;
        border-left:   none !important;
        border-right:   none !important;
        border-top:   none !important;
        border-bottom:   none !important;
      }
      .table:not(.dataTable) tbody tr  {
        border:   1px solid black !important;
      }
    }


  /* Planning status */
    .planningStatus[data-planning-id] {
      cursor: pointer;
      font-size: 22px;
    }
    .planningStatus[data-planning-status] {
      font-size: 22px;
    }
    .planningStatus[data-planning-status="0"] {
      color: #F0E164;
    }
    .planningStatus[data-planning-status="0"]::before {
      content: "\f0c8";
    }
    .planningStatus[data-planning-status="1"] {
      color: #F09600;
    }
    .planningStatus[data-planning-status="1"]::before, .planningStatus[data-planning-status="2"]::before {
      content: "\f14a";
    }
    .planningStatus[data-planning-status="2"] {
      color: #C8D200;
    }


  /* Pagina header */
  #page-wrapper .page-heading {
    display:  inline-block;
  }
  #page-wrapper .navbar-top-links > li > a {
    padding-left: 0px;
    padding-right: 0px;
  }
  #page-wrapper .navbar-top-links > li {
    padding-left: 15px;
  }
  #page-wrapper .navbar-top-links > li:last-child {
    margin-right: 30px;
  }
  #page-wrapper .page-heading {
    padding-bottom: 10px;
    padding-top: 10px;
  }
  #page-wrapper .page-heading > h2 {
    margin: 0px;
    font-weight: 500;
    padding-bottom: 5px;
  }
  #page-wrapper .header {
    margin-bottom: 20px;
  }

  /* Wrapper */
  .wrapper-content {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  /* Modal */
  .modal[modal-size="xl"] .modal-dialog {
    max-width: 90%;
  }
  .modal#edit_data .modal-header {
    background-color: #2F4050;
    padding: 0px 20px;
    border-radius: 0px;
    font-weight: normal;
  }
  .modal#edit_data .modal-title, .modal#edit_data .modal-subtitle {
    text-align: left;
    color: white;
    font-weight: normal;
  }
  .modal#edit_data form label.control-label {
    color: #273846;
    padding-right: 0px;
  }

  .inmodal .modal-body {
    background-color: #EDEDED;
  }

  .modal-header .close {
    padding: 12px;
    margin: 0px;
  }
  .modal-header .close span {
    color: white;
    opacity: 1;
    font-size: 28px;
  }
  .close {
    opacity: 1;
  }

  .modal .modal-header .appended {
    float: right;
    position: absolute;
    top: 20px;
    right: 70px;
    font-size: 20px;
    color: white;
  }

  /*Styleing boxen */
  .ibox:not(.loaded)::before{
    content: " ";
    z-index: 1;
    background-color: rgba(255,255,255,0.8);
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .ibox:not(.loaded)::after{
      content: "\f2f1";
      animation: fa-spin 2s linear infinite;
      z-index: 2;
      color: black;
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 45px;
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
  }
  .ibox .ibox-title, .ibox .ibox-content {
    width: 100%;
  }
  .ibox .ibox-title {
    background-color: #2F4050;
    color: #ffffff;
    min-height: 1px;
    padding: 5px 20px;
  }
  .ibox .ibox-title .ibox-tools {
    top: 6px;
    right: 20px;
  }
  .ibox .ibox-title .ibox-tools * {
    color: white;
  }
  .ibox .ibox-title .ibox-tools .klantFavoriet {
    cursor: pointer;
  }
  .ibox .ibox-title .filteritems {
    display: inline-block;
    float:right;
      margin-top: -2px;
  }
  .ibox .ibox-title .filteritems > div {
    float:left;
    margin-top: 0px;
      margin-right: 5px;
  }
  .ibox .ibox-title .filteritems div.dt-buttons {
    margin-bottom: -3px;
  }
  ul.dt-button-collection.dropdown-menu {
    z-index: 999999 !important;
  }
  @media(max-width:768px){
    .ibox .ibox-title .filteritems .html5buttons .dt-buttons>.btn.buttons-collection:not(.addButton) {
      display: none;
    }
    .ibox .ibox-title .filteritems div.dataTables_filter > label {
      margin: 0px;
    }
    .ibox .ibox-title .filteritems > div.html5buttons {
      margin-top: 2px;
    }
  }
  /* @media(max-width:600px){
    .ibox .ibox-title .filteritems > div.dataTables_filter {
      display: none;
    }
  } */
  .ibox .ibox-title input[type="search"] {
    background-color: #2F4050;
    padding: 6px;
    color: white;
    font-weight: 500;
    height: 28px;
  }
  .ibox .ibox-title .html5buttons .btn {
      background-color: #2F4050;
      color: rgba(120,128,137,1);
      font-weight: lighter;
      padding: 4px 8px;
      margin-top: -1px !important;
      line-height: 15px;


      border: 1px solid #e7eaec;
      color: #676a6c;
      box-shadow: none;
      padding: 6px 8px;
      font-size: 12px;
  }
  .ibox .ibox-title .html5buttons .filterIcon {
    display: none;
  }

  .ibox.ibox-light {
    margin-top: -21px;
    margin-right: -30px;
    margin-left: -30px;
    margin-bottom: -30px;
  }
  .ibox.ibox-light .ibox-title {
    display: none;
  }

  .ibox.ibox-light > div {
  }
  .ibox.ibox-light .ibox-title {
    background-color: transparent;
    border-top: none;
    height: 45px;
    width: calc(100% - 60px);
  }
  .ibox.ibox-light .ibox-content {
    padding: 0px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
  }

  .modal .urenspecificatie_datum, .modal .medewerker_datum {
    float:right;
    font-size: 16px;
    margin-top: 4px;
    margin-right: 20px;
    width: 90px;
  }
  .modal .urenspecificatie_datum, .modal .medewerker_datum {
    width: 120px;
  }

  .autocomplete_medewerkers {
      position: relative;;
  }



  /* Table */
  .table-bordered {
    border: 1px solid transparent;
  }
  .table-labeled tr>td:first-child {
    color: #000000;
  }
  .table-bordered > thead > tr > th {
    background-color: white;
    border: none;
  }
  .table-bordered>tbody>tr {
    background-color: transparent !important;
  }
  .table-bordered>tbody>tr:hover {
    background-color: #EDEDED !important;
  }
  .table-bordered>tbody>tr>td {
    border-right: 1px solid transparent;
  }
  .table-bordered>tbody>tr>td{
    border-bottom: 1px solid #2f4050;
    border-top: 0px;
    padding: 5px 8px;
  }
  .table-bordered>tbody>tr>td:first-child{
    border-left: 1px solid #2f4050;
  }
  .table-bordered>tbody>tr>td:last-child{
    border-right: 1px solid #2f4050;
  }
  .table-bordered>tbody>tr:first-child>td{
    border-top: 1px solid #2f4050;
  }
  .table-bordered>tbody>tr:last-child>td{
    border-bottom: 1px solid #2f4050;
  }
  .table.table-orderdetail-uren {
    margin-bottom: 0px;
  }
  .table.table-orderdetail-uren, .table.table-orderdetail-uren tr, .table.table-orderdetail-uren td {
    border: 0px;
    background: transparent;
    padding: 0px;
  }
  .table.table-orderdetail-uren tr>td:first-child {
    width: 35%;
  }
  .table.table-orderdetail-uren tr>td:last-child {
    padding: 0px 8px;
    color: #707070;
  }

  .table > thead:first-child > tr:first-child > th {
    border-bottom: 2px solid rgba(240,239,239,1);
    margin-bottom: 12px;
  }
  div.dataTables_scrollHead {
    margin-bottom: 15px !important;
  }


  .dataTable.table-bordered>tbody>tr>td {
    border-right: 1px solid transparent;
  }
  .dataTable.table-bordered>tbody>tr>td{
    border-bottom: 1px solid #2f4050 !important;
    border-top: 0px;
    padding: 5px 8px;

      border-left: none;
      border-right: none;
  }
  .dataTable.table-bordered>tbody>tr>td:first-child{
    border-left: 1px solid #2f4050;
  }
  .dataTable.table-bordered>tbody>tr>td:last-child{
    border-right: 1px solid #2f4050;
    border-right-width: 1px;
  }
  .dataTable.table-bordered>tbody>tr:first-child>td{
    border-top: 1px solid #2f4050;
  }
  .dataTable.table-bordered>tbody>tr:last-child>td{
    border-bottom: 1px solid #2f4050;
  }
  .dataTable.urenboeken tr>td[data-input="stapId"] > select {
    max-width: 400px;
  }

  .dataTable>tbody>tr>td {
    color: black;
  }





  /* Data table */
  .dt-container table {
    border-spacing: 0px;
    border-collapse: separate !important;
  }
  .dt-scroll-headInner {
    border-bottom: 1px solid lightgrey;
    margin-bottom: 10px;
  }
  .dt-scroll-headInner thead > th {
    color: #707070;
    font-size: 13px;
    font-weight: 600;
  }
  .dt-scroll-body table.table > tbody > tr[data-url]{
    cursor: pointer;
  }
  .dt-scroll-foot table tfoot:not(.active) {
    display: none;
  }
  .dt-container table tfoot:not(.active) select {
    width: 1px;
  }
  .dataTable .vadatum {
    width: 80px;
    background: transparent;
    color: white;
    border: none;
    font-weight: bold;
  }
  .dataTable.linkRegel tbody tr {
    cursor: pointer;
  }
  .dt-container {
    padding-bottom: 0px;
  }
 .orderStatusBol {
    width:  10px;
    height: 10px;
    border-radius: 10px;
    display: inline-block;
  }
  .dt-container .dt-scroll-body .orderStatusBol {
    margin-top: 5px;
  }
  .dt-container .legenda {
    display: inline-block;
  }
  .dt-container .legenda>.legenda-item, .dt-container .legenda>.legenda-item .legenda-tekst, .dt-container .legenda>.legenda-item .orderStatusBol {
    float:left;
  }
  .dt-container .legenda>div.legenda-item {
    margin-right: 15px;
    cursor: pointer;
  }
  .dt-container .legenda>div.legenda-item:last-child {
    margin-right: 0px;
  }
  .dt-container .legenda>.legenda-item .orderStatusBol {
    margin-right: 5px;
    margin-top: 5px;
  }
div.dt-container div.dt-paging {
    text-align: right;
}
  div.dt-container div.dt-paging ul.pagination {
    display: inline-flex;
  }
  div.dt-container div.dt-paging ul.pagination a {
    font-weight: normal;
  }
  div.dt-container div.dt-paging ul.pagination .paginate_button.active > a {
    background-color: rgba(228,228,228,1);
  }

  .dt-container .ibox-title .html5buttons a.addButton {
    border: none;
  }
  .dt-container .ibox-title .html5buttons a.addButton {
    padding:  0px;
    padding-left: 15px;
    margin-left: 0px;
  }
  @media(max-width:768px){
    .dt-container .ibox-title .html5buttons a.addButton {
      margin-top: 2px;
    }
  }
  table.table-inline {
    border: none !important;
  }
  table.table-inline tr>td:first-child {
    border-left: 0px !important;
  }
  table.table-inline tr>td:last-child {
    border-right: 0px !important;
  }
  table.table-inline tr:first-child>td {
    border-top: 0px !important;
  }
  table.table-inline tr:last-child>td {
    border-bottom: 0px !important;
  }

  .table thead>tr>th {
    background-color: #6D7D8D !important;
    color: white;
  }

  .table.table-header-light thead>tr>th {
    background-color: white !important;
    color: #6D7D8D;
  }

  .table.table-header-light.table-header-light-diap thead>tr>th {
    background-color: transparent !important;
  }
  .table.table-header-light.table-header-light-diap tbody>tr {
    /* background-color: white !important; */
    color: #6D7D8D;
  }

  .dt-scroll-headInner {
    margin-bottom: 0px;
    border-bottom: none;
  }


  .ibox-content.ibox-sub {
    border: none;
  }
  .ibox .ibox-title {
    font-size: 22px;
    line-height: 28px;
  }
   .dt-container .ibox-title .html5buttons a.addButton {
     font-size: 18px;
     border: 1px solid transparent;
   }
  .ibox-sub .ibox {
    border: 1px solid #2F4050;
    margin-bottom: 0px;
  }
  .ibox-sub .ibox .ibox-title, .ibox-sub .dt-container .ibox-title .html5buttons a.addButton {
    font-size: 13px;
    line-height: 13px;
    border-top: 0px;
    font-weight: bold;
    padding-left: 10px;
  }
  .ibox-sub .ibox .ibox-title {
    background-color: #6D7D8D !important;
  }

  .selectIboxTitle .iboxTitleItem {
    background-color: #6D7D8D;
    cursor: pointer;
  }
  .selectIboxTitle .iboxTitleItem.active {
    background-color: #2F4050;
  }



    /* Aandachtspunten */
    .dataTableAandachtspunten table td .titel {
      color: #000000;
    }
    .dataTableAandachtspunten table td .gebruiker, .dataTableAandachtspunten table td .gemaakt_op {
      font-size: 10px;
      line-height: 10px;
    }
    .dataTableAandachtspunten .dataTables_scrollHead /*, .dataTableOrderStappen .dataTables_scrollHead*/ {
      display: none;
    }
    .dataTableOrderStappen .dataTables_scrollHead .dt-scroll-headInner>table {
      margin-top: 0px !important;
    }
    .dataTableAandachtspunten table td .tools > * {
      cursor: pointer;
    }

    /* Order stappen */
    .dataTableOrderStappen .filteritems .addButton {
      background-color: transparent !important;
    }
    .dataTableOrderStappen .ibox-content {
      padding: 0px;
    }
    .dataTableOrderStappen .dt-scroll-body {
      max-height: 294px;
    }
    .dataTableOrderStappen td.stapOmschrijving::after {
       content: "";
       display: inline-block;
       vertical-align: top;
       min-height: 40px;
    }
    .dataTableOrderStappen .stapOmschrijving {
      position: relative;
    }
    .dataTableOrderStappen .stapOmschrijving .deadline {
      bottom: 0px;
      font-size: 11px;
      color: grey;
    }
    .dataTableOrderStappen .dt-scroll-foot, .dataTableOrderStappen .legenda, .dataTablePlanning .legenda {
      display: none;
    }
    .dataTableOrderStappen .ibox-content {
      border: 0px !important;
    }
    .dataTableOrderStappen tr.active>td {
      background-color: #F3F3F4;
    }
    .dataTableOrderStappen tr.active>td:first-child {
      border-left: 5px solid #A564A0 !important;
    }
    .dataTableOrderStappen tr.active>td:first-child>* {
      margin-left: -5px;
    }
    .dataTableOrderStappen .deadline {
    }

    .order_omschrijving {
      -ms-word-break: break-all;
      word-break: break-all;

   /* Non standard for webkit */
       word-break: break-word;

      -webkit-hyphens: auto;
         -moz-hyphens: auto;
          -ms-hyphens: auto;
              hyphens: auto;

    }

    /* Planning regel */
    .dataTablePlanning .ibox-title {
      display: none;
    }
    .dataTablePlanning .ibox-content {
      padding: 0px;
        border: 0px !important;
    }
    .dataTablePlanning table > thead > tr > th {
      background-color: #6D7D8D !important;
      color: white;
    }
    .dataTablePlanning table > thead > tr > th.sorting_asc:after {
      color: white;
      opacity: 1;
    }
    .dataTablePlanning table tbody>tr>td {
      background-color: #F3F3F4 !important;
    }
    .dataTablePlanning table tbody>tr>td input {
      color: #707070;
    }
    .dataTablePlanning table tbody>tr>td input.clockpicker {
      width: calc(100% - 35px);
      padding-left: 5px;
      padding-right: 5px;
    }
    .dataTablePlanning .dt-scroll-headInner {
      border: none;
      margin-bottom: 0px;
    }
    .dataTablePlanning .dt-scroll-headInner table {
      margin-top: 0px !important;
    }
    .dataTablePlanning table {
      border: 0px;
    }
    .dataTablePlanning table tbody>tr>td:first-child {
      border-left: 0px !important;
    }
    .dataTablePlanning table tbody>tr.child>td {
      background-color: inherit !important;
      color: inherit !important;
    }
    .dataTablePlanning table td .heeftTijd {
      background-color: #2D4696;
      padding: 5px 10px;
      color: white;
      font-weight: bold;
    }
    .dataTablePlanning table tr>td:nth-child(2) input {
      width: 150px;
    }
    .dataTablePlanning table tr>td:nth-child(3) select {
      width: 35px;
      padding-left: 0px;
      padding-right: 0px;
    }
    .dataTablePlanning table tr>td:nth-child(3) {
        min-width: 115px;
    }
    .dataTablePlanning table tr>td:nth-child(3) * {
        float: left;
    }
    .dataTablePlanning table tr.child>td:nth-child(3) select {
      width: 70px;
    }
    .dataTablePlanning table tr>td:nth-child(4) input, .dataTablePlanning table tr>td:nth-child(5) input {
      width: 100%;
    }
    .dataTablePlanning table tr>td:nth-child(6) {
      padding: 1px 0px 0px 0px;
    }
    .dataTablePlanning td.urenkwartieren > span, .dataTablePlanningOverzicht td.urenkwartieren > span, .dataTableUrenspecificatie td.urenkwartieren > span {
      padding: 2px 4px;
      text-align: center;
      border: 1px solid lightgrey;
      display: inline-block;
      min-width: 25px;
    }
    .dataTablePlanning td.urenkwartieren > span.uren, .dataTablePlanningOverzicht td.urenkwartieren > span.uren, .dataTableUrenspecificatie td.urenkwartieren > span.uren {
      margin-right: 10px;
    }
    .dataTablePlanningOverzicht td.urenkwartieren > span.uren > select,.dataTablePlanningOverzicht td.urenkwartieren > span.kwartieren > select {
      padding-left: 1px;
      padding-right: 1px;
      text-align: center;
    }
    .dataTablePlanningOverzicht td .boekUren {
      font-size: 20px;
      cursor: pointer;
    }
    .dataTablePlanningOverzicht td .deleteUren, .dataTablePlanningOverzicht td .editUrenRow {
      float: right;
      cursor: pointer;
    }
    .dataTablePlanningOverzicht td .editUrenRow {
      margin-right: 5px;
    }
    .dataTablePlanning tr.editable td.urenkwartieren > span {
      border: none;
      float:  left;
      width: 50%;
      padding: 0px;
      margin: 0px;
    }
    .dataTablePlanning tr.editable td.urenkwartieren > span select {
      padding: 0px;
      width: 100%;
      text-align: center;
    }
    .dataTablePlanning tr.editable td.urenkwartieren > span.uren select {
      min-width: 33px;
    }
    .dataTablePlanning tr.editable td.urenkwartieren > span.kwartieren select {
      min-width: 45px;
    }
    .dataTablePlanning tr[data-id] td[data-input="tijd"]{
      white-space: nowrap;
    }
    .dataTablePlanning tr[data-id] td[data-input="tijd"] > input {
      min-width: 60px;
    }
    .dataTablePlanning .addPlanningActie, .dataTablePlanning .addPlanningRegel, .dataTablePlanning .removePlanningRegel {
      cursor: pointer;
    }
    .dataTablePlanning tr.editable .addPlanningRegel.fa:before {
      content: "\f067" !important;
    }

    /* Planning overzicht */
    .dataTablePlanningOverzicht {
      width: 100%;
    }
    .dataTablePlanningOverzicht .dataTables_scrollHead {
      display: none;
    }
    .dataTablePlanningOverzicht .dt-container, .dataTablePlanningOverzicht .dt-container>div {
      width: 100%;
    }
    .dataTablePlanningOverzicht>tbody>tr:not(.hoofdregel) > td {
      /*padding: 0px;*/
    }
    .dataTablePlanningStappen thead{
      display: none;
    }
    .dataTablePlanningOverzicht > tbody > tr.hoofdregel > td {
      background-color: #6D7D8D;
      color: white;
    }
    .dataTablePlanningOverzicht > tbody > tr.hoofdregel > td a {
      color: white;
      font-weight: normal;
    }
    .dataTablePlanningOverzicht > tbody > tr.hoofdregel > td a:first-child {
      font-weight: 600;
    }
    .dataTablePlanningOverzicht > tbody > tr:hover, .dataTablePlanningOverzicht > tbody > tr:hover > td {
      background-color: inherit !important;
    }
    .dataTablePlanningOverzicht tbody td {
      padding: 5px;
      vertical-align: middle;
    }
    .dataTablePlanningOverzicht .planningactie {
      background-color: #EDEDED;
    }
    .dataTablePlanningOverzicht .planningregel.hide {
      display: none;
    }
    .dataTablePlanningOverzicht .planningregel .save {
      display: inline-block;
    }
    .dataTablePlanningOverzicht tr.hoofdregel:hover {
      background-color: #6D7D8D !important;
    }
    .dataTablePlanningOverzicht .planningactie .showHidePlanning {
      font-size: 25px;
      line-height: 22px;
      cursor: pointer;
    }
    .dataTablePlanningOverzicht .planningactie:not(.hidden) .showHidePlanning:before{
      content: "\f0d8";
    }
    .dataTablePlanningOverzicht tbody > tr.planningactie > td, .dataTablePlanningOverzicht.dataTablePlanningStappen tbody > tr.planningregel > td {
      border-right: none;
      border-left: none;

        border-top: 1px solid lightgrey;
        border-bottom: 1px solid lightgrey;

        color: black;
    }
    .dataTablePlanningOverzicht.dataTablePlanningStappen tbody > tr.planningregel > td.urenboeken.urenkwartieren.edit {
      min-width: 140px;
    }
    .dataTablePlanningOverzicht.dataTablePlanningStappen tbody > tr.planningregel > td.urenboeken.urenkwartieren {
      width: 5%;
    }
    .dataTablePlanningOverzicht.dataTablePlanningStappen tbody > tr.planningregel > td.urenboeken.uursoorten {
      width: 10%;
        position: relative;
    }
    .dataTablePlanningOverzicht.dataTablePlanningStappen tbody > tr.planningregel > td.urenboeken.opmerking {
      width: 20%;
    }
    .dataTablePlanningOverzicht.dataTablePlanningStappen tbody > tr.planningregel > td.urenboeken > .opmerking  {
      width: calc(100% - 38px);
        display: inline-block;
    }
    .dataTablePlanningOverzicht.dataTablePlanningStappen tbody > tr.planningregel > td.urenboeken > .uren, .dataTablePlanningOverzicht.dataTablePlanningStappen tbody > tr.planningregel > td.urenboeken > .kwartieren {
      width: calc(50% - 5px);
    }
    .dataTablePlanningOverzicht.dataTablePlanningStappen tbody > tr.planningregel > td.urenboeken > .uren > select, .dataTablePlanningOverzicht.dataTablePlanningStappen tbody > tr.planningregel > td.urenboeken > .kwartieren > select {
      width: 100%;
      padding: 0px;
      text-align: center;
    }
    .dataTablePlanningOverzicht tbody > tr.planningactie > td:nth-child(1), .dataTablePlanningOverzicht tbody > tr.hoofdregel > td:nth-child(1) {
      width: 2%;
    }
    .dataTablePlanningOverzicht tbody > tr.planningactie > td:nth-child(2) {
      width: 10%;
    }
    .dataTablePlanningOverzicht tbody > tr.planningactie > td:nth-child(3) {
      width: 7%;
    }

      .dataTablePlanningOverzicht tbody > tr.planningactie > td:nth-child(3) > select {
        width: 35px;
        padding-left: 0px;
        padding-right: 0px;
      }
      .dataTablePlanningOverzicht tbody > tr.planningactie > td:nth-child(3) > input {
        width: calc(100% - 35px);
        min-width: 65px;
      }

    .dataTablePlanningOverzicht tbody > tr.planningactie > td:nth-child(4) {
      width: 33%;
    }

      .dataTablePlanningOverzicht tbody > tr.planningactie > td:nth-child(4) > input, .dataTablePlanningOverzicht.dataTablePlanningStappen tbody > tr.planningregel > td:nth-child(4) > input {
        width: 100%;
      }

    .dataTablePlanningOverzicht tbody > tr.planningactie > td:nth-child(5) {
      width: 3%;
    }
    .dataTablePlanningOverzicht tbody > tr.planningactie > td:nth-child(6) {
      width: 10%;
    }
    .dataTablePlanningOverzicht tbody > tr.planningactie > td:nth-child(7) {
      width: 35%;
    }
    .dataTablePlanningOverzicht tbody > tr.planningactie .tijd {
      background-color: rgba(50,69,145,1);
      padding: 5px 15px;
      color: white;
    }
    .planningOverzicht .dataTables_scrollHead {
      display: none;
    }

    .dataTablePlanningOverzicht.dataTablePlanningStappen .vervolg {
      font-weight: bold;
      cursor: pointer;
    }
    .dataTablePlanningOverzicht.dataTablePlanningStappen .vervolg[data-vervolgstatus="0"] {
      color: #F09600;
    }


    .planningOverzicht .dagtotalen {
      margin-top: -10px;
      margin-bottom: 20px;
      border-bottom: 1px solid #EDEDED;

      width: 100%;
      display: flex;
      flex-flow: row;
      flex-wrap: nowrap;
      overflow-x: scroll;
    }
    .planningOverzicht .dagtotalen>div {
      float: left;
      margin: 0px 15px;
      text-align: center;
    }
    .planningOverzicht .dagtotalen>div:first-child {
      margin-left: 0px;
    }
    .planningOverzicht .dagtotalen>div:last-child {
      margin-right: 0px;
    }


    .planning .filters .filter-velden input {
      width: 100%;
      font-size: 13.3333px;
    }
    .planning .filters .filter-velden #filter_datum_soort, .planning .filters .filter-velden #filter_datum {
      width: 50%;
      float: left;
    }
    @media(max-width:1650px){
      .planning .filters .filter-velden #filter_datum_soort, .planning .filters .filter-velden #filter_datum {
        width: 100%;
      }
    }
    .planning .filters .filter-velden input, .planning .filters div.filter-buttons:nth-child(1) {
      margin-bottom: 5px;
    }
    .planning .filters .filter-velden .clearItem {
      position: absolute;
      right: 0px;
      top: 0px;
      cursor: pointer;
    }
    .planning .filters .filter-velden .clearItem .fa {
      color: #A7B1C2;
    }
    .planning .filters .filter-buttons>button {
      text-align: left;
      font-weight: normal;
    }
.planning .filters .filter-buttons>button .fa, .planning .filters .filter-buttons>button .far,.planning .filters .filter-buttons>.btn .fa, .planning .filters .todo-buttons>button .fa, .planning .filters .todo-buttons>.btn .fa {
      width: 23px;
      padding-right: 5px;
    }
    .planning .filters .filter-buttons>button:nth-child(1) {
      width: 120px;
    }
    .planning .filters .filter-buttons>button:nth-child(2) {
      width: 125px;
    }
    .planning .filters .filter-buttons>button:nth-child(3) {
      width: 180px;
    }

    .planning .filters .detailsverbergen:not(.verborgen) .tonen {
      display: none;
    }
    .planning .filters .detailsverbergen.verborgen .verbergen {
      display: none;
    }

    .planning .filters .todo-buttons .btn {
      float:right;
      width: 165px;
      text-align: left;
      margin-bottom: 5px;
      font-weight: normal;
    }

    .planning .filters .ibox-content hr {
      margin: 10px 0px;
    }
    .planning .filters .ibox-content .legenda{
      text-align: right;
    }
    .planning .filters .ibox-content .legenda > div, .dataPlanningLegenda  > div {
      display: inline-block;
      margin-left: 20px;
      color: black;
    }
    .dataPlanningLegenda {
      display: inline-block;
    }
   .dataPlanningLegenda  > div {
     margin-top: 30px;
     margin-bottom: 10px;

     display:flex;
     align-items:center;
     float:left;
   }
   .dataPlanningLegenda  > div > i.planningStatus {
     margin-left: 5px;
   }



    /* iCheck plugin Square skin, green
    ----------------------------------- */
    .icheckbox_square-green,
    .iradio_square-green {
        display: inline-block;
        *display: inline;
        vertical-align: middle;
        margin: 0;
        padding: 0;
        width: 16px;
        height: 16px;
        background: url('../css/plugins/iCheck/green.png') no-repeat;
        border: none;
        cursor: pointer;
    }

    .icheckbox_square-green {
        background-position: 0 0;
    }
    .icheckbox_square-green.hover {
        background-position: -24px 0;
    }
    .icheckbox_square-green.checked {
        background-position: -51px -3px;
    }
    .icheckbox_square-green.disabled {
        background-position: -72px 0;
        cursor: default;
    }
    .icheckbox_square-green.checked.disabled {
        background-position: -96px 0;
    }

    .iradio_square-green {
        background-position: -120px 0;
    }
    .iradio_square-green.hover {
        background-position: -144px 0;
    }
    .iradio_square-green.checked {
        background-position: -168px 0;
    }
    .iradio_square-green.disabled {
        background-position: -192px 0;
        cursor: default;
    }
    .iradio_square-green.checked.disabled {
        background-position: -216px 0;
    }

    /* HiDPI support */
    @media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
        .icheckbox_square-green,
        .iradio_square-green {
            background-image: url(green@2x.png);
            -webkit-background-size: 240px 24px;
            background-size: 240px 24px;
        }
    }

.selectOrderViewType div {
  float:left;
  border-left: 1px solid #2F4050;
  border-top: 1px solid #2F4050;
  border-bottom: 1px solid #2F4050;
  padding: 5px 10px;
  background-color: white;
  color: #2F4050;
}
.selectOrderViewType div:last-child {
  border-right: 1px solid #2F4050;
}
.selectOrderViewType div, .selectOrderViewType div * {
  color: #2F4050;
  font-weight: normal;
}
.selectOrderViewType div.active {
  background-color: #2F4050;
}
.selectOrderViewType div.red {
  background-color: #E63719;
}
.selectOrderViewType div.active, .selectOrderViewType div.active *,.selectOrderViewType div.red,.selectOrderViewType div.red * {
  color: white;
}


/* FORMULIEREN */
form .form-group.row {
  margin-bottom: 4px;
}
form .form-group input, form .form-group select, form .form-group textarea {
  padding: 4px 6px;
}
.modal form .form-group input, .modal form .form-group select, .modal form .form-group textarea {
    border:none;
}

form .form-group select.form-control:not([size]):not([multiple]) {
  height: 27px;
}


.sweet-alert .sa-icon.sa-warning {
  border-color: #F09600 !important;
}
.sa-icon.sa-warning.pulseWarning > span {
  background-color: #F09600 !important;
}

@media (max-width: 767px) {
    .dataTable .dropdown-menu {
        position: static !important;
    }
}
@media (min-width: 768px) {
    .tableResponsiveOverflow .dt-scroll-body, .tableResponsiveOverflow .table-responsive.overflow {
        overflow: inherit !important;
    }
}

.dashboard .nummers {
  font-size: 60px;
  line-height: 50px;
  font-weight: bold;
  color: red;
}
.dashboard .nummers.goed {
  color: #C8D200;
}
.dashboard h2 {
  color: #2F4050;
  text-align: right;
  font-weight: bold;
}


.dashboard .planning .dagtotalen,
.dashboard .planning .planningOverzicht  > div.dt-container > div.ibox-title,
.dashboard .planning .filters,
.dashboard .planning .planningactie>td:nth-child(6),
.dashboard .planning .planningactie>td:nth-child(7),
.dashboard .planning .planningregel>td:nth-child(6),
.dashboard .planning .planningregel>td:nth-child(7),
.dashboard .planning .planningregel>td:nth-child(8),
.dashboard .planning .planningregel>td:nth-child(9),
.dashboard .planning .planningregel>td:nth-child(10)
{
  display: none !important;
}

.dashboard .planning .legenda {
  padding-top: 20px;
}
.dashboard .planning .legenda > div {
  display: inline-block;
  padding-right: 20px;
}
.dashboard .planning .planningOverzicht {
  margin-bottom: 0px;
}
.dashboard .planning .planningOverzicht  > .dt-container > div.ibox-content {
  padding: 0px;
}

.dashboard #collegas {
  width: 100%;
}

.popover {
  z-index: 9999 !important;
}

.sweet-alert button {
  border-radius: 0px !important;
}

/*
Bootstrap aanpassing */
@media(min-width: 1200px) {
  .remove-padding-left-xl {
    padding-left: 0px !important;
  }
}

.icon-checkbox,.icon-checkbox-o {
  width: 16px;
  height: 16px;
  margin-bottom: -3px;
}
.icon-checkbox:before,.icon-checkbox-o:before {
  content: " ";
  display: block;
  background-size:cover;
  width: 100%;
  height: 100%;
}
.icon-checkbox:before {
  background-image: url('/theme/default/custom/Checked_Checkbox.svg');
}
.icon-checkbox-o:before {
  background-image: url('/theme/default/custom/Empty_Checkbox.svg');
}


.modalVervolgOpgeven .directVervolg .dataPlanningLegenda {
  display: none;
}

.dataTablePlanning tbody > tr.child > td:nth-child(4){
  display: none;
}
.modalVervolgOpgeven .directVervolg .dataTablePlanning tbody > tr.child > td:nth-child(4){
  display: revert;
}


/* Order lock */
body.orderlock .addButton, body.orderlock .addPlanningActie, body.orderlock .editplanning, body.orderlock .editPlanningRegel, body.orderlock .removeRow {
  display: none !important;
}


#overzichturen #overzichturentabel > tbody > tr > td:nth-child(3) {
  text-align: right;
}
#overzichturen #overzichturentabel > tbody > tr > td:nth-child(3) .euro {
  float: left;
}


.hideSpan > span {
  display: none;
}

.clockpicker-button {
  color: black;
}


.modal.note-modal .checkbox input[type="checkbox"]{
	opacity: 1 !important;
}
.modal.note-modal .checkbox label::before {
	display: none !important;
}



/* Nieuwe planning */
.planningOverzichtPagina .planningDatumContainer > div.ibox-content > table.dataTablePlanningOverzicht {
    border: 1px solid black;
}

.mini-navbar li.active .nav-second-level{
    left: 35px;
}