/* TABLE CSS Document iV4 FRONT */

/*** DEFAULT TABLE ***/
/* transparent table with colored tableheader */
table.default {
	width:100%;
	border:1px solid #c0c0c0;
	border-radius:3px;
	-moz-border-radius:3px 3px 3px 3px;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-left-radius:3px;
	-webkit-border-bottom-right-radius: 3px;
	}
	table.default th {
		background-color:#c0c0c0;
		color:#ffffff;
		font-weight:bold;
		padding:2px 5px;
		font-size:/*11px;*/91.66666%;
		text-transform:uppercase;
		text-align:left;
		}
	table.default tbody tr:hover {
		background-color:#ededed;
		}
		table.default tbody tr.no_hover:hover {
			background-color:transparent;
			}
			
		table.default td {
			padding:2px 5px;
			vertical-align:middle;
			font-size:/*11px;*/91.66666%;
			border-left:1px solid #ededed;
			border-top:1px solid #ededed;
			}
			table.default td:first-child {
				border-left:0px solid #ededed;
				}
			table.default td.tiny {
				padding:0px 5px;
				}
			table.default td.icon {
				width: 36px;
				height:24px;
				}
				table.default td.icon span {
					width:32px;
					}
					
/*** MODULETABLE ***/
/* transparent table with transparant tableheader, looks as if the table is a part of the moduleblock itself */
table.moduletable {
	margin:0;
	width:100%;
	}
	table.moduletable th {
		color:#838383;
		font-weight:bold;
		padding:2px 5px;
		font-size:/*11px;*/91.66666%;
		text-transform:uppercase;
		text-align:left;
		border-bottom:1px solid #cccccc;
		}
	table.moduletable tbody tr:hover {
		background-color:#ededed;
		}
		table.moduletable tbody tr.no_hover:hover {
			background-color:transparent;
			}
			
		table.moduletable td {
			padding:2px 5px;
			vertical-align:middle;
			font-size:/*11px;*/91.66666%;
			border-left:1px solid #ededed;
			border-top:1px solid #ededed;
			}
			table.moduletable td:first-child {
				border-left:0px solid #ededed;
				}
			table.moduletable td.tiny {
				padding:0px 5px;
				min-width:50px;
				}
			table.moduletable td.icon {
				width: 36px;
				height:24px;
				}
				table.moduletable td.icon span {
					width:32px;
					}
			table.moduletable td.red_highligted_border_bottom {
				border-bottom:1px #b60000 dotted;
				}
			table.moduletable td.red_highligted_border_top {
				border-top:1px #b60000 dotted;
				}
			/* get rid of the unwanted border of the tablecell which is needed to display the error message */
			table.moduletable td.no-border-top {
				border-top:0 none;
				}

/*** BORDERLESS TABLE (LESS ready) ***/
/* tables without border and no tableheader, recommend to use with extended table class .formtable (see form.css) */
table.no_border {	
	width:100%;
	border-width:0;
	}
	table.no_border tr:hover {
		/*defined in input.less*/
		}
		table.no_border tr.no_hover:hover,
		.tundra.frontend #new_booking .no-hover-row:hover {
			background-color:transparent;
			}			
		table.no_border th {
			font-weight:bold;
			padding:2px;
			}
		table.no_border td.spacer {			
			padding:2px 5px 2px 10px;
			width:1em;
			}
		table.no_border td {			
			padding:2px;
			}
			table.no_border td.checkboxTableCell {
				width:25px;
				}	

/*** FORM TABLE ****/
/* table used to display a form (see form.css) */
table.formtable th {
	text-align:left;
	}
table.formtable th.v-align,
table.formtable td.v-align {
	vertical-align:top;
	}

/***TopBottomBorderOnly***/
/*used with default, only top and bottom borders are displayed, no radius. For example used in mod=filter *save-mode* to show text with a top and bottom border*/
table.TopBottomBorderOnly {
	border-left-width:0;
	border-right-width:0;
	border-radius:0;
	-moz-border-radius:0;
	-webkit-border-top-left-radius: 0;
	-webkit-border-top-right-radius: 0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-bottom-right-radius: 0;
	}
	table.TopBottomBorderOnly td {
		padding-bottom:10px;
		}

/***TopBorderOnly***/
/*used with default, only top border is displayed, no radius. For example used in mod=filter *save-mode* to show text with a top border*/
table.TopBorderOnly {
	border-left-width:0;
	border-right-width:0;
	border-bottom-width:0;
	border-radius:0;
	-moz-border-radius:0;
	-webkit-border-top-left-radius: 0;
	-webkit-border-top-right-radius: 0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-bottom-right-radius: 0;
	}
	table.TopBorderOnly td {
		padding-bottom:10px;
		}
	
/*** SETTING TABLE ***/
/* tables used for Edit Setting Mode: use table class .default with the extended tableclass .setting */
table.setting {
	margin:0 0 5px 0;
	width:100%;
	border-width:0px;
	}
	table.setting th {
		background-color:transparent;
		color:#a1a1a1;
		font-weight:bold;
		padding:2px 5px;
		font-size:/*11px;*/91.66666%;
		text-transform:uppercase;
		text-align:left;
		border-bottom:1px solid #cccccc;
		}
	table.setting td {
		padding:5px;
		}
		table.setting td.top {
			vertical-align:top;
			}
			table.setting td.top .dojoDndItem {
				margin-top:5px;
				}
				table.setting td.top .dojoDndItemOver {
					color:#0f5132;
					}
				table.setting td.top .dojoDndItemAnchor,
				table.setting td.top .dojoDndItemSelected {
					text-decoration:underline;
					}
				table.setting td.top .dojoDndItemBefore,
				table.setting td.top .dojoDndItemAfter {
					border-color:#C0C0C0;
					}
					/*** DnD BOX ***/
					.tundra table.dojoDndAvatar { 
						border: solid 1px #cccccc!important;
						border-collapse:separate!important;
						-webkit-border-radius: 5px!important; 
						-moz-border-radius: 5px!important; 
						border-radius: 5px!important;
						background-color:#ffffff;
						font-size: 90%!important; 
						color: #212121!important;
						min-width:100px;
						border-spacing:3px;
						}
						.tundra .dojoDndAvatarHeader td	{ 
							height: 24px!important; 
							padding: 2px 2px 2px 25px!important; 
							}
						.tundra .dojoDndAvatarItem td { 
							padding: 2px;
							}
						.tundra.dojoDndMove .dojoDndAvatarHeader {
						 	background-color: #b60000!important;
							background-image: url('../images/dnd_icon.png')!important;
							}
						.tundra.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader {
							background-color: #0f5132!important;
							background-image: url('../images/dnd_icon.png')!important;
							}	
						/***** display no buttons in DnD popup ******/
						.tundra table.dojoDndAvatar .dijitButton {display:none;}						
					/*** /DnD BOX ***/	

/**************    SETTINGS NEEDED WHEN BOOTSTRAP IS USED    ******************************/
/* on the CONFIRM BOOKING PAGE the extended td class 'button-container' is used in 
combination with the class 'right' to add an extra padding to the right side of the tablecell
Needed for proper alignement of the buttons regardless if the validation messages are displayed
or not... */
.bootstrapfront .bt_maincontent #confirm_container td.right.button-container {
		padding-right:0.5em;
		}

/* on the CONFIRM BOOKING PAGE we don't want the default module marin around the price table */
.bootstrapfront .bt_maincontent #confirm_container div.no-margin .module {
	margin:0;
	border:none 0;
	box-shadow: none;
	-moz-box-shadow:none;
	-webkit-box-shadow: none;
	width:100%;
	}
	.bootstrapfront .bt_maincontent #confirm_container div.no-margin .inline_table { /* see also input.less table section!*/
		margin:0;
		}

/* SPECIAL RESPONSIVE TABLE (f.e. for pricing table on confirm page)       *
* when the screen is too narrow, it reformats (via only CSS) to make       *
* each row a bit like it's own table. This makes for much more             *
* repetition and vertical space needed, but it fits within the             *
* horizontal space, so only natural vertical scrolling is needed to        *
* explore the data.                                                        *
* (http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table */
#no-more-tables td .spacer { 
	display:none;
	}
.bootstrapfront .bt_maincontent #no-more-tables table {
	border-collapse:seperate;
	}
/* max img width for payment provider logo images - only needed for SM + XS Devices and not for Memo Options images  */
@media only screen and (max-width: 991px) {
	.bootstrapfront .bt_maincontent #no-more-tables td:not(.ext_long_memo) div img {
		max-width:200px;
	}
	/*.bootstrapfront .bt_maincontent #no-more-tables .options_change td div img {
		max-width:100%;
	}*/
}
@media only screen and (max-width: 767px) {
	.bootstrapfront .bt_maincontent #no-more-tables td:not(.ext_long_memo) div img {
		max-width:150px;
	}
	/*.bootstrapfront .bt_maincontent #no-more-tables .options_change td div img {
		max-width:100%;
	}*/
}
	 
@media only screen and (max-width: 627px) {    
    /* Force table to not be like tables anymore */
	.bootstrapfront .bt_maincontent #no-more-tables table, 
	.bootstrapfront .bt_maincontent #no-more-tables thead, 
	.bootstrapfront .bt_maincontent #no-more-tables tbody, 
	.bootstrapfront .bt_maincontent #no-more-tables th, 
	.bootstrapfront .bt_maincontent #no-more-tables td, 
	.bootstrapfront .bt_maincontent #no-more-tables tr { 
		display: block; 
		}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	.bootstrapfront .bt_maincontent #no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
		}
 
	.bootstrapfront .bt_maincontent #no-more-tables tr { 
		border-bottom-style:solid;
		border-bottom-width:1px;
		}
		.bootstrapfront .bt_maincontent #no-more-tables tr:last-child {
			border-bottom-width:0;
			}
 
	.bootstrapfront .bt_maincontent #no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom-style:solid;
		border-bottom-width:1px; 
		position: relative;
		padding-left: 50%!important; 
		white-space: normal;
		text-align:left;
		overflow:hidden;
		}
		.bootstrapfront .bt_maincontent #no-more-tables tr:last-child td:last-child {
			border-bottom-width:0;
			}
			
		.bootstrapfront .bt_maincontent #no-more-tables td .spacer {
			display:inline-block;
			float:left; 
			padding-right:5px;
			}
		.bootstrapfront .bt_maincontent #no-more-tables td .content-tablecell {
			min-height:1.4em;
			}
		.bootstrapfront .bt_maincontent #no-more-tables td div {
			min-height:2em;
		}
		.bootstrapfront .bt_maincontent #no-more-tables td div.stepper-wrapper,
		.bootstrapfront .bt_maincontent #no-more-tables td div.stepper-option-inner {
			min-height: auto;
		}
		.bootstrapfront .bt_maincontent #no-more-tables td div.stepper-wrapper > *,
		.bootstrapfront .bt_maincontent #no-more-tables td div.stepper-option-inner > * {
			min-height: auto;
		}
		.bootstrapfront .bt_maincontent #no-more-tables td:not(.ext_long_memo) div img {
			max-width:140px;
		}
	
	.bootstrapfront .bt_maincontent #no-more-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
		} 
	/*	Label the data	*/
	.bootstrapfront .bt_maincontent #no-more-tables td:before { content: attr(data-title); }
	/* we need some adjusted settings for Row Total */
	.bootstrapfront .bt_maincontent #no-more-tables tr.row_total td:before { content:""; }
		.bootstrapfront .bt_maincontent #no-more-tables tr.row_total td:first-child:before { 
			content: attr(data-title); 
			text-transform:uppercase;
			}

	/* stepper-options 5.42++ */
   .bootstrapfront .bt_maincontent #no-more-tables .options_change td {
		padding-left: 30% !important;
		}
	.bootstrapfront .bt_maincontent #no-more-tables .options_change td::before {
		width: 25%;
		}
}

/* we don't want the default set margin in the special responsive tables, added class 'btn-no-margin' for tablecell containing the buttons */
.tundra.frontend .maincontent .btn-no-margin .dijitButton, 
.tundra.frontend .bt_maincontent .btn-no-margin .dijitButton, 
.tundra.frontend #new_booking .btn-no-margin .dijitButton {
	margin:0;
	}
	
/* nice alignment setting for table th.subhead so the subheader is aligned above the ":" of the td.spacer + add some space between table row with subheads and row above; used for table in booking_conf_details_overflow, booking_conf_details_slot +  booking_conf_details*/
th.subhead {
	padding-top:10px!important;
	}
	th.subhead.col-second {
		padding-left:10px;
		}
		
/* styling DYNAMIC TIME BLOCK */
/* updated jul 2019 due to slotbuttons (IRES-10260) */
tr.show_time td:first-child,
tr.show_starttime td:first-child {
	padding:10px 0 15px;
	}
	tr.show_time #selected_slots_div,
	tr.show_starttime #selected_slots_div {
		background-color:rgba(0,0,0,0.05);
		padding:5px;
		border-radius:4px;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		}
		tr.show_time #selected_slots_div .time-subhead,
		tr.show_starttime #selected_slots_div .time-subhead {
			width:5em;
			}
			tr.show_time #selected_slots_div button.ui-button,
			tr.show_starttime #selected_slots_div button.btn.slotbutton {
				margin-bottom:3px;
				}				
				tr.show_starttime #selected_slots_div button.btn.slotbutton {
					margin-top:0;
					}
	/* no hover table row(s) for table row #selected_slots + inside #selected_slots_div */
	#selected_slots,
	#selected_slots_div table.no_border tr:hover {
		background-color:transparent;
		}
				
#no-more-tables .table-striped.options_change td {
	padding:5px;
	}
		/* optiontype A */
		.ext_options #calendar_options div.icheckbox_flat {
			position:relative;
			top:0;
			}
			.ext_options #calendar_options label {
				cursor:pointer;
				min-height:20px;
				line-height:20px;
				white-space: nowrap;
				margin-left: 5px;
				margin-bottom:0;
				}
		/* optiontype B */
		.ext_options #calendar_options div.labeldiv {
			min-height: 44px;
			line-height: 44px;
			white-space: nowrap;
			font-weight: bold;
			float: left;
			margin-left: 5px;
			}
		/* stepper: option layout - stepper + label side by side */
		.stepper-option-inner {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 10px;
			}
			.stepper-option-control {
				flex-shrink: 0;
				}
			.stepper-option-label {
				flex: 1 1 auto;
				font-weight: bold;
				}
		/* stepper input (plus/minus buttons) - standalone, no Bootstrap dependency */
		.stepper-wrapper {
			display: flex;
			flex-wrap: nowrap;
			align-items: stretch;
			max-width: 180px;
			}
			.stepper-wrapper .stepper-btn {
				width: 40px;
				min-width: 40px;
				height: 44px;
				padding: 0;
				border: 1px solid #ccc;
				background: #fff;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 1rem;
				color: #333;
				flex-shrink: 0;
				-webkit-user-select: none;
				user-select: none;
				-ms-touch-action: manipulation;
				touch-action: manipulation;
				}
				.stepper-wrapper .stepper-btn:hover {
					background: #e9ecef;
					}
				.stepper-wrapper .stepper-btn:active {
					background: #dee2e6;
					}
			.stepper-wrapper .stepper-minus {
				border-radius: 4px 0 0 4px;
				border-right: none;
				}
			.stepper-wrapper .stepper-plus {
				border-radius: 0 4px 4px 0;
				border-left: none;
				}
			.stepper-wrapper .stepper-input {
				-webkit-box-flex: 1;
				-ms-flex: 1 1 auto;
				flex: 1 1 auto;
				width: 1%;
				min-width: 50px;
				height: 44px;
				border: 1px solid #ccc;
				text-align: center;
				font-weight: bold;
				font-size: 1rem;
				padding: 0 4px;
				border-radius: 0;
				-moz-appearance: textfield !important;
				-webkit-appearance: none !important;
				appearance: none !important;
				}
			.stepper-wrapper .stepper-input[type="number"]::-webkit-outer-spin-button,
			.stepper-wrapper .stepper-input[type="number"]::-webkit-inner-spin-button {
				-webkit-appearance: none !important;
				display: none !important;
				margin: 0;
				}
			.stepper-wrapper .stepper-input[type="number"] {
				-moz-appearance: textfield !important;
				}
			.stepper-wrapper .stepper-input[readonly] {
				background-color: #e9ecef !important;
				color: #6c757d !important;
				cursor: not-allowed !important;
				border-radius: 4px !important;
				border: 1px solid #ddd !important;
				}
	/* Scale down stepper for small screens */
	@media screen and (max-width:767px) {
		.stepper-wrapper {
			max-width: 140px !important;
			}
		.stepper-wrapper .stepper-btn {
			width: 34px !important;
			min-width: 34px !important;
			height: 38px !important;
			}
		.stepper-wrapper .stepper-input {
			min-width: 40px !important;
			height: 38px !important;
			}
	}
	/* cursor is pointer if a fontawesome Icon is used, so it's clear the icon is clickable */
	/* see color setting in input.less */
	#no-more-tables .table-striped.options_change .ext_long_memo .fa,
	.bookingDetailContent .tab-content #booking_option_container .ext_long_memo .fa {
    	cursor: pointer;
    	}
	/* max width image inside the Memo Column */
	/* this image can be used a a stand alone image OR as a clickable image to open a modal */
	#no-more-tables .table-striped.options_change .ext_long_memo .memoThumb,
	.bookingDetailContent .tab-content #booking_option_container .ext_long_memo .memoThumb {
		max-width:100px;
		height:auto;
		}
		#no-more-tables .table-striped.options_change .ext_long_memo .memoThumb[data-toggle=modal],
		.bookingDetailContent .tab-content #booking_option_container .ext_long_memo .memoThumb[data-toggle=modal] {
			cursor:pointer;
			}

/* Option group section bar (Type N collapsible groups) */
.option-group-bar {
	background-color: #f5f5f5;
	border: 1px solid #e0e0e0;
	cursor: pointer;
	transition: background-color 0.15s ease;
	}
	.option-group-bar:hover {
		background-color: #ebebeb;
		}
	.option-group-bar h5 {
		font-size: 1rem;
		}
	.option-group-bar .badge {
		font-size: 0.75rem;
		font-weight: normal;
		}

/* Option image thumbnails (table view + card view) */
.ext-option-thumb {
	width: 60px;
	height: 60px;
	object-fit: cover;
	}
.ext-card-thumb {
	width: 100%;
	height: 180px;
	object-fit: cover;
	}

/*** BS 5.3 ***/
/* override default BS5.3 setting for table bg + color (conflicteert in dark themes) */
.bootstrapfront .table > :not(caption) > * > * {
    color: inherit;
    background-color: inherit;
    }
/* end override */