/*******************************************************************
CSS Document iV4 FRONT: expand or override common bootstrap settings 
*******************************************************************/
/* inside .well we use h2 as title, default bootstrap margin-top for h2 is 20px, inside .well we want less margin-top */
.well h2 {
	margin-top:10px;
	}
	/* default bootstrap font-size for h2 is 30px, inside the well for phone-portrait we need a smaller font-size */
	@media screen and (max-width: 479px) {
		.well h2 {
			font-size:24px;
			}
	}
/* set margin bottom to each button in .button-row to add margin between the vertical stacked buttons on phone portrait */
@media screen and (max-width: 479px) {
	.button-row .btn {
		margin-bottom:10px;
		}
		.button-row .btn:last-child {
			margin-bottom:0;
			}
}

/*** Vertical Stacked Listst ***/
/* add margin between BS default vertical stacked list */
.dl-horizontal dt,
.dl-horizontal dd {
		margin-bottom:5px;
		} 
	@media screen and (max-width: 767px) {
		.dl-horizontal dt {
			margin-bottom:0;
			}
	}
/* use width of added col classes (col-sm(md/lg)-X) instead the BS default width of 160px for vertical stacked lists (SM, MD, LG only!) */
@media screen and (min-width: 768px) {
	.dl-horizontal dd[class*="col-"] { margin-left:0;}
		.dl-horizontal dt.col-sm-1, .dl-horizontal dd.col-sm-1, .dl-horizontal dt.col-md-1, .dl-horizontal dd.col-md-1,.dl-horizontal dt.col-lg-1, .dl-horizontal dd.col-lg-1 { width:8.33333333% }
		.dl-horizontal dt.col-sm-2, .dl-horizontal dd.col-sm-2, .dl-horizontal dt.col-md-2, .dl-horizontal dd.col-md-2, .dl-horizontal dt.col-lg-2, .dl-horizontal dd.col-lg-2 { width: 16.66666667%; }
		.dl-horizontal dt.col-sm-3, .dl-horizontal dd.col-sm-3, .dl-horizontal dt.col-md-3, .dl-horizontal dd.col-md-3, .dl-horizontal dt.col-lg-3, .dl-horizontal dd.col-lg-3 { width: 25%; }
		.dl-horizontal dt.col-sm-4, .dl-horizontal dd.col-sm-4, .dl-horizontal dt.col-md-4, .dl-horizontal dd.col-md-4, .dl-horizontal dt.col-lg-4, .dl-horizontal dd.col-lg-4 { width: 33.33333333%;}
		.dl-horizontal dt.col-sm-5, .dl-horizontal dd.col-sm-5, .dl-horizontal dt.col-md-5, .dl-horizontal dd.col-md-5, .dl-horizontal dt.col-lg-5, .dl-horizontal dd.col-lg-5 { width: 41.66666667%; }
		.dl-horizontal dt.col-sm-6, .dl-horizontal dd.col-sm-6, .dl-horizontal dt.col-md-6, .dl-horizontal dd.col-md-6, .dl-horizontal dt.col-lg-6, .dl-horizontal dd.col-lg-6 { width: 50%; }
		.dl-horizontal dt.col-sm-7, .dl-horizontal dd.col-sm-7, .dl-horizontal dt.col-md-7, .dl-horizontal dd.col-md-7, .dl-horizontal dt.col-lg-7, .dl-horizontal dd.col-lg-7 { width: 58.33333333%; }
		.dl-horizontal dt.col-sm-8, .dl-horizontal dd.col-sm-8, .dl-horizontal dt.col-md-8, .dl-horizontal dd.col-md-8, .dl-horizontal dt.col-lg-8, .dl-horizontal dd.col-lg-8 { width: 66.66666667%; }
		.dl-horizontal dt.col-sm-9, .dl-horizontal dd.col-sm-9, .dl-horizontal dt.col-md-9, .dl-horizontal dd.col-md-9, .dl-horizontal dt.col-lg-9, .dl-horizontal dd.col-lg-9 { width: 75%; }
		.dl-horizontal dt.col-sm-10, .dl-horizontal dd.col-sm-10, .dl-horizontal dt.col-md-10, .dl-horizontal dd.col-md-10, .dl-horizontal dt.col-lg-10, .dl-horizontal dd.col-lg-10 { width: 83.33333333%; }
		.dl-horizontal dt.col-sm-11, .dl-horizontal dd.col-sm-11, .dl-horizontal dt.col-md-11, .dl-horizontal dd.col-md-11, .dl-horizontal dt.col-lg-11, .dl-horizontal dd.col-lg-11 { width: 91.66666667%; }
		.dl-horizontal dt.col-sm-12, .dl-horizontal dd.col-sm-12, .dl-horizontal dt.col-md-12, .dl-horizontal dd.col-md-12, .dl-horizontal dt.col-lg-12, .dl-horizontal dd.col-lg-12 { width: 100%; }
}

/* left align dt text: add class 'text-left' at .dl-horizontal */
.dl-horizontal dt span.text-left {
	float:left;
	}
/* always AUTO add ":" after the dt (so no need to add a hradcoded ":" inside the tpl files anymore...) */
.dl-horizontal dt:after {
	content:":";
	}

/*** MODAL ***/	
/* default BS styling (white background modal-body + modal-footer, transparent modal-footer border-top & modal-header same color settings als mod-header */
/* see input.less for dynamic modal styling settings */
.modal-content {
	background-color:#ffffff;
	color:#333333;
	}
	.modal-content .modal-footer {
		background-color:#ffffff;
		background-image:none;
		border-color:transparent;
		}
		/* use bootstrap default padding for modal-footer inside modal dialog instead of the settings we set for our page footer with the same class */
		.modal-content .modal-footer {
			padding:19px 20px 20px;
			}
/* CSP fix: Bootstrap modal.js sets display:block via inline style which CSP blocks.
   Use CSS class instead so modals work without inline styles. */
.modal.show {
	display: block;
	}

/*** select2 ***/
.img-select2 {
	width: 20px;
	height: 20px;
	padding: 1px;
	margin-right: 2px;
}

/* top bar for frontExtMorph */
.ires-topbar-morph--visible {
    display: block !important;
}
.ires-topbar-morph--hidden {
    display: none !important;
}

/* Basiselement */
.ires-topbar-morph {
    width: 100%;
    color: #fff;
    font-size: 0.95rem;
    z-index: 1040;
}

/* Layout container */
.ires-topbar-morph__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    background: linear-gradient(90deg, #1976d2, #42a5f5);
}

/* Icon */
.ires-topbar-morph__icon {
    font-size: 1.1rem;
    opacity: .9;
    flex: 0 0 auto;
}

/* Tekst + actieknop */
.ires-topbar-morph__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Button */
.ires-topbar-morph__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.08s ease;
}

.ires-topbar-morph__btn:hover,
.ires-topbar-morph__btn:focus {
    background: rgba(255,255,255,0.20);
    transform: translateY(-1px);
}

/* Mobile stacking */
@media (max-width: 576px) {
    .ires-topbar-morph__content {
        align-items: flex-start;
    }
}