/* General  */

/* visibility:hidden hides an element's own painted content, but the browser's
   default <hr> border is still part of its box and still renders as a thin
   visible line here without an explicit border reset - shows up as a
   duplicate line right above any bordered element (e.g. .formContentMidHeader)
   that happens to be preceded by a clearMe hr. Found 2026-08-16 on
   myProfile.php's Organization Information header, but clearMe is used ~56
   places sitewide - this is the sitewide fix, not a per-page patch. */
.clearMe {clear:both; visibility:hidden; height:0px; border:none; margin:0; padding:0;}

input[type="button"] {
    font-size: 18px;
    line-height: 1.2!important;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0em;
    border-radius: 0.3em;
    padding: 0.8em 1.0em;
    box-shadow: 0 0em 0em rgb(0 0 0 / 20%);
    background: #1d72c2;
    border-color: transparent;
    color: #ffffff!important;
    width:  auto;
}

/* -------------------------------------------------------------------- */
/* -- SITE HEADER / LOGO ------------------------------------------------ */
/* -------------------------------------------------------------------- */
/* The theme header row (.l-subheader at_middle) is a fixed height and the
   logo <img> was sized close enough to fill it that it touched (and in
   practice slightly overran) the header's bottom edge where the background
   color changes to the page background - it needs to be shrunk to guarantee
   clearance on both sides, since there isn't enough row height to add
   padding without doing so. display:block also removes the few px of
   baseline whitespace inline <img> elements otherwise pick up, which was
   making the bottom gap smaller than the top gap even before this fix. */
.l-subheader img.site-header-logo {
	display: block !important;
	height: 60px !important;
	width: auto !important;
	margin: 8px 0 !important;
}

/* Action-based button colors, matching DocInfo Manager's siteGraphicActionDefault
   mapping (siteGraphicActionItemTypeId=2). IDs below are shared across most
   edit pages (generic and hand-built) so these selectors apply site-wide
   without touching individual page files. Anything not listed here keeps the
   default blue above. !important needed to beat css/dark.css's blanket
   `body.dark-mode input[type="button"]` override (also !important) so these
   colors survive in dark mode too. */
#saveData1, #saveData2, #saveChanges, #saveUser, #hashtagUpdateBtn2,
#saveNoteBtn_1, #saveNoteBtn_Float, #saveNoteBtn1,
#contentCoStarAddBtn, #contentPostAddBtn, #coStarDocAddUpdateBtn {
    background: #28a745 !important; /* Save/Update */
}
#backBtn1, #backBtn2, #closeBtn1, #closeBtn1a {
    background: #dc3545 !important; /* Back/Close */
}
#userPhotoDelete {
    background: #dc3545 !important; /* Delete */
}
#downloadPdfBtn {
    background: #063970 !important; /* Export */
}
/* socialPostEdit action buttons - 3 colors chosen to stay distinguishable
   for colorblind users: none of these rely on a red/green distinction (both
   already used above for Back/Delete vs Save), and they differ in both hue
   and lightness from each other and from the blue/green/red/navy already in
   use, so no two same-row buttons read as "the same color" at a glance. */
#postDuplicateBtn1, #postDuplicateBtn2 {
    background: #5b3fa0 !important; /* Duplicate - indigo/purple */
}
#tagEditBtn1, #tagEditBtn2 {
    background: #d9822b !important; /* Tags Edit - amber */
}
#tagMenuBtn1, #tagMenuBtn2 {
    background: #178a91 !important; /* Tag List - teal */
}
/* .btnType1 (<button> elements, e.g. Talent Files upload area) has no other
   base styling anywhere - give it the same look as input[type="button"] so
   the color rule below isn't landing on an unstyled browser default. */
button.btnType1 {
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0.3em;
    padding: 0.6em 1.0em;
    border: none;
    color: #ffffff;
    cursor: pointer;
}
#talentBrowseFilesBtn {
    background: #228B22 !important; /* Browse Files */
}

.modal p{
	line-height: 1.7rem;
	margin: 0 0 0.5rem;
}
.modal input{
	min-height: 1.5rem;
	line-height: 1.7rem;
}
.modal select {
	min-height: 1.5rem;
	line-height: 1.7rem;
}

/*------------------------------------------------*/
/*-- CB9 Standard Modal — shared header/body/footer -*/
/* Ported verbatim from DocInfo Manager (canonical reference there:
   view/docTopic/urlManager.inc #editURLModal, "Add URL"). Apply these
   classes for VISUAL styling only, alongside whatever engine opens/closes
   the modal (jquery-modal class="modal", or a bespoke fixed-overlay div
   with show()/hide()) — they don't assume an engine.
   !important throughout: this file loads BEFORE jquery-modal's own
   stylesheet (see view/header*.inc), so its base .modal rule (display:none,
   padding:15px 30px, box-shadow:0 0 10px #000) is the same specificity as
   .cb9Modal and wins any tied property by loading later - without
   !important the header/footer end up visibly inset from the modal's edges,
   or the flex layout silently doesn't apply at all (footer stranding itself
   away from the bottom instead of following the body). Bugs reported
   2026-08-15. */
/* display/max-height are deliberately NOT set here (and never with
   !important) - jquery-modal opens/closes a modal purely by toggling this
   exact element's inline display style (none <-> inline-block, see
   jquery.modal.min.js), so a stylesheet !important on display would beat
   that toggle in BOTH directions: forcing the modal to always render as
   part of the page (2026-08-15 regression) or preventing it opening at all.
   The 80%-viewport height cap is enforced on .cb9ModalBody instead (below),
   which jquery-modal never touches. */
.cb9Modal {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  /* visible, not hidden: DocInfo's reference close icon is the jquery-modal
     plugin's own auto-injected a.close-modal badge, which floats HALF
     OUTSIDE the modal's top-right corner (negative top/right) - overflow:
     hidden here would clip it to a sliver. Top corners stay visually round
     via .cb9ModalHeader's own border-radius below instead of relying on
     this element clipping its children. */
  overflow: visible !important;
  box-sizing: border-box;
  padding: 0 !important;
  /* Bootstrap 4.2.1 (also loaded on every page, see view/header*.inc) ships
     its own unrelated .modal{height:100%} for ITS OWN modal component -
     since neither jquery-modal's CSS nor anything above sets height at all,
     Bootstrap's wins uncontested (nothing later overrides it) and stretches
     this to the full overlay height. That's what was pushing the footer
     away from the bottom with a phantom gap and mis-centering the whole box
     so far off-scale that the header scrolled above the viewport - confirmed
     by rendering this exact markup+CSS stack in a real headless browser
     (Playwright) and measuring computed styles directly, not guessed from a
     screenshot. Content-based height only, capped by .cb9ModalBody's own
     max-height below. */
  height: auto !important;
}

.cb9ModalHeader {
  background: #1d72c2;
  color: #fff;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  flex: 0 0 auto;
  border-radius: 8px 8px 0 0;
}
.cb9ModalHeader h3 {
  margin: 0;
  font-size: 18px;
  color: #fff;
}
/* No custom close button element here anymore - DocInfo's reference modal
   uses jquery-modal's own auto-injected a.close-modal icon (badge
   overlapping the top-right corner), and having both it and a second,
   inset button was rendering two ×'s stacked on top of each other. Leave
   showClose alone (defaults to true) wherever .modal('show') is called so
   that icon keeps appearing on its own - just restyle IT instead of
   duplicating it. Background matches the site-wide Back/Close convention
   (#backBtn1/2, #closeBtn1/1a in this file) rather than the plugin's
   default dark badge-image, and the image is swapped for a real × glyph
   (::before) since a background-image can't be recolored via CSS. */
.modal a.close-modal {
  background-image: none !important;
  background-color: #dc3545 !important;
  border-radius: 6px !important;
  text-indent: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.modal a.close-modal:hover {
  background-color: #c62f3d !important;
}
.modal a.close-modal::before {
  content: "\00d7";
  font-size: 18px;
  color: #fff;
  line-height: 1;
}

.cb9ModalBody {
  padding: 20px 20px 30px 20px;
  box-sizing: border-box;
  /* Own height cap instead of flex-growing inside .cb9Modal (see the note
     on .cb9Modal - that element's display can't be touched, so it can't be
     made a flex container either). 135px budgets for .cb9ModalHeader +
     .cb9ModalFooter's combined height (measured ~126.6px: 51.6 + 75) plus a
     safety margin, so the modal's total never exceeds 80% of the viewport -
     this scrolls internally once its own content is the part that's too tall. */
  max-height: calc(80vh - 135px);
  overflow-y: auto;
}
.cb9ModalBody::after {
  content: "";
  display: block;
  clear: both;
}
.cb9ModalBody > p,
.cb9ModalBody p {
  float: none;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

.cb9ModalFooter {
  padding: 15px 20px;
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  box-sizing: border-box;
  flex: 0 0 auto;
  border-radius: 0 0 8px 8px;
}
.cb9ModalFooter--split {
  justify-content: space-between;
}

.cb9ModalBtnCancel {
  padding: 10px 25px;
  background: #6c757d;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: auto;
}
.cb9ModalBtnCancel:hover {
  background: #5a6268;
}

.cb9ModalBtnSave {
  padding: 10px 25px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  width: auto;
}
.cb9ModalBtnSave:hover {
  background: #218838;
}

.cb9ModalBtnDanger {
  padding: 10px 25px;
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: auto;
}
.cb9ModalBtnDanger:hover {
  background: #c82333;
}

.cb9ModalBtnNav {
  padding: 10px 25px;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: auto;
}
.cb9ModalBtnPrev { background: #895129; }
.cb9ModalBtnPrev:hover { background: #6e4020; }
.cb9ModalBtnNext { background: #228B22; }
.cb9ModalBtnNext:hover { background: #1b6e1b; }

.modalLookup{
	max-width: 90%;
	min-width: 300px;
	width: 50%;
}
#modalExport{
	max-width: 90%;
	min-width: 300px;
	max-width: 800px;
	width: 70%;
}
#modal1_header1{
	font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0;
  color: #000000; /* #5791d0; */
}
.modalButton {
	float:right;
	margin-left: 10px;
	margin-bottom: 10px;
	font-size: 18px;
	line-height: 1.2!important;
	font-weight: 700;
	font-style: normal;
	text-transform: none;
	letter-spacing: 0em;
	border-radius: 0.3em;
	padding: 0.8em 1.0em;
	box-shadow: 0 0em 0em rgb(0 0 0 / 20%);
	background: #1d72c2;
	border-color: transparent;
	color: #ffffff!important;
	width:  auto;
	cursor: pointer;
}
.modalButtonSm {
	float:left;
	margin-left: 10px;
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.2!important;
	font-weight: 700;
	font-style: normal;
	text-transform: none;
	letter-spacing: 0em;
	border-radius: 0.3em;
	padding: 0.3em 1.0em;
	box-shadow: 0 0em 0em rgb(0 0 0 / 20%);
	background: #1d72c2;
	border-color: transparent;
	color: #ffffff!important;
	width:  auto;
	cursor: pointer;
}
.instruction{
	font-size: 14px;
}
.notificationImg{
	width: 16px;
}
#eventRegistrationWrapper { 
	min-height: 400px;
	max-width: 70%;
	margin-left: auto;
  margin-right: auto;
	margin-top: 30px;
	margin-bottom: 50px;
	padding:  15px;
	border: 4px solid #63b8ff;

	font-family: 'Montserrat',sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 28px;
}

/* -------------------------------------------------------------------- */
/* -- Dashboard PAGE ------------------------------------------------------ */
/* -------------------------------------------------------------------- */
.dashTable{
	margin-top: 5px;
}
.dashTable tr:nth-of-type(2n) { background-color: #f5f5f5; }
.dashTable th {
    color: #fafafa;
    text-align: left;
    background: #5791d0;
    white-space: nowrap;
}
.dashTable th, td { padding: 5px 5px 5px 8px ; line-height: 28px; }

.dashTableWrapper{
	clear: both;
	float: left;
	width: 64%;
	padding-left: 2%;
	line-height: 1.2rem;
	display: block;
	margin:0 0 1rem;
	font-size:0.9rem;
}
.eventView{
	cursor: pointer;
}
.countCenter{
	text-align: center;
}

/* -------------------------------------------------------------------- */
/* -- LOGIN PAGE ------------------------------------------------------ */
/* -------------------------------------------------------------------- */
#wrapperCenter1 { 
	min-width: 300px; 
	width: 30%;
	margin-left: 35%;
	margin-top: 30px;
	margin-bottom: 50px;
	padding:  15px;
	border: 4px solid #63b8ff;

	font-family: 'Montserrat',sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 28px;
}
#username{
	font-family: 'Montserrat',sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 28px;
}
#pwd{
	font-family: 'Montserrat',sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 28px;
}
#loginButton{
	width: 99%;
}
.loginLowerMsg{
	text-align:  center;
}
.forgotPassword{
	padding-top: 10px;
	text-align:  center;
}
.forgotPassword a{
	font-weight: bold;
}
#forgotPasswordButton{
	width: 99%;
}
#resetPassword{
	width: 99%;
}

#wrapperCenter2 {
	min-width: 500px;
	width: 30%;
	margin-left: 35%;
	margin-top: 30px;
	margin-bottom: 50px;
	padding:  15px;
	border: 4px solid #63b8ff;

	font-family: 'Montserrat',sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 28px;
}

/* -------------------------------------------------------------------- */
/* -- LEGAL / POLICY PAGES (ADA, Terms and Conditions, Privacy) ------- */
/* -------------------------------------------------------------------- */
#legalPageWrapper {
	max-width: 900px;
	width: 80%;
	margin: 30px auto 50px auto;
	padding: 15px;
	border: 4px solid #63b8ff;

	font-family: 'Montserrat',sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 28px;
}
#legalPageWrapper h1{
	font-size: 2rem;
	margin-bottom: 0.75rem;
}
#legalPageWrapper h2{
	font-size: 1.4rem;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}
#legalPageWrapper p{
	margin-bottom: 1rem;
}
#legalPageWrapper .legalLastUpdated{
	font-style: italic;
	margin-bottom: 1.5rem;
}

/* Main Content and Forms - Start --------------- */
#mainContent{
	width: 99%;
	padding:  15px 1px 25px 1px;
	font-size:1.0rem;
}

.labelChecked{
	font-weight: bold;
}
.postTagCheck{
	width:99% !important;
	padding-left: 1% !important;
	line-height: 1rem !important;
	margin:0 !important;
}

/* formContent start */
.formContent{
	width: 94%;
	margin-left: 3%;
	border: 4px solid #63b8ff;
	display: block;
}
/* Every .formContent p is float:left (form-field layout below), but
   .formContent itself never established a block formatting context to
   contain them. Pages that happen to end with a clear:both element
   (.formContentMidHeader / .formContentFooter / .formContentTitle) look
   fine by accident; a page that ends with floated content directly inside
   .formContent (e.g. a plain status message with nothing after it) has its
   border collapse to wrap only the non-floated content above, leaving the
   floated content sitting outside/below the border. This clearfix makes
   .formContent correctly size around ALL its children regardless of what
   the last one is. */
.formContent::after{
	content: "";
	display: table;
	clear: both;
}
.formContent p{
	float: left;
	width: 30%;
	padding-left: 2%;
	line-height: 1.2rem;
	/* display: block; */
	margin:0 0 0.8rem;
	font-size:0.9rem;
}
.formContent p label{
	line-height: 1.8rem;
	margin-bottom: 0.2rem;
}
.formContent input:not([type="button"]){
	height: 1.8rem;
	min-height: 1.8rem;
	line-height: 1.8rem;
	border-width: 2px;
	border-radius: 2rem;
	border-color: #d4d5d6;
}
.formContent select{
	height: 1.8rem;
  min-height: 1.8rem;
  line-height: 1.8rem;
  border-width: 2px;
  border-radius: 2rem;
  border-color: #d4d5d6;
}
/* formContent end */

.formContentTitle{
	clear:both;
	width: 100%;
	margin-bottom: 10px;
	border-bottom: 1px solid #63b8ff;
	padding-top: 5px;
	padding-bottom: 5px;
}
.formContentTitle::after{
	content: "";
	display: block;
	clear: both;
}
.formContentMid{
	clear:both;
	width: 100%;
	margin-bottom: 5px;
	margin-top: 5px;
	display: block;
}
.formContentMid::after{
	content: "";
	display: block;
	clear: both;
}
/* Boxed custom sections on Generic Edit pages (e.g. Talent Files, Tag Groups) -
   dark-mode overrides in dark.css. */
.cb9SectionBox{
	border: 1px solid #d0d7e2;
	border-radius: 8px;
	background: #f7f9fc;
	padding: 15px;
}
.cb9SectionMuted{
	color: #888;
	font-style: italic;
}
.cb9DropZone{
	border: 2px dashed #1d72c2;
	border-radius: 8px;
	padding: 15px;
	text-align: center;
	background: #fff;
	min-height: 90px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.cb9DropZone.cb9DragOver{
	border-color: #0d5ba0;
	background: #e8f4ff;
}
/* Colored/collapsible field-group sections on Generic Edit pages (config
   'sectionStart'/'sectionEnd' in a fields array, e.g. coStarEdit's Social
   Media / Compliance groups). Background color comes from the config's
   'bgColor' inline style (light mode); dark-mode overrides target the
   config's 'sectionClass' instead, since inline styles can't be overridden
   without matching literal color values. */
.cb9FieldSection{
	width: 100%;
	border-radius: 8px;
	padding-bottom: 6px;
	margin-bottom: 4px;
}
.cb9FieldSectionHeader{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 2%;
}
.cb9FieldSectionLabel{
	font-weight: bold;
	font-size: 0.9rem;
}
.cb9FieldSectionToggleGroup{
	display: flex;
	align-items: center;
	gap: 8px;
}
.cb9FieldSectionToggleLabel{
	font-size: 0.85rem;
	color: #555;
	white-space: nowrap;
}
.cb9FieldSectionToggle{
	width: 22px;
	height: 22px;
	cursor: pointer;
	transition: transform 0.2s;
}
.cb9FieldSectionToggle:hover{
	transform: scale(1.1);
}
.cb9FieldSectionBody{
	padding-top: 2px;
}
.formContentMid2{
	clear:both;
	width: 100%;
	display: block;
}
.formContentMid2::after{
	content: "";
	display: block;
	clear: both;
}
.formContentMidHeader{
	clear:both;
	width: 100%;
	margin-bottom: 10px;
	margin-top: 20px;
	border-top: 1px solid #63b8ff;
	border-bottom: 1px solid #63b8ff;
}
.formContentMidHeader::after{
	content: "";
	display: block;
	clear: both;
}
.formContentFooter{
	clear:both;
	width: 100%;
	margin-bottom: 5px;
	margin-top: 1px;
}
.formContentFooter::after{
	content: "";
	display: block;
	clear: both;
}
.formContentTA{
	width: 96%;
	height:260px;
	min-height: 1.8rem;
	line-height: 1.8rem;
	border-width: 2px;
	border-radius: 2rem;
	border-color: #d4d5d6;
}
/* CoStarEdit: 20px gap between the Notes label and the <hr class="clearMe">
   border line above it (rendered by the Compliance section's sectionEnd). */
.formContent p:has(#notes){
	margin-top: 20px;
}

.formContentShort{
	width: 96%;
	height:50px;
}

/* formContent2 Start */
.formContent2{
	width: 99%;
	margin-left: 1%;
	border: 4px solid #63b8ff;
	display: block;
}
.formContent2 p{
	float: left;
	width: 50%;
	padding-left: 2%;
	line-height: 1.4rem;
	display: block;
	margin:0.2rem 0 0.3rem 0;
	font-size:0.9rem;
}
.formContent2 p label{
	line-height: 1.8rem;
	margin-bottom: 0.2rem;
	clear: right;
}
.formContent2 input:not([type="button"]){
	height: 1.6rem;
	min-height: 1.6rem;
	line-height: 1.6rem;
	width: 94%;
}
/* formContent2 end */

/* formContentSm start */
.formContentSm{
	width: 94%;
	margin-left: 3%;
	border: 4px solid #63b8ff;
	display: block;
	font-size:0.8rem;
}
.formContentSm p{
	float: left;
	width: 30%;
	padding-left: 2%;
	line-height: 1.0rem;
	margin:0 0 0.5rem;
	font-size:0.8rem;
}
.formContentSm p label{
	line-height: 1.0rem;
	font-size: 0.8rem;
	margin-bottom: 0.2rem;
}
.formContentSm input:not([type="button"]){
	min-height: 1.1rem;
	line-height: 1.0rem;
	border-width: 2px;
	border-radius: 2rem;
	border-color: #d4d5d6;
	font-size: 0.8rem;
	padding: 1px;
}
.formContentSm select{
  min-height: 1.1rem;
  line-height: 1.0rem;
  border-width: 2px;
  border-radius: 2rem;
  border-color: #d4d5d6;
  font-size:0.8rem;
  padding: 1px;
}
/* formContentSm end */

.contentFull{
	float: left;
	width: 98%;
	padding-left: 20px;
	padding-top: 8px;
}
.contentL{
	float: left;
	width: 40%;
	padding-left: 20px;
}
.contentR{
	float: right;
	padding-right: 20px;
}
.buttonLower{
	float: right;
	margin-bottom: 10px;
	margin-left: 10px;
}
.title1{
	font-weight: bold;
	font-size:1.1rem;
}
.title2{
	font-weight: bold;
	font-size:0.9rem;
}
.presentationTitle1{
	font-weight: bold;
	font-size:1.1rem;
	text-align: center;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 5px;
}
.presentationBody1{
	border-bottom: 1px solid #63b8ff;
	margin-bottom: 10px;
}
.presentationBody1 table, tr, th {
	border: 0;
}
.docTitle{
	margin-top:6px;
	font-weight: bold;
	font-size:1.2rem;	
}
.docTitleIndex{
	margin-top:6px;
	margin-bottom:6px;
	font-weight: bold;
	font-size:1.2rem;	
}
.docShowHide{
	font-weight: bold;
	cursor: pointer;
	line-height:26px;
	padding-left: 25px;
}
.docShowHideA{
	background-image: url('/image/b_arrowRightSM.png');
	background-repeat: no-repeat;
}
.docShowHideB{
	background-image: url('/image/b_arrowDownSM.png');
	background-repeat: no-repeat;
}
.docShowHideP{
	display:none;
	padding: 5px 10px 10px 25px;
}

.fieldWrapper{
	width:99%;
	clear:both;
}
.shortInput{
	width:40%;
}
.dateMonthInput{
	width:40%;
	clear: left;
}
.dateDayInput{
	width:25%;
}

.lookupFilter p {
    float: left;
    width: 35%;
    padding-left: 2%;
    margin-bottom: 5px;
}

/* Form Changes  */
.fieldUpdated{
	background-color: #bc8036;
}

/* Doc Content - Start ----------------------------  */
.docContent{
	width: 86%;
	margin-left: 7%;
	border: 4px solid #63b8ff;
	line-height:24px;
}
.docContent p{
	width: 99%;
	padding-left: 2%;
	padding-right: 2%;
}
.docContent ul{
	padding-left: 5%;
	margin-left: 10px;
	line-height: 1.0rem;
}
.docIndent{
	width: 99%;
	padding-left: 4%;
	display: block;
}
/* Doc Content - end ----------------------------  */


/* Main Content and Forms - Start ----------------------------  */

/* List Content */
.listFilter{
	display: none;
	width: 100%;
	/* border-bottom: 1px solid #63b8ff;*/
}
.listFilter p{
	float: left;
	width: 23%;
	padding-left: 2%;
}
.listFilter input{
	min-height: 2.0rem;
	line-height: 2.0rem;
	border-width: 2px;
	border-radius: 2rem;
	border-color: #d4d5d6;
}
/* Daterange filters (view/generic/list.inc) render two type="date" inputs
   separated by a plain "-" character inside one .listFilter p. Left at the
   generic .listFilter input sizing, each date input takes its default
   browser width (~150-200px) and the pair doesn't fit side by side within
   the p's own width. Shrunk and tightened so both sit on one line - applies
   to every daterange filter across all entity configs, not just one page. */
.listFilter input[type="date"]{
	width: 44%;
	min-height: 1.8rem;
	line-height: 1.8rem;
	padding: 0 0.4rem;
	font-size: 0.8rem;
	border-radius: 1rem;
}
.listFilter select{
	height: 2.0rem;
	min-height: 2.0rem;
	line-height: 2.0rem;
	border-width: 2px;
  border-radius: 2rem;
  border-color: #d4d5d6;
}
.listFilterFieldGroup{
	float: left;
	margin-right: 10px;
}
.listFilter label{
	width: 99%;
	display: block;
	padding-left: 5px;
}
#dateRange1{
	width: 46%;
}
.dateRange input{
	min-height: 2rem;
	line-height: 2.0rem;
	padding: 0 0.4rem;
	width: 30%;
	font-size: 0.9rem;
}
.dateRange2 input{
	min-height: 2rem;
	line-height: 2.0rem;
	padding: 0 0.4rem;
	width: 44%;
	font-size: 0.9rem;
}

.selectMulti{
	height: 80px;
}
.selectMulti option{
	border-bottom: 2px solid #AADDEC;;
}
/* List Navigation */
.listContent{
	width: 96%;
	margin-left: 2%;
	border: 4px solid #63b8ff;
	padding: 10px 0;
}

#navPrevFirst{
	padding: 0;
	border-radius: 0.8em;
	width: 30px;
	min-height: 1.6rem;
	margin-top: 2px;
	margin-bottom: 2px;
}
#navPrevFirst2{
	padding: 0;
	border-radius: 0.8em;
	width: 30px;
	min-height: 1.6rem;
	margin-top: 2px;
	margin-bottom: 2px;
}
#navPrev{
	padding: 0;
	border-radius: 0.8em;
	width: 30px;
	min-height: 1.6rem;
	margin-top: 2px;
	margin-bottom: 2px;
}
#navPrev2{
	padding: 0;
	border-radius: 0.8em;
	width: 30px;
	min-height: 1.6rem;
	margin-top: 2px;
	margin-bottom: 2px;
}
#navNext{
	padding: 0;
	border-radius: 0.8em;
	width: 30px;
	min-height: 1.6rem;
	margin-top: 2px;
	margin-bottom: 2px;
}
#navNext2{
	padding: 0;
	border-radius: 0.8em;
	width: 30px;
	min-height: 1.6rem;
	margin-top: 2px;
	margin-bottom: 2px;
}
#navNextLast{
	padding: 0;
	border-radius: 0.8em;
	width: 30px;
	min-height: 1.6rem;
	margin-top: 2px;
	margin-bottom: 2px;
}
#navNextLast2{
	padding: 0;
	border-radius: 0.8em;
	width: 30px;
	min-height: 1.6rem;
	margin-top: 2px;
	margin-bottom: 2px;
}


.selectNav{
	font-size: 0.8rem;
	padding: 0;
	margin-top: 3px;
	border-radius: 0.8em;
	height: 1rem;
	min-height: 1.5rem;
	line-height: 0.5rem;
	width: 60px;
}
#pageCountInfo{
	font-size: 0.8rem;
	margin-left:3px;
	margin-right:15px;
}
#pageCountInfoBtm{
	border-bottom: 1px solid #63b8ff;
}
#pageNavInfo{
	font-size: 0.8rem;
	margin-left:3px;
	margin-right:3px;
}
#pagePerCountLabel{
	font-size: 0.8rem;
	margin-left:3px;
}
.pagePerCountLabel{
	font-size: 0.8rem;
	margin-left:3px;
}
.contentListL{
	float: left;
	width: 25%;
	padding-left: 20px;
}
.contentListR{
	float: right;
	padding-right: 20px;
}
.contentListFull{
	width: 100%;
	font-size: 0.8rem;
	text-align: center;
}
.readonly{
	color:#63666A;
}

/* User Photo - Start */
.userPhotoWrapper{
	float: right;
	width: 33%;
	padding: 2% 1% 0 0 ;
	text-align: center;
	min-height: 440px;
	display:block;
}
.userPhotoArea{
	width: 100%;
	text-align: center;
	margin-bottom: 5px;
}
.userPhoto{
	height: 100%;
	max-height:290px;
	text-align: center;
}
#userPhoto{
	  display: none;
}
#userPhotoDelete{
	margin-top: 5px;
	padding: 0.5rem 0.8rem;
}
#userPhotoUpload{
	padding: 0.5rem 0.8rem;
}
.userPhotoFooter{
	width: 100%;
	text-align: center;
}

input[type='file'] {
  opacity:0    
}

/* User Photo - End */


/* Error Reporting - Start */
.errorHeader{
	width:100%; 
	text-align: center;
	padding-bottom:8px;
	font-weight: bold;
	font-size:1.5rem;	
	border-bottom: 1px solid #63b8ff;
	color:red;
}
.errorText{
	width:100%; 
	text-align: center;
	padding-top:8px;
	font-size:1.0rem;	
}
.errorTextGeneral{
	width:100%; 
	text-align: center;
	padding-top:8px;
	font-size:1.2rem;	
	font-weight: bold;
	line-height: 1.8rem;
	color:red;
}
.errorFooter{
	width:100%; 
	text-align: center;
	display:inline-block;
}
.buttonBack1{
	float:right;
	max-width: 300px;
	margin: 20px 0 0 0;
}
.buttonClose1{
	float:right;
	max-width: 300px;
	margin: 0 1px 0 0;
}
.errorViewWrapper{
	min-height: 400px;
}

.jsonCompare{
	width: 80%;
	margin: 20px 10% 20px 10%;
	border: 1px solid #63b8ff;
}
.jsonCompareHeaderRow{
	display: inline-block;
	width: 99%;
	padding: 0 10px;
	font-size: 1.0rem;
	font-weight: bold;
}
.jsonCompareRow{
	display: inline-block;
	width: 99%;
	padding: 2px 10px 2px 10px;
	margin-bottom: -8px;
	border-top: 1px solid #63b8ff;

}
.jsonCompareCol1{
	display: inline-block;
	width: 33%;
	float: left;
}
.jsonCompareCol2{
	display: inline-block;
	width: 33%;
	float: left;
}
.jsonCompareCol3{
	display: inline-block;
	width: 34%;
	float: left;
}
.jsonChanged{
	background-color: #f6f6f6;
}
/* Error Reporting - End */

.warningText{
	font-weight: bold;
	color:red;
	padding-left: 10 px;
}
.infoText{
	color:green;
	padding-left: 10 px;
}
#forgotEmailMsgP{
	display: none;
}

/* Tool Tip - Start */
.tooltiptextDynamic{
	width:330px; visibility:hidden; opacity:0;
	z-index: 9999;
}

.tooltip {
  position: relative;
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  line-height: 1.2 !important;
  font-weight: 700;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0em;
  /* color: #000000 !important; */
  color: #fafafa !important;
  text-align: center;
  opacity: 100;
  z-index: 100;
}

/* "?" indicator - appears instantly on hover, fades out 1s later (matches
   DocInfo Manager's Info Mouseover behavior). Scoped to .tooltip wrappers
   that contain a genuine .btnImgInfo info icon (not action-button tooltips
   like Reset/Search/Add, which use .tooltip too but shouldn't get a "?").
   Pure CSS, no markup change needed at any existing call site. */
.tooltip:has(.btnImgInfo)::before {
  content: "?";
  display: inline-block;
  color: #3b82f6;
  font-weight: bold;
  font-size: 0.7em;
  vertical-align: super;
  margin-left: 3px;
  opacity: 0;
}
.tooltip:has(.btnImgInfo):hover::before {
  opacity: 1;
  animation: tooltipQmarkFade 0.3s ease-in 1s forwards;
}
@keyframes tooltipQmarkFade {
  to { opacity: 0; }
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 220px;
  background-color: #fff;
  border: 3px solid #1d72c2;
  color: #1d72c2;
  text-align: justified;
  border-radius: 6px;
  padding: 10px 14px;
  position: absolute;
  z-index: 9999;
  bottom: 100%;
  left: 50%;
  margin-left: -110px;

  /* Hidden instantly on mouse-out; the 0.5s delay only applies going in
     (see .tooltip:hover .tooltiptext below) - matches DocInfo Manager. */
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  transition-delay: 0s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  /* 0.5s delay before the info popup appears, after the "?" shows instantly */
  transition-delay: 0.5s;
}

.tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
.tooltipGroupStart {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 4px solid #63b8ff;
}
/* Tool Tip - End */

/* Talent Intake Link label (coStarList.php) - dark-mode override in dark.css,
   since #16548f is too dark to read on a dark background. */
.talentIntakeLabel {
	color: #16548f;
}


/* Btn Start */
.btnImg1{
	width:18px;
	height:18px;
	margin-top: 0px;
	cursor: pointer;
}
/* Non-clickable info icon (paired with .tooltip/.tooltiptext) - cursor:help
   signals it's not a button, per the Info Mouseover standard. */
.btnImgInfo{
	width:18px;
	height:18px;
	cursor: help;
	transition: all 0.3s;
}
.btnImgInfo:hover{
	transform: translateY(-3px);
}
.multiBtnArea{
	margin-right: 6px;
}
.btnImg2{
	width:30px;
	height:30px;
	margin: 2px;
	cursor: pointer;
}
.btnImg3{
	height:30px;
	margin: 2px;
	cursor: pointer;
}
.btnImgSample{
	width:30px;
	height:30px;
}
.btnWrapper{
	float: left;
	width: 10%;
	min-width:60px;
	padding-top: 2%;
	padding-left: 2%;
}
.btnTitle{
	text-align: center;
	width: 99%;
	clear: right;
	padding-bottom: 10px;
}
.btnDisplay{
	text-align: center;
	width: 99%;
}
/* Btn End */


@media (max-width: 800px) {
	.formContent p{
		width: 98%;
	}
	.userPhotoWrapper{
		width: 100%;
	}
}


/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #4a3d8f; /* Deep indigo - distinct from the site's blue chrome */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 9000; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  top: 30px; /* 30px from the bottom */
  border: 4px solid #a68cf0;
  border-radius: 0.3em;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
	visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#snackbar.hide {
	visibility: hidden;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 30px; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {top: 30px; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 30px; opacity: 0;}
}

@keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 30px; opacity: 0;}
}

/* Snackbar end */



/* Testing Below Here */

#listResultTable { 
	width: 100%; 
	margin-top: 10px;
    border-collapse: separate;
    border-spacing: 0;

	background-color: rgba(255, 255, 255, 0.9);

  	-webkit-border-radius: 6px;
  	-moz-border-radius-topright: 6px;
  	border-radius: 6px;

}
tr { border: solid 1px #eaeaea; }
#listResultTable tr:nth-of-type(2n) { background-color: #f5f5f5; }
#listResultTable td {border-bottom: 1px solid #777777;}

th, td { padding: 5px 5px 5px 8px ; }
th:first-of-type{ padding: 0 5px; }

th { 
	color: #fafafa;
	text-align: left; 
	background: #888888;
	white-space:nowrap;
}
th:not(:nth-of-type(n+1)) { text-indent: -9999px; }
th:nth-of-type(n+1) { cursor: pointer; }
th:nth-of-type(n+1):hover { background-color: #777777; }

tr:not(:first-child) td:first-child{ 
	text-align: right;
	white-space: nowrap;
	min-width: 40px;
}

/* Event Details */
.eventbriteEventEdit{
	cursor: pointer; 
	height: 36px; 
	float:right; 
	margin-bottom: 1px; 
	margin-left: 10px;
}
#eventDetailsHeader{
	padding: 3px 5px 3px 5px;
	border: 1px solid #63b8ff;
}
#eventDetails{
	display:none; 
	float: right; 
	width: auto; 
	margin: 5px 10% 0 10%;
}
#eventDetailsTable{
	border-bottom: 1px solid #63b8ff;
}
#eventDetailsTable th, td {
    padding: 5px 5px 5px 8px;
}
#eventDetailsTable th:nth-of-type(1){
	border-left: 1px solid #63b8ff;
}
#eventDetailsTable td:nth-of-type(1){
	border-left: 1px solid #63b8ff;
}
#eventDetailsTable th{
	font-weight: bold;
	color: #fafafa;
	background-color: #1d72c2;
	text-align: center;
	border-top: 1px solid #63b8ff;
	border-right: 1px solid #63b8ff;
}
#eventDetailsTable td{
	text-align: left;
	border-top: 1px solid #63b8ff;
	border-right: 1px solid #63b8ff;
}
#userAttendeeMatchArea{
	width:96%; 
	clear: both;
	display: none;
	padding-left: 5%;
  line-height: 1.2rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}
.userAttendeeMatchWrapper{
	float: left;
  display: inline-block;
  padding: 10px;
	border: 2px solid #63b8ff;
	border-radius: 0.3em;;
}
.userAttendeeMatchTitle{
	display: inline-block;
	float: left;
	width: 290px;
	font-weight: bold;
	font-size:1.0rem;
	padding-bottom: 5px;
}
.userAttendeeMatchBtnArea{
	display: inline-block;
	float: right;
	font-weight: bold;
	font-size:1.0rem;
	padding-bottom: 15px;
}
.userAttendeeMatchColWrapper{
	display: inline-block;
	float: left;
	width: 100%;
	clear: both;
	margin-top: 3px;
}
.userAttendeeMatchCol1{
	display: inline-block;
	float: left;
	width: 120px;
	vertical-align: middle;
	line-height: 1.9rem;
	min-height: 20px;
}
.userAttendeeMatchCol2{
	display: inline-block;
	float: left;
	width: 280px;
	min-height: 20px;
}
.userAttendeeMatchCol2a{
	display: inline-block;
	float: left;
	width: 510px;
	min-height: 20px;
}
.userAttendeeMatchCol3{
	display: inline-block;
	float: left;
	width: 60px;
	text-align: right;
	padding-right: 10px;
	min-height: 20px;
}
.userAttendeeMatchCol4{
	display: inline-block;
	float: left;
	width: 50px;
	text-align: left;
	min-height: 20px;
}
.userAttendeeMatchCol5{
	display: inline-block;
	float: left;
	width: 280px;
	vertical-align: middle;
	min-height: 20px;
}
.userAttendeeMatchCol6{
	display: inline-block;
	float: left;
	width: 70px;
	vertical-align: middle;
	line-height: 1.9rem;
	min-height: 20px;
	padding-left: 10px;
}
.userAttendeeMatchColFull{
	display: inline-block;
	float: left;
	width: 99%;
	vertical-align: middle;
	line-height: 1.9rem;
	min-height: 20px;
	padding: 10px;
}
.userAttendeeMatchArrow{
	cursor: pointer; 
	height: 38px;
}
.userAttendeeMatchBtn{
	float:right; margin-bottom: 1px; margin-left: 10px; font-size: 1.0rem;padding: 0.2em 0.6em; min-height: 2.0rem;
}

/* User List */
#listResultTable th { 
	color: #fafafa;
	text-align: left; 
	background: #5791d0;
	white-space:nowrap;
}
#listResultTable th:not(:nth-of-type(n+2)) { 
	text-indent: -9999px; 
	border-top: 0.5px #5791d0 solid;
	border-bottom: 0.5px #5791d0 solid;
}
#listResultTable th:nth-of-type(n+2) {
	cursor: pointer;
	position: relative;
	border-left: 1px #000000 solid; /* ce3cf3  */
	border-top: 0.5px #5791d0 solid;
	border-bottom: 0.5px #5791d0 solid;
}
#listResultTable th:nth-of-type(n+2):hover { background-color: #bc0be9; }

#listResultTable th:nth-of-type(n+2).asc,
#listResultTable th:nth-of-type(n+2).desc {
	padding-right: 30px;
}
#listResultTable th:nth-of-type(n+2).asc { background: #1d72c2 url('/image/asc.png') no-repeat center right; background-size: 25px; }
#listResultTable th:nth-of-type(n+2).desc { background: #1d72c2 url('/image/desc.png') no-repeat center right; background-size: 25px; }

/* Stacked-value column (config 'secondarySortField') sorted by its second
   field - "2" badge on the sort arrow, top-right corner so it doesn't
   overlap the asc/desc arrow icon (vertically centered via background-size). */
#listResultTable th:nth-of-type(n+2).sort2::after {
	content: "2";
	position: absolute;
	top: 2px;
	right: 2px;
	width: 14px;
	height: 14px;
	line-height: 14px;
	font-size: 0.65rem;
	font-weight: bold;
	text-align: center;
	color: #fff;
	background: #e6a95c;
	border-radius: 50%;
}

/* Select Auto-complete */
#ui-id-1{
	border: 1px solid black;
	height: 300px;
	overflow-y: scroll;
}
.ui-helper-hidden-accessible{
    display:none;
}
.ui-autocomplete-loading {
    background: white url("image/ui-anim_basic_16x16.gif") right center no-repeat;
}
.ui-autocomplete{
	background-color: #AADDEC;
	border: 1px solid black;
	height: 300px;
	overflow-y: scroll;
	max-width: 400px;
}
.ui-menu-item{
	border-bottom: 1px solid black;
	padding: 10px 5px;
}

.menuIcon1{
    width: 20px;
    height: 20px;
    margin-top: 0px;
    cursor: pointer;
}

.headerMessageArea{
	padding-right: 50px;
	font-weight: bold;
	font-size: 1.3rem;

}

/* ---------------------------------------------------------------
   Radio Edit Items (edit page radio button groups) - pill style,
   ported from DocInfo Manager's serverAliasEdit "File Exists" /
   "Quick Menu" fields (css/main.css .radio-edit-item there).
   Dark-mode variant: css/dark.css body.dark-mode .radio-edit-item.
--------------------------------------------------------------- */
.radio-edit-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: normal;
    transition: all 0.2s;
    white-space: nowrap;
    line-height: 1.4rem; 
    margin-bottom: 0.3rem;
}

.radio-edit-item:hover {
    background: #e8e8e8;
    border-color: #ccc;
}

.radio-edit-item:has(input:checked) {
    background: #e3f2fd;
    border-color: #1d72c2;
    color: #1d72c2;
}

.radio-edit-item input[type="radio"] {
    margin: 0;
    cursor: pointer;
    width: auto;
}

/* contentRawList Thumbnail column (replaces the Id column there, 2026-08-16) */
.thumbCell {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
    vertical-align: middle;
}
.thumbCellPlaceholder {
    width: 28px;
    height: 28px;
    object-fit: contain;
    opacity: 0.6;
    vertical-align: middle;
}