@charset "utf-8";

a {
	cursor: pointer;
}

/* Page shell. The navbar is fixed to the top and the footer to the bottom, so
   #page-wrapper is the only thing that scrolls. Its height is the viewport
   minus those two bars, which is why they both need a known height:
   --aduvio-header-height matches the body margin-top set in sb-admin.css and
   --aduvio-footer-height is enforced on #footer below (taller footers are
   clipped rather than allowed to cover the bottom of the page). Override both
   in site/css/style.css if a site ships its own header or footer. */
:root {
	--aduvio-header-height: 100px;
	/* two stacked columns below the sm break point, one row above it */
	--aduvio-footer-height: 64px;
}

html, body {
	overflow: hidden;
}

#page-wrapper {
	background-color: #f7f9fb;
	height: calc(100vh - var(--aduvio-header-height) - var(--aduvio-footer-height));
	/* dvh keeps the footer on screen while mobile browser chrome shows/hides */
	height: calc(100dvh - var(--aduvio-header-height) - var(--aduvio-footer-height));
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}


#footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	/* above the fixed side-nav, which runs down to the bottom of the viewport */
	z-index: 1035;
	height: var(--aduvio-footer-height);
	box-sizing: border-box;
	overflow: hidden;
	margin: 0px;
	background: #f4f4f4;
	width: 100%;
	color: #898989;
	border-top: 1px solid #dddddd;
	padding: 5px;
}

/* Bootstrap 3 sm break point: the navbar collapses to one row and the footer
   columns sit side by side instead of stacking. */
@media (min-width:768px) {

	:root {
		--aduvio-header-height: 50px;
		--aduvio-footer-height: 40px;
	}
}

.center-block {
	display: block !important;
	margin-left: auto;
	margin-right: auto;
}

.clear {
	clear: both;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

span.note {
	font-size: 0.8em;
}

.breadcrumb {
	background-color: #f7f9fb;
	margin-bottom: 5px;
	padding: 8px 0px;
}

.panel {
	box-shadow: 0 1px 3px rgba(16, 42, 82, 0.08), 0 1px 2px rgba(16, 42, 82, 0.04);
}

.panel-body .list-group {
	margin-bottom: 0px;
}

.panel-body {
	overflow-x: hidden;
}

.panel-body .table {
	margin-bottom: 0px;
	margin-top: 0px;
}

.panel-heading {
	padding: 5px 15px 5px 15px;
	background-color: #fdfdfe;
}

.expand-panel-heading {
	padding-bottom: 10px !important;
}

.panel-default > .panel-heading {
	background-color: #fff;
	border-bottom: none;
}

.panel-success {
	border-color: #17A06B;
}

.panel-warning {
	border-color: #E5A400;
}

.panel-danger {
border-color: #E5484D;
}

.panel-danger > .panel-heading {
	background-color: #E5484D;
	border-color: #E5484D;
	color: #fff;
}

.panel-success > .panel-heading {
	background-color: #17A06B;
	border-color: #17A06B;
	color: #fff;
}

.panel-warning > .panel-heading {
	background-color: #E5A400;
	border-color: #E5A400;
	color: #fff;
}

.panel-footer {
	padding: 5px 10px;
	background-color: #fdfdfe;
}

/* A panel footer used as a "view more" action row is wrapped in an <a> (the
   sb-admin convention). Left bare, the bar inherits the raw link colour, so it
   sits there painted blue as though it were already hovered, and then goes dark
   and underlined once you actually hover it - the states read backwards. Style
   the bar itself instead: quiet at rest, tinted on hover. */
.panel > a {
	display: block;
}

.panel > a:hover,
.panel > a:focus {
	text-decoration: none;
}

.panel > a > .panel-footer {
	color: #555;
	transition: background-color .15s ease, color .15s ease;
}

.panel > a:hover > .panel-footer,
.panel > a:focus > .panel-footer {
	background-color: #f1f5fb;
	color: #007AFF;
}

.list-group>li.compact {
	padding: 5px 15px;
}

.list-group>li a, td a>i {
	cursor: pointer;
}
/*A row with a floated badge or a .pull-right stat has to contain the float, or a tall one spills out the bottom of its row.*/
.list-group>li,
.list-group>.list-group-item {
	overflow: auto !important;
}

.overflow-visible {
	overflow: visible !important;
}


/*JQuery Datepicker calendar icon fix */
.ui-datepicker-prev .ui-icon, .ui-datepicker-next .ui-icon { margin-top: 10px !important;}

/* jQuery UI computes the popup's z-index from the input's nearest positioned
   ancestor, which is usually none -- so it defaults to 1, well below sticky
   table headers (z-index 2/3, see .table-sticky-header) and other positioned
   UI. Force it above everything, including modals (Bootstrap modal: 1050). */
.ui-datepicker {
	z-index: 1060 !important;
	background: rgb(255,255,255);
}


/*Hide file bar and promo for tinymce 6 */
.tox-menubar,.tox-promotion {
	display: none !important;
}

table {
	box-shadow: 0 4px 12px rgba(16,42,82,.08), 0 2px 4px rgba(16,42,82,.05);
}

table.table {
	background: #fff;
}

table fieldset {
 padding: 0px !important;
 background-color: transparent !important;
}

table td i {
	margin-right: 5px;
	margin-bottom: 5px;
}

table td a.pull-right i, table td i.pull-right {
	margin-left: 5px;
}

table.sortable th[data-order-by]{
	cursor: pointer;
}

table td[onclick]{
	color: rgb(3, 169, 244);
	cursor: pointer;
}
table td[onclick]:hover{
	text-decoration: underline;
}

.editable-text-cell, .editable-decimal-cell, .editable-date-cell, .editable-post-cell,
.editable-user-cell, .editable-due-date {
   cursor: cell;
}

.inactive-row td {
	background-color: #ececec;
    color: #b9b9b9;
	cursor: not-allowed;
}


td.currency-cell {
	white-space: nowrap !important;
}

/* Row action icons: the cell shrinks to fit its icons and always keeps them on one line,
   no matter how many there are.
   The icons are floated right in the markup, but floats wrap as soon as the column gets
   squeezed and a floated child barely counts toward the cell's minimum width, so they are
   unfloated here and laid out inline instead -- the cell's minimum width then becomes every
   icon sitting side by side, which the table can never squeeze below.
   direction:rtl keeps the same painted order float:right produced (first icon in the markup
   stays right-most); each child is set back to ltr so its own content still reads normally. */
td.icon-cell {
	width: 1%;
	white-space: nowrap !important;
	text-align: right;
	direction: rtl;
}

td.icon-cell .pull-right,
td.icon-cell .float-right {
	float: none !important;
}

td.icon-cell > * {
	display: inline-block;
	vertical-align: middle;
	direction: ltr;
}

td.icon-cell .fa.pull-right {
	margin-left: 5px;
}

.sky-form fieldset {
	background: #fff;
}

.sky-form fieldset .well {
	background: #fff;
}

.sky-form fieldset>.panel {
	background: transparent;
	margin-bottom: 0px;
	box-shadow: none;
}


.sky-form footer {
	background: #fff;
}

.sky-form label.label {
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 2px;
}

.form-section-title {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #444;
	/*border-bottom: 2px solid #ddd;*/
	padding-bottom: 8px;
	margin-top: 10px;
	/*margin-bottom: 18px;*/
}

.chosen-container {
	width: 100% !important;
}

.chosen-container-single .chosen-single {
	height: 30px !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	background: #fff !important;
	padding-top: 6px !important;
	border-color: #e5e5e5 !important;
	box-shadow: none !important;
}


.chosen-container-multi .chosen-choices {
	border: 1px solid #e5e5e5 !important;
	background-image:  none !important;
	padding: 5px 10px !important;
	border-radius: 4px !important;
}

/* chosen.css never sets font-weight on this and only sets font-size:100% (the browser's own
   form-control default, not the panel's) - left to fall through, unlike chosen-single above */
.chosen-container-multi .chosen-choices .search-field input[type="text"] {
	font-size: 15px !important;
	font-weight: 400 !important;
	color: #444 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* The open drop is switched to fixed positioning in js/common/functions.js so no
   scrolling or clipping ancestor can cut the option list off. Chosen draws its
   borders assuming the list always hangs below the field, so turn them around for
   the drops that have to flip above it. */
.chosen-container .chosen-drop.aduvio-chosen-drop-above {
	border-top: 1px solid #aaa;
	border-bottom: 0;
}


.clickable {
	cursor: pointer;
}

/* Default star in the post-type value lists (php/elements/fetch-edit-post-list-rem.php) */
.aduvio-post-default-star {
	color: #cfcfcf;
}

.aduvio-post-default-star.is-default {
	color: #f0a30a;
}

.expand-panel-icon, .collapse-panel-icon {
	cursor: pointer;
}

.label {
	border-radius: 10px;
}

.label-success {
	background-color: #dbf3e7;
	color: #12855a;
	border: 1px solid #12855a;
}

.label-warning {
	background-color: #fcf0cf;
	color: #F57F17;
	border: 1px solid #FBC02D;
}

.label-danger {
	background-color: #E5484D;
	color: #fff;
	border: 1px solid #E5484D;
}

.label-info {
	background-color: #ebf4ff;
	color: #0059a1;
	border: 1px solid #0059a1;
}

.label-default {
	background-color: #eef2f6;
	color: #333d47;
	border: 1px solid #333d47;
}

.label > i {
  margin-left: 0px;
}

button {
	box-shadow: 0 4px 12px rgba(16,42,82,.08), 0 2px 4px rgba(16,42,82,.05);
}

button.btn {
	margin-right: 5px;
	margin-bottom: 5px;
}

.btn-group > button.btn {
	margin-right: 0px;
}

.btn-group > button.btn:last-of-type {
	margin-right: 5px;
}

.btn-group.pull-right > button.btn:last-of-type {
	margin-right: 0px;
}

.btn-group.pull-right > button.btn:first-of-type {
	margin-left: 5px;
}
button.btn.pull-right {
	margin-left: 5px;
	margin-right: 0px;
}

.btn i {
	margin: 0px;
}


.btn-stripe {
	background: #635bff;
	color: white;
	transition: background 0.3s ease;
}

.btn-submit:hover, .btn-stripe:hover, .btn-strip:focus {
	background: #4338ca;
	color: white;
}

.btn-submit:disabled , .btn-stripe:disabled {
	background: #818cf8;
	color: white;
	cursor: not-allowed;
}


/*Active toggle style*/

td i.fa-toggle-on {
	color: #4caf50;
}

/*Tabs */

#settings-tabs a {
	cursor: pointer;
}

.nav-tabs > li > a {
	padding: 5px 10px;
}

.aduvio-views-tabs > li {
	margin-bottom: -2px;
}

/*Header Alerts */

.header-privacy-mode { height: 100%; margin-top: 0px;}

.header-privacy-mode:hover {
	cursor: pointer;
}

.privacy-active i {
	color: #09f;
}

#header-alerts-list {
	padding: 0px;
}

#header-alerts-list li.admin-alert {
	min-height: 40px !important;
	max-height: none;
}

#header-alerts-list .read, #header-alerts-list .unread {
	padding: 5px;
}

#header-alerts-list .divider {
	margin: 0 !important;
}
#header-alerts-list .read:hover {
	background: #f6f6f7 !important;
}

#header-alerts-list .unread {
	background: #edf2fa !important;
}

#header-alerts-list .unread:hover {
background: #e5eaf2 !important;
}

#header-alerts-list i {
	margin-right: 10px;
	margin-left: 10px;
	border-radius: 50%;
	height: 25px;
	width: 25px;
	color: #fff !important;
	background: #b9bfc7;
	line-height: 20px;
	font-size: 16px;
	text-align: center;
	padding-top: 2px;
}

/*Unread alerts get the accent colour, read ones stay muted*/

#header-alerts-list .unread i {
	background: #09F;
}

#header-alerts-list .admin-alert-body {
	overflow: hidden;
}

#header-alerts-list .admin-alert-title {
	max-height: 38px;
	overflow: hidden;
	line-height: 19px;
}

#header-alerts-list .admin-alert-time {
	margin-top: 2px;
	font-size: 11px;
	line-height: 14px;
	color: #8a9099;
}

#header-language-switcher {
	margin-top: 13px;
	margin-right: 5px;
	width: 50px;
}

.badge-new {
	background: #09F !important;
}

.badge-success {
	background: #43A047;
	color: #fff;
}

.badge-danger {
	background: #E53935;
	color: #fff;
}

.slim-well {
	padding: 5px;
}

/* End Header alert styles */

.table-admin {
	border: 1px solid #ddd;
	margin-top: 15px;
}



/* Floating alert. It used to carry width:95% as an inline style, which is measured against
   the viewport while the box itself starts after the side rail - so on a tablet the alert ran
   off the right edge. Anchored to both edges of the content area instead. */
.floating_alert {
	position: fixed;
	top: 30px;
	left: 0px;
	right: 0px;
	padding: 0px 15px;
	z-index: 5000;
}

@media (min-width:768px) {
	.floating_alert {
		left: 60px;
	}
}


/* Bootstrap only lets .table-responsive scroll below 768px, which assumes the viewport is
   the content area. It is not here - the side rail eats 60px, and a tablet at 768-991px is
   left with a box far narrower than the table. Let the box scroll at every width instead.
   AduvioTable.wrapResponsive() supplies the wrapper div, since the class is written onto
   the <table> itself throughout the software and Bootstrap needs it on a parent. */
.table-responsive {
	width: 100%;
	margin-bottom: 15px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
	margin-bottom: 0px;
}


/* Frozen header row. Wrap the table in .table-scroll-container and add
   .table-sticky-header to the table itself. The scroll box is what makes
   the header stick: the header stays pinned to the top of the box while
   the rows scroll under it. */
.table-scroll-container {
	max-height: calc(100vh - 260px);
	min-height: 100px;
	overflow: auto;
	-webkit-overflow-scrolling: touch !important;
	margin-top: 15px;
}

.table-scroll-container > .table {
	margin-top: 0px;
}

.table-sticky-header > thead > tr > th {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	z-index: 2;
	background-color: #fff;
	/* Tables use border-collapse:collapse, which leaves cell borders behind
	   when the cell is sticky, so the borders are painted as insets instead. */
	border-bottom: none;
	box-shadow: inset 0 -2px 0 #ddd, inset 0 1px 0 #ddd;
}

/* Frozen columns. Add .frozen-column to a th to pin that column to the left edge of
   the scroll box, or .frozen-column-right to pin it to the right edge. Only the th is
   marked up: AduvioTable.freezeColumns() mirrors the class onto the body cells in the
   same column and works out each column's offset from the rendered widths.

   The table has to sit inside a .table-scroll-container, since that box is what
   scrolls and what sticky positions against. Frozen columns also have to be the
   leading ones (.frozen-column) or the trailing ones (.frozen-column-right) -- the
   offsets are the frozen widths stacked up, so a gap in between makes them overlap. */

/* A frozen cell paints over the columns scrolling underneath it, so it needs an
   opaque background of its own. These mirror the row states Bootstrap sets on the tr,
   which a cell background would otherwise hide; themes redefine the variables rather
   than repeating the rules. Order matters -- hover has to beat striping and the
   inactive state has to beat both, which is how the plain (non-frozen) cells behave. */
:root {
	--aduvio-table-bg: #fff;
	/* separate from the body because the sticky header is often its own colour */
	--aduvio-table-bg-header: var(--aduvio-table-bg);
	--aduvio-table-bg-striped: #f9f9f9;
	--aduvio-table-bg-hover: #f5f5f5;
	--aduvio-table-bg-inactive: #ececec;
	--aduvio-table-border: #ddd;
	--aduvio-frozen-shadow: rgba(0, 0, 0, 0.15);
	/* Bootstrap's contextual row states, and what they become on hover */
	--aduvio-table-bg-active: #f5f5f5;
	--aduvio-table-bg-success: #dff0d8;
	--aduvio-table-bg-info: #d9edf7;
	--aduvio-table-bg-warning: #fcf8e3;
	--aduvio-table-bg-danger: #f2dede;
	--aduvio-table-bg-active-hover: #e8e8e8;
	--aduvio-table-bg-success-hover: #d0e9c6;
	--aduvio-table-bg-info-hover: #c4e3f3;
	--aduvio-table-bg-warning-hover: #faf2cc;
	--aduvio-table-bg-danger-hover: #ebcccc;
}

.frozen-column,
.frozen-column-right {
	position: -webkit-sticky;
	position: sticky;
	z-index: 1;
	background-color: var(--aduvio-table-bg);
}

.table-striped > tbody > tr:nth-of-type(odd) > .frozen-column,
.table-striped > tbody > tr:nth-of-type(odd) > .frozen-column-right {
	background-color: var(--aduvio-table-bg-striped);
}

.table-hover > tbody > tr:hover > .frozen-column,
.table-hover > tbody > tr:hover > .frozen-column-right {
	background-color: var(--aduvio-table-bg-hover);
}

.table > tbody > tr.inactive-row > .frozen-column,
.table > tbody > tr.inactive-row > .frozen-column-right {
	background-color: var(--aduvio-table-bg-inactive);
}

/* Bootstrap's contextual row states already paint on the cell rather than the row, so
   a frozen cell replaces them outright instead of just covering them up, and they have
   to be restated. The order below is the order they resolve in on an ordinary cell: a
   cell-level state beats the row-level hover above it, a contextual state beats
   .inactive-row, and a hovered contextual state beats everything. */
.table > tbody > tr.active > .frozen-column,
.table > tbody > tr.active > .frozen-column-right {
	background-color: var(--aduvio-table-bg-active);
}

.table > tbody > tr.success > .frozen-column,
.table > tbody > tr.success > .frozen-column-right {
	background-color: var(--aduvio-table-bg-success);
}

.table > tbody > tr.info > .frozen-column,
.table > tbody > tr.info > .frozen-column-right {
	background-color: var(--aduvio-table-bg-info);
}

.table > tbody > tr.warning > .frozen-column,
.table > tbody > tr.warning > .frozen-column-right {
	background-color: var(--aduvio-table-bg-warning);
}

.table > tbody > tr.danger > .frozen-column,
.table > tbody > tr.danger > .frozen-column-right {
	background-color: var(--aduvio-table-bg-danger);
}

.table-hover > tbody > tr.active:hover > .frozen-column,
.table-hover > tbody > tr.active:hover > .frozen-column-right {
	background-color: var(--aduvio-table-bg-active-hover);
}

.table-hover > tbody > tr.success:hover > .frozen-column,
.table-hover > tbody > tr.success:hover > .frozen-column-right {
	background-color: var(--aduvio-table-bg-success-hover);
}

.table-hover > tbody > tr.info:hover > .frozen-column,
.table-hover > tbody > tr.info:hover > .frozen-column-right {
	background-color: var(--aduvio-table-bg-info-hover);
}

.table-hover > tbody > tr.warning:hover > .frozen-column,
.table-hover > tbody > tr.warning:hover > .frozen-column-right {
	background-color: var(--aduvio-table-bg-warning-hover);
}

.table-hover > tbody > tr.danger:hover > .frozen-column,
.table-hover > tbody > tr.danger:hover > .frozen-column-right {
	background-color: var(--aduvio-table-bg-danger-hover);
}

/* Same border-collapse problem as the sticky header above: the cell's own borders are
   left behind when it moves, so the row rule is painted as an inset instead. The th
   rule only bites on tables without .table-sticky-header, which already does this. */
td.frozen-column,
td.frozen-column-right {
	box-shadow: inset 0 1px 0 var(--aduvio-table-border);
}

th.frozen-column,
th.frozen-column-right {
	border-bottom: none;
	box-shadow: inset 0 -2px 0 var(--aduvio-table-border), inset 0 1px 0 var(--aduvio-table-border);
}

/* A frozen header cell has to sit above both the rest of the sticky header (z-index 2)
   and the frozen body cells below it (z-index 1). */
.table-sticky-header > thead > tr > th.frozen-column,
.table-sticky-header > thead > tr > th.frozen-column-right {
	z-index: 3;
	background-color: var(--aduvio-table-bg-header);
}

/* Divider marking where the frozen columns end. Drawn on a pseudo-element rather than
   a box-shadow so it does not fight the inset borders above, and faded in only while
   there is actually something scrolled underneath it. */
.frozen-column-edge::after,
.frozen-column-right-edge::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 6px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.frozen-column-edge::after {
	right: 0;
	transform: translateX(100%);
	background-image: linear-gradient(to right, var(--aduvio-frozen-shadow), rgba(0, 0, 0, 0));
}

.frozen-column-right-edge::after {
	left: 0;
	transform: translateX(-100%);
	background-image: linear-gradient(to left, var(--aduvio-frozen-shadow), rgba(0, 0, 0, 0));
}

.table-scroll-container.is-scrolled-left .frozen-column-edge::after,
.table-scroll-container.is-scrolled-right .frozen-column-right-edge::after {
	opacity: 1;
}

.tab-pane .table, .tab-pane  table-container .table {
	margin-top: 0px;
	margin-bottom: 0px;
}


ul.pagination {
	margin-top: 10px;
	margin-bottom: 0px;
}

#aduvio-changelog-content-container ul.pagination {
	margin-bottom: 0px;
}


#cover-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(0,0,0,0.7);
    z-index:9999;
    display:none;
}

@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:black;
    border-top-color:transparent;
    border-width: 4px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}


.navbar-brand {
	padding: 5px 15px !important;
}

.nav-tabs>li {
	margin-right: 3px;
}

.nav-tabs>li:not(.active) {
	border: 1px solid #ddd;
	border-bottom: none;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
	background-color: #f2f7fe;
	color: #007AFF;
}

.top-nav > li > a:hover, .top-nav > li > a:focus, .top-nav > .open > a, .top-nav > .open > a:hover, .top-nav > .open > a:focus {
	background-color: #f2f7fe;
	color: #007AFF;
}

.navbar-inverse {
	background-color: #fdfdfe;
	border-color: #ebedf1;
	box-shadow: 0 1px 3px rgba(16,42,82,.08), 0 1px 2px rgba(16,42,82,.04);
}

/*Mobile menu hamburger icon. The navbar is light in every theme that does not repaint it,
  so Bootstrap's white .icon-bar would be invisible. Dark themes override this.*/
.navbar-inverse .navbar-toggle {
	border-color: #ebedf1;
}

.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
	background-color: #f2f7fe;
	border-color: #d7dbe3;
}

.navbar-inverse .navbar-toggle .icon-bar {
	background-color: #4a5568;
}

.side-nav {
	background-color: #fdfdfe;
	border-right: 1px solid #ebedf1;
	box-shadow: 0 1px 3px rgba(16,42,82,.08), 0 1px 2px rgba(16,42,82,.04);
}

.side-nav li a:hover, .side-nav li a:focus {
	background-color: #f2f7fe !important;
	color: #007AFF !important;
}

.side-nav .active > a {
	background-color: #f2f7fe;
	color: #007AFF;
}


/*Padding and margin styles*/

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

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

.padding-xxs {
	padding: 5px !important;
}
.padding-top-xxs {
	padding-top: 5px !important;
}
.padding-bottom-xxs {
	padding-bottom: 5px !important;
}
.padding-left-xxs {
	padding-left: 5px !important;
}
.padding-right-xxs {
	padding-right: 5px !important;
}

.margin-xxs {
	margin: 5px !important;
}
.margin-top-xxs {
	margin-top: 5px !important;
}
.margin-bottom-xxs {
	margin-bottom: 5px !important;
}
.margin-left-xxs {
	margin-left: 5px !important;
}
.margin-right-xxs {
	margin-right: 5px !important;
}


.padding-xs {
	padding: 10px !important;
}
.padding-top-xs {
	padding-top: 10px !important;
}
.padding-bottom-xs {
	padding-bottom: 10px !important;
}
.padding-left-xs {
	padding-left: 10px !important;
}
.padding-right-xs {
	padding-right: 10px !important;
}

.margin-xs {
	margin: 10px !important;
}
.margin-top-xs {
	margin-top: 10px !important;
}
.margin-bottom-xs {
	margin-bottom: 10px !important;
}
.margin-left-xs {
	margin-left: 10px !important;
}
.margin-right-xs {
	margin-right: 10px !important;
}


.padding-sm {
	padding: 25px !important;
}
.padding-top-sm {
	padding-top: 25px !important;
}
.padding-bottom-sm {
	padding-bottom: 25px !important;
}
.padding-left-sm {
	padding-left: 25px !important;
}
.padding-right-sm {
	padding-right: 25px !important;
}

.margin-sm {
	margin: 25px !important;
}
.margin-top-sm {
	margin-top: 25px !important;
}
.margin-bottom-sm {
	margin-bottom: 25px !important;
}
.margin-left-sm {
	margin-left: 25px !important;
}
.margin-right-sm {
	margin-right: 25px !important;
}


.padding-md {
	padding: 40px !important;
}
.padding-top-md {
	padding-top: 40px !important;
}
.padding-bottom-md {
	padding-bottom: 40px !important;
}
.padding-left-md {
	padding-left: 40px !important;
}
.padding-right-md {
	padding-right: 40px !important;
}

.margin-md {
	margin: 40px !important;
}
.margin-top-md {
	margin-top: 40px !important;
}
.margin-bottom-md {
	margin-bottom: 40px !important;
}
.margin-left-md {
	margin-left: 40px !important;
}
.margin-right-md {
	margin-right: 40px !important;
}


.padding-lg {
	padding: 60px !important;
}
.padding-top-lg {
	padding-top: 60px !important;
}
.padding-bottom-lg {
	padding-bottom: 60px !important;
}
.padding-left-lg {
	padding-left: 60px !important;
}
.padding-right-lg {
	padding-right: 60px !important;
}

.margin-lg {
	margin: 60px !important;
}
.margin-top-lg {
	margin-top: 60px !important;
}
.margin-bottom-lg {
	margin-bottom: 60px !important;
}
.margin-left-lg {
	margin-left: 60px !important;
}
.margin-right-lg {
	margin-right: 60px !important;
}


.padding-xl {
	padding: 80px !important;
}
.padding-top-xl {
	padding-top: 80px !important;
}
.padding-bottom-xl {
	padding-bottom: 80px !important;
}
.padding-left-xl {
	padding-left: 80px !important;
}
.padding-right-xl {
	padding-right: 80px !important;
}

.margin-xl {
	margin: 80px !important;
}
.margin-top-xl {
	margin-top: 80px !important;
}
.margin-bottom-xl {
	margin-bottom: 80px !important;
}
.margin-left-xl {
	margin-left: 80px !important;
}
.margin-right-xl {
	margin-right: 80px !important;
}

/* Shadows  */

.shadow-xs {
	box-shadow: 0 1px 2px rgba(16,42,82,.06);
}

.shadow-sm {
	box-shadow: 0 1px 3px rgba(16,42,82,.08), 0 1px 2px rgba(16,42,82,.04);
}

.shadow-md {
	box-shadow: 0 4px 12px rgba(16,42,82,.08), 0 2px 4px rgba(16,42,82,.05);
}

.shadow-lg {
	box-shadow: 0 12px 28px rgba(16,42,82,.12), 0 4px 8px rgba(16,42,82,.06);
}

.shadow-xl {
	box-shadow: 0 24px 48px rgba(16,42,82,.16), 0 8px 16px rgba(16,42,82,.08);
}


form#search-form .col {
	margin-bottom: 0px;
}

/*
Help Widget
*/

#help-widget {
	position: fixed;
	bottom: 80px;
	right: 10px;
	border-radius: 30px;
	width: 60px;
	height: 60px;
	background: #eceff1;
	z-index: 999;
	text-align: center;
	color: #808e95;
	font-weight: bold;
	border: 3px solid #808e95;
	font-size: 30px;
	padding-top: 6px;
}
#help-widget:hover {
	background: #cfd8dc;
	color: #fff;
	border-color: #81d4fa;
}

.hidden-action-btn-container {
	display: none;
}

.top-form-hidden-container {
	display: none;
	border: 1px solid #ddd;
}

.table .alert {
	margin-bottom: 0px !important;
	padding: 5px 10px !important;
}

.alert{
	margin-bottom: 10px;
}

.alert-slim {
	padding-top: 8px;
	padding-bottom: 8px;
}

.alert-default {
	background: #f2f2f2;
	border-color: #ccc;
	color: #333;
}

.alert-warning {
	background-color: #fcf0cf;
	border-color: #E5A400;
	color: #333d47;
}

.alert-warning i {
	color: #E5A400;
}

.alert-success {
	background-color: #dbf3e7;
	border-color: #17A06B;
	color: #333d47;
}

.alert-success i {
	color: #17A06B;
}

.alert-info {
	background-color: #ebf4ff;
	border-color: #007AFF;
	color: #333d47;
}

.alert-info i {
	color: #007AFF;
}

.alert-danger {
	background-color: #fbe0e1;
	border-color: #E5484D;
	color: #333d47;
}

.alert-danger i {
	color: #E5484D;
}

#results_count_container {
	background: #007AFF;
	color: #fff;
	padding: 5px 10px;
	border-radius: 15px;
	margin-bottom: 20px;
}

.profile-picture {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	border: 1px solid #ddd;
	max-width: 200px;
	height: 200px;
  width: 200px;
}

.no-image-container {
	padding: 10px;
	border: 1px dashed #333;
}

.table-num-records-container {
	text-align: center;
	padding: 10px;
	max-width: 60%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	font-weight: 600;
}

.page-header {
	padding-bottom: 0px;
	margin-top: 5px;
	margin-bottom: 5px;
	border-bottom: none;
}

input[disabled] {
	background: #eee !important;
	cursor: no-drop !important;
}

/* pseudo-class: matches readonly AND all inherently non-editable inputs */
/* datepicker fields are readonly by design but still interactive, so keep them white */
/* the file picker's display box (and its hidden file input) are readonly by design too */
input:read-only:not(.hasDatepicker):not(.input-file input) { background: #eee !important; }

/* the x beside a file field's Browse button - AduvioForm::fileUpload() and the send modal's attachment.
   Hidden until a file is picked; aduvioform.js shows it and sets its right offset from the button's width */
.sky-form .input-file .aduvio-file-clear-btn {
	display: none;
	position: absolute;
	top: 4px;
	right: 100px;
	z-index: 2;
	height: 31px;
	width: 26px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	opacity: .55;
	cursor: pointer;
}
.sky-form .input-file .aduvio-file-clear-btn:hover { opacity: 1; }

/* An icon in an .input-group-addon is an inline-block, so it sits on the addon's
   baseline and the font's descender space is counted underneath it. That makes the
   addon taller than the 34px .form-control next to it and the grey box hangs below
   the bottom of the input. Taking an icon-only addon out of the inline flow drops
   that descender; the addon is a table-cell with vertical-align: middle, so the icon
   centres against whatever height the input sets, .input-group-sm/-lg included. */
.input-group-addon > .fa:only-child,
.input-group-addon > .fas:only-child,
.input-group-addon > .far:only-child,
.input-group-addon > .fab:only-child,
.input-group-addon > .fa-solid:only-child,
.input-group-addon > .fa-regular:only-child,
.input-group-addon > .fa-brands:only-child {
	display: block;
}

.show-password-input-icon:hover, .hide-password-input-icon:hover {
	color: #0288D1;
}

.sky-form {
 border: 1px solid rgb(221,221,221);
 box-shadow: 0 1px 1px rgba(0,0,0,.05);
 border-radius: 4px;
}

.sky-form .col {
	padding-left: 8px;
	padding-right: 8px;
}

.sky-form .col > .row {
	padding: inherit;
}

.sky-form > .row {
	padding-left: 7px;
	padding-right: 7px;
}

.sky-form select:disabled{
	background: #eee;
}

span.required {
	color: #ff0000;
	display: inline-block;
	position: relative;
	top: 15px;
	font-size: 35px;
    line-height: 1px;
}


.warning {
	color: #FBC02D;
}

.danger {
	color: #E53935;
}

.info {
	color: #0277BD;
}

.success {
	color: #388E3C;
}


.activeToggle, .inactiveToggle {
	cursor: pointer;
}

/*Alerts*/

.alert { position: relative; }

i.alert-close {
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
}
.alert-read:hover {
	background: #f6f6f7 !important;
}

.alert-unread {
	background: #edf2fa !important;
}

.alert-unread:hover {
background: #e5eaf2 !important;
}

.alert-icon i {
	margin-right: 10px;
	border-radius: 50%;
	height: 25px;
	width: 25px;
	color: #fff !important;
	background: #666666;
	line-height: 20px;
	font-size: 15px;
	text-align: center;
	padding-top: 2px;
}


/*Toolbars */

.grey-toolbar {
	background: #f5f5f5;
}

/*Tiles */

.tile-container .tile {
	width: 130px;
	height: 130px;
	float: left;
	border: 1px solid #ddd;
	text-align: center;
	padding: 15px;
	border-radius: 7px;
	background: #ffffff;
	box-shadow: 0 4px 12px rgba(16,42,82,.08), 0 2px 4px rgba(16,42,82,.05);
	margin-right: 30px;
	margin-bottom: 30px;
}

.tile-container a:hover {
	cursor: pointer;
}


.tile-container .tile-md {
	width: 200px;
	height: 200px;
	float: left;
	border: 1px solid #ddd;
	text-align: center;
	padding: 15px;
	border-radius: 7px;
	background: #ffffff;
	-webkit-box-shadow: 5px 5px 6px 0px rgba(221,221,221,1);
	-moz-box-shadow: 5px 5px 6px 0px rgba(221,221,221,1);
	box-shadow: 5px 5px 6px 0px rgba(221,221,221,1);
	margin-right: 30px;
	margin-bottom: 30px;
}

.tile-container .tile-lg {
	width: 300px;
	height: 300px;
	float: left;
	border: 1px solid #ddd;
	text-align: center;
	padding: 15px;
	border-radius: 7px;
	background: #ffffff;
	-webkit-box-shadow: 5px 5px 6px 0px rgba(221,221,221,1);
	-moz-box-shadow: 5px 5px 6px 0px rgba(221,221,221,1);
	box-shadow: 5px 5px 6px 0px rgba(221,221,221,1);
	margin-right: 30px;
	margin-bottom: 30px;
}

.tile-container .tile-danger {
	color: #a94442;
	border-color: #ebccd1;
	background-color: #f2dede;
}


/*Stats Group */

.stats-group {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 15px;
}

.stats-group .stat {
	flex: 1 1 140px;
	min-width: 140px;
	background: #ffffff;
	border: 1px solid #ddd;
	border-left: 3px solid #ddd;
	border-radius: 7px;
	padding: 12px 15px;
	box-shadow: 0 4px 12px rgba(16,42,82,.08), 0 2px 4px rgba(16,42,82,.05);
}

.stats-group .stat-count {
	display: block;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.stats-group .stat-label {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: #888888;
}

/*A second line under the count - what the figure above it is made of, e.g. how many invoices
  charged a tax and on what base. The markup is usually a <small>, which is inline, so it needs
  the block itself; .stat-label is the only other block in the tile.*/
.stats-group .stat-detail {
	display: block;
	margin-top: 2px;
}

.stats-group .stat-primary { border-left-color: #007AFF; }
.stats-group .stat-primary .stat-count { color: #007AFF; }

.stats-group .stat-success { border-left-color: #4CAF50; }
.stats-group .stat-success .stat-count { color: #4CAF50; }

.stats-group .stat-info { border-left-color: #039BE5; }
.stats-group .stat-info .stat-count { color: #039BE5; }

.stats-group .stat-warning { border-left-color: #FFCA28; }
.stats-group .stat-warning .stat-count { color: #FFCA28; }

.stats-group .stat-danger { border-left-color: #E53935; }
.stats-group .stat-danger .stat-count { color: #E53935; }

/*A tile that navigates somewhere - same tile, still the flex item, minus the link colouring*/
.stats-group a.stat,
.stats-group a.stat:hover,
.stats-group a.stat:focus {
	color: inherit;
	text-decoration: none;
}

.stats-group a.stat:hover,
.stats-group a.stat:focus {
	box-shadow: 0 6px 16px rgba(16,42,82,.14), 0 2px 6px rgba(16,42,82,.08);
}


/*Dashboard sections*/

.dashboard-section-header {
	border-bottom: 1px solid #dddddd;
	margin: 5px 0 15px 0;
	padding-bottom: 8px;
}

.dashboard-section-header h3 {
	display: inline-block;
	margin: 0;
	font-size: 20px;
}

.dashboard-section-header .btn {
	margin-top: -4px;
}

.dashboard-panel-body-flush {
	padding: 0;
}

.dashboard-panel-body-flush .list-group,
.dashboard-panel-body-flush .table {
	margin-bottom: 0;
}

.dashboard-scroll-panel {
	max-height: 320px;
	overflow-y: auto;
}


/*Auto Complete */

.autocomplete-container {
	z-index: 999 !important;
	position: absolute;
	width: 95%;
}

.autocomplete-container .item {
	background: #fafafa;
	border: 1px solid #ccc;
	border-top: 0px;
	padding: 10px;
	cursor: pointer;
}

/*The row under the pointer or picked with the arrow keys (AduvioForm.autosuggest), and the "No Results" line, which cannot be picked*/
.autocomplete-container .item:hover,
.autocomplete-container .item.active {
	background: #eef3fb;
}

.autocomplete-container .item.no-results {
	cursor: default;
	color: #888;
}

.autocomplete-container .item.no-results:hover {
	background: #fafafa;
}

/*List Group styles */

.panel-body .list-group {
	margin-bottom: 0px;
}

.list-group-danger li{
	color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}

.list-group-warning li {
	color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}


/*Tab Panes */

.tab-content {
box-shadow: 0 4px 12px rgba(16,42,82,.08), 0 2px 4px rgba(16,42,82,.05);
}

.tab-content > .active {
	border: 1px solid #ccc;
	border-top: none !important;
	padding: 20px;
	background: #fff;
}


.tab-pane fieldset{
	background: #fff;
}

.tab-pane .sky-form {
	border: none;
	box-shadow: none;
}

/* Modal Styles */

.modal-footer {
	border: none;
}


.modal-footer .btn + .btn {
	margin-bottom: 5px;
}

.modal fieldset {
	padding-top: 0px;
}


.modal-md {
	width: 1200px;
	max-width: 95%;
	margin-left: auto;
    margin-right: auto;
}

.modal-lg {
	width: 95%;
	margin-left: auto;
    margin-right: auto;
}

.modal-lg > .modal-dialog, .modal-md > .modal-dialog {
	width: 100% !important;
}


*[data-toggle='modal']{
	cursor: pointer !important;
}

.modal-body {
background: #fff;
padding: 15px 25px;
}

.modal-body fieldset {
	background: none !important;
	border: none !important;
	padding-left: 5px;
	padding-right: 5px;
}

.modal-body .sky-form {
	border: none !important;
	padding: 0px !important;
	box-shadow: none !important;
}

.modal-body .well {
	background-color: #fff;
}

.modal-full {
	width: 98%;
}

/*Post it list */

ul.post-it, ul.post-it>li {
	list-style:none;
}

ul.post-it{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

ul.post-it li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:200px;
  width:200px;
  padding:1em;
  box-sizing:border-box;
  overflow-y:auto;
  overflow-x:hidden;
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  transform: rotate(-6deg);
  transition: transform .15s linear;
}

ul.post-it li:nth-child(even) a{
  transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
ul.post-it li:nth-child(3n) a{
  transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}
ul.post-it li:nth-child(5n) a{
  transform:rotate(5deg);
  position:relative;
  top:-10px;
}

ul.post-it li a:hover,ul.post-it li a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  transform: scale(1.25);
  position:relative;
  z-index:5;
}

ul.post-it li{
  margin:1em;
}

/* End post it */

/*Settings pages */

	.settings_menu_container {
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 10px;
		box-shadow: 0 4px 12px rgba(16,42,82,.08), 0 2px 4px rgba(16,42,82,.05);
	}

	/*? A stacked menu that navigates rather than switching tabs - the API section and the module
		side menus. Its entries are page names rather than the short settings words, so the pills
		are tightened up and allowed to wrap, and the icons are given a fixed box so the labels
		start on one straight edge.

		These rules were copied into four module stylesheets, once per module and scoped to a class
		of its own, because the modules had nowhere shared to put them. They belong here, on the
		same class that marks the menu for AduvioMenu - see js/_classes/aduviomenu.js. */

	.aduvio-nav-menu.settings_menu_container {
		margin-bottom: 20px;
		padding-bottom: 8px;
	}

	.aduvio-nav-menu .nav-pills > li > a {
		padding: 7px 15px;
		word-break: break-word;
	}

	.aduvio-nav-menu .nav-pills > li > a > i.fa {
		width: 16px;
		text-align: center;
		margin-right: 4px;
	}

	/* Group headings inside a stacked pill menu (the settings menu, and the module side menus that
	reuse it). A <li class="sub-header"> is a label, not a link, so it gets none of the pill
	treatment - it is set small, uppercase and quiet, and lined up on the same left edge as the pill
	labels above and below it so the column of text stays straight. The hairline above separates the
	groups without adding another box to the menu; the first heading in a menu drops it. */

	.nav-pills.nav-stacked > li.sub-header {
		margin-top: 10px;
		padding: 8px 15px 4px;
		border-top: 1px solid rgba(0,0,0,.09);
		color: #8b8b8b;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: .08em;
		text-transform: uppercase;
		cursor: default;
	}

	.nav-pills.nav-stacked > li.sub-header:first-child {
		margin-top: 0;
		padding-top: 4px;
		border-top: 0;
	}


/*Comments panel styles*/
	.comment-container {
		padding: 10px;
	}

	.comment-container>.note {
		font-size: 0.8em;
		text-align: right;
		color: #555;
	}

	/*The tier a comment is in. Internal draws no badge - it is the norm*/
	.aduvio-comment-tier-icon { color: #999; }
	.aduvio-comment-tier-icon:hover { color: #555; }
	.aduvio-comment-tier-icon.aduvio-comment-tier-active { color: #337ab7; }

	.aduvio-comment-visibility-help {
		font-size: 0.85em;
		color: #777;
		margin-top: 4px;
	}

	/*An @ mention, inside a comment*/
	.aduvio-mention {
		background: #eaf2fa;
		color: #2b6ca3;
		border-radius: 3px;
		padding: 0px 3px;
		font-weight: 600;
	}

	/*The picker. Anchored to the field so it travels with a modal that is being scrolled*/
	.aduvio-mention-field { position: relative; }

	.aduvio-mention-list {
		position: absolute;
		z-index: 1060;
		top: 100%;
		left: 0;
		right: 0;
		max-height: 210px;
		overflow-y: auto;
		margin: 2px 0 0 0;
		padding: 0;
		list-style: none;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 3px;
		box-shadow: 0 4px 10px rgba(0,0,0,0.12);
	}

	.aduvio-mention-list>li {
		padding: 7px 10px;
		font-size: 0.9em;
		border-bottom: 1px solid #f2f2f2;
	}

	.aduvio-mention-list>li:last-child { border-bottom: 0; }

	.aduvio-mention-item { cursor: pointer; }

	.aduvio-mention-item:hover,
	.aduvio-mention-item.aduvio-mention-highlighted { background: #eaf2fa; }

	.aduvio-mention-email {
		display: block;
		font-size: 0.85em;
		color: #999;
	}

	.aduvio-mention-empty { color: #999; cursor: default; }

/*Communications panel styles */
	.aduvio-communications-panel { background: #fafafa !important; padding: 15px !important;}

	.aduvio-communications-panel .msg_container,.aduvio-communications-panel .msg_input_container { width: 100% !important; display: block; }
	.aduvio-communications-panel .msg_input_container { margin-top: 20px !important; position: relative;}

	.aduvio-communications-panel .msg_input_container input[type='text'] {
		width: 100%; border: 1px solid #eee !important; padding: 10px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	}

	.aduvio-communications-panel .msg_input_container button {
		position: absolute;
		right: 10px;
		bottom: 7px;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		border: none;
		background: #ededed;
		border-radius: 3px;
		padding: 5px 10px;
		transition: all .2s;
	}

	.aduvio-communications-panel .msg_input_container button:hover {
		background-color: #007AFF;
		color: #fff;
		cursor: pointer;
	}
	.conversation-messages-container {height: 50vh !important; overflow-x: hidden; background: #fff;
	padding: 10px;
	border-radius: 3px;
	border: 1px solid #eeeeee; }
	.aduvio-communications-panel .date { text-align: center; color: #999999; margin-bottom: 10px; margin-top: 10px; }

	.aduvio-communications-panel .msg { min-width: 47%; max-width: 50%; padding: 5px 10px; margin-bottom: 10px; border-radius: 10px; }

	.aduvio-communications-panel .msg_sent { background: #387df6; color: #fff; float: right; }

	.aduvio-communications-panel .msg_received { background: #f1f0f0; color: #333; float: left;}

	.aduvio-communications-panel .msg_sent a { color: #fff;}

	.msg audio, .msg .pbx-download-recording-link{ float: right;}

/*Collapse side menu styles */
	.mobile-settings-tab-selector-container {
		display: none;
	}

/* The stand-in AduvioMenu builds for a .aduvio-nav-menu side menu. It reuses the container above,
	so it appears at exactly the width the pills disappear at; this only gives it the room the
	hand-written Settings selectors get from the grid column they sit in. */
	.aduvio-menu-mobile-selector {
		width: 100%;
	}

/*Popover styles */
	.popover-title {
		color: #000 !important;
	}

	.popover-content:empty {
		padding: 0px;
	}


/*Readme toggle*/
	/*? Hidden for now; remove the display line to bring the readme icon back (and re-enable the .show() in page-js.php). */
	#readme-toggle-container {
		display: none;
		position: fixed;
		width: 40px;
		right: 0px;
		color: #333;
		z-index: 80;
		top: 180px;
	}

	/*? Matches #fixed-filter-toggle and .settings_menu_container. Hidden until a page shows it. */
	#readme-toggle {
		display: none; float: left; height: 40px; width:40px; background: #fff; color: #555;
		border: 1px solid #ccc; border-right: 0; border-radius: 10px 0px 0px 10px;
		box-shadow: 0 4px 12px rgba(16,42,82,.08), 0 2px 4px rgba(16,42,82,.05);
		padding: 10px; padding-left: 14px;
		cursor: pointer;
	}

/*Fixed filter styles*/
	#fixed-filter-container  {
		position: fixed;
		width: 40px;
		right: 0px;
		display: none;
		color: #333;
		z-index: 85;
	}

	/*? Matches .settings_menu_container: white card, #ccc hairline, 10px corners, soft blue shadow.
		The toggle and body sit edge to edge, so the body drops the border it shares with the toggle
		and the screen-edge side stays square. */
	#fixed-filter-toggle {
		float: left; height: 40px; width:40px; background: #fff; color: #555;
		border: 1px solid #ccc; border-right: 0; border-radius: 10px 0px 0px 10px;
		box-shadow: 0 4px 12px rgba(16,42,82,.08), 0 2px 4px rgba(16,42,82,.05);
		padding: 10px; padding-left: 14px;
		cursor: pointer;
	}

	#fixed-filter-body {
		float: left;
		background: #fff;
		border: 1px solid #ccc;
		border-right: 0;
		border-left: 0;
		box-shadow: 0 4px 12px rgba(16,42,82,.08), 0 2px 4px rgba(16,42,82,.05);
		min-height: 40px;
		width: 350px;
		padding: 15px;
		display: none;
		max-height: 80vh !important;
	}

	#fixed-filter-fields-container {
		overflow-y: scroll;
		overflow-x: hidden;
		max-height: calc(80vh - 120px);
		padding-left: 5px;
		padding-right: 5px;
	}


	#fixed-filter-body .sky-form{
		border: none;
		box-shadow: none;
	}

	#fixed-filter-body .sky-form fieldset {
		background: none !important;
		padding: 0px;
	}

	#fixed-filter-body .sky-form .col {
		padding-left: 10px;
		padding-right: 10px;
	}

	#fixed-filter-body .sky-form label.label {
		margin-top: 0px;
	}

	#fixed-filter-body .sky-form label {
		margin-bottom: 0px;
	}

	#fixed-filter-body .sky-form .label,
	#clear-fixed-filter,
	#fixed-filter-body .sky-form label.checkbox{
		color: #333;
	}

	#fixed-filter-body .sky-form .inline-group {
		padding-left: 0px;
	}

/*Advanced filter styles*/
	#advanced-filter-container  {
		position: fixed;
		width: 40px;
		right: 0px;
		top: 110px;
		display: none;
		color: #333;
		z-index: 85;
	}

	/*? Matches #fixed-filter and .settings_menu_container. */
	#advanced-filter-toggle {
		float: left; height: 40px; width:40px; background: #fff; color: #555;
		border: 1px solid #ccc; border-right: 0; border-radius: 10px 0px 0px 10px;
		box-shadow: 0 4px 12px rgba(16,42,82,.08), 0 2px 4px rgba(16,42,82,.05);
		padding: 10px; padding-left: 14px;
		cursor: pointer;
	}

	#advanced-filter-body {
		float: left;
		background: #fff;
		border: 1px solid #ccc;
		border-right: 0;
		border-left: 0;
		box-shadow: 0 4px 12px rgba(16,42,82,.08), 0 2px 4px rgba(16,42,82,.05);
		min-height: 40px;
		width: 350px;
		padding: 15px;
		display: none;
		max-height: 80vh !important;
	}

	#advanced-filter-fields-container {
		overflow-y: scroll;
		overflow-x: hidden;
		max-height: calc(80vh - 120px);
		padding-left: 5px;
		padding-right: 5px;
	}


	#advanced-filter-body .sky-form{
		border: none;
		box-shadow: none;
	}

	#advanced-filter-body .sky-form fieldset {
		background: none !important;
		padding: 0px;
	}

	#advanced-filter-body .sky-form .col {
		padding-left: 10px;
		padding-right: 10px;
	}

	#advanced-filter-body .sky-form label.label {
		margin-top: 0px;
	}

	#advanced-filter-body .sky-form label {
		margin-bottom: 0px;
	}

	#advanced-filter-body .sky-form .label,
	#clear-advanced-filter,
	#advanced-filter-body .sky-form label.checkbox{
		color: #333;
	}

	#advanced-filter-body .sky-form .inline-group {
		padding-left: 0px;
	}

/*Table columns picker - rendered with the fixed filter, shown in the table columns modal*/
	.aduvio-table-columns-hint {
		margin: 0px 0px 10px 0px;
		font-size: 12px;
		color: #999;
	}

	.aduvio-table-columns-list {
		list-style: none;
		margin: 0px;
		padding: 0px;
	}

	/*One row per column makes for a long list on a module with a lot of them. Only the run that can be
	  dragged scrolls, the pinned ones stay where the table has them.*/
	#aduvio-table-columns-filter-modal-form .aduvio-table-columns-sortable {
		max-height: 55vh;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.aduvio-table-columns-item {
		display: flex;
		align-items: center;
		margin-bottom: 4px;
		padding: 4px 10px;
		border: 1px solid #e5e5e5;
		border-radius: 3px;
		background: #fff;
	}

	.aduvio-table-columns-item:hover {
		border-color: #ccc;
	}

	.aduvio-table-columns-item.locked {
		background: #fafafa;
	}

	/*Pinned to an edge of the table, so it can't be dragged anywhere*/
	.aduvio-table-columns-item.frozen {
		background: #fafafa;
		border-style: dashed;
	}

	.aduvio-table-columns-handle {
		flex: 0 0 auto;
		margin-right: 10px;
		padding: 4px 2px;
		color: #bbb;
		cursor: move;
	}

	.aduvio-table-columns-item:hover .aduvio-table-columns-handle {
		color: #888;
	}

	.aduvio-table-columns-pin {
		flex: 0 0 auto;
		margin-right: 10px;
		padding: 4px 2px;
		color: #bbb;
		cursor: default;
	}

	.aduvio-table-columns-item label.checkbox {
		flex: 1 1 auto;
		margin-bottom: 0px;
		min-height: 27px;
	}

	.aduvio-table-columns-locked-icon {
		flex: 0 0 auto;
		margin-left: 6px;
		font-size: 11px;
		color: #999;
	}

	/*Dropped in by jQuery UI sortable - the gap the row being dragged would land in*/
	.aduvio-table-columns-placeholder {
		margin-bottom: 4px;
		border: 1px dashed #bbb;
		border-radius: 3px;
		background: #f5f5f5;
	}

	.aduvio-table-columns-list .ui-sortable-helper {
		border-color: #bbb;
	}

/* CSV export field picker - borrows the table columns picker's rows, see AduvioExport::fieldsPicker() */
	#aduvio-export-modal .aduvio-export-fields-list {
		max-height: 45vh;
		overflow-y: auto;
		overflow-x: hidden;
	}

	#aduvio-export-modal .aduvio-export-fields-controls {
		margin-bottom: 10px;
	}

	#aduvio-export-modal .aduvio-export-fields-controls p {
		margin: 6px 0px 0px 0px;
		font-size: 12px;
	}

/* Advanced filter - the conditions the user builds up, one block per condition */
	.aduvio-advanced-filter-row {
		margin-bottom: 8px;
		padding: 8px 10px 4px 10px;
		border: 1px solid #e5e5e5;
		border-radius: 5px;
		background: #fafafa;
		border-color: #ddd;
	}

	.aduvio-advanced-filter-row:hover {
		border-color: #81D4FA;
	}

	.aduvio-advanced-filter-row label.select,
	.aduvio-advanced-filter-row label.input {
		margin-bottom: 6px;
	}

	/*Between - the two inputs read as one range*/
	.aduvio-advanced-filter-value-join {
		display: block;
		margin-bottom: 6px;
		font-size: 11px;
		color: #999;
	}

	.aduvio-advanced-filter-remove {
		float: right;
		font-size: 11px;
		color: #999;
	}

	.aduvio-advanced-filter-remove:hover {
		color: #d9534f;
	}

	.aduvio-advanced-filter-empty {
		color: #999;
	}

/* Gallery element - the thumbnails AduvioGallery renders, see php/gallery/fetch-gallery-rem.php */
	.aduvio-gallery-hint {
		margin: 0px 0px 10px 0px;
		font-size: 12px;
		color: #999;
	}

	.aduvio-gallery-list {
		list-style: none;
		margin: 0px;
		padding: 0px;
		display: flex;
		flex-wrap: wrap;
	}

	/*Fixed width tiles so the grid stays even however wide the images themselves are*/
	.aduvio-gallery-item {
		position: relative;
		width: 140px;
		margin: 0px 10px 10px 0px;
		padding: 5px;
		border: 1px solid #e5e5e5;
		border-radius: 3px;
		background: #fff;
		cursor: move;
	}

	.aduvio-gallery-item:hover {
		border-color: #ccc;
	}

	.aduvio-gallery-item-thumb {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 110px;
		overflow: hidden;
	}

	.aduvio-gallery-item-thumb img {
		max-width: 100%;
		max-height: 110px;
		/*Nothing on the tile is a drop target, and the browser's own image drag fights the sortable*/
		pointer-events: none;
	}

	.aduvio-gallery-item-missing {
		font-size: 11px;
		text-align: center;
		color: #999;
	}

	/*Held out of the sortable so the icons still click - see AduvioGallery.initSortable*/
	.aduvio-gallery-item-actions {
		position: absolute;
		top: 5px;
		right: 5px;
		padding: 2px 5px;
		border-radius: 3px;
		background: rgba(255,255,255,0.85);
		opacity: 0;
		cursor: default;
	}

	.aduvio-gallery-item:hover .aduvio-gallery-item-actions {
		opacity: 1;
	}

	.aduvio-gallery-item-actions a {
		margin-left: 5px;
		color: #888;
	}

	.aduvio-gallery-item-actions a:first-child {
		margin-left: 0px;
	}

	.aduvio-gallery-item-actions a:hover {
		color: #333;
	}

	.aduvio-gallery-item-title {
		margin-top: 5px;
		font-size: 11px;
		text-align: center;
		color: #777;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/*Dropped in by jQuery UI sortable - the gap the thumbnail being dragged would land in*/
	.aduvio-gallery-placeholder {
		width: 140px;
		height: 145px;
		margin: 0px 10px 10px 0px;
		border: 1px dashed #bbb;
		border-radius: 3px;
		background: #f5f5f5;
	}

	.aduvio-gallery-list .ui-sortable-helper {
		border-color: #bbb;
	}

	/*The actions are only reachable by hover, so they stay on where there is no hover*/
	@media (hover: none) {
		.aduvio-gallery-item-actions {
			opacity: 1;
		}
	}

/* Photo gallery - the page-sized version of the element above, see AduvioGallery::photos() */
	/*The tile the record's main image sits on, so it reads as the chosen one at a glance*/
	.aduvio-photos-item-main {
		border-color: #5cb85c;
	}

	.aduvio-photos-main-label {
		position: absolute;
		top: 5px;
		left: 5px;
	}

	/*Held out of the sortable so it still clicks - see AduvioGallery.initPhotosSortable*/
	.aduvio-photos-main-btn {
		width: 100%;
		margin-top: 5px;
		cursor: pointer;
	}

/* Bulk actions */
	.bulk-action-selector-cell {
		display: none;
		color: #333;
	}

	#bulk-action-heading-cell {
		display: none;
	}

/*Legend */

.aduvio-legend {
	margin-bottom: 10px;
}

.aduvio-legend-swatch {
	height: 11px;
  width: 11px;
  display: block;
  float: left;
  margin-right: 6px;
  margin-top: 4px;
}

@media (max-width:975px){
	.mobile-settings-tab-selector-container {
		display: block;
		margin-bottom: 20px;
	}
}

.panel-change-label {
	font-size: 10px;
	padding: 5px 7px;
	position: relative;
	top: -10px;
}

@media screen and (max-width: 975px) {
	.panel-change-label {
		top: 4px;
	}

	.settings_menu_container {
		display: none;
	}

}

@media (min-width:768px){

	#side-menu-container .side-nav li span {
		display: none;
    -moz-transition: display 0.5s ease;
    -o-transition: display 0.5s ease;
    -webkit-transition: display 0.5s ease;
    transition: display 0.5s ease;	}

	#side-menu-container .side-nav {
		left: 60px;
		width: 60px;
		margin-left: -60px;
		/* Above the pinned save bar (.aduvio-save-bar.is-floating, 1030), which spans
		   the scroll area from the rail's edge, so the rail slides over it when it opens.
		   The rail starts below the fixed navbar, so they never overlap. */
		z-index: 1031;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease
	}

	#wrapper {
		padding-left: 60px;
	}

	/* :focus-within and :has() alongside :hover so the rail is usable without a mouse.
	   Tapping a menu item on a tablet focuses it, and a parent item that has been opened
	   keeps the rail out while its submenu is on screen. */
	#side-menu-container .side-nav:hover li span,
	#side-menu-container .side-nav:focus-within li span {
		display: inline !important;
	}

	#side-menu-container .side-nav:has(.nav-sub-nav.in) li span,
	#side-menu-container .side-nav:has(.nav-sub-nav.collapsing) li span {
		display: inline !important;
	}



	#side-menu-container .side-nav:hover,
	#side-menu-container .side-nav:focus-within {
		width: 225px !important;
		left: 225px !important;
		margin-left: -225px !important;
	}

	#side-menu-container .side-nav:has(.nav-sub-nav.in),
	#side-menu-container .side-nav:has(.nav-sub-nav.collapsing) {
		width: 225px !important;
		left: 225px !important;
		margin-left: -225px !important;
	}

	.navbar-nav > li > a {
		padding-top: 10px !important;
		padding-top: 10px !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	/* Compact side menu: Bootstrap's navbar-nav gives a top level row 15px above and below a 20px
	   line, and sb-admin.css gives a sub item 10px each way. Tighter rows fit more of the menu
	   on screen before it needs to scroll. The rail icon stays centred in its 60px column. */
	.side-nav > li > a {
		padding-top: 9px !important;
		padding-bottom: 9px !important;
		line-height: 20px;
		font-size: 14px;
	}

	.side-nav > li > ul > li > a {
		padding: 8px 15px 8px 20px !important;
		line-height: 20px;
		font-size: 14px;
	}

	.side-nav .nav-sub-nav {
		background: #f8f8fe !important;
	}

	#wrapper {
    -moz-transition: padding-left 0.5s ease;
    -o-transition: padding-left 0.5s ease;
    -webkit-transition: padding-left 0.5s ease;
    transition: padding-left 0.5s ease;
	}
}

/* AduvioForm::textArea() emoji-picker option */
.aduvio-emoji-picker-anchor { position: relative; }
.aduvio-emoji-picker-btn { margin-top: -2px; }
.aduvio-emoji-picker-panel {
	position: absolute;
	z-index: 1060;
	top: 100%;
	right: 0;
	margin-top: 4px;
	width: 260px;
	max-height: 180px;
	overflow-y: auto;
	padding: 6px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.aduvio-emoji-picker-panel .aduvio-emoji-option {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
	border-radius: 3px;
}
.aduvio-emoji-picker-panel .aduvio-emoji-option:hover { background: #f0f0f0; }




/*Kanban board*/

/*? A board scrolls sideways rather than wrapping its columns onto a second row - a pipeline reads
   left to right, and there are as many columns as the client has statuses or salespeople*/
.aduvio-kanban-board {
	display: flex;
	align-items: flex-start;
	overflow-x: auto;
	padding-bottom: 10px;
}

.aduvio-kanban-column {
	flex: 0 0 280px;
	width: 280px;
	margin-right: 10px;
}

.aduvio-kanban-column .panel {
	margin-bottom: 0px;
}

.aduvio-kanban-column .panel-heading {
	font-weight: 600;
}

.aduvio-kanban-column-total {
	font-size: 12px;
	font-weight: normal;
	opacity: 0.85;
}

/*A column with nothing in it still has to be big enough to drop a card into*/
.aduvio-kanban-column-body {
	min-height: 90px;
	padding: 10px;
}

/*? A column that stands for something no drop could set - the opportunities board's recent wins,
   which are the `converted` column rather than a status. js/opportunities/view.js leaves it out of
   the sortable, so its cards never pick up the move cursor either; the tint is what says so before
   anyone tries to drag one.*/
.aduvio-kanban-column-static {
	background: #fafafa;
}

.aduvio-kanban-column-empty {
	text-align: center;
	padding: 20px 0px;
	font-size: 12px;
}

/*Only there while the column is empty - a card, or the gap one is about to drop into, replaces it*/
.aduvio-kanban-column-empty:not(:only-child) {
	display: none;
}

.aduvio-kanban-card {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 8px 10px;
	margin-bottom: 8px;
	overflow: hidden;
}

.aduvio-kanban-card:hover {
	border-color: #bbb;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
}

/*jQuery UI marks the items it made draggable, so a read-only board keeps the plain pointer*/
.aduvio-kanban-card.ui-sortable-handle {
	cursor: move;
}

.aduvio-kanban-card-title {
	font-weight: 600;
	margin-bottom: 3px;
	word-break: break-word;
}

.aduvio-kanban-card-party {
	font-size: 12px;
	color: #777;
	margin-bottom: 3px;
}

.aduvio-kanban-card-amount {
	font-weight: 600;
	margin-bottom: 5px;
}

.aduvio-kanban-card-footer {
	font-size: 12px;
	overflow: hidden;
}

.aduvio-kanban-card-date {
	float: right;
	padding-top: 2px;
}

.aduvio-kanban-card-edit {
	margin-left: 5px;
	color: #777;
}

/*The gap the card being dragged will drop into*/
.aduvio-kanban-card-placeholder {
	border: 2px dashed #ccc;
	border-radius: 3px;
	background: #f7f7f7;
	margin-bottom: 8px;
	visibility: visible !important;
}


/*sm break point and smaller in Bootstrap 3. 767px, not 768 - at exactly 768px the
  desktop layout is already running, and an iPad in portrait is exactly 768px wide.*/
@media(max-width:767px) {

	.mobile-hidden {
		display: none !important;
	}

	#top-right-nav {
		padding: 0px 5px;
	}

	.sm-pull-left {
		float: left !important;
	}

}

/* AduvioForm::textArea() ai-prompt option (magic wand) */
.aduvio-ai-prompt-anchor { position: relative; }
.aduvio-ai-prompt-btn { margin-top: -2px; margin-left: 4px; }
#aduvio-ai-prompt-modal .note { margin-top: 6px; }

/* AduvioForm::textArea() dictate option (microphone) - see js/_classes/aduviodictation.js */
.aduvio-dictate-btn { margin-top: -2px; margin-left: 4px; }
.aduvio-dictate-btn .aduvio-dictate-timer { font-variant-numeric: tabular-nums; }
.aduvio-dictate-btn.is-recording,
.aduvio-dictate-btn.is-recording:hover,
.aduvio-dictate-btn.is-recording:focus {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
	animation: aduvio-dictate-pulse 1.4s ease-in-out infinite;
}
@keyframes aduvio-dictate-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(217, 83, 79, .55); }
	70%  { box-shadow: 0 0 0 7px rgba(217, 83, 79, 0); }
	100% { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.aduvio-dictate-btn.is-recording { animation: none; }
}

/* Relationships panel
   The typed associations panel core drops onto a detail page - see AduvioRelationshipDisplay.
   Grouped by what the relationship IS, so each group needs a header the plain list-group has no
   element for. */

.aduvio-relationships-panel .list-group {
    margin-bottom: 0px;
}

.aduvio-relationships-panel .list-group-header {
    padding: 6px 15px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888;
    background: #f7f7f7;
    border-bottom: 1px solid #ddd;
}

.aduvio-relationships-panel .aduvio-relationship-group + .aduvio-relationship-group .list-group-header {
    border-top: 1px solid #ddd;
}

.aduvio-relationships-panel .list-group-item {
    border-left: 0px;
    border-right: 0px;
    border-radius: 0px;
}

/* A link that has been retired rather than removed. Kept legible - it is history, not an error. */
.aduvio-relationships-panel .aduvio-relationship-ended {
    background: #fbfbfb;
    color: #999;
}

.aduvio-relationship-actions a {
    cursor: pointer;
    color: #999;
}

.aduvio-relationship-actions a:hover {
    color: #333;
}

.aduvio-relationship-search-result {
    cursor: pointer;
}

.aduvio-relationship-search-result:hover {
    background: #f5f5f5;
}

/* The Show all row that closes a capped relationship group, and the panel's split Add control.
   A group is capped rather than the panel paged - see AduvioRelationshipDisplay::rows(). */

.aduvio-relationships-panel .aduvio-relationship-show-all {
    padding: 6px 15px;
    background: #fbfbfb;
}

.aduvio-relationships-panel .aduvio-relationship-show-all a {
    cursor: pointer;
    font-size: 12px;
    color: #777;
}

.aduvio-relationships-panel .aduvio-relationship-show-all a:hover {
    color: #333;
}

/* The heading's dropdown sits above the rows below it, which are inside their own stacking
   context once a row is hovered. */
.aduvio-relationships-panel .panel-heading .btn-group {
    position: relative;
    z-index: 2;
}

.aduvio-relationships-panel .panel-heading .dropdown-menu a {
    cursor: pointer;
}

/* A field just filled by the driver's licence scanner - AduvioForm::driversLicenseField().*/
.aduvio-field-scanned,
.sky-form .aduvio-field-scanned {
    background-color: #fff9db;
    border-color: #f0c36d;
    transition: background-color .4s ease-out, border-color .4s ease-out;
}


/* Save bar -------------------------------------------------------------------
   Printed by AduvioForm::saveBarOpen()/saveBarClose(), which wrap the container
   below around a page's whole form so the Save button can be reached from
   anywhere on it. Only the save group moves - the action row and whatever
   buttons the page put on the left of it stay where they were. The bar has
   three positions and js/_classes/aduviosavebar.js picks between them as the
   page scrolls:

     no class     in the flow, at the right of the action row
     .is-floating pinned across the top of the scroll area
     .is-docked   parked at the bottom right of the container, under the form

   The two out-of-flow states are why the markup has a slot around the bar: the
   slot keeps the bar's size in the flow, so taking the bar out of it cannot
   collapse the action row - and, just as importantly, cannot change the
   measurements the script is deciding from and start flapping between states.

   position:sticky would give the first two states on its own, but not the
   third: a sticky element only comes back down when its container's bottom
   passes it, and the form is the last thing on the page, so that never happens.

   The container's bottom padding is where .is-docked lands. It has to stay at
   least as tall as the bar. */
.aduvio-save-bar-container {
	position: relative;
	/* the bar, plus a gap between it and the bottom of the form */
	padding-bottom: 60px;
}

.aduvio-save-bar-row:before,
.aduvio-save-bar-row:after {
	content: " ";
	display: table;
}

.aduvio-save-bar-row:after {
	clear: both;
}

/* The same padding on both sides of the row so the page's own buttons line up
   with the save group, which carries it in order to keep its height identical
   pinned and unpinned */
.aduvio-save-bar-buttons {
	float: left;
	padding: 8px 0;
}

.aduvio-save-bar-slot {
	float: right;
}

.aduvio-save-bar {
	padding: 8px 0;
	text-align: right;
	/* The slot is held open at the width the script measured, so a group that turns out
	   even a pixel wider than that would break its second button onto a line of its own.
	   The bar only ever holds the one group, so it is simply never allowed to wrap. */
	white-space: nowrap;
}

/* white-space above does not reach inside a Bootstrap 3 button group - its buttons
   are floated, and a float wraps whatever the white-space rule says. So the group
   is laid out as a flex row instead, which keeps the split save button on one line
   even if the slot around it ends up a fraction of a pixel short. Bootstrap's own
   rules still apply: float is ignored on a flex item, and the -1px that laps the
   borders is a margin, which is not. */
.aduvio-save-bar .btn-group {
	display: inline-flex;
	flex-wrap: nowrap;
}

.aduvio-save-bar-buttons .btn,
.aduvio-save-bar .btn {
	margin-bottom: 0;
}

/* Pinned. top/left/width and the side padding are written by the script from
   the scroll area it measured, so the bar spans the whole of it and the save
   group still sits over the same spot it does in the row. */
.aduvio-save-bar.is-floating {
	position: fixed;
	/* the same layer as the fixed navbar, which is above this bar and never
	   overlaps it, and below the datepicker (1060) and the fixed footer (1035) */
	z-index: 1030;
	background: #ffffff;
	border-bottom: 1px solid #ddd;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
}

/* Parked under the form, in the container's bottom padding */
.aduvio-save-bar.is-docked {
	position: absolute;
	right: 0;
	bottom: 0;
}

/* Bootstrap 3 only styles anchors in a dropdown, and the save group's other
   choices have to be real buttons to carry their own posted value. Same rules,
   minus the ones an anchor gets for free.

   The class was named for the save bar, which is no longer the only thing that
   prints this menu - AduvioForm::saveButtons() prints it in modal footers too.
   Both names are listed while the old one is still in the wild. */
.dropdown-menu > li > .aduvio-save-menu-item,
.dropdown-menu > li > .aduvio-save-bar-menu-item {
	display: block;
	width: 100%;
	padding: 3px 20px;
	clear: both;
	font-weight: normal;
	line-height: 1.42857143;
	color: #333333;
	text-align: left;
	white-space: nowrap;
	background: none;
	border: 0;
}

.dropdown-menu > li > .aduvio-save-menu-item:hover,
.dropdown-menu > li > .aduvio-save-menu-item:focus,
.dropdown-menu > li > .aduvio-save-bar-menu-item:hover,
.dropdown-menu > li > .aduvio-save-bar-menu-item:focus {
	color: #262626;
	text-decoration: none;
	background-color: #f5f5f5;
}

/* The save group AduvioForm::saveButtons() prints - one button, or a split one
   carrying the other choices. Inline-block so it sits where a plain button sat,
   in a modal footer or anywhere else. Inside the save bar the .btn-group rule
   above wins on specificity and lays it out as a flex row instead. */
.aduvio-save-group {
	display: inline-block;
}

/* Bootstrap 3 puts 5px between every pair of buttons in a modal footer, which is
   right for two separate buttons and wrong inside a split one - it pushes the
   caret off the save button. The group gets that gap on the outside instead, and
   the -1px that laps the two halves' borders is put back. */
.modal-footer .aduvio-save-group {
	margin-left: 5px;
}

.modal-footer .aduvio-save-group.btn-group .btn + .btn {
	margin-left: -1px;
}

/* Permission grids (admins/admin-groups/user-groups/modules rights tables).
   Was copy-pasted as an inline <style> block into every permissions view. */
tbody .fa-check {
	color: #393;
}

tbody .fa-times {
	color: #F00;
}

/* Was copy-pasted inline as style="padding: 15px;" around AduvioDisplay::loadingImage(). */
.loading-placeholder {
	padding: 15px;
}

/* BS3 ships no spacing/sizing utilities; these replace one-off inline styles. */
.mb-0 {
	margin-bottom: 0;
}

.mt-10 {
	margin-top: 10px;
}

.w-100 {
	width: 100% !important;
}

.chart-container-sm {
	height: 260px;
}

.chart-container-md {
	height: 300px;
}

.chart-container-lg {
	height: 320px;
}

/*? Anything picked up with the mouse - one look for every drag and drop in the panels. jQuery UI puts
   .ui-sortable-helper on the item a sortable is moving and .ui-draggable-dragging on the one a
   draggable is (the clone, where a module drags a copy), so this covers both without a module having
   to opt in. It lifts, tilts to the right and throws a shadow so it is plain the item has been grabbed.
   Modals are draggable by their header but are not something that should tilt.*/
.ui-sortable-helper,
.ui-draggable-dragging:not(.modal) {
	transform: scale(1.03) rotate(3deg) !important;
	box-shadow: 0px 10px 24px rgba(0,0,0,0.28) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/*Browsers do not paint a box-shadow on a table row, so a row being dragged gets the shadow as a filter*/
tr.ui-sortable-helper,
tr.ui-draggable-dragging {
	box-shadow: none !important;
	filter: drop-shadow(0px 10px 12px rgba(0,0,0,0.28));
}