html, body{
	font-family: "overpass", sans-serif;
}

code, pre, .code{
	font-family: "overpass-mono", monospace;
}

.breadcrumb-item + .breadcrumb-item::before {
	content: url(../images/breadcrumb-divider.svg) !important;
}

.width-1{
	width: 1em;
}
.width-2{
	width: 2em;
}
.width-3{
	width: 3em;
}
.width-4{
	width: 4em;
}
.width-5{
	width: 5em;
}
.width-6{
	width: 6em;
}
.width-7{
	width: 7em;
}
.width-8{
	width: 8em;
}
.width-9{
	width: 9em;
}
.width-10{
	width: 10em;
}

.max-width-1{
	max-width: 1em;
}
.max-width-2{
	max-width: 2em;
}
.max-width-3{
	max-width: 3em;
}
.max-width-4{
	max-width: 4em;
}
.max-width-5{
	max-width: 5em;
}
.max-width-6{
	max-width: 6em;
}
.max-width-7{
	max-width: 7em;
}
.max-width-8{
	max-width: 8em;
}
.max-width-9{
	max-width: 9em;
}
.max-width-10{
	max-width: 10em;
}

.fix-width-1{
	max-width: 1em;
	min-width: 1em;
	width: 1em;
}
.fix-width-2{
	max-width: 2em;
	min-width: 2em;
	width: 2em;
}
.fix-width-3{
	max-width: 3em;
	min-width: 3em;
	width: 3em;
}
.fix-width-4{
	max-width: 4em;
	min-width: 4em;
	width: 4em;
}
.fix-width-5{
	max-width: 5em;
	min-width: 5em;
	width: 5em;
}
.fix-width-6{
	max-width: 6em;
	min-width: 6em;
	width: 6em;
}
.fix-width-7{
	max-width: 7em;
	min-width: 7em;
	width: 7em;
}
.fix-width-8{
	max-width: 8em;
	min-width: 8em;
	width: 8em;
}
.fix-width-9{
	max-width: 9em;
	min-width: 9em;
	width: 9em;
}
.fix-width-10{
	max-width: 10em;
	min-width: 10em;
	width: 10em;
}

td.shrink {
	white-space: nowrap;
	width: 1px;
}

.strike{
	text-decoration: line-through;
}

svg.x-feather-icon{
	height: 1em;
	width: 1em;
	vertical-align: text-bottom;
}

.alert-icon-right{
	position: absolute;
	top: 0;
	right: 0;
	padding: .75rem 1.25rem;
	color: inherit;
}

.bg-rio-highlight{
	background-color: #ffefbf !important;
}

.bg-rio-highlight-hover:hover{
	background-color: #ffefbf !important;
}

.bg-construction{
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10px,
		#fff 10px,
		#fff 20px
	),
	linear-gradient(
		to bottom, 
		#ddd 0%, 
		#fff 15%, 
		#fff 85%,
		#ddd 100%)
	!important;
}


.bg-construction2{
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10px,
		#fff 10px,
		#fff 20px
	),
	linear-gradient(
		to bottom, 
		#ffefbf 0%, 
		#fff 15%, 
		#fff 85%,
		#ffefbf 100%)
	!important;
}

.bg-construction3{
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 5px,
		#fff 5px,
		#fff 10px
	),
	linear-gradient(
		to top, 
		#ddd 0,
		#fff .5em
		/*#ffefbf*/ )
	!important;
}

div.d-flex > input[type=radio]:checked ~ *,
div.d-flex > input[type=checkbox]:checked ~ *{
	color: #0040b0 !important;
}

.dyn-before-after::before{
	content: attr(data-before-content);
	/* padding-right: .3em; */
}
.dyn-before-after::after{
	content: attr(data-after-content);
	/* padding-left: .3em; */
}

.highlight-border{
	/* border-left-width: .25em;
	border-right-width: .25em; */
	/* rgba(0,0,0,.125) */
	background: linear-gradient(
		to right, 
		rgba(0,0,0,.125) 0,
		rgba(0,0,0,.125) .25em,
		transparent .25em
		/*#ffefbf*/ );
}

.aftdot::after{
	content: ".";
}

.menu-tile-fg{
	background-color: rgba(0, 0, 0, 0.6);
	transition: 0.3s;
}
.menu-tile-fg:hover{
	background-color: rgba(0, 0, 0, 0.75);
	/* -webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px); */
}

.nowrap {
	white-space: nowrap;
}

.fs-0-8 {
	font-size: 0.8em !important;
}

.fs-0-9 {
	font-size: 0.9em !important;
}

.fs-1-0 {
	font-size: 1.0em !important;
}

.fs-1-1 {
	font-size: 1.1em !important;
}

.fs-1-2 {
	font-size: 1.2em !important;
}

.numalign {
	font-variant-numeric: tabular-nums;
}

.ch {
	display: none;
	visibility: hidden;
	padding: 0;
	margin: 0;
}

.border-dashed {
	border-style: dashed !important;
}

/* simple css only toggle for hiding/displaying content */
/* checkbox has to be immediately before .ctoggletarget */
.ctoggleactor {
	/* the checkbox */
	display: none;
	visibility: hidden;
}
.ctoggletarget {
	/* the toggled content */
	/* hidden if checkbox unchecked */
	display: none;
	/* height: 0;
	overflow: hidden; */
}
.ctoggleactor:checked ~ .ctoggletarget {
	/* show content when checkbox is checked */
	display: block;
	/* height: auto;
	overflow: visible; */
}