/* bulma to bootstrap  changing to grid and flex most is handled in core.js when bsThis() is called  */

.bsTopDiv{ height: 10px; }
.boxtitle{ margin-top: 10px; padding-bottom: 10px; }
div.level-left.subtitle i{ font-size: 180%; margin-right: 1rem }
.subtitle{ font-size: 1.8rem} 
/* input forms */
.mini{ font-size: .8rem; color: #0071bc }
div.legend{ font-weight: 500; font-size: 1.1rem }
.input{ margin-right: 3px; }   

.form-check-label{ font-size: .9rem; padding-right: 1rem; }
.btn-blue{ background-color: #0071bc !important; color: white !important  }




/* buster colors */
.is-red{ color: #a500000 ; }
.is-green{ color: green;}
.is-lime {color: #96c53e; }
/* blue */
.is-blue{ color: #0071bc; }
.is-banner{ color: #0071bc; }
.is-heaven{ color: #03a9f4;}
.is-bluegrey{ color:#bfcbd9; }
.is-navy{ color:#03a9f4; }
.is-input{ color: #494949; }
.is-darkgrey{ color: #494949; }
.is-pencilcolor{ color: rgba(65,81,101,0.6); }
.is-btn-blue {color:#4e75ad; }
.is-lil-blue {color:#f6f8fa; }
.is-bootstrapblue {color:#428bca; }
/* bulma overrule*/
.is-primary {color:#428bca; }

.is-gold {color: goldenrod}
.is-silver {color: silver}
.is-orange {color:coral}
.is-red {color:red}
.is-green {color:green}
.is-olive { color:olivedrab }
.is-lightgrey {color:lightgray}
.is-grey {color: #999 }
.is-midgrey{ color: #666 }
.is-darkgrey{ color: #333 }

.hidden{ display: none}
.block{ display: block}
.is-background{
background-color: rgb(247,247,250); 
background: linear-gradient(111deg, rgba(247,247,250,1) 0%, rgba(246,248,250,0.6) 53%, rgba(250,250,250,1) 100%); 
background-size: cover;	
}

.btn{
    border-radius: 0px;
}

div.statbox{
    width: 100px;
    height: 100px;
    border: solid 1px #ccc;
    padding: 12px;
    padding-top: 25px;
    text-align: center;
    font-size: 90%;
}
.stat0{
    background-color:  rgba(65,81,101,0.6);
}
.stat1{
    background-color: orange;
}
.stat2{
    background-color: forestgreen;
}
.stat3{
    background-color: forestgreen;
}
div#Active table.table.table-condenced.table-bordered.table-compact tbody tr td{
    padding: .30rem
}
#content{ padding-top: 25px; }

/* media mobile */
@media (max-width: 768px)  { #content{ padding-top: 80px;  }
    .dataTables_filter label i.fa.fa-search{ display: none}
    .dataTables_filter {  float: none; text-align:none}
    .dataTables_wrapper .dataTables_filter input { text-align: left; width: 90vw;}
   div.level-left.subtitle i{ font-size: 140%; margin-right: 1rem }
.subtitle{ font-size: 1.4rem} 
    li.nav-item.dropdown a#navbarDropdownMenuLink.nav-link.dropdown-toggle{ padding: .7rem 1.1rem;font-size: 1.2rem;border-bottom: solid 1px white; }
    
  }
 @media (max-width: 640px)  { 
  .dataTables_wrapper .dataTables_filter input { text-align: left; width: 90vw;}
 div.level-left.subtitle i{ font-size: 130%; margin-right: 1rem }
.subtitle{ font-size: 1.3rem} 
/* dropdown menu */     
.dropdown-item {display: block;width: 100%;padding: .7rem 1.2rem;font-weight: 400;font-size: 1.1rem;border-bottom: solid 1px #999; }
 
     
  }


/*dropdowns mobile dt*/
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before{ border-radius: 0;  background-color: #0071bc; content: '\f329';	font-weight: 300; /* add square*/
	font-family: 'Font Awesome 5 Pro';box-shadow:none; border: none}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before{ border-radius: 0;  background-color: #0071bc; content: '\f32c';	font-weight: 300; /* add square*/	font-family: 'Font Awesome 5 Pro';box-shadow:none; border: none}
.dataTables_filter{ padding-top: 15px }
/* colapsed table mobile */
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {  float: none; text-align: right}

table.dataTable > tbody > tr.child {background: #f6f8fa;color: #4e75ad; }
table.dataTable > tbody > tr.child:hover {background: #f6f8fa;color: #4e75ad; }
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child span.dtr-title { display: none}
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child  span.dtr-data button{ border: solid 1px #0071bc; min-width: 45px; margin-right: 10px; }
table.dataTable > tbody > tr.child ul.dtr-details > li {  border: none; padding: .2em 0;        padding-top: 0.2em;}

/* buttons */
.btn {
	background: #f6f8fa;
	color: #4e75ad;
	padding: 5px 5px;
	border: 0;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	text-shadow: none;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	filter: none;
	margin: 0px;
}

.table.kmotoolstable.dataTable.no-footer.dtr-inline tbody tr td button.button.btn{ border: solid 1px #0071bc;  min-width: 45px;}
.btn-insert {
	color: #FFF;
	background: #0071bc;
}
.btn-insert:hover {
	color: #f6f8fa;
	background: #4e75ad
}
.btn-insert:before {
	content: '\f0fe ';
	font-weight: 400; /* add square*/
	font-family: 'Font Awesome 5 Pro';
}
.btn-insert:after {
	content: '  Voeg toe';
	font-family: 'Open Sans', sans-serif !important;
}
.btn-back {
	color: white;
	background-color: #0071bc;
}
.btn-back:hover {
	color: #f6f8fa;
	background: #4e75ad
}
.btn-back:before {
	content: '\f053';
	font-weight: 400; /* add square*/
	font-family: 'Font Awesome 5 Pro';
}
/* buttons in forms*/
.btn-form-add {
	color: #4e75ad;
	background: #f6f8fa;
	width: 85px;
}
.btn-form-add:hover {
	color: #f6f8fa;
	background: #4e75ad
}
.btn-form-add:before {
	content: '\f0fe ';
	font-weight: 400; /* add square*/
	font-family: 'Font Awesome 5 Pro';
}
.btn-form-add:after {
	content: '  Voeg toe';
	font-family: 'Open Sans', sans-serif !important;
}
.btn-form-update {
	color: #4e75ad;
	background: #f6f8fa;
	width: 85px;
}
.btn-form-update:hover {
	color: #f6f8fa;
	background: #4e75ad
}
.btn-form-update:before {
	content: '\f044 ';
	font-weight: 400; /* add square*/
	font-family: 'Font Awesome 5 Pro';
}
.btn-form-update:after {
	content: '  Pas aan';
	font-family: 'Open Sans', sans-serif !important;
}
.btn-update {
}
.btn-detail {
	background: #f6f8fa;
	color: #4e75ad;
}
.btn-detail:hover {
	color: #f6f8fa;
	background: #4e75ad
}
.btn-detail:after {
	content: '\f05a';
	font-weight: 400; /* reg*/
	font-family: 'Font Awesome 5 Pro';
}
.btn-edit {
	background: #f6f8fa;
	color: #4e75ad;
}
.btn-edit:hover {
	color:  lightgreen;
	background: #4e75ad
}
.btn-edit:after {
	content: '\f040';
	font-weight: 300; /* light*/
	font-family: 'Font Awesome 5 Pro';
}
.btn-mail {
	background: #f6f8fa;
	color: #4e75ad;
}
.btn-mail:hover {
	color:  orange;
	background: #4e75ad
}
.btn-mail:after {
	content: '\f1d8';
	font-weight: 300; /* regular*/
	font-family: 'Font Awesome 5 Pro';
}
 .btn-login {
	background: #f6f8fa;
	color: #4e75ad;
}
.btn-login:hover {
	color:  darkblue;
	background: #4e75ad
}
.btn-login:after {
	content: '\f2f6';
	font-weight: 300; /* regular*/
	font-family: 'Font Awesome 5 Pro';
}


.btn-delete {
	background: #f6f8fa;
	color: #4e75ad;
}
.btn-delete:hover {
	color:red;
	background: #4e75ad
}
.btn-delete:after {
	content: '\f1f8';
	font-weight: 300; /* light*/
	font-family: 'Font Awesome 5 Pro';
}
.btn-page {
	background: #f6f8fa;
	color: #4e75ad;
}
.btn-page:hover {
	color: #f6f8fa;
	background: #4e75ad
}
.btn-page:after {
	content: '\f1ea';
	font-weight: 300; /* newspaper*/
	font-family: 'Font Awesome 5 Pro';
}
.btn-view {
	background: #f6f8fa;
	color: #4e75ad;
}
.btn-view:hover {
	color: #f6f8fa;
	background: #4e75ad
}
.btn-view:after {
	content: '\f06e';
	font-weight: 300; /* newspaper*/
	font-family: 'Font Awesome 5 Pro';
}
.btn-link {
	background: #f6f8fa;
	color: #4e75ad;
}
.btn-link:hover {
	color: #f6f8fa;
	background: #4e75ad
}
.btn-link:after {
	content: '\f0c1';
	font-weight: 300; /* newspaper*/
	font-family: 'Font Awesome 5 Pro';
}
.btn-cta {
	background: #f6f8fa;
	color: #4e75ad;
}
.btn-cta:hover {
	color: #f6f8fa;
	background: #4e75ad
}
.btn-cta:after {
	content: '\f58e';
	font-weight: 300; /* grip cta*/
	font-family: 'Font Awesome 5 Pro';
}
.btn-red:hover{ background: #0071bc; color: red}

/* height */
.h-50{ width: 100%; min-height: 50px; height: 50px}
.h-100{ width: 100%; min-height: 100px; height: 100px}
.h-200{ width: 100%; min-height: 200px; height: 200px}