/**
*	GENERAL STYLES
*/

/* 260519 broc - wider page layout for learncoachingApp design (1200px statt 960px) */
.header_bar .container,
.inner_content .container {
    max-width: 1200px !important;
}

/* 260519 broc - nav closer to logo in wider layout */
.header_bar .menu-bar {
    text-align: center;
}

#loginMenuAnchor{
    display:none;
}


:root {
	/* 260221 broc - full color palette */
	/* Greyscale */
	--aflc-black: #000000;
	--aflc-midnight: #151515;
	--aflc-charcoal: #212121;
	--aflc-iron: #444444;
	--aflc-antracite: #5a5a5a;
	--aflc-granit: #686868;
	--aflc-metal: #767676;
	--aflc-sailbox-grey: #868686;
	--aflc-storm: #a8a8a8;
	--aflc-graphite: #b7b7b7;
	--aflc-cement: #bdbdbd;
	--aflc-aluminium: #b2d2d2;
	--aflc-silber: #dcdcdc;
	--aflc-cloud: #e5e5e5;
	--aflc-milk: #f6f6f6;
	--aflc-white: #ffffff;

	/* Blues */
	--aflc-dark-navy: #0e2048;
	--aflc-navy: #192864;
	--aflc-sbb-blue: #2d327d;
	--aflc-sky-blue: #005a9c;
	--aflc-sailbox-cyan: #009cdc;
	--aflc-light-blue-75: #96cdeb;
	--aflc-light-blue-50: #c8e1f5;
	--aflc-light-blue-25: #ebfaff;

	/* Greens */
	--aflc-dark-green: #054b21;
	--aflc-grass-green: #086432;
	--aflc-mobox-green: #5bb046;
	--aflc-light-green-75: #abcd6a;
	--aflc-light-green-50: #dce6a8;

	/* Reds / Orange / Yellow */
	--aflc-red-150: #a20013;
	--aflc-red-125: #c60018;
	--aflc-signal-red: #eb0000;
	--aflc-signal-orange: #f28c00; 
	--aflc-signal-yellow: #fff000;
	--aflc-signal-green: #92d050;

    /* Buttons and navigation*/
    --aflc-button-signal-orange: #ec6a23;
    --aflc-button-signal-orange-hover: #ee7a3b;


	/* Legacy aliases */
	--aflc-background-blue: var(--aflc-sailbox-cyan);
	--aflc-background-red: var(--aflc-signal-red);
	--aflc-background-green: var(--aflc-signal-green);
	--aflc-background-yellow: var(--aflc-signal-yellow);
	--aflc-background-orange: var(--aflc-signal-orange);
	--aflc-background-graphite: var(--aflc-graphite);

	/* 260908 broc - semantic tokens moved up from .aflc-app to :root. The cart lives in
	   #cartModal / .collection-plugin, OUTSIDE .aflc-app, and could not see a single one of them -
	   which is why it never looked like the rest of the site. .aflc-app keeps only the font. */
	--surface: #ffffff;
	--surface-2: #fbfaf7;
	--border: #e7e3db;
	--border-strong: #d6d1c5;
	--ink: #1d1d1b;
	--ink-2: #4a4a46;
	--ink-3: #8b8a82;
	--accent: #e8823a;
	--accent-ink: #c25f15;
	--accent-soft: #fdf1e7;
	--accent-heading: #f08a52;
	--green: #2f8a5a;
	--green-soft: #e6f3eb;
	--green-border: #b8dcc4;
	--warn: #b9621d;
	--warn-bg: #fdf1e2;
	--warn-border: #f1c98a;
	--danger: #b3331f;
	--danger-bg: #fbeae6;
	--shadow-sm: 0 1px 2px rgba(30, 25, 15, 0.04);
	--radius-lg: 14px;

	/* 260824 broc - type + control scale; mobile inherits these on purpose */
	--fs-heading: 22px;
	--fs-title: 19px;
	--fs-body: 19px;
	--fs-meta: 16px;
	--btn-size: 36px;

	/* weight of the course titles on the dashboard cards - 700 read too heavy */
	--fw-title: 600;
}

.aflc-app {
	font-family: 'Livvic', sans-serif;
}

/* app-wide link default; size follows the parent text, more specific rules still win */
.aflc-app a {
	font-size: inherit;
	color: var(--accent-heading, #f08a52);
	text-decoration: none;
	cursor: pointer;
}

.ng-hide: {
	display:none !important;
}

/**
*	MOBILE
*/

.modWrap{
	width: 100%;
	box-sizing: border-box;
}
.modWrap h1{
	margin-bottom: 15px;
}

/* clear */
.formBreak:after,
.submitWrap:after,
.palm:after,
.filterFormCol:after{
	display: block;
	content: '';
	clear: both;
}
.clear{
	clear: both;
}
table{
	/*bro 260305 removed - kills item display in basket table-layout: fixed;*/
}
/* Formfields */
.formBreak{
	margin: 0 0 8px 0;
	position: relative;
}

.formBreak label{
	width: 100%;
	display: block;
	line-height: 19px;
	padding: 8px 0;
}
.formBreak input[type="text"],
.formBreak input[type="password"],
.formBreak select,
.formBreak textarea{
	width: 100%;
	display: block;
	border: 1px solid #ccc;
	padding: 3px 6px;
	height: 35px;
	box-sizing: border-box;
	/*font-family: 'PoppinsLight', sans-serif;*/
	font-size: 14px;
	border-radius: 3px;

}
.formBreak textarea{
	resize: vertical;
	min-height: 60px;
}
.relXuserEmail{
	line-height: 35px;
}

/* Buttons */

/*.aflc-app .mp_btn{
    border-radius: 20px;
    background: none;
    color: #333;
    border: none;
    padding: 0 15px;
    height: 35px;
    line-height: 35px;
    display: inline-block;
    width: 100%;
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
	transition:all 350ms ease;
	text-align: center;
}
.aflc-app button.mp_btn{
	padding: 0 10px;
}
.aflc-app .mp_btnSuccess{
    color: #fff;
    background: #01A1E0;
}
.aflc-app .mp_btnLoggedOut{
    color: #fff;
    background: #818284;
}
.aflc-app .mp_btnSuccess:hover{
	background-color: #028cc1;
}
.aflc-app .mp_btnOutline{
	color: #01A1E0;
	border:1px solid #01A1E0;
}
.aflc-app .mp_btnOutline:hover{
	background-color: #01A1E0;
	color: #fff;
}*/
.aflc-app .mp_btnFull{
	width: 100%;
    text-align: center;
    display: block;
}

/**
*	Boatlist
*/
.boatImage .image{
	height: 0;
	padding-top: 38%;
    background: #ccc;
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
}

/**
*	PROFIL
*/
.submitWrap{
	margin-top: 15px;
}
/* Nav */
#profileNav{
	border-top: 1px solid #ccc;
	padding: 30px 0 0 0;
	margin-top: 30px;
}
#profileNav a{
	color: #322f31;
	font-size: 12px;
}
#profileNav a:before,
#profileNav a:after{
	display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#profileNav .prev{
	float: left;
	position: relative;
}
#profileNav .prev:before{
	content: "\f0d9";
	color: #01a1e0;
	margin-right: 4px;
}

#profileNav .next{
	float: right;
	position: relative;
}
#profileNav .next:after{
	content: "\f0da";
	color: #01a1e0;
	margin-left: 4px;
}

/* address */
.switchAddressType{
	margin-bottom: 15px;
}

/* userProfile */
#profileWrap .formBreak{
	margin-bottom: 20px;
}
.profileImage{
	height: 35px;
	width: 35px;
	border-radius: 50%;
	background-position: center;
	background-size: cover;
	background-color: #fff;
	
}
#imageContainer{
	float: left;
}
#f_user_image,
#user_document{
	position: absolute;
	left: -20000px;
}
#documentPreview{
	float: left;
}
#profileWrap .selectImage{
	box-sizing: border-box;
	float: right;
}
#profileWrap .selectImage .fa{
	margin-right: 10px;
}
.deleteProfileImage{
	float: left;
    line-height: 35px;
    padding-left: 15px;
    cursor: pointer;
    color: #818284;
}
#palmaresContainer{
}
#palmaresContainer .palm div{
	float: left;
	padding-right: 10px;
	box-sizing: border-box;
}
#addPalmares{
	float: left;
	margin-left: 15px;
	cursor: pointer;
	line-height: 35px;
}
#palmaresContainer .palm div.date{
	width: 15%;
}
#palmaresContainer .palm div.text{
	width: 80%;
}
#palmaresContainer .palm div.delete{
	width: 5%;
}
.delete{
	cursor: pointer;
	color: #818284;
}

/* user interests */
.interestsSection{
	margin-top:10px;
	margin-bottom:45px;
}

/* documents */
#document_type{
	float: none;
	width: 100%;
}
.modWrap .selectFile{
	float: none;
	width: 100%;

}
.modWrap .selectFile .fa{
	margin-right: 10px;
}
.uploadTitle{
	line-height: 35px;
	margin-top: 15px;
}
.uploadTitle label{
	float: none;
	width: 100%;
}
.docTitle{
	margin-bottom: 6px;
}

/* self Assesment */
.skillTableTitleRow{
	/*font-family: 'PoppinsRegular';*/
	margin-top:20px;
	margin-bottom:10px;
}
.skillTableRow{
	margin-bottom: 15px;
}

/* notifications */
.notificationSection{
	border: 1px solid #818284;
	margin-bottom: 35px;
}
#notificationsForm label{
	width: auto;
	line-height: 18px;
}
#notificationsForm .formBreak.notificationTitle{
	padding: 8px 10px;
	background: #818284;
	color: #fff;
}
#notificationsForm .formBreak.notificationSubtitle{
	padding: 8px 10px;
	/*font-family: 'PoppinsMedium';*/
}
#notificationsForm .formBreak{
	padding: 0 10px;
	margin-bottom: 4px;
}


/**
*	FILTER
*/
#filterWrap{
	background: #eee;
	padding: 45px 0 25px 0;
}
#filterWrap > .inside{
	padding: 0;
}
#filterFormWrap{
	/*margin-bottom: 20px;*/
}
#filterFormWrap{
	width: 100%;
}
.filterFormRow:after{
	display: block;
	content:'';
	clear:both;
}
.filterFormRow{
	margin: 0 -5px;
	display: flex;
	flex-direction: column; /* bro 230318 - row=location-serach is ok,  column=detailview search is ok */
}


.filterFormCol{
	width: 100%;
	padding: 0 5px;
/*	float: left;*/
	box-sizing: border-box;
	position: relative;
	margin-bottom: 5px;
}
.filterButtonRow{
	margin: 0 -5px;
}
.filterBtnCol{
	width: 50%;
	float: left;
	padding: 0 5px;
	margin-bottom: 5px;
	box-sizing: border-box;
}
/*#filterForm_from .filterFormInputWrap,
#filterForm_to .filterFormInputWrap{
	width: 70%;
}
#filterFormInput_timeFrom.filterFormInputWrap,
#filterFormInput_timeTo.filterFormInputWrap{
	width: 30%
}*/
.filterFormInput_dateTo_front { visibility:hidden; }
/*#filterFormInput_dateFrom:after,
#filterFormInput_dateTo:after{
	content: '';
	height: 30px;
	width: 2px;
	display: block;
	background: #aaa;
	position: absolute;
	right: 0;
	top: -7px;
}*/
#filterFormInput_dateFrom:before,
#filterFormInput_dateTo:before{
	content: '\f073';
	position: absolute;
	position: absolute;
	right: 15px;
	bottom: 10px;
	height: 15px;
	width: 15px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	font-family: "Font Awesome 5 Pro";
}
.filterFormCol .filterFormInputWrap input,
.filterFormCol .filterFormInputWrap select{
	width: 100%;
	border:none;
	padding: 5px 10px 5px 40px;
	border-radius: 3px;
	height: 35px;
	box-sizing: border-box;
	outline: none;
}
#detailWrap .courseDateInput, #detailWrap .courseTimeInput, #boatListFilterForm .courseDateInput{
	padding-left: 45px;
}
#detailWrap #filterFormWrap, #boatListFilterForm #filterFormWrap{
	width: 100%;
}
#detailWrap .filterFormCol{
	width: 100%;
}
#detailWrap #filterWrap, #boatListFilterForm #filterWrap{
	background: none;
	padding: 0;
}
@media (max-width: 768px) {
	#filterWrap {
		padding-bottom:10px;
	}
}


.filterTopSection{
	padding: 10px;
	background: #e6e6e6;
}
.filterInputRow{
	padding: 15px 0 0 0;
	background: #fff;
	border: 2px solid #aaa;
	border-radius: 4px;
	display: flex;
	position: relative;
}
.filterFormInputWrap {
	position: relative;
}
.filterInputRow .subLine,
#filterFormInput_loc .subLine, 
#filterForm_nutzergemeinschaft .subLine{
	position: absolute;
	left: 15px;
	top: 0px;
	color: #aaa;
	font-size: .8rem;
	font-weight: 500;
	z-index: 50;
}
.filterFormCol input,
.filterFormCol select{
	height: 35px;
	padding-left: 40px;
	border:none;
	background-repeat: no-repeat;
	background-size: 24px;
	background-position: 8px 5px;
	color: #999;
}
#detailWrap .filterFormCol input, #boatListFilterForm .filterFormCol input{
	background-size: 32px 32px;
	background-position: 5px 5px;
	padding: 0 15px;
	height: 30px;
	color: #000;
	font-weight: 600;
}
/*#filterFormInput_dateFrom input{
	border-radius: 3px 0 0 3px;
	background-image: url(images/icon_datepicker.png);
}
#filterFormInput_timeFrom input{
	background-image: url(images/icon_timepicker.png);
	border-radius: 0px 3px 3px 0;
}
#filterFormInput_dateTo input{
	background-image: url(images/icon_datepicker.png);
	border-radius: 3px 0 0 3px;
}
#filterFormInput_timeTo input{
	background-image: url(images/icon_timepicker.png);
	border-radius: 0 3px 3px 0;
}*/
#locations{
	background-image: url(images/icon_location.png);
}

#detailWrap .filterButtonCol{
	clear: both;
	padding: 15px 5px;
	width: 100%;
	box-sizing: border-box;
}
.aflc-app #filterFormSubmit{
	width: 100%;
	box-sizing: border-box;
	margin-top: 2px;
	/*display: inline-block;
	border:1px solid #01a1e0;
	padding: 0 10px;
	border-radius: 3px;
	box-sizing: border-box;
	background: #01a1e0;
	color:#fff;
	line-height: 33px;
	font-size: 13px;
	text-align: center;
	cursor: pointer;*/
}
#filterForm_submit{
	position: relative;
}
.submitBlocker{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 50;
}
#clearFilter{
	display: inline-block;
	box-sizing: border-box;
    padding: 0px;
    border-radius: 3px;
    background: none;
    border: 1px solid transparent;
    line-height: 33px;
    color: #01a1e0;
    font-size: 14px;
    width: 100%;
}
#backToListLink{
	margin-bottom: 15px;
}
#clearFilter .fa{
	transform: translateY(-2px);
}

.select2-container--default .select2-selection--single{
	border:none;
	border-radius: 3px;
	height: 35px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height: 35px;
	padding-left: 48px;
	/*background-image: url(images/icon_location.png);*/
	background-size: 35px 35px;
	background-position: 5px 0px;
	background-repeat: no-repeat;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
	height: 35px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
	background:#01A1E0;
}
.select2-search__field{
	outline:none;
	/*font-family: 'PoppinsLight', sans-serif;*/
}
.select2-dropdown{
	border:none;
	box-shadow: 0px 2px 6px -3px rgba(0,0,0,.8);
	border-radius: 3px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
	color: #999;
}
.gm-style-iw div{
	overflow-y: hidden !important;
}
#courseFilterWrap{
	margin-bottom: 45px;
	padding:30px 0;
	background-color: #f6f6f6;
	/*margin-left: -50vw;
	margin-right: -50vw;*/
}
#courseFilterWrap.courseShipFilter{
	margin: 0;
	padding: 35px;
}

/* Create Course*/
.createCourseFromRow{
	margin-bottom: 6px;
}
.createCourseFromRow input[type="text"],
.createCourseFromRow input[type="number"]{
	border:1px solid #ccc;
	width: 100%;
	border-radius: 3px;
	padding: 0 20px;
	height: 37px;
	line-height: 37px;
}
.createCourseFromRow.courseDateTime input{
	padding-left: 40px;
}
.createCourseFromRow .select2-container--default .select2-selection--single .select2-selection__rendered,
.filterFormInputWrap .select2-container--default .select2-selection--single .select2-selection__rendered{
	background: none;
	border:1px solid #ccc;
	padding-left: 20px;
	border-radius: 3px;
}
.filterFormInputWrap .select2-container--default .select2-selection--single .select2-selection__rendered{
	border:none;
	border-radius: 0;
	padding: 15px 0 0 15px;
	color: #000;
	font-weight: 600;
}
body .filterFormInputWrap .select2-container--default .select2-selection--single{
	padding: 0;
	height: 49px;
	border: 2px solid #aaa;
	border-radius: 3px;
}

.createCourseFromRow .filterInputRow{
	background: none;
	padding: 0;
}
.createCourseFromRow .filterFormCol{
	padding: 0;
}
.createCourseFromRow .select2.select2-container.select2-container--default,
.filterFormInputWrap .select2.select2-container.select2-container--default{
	width: 100% !important;
}
.createCourseFromRow .mp_btnFull{
	width: 100% !important;
}
.createCourseFromRow #incTimeFrom,
.createCourseFromRow #incTimeTo{
	border-left:none;
}

#courseFilterWrap .filterFormInputWrap{
	/*position: relative;*/
	padding-bottom: 15px;
}
.filterLabelWrap{
	position: absolute;
    z-index: 5;
    left: 15px;
    top: 4px;
    font-size: .8rem;
    line-height: 1rem;
    color: #999;
}
.filterFormInputWrap .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 48px;
}

/** courseDetailWrap */
.courseListElement:after{
	display: block;
	content: '';
	clear: both;
}
.courseListElement{
		/*border-bottom: 1px solid #ccc;*/
		margin-bottom: 15px;
		display: block;
		/*padding-bottom: 15px;*/
	}
.courseListeElementInner{
		padding: 10px;
		background: #f6f6f6;
		display: block;
		/*display: flex;*/
		/*flex-direction: column;*/
		/*height: 100%;*/
	}
.myCourses .courseListElement .column,
.myCourses .courseHeader .column{
	padding: 0;
}
.col-buttons .column{
	margin-bottom: 2px;
}
.courseListBody .row{
	display: flex;
	flex-wrap: wrap;
}
.col-buttons{
	margin-top: auto;
	padding-top: 15px;
}
.aflc-app .col-buttons .mp_btn{
	width: 100%;
}

/*reservationdetail popup*/
.message.reservationDetail{
	position: absolute;
	/*top: -220px;*/
	bottom: 250px;
	height: auto;
    width: 100%;
    box-sizing: border-box;
    /*height: 190px;*/
    background: #fff;
    border: 1px solid #eee;
    color: #333;
    box-shadow: 0 4px 20px -4px rgba(0,0,0,.6);
    /*font-family: 'PoppinsLight', sans-serif;*/
    z-index: 500;
    font-size: 12px;
}
.message.reservationDetail .close{
	background: rgba(0,0,0,.1);
}

.reservationDetail .locationInfos .untertitel {
	line-height: 20px;
    position: relative;
    cursor: pointer;
    font-weight: bold;
    text-transform:uppercase;
}
.orderPortrait{
	background-position: center;
	background-size: cover;
	height: 40px;
    width: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #01a1e0;
}

.reservationDetail .orderPerson a[href^="tel:"], .reservationDetail .orderPerson a[href^="mailto:"] {
	font-size:14px !important;
}


/*Basket*/
.basketImage{
	height: 100px;
	background-color: #eee;
}

.basketItem{
	/*border-top: 1px solid #dcddde;*/
	padding: 15px 0;
	position: relative;
}
.basketItem:first-child{
	border:none;
}
.basketItemOther{
	padding: 0;
}
.removeItemFromBasket{
	position: absolute;
	top: 30px;
	right: -35px;
	background-color: #dcddde;
	border-radius: 50%;
	box-sizing: border-box;
	line-height: 30px;
	text-align: center;
	height: 30px;
	width: 30px;
	cursor: pointer;
	-webkit-transition:all 350ms ease;
	-moz-transition:all 350ms ease;
	-ms-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
}
.basketItemOther .removeItemFromBasket{
	position: relative;
	top: 0;
	right: 0;
	border-radius: 0;
	background: #818284;
	color: #fff;
}
.removeItemFromBasket:hover{
	/*box-shadow: 0px 0px 3px 0 rgba(0,0,0,.3);*/
	background-color: #bd0019;
}
.reservationCommentSubmit{
	margin-top: 4px;
}
.reservationCommentText{
	border: 1px solid #dcddde;
}
.orderProcessNav{
	border-top: 1px solid #dcddde;
    padding-top: 30px;
    margin-top: 30px;
}
.orderProcessNav a{
	margin-bottom: 10px;
}
#suggestWrap{
	margin-top: 25px;
}
.checkoutSummary{
	margin-top: 25px;
	border-top: 1px solid #dcddde;
	padding: 30px 0 0px 0;
}
.checkoutSummary:after{
	display: block;
	content:'';
	clear: both;
}
.checkoutSummary table{
	float: right;
}

/*Profil: Nutzungen (uses)*/

#usesesWrap .dateTable{
	margin: 15px 0;
}
#usesesWrap .usesBtn a{
	display: block;
	background-color: #fff;
	border: 1px solid #dcddde;
	border-radius: 3px;
	padding: 8px 0;
	text-align: center;
	margin-bottom: 5px;
	cursor: pointer;
	-webkit-transition:all 350ms ease;
	-moz-transition:all 350ms ease;
	-ms-transition:all 350ms ease;
	-o-transition:all 350ms ease;
	transition:all 350ms ease;
}
.aflc-app #usesesWrap .usesBtn a:hover{
	background-color: #01a1e0;
	color: #fff;
}
#usesesWrap hr, #detailWrap hr{
	margin:30px 0;
	border:none;
	border-top: 1px solid #dcddde;
	height: 1px;
}
.uses .headline_2{
	min-height: 45px;
}

#calendarWrap{
	/*max-width: 320px;*/
}

/*memberListWrap*/
.memberListElement{
	border-bottom: 1px solid #ddd;
	padding: 15px;
}
.memberListElement .column{
	padding-bottom: 25px;
}
.memberTextWrap{
	padding-right: 0px;
}


.mp_msg{
	border: 1px solid #ddd;
    padding: 8px 14px;
}
.mp_msgFail{
	border-color: rgba(204,0,0,.4);
    background-color: rgba(204,0,0,.1);
    color: rgba(204,0,0,.8);
}
.mp_msgSuccess{
	border-color: rgba(85,178,87,.6);
    background-color: rgba(85,178,87,.3);
    color: rgb(58, 151, 60);
}
#loginBut, #registerBut{
	float: right;
	margin-top: 10px;
}



.alertMsgWrap{
	margin-left: 10px;
	top: auto;
	bottom: 50px
}
.alertMsgWrap:before {
    content: '';
    display: block;
    height: 12px;
    width: 12px;
    background: #ebebeb;
    position: absolute;
    top: auto;
    bottom: -7px;
    z-index: 40;
    border: 1px solid #ccc;
    left: 20px;
    border-right: none;
    border-bottom: none;
    transform: rotate(-135deg);
}
#messageWrap{
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 9999;
}
#messageWrap .messageTemplate{
	display: none;
}
.message{
	padding: 20px 40px 20px 20px;
	width: 100%;
	background: #01a1e0;
	color:#fff;
	border-radius: 4px;
	box-shadow: 2px 2px 4px -2px rgba(0,0,0,.4);
	margin-bottom: 4px;
	position: relative;
	box-sizing: border-box;
}
.message .close{
	position: absolute;
    right: 10px;
    height: 25px;
    top: 20px;
    width: 25px;
    text-align: center;
    line-height: 25px;
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    cursor: pointer;
}
.message.error{
/*	background: #c00;*/
	background: var(--aflc-background-red);
}



.alertMsgWrap{
	margin-left: 10px;
	top: auto;
	bottom: 50px
}
.alertMsgWrap:before {
    content: '';
    display: block;
    height: 12px;
    width: 12px;
    background: #ebebeb;
    position: absolute;
    top: auto;
    bottom: -7px;
    z-index: 40;
    border: 1px solid #ccc;
    left: 20px;
    border-right: none;
    border-bottom: none;
    transform: rotate(-135deg);
}
.timeEntry-control{
	display: none !important;
}

/*DETAIL*/
#detailWrap{
	padding-top: 35px;
}
#detailWrap.changeReservation{
	padding-top: 0;
}
#topRow{
	margin-bottom:35px; 
}
#detailWrap #topRow{
	margin-bottom: 0;
}
#filterFormSubmit.blocked{
	background-color:#aaa;
	border-color: #aaa;
	color:#fff;
}
#galleryPages{
	overflow-y: hidden;
}

#legend{
	margin: 25px 0;
}
.legendItem{
	position: relative;
	line-height: 23px;
	padding-left: 30px;
	font-size: 12px;
	margin-bottom: 6px;
}
.legendItem:before, .requestLegend:after, .bookingElseLegend:after{
	content: '';
	display: block;
	height: 18px;
	width: 18px;
	position: absolute;
	left: 0;
	top: 0;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: "Font Awesome 5 Pro";
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
}
.requestLegend:before{
	background: #92d050;
	color: #000;
	/*content: '\f00c';*/
	left: 0;
}
.requestLegend:after{
	background: var(--aflc-background-red);
	color: #fff;
	/*content: '\f00d';*/
	left: 25px;
}
.requestLegend{
	padding-left: 50px;
}
.requestLegendCourse:before{
	background: #a4af48;
}
.bookingElseLegend {
	padding-left:50px;
}
.bookingElseLegend:before{
/*	background: #444;*/
	
	background:#d36271;
	color: #fff;
	/*content: '\f00d';*/
}
.bookingElseLegend:after{
	background: #f0956d;
	color: #fff;
	/*content: '\f00d';*/
	left: 25px;
}
.bookingSelfLegend:before{
	background: #192864;
	color: #fff;
	/*content: '\f00c';*/
}
.bookingElseLegendCourse:before{
	background: #f0956d;
}
.bookingSelfLegendCourse:before{
	background: #4c9b91;
}
.requestDeniedLegend:before{
	background: var(--aflc-background-red);
	color: #fff;
	/*content: '\f00d';*/
}
.properties.row{
	padding: 10px 0;
	border-top: 1px solid #ccc;
}
.prpertieName{
	float: right;
	text-align: right;
	line-height: 24px;
}
.prpertieValue{
	line-height: 24px;
	position: relative;
}
.prpertieValue sup{
	position: absolute;
	transform: translateY(-3px);
    font-size: 10px;
}
#propertieWrap .properties:first-child{
	border:none;
}
.sliderImage{
	height: 280px;
	width: 100%;
	background-size: cover;
	background-position: center;
}
.thumbImage{
	height: 50px;
	width: 50px;
}
#galleryCarousel .owl-nav{
	width: 100%;
}
#galleryCarousel .owl-nav > div{
	position: absolute;
	top: 40%;
	color: #fff;
}
#galleryCarousel .owl-nav > div.owl-prev{
	left: 20px;
}
#galleryCarousel .owl-nav > div.owl-next{
	right: 20px;
}
#galleryCarousel .owl-dot{
	height: 60px;
	width: 60px;
	display: inline-block;
	background-size: cover;
	background-position: center;
	margin-top: 10px;
	margin-right: 10px;
	opacity: 0.6;
}
#galleryCarousel .owl-dot.active{
	opacity: 1;
}
#calendarWrap{
	width: 100%;
	/*min-height: 210px;*/
	height: 255px;
	position: relative;
}
#calendarWrap.loading{
	overflow: hidden;
	/*opacity: 0;*/
}
#calendarWrap.loading:before{
	content:'';
	height: 100%;
	width: 100%;
	background: #f2f2f2;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 50;
}
.dayContainer{
	padding: 0;
	background: #e6e6e6;
	margin:0 0.5px;
	min-height: 212px;
}
#calendarWrap .owl-nav:after{
	display: block;
	content:'';
	clear: both;
}
#calendarWrap .owl-nav div{
	display: inline-block;
	padding-top: 15px;
	font-size: 16px;
}
#calendarWrap .owl-nav div.owl-prev{
	float: left;
}
#calendarWrap .owl-nav div.owl-next{
	float: right;
}
.dayTitle{
	padding: 4px;
	background: #e6e6e6;
	text-align: center;
	font-size: .9rem;
	font-weight: 600;
}
#calendarWrap .reservationItem{
	padding: 2px 4px;
	background: #f2f2f2;
	border-top: 1px solid #fff;
	font-size: 0.9rem;
	line-height: 1.2rem;
	height: 18px;
	color: #000;
	box-sizing: content-box;
	text-align: center; /*bro 170413*/
}
#calendarWrap .reservationItem:not(.empty){
	cursor: pointer;
}
#calendarWrap .reservationItem:nth-child(even){
	background-color: #e6e6e6;
}
.dayContent{
	padding: 0;
}
/*#calendarWrap .reservationItem.booked-else{
	background: #d36271;
    color:white;
}
#calendarWrap .reservationItem.booked-self{
	background: #668e9b;
}
#calendarWrap .reservationItem.booked-else-course{
	background: #f0956d;
}
#calendarWrap .reservationItem.booked-self-course{
	background: #4c9b91;
}
#calendarWrap .reservationItem.booking-current{
	background: #8faf6d;
}
#calendarWrap .reservationItem.booking-current-course{
	background: #a4af48;
}
#calendarWrap .reservationItem.open{
	background: #01a1e0;
}
}
*/
#calendarWrap .reservationItem.booked-else{
	background: #d36271;
    color: white;
}
#calendarWrap .reservationItem.booked-self{
	background: #0e2048;
	color: #fff;
}
#calendarWrap .reservationItem.booked-else-course{
	background: #f0956d;
}
#calendarWrap .reservationItem.booked-self-course{
	background: #0e2048;
	color: #fff;
}
#calendarWrap .reservationItem.booking-current{
	background: #8faf6d;
}
#calendarWrap .reservationItem.booking-current-course{
	background: #a4af48;
}
#calendarWrap .reservationItem.open{
	background: #01a1e0;
}
#calendarWrap .reservationItem.requested.available{
	background: #92d050;
	color: #000;
}
#calendarWrap .reservationItem.requested.not-available{
	background: var(--aflc-background-red);
	color: #fff;
}
.dayContainer.not-available .dayTitle{
	/*background: var(--aflc-background-red);
	color: #fff;*/
	background: repeating-linear-gradient( 45deg, #f6e5e7, #f6e5e7 5px, #f0b0b8 5px, #f0b0b8 10px );
}
.dayContainer.available .dayTitle{
	/*background: repeating-linear-gradient( 45deg, #b0cf8f, #b0cf8f 5px, #8faf6d 5px, #8faf6d 10px );*/
	background: #8faf6d;
	color: #000;
}
.dayContainer.available-course .dayTitle{
	/*background: repeating-linear-gradient( 45deg, #b0cf8f, #b0cf8f 5px, #8faf6d 5px, #8faf6d 10px );*/
	background: #b81eae;
	color: #fff;
}

.courseHeader{
	display: none;
}

/**
*	TABLET PORTRAIT
*/
@media (min-width: 1200px) {
#calendarWrap{
	/*max-width: 740px;*/
}
#courseFilterWrap{
	margin-bottom: 45px;
	padding:30px 0;
	background-color: #f6f6f6;
	margin-left: -50vw;
	margin-right: -50vw;
}
/*memberListWrap*/
.memberListElement{
	border-bottom: 1px solid #ddd;
	padding: 15px;
}
.memberListElement .column{
	padding-bottom: 0;
}
.memberTextWrap{
	padding-right: 20px;
}
/*reservationdetail popup*/
.message.reservationDetail{
	top: auto;
    height:auto;
    bottom: 250px;
    font-size: 14px;
}
.orderPortrait{
	height: 80px;
    width: 80px;
}
.orderDate{
	margin-bottom: 12px;
}
.message{
	width: 300px
}
}

/**
*	TABLET LANDSCAPE
*/
@media (min-width: 992px) {
#calendarWrap{
	/*max-width: 540px;*/
}
#boatListWrap .boatImage .image{
	/*height: 140px;*/
    background-color: transparent;
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
}
/* Formfields */
.formBreak{
	margin: 0 0 8px 0;
	position: relative;
	/*display: flex;*/
}
.formBreak:after{
	display: block;
	content: '';
	clear: both;
}
.formBreak label{
	width: 25%;
	float: left;
}
.formBreak input[type="text"],
.formBreak input[type="password"],
.formBreak select,
.formBreak textarea{
	width: 75%;
	float: left;
	border: 1px solid #ccc;
	padding: 3px 6px;
	height: 35px;
	box-sizing: border-box;
}
.inputWrap{
	width: 75%;
	float: left;
	padding-top: 8px;
}


/*  Button */
.aflc-app .mp_btn{
	width: auto;
}
.aflc-app .mp_btnRight{
	float: right;

}

/**
*	FILTER
*/
.filterFormCol{
	width: 27%;
	/*margin-bottom: 0;*/
}
#filterForm_submit{
	width: 19%;
}
.filterBtnCol{
	width: 100%;
}

/*order process*/
.orderProcessNav a{
	margin-left: 10px;
	margin-bottom: 0;
}
.agb a{
	margin-left: 0;
}

/*memberListWrap*/
.memberListElement{
	border-bottom: 1px solid #ddd;
	padding: 15px;
}
.memberTextWrap{
	padding-right: 50px;
}
	
}

/**
*	NOTEBOOK
*/
@media (min-width: 1200px) {
#calendarWrap{
	max-width: 100%;
}
.changeReservation #calendarWrap{
	max-width: 745px;
}
/* filter*/
.filterFormCol{
	width: 25%;
	/*margin-bottom: 0;*/
}
#filterForm_submit{
	width: 25%;
}
.filterBtnCol{
	width: 50%;
}
}

/**
*	DESKTOP
*/
@media (min-width: 993px) {
	.courseHeader{
		/*justify-content: space-between;*/
/*		display: flex;*/
		display: block;
		width: 100%;
		/*padding-bottom: 20px;*/
	    margin-bottom: 20px;
	    border-bottom: 1px solid #ccc;
	    font-weight: bold;
	}

	.courseListElement{
		border:none;
		/*display: flex;*/
		/*flex-wrap: wrap;*/
		width: 100%;
		margin-bottom: 5px;
	}
	.courseListElement .courseListeElementInner{
		/*display: flex;*/
		/*flex-direction: row;*/
		/*justify-content: space-between;*/
		/*flex-wrap: wrap;*/
		width: 100%;
		/*border-bottom: 1px solid #ccc;*/
		display: block;
		margin-bottom: 5px;
		/*align-items: center;*/
		/*padding-bottom: 15px;*/
		/*background-color: red;*/
	}
	.col-buttons{
		margin:0;
		padding-top: 0;
	}
	.aflc-app .col-buttons .mp_btn{
		width: auto;
	}
	.courseCol{
		/*width: 33.3333%;*/
	}
	.no-xl{
		display: none;
	}
	.col-type{
		width: 260px;
	}
	.col-date{
		width: 190px;
	}
	.col-location{
		width: 160px;
	}
	.col-price{
		width: 100px;
	}
	.col-teacher{
		width: 170px;
	}
}

.badgesWrap{
    display: flex;
    flex-wrap: wrap;
}
.badge{
    border-radius: 50% !important;
    border: 2px solid #01a1e0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    height: 50px;
    width: 50px;
    position: relative;
}
.badgeCol{
    padding: 0 4px 4px 0;
}
.badge .fa{
    font-size: 40px;
    color: #01a1e0;
}
.badgeLetter{
    position: absolute;
    top: 0;
    left: 0;
    height: 46px;
    width: 46px;
    line-height: 46px;
    text-align: center;
    z-index: 5;
    color: #fff;
}
.aboWrap{
    padding-top: 10px;
}


.badge .fa{

    /*-webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 4s;

    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 4s;
    
    -webkit-animation-name: scale; 
    -webkit-animation-duration: 4s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    
    -moz-animation-name: scale; 
    -moz-animation-duration: 4s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    
    transition:all 0.2s linear;
*/
}

@-webkit-keyframes scale {
    0% {
    	-webkit-transform: scale(.8) rotate(0deg);
    }
    30% {
    	-webkit-transform: scale(1) rotate(45deg);
    }
    100% {
    	-webkit-transform: scale(.8) rotate(360deg);
    }
}

@-moz-keyframes scale {
    0% {
    	-moz-transform: scale(.8);
    }
    70% {
    	-moz-transform: scale(1);
    }
    100% {
    	-moz-transform: scale(.8);
    }
}


/*	MEMBERSHIP 	*/


.loader{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*background: rgba(255, 255, 255, 0.4);*/
    z-index: 50;
}

.loader:before{
    height: 110px;
    width: 110px;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -55px 0 0 -55px;
    background: #323232;
    z-index: 10;
    box-shadow: 0 0 15px -2px rgba(0,0,0,.2)
}
.loader:after{
    content:'';
    display:block;
    position:absolute;
    opacity:0;
    width: 50px;
    height: 50px;
    border: 4px solid rgba(228, 44, 42, 0.23);
    border-right-color: #e42c2a;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    left:50%;
    top:50%;
    
   /* transition:rotate 0.2s linear;*/
   animation:custom .6s linear infinite;

    margin: -25px 0 0 -25px;
    z-index: 20;
}
.loader:after {
    opacity:1;
}
.loader:after{
    /*display: none;*/
}

@keyframes custom {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);

    }
}
/*@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}*/


.listElement{
    border-top: 1px solid #a9a9a9;
    padding: 10px 0;
}
.listElement p,
.listElement{
    font-size: 13px;
    line-height: 17px;
}

#memberWrap fieldset{
    border: none;
    padding: 0;
    margin-bottom: 15px;
    /*background: #ddd;*/
}
.filterWrap label{
    font-weight: 500;
}
#memberWrap input[type=text], #memberWrap input[type=password],
#memberWrap select{
    width: 100%;
    box-sizing: border-box;
    padding: 2px 10px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #aaa;
    border-radius: 0px;
    outline: none;
    transition: border 300ms;
}
#memberWrap input:focus,
#memberWrap select:focus{
    border-color: #00a1e0;
}
.listWrap{
    padding-top: 45px;
}
.filterWrap .column{
    padding-bottom: 4px;
}
.listWrap .row{
    display: flex;
    flex-wrap: wrap;
}

input.datePicker {
    font-size:11px;
}

body .filterWrap .select2-container--default .select2-selection--multiple .select2-selection__choice,
body .select2-container--default .select2-selection--multiple .select2-selection__choice{
    font-size: 12px;
    background: #f0f0f0;
    border:none;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .filterWrap .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--single{
    width: 100%;
    box-sizing: border-box;
    padding: 2px 10px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #aaa;
    border-radius: 0px;
}
body .filterWrap .select2-container--default .select2-selection--multiple,
body .select2-container--default .select2-selection--multiple{
    width: 100%;
    box-sizing: border-box;
    padding: 2px 10px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #aaa;
    border-radius: 0px;
}
body .filterWrap .select2-container--default .select2-selection--multiple input,
body .select2-container--default .select2-selection--multiple input{
    height: auto;
    line-height: 25px;
}


.checkInput{
    display: none;
}
.checkWrap{
    display: flex;
    align-items: center;
}
.checkWrap label{
    cursor: pointer;
    display: block;
}
.memberFormWrap .formRow label.checkbox{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    width: 20px;
    border: 2px solid #aaa;
    border-radius: 0px;
    margin: 0;
    margin-right: 5px;
    box-sizing: border-box;
}
.checkWrap label.checkbox > .fa{
    opacity: 0;
    font-size: 0;
    transition: all 200ms;
}
.checkWrap:hover label.checkbox > .fa{
    color: #aaa;
    opacity: 1;
    font-size: 12px;
}
.checkInput:checked + label.checkbox{
    border-color: #e42c2a;
    background-color: #e42c2a;
}
.checkInput:checked + label.checkbox > .fa{
    color: #fff;
    opacity: 1;
    font-size: 12px;
}

.shipOwnerTypeRow > .row{
    margin-bottom: 10px;
}
.memberFormWrap .formRow.notValid{
    background: none !important;
}

.memberNav{
    margin-bottom: 45px;
    background: #efefef;
    overflow: hidden;
}
.memberNav ul{
    display: flex;
    flex-wrap: wrap;
}
#memberWrap .memberNavItem{
    padding: 0;
}
#memberWrap .memberNavItem:before{
    display: none;
}
.aflc-app .memberNav li a{
    display: flex;
    line-height: 27px;
    padding: 12px;
    color: #00a1e0;
    font-weight: normal;
    position: relative;
    border-right: 5px solid #fff;
    transition: all 250ms;
}
@media (max-width:768px) {
   /* .aflc-app .memberNav li{
        width: 100%;
    }*/
}
.aflc-app .memberNav li a:hover{
    background: rgba(0,161,224,.2);
}
.aflc-app .memberNav li.active a{
    background: #00a1e0;
    color: #fff;
}
.aflc-app .memberNav li.done a{
    /*background: #8ac8ed;*/
    color: #00a1e0;
}
.memberNav li a .number{
    display: block;
    height: 23px;
    width: 23px;
    border-radius: 50%;
    line-height: 23px;
    text-align: center;
    border: 1px solid #00a1e0;
    font-weight: bold;
    margin-right: 0;
    font-size: 11px;
    color: #00a1e0;
}
.aflc-app .memberNav li.done a .number{
    border: 1px solid #00a1e0;

}
.aflc-app .memberNav li.active a .number{
    border: 1px solid #fff;
    color: #fff;
}
.memberContent .formRow{
    padding-bottom: 12px;
}
.memberContent .formRow .row .row{
    margin-right: -2px;
    margin-left: -2px;
}
.memberContent .formRow .column .column{
    padding-left: 2px;
    padding-right: 2px;
}
/*.aflc-app .memberNav li a:before,
.aflc-app .memberNav li a:after{
    height: 39px;
    width: 37px;
    background: #456388;
    border-left: 2px solid #eee;
    content: '';
    position: absolute;
    right: -25px;
    top: -21px;
    transform: rotate(-45deg);
}
.aflc-app .memberNav li a:after{
    top: auto;
    bottom: -21px;
    transform: rotate(45deg);
}*/

body .memberFormWrap .select2-container{
    width: 100% !important;
}
p.memberLabel{
    text-align: right;
    min-height: 35px;
    display: flex;
    align-items: center;

}
.formInputWrap .memberLabel{
    border: 1px solid #e0e0e0;
    padding: 2px 10px;
    height: 35px;
    line-height: 35px;
    padding-left:15px !important;
}
.editBtn{
    margin-right: 10px;
}

.memberContent .row{
    display: flex;
    flex-wrap: wrap;
}
.sbCard{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 35px;
    background: #efefef;
    box-sizing: border-box;
    position: relative;
    /*font-family: 'PoppinsRegular' !important;*/
}
.sbCard.sommerSale{
    background: #FFF2CC;
}
.sbCard .sbCardTitle,
.sbCard .sbCardTitleSmall{
    text-transform: uppercase;
    font-size: 1.4em;
    color: #01a1e0;
    font-weight: bold;
    margin-bottom: 20px;
}
.sbCard .sbCardTitleSmall{
    font-size: 1.2em;
}
.sbCard .sbCardFooter{
    margin-top: auto;
}
.sbCard .formBreak{
    flex-direction: column;
}
.sbCard .formBreak label,
.sbCard .formBreak input[type=text],
.sbCard .formBreak input[type=password]{
    width: 100%;
    float: none;
    display: block;
}
.aflc-app .sbCard .mp_btnFull{
    width: 100%;
    text-align: center;
    display: block;
}
.aflc-app a.editIconBtn{
    /*position: absolute;*/
   /* right: 20px;
    top: 20px;*/
    border-radius: 50%;
    background: #01a1e0;
    color: #fff;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    width: 25px;
    text-align: center;
}

.productShowCase .sbCard{
    margin-bottom: 25px;
}
.sbCardFooter input, .sbCardFooter a{
	display: block;
	margin: 10px 0 0 0;
}
@media (max-width: 992px) {
	.memberContent .column{
		padding-bottom: 15px;
	}
	.sbCard{
		padding: 15px;
	}
}
.sbCardContent .formRow label{
	height: auto;
	display: flex;
}
.sbCardContent .formRow label .checkLabel{
	padding-left: 10px;
}

.iti.iti--allow-dropdown{
	display: block;
}

#memberWrap .iti.iti--allow-dropdown #f_address_mobile,
#memberWrap .iti.iti--allow-dropdown #f_relXuser_mobile{
	padding-left: 48px;
}
.iti__country-list li:before{
	display: none;
}

.sbCard.lightBlue{
	background: #ccecff;
}
.sbCard.lightOrange{
	background: #ffdccc;
}
.sbCard.lightYellow{
	background: #FFF2CC;
}
.discountBasketText{
	display: block;
	padding-top: 5px;
	color: #c70000;
}

section .sbCardContent ul li{
    padding-left: 22px;
    position: relative;
    padding-bottom: 5px;
}







/*TENDER STYLES*/


.basketSelectRow select{
	width: 100%;
}
body .basketSelectRow .select2-container--default .select2-selection--single{

}
body .basketSelectRow .select2-container--default .select2-selection--single .select2-selection__rendered{
	padding: 0;
}
.tenderList .col-buttons{
	margin-left: auto;
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
@media (min-width: 1200px ) {
	.tenderList .courseCol.col-info{
		width: 410px;
	}
	.tenderList .courseCol.col-price{
		width: 140px;
	}
	.tenderList .courseCol.col-teacher{
		width: 220px;
	}
	.tenderList .courseListeElementInner{
		/*align-items: flex-start;*/
	}
}

/*@media (min-width: 800px ) {*/
	div.tenderList div.courseCol{
		 margin-bottom: 5px;
	}
/*}*/



body .cke_top{
	border: none;
	background: none
}
.commentBooking{
	font-size: 12px;
}
.commentBooking b{
	font-size: 14px;
}

.mpg-collection .collection-plugin{
	padding: 0 5px;
}
/* 260908 broc - was `.collection-plugin * { font-size: 14px !important }`. A universal selector with
   !important made every targeted rule in the cart pointless - including the ones further down in this
   file. The container sets the base now and everything inherits normally. */
.collection-plugin {
	font-family: 'Livvic', sans-serif;
	font-size: var(--fs-meta);
	color: var(--ink);
}

#boatListWrap{
	padding-top: 45px;
}
#boatListWrap > .inside{
	padding: 0;
}
.boatElement{
	background: none;
	margin-bottom: 40px;
}
/*.boatImage .image{
	height: 120px;
	background-image: #ccc;
}*/
.boatAttributes{
	/*padding: 10px 0;
	height: 90px;
	overflow: hidden;*/
	/*TODO fb remove overflow*/
}
.boatImage{
	display: none;
}
.boatInfoWrap{
	position: relative;
}
.boatButtonRow{
	padding: 10px 0 0 0;
}
/*.aflc-app .boatButtonRow .boatBtn{
	display: block;
	background: #818284;
	color:#fff;
	border-radius:20px;
	padding: 0 15px;
    height: 35px;
    line-height: 35px;
	text-align: center;
}
.aflc-app .success .boatButtonRow .boatBtn{
	background: #01a1e0;
}*/

.aflc-app .boatButtonRow .boatBtn.unavailable{
	background: red;
}

.blocked .qualifications{
	position: absolute;
	height: 94%;
	width: 100%;
/*	background: #d36271;*/
	background: var(--aflc-background-red);
	padding: 20px;
	box-sizing: border-box;
	top: 0;
	left: 0;
	opacity: 0;
	color:white;
}
.blocked.boatElement:hover .qualifications{
	opacity:1;
}
.boatLink{
	padding-top: 10px;
}
.loaded{
	/*background: #e5f0e1;*/
}
.notAvailableObjects{
	background: #eee;
	padding: 45px 0;
}

.tokens{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.courseSegments .tokens{
	justify-content: flex-start;
}
.tokens .token{
	background: #ababab;
	padding: 0;
	margin-right: 5px;
	color: #fff;
	border-radius: 5px;
	font-size: 0.9rem;
	text-align: center;
	min-width: 24px;
}
.courseSegments .tokens .token{
	padding: 0 8px;
}
.only-sm{
	display: block !important;
}
.only-lg{
	display: none !important;
}
.space-sm{
	padding-bottom: 15px;
}
.text-right-sm{
	text-align: right;
}
.courseRgionMobile{
	font-weight: bold;
}
.courseDate{
	padding: 10px 0;
}
.linkToDetailInList{
	display: flex;
	align-items: center;
}
@media(min-width: 992px) {
	.courseDate{
		padding: 0;
	}
	.tokens{
		justify-content: flex-start;
	}
	.only-sm{
		display: none !important;
	}
	.only-lg{
		display: block !important;
	}
	.space-sm{
		/*padding-bottom: 0;*/
	}
	.text-right-sm{
		text-align: left;
	}
}
.courseListeElementInner > .row > div{
	display: flex;
	flex-direction: column;
}
.courseSegments, .courseLangWrap{
	margin-top: auto;
}
.cdWrap{
	display: flex;
}
.cdPre{
	width: 50px;
	font-size: 0.8rem;
}
.cdDate{
	width: 200px;
}


/*SBTABS*/
.sbTabWrap{
/*	padding-bottom: 2px;*/
	padding-bottom: 17px;
}
.sbTabTitle{
/*	background: #f6f6f6; aka milk*/
	background: #e5e5e5; /* aka cloud */
	/*	background: #dcdcdc; aka silver*/
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px 10px;
	position: relative;
	cursor: pointer;
	padding-left:45px;
}
.sbTabWrap.signal .sbTabTitle{
	background: var(--aflc-background-red);
	color: #fff;
}
.sbTabTitle .byLine{
	font-weight: 400;
	color: #888;
	margin-left: 2px;
}
.sbTabsContainer{
	padding: 20px 0;
	display: none;
	padding-left:10px;
}
.sbTabsContainer .sbTab{
	position: relative;
	padding-left: 35px;
	padding-bottom: 20px;
}
.sbTabsContainer .sbTab:last-child{
	padding-bottom: 0;
}
.sbTabTrigger{
	line-height: 20px;
	position: relative;
	cursor: pointer;
	font-weight: bold;
}
/*.sbTabTrigger:after,*/ .sbTabTitle:before {
    content: '\f078';
    position: absolute;
    left: 10px;
    top: 0px;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
    display: inline-block;
    font-family: "Font Awesome 5 Pro";
    font-size: inherit;
    text-rendering: auto;
    color: #009cdc;
    transition: all 300ms;
}
.sbTabWrap.signal .sbTabTitle:after{
	color: #fff;
}
.sbTabTitle:after, .sbTabTitle:before{
	top: 7px;
	font-size: 20px;
}
/*.sbTabsContainer .sbTab:before{
	content: '';
	display: block;
	border: 2px solid #868686;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	z-index: 5;
	left: 0;
	top: 0;
	height: 20px;
	width: 20px;
}
*/
.sbTabsContainer .sbTab:before {
    content: '+';
    display: flex;
    align-items: center; /* Vertically centers the content */
    justify-content: center; /* Horizontally centers the content */
    border: 2px solid #868686;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    height: 20px;
    width: 20px;
    font-size: 18px; /* Adjust the size of the '+' sign as needed */
}
.sbTabsContainer .sbTab.open:before {
    content: '-';
    font-size: 31px;
}




.sbTabsContainer .sbTab:after{
	content: '';
	display: block;
	background: #868686;
	position: absolute;
	z-index: 4;
	left: 9px;
	top: 0;
	height: 100%;
	width: 2px;
}
.leadText{
	font-weight: 500;
	padding:0 10px 10px 10px;
}
.sbTabsContainer .leadText{
	padding-bottom:30px; /*10 + 24, but 30looks better, as they always made empty <p> or <br> in the text so far*/
}
.sbTabContent{
	display: none;
	padding-top: 20px;
}
.sbTab.open .sbTabContent{
	/*display: block;*/
}
/*.sbTab.open .sbTabTrigger:after,*/ .sbTabWrap.open .sbTabTitle:before{
	
	transform: rotate(180deg) translateY(2px);
}




/*propertieWrap*/
#propertieWrap{
	display: flex;
	flex-wrap: wrap;
}
#propertieWrap .propertiesRow{
	width: 100%;
/*	display: flex;
	flex-wrap: wrap;*/
	padding: 5px 8px;
	background: #f6f6f6;
	margin-top: 2px;
}
#propertieWrap .propertiesCol-4{
	width:20%;
}
.courseButtons{
	margin-top: auto;
}

.courseButtons .booked{
	color:red !important;
}

.sectionImage{
	background-size: cover;
	background-position: center;
	padding-top: 65%;
}

.shipTopInfo{
	display: flex;
	margin-bottom: 15px;
}
.shipIcons{
	display: flex;
	margin-left: auto;
}
.icon{
	padding: 0 5px;
}
.shipNumber{
	margin-left: 10px;
    padding: 0 5px;
/*    background: #aaa;*/
background: var(--aflc-background-graphite);
    color: #fff;
    font-weight: bold;
}
.shipPromoText{
/*	color: #aaa;*/
	background: none;
    padding: 0;
    font-weight: 500;
    color: #005e83;
    margin-bottom: 30px;
}

.boatAttributes .listElementDescription{
	/*color: #aaa;*/

	min-height: 53px;
	padding-top: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;

	
	background: none;
/*	font-weight: 500;*/
	font-weight: 400;
	color: #005e83;
	margin-bottom:38px;
}
.outOfOrder{
	background: none;
    padding: 0;
    font-weight: 500;
    color: #005e83;
    /*text-transform: uppercase;*/
    margin-bottom: 30px;
}
.signal-red-invert ul{
	margin-bottom: 0;
}

.noMobile{
	display: none;
}
.onlyMobile{
	display: block;
}

.sectionImage{
	margin: 10px 0 26px 0;
	
}
@media (min-width: 768px) {
/*	.sectionImage{
		margin: 15px 0;

	}*/
	.scpecialBox{
/*		margin-bottom: 15px;*/
	}
	.noMobile{
		display: block;
	}
	.onlyMobile{
		display: none;
	}
}
.mp-widget-content .mp-dropdown-loggedIn{
	/* padding: 0 10px 10px 10px; */
	padding: 0 !important;
}

.scpecialBox{
	margin-bottom: 17px;
}

.aflc-app #sboxApp p {
    font-size:15px;
}

/* 260411 broc - eLogbook skeleton (pulse animation, neutral light) */
.aflc-app .booking-card .elogbook-section {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}
.aflc-app .booking-card .elogbook-skeleton {
	background: #f5f5f5;
	border-radius: 6px;
	padding: 14px 16px;
}
.aflc-app .booking-card .elogbook-skeleton ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.aflc-app .booking-card .elogbook-skeleton ul li {
	padding-left: 16px;
	position: relative;
	margin-bottom: 8px;
}
.aflc-app .booking-card .elogbook-skeleton ul li:last-child {
	margin-bottom: 0;
}
.aflc-app .booking-card .elogbook-skeleton ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ddd;
	animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.aflc-app .booking-card .skeleton-line {
	height: 13px;
	background: #e0e0e0;
	border-radius: 3px;
	margin-bottom: 4px;
	animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.aflc-app .booking-card .skeleton-line:last-child {
	margin-bottom: 0;
}
.aflc-app .booking-card .skeleton-line-title {
	width: 30%;
	height: 16px;
	margin-bottom: 12px;
	background: #d8d8d8;
}
.aflc-app .booking-card .skeleton-line-short {
	width: 55%;
}

@keyframes skeleton-pulse {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 1; }
}

/* 260411 broc - eLogbook card: standard theme (sboxApp-optimized fonts + spacing) */
.elogbook-section .signal-red-invert.scpecialBox {
	padding: 12px 14px;
	border-radius: 6px;
}
.elogbook-section .signal-red-invert h4 {
	font-size: 14px;
	margin: 0 0 8px 0;
}
.elogbook-section .signal-red-invert ul {
	margin: 0;
	list-style: none;
}
.elogbook-section .signal-red-invert li {
	font-size: 14px;
	line-height: 1.5;
	position: relative;
	padding-left: 14px;
	margin-bottom: 8px;
}
.elogbook-section .signal-red-invert li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
}


/* 260411 broc - eLogbook card: legacy theme (inherit original boatDetail styles) */
#sboxApp.theme-elogbook-legacy .elogbook-section .signal-red-invert.scpecialBox {
	padding: 15px;
	border-radius: 0;
}
#sboxApp.theme-elogbook-legacy .elogbook-section .signal-red-invert h4 {
	font-size: inherit;
	margin: inherit;
}
#sboxApp.theme-elogbook-legacy .elogbook-section .signal-red-invert li {
	font-size: inherit;
	line-height: inherit;
}

/* debugging */
.debug {
	color:lightgray;
	font-style: italic;
	font-size: 11px;
}

.geo {
	color:var(--aflc-background-graphite);
	font-style: italic;
	font-size: 12px;
}

/* Listview eventcalendar */
.eventCalendar.simple {
}
.eventCalendar.simple div.event {
	display: flex;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	background-color: #eee; 
}
.eventCalendar.simple div.event:first-child { 
	border-top: 1px solid #fff;
}
.eventCalendar.simple div.event .time{
	width: 40%;
	padding-left: 28px;
	text-align: left;
}
@media (max-width: 768px) {
	.eventCalendar.simple div.event .time{
		width: 45%;
		padding-left: 28px;
		text-align: left;
	}
}


.eventCalendar.simple div.event .comment{
	width: 60%;
/*	padding-left: 5px;*/
}

.eventCalendar.simple div.event.exact { 
	background-color:#92d050;
	color: #000; 
}

.eventCalendar.simple div.event.duration, .eventCalendar.simple div.event.alternative { 
	background-color: #fff000;
	color: rgba(0,0,0,.6); 
}
.eventCalendar.simple div.event.none { 
	background-color: #e01119; /*#eb0000*/
	color: #fff; 
}
.eventCalendar.simple div.event.existing{
	background: #8f8f8f;
	color: #fff;
}

#boatListTeaserText {
	text-align: center;
	margin: 0 0 40px 0;
}

#boatListWrap .boatElement .eLogbuch{
	min-height: 135px;
	background: #eee;
	margin-top: 15px;
}
#boatListWrap .boatElement .eLogbuch .specialBox{
	margin-bottom: 0;
}

#boatListWrap .boatElement .eLogbuch .eLogbookEmpty{
	

}



#boatListWrap .betriebszustand{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	height: 25px;
}
#boatListWrap .boatButtonRow{
	display: flex;
	justify-content: space-between;
}

#boatListWrap .signal-red-invert,
#boatListWrap .signal-red-invert h1, #boatListWrap .signal-red-invert h2, #boatListWrap .signal-red-invert h3, #boatListWrap .signal-red-invert h4, #boatListWrap .signal-red-invert h5, #boatListWrap .signal-red-invert h6, #boatListWrap .signal-red-invert li, #boatListWrap .signal-red-invert p{
	background: none;
	color: #444444;
}
#boatListWrap .signal-red-invert ul li:before{
	background: #444444;
}


#boatListWrap > .inside > .row{
	margin: 0 -5px;
}
#boatListWrap > .inside > .row > .column{
	padding: 0 5px;
}
.boatElement{
	padding: 5px 10px;
	transition: all 250ms;
	border: 1px solid #dadada;
}
.boatElement:hover{
	background: #f5f5f5;
	border-color: #dadada;
}
@media (max-width: 768px) {
	#boatListWrap {
		padding-top: 25px;
	}
	#boatListWrap > .inside > .row{
		flex-wrap: nowrap;
	    overflow-x: scroll;
		scroll-snap-type: x mandatory;
		padding: 0 25px 0 0;
		margin: 0;
	}
	#boatListWrap{
		padding-top: 25px;
	}
	#boatListWrap > .inside > .row > .column{
		scroll-snap-align: start;
		padding: 0;
	}
	.boatElement{
		border-right: none;
		padding-bottom: 0;
	}
	#boatListWrap > .inside > .row > .column:last-child .boatElement{
		border-right: 1px solid #dadada;
	}
}


/* overwrite bro 230315 - todo:merge */
.date_distance_row {
	display: flex;
	justify-content: space-between;	
	padding-top:5px;
}
#boatListWrap div.eLogbuch {
	line-height:17px;
	min-height:109px !important;
	padding:15px 15px 0px 15px;
}

#boatListWrap div.eLogbuch div.specialBox {
	padding-bottom:10px;
}
#boatListWrap div.eLogbuch div.specialBox ul li:before {
	top:5px !important;
}
/*#boatListWrap div.eLogbuch ul li {
	padding-left: 18px;
    position: relative;
    margin-bottom: 8px;
    padding-right: 0;
    line-height:20px;

}*/


/*............... TH ...............*/
/*16.03.2023*/
body .xdsoft_datetimepicker{
	z-index: 9 !important;
}
@media (max-width: 819px){
    #cartModal .btn.btn-remove {
        display: block !important;
    }
    #cartModal #no-more-tables tr {
        position: inherit;
    }
    #cartModal #no-more-tables td:before {
        display: none;
    }
    #cartModal #no-more-tables .table.table-borderless td{
        padding-left: 0px;
        position: absolute;
        right: 0px;
    }
    #cartModal #no-more-tables .table.table-borderless td:first-child{
        position: relative;
    }
    #cartModal #no-more-tables .table.table-borderless td:nth-child(2){
        top: 0px;
    }
    #cartModal #no-more-tables .table.table-borderless td:last-child{
        bottom: 0px;
    }
    #cartModal #no-more-tables .table.table-borderless td:last-child button{
        padding: 15px 0px 0px 30px;
    }
    #cartModal #no-more-tables .columnValue {
        margin-left: 0px !important;
    }
    #cartModal #collapse-completion .total-price-container{
        padding-left: 0px !important;
    }
}
/*17.03.2023*/
.circle {

	padding-right:5px;
}
.circle-green{
    background-color: #92d050;
	background: var(--aflc-background-green);
    border-radius: 50%;
}

.circle-red{
    background-color: #eb0000;
	background: var(--aflc-background-red);
    border-radius: 50%;
}
.circle-yellow{
    background-color: #fff000;
	background: var(--aflc-background-yellow);
    border-radius: 50%;
}
.circle-orange{
    background-color: #fff000;
	background: var(--aflc-background-orange);
    border-radius: 50%;
}
.circle-white{
    background-color: white;
    border-radius: 50%;
}
/*............................................*/

/*AOB - 20230316 - fix for page flickering on collection modal open*/
#mp_htmlFront.modal-open{
    overflow-y: hidden;
    padding-right: 10px;
}

/*.................. Basket..........................*/

@media (max-width: 819px){
	.legend-container-desktop{
		display: none;
	}
}

@media (min-width: 819px){
	.legend-container-mobile{
		display: none;
	}
}
.legend-container{
	padding-top:20px;
	padding-bottom: 17px;
}
#filterForm-hint{
	padding-left:10px;
	text-align: center;
}
.filterForm-hint{
	padding-left:10px;
	text-align: center;
}
.filterForm-hint.first {
	margin-top:15px;
}


.legend-container-desktop,
.legend-container-mobile{
    background-color: #eee;
    padding: 10px;
    border-radius: 5px;
}

.legend-container-desktop label{
/*    font-weight: bold;*/
    padding-left: 4px;
}

.legend-container-mobile label{
    font-weight: bold;
}

.legend-container-desktop i,
.legend-container-mobile i{
    font-size: 1em;
}

.legend-container-desktop .circle-label,
.legend-container-mobile .circle-label
{
	padding-left: 9px;
	padding-right:10px;
}

/*AOB - 20230317 - merge changes from modulpark_Standart.css*/
body .mp-my-account input.ng-invalid.ng-touched, body .mp-my-account select.ng-invalid.ng-touched {
    border-color: #f00 !important;
}

.front .row.select2-row {
    width: 100%;
    margin: 0px;
}
.front .row .filterFormCol .select2-selection__rendered {
    padding: 7px 0px 5px 15px !important;
/*    font-size: 1.4rem;*/
    font-size: 1.3rem;
    font-weight: 500 !important;
    font-family: 'Roboto', sans-serif;
    color: #0e2048 !important;
}

.front .row .filterFormCol .select2-selection__rendered i {
	font-size: 1.0rem;
}
.front .row .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-width: 9px 7px 0px 7px !important;
    margin-left: -10px !important;
    margin-top: -6px !important;
}
.front .row .filterFormCol .filterInputRow {
    padding: 5px 0px;
    font-size: 1.2rem;
}
.front .row .filterFormCol .filterInputRow .filterFormInputWrap {
    width: 100%;
}
.front .row .filterFormCol .filterInputRow .filterFormInputWrap:before {
    font-size: 1.3rem;
    right: 9px !important;
}
.front .row .filterFormCol .filterInputRow .filterFormInputWrap input {
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 500 !important;
    font-family: 'Roboto', sans-serif;
    color: #0e2048 !important;
}
.front .row .filterFormCol .filterInputRow .filterFormInputWrap .input_arrow b {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 9px 7px 0 7px;
    height: 0;
    right: 0px;
    margin-right: 4px;
    margin-top: -4px;
    position: absolute;
    top: 50%;
    width: 0;
}
.front .row .filterFormInputWrap .select2-container--default .select2-selection--single {
    height: 44px;
}
.front .row .filterFormCol#filterForm_submit {
    margin-left: auto;
}
.front .row .filterFormCol#filterForm_submit button {
    border-radius: 10px;
    border: none;
    height: 35px;
    padding-top: 2px;
    margin-top: 15px;
}
.filterFormCol {
    font-size: 1.3rem;
}
/*@media (min-width:820px) {
    .front #filterForm-hint,
    .front .filterFormRow {
        width: 90%;
        margin: 0px auto;
		flex-direction: column;
    }
    .front #filterForm-hint {
        padding-left: 5px;
    }
}*/
/* .xdsoft_datepicker.active {
    width: 100% !important;
    margin-left: 4px !important;
}
.xdsoft_timepicker.active {
    width: 100% !important;
    margin-left: 4px !important;
}
.xdsoft_timepicker.active button {
    margin-left: auto !important;
    margin-right: auto !important;
} */
#filterFormInput_dateFrom:before,
.filterFormInputWrap .input_arrow b {
    pointer-events: none;
}
.select2-row .filterFormCol .filterFormInputWrap select {
    background: #fff;
    border: 2px solid #aaa;
    border-radius: 4px;
    background-image: url("") !important;
    height: 44px;
    padding: 5px 10px;
    font-size: 1.4rem;
    font-weight: 500;
	font-family: 'Roboto', sans-serif;
    color: #0e2048;
}

/*15.03.2023*/
.front .row.select2-row {
    width: 100%;
    margin: 0px;
}
.front .row .filterFormCol .select2-selection__rendered {
    padding: 7px 0px 5px 15px !important;
}
.front .row .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-width: 9px 7px 0px 7px !important;
    margin-left: -10px !important;
    margin-top: -6px !important;
}
.front .row .filterFormCol .filterInputRow {
    padding: 5px 0px;
    font-size: 1.2rem;
}
.front .row .filterFormCol .filterInputRow .filterFormInputWrap {
    width: 100%;
}
.front .row .filterFormCol .filterInputRow .filterFormInputWrap:before {
    font-size: 1.3rem;
    right: 9px !important;
}
.front .row .filterFormCol .filterInputRow .filterFormInputWrap input {
    font-size: 1.3rem;
}
.front .row .filterFormCol .filterInputRow .filterFormInputWrap .input_arrow b {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 9px 7px 0 7px;
    height: 0;
    right: 0px;
    margin-right: 4px;
    margin-top: -4px;
    position: absolute;
    top: 50%;
    width: 0;
}
.front .row .filterFormInputWrap .select2-container--default .select2-selection--single {
    height: 44px;
}
.front .row .filterFormCol#filterForm_submit button {
    border-radius: 10px;
    border: none;
    height: 35px;
    padding-top: 2px;
}
.filterFormCol {
    font-size: 1.3rem;
}
/*AOB - 20230317 - merge changes from modulpark_Standart.css - END*/
/*... TH START 17.03.2023 ...*/
.front .filterFormRow .filterFormCol .filterInputRow {
    height: 44px;
}
.front .filterFormRow .filterFormCol#filterForm_submit .column{
	width: 100%;
    max-width: 100%;
}
#filterFormWrap .filterFormRow .right-col{
    display: flex;
    align-items: end;
}
@media (min-width:992px) {
	#filterFormWrap .filterFormRow .center-col{
		padding: 0px;
	}
}
@media (max-width:819px) {
	#filterFormWrap .filterFormRow .center-col{
		padding: 0px;
	}
}
.filterFormRow{
	margin: auto;
}
/*........ THE END ..........*/

.event-location-dates-paragraph{
	margin-bottom: 0 !important;
}

.event-location-dates-paragraph label{
	margin-bottom: 0;
}
.event-location-dates-paragraph label{
    min-width: 35px;
}

.cart-item-labels-1{
    min-width: 80px;
}

.event-location-dates-end{
	margin-bottom: 25px;
}

/* ==========================================================================
   Cart / Collection modal
   ========================================================================== */
#cartModal,
#cartModal .page-item{
	font-family: 'Livvic', sans-serif !important;
}

/* ==========================================================================
   Cart item module display
   ========================================================================== */
/* 260908 broc - measured against the booking list of the app and set to the same values, so a
   position in the basket reads exactly like a card in "Meine Buchungen":
     .module-title  19px / --fw-title / --ink   .module-meta  16px / 400 / --ink-3
     .ktag-label    19px / 400 / --ink-2
   The mail keeps its own inline sizes; only weight and margin are inline, and those match. */
/* The fold toggle ships from the server for the basket only ( AFLC_moduleRegistration, guarded on
   viewType ). Desktop keeps the course days permanently open, so checkbox and label stay hidden
   here and only the mobile block below switches them on. */
#cartModal .cart-days-toggle,
#cartModal .cart-days-summary {
	display: none;
}

#cartModal .cart-module-title{
	/* !important because the server writes inline font-size and font-weight on this <p> - they
	   have to be inline for the confirmation mail, which loads no stylesheet. Without !important
	   the inline values win here too and the variables would be decorative. */
	font-size: var(--fs-title) !important;
	font-weight: var(--fw-title) !important;
	color: var(--ink);
	margin-bottom: 0;
	line-height: 1.3;
}
#cartModal .cart-module-subtitle{
	font-size: var(--fs-meta);
	font-weight: 400;
	color: var(--ink-3);
	margin-bottom: 0;
	line-height: 1.3;
}
#cartModal .cart-module-coursedays td{
	/* inline Arial and size are for the mail, same reason as .cart-module-title */
	font-family: inherit !important;
	font-size: var(--fs-meta) !important;
	font-weight: 400;
	color: var(--ink-2);
	line-height: 1.5;
}
/* no rules between the course days: they are one block belonging to the position above them, and the
   line that separates POSITIONS is drawn by .tbl-item-container tr further down. Without this the
   generic rule paints one under every single course day. */
#cartModal .tbl-item-container table.cart-module-coursedays tbody tr{
	border-bottom: none;
}

.badgeLetter{
    font-size: 24px;
    font-family: 'PoppinsLight', sans-serif;
	font-weight: normal;
}

mp-my-account .badge{
    display: flex !important;
}

.badge .fa{
    font-size: 36px;
}

.mp-my-account .border-bottom.pb-3.mb-3{
	display: none;
}

.total-price-th{
    visibility: hidden ;
}

.total-price-th tr{
    border: none !important;
}

mp-my-account .btn.btn-update,
mp-my-account .btn.btn-update:hover{
    background-color: #192864 !important;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 1rem;
}

mp-my-account .btn.btn-abort,
mp-my-account .btn.btn-abort:hover{
    background-color: #eb0000 !important;
        font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-size: 1rem;
}

mp-my-account .addressSection form.mp-preview input {
    font-weight: 500;
    font-size: 14px ;
    background: none;
    padding: 0 15px;
}

mp-my-account .legen-eye{
    margin-bottom: 30px;
}

#courseWrap #courseFilterWrap .filterFormRow{
	flex-direction: unset;
}

.tblDates tr{
    border: none !important;
}
.tblDates td{
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
#cartModal #no-more-tables .tblDates tr{
    margin: 0;
}

#cartModal #no-more-tables .tblDates tr td{
    position: relative !important;
}

#cartModal #no-more-tables .tblDates{
 display: table;   
}
#cartModal #no-more-tables .tblDates tbody{
 display: table-row-group;   
}

#cartModal #no-more-tables .tblDates tr{
 display: table-row;   
}

#cartModal #no-more-tables .tblDates tr td{
 display: table-cell;   
}

#cartModal #no-more-tables .tblDates {
    margin-bottom: 10px;
}

.filterFormRow .select2-container ul li:before{
    display: none;
}

.filterFormRow .select2-container ul li{
    padding-left: 4px !important;
    margin-bottom: 0 !important;
}

.courseListWrap .courseHeader > .row{
    width: 100% !important;
}

.courseListElement .courseListeElementInner > .row{
    width: auto !important;
}

.courseHeader .courseCol{
    padding-left: 10px;
}

#topNav ul.lvl-1 > li:first-child ul.lvl-2{
	/*width: auto !important;*/
}

#topNav ul.lvl-1 > li:first-child ul.lvl-2 li{
	width: 250px;
}

@media (min-width: 1200px)
{
	#topNav ul.lvl-1 > li:first-child:hover > ul.lvl-2 {
		display: flex;
		flex-direction: column;
	}

	#topNav ul.lvl-1 > li:first-child:hover > ul.lvl-2 li{
		display: block;
	}
	
}
/*... TH START 20.03.2023 ...*/
mp-login-dynamic .dropdown .loginIconText .fa-regular.fa-user,
.loginVue .dropdown .loginIconText .fa-regular.fa-user{
	font-size: 15px;
	font-weight: 300;
}
#topNav .fa-light.fa-location-dot.objectDepotTree{
	font-size: 17px;
	color: #009cdc;
}
#mobileNav .fa-light.fa-location-dot.objectDepotTree{
	color: #009cdc;
}
.lvl-2 > li:first-child > a {
	height:36px !important;
}
.fa-solid,
.fa-regular.fa-balloon{
    color: #00a1e0 !important;
    font-weight: 300;
}
.lvl-2 .fa-solid{
    font-size: 15px;
}
.lvl-1 ul{
    /*width: auto !important;*/
}
.lvl-1 ul li{
/*    width: 270px !important;*/
    width: 310px !important;
}
.select2-container .select2-results .select2-results__options li:hover .fa-solid{
    color: #192864 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] .fa-solid{
    color:#192864 !important;
}
.mpg-widget .col-xl-8 .mpg-content .singlePlugin .d-flex .column{
    max-width: 200px;
}
@media (max-width:819px) {
    #mobileNav .lvl-1 .ifsub .lvl-2 li{
        width: 100% !important;
    }
}
mp-login-dynamic .dropdown .mp-dropdown-loggedIn .mpg-nav ul .aReplaced,
.loginVue .dropdown .mp-dropdown-loggedIn .mpg-nav ul .aReplaced,
.loginVue .dropdown .mp-dropdown-loggedIn .mpg-nav ul .aReplaced-static{
	text-transform: uppercase;
}
mp-my-account-dynamic .mp-widget-content.mp-my-account .card .fa-solid{
    color: white !important;
}
mp-login-dynamic .dropdown .mp-dropdown-loggedIn .mpg-nav ul li div a,
.loginVue .dropdown .mp-dropdown-loggedIn .mpg-nav ul li div a{
	text-transform: none !important;
}
 .aflc-app #topRow #filterWrap #backToListLink {
    width: 97.5%;
    margin-left: 5px;
}

/*ABO - 20230322 - fix for cart mobile*/
@media (max-width:819px) {
	#cartModal table{
		display: table !important;
		position: relative !important;
	}
	
	#cartModal table tr{
		position: relative;
		display: table-row !important;
	}
	
	#cartModal table td,
	#cartModal table th{
		/*display: table-cell !important;*/
		position: relative !important;
	}
	
	#cartModal #no-more-tables > table.table.table-borderless > tbody > tr > td:last-child{
		position: absolute !important;
		width: 5px;
	}
	
	#cartModal #no-more-tables .table.table-borderless thead > tr th:last-child{
		width: 5px;
	}
	
	#cartModal .th-remove{
		width: 5px !important;
	}
	
	#cartModal #no-more-tables thead{
		border-bottom: 1px solid #00a1e0; 
	}
	
	#cartModal .td-totalpricename{
		width: 100%;
	}
	}

	@media (min-width:820px) {
		#cartModal table tr.mp-show-desktop{
			display: block;
		}
	
		#cartModal table tr.mp-show-mobile{
			display: none !important;
		}
	
		#cartModal table tr.total-price-table{
			margin-top: -60px;
		}
	}
	@media (max-width:819px) {
		#cartModal table .mp-show-desktop{
			display: none !important;
		}
	
		#cartModal table tr.mp-show-mobile{
			display: table-row;
		}
	
		#cartModal table tr.total-price-table{
			margin-top: 0;
		}
	
		#cartModal #no-more-tables thead tr {
			position: relative !important;
			top: 0px !important;
			left: 0px !important;
		}
		#cartModal #no-more-tables thead tr th{
			padding: 0 !important;
		}
		
		#cartModal #no-more-tables thead {
			height: 24px;
		}
	
		#cartModal .timerText{
			padding-left: 0;
		}

		#cartModal  td.td-name{
			width: 100% !important;
		}
	}

	.mp-widget-content .dropdown .dropdown-menu .btn.btn-reset,
	.mp-widget-content .dropdown .dropdown-menu .btn-request-key{
		color: #fff;
		background-color: #009cdc;
	}
/*END OF AOB fix for cart mobile*/

/*..... TH START 04.04.2023 .....*/
ngb-modal-window .loginDisclaimer {
    margin-top: 27px;
}
.mp-login-modal.modal.show{
    position: absolute;
}
@media (max-width: 750px) {
    .mp-login-modal.modal.fade.show{
        top: 0% !important;
        overflow-y: scroll;
    }
    
    .mp-login-modal.modal.fade.show::-webkit-scrollbar {
        width: 0px;
        background-color: transparent;
    }
	#mp_body ngb-modal-window.mp-login-modal.modal.fade.show .modal-dialog{
        margin-top: 5px !important;
    }
}
mp-my-account .mp-my-account .frmUserData .iti .form-control.countryFlag {
    padding-left: 50px;
}
/*............TH END.............*/


/* jConfirm */
body .jconfirm-box {
	background-color: var(--aflc-background-blue) !important;
	color:white;

}

body .jconfirm .jconfirm-box .jconfirm-buttons button.btn {
	text-transform: none !important;
	font-weight: normal !important;
}

body .jconfirm .jconfirm-box .jconfirm-buttons button.btn-red {
	background-color: var(--aflc-background-red) !important;
}
body .jconfirm .jconfirm-box.jconfirm-type-blue {
	border-top-color: var(--aflc-background-blue) !important;
}

/*COUPONS*/
.collection-plugin .cb-coupon{
	position: relative !important;
	top: 1px;
	margin: 0 !important;
}

.collection-plugin .btn.btn-primary.btn-applyCoupon{
	margin: 0 !important;
}

@media (max-width: 819px){
	#cartModal #no-more-tables > table.table.table-borderless > tbody > tr.coupon td{
		width: auto !important;
		position: relative !important;
	}

	#cartModal #no-more-tables .table.table-borderless tr.coupon td button {
	    padding: 5px 5px 5px 5px;
	}
}

/*COUPONS END*/

#memberWrap .note {
    color:#818284;
    font-size:0.9rem;
    font-style:italic;
    padding:10px 0px;
}

#memberWrap p {
    
    padding:10px 0px;
}

#memberWrap div.partnerTeaserImg {
	width:100px;
}
#memberWrap div.partnerTeaserImg.wide {
	width:210px;
}

#memberWrap div.partnerTeaserImg.wide.ccs {
	background-color:white;
	padding:5px;
}

#memberWrap select {
	font-size:1rem;
}
div.sponsors ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
/*    margin: 0 -15px;*/
}
#main div.sponsors {
	margin:4px 0px 20px 0px;
}
#main div.sponsors ul li {
      display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px 0 0;
    margin-bottom:0px;
    list-style-type: none;
    list-style: none;


}
#main div.sponsors ul li:before {
    content:none !important; 
    
}
 

/*#cartModal .nav-tabs .nav-link.visited:last-of-type {
	color:#01a1e0 !important;
	font-weight:bold;
}*/

:nth-last-child(1 of #cartModal .nav-tabs .nav-link.visited) {
        color:#01a1e0 !important;
	font-weight:bold;
    }




i.propNotActive {
	color: red !important;
    font-weight: bold;
    font-size: 17px;
    position: absolute;
    top: 3px;
/*    transform: rotate(90deg);*/

}

i.propActive {
	color: #92d050 !important;
	


    font-weight: bold;
    font-size: 21px;
    position: absolute;
    top: 2px;
    transform: rotate(-10deg);
}



div.ugFlag {
/*	height:20px;*/
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left:10px;
}
.aflc-app div.ugFlag img{
	height:15px;
	width:auto;
	padding: 0 5px;
}

.btn-navy-large{
	max-width: fit-content;
}

/* dynProd.css merged */

#prodWrap .row{
	display: flex;
	flex-wrap: wrap;
}
.productWrap{
	background-color: #01a1e0;
	color: #fff;
	transition: all 250ms;
	height: 100%;
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
	position: relative;
}
.productWrap.CUG-Login{
	background: #636466;
	
}
.productWrap.CUG-Login .productOrder{
	background: rgba(0,0,0,.2);
}
.productItem{
	/*min-height: 240px;*/
	display: flex;
	flex-direction: column;
	width: 100%;	
	box-sizing: border-box;
	transition: all 250ms;
	padding: 15px 15px 0 15px;
	flex-grow: 1;
	position: relative;
	font-size: 15px;
}

.productShowCase{
	position: relative;
}
.productShowCase.loading .sbCard{
	opacity: .8;
	position: relative;
}
.productShowCase.loading .sbCard:after{
	content: '';
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,.4);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100;
	backdrop-filter:blur(15px);
}
.productShowCase.loading:before{
	content:'';
    display:block;
    position:absolute;
    /*opacity:0;*/
	width: 30px;
    height: 30px;
    border: 4px solid #efefef;
    border-right-color: #00a1e0;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    left:50%;
    top:50%;

    z-index: 150;
    
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: .8s;

    -moz-transition-property: -moz-transform;
    -moz-transition-duration: .8s;
    
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: .8s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    
    -moz-animation-name: rotate; 
    -moz-animation-duration: .8s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    
    transition:all 0.2s linear;
    -webkit-transform:scale(2);
    transform:scale(2);
    margin-left: -15px;
}
@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

.productName, .productDetailName {
	color: #fff;
	font-size: 20px;
	/*font-family: 'PoppinsSemibold';*/
	line-height: 1.2;
	min-height: 40px;
}
.align-right{
	text-align: right;
}
.autoOrderProducts{
	padding: 10px 15px;
	margin-top: auto;
}

.productInfo, .productDetailInfo{
	position: absolute;
	top:0;
	right: 0;
	padding: 5px 10px;
	background: rgba(255,255,255,.2);
	cursor: pointer;
	z-index: 50;
}
.productOrder{
	color: #fff700;
	padding: 10px 15px;
	transition: all 250ms;
	margin-top: auto;
	width: 100%;
	box-sizing: border-box;
	margin-top: auto;
	/*border-top: 1px solid #0196d0;*/
	/*font-family: 'PoppinsSemibold';*/
	
}
.active .productOrder{
	background-color: rgba(0,0,0,.2);
	cursor: pointer;
}
.active .productOrder:hover{
	/*background: #0088be;*/
	border-color: transparent;
	/*border-radius: 10px;*/
}
.productWrap:hover{
	/*background-color: #0088be;*/
}
.productWrap:hover .productOrder{
	/*border-color: #007cad;*/
}
.productWrap ul li:before{
	background-color: #fff;
}
/* ??? removed 250527 */
/*.column{
	padding-bottom: 25px;
}*/
.productWrap .row{
	margin: 0 -5px;
}
.productWrap .column{
	padding-bottom: 0;
	padding-left: 5px;
	padding-right: 5px;
}
.productDescription{
	/*font-family: 'PoppinsSemibold';*/
}
.productWrap.disabled{
	background-color: #dedede;
	color: #999;
}
.productWrap.disabled .productOrder{
	border-color: #d1d1d1;
}
.disabled .productName,
.disabled .productOrder{
	color: #999;
}
.productWrap.disabled ul li:before{
	background-color: #999;
}

.productWrap.existing{
	background-color: #01a1e0;
	color: #fff;
}
.productWrap.existing .productOrder{
	border-color: #a00;
}
.existing .productName,
.existing .productOrder{
	color: #fff;
}
.productWrap.existing ul li:before{
	background-color: #fff;
}

.productWrap.inBasket,
.productWrap.inBasket .productOrder{
	background-color: #168900;
	color: #fff;
}
.productWrap.inBasket .productOrder{
	border-color: #137400 !important;
}
.productWrap.inBasket .productName,
.productWrap.inBasket .productOrder{
	color: #fff;
}
.productWrap.inBasket ul li:before{
	background-color: #fff;
}

.additionalProducts{
	margin-top: 15px;
}
.additionalProducts ul li{
	/* font-family: 'PoppinsSemibold'; */
    color: #ffffff;
    background-color: #8ac8ed;
    border-radius: 5px;
    margin-bottom: 5px;
    display: block;
    padding: 0;
    cursor: pointer;
}
.additionalProducts ul li:before{
	display: none;
}
.additionalProducts ul li.disabled{
	color: #ccc;
}
.additionalProducts ul li.inBasket{
	color: #168900;
}
.additionalTitle{
	font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 55px;
    width: 100%;
}
.additionalPrice{
	border-top: 1px solid #76bce5;
    display: flex;
    justify-content: center;
    padding: 5px;
}
.additionalWrap{
	/*padding: 15px;
	background-color: #01a1e0;*/
}
.productOptionName{
	padding: 10px 0 20px 0;
    font-size: 18px;
    /*color: #fff;*/
}

.basketMessage{
	position: fixed;
	top: 0;
	right: 0;
	display: flex;
	justify-content: flex-end;
	align-items: top;
	height: 100%;
	z-index: 500;
}
.basketMessageContent{
	width: 100%;
	max-width: 200px;
	background: #fff;
	padding: 100px 20px 20px 20px;
	position: relative;
	z-index: 50;
	box-shadow: 0 0 25px 0 rgba(0,0,0,.3);
}
.basketMessageTitle{
	/*font-family: 'PoppinsSemibold'; */
	font-size: 22px;
	line-height: 28px;
	margin-bottom: 20px;
}
.basketMessage .close{
	position: absolute;
	right: 20px;
	top: 20px;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	background-color: #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.basketMessageButtons .column{
	padding-bottom: 5px;
}
.productBtn{
	display: flex;
}


/*Detail Popup*/
.productDetailPopup{
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,.2);
	z-index: 50;
	height: 100%;
	width: 100%;
}
.productDetailContent{
	width: 550px;
	max-width: 80vw;
	background: #01a1e0;
	padding: 25px;
	position: relative;
	color: #fff;
}
.productDetailContent table{
	border-collapse: collapse;
}
.productDetailContent td{
	padding: 5px 10px;
	border: 1px solid #01a1e0;
	background: rgba(255,255,255,.2);
}

.addItemClick{
	cursor: pointer;
}

/*fix for appit styles which still applies here*/
/* .mp-widget-content .mp-dropdown-loggedIn{
	width:100% !important;
} */

@media (max-width: 819px) {
    #cartModal .group-table-web {
        display: none !important;
    }
    
    #cartModal #no-more-tables > table.table.table-borderless > tbody > tr > td:last-child {
        z-index: 1000;
    }
}






/* Skipper contact overlay */
/* Overlay */
#skipperOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}

#skipperOverlay .privacyHint{
	font-size: 0.7em;
  font-style: italic;	
}


/* Contact Skipper Modal */
#skipperOverlay .contactSkipperModal {
  position: relative;                     /* anchor close button */
  box-sizing: border-box;
  max-width: 900px;
  width: calc(100% - 2rem);
  margin: 8vh auto;                       /* top/bottom margin = 8vh */
  padding: 2rem;
/*  z-index: 9999;*/

  background: #fff;

  box-shadow: 0 12px 40px rgba(0,0,0,.2);
  outline: 0;

  /* grow with content, but cap at viewport minus margins */
  max-height: calc(100vh - 16vh);
  overflow-y: auto;
}

/* Headings & intro */
#skipperOverlay .contactSkipperModal h2 {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
}
#skipperOverlay .intro {
  margin: 0 0 .75rem;
  color: #444;
}

/* Close button (simple �X�) */
#skipperOverlay .close {
  position: absolute;
  right: .75rem;
  top: .5rem;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* Form */
#skipperOverlay form { margin-top: .5rem; }
#skipperOverlay label {
  display: block;
  font-weight: 600;
  margin-bottom: .25rem;
}
#skipperOverlay textarea {
  width: 100%;
  min-height: 320px;
  box-sizing: border-box;
  resize: vertical;
  padding: .5rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font: inherit;
}

/* Actions */
#skipperOverlay .actions {
  margin-top: .75rem;
  display: flex;
  gap: .5rem;
}

/* Submit button: auto-size to text with padding */
#skipperOverlay button[type="submit"] {
  display: inline-block;
  padding: .5rem 4rem;       
 
  /*background: #222;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;*/
  white-space: nowrap;       
  width: auto;               
}
#skipperOverlay button[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* Message area */
#skipperOverlay .message {
  margin: 0 0 1rem;
  padding: .4rem .6rem;
  border-radius: 4px;
  font-size: .95rem;
  line-height: 1.4;
  display: none;
  white-space: pre-line; /* preserve \n */
  width:100%;
}

#skipperOverlay .message.warning {
  display: block;
  background: #f4cb00;         /* very light yellow */
  color: #444444;              /* calm dark amber */
}

#skipperOverlay .message.success {
  display: block;
  background: #009cdc;         /* very light green */
  
  color: white;              /* calm dark green */
}

/* Mobile: fullscreen sheet */
@media (max-width: 680px) {
  #skipperOverlay .contactSkipperModal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
    padding: 1rem;
    overflow: auto;
  }

  #skipperOverlay textarea { min-height: 200px; }
}

a#contactSkipper, a.contactSkipper {
  width:25%;
  margin-top:15px;
  text-wrap:nowrap;
}

#courseWrap a.contactSkipper {

  margin-top:5px;
}

@media (max-width: 680px) {
	a#contactSkipper, a.contactSkipper {
	  width:50%;
	}
}

/* 260221 broc - discounted price styling */
.courseListeElementInner .priceDiscounted,
.tbl-item-container .priceDiscounted {
	color: var(--aflc-signal-green);
}
.courseListeElementInner .defaultPriceIfDiscounted,
.tbl-item-container .defaultPriceIfDiscounted {
	font-size: 0.75em;
	text-decoration: line-through;
	white-space: nowrap;
	color: var(--aflc-storm);
	margin-left: 6px;
	vertical-align: baseline;
}

/* 260221 broc - not-qualified button: no pointer cursor */
.btn-course-not-qualified {
	cursor: default;
}

/* 260304 broc - Trial Registration Overlay (Schnuppern) */
#trialOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Roboto, sans-serif;
}
#trialOverlay-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.45);
}
#trialOverlay-panel {
	position: relative;
	background: #fff;
	border-radius: 10px;
	max-width: 480px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 8px 30px rgba(0,0,0,0.25);
	z-index: 1;
}
#trialOverlay-header {
	padding: 24px 28px 20px;
	background: var(--aflc-sailbox-cyan);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#trialOverlay-header h4 {
	margin: 0;
	font-size: 20px;
	color: #fff;
	font-weight: 500;
}
#trialOverlay-close {
	cursor: pointer;
	font-size: 28px;
	color: rgba(255,255,255,0.7);
	line-height: 1;
}
#trialOverlay-close:hover {
	color: #fff;
}
#trialOverlay-info {
	padding: 16px 28px;
	background: var(--aflc-milk);
	border-bottom: 1px solid #e5e5e5;
}
#trialOverlay-info .to-name {
	font-size: 16px;
	font-weight: 500;
	color: var(--aflc-navy);
}
#trialOverlay-info .to-location {
	font-size: 14px;
	color: #5a5a5a;
	margin-top: 2px;
}
#trialOverlay-info .to-dates {
	margin-top: 4px;
}
#trialOverlay-info .to-date-row {
	display: flex;
	align-items: baseline;
	font-size: 14px;
	color: #5a5a5a;
}
#trialOverlay-info .to-date-pre {
	color: #999;
	width: 30px;
	flex-shrink: 0;
}
#trialOverlay-info .to-date-val {
	width: 140px;
	flex-shrink: 0;
}
#trialOverlay-info .to-date-time {
	flex-shrink: 0;
}
#trialOverlay-badges {
	margin-top: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
#trialOverlay-badges .to-badges-left,
#trialOverlay-badges .to-badges-right {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
#trialOverlay-badges .to-token {
	display: inline-block;
	background: #ababab;
	color: #fff;
	padding: 0 8px;
	border-radius: 5px;
	font-size: 13px;
	line-height: 24px;
}
#trialOverlay-body {
	padding: 28px;
	color: #444;
	font-size: 16px;
	line-height: 1.6;
}
#trialOverlay-body p {
	margin: 0 0 12px;
}
#trialOverlay-body p:last-child {
	margin-bottom: 0;
}
#trialOverlay-footer {
	padding: 20px 28px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	flex-wrap: wrap;
}
#trialOverlay-cancel {
	color: #868686;
	cursor: pointer;
	font-size: 14px;
}
#trialOverlay-cancel:hover {
	color: #444;
}
#trialOverlay-confirm {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 20px;
	background: var(--aflc-navy);
	color: #fff;
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	font-family: Roboto, sans-serif;
	line-height: 32px;
}
#trialOverlay-confirm:hover {
	opacity: 0.9;
}
@media (max-width: 576px) {
	#trialOverlay {
		align-items: stretch;
	}
	#trialOverlay-panel {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		border-radius: 0 !important;
	}
}

/* 260221 broc - hide modal title "Kontrolle vor Abschluss", keep "Dein Warenkorb" */
/* #cartModal .modal-header .modal-title.a {
	display: none;
} */

/*overwrite mpstandard*/
#cartModal .basketItemRow table {
    width: 100% !important;
}
/* 260221 broc - exclude tblDates from 100% width */
#cartModal .basketItemRow table.tblDates {
    width: auto !important;
}
/* 260221 broc - prevent boatDetail.cfm:853 global "table { table-layout: fixed }" from breaking cart layout */
#cartModal table.table-borderless {
    table-layout: auto !important;
}

/*overwrite modulpark_standard.css*/
#cartModal #cartTabs {
    display: none !important;
}

/* ========================================
   260318 broc - sboxApp base styles (app-wide)
   ======================================== */

/* 260409 broc - keep sboxApp below sticky header (z-index:100) */
.mpg-sboxApp { position: relative; min-height: 100vh; }

/* 260330 broc - sboxApp link/img defaults
   Override .aflc-app a (modulpark_standard.css) which forces font-size:1rem, color:#009cdc on all links.
   font-size/line-height must inherit — a link should match its parent context (14px body, 17px title, 2rem h1). */
.aflc-app .sboxApp a       { font-size: inherit; line-height: inherit; color: var(--aflc-sailbox-cyan); text-decoration: none; }
.aflc-app .sboxApp a:hover { color: var(--aflc-dark-navy); }
.aflc-app .sboxApp img     { width: auto; }

.aflc-app .sboxApp h1 {
    font-size: 2rem;
    line-height: 2.2rem;
    font-weight: 500;
    color: var(--aflc-dark-navy);
    margin: 0 0 20px 0;
}

.aflc-app .sboxApp h2 {
    font-size: 1.8rem;
    line-height: 2rem;
    font-weight: 500;
    color: var(--aflc-dark-navy);
    margin: 0 0 15px 0;
}

.aflc-app .sboxApp h3 {
    font-size: 1.6rem;
    line-height: 1.8rem;
    font-weight: 500;
    color: var(--aflc-dark-navy);
    margin: 0 0 10px 0;
}

/* 260221 broc - unified button size for all sboxApp buttons */
.aflc-app .sboxApp button[class*="btn"],
.aflc-app .sboxApp a[class*="btn"] {
    font-size: 14px;
}

/* 260318 broc - app loader (scoped to .mpg-sboxApp, not viewport) */
.aflc-app .loader-fullscreen {
    display:none;

    /* position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    z-index: 10; */
}

/* loader fade out */
.aflc-app .fade-out-leave-active {
    transition: opacity 0.8s ease;
}
.aflc-app .fade-out-leave-to {
    opacity: 0;
}

/* content fade in */
.aflc-app .fade-in-enter-active {
    transition: opacity 0.6s ease 0.3s;
}
.aflc-app .fade-in-enter-from {
    opacity: 0;
}

/* 260221 broc - plugin switch transition (instant out, fade+slide in) */
.aflc-app .plugin-switch-enter-active {
    transition: opacity 200ms ease, transform 200ms ease;
}
.aflc-app .plugin-switch-enter-from {
    opacity: 0;
    transform: translateY(4px);
}
.aflc-app .plugin-switch-leave-active {
    display: none;
}

/* login required */
.aflc-app .login-required {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    max-width: 400px;
    margin: 40px auto;
}
.aflc-app .login-required .login-icon {
    color: var(--accent, #e8823a);
    margin-bottom: 16px;
    opacity: 0.4;
}
.aflc-app .login-required h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--accent-heading);
    margin: 0 0 8px;
}
.aflc-app .login-required p {
    font-size: var(--fs-body);
    color: #888;
    margin: 0 0 24px;
}
.aflc-app .login-required .login-btn {
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 24px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    cursor: pointer;
    transition: all 200ms;
}
.aflc-app .login-required .login-btn:hover {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
}

/* inline loading (tab switch etc.) */
.aflc-app .loading,
.aflc-app .dashboard .bookings-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}

.aflc-app .error-boundary {
    padding: 15px;
    background: var(--aflc-milk);
    border: 1px solid var(--aflc-silber);
    border-radius: 4px;
    color: var(--aflc-granit);
}

/* ========================================
   260318 broc - sboxApp dashboard (tabs, grid, list)
   ======================================== */
.aflc-app .dashboard .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.aflc-app .dashboard .bookings-tabs {
    display: flex;
    background: none;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
    margin-top:16px
}

.aflc-app .dashboard .bookings-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    transition: color 250ms, background 250ms;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.aflc-app .dashboard .bookings-tab:hover {
    color: var(--aflc-sailbox-cyan);
}

.aflc-app .dashboard .bookings-tab.active {
    position: relative;
    color: var(--aflc-sailbox-cyan);
    background: #fff;
    border: 1px solid #eeeeee;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin-bottom: -1px;
    font-weight:bold;
}
/* 260408 broc - seamless tab-card connection: flatten corner where active tab meets first card */
.aflc-app .dashboard .bookings-tabs:has(.bookings-tab:first-child.active) + .bookings-content .content-card:first-child {
    border-top-left-radius: 0;
}
.aflc-app .dashboard .bookings-tabs:has(.bookings-tab:last-child.active) + .bookings-content .content-card:first-child {
    border-top-right-radius: 0;
}

/* 260411 broc - sticky booking tabs (theme: sbox.theme('stickytabs','on'))
   - tabs stick below header on scroll
   - inactive tabs get background so content doesn't show through
   - pseudo-element above tabs masks scrolling content */
.theme-stickytabs-on .bookings-tabs {
    position: sticky !important;
    top: 128px;
    z-index: 10;
}
@media (min-width: 1200px) {
    .theme-stickytabs-on .bookings-tabs {
        top: 145px;
    }
}
/* inactive tabs: solid background to hide content behind */
.theme-stickytabs-on .bookings-tab {
    background: var(--aflc-milk, #f6f6f6) !important;
}
.theme-stickytabs-on .bookings-tab.active {
    background: #fff !important;
}
/* mask above tabs: covers content scrolling behind the gap above tabs */
.theme-stickytabs-on .bookings-tabs::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -20px;
    right: -20px;
    height: 16px;
    background: var(--aflc-milk, #f6f6f6);
}

.aflc-app .dashboard .booking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid var(--aflc-cloud);
    transition: background 250ms;
    gap: 12px;
}

.aflc-app .dashboard .booking-item:hover {
    background: var(--aflc-milk);
}

.aflc-app .dashboard .booking-item:last-child {
    border-bottom: none;
}

.aflc-app .dashboard .booking-title {
    font-weight: 500;
    color: var(--aflc-dark-navy);
}

.aflc-app .dashboard .booking-date {
    color: var(--aflc-granit);
    font-size: 0.9em;
}

.aflc-app .dashboard .booking-location {
    color: var(--aflc-granit);
    font-size: 0.9em;
}

.aflc-app .dashboard .bookings-loading {
    color: var(--aflc-granit);
    padding: 20px 10px;
    font-size: 14px;
}

.aflc-app .dashboard .no-data {
    color: var(--aflc-storm);
    font-style: italic;
    padding: 10px;
}

/* 260417 broc - no-data inside content cards: centered */
.aflc-app .content-card .no-data {
    text-align: center;
    margin: 0;
    padding: 40px 20px;
}

/* 260417 broc - motivating no-data (active/upcoming tabs) */
.aflc-app .content-card .no-data--motivating {
    font-family: 'Roboto', sans-serif;
    color: var(--aflc-sailbox-cyan);
    font-style: normal;
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.8rem;
    text-transform: uppercase;
}
@media (min-width: 992px) {
    .aflc-app .content-card .no-data--motivating {
        font-size: 1.0rem;
        line-height: 1.8rem;
    }
}

/* 260417 broc - no-data action button */
.aflc-app .content-card .no-data-action {
    text-align: center;
    margin-top: 16px;
}

/* ========================================
   260318 broc - sbox BookingCard (standalone, used everywhere)
   ======================================== */
/* card type label (vertical tab, right edge) */
.aflc-app .booking-card .booking-card-typed {
    position: relative;
    padding-right: calc(1.5rem + 28px);
}
.aflc-app .booking-card .booking-card-type {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #f0f0f0;
}
.aflc-app .booking-card .booking-card-type span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.5;
}
.aflc-app .booking-card .booking-card-type-sharing span {
    color: #1da6d4;
}
.aflc-app .booking-card .booking-card-type-course span {
    color: #b07d10;
}


/* course — 3-column grid */
.aflc-app .booking-card .booking-course-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    align-items: start;
}

@media (max-width: 991px) {
    .aflc-app .booking-card .booking-course-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.aflc-app .booking-card .booking-course-name {
    font-size: 17px;
    font-weight: var(--fw-title);
    color: var(--aflc-sailbox-cyan);
    margin: 0 0 2px 0;
    line-height: 1.3;
}
.aflc-app .booking-card .booking-title-sep {
    display: inline-block;
    margin: 0 6px;
    font-weight: 300;
    opacity: 0.5;
    vertical-align: middle;
}

.aflc-app .booking-card .booking-course-info {
    display: flex;
    gap: 30px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}
.aflc-app .booking-card .booking-course-info-label {
    font-size: 11px;
    color: #888;
    margin-bottom: 2px;
}
.aflc-app .booking-card .booking-course-info-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--aflc-dark-navy);
}

.aflc-app .booking-card .booking-course-location {
    color: var(--aflc-granit);
    font-size: 0.9em;
    margin-bottom: 8px;
}

/* token badges (language, segments) */
.aflc-app .booking-card .booking-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.aflc-app .booking-card .booking-tokens .token {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.8em;
    background: #efefef;
    border-radius: 3px;
    color: var(--aflc-granit);
}

/* course dates — tabular layout */
.aflc-app .booking-card .booking-course-dates {
    margin-bottom: 8px;
}

.aflc-app .booking-card .booking-course-date-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 0;
    font-size: 0.9em;
    color: var(--aflc-granit);
}

.aflc-app .booking-card .booking-course-date-label {
    min-width: 25px;
    color: var(--aflc-storm);
}

.aflc-app .booking-card .booking-course-date-value {
    min-width: 120px;
}

.aflc-app .booking-card .booking-course-date-time {
    color: var(--aflc-dark-navy);
}

/* course right column — price + occupation */
.aflc-app .booking-card .booking-course-price {
    margin-bottom: 4px;
}

.aflc-app .booking-card .booking-price-discounted {
    color: var(--aflc-dark-navy);
}

.aflc-app .booking-card .booking-price-original {
    text-decoration: line-through;
    color: var(--aflc-granit);
    font-weight: 400;
    margin-right: 6px;
}

.aflc-app .booking-card .booking-course-occupation {
    color: var(--aflc-granit);
    font-size: 0.9em;
    margin-bottom: 10px;
}

/* sharing — stacked layout */
.aflc-app .booking-card .booking-sharing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.aflc-app .booking-card .booking-sharing-title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--aflc-dark-navy);
}

.aflc-app .booking-card .booking-sharing-type {
    font-style: italic;
    color: var(--aflc-granit);
    font-size: 0.9em;
}

.aflc-app .booking-card .booking-sharing-subtitle {
    font-size: 0.85em;
    color: var(--aflc-granit);
    margin-bottom: 6px;
}

.aflc-app .booking-card .booking-badge-tender {
    display: inline-block;
    font-size: 0.75em;
    padding: 1px 6px;
    margin-bottom: 6px;
    background: var(--aflc-sailbox-cyan);
    color: #fff;
    border-radius: 3px;
}

/* sharing dates */
.aflc-app .booking-card .booking-sharing-dates {
    margin-bottom: 10px;
}

.aflc-app .booking-card .booking-sharing-date-row {
    font-size: 0.9em;
    color: var(--aflc-granit);
    padding: 2px 0;
}

.aflc-app .booking-card .booking-sharing-date-label {
    display: inline-block;
    min-width: 30px;
    color: var(--aflc-storm);
}

.aflc-app .booking-card .booking-sharing-date-value {
    font-weight: 500;
    color: var(--aflc-dark-navy);
}

/* action buttons — same base as .aflc-app .btn (modulpark_standard.css:1260) */
.aflc-app .booking-card .booking-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.aflc-app .booking-card .booking-actions-sharing,
.aflc-app .booking-card .booking-actions-course {
    flex-direction: row;
    border-top: none;
    margin-top: 12px;
    padding-top: 0;
}

.aflc-app .booking-card .booking-btn,
.aflc-app .content-card .booking-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 7px 18px;
    line-height: 1.4;
    height: auto;
    border-radius: 6px;
    border: 1px solid #192864;
    color: #192864;
    background: #fff;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aflc-app .booking-card .booking-btn:hover,
.aflc-app .content-card .booking-btn:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

/* navy filled */
.aflc-app .booking-card .booking-btn-primary {
    background: #192864;
    color: #fff;
    border-color: #192864;
}
.aflc-app .booking-card .booking-btn-primary:hover {
    background: #192864;
    color: #fff;
}

/* storno — navy-outline */
.aflc-app .booking-card .booking-btn-danger {
    border-color: #192864;
    color: #192864;
    background: #fff;
}
.aflc-app .booking-card .booking-btn-danger:hover {
    background: #192864;
    color: #fff;
}

/* 260318 broc - compact date display */
.aflc-app .booking-card .booking-sharing-date-compact,
.aflc-app .booking-card .booking-course-date-compact {
    font-size: 14px;
    margin: 0 0 16px;
}
.aflc-app .booking-card .booking-date-line {
    display: flex;
    align-items: baseline;
}
.aflc-app .booking-card .booking-date-part {
    font-weight: 400;
    color: #1a1a1a;
    white-space: nowrap;
    letter-spacing: 0.3px;
    margin-right: 0;
}
.aflc-app .booking-card .booking-time {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #1a1a1a;
    white-space: nowrap;
    position: relative;
    padding-left: 12px;
    margin-left: 12px;
}
.aflc-app .booking-card .booking-time::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    border-left: 1px solid #ccc;
}
.aflc-app .booking-card .booking-date-day {
    white-space: nowrap;
    min-width: 22px;
    margin-right: 4px;
}
.aflc-app .booking-card .booking-date-multi {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    column-gap: 0;
    row-gap: 0;
    line-height: 1.4;
    align-items: baseline;
}
.aflc-app .booking-card .booking-date-multi .booking-date-line {
    display: contents;
}
.aflc-app .booking-card .booking-date-multi .booking-date-part {
    margin-right: 0;
}

/* 260318 broc - sharing card new layout */
.aflc-app .booking-card .booking-sharing-title {
    font-size: 17px;
    font-weight: var(--fw-title);
    color: var(--aflc-sailbox-cyan);
    margin: 0 0 4px 0;
    line-height: 1.3;
}
.aflc-app .booking-card .booking-sharing-dates-rich {
    margin-bottom: 10px;
}
.aflc-app .booking-card .booking-sharing-dates-rich td {
    padding: 2px 0;
    font-size: 0.9em;
    color: var(--aflc-granit);
}
.aflc-app .booking-card .booking-sharing-dates-rich .booking-sharing-date-label {
    padding-right: 8px;
    color: var(--aflc-storm);
}

/* person block */
.aflc-app .booking-card .booking-sharing-person-block {
    margin-top: 16px;
    padding-top: 0;
}
.aflc-app .booking-card .booking-actions-sharing + .booking-sharing-person-block {
    margin-top: 32px;
}
.aflc-app .booking-card .booking-sharing-skipper {
    margin: 0 0 8px 0;
    font-size: 14px;
}
.aflc-app .booking-card .booking-sharing-skipper span {
    color: var(--aflc-granit);
    font-weight: 400;
}
.aflc-app .booking-card .booking-sharing-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1px 0;
    font-size: 14px;
}
.aflc-app .booking-card .booking-sharing-contact i:first-child {
    color: var(--aflc-sailbox-cyan);
    width: 18px;
    text-align: center;
    font-size: 14px;
}
.aflc-app .booking-card .booking-sharing-contact a {
    color: var(--aflc-sailbox-cyan);
    text-decoration: none;
}
.aflc-app .booking-card .booking-sharing-contact a:hover {
    color: var(--aflc-dark-navy);
}

/* WhatsApp button */
.aflc-app .booking-card .booking-btn-whatsapp,
.aflc-app .booking-card .booking-btn-whatsapp:visited,
.aflc-app .booking-card a.booking-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 7px;
    font-size: 13px;
    background: #25D366;
    color: #fff !important;
    border-radius: 20px;
    text-decoration: none;
    margin-left: 4px;
}
.aflc-app .booking-card .booking-btn-whatsapp i {
    color: #fff !important;
}
.aflc-app .booking-card .booking-btn-whatsapp:hover {
    background: #1da851;
    color: #fff !important;
}

.aflc-app .booking-card .booking-sharing-description {
    margin-top: 8px;
    color: var(--aflc-storm);
    font-size: 14px;
}
.aflc-app .booking-card .booking-sharing-description p,
.aflc-app .booking-card .booking-sharing-description span {
    font-style: italic !important;
    font-size: 14px !important;
    color: var(--aflc-storm) !important;
}

/* tender section */
.aflc-app .booking-card .booking-sharing-tender {
    margin-bottom: 12px;
}
.aflc-app .booking-card .booking-sharing-tender-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--aflc-dark-navy);
    margin-bottom: 4px;
}
/* 260411 broc - override any inline styles from CMS v-html content */
.aflc-app .booking-card .booking-sharing-tender-text,
.aflc-app .booking-card .booking-sharing-tender-text * {
    font-size: 13px !important;
    color: var(--aflc-granit) !important;
    font-family: inherit !important;
    line-height: inherit !important;
}

/* tender + badges section */
.aflc-app .booking-card .booking-sharing-badges-section,
.aflc-app .booking-card .booking-course-badges-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

/* badge pills */
.aflc-app .booking-card .booking-sharing-badges,
.aflc-app .booking-card .booking-course-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.aflc-app .booking-card .booking-badge-pill {
    font-size: 11px;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 3px;
    border: 1px solid #ccc;
    color: #888;
    position: relative;
    cursor: default;
}
.aflc-app .booking-card .booking-badge-pill[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    color: #fff;
    background: var(--aflc-dark-navy);
    border-radius: 4px;
    pointer-events: none;
    z-index: 10;
}
.aflc-app .booking-card .booking-badge-pill[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--aflc-dark-navy);
    pointer-events: none;
    z-index: 10;
}

/* 260410 broc - sharing/course card detail link */
.aflc-app .booking-card .booking-sharing-detail-link,
.aflc-app .booking-card .booking-course-detail-link {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
}

/* cyan filled button */
.aflc-app .booking-card .booking-btn-cyan,
.aflc-app .content-card .booking-btn-cyan {
    background: var(--aflc-sailbox-cyan);
    color: #fff;
    border-color: var(--aflc-sailbox-cyan);
}
.aflc-app .booking-card .booking-btn-cyan:hover,
.aflc-app .content-card .booking-btn-cyan:hover {
    background: #0089c2;
    border-color: #0089c2;
    color: #fff;
}

/* mobile: full width */
@media (max-width: 768px) {
    .aflc-app .booking-card .booking-sharing-detail-link,
    .aflc-app .booking-card .booking-course-detail-link {
        justify-content: stretch;
    }
    .aflc-app .booking-card .booking-sharing-detail-link .booking-btn-cyan,
    .aflc-app .booking-card .booking-course-detail-link .booking-btn-cyan {
        width: 100%;
    }
}

/* 260506 broc - module booking card */
.aflc-app .booking-card .module-booking {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.aflc-app .booking-card .module-booking:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.aflc-app .booking-card .module-booking:first-child {
    padding-top: 0;
}
.aflc-app .booking-card .module-booking-title {
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--aflc-dark-navy);
}
.aflc-app .booking-card .module-booking-number {
    font-weight: 400;
    color: var(--aflc-granit);
}
.aflc-app .booking-card .module-booking-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.aflc-app .booking-card .module-booking-header .module-booking-title {
    flex: 1;
}
.aflc-app .booking-card .module-booking-cancel-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aflc-granit);
    font-size: 16px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: -4px 0 0 0;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.aflc-app .booking-card .module-booking-cancel-btn:hover {
    color: var(--aflc-signal-red, #d32f2f);
    background: rgba(211, 47, 47, 0.08);
}
.aflc-app .booking-card .module-booking-cancel-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.aflc-app .booking-card .module-booking-postpone-info {
    font-size: 0.8em;
    color: var(--aflc-signal-orange, #f28c00);
    margin-bottom: 4px;
}
.aflc-app .booking-card .module-booking-course-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 3px 0;
    font-size: 0.9em;
}
.aflc-app .booking-card .module-booking-course-name {
    min-width: 120px;
    color: var(--aflc-iron);
}
.aflc-app .booking-card .module-booking-course-date {
    flex: 1;
    color: var(--aflc-granit);
}
.aflc-app .booking-card .module-booking-postponed-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aflc-signal-orange);
    font-size: 14px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: -10px 0;
}
.aflc-app .booking-card .module-booking-postponed-spacer {
    min-width: 44px;
}

/* 260513 broc - postpone button in course row */
.aflc-app .booking-card .module-booking-postpone-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aflc-sky-blue, #005a9c);
    font-size: 13px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: -8px 0;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.aflc-app .booking-card .module-booking-postpone-btn:hover {
    color: var(--aflc-signal-orange, #f28c00);
    background: rgba(242, 140, 0, 0.08);
}
.aflc-app .booking-card .module-booking-postpone-disabled {
    color: var(--aflc-silber, #dcdcdc);
    cursor: not-allowed;
    opacity: 0.5;
}
.aflc-app .booking-card .module-booking-postpone-disabled:hover {
    color: var(--aflc-silber, #dcdcdc);
    background: none;
}

/* 260518 broc - participation confirmation */
.aflc-app .booking-card .module-booking-confirmed,
.aflc-app .booking-card .course-booking-confirmed {
    color: var(--aflc-signal-green, #92d050);
    font-size: 16px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.aflc-app .booking-card .module-booking-confirm-btn,
.aflc-app .booking-card .course-booking-confirm-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aflc-storm, #a8a8a8);
    font-size: 16px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: -8px 0;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.aflc-app .booking-card .module-booking-confirm-btn:hover,
.aflc-app .booking-card .course-booking-confirm-btn:hover {
    color: #7ab840;
    background: rgba(146, 208, 80, 0.12);
}

/* 260518 broc - course booking cards (advanced, supervision) */
.aflc-app .booking-card .course-booking {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.aflc-app .booking-card .course-booking:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.aflc-app .booking-card .course-booking:first-child {
    padding-top: 0;
}
.aflc-app .booking-card .course-booking-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.aflc-app .booking-card .course-booking-title {
    flex: 1;
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--aflc-dark-navy);
}
.aflc-app .booking-card .course-booking-hint {
    font-size: 0.85em;
    color: var(--aflc-granit);
    margin-bottom: 4px;
}
.aflc-app .booking-card .course-booking-date {
    font-size: 0.9em;
    color: var(--aflc-granit);
}

/* 260518 broc - supervision role badge */
.aflc-app .booking-card .course-role-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.aflc-app .booking-card .course-role-badge.role-video {
    background: #e3f2fd;
    color: #1565c0;
}
.aflc-app .booking-card .course-role-badge.role-oral {
    background: #fff3e0;
    color: #e65100;
}
.aflc-app .booking-card .course-role-badge.role-reflection {
    background: #f3e5f5;
    color: #7b1fa2;
}

/* 260518 broc - supervision requirements legend */
.aflc-app .booking-card .supervision-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--aflc-milk, #f6f6f6);
    border-radius: 8px;
}
.aflc-app .booking-card .supervision-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.aflc-app .booking-card .supervision-legend-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--aflc-granit, #686868);
}
.aflc-app .booking-card .supervision-legend-count.fulfilled {
    color: var(--aflc-dark-green, #054b21);
}

/* 260824 broc - CourseDaysModal: read-only list of a module's course days, opened from
   the waiting list card. Box and buttons follow CancelModal, the rows follow .kurstage
   so the days read the same here as in the booking list. */
.aflc-app.coursedays-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.aflc-app .coursedays-modal {
    background: var(--surface);
    border-radius: 12px;
    padding: 32px 32px 24px;
    max-width: 520px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    color: var(--ink-2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
}
.aflc-app .coursedays-header {
    color: var(--accent-heading);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px;
}
.aflc-app .coursedays-subtitle {
    font-size: var(--fs-body);
    color: var(--ink-2);
    margin: 0 0 16px;
}

/* --- Day rows: same presentation as .kurstage in the booking list --- */
.aflc-app .coursedays-list {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 16px;
    margin: 0 0 24px;
}

.aflc-app .coursedays-row {
    padding: 12px 0;
    border-top: 1px dashed var(--border);
    font-size: var(--fs-body);
}
.aflc-app .coursedays-row:first-child {
    border-top: none;
}
.aflc-app .coursedays-name {
    color: var(--ink);
    font-weight: 500;
    line-height: 1.35;
}
.aflc-app .coursedays-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    margin-top: 3px;
    color: var(--ink-2);
}
.aflc-app .coursedays-date {
    white-space: nowrap;
}
.aflc-app .coursedays-time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.aflc-app .coursedays-online {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.aflc-app .coursedays-online svg {
    width: 13px;
    height: 13px;
}
.aflc-app .coursedays-empty {
    padding: 14px 0;
    font-size: var(--fs-body);
    color: var(--ink-3);
}

/* --- Action button: "close" is not an action, so it uses the back-button style --- */
.aflc-app .coursedays-actions {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.aflc-app .coursedays-btn {
    font-family: inherit;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms;
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--border);
}
.aflc-app .coursedays-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}


.aflc-app.waitinglist-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.aflc-app .waitinglist-modal {
    background: var(--surface);
    border-radius: 12px;
    padding: 32px 32px 24px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    color: var(--ink-2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
}
.aflc-app .waitinglist-header {
    color: var(--accent-heading);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 16px;
}
.aflc-app .waitinglist-course {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink-2);
}
.aflc-app .waitinglist-meta {
    font-size: var(--fs-body);
    color: var(--ink-3);
    margin-top: 2px;
}
.aflc-app .waitinglist-question {
    margin: 20px 0 0;
    font-size: var(--fs-body);
    line-height: 1.5;
}
.aflc-app .waitinglist-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.aflc-app .waitinglist-btn {
    font-family: inherit;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms;
}
.aflc-app .waitinglist-btn-back {
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--border);
}
.aflc-app .waitinglist-btn-back:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--border-strong);
}
.aflc-app .waitinglist-btn-confirm {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    min-width: 160px;
}
.aflc-app .waitinglist-btn-ok {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    min-width: 120px;
}
.aflc-app .waitinglist-btn-confirm:hover:not(:disabled),
.aflc-app .waitinglist-btn-ok:hover {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
}
.aflc-app .waitinglist-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Result banner - same colours as the postpone one, that is where the user knows them from */
.aflc-app .waitinglist-result-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: var(--fs-body);
    line-height: 1.5;
    margin-top: 20px;
}
.aflc-app .waitinglist-result-banner i {
    font-size: 18px;
    margin-top: 1px;
    flex-shrink: 0;
}
.aflc-app .waitinglist-result-success {
    background: #f0faf0;
    color: var(--aflc-dark-green, #054b21);
    border: 1px solid var(--aflc-signal-green, #92d050);
}
.aflc-app .waitinglist-result-error {
    background: #fef2f2;
    color: var(--aflc-red-150, #a20013);
    border: 1px solid var(--aflc-signal-red, #eb0000);
}

/* --- VideoConferenceModal: online participation info (same shape as CourseDaysModal) --- */
.aflc-app.videoConference-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.aflc-app .videoConference-modal {
    background: var(--surface);
    border-radius: 12px;
    padding: 32px 32px 24px;
    max-width: 460px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    color: var(--ink-2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
}
.aflc-app .videoConference-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.aflc-app .videoConference-eyebrow svg {
    width: 16px;
    height: 16px;
}
.aflc-app .videoConference-header {
    color: var(--ink);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px;
}
.aflc-app .videoConference-subtitle {
    font-size: var(--fs-body);
    color: var(--ink-2);
    margin: 0 0 20px;
}
/*  single courses have no Durchfuehrung, so the subtitle keeps the spacing by default and only
    gives it up when the Durchfuehrung line actually follows */
.aflc-app .videoConference-subtitle:has(+ .videoConference-moduleEvent) {
    margin-bottom: 2px;
}
/* Durchfuehrung, muted below the date - same role as the name line in the postpone source card */
.aflc-app .videoConference-moduleEvent {
    font-size: var(--fs-body);
    color: var(--ink-3);
    margin: 0 0 20px;
}
.aflc-app .videoConference-open-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    font-family: inherit;
    padding: 12px 24px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms;
    background: var(--accent);
    color: #fff;
    margin: 0 0 14px;
}
.aflc-app .videoConference-open-btn:hover {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
}
.aflc-app .videoConference-open-btn svg {
    width: 18px;
    height: 18px;
}
.aflc-app .videoConference-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 10px;
    cursor: copy;
}
/* one shared label column for all rows: subgrid keeps the values aligned in every language,
   so no label width has to be guessed. Scoped to the wrapper on purpose - without it the rows
   stay flex ( old markup, unsupported subgrid ) instead of collapsing into one column */
.aflc-app .videoConference-fields {
    display: grid;
    grid-template-columns: max-content 1fr auto;
}
.aflc-app .videoConference-fields > .videoConference-field {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}
.aflc-app .videoConference-field:hover {
    border-color: var(--border-strong);
}
.aflc-app .videoConference-field-label {
    color: var(--ink-3);
    font-size: var(--fs-body);
    min-width: 80px;
    flex-shrink: 0;
}
.aflc-app .videoConference-field-value {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    flex: 1;
    overflow-wrap: anywhere;
}
.aflc-app .videoConference-eye {
    background: none;
    border: none;
    color: var(--ink-3);
    cursor: pointer;
    padding: 4px;
    font-size: 15px;
}
.aflc-app .videoConference-eye:hover {
    color: var(--ink);
}
/* same box as the hover tooltip ( .aflc-app [data-tooltip]::after ) - but a real element, because
   it has to appear after the click and stay for its 1.5s, not while the pointer rests on the row */
.aflc-app .videoConference-copied {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-2);
    color: var(--ink-2);
    border: 1px solid var(--border-strong);
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.aflc-app .videoConference-hint {
    font-size: var(--fs-body);
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    margin: 30px 0 30px;
}
/* the release date inside the hint, wrapped in a span by the translation record */
.aflc-app .videoConference-availableFromDate {
    font-weight: 500;
    color: var(--ink);
}
.aflc-app .videoConference-actions {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    margin-top: 14px;
}
.aflc-app .videoConference-btn {
    font-family: inherit;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms;
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--border);
}
.aflc-app .videoConference-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

/* 260824 broc - ConfirmParticipationModal (same shape as CancelModal below; the action
   colour is green because that is what the list uses for "Teilnahme bestaetigen") */
.aflc-app.participation-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.aflc-app .participation-modal {
    background: var(--surface);
    border-radius: 12px;
    padding: 32px 32px 24px;
    max-width: 520px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    color: var(--ink-2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
}
.aflc-app .participation-header {
    color: var(--green);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 12px;
}
.aflc-app .participation-body {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 16px;
}
.aflc-app .participation-detail {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0 0 24px;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--ink);
}
.aflc-app .participation-detail-date {
    margin-top: 4px;
    font-size: var(--fs-body);
    color: var(--ink-2);
}

/* --- Action buttons --- */
.aflc-app .participation-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.aflc-app .participation-btn {
    font-family: inherit;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms;
}
.aflc-app .participation-btn-back {
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--border);
}
.aflc-app .participation-btn-back:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}
.aflc-app .participation-btn-confirm {
    background: var(--green);
    color: #fff;
    border: 1px solid var(--green);
}
.aflc-app .participation-btn-confirm:hover:not(:disabled) {
    filter: brightness(0.92);
}
.aflc-app .participation-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 260824 broc - CancelModal (teleported to body, scoped via .aflc-app class on overlay root) */
.aflc-app.cancel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.aflc-app .cancel-modal {
    background: var(--surface);
    border-radius: 12px;
    padding: 32px 32px 24px;
    max-width: 520px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    color: var(--ink-2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
}

/* --- Rules state (markup comes from the translated rules HTML) --- */
.aflc-app .cancel-body {
    font-size: var(--fs-body);
    line-height: 1.6;
}
.aflc-app .cancel-header {
    color: var(--accent-heading);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 16px;
}
.aflc-app .cancel-detail {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0 0 24px;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--ink);
}
.aflc-app .cancel-rules {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-bottom: 24px;
}
.aflc-app .cancel-rules-title {
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.aflc-app .cancel-rules ul {
    margin: 0;
    padding-left: 18px;
}
.aflc-app .cancel-rules li {
    margin: 8px 0;
    font-size: var(--fs-meta);
    line-height: 1.5;
    color: var(--ink-2);
}
.aflc-app .cancel-rules li strong {
    color: var(--ink);
    font-weight: 600;
}
/* Backend rules arrive as paragraphs; must stay above .cancel-rules-note (same specificity) */
.aflc-app .cancel-rules p {
    margin: 8px 0;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--ink-2);
}
.aflc-app .cancel-rules-note {
    margin: 14px 0 0;
    padding: 10px 14px;
    background: var(--accent-soft);
    border-radius: 6px;
    font-size: 19px;
    line-height: 1.5;
    color: var(--accent-ink);
}

/* --- Result state: semantic colours stay, only the scale follows the app --- */
.aflc-app .cancel-result {
    margin-bottom: 24px;
}
.aflc-app .cancel-result-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: var(--fs-body);
    line-height: 1.5;
}
.aflc-app .cancel-result-banner i {
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}
.aflc-app .cancel-result-success {
    background: #f0faf0;
    color: var(--aflc-dark-green, #054b21);
    border: 1px solid var(--aflc-signal-green, #92d050);
}
.aflc-app .cancel-result-error {
    background: #fef2f2;
    color: var(--aflc-red-150, #a20013);
    border: 1px solid var(--aflc-signal-red, #eb0000);
}

/* --- Action buttons --- */
.aflc-app .cancel-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.aflc-app .cancel-btn {
    font-family: inherit;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms;
}
.aflc-app .cancel-btn-back {
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--border);
}
.aflc-app .cancel-btn-back:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}
.aflc-app .cancel-btn-confirm,
.aflc-app .cancel-btn-ok {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
}
.aflc-app .cancel-btn-confirm:hover:not(:disabled),
.aflc-app .cancel-btn-ok:hover {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
}
.aflc-app .cancel-btn-ok {
    min-width: 120px;
}
.aflc-app .cancel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 260824 broc - ConfirmModal (teleported to body, scoped via .aflc-app class on overlay root) */
.aflc-app.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.aflc-app .confirm-modal {
    position: relative;
    background: var(--surface);
    border-radius: 12px;
    padding: 24px 28px 20px;
    max-width: 480px;
    width: 90%;
    color: var(--ink-2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
}
.aflc-app .confirm-body p {
    margin: 0 0 24px;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--ink-2);
}
.aflc-app .confirm-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* --- Buttons --- */
.aflc-app .confirm-btn {
    font-family: inherit;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: all 200ms;
}
.aflc-app .confirm-btn-cancel {
    background: var(--surface);
    color: var(--ink-2);
}
.aflc-app .confirm-btn-cancel:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}
.aflc-app .confirm-btn-ok {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.aflc-app .confirm-btn-ok:hover {
    filter: brightness(0.92);
}
.aflc-app .confirm-btn-confirm {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}
.aflc-app .confirm-btn-confirm:hover {
    background: #a93226;
}

/* --- Debug info hover tooltip for admins (260317 broc) --- */
.aflc-app .confirm-debug-wrap {
    position: absolute;
    top: 8px;
    right: 10px;
}
.aflc-app .confirm-debug-icon {
    cursor: pointer;
    font-size: 16px;
    opacity: .7;
    transition: opacity 200ms;
}
.aflc-app .confirm-debug-icon:hover {
    opacity: 1;
}
.aflc-app .confirm-debug-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, .85);
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
    z-index: 1;
}
.aflc-app .confirm-debug-wrap:hover .confirm-debug-tooltip {
    display: block;
}
.aflc-app .confirm-debug-tooltip ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aflc-app .confirm-debug-tooltip li {
    white-space: nowrap;
}

/* 260513 broc - PostponeModal (teleported to body, scoped via .aflc-app class on overlay root) */

/* --- Layout --- */
.aflc-app.postpone-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.aflc-app .postpone-modal {
    font-family: 'Livvic', sans-serif;
    background: #fff;
    border-radius: 12px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    color: var(--aflc-iron, #444);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
    /* border-top: 4px solid var(--aflc-sky-blue, #005a9c); */
    display: flex;
    flex-direction: column;
}

/* --- Header: title + module + counter --- */
.aflc-app .postpone-header {
    padding: 24px 28px 16px;
    border-bottom: 1px solid var(--aflc-cloud, #e5e5e5);
}
.aflc-app .postpone-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--accent-heading);
    margin-bottom: 4px;
}
.aflc-app .postpone-module {
    font-size: 19px;
    color: var(--ink-2);
}
.aflc-app .postpone-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    margin-top: 8px;
    font-size: 16px;
    color: var(--ink-3);
}
.aflc-app .postpone-counter-used {
    font-weight: 600;
    color: var(--accent);
}
.aflc-app .postpone-counter-total {
    font-weight: 600;
    color: var(--ink);
}
.aflc-app .postpone-counter-label {
    margin-left: 3px;
}

/* --- Content: scrollable area --- */
.aflc-app .postpone-content {
    padding: 20px 28px 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* --- Shared card styles (source + target) --- */
.aflc-app .postpone-card-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}
.aflc-app .postpone-card-course {
    display: block;
    font-size: 19px;
    color: var(--ink-2);
    margin-bottom: 2px;
}
.aflc-app .postpone-card-date {
    display: block;
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
}
.aflc-app .postpone-card-name {
    display: block;
    font-size: 16px;
    color: var(--ink-3);
    margin-top: 2px;
}
/* bare icon in front of the online label - same glyph as the list button, no frame */
.aflc-app .postpone-card-online-icon {
    width: 15px;
    height: 15px;
    vertical-align: -2px;
}

/* --- Source card (orange accent = "from here") --- */
.aflc-app .postpone-source-card {
    padding: 12px 16px;
    border: 2px solid var(--aflc-signal-orange, #f28c00);
    border-radius: 8px;
    background: #fff8f0;
}
.aflc-app .postpone-source-card .postpone-card-label {
    color: var(--aflc-signal-orange, #f28c00);
}

/* --- Flow arrow --- */
.aflc-app .postpone-flow-arrow {
    text-align: center;
    padding: 8px 0;
    color: var(--aflc-sky-blue, #005a9c);
    font-size: 19px;
}

/* --- Target section label --- */
.aflc-app .postpone-target-section .postpone-card-label {
    color: var(--aflc-sky-blue, #005a9c);
    margin-bottom: 8px;
}

/* --- Target list (selectable) --- */
.aflc-app .postpone-target-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aflc-app .postpone-target-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 2px solid var(--aflc-cloud, #e5e5e5);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    font-family: inherit;
}
.aflc-app .postpone-target-item:hover:not(:disabled) {
    border-color: var(--aflc-sky-blue, #005a9c);
    background: var(--aflc-light-blue-25, #ebfaff);
}
.aflc-app .postpone-target-item.no-seats,
.aflc-app .postpone-target-item.already-registered {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--aflc-milk, #f6f6f6);
}
.aflc-app .postpone-target-item.no-seats:hover,
.aflc-app .postpone-target-item.already-registered:hover {
    border-color: var(--aflc-cloud, #e5e5e5);
    background: var(--aflc-milk, #f6f6f6);
}
.aflc-app .postpone-target-full {
    font-size: 16px;
    font-weight: 600;
    color: var(--aflc-signal-red, #eb0000);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Already booked: a statement, not an error - blue instead of red */
.aflc-app .postpone-target-registered {
    font-size: 16px;
    font-weight: 600;
    color: var(--aflc-sky-blue, #005a9c);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top:20px;
}

/* --- Confirmed target card (blue accent = "to here") --- */
.aflc-app .postpone-target-card {
    padding: 12px 16px;
    border: 2px solid var(--aflc-sky-blue, #005a9c);
    border-radius: 8px;
    background: var(--aflc-light-blue-25, #ebfaff);
}
.aflc-app .postpone-target-card .postpone-card-label {
    color: var(--aflc-sky-blue, #005a9c);
}
.aflc-app .postpone-target-card .postpone-card-date {
    color: var(--aflc-sky-blue, #005a9c);
}

/* --- Change target link --- */
.aflc-app .postpone-change-link {
    display: inline-block;
    margin-top: 10px;
    background: none;
    border: none;
    color: var(--aflc-sky-blue, #005a9c);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
}
.aflc-app .postpone-change-link:hover {
    color: var(--aflc-signal-orange, #f28c00);
}

/* --- No targets --- */
.aflc-app .postpone-no-targets {
    padding: 16px;
    text-align: center;
    color: var(--ink-3);
    font-size: 19px;
    background: var(--surface-2);
    border-radius: 8px;
}

/* --- Result banner --- */
.aflc-app .postpone-result-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 19px;
    line-height: 1.5;
    margin-top: 12px;
}
.aflc-app .postpone-result-banner i {
    font-size: 18px;
    margin-top: 1px;
    flex-shrink: 0;
}
.aflc-app .postpone-result-success {
    background: #f0faf0;
    color: var(--aflc-dark-green, #054b21);
    border: 1px solid var(--aflc-signal-green, #92d050);
}
.aflc-app .postpone-result-error {
    background: #fef2f2;
    color: var(--aflc-red-150, #a20013);
    border: 1px solid var(--aflc-signal-red, #eb0000);
}

/* --- Actions (fixed bottom) --- */
.aflc-app .postpone-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px 28px 24px;
    border-top: 1px solid var(--aflc-cloud, #e5e5e5);
    flex-shrink: 0;
}
.aflc-app .postpone-btn {
    font-family: inherit;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms;
}
.aflc-app .postpone-btn-back {
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--border);
}
.aflc-app .postpone-btn-back:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}
.aflc-app .postpone-btn-confirm,
.aflc-app .postpone-btn-ok {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
}
.aflc-app .postpone-btn-confirm:hover:not(:disabled),
.aflc-app .postpone-btn-ok:hover {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
}
.aflc-app .postpone-btn-ok {
    min-width: 120px;
}
.aflc-app .postpone-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Mobile fullscreen --- */
@media (max-width: 767px) {
    .aflc-app.postpone-overlay {
        align-items: stretch;
    }
    .aflc-app .postpone-modal {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        border-top: none;
    }
    .aflc-app .postpone-header {
        padding: 20px 20px 12px;
    }
    .aflc-app .postpone-content {
        padding: 16px 20px 8px;
    }
    .aflc-app .postpone-actions {
        padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
    }
}

/* 260824 broc - mobile fullscreen for the other modals, same shape as
   .postpone-modal above. No wrapper div needed: margin-top:auto pushes the
   actions to the bottom edge when the content is short, position:sticky keeps
   them on screen when it scrolls. */
@media (max-width: 767px) {
    .aflc-app.cancel-overlay,
    .aflc-app.participation-overlay,
    .aflc-app.coursedays-overlay,
    .aflc-app.videoConference-overlay,
    .aflc-app.confirm-overlay {
        align-items: stretch;
    }
    .aflc-app .cancel-modal,
    .aflc-app .participation-modal,
    .aflc-app .coursedays-modal,
    .aflc-app .videoConference-modal,
    .aflc-app .confirm-modal {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        padding: 24px 20px 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    .aflc-app .cancel-actions,
    .aflc-app .participation-actions,
    .aflc-app .coursedays-actions,
    .aflc-app .videoConference-actions,
    .aflc-app .confirm-actions {
        margin-top: auto;
        position: sticky;
        bottom: 0;
        margin-left: -20px;
        margin-right: -20px;
        padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
        background: var(--surface);
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 767px) {
    .aflc-app .booking-card .module-booking-course-row {
        flex-wrap: wrap;
        gap: 4px;
    }
    .aflc-app .booking-card .module-booking-course-name {
        min-width: unset;
        width: 100%;
        font-weight: 600;
    }
}

/* 260506 broc - tooltip component */
.aflc-app .tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.aflc-app .tooltip-bubble {
    position: absolute;
    z-index: 10;
    padding: 6px 10px;
    background: rgba(0, 0, 0, .85);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
}
.aflc-app .tooltip-top {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
}
.aflc-app .tooltip-bottom {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
}

/* ========================================
   260320 broc - sboxApp dashboard accordion tiles
   ======================================== */
.aflc-app .dashboard-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aflc-app .dashboard-tile {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: box-shadow 200ms;
}

.aflc-app .dashboard-tile.open {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.aflc-app .dashboard-tile-header {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    cursor: pointer;
    gap: 14px;
    transition: background 200ms;
}

.aflc-app .dashboard-tile-header:hover {
    background: var(--aflc-milk);
}

.aflc-app .dashboard-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--aflc-milk);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    color: var(--aflc-granit);
    transition: all 200ms;
}

.aflc-app .dashboard-tile.open .dashboard-tile-icon {
    background: var(--aflc-sailbox-cyan);
    color: #fff;
}

.aflc-app .dashboard-tile-text {
    flex: 1;
    min-width: 0;
}

.aflc-app .dashboard-tile-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--aflc-charcoal);
    line-height: 1.3;
}

.aflc-app .dashboard-tile-subtitle {
    font-size: 13px;
    color: var(--aflc-granit);
    line-height: 1.3;
    margin-top: 1px;
}

.aflc-app .dashboard-tile-chevron {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--aflc-storm);
    transition: transform 250ms;
}

.aflc-app .dashboard-tile.open .dashboard-tile-chevron {
    transform: rotate(90deg);
    color: var(--aflc-sailbox-cyan);
}

.aflc-app .dashboard-tile-content {
    padding: 0 18px 18px;
}

/* placeholder for upcoming plugins */
.plugin-placeholder {
    padding: 30px 0;
    text-align: center;
    color: var(--aflc-storm);
    font-style: italic;
    font-size: 14px;
}

/* 260221 broc - shared plugin box (every plugin carries its own visual container) */
/* 260326 broc - content box padding ratio: top 0.8x, L/R 1x, bottom 1x (base 30px) */
.aflc-app .plugin-box {
    /* background: #f5f5f5; */
    border-radius: 10px;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, .06); */
    /* padding: 24px 20px 20px; */
    padding: 0px 20px 20px;
}

/* 260326 broc - shared plugin header */
.aflc-app .plugin-header {
    display: flex;
    align-items: center;
    padding: 0 0 16px;
    gap: 14px;
}

.aflc-app .plugin-header-text {
    flex: 1;
    min-width: 0;
}
.aflc-app .plugin-header-title {
    font-size: 32px;
    font-weight: 400;
    color: var(--accent-heading);
    line-height: 1.1;
}
.aflc-app .plugin-header-subtitle {
    font-size: 15px;
    color: var(--aflc-granit);
    line-height: 1.3;
    margin-top: 3px;
}

/* 260326 broc - icon hidden by default (minimal theme) */
.aflc-app .plugin-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--aflc-sailbox-cyan);
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    color: #fff;
}

/* 260326 broc - classic theme: icon visible + smaller title */
/* switched via: sbox.theme('pluginheader', 'classic') */
.aflc-app .theme-pluginheader-classic .plugin-header-icon {
    display: flex;
}
.aflc-app .theme-pluginheader-classic .plugin-header-title {
    font-size: 15px;
    font-weight: 600;
}
.aflc-app .theme-pluginheader-classic .plugin-header-subtitle {
    font-size: 13px;
    margin-top: 1px;
}

/* 260327 broc - theme: status icon for missing/not-qualified/expired
 * switched via: sbox.theme('statusicon', 'grey-circle') */
.aflc-app .theme-statusicon-grey-circle .quali-no.fa-times-circle,
.aflc-app .theme-statusicon-grey-circle .doc-no.fa-times-circle,
.aflc-app .theme-statusicon-grey-circle .subscr-expired.fa-times-circle {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--aflc-storm);
    border-radius: 50%;
    background: transparent;
}
.aflc-app .theme-statusicon-grey-circle .quali-no.fa-times-circle::before,
.aflc-app .theme-statusicon-grey-circle .doc-no.fa-times-circle::before,
.aflc-app .theme-statusicon-grey-circle .subscr-expired.fa-times-circle::before {
    content: none;
}

/* 260221 broc - generic content card (white card inside plugin-box) */
.aflc-app .content-card {
    padding: 20px;
    margin-bottom: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 250ms;
}
.aflc-app .content-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.aflc-app .content-card:last-child {
    margin-bottom: 0;
}
.aflc-app .content-card > .group-header:first-child {
    margin: -20px -20px 16px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* 260221 broc - theme: shadowed cards and box */
.aflc-app .theme-shadow-cards .plugin-box {
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .08);
}
.aflc-app .theme-shadow-cards .content-card {
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .08);
}
.aflc-app .theme-shadow-cards .dashboard-nav {
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .08);
}

/* ========================================
   260221 broc - sboxApp dashboard layout (responsive)
   ======================================== */
.aflc-app .dashboard-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 16px;
    position: relative;
}

/* 260413 broc - fullscreen background image on static container (loads immediately, no Vue dependency) */
.mpg-sboxApp::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('/domains/sailbox/data/plugin/sboxApp/images/sailbox_DASHBOARD_015.webp') no-repeat center top;
    background-size: cover;
    z-index: -1;
}

.aflc-app .dashboard-content {
    flex: 1;
    min-width: 0;
}

/* 260221 broc - nested plugin-box reset (dashboard wraps header + plugin in one box) */
.aflc-app .plugin-box .plugin-box {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* 260326 broc - old tile-header overrides removed, plugins now use PluginHeader.vue */

/* ========================================
   260221 broc - sboxApp dashboard navigation (responsive)
   mobile: fixed bottom bar | desktop: side nav right
   ======================================== */
.aflc-app .dashboard-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
    z-index: 9990;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.aflc-app .dashboard-nav-spacer {
    height: 70px;
}

/* 260221 broc - mobile phone: no background, edge-to-edge content */
@media (max-width: 576px) {
    .mpg-sboxApp::before {
        display: none;
    }
    .aflc-app .dashboard-layout {
        padding: 16px 0;
    }
    .aflc-app {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .aflc-app .dashboard-content {
        max-width: none;
        margin: 0;
    }
    .aflc-app .plugin-box {
        padding-left: 0;
        padding-right: 0;
        box-shadow: none;
        background: transparent;
    }
}

/* 260221 broc - desktop nav hidden on mobile */
.aflc-app .dashboard-nav-full {
    display: none;
}

/* 260221 broc - mobile compact nav */
.aflc-app .dashboard-nav-compact {
    display: flex;
    align-items: stretch;
}

.aflc-app .dashboard-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 16px 4px 12px;
    border: none;
    border-right: 1px solid var(--aflc-cloud);
    background: none;
    cursor: pointer;
    color: var(--aflc-charcoal);
    font-size: 14px;
    /* font-weight: 500; */
    font-weight: normal;
    transition: color 200ms, background 200ms;
    position: relative;
}

.aflc-app .dashboard-nav-compact .dashboard-nav-item:last-child,
.aflc-app .dashboard-nav-compact .dashboard-nav-more {
    border-right: none;
}

.aflc-app .dashboard-nav-item i {
    font-size: 18px;
    color: var(--aflc-sailbox-cyan);
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 300 !important;
    margin-top: -3px;
    transition: color 200ms;
}

.aflc-app .dashboard-nav-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.aflc-app .dashboard-nav-item.active {
    color: #fff;
    background: var(--aflc-sailbox-cyan);
}

.aflc-app .dashboard-nav-item.active i,
.aflc-app .dashboard-nav-item.active span {
    color: #fff;
}

.aflc-app .dashboard-nav-item:hover {
    color: var(--aflc-sailbox-cyan);
}

/* More popup (mobile only) */
.aflc-app .dashboard-nav-popup {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: #fff;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
    min-width: 200px;
    padding: 8px 0;
    z-index: 9991;
}

.aflc-app .dashboard-nav-popup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 18px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--aflc-charcoal);
    transition: background 200ms;
    text-align: left;
}

.aflc-app .dashboard-nav-popup-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: var(--aflc-granit);
}

.aflc-app .dashboard-nav-popup-item:hover {
    background: var(--aflc-milk);
}

.aflc-app .dashboard-nav-popup-item.active {
    color: var(--aflc-sailbox-cyan);
}

.aflc-app .dashboard-nav-popup-item.active i {
    color: var(--aflc-sailbox-cyan);
}

.aflc-app .dashboard-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9989;
}

/* ========================================
   260221 broc - desktop/tablet layout (>= 931px)
   ======================================== */
@media (min-width: 931px) {

    .aflc-app .dashboard-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 28px;
        align-items: start;
    }

    .aflc-app .dashboard-content {
        min-width: 0;
    }

    /* 260221 broc - nav becomes side nav on right with white card */
    /* 260409 broc - sticky so it stays in place while content scrolls */
    .aflc-app .dashboard-nav {
        position: static;
        z-index: 1;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        padding: 10px;
        overflow: hidden;
    }

    .aflc-app .dashboard-nav-spacer {
        display: none;
    }

    /* 260221 broc - show full nav, hide compact nav */
    .aflc-app .dashboard-nav-full {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .aflc-app .dashboard-nav-compact {
        display: none;
    }

    /* 260221 broc - desktop nav items: horizontal icon + label */
    .aflc-app .dashboard-nav-full .dashboard-nav-item {
        flex: none;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 6px 16px;
        font-size: 14px;
        border-radius: 8px;
        border-right: none;
        text-align: left;
    }

    .aflc-app .dashboard-nav-full .dashboard-nav-item i {
        font-size: 16px;
        width: 20px;
        text-align: center;
    }

    /* 260327 broc - hover: only color change, no background (matches sailbox site pattern) */
    .aflc-app .dashboard-nav-full .dashboard-nav-item:hover {
        color: var(--aflc-sailbox-cyan);
    }

    .aflc-app .dashboard-nav-full .dashboard-nav-item.active {
        background: var(--aflc-sailbox-cyan);
        color: #fff;
    }

    .aflc-app .dashboard-nav-full .dashboard-nav-item.active:hover {
        background: var(--aflc-sailbox-cyan);
        color: #fff;
    }
}

/* 260409 broc - desktop: full header with nav = taller top offset */
@media (min-width: 1200px) {
    .aflc-app .dashboard-nav {
        top: 145px;
    }
}

/* ========================================
   260519 broc - header card (lerncoaching design)
   ======================================== */
.aflc-app .header-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 32px 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.aflc-app .header-card .plugin-header {
    padding: 0;
}

.aflc-app .header-card .plugin-header-icon {
    display: none;
}

.aflc-app .header-card .plugin-header-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.aflc-app .header-card .plugin-header-subtitle {
    color: var(--ink-3);
    font-size: 14px;
    margin-top: 6px;
}

/* ========================================
   260520 broc - bookings overrides on content-card (no card padding, inner elements handle their own)
   ======================================== */
.aflc-app .full > .content-card {
    padding: 0;
    margin-top: 20px;
    margin-bottom: 0;
    scroll-margin-top: 24px;
}
.aflc-app .full > .content-card > .group-header {
    margin: 0;
    padding: 20px 28px 12px;
}

.aflc-app .head-meta {
    color: var(--ink-3);
    font-size: 12.5px;
}

.aflc-app .legend {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--ink-3);
}

.aflc-app .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.aflc-app .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.aflc-app .footer-hint {
    margin: 0 28px;
    padding: 14px 0 22px;
    font-size: var(--fs-meta);
    color: var(--ink-3);
    border-top: 1px solid var(--border);
}

/* 260519 broc - module article */
.aflc-app .module {
    padding: 24px 28px 24px;
    border-top: 1px solid var(--border);
}

.aflc-app .module:first-of-type {
    border-top: none;
}

.aflc-app .module-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.aflc-app .module-title-block {
    min-width: 0;
    flex: 1 1 320px;
}

.aflc-app .module-title {
    font-size: var(--fs-title);
    font-weight: var(--fw-title);
    color: var(--ink);
    letter-spacing: -0.005em;
}

.aflc-app .module-code {
    color: var(--ink-3);
    font-weight: 500;
    margin-left: 6px;
}

.aflc-app .module-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    color: var(--ink-3);
    font-size: var(--fs-meta);
    flex-wrap: wrap;
    letter-spacing: 0.01em;
}

.aflc-app .meta-sep {
    color: var(--border);
    font-size: 10px;
}

.aflc-app .meta-pipe {
    color: var(--border-strong);
    font-weight: 300;
    padding: 0 4px;
    position: relative;
    top: -1px;
}

.aflc-app .meta-confirmed {
    color: var(--green);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.aflc-app .meta-confirmed--all { font-weight: 600; }

.aflc-app .meta-shifted {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.aflc-app .meta-shifted--limit {
    color: var(--warn);
    font-weight: 500;
}

.aflc-app .meta-icon-mobile {
    display: none;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.aflc-app .module-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* 260519 broc - progress pill */
.aflc-app .progress-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.aflc-app .progress-pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 2px var(--green-soft);
}

.aflc-app .progress-pill.complete {
    background: var(--green-soft);
    border-color: var(--green-border);
    color: var(--green);
}

.aflc-app .progress-pill.complete .dot {
    box-shadow: 0 0 0 2px rgba(47, 138, 90, 0.15);
}

/* 260519 broc - warning banner */
.aflc-app .warning {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--warn-bg) 0%, #fef7ed 100%);
    border: 1px solid var(--warn-border);
    border-left: 3px solid var(--warn);
    border-radius: 8px;
    color: var(--warn);
    font-size: 13.5px;
    line-height: 1.55;
}

.aflc-app .warning svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.85;
}

.aflc-app .warning b {
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
    color: #93501a;
}

/* 260601 broc - kurstage: label above, date/time/action below */
.aflc-app .kurstage {
    margin-top: 24px;
    display: grid;
    grid-template-columns: auto auto 1fr;
    column-gap: 14px;
    align-items: center;
}

.aflc-app .ktag-row {
    display: contents;
}

.aflc-app .kurstage .ktag-row > * {
    padding: 0 0 20px; 
    border-top: none;
    min-height: 0;
    display: flex;
    align-items: center;
}

.aflc-app .kurstage .ktag-row > .ktag-label {
    grid-column: 1 / -1;
    color: var(--ink-2);
    font-size: var(--fs-body);
    padding: 16px 0 3px;
    border-top: 1px dashed var(--border);
}

.aflc-app .kurstage .ktag-row:first-child > .ktag-label {
    border-top: none;
    padding-top: 0;
}

.aflc-app .ktag-date {
    font-size: var(--fs-body);
    color: var(--ink-2);
}

.aflc-app .ktag-date .weekday {
    color: var(--ink-2);
    /* font-weight: 500; */
    margin-right: 6px;
}

.aflc-app .ktag-date .date-short,
.aflc-app .course-row-date .date-short,
.aflc-app .intervision-readonly .date-short { display: none; }

.aflc-app .ktag-time {
    font-size: var(--fs-body);
    /* font-weight: 600; */
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.aflc-app .ktag-action {
    justify-content: flex-end;
    gap: 8px;
}

/* 260519 broc - buttons (design system) */
.aflc-app .btn-cancel-module {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid #e7d2cd;
    background: var(--surface);
    color: var(--danger);
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
    white-space: nowrap;
}

.aflc-app .btn-cancel-module:hover {
    background: var(--danger-bg);
    border-color: #d9a89e;
    color: var(--danger);
}

.aflc-app .btn-cancel-module svg {
    width: 15px;
    height: 15px;
}

/* 260519 broc - icon button (shift/postpone) */
.aflc-app .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    border: 1px solid var(--border-strong);
    background: #fff;
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.aflc-app .btn-icon svg {
    width: 15px;
    height: 15px;
}

.aflc-app .btn-icon:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.aflc-app .btn-icon:disabled,
.aflc-app .btn-icon.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.aflc-app .btn-icon:disabled:hover,
.aflc-app .btn-icon.is-disabled:hover {
    background: #fff;
    color: var(--ink-3);
    border-color: var(--border-strong);
}

/* 260519 broc - CSS tooltips (instant, always above) */
.aflc-app [data-tooltip] {
    position: relative;
}

.aflc-app [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 2px);
    background: var(--surface-2);
    color: var(--ink-2);
    border: 1px solid var(--border-strong);
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 10;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.aflc-app [data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--border-strong);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 10;
}

.aflc-app [data-tooltip]:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.aflc-app [data-tooltip]:hover::before {
    opacity: 1;
}

/* 260601 broc - default: action buttons flow from right (no position reservation) */
.aflc-app .btn-icon-spacer {
    display: none;
}

/* theme override: reserved positions (old behavior) */
#learncoachingApp.sbox-theme-actionbtns-reserved .btn-icon-spacer {
    display: block;
    width: 30px;
    flex-shrink: 0;
}

.aflc-app .btn-icon.btn-icon-danger {
    border-color: #e7d2cd;
    color: var(--danger);
}

.aflc-app .btn-icon.btn-icon-danger:hover {
    background: var(--danger-bg);
    border-color: #d9a89e;
    color: var(--danger);
}

.aflc-app .btn-icon.is-shifted {
    background: var(--accent-soft);
    border-color: var(--warn-border);
    color: var(--accent-ink);
}

.aflc-app .btn-icon.is-shifted:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* 260519 broc - per-row confirm button */
/* height set explicitly, not via padding - must match .btn-icon in the same action row */
.aflc-app .btn-confirm-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid var(--green-border);
    background: #fff;
    color: var(--green);
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
    white-space: nowrap;
}

.aflc-app .btn-confirm-row svg {
    width: 14px;
    height: 14px;
}

.aflc-app .btn-confirm-row:hover {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.aflc-app .btn-confirm-row.is-confirmed {
    background: var(--green-soft);
    border-color: var(--green-border);
    color: var(--green);
    cursor: default;
}

/* 260519 broc - confirmed participation icon (no button, just checkmark) */
.aflc-app .btn-confirmed-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--green-border);
    background: var(--green-soft);
    color: var(--green);
    cursor: default;
}

.aflc-app .btn-confirmed-icon svg {
    width: 18px;
    height: 18px;
}

/* 260601 broc - course-rows: date/time left, no badge column */
.aflc-app .course-rows {
    display: grid;
    grid-template-columns: auto auto 1fr;
    column-gap: 14px;
    row-gap: 0;
    align-items: center;
    padding: 14px 28px 4px;
}

.aflc-app .course-rows .ktag-row {
    display: contents;
}

.aflc-app .course-row-header {
    grid-column: 1 / -1;
    padding: 20px 0 2px;
    border-top: 1px dashed var(--border);
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow: hidden;
}

.aflc-app .course-rows .ktag-row:first-child .course-row-header {
    border-top: none;
}

.aflc-app .course-rows .ktag-row:first-child .single-row-info {
    border-top: none;
    padding-top: 4px;
}

/* wraps instead of being cut off: the header is overflow:hidden, so a nowrap title that
   cannot shrink gets clipped in a narrow container. Titles that fit are unaffected. */
.aflc-app .course-row-header .course-row-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    /* font-size: 16.5px; */
    font-size: var(--fs-title);
    font-weight: 500;
    white-space: normal;
    flex-shrink: 1;
    min-width: 0;
}

.aflc-app .course-row-header .course-row-meta {
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.aflc-app .course-row-header .course-row-meta::before {
    content: '\b7';
    margin: 0 8px;
    color: var(--border-strong);
}

/* shared date presentation — course-row-date + intervision-readonly stay identical (change once, both update) */
.aflc-app .course-row-date,
.aflc-app .intervision-readonly {
    font-size: var(--fs-body);
    color: var(--ink-2);
}



.aflc-app .course-row-date .weekday,
.aflc-app .intervision-readonly .weekday {
    color: var(--ink-2);
    /* font-weight: 500; */
    margin-right: 6px;
}

.aflc-app .course-row-time {
    font-size: var(--fs-body);
    /* font-weight: 600; */
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.aflc-app .course-row-action {
    justify-content: flex-end;
    gap: 8px;
    display: flex;
    
}


.aflc-app .course-row-date,
.aflc-app .course-row-time,
.aflc-app .course-row-action {
    padding: 0px 0 15px;
}


/* 260519 broc - supervision tracker cards */
.aflc-app .sv-tracker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 28px 16px;
}

.aflc-app .sv-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.aflc-app .sv-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--ink-2);
    flex-shrink: 0;
}

.aflc-app .sv-card-icon svg {
    width: 17px;
    height: 17px;
}

.aflc-app .sv-card-body {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.aflc-app .sv-card-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

.aflc-app .sv-card-progress {
    font-size: 14px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.aflc-app .sv-card-progress b {
    color: var(--ink);
    font-weight: 600;
}

.aflc-app .sv-card-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--border);
    color: #fff;
    flex-shrink: 0;
}

.aflc-app .sv-card-status svg {
    width: 13px;
    height: 13px;
}

.aflc-app .sv-card.complete {
    background: var(--green-soft);
    border-color: var(--green-border);
}

.aflc-app .sv-card.complete .sv-card-icon {
    background: #fff;
    border-color: var(--green-border);
    color: var(--green);
}

.aflc-app .sv-card.complete .sv-card-status {
    background: var(--green);
}

.aflc-app .sv-card.partial .sv-card-status {
    display: none;
}

.aflc-app .sv-card-register {
    flex-basis: 100%;
    height: 34px;
    padding: 0 10px;
    border-radius: 7px;
    border: 1px solid var(--accent);
    background: #fff;
    color: var(--accent);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.aflc-app .sv-card-register:hover {
    background: var(--accent);
    color: #fff;
}

/* Supervision registration modal */
.aflc-app .sv-register-role {
    color: var(--accent);
    font-weight: 600;
}

.aflc-app .sv-register-hint {
    margin-top: 6px;
    font-size: 15px;
    color: var(--ink-3);
}

.aflc-app .sv-register-item {
    align-items: flex-start;
    gap: 10px;
    cursor: default;
}

.aflc-app .sv-register-item:hover:not(.already-registered) {
    border-color: var(--aflc-cloud, #e5e5e5);
    background: #fff;
}

.aflc-app .sv-register-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.aflc-app .sv-register-info .postpone-target-registered {
    margin-top: 4px;
}

/* label stays in place while loading, so the button keeps its width */
.aflc-app .sv-register-btn {
    position: relative;
}

.aflc-app .sv-register-btn.is-adding .sv-register-btn-label {
    visibility: hidden;
}

.aflc-app .sv-register-btn.is-adding:disabled {
    opacity: 1;
}

.aflc-app .sv-register-btn-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin: -0.5em 0 0 -0.5em;
    line-height: 1;
}

.aflc-app .sv-register-modal .postpone-target-list + .postpone-no-targets {
    margin-top: 12px;
}

.aflc-app .sv-register-loading {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

/* 260519 broc - discipline badges (supervision rows) */
.aflc-app .disc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    flex-shrink: 0;
    line-height: 1;
    white-space: nowrap;
    min-width: 105px;
    justify-content: flex-start;
}

/* 260601 broc - badge is now inside course-row-header */
.aflc-app .course-row-badge {
    display: none;
}

.aflc-app .course-row-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: block;
    margin-top: -1px;
}

/* Multi seat marker. Own class on purpose: .course-row-badge is hidden by default and
   only shown inside .course-rows--supervision, where it replaces the title. */
.aflc-app .course-row-seats {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 2px 9px;
    border-radius: 11px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.aflc-app .course-row-seats svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    display: block;
}

/* 260601 broc - supervision theme: badge replaces title */
.aflc-app .course-rows--supervision .course-row-title {
    display: none;
}

.aflc-app .course-rows--supervision .course-row-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}

.aflc-app .disc-badge svg {
    width: 12px;
    height: 12px;
    color: var(--ink-3);
    flex-shrink: 0;
}

/* ========================================
   260519 broc - dashboard sidebar wrapper
   ======================================== */
@media (min-width: 931px) {
    /* 260825 broc - top clears the sticky page header (110px from 1024px up)
       plus the original 24px gap. Without it the nav sticks to the viewport
       edge and disappears behind the header. */
    .aflc-app .dashboard-sidebar {
        position: sticky;
        top: 134px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        align-self: start;
    }
}

/* ========================================
   260519 broc - anchor navigation (scrollspy)
   ======================================== */
.aflc-app .anchor-nav {
    display: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 14px 12px;
    box-shadow: var(--shadow-sm);
}

@media (min-width: 931px) {
    #learncoachingApp.sbox-theme-anchornav-visible .aflc-app .anchor-nav {
        display: block;
    }
}

.aflc-app .anchor-nav-heading {
    margin: 0 0 8px 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.aflc-app .anchor-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 7px;
    text-decoration: none;
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.15s;
}

.aflc-app .anchor-nav-link:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.aflc-app .anchor-nav-link.is-current {
    color: var(--accent-ink);
    background: var(--accent-soft);
}

.aflc-app .anchor-nav-count {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.aflc-app .anchor-nav-link.is-current .anchor-nav-count {
    color: var(--accent-ink);
}

/* ========================================
   260519 broc - redesigned side-nav (lerncoaching design)
   ======================================== */
.aflc-app .side-nav-items {
    display: none;
}

@media (min-width: 931px) {
    .aflc-app .side-nav-items {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
}

.aflc-app .side-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink-2);
    font-weight: 500;
    font-size: 16px;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}

.aflc-app .side-nav-link:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.aflc-app .side-nav-link.active {
    background: var(--accent);
    color: #fff;
}

.aflc-app .side-nav-link.active:hover {
    background: var(--accent);
    color: #fff;
}

.aflc-app .side-nav-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ink-3);
}

.aflc-app .side-nav-link.active svg {
    color: #fff;
}

/* ========================================
   260519 broc - tablet breakpoint (<=1024px)
   ======================================== */
@media (max-width: 1024px) {
    .aflc-app .kurstage,
    .aflc-app .course-rows {
        grid-template-columns: auto auto 1fr;
    }
}

/* ========================================
   260519 broc - mobile breakpoint (<=720px)
   ======================================== */
@media (max-width: 720px) {

    /* --- general spacing --- */
    .aflc-app .full > .content-card { margin-top: 14px; }
    .aflc-app .full > .content-card > .group-header { padding: 14px 18px 10px; }
    .aflc-app .module { padding: 14px 18px 14px; }
    .aflc-app .footer-hint { margin: 0 18px; padding: 12px 0 16px; }

    /* --- module head: title + cancel inline --- */
    .aflc-app .module-head {
        gap: 10px;
    }
    .aflc-app .module-meta {
        gap: 3px 6px;
    }
    .aflc-app .module-meta .meta-pipe { padding: 0 1px; }
    .aflc-app .meta-text-desktop { display: none; }
    .aflc-app .meta-icon-mobile { display: inline-block; }
    .aflc-app .module-title-block { flex: 1 1 200px; }

    /* --- kurstage: label above, date/time/action below --- */
    .aflc-app .kurstage {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .aflc-app .kurstage .ktag-row {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label  label"
            "date   action"
            "time   .";
        gap: 0 6px;
        padding: 10px 0;
        border-top: 1px dashed var(--border);
        align-items: center;
    }
    .aflc-app .kurstage .ktag-row:first-child { border-top: none; padding-top: 0; }
    .aflc-app .kurstage .ktag-row > * { padding: 0; border-top: none; min-height: 0; }

    /* child combinator on purpose: the desktop rule is
       .kurstage .ktag-row > .ktag-label (0,4,0) and a media query adds no
       specificity - without the > this block loses and draws a second dashed line */
    .aflc-app .kurstage .ktag-row > .ktag-label {
        grid-area: label;
        white-space: normal;
        border-top: none;
        padding: 0 0 2px;
    }
    .aflc-app .kurstage .ktag-date {
        grid-area: date;
        white-space: nowrap;
    }
    .aflc-app .ktag-date .date-full { display: none; }
    .aflc-app .ktag-date .date-short { display: inline; }
    .aflc-app .kurstage .ktag-time {
        grid-area: time;
    }
    .aflc-app .kurstage .ktag-action {
        grid-area: action;
        display: flex;
        gap: 5px;
        align-items: center;
        border-top: none;
        padding: 0;
        min-height: 0;
    }
    .aflc-app .kurstage .btn-confirm-row {
        font-size: 0; padding: 5px;
        width: var(--btn-size); height: var(--btn-size);
        justify-content: center; gap: 0; border-radius: 7px;
    }
    .aflc-app .kurstage .btn-confirmed-icon { width: var(--btn-size); height: var(--btn-size); }
    .aflc-app .kurstage .btn-icon { width: var(--btn-size); height: var(--btn-size); }

    /* --- course-rows: header above, date/time/action below --- */
    .aflc-app .course-rows {
        display: flex;
        flex-direction: column;
        padding: 8px 18px 14px;
    }
    .aflc-app .course-rows .ktag-row {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "header header"
            "date   action"
            "time   .";
        gap: 1px 6px;
        padding: 12px 0;
        border-top: 1px dashed var(--border);
        align-items: center;
    }
    .aflc-app .course-rows .ktag-row:first-child { border-top: none; }
    .aflc-app .course-rows .course-row-header {
        grid-area: header;
        padding: 0 0 2px;
        border-top: none;
    }
    .aflc-app .course-rows .course-row-date {
        grid-area: date;
        padding: 0;
    }
    /* shared mobile date presentation — course + intervision identical */
    .aflc-app .course-row-date,
    .aflc-app .intervision-readonly {
        white-space: nowrap;
    }
    .aflc-app .course-rows .course-row-time {
        grid-area: time;
        padding: 0;
    }
    .aflc-app .course-rows .course-row-action {
        grid-area: action;
        display: flex;
        gap: 5px;
        align-items: center;
        padding: 0;
    }

    /* icon-only buttons in course-rows on mobile */
    .aflc-app .course-rows .btn-confirm-row {
        font-size: 0; padding: 5px;
        width: var(--btn-size); height: var(--btn-size);
        justify-content: center; gap: 0; border-radius: 7px;
    }
    .aflc-app .course-rows .btn-confirmed-icon { width: var(--btn-size); height: var(--btn-size); }
    .aflc-app .course-rows .btn-icon { width: var(--btn-size); height: var(--btn-size); }

    /* date abbreviation on mobile — course + intervision identical */
    .aflc-app .course-rows .date-full,
    .aflc-app .intervision-readonly .date-full { display: none; }
    .aflc-app .course-rows .date-short,
    .aflc-app .intervision-readonly .date-short { display: inline; }
    .aflc-app .course-rows--supervision .course-row-badge svg { width: 13px; height: 13px; }

    /* --- supervision tracker: 3 columns compact --- */
    .aflc-app .sv-tracker {
        grid-template-columns: repeat(3, 1fr);
        padding: 14px 18px;
        gap: 6px;
    }
    .aflc-app .sv-card { padding: 6px 8px; gap: 6px; }
    .aflc-app .sv-card-icon { width: 26px; height: 26px; border-radius: 6px; }
    .aflc-app .sv-card-icon svg { width: 14px; height: 14px; }
    .aflc-app .sv-card-body { gap: 2px; }
    .aflc-app .sv-card-name { font-size: 14px; }
    .aflc-app .sv-card-progress { font-size: 14px; }
    .aflc-app .sv-card-progress-text { display: none; }
    .aflc-app .sv-card-status { display: none; }
    .aflc-app .sv-card-register { height: 30px; padding: 0 4px; font-size: 13px; }
    .aflc-app .sv-register-btn { align-self: stretch; }

    /* --- page title smaller on mobile --- */
    .aflc-app .plugin-header-title { font-size: 24px; }
    .aflc-app .plugin-header-subtitle { display: none; }

    /* --- group-header smaller on mobile --- */

    /* --- mobile nav: orange statt cyan --- */
    .aflc-app .dashboard-nav-item.active {
        background: var(--aflc-button-signal-orange);
        color: #fff;
    }
    .aflc-app .dashboard-nav-item i {
        color: var(--aflc-button-signal-orange);
    }
    .aflc-app .dashboard-nav-item.active i {
        color: #fff;
    }

    /* --- anchor nav hidden on mobile (bottom nav handles navigation) --- */
    .aflc-app .anchor-nav { display: none; }
}

/* ========================================
   260321 broc - sboxApp qualifications plugin
   ======================================== */
.aflc-app .quali-group {
    margin-bottom: 0;
}

.aflc-app .group-header {
    font-size: var(--fs-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-heading);
    padding: 10px 0 5px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
/* 260415 broc - modifier: same header without separator line */
.aflc-app .group-header--noLine {
    border-bottom: 0;
}

/* 260326 broc - same spacing as group-header but no text/border (invisible separator) */
.aflc-app .group-spacer {
    padding: 10px 0 5px;
    margin-bottom: 10px;
}

.aflc-app .quali-row {
    display: flex;
    align-items: center;
    padding: 3px 0;
    gap: 8px;
}

.aflc-app .quali-status {
    flex-shrink: 0;
    font-size: 18px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-1px);
}

.aflc-app .quali-yes {
    color: var(--aflc-sailbox-cyan);
}

.aflc-app .quali-no {
    color: var(--aflc-storm);
}

.aflc-app .quali-row-no .quali-name,
.aflc-app .quali-row-no .quali-date {
    color: var(--aflc-storm);
}

.aflc-app .quali-name {
    flex: 1;
    font-size: 14px;
    color: var(--aflc-charcoal);
}

.aflc-app .quali-date {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--aflc-storm);
}

.aflc-app .quali-expired {
    color: var(--aflc-storm);
    font-style: italic;
}

/* 260322 broc - debug hover for qualifier details */
.aflc-app .quali-has-debug {
    cursor: default;
}

.aflc-app .quali-debug-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.aflc-app .quali-debug-modal {
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 8px;
    max-width: 600px;
    max-height: 80vh;
    width: 90%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.aflc-app .quali-debug-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #333;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.aflc-app .quali-debug-close {
    background: none;
    border: none;
    color: #999;
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
}

.aflc-app .quali-debug-close:hover {
    color: #fff;
}

.aflc-app .quali-debug-content {
    padding: 16px;
    margin: 0;
    overflow: auto;
    font-size: 12px;
    line-height: 1.5;
    font-family: 'Consolas', 'Monaco', monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ========================================
   260323 broc - sboxApp subscriptions plugin
   ======================================== */
.aflc-app .subscr-group {
    margin-bottom: 0;
}


.aflc-app .subscr-row {
    display: flex;
    align-items: center;
    padding: 3px 0;
    gap: 8px;
}

.aflc-app .subscr-status {
    flex-shrink: 0;
    font-size: 18px;
    width: 24px;
    text-align: center;
    transform: translateY(-1px);
}

.aflc-app .subscr-active {
    color: var(--aflc-sailbox-cyan);
}

.aflc-app .subscr-terminated {
    color: var(--aflc-storm);
}

.aflc-app .subscr-limited {
    color: var(--aflc-sailbox-cyan);
    opacity: 0.7;
}

.aflc-app .subscr-expired {
    color: var(--aflc-storm);
}

.aflc-app .subscr-row-expired .subscr-name,
.aflc-app .subscr-row-expired .subscr-date {
    color: var(--aflc-storm);
}

.aflc-app .subscr-name {
    flex: 1;
    font-size: 14px;
    color: var(--aflc-charcoal);
}

.aflc-app .subscr-date {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--aflc-storm);
}

.aflc-app .subscr-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 10px;
}

.aflc-app .subscr-badge-3017 {
    background: var(--aflc-cloud);
    color: var(--aflc-storm);
}

.aflc-app .subscr-badge-3018 {
    background: #e8f4fd;
    color: var(--aflc-sailbox-cyan);
}


/* ==================== DOCUMENTS ==================== */
/* 260323 broc - MyDocuments plugin styles */

.aflc-app .doc-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.aflc-app .doc-message i {
    flex-shrink: 0;
    font-size: 16px;
}

.aflc-app .doc-message-error {
    background: var(--aflc-milk);
    color: var(--aflc-storm);
}

.aflc-app .doc-message-error i {
    color: var(--aflc-storm);
}

.aflc-app .doc-group {
    margin-bottom: 0;
}

/* 260221 broc - replaced by .group-header */

.aflc-app .doc-row {
    display: flex;
    align-items: center;
    padding: 3px 0;
    gap: 8px;
}

.aflc-app .doc-row-clickable {
    cursor: pointer;
}

/* 260327 broc - hover only in upload picker, not on document list rows */
.aflc-app .doc-picker-body .doc-row-clickable {
    border-radius: 6px;
    padding: 6px 8px;
    margin: 0 -8px;
    transition: background 150ms;
}
.aflc-app .doc-picker-body .doc-row-clickable:hover {
    background: var(--aflc-cloud);
}
.aflc-app .doc-picker-body .doc-row-clickable:hover .doc-upload-icon {
    color: var(--aflc-sailbox-cyan);
}

.aflc-app .doc-status {
    flex-shrink: 0;
    font-size: 18px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-1px);
}

.aflc-app .doc-yes {
    color: var(--aflc-sailbox-cyan);
}

.aflc-app .doc-no {
    color: var(--aflc-storm);
}

.aflc-app .doc-row:has(.doc-no) .doc-name {
    color: var(--aflc-storm);
}

.aflc-app .doc-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.aflc-app .doc-name {
    flex: 1;
    font-size: 14px;
    color: var(--aflc-charcoal);
}

.aflc-app .doc-name a {
    color: var(--aflc-charcoal);
    text-decoration: none;
}

.aflc-app .doc-date {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--aflc-storm);
    line-height: 18px;
}

.aflc-app .doc-toggle {
    flex-shrink: 0;
    cursor: pointer;
    padding: 0 8px;
    color: var(--aflc-storm);
    font-size: 12px;
}

.aflc-app .doc-history {
    padding-left: 32px;
    margin-bottom: 8px;
}

.aflc-app .doc-history-row {
    display: flex;
    align-items: baseline;
    padding: 2px 0;
    font-size: 12px;
    color: var(--aflc-storm);
}

.aflc-app .doc-history-date {
    flex-shrink: 0;
    width: 110px;
}

.aflc-app .doc-history-row a {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    color: var(--aflc-storm);
    text-decoration: underline;
}

.aflc-app .doc-upload-trigger {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    background: var(--aflc-sailbox-cyan);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-align: center;
}

.aflc-app .doc-upload-trigger:hover {
    opacity: 0.9;
}

/* 260221 broc - compact upload button (icon only, right-aligned) */
/* 260326 broc - compact add-button teleported into dashboard header */
.aflc-app .doc-header-add {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--aflc-sailbox-cyan);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 200ms;
}

.aflc-app .doc-header-add:hover {
    opacity: 0.9;
}

/* 260326 broc - upload icon in picker rows */
.aflc-app .doc-upload-icon {
    color: var(--aflc-storm);
    font-size: 14px;
}

/* Upload Picker */
.aflc-app .doc-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.aflc-app .doc-picker {
    background: #fff;
    width: 100%;
    max-height: 80vh;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: aflc-doc-slide-up .25s ease-out;
}

@keyframes aflc-doc-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@media (min-width: 768px) {
    .aflc-app .doc-picker-overlay {
        align-items: center;
    }
    .aflc-app .doc-picker {
        max-width: 480px;
        border-radius: 12px;
    }
}

.aflc-app .doc-picker-header {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 12px;
}

.aflc-app .doc-picker-header .dashboard-tile-text {
    flex: 1;
}

.aflc-app .doc-picker-header .doc-picker-close {
    flex-shrink: 0;
}

.aflc-app .doc-picker-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--aflc-storm);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.aflc-app .doc-picker-error {
    padding: 10px 16px;
    font-size: 13px;
    color: #c0392b;
    background: #fdf0ef;
    border-bottom: 1px solid #f5c6cb;
}

.aflc-app .doc-picker-error i {
    margin-right: 4px;
}

.aflc-app .doc-picker-body {
    overflow-y: auto;
    padding: 8px 16px 16px;
}

.aflc-app .doc-picker-intro {
    font-size: 13px;
    color: var(--aflc-storm);
    padding: 4px 0 8px;
}

/* 260326 broc - picker upload icon styling now in main .doc-upload-icon rule above */

.aflc-app .doc-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.aflc-app .doc-picker-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--aflc-storm);
    padding: 12px 16px 4px;
}

.aflc-app .doc-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--aflc-charcoal);
    cursor: pointer;
}

.aflc-app .doc-picker-item:hover {
    background: var(--aflc-cloud);
}

.aflc-app .doc-picker-item-uploading {
    opacity: 0.6;
    pointer-events: none;
}

.aflc-app .doc-picker-success-text {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--aflc-sailbox-cyan);
    font-weight: 600;
}


/* ================================================ */
/* 260323 broc - Invoices Plugin                    */
/* ================================================ */

.aflc-app .invoice-status-hint {
    text-align: center;
    font-size: 13px;
    color: var(--aflc-granit);
    margin: 0 0 12px 0;
    padding: 0;
}


.aflc-app .invoice-card {
    background: var(--aflc-light-blue-25);
    border: 1px solid var(--aflc-light-blue-50);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.aflc-app .invoice-card-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--aflc-charcoal);
}

.aflc-app .invoice-card-label strong {
    font-weight: 700;
}

.aflc-app .invoice-status-open {
    color: var(--aflc-sailbox-cyan);
    font-weight: 700;
}

.aflc-app .invoice-status-overdue {
    color: var(--aflc-red-125);
    font-weight: 700;
}

.aflc-app .invoice-status-payed {
    color: var(--aflc-grass-green);
    font-weight: 700;
}

.aflc-app .invoice-card-actions {
    margin-top: 8px;
}

.aflc-app .invoice-btn-pdf {
    background: var(--aflc-white);
    border: 1px solid var(--aflc-cement);
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--aflc-charcoal);
    cursor: pointer;
}

.aflc-app .invoice-btn-pdf:hover {
    background: var(--aflc-cloud);
}

.aflc-app .invoice-btn-pdf:disabled {
    opacity: 0.4;
    cursor: default;
}

.aflc-app .invoice-btn-pdf i {
    margin-right: 4px;
}

/* -- Compact Card Variant -- */

.aflc-app .invoice-compact {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--aflc-white);
    border: 1px solid var(--aflc-cloud);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 8px;
}

.aflc-app .invoice-compact-icon {
    flex-shrink: 0;
    width: 24px;
    font-size: 18px;
    text-align: center;
    line-height: 21px;
}

.aflc-app .invoice-compact-icon-open { color: var(--aflc-sailbox-cyan); }
.aflc-app .invoice-compact-icon-overdue { color: var(--aflc-red-125); }
/* 260326 broc - payed icon matches the green status label */
.aflc-app .invoice-compact-icon-payed { color: var(--aflc-grass-green); }

/* 260326 broc - subtle green tint on payed invoice cards */
.aflc-app .invoice-compact:has(.invoice-compact-icon-payed) {
    background: rgba(76, 175, 80, 0.06);
}

.aflc-app .invoice-compact-body {
    flex: 1;
    min-width: 0;
}

.aflc-app .invoice-compact-main {
    font-size: 15px;
    font-weight: 700;
    color: var(--aflc-charcoal);
    line-height: 1.3;
}

.aflc-app .invoice-compact-meta {
    font-size: 12px;
    color: var(--aflc-metal);
    margin-top: 3px;
    line-height: 1.2;
    white-space: nowrap;
}

.aflc-app .invoice-compact-status {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    text-align: right;
    line-height: 21px;
}

.aflc-app .invoice-compact-pdf {
    flex-shrink: 0;
    background: var(--aflc-white);
    border: 1px solid var(--aflc-cement);
    border-radius: 5px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--aflc-iron);
    cursor: pointer;
    letter-spacing: 0.3px;
    line-height: 13px;
}

.aflc-app .invoice-compact-pdf:hover {
    background: var(--aflc-cloud);
}

.aflc-app .invoice-compact-pdf:disabled {
    opacity: 0.4;
    cursor: default;
}


/* ========================================
   260324 broc - Profile Plugin
   ======================================== */

.aflc-app .profile {
    padding: 0 16px;
}

/* 260415 broc - sections now use .content-card (was .profile-section) */

/* Fields */
.aflc-app .profile-field {
    margin-bottom: 12px;
}
.aflc-app .profile-field:last-child {
    margin-bottom: 0;
}

.aflc-app .profile-field label {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 16px;
    /* font-weight: 500; */
    color: var(--aflc-graphite);
    /* color: var(--aflc-storm); */
    margin-bottom: 0;
}

/* Inputs: use standard form-control sizing, own border style */
.aflc-app .profile-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    font-family: 'Livvic', sans-serif;
    font-size: 19px;
    line-height: 1.5;
    color: var(--aflc-charcoal, #212121);
    background: #fff;
    border: 1px solid var(--aflc-cloud, #e5e5e5);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.15s;
}
.aflc-app .profile-input:focus {
    border-color: var(--accent);
}
.aflc-app .profile-input::placeholder {
    font-family: 'Livvic', sans-serif;
    color: var(--aflc-storm, #a8a8a8);
}

/* 260407 broc - 3-segment date input */
/* minmax so Tag/Jahr may shrink before "Monat" gets squeezed - the placeholder
   needs ~57px plus 26px chrome, below that it is silently cut off */
.aflc-app .date-input {
    display: grid;
    grid-template-columns: minmax(58px, 65px) minmax(84px, 1fr) minmax(72px, 80px);
    gap: 8px;
    align-items: center;
}

.aflc-app .date-input.has-calendar {
    grid-template-columns: minmax(58px, 65px) minmax(84px, 1fr) minmax(72px, 80px) auto;
}

/* full row width up to 720px: at 481-720px the pair was still two columns and
   squeezed the date input to ~190px, leaving 4px for the month placeholder */
@media (max-width: 720px) {
    .aflc-app .profile-field-pair:has(.date-input) {
        grid-template-columns: 1fr;
    }
}
.aflc-app .date-month {
    min-width: 0;
    width: 100%;
}
.aflc-app .date-month .profile-input {
    width: 100%;
}
.aflc-app .date-month .profile-country-dropdown {
    max-height: 220px;
    overflow-y: auto;
}

/* Select styling */
select.profile-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    cursor: pointer;
}

/* Field pairs */
.aflc-app .profile-field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.aflc-app .profile-field-pair:last-child {
    margin-bottom: 0;
}
.aflc-app .profile-field-pair .profile-field {
    margin-bottom: 0;
    min-width: 0;
}

/* Strasse (wide) + Nr (narrow) */
.aflc-app .profile-field-pair-wide-left {
    grid-template-columns: 3fr 1fr;
}
/* PLZ (narrow) + Ort (wide) */
.aflc-app .profile-field-pair-narrow-left {
    grid-template-columns: 120px 1fr;
}

/* Dirty field highlight */
.aflc-app .profile-field-dirty {
    border-left: 3px solid var(--aflc-sailbox-cyan, #00b4d8);
    padding-left: 8px;
    border-radius: 2px;
}

/* Shared field icons — small filled dot, aligned to label cap-line. 3px between icons; first icon gets 8px from label-text */
.aflc-app .icon-mandatory,
.aflc-app .icon-visibleForMembers {
    font-size: 5px;
    align-self: flex-start;
    margin-top: 9px;     /* pushes dot down from line-box top to text cap-line (label line-height ~18px, cap ~9px) */
    margin-left: 3px;    /* default cluster spacing between consecutive icons */
    cursor: default;
}
.aflc-app .profile-field label > .icon-mandatory:first-of-type,
.aflc-app .profile-field label > .icon-visibleForMembers:first-of-type {
    margin-left: 8px;    /* first icon: bigger gap from label text */
}
.aflc-app .icon-mandatory       { color: var(--accent); }
.aflc-app .icon-visibleForMembers { color: var(--aflc-signal-red); }

/* Validation error — red border on inputs within error-wrapped fields */
.aflc-app .profile-field-error .profile-input,
.aflc-app .profile-field-error .iti input {
    border-color: var(--aflc-signal-red) !important;
}
.aflc-app .profile-field-error .profile-input:focus,
.aflc-app .profile-field-error .iti input:focus {
    border-color: var(--aflc-signal-red) !important;
    box-shadow: 0 0 0 2px rgba(235, 0, 0, 0.1);
}

/* Error message text below input */
.aflc-app .profile-field-error .field-error {
    display: block;
    font-size: 12px;
    color: var(--aflc-signal-red);
    margin-top: 4px;
}

/* 260330 broc - hint text below input */
.field-hint {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

/* Messages */
.aflc-app .profile-message {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 16px;
    margin-bottom: 16px;
}
.aflc-app .profile-message-error {
    background: #fef2f2;
    color: var(--aflc-signal-red);
    border: 1px solid #fecaca;
}
.aflc-app .profile-message-success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* Legend */
.aflc-app .profile-legend {
    padding: 12px 0;
    font-size: 16px;
    color: var(--aflc-text-muted, #888);
    border-top: 1px solid var(--aflc-cloud, #e5e5e5);
}
/* 260415 broc - legend is inline flow, not flex: reset shared icon flex margins and align with text midline */
.aflc-app .profile-legend .icon-mandatory,
.aflc-app .profile-legend .icon-visibleForMembers {
    margin-top: -10px;
    vertical-align: middle;
}

/* Actions */
.aflc-app .profile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid var(--aflc-cloud, #e5e5e5);
}
.aflc-app .profile-actions-error {
    margin-right: auto;
    font-size: 12px;
    color: var(--aflc-signal-red);
}

/* 260329 broc - save result feedback below actions */
.aflc-app .save-result {
    text-align: right;
    font-size: 13px;
    padding: 6px 0 0;
}
.aflc-app .save-result--success { color: #16a34a; }
.aflc-app .save-result--error   { color: var(--aflc-signal-red); }

/* 260329 broc - animated saving dots (fill up: . .. ... pause, repeat) */
.aflc-app .saving-dots span { visibility: hidden; }
.aflc-app .saving-dots span:nth-child(1) { animation: aflc-dot1 1.6s steps(1) infinite; }
.aflc-app .saving-dots span:nth-child(2) { animation: aflc-dot2 1.6s steps(1) infinite; }
.aflc-app .saving-dots span:nth-child(3) { animation: aflc-dot3 1.6s steps(1) infinite; }
@keyframes aflc-dot1 { 0% { visibility: visible; } 75%, 100% { visibility: hidden; } }
@keyframes aflc-dot2 { 0%, 25% { visibility: hidden; } 25.01% { visibility: visible; } 75%, 100% { visibility: hidden; } }
@keyframes aflc-dot3 { 0%, 50% { visibility: hidden; } 50.01% { visibility: visible; } 75%, 100% { visibility: hidden; } }

/* Buttons: matches booking-btn standard */
.aflc-app .profile .profile-btn,
.aflc-app .intervision-actions .profile-btn,
.aflc-app .casedossier-form .profile-btn {
    font-size: var(--fs-meta);
    font-weight: 500;
    padding: 10px 24px;
    line-height: 1.4;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--aflc-button-signal-orange);
    color: var(--aflc-button-signal-orange);
    background: var(--surface);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms;
}
.aflc-app .profile .profile-btn:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

/* navy filled (primary/save) */
.aflc-app .profile .profile-btn-primary,
.aflc-app .intervision-actions .profile-btn-primary,
.aflc-app .casedossier-form .profile-btn-primary {
    background: var(--aflc-button-signal-orange);
    color: #fff;
    border-color: var(--aflc-button-signal-orange);
}

.aflc-app .profile .profile-btn-primary:hover:not(:disabled),
.aflc-app .intervision-actions .profile-btn-primary:hover:not(:disabled),
.aflc-app .casedossier-form .profile-btn-primary:hover:not(:disabled) {
    background: var(--aflc-button-signal-orange-hover);
    border-color: var(--aflc-button-signal-orange-hover);
}

/* ghost/cancel — neutral outline, identical to .cancel-btn-back in the modals */
.aflc-app .profile .profile-btn-ghost,
.aflc-app .intervision-actions .profile-btn-ghost,
.aflc-app .casedossier-form .profile-btn-ghost {
    background: var(--surface);
    color: var(--ink-2);
    border-color: var(--border);
}
.aflc-app .profile .profile-btn-ghost:hover:not(:disabled),
.aflc-app .intervision-actions .profile-btn-ghost:hover:not(:disabled),
.aflc-app .casedossier-form .profile-btn-ghost:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--ink-2);
}

/* Country select */
.aflc-app .profile-country-select {
    position: relative;
    cursor: pointer;
}

.aflc-app .profile-country-select .profile-input {
    cursor: pointer;
}
.aflc-app .profile-country-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    color: #6b6b6b;
    pointer-events: none;
    transition: transform 0.15s;
}
.aflc-app .profile-country-chevron.open {
    transform: translateY(-50%) rotate(180deg);
}
.aflc-app .profile-country-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--aflc-cloud, #e0e0e0);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 999;
    margin-top: 2px;
}
.aflc-app .profile-country-option {
    padding: 8px 10px;
    font-size: 19px;
    cursor: pointer;
}
.aflc-app .profile-country-option:hover {
    background: #f5f5f5;
}
.aflc-app .profile-country-option.active {
    background: var(--aflc-cloud, #e5e5e5);
    font-weight: 500;
}

/* intlTelInput: match aflc-profile-input style */
.aflc-app .profile-field .iti {
    width: 100%;
}
.aflc-app .profile-field .iti input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px 10px 52px;
    font-size: 19px;
    line-height: 1.5;
    color: var(--aflc-charcoal, #212121);
    border: 1px solid var(--aflc-cloud, #e5e5e5);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.15s;
}
.aflc-app .profile-field .iti input:focus {
    border-color: var(--aflc-sailbox-cyan, #009cdc);
}

/* Email confirm slide-in */
.aflc-app .profile-email-confirm {
    margin-top: 8px;
}

/* Loading */
.aflc-app .profile-loading {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

/* Mobile: only name pair breaks to single column, address pairs stay */
@media (max-width: 380px) {
    .aflc-app .profile-field-pair {
        grid-template-columns: 1fr;
    }
    /* Strasse/Nr and PLZ/Ort stay side-by-side even on mobile */
    .aflc-app .profile-field-pair-wide-left {
        grid-template-columns: 3fr 1fr;
    }
    .aflc-app .profile-field-pair-narrow-left {
        grid-template-columns: 100px 1fr;
    }
}

/* ====================================================================
   260414 broc - Portrait plugin (ProfileImage + About + Interests + Palmares)
   Reuses: .content-card, .group-header, .profile-actions,
           .profile-input (from Profile plugin above)
   ==================================================================== */

/* ---- ProfileImage (shared, autonomous upload/delete) ---- */
/* 260414 broc - match header's .isLoggedIn #header .header-profile-img exactly:
   circle, cover-crop, centered. Without these the portrait container shows a square image. */
.aflc-app .profile-image {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    overflow: visible;                  /* keep action badges visible outside the circle */
}
.aflc-app .profile-image-large { width: 60px; height: 60px; } /* 260414 broc - match header size */
.aflc-app .profile-image-small { width: 35px; height: 35px; }

.aflc-app .profile-image-bg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #eef2f7;
    border: 1px solid var(--aflc-cloud, #e5e5e5);
}
.aflc-app .profile-image.no-image .profile-image-bg {
    background-image: none;
}

.aflc-app .profile-image-upload,
.aflc-app .profile-image-delete {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--aflc-cloud, #e5e5e5);
    background: #fff;
    color: var(--aflc-ink, #333);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    transition: background-color 0.15s, color 0.15s;
}
.aflc-app .profile-image-upload { bottom: 0; right: 0; }
.aflc-app .profile-image-delete { top: 0;    right: 0; }

.aflc-app .profile-image-upload:hover:not(:disabled) {
    background: var(--aflc-primary, #1e6091);
    color: #fff;
}
.aflc-app .profile-image-delete:hover:not(:disabled) {
    background: #dc2626;
    color: #fff;
}
.aflc-app .profile-image-upload:disabled,
.aflc-app .profile-image-delete:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* small variant: smaller buttons so they fit the 35px avatar */
.aflc-app .profile-image-small .profile-image-upload,
.aflc-app .profile-image-small .profile-image-delete {
    width: 18px;
    height: 18px;
    font-size: 10px;
}

/* Error flash on upload failure */
.aflc-app .profile-image.upload-error-flash .profile-image-bg {
    animation: aflc-profile-image-error-flash 1.5s ease-out;
}
@keyframes aflc-profile-image-error-flash {
    0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
    15%     { box-shadow: 0 0 0 4px rgba(220,38,38,0.7); }
    50%     { box-shadow: 0 0 0 4px rgba(220,38,38,0.3); }
}

/* ---- Portrait-scope overrides: re-tint the header markup for the light portrait background.
       Header markup uses .isLoggedIn .header-profile-upload (dark-BG colors from modulpark_ind.css).
       In Portrait we override color/border/bg so the silhouette + dashed ring are visible on white. ---- */
.aflc-app .profile-image .header-profile-upload {
    background: rgba(0, 0, 0, 0.04);
    border: 2px dashed rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.45);
}
.aflc-app .profile-image .header-profile-upload:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.35);
    color: var(--aflc-primary, #1e6091);
}
/* Plus-badge inside the placeholder button (no-image state): white ring + hover-only in Portrait */
.aflc-app .profile-image .header-profile-upload .header-profile-upload-badge {
    border: 2px solid #fff;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.aflc-app .profile-image:hover .header-profile-upload .header-profile-upload-badge {
    opacity: 1;
}

/* ---- has-image action badges (Portrait only — rendered by factory when onConfirmDelete is set) ---- */
.aflc-app .profile-image-action {
    /* Shared layout — same shape/size as .header-profile-upload-badge, positioned on container corners */
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 2;
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.aflc-app .profile-image-action svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}
.aflc-app .profile-image-action:hover { transform: scale(1.08); }

.aflc-app .profile-image-action-upload {
    background: var(--aflc-sailbox-cyan, #009cdc);
    color: #fff;
    bottom: -2px;
    right: -2px;
    opacity: 0;                      /* hidden by default (Portrait only — hover-only) */
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
.aflc-app .profile-image:hover .profile-image-action-upload {
    opacity: 1;                      /* reveal on hover */
}
.aflc-app .profile-image-action-delete {
    background: #fff;                /* white fill */
    border: 1.5px solid #dc2626;     /* red outline */
    color: #dc2626;                  /* red minus icon */
    box-shadow: none;
    bottom: -2px;
    left: -2px;
    opacity: 0;                      /* hidden by default */
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.aflc-app .profile-image:hover .profile-image-action-delete {
    opacity: 1;                      /* reveal on hover */
}
.aflc-app .profile-image-action-delete:hover {
    color: #b91c1c;
    border-color: #b91c1c;
    background: #fff;
}

/* ---- Inline confirm popover (no overlay, no modal) ---- */
.aflc-app .profile-image-wrap {
    position: relative;
    display: inline-block;
}
.aflc-app .profile-image-confirm {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    background: #fff;
    border: 1px solid var(--aflc-cloud, #e5e5e5);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
    z-index: 10;
    font-size: 13px;
}
.aflc-app .profile-image-confirm::before {
    /* Little arrow pointing up at the image */
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1px solid var(--aflc-cloud, #e5e5e5);
    border-top: 1px solid var(--aflc-cloud, #e5e5e5);
}
.aflc-app .profile-image-confirm-text {
    color: var(--aflc-ink, #333);
    line-height: 1.3;
}
.aflc-app .profile-image-confirm-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.aflc-app .profile-image-confirm-btn {
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid var(--aflc-cloud, #e5e5e5);
    background: #fff;
    color: var(--aflc-ink, #333);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.aflc-app .profile-image-confirm-yes {
    background: var(--aflc-sailbox-cyan, #009cdc);
    border-color: var(--aflc-sailbox-cyan, #009cdc);
    color: #fff;
}
.aflc-app .profile-image-confirm-yes:hover {
    background: #0086bd;
    border-color: #0086bd;
}
.aflc-app .profile-image-confirm-no:hover {
    background: var(--aflc-cloud, #e5e5e5);
}

/* ---- Textarea (FormField type="textarea") ---- */
.aflc-app .profile-textarea {
    min-height: 96px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
}
/* Custom resize grip: 3 diagonal strokes instead of the grey Windows default block */
.aflc-app .profile-textarea::-webkit-resizer {
    background-color: transparent;
    background-image: linear-gradient(
        135deg,
        transparent 0 45%,
        #bbb 45% 50%,
        transparent 50% 60%,
        #bbb 60% 65%,
        transparent 65% 75%,
        #bbb 75% 80%,
        transparent 80%
    );
    background-repeat: no-repeat;
    border-bottom-right-radius: 4px;
}

/* ---- Palmares (repeater) ---- */
.aflc-app .portrait-palmares {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.aflc-app .portrait-palmares-empty {
    color: var(--aflc-muted, #6b7280);
    font-style: italic;
    font-size: 13px;
    padding: 6px 0;
}
.aflc-app .portrait-palmares-item {
    display: grid;
    grid-template-columns: 100px 1fr 32px;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--aflc-cloud, #e5e5e5);
}
/* Last palmares item (followed by the add-row) has no bottom border */
.aflc-app .portrait-palmares-item:has(+ .portrait-palmares-add) {
    border-bottom: none;
}
.aflc-app .portrait-palmares-date {
    color: var(--aflc-muted, #6b7280);
    font-variant-numeric: tabular-nums;
    font-size: 0.9em;
}
.aflc-app .portrait-palmares-text {
    word-break: break-word;
}
.aflc-app .portrait-palmares-del {
    width: 20px;
    height: 20px;
    border: 1px solid var(--aflc-cloud, #e5e5e5);
    background: transparent;
    color: #ccc;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    position: relative;
    transition: color 0.15s, border-color 0.15s;
}
/* Extend hit target to 44x44 (WCAG) without changing visual button size */
.aflc-app .portrait-palmares-del::before {
    content: '';
    position: absolute;
    inset: -8px;
}
.aflc-app .portrait-palmares-item:hover .portrait-palmares-del {
    color: #dc2626;
    border-color: #dc2626;
}
.aflc-app .portrait-palmares-item .portrait-palmares-del:hover {
    border-color: #dc2626;
}
.aflc-app .portrait-palmares-add {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    align-items: center;
}
.aflc-app .portrait-palmares-add .profile-input {
    flex: 1;
}
.aflc-app .portrait-palmares-plus {
    width: 44px;
    height: 44px;
    border: 1px solid var(--aflc-sailbox-cyan, #2AABB3);
    background: var(--aflc-sailbox-cyan, #2AABB3);
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s, border-color 0.15s;
}
.aflc-app .portrait-palmares-plus:hover:not(:disabled) {
    background: #239aa1;
    border-color: #239aa1;
}
.aflc-app .portrait-palmares-plus:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Interests (3 checkbox groups) ---- */
.aflc-app .portrait-interests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px 12px;
    margin-bottom: 8px;
}
.aflc-app .portrait-interests-item {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}
/* Custom checkbox: hide native input, show styled box with check-icon */
.aflc-app .portrait-interests-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.aflc-app .portrait-interests-check {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1.5px solid #ccc;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    font-size: 11px;
    color: #fff;
    margin-top: -1px;
}
.aflc-app .portrait-interests-check .fa {
    opacity: 0;
    transition: opacity 0.1s;
}
.aflc-app .portrait-interests-input:checked + .portrait-interests-check {
    background: var(--aflc-sailbox-cyan, #2AABB3);
    border-color: var(--aflc-sailbox-cyan, #2AABB3);
}
.aflc-app .portrait-interests-input:checked + .portrait-interests-check .fa {
    opacity: 1;
}
.aflc-app .portrait-interests-item:hover .portrait-interests-check {
    border-color: var(--aflc-sailbox-cyan, #2AABB3);
}

/* ====================================================================
   260414 broc - selfAssessment plugin (dashboard-style redesign)
   Reuses: .content-card, .group-header, .profile-actions,
           .profile-btn*, .profile-loading
   Own: legend grid, skill cards with click-rating buttons
   ==================================================================== */

/* --- Intro block (Box 1, v-html content from translation) --- */
.aflc-app .selfassessment-intro p {
    margin: 8px 0;
    line-height: 1.5;
}
.aflc-app .selfassessment-intro p:first-child {
    margin-top: 0;
}
.aflc-app .selfassessment-intro p:last-child {
    margin-bottom: 0;
}

/* --- Legend grid (Box 2): 4 cells, number + label + range --- */
.aflc-app .selfassessment-legend {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 4px;
}
.aflc-app .selfassessment-legend-item {
    padding: 12px 10px;
    border-radius: 8px;
    background: var(--aflc-bg-soft, #f5f5f5);
    border: 1px solid var(--aflc-cloud, #eee);
    text-align: center;
}
.aflc-app .selfassessment-legend-n {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--aflc-sailbox-cyan, #2AABB3);
    margin-bottom: 2px;
}
.aflc-app .selfassessment-legend-label {
    display: block;
    font-size: 12px;
    color: var(--aflc-muted, #666);
    line-height: 1.35;
}
.aflc-app .selfassessment-legend-range {
    display: block;
    font-size: 11px;
    color: #aaa;
    margin-top: 3px;
}

/* --- Skill card list (Box 3) --- */
.aflc-app .selfassessment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.aflc-app .selfassessment-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    transition: border-color .15s, box-shadow .15s;
}
.aflc-app .selfassessment-card:hover {
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .08);
}
.aflc-app .selfassessment-card-content {
    flex: 1 1 auto;
}
.aflc-app .selfassessment-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
}
.aflc-app .selfassessment-card-desc {
    font-size: 13px;
    color: #777;
    line-height: 1.55;
}

/* --- Rating buttons --- */
.aflc-app .selfassessment-rating {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
    margin-top: 2px;
}
.aflc-app .selfassessment-rating-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1.5px solid #ddd;
    background: #fff;
    color: #999;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    font-family: inherit;
    padding: 0;
}
.aflc-app .selfassessment-rating-btn:not(.selfassessment-rating-btn--ok):not(.selfassessment-rating-btn--lo):hover {
    background: #f4f4f4;
    border-color: #bbb;
    color: #666;
}
.aflc-app .selfassessment-rating-btn--ok {
    background: var(--aflc-sailbox-cyan, #2AABB3);
    color: #fff;
    border-color: var(--aflc-sailbox-cyan, #2AABB3);
}
.aflc-app .selfassessment-rating-btn--lo {
    background: #E8943A;
    color: #fff;
    border-color: #E8943A;
}

/* --- Lastmodified line (Box 3 footer) --- */
.aflc-app .selfassessment-lastmodified {
    color: var(--aflc-muted, #6b7280);
    font-style: italic;
    font-size: 12px;
    margin-top: 12px;
    margin-bottom: 0;
}

/* --- Override .profile's 0 16px padding: container padding belongs on aflc-plugin-box (uniform across plugins) --- */
.aflc-app .selfassessment.profile,
.aflc-app .portrait.profile {
    padding: 0;
}

/* --- Mobile: tighter L/R padding on inner cards, legend 2-cols, card stacks --- */
@media (max-width: 520px) {
    .aflc-app .selfassessment .content-card {
        padding: 16px 12px;
    }
    .aflc-app .selfassessment-legend {
        grid-template-columns: repeat(2, 1fr);
    }
    .aflc-app .selfassessment-card {
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }
    .aflc-app .selfassessment-rating {
        align-self: flex-start;
    }
}

/* ===========================
   Change Password / Email
   =========================== */
.aflc-app .password {
    padding: 0 16px;
}

.aflc-app .password-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 22px 24px 24px;
    margin-top: 20px;
}
.aflc-app .password-section > .group-header:first-child {
    margin: -22px -24px 16px;
    padding: 16px 24px 12px;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.aflc-app .password .profile-actions {
    border-top: none;
}

/* 260330 broc - removed: aflc-password-section-label, aflc-password-field, aflc-password-input,
 * aflc-password-message, aflc-password-actions, aflc-password-btn, aflc-password-loading
 * replaced by shared aflc-profile-* classes (FormField, SailboxSaveButton etc.) */

/* ====================================================================
   260329 broc - Toast / Snackbar
   Mobile: full-width above nav bar (bottom: 70px + safe-area)
   Desktop: centered, fixed width
   Style: matches aflc-plugin-box (white card, subtle shadow, colored left border)
   ==================================================================== */
.aflc-app .toast-container {
    position: fixed;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    z-index: 99998;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.aflc-app .toast {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .08);
    border-left: 4px solid var(--aflc-granit);
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
}
.aflc-app .toast--success { border-left-color: var(--aflc-signal-green); color: #16a34a; }
.aflc-app .toast--error   { border-left-color: var(--aflc-signal-red);   color: var(--aflc-signal-red); }
.aflc-app .toast--warning { border-left-color: var(--aflc-signal-orange); color: var(--aflc-signal-orange); }
.aflc-app .toast--info    { border-left-color: var(--aflc-sailbox-cyan); color: var(--aflc-charcoal); }

.aflc-app .toast-message {
    flex: 1;
    min-width: 0;
}
.aflc-app .toast-close {
    background: none;
    border: none;
    color: var(--aflc-granit);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: .5;
    padding: 0 0 0 4px;
    flex-shrink: 0;
    transition: opacity 200ms;
}
.aflc-app .toast-close:hover { opacity: 1; }

/* Desktop: centered fixed width, no nav offset */
@media (min-width: 768px) {
    .aflc-app .toast-container {
        bottom: 24px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 400px;
    }
}

/* Transition */
.aflc-app .toast-enter-active { transition: opacity 300ms ease, transform 300ms ease; }
.aflc-app .toast-leave-active { transition: opacity 200ms ease, transform 200ms ease; }
.aflc-app .toast-enter-from   { opacity: 0; transform: translateY(20px); }
.aflc-app .toast-leave-to     { opacity: 0; transform: translateY(20px); }
.aflc-app .toast-move         { transition: transform 300ms ease; }


/* ============================================================
   260407 broc - EMAIL VERIFICATION MODAL
   Teleported to body — self-contained, --aflc-* CSS vars
   ============================================================ */

.email-verify-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    font-family: Arial, Helvetica, sans-serif;
}

.email-verify-modal {
    position: relative;
    background: var(--aflc-white, #fff);
    border-radius: 12px;
    padding: 32px;
    max-width: 400px;
    width: 92%;
    color: var(--aflc-charcoal, #212121);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
}

/* Close X */
.email-verify-close {
    position: absolute;
    top: 16px;
    right: 18px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--aflc-storm, #a8a8a8);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color .15s;
}
.email-verify-close:hover {
    color: var(--aflc-charcoal, #212121);
}

/* Header */
.email-verify-modal h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--aflc-dark-navy, #0e2048);
    margin: 0 0 6px;
}
.email-verify-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--aflc-charcoal, #212121);
    margin: 0 0 20px;
}

/* ---- Sent-to box ---- */
.email-verify-sent-box {
    background: var(--aflc-milk, #f6f6f6);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 24px;
}

/* Display mode: label + email + Ändern in one row */
.email-verify-sent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.email-verify-sent-info {
    min-width: 0;
}
.email-verify-sent-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--aflc-granit, #686868);
    margin-bottom: 2px;
}
.email-verify-sent-email {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--aflc-dark-navy, #0e2048);
    word-break: break-all;
}

/* Edit mode inside sent-box */
.email-verify-edit-field {
    margin-bottom: 10px;
}
.email-verify-edit-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--aflc-granit, #686868);
    margin-bottom: 4px;
}
.email-verify-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--aflc-charcoal, #212121);
    background: var(--aflc-white, #fff);
    border: 1px solid var(--aflc-cloud, #e5e5e5);
    border-radius: 4px;
    outline: none;
    transition: border-color .15s;
}
.email-verify-input:focus {
    border-color: var(--aflc-sailbox-cyan, #009cdc);
}
.email-verify-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

/* ---- Code section ---- */
.email-verify-code-section {
    margin-bottom: 16px;
}
.email-verify-code-section h6 {
    font-size: 0.9rem;
    margin: 0 0 10px;
}

/* OTP inputs */
.email-verify-otp {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.email-verify-otp-input {
    width: 48px;
    height: 52px;
    border: 1px solid var(--aflc-cloud, #e5e5e5);
    border-radius: 8px;
    font-size: 24px;
    text-align: center;
    color: var(--aflc-dark-navy, #0e2048);
    background: var(--aflc-white, #fff);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    -moz-appearance: textfield;
    appearance: textfield;
}
.email-verify-otp-input::-webkit-outer-spin-button,
.email-verify-otp-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.email-verify-otp-input:focus {
    border-color: var(--aflc-sailbox-cyan, #009cdc);
    box-shadow: 0 0 0 2px var(--aflc-light-blue-50, #c8e1f5);
}
.email-verify-otp-input:disabled {
    background: var(--aflc-milk, #f6f6f6);
    color: var(--aflc-storm, #a8a8a8);
}

.email-verify-resend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.email-verify-resend-text {
    font-size: 13px;
    color: var(--aflc-storm);
}

/* ---- Shared: link button ---- */
.email-verify-link-btn {
    background: none;
    border: none;
    color: var(--aflc-sailbox-cyan, #009cdc);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 0;
    text-decoration: none;
    transition: color .15s;
    white-space: nowrap;
}
.email-verify-link-btn:hover {
    color: var(--aflc-sky-blue, #005a9c);
    text-decoration: underline;
}
.email-verify-link-btn:disabled {
    color: var(--aflc-storm, #a8a8a8);
    cursor: default;
    text-decoration: none;
}

/* ---- Button: exact match of .aflc-app .profile .profile-btn-primary ---- */
.email-verify-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 7px 18px;
    line-height: 1.4;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--aflc-button-signal-orange);
    background: var(--aflc-button-signal-orange);
    color: var(--aflc-white);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.email-verify-btn:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    cursor: pointer;
}
.email-verify-btn-full {
    display: flex;
    width: 100%;
    margin-top: 20px;
    padding: 10px 18px;
    font-size: 14px;
}

/* Inline info (replaces resend row temporarily) */
.email-verify-inline-info {
    font-size: 13px;
    color: var(--aflc-grass-green);
    font-weight: 500;
}

/* ---- Status messages ---- */
.email-verify-error {
    text-align: center;
    color: var(--aflc-signal-red);
    font-size: 13px;
    margin-top: 8px;
}
/* Cancel link under confirm button */
.email-verify-cancel-row {
    text-align: left;
    /*margin-top: 12px;*/
}
.email-verify-cancel-link {
    background: none;
    border: none;
    color: var(--aflc-storm);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: none;
}
.email-verify-cancel-link:hover {
    text-decoration: underline;
}

/* ---- Success state ---- */
.email-verify-success-box {
    text-align: center;
    padding: 24px 0 8px;
}
.email-verify-success-icon {
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    background: var(--aflc-grass-green);
    color: var(--aflc-white, #fff);
    font-size: 24px;
    margin: 0 auto 14px;
}
.email-verify-success-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--aflc-dark-navy, #0e2048);
    margin-bottom: 6px;
}
.email-verify-success-email {
    font-size: 14px;
    color: var(--aflc-granit, #686868);
    font-weight: 600;
}

/* ========================================
   Toast notifications
   ======================================== */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    /* above the app modals ( 99999 ), same as toastr */
    z-index: 999999;
}
.extp-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 200px;
    max-width: 360px;
    margin-top: 10px;
    padding: 12px 16px;
    border-radius: 6px;
    color: #fff;
    font-family: sans-serif;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    opacity: 0.95;
    transform: translateX(100%);
    transition: transform 0.3s ease, opacity 0.5s;
}
.extp-toast.show { transform: translateX(0); }
.extp-toast.hide { opacity: 0; }
.extp-toast--success { background-color: var(--green, #28a745); }
.extp-toast--error   { background-color: #dc3545; }
.extp-toast--warning { background-color: #ffc107; }
.extp-toast--info    { background-color: #17a2b8; }
.extp-toast .toast-close {
    flex-shrink: 0;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    opacity: 0.7;
    margin-left: auto;
}
.extp-toast .toast-close:hover { opacity: 1; }

.btn-toast-test { display: none; }
#learncoachingApp.sbox-theme-toasttest-visible .btn-toast-test {
    display: inline-block;
    font-family: 'Livvic', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 14px;
    border: 1px dashed var(--aflc-granit, #686868);
    background: transparent;
    color: var(--aflc-granit, #686868);
    cursor: pointer;
    transition: all 200ms;
}
#learncoachingApp.sbox-theme-toasttest-visible .btn-toast-test:hover {
    background: var(--aflc-milk, #f6f6f6);
    border-style: solid;
}

/* ====================================================================
   260521 broc - Login Modal Redesign (match app style)
   ==================================================================== */

/* Header top bar: cart + login on same line */
.header_bar .top-address-bar .flex-wrap.mpg-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
.header_bar .aShowCart {
    display: inline-flex;
    align-items: center;
    position: relative;
}
.aflc-cart-icon {
    stroke: var(--aflc-button-signal-orange, #ec6a23);
}
.collection-plugin .aShowCart sup {
    font-size: 10px !important;
    height: 16px;
    width: 16px;
    top: -5px;
    left: -6px;
}

/* Login trigger icon in header */
.mpg-loginVue .loginIconText .aflc-login-icon,
.mpg-login .loginIconText .aflc-login-icon {
    stroke: var(--aflc-button-signal-orange, #ec6a23);
}
.mpg-loginVue .loginIconText,
.mpg-login .loginIconText {
    font-family: 'Livvic', sans-serif;
    font-size: 16px;
    color: var(--aflc-charcoal, #212121);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 18px;
}
.mpg-login .dropdown {
    top: -3px !important;
}

/* Hide mobile navigation */
#navMobile {
    display: none !important;
}

/* Dropdown container: narrower without registration panel */
.mpg-loginVue .mp-widget-content .dropdown .dropdown-menu {
    width: 400px;
}

/* Padding inside modal */
.mpg-loginVue .mp-widget-content .dropdown .dropdown-menu .dropdown-content-wrapper.mp-dropdown-login {
    padding: 24px !important;
}

/* Headings */
.mpg-loginVue .mp-dropdown-login h3,
.mpg-loginVue .dropdown-content-wrapper.mp-dropdown-login h3,
.mpg-login .mp-dropdown-login h3 {
    font-family: 'Livvic', sans-serif;
    font-size: 22px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--aflc-button-signal-orange, #ec6a23) !important;
    margin-top: 0 !important;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--aflc-cloud, #e5e5e5);
}

/* Form groups */
.mpg-loginVue .dropdown .form-group {
    padding-bottom: 12px;
}
.mpg-loginVue .dropdown .form-group label {
    display: block;
    font-family: 'Livvic', sans-serif;
    font-size: 13px;
    color: var(--aflc-graphite, #b7b7b7);
    margin-bottom: 2px;
}

/* Inputs */
.mpg-loginVue .mp-widget-content .dropdown .dropdown-menu input[type="text"],
.mpg-loginVue .mp-widget-content .dropdown .dropdown-menu input[type="password"],
.mpg-loginVue .mp-widget-content .dropdown .dropdown-menu input[type="email"],
.mpg-loginVue .dropdown .form-group input.form-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    height: 44px;
    padding: 10px 12px;
    font-family: 'Livvic', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: var(--aflc-charcoal, #212121);
    background: #fff;
    border: 1px solid var(--aflc-cloud, #e5e5e5) !important;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.15s;
    box-shadow: none !important;
}
.mpg-loginVue .dropdown .form-group input.form-control:focus {
    border-color: var(--accent, #e8823a) !important;
    box-shadow: none !important;
}
.mpg-loginVue .dropdown .form-group input.form-control::placeholder {
    font-family: 'Livvic', sans-serif;
    color: var(--aflc-storm, #a8a8a8);
}

/* Primary buttons (Login, Save, Submit)
   Values mirror .aflc-app .profile .profile-btn + .profile-btn-primary (l. 8965 / 8990).
   16px is --fs-meta written out: that token lives on .aflc-app, and the login widget
   sits outside it.
   #wrapper on purpose: #wrapper .btn (modulpark_standard, 1,1,0) sets font-size,
   padding, border-radius and line-height and beat the plain class selectors here -
   which is why everything below used to need !important and still lost on the four
   properties that had none. (1,3,1) wins it outright, so no !important at all. */
#wrapper .mpg-loginVue .dropdown button.btn-login,
#wrapper .mpg-loginVue .dropdown button.btn-primary,
#wrapper .mpg-loginVue .mp-dropdown-loggedIn button.btn-primary,
#wrapper .mpg-login .dropdown button.btn-login,
#wrapper .mpg-login .dropdown button.btn-primary {
    display: block;
    width: 100%;
    background: var(--aflc-button-signal-orange, #ec6a23);
    color: #fff;
    border: 1px solid var(--aflc-button-signal-orange, #ec6a23);
    padding: 10px 24px;
    font-family: 'Livvic', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
    transition: all 200ms;
    margin-bottom: 0;
}
#wrapper .mpg-loginVue .dropdown button.btn-login:hover,
#wrapper .mpg-loginVue .dropdown button.btn-primary:hover,
#wrapper .mpg-loginVue .mp-dropdown-loggedIn button.btn-primary:hover,
#wrapper .mpg-login .dropdown button.btn-login:hover,
#wrapper .mpg-login .dropdown button.btn-primary:hover {
    background: var(--aflc-button-signal-orange-hover, #ee7a3b);
    border-color: var(--aflc-button-signal-orange-hover, #ee7a3b);
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

/* Text-link buttons (Zurück zum Login etc.) */
.mpg-loginVue .dropdown button.btn-text,
.mpg-login .dropdown button.btn-text {
    border: none !important;
    background: none !important;
    color: var(--aflc-button-signal-orange, #ec6a23) !important;
    font-family: 'Livvic', sans-serif;
    font-size: 13px;
    padding: 4px 0;
    text-align: left;
    cursor: pointer;
    display: block;
    margin-bottom: 12px;
    width: auto;
}
.mpg-loginVue .dropdown button.btn-text:hover,
.mpg-login .dropdown button.btn-text:hover {
    color: var(--aflc-button-signal-orange-hover, #ee7a3b) !important;
    text-decoration: underline;
}

/* Passwort vergessen link (grey, below login button, above separator) */
.mpg-loginVue .dropdown button.btn-forgot,
.mpg-login .dropdown button.btn-forgot {
    border: none !important;
    background: none !important;
    color: var(--aflc-graphite, #b7b7b7) !important;
    font-family: 'Livvic', sans-serif;
    font-size: 13px;
    padding: 8px 0 0;
    text-align: right;
    cursor: pointer;
    display: block;
    width: 100%;
    margin-bottom: 0;
}
.mpg-loginVue .dropdown button.btn-forgot:hover,
.mpg-login .dropdown button.btn-forgot:hover {
    color: var(--aflc-storm, #a8a8a8) !important;
    text-decoration: underline;
}

/* Registration link below login button */
.mpg-loginVue .aflc-login-register-link {
    text-align: right;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--aflc-cloud, #e5e5e5);
}
.mpg-loginVue .aflc-login-register-link a {
    font-family: 'Livvic', sans-serif;
    font-size: 16px;
    color: var(--aflc-button-signal-orange, #ec6a23);
    text-decoration: none;
    cursor: pointer;
}
.mpg-loginVue .aflc-login-register-link a:hover {
    text-decoration: underline;
    color: var(--aflc-button-signal-orange-hover, #ee7a3b);
}

/* Password hint */
.mpg-loginVue .passwordHint {
    font-size: 12px;
    color: #888;
    font-style: normal;
    margin-bottom: 16px;
}

/* Remember me checkbox */
.mpg-loginVue .rememberMe {
    font-family: 'Livvic', sans-serif;
    font-size: 13px;
    color: var(--aflc-graphite, #b7b7b7);
}

/* Logged-in state */
.mpg-loginVue .mp-dropdown-loggedIn h3 {
    font-family: 'Livvic', sans-serif;
    font-size: 16px !important;
    font-weight: 600;
    color: var(--aflc-charcoal, #212121) !important;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: none;
    padding-bottom: 4px;
    margin-bottom: 8px;
}
.mpg-loginVue .mp-dropdown-loggedIn .border-light.border-top {
    border-color: var(--aflc-cloud, #e5e5e5) !important;
    padding-top: 12px;
}

/* Validation alerts */
.mpg-loginVue .login-modal-alert.alert {
    font-family: 'Livvic', sans-serif;
    font-size: 13px;
    border-radius: 6px;
    margin-top: 12px;
    padding: 10px 14px;
}
.mpg-loginVue .login-modal-alert.alert-danger {
    background: #fef2f2;
    color: var(--aflc-signal-red, #eb0000);
    border: 1px solid #fecaca;
}
.mpg-loginVue .login-modal-alert.alert-success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* Close button (X) */
.mpg-loginVue .dropdown-content-wrapper .bi.fa-lg svg {
    color: var(--aflc-graphite, #b7b7b7);
}
.mpg-loginVue .dropdown-content-wrapper .bi.fa-lg:hover svg {
    color: var(--aflc-charcoal, #212121);
}

/* Request-key / blue buttons override */
.mpg-loginVue .mp-widget-content .dropdown .dropdown-menu .btn.btn-reset,
.mpg-loginVue .mp-widget-content .dropdown .dropdown-menu .btn-request-key {
    background: var(--aflc-button-signal-orange, #ec6a23);
    color: #fff;
    border: 1px solid var(--aflc-button-signal-orange, #ec6a23);
    border-radius: 6px;
    font-family: 'Livvic', sans-serif;
}

/* Mobile: the panel spans the viewport, so it must be anchored to the viewport.
   With position: absolute, top/left/right resolve against .dropdown - an 18px box
   in the header - which pushed the panel past the left edge. Bootstrap's top: 100%
   would resolve to the full viewport height once the panel is fixed, so top is set
   explicitly: it matches the panel's previous offset below the header. */
@media (max-width: 575px) {
    .mpg-loginVue .mp-widget-content .dropdown .dropdown-menu {
        position: fixed;
        top: 69px;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        margin-top: 0;
        max-height: calc(100vh - 79px);
        max-height: calc(100dvh - 79px);
        overflow-y: auto;
    }

    /* Login form only - the logged-in menu keeps the anchored dropdown.
       Full screen removes the anchoring question entirely and gives the form
       room to breathe; :has() is progressive - without it the anchored panel
       above still applies and stays inside the viewport. */
    .mpg-loginVue .mp-widget-content .dropdown .dropdown-menu:has(form) {
        top: 0;
        bottom: 0;
        left: 0 !important;
        right: 0 !important;
        max-height: none;
        border-radius: 0;
    }
}


/* ── VIP Badge ── */
.aflc-app .vip-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    /* side margin mirrors .plugin-box padding so the badge aligns with the content cards below */
    margin: 0 20px 50px;
    background: linear-gradient(135deg, #f8f6f0 0%, #f0ece2 100%);
    border: 1px solid #e2ddd0;
    border-radius: 10px;
}

/* edge-to-edge on phones, like .plugin-box */
@media (max-width: 576px) {
    .aflc-app .vip-badge {
        margin-left: 0;
        margin-right: 0;
    }
}

.aflc-app .vip-badge-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 6px;
}

.aflc-app .vip-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aflc-app .vip-badge-label {
    font-size: 19px;
    font-weight: 600;
    color: var(--aflc-charcoal, #212121);
    letter-spacing: 0.02em;
}

.aflc-app .vip-badge-description {
    font-size: 16px;
    color: var(--aflc-granit, #686868);
    line-height: 1.4;
}

/* VIP badge intro-course hint */
/* keep the icon pinned to the top when the hint grows the box (badge itself stays untouched) */
.aflc-app .vip-badge-icon {
    align-self: flex-start;
}

.aflc-app .vip-badge-introhint {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2ddd0;
}

.aflc-app .vip-badge-introhint-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--aflc-charcoal, #212121);
}

.aflc-app .vip-badge-introhint-text {
    font-size: 15px;
    color: var(--aflc-granit, #686868);
    line-height: 1.4;
}


/* ── Intervision Section ── */
.aflc-app .intervision-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 28px;
    overflow: visible;
}

.aflc-app .intervision-field {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: visible;
}

.aflc-app .intervision-label {
    font-size: 19px;
    font-weight: 500;
    color: var(--aflc-iron, #444);
    min-width: 120px;
}

.aflc-app .intervision-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* intervision-readonly = layout only; date presentation is shared with .course-row-date */
.aflc-app .intervision-readonly {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
}

.aflc-app .intervision-clear {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--aflc-storm, #a8a8a8);
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
}

.aflc-app .intervision-clear:hover {
    color: var(--aflc-charcoal, #212121);
}

.aflc-app .intervision-error {
    font-size: 12px;
    color: #dc2626;
}

.aflc-app .intervision-instructions {
    padding: 0 28px 16px;
    margin-top: 20px;
    font-size: var(--fs-body);
    color: var(--ink-2, #686868);
    line-height: 1.4;
}
.aflc-app .intervision-instructions span.intervision-instructions-title,
.aflc-app .intervision-instructions span.bold {
    font-weight:600;
}

.aflc-app .intervision-actions {
    padding: 8px 28px 20px;
    display: flex;
    justify-content: flex-end;
}


/* ── DateInput Calendar ── */
/* square button that tracks the input height instead of a fixed size */
.aflc-app .date-calendar-btn {
    background: none;
    border: 1px solid var(--aflc-silver, #ccc);
    border-radius: 6px;
    align-self: stretch;
    aspect-ratio: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--aflc-iron, #444);
    transition: border-color 0.15s, color 0.15s;
}

.aflc-app .date-calendar-btn svg {
    width: 24px;
    height: 24px;
}

.aflc-app .date-calendar-btn:hover {
    border-color: var(--aflc-granit, #686868);
    color: var(--aflc-charcoal, #212121);
}

/* Calendar trigger off: it opens the browser's native picker, whose size cannot be
   styled. Placed after the rules above on purpose - they set display: inline-flex at
   the same specificity, so an earlier block would lose. */
.aflc-app .date-calendar-btn {
    display: none;
}
.aflc-app .date-input.has-calendar {
    grid-template-columns: minmax(58px, 65px) minmax(84px, 1fr) minmax(72px, 80px);
}

.aflc-app .date-calendar-hidden {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

@media (max-width: 600px) {
    .aflc-app .intervision-field {
        flex-wrap: wrap;
    }
    .aflc-app .intervision-label {
        min-width: unset;
    }
    .aflc-app .intervision-input-row {
        width: 100%;
    }
}


/* Case Dossier Section */

.aflc-app .casedossier-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 0px 20px;
}

.aflc-app .casedossier-empty {
    padding: 0 28px 20px;
    color: var(--aflc-granit, #686868);
    font-size: 19px;
}

/* Card */
.aflc-app .casedossier-card-highlight {
    animation: casedossier-flash 2.5s ease;
}
@keyframes casedossier-flash {
    0%, 100% { background: transparent; }
    15% { background: rgba(232, 119, 34, 0.12); }
}

.aflc-app .casedossier-card {
    border: 1px solid var(--aflc-border-light, #e5e5e5);
    border-radius: 8px;
    padding: 16px;
}

.aflc-app .casedossier-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.aflc-app .casedossier-type-badge {
    font-size: var(--fs-heading);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--aflc-button-signal-orange, #e87722);
    background: rgba(232, 119, 34, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
}

.aflc-app .casedossier-date {
    font-size: var(--fs-meta);
    color: var(--aflc-granit, #686868);
    margin-left: auto;
}

/* Dev-only delete button */
.aflc-app .casedossier-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aflc-granit, #686868);
    padding: 2px 6px;
    font-size: var(--fs-body);
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.aflc-app .casedossier-delete:hover {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}

.aflc-app .casedossier-description {
    font-size: var(--fs-meta);
    color: var(--aflc-iron, #444);
    padding: 4px 0 12px;
    line-height: 1.4;
}

.aflc-app .casedossier-docs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aflc-app .casedossier-doc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-body);
    color: var(--aflc-iron, #444);
}

.aflc-app .casedossier-doc-row i:first-child {
    color: var(--aflc-granit, #686868);
    font-size: var(--fs-meta);
}

.aflc-app .casedossier-doc-name {
    flex: 1;
    cursor: pointer;
}

.aflc-app .casedossier-doc-name:hover {
    text-decoration: underline;
}

.aflc-app .casedossier-doc-date {
    font-size: var(--fs-meta);
    color: var(--aflc-granit, #686868);
}

.aflc-app .casedossier-doc-download {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aflc-button-signal-orange, #e87722);
    padding: 4px;
    font-size: 14px;
}

.aflc-app .casedossier-doc-download:hover {
    color: var(--aflc-button-signal-orange-hover, #d06a1e);
}

.aflc-app .casedossier-no-docs {
    font-size: 13px;
    color: var(--aflc-granit, #686868);
    font-style: italic;
}

/* Form */
.aflc-app .casedossier-form {
    padding: 20px 28px;
    border-top: 1px solid var(--aflc-border-light, #e5e5e5);
}

.aflc-app .casedossier-form h3 {
    font-size: var(--fs-heading);
    font-weight: 600;
    color: var(--aflc-button-signal-orange, #e87722);
    margin: 0 0 16px;
}

/* Wizard: start button */
.aflc-app .casedossier-start {
    display: flex;
    justify-content: flex-end;
    margin-right: -28px;
    padding-right: 8px;
}

.aflc-app .casedossier-start .profile-btn i {
    margin-right: 6px;
}

/* Wizard: type cards */
.aflc-app .casedossier-type-cards {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.aflc-app .casedossier-type-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    border: 2px solid var(--aflc-border-light, #e5e5e5);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--aflc-iron, #444);
    transition: border-color 0.15s, background 0.15s;
}

.aflc-app .casedossier-type-card:hover {
    border-color: var(--aflc-button-signal-orange, #e87722);
    background: rgba(232, 119, 34, 0.03);
}

.aflc-app .casedossier-type-card-disabled,
.aflc-app .casedossier-type-card-disabled:hover {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: var(--aflc-border-light, #e5e5e5);
    background: none;
}

.aflc-app .casedossier-type-taken {
    font-size: 11px;
    color: var(--aflc-granit, #686868);
    text-align: center;
}

.aflc-app .casedossier-type-card i {
    font-size: 24px;
    color: var(--aflc-button-signal-orange, #e87722);
}

.aflc-app .casedossier-pdf-hint {
    font-size: var(--fs-meta);
    color: var(--aflc-granit, #686868);
    margin: 0 0 8px;
}

/* Wizard: back link */
.aflc-app .casedossier-back-link {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--aflc-granit, #686868);
    padding: 0;
    margin-top: 8px;
}

.aflc-app .casedossier-back-link:hover {
    color: var(--aflc-iron, #444);
}

.aflc-app .casedossier-back-link i {
    margin-right: 4px;
}

/* Wizard: step header (back + type badge) */
.aflc-app .casedossier-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.aflc-app .casedossier-comment {
    margin-bottom: 16px;
}

.aflc-app .casedossier-comment label {
    display: block;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--aflc-iron, #444);
    margin-bottom: 6px;
}

.aflc-app .casedossier-comment textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--aflc-border-light, #e5e5e5);
    border-radius: 6px;
    font-size: var(--fs-body);
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.aflc-app .casedossier-comment textarea:focus {
    outline: none;
    border-color: var(--aflc-button-signal-orange, #e87722);
}

/* FileUploader */
.aflc-app .aflc-file-uploader {
    margin-bottom: 16px;
}

.aflc-app .aflc-file-drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border: 2px dashed var(--aflc-border-light, #e5e5e5);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.aflc-app .aflc-file-drop-zone:hover,
.aflc-app .aflc-file-drop-zone-active {
    border-color: var(--aflc-button-signal-orange, #e87722);
    background: rgba(232, 119, 34, 0.03);
}

.aflc-app .aflc-file-input-hidden {
    display: none;
}

.aflc-app .aflc-file-drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--aflc-granit, #686868);
    font-size: var(--fs-meta);
}

.aflc-app .aflc-file-drop-zone-content i {
    font-size: 24px;
    color: var(--aflc-button-signal-orange, #e87722);
}

.aflc-app .aflc-file-drop-zone-types {
    font-size: var(--fs-meta);
    color: var(--aflc-metal, #767676);
}

.aflc-app .aflc-file-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aflc-app .aflc-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--aflc-offwhite, #f9f9f9);
    border-radius: 6px;
    font-size: 13px;
}

.aflc-app .aflc-file-item-invalid {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.aflc-app .aflc-file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.aflc-app .aflc-file-info i {
    color: var(--aflc-granit, #686868);
}

.aflc-app .aflc-file-item-invalid .aflc-file-info i {
    color: #dc2626;
}

.aflc-app .aflc-file-name {
    flex: 1;
    word-break: break-all;
}

.aflc-app .aflc-file-size {
    font-size: 12px;
    color: var(--aflc-granit, #686868);
}

.aflc-app .aflc-file-error {
    font-size: 12px;
    color: #dc2626;
}

.aflc-app .aflc-file-remove {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--aflc-granit, #686868);
    padding: 0 4px;
    line-height: 1;
}

.aflc-app .aflc-file-remove:hover {
    color: #dc2626;
}

/* Progress */
.aflc-app .casedossier-progress {
    height: 4px;
    background: var(--aflc-offwhite, #f0f0f0);
    border-radius: 2px;
    margin-bottom: 16px;
    overflow: hidden;
}

.aflc-app .casedossier-progress-bar {
    height: 100%;
    background: var(--aflc-button-signal-orange, #e87722);
    border-radius: 2px;
    transition: width 0.2s;
}

.aflc-app .casedossier-error {
    font-size: 13px;
    color: #dc2626;
    margin-bottom: 12px;
}

.aflc-app .casedossier-error i {
    margin-right: 4px;
}

.aflc-app .casedossier-actions {
    padding: 8px 0 4px;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 600px) {
    .aflc-app .casedossier-type-select {
        flex-direction: column;
        gap: 8px;
    }
    .aflc-app .casedossier-card-header {
        flex-wrap: wrap;
    }
    .aflc-app .casedossier-form {
        padding: 16px 20px;
    }
    .aflc-app .casedossier-start {
        margin-right: -20px;
    }
    .aflc-app .casedossier-list {
        padding: 0 0px 16px;
    }
    .aflc-app .casedossier-doc-row {
        font-size: var(--fs-meta);
    }
    /* min-width: 0 is what makes the ellipsis work - a flex item defaults to
       min-width: auto and would grow past the row instead of truncating */
    .aflc-app .casedossier-doc-name {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .aflc-app .casedossier-doc-date {
        display: none;
    }
}

/* discounted old price (struck-through original) in collection cart */
#cartModal .oldPrice {
    font-size: 0.85em !important;
    color: #888;
    text-decoration: line-through;
    font-style: italic;
}

/* debug mode (mp.plugin.learncoachingApp.debug) - meta line on module head, course days
   and single course rows. Sits inside existing full-width flex containers, so one rule set
   covers all three placements in desktop and mobile alike. */
.aflc-app .booking-debug {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    margin-left: 8px;
    padding: 1px 7px;
    border: 1px dashed var(--border-strong);
    border-radius: 4px;
    background: rgba(0, 0, 0, .03);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-3);
    white-space: nowrap;
    flex-shrink: 0;
}

.aflc-app .booking-debug-part + .booking-debug-part::before {
    content: '\b7';
    margin-right: 6px;
}

/* postponeAmbiguous warning on the course day date: the move resolution had alternatives and
   no proof, the shown date may be wrong. Sits INSIDE .ktag-date, so the row grid is untouched. */
/* icon sits BEFORE the date since 260908 - the warning must be read first, and red: the date
   next to it may be plain wrong, not just uncertain */
.aflc-app .ktag-warning {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    color: var(--danger);
    vertical-align: middle;
}
.aflc-app .ktag-warning svg {
    width: 15px;
    height: 15px;
}
/* the sentence is too long for the nowrap default tooltip */
.aflc-app .ktag-warning[data-tooltip]::after {
    white-space: normal;
    width: 240px;
}

/* only where the debug line actually sits: course-row-header is overflow:hidden with
   non-shrinking children, so a long course title would clip the badge away. Scoped through
   :has(), which keeps the production layout provably untouched when debug is off. */
.aflc-app .course-row-header:has(.booking-debug),
.aflc-app .ktag-label:has(.booking-debug) {
    flex-wrap: wrap;
    overflow: visible;
}

/* postpone chain: one row per hop. The seven spans sit directly in the grid, without a per-row
   wrapper, so the columns line up across all rows on their own */
.aflc-app .booking-debug-chain {
    display: grid;
    grid-template-columns: repeat(7, max-content);
    gap: 2px 10px;
    width: 100%;
    margin: 4px 0 0;
    padding: 4px 0 4px 8px;
    border-left: 2px solid var(--border-strong);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.5;
    color: var(--ink-3);
}
.aflc-app .booking-debug-chain-step {
    color: var(--ink-2);
    font-weight: 600;
}
/*  the last row is the current position and the one that matters first. Seven spans per row, so
    :nth-last-child(-n+7) is exactly that row; only the values light up, the labels stay muted.
    Adding a column means changing this number AND grid-template-columns above. */
.aflc-app .booking-debug-chain > span:nth-last-child(-n+7) .booking-debug-chain-value {
    color: var(--ink);
    font-weight: 600;
}
/*  status colour must survive that highlight: same specificity as the rule above, declared after,
    so source order decides. Keep these two below it. */
.aflc-app .booking-debug-chain > span.booking-debug-chain-occupied .booking-debug-chain-value {
    color: var(--green);
}
.aflc-app .booking-debug-chain > span.booking-debug-chain-postponed .booking-debug-chain-value {
    color: var(--accent-ink);
}
/*  reference defect: either no source at all ( found only by the hand-made branch ) or a type
    the code never writes. Loud on purpose - this is the case that needs a look in the DB.
    Two rules: the bare text of the "noRef available" cell, and the value span of an unexpected
    type, which needs the same specificity as the highlight rule above to survive on the last row. */
.aflc-app .booking-debug-chain-noref {
    color: var(--danger);
    font-weight: 600;
}
.aflc-app .booking-debug-chain > span.booking-debug-chain-noref .booking-debug-chain-value {
    color: var(--danger);
}

@media (max-width: 720px) {
    .aflc-app .booking-debug {
        margin-left: 0;
        margin-top: 3px;
        white-space: normal;
    }
    /* six columns do not fit: two per row, the step number spans the full width as a separator */
    .aflc-app .booking-debug-chain {
        grid-template-columns: max-content 1fr;
    }
    .aflc-app .booking-debug-chain-step {
        grid-column: 1 / -1;
        margin-top: 3px;
    }
}

/* waiting list — the card is the booked module card; both buttons use .btn-icon.
   Only the date range is extra, and it must not break away onto its own line. */
.aflc-app .meta-daterange {
    white-space: nowrap;
}

/* the teleport target carries .plugin-box so the section gets the same width as the
   others; without content it must not leave an empty card standing */
.aflc-app #waiting-list-target:empty {
    display: none;
}

/* modules and courses share one card in the waiting list — separate the two blocks.
   Sibling selector: without a module above it there is nothing to separate from */
.aflc-app .module--waiting + .course-rows--waiting {
    border-top: 1px solid var(--border);
    margin-top: 10px;
    padding-top: 14px;
}


/* ==========================================================================
   CART / COLLECTION PLUGIN  -  260908 broc

   Single home for the basket. The 42 rules that used to live in
   modulpark_standard_template.css were moved here so the basket can use the app
   design tokens; that file now only keeps the .mpg-login half of two shared
   selectors. Nothing here carries a css-marker, so nothing was lost in the move.

   Two things made the basket impossible to style before:
     1. the tokens sat on .aflc-app and the basket lives outside it  ( fixed: :root )
     2. .collection-plugin * { font-size:14px !important } flattened everything
        ( fixed: the container sets the base, children inherit )

   Rule: no !important without a comment naming the foreign rule it fights.
   ========================================================================== */

/* --- shell ------------------------------------------------------------- */

.collection-plugin .modal,
.collection-plugin .modal-xl {
	background-color: transparent;
}
.collection-plugin .modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1050;
	display: none;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	outline: 0;
}
/* !important: bootstrap ships .modal-xl{max-width:1140px} at equal specificity */
.collection-plugin .modal-xl {
	max-width: 1024px !important;
	margin: 0 auto !important;
	height: auto;
}
#wrapper #cartModal .modal-dialog {
	position: relative;
	z-index: 1000;
	max-width: none;
	display: flex !important;
	flex-direction: column;
	padding: 40px 0 60px;
	top: 50px;
}
.collection-plugin .modal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background: var(--surface);
	background-clip: padding-box;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
	outline: 0;
}

/* header: the app states a modal with an eyebrow line, not a coloured bar
   ( see .videoConference-eyebrow ) */
.collection-plugin .modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	background: var(--surface);
	padding: 24px 32px 0;
	border-bottom: none;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.collection-plugin .modal-title {
	display: block;
	margin: 0;
	color: var(--accent-heading);
	font-size: var(--fs-heading);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.5;
}
.collection-plugin .close {
	float: right;
	background: transparent;
	border: 0;
	opacity: 1;
	color: var(--ink-3);
	text-shadow: none;
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
}
.collection-plugin .close:hover {
	color: var(--ink);
}

.collection-plugin .modal-body {
	position: relative;
	flex: 1 1 auto;
	padding: 16px 32px 24px;
}
#cartModal .modal-dialog .modal-body {
	height: 100%;
	min-height: 300px;
	overflow-y: auto;
}

.collection-plugin .modal-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	background: var(--surface);
	padding: 20px 32px;
	/*border-top: 1px solid var(--border);*/
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* --- buttons ----------------------------------------------------------- */

/* #wrapper in front is not decoration: the page css carries
   `#wrapper .btn-primary, #wrapper .btn-next-step { background: #e42c2a }` for the whole site.
   That is an id selector and a plain .collection-plugin rule loses against it. */
#wrapper .collection-plugin .btn,
#wrapper .collection-plugin .btn.btn-primary {
	font-family: inherit;
	font-size: var(--fs-meta);
	font-weight: 600;
	line-height: 1;
	/* the labels arrive lowercase from the translation records ( "weiter", "bestellen" ) */
	text-transform: capitalize;
	padding: 0 24px;
	height: var(--btn-size);
	border-radius: 8px;
	cursor: pointer;
	transition: all 200ms;
}
#wrapper .collection-plugin .btn.btn-primary {
	background: var(--accent);
	border: 1px solid var(--accent);
	color: #fff;
}
#wrapper .collection-plugin .btn.btn-primary:hover {
	background: var(--accent-ink);
	border-color: var(--accent-ink);
}
/* back button: quiet outline, so the footer has one obvious forward action */
#wrapper .collection-plugin .btn.btn-secondary {
	background: var(--surface);
	border: 1px solid var(--border-strong);
	color: var(--ink-2);
}
#wrapper .collection-plugin .btn.btn-secondary:hover {
	background: var(--surface-2);
	border-color: var(--ink-3);
	color: var(--ink);
}
.collection-plugin button:not(:disabled),
.collection-plugin [type="button"]:not(:disabled),
.collection-plugin [type="reset"]:not(:disabled),
.collection-plugin [type="submit"]:not(:disabled) {
	cursor: pointer;
}
/* remove becomes the same icon button the booking lists use ( .btn-icon.btn-icon-danger + Icon "x" ):
   square, bordered, danger coloured, no label. The label text stays in the dom for screen readers and
   is collapsed with font-size 0; the glyph is the same 24x24 path Icon.vue draws, as a mask so it
   takes currentColor. The markup ships `btn btn-danger btn-remove`, and the page css has
   `#wrapper .btn-remove { background:#004e97 }` - a blue, at id specificity. Hence #wrapper again. */
#wrapper .collection-plugin .btn.btn-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--btn-size);
	height: var(--btn-size);
	padding: 0;
	font-size: 0;
	background: var(--surface);
	border: 1px solid #e7d2cd;
	border-radius: 7px;
	color: var(--danger);
}
#wrapper .collection-plugin .btn.btn-remove::before {
	content: '';
	display: block;
	width: 15px;  /* measured on the app button: the Icon.vue svg renders 15x15 there */
	height: 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
#wrapper .collection-plugin .btn.btn-remove:hover {
	background: var(--danger-bg);
	border-color: #d9a89e;
	color: var(--danger);
}

/* --- tabs -------------------------------------------------------------- */

#cartTabs {
	display: flex !important; /* bootstrap .nav sets display:block on the UL we reuse as step bar */
	flex-direction: row;
	margin: 0 !important;
	padding-left: 0;
	background: var(--surface-2);
	border-bottom: 1px solid var(--border);
}
.collection-plugin .nav-link {
	display: block;
}
#cartModal .modal-dialog .nav-tabs .nav-link,
#wrapper #cartModal .modal-dialog .nav-tabs .nav-link {
	padding: 12px 24px;
	margin-bottom: 0;
	border: none;
	border-right: 1px solid var(--border);
	border-radius: 0;
	color: var(--ink-3);
	font-size: var(--fs-meta);
}
#wrapper #cartModal .modal-dialog .nav-tabs .active .nav-link {
	position: relative;
	display: block;
	background: var(--accent);
	color: #fff;
	font-weight: 600;
}
#cartModal .modal-dialog .nav-tabs li {
	margin-bottom: 0;
	list-style: none;
}
#cartModal #cartTabs .checked {
	display: none;
}
#cartModal .tab-content > .tab-pane {
	display: none !important; /* bootstrap .tab-pane.active{display:block} would show every pane */
}
#cartModal .tab-content > .tab-pane.active {
	display: block !important;
}

/* --- item table -------------------------------------------------------- */

.collection-plugin table {
	border-collapse: collapse;
}
.collection-plugin .table {
	width: 100%;
	margin-bottom: 1rem;
	color: var(--ink);
}
/* the collection plugin ships its own main.css and it loads AFTER this file, so anything it sets
   at equal specificity wins. `#cartModal .mp-heading-tr{border-bottom:3px solid #005a9c}` lives
   there - a leftover in a foreign blue. Two ids beat its one without !important. */
#wrapper #cartModal .mp-heading-tr {
	border-bottom: none;
}
#wrapper #cartModal .mp-heading-tr th,
.collection-plugin .mp-heading-tr th {
	padding: 0 10px 8px 0;
	border: none;
	border-bottom: 1px solid var(--border);
	color: var(--ink-3);
	font-size: var(--fs-meta);
	font-weight: 600;
	text-align: left;
}
#cartModal .tbl-item-container table tbody tr {
	border-bottom: 1px solid var(--border);
}
.collection-plugin #cartModal .table td {
	padding: 16px 0;
	vertical-align: top;
}
/* One right edge for the column header, the position price and the total.

   These three widths are the whole alignment. The total sits in a div OUTSIDE the table
   ( aflc.html, .total-price-container ) and can only be placed by the sum of the columns to
   its right - and that sum differs per step: only step 1 carries the remove column, the
   overview table has no th-remove at all. Naming them lets #completion override the single
   value that changes, instead of a fixed offset that is wrong in one of the two steps. */
#cartModal {
	--cart-price-col: 140px;
	--cart-action-col: 80px;
	--cart-cell-gap: 16px;
}
#cartModal #completion {
	--cart-action-col: 0px;
}

.th-quantity, .showQuantity {
	width: 180px;
}
/* right-aligned, so the button sits on the table's right edge instead of floating in the
   middle of an 80px column ( the td carries no horizontal padding, see the .table td rule ) */
#cartModal .th-remove,
#cartModal td.removeBtnDesktop {
	width: var(--cart-action-col);
	text-align: right;
}
#cartModal .removeBtnMobile {
	display: none;
}
/* beats `#wrapper #cartModal .mp-heading-tr th { text-align: left }` further up */
#wrapper #cartModal .mp-heading-tr th.th-totalPriceWithTax,
.collection-plugin #cartModal .mp-heading-tr th.th-totalPriceWithTax {
	width: var(--cart-price-col);
	padding-right: var(--cart-cell-gap);
	text-align: right;
}
/* beats `.collection-plugin #cartModal .table td { padding: 16px 0 }` further up */
.collection-plugin #cartModal .table td.totalPriceWithTax {
	width: var(--cart-price-col);
	padding-right: var(--cart-cell-gap);
	text-align: right;
}

/* The summary row carries no border of its own: the item row above already ends with one
   ( #cartModal .tbl-item-container table tbody tr ), a second one reads as a double line.
   #wrapper in front beats `#cartModal .total-price-container { float: right }` from the
   collection plugin's main.css, which loads after this file. */
#wrapper #cartModal .total-price-container {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	float: none;
	margin-top: 4px;
	padding: 16px 0 8px 0;
	border-top: none;
	border-bottom: none;
	color: var(--ink);
	font-size: var(--fs-title);
	font-weight: 600;
}
/* same right edge as the price cell: the column, shifted by whatever stands to its right */
#wrapper #cartModal .total-price-container .total-price {
	flex: 0 0 auto;
	box-sizing: border-box;
	float: none;
	width: var(--cart-price-col);
	margin-right: var(--cart-action-col);
	padding-right: var(--cart-cell-gap);
	text-align: right;
}

/* --- form fields ------------------------------------------------------- */

.collection-plugin .row {
	display: flex;
	width: 100%;
	margin-right: -15px;
	margin-left: -15px;
}
.collection-plugin select,
.collection-plugin button {
	text-transform: none;
}
.collection-plugin select {
	word-wrap: normal;
}
/* The #cartModal #memberWrap selectors are not redundant: the address step and its modal render
   inside `<div id="memberWrap">` ( addressManagement.cfm ), and the member-form rules further up
   in this file - `#memberWrap select { font-size: 1rem }`, radius 0 - outrank any plain
   .collection-plugin selector. Same look, stated at a specificity that reaches into the cart. */
.collection-plugin select,
.collection-plugin input[type="text"],
.collection-plugin input[type="email"],
.collection-plugin input[type="tel"],
.formRow input[type="text"],
.formRow select,
.formRow textarea,
#cartModal #memberWrap select,
#cartModal #memberWrap input[type="text"],
#cartModal #memberWrap input[type="email"],
#cartModal #memberWrap input[type="tel"],
#cartModal #memberWrap textarea {
	/* values are those of `.aflc-app .profile-input` ( ~8980 ) - the cart is to look like
	   "Meine Angaben". Restated instead of shared because those rules are scoped to .aflc-app
	   and the cart lives outside it; the --aflc-* tokens sit on :root and resolve here. */
	box-sizing: border-box;
	display: block;
	width: 100%;
	/* `height: auto` is the reason the cart matched 44px instead of the profile's 50.5px:
	   `#memberWrap input[type=text] { height: 35px }` ( ~1795 ) pins the box, min-height only
	   lifts it to 44 and the line-height never gets to grow it. Released, the box computes to
	   19px * 1.5 + 20 padding + 2 border = 50.5px - exactly `.aflc-app .profile-input`. */
	height: auto;
	min-height: 44px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--aflc-cloud, #e5e5e5);
	border-radius: 4px;
	color: var(--aflc-charcoal, #212121);
	font-family: 'Livvic', sans-serif;
	font-size: 19px;
	line-height: 1.5;
	transition: border-color .15s;
}
.collection-plugin select:focus,
.collection-plugin input:focus,
.formRow input[type="text"]:focus,
.formRow select:focus,
.formRow textarea:focus,
#cartModal #memberWrap select:focus,
#cartModal #memberWrap input:focus,
#cartModal #memberWrap textarea:focus {
	outline: none;
	border-color: var(--accent);
}
.collection-plugin input[type="radio"],
.collection-plugin input[type="checkbox"] {
	box-sizing: border-box;
	width: auto;
	min-height: 0;
	padding: 0;
}
/* --- step 2: address selection + address form -------------------------- */

/* Step 2 and the add/edit modal are BOTH server-rendered html
   ( cfc/collection/types/stepTemplate/addressManagement.cfm, and the addressModal directive in
   collections-ctrl_aflc.js ). Their shared building block is .sbCard - and every single field
   sits in one of its own. The .sbCard rule further up in this file ( ~2029, from the member
   forms ) carries `padding: 35px` and a grey `#efefef`, which turns one address form into a
   stack of grey boxes with 70px between two fields.
   Neutralised for the cart only - the member forms keep their look. */
#cartModal .sbCard,
#cartModal .sbCardContent {
	height: auto;
	display: block;
	padding: 0;
	background: none;
}

/* the step bar above already names the step, the section heading only repeats it */
#cartModal #addressManagement h1 {
	display: none;
}
#cartModal .addressWrap_order,
#cartModal .addressWrap_delivery,
#cartModal .addressWrap_billing,
#cartModal .addressFormWrap_order,
#cartModal .addressFormWrap_delivery,
#cartModal .addressFormWrap_billing {
	margin-top: 20px;
}
#cartModal .addressWrap_order:first-child,
#cartModal .addressWrap_delivery:first-child,
#cartModal .addressWrap_billing:first-child {
	margin-top: 0;
}
/* This is a full sentence, not a field label - at the container's 16px it read as fine print
   next to its own 19px select. */
#cartModal .other-adress-confirmation label {
	margin-bottom: 0;
	color: var(--aflc-charcoal, #212121);
	font-size: 19px;
	line-height: 1.5;
}
#cartModal .other-adress-confirmation {
	margin-bottom: 12px;
}
#cartModal .other-adress-confirmation input[type=radio] {
	margin: 0 6px 0 0;
}
#cartModal .other-adress-confirmation input[type=radio] ~ input[type=radio] {
	margin-left: 20px;
}

/* The col-* classes already carry the intended widths ( a .formRow holds either one full-width
   .row per line, or a label/field pair ). Only the bootstrap gutter has to go, so the first
   column starts on the same flush line as the item table in step 1 - no fixed label track:
   the question rows are col-md-12 and would be squeezed into it. */
#cartModal .formRow {
	margin-bottom: 10px;
}
#cartModal .formRow > .row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	margin: 0;
}
#cartModal .formRow > .row > .column {
	padding: 0;
}
/* The gap between two columns hangs on the label and on the button, never on the column itself:
   the columns are percentage based ( col-md-4 + col-md-8 = 100% ), so a flex gap would push the
   field onto the next line, and a column padding would shorten the field - two selects in
   col-md-5 would then end 16px apart instead of on one line. */
/* `p.memberLabel` is right-aligned and 35px tall globally ( ~2007 ) - inside a two-column form
   row that reads as a stray column of ragged text */
#cartModal p.memberLabel {
	display: block;
	min-height: 0;
	margin: 0;
	padding-right: 16px;
	color: var(--ink-2);
	font-size: var(--fs-meta);
	text-align: left;
}

/* --- address modal ----------------------------------------------------- */

.address-modal.show {
	display: block !important; /* .modal{display:none} above; the plugin toggles .show, not inline style */
}
.address-modal.show .modal-dialog {
	/* beats .modal-xl{max-width:1024px!important} inherited from the cart */
	max-width: 620px !important;
}

/* The address form is taller than the viewport, and .collection-plugin .modal above sets
   `height: 100%; overflow: hidden` - the lower fields and the save button were unreachable.
   The overlay scrolls, the dialog grows with its content. */
#cartModal .address-modal {
	overflow-y: auto;
}
#cartModal .address-modal .modal-dialog {
	top: 0;
	padding: 32px 0;
}
#cartModal .address-modal .modal-body {
	height: auto;
	min-height: 0;
	overflow: visible;
}

/* The form is laid out like "Meine Angaben": label above the field, plus the two pairs the
   profile form has ( Strasse + Nr., PLZ + Ort ). The server markup keeps label and field in
   separate .column siblings, so the row simply stacks them; the two pair rows carry
   .aflc-fieldPair and become a grid with the ratios of the vue FieldPair variants. */
#cartModal .address-modal .formRow {
	margin-bottom: 12px;
}
#cartModal .address-modal .formRow > .row {
	display: block;
}
#cartModal .address-modal .formRow > .row > .column {
	max-width: none;
	padding: 0;
}
#cartModal .address-modal .formRow > .row.aflc-fieldPair {
	display: grid;
	gap: 12px;
}
#cartModal .address-modal .aflc-fieldPair-wide {
	grid-template-columns: 3fr 1fr;
}
#cartModal .address-modal .aflc-fieldPair-narrow {
	grid-template-columns: 120px 1fr;
}
/* Sits above its field now, so the side-by-side gap is wrong here - and a <p> brings the page's
   own paragraph margins along. Mirrors `.aflc-app .profile-field label` ( ~8968 ), flex included:
   the mandatory dot below aligns itself with `align-self`. */
#cartModal .address-modal p.memberLabel {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	font-size: 16px;
	color: var(--aflc-graphite);
}
/* the profile's mandatory marker, same rules as `.aflc-app .icon-mandatory` ( ~9164 ) */
#cartModal .icon-mandatory {
	align-self: flex-start;
	margin-top: 9px;
	margin-left: 8px;
	font-size: 5px;
	color: var(--accent);
	cursor: default;
}
/* The cart modal is white on a white page - without a dimmed backdrop its edges disappear. The
   element exists but is unstyled: bootstrap ships only its grid here, not its modal css, so the
   backdrop renders position:static and 0px high. Geometry has to come from us as well. */
.modal-backdrop.show {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #1d1d1b;
	opacity: .35;
}
/* The header was the one strip of the page that stayed bright, and raising this backdrop is not
   the fix: #cartModal is rendered INSIDE `header.site-header`, which is sticky with z-index 100
   and therefore its own stacking context. Everything in it - the modal included - is capped at
   layer 100, so any backdrop above the header is also above the modal ( verified: elementFromPoint
   over the open cart returned .modal-backdrop, i.e. the cart was no longer clickable ).
   The header dims itself instead, from inside its own context: above .top_bar ( z-index 9 ),
   below #cartModal ( 1040 ). The plugin sets .modal-open on body while a modal is open. */
/* One overlay over the whole header cannot work, and this is why: #cartModal sits inside
   `.top_bar`, which is `position: relative; z-index: 9` and therefore its own stacking context.
   The modal's z-index 1040 only ranks it INSIDE .top_bar - against the rest of the header the
   whole subtree counts as layer 9. Anything painted above the header content is therefore also
   above the open cart ( first attempt, z-index 1010: the top 110px of the address modal were
   greyed out, proven by toggling the rule off ).
   So the header dims itself in the two places it actually consists of, each overlay staying inside
   its own context and below the modal:
     .header_bar  - the visible strip, logo and navigation ( static, so z-index 1 is enough )
     .flex-wrap   - the absolutely positioned cart icon / user menu inside .top_bar; #cartModal is
                    a descendant of it and wins at 1040 */
body.modal-open .top_bar::after {
	content: '';
	/* fixed, not absolute: .top_bar collapses to 0px ( its only child is positioned absolutely ),
	   so it cannot host an overlay of its own size. The height is the header's - the one hard
	   number here, kept next to the rule that needs it. */
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 110px;
	/* above .langNavContainer ( 999 ) and, because .top_bar as a whole ranks above the static
	   .header_bar, above logo and navigation too - one uniform layer instead of two that would
	   overlap into a darker patch. Below #cartModal ( 1040 ). */
	z-index: 1000;
	background: #1d1d1b;
	opacity: .35;
	pointer-events: none; /* no close handler up here - blocking clicks would only trap the user */
}
.address-modal-backdrop.show {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: rgba(0, 0, 0, .4);
}
/* colour comes from the generic .btn-primary rule above - this only keeps the button from
   stretching across the grid track it shares with the address select */
#cartModal .btn.btn-addAddress {
	margin-left: 16px;
	white-space: nowrap;
}

/* Desktop AND mobile. Measured before: label -> select 0px, select -> select 10px,
   select -> buttons 0px. The 10px between the dropdowns come from `.formRow { margin-bottom }`,
   because those two sit in separate .formRow blocks. The buttons do NOT - they share one flex
   `.row` with the second select ( side by side on desktop via col-md-5 / col-md-4, stacked on
   mobile only because col-xs-12 does not exist in Bootstrap 4 ). A margin on that row would sit
   above both, never between them, so the gap has to be row-gap. And the question label fills its
   row edge to edge, so it needs the margin on the row itself. All three now measure 10px. */
#cartModal .addressFormWrap_factura .formRow > .row,
#cartModal .addressFormWrap_delivery .formRow > .row,
#cartModal .addressFormWrap_order .formRow > .row {
	row-gap: 10px;
}
#cartModal .formRow > .row.other-adress-confirmation {
	margin-bottom: 10px;
}

/* --- step 4: confirmation ---------------------------------------------- */

/* "Schliessen" is the only action on this screen, so it takes the primary look. It carries
   .btn-red, and the page css turns that into a full-width red block:
   `.btn-red { width: 100% }` plus `#wrapper .btn-red, #wrapper .btn-primary { background: #e42c2a }`
   in modulpark_standard.css. Neither the shape nor the red belongs in the cart. */
#wrapper .collection-plugin .btn.btn-red {
	width: auto;
	background: var(--accent);
	border: 1px solid var(--accent);
	color: #fff;
}
#wrapper .collection-plugin .btn.btn-red:hover {
	background: var(--accent-ink);
	border-color: var(--accent-ink);
}

/* `#cartModal .confirmation-text { margin-left: 10px }` in the collection plugin's main.css
   indents the heading only - it stood 10px to the right of its own paragraph */
/* confirmation step: centred block with room above - the modal title is hidden on this
   step ( aflc.html ), so the heading carries the page on its own */
#wrapper #cartModal .confirmation-text-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 260px;
	padding: 24px 0;
	text-align: center;
}
#wrapper #cartModal .confirmation-text {
	margin: 0 0 30px 0;
	color: var(--accent-heading);
	font-size: var(--fs-heading);
	font-weight: 600;
	line-height: 1.3;
    text-transform: uppercase;
}
/* max-width, sonst laeuft der Absatz ueber die ganze Modalbreite und bricht erst am Rand -
   text-align zentriert nur die Zeilen, es begrenzt ihre Laenge nicht */
#cartModal .confirmation-text-container p {
	max-width: 34em;
	margin: 0 auto;
	color: var(--ink-2);
	font-size: var(--fs-body);
	line-height: 1.5;
}
/* the title is removed from the DOM on the confirmation step - without this the close
   button would slide to the left edge of the space-between header */
#cartModal .modal-header .close {
	margin-left: auto;
}

/* --- header cart icon -------------------------------------------------- */

#headerPlugins > .column .mpg-content .collection-plugin a {
	color: var(--ink);
}
#headerPlugins > .column .mpg-content .mpg-widget.mpg-collection {
	margin-top: -2px;
}
.aShowCart {
	display: flex;
	flex-direction: row !important; /* the header column sets flex-direction:column on its children */
	padding: 4px;
	cursor: pointer;
}
a.aShowCart p {
	display: none;
}
.aShowCart sup {
	position: absolute;
	top: -8px;
	left: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-size: 10px;
}

/* --- mobile ------------------------------------------------------------ */

/* The cart table is built from fixed px columns ( --cart-price-col + --cart-action-col ).
   Together with the name column they need ~365px, more than a 375px phone offers once the
   modal padding is subtracted, so the table overflows its own modal. Below 576px the price
   column shrinks to its content and the action column to the button it holds ( 36px ).
   The !important rules undo an older `@media (max-width:819px)` block further up
   ( search th-remove ) which pins the remove column to 5px and pulls it out of the flow -
   that block styles a card layout whose markup this template does not render. */
@media (max-width: 575px) {
	#cartModal {
		--cart-price-col: auto;
		--cart-action-col: 36px;
		--cart-cell-gap: 4px;
	}

	#cartModal .th-remove,
	#cartModal #no-more-tables .table.table-borderless thead > tr th:last-child {
		width: var(--cart-action-col) !important;
	}
	#cartModal #no-more-tables > table.table.table-borderless > tbody > tr > td:last-child {
		position: relative !important;
		width: var(--cart-action-col) !important;
	}

	/* same block again: it turns the icon button into display:block and gives it
	   `padding: 15px 0 0 30px`, which pushes the 15px ::before glyph out of its own
	   36px box ( 30 + 15 = 45 ) and leaves an empty square with a stray x beside it */
	#wrapper #cartModal .btn.btn-remove {
		display: inline-flex !important;
	}
	#cartModal #no-more-tables .table.table-borderless td:last-child button {
		padding: 0;
	}

	/* The mobile accordion header carries a second "weiter" button and a chevron across the
	   step content, its toggle is a dead `ng-click="test"`, and it is titled with the wrong
	   step ( "Adresspruefung" on the addressManagement pane ). Only one of four panes ever
	   had one, so it is noise rather than navigation - the footer button does the job. */
	#cartModal .card-header.d-sm-none {
		display: none;
	}

	/* The name cell holds a Bootstrap `col-sm-10`, and that resolves to flex: 0 0 83.3333%
	   even down here: the course day table was squeezed into 196 of the 235px the cell
	   actually had and wrapped far earlier than it needed to. Measured: 39px handed back. */
	#cartModal .displayNameContainer {
		flex: 1 1 auto !important;
		max-width: none !important;
		width: auto !important;
	}

	/* The same insets the app's own modals use below 767px ( padding: 24px 20px 0, see
	   .cancel-modal and friends ), so the cart reads like the rest of them instead of sitting
	   8px off the edge. The price column pays for it: at 20px the three columns want 372 of
	   348 available, so the amount is allowed to break into "2,800.00" / "EUR" again. */
	.collection-plugin .modal-header,
	.collection-plugin .modal-body {
		padding-right: 20px;
		padding-left: 20px;
	}
	/* Mobile only: a divider under the modal title. The header ships without bottom padding
	   ( 24px 20px 0 ), so a bare border-bottom would glue the line to the title - it needs its
	   own padding first, and the gap below the title then moves from the body onto the header.
	   Measured: title -> 17px -> line -> 20px -> content, line edge to edge over 388px. */
	.collection-plugin .modal-header {
		padding-bottom: 16px;
		border-bottom: 1px solid var(--border);
	}
	.collection-plugin .modal-body {
		padding-top: 20px;
	}

	/* Full-screen sheet. The modal used to be a card that grew with its content while the
	   PAGE scrolled: .modal-body carries overflow-y:auto but had no height cap, so it could
	   never scroll itself ( measured scrollHeight == clientHeight ) and pushed the total and
	   the buttons ~480px below the fold. Now the dialog is exactly the viewport, the body is
	   the only scroller and the footer stays put. dvh first so the mobile browser chrome is
	   accounted for, vh in front of it as the fallback for engines without dvh. */
	.collection-plugin #cartModal {
		height: 100vh;
		height: 100dvh;
		min-height: 0;
		overflow: hidden;
	}
	#wrapper #cartModal .modal-dialog {
		top: 0;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	.collection-plugin .modal-content {
		height: 100%;
		border-radius: 0;
	}
	#cartModal .modal-dialog .modal-body {
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
		overflow-y: auto;
		/* the sticky total below can only travel to the bottom of the scrollport - any
		   bottom padding here strands it exactly that far above the button row */
		padding-bottom: 0;
		scrollbar-width: thin;
	}
	/* mirrors the sticky action bar of the app modals: same insets, same 1px line. The line
	   belongs on the footer and not on the total above it - the address step carries no total
	   and was left with no separator at all. */
	.collection-plugin .modal-footer {
		flex: 0 0 auto;
		padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
		border-top: 1px solid var(--border);
	}

	/* the total is the last child of the step, so pinning it to the bottom of the scroller
	   parks it directly on the button row and keeps the amount on screen while the positions
	   scroll underneath. Needs its own background - the list runs through beneath it. */
	#wrapper #cartModal .total-price-container {
		position: sticky;
		bottom: 0;
		z-index: 1;
		margin-top: 0;
		padding-bottom: 16px;
		background: var(--surface);
	}

	/* The row becomes a grid so the title can use nearly the full width while the bin stays
	   top right and the price drops to the bottom. display:contents dissolves the three
	   wrappers ( td.nameCell > .displayNameWithRemoveBtn > .displayNameContainer ) so the
	   server blob's <p> and <table> become grid items of the row itself - otherwise nothing
	   inside the name cell could ever leave it. !important throughout: the 819px block further
	   up forces `table tr { display: table-row !important }` and swallows a plain rule. */
	/* Anchor on .tbl-item-container, NOT on table.tbl-collection-items: the completion step
	   renders the same markup without that class ( aflc.html:600 vs :68 ), so scoping on it
	   left the order overview on the old layout with the price still top right. The
	   `> ##no-more-tables >` in the path keeps the nested course day table out of this. */
	#cartModal .tbl-item-container > #no-more-tables > table thead {
		display: none !important;
	}
	#cartModal .tbl-item-container > #no-more-tables > table > tbody > tr {
		display: grid !important;
		grid-template-columns: 1fr auto;
		column-gap: 10px;
		row-gap: 6px;
		align-items: start;
	}
	/* .displayNameContainer exists in the cart only - in the completion step the blob sits
	   directly inside .columnValue, so both levels have to dissolve */
	#cartModal .tbl-item-container > #no-more-tables > table > tbody > tr > td.nameCell,
	#cartModal .displayNameWithRemoveBtn,
	#cartModal .displayNameContainer {
		display: contents !important;
	}
	#cartModal .cart-module-title {
		grid-column: 1;
		grid-row: 1;
	}
	#cartModal .tbl-item-container > #no-more-tables > table > tbody > tr > td.removeBtnDesktop {
		display: block !important;
		grid-column: 2;
		grid-row: 1;
		width: auto !important;
		position: relative !important;
		padding: 0 !important;
	}

	/* the add/edit address buttons carry a global margin-left:16px, which indents them against
	   the selects above ( measured: buttons at 37, selects at 21 ). Flush left instead, and a
	   gap between the two rather than in front of the first. */
	#cartModal .btn.btn-addAddress {
		margin-left: 0;
	}
	#cartModal .btn.btn-addAddress ~ .btn.btn-addAddress {
		margin-left: 10px;
	}
	#cartModal .cart-module-subtitle {
		grid-column: 1 / -1;
	}
	/* price last and right aligned, so the title above is not capped by a price column */
	/* The Teil-A rule above pins td:last-child to --cart-action-col so the remove column keeps
	   its 36px. In the completion step there IS no remove button, so the PRICE cell is the
	   last child - and --cart-action-col is 0px there, which collapsed the price to width 0
	   and spilled its content 77px out of the modal. Exempt it rather than out-specify it:
	   that rule was always meant for the action column, never for the price. */
	#cartModal #no-more-tables > table.table.table-borderless > tbody > tr > td:last-child.totalPriceWithTax {
		width: auto !important;
	}
	/* full row width + text-align instead of justify-self: shrink-to-fit is what produced the
	   zero width in the first place */
	#cartModal .tbl-item-container > #no-more-tables > table > tbody > tr > td.totalPriceWithTax {
		display: block !important;
		grid-column: 1 / -1;
		justify-self: stretch;
		width: auto !important;
		text-align: right !important;
		position: relative !important;
		white-space: nowrap;
		padding: 0 !important;
	}

	/* Course days fold away behind a "N Kurstage" line. The checkbox stays in the dom and
	   focusable ( not display:none ) so the label keeps working for keyboard and screen
	   readers; it is only pulled out of sight. */
	#cartModal .cart-days-summary {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		grid-column: 1 / -1;
		justify-self: start;
		margin-top: 12px;
		color: var(--ink-2);
		font-size: var(--fs-meta);
		cursor: pointer;
	}
	/* without a caret nothing tells the user the line can be opened at all */
	#cartModal .cart-days-summary::after {
		content: '';
		flex: 0 0 auto;
		width: 12px;
		height: 12px;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
		transition: transform 150ms;
	}
	#cartModal .cart-days-toggle:checked ~ .cart-days-summary::after {
		transform: rotate(180deg);
	}
	#cartModal .cart-days-toggle {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		pointer-events: none;
	}
	/* !important on both: the 819px block further up carries `##cartModal table { display:
	   table !important }` ( search: ABO - fix for cart mobile ) and silently swallows a plain
	   display rule here - measured, the table stayed visible with the box unchecked.
	   min-width:0 is the second load-bearing part: without it the table keeps its content
	   width as its automatic minimum, blows the row open and takes the modal with it
	   ( measured: bodyOverflowX 220 ). With it it scrolls inside its own box ( 235 in 181 ). */
	#cartModal .cart-days-toggle:not(:checked) ~ .cart-module-coursedays {
		display: none !important;
	}
	#cartModal .cart-days-toggle:checked ~ .cart-module-coursedays {
		display: block !important;
		min-width: 0;
		overflow-x: auto;
	}

	/* The total keeps a --cart-action-col margin so it lines up above the remove column on
	   desktop. Down here the price is no longer a column - it spans the whole row - so that
	   margin just parks the amount 36px short of the edge ( measured: total ends at 333, row
	   at 369 ). Drop both offsets and let it sit on the same right edge as everything else. */
	#wrapper #cartModal .total-price-container .total-price {
		width: auto;
		margin-right: 0;
		padding-right: 0;
	}

	/* the app's bottom bar is position:fixed at z-index 9990 and therefore paints over
	   the cart ( 1040 ) and the address modal ( 1050 ), covering their lowest 63px */
	body.modal-open .aflc-app .dashboard-nav {
		display: none;
	}
}

/* --- misc -------------------------------------------------------------- */

.collection-loader {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1000;
	width: 80px;
	transform: translate(-50%, -50%);
}

@media (min-width: 576px) {
	.collection-plugin .modal-dialog {
		max-width: 500px;
		margin: 1.75rem auto;
	}
}