/* --------------------------------------------------------------------------
ToolBox 3.0 Stylesheet
-------------------------------------------------------------------------- */

body {
	overflow-y:scroll;
}

.card_navigatie_item {
	display:block;
	width:100%;
	background-color:#eee !important;
	
	margin-bottom:8px;
	
	cursor:pointer;
}

.card_navigatie_item:hover, .card_navigatie_item:focus {
	background-color:#ddd !important;
}

.card_navigatie_subitem {
	background-color:#333 !important;
	color:#fff !important;
}

/* column fixed height */
.col_fh_8 {
	display:block;
	
	height:8rem;
}

.account_avatar {
	width:64px;
	height:64px;
	display:block;
	margin:1rem auto;
}

.col_editable {
	border:1px solid #555 !important;
	background-color:#fff !important;
}

.col_editable:hover, .col_editable:focus {
	border:1px solid #333 !important;
	cursor:pointer;
	background-color:#eee !important;
}

.col_editable_menu {
	background-color:red !important;
	position:relative;
	border:2px solid blue;
	right:1rem;
	width:2rem;
	height:4rem;
	display:block;
	float:right;
}


.row_editable_menu {
	background-color:blue !important;
	position:relative;
	top:0rem;
	right:1rem;
	width:2rem;
	height:6rem;
}


.cnt_editable {
	display:block;
	width:100%;
	margin:0 auto;
	
	background-color:#eee;
	border:1px solid #333;
}

.cnt_editable_menu {
	background-color:yellow !important;
	position:relative;
	top:0rem;
	right:1rem;
	width:6rem;
	height:2rem;
	border:2px dashed brown;
}



.col_editable_selected {
	background-image: url("images/ed_bg.png");
}

.afbeelding_thumb {
	display:inline-block !important;
	width:6rem !important;
	height:10rem !important;
	margin-right:0.5rem !important;
	background-color:#88beea !important;
	
	box-shadow:4px 4px 8px #333;
}

.afbeelding_thumb * {
	font-size:.6rem !important;
}

.afbeelding_thumb img {
	width:5rem !important;
	height:5rem !important;
	display:block !important;
	margin:0 auto !important;
	border:4px solid #333 !important;
}

.afbeelding_thumb_acties {
	display:block;
	width:100%;
	height:4rem !important;
	border:4px solid #777 !important;
	text-decoration:none !important;
	color:#fff !important;
	background-color:red !important;
}

.afbeelding_thumb_acties * {
	text-decoration:none !important;
	color:#fff !important;
	
}

/* -------

Bootstrap5 override

-----*/

#navbar_main {
	margin:0 0 16px 0 !important;
	background-color:#333 !important;
}


.btn {
	font-weight:bold;
}

nav .active, nav .active * {
	color:#fff !important;
	font-weight:bold !important;
}

/* 

override tab active...

*/
.nav-tabs, .nav-tabs * {
	color:#333 !important;
}

.nav-tabs .active {
	font-weight:bold !important;
}


.dropdown-item:focus, .dropdown-item:hover, .dropdown-item:active {
	color:#fff !important;
	background-color:#333 !important;
}


#tb_fixed_footer {
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	height:auto;
	min-height:1rem;
	background-color:#eee;
	z-index:9999;
}

#tb_btn_toggle {
	display:inline-block;
	margin:1rem;
	padding:0.32rem 1.2rem 0.32rem 0.32rem;
	width:auto;
	
	border-radius:4rem;
	
	background-color:#ffbb00;
	
	text-decoration:none;
	
	font-weight:bold;
	font-size:1.6rem;
	
	color:#333;
}

#tb_fixed_footer p  {
	display:inline-block;
	font-size:1.6rem;
	float:left;
	margin:1.6rem 0 0 0;
	padding:0 0 0 1.6rem;
}

#tb_btn_toggle img {
	width:3.2rem;
	height:3.2rem;
}

body {
	background-image: linear-gradient(to right, #999 , #fff);
}

.form_aanmelden {

	display:block;
	width:32rem;
	
	padding:1rem;
	
	margin:2rem auto 1rem auto;
	
	background-color:#fff;
	
	box-shadow:4px 4px 16px #ccc;
	
	border-radius:0.32rem;
	
}

.form_aanmelden img {
	width:64px;
	height:auto;
	
	display:block;
	margin:1rem auto;
}


/* Small screens (final) override */
@media screen and (max-width: 992px) {
	
	main {
		display:block;
		width:100%;
		padding-top:6rem;
		/*background-color:red !important;*/
	}
	
	nav, nav * {
		background-color:#eee !important;
		color:#333 !important;
	}
	
	.navbar-brand {
		display:block !important;
		margin:0 0 2rem 0 !important;
		background-color:red !important;
		padding:1rem !important;
	}
	
	#tb_btn_toggle {
		display:block;
		margin:1rem auto;
		width:16rem;
		font-size:1.2rem;
	}
	
	#tb_btn_toggle p * {
		display:block !important;
		background-color:red !important;
		margin-left:2rem !important;
		width:100rem !important;
		height:10rem !important;
	}
	
	#tb_btn_toggle img {
		width:1.6rem;
		height:auto;
	}
	
	.form_aanmelden {
		
		width:80% !important;
		
	}
}

.text-blue {
	color:#00aaff !important;
}

.text-orange {
	color:#ffbb00 !important;
}

.text-green {
	color:#00ff55 !important;
}

.text-red {
	color:#ff0088 !important;
}


.table .avatar *, .table .avatar {
	width:24px;
	height:auto;
	
	border-radius:50%;
}


/* strikethrough voor text in label van checkboxes */
input[type=checkbox]:checked + label.strikethrough{
	text-decoration: line-through;
}