/*
styles for the main table layout on the master page 
Cream : F9D686  rgb(249,214,134)
lightblue : 0399E3  rgb(3,153,227)
darkblue : 0463B4  rgb(4,99,180)
*/
@import url("https://fonts.googleapis.com/css2?\
family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&\
family=Noto+Sans+Arabic:wght@400;700&\
family=Noto+Sans+Devanagari:wght@400;700&\
family=Noto+Sans+Tamil:wght@400;700&\
family=Noto+Sans+JP:wght@400;700&\
family=Noto+Sans+KR:wght@400;700&\
display=swap");

html {
	position:relative;
}

html, body {
	height:100%;
	margin:0px;
}

body {
	background: var(--body-bg);
	background-position: var(--body-position);
	background-color: var(--body-bg-color);
	word-spacing: normal;
	letter-spacing: normal;
	font-weight: normal;
	font-size: medium;
	text-transform: none;
	font-family: var(--body-font);
}

/* for text color */
td.login_header,
.login_label,
body,
fieldset label,
td.formlabel,
td.formlabeldisplay,
input.login_field {
	color: var(--text-color);
}

.noselect {
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-moz-user-select: none;
	/* Old versions of Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

.BannerDiv {
	/*	width: 100%;*/
	padding: 0px;
	margin: 0px;
}

.BannerBar {
	position:relative;
	height: 60px;
	padding: 0px;
	margin: 0px;
	background: var(--bannerbar-bg-color);
	color: var(--bannerbar-color);
}

.HomeIcon {
	height: 100%;
	display: flex;
	align-items: center;
	margin-left: 8px;
}

/* Company logo - ensure the size is correct for the image */
.BannerLogo {
	position: absolute;
	z-index: 0;
	left: 40px;
	top: 50%;
	transform: translateY(-50%);
	width:var(--logo-width);
	height:var(--logo-height);
	background: var(--bannerbar-logo) no-repeat;
	background-size: var(--logo-width) var(--logo-height);
}

a.BannerIcon, i.BannerIcon, div.BannerIcon {
    cursor:pointer;    
    font-size:18pt;
    color: var(--StaticMenuItemStyle-fg-color);
    background-color: var(--StaticMenuItemStyle-bg-color);
    text-decoration:none;
    padding:0px 0px 0px 0px;
}
a.BannerIcon:hover, i.BannerIcon:hover, div.BannerIcon:hover {
    color: var(--bannerbar-icons-hover-color);
    text-decoration:none;
}

/*.BannerDetails {
	display: flex;
	align-items: center;*/ /* This aligns children vertically in the center */
	/*justify-content: flex-end;*/ /* Aligns children horizontally to the right */
	/*gap: 10px;*/ /* Adjust the gap between items */
	/*right: 0;
	top: 50%;
	transform: translateY(-50%);*/ /* Centers the container itself vertically */
	/*position: absolute;
	padding-right: 20px;
	z-index: 10;
}*/

.BannerLoggedInDetails {
    display: flex;
    align-items: center; /* This aligns children vertically in the center */
    justify-content: flex-end; /* Aligns children horizontally to the right */
    gap: 10px; /* Adjust the gap between items */
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* Centers the container itself vertically */
    position: absolute;
    padding-right: 20px;
    z-index: 10;
}

.BannerLoginDetailsLabel {
	background-color: var(--BannerLoginDetails-bg-color);
	border: var(--BannerLoginDetails-border);
	padding: 9px 6px;
	border-radius: 8px;
}

.BannerLoginDetails {
	position: absolute;
	z-index: 0;
	top: 11px;
	right: 30px;
	text-align: right;
	background-color: var(--BannerLoginDetails-bg-color);
	border: var(--BannerLoginDetails-border);
	padding: 9px 6px;
	-webkit-border-radius: 5px;
	border-radius: 8px;
	display: inline;
}
.BannerLoggedInDetailsInner {
	display: flex;
	align-items: center;
	gap: 10px; /* optional spacing between items */
}

.BannerMenu {
	height: 50px;
	position: absolute;
	z-index: 1000;
	top: 9px;
	left: 5px;
}

.MBItem {
	display: inline;
	vertical-align: middle;
}

div.ButtonBar {
	/*	width: 100%;*/
	text-align: center;
	background-color: var(--div-ButtonBar-bg-color);
	padding-bottom: 5px;
	padding-top: 5px;
	color: var(--div-ButtonBar-color);
}

table.buttonBar {
	background-color: var(--table-ButtonBar-bg-color);
	margin: auto;
	height: 28px;
}

td.buttonBar {
	padding-left: 3px;
	padding-right: 3px;
}

.BannerMessage {
	border: var(--BannerMessage-border);
	padding: 5px 10px 5px 10px;
	position: absolute;
	top: 25px;
	left: 400px;
	z-index: 99;
	font-size: medium;
	background-color: var(--BannerMessage-bg-color);
	visibility: visible;
	font-family: var(--BannerMessage-font);
	font-weight: bold;
	color: var(--BannerMessage-color);
}

/* END styles for the Banner Bar Area */


/* style for page content */
.div_content {
	text-align: center;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

table.content {
	/*    border-collapse:collapse;    */
	/* margin-left: auto;
	margin-right: auto; */
	width: 100%;
}

td.content {
	vertical-align: top;
	/*width:70%;*/
}

div.layout {
	margin-left: auto;
	margin-right: auto;
}

/* END style for page content */


/*
AJAX updare progress 
a div on the master page
*/
.ajaxProgressDiv {
	position: fixed;
	top: 40%;
	left: 40%;
	padding: 15px 0px 10px 0px;
	text-align: center;
	background: var(--ajaxProgressDiv-bg-image);
	width: 270px;
	height: 70px;
	font-size: 12px;
	font-weight: bold;
	color: var(--ajaxProgressDiv-color);
}

.white-on-black {
	color:white;
    background-color:#202020;
}

/*input[type="search"] {
	-webkit-filter: grayscale(100%);*/
	/* Safari 6.0 - 9.0 */
	/*filter: grayscale(100%);
}*/

input {
	font-family: inherit;
}

	textarea,
	input[type=text],
	input[type=date],
	input[type=datetime-local],
	input[type=time],
	input[type=number],
	input[type=password],
	input[type=checkbox],
	input[type=search],
	select {
		border: 1px solid var(--input-border);
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		font-family: inherit;
		font-size: inherit;
	}

textarea,
input[type=text],
input[type=date],
input[type=time],
input[type=number],
input[type=search],
input[type=password],
select {
	background-color: var(--input-field-bg-color) !important;
	color: var(--input-field-color);
}

#txtDEdecs:disabled {
	background-color: #e6e6e6 !important;
	color: #777 !important;
	cursor: not-allowed;
	opacity: 0.55;
}

textarea:focus,
input[type=text]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=password]:focus {
	background-color: var(--input-field-focus-bg-color) !important;
}

input::placeholder, 
textarea::placeholder {
	color: var(--input-field-color);
    opacity: 0.6; 
}

/*.PopupPanel select,*/
.PopupPanel input[type=date] {
/*	padding: 5px;
	width: 130px !important;
*/}

#popVideo {
	width: min(960px, 90vw);
	max-height: 90vh;
	overflow: auto;
}
	#popVideo video#helpVideo {
		display: block;
		width: 100%;
		height: auto;
		max-height: 80vh;
	}
#popVideo .helpVideoNav {
	display: flex;
	align-items: center;
	margin-top: 10px;
}

		#popVideo .helpVideoNav #btnVideoNext {
			margin-left: auto;
		}

#popVideo .helpVideoNav a[style*="display: none"] {
	display: none !important;
}
	#popVideo .helpVideoStage {
		position: relative;
	}

	#popVideo video.helpVideoPlayer {
		display: block;
		width: 100%;
		height: auto;
		max-height: 80vh;
	}

textarea:focus,
input[type=text]:focus,
input[type=date]:focus,
input[type=time]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=checkbox]:focus,
select:focus {
	outline: 1px solid var(--input-border);
}

select:hover focus {
	outline: none !important;
}

input[type="radio"]:disabled + label {
	opacity: .5; 
}
.sp-replacer.sp-disabled .sp-preview,
.sp-replacer.sp-disabled .sp-preview .sp-preview-inner {
	opacity: .5; /* dim the swatch */
}

.sp-replacer.sp-disabled,
.sp-replacer.sp-disabled * {
	pointer-events: none;
}

.slider-disabled {
	opacity: .5;
}

.slider-disabled,
.slider-disabled * {
	pointer-events: none;
	user-select: none;
}

.PanelClass {
	position: relative;
}

.AreaPanel {
	position: relative;
	background-color: var(--AreaPanel-bg-color);
	text-align: left;
	padding: 7px;
	border: var(--AreaPanel-border);
	border-radius: 5px;
}

.divHelpClass {
	position: absolute;
	top: 0;
	right: 15px;
	/*    -webkit-box-shadow: 2px 2px 8px 0px #808080;
    box-shadow: 2px 2px 8px 0px #808080;*/
	padding: 0px 3px 0px 3px;
}

.staticHelpClass {
	display: inline;
	padding: 0px 0px 0px 3px;
}

.divHelpClass,
.staticHelpClass {
	color: var(--helpClass-color);
	border: var(--helpClass-border);
	border-radius: 10px !important;
	background-color: var(--helpClass-bg-color);
	font-family: var(--helpClass-font);
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	z-index: 1000;
}

fieldset {
	border: none;
	border-radius: 20px;
	border: ridge 2px var(--content-area-border-color);
	text-align: left;
	padding: 10px 20px 10px 20px;
	background-color: var(--content-area-bg-color);
	max-width: fit-content;
	position: relative;
	/*	left: 50%;
	margin-top: 5px;
	transform: translateX(-50%);*/
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
	min-width: 250px;
	margin: 5px auto auto auto;
}

.PopupPanel fieldset {
	border: ridge 2px var(--content-area-border-color);
	margin-top: 0;
	top: 0;
}

legend {
	background-color: var(--legend-bg-color);
	border-radius: 20px !important;
	padding: 6px 10px;
	font-weight: bold;
	position: relative;
	top: 0px;
	margin-left: 40px;
	border: 3px solid var(--legend-border-color);
}

fieldset input[type=checkbox] {
	width: 14px;
	height: 14px;
	cursor: pointer;
	position: relative;
	visibility: hidden;
	margin-right:10px;
}

input[type=checkbox]#ctl00_ContentPlaceHolder1_ChangePwd_cbPasswords {
	position: relative;
	top: -1px;
}

fieldset input[type=checkbox]::before {
	position: absolute;
	left: -3px;
	top: -4px;
	height: 24px;
	width: 24px;
	content: "";
	mask-image: var(--checkbox-blank-icon);
	visibility: visible;
	background-color: var(--checkbox-color);
}

fieldset input[type=checkbox]:checked::before {
	mask-image: var(--checkbox-checked-icon);
}

.invisibleKeepSpace,
.invisibleKeepSpace::before,
.invisibleKeepSpace::after {
	visibility: hidden !important;
}

fieldset label {
	margin-right: 10px;
	position: relative;
	top: -1px;
	cursor: pointer;
	user-select: none;
}

fieldset legend {
	color: var(--legend-color);
}

.listheader input[type=checkbox]::before {
	background-color: var(--list-header-foreground);
}

.ModalBackground {
	color: var(--text-color);
	background-color: #808080;
	opacity: 0.75;
}

.PopupPanel {
	border-radius: 7px;
	color: var(--PopupPanel-color);
	font-size: medium;
	padding: 10px;
}
	.PopupPanel video {
		display: block;
		max-width: 90vw;
		max-height: 70vh;
		min-width: 320px; 
		min-height: 180px; 
		object-fit: contain;
	}

.InfoPanel {
	border: ridge 2px var(--content-area-border-color);
	background-color: var(--content-area-bg-color);
	position: relative;
	border-radius: 7px;
	text-align: left;
	padding: 2px 10px 2px 10px;
	margin-top: 5px;
	min-width: 350px;
	max-width: 75%;
	box-shadow: var(--InfoPanel-shadow);
}

.InfoPanel .dataPanel {
	overflow: auto;
	max-height: 500px;
	padding-right: 20px;
}

.closeIcon {
	position: absolute;
	right: -10px;
	top: -10px;
	color: var(--image-characters-color);
	background-color: var(--image-characters-bg-color);
	border: ridge 3px var(--content-area-border-color);
	border-radius: 50%;
	padding: 7px 5px;
}
	.closeIcon:hover {
		color: var(--image-characters-hover-color);
		background-color: var(--image-characters-hover-bg-color);
		text-decoration:none;
	}
	.closeIcon.panelCloseIcon {
		/* use panelClassIcon class on button when the panel has grouping text which pushes the icon down
			e.g.   CssClass="closeIcon panelCloseIcon fa-solid fa-xmark"                     */
		top: -36px;
	}

/*SELECT {
	font-size: inherit;
}*/

/*********  Styles for IawMessageControl *****************/

table.tblIawMessage {
	margin-left: 0px !important;
	margin-right: auto;
	position: relative;
}

table.tblIawMessage .informationIcon,
table.tblIawMessage .warningIcon {
	position: absolute;
	top: 0.08em;
	width: 24px;
	height: 24px;
}

/* error message that appears at the top of the screen, this contains a span element that uses span.errorMessage */
td.errorMessage {
	text-align: left;
	border: var(--td-errorMessage-border);
	font-size: medium;
	color: var(--td-errorMessage-color);
	background-color: var(--td-errorMessage-bg-color);
	padding: 6px 10px 6px 10px;
}

td.infoMessage,
td.warnMessage {
	text-align: left;
	font-size: medium;
	padding: 6px 10px 6px 30px;
}

td.warnMessage {
	color: var(--td-warn-message-color);
}

td.infoMessage ul {
	padding-left: 17px;
}

td.infoMessage ul li {
	font-size: 0.96em;
}

/* style for form errors */
span.errorMessage {
	color: var(--span-error-message-color);
	background-color: Transparent;
}

span.warnMessage {
	color: var(--span-warn-message-color);
	background-color: Transparent;
}

span.infoMessage {
	background-color: Transparent;
}

/* icon styles */
td.errorIcon {
	background-image: var(--td-error-icon);
	background-repeat: no-repeat;
	background-position: center;
	width: 25px;
}

td.informationIcon {
	background-image: var(--td-info-icon);
	background-repeat: no-repeat;
	background-position: center;
	width: 25px;
}

td.warningIcon {
	background-image: var(--td-warn-icon);
	background-repeat: no-repeat;
	background-position: center;
	width: 25px;
}

/*********  END IawMessageControl  *****************

/* style for explanatory text that appears on pages */
.ParaText {
	background-color: var(--ParaText-bg-color);
	font-weight: normal;
	font-size: medium;
	word-spacing: normal;
	color: var(--ParaText-color);
	font-family: var(--ParaText-font);
	letter-spacing: normal;
}

.requiredFieldIcon {
	/* make this really ugly and impossible to miss */
	color: rgb(255,0,0);
	background-color: rgb(0,255,0);
	font-size: 2em;
}

/* this is the little asteristk to appear after a label for required fields */
.required-ind {
	color: var(--error-color);
	font-size: 0.9em;
	position: relative;
	top: 0.3em;
	vertical-align: super;
}
.required-ind:after {
	content: "*";
}

/* To remove row spacing, hide the validator-row where there are elements that don't 
   have "display:none" or in this case also "displau: none". The validator client side
   script adds that extra space after the colon for no apparent reason */
.validation-row:not(:has(.validationMsg:not([style*="display:none"]):not([style*="display: none"]))) {
	display: none;
}

.validationMsg {
	/* style for validator indicators and messages */
	padding: 2px 0px 2px 2px;
	color: var(--error-color);
	font-weight: normal;
}

/* Ajax Tab Control */
.iaw .ajax__tab {
	background-image: none !important;
	padding-bottom: 1px !important;
	height: unset;
	position: relative;
	top: -6px;
}

.iaw .ajax__tab, .iaw .ajax__tab_xp, .iaw .ajax__tab_body {
	font-family: var(--body-font), Arial !important;
}

.ajax__tab_xp .ajax__tab_header {
	background-image: url() !important;
}

/* Set default border-radius to 0 for all tabs */
.iaw .ajax__tab_header span.ajax__tab .ajax__tab_tab {
    border-radius: 0;
}

/* Set top-left radius and for the first child or first-tab */
.iaw .ajax__tab_header:not(.manual-tab) span.ajax__tab:first-child .ajax__tab_tab,
.iaw .ajax__tab_header.manual-tab span.ajax__tab .ajax__tab_tab.first-tab {
	border-left: 1px solid var(--tab-border-color);
    border-top-left-radius: 8px;
}

/* Set top-right radius for the last child or last-tab */
.iaw .ajax__tab_header:not(.manual-tab) span.ajax__tab:last-child .ajax__tab_tab,
.iaw .ajax__tab_header.manual-tab span.ajax__tab .ajax__tab_tab.last-tab {
    border-top-right-radius: 8px;
}

.iaw .ajax__tab_active {
	background-image: none !important;
	height: unset;
}

.iaw .ajax__tab_inner {
	padding-left: 0px !important;
	line-height: 1.21;
}

.iaw .ajax__tab_active .ajax__tab_tab {
	color: var(--selected-tab-color);
	background-color: var(--selected-tab-bg-color);
}

.iaw .ajax__tab:hover {
	background-image: none !important;
}

.iaw .ajax__tab_header {
	padding-right: 0px !important;
	font-size:medium !important;
}

.iaw .ajax__tab_outer {
	background-image: none !important;
	margin-right: 0px !important;
	padding-right: 0px !important;
}

.iaw .ajax__tab_inner {
	background-image: none !important;
}

.iaw .ajax__tab_tab {
	background-image: none !important;
	border-top: 1px solid var(--tab-border-color) !important;
	border-right: 1px solid var(--tab-border-color);
	border-bottom: none;
	background-color: var(--tab-bg-color);
	color: var(--tab-color);
	transition-duration: .2s;
}

.iaw a.ajax__tab_tab {
	padding: 4px 10px !important;
}

.iaw .ajax__tab_tab:hover:not(.ajax__tab_disabled) {
	background-color: var(--tab-hover-bg-color);
	color: var(--tab-hover-color);
}

.iaw .ajax__tab_body {
	border: 1px solid var(--tab-border-color) !important;
	background: transparent !important;
}

.ajax__combobox_itemlist {
	position: fixed !important;
	border: 1px solid var(--input-border) !important;
	border-radius: 0 0 4px 4px !important;
	background-color: #fff !important;
	z-index: 100000;
}
	.ajax__combobox_itemlist li {
		padding: 4px 8px !important; 
	}

.backButton {
	display: inline-block;
	margin: 0;
	padding: 6px;
	background-color: var(--link-bg-color);
	color: var(--link-color);
	border: 3px solid var(--legend-border-color);
	position: absolute;
	top: -36px;
	left: 8px;
	width: 30px;
	text-align: center;
	border-radius: 20px;
	opacity: 1 !important;
}
	.backButton:hover {
		background-color: var(--link-bg-hover-color);
		color: var(--link-hover-color);
	}
	.backButton span {
		position: relative;
		top: 1px;
	}

.saveCancelButtons {
	display: flex;
	margin: 0;
	padding: 0;
	position: absolute;
	top: -36px; 
	right: 30px;
	border: 3px solid var(--legend-border-color);
	border-radius: 20px;
	overflow: hidden; 
	background: transparent; 
}

/* reset any previous inline-block etc. that might be applied elsewhere */
.saveCancel {
	text-align: center;
	font-size: 16pt;
	padding: 5px 10px;
	cursor: pointer;
	background-color: var(--saveCancel-bg-color);
	color: var(--saveCancel-color);
}
	.saveCancel:hover {
		color: var(--saveCancel-hover-color);
		background-color: var(--saveCancel-bg-hover-color);
	}

.banner-icon {
	position: relative;
	font-size: 16pt;
	padding: 5px;
	color: var(--image-characters-color);
}
.banner-icon:hover {
	color: var(--image-characters-hover-color);
	text-decoration: none;
}
/*.page-icon {
	color: var(--image-characters-color);
	background-color: var(--image-characters-bg-color);
	border: 1px solid var(--image-characters-border);
}
.page-icon:hover {
	color: var(--image-characters-hover-color);
	background-color: var(--image-characters-hover-bg-color);
	border: 1px solid var(--image-characters-hover-border);
}*/

.flasher {
	animation: flasher 2s linear infinite;
}
@keyframes flasher {
	50% {
		color: var(--image-characters-hover-color)
	}
}

.PopupPanel {
	color: var(--text-color);
}

.spacer-line {
	height:15px;
}
.group-box {
	outline: 1px solid var(--group-box-border-color);
    border-radius: 5px;
}
.group-box-title-row {
	line-height:15px;
	vertical-align:top;
}
.group-box-title-text {
	position:relative;
	left:5px;
	top:-8px;
    font-weight:bold; 
	background-color:var(--content-area-bg-color);
	Border: 1px solid var(--group-box-border-color);
	border-radius:5px;
	padding:2px 5px 2px 5px;
}

.content-icon {
	color: var(--image-characters-color);
	background-color: var(--image-characters-bg-color);
    border: 1px solid var(--image-characters-border);
	padding: 2px;
}
.content-icon:hover {
	color: var(--image-characters-hover-color);
	background-color: var(--image-characters-hover-bg-color);
    border: 1px solid var(--image-characters-hover-border);
	text-decoration:none;
}
.content-icon.active {
	color: var(--image-characters-selected-color);
	background-color: var(--image-characters-selected-bg-color);
    border: 1px solid var(--image-characters-selected-border);
	text-decoration:none;
}

.missingImage {
	background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 15px 15px;
	display: block;
	width: 45px;
	height: 30px;
}

.SearchBox {
	padding: 6px 10px;
	margin: 3px 0px;
	outline: none;
	font-size: 0.9em;
}

.overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 999999;
	justify-content: center;
	align-items: center;
	cursor: wait;
}

.overlay-content {
    text-align: center;
    color: white;
    font-size: 1.5em;
}

/* Glossary term highlight */
.gloss-term {
	color: var(--glossary-term-color);
	background-color: var(--glossary-term-bg-color);
    text-decoration-line: underline;
    text-decoration-style: dotted;
	text-decoration-color: var(--glossary-term-color);
    cursor: help;
}

/* Glossary tooltip panel */
#gloss-tooltip {
    display: none;
    position: fixed;
	z-index: 2147483647;
    min-width: 200px;
    /*max-width: 360px;*/
	border: 2px solid var(--glossary-tooltip-border);
	background-color: var(--glossary-tooltip-body-bg-color);
	border-radius: 0 5px 5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    font-size: 0.875em;
}

#gloss-tooltip::before,
#gloss-tooltip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: -2px;
}

/* Arrow pointing up — tooltip is below the term */
#gloss-tooltip.arrow-top::before {
    top: -11px;
    border-bottom: 11px solid var(--glossary-tooltip-border);
    border-right: 15px solid transparent;
}
#gloss-tooltip.arrow-top::after {
    top: -7px;
    left: 0;
    border-bottom: 10px solid var(--glossary-tooltip-header-bg-color);
    border-right: 14px solid transparent;
}

/* Arrow pointing down — tooltip is above the term */
#gloss-tooltip.arrow-bottom::before {
    bottom: -11px;
    border-top: 11px solid var(--glossary-tooltip-border);
    border-right: 15px solid transparent;
}
#gloss-tooltip.arrow-bottom::after {
    bottom: -7px;
    left: 0;
    border-top: 10px solid white;
    border-right: 14px solid transparent;
}

#gloss-tooltip-title {
	background: var(--glossary-tooltip-header-bg-color);
	color: var(--glossary-tooltip-header-color);
    font-weight: bold;
    padding: 6px 10px;
    border-radius: 2px 2px 0 0;
}

#gloss-tooltip-body {
    padding: 2px 14px;
	color: var(--glossary-tooltip-body-color);
    overflow-y: auto;
}

#gloss-tooltip-body p {
	margin: revert !important;
	font-size: 12pt;
}

/* arrow-bottom (left side): square the bottom-left corner */
#gloss-tooltip.arrow-bottom {
    border-radius: 5px 5px 5px 0;
}

/* arrow-right: arrow on the right side of the tooltip (RTL or space-driven) */
#gloss-tooltip.arrow-right {
    border-radius: 5px 0 5px 5px;
}
#gloss-tooltip.arrow-right.arrow-bottom {
    border-radius: 5px 5px 0 5px;
}
#gloss-tooltip.arrow-right #gloss-tooltip-title {
    border-radius: 3px 3px 0 0;
}

#gloss-tooltip.arrow-right.arrow-top::before {
    left: auto;
    right: -2px;
    border-bottom: 11px solid var(--glossary-tooltip-border);
    border-left: 15px solid transparent;
    border-right: none;
}
#gloss-tooltip.arrow-right.arrow-top::after {
    left: auto;
    right: 0;
    border-bottom: 10px solid var(--glossary-tooltip-header-bg-color);
    border-left: 14px solid transparent;
    border-right: none;
}
#gloss-tooltip.arrow-right.arrow-bottom::before {
    left: auto;
    right: -2px;
    border-top: 11px solid var(--glossary-tooltip-border);
    border-left: 15px solid transparent;
    border-right: none;
}
#gloss-tooltip.arrow-right.arrow-bottom::after {
    left: auto;
    right: 0;
    border-top: 10px solid white;
    border-left: 14px solid transparent;
    border-right: none;
}

#gloss-tooltip.arrow-right.arrow-top::before {
	transform: unset;
}

.spinner {
    border: 12px solid #f3f3f3;
    border-top: 12px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    margin: 0 auto 20px auto;
}

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

.ttipCell {
	width: 1%;
	white-space: nowrap;
	vertical-align: middle;
	padding-left: 5px;
}
span.ttip, i.ttip, span.vtip, i.vtip {
	vertical-align: middle; /* Vertical centering */
	text-align: center; /* Horizontal centering */
	cursor: pointer;
	padding: 2px;
	border-radius: 50%;
}

i.ttip.visible {
	display: block;
}

/* Used when gif not found */
i.ttip.red {
	background-color: transparent;
	color: red;
	border: transparent;
	text-decoration: none;
	width: max-content;
}

.ttip-image {
	position: absolute;
	z-index: 99;
	border: 5px solid var(--group-box-border-color);
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.exampleCheckbox {
	float: inline-end;
}

.drag-ghost {
	color: var(--draggable-hover-color) !important;
	background-color: var(--draggable-hover-bg-color) !important;
	border: 1px solid var(--draggable-hover-border-color) !important;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: 4px;
	white-space: nowrap;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* IAWDropGrid control*/
.iaw-dropgrid {
	position: relative;
	display: inline-block;
}

.iaw-dropgrid-popup {
	position: absolute;
	background-color: var(--content-area-bg-color);
	border: 1px solid var(--content-area-border-color);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	left: 0;
	top: 100%;
	z-index: 1000;
}

	.iaw-dropgrid-popup[hidden] {
		display: none !important;
	}

.iaw-dropgrid-selectable {
	cursor: pointer;
}

.iaw-dropgrid-face {
	display: inline-flex;
	white-space: nowrap;
	align-items: center;
	text-align: left;
	background-color: var(--input-field-bg-color) !important;
	color: var(--input-field-color);
	border: 1px solid var(--input-border);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	font-family: inherit;
	font-size: inherit;
}


.iaw-dropgrid-text {
	flex: 1 1 auto;
	white-space: nowrap;
}

.iaw-dropgrid-arrow {
	width: 10px;
	height: 10px;
	margin-left: 2px;
	margin-right: 0px;
	position: relative;
	top: -3px;
}

.iaw-dropgrid-arrow::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.createdby span {
	font-style: italic;
	font-size: 0.85em;
}

.dragMe {
	position: relative;
	background-color: #cbd5e0;
	cursor: ew-resize;
	height: 86vh;
	width: 6px;
	margin-top: 40px;
}

.dragCentre {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 30px;
	width: 6px;
	background-color: darkgray;
}

body.dragging,
body.dragging * {
	cursor: col-resize !important;
}