/*JQueryUI autocomplete menu items*/
.ui-widget .ui-menu-item{
	text-align: left;
}
.align-right{
	text-align: end;
}
.ui-autocomplete {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.required_holder{
	position: relative;
}

.required_holder span.required::before {
	position: absolute;
	left: -10px;
	content:" * ";
	color: var(--error-text);
}

.required_holder span.required.high::before{
	top: -12px;
}

.required_holder span.required.height_0::before{
	top: 0;
}

.required_holder span.required.height_1::before{
	top: -1px;
}

.required_holder span.required.height_2::before{
	top: -2px;
}

.required_holder span.required.height_3::before{
	top: -3px;
}
.required_holder span.required.height_4::before{
	top: -4px;
}
.required_holder span.required.height_5::before{
	top: -5px;
}
.required_holder span.required.height_6::before{
	top: -6px;
}
.required_holder span.required.height_7::before{
	top: -7px;
}
.required_holder span.required.height_8::before{
	top: -8px;
}
.required_holder span.required.height_9::before{
	top: -9px;
}
.required_holder span.required.height_10::before{
	top: -10px;
}
.required_holder span.required.height_11::before{
	top: -11px;
}
.required_holder span.required.height_12::before{
	top: -12px;
}

/*styling for the growable headliners and supporting acts widgets*/
.growable_widget li{
	list-style-type: none;
}

.growable_widget{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.growable_widget li.bulletless{
	list-style-type: none;
	margin-top: 5px;
	padding:5px;
}
#add_variations_input_group{
	margin: 0;
}

.ts-input-group-icon{
	width: 13px;
}

/*Fixes a Bootstrap bug where the Trent Richardson datetimepicker appears underneath other elements*/
#ui-datepicker-div{
	position: relative;
	z-index: 5000 !important;
	/*I don't know why the number 101 is needed, only that it seems to fix the problem*/
}

.ui-menu{
	position: relative;
	z-index: 100;
}

.ui-autocomplete {
	position: relative;
	cursor: default;
	z-index:101 !important;
}

#pricing_levels_holder {
    margin-bottom: 50px;
	padding-left: 0;
}
#pricing_levels_holder li.pricing_level {
    margin-left:30px;
}
#pricing_levels_holder li.pricing_level {
	list-style-type: none;
	position: relative;
	margin-bottom: 30px;
	border-left:10px solid var(--green-secondary);
	padding:20px;
	background-color:var(--grey-white);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

#pricing_levels_holder .ui-state-highlight, #sections_holder .ui-state-highlight{
	border: thin var(--blue-badge) solid;
}

#pricing_levels_holder .handle, #sections_holder .handle{
	position: absolute;
	top: 0;
	bottom: 0;
	opacity: 0.5;
	background: url(/_images/grab_mesh.png);
	width: 10px;
	z-index: 1;
}

#pricing_levels_holder .handle:hover, #sections_holder .handle:hover{
	cursor: grab;
}

#pricing_levels_holder .info_area, #sections_holder .info_area{
	margin-left: 10px;
	display: block;
	padding: 10px;
}

#pricing_levels_holder .main_area{

}

#pricing_levels_holder .show_outline, #sections_holder .show_outline{
	border: thin var(--blue-badge) solid;
	border-radius: 4px;
}

#pricing_levels_holder li, #sections_holder li{
	list-style-type: none;
	margin: 0;
}

#pricing_levels_holder .taskbar button, #sections_holder .taskbar button{
	/*border: thin #888888 solid;*/
	background: var(--grey-pentadic);
	margin-right: 1px;
}

#pricing_levels_holder .taskbar button:hover, #sections_holder .taskbar button:hover{
	border: thin var(--blue-border) solid;
}

#pricing_levels_holder .taskbar .move_down .fa, #sections_holder .taskbar .move_down .fa{
	position: relative;
	top: -3px;
}

#pricing_levels_holder .taskbar .move_up .fa, #sections_holder .taskbar .move_up .fa{
	position: relative;
	bottom: -3px;
}

/* Legacy .has-error removed — now using BS5 .is-invalid (bootstrap-compat.css)
   and .has-validation-error for container-level validation */


.category{
	border: 0;
	display: inline;
	margin-top: 4px;
	margin-right: 4px;
}

.category_selected{
	background-color: var(--green-tertiary);
}

.category_unselected{
	background: var(--grey-secondary);
}

.category_unselected:hover{
	background: var(--grey-pentadic);
}

.category_unselected:focus{
	background: var(--grey-pentadic);
}

#display_window .category_icon_remove{
	display: none;
}

.category_icon_select{
	color: var(--white);
	display: none;
}

.category_icon_remove{
	color: var(--white);
}


#display_window li.ui-state-default{
	background-color: var(--white);
}

#display_window li.ui-state-active{
	background-color: var(--grey-secondary);
	border: 1px solid var(--grey-pentadic);
}

#display_window li.ui-state-hover{
	outline: var(--red-primary);
}

#display_window .ui-tabs-anchor{
	background: none;
	color: var(--black);
	outline: none;
	border: none;
}

._draggable:hover{
	cursor: grab;
}

/* Add-On modify form */
#formAddOn {
	z-index: -999;
}

#notes {
	resize: none;
}

/* Add-On event list */
#event-list {
	max-height: 400px;
}

.event-item:hover {
	background-color: var(--grey-white);
}

.event-item .condition-btn.has-condition {
	background-color: var(--green-primary);
	color: var(--white);
	border-color: var(--green-primary);
}

/* Add-On tabs */
#addonTabs .nav-link {
	color: var(--green-primary);
}

#addonTabs .nav-link:hover {
	color: var(--green-secondary);
}

#addonTabs .nav-link.active {
	color: var(--green-primary);
	font-weight: 600;
}