@import url("/views/common/css/common-bs2.css");

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i&display=swap');
@import url('https://use.typekit.net/pve2wvk.css');

@font-face {
    font-family: showcase;
    src: url("/userfiles/brainiac-media/fonts/ShowcaseSans.otf") format("opentype");
}

.logotop {
	font-family: showcase;
	padding-top:20px;
}

.top-logo {
	width: 40px;
	margin-right:10px;
}

.logotext {
	font-size:14px;
	margin-top:8px;
}


.reorderable .sorting_1{
	cursor: grabbing!Important;
}


.heading {
	font-weight:bold;
	padding-bottom: 10px !important;
	border-bottom:1px solid #ddd;
	margin-bottom: 10px !important;
}

.dtcards tbody tr {
	float: left;
	width: 24%;
	margin: 0.5rem;
	border: 0.0625rem solid rgba(0,0,0,.125);
	border-radius: .25rem;
	box-shadow: 0.25rem 0.25rem 0.5rem rgba(0,0,0,0.25);
	min-height:400px !important;
}
.dtcards tbody td {
	display: block;
}
.dtcards thead {
	display: none;
}

.dtcards td:before {
	content: attr(data-label);
	display: inline;
	position: relative;
	/*font-size: 85%;
	top: -0.5rem;*/
	float: left;
	color: #808080;
	min-width: 4rem;
	margin-left: 0;
	margin-right: 1rem;
	text-align: left;
}


	.u-shadow-v31 .g-pos-abs .g-right-0 .g-z-index-2 .g-bg-white .u-dropdown--css-animation .u-dropdown--reverse-y .u-dropdown--simple {
		bottom:-137px;
	}

	.u-dropdown--simple.u-dropdown--reverse-y, .u-dropdown--jquery-slide.u-dropdown--reverse-y, .u-dropdown--css-animation.u-dropdown--reverse-y {
    top: -55px;
    left: -155px;
    width: 147px!Important;
    bottom: -185px;
    margin-top: 0 !important;
    margin-bottom: 1.42857rem;
}

tr.selected td:before {
	color: #404040;
}

.table .fa {
	font-size: 1.2rem;
	text-align: center;
}

.dtcards .fa {
	font-size: 7.5rem;
}

.limitH {
	height:350px !Important;
	/* overflow: scroll; */
	overflow-y: scroll;
	overflow-x: hidden;
}
.attendees{
	overflow-y: scroll;
	overflow-x: hidden;
}
.shiftLeft{
	padding-right:17px;
}


.meetingPillOuter{
	margin:2px;
}
.meetingPillPadding{
	background-color: #6c8caf;
	border-radius: 5px;
	margin:2px;
}
.meetingPillInnerPadding{
	padding:2px
}




.dnone{
	display: none;
}
.linkedIncidentItem{
	cursor: pointer;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-right: 6px;
    border: 0;
    border-radius: 100px;
    padding: 7px 14px;
    padding-right: 33px;
    float: left;
    font-size: 12px;
    line-height: 1.6666667;
    font-weight: 400;
    text-transform: none;
    position: relative;
    background-color: #03A9F4;
	color: #fff !important;
}
.linkedIncidentItem a{
	color:white;
}
.linkedIncident{
	display: none;
}

.borderless td, .borderless th {
    border: none;
}

/*
	Expand/collapse note preview inside <a class="showmore"> (CRM notes tables,
	grievance/disciplinary views). These two must stay scoped under .showmore:
	Bootstrap 4 also has a .small utility (font-size:80%), and a bare .small here
	pins every element using that utility to 18px with hidden overflow - the
	COL-4470 "file list shows half a row" bug.
*/
.showmore .small {
    height: 18px;
    overflow:hidden;
	color:#808080;
	background-color:inherit;
	font-size: 14px !important;
}

.showmore .big {
    height: auto;
	color:#808080;
	background-color:inherit;
	font-size: 14px;
}

.emailattach {
	float:left;
	width: 150px;
	border :1px solid #ccc;
	margin-right:10px;
	margin-bottom:10px;
	border-radius: 5px;
	padding: 10px;
}

.emailattach p {
	float:left;
	width: 100%;
	margin:0;
}

.theIcon {
	float:left;
	height: 50px;
	width: 50px;
}

.theImageIcon {
	font-size: 50px!important;
	}

.rotate90 {
	-webkit-transform: rotate(-90deg) !important;
	-moz-transform: rotate(-90deg) !important;
	-ms-transform: rotate(-90deg) !important;
	-o-transform: rotate(-90deg) !important;
	transform: rotate(-90deg) !important;
	margin-right:20px !important;
}

.showmore:focus, .showmore:focus{text-decoration: none;}

.box-footer {margin-bottom:5px; background-color:#dbdbdb;}
.row-footer-submit {
	color: #fff;
	background-color: #f0ad4e;
	border-color: #eea236;
	font-size: 14px;
}

/* The page you are on, in the left-hand menu (Rob, 8 Oct 2026: make it stand out). It was
   #6c8caf text - darker than the unselected items (#d4dade) on the #2e3c56 sidebar, so it
   read as greyed out. Now white, bold, on a light band with a light-blue bar down its left
   edge (an inset shadow, so nothing shifts). Where a third-level item is the page, only that
   item gets the band; its second-level parent just turns white. */
.u-sidebar-navigation--dark .u-side-nav--second-level-menu-link.active,
.u-sidebar-navigation--dark .u-side-nav--third-level-menu-link.active,
.u-sidebar-navigation--dark .u-side-nav--second-level-menu-link.active:hover,
.u-sidebar-navigation--dark .u-side-nav--third-level-menu-link.active:hover {
    color: #fff;
    font-weight: 600;
    background-color: rgba(189, 222, 247, .14);
    box-shadow: inset 3px 0 0 #bddef7;
}

.u-sidebar-navigation--dark .u-side-nav--second-level-menu-link.active i,
.u-sidebar-navigation--dark .u-side-nav--third-level-menu-link.active i {
    color: #bddef7;
}

.u-sidebar-navigation--dark .u-side-nav--second-level-menu-item:has(.u-side-nav--third-level-menu-link.active) > .u-side-nav--second-level-menu-link.active {
    background-color: transparent;
    box-shadow: none;
}

.u-btn-primary {
    color: #fff !important;
    background-color: #6c8caf !important;
}

/* COL-4390: a blue action icon that does not depend on the cascade.
   g-color-primary is #e62154 on BSIA - red - which is why edit pencils using
   it read as non-standard. The previous fix dropped the class and let the icon
   inherit the anchor colour, which happens to be this blue but is an accident
   of whichever stylesheet won; it goes black anywhere the anchor is restyled.
   Naming it here makes it deterministic and brand-independent. */
.g-color-blue {
    color: #3498db !important;
}

.u-sidebar-navigation--dark .u-side-nav--top-level-menu-link:hover {
    color: #bddef7;
}

.u-sidebar-navigation--dark .u-side-nav--second-level-menu-link:hover {
    color: #bddef7;
}

.u-sidebar-navigation--dark .u-side-nav--second-level-menu-link:hover i {
    color: #bddef7;
}

.form-control:focus, .custom-select:focus {

    border-color: #6c8caf;
    box-shadow: none;

}

[class*="u-table--v3"] th:first-child, [class*="u-table--v3"] th.g-first-child, [class*="u-table--v3"] td:first-child, [class*="u-table--v3"] td.g-first-child {
    text-align: left;
    border-left: 1px solid;
}


.u-btn-primary:hover, .u-btn-primary.active {
    border-color: #bddef7;
    background-color: #bddef7;
	color:#595959;
}

.btn-primary:hover {

    color: #bddef7;
    background-color: #bddef7;
    border-color: #bddef7;

}

.btn-primary {

    background-color: #6c8caf;
    border-color: #6c8caf;

}


.page-item.active .page-link, .page-item.active .page-link:focus, .page-item.active .page-link:hover {
    border-color: #6c8caf;
    background-color: #6c8caf;
}

.u-sidebar-navigation--dark .u-side-nav--top-level-menu-link:hover i {
    color: #6c8caf;
}

.grey-icon {
	color: #8c8c8c !important;
}

.clearissue {
	margin:0 !important;
	padding:0 !important;
	width: 100% !important;
	display: inline-block !important;
}

.large-icon {
	font-size: 30px;
}

.icon-custom{
	width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.med-icon {
	font-size: 20px;
}

.icon-circle {
    width: 60px;
    height: 60px;
    padding: 6px 0px;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}
.content {
	min-height: 40vh;
	margin-bottom: 20px;
}
/* The admin sidebar menu is a position:fixed, full-viewport-height overlay; the dark
   backdrop behind it is this in-flow column, which only stretches to the height of the
   page content beside it. Guarantee the backdrop reaches the bottom of the viewport so
   sparse pages don't leave the lower menu items sitting on the white page background
   (65px = fixed header height). */
#sideNav {
	min-height: calc(100vh - 65px);
}

.opt {
	height:120px;
	width: 120px;
	/*border:1px solid #000 !important;*/
	
	float:left;
	text-align: center !important;
	margin: 10px 10px;

}



/*.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
    display: block !important;
}
*/

::-webkit-input-placeholder { /* Edge */
  color: #b3b2b2 !important;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #b3b2b2 !important;
}

::placeholder {
  color: #b3b2b2 !important;
}


.btn-file {
		    position: relative;
		    overflow: hidden;
		}

.btn-file input[type=file] {
		    position: absolute;
		    top: 0;
		    right: 0;
		    min-width: 100%;
		    min-height: 100%;
		    font-size: 999px;
		    text-align: right;
		    filter: alpha(opacity=0);
		    opacity: 0;
		    background: red;
		    cursor: inherit;
		    display: block;
		}

/*input[readonly] {
		background-color: #ccc !important;
		cursor: text !important;
	}
*/

.mr-3 {
	margin-right:30px;
}

.my-group .form-control{
    width:50%;
}

.pr-3 {
	padding-left:30px;
}

.cal-header {
    margin-top: -18px;
    font-size: 18px;
}

.cal-header2 {
    margin-top: 8px !important;
    font-size: 14px;
}

.topboxes {
	margin: 30px 10px !important;
}

.specialHeader {
	border:0;
	padding:0;
	color:white !important;
	font-size:16px !important;
}

.whitebg {
	background-color:white !important;
/*	padding-left: 0px !important;
	padding-right: 0px !important;*/
}

.whitebg h3 {
    margin: 0;
	color:#ccc
}

.squarebox h4 {
	font-size:15px;
}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
    color: #ccc;

}

.thenumber {
	margin-top:-10px;
	font-size:50px;
}

/*
.fc td .fc-sat .fc-day-number,.fc td .fc-sun .fc-day-number {color:#fff !important}

.fc-basic-view .fc-day-number, .fc-basic-view .fc-week-number {
    padding: 2px;
    margin-top: 10px;
	margin-right: 10px;
}

.table-bordered {
    border: 0;
}

.fc-basic-view .fc-body .fc-row {
    min-height: 4em;
    margin-top: 10px;
}

.table-bordered td .fc-day {
	margin-left:10px !important;
	border-right:5px solid #fff !important;
}

.fc-toolbar h2 {
    margin: 0;
	color:#ccc
}

.fc-header-toolbar .btn-default {
    color: #fff !important;
    background-color: #666666 !important;
    border-color: #666666 !important;
}

.fc td .fc-sat,.fc td  .fc-sun {
	border-color:#c8dfee;
	background-color:#cbe5f4 !important;
	color:#fff !important;
	}


.fc td .fc-today .fc-day-number {
	color:#69a8dd !important;
	}


.fc td .fc-today, .fc td .fc-today {
 	border: 1px solid #69a8dd !important;
	color:#69a8dd;
	background-color:#fff !important;
}


.fc-bg, .fc-bgevent-skeleton, .fc-helper-skeleton, .fc-highlight-skeleton {
    position: absolute;
    margin-top: 10px;
}

.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
    border: 0;
}

.fc-day {
	margin:20px;
	background-color:#f2f2f2 !important;
	color:#d5d5d5 !important;
}

.fc-day-header .fc-sat, .fc-day-header .fc-sun {
	background-color:#69a8dd !important;
	color:#fff !important;
	}

.fc-day-header {
	background-color:#bfbfbf !important;
	color:#fff !important;
}
*/
.costper {
	float:left;
	width:100%;
}



.max-height-600 {
	max-height: 500px;
	overflow-y: scroll;
	height: 500px;
}

.specialbox {
	border-left: 4px solid #5E7BD7;
	background-color:#fff !important;
	height:55px;
	padding:5px;
	font-size: 20px;
	line-height: 45px;
	vertical-align: middle;
	color:#666666 !important
}

.specialbox span {color:#666666 !important}


.graybg {
	background-color:#e6e6e6 !important;
}

.skin-green .main-header .logo {
    background-color: #000 !important; /*184785*/
    color: #fff;
    border-bottom: 0 solid transparent;
}

.skin-green .sidebar-menu > li:hover > a, .skin-green .sidebar-menu > li.active >a , .skin-green .sidebar-menu > li.menu-open > a {
    color: #fff;
    background: #535354;
}

.sidebar-menu a {
	color: #fff;
}

.skin-green .wrapper, .skin-green .main-sidebar, .skin-green .left-side {
    background-color: #535354;
}

.squarebox {
	margin:10px;
	text-align:center;
	float: left;
	font-size:20px;
	padding-top:15px;
	height:130px;
	width:140px;
	border:1px solid #eee;
	box-shadow: 5px 10px 8px #eee;
	border-radius: 15px
}

.squareAlert {
	border: 1px solid #f00;
}

.squareSuccess {
	border: 1px solid #006600;
}

.toplogo {
	/*background-color:#fff !important;*/
	margin:5px;
	padding:5px;
}

.theLogo {
	max-height: 50px !important;
	margin:0 !important;
}

.skin-green .main-header .navbar {
    background-color: #fff;
	border-bottom:1px solid #eee;
}

.skin-green .main-header .navbar .sidebar-toggle:hover {
    background-color: #fff;
	color: #eee
}

.skin-green .main-header .navbar .nav>li>a {
    color: #000;
}

.user-menu {
	background-color:#ccc;
}

.skin-green .main-header .navbar .sidebar-toggle {
    color: #000;
}

.skin-blue .main-header .navbar .nav > li > a .fa {
    color: #000;
    font-size: 25px;

}

.skin-blue .main-header .navbar {
    background-color: #fff;
	color: #000;
	border-bottom:1px solid #eee;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: #fff;
	color: #eee
}

.skin-blue .main-header .navbar .nav>li>a {
    color: #000;
}

.skin-blue .main-header .navbar .sidebar-toggle {
    color: #000;
}

.fanav {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

/*	border:0 !important;*/

	margin:0 0 0 0 !important;
	padding:0 !important;
	width:20px !important;
	float:right !important;
	text-align: right !important;
}


.padding-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.bg-transparent {background-color:transparent !important;}

.job-placement h2, .job-placement h3, .job-placement p {color:#fff;}
.job-placement .placement-heading {
    border: 1px solid #122a38;
    background-color: #122a38;
    padding: 15px;
	min-height:280px;
}

.job-placement .placement-content {
    border: 1px solid #3c8dbc;
    background-color: #3c8dbc;
    padding: 15px;
	min-height:280px;
}

.padding-0 {padding:0px !important;}
.margin-0 {margin:0px !important;}

.text-red, .text-red a {color:#990000 !important;}

.decoration-0 {text-decoration: none !important;}

.agency-document {margin-top:30px;}

.margin-0 {margin:0px !important;}
.notice-note {margin-bottom:100px;}

.badge-invis {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 10px;
}

.btn-group-invis {background-color:#fff!important;}

/*.pricing-mega-v3 h4 {
    min-height: 110px !important;
}*/

/*.fa-times {
    color: #e74c3c !important;
}*/
.pricing-mega-v3 .fa-times {color:#ff0000;}

.btn-group a:hover {text-decoration: none!important;}

.container .content-boxes-v3 {background-color:transparent !important; border-bottom:transparent;}

.header-help-btn {background-color:#ff0000; padding:1px;}

.popover {min-width:276px; z-index:3001!important;}

.btn-u {
    border: 0;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    font-weight: 400;
    padding: 6px 13px;
    position: relative;
    background: #72c02c;
    white-space: nowrap;
    display: inline-block;
    text-decoration: none;
}

.btn-default {
    color: #fff !important;
    background-color: #f0ad4e !important;
    border-color: #eea236 !important;
}

.theError {color:red;}

.modal-content {padding:25px;}

.skin-green .sidebar-menu > li > .treeview-menu {
    background: #3c5058 !important;
}

.max-150 {min-width:150px;}

.btn-box-tool {color:#000 !important;}

/*.row .btn {color:#fff;}*/


.header-checkbox {
	width: 20px !important;;
	height: 20px !important;;
}

.button-group-dash {margin-bottom:50px;}

.white-text {color:#fff !important;}

.green-button {
	border: 1px solid #007500;
	background-color:#007500;
	color:#fff;
	margin:0 15px;
	padding:10px;
	border-radius:10px;
}

.btn-right {float:right;}



.hr-grey {
	border-color: #868686;
	margin-bottom: 10px;
    margin-top: 10px;
}
.margin-top60 {
	margin-top:60px;
}
.margin-top40 {
	margin-top:20px;
}
.no-border-bottom {border-bottom:none !important;}
.full-wdith {width:100%;}
.border-smart {border: 1px solid #dddddd; padding:10px;}
.bsia-job-details-logo {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 900px;
    margin: 5px 0 0 5px;
    padding: 20px;
}

.margin-top-30{margin-top:30px;}
.margin-top-60{margin-top:60px;}

.bsia-job-details-font {
	color:#808080 ;
	margin:0 0 1px ;
	padding:none ;
}
.tabs-jis {
	border-bottom:1px solid #ccc;
}

.tabs-jis li {
	width: 16.66%;
	text-align: center;
}

.tabs-jis img {
	margin: 0 auto;
	max-width:100% !important;
}
.border-grey { border:1px solid #ddd;}
.grey-background {background-color: #dddddd; padding:10px;}
.margin-10 {margin:10px;}
.padding-10 {padding:10px;}
.margin-top-8 { margin-top:8px;}
.no-bottom { border-bottom: 1px solid #fff !important; }

.border-right-shade h4 {text-decoration:underline;}
.border-left-shade h4 {text-decoration:underline;}

.border-right-shade {border-right:1px solid #eee; padding-right:90px !important;}
.border-left-shade {padding-left:90px !important;}
.tabs-jis .bsiaOrange {font-size:1.2em;}


.container-v2 {
    clear: both;
    color: #333;
    font-size: 13px;
    line-height: 1.6;
}


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    color: #000 !important;
    font-weight: bold;
}

.ui-datepicker-month, .ui-datepicker-year, ui-state-default {color:#000;}

.small-icons {
	width:100%;
}
.small-heading {
	font-size:1.5em;
}
.bsia-info-tabs li {
	width:12%;

}
.modal { overflow-y: auto !important; }

/*.modal-lg {
    margin: 30px auto;
    width: 80%;
}*/

.job-details-more-box-inside {
	border-color:#dddddd;
	background-color:#dddddd;
	padding:10px;
	margin: 0 10px 20px;
	color:#808080;
}
.border-main {border:1px solid #ddd;}
.advert-border-box {
	border:1px solid #ececec;
	background-color: #ececec;
	box-sizing: border-box;
	padding:5px
}
.ad-box-heading {
	border:1px solid #868686;
	box-sizing: border-box;
	background-color: #868686;
	color:#fff;
	padding:5px;
}
.ad-box-footer {
	border:1px solid #868686;
	box-sizing: border-box;
	background-color: #868686;
	margin:5px;
	padding:5px;
	color:#fff;
}
.ad-box-footer-main {
	border:1px solid #ea620e;
	box-sizing: border-box;
	background-color: #ea620e;
	margin:5px;
	padding:5px;
	color:#fff;
}






.pricing-head h4 {
    color: #888;
    padding: 10px 10px;
    font-size: 50px;
    text-shadow: 0 1px 0 #fff;
    border-bottom: solid 1px #f5f9e7;
    /*float: left;*/
	width: 100%;
}

.pricing-head h4 {
    color: #888;
    padding: 10px 10px;
    font-size: 40px;
    text-shadow: 0 1px 0 #fff;
    border-bottom: solid 1px #f5f9e7;
}

.green-button .fa {
	color:#000;
}

.padding-bottom-25 {padding-bottom:50px;}

.no-bottom {
	border-bottom:none !important;
}

.border-box-grey {
	border: 1px solid #000;
	background-color:#bdbdbd;
	padding:15px;
	text-align: center;
}

.dashboard-training {
	padding:15px;
	text-align: center;
}

.dashboard-training .fa {
	color:#00b000;
}

.ct-green {
	color:#00b000;
}

/*.content {
    min-height: 250px;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
	width:100%;
}

.content-header {
    position: relative;
    padding: 15px 15px 15px 15px;
}*/

.content-wrapper, .right-side {
    min-height: 100% !important;
    background-color: #e6e6e6;
    z-index: 800;
}

.dashboard-training .btn-primary {
	border: 1px solid #00b000;
	background-color:#00b000;
	text-align: center;
	color: #fff;
}

.border-box-secondary .fa {
	color:#00b000;
}

.border-box-secondary {
	padding:15px;
	text-align: center;
	border-radius:15px;
}

.border-box-secondary .btn-secondary {
	border: 1px solid #ffc000;
	background-color:#ffc000;
	text-align: center;
	color:#000;
}

.learn-more {
	color:#0000EE !important;
	text-decoration: underline;
}

.primary-color {
	color:#00b000;
	text-align: center;
}

.upgrade-options {
	text-align: center;
	margin:0 60px;
}

.upgrade-options .btn-primary {
	border: 1px solid #ffc000;
	background-color:#ffc000;
	text-align: center;
	color:#000;
}

.container-dashboard {
    width: 1170px;
}

.container-dashboard {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.inner h3 {color:#fff;}
.job-details-box {
	border-color:#fff;
	background-color:#fff;
	padding:10px;
	color:#808080;
}
.width-50 {width:50% !important;}
.job-details-font h4 {margin-bottom:3px;}
.text-left { text-align:left !important;}
.margin-bottom-3 {margin-bottom:3px;}
.info-box {border:1px solid #ddd;}
.info-box-text {margin-top:15px;}
.job-details-more-box {
	border-color:#000;
	background-color:#fff;
	padding:10px;
	margin: 0 10px 20px;

	color:#808080;
}


.uppercase {text-transform:uppercase;}
.container-v2 {
    width: 1170px ;
}

.container-v2 {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

#vtour-modal {
    position: absolute !important;
    width: 500px !important;
    height: 500px !important;
	background-color:#fff !important;
}










































/*.nav-getting-started img {width:130px;} */
.margin-left-right-60 {margin-left:25px;}
.margin-left50 {margin-left:70px;}
.space-right {margin-right:20px;}
.trackerNo {width:100%; text-align:center;}

.regerror {border:1px solid #f00 !important; background-color:#ffcccc !important; color:#000 !important;}
.regok {border:1px solid #00c713; background-color:#bdffc3; color:#000;}
#successMessage {border:1px solid #00c713; background-color:#bdffc3; color:#000; padding:20px; height:50%; width:100%;}
#errorMessage {border:1px solid #f00; background-color:#ffcccc; color:#000; padding:20px; width:100%; margin-bottom:20px;}
.captcha {border:0px;}

.errorButton {background-color: #f00 !important; color:#fff;}

.red {color:red;}
.up-abit {margin-top:-10px;}
.row-invoice {height:50px; line-height:40px; vertical-align:middle; }

.row a {color:#000;}

.roles-expandable{
	padding-left:15px;
	color:blue;
	cursor:pointer
}
.checkAll{
	padding-left:15px;
	color:blue;
	cursor:pointer
}

.rolesTable{
	border-bottom:solid #b3b3b3 3px
}
.rolesTR{
	border-bottom:solid #b3b3b3 3px
}

.glyph-top-pad {padding-top:10px;}
.small-glyph {float:right; font-size:15px !important; margin-top:0; padding:7px 0 0 7px;}
.small-form {width:150px}
.smaller-form {width:70px}
.cal-events {padding-left:15px;}
.border-bottom {border-bottom:1px solid #eee;}
.border-bottom-roles {border-bottom:3px solid #b3b3b3;}
.white {color:#fff;}
.margin-top20 {margin-top:20px;}
.white a:hover {color:#fff;}
.bsiaOrange {color:#ea620e;}
.bsiaGreen {color:#4bc783;}
.bsia-dashboard-icons {
	margin:12px;
}

.white {color:#fff !important;}

.btn-bsia {
	color:#fff !important;
	background-color:#ea620e;
	border-color:#d2580c;
}
.btn-bsia:hover {
	color:#fff !important;
	background-color:#d2580c;
	border-color:#d2580c;
}
.btn-bsia:active {
	color:#fff !important;
	background-color:#d2580c;
	border-color:#d2580c;
}
.btn-bsia:focus {
	color:#fff !important;
	background-color:#d2580c !important;
	border-color:#d2580c !important;
}
.btn-job-dead {
	background-color:#a6a6a6 !important;
	border-color:#a6a6a6 !important;
}
.btn-primaryBSIA:hover {
    background-color: #db7c08;
    border-color: #746220;
    color: #fff;
}
.BSIAcontactBox {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
h3 {width:100%;}
.btn-primaryCT:hover {
    background-color: #970000;
    border-color: #690000;
    color: #fff;
}
.white-glyph {
	color:#FFF !important;
}
.pageheader h3 {width:60%}

.pagecontent {
    float: left;
    margin: 0 20px 0 20px;
    width: 98%;
}

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

.text-center {text-align:center !important;}

.row-deleted {text-decoration: line-through !important; }
.fa-large {font-size:20px !important; color: #6c8caf !important;}

.white {color:#fff !important;}

.fa-larger {font-size:40px !important;}
.fa-margin-top {margin-top:20px;}
.space-left {margin-left:10px;}
.red {color:#990000;}
.blue {color:#0033ff;}
.green {color:#006600;}
.orange {color:#ea620e;}
.text-left {text-align:left !important;}

.datepicker {position: relative;}

.green {color:green; font-weight:bold;}

.TheCheckbox {border:1px solid #000; width:50px !important;}

.no-margin {margin:0;}
.margin-bottom-10 {margin-bottom:10px;}
.margin-bottom-20 {margin-bottom:20px;}
.margin-bottom-40 {margin-bottom:40px;}
.margin-bottom-60 {margin-bottom:60px;}


.pricing-head h2 {
    background: #74c52c none repeat scroll 0 0;
    border-radius: 3px 3px 0 0;
    color: #fafafa;
    font-family: Arial;
    font-size: 30px;
    padding: 12px 0;
    text-shadow: 0 1px 0 #32a20f;
}

.recruitmentboarder {
	border-width:100%;
	border-color:#32a20f;
	border-radius: 3px 3px 0 0;
}

.job-specifics {font-size: 16px; border:1px solid #ccc;  padding:20px; margin-bottom:30px; border-radius:5px; background-color:#eee;}
.job-options {float:right; width:250px; text-align:right; margin-bottom:30px;  }
.btn-job {width:200px; color:#fff !important;}
.job-specifics .fa {font-size:25px; margin-right:20px; }
.job-options .fa { margin-right:20px; }
#jobsearch p {color:navy;}

#FeaturedJobs h1,h2,h3,h4 {color:#000;}
#FeaturedJobs {margin-top:20px;}

.row-job {background-color:#eee; padding:10px; border-radius:10px; border-bottom:1px solid #ccc; margin-bottom:10px;}

.ui-menu .ui-menu-item a{
    background:red;
    height:10px;
    font-size:8px;
}

#chart {z-index:1}

.cardcall {text-transform: capitalize;}

.blank {border:0;}

.topline {border-top:1px solid #000;}

.top-nav-right {float:right; margin-right:-40px;}
.top-nav-right-inv {float:right; margin-right:-20px; width: 13%; }
.top-nav-right-sec {float:right;}
.top-nav-right-thr {float:right; width: 120px;}
.top-nav-right-exp {float:right; width: 200px;}
.form-right {float:right; padding-right:23px; }
.small-form {float:right; }

.dropdown-filter {float:left; width:200px;}

.btn-space {margin-right:10px;}

.knob {background-color:transparent !important;}

dl {
    margin-bottom: 0;
    margin-top: 0;
}
.dl-widespace .dl-horizontal dt {
   /* float: left;*/
  	width: 15% !important;
	text-align:left !important;

}

/*.dl-horizontal dd {
  	width: 75%;
	margin-left: 50px !important;
	float: left;
 	margin: 0;
}*/
.dl-horizontal dt {
   /* float: left;*/
  	/*width: 25% !important;*/
	text-align:left !important;

}

.largeDate {display:inline; visibility:visible; float:left;}
.smallDate {display:none; visibility: hidden; height:0; width:0; font-size:0px; float:left;}

.form-control-select {
  /*display: block;
  height: 34px;*/
  padding: 6px 12px;
  /*margin:0px;*/
  background-color: #ffffff;
  background-image: none;
  border: 1;

}

.input-group .form-control {z-index:0 !important;}


.live-dashboard {
    color: #000;
    padding: 20px;
	border:1px solid #a70000;
	border-radius: 20px;

}

.live-dashboard p {
	margin-top: 5px;
	margin-bottom: 10px;
	text-align:center;
}

.live-dashboard h3 {
	width:100%;
	color:#000;
	text-align:center;
}
.btn-wide {
	width:100%;
	border-radius: 7px;
	color:#fff !important;
}

.btn-wide:hover {
    background-color: #c00000 !important;
	border-color: #a70000;
}
.learnmore {
	text-align:center;
}
.help {
	text-align:center;
}
.recruitment-border{
	color: #000;
    padding: 20px;
	border:1px solid #007500;
	border-radius: 20px;
	height:500px;
}
.greentext {
	color:#007500;
}
.text-right {
	text-align:right !important;
	}
.btn-text {
	font-size:125% !important;
}
.box .text-larger {
	font-size:125% !important;
}
.text-center {
	text-align:center !important;
}


/*For side graphs*/
/*
*::after, *::before {
    box-sizing: border-box;
}
*::after, *::before {
    box-sizing: border-box;
}
.col-md-4 {
    width: 33.3333%;
}
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
    float: left;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
* {
    box-sizing: border-box;
}
*/
/*For donut

.box-header::before, .box-body::before, .box-footer::before, .box-header::after, .box-body::after, .box-footer::after {
    content: " ";
    display: table;
}
*::after, *::before {
    box-sizing: border-box;
}
.box-header::after, .box-body::after, .box-footer::after {
    clear: both;
}
.box-header::before, .box-body::before, .box-footer::before, .box-header::after, .box-body::after, .box-footer::after {
    content: " ";
    display: table;
}
*::after, *::before {
    box-sizing: border-box;
}
.box-body {
    border-radius: 0 0 3px 3px;
    padding: 10px;
}
* {
    box-sizing: border-box;
}
h4 {
	text-align:center;
}

*/

.nav-options {margin-right:15px !important;}

.cv-header {float:left; height:250px; width:100%; background-color:#262626; color:#fff; padding-top:30px; box-shadow: 5px 5px 10px #ccc; padding:20px;}
.cv-header h1 {float:left; font-size:30px; color:#fff; padding-left:50px; width:55%; margin-bottom:0; }
.cv-header h2 {float:left; font-size:20px; color:#fff; padding-left:50px; width:55%; margin-top:10px; }
.cv-header p {float:left;  color:#fff; padding-left:50px; width:70%; margin-top:10px; }
.cv-photo {float:left; border-radius:100px; height:200px; margin-left:30px;}

/*.cv {float:left; border:1px solid #ccc; box-shadow: 10px 10px 5px #ccc; padding:20px; }*/
.cv-work-history {float:left; width:100%; border: 1px dashed #ccc; min-height:200px; margin-top:10px; padding:20px; box-shadow: 5px 5px 10px #ccc; padding:20px;}
.cv-work-history h1 {color:#ccc; border-bottom:1px dashed #ccc; text-align:center; padding-bottom:10px;}
.cv-order {float:right; width:200px; padding:20px; text-align:right;}
.cv-row {border-bottom:1px dashed #ccc; margin-bottom:20px; padding-bottom:20px;}
.cv-row-bold {font-weight:bold;}

.image-right {float:right; margin-left: 20px; margin-bottom:20px;}
.image-left {float:left; margin-right: 20px; margin-bottom:20px;}

.trackerpill {float:left; width:75%; padding:7px 0;/*padding-left:30%;padding-right:30%;*/}
.trackerpill2 {float:left; width:75%;}
/*#selectApp select {width:150px;}*/

.reordered{
		background-color:#eff954 !Important;
	}


@media (max-width: 1280px) {
	.smallDate {display:inline; visibility:visible; float:left; height:auto; width:auto; font-size:inherit;}
	.largeDate {display:none; visibility: hidden; height:0; width:0; font-size:0px; float:left;}
	.small-glyph {padding-left:15px;}
	.tabs-jis .bsiaOrange {font-size:0.8em;}
	.small-heading { font-size:0.8em; }
}

@media (max-width: 768px) {
	.top-nav-right {float:left; margin:0;}
	.top-nav-right-inv {float:left; margin:0; width: 160px; z-index: 100000; }
	.top-nav-right-sec {float:left; z-index: 100000;}
	.top-nav-right-thr {float:left; width: 120px; z-index: 100000;}
	.top-nav-right-exp {float:left; width: 200px; z-index: 100000; }
	.form-right {float:left; padding-right:0px; z-index: 100000;}
	.small-form {float:left; z-index: 100000; margin:0;}
	.dl-horizontal dt { float:left; width: 50%;}
	.dl-horizontal dd {margin-left:0%; float:left; width: 49%;}
	.theForm {border:0; padding:0;}
	.pageheader {height:100%;}
	.small-glyph { float:none;}
	.container, .container-fluid {
 	   padding-right: 5px;
    	padding-left: 5px;
	    margin-right: 10px;
	    margin-left: 10px;
	}
	/*.glyph-top-pad {width: 25px; padding-top:10px; padding-left:15px;}*/
	.cand-mid-nav > ul > li {
		   display: block;
		    position: relative;
		    z-index: 100000;}
	.bsia-info-tabs li {
		width:25%;
	}
	.small-heading {
		font-size:1em;
	}

}

.suggest-box {
	position: absolute;
	z-index: 9999;
	width: 95%;
	max-height: 300px;
	background-color: rgb(26, 24, 24);
	overflow-y: scroll;
}
.suggest-box ul {
	border-top: 1px solid #999;
	padding: 15px 10px;
}

.suggest-box ul li {
	list-style: none;
	color: rgb(245, 228, 228);
	border-radius: 3px;
	cursor: pointer;
	user-select: none;
	display: block;
	padding: 6px 2px;
}

.suggest-box ul li:hover {
	background-color: #96989b;
}

.suggest-box-company {
	position: absolute;
	z-index: 9999;
	width: 95%;
	max-height: 300px;
	background-color: rgb(26, 24, 24);
	overflow-y: scroll;
}
.suggest-box-company ul {
	border-top: 1px solid #999;
	padding: 15px 10px;
}
/* DC-578: must clear the sticky .u-header (z-index 501) or the top of the
   column-picker menu is unclickable; 1000 matches the bootstrap default the
   other summary pages use. */
.dropdown-cust-index .dropdown-menu {
	z-index: 1000 !important;
}

.suggest-box-company ul li {
	list-style: none;
	color: rgb(245, 228, 228);
	border-radius: 3px;
	cursor: pointer;
	user-select: none;
	display: block;
	padding: 6px 2px;
}

.suggest-box-company ul li:hover {
	background-color: #96989b;
}

.suggestOrginize-box {
	position: absolute;
	z-index: 9999;
	width: 95%;
	max-height: 300px;
	background-color: rgb(26, 24, 24);
	overflow-y: scroll;
}
.suggestOrginize-box ul {
	border-top: 1px solid #999;
	padding: 15px 10px;
}

.suggestOrginize-box ul li {
	list-style: none;
	color: rgb(245, 228, 228);
	border-radius: 3px;
	cursor: pointer;
	user-select: none;
	display: block;
	padding: 6px 2px;
}

.suggestOrginize-box ul li:hover {
	background-color: #96989b;
}

/* DC-640: the account type-to-search (views/common/js/crm-account-search.js) draws into the
   boxes above, so it keeps their look. These add the row the arrow keys have reached (the same
   grey as hover) and the "Showing 20 of 2,566 matches - keep typing" line, which stays at the
   foot of the box while the names scroll behind it. */
.crm-account-search__list {
	margin-bottom: 0;
}
.suggest-box ul li.crm-account-search__item.is-active,
.suggest-box-company ul li.crm-account-search__item.is-active,
.suggestOrginize-box ul li.crm-account-search__item.is-active {
	background-color: #96989b;
}
.crm-account-search__more {
	position: sticky;
	bottom: 0;
	padding: 6px 12px;
	border-top: 1px solid #999;
	background-color: rgb(26, 24, 24);
	color: #c9c9c9;
	font-style: italic;
	cursor: default;
}
.suggest-box ul li.crm-account-search__note,
.suggest-box-company ul li.crm-account-search__note,
.suggestOrginize-box ul li.crm-account-search__note {
	color: #c9c9c9;
	font-style: italic;
	cursor: default;
}
.suggest-box ul li.crm-account-search__note:hover,
.suggest-box-company ul li.crm-account-search__note:hover,
.suggestOrginize-box ul li.crm-account-search__note:hover {
	background-color: transparent;
}

.week-selector {
	display: flex;	
}
.week-selector > button{
	margin: 10px;
	padding: 10px;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 5px;
	cursor: pointer;
}
.div2 {
	writing-mode: vertical-rl;
	transform:scale(-1);
	text-align: center;
	font-size: 16px;
	background-color: #00b000;
	max-width: 45px;
	width: 45px;
}
.ragFont{
	font-size: 18px;
	font-weight: 600;
}

.div3 {
	writing-mode: vertical-rl;
	transform:scale(-1);
	text-align: center;
	font-size: 16px;
	background-color: #00b000;
	max-width: 45px;
	width: 45px;
}
.borderSetting1{
	border-top-left-radius: 8px !important;
	border-bottom-left-radius: 8px !important;
}
.borderSetting2{
	border-top-right-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}
.activemetrics {
	/* background-color: #006600 !important;
	 */
	color: white !important;
}
.ellipseText{
	display: inline-flex;
}
.spanChracters {
	white-space: nowrap; 
	max-width: 80px; 
	overflow: hidden;
	text-overflow: ellipsis;
}
.spanChractersMeetingCompany {
	white-space: nowrap; 
	max-width: 170px; 
	overflow: hidden;
	text-overflow: ellipsis;
}
.spanChractersAccessGroup {
	white-space: nowrap; 
	max-width: 170px; 
	overflow: hidden;
	text-overflow: ellipsis;
}
.word_wrap_class{
	word-wrap: break-word;
}
.callAcc:hover {
	cursor: pointer;
	text-decoration: underline;
}
.callContact:hover {
	cursor: pointer;
	text-decoration: underline;
}


/* Product category admin tree indent */
.category-tree-indent { width: 0; }
.category-tree-indent[data-depth="1"] { width: 24px; }
.category-tree-indent[data-depth="2"] { width: 48px; }
.category-tree-indent[data-depth="3"] { width: 72px; }
.category-tree-indent[data-depth="4"] { width: 96px; }
.category-tree-indent[data-depth="5"] { width: 120px; }
.category-tree-indent[data-depth="6"] { width: 144px; }
.category-tree-indent[data-depth="7"] { width: 168px; }
.category-tree-indent[data-depth="8"] { width: 192px; }

/* Product category admin drag-and-drop (WordPress-menu style flat list) */
.category-tree-hint {
	clear: both;
	margin: 12px 0;
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.6;
	color: #6c757d;
	background: rgba(91, 155, 213, .08);
	border-left: 3px solid #5b9bd5;
	border-radius: 0 3px 3px 0;
}
ol.category-tree-root {
	list-style: none;
	margin: 0;
	padding: 0;
}
ol.category-tree-root > li[data-depth="1"] { margin-left: 28px; }
ol.category-tree-root > li[data-depth="2"] { margin-left: 56px; }
ol.category-tree-root > li[data-depth="3"] { margin-left: 84px; }
ol.category-tree-root > li[data-depth="4"] { margin-left: 112px; }
ol.category-tree-root > li[data-depth="5"] { margin-left: 140px; }
ol.category-tree-root > li[data-depth="6"] { margin-left: 168px; }
ol.category-tree-root > li[data-depth="7"] { margin-left: 196px; }
ol.category-tree-root > li[data-depth="8"] { margin-left: 224px; }
.category-node-row {
	padding: 8px 4px;
	border-bottom: 1px solid #e5e5e5;
}
.category-node-row:hover { background: rgba(0, 0, 0, .03); }
.category-drag-handle {
	display: inline-block;
	width: 22px;
	margin-right: 4px;
	text-align: center;
	color: #999;
	cursor: grab;
	cursor: -webkit-grab;
}
.category-drag-handle:active {
	cursor: grabbing;
	cursor: -webkit-grabbing;
}
.category-node-actions .category-action,
.category-tree-head .category-action {
	display: inline-block;
	width: 52px;
	text-align: center;
}
li.category-placeholder {
	list-style: none;
	min-height: 36px;
	margin-top: 2px;
	margin-bottom: 2px;
	border: 1px dashed #5b9bd5;
	border-radius: 3px;
	background: rgba(91, 155, 213, .08);
}
li.category-placeholder.is-link-mode {
	border-color: #28a745;
	background: rgba(40, 167, 69, .08);
}
.category-link-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	font-size: 11px;
	font-weight: 600;
	color: #155724;
	background: rgba(40, 167, 69, .12);
	border: 1px solid rgba(40, 167, 69, .35);
	border-radius: 10px;
	white-space: nowrap;
}
.category-drag-ghost {
	position: absolute;
	z-index: 2000;
	min-width: 320px;
	max-width: 480px;
	padding: 0 8px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	opacity: .92;
	pointer-events: none;
}
.category-drag-ghost .category-node-row { border-bottom: none; }
.category-drag-ghost.is-link-mode { border-color: #28a745; }
.category-drag-ghost.is-link-mode .category-ghost-count { color: #155724; }
.category-ghost-count {
	display: block;
	padding: 0 4px 6px;
	font-size: 12px;
	color: #777;
}
body.category-dragging {
	cursor: grabbing;
	cursor: -webkit-grabbing;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.category-tree-status { margin-left: 8px; font-weight: 600; }
.category-tree-status.is-saving { color: #856404; }
.category-tree-status.is-saved { color: #155724; }
.category-tree-status.is-error { color: #721c24; }

/* Shop sidebar nested categories */
.shop-cat-tree, .shop-cat-tree ul { list-style: none; padding-left: 0; }
.shop-cat-tree ul { padding-left: 1rem; border-left: 1px solid #e5e5e5; margin-left: .25rem; }
.shop-cat-tree li { margin: .25rem 0; }
.shop-cat-toggle { display: inline-block; width: 1rem; cursor: pointer; color: #999; user-select: none; }
.shop-cat-toggle.is-empty { visibility: hidden; }
.shop-cat-tree li.is-collapsed > ul { display: none; }

/* Priority Plus CSS Start here */

/* Priority Plus Menu Items */
.account-nav.account-nav--pending {
	overflow: visible;
}

.account-nav.account-nav--pending > :not(.account-nav__placeholder) {
	position: static;
	opacity: 1;
	pointer-events: auto;
}

.account-nav.account-nav--pending .account-nav__placeholder {
	display: none;
}

.account-nav {
	position: relative;
	z-index: 60;
	margin: 1.5rem 0;
	min-height: 4rem;
}

.account-nav.account-nav--pending {
	overflow: hidden;
}

.account-nav.account-nav--pending > :not(.account-nav__placeholder) {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.account-nav.account-nav--ready > :not(.account-nav__placeholder) {
	animation: account-nav-fade-in 0.18s ease;
}

.account-nav__placeholder {
	display: none;
	align-items: center;
	gap: 0.75rem;
	min-height: 4rem;
	width: 100%;
}

.account-nav.account-nav--pending .account-nav__placeholder {
	display: flex;
}

.account-nav.account-nav--ready .account-nav__placeholder {
	display: none;
}

.account-nav__placeholder-pill {
	display: block;
	height: 4rem;
	border: 1px solid #e2e8f0;
	border-radius: 1.5rem;
	background: linear-gradient(90deg, #edf2f7 0%, #f8fafc 50%, #edf2f7 100%);
	background-size: 200% 100%;
	animation: account-nav-shimmer 1.25s linear infinite;
	flex: 0 0 auto;
}

.account-nav__placeholder-pill--wide {
	width: 10.75rem;
}

.account-nav__placeholder-pill--medium {
	width: 9.25rem;
}

.account-nav__placeholder-pill--small {
	width: 8rem;
}

.account-nav .js-dashboard-nav-priority,
.account-nav .p-plus__primary,
.account-nav .p-plus__overflow {
	list-style: none;
	margin: 0;
	padding: 0;
}

.account-nav .js-dashboard-nav-priority {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.account-nav .js-account-nav-priority,
.account-nav .p-plus__primary,
.account-nav .p-plus__overflow {
	list-style: none;
	margin: 0;
	padding: 0;
}

.account-nav .js-account-nav-priority {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.account-nav__priority {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 0.45rem;
	width: 100%;
	max-width: 100%;
}

.account-nav .p-plus__primary {
	display: flex;
	/* COL-4452 QA: content width, NOT flex-grow. An earlier revision grew this
	   list into the row so clientWidth would always mean "the room available",
	   but that parked the More toggle (its flex sibling) at the far right edge
	   with a page-wide hole after the last pill - QA read it as the nav
	   "spread across the page". Content width still measures correctly in the
	   only state the script measures: layout() restores every item first, and
	   an overflowing list is clamped by max-width + shrink to the room
	   available, so scrollWidth > clientWidth detects overflow exactly as
	   before; once items fit, the list sits at content width and the toggle
	   hugs the last pill. The resize guard is unaffected - availableWidth()
	   measures the host, never this element. */
	flex: 0 1 auto;
	flex-wrap: nowrap;
	gap: 0.45rem;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}

.account-nav__item {
	flex: 0 0 auto;
	min-width: 0;
}

.account-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 4rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid #dfe5ea;
	border-radius: 1.5rem;
	background: #ffffff;
	color: #1f2937;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.account-nav__link:hover,
.account-nav__link:focus {
	border-color: #b8c5d1;
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
	color: #1f2937;
	text-decoration: none;
}

.account-nav__item--current .account-nav__link {
	border-color: #9bbcf7;
	background: #eff6ff;
	box-shadow: 0 10px 25px rgba(59, 130, 246, 0.12);
	color: #0f3d91;
}

/* DC-579: the current pill is a span, not an anchor - it is the page you are already
   on. Without this it still took the shared :hover lift below, advertising a click
   that does nothing. Keeps the current styling, drops the affordance. */
.account-nav__item--current .account-nav__link:hover,
.account-nav__item--current .account-nav__link:focus {
	cursor: default;
	border-color: #9bbcf7;
	box-shadow: 0 10px 25px rgba(59, 130, 246, 0.12);
	color: #0f3d91;
}

.account-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 999px;
	background: #6c8caf;
	color: #ffffff;
	font-size: 1rem;
	flex: 0 0 auto;
}

.account-nav__text {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	vertical-align: middle;
}

.account-nav__toggle-wrap {
	position: relative;
	z-index: 70;
	flex: 0 0 auto;
}

.account-nav .p-plus__toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 4rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid #d0d9e3;
	border-radius: 1.5rem;
	background: #f8fafc;
	color: #1f2937;
	font-weight: 700;
	cursor: pointer;
}

.account-nav__toggle-count {
	color: #4b5563;
	font-weight: 600;
	/* COL-4452: this holds "(3)", then "(12)", as items move in and out of the
	   overflow. Letting it size to its text changed the toggle's width mid
	   layout, which is the loop priority-plus's own README warns about - reserve
	   the space once so the button stays put whatever the count reads. */
	display: inline-block;
	min-width: 2.4rem;
	text-align: left;
}

.account-nav .p-plus__overflow {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 280px;
	padding: 0.5rem;
	border: 1px solid #dfe5ea;
	border-radius: 0.75rem;
	background: #ffffff;
	box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
	z-index: 999;
	isolation: isolate;
	/* COL-4452: the panel hangs below the toggle, so at a screen height where
	   the overflow list is taller than the room under it the last items sat off
	   the bottom of the page with no way to reach them. The cap here is the
	   fallback; the nav script narrows it to the room actually below the button
	   when the panel opens, which depends on where the page is scrolled to.
	   overscroll-behavior keeps a scroll that reaches the end of the list from
	   carrying on into the page behind it. The max() floor matters: on a short
	   enough viewport the subtraction alone goes to zero and collapses the panel
	   to nothing, which would be a worse bug than the one being fixed. The
	   script applies the same floor. */
	max-height: max(12rem, calc(100vh - 12rem));
	overflow-y: auto;
	overscroll-behavior: contain;
}

.account-nav .p-plus__overflow .account-nav__item + .account-nav__item {
	margin-top: 0.35rem;
}

.account-nav .p-plus__overflow .account-nav__link {
	display: flex;
	width: 100%;
	border-radius: 0.6375rem;
	white-space: normal;
}

@keyframes account-nav-shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

@keyframes account-nav-fade-in {
	0% {
		opacity: 0;
		transform: translateY(4px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 575.98px) {
	.account-nav {
		min-height: 3.5rem;
	}

	.account-nav__placeholder {
		min-height: 3.5rem;
		gap: 0.5rem;
	}

	.account-nav__placeholder-pill {
		height: 3.5rem;
	}

	.account-nav__placeholder-pill--wide {
		width: 8.5rem;
	}

	.account-nav__placeholder-pill--medium {
		width: 7.25rem;
	}

	.account-nav__placeholder-pill--small {
		width: 6rem;
	}

	.account-nav__link,
	.account-nav .p-plus__toggle-btn {
		min-height: 3.5rem;
		padding: 0.75rem 0.95rem;
	}

	.account-nav__icon {
		width: 2.1rem;
		height: 2.1rem;
		font-size: 0.9rem;
	}

	.account-nav__text {
		font-size: 0.95rem;
	}

	.account-nav .p-plus__overflow {
		min-width: 240px;
	}
}

/* Priority Plus Blocks */
.account-overview {
	margin: 1.5rem 0;
}

.account-overview--loading .js-account-overview-priority {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.account-overview--loading .js-account-overview-priority > .account-overview__item {
	flex: 1 1 210px;
	min-width: 0;
}

.account-overview .p-plus__primary,
.account-overview .p-plus__overflow {
	list-style: none;
	margin: 0;
	padding: 0;
}

.account-overview .p-plus__primary {
	width: 100%;
	gap: 0.75rem;
}

.account-overview .p-plus__primary > .account-overview__item {
	flex: 1 1 210px;
	min-width: 0;
}

.account-overview .p-plus__overflow {
	min-width: 240px;
	margin-top: 0.75rem;
	padding: 0.5rem;
	border: 1px solid #dfe5ea;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
	z-index: 10;
}

.account-overview .p-plus__overflow > .account-overview__item + .account-overview__item {
	margin-top: 0.5rem;
}

.account-overview .p-plus__toggle-btn {
	border: 1px solid #d0d9e3;
	border-radius: 999px;
	padding: 0.85rem 1rem;
	background: #f8fafc;
	color: #1f2937;
	font-weight: 600;
}

.account-overview__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: 98px;
	padding: 1rem 2.9rem 1rem 1.15rem;
	border: 1px solid #dfe5ea;
	border-radius: 1rem;
	background: #fff;
	color: #1f2937;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.account-overview__edit {
	position: absolute;
	top: 0.9rem;
	right: 0.95rem;
	color: #6b7280;
	line-height: 1;
}

.account-overview__edit:hover,
.account-overview__edit:focus {
	color: #1f2937;
	text-decoration: none;
}
.account-overview__label {
	margin-bottom: 0.55rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
}

.account-overview__label--success {
	color: #14833b;
}

.account-overview__label--danger {
	color: #b63d3d;
}

.account-overview__label--worth {
	color: #8a5a0b;
}

.activity-overview__label--warning {
	color: #ffc107;
}

.activity-overview__label--primary {
	color: #007bff;
}

.lead-overview__label--secondary {
	color: #6c757d;
}

.account-overview__value {
	font-size: 1.65rem;
	font-weight: 600;
	line-height: 1.15;
}

.activity-overview__value {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.15;
}

.account-overview__value--stacked {
	font-size: 1.05rem;
	line-height: 1.2;
}

.account-overview__value-line {
	display: block;
}

.account-overview__value-line--truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 575.98px) {
	.account-overview .p-plus__primary > .account-overview__item {
		flex: 1 1 240px;
	}

	.account-overview__value {
		font-size: 1.45rem;
	}
}
/* Priority Plus CSS Ends here */

/* Round/bevel section CSS Start */
.round_bevel {
	border-radius: 12px !important;
	border: 1px solid #a9abad !important;
}
/* Round/bevel section CSS End */




/* COL-4443: drag-and-drop reordering on the navigation admin screens
   (app NAV, CMS navigation, Portal navigation). Markup contract and the
   behaviour live in /views/common/nav-reorder.cfm. */

.js-nav-handle {
	cursor: grab;
	color: #6c757d;
	padding: 0 0.35rem;
}

.js-nav-handle:active {
	cursor: grabbing;
}

/* The row being dragged. jQuery UI clones it out of flow, so it needs a
   background of its own or the page shows through it. */
.js-nav-item.ui-sortable-helper {
	background: #ffffff;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}

/* Where the row will land. Sized to the dragged row in JS, because these rows
   vary in height once a branch carries its children with it. */
.nav-sort__placeholder {
	background: #eef4fb;
	border: 1px dashed #7ea6d0;
	visibility: visible !important;
}

/* The saved/failed badge. Positioned relative to its group so it appears
   against the level that was actually reordered rather than the page. */
.js-nav-sort {
	position: relative;
}

.nav-sort__status {
	position: absolute;
	top: -0.4rem;
	right: 0;
	z-index: 5;
}

/* COL-3979: Settings > Layout, the forum block layout builder. Tiles are
   GridStack items; behaviour lives in views/manager/settings/forum-layout.cfm. */

.bsia-layout-tile {
	background: #ffffff;
	border: 1px solid #d0d9e3;
	border-radius: 0.5rem;
	padding: 0.5rem 0.75rem;
	height: 100%;
	overflow: hidden;
}

/* A block the registry has but nobody has built yet (COL-3982's four). Dashed
   so it reads as a placeholder rather than as something broken. */
.bsia-layout-tile--placeholder {
	background: #f6f8fa;
	border-style: dashed;
	color: #6c757d;
}

.bsia-layout-tile-head {
	display: flex;
	align-items: center;
	/* the drag handle - the whole tile would swallow clicks on the hide button */
	cursor: move;
}

.bsia-layout-tile-title {
	font-weight: 600;
}

/* COL-3982 (Neil, 05/09): the Media block's content, drawn inside its own tile in
   the layout builder, so a tile reads as what it holds rather than as the word
   "Media".

   pointer-events: none is load-bearing rather than tidy - the tile header is
   GridStack's drag handle and the tile itself is a drop target, so a preview that
   could take a click or a focus would fight the builder. Paired with aria-hidden
   in tileContent(), because it is a picture of the block, not a second copy of it
   for a screen reader to read out.

   No max-height: .bsia-layout-tile is already height 100% with overflow hidden, so
   content longer than the tile clips at the tile edge and resizing the tile shows
   more of it, which is the behaviour someone arranging a page expects. */
.bsia-layout-tile-preview {
	margin-top: 0.4rem;
	overflow: hidden;
	pointer-events: none;
	font-size: 0.75rem;
	line-height: 1.35;
}

.bsia-layout-tile-preview img,
.bsia-layout-tile-preview video {
	max-width: 100%;
	height: auto;
}

.bsia-layout-tile-preview > :last-child {
	margin-bottom: 0;
}

.bsia-layout-hide {
	margin-left: auto;
	color: #6c757d;
	cursor: pointer;
}

.bsia-layout-hide:hover {
	color: #1f2937;
}

/* Without a minimum the grid collapses to nothing before any block is placed,
   and there is no visible target to drop one onto. */
#forumLayoutGrid {
	min-height: 120px;
}

/* 05/09 (Rob): GridStack gives this grid a horizontal gutter (its left/right
   item margins carry the `margin` option) but a zero vertical one, so stacked
   blocks touched and read as "on top of each other". The vertical gap is the
   grid margin doubled - the same 5px the horizontal side gets - taken off the
   content box so the spacing matches both ways. Builder preview only; the
   portal (assets/css/forums-public.css) spaces its own blocks. */
/* COL-3983 QA 06/09 (Neil, option A): the gap is now the forum's, scaled to the
   canvas - the builder sets --fl-vgap on the grid (matchForumProportions in
   views/common/forum-layout-editor.cfm); the 5px is only the value before it has.
   The per-block gap preset (fbs-gap-tight / fbs-gap-none) and the per-side gap
   overrides (--fbs-gap-<side>, emitted by the builder and the server alike) now
   draw here too, by the forum's own amounts: on the forum they are margins on a
   grid block (assets/css/forums-public.css, the .fbs-gap-* and [style*="--fbs-gap"]
   rules); a tile is absolutely positioned in its cell, so the same amounts move its
   edges through its margins, and the height is corrected by the vertical pair. The
   forum's unit, --bsia-forum-row-gap, is the scaled gap in here so the inline
   calc() the builder writes resolves to the right size. A tile with no gap style
   is exactly the box it was: margins 0, height the cell less the gap. */
#forumLayoutGrid {
	--bsia-forum-row-gap: var(--fl-vgap, 5px);
}
#forumLayoutGrid .grid-stack-item > .grid-stack-item-content {
	margin: var(--fbs-gap-top, var(--fl-gap, 0px)) var(--fbs-gap-right, var(--fl-gap, 0px)) var(--fbs-gap-bottom, var(--fl-gap, 0px)) var(--fbs-gap-left, var(--fl-gap, 0px));
	height: calc(100% - var(--fl-vgap, 5px) - var(--fbs-gap-top, var(--fl-gap, 0px)) - var(--fbs-gap-bottom, var(--fl-gap, 0px)));
}
#forumLayoutGrid .grid-stack-item > .grid-stack-item-content.fbs-gap-tight {
	--fl-gap: calc(var(--fl-vgap, 5px) * -0.25);
}
#forumLayoutGrid .grid-stack-item > .grid-stack-item-content.fbs-gap-none {
	--fl-gap: calc(var(--fl-vgap, 5px) * -0.5);
}

/* COL-3979 (Neil, 2 Sep): the Saved / Unsaved pill beside Save Layout - the
   report editor's .report-save-state-indicator, sized to sit in a button row.
   The dot is ::before so the state reads in colour as well as in text. */
.bsia-layout-save-state {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.25rem;
	padding: 0.4rem 0.85rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bsia-layout-save-state::before {
	content: '';
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 999px;
	background: currentColor;
	flex: 0 0 auto;
}

.bsia-layout-save-state.is-saved {
	background: #e8f7ef;
	border-color: #b7e3c8;
	color: #146c43;
}

.bsia-layout-save-state.is-unsaved {
	background: #fff5e8;
	border-color: #f3d0a3;
	color: #9a5608;
}

.bsia-layout-save-state.is-saving {
	background: #eef6ff;
	border-color: #c7dcfa;
	color: #124d9c;
}

.bsia-layout-save-state.is-saving::before {
	width: 0.85rem;
	height: 0.85rem;
	border: 2px solid rgba(18, 77, 156, 0.2);
	border-top-color: #124d9c;
	background: transparent;
	animation: bsia-layout-save-state-spin 0.7s linear infinite;
}

@keyframes bsia-layout-save-state-spin {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------
   05/09 (Rob): the layout builder as ONE card in the house style, with
   room between things.

   The card is the white, bordered card forum-view and the account overview
   already use (.account-overview__card: #fff on a 1px #dfe5ea border), so
   the builder stops looking like a page of its own. Sections inside it
   carry a small uppercase label and a fixed gap; the colour controls are a
   grid so their two rows line up column for column; the canvas takes the
   portal's own #f0f2f5 so the blocks visibly sit on a surface rather than
   floating on the page. The action row is the card header's right-hand
   side, which is where forum-view keeps its own buttons.
   ------------------------------------------------------------------ */
.bsia-layout-editor {
	background: #ffffff;
	border: 1px solid #dfe5ea;
	border-radius: 12px;
	padding: 1.5rem 1.75rem 1.75rem;
	margin-bottom: 1.5rem;
}

.bsia-layout-editor__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-bottom: 1.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid #e9edf2;
}

.bsia-layout-editor__intro {
	flex: 1 1 22rem;
	min-width: 0;
}

.bsia-layout-editor__title {
	margin: 0 0 0.35rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	color: #1f2937;
}

.bsia-layout-editor__copy,
.bsia-layout-editor__note,
.bsia-layout-editor__hint,
.bsia-layout-colour-hint {
	margin: 0;
	color: #667085;
	font-size: 0.875rem;
	line-height: 1.5;
}

.bsia-layout-editor__note {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
}

.bsia-layout-editor__hint {
	margin-bottom: 0.75rem;
}

/* Right-aligned, and it stays a single row until the card is too narrow,
   at which point it wraps under the intro rather than squashing it. */
.bsia-layout-editor__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.625rem;
	margin-left: auto;
}

.bsia-layout-editor__actions .btn {
	white-space: nowrap;
}

.bsia-layout-editor__section + .bsia-layout-editor__section {
	margin-top: 1.75rem;
}

.bsia-layout-editor__label {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b7a8c;
}

/* label | swatch | reset | hint. One grid for both rows so the swatches and
   buttons line up regardless of how long each label is - the two flex rows
   this replaces put "Panel background" a few pixels short of "Canvas
   background" and everything after it out of step. The row wrappers keep
   their ids for anything that addresses them, and display: contents lets
   their children take part in the grid directly. */
.bsia-layout-colour-grid {
	display: grid;
	grid-template-columns: max-content auto max-content minmax(0, 1fr);
	column-gap: 0.75rem;
	row-gap: 0.75rem;
	align-items: center;
}

.bsia-layout-colour-row {
	display: contents;
}

.bsia-layout-colour-label {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #344054;
}

.bsia-layout-colour-grid .bsia-block-style-swatch {
	margin: 0;
}

@media (max-width: 767.98px) {
	.bsia-layout-colour-grid {
		grid-template-columns: max-content auto max-content;
	}

	.bsia-layout-colour-hint {
		grid-column: 1 / -1;
		margin-top: -0.25rem;
	}
}

/* The surface the blocks sit on: the portal's own #f0f2f5 until a canvas
   colour is chosen (the gated rule further down then takes over), with
   enough padding that a tile never touches the edge. */
.bsia-layout-canvas {
	background: #f0f2f5;
	border: 1px solid #dfe5ea;
	border-radius: 0.5rem;
	padding: 0.75rem;
}

.bsia-layout-tray {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/* COL-4443 QA round 1 - three things Neil asked for on the app NAV listing. */

/* 1. A clear break between top-level categories. Without it the three levels
      run together as one long striped list and you cannot see where one
      category ends and the next begins. Only BETWEEN categories, so the first
      one does not start with a rule hanging above it. */
.bsia-nav-admin-cat + .bsia-nav-admin-cat {
	margin-top: 1.75rem;
	padding-top: 0.75rem;
	border-top: 3px solid #6c8caf;
}

/* COL-4506: the rule above separates GROUPS. A run of top-level items with nothing under
   them - the whole of Portal Page Navigation - is one flat list, and a rule and a gap between
   every row made it look far busier than CMS Navigation. Such items are marked --leaf by the
   screen (only when AppOptionNavDragOnly is on) and read as ordinary rows. */
.bsia-nav-admin-cat--leaf + .bsia-nav-admin-cat--leaf {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* 2. Grip icons line up within a level regardless of what else is in the row.
      They were inline with the label, so a row whose name was an anchor sat a
      pixel or two off one whose name was plain text, and any row that wrapped
      pushed its grip off centre. Flexing the cell and giving the handle a fixed
      box makes the position depend on the level's indent alone. */
.bsia-nav-admin-name {
	display: flex;
	align-items: center;
}

.bsia-nav-admin-name .js-nav-handle {
	flex: 0 0 1.5rem;
	width: 1.5rem;
	text-align: center;
	padding: 0;
	margin-right: 0.5rem;
}

/* Keep the label from pushing the grip around when it wraps. */
.bsia-nav-admin-name > a,
.bsia-nav-admin-name > span:not(.js-nav-handle) {
	min-width: 0;
}

/* ------------------------------------------------------------------
   COL-3983 / COL-3984 - per-block typography and style.

   Every RULE lives here. The per-block values do not, and cannot: they
   differ per block, per forum, and they are the agency user's data. So
   they arrive as CSS custom properties from
   forumLayoutService.getBlockStyleVars(), and these rules consume them.
   Nothing in a view writes a declaration.

   A property is only ever emitted when the agency user has actually set
   it, so the fallback in each var() below IS the "not styled" case and
   has to leave the block looking as it does today.

   The three presets - radius, padding, shadow - come through as class
   names instead (getBlockStyleClasses), because what "rounded" or
   "spacious" measures is a design decision and belongs in this file
   rather than in a CFC.
   ------------------------------------------------------------------ */

/* The two-level fallback is load-bearing. --fbs-bg is only present when the
   agency user has set a background; --fbs-bg-default is what the CONTAINER
   already looked like. Without that middle step, "not styled" would resolve to
   transparent and every unstyled block would lose the background and border it
   has today - which is COL-3981 AC5 broken from the styling side.

   So each context that uses .fbs-block declares its own defaults, below.

   border-COLOR only, never the border shorthand: a container with no border
   today must not grow one just because this class is on it. */
/* Background and border take a fallback chain because --fbs-*-default gives
   "not set" a real value to fall back to (see .bsia-layout-tile below).

   The TYPE properties get no such fallback, and that is deliberate: writing
   `font-size: var(--fbs-head-size, inherit)` reads as "leave it alone when
   unset" and does the opposite - this selector outranks the element's own rule,
   so the fallback wins and forces the parent's size. There is no CSS value that
   means "make this declaration not exist". So each is gated on its property
   actually being present. Found on the forum page, where it silently shrank the
   forum title to body text; the same trap was latent here. */
.fbs-block {
	background-color: var(--fbs-bg, var(--fbs-bg-default, transparent));
	border-color: var(--fbs-border, var(--fbs-border-default, currentColor));
}

[style*="--fbs-text-color"].fbs-block { color: var(--fbs-text-color); }
[style*="--fbs-text-font"].fbs-block  { font-family: var(--fbs-text-font); }
[style*="--fbs-text-size"].fbs-block  { font-size: var(--fbs-text-size); }

/* What an unstyled tile in the builder looks like - i.e. what .bsia-layout-tile
   sets. Kept next to .fbs-block rather than in that rule so the two stay in
   step when the tile is restyled. */
.bsia-layout-tile {
	--fbs-bg-default: #ffffff;
	--fbs-border-default: #d0d9e3;
}

.bsia-layout-tile--placeholder {
	--fbs-bg-default: #f6f8fa;
}

/* COL-3983 AC4. The two typography groups are independent, so Heading sets
   its own family and size and inherits nothing from Text.

   This is also the answer to "which elements are conventionally a heading":
   whatever carries .block-heading. That makes it checkable at review time
   rather than a judgement call - COL-3981 decides what wears the class when
   it wraps the five existing elements. */
[style*="--fbs-head-color"] .block-heading { color: var(--fbs-head-color); }
[style*="--fbs-head-font"]  .block-heading { font-family: var(--fbs-head-font); }
[style*="--fbs-head-size"]  .block-heading { font-size: var(--fbs-head-size); }

[style*="--fbs-text-color"] .block-text { color: var(--fbs-text-color); }
[style*="--fbs-text-font"]  .block-text { font-family: var(--fbs-text-font); }
[style*="--fbs-text-size"]  .block-text { font-size: var(--fbs-text-size); }

/* COL-3984 AC8 - accent applies to the interactive icons in a block (like,
   flag, notification bell), not to its body text. */
[style*="--fbs-accent"] .block-accent,
[style*="--fbs-accent"] .block-accent:hover,
[style*="--fbs-accent"] .block-accent:focus { color: var(--fbs-accent); }

/* COL-4571 QA 09/10: the filled buttons take the accent (assets/css/forums-public.css), so the Edit dialog's
   preview draws a button in it. COL-4570 QA 09/10 item 4: Input border, previewed on the sample field. Keep
   both in step with the portal copy.
   COL-4571 round 5 (Neil): a Button colour of its own, --fbs-button.
   COL-4585 QA 12/10 (Neil): a Button left Clear keeps the site's own button - the sample button takes the
   Button colour alone and no longer follows the Accent, exactly as on the pages. */
.bsia-block-style-preview .fbs-block[style*="--fbs-button"] .btn {
	background-color: var(--fbs-button) !important;
	border-color: var(--fbs-button) !important;
	color: #fff !important;
}
/* COL-4571 QA 09/10 round 4: the accent paints the pills (.badge) on every page too, so the preview draws one. */
.bsia-block-style-preview .fbs-block[style*="--fbs-accent"] .badge {
	background-color: var(--fbs-accent) !important;
	color: #fff !important;
}
.fbs-block[style*="--fbs-input-border"] .form-control,
.fbs-block[style*="--fbs-input-border"] .form-select { border-color: var(--fbs-input-border) !important; }

/* COL-3984 AC3 - a style choice, not a pixel input. */
.fbs-block.fbs-radius-square  { border-radius: 0; }
.fbs-block.fbs-radius-rounded { border-radius: 0.5rem; }

/* COL-3984 AC6 - density presets. COL-3983 QA 03/09 item 11 adds one step
   tighter than Compact; it stops just short of the edge deliberately, because
   text touching a border reads as broken. Must match the portal copy in
   assets/css/forums-public.css - the builder tile has to look like the block. */
.fbs-block.fbs-pad-supercompact { padding: 0.15rem; }
.fbs-block.fbs-pad-compact     { padding: 0.5rem; }
.fbs-block.fbs-pad-comfortable { padding: 1rem; }
.fbs-block.fbs-pad-spacious    { padding: 1.75rem; }

/* ------------------------------------------------------------------
   COL-3983 QA 04/09 item 2: per-side spacing.

   A preset can be a class; four independent sides cannot - five keys on four
   sides is 625 combinations for padding alone. So a side that is set arrives
   as its own custom property from forumLayoutService.getBlockStyleVars(), and
   these rules consume it.

   Each declaration is GATED on its own property being present. A bare
   var(--fbs-pad-top, ...) would outrank the preset class for every block
   whether or not a side was set - the trap that silently shrank the forum
   title on 01/09. Gated, an unset side has no declaration at all and the
   preset keeps its value.
   ------------------------------------------------------------------ */
.fbs-block[style*="--fbs-pad-top"]    { padding-top: var(--fbs-pad-top); }
.fbs-block[style*="--fbs-pad-right"]  { padding-right: var(--fbs-pad-right); }
.fbs-block[style*="--fbs-pad-bottom"] { padding-bottom: var(--fbs-pad-bottom); }
.fbs-block[style*="--fbs-pad-left"]   { padding-left: var(--fbs-pad-left); }

/* COL-3983 QA 04/09 item 3. The builder canvas takes the same colour as the
   portal canvas, so the preview and the member are looking at one surface.
   Without a colour set it keeps the page shell's own #f8f9fa. */
.bsia-layout-canvas[style*="--fbs-canvas-bg"] { background: var(--fbs-canvas-bg); }

/* COL-3983 QA 05/09 item 2. The panel colour, previewed on the thing that stands
   for a panel here. The builder draws .bsia-layout-tile placeholders rather than
   real posts and composers, so the portal selectors would never have matched on
   this page - a tile paints #ffffff of its own, and this is what overrides it. */
.bsia-layout-canvas[style*="--fbs-surface-bg"] .bsia-layout-tile { --fbs-bg-default: var(--fbs-surface-bg); }
/* It feeds the DEFAULT, not the background, so the two-level fallback above still
   holds: a block the user gave its own colour keeps it, and only a block that never
   had one picks up the panel colour. Setting background here would have overridden
   a deliberate per-block choice - caught by driving the builder, where the tile was
   already painted rgb(218,62,62) by a block style. */

/* COL-3984 AC7 - a subtle elevation, deliberately not configurable further. */
.fbs-block.fbs-shadow-on { box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15); }

/* ------------------------------------------------------------------
   The per-block Edit control and modal, in the layout builder.
   ------------------------------------------------------------------ */

/* Edit and hide share one right-aligned group. They cannot BOTH carry
   margin-left:auto - flexbox splits the free space between two auto margins,
   which would strand Edit in the middle of the header instead of beside Hide.
   So the group takes the auto and the buttons inside it just space themselves. */
.bsia-layout-tile-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
}

.bsia-layout-tile-actions .bsia-layout-hide {
	margin-left: 0.5rem;
}

.bsia-layout-edit {
	color: #6c757d;
	cursor: pointer;
}

.bsia-layout-edit:hover {
	color: #1f2937;
}

/* Marks a tile whose block has any styling saved, so the grid shows at a
   glance which blocks have been bespoked - otherwise the only way to find
   out is to open all nine. */
/* Drawn, not a glyph. A Font Awesome icon here renders as a tofu box wherever
   the icon font has not loaded - which on the dev hosts is everywhere, since
   they 404 every static file (COL-4474). A dot made of CSS cannot fail that
   way, and this marker is decorative enough that it must not look broken. */
.bsia-layout-tile--styled .bsia-layout-tile-title::after {
	content: "";
	display: inline-block;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: #6c8caf;
	margin-left: 0.4rem;
	vertical-align: middle;
}

.bsia-block-style-swatch {
	width: 2.5rem;
	padding: 0.125rem;
	height: calc(1.5em + 0.75rem + 2px);
}

/* The live preview inside the modal. Fixed height so the modal does not jump
   as the sample text changes size. */
.bsia-block-style-preview {
	min-height: 6.5rem;
	border: 1px dashed #ced4da;
	padding: 0.75rem;
}

.bsia-block-style-preview .fbs-block {
	height: 100%;
}

/* The Edit modal is shown by toggling a class rather than by Bootstrap's own
   JS, so the builder does not depend on jQuery being present - and so the test
   harness, which loads Bootstrap's CSS but not its JS, drives the same code
   path the real screen does. */
.modal.bsia-modal-open {
	display: block;
}

/* COL-3983 QA 03/09, item 2. The Edit modal is now modal-dialog-scrollable, so
   its body carries overflow-y: auto - and CSS then computes overflow-x to auto
   as well, because a box cannot scroll on one axis and overflow visibly on the
   other. Bootstrap's own .row gutters are -15px, so that alone was enough to
   put a horizontal scrollbar under the form. Nothing in this modal is meant to
   scroll sideways. */
#forumBlockStyleModal .modal-body {
	overflow-x: hidden;
}

.bsia-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #000;
	opacity: 0.5;
	z-index: 1040;
}
/* COL-4459: range date pickers were clipping their end date. Start.

   hs.range-datepicker.js sizes every range input it initialises with an inline
   style, as value.length * 7.5 - a flat 7.5px-per-character guess:

       $this.css({ width: $this.val().length * 7.5 });

   Two things make that guess too small. Every one of these inputs carries
   g-font-size-12 g-font-size-default--md, so from md up it renders at 1rem
   rather than the 0.85714rem the base class gives it and the glyphs are wider
   than the guess allows; and the number is applied as a border-box width, so
   padding and border come out of it rather than being added to it. The input
   ends up narrower than its own value and the browser clips the tail.

   Fixed here rather than in the plugin because that file lives outside this
   repository - it is served from the shared assets2 virtual directory, is not
   under version control, and one copy of it backs every dev site at once. A
   change there would be unversioned, unreviewable and impossible to ship
   through the normal branch route.

   Sized in ch rather than px so the width scales with whatever font actually
   resolves, instead of replacing one hardcoded guess with another. Measured at
   16px against the real stylesheet stack, the longest value this format can
   produce ("30 Aug 2026 - 31 Aug 2026") needs 202px bare and 220px with
   .form-control - 23.4ch and 25.5ch. 28ch clears both with room for a wider
   font.

   The two shapes are deliberately kept apart. Most of these sit in toolbars
   where the control is meant to shrink to its content, so a blanket width:100%
   would stretch them across their row. The handful that are real form fields
   in a grid column should fill it like any other .form-control - and being
   1 id + 1 class, that rule wins over the id-only one above it. */
#rangeDatepicker,
#rangeDatepicker2,
#rangeDatepicker3 {
	width: 28ch !important;
}

#rangeDatepicker.form-control,
#rangeDatepicker2.form-control,
#rangeDatepicker3.form-control {
	width: 100% !important;
}
/* COL-4459: range date picker widths End */

/* COL-4470: the refund modal's proof-of-refund file list.

   QA asked for at least four files visible before the list scrolls. A row
   whose name wraps to two lines is 50px against the real stylesheet stack
   (measured in tools/col4470-filelist-harness.cfm), so the cap is 13rem -
   208px - which holds four wrapped rows; short names fit six.

   The half-row QA actually saw came from the legacy .small rule near the
   top of this file - height:18px + overflow:hidden, an old text-collapse
   widget style that predates Bootstrap's .small utility and captures every
   element using it. The list carries that class for its font size, so this
   rule must undo the pinned height. ul.refund-file-list rather than
   .refund-file-list so it outranks .small on specificity, not on file
   order.

   The other half of the fix lives in event-attendanceHelper.cfm: adding a
   file scrolls the list into view inside the scrollable modal body,
   because a cap is worthless while the whole list sits below the fold. */
ul.refund-file-list {
	height: auto;
	max-height: 13rem;
	overflow-y: auto;
}

/* The refund email panel, previously styled inline in event-attendance.cfm */
.refund-email-area {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}

.refund-email-body {
	max-height: 220px;
	overflow: auto;
	border: 1px solid #eeeeee;
	padding: 8px;
	background: #fafafa;
}

/* COL-4470 QA pt 2: proof-of-refund download links, under an already-refunded
   ticket in the refund modal and under a refund line in the attendee history
   modal. A step smaller than the line they hang off.

   QA 03/09 pt 1: no left margin of its own any more. In the refund modal the
   list carries Bootstrap's ml-5 - the SAME utility the attendee's label
   carries - so the two left edges are the same number by construction rather
   than by a hand-written 1.5rem that happened to be 21px short of it, which is
   the misalignment QA saw. In the history modal it has no ml-5 and sits flush
   under the message text, which is where that feedback asked for it. */
ul.refund-proof-list {
	margin: 0.15rem 0 0.35rem 0;
	padding: 0;
	font-size: 85%;
}

ul.refund-proof-list li {
	list-style: none;
}

/* QA 03/09 pt 2: "and have them downloadable from here" - they already were,
   but this stylesheet paints anchors the same black as body text with no
   underline, so a download link read as a caption. Underlined and in the CRM's
   own link blue, so it looks like the thing it is. */
ul.refund-proof-list li a,
ul.refund-proof-list li a:visited {
	color: #007bff;
	text-decoration: underline;
}

ul.refund-proof-list li a:hover,
ul.refund-proof-list li a:focus {
	color: #0056b3;
	text-decoration: underline;
}
/* COL-4470 refund modal End */

/* COL-4489: the optional-columns picker beside a grid (a bootstrap-select in .form-control
   dress is 100% of its wrapper, so the wrapper sets the width). */
.crm-column-picker {
	width: 220px;
}

/* COL-3100 QA 08/09 (Neil): the CRM header's logo - the CRM logo uploaded under Account Profile
   (Agencys.AgencyCRMLogo), or the Colossus logo until one is. Its own box, not .bsia-logo: that
   rule (userfiles/bsia/_system/style.css, outside the repo) is a 165x85 frame with 15px of
   padding, and inside a 40px cap it left 10px for the image - Neil's "tiny".
   QA 28/09 (Neil): "the image should take up the whole space". The cell is the side nav's 250px
   by the bar's 65px, with 12px of padding top and bottom and the menu toggle at its right. The
   box pulls itself out of that padding to span the bar, and the image fills up to 57 of the
   65px and the width left of the toggle - as wide as its shape needs, never stretched. */
.navbar-brand.crm-brand-logo {
	height: 65px;
	margin: -12px 0 !important;
	padding: 0 !important;
	align-items: center;
}
.navbar-brand.crm-brand-logo .crm-brand-logo__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 185px;
	max-height: 57px;
	padding: 0;
	object-fit: contain;
}
/* Account Profile's preview of the CRM logo sits on the header's own dark ground (the theme
   class), so a light logo can be seen there too. COL-3100 QA 09/10 (Neil, "why is there a block
   banner around my CRM logo?"): it is the logo corner, drawn as the header draws it - the chosen
   corner colour, else the bar's colour a shade apart (crm-nav-theme.cfm), else the theme's. */
.crm-logo-preview {
	padding: 8px 12px;
	border-radius: 4px;
}
/* the note under each logo on Account Profile - not the legacy .small, whose fixed 18px
   height clips a second line */
.logo-kind-note {
	font-size: 13px;
	line-height: 1.4;
}
/* COL-3100 (Neil, 28/09): the CRM navigation colour picker under the CRM logo on Account Profile.
   The chosen colour itself reaches the page as a stylesheet (views/common/crm-nav-theme.cfm). */
.crm-nav-colour-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.crm-nav-colour-form label {
	margin: 0;
}
.crm-nav-colour-input {
	width: 64px;
	height: 36px;
	padding: 2px 3px;
	border: 1px solid #ced4da;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}
.crm-nav-colour-input:disabled {
	cursor: default;
	opacity: .6;
}
/* COL-3100 QA 09/10: "its own colour" beside the logo corner picker - a colour input has no empty
   state, so the box is what says the corner is set rather than following the bar */
.crm-nav-colour-check {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-size: 13px;
	cursor: pointer;
}
/* DC-431: the tag pills inside an overview card, on the pages that draw the pills without
   components/data_components/overviewCards (which carries this rule inline) - the account page */
.account-overview__card .pill {
	background-color: cornflowerblue;
	color: #fff;
	display: inline-block;
	margin: 2px 2px 6px 2px;
	padding: 5px 9px;
	border-radius: 5px;
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.2;
}
.account-overview__value--pills {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2;
}
/* DC-431 QA 08/09 (Neil, 13:11): the Tags card stays the height of the cards beside it - one
   row of pills (a pill is 5px + 1.2 x 0.85rem + 5px tall, with 2px above and 6px below), the
   rest behind a "+N" chip with a tooltip (views/common/js/tag-pills-collapse.js). The cap is
   here as well as in the script so the card never grows the row while the page is still
   loading, and a pill never wraps inside itself. */
.account-overview__value--pills--capped {
	max-height: 2.4rem;
	overflow: hidden;
}
.account-overview__value--pills--capped .pill {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: top;
}
.account-overview__card .pill--overflow {
	display: none !important;
}
/* while a "+N" chip is shown, every visible pill leaves it room on the row - so the first tag,
   however long, is ellipsised beside the chip rather than pushed off the row by it */
.account-overview__value--pills--overflowing .pill:not(.pill--more) {
	max-width: calc(100% - 4rem);
}
.account-overview__card .pill--more {
	background-color: #6b7280;
	cursor: default;
}

/* DC-622: the per-organisation hide on Manage Lists - an eye per item, and a hidden item's row reads muted */
.ca-list-hide { display: inline-block; margin-right: 12px; }
.ca-list-hide__eye--shown { color: #28a745; }
.ca-list-hide__eye--hidden { color: #d9534f; }
.ca-list-row--hidden .ag-cell:not(.text-right) { color: #8a939b; }
.crm-list-hide-note { display: block; }

/* COL-4508: the Playground / Import / retention messages above every CRM screen
   (modules_app/crm/views/common/_playground_notices.cfm). Drawn as cards in the same family as the
   page's section pills (.account-nav__link / .account-nav__icon): white, a hairline border, a round
   slate icon, the question in bold over the rest of the sentence. Buttons on the right, wrapping
   under the text on a narrow screen. Not .alert: the brands' .alert-info runs from pale blue to
   saturated cyan with white text, which is what made these read as warnings. */
.crm-playground-notices {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin-bottom: 1.25rem;
}
.crm-playground-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	margin: 0;
	padding: .8rem 1.1rem;
	border: 1px solid #dfe5ea;
	border-radius: 1.25rem;
	background: #ffffff;
	color: #1f2937;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.crm-playground-notice__body {
	display: flex;
	align-items: center;
	gap: .9rem;
	flex: 1 1 24rem;
	min-width: 0;
}
.crm-playground-notice__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 999px;
	background: #6c8caf;
	color: #ffffff;
	font-size: 1rem;
}
.crm-playground-notice__text {
	margin: 0;
	min-width: 0;
	color: #5b6573;
	line-height: 1.45;
}
.crm-playground-notice__lead {
	display: block;
	color: #1f2937;
	font-size: 1.05rem;
	font-weight: 600;
}
.crm-playground-notice__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}
.crm-playground-notice__actions .btn { white-space: nowrap; }
.crm-playground-notice__actions .btn i { margin-right: .35rem; }
/* The second button: a slate outline, so the filled .u-btn-primary (Import) stays the one to press.
   Colours named here rather than btn-outline-primary, whose "primary" is a different colour per brand. */
.crm-playground-notice .crm-playground-notice__btn--outline {
	border: 1px solid #b8c5d1;
	background-color: #ffffff;
	color: #4f6f93;
}
.crm-playground-notice .crm-playground-notice__btn--outline:hover,
.crm-playground-notice .crm-playground-notice__btn--outline:focus {
	border-color: #6c8caf;
	background-color: #eff6ff;
	color: #3d5a7a;
}
.crm-playground-notice .crm-playground-notice__btn--quiet {
	border: 1px solid transparent;
	background-color: transparent;
	color: #6b7280;
}
.crm-playground-notice .crm-playground-notice__btn--quiet:hover,
.crm-playground-notice .crm-playground-notice__btn--quiet:focus {
	background-color: #f1f5f9;
	color: #1f2937;
}
/* In the Playground itself: the same card, amber, because everything there is deleted. */
.crm-playground-notice--retention {
	border-color: #f3dca6;
	background: #fffaf0;
}
.crm-playground-notice--retention .crm-playground-notice__icon {
	background: #f0ad4e;
}
.crm-playground-notice__countdown {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem .9rem;
	border: 1px solid #f3dca6;
	border-radius: 999px;
	background: #ffffff;
	color: #5b6573;
	white-space: nowrap;
}
.crm-playground-notice__countdown i { color: #d08a1c; }
.crm-playground-notice__countdown strong { color: #1f2937; font-weight: 600; }
@media (max-width: 767.98px) {
	.crm-playground-notice { padding: .8rem .9rem; border-radius: 1rem; }
	.crm-playground-notice__icon { width: 2.1rem; height: 2.1rem; font-size: .9rem; }
	/* wrapped under the text: line the buttons up with it, not with the icon */
	.crm-playground-notice__actions,
	.crm-playground-notice__countdown { margin-left: 3rem; }
}
@media (max-width: 575.98px) {
	/* a phone leaves under 300px beside the collapsed menu: use all of it, and let a long label wrap */
	.crm-playground-notice__actions,
	.crm-playground-notice__countdown { margin-left: 0; }
	.crm-playground-notice__actions .btn { white-space: normal; text-align: left; }
	.crm-playground-notice__countdown { white-space: normal; }
}
/* COL-4508 End */
/* Lead view, LinkedIn activity card: the conversation pane scrolls once it
   outgrows the card. Both panes there size their text with Bootstrap's .small
   utility - possible since the legacy rule near the top of this file is scoped
   to .showmore and no longer hijacks .small. */
.li-lead-timeline {
	max-height: 220px;
	overflow-y: auto;
}

/* DC-78: a dynamic Multi Select column in a CRM grid holds every choice the record has
   picked ("Analysis, Research"). The cell clips at the column's width like any other, and
   views/common/js/crm-grid-multiselect-columns.js puts the full list on hover when - and
   only when - it is clipped, so a column wide enough for its values shows no tooltip. */
.crm-grid-list-cell {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* COL-4510: the Video Library list. The colour square beside a title takes the row's own
   colour through a custom property, set from the row's data attribute by
   modules_app/crm/views/manager/admin/video-libraryHelper.cfm - the view carries no style
   attribute of its own. */
.video-library-swatch {
	display: inline-block;
	width: .75rem;
	height: .75rem;
	margin-right: .4rem;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 2px;
	vertical-align: baseline;
	background: var(--video-library-swatch, transparent);
}
.video-library-colour {
	width: 25%;
	height: 30px;
	padding: .1rem;
}
/* COL-4510 QA (Neil, 29/09): the list is ordered by dragging a row by its handle, as navigation is */
.video-library-drag {
	cursor: move;
	width: 2rem;
	color: #adb5bd;
}
.video-library-drop {
	height: 3rem;
	background: #f1f7ff;
	outline: 1px dashed #9ec5fe;
}

/* COL-4512: the Tutorials page. The colour stripe on a tile takes the video's own colour
   through a custom property, set from the tile's data attribute by
   modules_app/crm/views/manager/crm/tutorialsHelper.cfm - the view carries no style attribute. */
.tutorial-tile {
	overflow: hidden;
}
.tutorial-tile__bar {
	height: 6px;
	background: var(--tutorial-tile-colour, #dddddd);
}
/* COL-4512 (Neil, 04/10): the player takes 90% of the screen both ways, the video filling what
   the title bar leaves and keeping its own shape inside it */
.tutorial-player-dialog {
	width: 90vw;
	max-width: 90vw;
	margin: 5vh auto;
}
.tutorial-player-dialog.modal-dialog-centered {
	min-height: 90vh;
}
.tutorial-player-dialog .modal-content {
	height: 90vh;
}
.tutorial-player-dialog .modal-body {
	display: flex;
	min-height: 0;
	padding: 0;
	background: #000;
}
.tutorial-player {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;
	background: #000;
}

/* DC-679: the optional-fields picker on the Account Contacts tab - the width the Contacts Summary
   page gives its own picker (there set from script; here a class, so the view carries no style) */
.crm-optional-fields {
	width: 220px;
}
.crm-optional-fields .bootstrap-select {
	width: 100% !important;
}

/* DC-699: the header user menu. A closing menu fades out for 300ms before HSDropdown hides it,
   and through that fade it still took the click meant for the button under the user name. */
#profileMenuSp.fadeOut {
	pointer-events: none;
}