/*
 *
 * Variables
 *
 */
:root {
  --color-main: #17629E;
	--color-secondary: #716C53;
  --shade-light: #BDBDBD;
	--shade-light-2: #F2F2F2;
}

.sacom-button,
.sacom-admin-form input[type=submit] {

	background: #FFF;
	color: #616161;
	font-size: 1.3em;
	padding: 12px 25px;
	cursor: pointer;
	border: solid 1px #FFF;

}

.sacom-button svg {

	width: 24px;
	margin-right: 1.5em;

}

.sacom-button svg path {
	fill: #2271B1;
}

.sacom-field-group {
	margin: 0.5em 0;
	padding: 0.5em 0;
}

.sacom-field-group label {
	display: block;
	margin: 0.25em 0;
}

.sacom-field-group input,
.sacom-field-group select {
	min-width: 120px;
	padding: 5px 6px;
}

.sacom-save-button {
	background: #449D48;
	width: 100%;
	font-weight: 600;
	font-size: 1.8em;
	border: none;
}

.sacom-save-button:hover {
	background: #049e0c;
}

/*
 * Editor Messages
 */

#editor-message-container {

	position: absolute;
	top: 0;
	left: 0;
	width: calc( 100% - 42px );
	height: 42px;
	box-sizing: border-box;
	background: #D4D4D4;
	font-size: 1.5em;
	margin: 0 0 0 0;
	padding: 12px 20px 12px 20px;
	line-height: 1.20em;
	color: #FFF;
	border-radius: 8px 0 0 0;

}

#sacom-editor-mode-menu button {
	background: #CBCBCB;
}

#sacom-editor-mode-menu button:hover {
	background: #1b5a8d;
}

#sacom-editor-mode-menu button.active {
	background: #2271B1;
}

#sacom-page-header {
	background: #FFF;
	color: #353535;
	font-size: 1.0em;
	margin: 0 0 0 -20px;
	padding: 0 10px 0 20px;
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	justify-items: end;
	align-items: center;
	grid-gap: 15px;
}

#sacom-page-header > div {

}

#sacom-page-header button,
.sacom-page-header-button {

	display: flex;
	align-items: center;
	background: #FFF;
	color: #616161;
	border: solid 1px #D8D8D8;
	font-size: 1.00em;
	font-weight: 500;
	padding: 8px 12px;

}

#sacom-page-header button:hover,
.sacom-page-header-button:hover {

	border-color: var(--color-secondary);

}

.sacom-header-breadcrumbs {
	font-size: 1.1em;
	font-weight: 400;
	color: #858585;
	margin: 0.5em 0 0.5em 0;
}

#sacom-page-subheader {

	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #807F73;
	padding: 2.0em 20px 2.0em 20px;
	margin: 0 0 3.0em -20px;
	color: #E1E1E1;
	font-size: 1.1em;
	align-items: center;

}

#sacom-page-subheader .sacom-button {

	display: flex;
	align-items: center;
	background: none;
	border: solid 1px #FFF;
	font-size: 1.1em;
	font-weight: 500;
	color: #FFF;
	padding: 4px 10px;

}

#sacom-page-subheader .sacom-button:hover {

	background: #FFFFFF17;

}

#sacom-page-subheader .sacom-button svg path {

	fill: #FFF;

}

#sacom-subheader-right {

	display: flex;
	justify-self: end;
	gap: 15px;

}

/*
 *
 * Admin Editors
 *
 */
#sacom-editor-grid {

	width: calc( 100% - 20px );
	position: relative;
	border: solid 2px #D4D4D4;
	padding: 1.0em;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 20px 0 0;
	box-shadow: 2px #000;
	border-radius: 0.75em;
	background: #FFF;

}

#sacom-editor-overlay-close {

	background: #D4D4D4;
	width: 22px;
	height: 22px;
	position: absolute;
	top: 0px;
	right: 0px;
	cursor: pointer;
	padding: 10px;

}

#sacom-editor-overlay-close svg path {

	fill: #FFF;

}

#sacom-header-logo {

	cursor: pointer;
	justify-self: left;

}

#sacom-header-logo svg {

	max-width: 150px;

}

/* Object Lists */

#sacom-object-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 2.5em;
	margin: 0 20px 0 0;
}

/* Object List Cards */

.sacom-card {

	padding: 0.7em 0.7em 0 0.7em;
	background-color: #DDDDD9;
	cursor: pointer;

}

.sacom-card-header {

	font-size: 1.35em;
	font-weight: 500;
	color: #B5B5B5;
	margin-bottom: 0;
	text-align: right;

}

.sacom-card-footer {
	background-color: #2271B1;
	margin: 1.0em -0.7em 0 -0.7em;
	padding: 0.7em;
	color: #FFFFFF;
	display: flex;
}

#editor-grid-body {

	display: grid;
	grid-template-columns: 4fr 7fr;
	grid-gap: 110px;
	padding: 60px 2.0em 2.0em 2.0em;

}

#editor-grid-body.sacom-editor-grid-single-col {

	grid-template-columns: 1fr;

}

/* Editor Stat Display */

.sacom-stat {
	text-align: center;
	color: #6D6D6D;
	margin: 3.8em 0;
}

.sacom-stat h2 {
	font-size: 3.8em;
	font-weight: 600;
	margin: 0.5em 0 0.5em 0;
	color: #6D6D6D;
}

.sacom-stat h4 {
	font-size: 1.2em;
	font-weight: 400;
	margin: 0.25em 0 0.25em 0;
	color: #6D6D6D;
}

/*
 * Big Text Fields
 * Used for title or label fields in editor usually
*/
.sacom-big-text-field {
	font-size: 2.5em;
	padding: 0.2em 0.4em;

}

/* Child object edit form. */
/* Editor Child Objects */
.sacom-editor-child-object-form {
	display: none;
}


/* Editor List Filters */

.sacom-filters {
	width: 200px;
	display: grid;
	grip-gap: 1em;
	grid-template-columns: 1fr 1fr;
}

.sacom-filters h3 {
	font-size: 1.2em;
	font-weight: 600;
	color: #546471;
	cursor: pointer;
	margin: 0 0 2.0em 0;
}

.sacom-filters h3.active {
	font-weight: 700;
}

/* Child Object List Styles */

.sacom-add-child-object-button {

	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #999780;
	padding: 0.7em 0.5em;
	border: none;
	cursor: pointer;
	font-size: 1.35em;
	color: #FFF;
	align-items: center;

}

.sacom-add-child-object-button:hover {
	background: #8B8975;
}

.sacom-add-child-object-button svg {
	width: 32px;
}

.sacom-add-child-object-button span:first-child {
	text-align: left;
}

.sacom-add-child-object-button span:last-child {
	text-align: right;
}

.sacom-editor-child-object-list {

	border-top: solid 8px #828282;
	margin: 2.5em 0 0 0;

}

/*
 * Big Selectors
 */

.sacom-editor-big-selector {

	position: relative;
	background: #C4C4C4;
	max-width: 100%;
	margin: 1.0em 0;
	padding: 20px 20px 0 20px;

}

/* Big selectors initially have their select field hidden until the user clicks to activate the field into selection mode. */
.sacom-editor-big-selector select, .sacom-editor-big-selector .select2-container {
	display: none;
}

.sacom-editor-big-selector select {

	position: absolute;
	top: 50px;
	left: 20px;

}

.sacom-editor-big-selector h2 {

	position: absolute;
	top: 70px;
	left: 20px;

}

.sacom-editor-big-selector svg {
	margin: 0 0 1.0em 0;
}

.sacom-editor-big-selector svg path {
	fill: #ACACAC;
}

.sacom-editor-big-selector h3 {
	background: #2271B1;
	margin: 0 -20px;
	font-size: 1.2em;
	font-weight: 500;
	text-align: center;
	color: #FFF;
	padding: 15px 20px;
}

/* Existing value display. */
.sacom-editor-big-selector h2 {

	text-align: center;
	font-size: 1.5em;
	color: #252525;

}


.sacom-cursor-pointer {
	cursor: pointer;
}

.child-object-context-menu {

	cursor: pointer;
	position: relative;

}

.child-object-context-menu ul {

	position: absolute;
	top: 30px;
	left: 0;
	background: #17629E;
	color: #FFF;
	padding: 0px 0px;
	list-style: none;
	display: none;
	z-index: 100;
	font-size: 1.2em;
	font-weight: 500;

}

.child-object-context-menu li {

	margin: 0;
	padding: 10px 12px;
	opacity: 0.7;

}

.child-object-context-menu li:hover {

	opacity: 1;

}

.child-object-context-menu svg {

	width: 24px;

}

.child-object-delete-button {

}


.sacom-editor-child-object-save-button {
	background: #2271B1;
	color: #FFF;
	padding: 0.7em 1.0em;
	cursor: pointer;
	text-align: right;
	border: none;
	font-size: 1.25em;
	font-weight: 500;
	display: grid;
	grid-template-columns: 2fr 4fr;
	grid-gap: 2.5em;
	align-items: center;
}

.sacom-editor-child-object-save-button:hover {
	background: #115892;
}

.sacom-editor-child-object-save-button svg {
	width: 24px;
}



.sacom-editor-child-object-list li .child-object-list-item-body {

	display: grid;
	grid-template-columns: 3fr 2fr;
	cursor: pointer;
	color: #9A9A9A;
	align-items: center;

}


.child-object-save-row {

	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 50px 0 25px 0;

}

.sacom-editor-child-object-cancel-button {
	font-size: 0.95em;
	padding: 0.15em;
	width: 120px;
	background: none;
	border: solid 1px #F2F2F2;
	color: #C7C7C7;
	cursor: pointer;
}

.sacom-editor-child-object-cancel-button:hover {
	border: solid 1px #D3D3D3;
}

.child-object-list-item-body h3 {
	margin: 0 !important;
	padding: 0;
}

.child-object-list-item-body h4 {
	font-size: 1.8em;
	margin: 0;
	padding: 0;
	justify-self: end;
}

.sacom-editor-child-object-list > ul > li {
	margin: 25px 0;
	padding: 25px 0;
	border-bottom: solid 1px #F5F5F5;
}

.sacom-text-large {
	font-size: 3.0em;
}



/* Dashboard */

#sacom-dashboard {
	background: #FFF;
	margin-left: -20px;
	padding: 0;
}

/* Dashboard > Header */

#sacom-dashboard-header {

	display: grid;
	grid-template-columns: 2fr 2fr 8fr;
	margin: 0;
	padding: 5px 20px 5px 20px;
	border-bottom: 6px solid #807F73;
	align-items: center;
	grid-gap: 30px;

}

/* Dashboard > Stats */

.sacom-dashboard-stat {

	margin: 0;
	max-width: 100px;

}

.sacom-dashboard-stat h2 {

	margin: 0 auto;
	text-align: center;
	font-size: 2.2em;
	padding: 40px 0 0 0;
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #2271B1;
	color: #FFF;

}

.sacom-dashboard-stat h4 {

	margin: 10px auto;
	font-size: 1.2em;
	font-weight: 500;
	text-align: center;
	color: #7A7A7A;

}

.sacom-dashboard-grid {

	background: #F3F3F3;
	max-width: 1280px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 15px;
	padding: 15px;

}

.sacom-dashboard-grid-item {

	display: grid;
	grid-template-columns: 1fr;
	padding: 0 20px 20px 20px;
	background: #FFF;

}

.sacom-dashboard-grid-item-header {

	display: grid;
	grid-template-columns: 1fr 2fr;
	height: 45px;
	background-color: #E8E8E8;
	margin: 0 -20px 30px -20px;
	padding: 0 6px;
	align-items: center;
	border-bottom: solid 1px var(--shade-light-2);

}

.sacom-dashboard-grid-item-header h2 {

	justify-self: end;
	color: var(--shade-light);
	font-size: 1.2em;

}

.sacom-dashboard-grid-item-header svg {

	max-width: 25px;
	max-height: 25px;

}

.sacom-dashboard-grid-item-header svg path {

	fill: var(--shade-light);

}

.sacom-dashboard-grid-item-body {

	display: grid;
	grid-template-columns: 150px auto;
	grid-gap: 40px;
	margin: 0 0 40px 0;

}

.sacom-dashboard-grid-item-footer {

	display: grid;
	justify-items: end;
	align-self: end;
	margin: 20px 0 0 0;
	background-color: #FFF;
	color: #FFF;

}

.sacom-dashboard-button {

	font-size: 1.1em;
	text-align: center;

}

.sacom-dashboard-button a {

	display: inline-block;
	width: auto;
	text-decoration: none;
	background: #609FE3;
	color: #FFF;
	font-size: 0.9em;
	font-weight: 500;
	padding: 9px 15px;
	box-sizing: border-box;
	text-align: center;

}

.sacom-dashboard-button a:hover {

	background: #2271B1;

}

#sacom-dashboard-help {

	justify-self: end;

}

.sacom-dashboard-title {

	border-left: solid 3px var(--shade-light-2);
	padding-left: 12px;

}

.sacom-dashboard-title h2 {

	color: var(--color-main);
	font-size: 1.7em;
	font-weight: 500;
	line-height: normal;
	margin: 0;

}

.sacom-dashboard-title h5 {

	color: var(--shade-light);
	margin: 0;
	font-size: 1.1em;
	font-weight: 400;

}

#dashboard-footer {

	display: grid;
	grid-template-columns: 1fr;
	background: #CCC;
	margin: 50px 20px 20px 20px;

}

#dashboard-footer > div {

	color: #FFF;
	font-size: 2.0em;
	font-weight: 500;
	cursor: pointer;
	line-height: normal;

}

#dashboard-footer > div:hover {

	opacity: 0.9;

}

#dashboard-footer > div > svg {
	max-width: 64px;
	display: block;
}

.dashboard-footer-settings {

	background: #2271B1;
	color: #FFF;
	font-size: 0.95em;
	font-weight: 400;
	padding: 30px 50px;
	display: grid;
	grid-template-columns: 1fr 2fr;
	align-items: center;

}

.dashboard-footer-settings span {

	justify-self: end;

}

.dashboard-footer-settings svg {

	width: 54px;
	margin-right: 12px;

}

.dashboard-footer-donate {

	background: #B18922;
	padding: 30px 50px;
	display: grid;
	grid-template-columns: 1fr 2fr;
	align-items: center;
	justify-items: end;

}

.dashboard-footer-donate span {

	justify-self: start;
	margin-left: 12px;
	font-size: 0.9em;
	font-style: italic;

}

.dashboard-footer-donate svg {

	width: 32px;

}

.dashboard-footer-support {

	background: #CACACA;
	color: #FFF;
	font-size: 2.0em;
	font-weight: 500;
	padding: 50px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 40px;
	align-items: center;

}

.dashboard-footer-support span {

	justify-self: end;

}

.dashboard-footer-support svg {

	width: 70px;

}

#dashboard-footer-row-1 {

	display: grid;
	grid-template-columns: 4fr 5fr;

}

.dashboard-footer-review {

	background: #999780;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 40px;
	align-items: center;
	padding: 50px;

}

.dashboard-footer-review .dashboard-footer-review-stars {

	justify-self: end;

}

.dashboard-footer-review svg {

	width: 30px;
	margin: 0 6px;

}

.sacom-breadcrumbs a {
	color: #FFF;
	text-decoration: none;
}

.sacom-breadcrumbs a:hover {
	color: #F2F2F2;
}

.dashboard-latest-list ul,
.dashboard-latest-list li {

	margin: 0;
	padding: 0;

}

.dashboard-latest-list li {

	font-weight: 500;
	font-size: 1.2em;
	margin: 0;
	padding: 0.8em 0;
	border-bottom: solid 1px #F3F3F3;
	cursor: pointer;

}

.sacom-form-row {

	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 2em;
	margin: 35px 0;

}

.sacom-form-row .sacom-field-group input,
.sacom-form-row .sacom-field-group select {
	width: 100%;
}

.sacom-form-row-block {
	width: 100%;
}

.sacom-form-row-block .sacom-field-group input {
	width: 100%;
}

.sacom-info-table {

	width: 100%;
	max-width: 600px;
	min-width: 240px;
	font-size: 1.4em;
	font-weight: 500;
	color: #353535;

}

.sacom-info-table td {

	padding: 6px 16px;

}

.sacom-info-table td:first-child {

	text-align: right;

}

.sacom-editor-title-field {

	font-size: 2.8em;
	color: #686868;
	padding: 0.20em 0.30em;
	margin: 0 0 1.0em 0;
	border: solid 1px #E8E8E8;

}

/* Dashboard Responsive */
@media only screen and (max-width: 720px) {

	#sacom-dashboard-header {

		grid-template-columns: 3fr 2fr;
		min-width: 320px;

	}

	#sacom-dashboard-help {

		display: none;

	}

	.sacom-dashboard-grid {

		grid-template-columns: 1fr;

	}

	#dashboard-footer-row-1 {

		grid-template-columns: 1fr;

	}

}

label {

	display: block;

}

input {

	display: block;

}

.sacom-form-field {

	margin: 30px 0;

}

.sacom-form-field label {

	font-weight: 500;
	color: #D8D8D8;
	font-size: 1.2em;
	line-height: 1.2em;
	margin-bottom: 4px;

}

.sacom-form-field input {

	padding: 7px 5px;
	font-size: 1.2em;
	min-width: 200px;

}

/* Settings Toggle Fields */

.sacom-setting-toggle {
	display: flex;
}

.sacom-setting-toggle > div {
	cursor: pointer;
	padding: 15px 25px;
	background: #AEAEAE;
	color: #FFF;
	min-width: 120px;
	text-align: center;
}

.sacom-setting-toggle > div:hover {
	background: #DDD;
}

.sacom-setting-toggle > div.selected {
	background: #2271B1;
}