/* color palette */
:root {
  --backgroundcolor: #fafafa;   
}
/* end color palette */


a {
    color: #878787 !important;
}




.toast-info {
  background-color: #E31C1C !important;
}

.footer {
    height: 35px;
    padding: 7px;
  color: #878787;  
}

html, body {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  overflow-x: hidden;
}

p {
margin: 5px 5px 8px 5px;
}



.sidebar[data-color="white"] .nav li a, .sidebar[data-color="white"] .nav li a i, .sidebar[data-color="white"] .nav li a[data-toggle="collapse"], .sidebar[data-color="white"] .nav li a[data-toggle="collapse"] i, .sidebar[data-color="white"] .nav li a[data-toggle="collapse"] ~ div > ul > li .sidebar-mini-icon, .sidebar[data-color="white"] .nav li a[data-toggle="collapse"] ~ div > ul > li > a, .off-canvas-sidebar[data-color="white"] .nav li a, .off-canvas-sidebar[data-color="white"] .nav li a i, .off-canvas-sidebar[data-color="white"] .nav li a[data-toggle="collapse"], .off-canvas-sidebar[data-color="white"] .nav li a[data-toggle="collapse"] i, .off-canvas-sidebar[data-color="white"] .nav li a[data-toggle="collapse"] ~ div > ul > li .sidebar-mini-icon, .off-canvas-sidebar[data-color="white"] .nav li a[data-toggle="collapse"] ~ div > ul > li > a {
    color: #9a9a9a;
    opacity: 1 !important;
    margin: 2px 15px 0;
    
}

.form-check-radio input[type="radio"]:checked + .form-check-sign::after {
    opacity: .8;
}

/* start styling file/image input */

.custom__form input {
  opacity: 0;
  height: 0;
}

.custom__image-container {
  /* display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;  */
}

 .custom__image-label:hover {
  background-color: #E8231A;
}

.custom__image-container label {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 2.35em;
  height: 2.35em;
  background-color: #bc1716;
  border: solid 0px black;
  border-radius: 5px;
  margin-right: 5px;

}

.custom__imageinput {
display: none;
}

/* end styling file/image input */

.fa-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  font-size: inherit;
  color: inherit;
  vertical-align: middle;
  fill: #E8231A;
}

.fa-button-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  
  font-size: inherit;
  color: white;
  vertical-align: middle;
  fill: white;
}

.fa-link-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    font-size: inherit;
    color: #f7f7f7;
    vertical-align: middle;
    fill: #a1a1a1;
    margin-right: 4px;
    margin-top: -1px;
}
}

a, a:hover{
  color:#252422;
}

small {
  font-size: 85%;
}

.table small{
  color:#6c757d ;
  font-weight:400;
}
button:focus {
    outline: none;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: #bc1716;
}

/*driehoekje active linkerkolom*/
@media screen and (min-width: 992px){

  .sidebar .sidebar-wrapper li.active > a:not([data-toggle="collapse"]):after, .sidebar .sidebar-wrapper li.active > [data-toggle="collapse"] + div .nav li:after {
  border-right: 17px solid var(--backgroundcolor) !important;
  border-right: 17px solid var(--backgroundcolor) !important;
}
  
.socialimage {
  width: 80%;
}
  
}

.sidebar .nav p, .off-canvas-sidebar .nav p {
    height: 20px ;       /* default: auto */
}
  
.sidebar_collapse {
  color: #777777 !important  ;
  font-size: 110%;
}  

 
.main-panel {
    background-color:var(--backgroundcolor);
}
.sidebar[data-active-color="danger"] .nav li.active > a, .sidebar[data-active-color="danger"] .nav li> a:focus, .sidebar[data-active-color="danger"] .nav li.active > a i, .sidebar[data-active-color="danger"] .nav li.active > a[data-toggle="collapse"], .sidebar[data-active-color="danger"] .nav li.active > a[data-toggle="collapse"] i, .sidebar[data-active-color="danger"] .nav li.active > a[data-toggle="collapse"] ~ div > ul > li.active .sidebar-mini-icon, .sidebar[data-active-color="danger"] .nav li.active > a[data-toggle="collapse"] ~ div > ul > li.active > a, .off-canvas-sidebar[data-active-color="danger"] .nav li.active > a, .off-canvas-sidebar[data-active-color="danger"] .nav li.active > a i, .off-canvas-sidebar[data-active-color="danger"] .nav li.active > a[data-toggle="collapse"], .off-canvas-sidebar[data-active-color="danger"] .nav li.active > a[data-toggle="collapse"] i, .off-canvas-sidebar[data-active-color="danger"] .nav li.active > a[data-toggle="collapse"] ~ div > ul > li.active .sidebar-mini-icon, .off-canvas-sidebar[data-active-color="danger"] .nav li.active > a[data-toggle="collapse"] ~ div > ul > li.active > a {
    color: #E5231B !important;
    opacity: 1;
}
.navbar a:not(.btn):not(.dropdown-item) {
    color: #6c757d;
}
.title {
	font-weight: 400; 
}
textarea{
  resize:both !important;
}
textarea.form-control {
    max-width: 100%;
  max-height: 800px;
}
.nav-tabs .nav-item .nav-link.active {
    color: #e31c1b;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
}
.text-info, a.text-info:focus, a.text-info:hover {
    color: inherit !important;
}

.alert-info {
  	background-color: #ffffff !important;
    border: 1px solid #bc1716;
    border-radius: 4px;
    color: #2c2c2c;
}

.alert-primary {
  	background-color: #FFF4F4 !important;
    border: 1px solid #FFF4F4;
    border-radius: 4px;
    color: #BC1716;
}

.alert-danger {
  	background-color: #bc1716 !important;
    border: 1px solid #bc1716;
    border-radius: 4px;
    color: #FFF;
}

.alert-warning {
  	background-color: #FCCF71 !important;
    border: 1px solid #FCCF71;
    border-radius: 4px;
    color: #FFF;
}
.card{
  border:1px solid #dee2e6;
  border-radius: 4px;
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0);
}
#accordion .card, #accordion .card .card-header{
  border:none;
  border-radius: 0;
}
#accordion .card-collapse .card .card-body {
    padding: 15px 15px 0 15px;
    border: 0;
    background-color: #ffffff !important;
    border-radius: 0;
}
#accordion .card-header a{
  text-decoration:none;
  font-weight:bold;
}
.card.card-plain {
    background-color: #f2f2f2;
    border-radius: 0;
}
.card-title{
  color:#bc1716;
}
.card .card-header {
  padding: 15px 15px 0 15px;
  border: 0;
  background-color:#ffffff !important;
  border-radius:4px 4px 0 0;
}
.accordion-option .toggle-accordion:before {
  content: "Alles uitklappen";
}
.accordion-option .toggle-accordion.active:before {
  content: "Alles inklappen";
}
.vollehoogte{
	height:100%;
	float:left;
	/*padding-bottom:2rem;*/
}

.card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i.linksuitlijnen{
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    -webkit-transform: rotate(360deg)!important;
    transform: rotate(360deg)!important;
}
.btn.btn-icon, .navbar .navbar-nav > a.btn.btn-icon{
    height: 2rem;
    min-width: 2rem;
    width: 2rem;
}

.btn{
  //	background-color:#bc1716;
	border-radius: 4px;
    padding: 6px 12px;
}

.btn-xs {
    padding: 0px 7px 0px 7px;
    height: 24px;
}


.btn-primary {
	background-color:#bc1716;
}

.btn:disabled {
  background: #d3d3d3;
  color: #FFF;

}

.btn-annuleren{
	background-color: #BBBEC1; 
}
.btn-verwijderen{
  	background-color:#000000;
}

.btn-outline2 {
  font-weight:400;
  background-color: transparent;
  border:solid;
  border-width: 1px;
  border-color: grey;
  color: grey;  
}

.btn-outline-red {
  font-weight:400;
  background-color: transparent;
  border:solid;
  border-width: 2px;
  border-color:  #212529;
  color: #212529;
}


.btn-leeg{
  text-align:left !important;
  font-weight:400 ;
  background: transparent;
  opacity: 0.3;
  border:none;
  padding:0.5em 1em;
  margin:0;
  color: #212529;
  width:100%;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn:active:focus, .btn:active:hover, .btn.active:focus, .btn.active:hover, .show > .btn.dropdown-toggle, .show > .btn.dropdown-toggle:focus, .show > .btn.dropdown-toggle:hover, .navbar .navbar-nav > a.btn:hover, .navbar .navbar-nav > a.btn:focus, .navbar .navbar-nav > a.btn:active, .navbar .navbar-nav > a.btn.active, .navbar .navbar-nav > a.btn:active:focus, .navbar .navbar-nav > a.btn:active:hover, .navbar .navbar-nav > a.btn.active:focus, .navbar .navbar-nav > a.btn.active:hover, .show > .navbar .navbar-nav > a.btn.dropdown-toggle, .show > .navbar .navbar-nav > a.btn.dropdown-toggle:focus, .show > .navbar .navbar-nav > a.btn.dropdown-toggle:hover {
    background-color: #e31c1b !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
.btn-neutraal, a.btn-neutraal, i.linksuitlijnen, .buttons-columnVisibility{
  	background: #ffffff;
    border: 1px solid #dee2e6;
    color: #A49E93;
    opacity: 1;
    filter: alpha(opacity=100);
    border-radius: 4px;
    padding: 4px;
    text-decoration: none;
}
.buttons-columnVisibility::before{
  font-family: FontAwesome;
  content: "\f00c";
  padding-right:3px;
}
.buttons-columnVisibility.active::before{
  color:#bc1716;
}
.dt-buttons{
    position: relative;
    float: left;
}
i.linksuitlijnen{
  font-size: 1.1em;
  color:#A49E93 !important;
  font-weight: 900;
  font-size:1.1em;
  cursor:pointer;
  margin-right:4px;
}
.btn-group-toggle>.btn{
    border: 1px solid #dee2e6;
  	background-color:#ffffff;
    color: #A49E93;
    opacity: 1;
    filter: alpha(opacity=100);
    border-radius: 4px;
    padding: 4px;
    text-decoration: none;
}

.btn-group-toggle>.btn.active{
	background-color:#bc1716 !important;
  	border: 1px solid #dee2e6 !important;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 16px 6px 6px 6px;
    vertical-align: middle;
}
table, .table, table.dataTable{
	border-collapse: collapse !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.02) !important;
}
.table-striped tbody tr:hover {
    background-color: rgba(0,0,0,.05) !important;
}
.table-bordered td, .table-bordered th {
    border-left: none;
    border-right: none;
}
.table-bordered table td, .table-bordered table th {
    border: none;
    padding: 0;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    vertical-align: top;
}
.nav-link{
	font-weight: bold; 
  }
.nav-tabs-navigation{
    border-bottom: 1px solid #e31c1b;
}
.nav-tabs .nav-item .nav-link.active:before, .nav-tabs .nav-item .nav-link.active:hover:before, .nav-tabs .nav-item .nav-link.active:focus:before {
    border-bottom: 11px solid #e31c1b;
    bottom: 6px;
}
.nav-tabs .nav-item .nav-link.active:after, .nav-tabs .nav-item .nav-link.active:hover:after, .nav-tabs .nav-item .nav-link.active:focus:after {
    border-left: 11px solid rgba(188, 23, 22, 0);
    border-right: 11px solid rgba(188, 23, 22, 0);
}
.pagination .page-item.active > .page-link, .pagination .page-item.active > .page-link:focus, .pagination .page-item.active > .page-link:hover, .btn-neutraal:hover {
    color: #e31c1b !important;
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: none !important;
}
/* button toont meer data bij klein scherm*/
table.dataTable.dtr-column > tbody > tr > td.control:before, table.dataTable.dtr-column > tbody > tr > th.control:before {
  margin-left: -16px;
  content: '+';
  color: #A49E93; //#bc1716;
  border-color: transparent;  
  background-color: transparent ; 
  font-family: "FontAwesome";
  font-size: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 20px;
  height: 11px;
  content: '\f0fe'; //'\f067';  
  box-shadow: 0 0 0px #FFF;  
  bottom: 0;
}

table.dataTable.dtr-column > tbody > tr.parent td.control:before, table.dataTable.dtr-column > tbody > tr.parent th.control:before {
  content: '-';
  color: #A49E93; //#bc1716;
  border-color: transparent;    
  background-color: transparent ; 
  font-family: "FontAwesome";
  font-size: 20px;
  padding-top: 5px;
  padding-bottom: 5px;  
  content: '\f146'; //'\f067';  
  box-shadow: 0 0 0px #FFF;     

}


.radiolabel {
    height: 2rem;
    min-width: 2rem;
    width: 2rem;
    border-radius: 4px;
    padding: 0;
    font-size: 0.9375rem;
    overflow: hidden;
    position: relative;
    line-height: normal;
  	margin-top:-12px;
  
}
.radiolabel .fas:before{
    position: absolute;
    top: 50%;
    left: 70%;
    -webkit-transform: translate(-12px, -12px);
    transform: translate(-12px, -12px);
    line-height: 1.5626rem;
    width: 24px;
}
input[type="radio"] {   
  display: none; 
}
#vrijwilligerslijst input[type="radio"] {   
  display: block; 
}
.radio1 + label, .radio2 + label, .radio3 + label{
  background-color:  #ffffff;
  border: 1px solid #dee2e6 !important;
}
 .radio1:checked + label, .radio2:checked + label, .radio3:checked + label {
  color: #000000;
  border: 1px solid #000000 !important;
}  
.radio1:hover + label {  
  color: #E64335;   
}
.radio2{
  padding-left:12px !important;
  padding-right:12px !important;
}
.radio2:hover + label { 
  color: #808080; 
}  
.radio3:hover + label {  
  color: #6BD098; 
}

#vrijwilligerslijst .btn-group-toggle>.btn {
    color: #A49E93 !important;
    border: 1px solid #dee2e6 !important;
    background: #ffffff !important;
}
#vrijwilligerslijst .btn-group-toggle>.btn.active{
    color: #bc1716 !important;
}
#vrijwilligerslijst .btn-group-toggle>.btn:hover {
    color: #252422 !important;
}
#vrijwilligerslijst_paginate{
  display:none !important
}
#vrijwilligerslijst_filter{
  float:right;
}
.table .form-check label .form-check-sign::before, .table .form-check label .form-check-sign::after {
    top: 0; 
    left: 4px;
}
.form-check .form-check-sign::before, .form-check .form-check-sign::after {
    border: 1px solid #dee2e6 !important;
    border-radius: 4px;
    background-color: #ffffff;
}
.form-check .form-check-sign::after {
	color: #bc1716 !important;
}

.form-check-label {
font-size: 100% !important;
  color: #404040 !important;
}


.form-check-label input[type="checkbox"]:checked + .form-check-sign:before{
    background-color: #bc1716;
}

.modal-footer{
  padding: 20px 10px;
}

/* option lists by default have the text cut of below: decrease padding to avoid. */
select.form-control {
    padding: 2px 10px 2px 7px !important;
}

.font-sm {
  font-size: 85%;
}