@import-normalize; /* bring in normalize.css styles */

:root {
	/* --primary-color: #0090e3; */
	--primary-color: #006dac;
	--bs-primary-rgb: 0,6,172;
	--secondary-color: #00b900;
	--bs-border-radius-lg: 0.2rem;
}

.btn-outline-primary {
	--bs-btn-color: var(--primary-color);
	--bs-btn-border-color: var(--primary-color);
	--bs-btn-active-bg:  var(--primary-color);
	--bs-btn-active-border-color: var(--primary-color);
	--bs-btn-disabled-color: var(--primary-color);
	--bs-btn-disabled-border-color: var(--primary-color);
	--bs-btn-hover-bg: var(--primary-color);
	--bs-btn-hover-border-color: var(--primary-color);
}

html {
    position: relative;
    height: 100%;
}

.App {
	display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body {
    margin-bottom: 80px !important;
	font-size: 16px;
	height: 100%;
}

a {
	text-decoration: none;
}

.container {
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 32px;
}

.container-fluid {
    padding-left: 8px;
    padding-right: 8px;
	flex-grow: 1;
}

#maincontent {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.main {
	flex-grow: 1;
	margin-top: 10px;
	margin-bottom: 10px;
}

.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 47px;
	z-index: 1000;
	background-color: #f5f5f5;
}

.footer .container {
    padding-top: 7x;
	padding-bottom: 0px;
}

.footersticky {
    position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
    height: 60px;
    line-height: 60px;
	z-index: 1000;
	background-color: #f5f5f5;
}

.footersticky > .container {
    padding-right: 10px;
    padding-left: 10px;
}

.lighttext {
	color: #c5c5c5;
}

td {
    font-weight: 100;
    line-height: 1;
}
.menuicon {
    width: 24px;
    height: 24px;
}
.menuiconmain {
    width: 128px;
    height: 128px;
    padding: 5px;
}
.checklisticon {
    width: 16px;
    height: 16px;
}

.menulink {
    color: rgba(255, 255, 255, 1);
}

.nav-link img{
    background-color: rgba(255,255,255,.5);
    padding: 1px;
}

.error{
    color: red;
}

h1 {
	margin-top: 0.5rem;
    font-size: 1.2rem;
}

h2 {
	margin-top: 0.5rem;
    font-size: 1.1rem;
}

h3 {
	margin-top: 0.5rem;
    font-size: 1rem;
}

.accordion-header {
	margin-top: 0rem;
}

@media (min-width: 260px) and (max-width: 575px ) {
    .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.9);
}

.navbar-dark .navbar-nav .nav-link {
	padding-right: .4rem;
	padding-left: .4rem;
}

.focus-highlight {
  background-color: #66FF66!important;
}
.smalltext {
  font-size: 10pt;
}

.even, .odd {
    border-top: 1px solid #007bff;
    border-bottom: 1px solid #007bff;
}
.nopadding {
	padding-left: 0px!important;
	padding-right: 0px!important;
}

/* Loader */

span.loadheader {
	display: block;
	margin: 0 auto;
}

span[class*="l-"] {
	height: 4px; width: 4px;
	background: #000;
	display: inline-block;
	margin: 12px 2px;

	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;

	-webkit-animation: loader 4s infinite;
	-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
	-webkit-animation-fill-mode: both;
	-moz-animation: loader 4s infinite;
	-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
	-moz-animation-fill-mode: both;
	-ms-animation: loader 4s infinite;
	-ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
	-ms-animation-fill-mode: both;
	animation: loader 4s infinite;
	animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
	animation-fill-mode: both;
}

span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}

@keyframes loader {
	0% {-webkit-transform: translateX(-30px); opacity: 0;}
	25% {opacity: 1;}
	50% {-webkit-transform: translateX(30px); opacity: 0;}
	100% {opacity: 0;}
}

@-webkit-keyframes loader {
	0% {-webkit-transform: translateX(-30px); opacity: 0;}
	25% {opacity: 1;}
	50% {-webkit-transform: translateX(30px); opacity: 0;}
	100% {opacity: 0;}
}

@-moz-keyframes loader {
	0% {-moz-transform: translateX(-30px); opacity: 0;}
	25% {opacity: 1;}
	50% {-moz-transform: translateX(30px); opacity: 0;}
	100% {opacity: 0;}
}

@-keyframes loader {
	0% {-transform: translateX(-30px); opacity: 0;}
	25% {opacity: 1;}
	50% {-transform: translateX(30px); opacity: 0;}
	100% {opacity: 0;}
}

@-ms-keyframes loader {
	0% {-ms-transform: translateX(-30px); opacity: 0;}
	25% {opacity: 1;}
	50% {-ms-transform: translateX(30px); opacity: 0;}
	100% {opacity: 0;}
}

#orderbutton {
    color: white;
    font-size: x-large;
}

.row {
	margin-left: 0px;
	margin-right: 0px;
}

.linktable tbody tr {
	cursor:pointer;
}

.row [class*=col-]{
	margin:0 -.3px;
	/*flex-basis: 20em; */
}

ul.ui-autocomplete {
    z-index: 1100;
}

.invisible{visibility:hidden!important}

.hidden-xs-up{display:none!important}
@media (max-width:575px)
{
	.hidden-xs-down{display:none!important}
}
@media (min-width:576px)
{.hidden-sm-up{display:none!important}}
@media (max-width:767px) {.hidden-sm-down{display:none!important}}
@media (min-width:768px) {.hidden-md-up{display:none!important}}
@media (max-width:991px) {.hidden-md-down{display:none!important} .menulogin{margin-top: 20px;} .navbar-dark .navbar-nav .nav-link{ padding: .6rem 1rem;}}
@media (min-width:992px) {.hidden-lg-up{display:none!important}}
@media (max-width:1199px) {.hidden-lg-down{display:none!important}}
@media (min-width:1200px) {.hidden-xl-up{display:none!important}}.hidden-xl-down{display:none!important}.visible-print-block{display:none!important}
@media print{.visible-print-block{display:block!important}}.visible-print-inline{display:none!important}
@media print{.visible-print-inline{display:inline!important}}.visible-print-inline-block{display:none!important}
@media print{.visible-print-inline-block{display:inline-block!important}}
@media print{.hidden-print{display:none!important}}

@media (min-width:576px)
{
	.alignrightonfullscreen {
		text-align: right;
	}
}

/* remove padding inside a card body */
.card-body .col-12 {
	padding-left: 0px;
	padding-right: 0px;
}

.smallcell {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.btn-outline-secondary {
	background-color: #FFFFFF;
}

@media (max-width:575px) {
	.boldonsmall {
		font-weight: bold;
	}
	.steptitle {
		font-size: 1rem;
	}
}

button.btn.btn-secondary.first {
	min-width: 35px;
}

button.btn.btn-secondary.last {
	min-width: 35px;
}

.batchnrplaceholder {
	font-style: italic;
	font-weight: bold;
}

.btnbatchscanner {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-left: -5px;
}

.btnrightsquare {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* Navigatie laten scrollen op kleine schermen */
@media screen and (max-width: 991px) {
	.navbar-collapse {
	max-height: calc(100vh - 60px);
	overflow-y: auto;
	}
}

/* pace loader icon */
.pace {
	-webkit-pointer-events: none;
	pointer-events: none;

	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.pace-inactive {
	display: none;
}

.pace .pace-progress {
	background: rgb(0, 0, 0);
	position: fixed;
	z-index: 2000;
	top: 0;
	right: 100%;
	width: 100%;
	height: 2px;
}
.errormessage {
	color: red;
	font-weight: bold;
}
.batchlinkline {
	color: blue !important;
	cursor: pointer;
	line-height: 22px;
}

small.performance {
	color: #f5f5f5 !important;
}

.btn-minus, .btn-minus-packageunit {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.btn-plus, .btn-plus-packageunit {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.nobottom {
	margin-bottom: 0px;
}

.menumainlink {
	text-decoration: none;
}

/* File upload */

#drag_drop{
	background-color : #f9f9f9;
	border : #ccc 4px dashed;
	line-height : 250px;
	padding : 12px;
	font-size : 24px;
	text-align : center;
}

#uploader {
	display: none;
}
#fileToUpload {
	display: none;
}


/* Index menu */

.thumbnailimage {
	object-fit: cover; /* Do not scale the image */
	object-position: center; /* Center the image within the element */
	width: 100%;
	height: 200px;
	margin-bottom: 0.5rem;
}

div.polaroid {
	width: 250px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	text-align: center;
}

.thumbnailcaption {
	padding: 10px;
	text-align: center;
}
.polaroidlink {
	text-decoration: none !important;
	color: #212529;
}

.prevnextbutton {
	text-decoration: none;
}

.justify-content-space-around {
	-webkit-box-pack: justify !important;
		justify-content: space-around !important;
}

/* Tablesorter */
.table-striped a {
	text-decoration: none !important;
}
.tablesorter a {
	text-decoration: none !important;
}
#table1 a {
	text-decoration: none !important;
}
#table1 .even, #table1 .odd {
	border-bottom: 1px solid #c5c9cd !important;
}
#table1 td {
	padding: .75rem;
}

.flowstepcard {
	margin-top: 4px;
}

.flowstepcardnew {
	margin-top: 4px;
	border-style: dashed;
	cursor: pointer;
}

.flowstepcardnewbody {
	padding: 0.5rem 0.5rem;
}

.flowelementbutton {
	background: #f7f7f7;
	box-shadow: 0 0 3px rgb(0 0 0 / 40%);
	border: 1px;
	float: left;
    text-align: left;
    position: relative;
    list-style-position: inside;
    padding-left: 1em;
    width: 30.333%;
    list-style-type: none;
    cursor: pointer;
    margin: 0 1.5% 1.5%;
    box-sizing: border-box;
	min-width: 215px;
	display: block;
	z-index: 99;
}

.fullwidth {
	width: 100%;
}

.rotate {
	animation: rotation 2s infinite linear;
}
@keyframes rotation {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(359deg);
	}
}

.btn-square-md {
	width: 100px !important;
	max-width: 100% !important;
	max-height: 100% !important;
	height: 100px !important;
	text-align: center;
	padding: 0px;
	font-size:20px;
}

.btn-primary {
	background-color: var(--primary-color);
}

.btn-success {
	background-color: var(--secondary-color);
}

.bg-primary {
	background-color: var(--primary-color) !important;
}

@keyframes FadeAnim {
	0% {
	   opacity: 0;
	}
	100% {
	   opacity: 1;
	}
}
.form-error {
	color: red;
	font-weight: bold;
}

/* Square buttons */

.btnsquare {
    border-top: 1px solid white;
	border-right: none;
	border-bottom: none;
	border-left: none;
	font-size: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	padding-left: 80px;
	display: inline-block;
	letter-spacing: 1px;
	font-weight: 700;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	width: 100%;
	height: 74px;
}

.btnsquare:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

/* Pseudo elements for icons */
.btnsquare:before {
	font-family: 'FontAwesome';
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	position: relative;
	-webkit-font-smoothing: antialiased;

	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	line-height: 3;
	font-size: 140%;
	width: 60px;
}

/* Button Blue */
.btn-blue {
	background: #3498db;
	color: #fff;
}

.btn-blue:hover {
	background: #2980b9;
}

.btn-blue:active {
	background: #2980b9;
	top: 2px;
}

/* Button Green */
.btn-green {
	background: #41b624;
	color: #fff;
}

.btn-green:hover {
	background: #389222;
}

.btn-green:active {
	background: #389222;
	top: 2px;
}

/* Button Orange */
.btn-orange {
	background: #F08900;
	color: #fff;
}

.btn-orange:hover {
	background: #d17701;
}

.btn-orange:active {
	background: #d17701;
	top: 2px;
}

/* Button Red */
.btn-red {
	background: #eb1b1b;
	color: #fff;
}

.btn-red:hover {
	background: #b92929;
}

.btn-red:active {
	background: #b92929;
	top: 2px;
}

/* Button Yellow */
.btn-yellow {
	background: #ebdd1b;
	color: #fff;
}

.btn-yellow:hover {
	background: #b9aa29;
}

.btn-yellow:active {
	background: #b9aa29;
	top: 2px;
}

/* Button Gray */
.btn-gray {
	background: #cacaca;
	color: #fff;
}

.btn-gray:hover {
	background: #a1a1a1;
}

.btn-gray:active {
	background: #a1a1a1;
	top: 2px;
}

.btn-sep:before {
	background: rgba(0,0,0,0.15);
}

.btnsquare-iconbox {
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	line-height: 3;
	font-size: 160%;
	width: 70px;
	background: rgba(0,0,0,0.15);

}

.btnsquare-text {
	text-align: left;
	vertical-align: middle;
}

/* Slider */
.slidecontainer{
	width: 100%;
}

.slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 15px;
	border-radius: 5px;
	background: #d3d3d3;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #04AA6D;
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #04AA6D;
	cursor: pointer;
}

.input-form-inputfield {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
}


.rounded-t-5 {
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

@media (min-width: 992px) {
	.rounded-tr-lg-0 {
	  	border-top-right-radius: 0;
	}

	.rounded-bl-lg-5 {
	  	border-bottom-left-radius: 0.5rem;
	}
}

.checkbox-container {
	display: block;
	position: relative;
	border: 1px solid #cacaca;
	border-radius: 4px;
	margin: 10px 0;
	padding: 5px;
	cursor: pointer;
	color: darkgray;
	width: 100%;
}

.checkbox-container input {
	display: none;
}

.checkbox-container label {
	display: flex;
	align-items: center;
	cursor: pointer;
	position: relative;
	color: black;
	padding-left: 50px;
	line-height: 40px;
	width: 100%;
}

.checkbox-container label::before {
	content: "";
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 2px solid #cacaca;
	border-radius: 3px;
	position: absolute;
	left: 8px;
	top: 4px;
	transition: 0.15s all ease-out;
	background-color: white;
}

.checkbox-container input:checked + label::before {
	background-color: white;
	border-color: #29b941;
}

.checkbox-container label svg {
	stroke: #29b941;
	stroke-width: 3px;
	width: 20px;
	height: 20px;
	position: absolute;
	left: 14px;
	top: 9px;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.checkbox-container input:checked + label svg {
	opacity: 1;
}

@keyframes draw-checkbox {
	0% {
	  stroke-dashoffset: 33;
	}
	100% {
	  stroke-dashoffset: 0;
	}
}

.promoted-input-checkbox {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px; margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.addstepbutton {
	width: 100%;
}

.rowdraftworkflow {
	cursor: pointer;
}

.rowanalyzeworkflow {
	cursor: pointer;
}

.invisible-icon {
    opacity: 0;
}

video {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

.workflowbutton {
	max-width: 300px;
	min-width: 300px;
}

/* Step Navigation */
.page-container {
    display: flex;
    flex-direction: column;
    height: 100%;
	flex-grow: 1;
}

.stepcontent-container {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    height: 100%;
	flex-grow: 1;
	margin-bottom: 70px;
	display: flex;
    flex-direction: column;
}

.page {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: none; /* Altijd zichtbaar om transities te laten werken */
    visibility: hidden; /* Verberg standaard door zichtbaarheid */
    /* transform: translateY(100%); */ /* Begin buiten het zicht */
	opacity: 0;
    transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
	pointer-events: none;
}

.page.active {
    visibility: visible; /* Alleen de actieve stap is zichtbaar */
    position: relative;
    height: 100%;
	opacity: 1; /* Maak de actieve stap zichtbaar */
    /* transform: translateY(0); */ /* Plaats de actieve stap op de juiste positie */
    pointer-events: auto;
	flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.page.firstpage .form-group {
    flex-grow: 1;
}

.stepduration {
	color: #a1a1a1;
	font-size: .7em;
}

.custom-modal-width {
	min-width: 80%;
}

.addstepbuttongroup, .addrowbuttongroup, .addpagebuttongroup {
	margin-top: 1rem;
}

.btn-outline-customsuccess {
	border: 1px solid transparent; /* Geen rand in normale toestand */
	color: black; /* Tekstkleur in normale toestand */
}

.btn-outline-customsuccess:hover {
	border-color: #198754; /* Groene rand bij hover (Bootstrap 'success' kleur) */
	color: #198754; /* Groene tekstkleur bij hover */
}

.bg-light-success {
	background-color: #00b900; /* Lichtgroene kleur, je kunt deze aanpassen naar wens */
	color: white;
}

/* Date picker */

.ui-datepicker-header {
    background-color: var(--primary-color) !important;
    color: white;
    border-bottom: 1px solid #aaa;
}

.maplocation {
	min-height: 200px;
	width: 100%;
}

.mediathumbnail {
	max-width: 100px;
	max-height: 100px;
}

.iconbox {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2D88C4;
}

.iconbox.gray {
    background-color: #A1A1A1;
}

.iconbox.orange {
    background-color: #F08900;
}

.iconbox.yellow {
    background-color: #ebdd1b;
}

.iconbox.red {
    background-color: #E81C1C;
}

.iconbox.green {
    background-color: #3DA523;
}

.iconbox i {
    font-size: 16px;
    color: white;
}

.noshow {
	display: none !important;
}

/* Clickable row */
.clickable-row {
    cursor: pointer;
	color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)) !important;
}

.clickable-row td {
    cursor: pointer;
	color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)) !important;
}

.clickable-row:hover {
	background-color: #f0f0f0;
}

.btnsquare-iconbox .badge {
	font-size: 0.65rem;
	padding: 4px 6px;
}

.badge-inside-icon {
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: 0.65rem;
	padding: 4px 6px;
	line-height: 1;
}

.drop-zone {
	border: 2px dashed #0d6efd;
	border-radius: 10px;
	padding: 30px;
	text-align: center;
	color: #6c757d;
	background-color: #f8f9fa;
	transition: background-color 0.3s;
	cursor: pointer;
}

.drop-zone.dragover {
	background-color: #e9f5ff;
	border-color: #0a58ca;
}

.subnavbar {
	background-color: steelblue !important;
	padding-top: 1px;
	padding-bottom: 1px;
}

.btn:hover {
  color: darkgray !important;
}

/* Fullscreen Image */
#stage { touch-action: none; cursor: grab; }
#stage.dragging { cursor: grabbing; }

/* Maak elke link blokvullend (handig voor hover/klik) */
.card-list > a {
  display: block;
  text-decoration: none; /* optioneel */
}

/* Stripe per item (het <a>-element) */
.card-list > a:nth-child(odd) .card {
  background-color: var(--bs-body-bg);
}

.card-list > a:nth-child(even) .card {
  background-color: var(--bs-tertiary-bg);
}

.row>* {
	padding-left: 3px;
	padding-right: 3px;
}

.trumbowyg-editor {
	padding: 10px;
}

.startworkflowbutton {
	height: 100px;
	padding-left: 112px;
	min-width: 380px;
	max-width: 380px;
}

.startworkflowbtnsquare-iconbox {
	width: 100px;
	line-height: 4;
}

.startworkflowimg {
	border: 1px solid #3498db;
	display:block;
}

.take-photo-btn {
	color:#fff; border-radius:1rem;
	transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.take-photo-btn .icon {
	width:56px; height:56px; border-radius:14px;
	background: rgba(255,255,255,.15);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
	color:#fff;
}
.take-photo-btn svg{
	width: 30px;
	height: 30px;
}
.take-photo-btn:hover{
	box-shadow:0 .75rem 1.5rem rgba(0,0,0,.25);
	filter:brightness(1.03);
}
.take-photo-btn:active{
	transform:translateY(1px) scale(.99);
}

/* Overlay */
body.no-scroll {
	overflow: hidden;
}

.overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.6);
	display: none;
	z-index: 9999;
	transition: opacity .28s ease-out, visibility 0s linear .28s;
}

.overlay.is-visible {
	display: block;
}

/* Loading animation */
.icon-wrapper {
	position: relative;
	display: inline-block;
}

.loader-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 65px;
	height: 65px;
	display: none;
}