/* 
	as of Apr 2025, self-hosting Open Sans typeface from https://fonts.google.com/specimen/Open+Sans 
	(downloaded ttf files and then converted to woff2 via https://cloudconvert.com/ttf-to-woff2)
	see also https://fonts.google.com/knowledge/using_type/self_hosting_web_fonts
*/
@font-face {
	font-family: "Open Sans";
	src: url("../fonts/OpenSans-Regular.woff2") format("woff2");
}
@font-face {
	font-family: "Open Sans";
	font-weight: 600;
	src: url("../fonts/OpenSans-SemiBold.woff2") format("woff2");
}

.w-10 { width: 10% !important; }
.w-20 { width: 20% !important; }
.w-40 { width: 40% !important; }
.w-01 { width: 1% !important; }

.top-0 { top: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0 { left: 0 !important; }
.right-0 { right: 0 !important; }

.min-width-0 { min-width: 0 !important;} /* provided in bootstrap 4.4 but not 4.3.x */

.c-decor {
	background-position: right;
	background-size: contain;
	background-repeat: no-repeat;
}
.c-decor-r {
	background-image: url('/img/art/decor-r.png');		
}
.c-decor-g {
	background-image: url('/img/art/decor-g.png');		
}
.c-decor-b {
	background-image: url('/img/art/decor-b.png');		
}
.c-decor .list-group-item {
	background-color: unset;
}

.agent-tile {
	position: relative;
}
.agent-tile > .tile.bg-dark:not(.tile-circle) {
	background: linear-gradient(45deg, #e6dada, #274046);
}
.agent-tile > .tile.bg-primary:not(.tile-circle) {
	background: linear-gradient(45deg, #245ed5, #6c93e7);
}
.agent-tile > .tile.bg-qa:not(.tile-circle) {
	background: linear-gradient(45deg, var(--orange), #f6c2a6);
}
.agent-tile > .tile.bg-success:not(.tile-circle) {
	background: linear-gradient(45deg, #059e64, #82c6a3);
}
.agent-tile.has-icon > .tile.tile-no-img {
	display: none !important;
}
.agent-tile:not(.has-icon) > .tile.tile-img {
	display: none !important;
}

/* "subtle" versions of the standard bg-colors (similar to .badge-subtle) */
.bg-primary.bg-subtle {
	background-color: rgba(53,108,221,.08) !important;
}
.bg-info.bg-subtle {
	background-color: rgba(53,153,150,.08) !important;
}
.bg-warning.bg-subtle {
	background-color: rgba(247,196,108,.08) !important;
}
.bg-success.bg-subtle {
	background-color: rgba(53,153,150,.08) !important;
}
.bg-dark.bg-subtle {
	background-color: rgba(34,34,48,.08) !important;
}
.c-badge-express.bg-subtle {
	background-color: #673ab721 !important;
}
.c-badge-qual.bg-subtle {
	background-color: rgb(183, 107, 163, 0.1) !important;
}

.text-ellipsis {
	overflow: hidden;	
	text-overflow: ellipsis;
	white-space: nowrap;
}

.text-balance {
	text-wrap: balance !important;
}

/* sidebar */
.c-sidebar-toggle {
	position: fixed;
	top: 3.5rem; 
	right: 0; 
	z-index: 1030;
}
.page-sidebar.c-sidebar-fullheight {
	bottom: unset; 
	min-height: calc(100vh - 56px);
}
.has-sidebar .page-inner {
	margin-bottom: 500px;
}
.page.has-sidebar {
	padding-bottom: 500px;
}
.page.has-sidebar .c-sidebar-dropdown-fix .dropdown-menu.show {
	z-index: 1200;
}

.alert.font-size-sm {
    line-height: normal;
}

i.c-fave-icon.fas {
	color: var(--yellow) !important;
}
i.c-fave-icon.fal {
	color: var(--gray)  !important;
}

.border.border-white-50 {
	box-sizing: content-box;
    border-color: rgba(255, 255, 255, 0.5) !important;
}
.overlaid-top-left {
	top: 5px;
	left: 5px;
	position: absolute;
}
.overlaid-top-left.text-white {
	color: white !important; /* proper white */
}
.overlaid-top-right {
	top: 5px;
	right: 5px;
	position: absolute;
}
.overlaid-top-right.text-white {
	color: white !important; /* proper white */
}
.overlaid-top-right.tile > i:before {
	font-size: 0.6rem;
}
/* for stage "draft" */
.overlaid-top-right.tile.bg-dark > i:before {
	content: "\f040"; /* same as pencil */
}
/* for stage "preview" */
.overlaid-top-right.tile.bg-qa > i:before {
	content: "\f06e"; /* same as fa-eye */
}
/* for stage "live" */
.overlaid-top-right.tile.bg-success > i:before {
	content: "\f04b"; /* same as fa-play */
}
/* for stage "done" */
.overlaid-top-right.tile.bg-primary > i:before {
	content: "\f00c"; /* same as fa-check */
}
/* for stage "frozen" (paused) */
.overlaid-top-right.tile.bg-info > i:before {
	content: "\f04c"; /* same as fa-pause */
}


.c-border-subtle {
	border: 2px solid #e6e8ed;
}

.c-grayscale-50 {
	filter: grayscale(50%);
}
.c-grayscale-100 {
	filter: grayscale(100%);
}

.c-parens:not(:empty):before {
	content: '(';
}
.c-parens:not(:empty):after {
	content: ')';
}
.c-quoted:not(:empty):before {
	content: '“';
}
.c-quoted:not(:empty):after {
	content: '”';
}
.c-pluralize:not(:empty):after {
	content: 's';
}
.c-percent:not(:empty):after {
	content: '%';
}

.c-reveal, .c-reveal-faster {
	visibility: hidden;
}
.c-has-show-on-hover .c-show-on-hover {
	visibility: hidden;
}
.c-has-show-on-hover:hover .c-show-on-hover {
	visibility: visible;
}
.c-has-show-on-hover:hover .c-hide-on-hover {
	display: none;
}
.c-space {
	padding-left: 5px;
}
.c-copyable, .c-cursor-pointer {
	cursor: pointer !important;
}
code.c-copyable {
	color: #377dff;
	background-color: #f5f5f5;
	padding: .2rem;
	border: 1px solid #ddd;
    border-radius: 3px;
    font-weight: bold;
 }
code.font-size-sm {
    font-size: 80%;
}

.table.c-table-valign-middle th, .table.c-table-valign-middle td {
	vertical-align: middle !important;
}

/* c-table-responsive-fixed-header class for tables that scroll more nicely */
.table.table-responsive.c-table-responsive-fixed-header > thead > tr:nth-child(1) > th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: white;
}
.table.table-responsive.c-table-responsive-fixed-footer > tfoot > tr:nth-child(1) > td {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background-color: white;
}

.table.c-table-borderless-first-row > tbody > tr:first-child > td {
	border: none;
}

/* c-table-xs class, similar to builtin table-sm class but even tighter */
.c-table-xs th, .c-table-xs td {
    padding: 0.1rem;
}

.btn i.fas:not(.fa-fw), .btn i.far:not(.fa-fw) {
	display: inline; /* for some reason, font-awesome's CSS uses display:'inline-block', which doesn't work well for icons that appear in buttons */
}

.visual-picker-figure:after {
	font-family: 'Font Awesome 5 Pro'; /* fix for it being specified as Font Awesome free version in theme's CSS (may be a variable in SCSS to control this?) */
}
.visual-picker:hover .visual-picker-figure {
    box-shadow: inset 0 0 0 2px silver, 0 0 0 1px rgba(20, 20, 31, 0.05), 0 1px 3px 0 rgba(20, 20, 31, 0.15);
}
/* looper provides c-visual-picker-sm and c-visual-picker-lg, here's an 'md' size in between */
.visual-picker.c-visual-picker-md > label.visual-picker-figure {
	height: 6rem;
	width: 6rem;
}

.btn.c-btn-pill {
	border-radius: 2rem;
}

.ml-min {
	margin-left: 0.12rem !important;
}
.mr-min {
	right: 0.12rem !important;
}

.tile-ml { /* between tile-md and tile-lg */
	width: 4rem;
	height: 4rem;
	line-height: 3.8rem;
	font-size: 1.5rem;
}
.tile-xxs { /* even smaller than tile-xs */
    width: 0.9rem;
    height: 0.9rem;
}
.tile.tile-circle:not(.border):empty {
	display: none;
}
.btn-xs > .tile-xxs {
	margin-bottom: .15rem;
}
.btn-lg > .tile-xxs {
	margin-bottom: .15rem;
}

.modal > .c-modal-md {
	max-width: 600px; /* bit wider than the default of 500px */
}
.modal > .c-modal-mdlg {
	max-width: 900px; /* bit wider than the default of 500px */
}
.modal > .c-modal-sidebar {
	width: 22.5rem; /* similar width to .page-sidebar in looper theme */
}
.c-modal-sidebar .alert {
    line-height: normal; /* tighter line spacing for alerts in sidebars */
}
.c-modal-dialog-full-height {
	height: 100% !important;
}
.c-modal-dialog-full-height > .modal-content {
	height: calc(100% - 4rem) !important;
}

/* larger than xl */
.c-modal-xxl {
	max-width: unset; /* basically full width */
}

.modal-backdrop.show {
	opacity: 0.35; /* lighter than the theme */
}

/* orange color for QA */
.bg-qa {
	background-color: var(--orange) !important;
}
.c-badge-qa, .c-btn-qa, .badge-qa, .btn-qa, .tile.bg-qa {
	color: var(--white);
	background-color: var(--orange);
}
.c-btn-outline-qa, .btn-outline-qa {
	color: var(--orange);
	border-color: var(--orange) !important;
}
.badge-qa.badge-subtle, .btn-subtle-qa {
	background-color: rgb(236 147 94 / 15%) !important; /* orange but at 20%) */
	color: #e8691d !important; /* like --orange but more saturated */
	border-color: #e8691d !important; /* like --orange but more saturated */
}
.btn-subtle-success.border {
	border-color: var(--success) !important;
}
.btn-subtle-success.border {
	border-color: var(--success) !important;
}


.c-badge-express, .c-btn-express {
	background-color: var(--purple);
	color: #ffffff;
}
.c-badge-qual, .c-btn-qual {
	background-color: var(--pink);
	color: #ffffff;
}
.c-badge-qual.badge-subtle {
	background-color: rgb(183, 107, 163, 0.1);
	color: #a56193;
}
.c-badge-code {
 	font-family: var(--font-family-monospace);
}
.btn-reset:focus {
	border: none;
}
.c-btn-link-plain:hover {
	text-decoration: none;
}
.c-btn-express:hover {
	color: white;
}
.c-badge-express.badge-subtle {
	background-color: #673ab721;
	color: var(--purple);
}
.c-btn-subtle-express {
	background-color: #673ab721;
	border-color: var(--purple);
}
.btn.c-btn-outline-express {
	color: var(--purple);
	border-color: var(--purple);
}
.btn.c-btn-outline-express:hover {
	color: var(--indigo);
	border-color: var(--indigo);
}
.c-text-express {
	color: var(--purple);
}
.c-badge-lg {
    font-size: .9rem;
}
.border-purple {
	border-color: #673ab7 !important;
}

/* allow a .btn inside a disabled fieldset to itself be enabled, rather than inheriting the fieldset's disabled-ness - note that it must be an <a> element rather than a formal <button> */
fieldset.c-has-btn-enabled-in-disabled-fieldset:disabled a.btn.c-btn-enable-in-disabled-fieldset {
	pointer-events: auto;
}

h6.c-form-header {
    text-transform: uppercase;
    font-size: .9rem;
}

modal.fade {
	transition: opacity 0.8s linear; /* little faster (looper uses 0.15s) */
}
.modal.fade .modal-dialog {
	transition: transform 0.2s ease-out; /* little bit faster (looper uses 0.3s) */
}
.modal.fade.c-fade-fast .modal-dialog {
	transition: transform 0.1s ease-out; /* little bit faster (looper uses 0.3s) */
}

.ajax-progress {
	opacity: 0;
}
.ajax-progress.is-loading {
	opacity: 1;
	transition: opacity 0.1s ease-in 0.1s;
}

.form-control.c-search-query, .input-group.c-search-query, .input-group.input-group-sm.c-search-query {
	border-radius: 1rem !important;
}

.form-check-input.c-form-check-sm {
	position: relative;
	bottom: -0.1rem;
}

/* color of "rating" style checkbox */
.rating.c-rating-qa input[type=checkbox]:checked ~ label {
	color: var(--orange);
}
/* color of "rating" style checkbox when checked-but-disabled (see #1068) */
.rating.c-rating-qa > input[type=checkbox]:checked:disabled:has(~label.disabled) ~ label.disabled {
	color: var(--gray) !important;
}
.rating.c-rating-live input[type=checkbox]:checked ~ label {
	color: var(--green);
}
/* color of "rating" style checkbox when checked-but-disabled (see #1068) */
.rating.c-rating-live > input[type=checkbox]:checked:disabled:has(~label.disabled) ~ label.disabled {
	color: var(--gray) !important;
}
.rating.c-rating-info input[type=checkbox]:checked ~ label {
	color: var(--success);
}

h5.list-group-item-title { /* smaller for h5 */
	font-size: 0.9rem;
}

.tooltip .tooltip-inner {
	font-size: 0.875em; /* like .font-size-sm in looper theme */
}
.tooltip.c-tooltip-lg .tooltip-inner {
	text-align: left;
	max-width: 300px;
}
/* add to containing element to make tooltips within bigger (need to also set the 'container' attribute for the tooltip) */
.has-tooltip-lg .tooltip .tooltip-inner {
	text-align: left;
	max-width: 300px;
}
/* add to containing element to make tooltips within respect \n style newlines */
.has-tooltip-preline .tooltip .tooltip-inner {
	white-space: pre-line !important;
}
.tooltip code {
	color: cyan;
}

.c-underline-dotted {
	text-decoration: underline dotted;
	text-underline-offset: 2px;
}
.c-underline-dotted[title] {
	cursor: default;
}
.c-underline-dotted:focus, .c-underline-dotted:not(:hover) {
	outline: none;
	text-decoration: underline dotted gray;
}

.cursor-not-allowed {
	cursor: not-allowed !important;
}

.bootstrap-select a:not([href]).active, .bootstrap-select a:not([href]):active, .bootstrap-select a:not([href]).selected {
    color: #346CB0;
    background-color: #ffffff;
}

select.c-form-control-xs {
	height: calc(1.2em + 0.5rem + 2px);
	padding: 0.1rem 0.2rem;
	font-size: .875em;
	line-height: 1;
	border-radius: 0.2rem;	
}
/* for <select> elements (non-select2) with a "please choose..." type message as first option, perhaps via knockout's "optionCaption" */
.c-select-with-caption:has(option:first-of-type:checked) {
	color: var(--gray);
}

.form-inline .c-input-numeric-narrow {
	width: calc(3rem + 20px);
}
.mvh-50 {
	max-height: 50vh !important;
}
.mvh-40 {
	max-height: 40vh !important;
}
.mvh-30 {
	max-height: 30vh !important;
}
.mw-50 {
	max-width: 50% !important;
}
.mw-fc {
	max-width: fit-content !important;
}
.w-33 {
	width: calc(100% / 3) !important;
}
.fixed-right {
	right: 0 !important;
}
.lh-normal {
	line-height: normal !important;
}

.btn.btn-link.c-btn-inline {
	height: auto;
	padding: 0;
}

/* on the report pages we want a slightly narrower sidebar */
.page-sidebar.c-page-sidebar-sm {
	width: 18rem;
	max-width: 18rem;
}
.has-sidebar-expand.c-has-page-sidebar-sm .page-inner {
    margin-right: 18rem;
}
.page-sidebar h6 {
	font-size: 0.9rem;
}

.top-bar .nav-item .dropdown-icon.fas {
    top: inherit;
}
.top-bar .dropdown-item:hover .dropdown-icon.fal {
	color: white !important;
}
.dropdown-menu.c-dropdown-menu-condensed .dropdown-header, .dropdown-menu.c-dropdown-menu-condensed .dropdown-item {
	padding: .35rem 1rem;
}
/* fix up coloring of team-selection dropdown thingie */
.c-dropdown-active-bg .dropdown-item:hover {
	color: var(--white);
	cursor: pointer !important;
}
.c-dropdown-active-bg .dropdown-item.active {
	background-color: var(--white);
	color: var(--primary);
	font-weight: bold;
}
/* check icons in dropdown menus */
.c-dropdown-active-bg .dropdown-item:not(.active) > .fa-check {
	opacity: 0;
}
.c-dropdown-arrow-center {
	left: auto;
	right: 50%;	
}



.c-columns-2 {
	columns: auto 2;
}

.form-control.c-width-numeric-sm, .input-group.c-width-numeric-sm {
	width: 5rem;
}
.form-control.c-width-numeric-lg, .input-group.c-width-numeric-lg {
	width: 8rem;
}

.c-code-sample {
	cursor: pointer !important;
	white-space: nowrap;
	overflow: hidden;
	font-family: monospace;
	font-size: 12px;
}

.c-conds-expr-rightside {
	max-width: 400px; 
	vertical-align: text-top;
}

textarea.text-monospace {
	line-height: 1.4em; /* slightly tighter */
}

.c-easypiechart-md > span {
	font-size: 0.85rem;
	fone-weight: bold;
	line-height: 1.2;
}

.c-ipe .dropdown-menu, .c-ipe .dropdown-header {
	font-size: 0.8rem;
}

input.form-control.form-control-lg[list]::-webkit-calendar-picker-indicator {
	padding-bottom: 10px;
	padding-right: 5px;
	color: var(--gray);
}

@keyframes fadeblink {
    from { opacity: 1.0; }
    30% { opacity: 0.5; }
    to { opacity: 1.0; }
}                                                                                                                                                                                                                                  

@-webkit-keyframes fadeblink {
    from { opacity: 1.0; }
    30% { opacity: 0.5; }
    to { opacity: 1.0; }
}

/* timeline item that doesn't want a line below */
.timeline .timeline-item.c-timeline-item-last > .timeline-figure::before {
    border-left: none;
}

.c-fadeblink {
  animation:fadeblink 1200ms infinite;
  -webkit-animation:fadeblink 1200ms infinite;
}
.c-fadeblink-if-active.bg-success,.c-fadeblink-if-active.bg-warning {
  animation:fadeblink 1200ms infinite;
  -webkit-animation:fadeblink 1200ms infinite;
} 

.custom-switch.custom-switch-sm .custom-control-label {
	font-size: .875em;
	padding-top: 3px;
}
.custom-switch.custom-switch-sm .custom-control-label:before {
	left: -2rem;
}
.custom-switch.custom-switch-sm .custom-control-label:after {
	left: calc(-2rem + 2px);
}

/* "md" size switch for Bootstrap 4 adapted from https://codepen.io/nisharg/pen/mdJmywW */
.custom-switch.custom-switch-md .custom-control-label {
	padding-left: 1.4rem;
}
.custom-switch.custom-switch-md .custom-control-label::before {
	height: 1.5rem;
	width: calc(2rem + 0.75rem);
	border-radius: 3rem;
}
.custom-switch.custom-switch-md .custom-control-label::after {
	width: calc(1.5rem - 4px);
	height: calc(1.5rem - 4px);
	border-radius: calc(2rem - (1.5rem / 2));
}
.custom-switch.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
	transform: translateX(calc(1.5rem - 0.25rem));
}
/* admin-gen.css — generated long-tail utility classes (see #1261).
 * Replaces bespoke inline style="" attrs with no Bootstrap/admin.css equivalent.
 * Concatenated into bin admin.css at build time (Makefile). Regenerate; do not hand-edit. */

.etc-bottom-0px{bottom:0px !important}
.etc-bottom-10px{bottom:10px !important}
.etc-clear-both{clear:both !important}
.etc-cols-2auto{columns:2 auto !important}
.etc-cur-pointer{cursor:pointer !important}
.etc-gap-1rem{gap:1rem !important}
.etc-h-0px{height:0px !important}
.etc-h-120px{height:120px !important}
.etc-h-200px{height:200px !important}
.etc-left-0px{left:0px !important}
.etc-lh-1_1em{line-height:1.1em !important}
.etc-maxh-12rem{max-height:12rem !important}
.etc-maxh-15rem{max-height:15rem !important}
.etc-maxh-360px{max-height:360px !important}
.etc-maxh-400px{max-height:400px !important}
.etc-maxh-500px{max-height:500px !important}
.etc-maxh-70vh{max-height:70vh !important}
.etc-maxh-calc100vh-100px{max-height:calc(100vh - 100px) !important}
.etc-maxw-15rem{max-width:15rem !important}
.etc-maxw-20rem{max-width:20rem !important}
.etc-maxw-250px{max-width:250px !important}
.etc-maxw-300px{max-width:300px !important}
.etc-maxw-5rem{max-width:5rem !important}
.etc-mb-15px{margin-bottom:15px !important}
.etc-mb-25px{margin-bottom:25px !important}
.etc-mb-2px{margin-bottom:2px !important}
.etc-mb-n30px{margin-bottom:-30px !important}
.etc-minh-100vh{min-height:100vh !important}
.etc-minh-10vh{min-height:10vh !important}
.etc-minh-15rem{min-height:15rem !important}
.etc-minh-200px{min-height:200px !important}
.etc-minh-500px{min-height:500px !important}
.etc-minw-20rem{min-width:20rem !important}
.etc-minw-3rem{min-width:3rem !important}
.etc-ml-n20px{margin-left:-20px !important}
.etc-mt-10px{margin-top:10px !important}
.etc-mt-15px{margin-top:15px !important}
.etc-mt-20px{margin-top:20px !important}
.etc-mt-3px{margin-top:3px !important}
.etc-mt-50px{margin-top:50px !important}
.etc-mt-5px{margin-top:5px !important}
.etc-mt-7px{margin-top:7px !important}
.etc-mt-n10px{margin-top:-10px !important}
.etc-mt-n2px{margin-top:-2px !important}
.etc-ovf-scroll{overflow:scroll !important}
.etc-ovfx-scroll{overflow-x:scroll !important}
.etc-ovfy-scroll{overflow-y:scroll !important}
.etc-p-10px0{padding:10px 0 !important}
.etc-pb-10px{padding-bottom:10px !important}
.etc-pb-15px{padding-bottom:15px !important}
.etc-pb-20px{padding-bottom:20px !important}
.etc-pb-40px{padding-bottom:40px !important}
.etc-pb-5px{padding-bottom:5px !important}
.etc-pb-7px{padding-bottom:7px !important}
.etc-pl-20px{padding-left:20px !important}
.etc-pos-absolute{position:absolute !important}
.etc-pos-relative{position:relative !important}
.etc-pr-15px{padding-right:15px !important}
.etc-pt-100px{padding-top:100px !important}
.etc-pt-10px{padding-top:10px !important}
.etc-pt-15px{padding-top:15px !important}
.etc-pt-200px{padding-top:200px !important}
.etc-pt-3px{padding-top:3px !important}
.etc-pt-40px{padding-top:40px !important}
.etc-pt-5px{padding-top:5px !important}
.etc-right-0px{right:0px !important}
.etc-right-20px{right:20px !important}
.etc-right-2px{right:2px !important}
.etc-right-2rem{right:2rem !important}
.etc-top-0px{top:0px !important}
.etc-top-1rem{top:1rem !important}
.etc-w-0px{width:0px !important}
.etc-w-100px{width:100px !important}
.etc-w-10rem{width:10rem !important}
.etc-w-20px{width:20px !important}
.etc-w-250px{width:250px !important}
.etc-w-350px{width:350px !important}
.etc-w-40pct{width:40% !important}
.etc-w-5rem{width:5rem !important}
.etc-w-70pct{width:70% !important}
.etc-w-800px{width:800px !important}
.etc-w-80px{width:80px !important}
.etc-w-8rem{width:8rem !important}
.etc-w-90pct{width:90% !important}
.etc-w-calc100pct-10rem{width:calc(100% - 10rem) !important}
.etc-w-calc100pct-200px{width:calc(100% - 200px) !important}
.etc-w-calc20pct-20px{width:calc(20%-20px) !important}
.etc-z-1{z-index:1 !important}
.etc-z-999{z-index:999 !important}
.etc-z-999999{z-index:999999 !important}