/*
** BOOTSTRAP-4-BETA.CSS
** elementen/classes uit de bootstrap 4 beta, zoals gedocumenteerd op de bootstrap 4 cheatsheet website.
** Dit bestand staat los in verband met overzicht, en het feit dat dit nog constant veranderen kan.
*/

/* [ TEXT ] ** LAATST BEWERKT: 23-08-2016 */
.font-italic { font-style: italic; }



/* [ TAG(S) ] ** LAATST BEWERKT: 22-08-2016 */
.tag {
	display					: inline-block;
	padding					: .25em .4em;
	font-size				: 75%;
	font-weight			: 700;
	line-height			: 1;
	color						: #fff;
	text-align			: center;
	white-space			: nowrap;
	vertical-align	: baseline;
	border-radius		: .25rem;
}
.tag-pill {
  padding-right		: .6em;
  padding-left		: .6em;
  border-radius		: 10rem;
}
	.tag-default 	{background-color: #818a91;}
	.tag-primary 	{background-color: #0275d8;}
	.tag-success 	{background-color: #5cb85c;}
	.tag-info 		{background-color: #5bc0de;}
	.tag-warning 	{background-color: #f0ad4e;}
	.tag-danger 	{background-color: #d9534f;}


/* [ CARDS ] ** LAATST BEWERKT: 23-08-2016 */
.card {
	position			: relative;
	display 			: block;
	margin-bottom : .75rem;
	background		: #FFF;
	border 				: 1px solid #e5e5e5;
	border-radius : .25rem;
	/*max-width     : 270px;*/
	/*min-width     : 190px;*/
	padding-left  : 0;
	padding-right : 0;
}
.card-img-top {
	border-radius: .25rem .25rem 0 0;
	width: 100%;
}
	.card-img-top img{
		border: 0;
		vertical-align: middle;
		height: auto;
	}
.card-block {
	padding: 1.25rem;
}
.card-header {
	padding						: .75rem 1.25rem;
	background-color	: #F5F5F5;
	border-bottom			: 1px solid #e5e5e5;
}
	.card-title {
		margin-bottom	: .75rem;
	}
  	.card-title h4 {
  		font-size			: 1.5rem;
  		font-weight 	: 500;
  		line-height 	: 1.1;
  		color 				: inherit;
  	}
.card-footer {
	padding						: .75rem 1.25rem;
	background-color	: #F5F5F5;
	border-bottom			: 1px solid #e5e5e5;
}


/* [ TABLE ] ** LAATST BEWERKT: 25-08-2016 */
.table-inverse {
  color             : #ECEEEF;
  background-color  : #373A3C;
}
.table-inverse th,
.table-inverse td,
.table-inverse thead th {
  border-color      : #55595C;
}
	.table .thead-inverse th {
		color							: #FFF;
		background-color	: #373A3C;
	}

.table-reflow tr td,
.table-reflow tr th {
  display : block!important;
  border  : 1px solid #eceeef;
}


/* [ BUTTON(S) ] ** LAATST BEWERKT: 22-08-2016 */

/* normaal: */
  .btn-default-outline  {  color: #FFFFFF;     border-color: #FFFFFF;    background-image: none;   background-color: transparent; }
  .btn-primary-outline  {  color: #0275D8;     border-color: #0275D8;    background-image: none;   background-color: transparent; }
  .btn-secondary-outline { color: #CCCCCC;     border-color: #CCCCCC;    background-image: none;   background-color: transparent; }
  .btn-success-outline  {  color: #5CB85C;     border-color: #5CB85C;    background-image: none;   background-color: transparent; }
  .btn-warning-outline {   color: #F0AD4E;     border-color: #F0AD4E;    background-image: none;   background-color: transparent; }
  .btn-danger-outline  {   color: #D9534F;     border-color: #D9534F;    background-image: none;   background-color: transparent; }

/* hover: */
  .btn-default-outline:hover  {  color: #222;     border-color: #FFFFFF;    background-color: #FFFFFF; }
  .btn-primary-outline:hover  {  color: #FFF;     border-color: #0275D8;    background-color: #0275D8; }
  .btn-secondary-outline:hover { color: #FFF;     border-color: #CCCCCC;    background-color: #CCCCCC; }
  .btn-success-outline:hover  {  color: #FFF;     border-color: #5CB85C;    background-color: #5CB85C; }
  .btn-warning-outline:hover {   color: #FFF;     border-color: #F0AD4E;    background-color: #F0AD4E; }
  .btn-danger-outline:hover  {   color: #FFF;     border-color: #D9534F;    background-color: #D9534F; }


/* [ ALERT(S) ] ** LAATST BEWERKT: 03-10-2016 */
.alert-heading {
  color: inherit;
}
.alert-success 	{ color: #3C763D; }
.alert-info 		{ color: #31708F; }
.alert-warning 	{ color: #8A6D3B; }
.alert-danger 	{ color: #A94442; }
	.alert-link 	{ font-weight: 700; }


/* [ BANNER ] ** LAATST BEWERKT; 24-08-2016 */

/* niet officieel van de alpha/beta zelf: BS4 gebruikt geen glyphicons meer en dus bouwen we hieronder de navigatie via fontawesome op. */
@media screen and (min-width: 768px) {
	.carousel-control .fa, .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right {
		font-size	: 30px;
		width			: 30px;
		height		: 30px;
		margin-top: -10px;
	}
}
.carousel-control .fa-chevron-left 	{left		: 50%; margin-left	:	-10px;}
.carousel-control .fa-chevron-right {right	: 50%; margin-right	:	-10px;}

.carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right {
	position: absolute;
	top 		: 50%;
	z-index : 5;
	display : inline-block;
}

.custom-select {
	display: inline-block;
	max-width: 100%;
	height: calc(2.25rem + 2px);
	padding: .375rem 1.75rem .375rem .75rem;
	line-height: 1.25;
	color: #464a4c;
	vertical-align: middle;
	background: #fff url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' v…'0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E) no-repeat right .75rem center;
	-webkit-background-size: 8px 10px;
	background-size: 8px 10px;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: .25rem;
	-moz-appearance: none;
	-webkit-appearance: none;
}