* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
body {
	padding: 0.3em;

	--text-white: #fff;
	--text-black: #000;
	--text-gray: #a0a0a0;

	--bg-color: #fff;
	--op-hover: #dadada;
	--op-checked: #7e7e7e;
	--input-hover: #e7e7e7;

	--border-container: #c5c5c5;
	--border-op-container: #f1f1f1;
	--border-site-container: #b3b3b3;
	--border-panel: #808080;
	--border-button: #1e9779;
	--border-b3: #971e1e;
	--border-b4: #494949;

	--bg-mobi: #edf7f7;
	--bg-webmotos: #f7eded;
	--bg-usadosbr: #eef7ed;
	--bg-olx: #f3edf7;
	--bg-icarros: #fff7e3;
	--bg-napista: #e2e8f5;
	--bg-b1: #acffc5;
	--bg-b1-hover: #82f0a3;
	--bg-b2: #ace5ff;
	--bg-b2-hover: #75d7f0;
	--bg-b3: #ffacac;
	--bg-b3-hover: #e95d5d;
	--bg-b4: #ccc;
	--bg-b4-hover: #9e9e9e;

	color: var(--text-black);
	background-color: var(--bg-color);
}
.dark {
	--text-white: #000000;
	--text-black: #ffffff;
	--text-gray: #afafaf;

	--bg-color: #3d3d3d;
	--op-hover: #686868;
	--op-checked: #b4b4b4;
	--input-hover: #6b6b6b;

	--border-container: #a8a8a8;
	--border-op-container: #707070;
	--border-site-container: #272727;
	--border-panel: #adadad;
	--border-button: #1e9779;
	--border-b3: #971e1e;
	--border-b4: #494949;

	--bg-mobi: #374141;
	--bg-webmotos: #4e4141;
	--bg-usadosbr: #4f5c4e;
	--bg-olx: #4d4652;
	--bg-icarros: #5a5649;
	--bg-napista: #4f545e;
	--bg-b1: #acffc5;
	--bg-b1-hover: #82f0a3;
	--bg-b2: #ace5ff;
	--bg-b2-hover: #75d7f0;
	--bg-b3: #ffacac;
	--bg-b3-hover: #e95d5d;
	--bg-b4: #ccc;
	--bg-b4-hover: #9e9e9e;
}
.op-container {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
	border: 2px solid var(--border-op-container);
	border-radius: 12px;
	padding: 0.3em;
	background-color: var(--bg-color);
}
.op-container .op {
	border: 2px solid var(--border-container);
	padding: 0.4em;
	border-radius: 1em;
	width: fit-content;
	cursor: pointer;
	transition: ease-in all 0.2s;
	font-weight: 500;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	display: flex;
	align-items: center;
}
.op-container .op:hover {
	background-color: var(--op-hover);
}
.op-container .checked,
.op-container .checked:hover {
	/* background-color: #dadada;
    border: 2px solid #444444; */
	background-color: var(--op-checked);
	border: 2px solid var(--op-checked);
	color: var(--text-white);
}
#sites {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}
.site-container {
	border: 2px solid var(--border-site-container);
	padding: 0.4em;
	border-radius: 1em;
}
.site-container h3 {
	border-bottom: 2px solid var(--border-site-container);
	padding-bottom: 0.2em;
	margin-bottom: 0.4em;
}
.site-section {
	height: fit-content;
	display: flex;
	flex-direction: column;
}
.site-section .site-container {
	margin-bottom: 1em;
}
#mobi {
	font-size: 12px;
	width: 44em;
	background-color: var(--bg-mobi);
}
#mobi .op {
	width: 10em;
}
#webmotos {
	font-size: 12px;
	width: 37.5em;
	background-color: var(--bg-webmotos);
}
[data-id="c273"] {
	margin-right: 7em !important;
}
[data-id="c229"] {
	margin-right: 2em !important;
}
[data-id="c324"] {
	margin-right: 4em !important;
}
[data-id="c224"] {
	margin-right: 1em !important;
}

#usadosbr {
	font-size: 12px;
	width: 23em;
	background-color: var(--bg-usadosbr);
}
#usadosbr .op {
	width: 48%;
}
#olx {
	font-size: 12px;
	width: 39em;
	background-color: var(--bg-olx);
}
[data-id="c107"],
[data-id="c056"],
[data-id="c299"] {
	font-size: 11px;
}
#icarros {
	font-size: 12px;
	width: 37em;
	background-color: var(--bg-icarros);
}
#icarros .op {
	width: 23.9%;
}
[data-id="c199"] {
	margin-left: 26em !important;
}
#napista {
	font-size: 12px;
	width: 31em;
	background-color: var(--bg-napista);
}
#napista .op {
	width: 32%;
}

#control-panel {
	gap: 1em;
	display: flex;
	justify-content: center;
}
#control-panel input {
	border: 2px solid var(--border-panel);
}
#control-panel input,
#control-panel button,
textarea {
	padding: 0.3em;
	font-size: 15px;
	border-radius: 0.4em;
	transition: ease-in all 0.1s;
	background-color: var(--bg-color);
	color: var(--text-black);
}
button {
	cursor: pointer;
	border: 2px solid var(--border-button) !important;
	color: var(--text-black) !important;
}
#b1 {
	background-color: var(--bg-b1) !important;
}
#b2 {
	background-color: var(--bg-b2) !important;
}
#b1:hover {
	background-color: var(--bg-b1-hover) !important;
}
#b2:hover {
	background-color: var(--bg-b2-hover) !important;
}
#b3 {
	background-color: var(--bg-b3) !important;
	border: 2px solid var(--border-b3) !important;
}
#b3:hover {
	background-color: var(--bg-b3-hover) !important;
}
#b4 {
	background-color: var(--bg-b4) !important;
	border: 2px solid var(--border-b4) !important;
	position: absolute;
	right: 1em;
}
#b4:hover {
	background-color: var(--bg-b4-hover) !important;
}
input:hover {
	background-color: var(--input-hover) !important;
}
input,
input:focus,
textarea,
textarea:focus {
	outline: 0;
}
textarea {
	width: 40em;
	height: 20em;
}
.hidden {
	display: none;
}

#carro-div {
	color: var(--text-gray);
	text-transform: uppercase;
	border-bottom: 2px solid var(--border-container);
	margin-bottom: 1em;
}

#notif {
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgb(203, 255, 150);
	padding: 1.5em;
	border-radius: 1em;
	border: 0.3em solid rgb(82, 126, 38);
	color: rgb(30, 56, 4);
	transition: ease all 0.3s;
	opacity: 0%;
}