@charset "utf-8";
/*
    osta/Linder Header Navigation Project
*/
#header-constrain {
	width: 100% !important;
}
#nav2 li {
    list-style: none;
    float: left;
}
div#nav2 li.subnav-icon a:after {
    margin-left: 2px;
}
#nav2 ul.submenu {
    margin: 0;
    position: absolute;
    display: block;
    -moz-box-shadow: 3px 3px 3px #ccc;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear, opacity 0.1s linear;
	padding: 5px 0px;
    width: 199px;
}
li.inactive.subnav-icon:hover ~ ul.submenu,
ul.submenu:hover {
	visibility: visible !important;
    opacity: 1 !important;
    transition-delay: 0.25s !important;
    position: absolute !important;
    top: 48px;
    background: #fff;
}
ul.submenu li a:hover {
    background-color: rgba(0,0,0,0.1);
}
table.list.queue.tickets td:first-child {
    padding-left: 7px;
}
.sticky.bar.opaque.fixed .pull-left h2 a[title="Refresh"] svg {
    fill: #8BCB0D;
}
.sticky.bar .action-button span,
.sticky.bar .action-button a {
    float: left;
}
/* Ticket form table: reduce label column width to avoid large gaps */
table.ticket_info.custom-data td:first-child {
    width: 1% !important;
    max-width: none;
    white-space: nowrap;
    padding-right: 10px;
}
table.ticket_info.custom-data td.field-actions {
    width: 22px;
    padding-left: 4px;
    padding-right: 4px;
}
/* Align wrench dropdown icon with other action buttons in sticky bar */
.sticky.bar .action-button i.icon-wrench {
    width: 16px;
    height: 16px;
    top: 2px !important;
    float: none !important;
    display: inline-block;
    background-size: 16px !important;
    background-position: center center;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 24 24'%3E %3Cpath fill='%23128DBE' d='M22.7%2C19L13.6%2C9.9C14.5%2C7.6 14%2C4.9 12.1%2C3C10.1%2C1 7.1%2C0.6 4.7%2C1.7L9%2C6L6%2C9L1.6%2C4.7C0.4%2C7.1 0.9%2C10.1 2.9%2C12.1C4.8%2C14 7.5%2C14.5 9.8%2C13.6L18.9%2C22.7C19.3%2C23.1 19.9%2C23.1 20.3%2C22.7L22.6%2C20.4C23.1%2C20 23.1%2C19.3 22.7%2C19Z' /%3E %3C/svg%3E");
}
.customQ-dropdown li.personalQ {
    display: none;
}
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover {
    background-color: initial;
}
@media screen and (min-width: 0px) {
	#header {
		background-image: -webkit-linear-gradient(top,#3c3c3c 0,#222 100%);
		background-image: -o-linear-gradient(top,#3c3c3c 0,#222 100%) !important;
		background-image: -webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#222)) !important;
		background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%) !important;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
		background-repeat: repeat-x;
		background-color: #222;
		border-radius: 0;
		padding-right: 0px;
		padding-left: 0px;
		margin-right: auto;
		margin-left: auto;
		height: 50px !important;
	}
	a#header-logo {
		display: none;
	}
	#header #nav a,
	#header #nav2 a {
		color: #9d9d9d;
		font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
		padding-top: 14px;
		padding-bottom: 14px;
		line-height: 22px;
		font-size: 16px;
		padding: 14px 15px;
		font-weight: initial;
		letter-spacing: 0;
		position: relative;
		top: -1px !important;
	}
	#header #nav > li > a,
	#header #nav2 > li > a,
	#header #nav > a,
	#header #nav2 > a,
	#header #nav2 > span > a {
		box-sizing: border-box;
		display: inline-block;
		height: 50px;
		line-height: 50px;
		padding-top: 0;
		padding-bottom: 0;
		top: 0 !important;
	}
	#header #nav a:hover,
	#header #nav2 a:hover {
		color: #ffffff;
	}
	#header #nav > li,
	#header #nav2 > li,
	#header #nav > li + li,
	#header #nav2 > li + li {
		display: inline-block;
		height: 50px;
		line-height: 50px;
		margin: 0 -4px;
		vertical-align: top;
	}
	#header #nav > a,
	#header #nav2 > a,
	#header #nav2 > span {
		display: inline-block;
		height: 50px;
		line-height: 50px;
		vertical-align: top;
	}
	#nav.pull-right,
	#nav2.pull-right {
		float: left;
		/*background: ;*/
		position: initial;
		color: initial;
		height: 50px;
		line-height: 50px;
		padding: initial !important;
	}
	#nav2.pull-right {
		float: right;
	}
	#nav a {
		margin-left: 0;
	}
	#nav a svg,
	#nav2 a svg {
		fill: #9d9d9d;
		text-shadow: 0 -1px 0 rgba(0,0,0,.25);
		display: inline-block;
		width: 17px;
		height: 17px;
		content: "";
		position: relative;
		top: 1px;
		margin-left: 4px;
		margin-right: 4px;
	}
	#nav a:hover > svg,
	#nav2 a:hover > svg {
		color: #fff;
		fill: #fff;
	}
	li.subnav-icon a:after {
		content: ' ';
	}
	li.subnav-icon a:after {
		display: inline-block;
		width: 0;
		height: 0;
		margin-left: 5px;
		vertical-align: middle;
		border-top: 4px dashed;
		border-right: 4px solid transparent;
		border-left: 4px solid transparent;
	}
	li ul li a:after,
	a[href*="tickets.php"]:after {
		display: none !important;
	}
	#header #nav li.active {
		background: transparent;
		border-color: transparent;
		box-shadow: none;
		height: 50px !important;
		max-height: 50px;
		overflow: hidden;
	}
	#header #nav li.active > a {
		background: linear-gradient(var(--nav-bar-link), var(--nav-bar-link)) left bottom / 100% 2px no-repeat !important;
		color: #fff !important;
		box-shadow: none;
		box-sizing: border-box;
		display: inline-block;
		height: 50px;
		line-height: 50px;
		padding-top: 0;
		padding-bottom: 0;
		top: 0 !important;
	}
	#header #nav li.inactive > a:hover {
		background: rgba(255,255,255,0.08) !important;
		color: #fff !important;
	}
	#nav.pull-right li.inactive > ul,
	ul.submenu {
		top: 49px;
		float: left;
		min-width: 160px;
		font-size: 16px;
		text-align: left;
		list-style: none;
		background-color: #fff;
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
		border: 1px solid #ccc;
		border: 1px solid rgba(0,0,0,.15);
		border-radius: 4px;
		-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
		box-shadow: 0 6px 12px rgba(0,0,0,.175);
	}
	ul.submenu {
		top: 50px !important;
	}
	a#osticket-home {
		font-size: 20px !important;
		position: relative;
		top: 0px;
		letter-spacing: -1px;
	}
	#header a[href*="/profile.php"] svg {
		display: inline !important;
		width: 13px;
		height: 13px;
		margin: 0 -1px 0 0;
	}
	#header a[href*="https://wportal.wlin.de/"] svg {
		display: inline !important;
		width: 15px;
		height: 15px;
		margin: 0 -1px 0 0;
		position: relative;
		top: 2px;
	}
	/* SUBNAV */
	#sub_nav-wrap,
	#sub_nav-wrap2,
	nav#customQ_nav,
	nav#customQ_nav #sub_nav {
		box-sizing: border-box;
	}
	#sub_nav-wrap,
	#sub_nav-wrap2,
	nav#customQ_nav {
		height: 30px !important;
		background: #a8a8a8;
	}
	nav#customQ_nav #sub_nav {
		height: 30px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
		border-left: 0;
		border-right: 0;
	}
	#customQ_nav .jb-overflowmenu-menu-primary li.item {
		height: 30px;
		padding: 0 10px;
		margin: 0;
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
	}
	#customQ_nav .jb-overflowmenu-menu-primary li.item:hover {
		padding: 0 10px;
	}
	#customQ_nav .jb-overflowmenu-menu-primary li.item > a,
	#sub_nav > li > a {
		height: 30px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
	}
	#customQ_nav #sub_nav > li:first-child > a {
		margin-left: 0 !important;
	}
	#customQ_nav #sub_nav .small.icon-sort-down.pull-right {
		display: none !important;
	}
	#content {
		margin: 80px auto !important;
	}
	#sub_nav-wrap {
		margin: 0 auto !important;
		position: absolute !important;
		top: 50px !important;
		width: 100% !important;
	}
	#nav .inactive li {
		padding: 0;
		min-width: 160px;
	}
	#nav .inactive li,
	#nav2 li ~ li {
		left: -1px;
		top: 48px;
		padding: 0;
	}
	/* Staff main-nav dropdown entries need an explicit dark text color.
	   The live markup does not reliably carry .subnav-icon on the parent <li>,
	   so target the rendered submenu structure directly. */
	#header #nav li.inactive > ul li a,
	#nav2 ul.submenu li a	{
		display: inline-block;
	    padding: 3px 0px 3px 20px !important;
		clear: both;
		font-weight: 400;
		line-height: 1.42857143;
		color: #2E2E2E !important;
		white-space: nowrap;
		font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
		width: 100%;
		min-width: 160px;
	}
	#header #nav li.inactive > ul li a:hover,
	#nav2 ul.submenu li a:hover {
		color: #111111 !important;
	}
	#header #nav li.inactive.subnav-icon li a:hover > #nav li.inactive:hover > ul {
		visibility: visible;
		opacity: 1;
		transition-delay: 0.25s;
	}
	.jb-overflowmenu-menu-primary div.customQ-dropdown {
		left: 8px;
		top: 27px;
	    box-shadow: initial;
	}
	.customQ-dropdown ul li:not(.personalQ):hover,
	.customQ-dropdown .add-queue a:hover {
		background-color: #929292 !important;
	}
	#sub_nav a,
	.customQ-dropdown li:not(.personalQ) > span,
	.customQ-dropdown .add-queue a:hover span {
		color: var(--nav-bar-link) !important;
	}
	.customQ-dropdown i.icon-plus-sign {
		background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23333333' d='M15.5%2C14L20.5%2C19L19%2C20.5L14%2C15.5V14.71L13.73%2C14.43C12.59%2C15.41 11.11%2C16 9.5%2C16A6.5%2C6.5 0 0%2C1 3%2C9.5A6.5%2C6.5 0 0%2C1 9.5%2C3A6.5%2C6.5 0 0%2C1 16%2C9.5C16%2C11.11 15.41%2C12.59 14.43%2C13.73L14.71%2C14H15.5M9.5%2C14C12%2C14 14%2C12 14%2C9.5C14%2C7 12%2C5 9.5%2C5C7%2C5 5%2C7 5%2C9.5C5%2C12 7%2C14 9.5%2C14M12%2C10H10V12H9V10H7V9H9V7H10V9H12V10Z' /%3E %3C/svg%3E")
	}
	/* SEARCH FIELD */
	.pull-right.flush-right {
		margin: 0px 0px 6px 0;
	}
	form[action="kb.php"] .input.attached input,
	form[action="orgs.php"] .input.attached input,
	form[action="users.php"] .input.attached input,
	form[action="tasks.php"] .input.attached input,
	form[action="tickets.php"] .input.attached input {
		border-right: .5px solid #bfbfbf;
		border-radius: 3px;
		height: 36px;
	}

	form[action="kb.php"] input.basic-search:focus,
	form[action="orgs.php"] input.basic-search:focus,
	form[action="users.php"] input.basic-search:focus,
	form[action="tasks.php"] input.basic-search:focus,
	form[action="tickets.php"] input.basic-search:focus {
		background-image: initial;
	}

	form[action="kb.php"] .button.attached,
	form[action="orgs.php"] .button.attached,
	form[action="users.php"] .button.attached,
	form[action="tasks.php"] .button.attached,
	form[action="tickets.php"] .button.attached {
		opacity: .8 !important;
		background-color: #9bbe55 !important;
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9.5%2C3A6.5%2C6.5 0 0%2C1 16%2C9.5C16%2C11.11 15.41%2C12.59 14.44%2C13.73L14.71%2C14H15.5L20.5%2C19L19%2C20.5L14%2C15.5V14.71L13.73%2C14.44C12.59%2C15.41 11.11%2C16 9.5%2C16A6.5%2C6.5 0 0%2C1 3%2C9.5A6.5%2C6.5 0 0%2C1 9.5%2C3M9.5%2C5C7%2C5 5%2C7 5%2C9.5C5%2C12 7%2C14 9.5%2C14C12%2C14 14%2C12 14%2C9.5C14%2C7 12%2C5 9.5%2C5Z' /%3E%3C/svg%3E");
		background-position: center;
		background-size: 20px;
		background-repeat: no-repeat;
		background-color: rgba(255, 255, 255, 0.3);
		border: initial !important;
		border-radius: 0 3px 3px 0;
		margin: 0;
		width: 24px;
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		transition: all .5s;
		width: 36px;
		height: 36px !important;
		z-index: -1;
	}
	form[action="kb.php"] input.basic-search,
	form[action="orgs.php"] input.basic-search,
	form[action="users.php"] input.basic-search,
	form[action="tasks.php"] input.basic-search,
	form[action="tickets.php"] input.basic-search {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23128dbe' d='M9.5%2C3A6.5%2C6.5 0 0%2C1 16%2C9.5C16%2C11.11 15.41%2C12.59 14.44%2C13.73L14.71%2C14H15.5L20.5%2C19L19%2C20.5L14%2C15.5V14.71L13.73%2C14.44C12.59%2C15.41 11.11%2C16 9.5%2C16A6.5%2C6.5 0 0%2C1 3%2C9.5A6.5%2C6.5 0 0%2C1 9.5%2C3M9.5%2C5C7%2C5 5%2C7 5%2C9.5C5%2C12 7%2C14 9.5%2C14C12%2C14 14%2C12 14%2C9.5C14%2C7 12%2C5 9.5%2C5Z' /%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center right 8px;
		background-size: 20px;
		will-change: background-image;
		-webkit-transition: background-image 0.2s ease-in-out;
		transition: background-image 0.5s ease-in-out;
	}

	form[action="kb.php"] .input.attached input:focus + .button.attached,
	form[action="orgs.php"] .input.attached input:focus + .button.attached,
	form[action="users.php"] .input.attached input:focus + .button.attached,
	form[action="tasks.php"] .input.attached input:focus + .button.attached,
	form[action="tickets.php"] .input.attached input:focus + .button.attached {
		z-index: 0;
	}
	form[action="kb.php"] .input.attached button.attached.button,
	form[action="orgs.php"] .input.attached button.attached.button,
	form[action="users.php"] .input.attached button.attached.button,
	form[action="tasks.php"] .input.attached button.attached.button,
	form[action="tickets.php"] .input.attached button.attached.button {
		position: absolute;
		top: 0px;
		left: 193px;
	}
	form[action="kb.php"] .input.attached .button.attached,
	form[action="orgs.php"] .input.attached .button.attached,
	form[action="users.php"] .input.attached .button.attached,
	form[action="tasks.php"] .input.attached .button.attached,
	form[action="tickets.php"] .input.attached .button.attached {
		border: 0 !important;
	}

	/* Queue quick search: keep submit button inside the field and show it only on focus */
	.tickets-page .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached {
		position: relative;
		display: inline-flex !important;
		align-items: stretch;
		overflow: hidden;
	}
	.tickets-page .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached input.basic-search {
		max-width: min(220px, calc(100vw - 180px));
		min-width: 0;
	}
	.tickets-page .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached button.attached.button {
		position: absolute !important;
		right: 0 !important;
		left: auto !important;
		top: 0 !important;
		display: none !important;
		width: 36px;
		height: 100% !important;
		z-index: 2 !important;
	}
	.tickets-page .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached:focus-within button.attached.button {
		display: inline-block !important;
	}

/*
    osta/Linder Browse Tickets / Tasks Project
*/
#prev-next {
    top: -5px;
    right: -242px !important;
    /*position: relative;*/
}
#prev-next .action-button {
    /*padding: 3px !important;*/
}
a.pnt-mod svg {
	fill: #128dbe;
    margin: 0 !important;
}
.tickets-page #content.tickets a.pnt-mod {
	 top: -1px;
	 position: relative;
 }
.sticky.bar:not(.opaque) .pull-right.flush-right {
	margin: 0px 0px 6px 0;
	top: 28px !important;
	/*position: relative;*/
}

.sticky.bar.fixed .flush-left, .sticky.bar.fixed .pull-left.flush-left {
    display: initial !important;
}
.sticky.bar.fixed a.pnt-mod svg {
    fill: #ffffff;
}

/* Bugfix vorweggenommen von osticketawesome */
.redactor-toolbar-wrapper-air {
	position: initial;
	z-index: 100;
	width: 100% !important;
	display: inline-block;
	background: #f7f7f7;
	border: none;
	box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.4);
}
.redactor-air {
	display: inline-block !important;
	width: 100% !important;
	float: left;
	padding: 0 !important;
	margin: 0 !important;
	background: initial;
}
.redactor-air a.re-button-icon.re-button-icon {
	padding: 8px;
	margin: 0;
	background: initial;
}
.redactor-air a {
	color: #128dbe;
}
.redactor-air a.re-button-icon.re-button-icon:hover {
	background: #128dbe;
	color: #fff;
}
a.re-button:hover > i {
	color: #fff !important;
}
.redactor-button-active {
	background-color: #ccc !important;
}
.redactor-button-active > i {
	color: #696969 !important;
}

.ticket-dependencies .dependency-graph {
	position: relative;
	padding: 8px 4px 16px;
	min-height: 200px;
	overflow-x: auto;
}

.ticket-dependencies .dependency-links {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.ticket-dependencies .dep-columns {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.ticket-dependencies .dep-column {
	flex: 0 0 240px;
}

.ticket-dependencies .dep-center {
	flex: 0 0 220px;
	text-align: center;
	align-self: center;
}

.ticket-dependencies .dep-title {
	font-weight: bold;
	margin: 4px 0 6px;
}

.ticket-dependencies .dep-node {
	background: #f7f7f7;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px 8px;
	margin: 6px 0;
}

.ticket-dependencies .dep-center-node {
	background: #e8f2ff;
	border-color: #aac8e8;
}

.ticket-dependencies .dep-node-title {
	font-weight: bold;
}

.ticket-dependencies .dep-node-subject {
	font-size: 0.9em;
}

.ticket-dependencies .dep-node-status {
	font-size: 0.8em;
	color: #555;
}

.ticket-dependencies .dep-node-note {
	font-size: 0.8em;
	color: #777;
}

.ticket-dependencies .dep-title.dep-title-muted {
	font-size: 0.85em;
	color: #777;
}

.ticket-dependencies .dep-node-dup {
	display: inline-block;
	margin-left: 6px;
	font-size: 0.75em;
	color: #c0392b;
}

/* Queue quick search: keep submit inside field and show only on focus */
.tickets-page .queue-width-wrap form[action="tickets.php"] .input.attached {
	position: relative !important;
	display: inline-flex !important;
	align-items: stretch !important;
	overflow: hidden !important;
	width: 172px !important;
	max-width: min(100%, calc(100vw - 190px)) !important;
	transition: width .22s ease, max-width .22s ease !important;
}

.tickets-page .queue-width-wrap form[action="tickets.php"] .input.attached:focus-within {
	width: min(340px, calc(100vw - 190px)) !important;
}

.tickets-page .queue-width-wrap form[action="tickets.php"] .input.attached > button.attached.button,
.tickets-page .queue-width-wrap form[action="tickets.php"] .input.attached > .attached.button {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	margin: 0 !important;
	width: 36px !important;
	height: 100% !important;
	display: none !important;
	z-index: 2 !important;
	opacity: 1 !important;
}

.tickets-page .queue-width-wrap form[action="tickets.php"] .input.attached > button.queue-search-info-button {
	right: 36px !important;
	width: 34px !important;
	background: #128dbe !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-style: italic !important;
	text-align: center !important;
	text-shadow: none !important;
	border-radius: 0 !important;
}

.tickets-page .queue-width-wrap form[action="tickets.php"] .input.attached > button.queue-search-info-button span {
	display: inline-block !important;
	line-height: 1 !important;
	transform: translateY(-1px) !important;
}

.tickets-page .queue-width-wrap form[action="tickets.php"] .input.attached > button.queue-search-submit-button {
	right: 0 !important;
}

.tickets-page .queue-width-wrap form[action="tickets.php"] .input.attached:focus-within > button.attached.button,
.tickets-page .queue-width-wrap form[action="tickets.php"] .input.attached:focus-within > .attached.button {
	display: inline-block !important;
}

.tickets-page .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached:focus-within > button.attached.button,
.tickets-page .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached:focus-within > .attached.button {
	display: inline-block !important;
}

.tickets-page .queue-width-wrap form[action="tickets.php"] .input.attached > input.basic-search {
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	padding-right: 12px !important;
	opacity: 1 !important;
}

.tickets-page .queue-width-wrap form[action="tickets.php"] .input.attached:focus-within > input.basic-search {
	padding-right: 82px !important;
}

.queue-search-help {
	max-width: 680px;
	max-height: min(72vh, 760px);
	overflow-y: auto;
	padding-right: 4px;
	line-height: 1.45;
}

.queue-search-help h3 {
	margin-bottom: 6px;
}

.queue-search-help__intro {
	margin: 0 0 12px;
}

.queue-search-help__rules {
	display: grid;
	grid-template-columns: 145px minmax(0, 1fr);
	gap: 8px 14px;
	margin: 0 0 14px;
}

.queue-search-help__rules dt {
	color: #2f5f7d;
	font-weight: 700;
}

.queue-search-help__rules dd {
	margin: 0;
}

.queue-search-help code {
	background: #eef6fb;
	border: 1px solid #c8dce9;
	border-radius: 3px;
	color: #1f5572;
	padding: 1px 4px;
}

.queue-search-help__syntax {
	border: 1px solid #d8e5ec;
	border-radius: 4px;
	margin: 0 0 14px;
	overflow: hidden;
}

.queue-search-help__syntax > div {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 12px;
	padding: 7px 10px;
}

.queue-search-help__syntax > div + div {
	border-top: 1px solid #edf3f6;
}

.queue-search-help__syntax > div > code {
	align-self: start;
	white-space: nowrap;
}

.queue-search-help__note {
	background: #eef7ff;
	border-left: 3px solid #128dbe;
	margin: 0;
	padding: 8px 10px;
}

@media (max-width: 640px) {
	.queue-search-help__rules {
		display: block;
	}
	.queue-search-help__rules dt {
		margin-top: 10px;
	}
	.queue-search-help__syntax > div {
		display: block;
	}
	.queue-search-help__syntax > div > span {
		display: block;
		margin-top: 5px;
	}
}

/* Fallback for sticky/fixed variants where queue-width-wrap is not in the ancestor chain */
.tickets-page #content .sticky.bar form[action="tickets.php"] .input.attached {
	position: relative !important;
	display: inline-flex !important;
	align-items: stretch !important;
	overflow: hidden !important;
	width: 172px !important;
	max-width: min(100%, calc(100vw - 190px)) !important;
	transition: width .22s ease, max-width .22s ease !important;
}

.tickets-page #content .sticky.bar form[action="tickets.php"] .input.attached:focus-within {
	width: min(340px, calc(100vw - 190px)) !important;
}

.tickets-page #content .sticky.bar form[action="tickets.php"] .input.attached > button.attached.button,
.tickets-page #content .sticky.bar form[action="tickets.php"] .input.attached > .attached.button {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	margin: 0 !important;
	width: 36px !important;
	height: 100% !important;
	display: none !important;
	z-index: 2 !important;
	opacity: 1 !important;
}

.tickets-page #content .sticky.bar form[action="tickets.php"] .input.attached > button.queue-search-info-button {
	right: 36px !important;
	width: 34px !important;
	background: #128dbe !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-style: italic !important;
	text-align: center !important;
	text-shadow: none !important;
	border-radius: 0 !important;
}

.tickets-page #content .sticky.bar form[action="tickets.php"] .input.attached > button.queue-search-info-button span {
	display: inline-block !important;
	line-height: 1 !important;
	transform: translateY(-1px) !important;
}

.tickets-page #content .sticky.bar form[action="tickets.php"] .input.attached > button.queue-search-submit-button {
	right: 0 !important;
}

.tickets-page #content .sticky.bar form[action="tickets.php"] .input.attached:focus-within > button.attached.button,
.tickets-page #content .sticky.bar form[action="tickets.php"] .input.attached:focus-within > .attached.button {
	display: inline-block !important;
}

.tickets-page #content .sticky.bar form[action="tickets.php"] .input.attached > input.basic-search {
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	padding-right: 12px !important;
	opacity: 1 !important;
}

.tickets-page #content .sticky.bar form[action="tickets.php"] .input.attached:focus-within > input.basic-search {
	padding-right: 82px !important;
}

.tickets-page #content .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached > button.queue-search-info-button {
	left: auto !important;
	right: 36px !important;
	display: none !important;
}

.tickets-page #content .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached > button.queue-search-submit-button {
	left: auto !important;
	right: 0 !important;
	display: none !important;
}

.tickets-page #content .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached:focus-within > button.queue-search-info-button,
.tickets-page #content .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached:focus-within > button.queue-search-submit-button {
	display: inline-block !important;
}

/* Chrome-stable queue toolbar/search layout */
.tickets-page #content .queue-width-wrap .sticky.bar.opaque:not(.fixed) {
	background: transparent !important;
}

.tickets-page #content .queue-width-wrap .sticky.bar .content::after {
	content: "";
	display: block;
	clear: both;
}

.tickets-page #content .queue-width-wrap .sticky.bar .content > .pull-right.flush-right:not(.page-top) {
	clear: both !important;
	float: none !important;
	display: block !important;
	width: 100% !important;
	margin-top: 8px !important;
}

.tickets-page #content .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] {
	display: flex !important;
	align-items: stretch !important;
	justify-content: flex-end !important;
	gap: 10px !important;
	height: 36px !important;
}

.tickets-page #content .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached {
	position: relative !important;
	display: inline-flex !important;
	align-items: stretch !important;
	overflow: hidden !important;
	float: none !important;
	height: 36px !important;
	width: 172px !important;
	max-width: min(100%, calc(100vw - 190px)) !important;
	transition: width .22s ease, max-width .22s ease !important;
}

.tickets-page #content .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached:focus-within {
	width: min(340px, calc(100vw - 190px)) !important;
}

.tickets-page #content .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached > input.basic-search {
	box-sizing: border-box !important;
	flex: 1 1 auto !important;
	float: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: 36px !important;
	padding-right: 12px !important;
	opacity: 1 !important;
}

.tickets-page #content .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached > button.queue-search-info-button,
.tickets-page #content .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached > button.queue-search-submit-button {
	position: static !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	flex: 0 0 36px !important;
	width: 36px !important;
	height: 36px !important;
	margin: 0 !important;
	z-index: auto !important;
	opacity: 1 !important;
	align-items: center !important;
	justify-content: center !important;
	vertical-align: top !important;
}

.tickets-page #content .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached > button.queue-search-info-button {
	display: none !important;
	background: #128dbe !important;
	background-image: none !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-style: italic !important;
	text-align: center !important;
	text-shadow: none !important;
	border-radius: 0 !important;
}

.tickets-page #content .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached > button.queue-search-submit-button {
	display: none !important;
	background-color: #9bbe55 !important;
	border-radius: 0 3px 3px 0 !important;
}

.tickets-page #content .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached:focus-within > button.queue-search-info-button,
.tickets-page #content .queue-width-wrap .sticky.bar .pull-right.flush-right.page-top form[action="tickets.php"] .input.attached:focus-within > button.queue-search-submit-button {
	display: inline-flex !important;
}
