/* Home page tabs authoring fixes */
.tab-content.author > .tab-pane {
    display:block;
    opacity: 1;
    margin-bottom: 60px;
}

#content h3.tab_name {    
    text-align: center;
    margin-bottom: 20px;
    padding: 10px;
    color: #fff;
    background-color: #444;
}

div.cq-Overlay--component[data-path*="tool_container"]{
	z-index: 1000;
	height: 80px !important;
} 

/* Fix scroll issue with classic UI */
#cq-gen4, #home.cq-wcm-edit, #home.cq-wcm-design {
	overflow: scroll;
}

/* Fix styles added in form container */
.form_container fieldset {
    border: 0 none !important;
    margin: 0 !important;
    padding: 0 !important;
}


.form_container legend {
    border-style: none none solid !important;
    border-width: 0 0 1px !important;
    border-color: #e5e5e5 !important;
}

/*
	When a Coral dialog is maximized the single column occupies only 31rem - around 500px.
	This width comes from the rule ".coral-FixedColumn-column" in
	/libs/clientlibs/granite/coralui3/css/all.css.
	
	This causes a long toolbar for an RTE to wrap several times, which then moves the RTE
	further down the screen.  It also results in a large gap between the RTE and the control
	above it when the toolbar is hidden.
	
	To address this, replace the width of 31em with a width of 68.36%.  This width comes
	from the rule ".rte-fullscreen-dialog coral-dialog-content .rte-fullscreen-richtextContainer"
	in /libs/clientlibs/granite/richtext/css/rte.css.  This will have the width of the column
	of fields in a maximized dialog match that of a maximized in-place RTE.
 */
.coral3-Dialog--fullscreen .coral-FixedColumn-column {
	width: 68.36%;
}

/*
	These are for the addition of help text at the bottom of popover dialogs for toolbar
	buttons in the Touch UI RTE.  There is a different version for each dialog based on the
	controls in the delivered version since there is no easy way to prevent the help text
	from causing the popover from becoming unreasonably wide.
 */
.rte-dialog--anchor .rte-dialog-bghelparea {
	width: 17.5rem;  /* .coral-Textfield + 2 * .coral-Button */
	padding: 0.25rem;
	color: #999999;
}

.rte-dialog--anchor .rte-dialog-bghelparea p {
	margin-top: 5px;
	margin-bottom: 5px;
}

.rte-dialog--link .rte-dialog-bghelparea {
	width: 16rem;  /* matches .coral-Textfield - see below */
	padding: 0.25rem;
	color: #999999;
}

.rte-dialog--link .rte-dialog-bghelparea p {
	margin-top: 5px;
	margin-bottom: 5px;
}

/*
	Adjust the width of the link dialog by widening elements within it.  Without doing this,
	the additional help text is verbose enough to extend the bottom of the link dialog beneath
	the bottom of the non-maximized RTE.  The original widths are shown in comments below.
 */
.rte-dialog--link foundation-autocomplete {
	width: 16rem;  /* was 12.5rem on foundation-autocomplete - foundation.css */
}

.rte-dialog--link .coral-Textfield {
	width: 16rem;  /* was 12.5rem on .coral-Textfield - /libs/clientlibs/granite/coralui3/css/all.css */
}

.rte-dialog--link .coral-InputGroup-input {
	width: 100%;  /* reapply the override on .coral-Textfield */
}

.rte-dialog--link .coral3-Select {
	width: 16rem;  /* was 12.5rem on .coral3-Select - /libs/clientlibs/granite/coralui3/css/all.css */
}

/*
	Restore the behavior of certain menu items when in edit mode.  The reordering of menu
	items (such as Give, MyBGSU, and Email) is only needed when the menu is actually rendered.
	The menu editor itself does not need these changes.

	In Classic edit mode the element div#main-nav.navbar is a direct child of body.cq-wcm-edit.
	(On pages that include menus it will not be a direct child.)
	In Touch UI edit mode the elenemt div#main-nav.navbar is a direct child of body and is a
	descendant of html.aem-AuthorLayer-Edit.
 */

.cq-wcm-edit > div#main-nav.navbar,
html.aem-AuthorLayer-Edit > body > div#main-nav.navbar {
	margin-left: 10px;
	margin-right: 10px;
}

.cq-wcm-edit > div#main-nav.navbar ul.nav,
html.aem-AuthorLayer-Edit > body > div#main-nav.navbar ul.nav {
	width: inherit;
	display: inherit;
	padding-right: inherit;
}

.cq-wcm-edit > div#main-nav.navbar ul.nav ul.dropdown-menu,
html.aem-AuthorLayer-Edit > body > div#main-nav.navbar ul.nav ul.dropdown-menu {
	width: inherit;
}

@media (min-width: 1200px) {
	.cq-wcm-edit > div#main-nav.navbar ul.nav ul.dropdown-menu,
	html.aem-AuthorLayer-Edit > body > div#main-nav.navbar ul.nav ul.dropdown-menu {
		width: inherit;
	}
}

.cq-wcm-edit > div#main-nav.navbar ul.nav:first-of-type,
html.aem-AuthorLayer-Edit > body > div#main-nav.navbar ul.nav:first-of-type {
	margin-right: inherit;
}

.cq-wcm-edit > div#main-nav.navbar ul.nav:last-of-type,
html.aem-AuthorLayer-Edit > body > div#main-nav.navbar ul.nav:last-of-type {
	float: inherit;
}

.cq-wcm-edit > div#main-nav.navbar ul.nav:last-of-type li,
html.aem-AuthorLayer-Edit > body > div#main-nav.navbar ul.nav:last-of-type li {
	float: inherit;
}

#CQ .x-form-element p,
#CQ .x-form-element input.x-form-radio,
#CQ .x-form-element label.x-form-cb-label-hidden {
	font-size: 12px;
}

#CQ .x-form-element p+p {
	margin-top: 10px;
}

#CQ .x-form-element .x-form-check-wrap {
	min-height: 20px;
}

#CQ .x-form-element p a,
#CQ .x-form-element label.x-form-cb-label-hidden a {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}

#CQ .x-form-element p a:visited,
#CQ .x-form-element label.x-form-cb-label-hidden a:visited {
	color: purple;
}

.coral3-Dialog .bgsu-coral-EnhancedRadio .coral-Radio-input {
	width: auto;  /* was 100% on .coral-Radio-input - /libs/clientlibs/granite/coralui3/css/all.css */
	min-width: 20px;  /* without this the right half of the button may not be clickable */
}

.coral3-Dialog .bgsu-coral-EnhancedRadio div.coral-Radio-description {
	display: inline-block;
}

.coral3-Dialog .coral-Multifield.bgsu-tabs-control-container ol.coral-Multifield-list::before {
	content: "Label Accessible\002004Description";
	/*
		The use of word-spacing is a kludge to force "Accessible Description" to be over the second column.
		This only works because the column widths are fixed.  To have a column heading with
		multiple words separate the words with Unicode space characters such as \002004 since
		these are not affected by word-spacing.
		See https://www.designcise.com/web/tutorial/how-to-add-space-before-or-after-an-element-using-css-pseudo-elements
		for a list of space character options.
	 */
	word-spacing: 140px;
	position: relative;
	top: -5px;
	left: 5px;
}

.coral-Pathbrowser-picker
{ z-index: 11010; box-shadow: 0 0 15px rgba(0,0,0,0.3); }

#CQ .x-color-menu .x-color-palette {
	width: 180px;  /* originally 150px */
	height: 18px;  /* originally 92px */
}

/*
	Hide the Toggle Side Panel button, added in /etc/designs/bgsu-edu/clientlibs_author/js/dialog.sidepanel.js,
	when a dialog is in full screen mode.  When a dialog is in full screen the side panel can be opened but is
	still obscured by the dialog; hiding the button will prevent possible confusion.
 */
.coral3-Dialog.coral3-Dialog--fullscreen .cq-dialog-railLeft {
	display: none;
}

/*
	In drag-and-drop, if there are two dropzones in the same area of the page, the determination of which
	object is the target of the drop is made in CQ.Ext.dd.DragDropMgr.getTopfrontElement in DDCore.js
	(/libs/cq/ui/widgets/source/ext/override/dd/DDCore.js).  Part of the determination is based on the
	z-index of the object or its parents.  There are parts of component dialogs that are given a
	z-index of 1, which causes them to be given lower priority than a surrounding dropzone.
	Yet dialogs themselves can have a much higher z-index.  This can result in a drag being rejected.
	For example, consider a Tab component that contains a Background Area component, and that Background Area
	contains an Image component.  If the Image component dialog is open and an image is dragged from the
	Content Finder into the dialog, the dialog is considered to have a z-index of 1 because of the
	style rules on #CQ .x-window-bwrap, causing it to be given less priority than the Background Area.
	This causes the drag to be rejected because Background Area doesn't accept an image being dragged
	directly into it from the Content Finder.

	The original style rules for #CQ .x-window-bwrap and #CQ .x-window-tl are in
	/libs/cq/ui/widgets/themes/default/ext/css/structure/window.css.  The addition of the .x-window
	selector is to limit the scope of this fix and to increase the specificity.
	(Originally it was limited to class cq-dialog-xxxx but this did not cover floating dialogs.)

	Note: the unset keyword is not supported in Internet Explorer, but AEM authoring also does not support IE.
	(https://docs.adobe.com/content/help/en/experience-manager-65/deploying/introduction/technical-requirements.html)
 */
#CQ .x-window .x-window-bwrap {
	z-index: unset;
}

#CQ .x-window .x-window-tl {
	z-index: unset;
}

/*
	The font-weight of #CQ span is set to "normal" by default (see /libs/cq/ui/widgets/themes/default.css,
	derived from /libs/cq/ui/widgets/themes/default/ext/override/reset.css).
	This interferes with font-weight settings of spans displayed by Font Awesome 5 while editing.
	The Font Awesome 5 styles are being loaded before the CQ styles and are being overridden by them.
	Specific font-weight values are expected (see https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use).
 */
#CQ span.fab,
#CQ span.far {
	font-weight: 400;
}

#CQ span.fa,
#CQ span.fas {
	font-weight: 900;
}

/* 
	Bootstrap 5 adds in a float for all legend elements.  AEM/CQ uses the legend in the design dialog and the BS5 rule clashes with this display.
*/
.x-window legend {
	float: none;
}


body.cq-wcm-edit figure,
html.aem-AuthorLayer-Edit figure {
	margin: 0 0 1rem;  /* restore behavior from clientlib-site/css/site.css */
}

#CQ .bgw-icon-selector .bgw-icon-item {
	height: 30px;
	display: inline-block;
	font-size: 15pt;
}

#CQ .bgw-icon-catalog .bgw-icon-item {
	width: 32px;
	height: 32px;
	display: inline-block;
	text-align: center;
	margin-top: 3px;
	margin-bottom: 3px;
	font-size: 14pt;
	cursor: default;
}

#CQ .bgw-icon-catalog .bgw-icon-item span {
	cursor: default;
	vertical-align: sub;
}

#CQ .bgw-icon-catalog .bgw-icon-item.x-view-selected {
	background-color: #d3ea9a !important;
}

#CQ .bgw-icon-by-name .bgw-icon-item {
	width: 30px;
	height: 28px;
	display: inline-block;
	text-align: center;
	font-size: 14pt;
}

#CQ .bgw-icon-by-name .bgw-icon-value {
	height: 28px;
	font-size: 14pt;
}

#CQ .bgw-icon-manual a {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}

#CQ .bgw-icon-manual a:visited {
	color: purple;
}