/*
 * Settings Menu
 * AKA ".sacom-sidenav"
 */
.sacom-setting-page {
	display: none;
}

.sacom-sidenav {
	background: #F6F6F6;
	color: #767676;
	min-width: 220px;
	max-width: 320px;
}

.sacom-sidenav li {
	margin: 0;
	padding: 1.0em 0.5em;
	border-bottom: solid 1px #D7D7D7;
	cursor: pointer;
	font-size: 1.15em;
}

.sacom-sidenav li.active {
	background: #4391CF;
	color: #FFF;
}

.sacom-sidenav li:hover {
	background: #2271B1;
	color: #FFF;
}

.sacom-sidenav li:last-child {
	border-bottom: none;
}

/* 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;
}

/* Form fields. */
.sacom-setting-page label {
	display: block;
	margin: 12px 0 6px 0;
}

#sacom-setting-grid {
	display: grid;
	grid-template-columns: 2fr 6fr;
	grid-gap: 40px;
	max-width: 100%;
}

.sacom-save-button {
	margin-top: 50px;
	max-width: 400px;
	color: #FFF;
	cursor: pointer;
	padding: 12px 20px;
}

.sacom-save-button:hover {
	background: #55B259;
}


.sacom-setting-page input {
	width: 400px;
	padding: 10px 15px;
	font-size: 1.2em;
}