:root {
	--error-bgcolor: #B41313;
	--modal-header-bgcolor: #418BCA;
	--modal-header-color: #FFFFFF;
	--even-line-bgcolor: #DEEDFF;
	--padding-size: 10px;
	--modal-padding-size: 20px;
	--border-color: #C1C1C1;
	--color: #000000;
	--field-error-bgcolor: #FFCCCC;
	--icon-size: 16px;
	--title-font-size: 24px;
	--system-bgcolor: #66CC99;
}
* {
	font-size: 16px;
	font-family: Georgia, serif;
	color: var(--color);
	outline: none;
}
* [required] {
	border-bottom: 2px solid var(--error-bgcolor) !important;
}
. [disabled] {
	background-color: var(--border-color);
	cursor: default;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="button"],
input[type="submit"],
textarea,
select {
	border: 1px solid var(--border-color);
	border-radius: var(--padding-size);
	background-color: var(--modal-header-color);
	padding: var(--padding-size);
}
input[type="button"],
input[type="submit"] {
	background-color: var(--modal-header-bgcolor);
	color: var(--modal-header-color);
	cursor: pointer;
}
input[type="button"].delete,
input[type="submit"].delete {
	background-color: var(--error-bgcolor);
}

table {
	border-top: 1px solid var(--border-color);
	border-left: 1px solid var(--border-color);
	border-spacing: 0;
}
table th,
table td {
	border-right: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	padding: calc(var(--padding-size)/2);
	vertical-align: top;
}
table thead th {
	vertical-align: middle;
}
table caption {
	margin-bottom: var(--padding-size);
	font-weight: bold;
}

fieldset {
	border: 1px solid var(--border-color);
	border-radius: var(--padding-size);
	padding: var(--padding-size);
	margin-left: 0;
	margin-right: 0;
}

.even {
	background-color: var(--even-line-bgcolor);
}
.checkbox {
	display: inline-flex;
	align-items: center;
}
.checkbox input[type="checkbox"],
.checkbox label,
select {
	cursor: pointer;
}
.checkbox label {
	margin-left: var(--padding-size);
}
a.current {
	color: var(--modal-header-bgcolor);
}

/* BODY */
.body_header {
	background-color: var(--modal-header-bgcolor);
}
.body_header td {
	height: 36px;
	padding: var(--padding-size);
	vertical-align: middle;
	min-width: 750px;
}
.body_header * {
	color: var(--modal-header-color);
	font-size: var(--title-font-size);
}
.body_header .title_block,
.body_header .user_block {
	min-width: 360px;
}
.body_header .title_block {
	display: inline-block;
}
.body_header .logo_block {
	width: calc(100% - 720px);
	text-align: center;
	display: inline-block;
}
.body_header .logo {
	cursor: pointer;
	display: inline-block;
}
.body_header .user_block {
	display: inline-flex;
	justify-content: right;
}
.body_header .user {
	padding-left: var(--padding-size);
	border-left: 1px solid var(--modal-header-color);
	display: flex;
	align-items: center;
}
.body_header .user .icon_close {
	font-size: initial;
	margin-left: var(--modal-padding-size);
}
.body_content {
	height: 100%;
}
.body_content > tr > td {
	border-top: 1px solid var(--border-color) !important;
	border-bottom: 1px solid var(--border-color) !important;
	padding: 0;
}
.body_content .page_menu {
	padding: var(--padding-size) calc(2*var(--padding-size)) var(--padding-size) var(--padding-size);
	border-right: 1px solid var(--border-color);
}
.body_content .page_content {
	height: calc(100vh - 114px - 2*var(--padding-size));
	width: 100%;
	padding: var(--padding-size) var(--padding-size) var(--padding-size) calc(2*var(--padding-size));
	position: relative;
}
.body_content .page_content .page_content_title {
	font-size: var(--title-font-size);
	font-weight: bold;
	margin-bottom: calc(2*var(--padding-size));
}
.body_footer td {
	padding: var(--padding-size);
}
.body_footer td div {
	height: 36px;
	display: flex;
	align-items: center;
}
/* /BODY */

/* MENU */
.menu {
	padding-top: calc(var(--padding-size)/2);
	white-space: nowrap;
}
.menu:first-child {
	padding-top: 0;
}
.menu .menu {
	padding-left: var(--padding-size);
}
/* /MENU */

/* ICON */
.icon_close,
.icon_add,
.icon_delete,
.icon_edit {
	width: var(--icon-size);
	height: var(--icon-size);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.icon_close::before {
	content: '\2716';
}
/* /ICON */

/* MODAL */
.modal_block_overlay,
.modal_confirm_block,
.modal_comment_block,
.modal_error_block,
.modal_loading_block {
	position: fixed;
	left: 0;
	right: 0;
	top: 56px;
	bottom: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal_block_overlay {
	z-index: 100;
}
.modal_comment_block {
	z-index: 300;
}
.modal_confirm_block {
	z-index: 400;
}
.modal_error_block {
	z-index: 500;
}
.modal_loading_block {
	z-index: 600;
}
.modal_block_layer {
	max-height: 100%;
	overflow-y: auto;
	position: fixed;
	z-index: 200;
}
.modal_confirm_block .button_block .button_left,
.modal_confirm_block .button_block .button_right {
	margin-bottom: var(--modal-padding-size);
}
.modal_confirm_block .button_block .button_left,
.modal_comment_block .button_block .button_left {
	float: left;
}
.modal_confirm_block .button_block .button_right,
.modal_comment_block .button_block .button_right {
	float: right;
}
.modal_confirm_block .button_block .attention,
.modal_comment_block .button_block .attention {
	background-color: var(--error-bgcolor);
}
.modal_comment_block .button_block {
	padding: var(--padding-size) 0 !important;
}
.modal_comment_block .button_block .button_left,
.modal_comment_block .button_block .button_right {
	margin-bottom: 0;
}
.modal_comment_block .comment_edit_block td:first-child {
	padding: var(--padding-size);
}
.modal_comment_block .comment_edit_block td .type_list {
	margin-bottom: var(--padding-size);
}
.modal_error_block .description_block {
	padding: var(--modal-padding-size);
	border-radius: var(--modal-padding-size);
	background-color: var(--error-bgcolor);
	display: flex;
}
.modal_error_block .description,
.modal_error_block .icon_close {
	color: var(--modal-header-color);
}
.modal_error_block .description {
	margin-right: var(--padding-size);
}
.modal_block {
	border: 1px solid var(--border-color);
	border-radius: var(--padding-size);
	background-color: var(--modal-header-color);
}
.modal_block .header {
	display: flex;
	align-items: center;
	position: relative;
	border-radius: var(--padding-size) var(--padding-size) 0 0;
	background-color: var(--modal-header-bgcolor);
}
.modal_block .header .title {
	font-size: var(--title-font-size);
	color: var(--modal-header-color);
	width: 100%;
}
.modal_block .header .title,
.modal_block .content,
.modal_block .button_block {
	padding: var(--modal-padding-size);
}
.modal_block .icon_close {
	float: right;
	margin-right: var(--modal-padding-size);
	color: var(--modal-header-color);
}
.modal_block .content {
	border-top: 1px solid var(--border-color);
}
.modal_block .content:not(:last-child) {
	border-bottom: 1px solid var(--border-color);
}
.modal_block .content .field_block {
	width: 100%;
}
.modal_block .content .field_block:not(:first-child) {
	margin-top: var(--padding-size);
}
.modal_block .content .field_block .field_name {
	margin-bottom: var(--padding-size);
}
.modal_block .content input[type="text"],
.modal_block .content input[type="password"],
.modal_block .content input[type="number"],
.modal_block .content input[type="email"],
.modal_block .content textarea {
	width: calc(100% - var(--modal-padding-size));
}
.modal_block .content select,
.modal_block .content input[type="search"] {
	width: 100%;
}
.modal_block .content .label {
	font-weight: bold;
}
.modal_block .footer {
	position: relative;
}
.modal_block .footer .button_block {
	text-align: right;
}
/* /MODAL */

/* COMMENT */
.comment_type_legend {
	margin-bottom: var(--padding-size);
}
.comment_type_legend [comment_type_id] {
	padding: calc(var(--padding-size) / 2);
	font-size: 14px;
	border: 1px solid var(--border-color);
}
.comment_type_legend [comment_type_id]:not(:last-child) {
	margin-right: calc(var(--padding-size) / 2);
}
.comment_type_legend .system,
.comment_list .system {
	background-color: var(--system-bgcolor);
}
.comment_type_legend .admin,
.comment_list .admin {
	background-color: var(--field-error-bgcolor);
}
/* /COMMENT */

.api_error {
	position: absolute;
	z-index: 100;
	left: 0;
	right: 0;
	top: 56px;
	bottom: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
}

.error {
	padding: var(--modal-padding-size);
	border-radius: var(--modal-padding-size);
	background-color: var(--error-bgcolor);
	color: var(--modal-header-color);
}
.field_error {
	background-color: var(--field-error-bgcolor) !important;
}