:root {
	--panel-bg: #181818;
	--web-bg: #202020;

	--reverse-text: rgb(238, 238, 238);
	--text: rgb(238, 238, 238);

	--true: rgb(16, 128, 16);
	--false: rgb(170, 27, 27);

	--input: rgb(85, 81, 81); 

	--border: rgb(167, 163, 163);
	
	--panel: #202020;

	--shadow: rgba(0, 0, 0, 0.727);

	--calss-bg: #646060;
	--selected: #322163;
	--hovered: #661B79;

	--button: #3029b4;
	--hovered-button: #3A31D8;
}

body {
	color: var(--text);
	background-color: var(--web-bg);
}

.light-theme {
	--true: rgb(7, 184, 7);
	--false: rgb(192, 7, 7);

	--text: #061210;
	--reverse-text: rgb(238, 238, 238);

	--shadow: rgba(0, 0, 0, 0.2);

	--panel-bg: #e4e4e4;
	--web-bg: #fff;
	
	--calss-bg: #ffffff;
	--selected: #AD9DDE;
	--hovered: #D187E4;

	--button: #47C0B2;
	--hovered-button: #4fd1c2;

	--border: black;

	--panel: rgb(211, 207, 207);

	--input: rgb(245, 242, 242); 
}

.panel {
	background-color: var(--panel-bg);
	margin: 20px;
	padding: 15px;
	border-radius: 10px;
}

.table-name {
	float: right;
	margin-right: 5px;
}

#id {
	width: 50px;
}

.img-button {
	background-color: var(--true);
	color: var(--text);
	padding: 5px 10px;
	border-radius: 5px;
	display: block;
	width: fit-content;
	margin: 10px;
	margin-left: 0;
	cursor: pointer;
	user-select: none;
	width: 30px;
	text-align: center;

	transition: 0.5s;
}

.img-button.off {
	background-color: var(--false);
	color: var(--reverse-text);
}

.img-button.off:hover {
	transform: scale(1.05);
	box-shadow: 0 0 8px 0 var(--false);
}

.img-button:hover {
	transform: scale(1.05);
	box-shadow: 0 0 8px 0 var(--true);
}

td>img {
	height: 50px;
}

.class {
	background-color: var(--calss-bg);
	padding: 2px;
	border-radius: 5px;
	cursor: pointer;

	transition: 0.5s;
}

.class:hover {
	background-color: var(--hovered);
	transform: scale(1.1);
	box-shadow: 0 0 8px 0 var(--shadow);
}

.class.active {
	background-color: var(--selected);
}

.basic-section {
	display: block;
	float: left;
	margin: 10px;
}

.sections {
	width: 100%;
	display: inline-block;
}

.add-section-btn {
	width: fit-content;
	background-color: var(--button);
	border: 0;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;

	transition: 0.5s;
}

.add-section-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 0 8px 0 var(--shadow);
	background-color: var(--hovered-button);
}

.photo-section {
	width: 272px;
	height: 154px;
}

.section_panel {
	background-color: var(--panel);
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 10px;
	border: var(--border) 2px solid;
}

.remove_section_panel {
	background-color: var(--false);
	color: var(--reverse-text);
	padding: 5px;
	font-size: 25px;
	border-radius: 50%;
	cursor: pointer;
	position: absolute;
	right: 50px;

	transition: 0.5s;
}

.remove_section_panel:hover {
	border-radius: 30%;
}

.add_text_btn {
	background-color: var(--hovered);
	padding: 5px;
	border-radius: 5px;
	margin-top: 10px;
	cursor: pointer;
	user-select: none;
	border: 0;
	color: var(--text);

	transition: 0.5s;
}

.add_text_btn:hover {
	transform: scale(1.05);
	box-shadow: 0 0 3px 0 var(--shadow);
}

.content_panel {
	background-color: var(--panel-bg);
	margin-top: 15px;
	border-radius: 15px;
	padding: 10px;
	border: var(--border) 1px solid;
}

.content_panel textarea {
	width: 99%;
	resize: vertical;
}

.close_btn {
	border: none;
	background-color: #ffffff00;
	position: absolute;
	right: 0;
}

.output {
	width: 100%;
	height: 200px;
	resize: vertical;
}

.view {
	width: 100%;
	height: 500px;
	border-radius: 10px;
	border: 3px solid var(--border);
}

.button {
	margin: 20px 0 10px 0;
	background-color: var(--button);
	border: 0;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	color: var(--text);

	transition: 0.5s;
}

.button:hover {
	transform: scale(1.05);
	box-shadow: 0 0 8px 0 var(--shadow);
	background-color: var(--hovered-button);
}

input, textarea, select {
	border: var(--border) 1px solid;
	border-radius: 5px;
	background-color: var(--input);
	color: var(--text);
	padding: 3px 5px;
	font-family: Arial, Helvetica, sans-serif;
}

.docs .h2 {
	margin-left: 5px;
	margin-right: 5px;
}

.docs .h3 {
	margin-left: 10px;
	margin-right: 10px;
}

.docs a {
	color: brown;
}

.docs li {
  list-style-position: inside;
  text-indent: -40px;
  padding-left: 20px;
	margin-bottom: 10px;
}

@media only screen and (max-width: 700px) {
	.name_input {
		width: 140px;
	}
}