/*!
 * Copyright (c) 2024 StyloPress - CodeWS.online
 * This file is part of StyloPress.
 *
 * This file is licensed under the same terms as the main plugin (GNU GPL v2 or later).
 */

.spss-color-scheme-creator-main-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1%;
	justify-content: flex-start;
}

@media (max-width: 960px) {
	.spss-color-scheme-creator-main-container {
		grid-template-columns: 1fr;
	}
}

.spss-color-scheme-creator-container h1.header {
	font-weight: 400;
}

.spss-color-scheme-creator-container form {
	margin-top: 30px;
}

.spss-color-scheme-creator-container .form-table th {
	width: 400px;
}

@media (max-width: 1500px) {
	.spss-color-scheme-creator-container .form-table th {
		width: 250px;
	}
}

.spss-color-scheme-creator-container .description {
	font-weight: 400;
	color: #646970;
	margin: 0;
}

.spss-color-scheme-creator-container p.description span.premium {
	color: red;
}

.spss-wp-simulator-main-container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

@media (max-width: 1200px) {
	.spss-wp-simulator-main-container {
		display: none;
	}
}

.spss-wp-simulator-container {
	display: block;
}

.spss-wp-simulator-admin-wrapper {
	display: flex;
	border: 1px solid black;
}

.spss-wp-simulator-sidebar {
	width: 160px;
	background-color: var(--spss-admin-main-menu-color);
	color: var(--spss-admin-text-color);
}

.spss-wp-simulator-sidebar h2 {
	font-size: 20px;
	color: var(--spss-admin-text-color);
	text-align: center;
	margin-bottom: 8px;
	margin-top: 8px;
}

.spss-wp-simulator-menu-item {
	padding: 12px 20px;
	cursor: pointer;
	position: relative;
	font-weight: var(--spss-admin-text-font-weight);
}

.spss-wp-simulator-menu-item .dashicons {
	font-family: 'Dashicons';
	font-size: 20px;
	margin-right: 2px;
	vertical-align: middle;
}

.spss-wp-simulator-menu-item:hover {
	background-color: var(--spss-admin-hover-color);
}

.spss-wp-simulator-menu-item.spss-wp-simulator-active {
	background-color: var(--spss-admin-hover-color);
}

.spss-wp-simulator-menu-item .notification {
	color: var(--spss-admin-text-color);
	background-color: var(--spss-admin-notification-color);
	border: 1px solid var(--spss-admin-notification-color);
	padding: 0px 5px;
	border-radius: 50px;
	margin-left: 5px;
	font-size: 10px;
}

.spss-wp-simulator-submenu {
	display: block;
	background-color: var(--spss-admin-sub-menu-color);
	padding: 5px 25px;
	cursor: pointer;
	font-weight: var(--spss-admin-text-font-weight);
}

.spss-wp-simulator-submenu-item {
	padding: 5px;
}

.spss-wp-simulator-submenu-item:hover {
	color: var(--spss-admin-hover-color);
}

.spss-wp-simulator-top-bar {
	background-color: var(--spss-admin-main-menu-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
	color: var(--spss-admin-text-color);
	font-weight: var(--spss-admin-text-font-weight);
}

.spss-wp-simulator-top-bar div {
	cursor: pointer;
	padding: 8px 5px;
}

.spss-wp-simulator-top-bar div:hover {
	color: var(--spss-admin-hover-color);
	background-color: var(--spss-admin-sub-menu-color);
}

.spss-wp-simulator-content {
	flex-grow: 1;
	background-color: transparent;
	padding: 30px;
}

.spss-wp-simulator-button {
	background-color: #007cba;
	border: none;
	padding: 10px 20px;
	color: #fff;
	border-radius: 3px;
	cursor: pointer;
}