/* copyright 2019-2020 peter mooring all rights reserved peterpm@xs4all.nl peter@petermooring.com */


.link-underline {
	text-decoration: underline;
}

/* svg icons - start */
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor
}
/* svg icons - end */

/* fontawesome icons inline - start */
.svg-inline--fa {
  width: 1em;
  height: 1em;
}

.svg-inline--fa:before {
  display: inline-block;
  content: "";
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}
/* fontawesome icons inline - end */


/* support bootstrap 5 icons - start */
.bi {
	width: 1em;
	height: 1em;
}

.bi-check2 {
	width: 1.2em;
	height: 1.2em;
}

.bi::before {
  display: inline-block;
  content: "";
  background-image: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%23333" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 14l6-6-6-6"></path></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}
/* support bootstrap 5 icons - end */


/* fix for fontawesome icon problem on mobile? On Firefox (Klahr) still broken icons - start */
.fas {
	font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
}
/* fix for fontawesome icon problem on mobile? On Firefox (Klahr) still broken icons - end */


/* 
 * Removing the border color of the navbar-toggler Hamburger icon: Bootstrap 4
 * https://stackoverflow.com/questions/50668594/removing-the-border-color-of-the-navbar-toggler-hamburger-icon-bootstrap-4
 */
.navbar-toggler:focus, .navbar-toggler:active {
	outline: none;
	box-shadow: none;
}

/* max-width of nav content, main, footer content */
.header .container {
	margin-right: auto;
	margin-left: auto;
	max-width: 1200px;
}

nav .container {
	margin-right: auto;
	margin-left: auto;
	max-width: 1200px;
}

main {
	margin-right: auto;
	margin-left: auto;
	max-width: 1200px;
}

footer .container {
	margin-right: auto;
	margin-left: auto;
	max-width: 1200px;
}

.z-index-90 {
	z-index: 90;
}

.z-index-30 {
	z-index: 30;
}


/* reduce h1 h2 h3 h4 h5 sizes, see below for font-size changes on breakpoints */
h1, h2, h3, h4, h5 {
/*	font-size: 2.5em; */
}



.alert:not(:empty) {
	margin: 0 0 10px 0;
}

ul.form-control {
	list-style: none;
	height: auto;	/* reset hardcoded */
}



/* 
 * style to change navbar hamburger to X
 * https://www.codeply.com/go/fgHv33Q6UM/bootstrap-4-navbar-with-close-x-icon 
 */
.navbar-toggler>.close {
	display:inline;
}
.navbar-toggler.collapsed>.close, .navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
	display:none;
}

/* navbar dropdowns - start */
.dropdown-menu-hamburger {
	position: absolute !important;
	top: 40px;
}

.dropdown-menu-center {
	right: auto;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
/* navbar dropdowns - end */


/* WTForms: error message immediately below field */
.help-block {
background: #f0d6d6; 
padding: 0.5em;
border: 1px solid #f0d6d6;
border-radius: .25rem;
qtransition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
font-size: 1rem;
line-height: 1.5;
}

/*
@media only screen and (max-width: 600px) {
	.control-label {
		display: none;
	}
}
*/

/* ul: align bullet left with text - start */
/* exclude lists pagination */ 
ul:not(.pagination_ul):not(.list-inline) {
	/* no indent */
    margin-left: 0;
    padding-left: 0;
}
li:not(.pagination_li):not(.list-inline-item) {
	/* no indent */
    margin-left: 1em;
}
/* ul: align bullet left with text - end */

/* ol: align bullet left with text - start */
/* exclude lists pagination */ 
ol:not(.pagination_ol):not(.list-inline) {
	/* no indent */
    margin-left: 0;
    padding-left: 0;
}
/* ol: align bullet left with text - end */


/* 
 * footer-menu
 */
/* add separator */
.footer-menu.list-inline li:after {
	content: '|';
	margin: 0 6px 0 12px;
	qcolor: #ff0000;
	color: #6c7569;
}
/* remove last separator */
.footer-menu li:last-child::after {
	display: none;
}
/* remove space */
.footer-menu.list-inline li {
	padding: 0;
	qbackground-color: #00ff00;
}
/* remove space */
.footer-menu .list-inline-item:not(:last-child) {
	margin-right: 0;
}


/* tinymce code sample styles - start */
.language-markup, .language-javascript, .language-css, .language-php, .language-ruby, .language-python, .language-java, .language-c, .language-csharp, .language-cpp, .language-docker, .language-dockercompose, .language-bash, .language-sh, .language-txt, .language-other {
padding: 20px 2% 20px 2%;
width: 96%;
font-size: 0.8em;
}
/* tinymce code sample styles - end */


/* content_item comments - start */
.comment-avatar-col {
    flex: 0 0 60px;
	align-items: flex-start;
}

.comment-avatar-img {
	width: 40px;
	margin-top: 10px;
}
/* content_item comments - end */


/* anchor moved some px down to compensate for the sticky navbar - start */ 
.anchor5 {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}
/* anchor moved some px down to compensate for the sticky navbar - end */ 


/* break words - start */ 
textarea {
	overflow-wrap: break-word;
	/* word-break: break-all; */
}
/* break words - end */ 


/* 
 * blog post: bootstrap grid example - start 
 */
.elem-1-content {
	background-color: #ff0000;
	min-height: 40px;
	line-height: 40px;
	color: #ffffff;
}

.elem-2-information {
	background-color: #eeeeee;
	min-height: 40px;
	line-height: 40px;
}

.elem-3-least-important {
	background-color: #0000ff;
	min-height: 40px;
	line-height: 40px;
	color: #ffffff;
}

.text-and-spacer {
	width: 100%;
	height: 40px;
	line-height: 40px;
}
/* blog post: bootstrap grid  - end */


/* form custom-control color  - start */
/*
.custom-control-input:checked ~ .custom-control-label::before {
	color: #fff;
	border-color: black;
	background-color: black;
}
*/
/* form custom-control color  - end */


/* max width of auth card - start */
.card-auth-boxed-max-width {
	max-width: 550px;
}
/* max width of auth card - end */


.blog-image-picker-image {
	width: auto;
	max-height: 200px;
	margin: 10px 0;
}


/* very small button e.g. used in tables - start */
.btn-group-xs > .btn, .btn-xs {
	padding: .25rem .4rem;
	font-size: .875rem;
	line-height: .5;
	border-radius: .2rem;
}
/* very small button e.g. used in tables - end */


/* list page - start */

/* in_table_button column width - start */
.list-page-in-table-button-width {
	width: 1%;
}
/* in_table_button column width - end */

/* sort icon after last word - start */
.list-page-sort-icon-after:after {
	font-family: Font Awesome\ 5 Free;
	content: "\f0dc";
	display: inline;
	font-weight: 900;
	margin-left: 3px;
}
/* sort icon after last word - end */

/* list page - end */


/* 
 * font-size changer, see also breakpoints below 
 */
h1 {
	font-size: 26px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 22px;
}

h4 {
	font-size: 20px;
}


/*
 * Expand the Sizing Utility to allow for responsive breakpoints like "w-xl-50" (css, feature, v4) #21943
 * https://github.com/twbs/bootstrap/issues/21943
 */
@media (min-width: 576px) {
  .w-sm-10 {
    width: 10% !important;
  }
  .w-sm-20 {
    width: 20% !important;
  }
  .w-sm-25 {
    width: 25% !important;
  }
  .w-sm-30 {
    width: 30% !important;
  }
  .w-sm-35 {
    width: 35% !important;
  }
  .w-sm-40 {
    width: 40% !important;
  }
  .w-sm-50 {
    width: 50% !important;
  }
  .w-sm-75 {
    width: 75% !important;
  }
  .w-sm-100 {
    width: 100% !important;
  }
  .w-sm-auto {
    width: auto !important;
  }
  .h-sm-25 {
    height: 25% !important;
  }
  .h-sm-50 {
    height: 50% !important;
  }
  .h-sm-75 {
    height: 75% !important;
  }
  .h-sm-100 {
    height: 100% !important;
  }
  .h-sm-auto {
    height: auto !important;
  }
}

@media (min-width: 768px) {

h1 {
	font-size: 4.0vw;
}

h2 {
	font-size: 3.5vw;
}

h3 {
	font-size: 3.0vw;
}

h4 {
	font-size: 2.5vw;
}



  .w-md-10 {
    width: 10% !important;
  }
  .w-md-25 {
    width: 25% !important;
  }
  .w-md-50 {
    width: 50% !important;
  }
  .w-md-75 {
    width: 75% !important;
  }
  .w-md-100 {
    width: 100% !important;
  }
  .w-md-auto {
    width: auto !important;
  }
  .h-md-25 {
    height: 25% !important;
  }
  .h-md-50 {
    height: 50% !important;
  }
  .h-md-75 {
    height: 75% !important;
  }
  .h-md-100 {
    height: 100% !important;
  }
  .h-md-auto {
    height: auto !important;
  }
}

@media (min-width: 992px) {

h1 {
	font-size: 40px;
	font-size: 38px;
}

h2 {
	font-size: 32px;
}

h3 {
	font-size: 28px;
}

h4 {
	font-size: 24px;
}


  .w-lg-10 {
    width: 10% !important;
  }
  .w-lg-25 {
    width: 25% !important;
  }
  .w-lg-50 {
    width: 50% !important;
  }
  .w-lg-75 {
    width: 75% !important;
  }
  .w-lg-100 {
    width: 100% !important;
  }
  .w-lg-auto {
    width: auto !important;
  }
  .h-lg-25 {
    height: 25% !important;
  }
  .h-lg-50 {
    height: 50% !important;
  }
  .h-lg-75 {
    height: 75% !important;
  }
  .h-lg-100 {
    height: 100% !important;
  }
  .h-lg-auto {
    height: auto !important;
  }
}

@media (min-width: 1200px) {
  .w-xl-25 {
    width: 25% !important;
  }
  .w-xl-50 {
    width: 50% !important;
  }
  .w-xl-75 {
    width: 75% !important;
  }
  .w-xl-100 {
    width: 100% !important;
  }
  .w-xl-auto {
    width: auto !important;
  }
  .h-xl-25 {
    height: 25% !important;
  }
  .h-xl-50 {
    height: 50% !important;
  }
  .h-xl-75 {
    height: 75% !important;
  }
  .h-xl-100 {
    height: 100% !important;
  }
  .h-xl-auto {
    height: auto !important;
  }
}

/* sticky footer - start */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 140px;
}
.footer {
  position: absolute;
  bottom: 0;
  /* Set the fixed height of the footer here */
  min-height: 100px;
  /* line-height: 120px; */ /* Vertically center the text there */
}
/* sticky footer - end */