:root {
	--text-size: 14pt;
	--serm-border-color: rgb(16, 75, 100);
	--serm-background-color: rgb(231, 245, 249, 0.5);
	--serm-button-color: rgb(16, 159, 200);
	--serm-button-hover-color: rgb(9, 95, 120);
	--serm-button-active-color: rgb(16, 75, 100);
	--serm-title-text-color: rgb(0, 80, 115);
	--serm-title-text-size: 24pt;
	--serm-subtitle-text-color: rgb(16, 125, 172);
	--serm-subtitle-text-size: 16pt;
	--lk-background-color: rgb(243, 240, 255);
	--lk-header-background-color: rgb(68, 37, 255);
	--lk-leftmenu-background-color: rgb(68, 68, 68);
	--lk-button-color: rgb(114, 90, 255);
	--lk-button-hover-color: rgb(68, 37, 255);
	--lk-button-active-color: rgb(159, 143, 255);
	--lk-window-background-color: rgb(249, 249, 249);

	--lk-button-dashborad-first-color: rgb(68, 37, 255);
	--lk-button-dashborad-second-color: rgb(255, 9, 163);
	--lk-button-dashborad-third-color: rgb(135, 255, 48);
	--lk-button-dashborad-fourth-color: rgb(255, 212, 0);
	--lk-button-dashborad-fifth-color: rgb(255, 126, 15);
	--lk-button-dashborad-sixth-color: rgb(142, 60, 255);
}

::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body {
	margin: 0px;
	overflow-y: auto;
}

.main-body {
	width: 100%;
	box-sizing: border-box;
	height: auto;
	background-image: url(/assets/img/background.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.main-body .header {
	background-color: var(--serm-background-color);
	padding: 4px;
	height: auto;
	width: 100%;
	box-sizing: border-box;
	text-align: right;
}

.main-body .header .menu {
	list-style-type: none;
	margin: 0px;
	margin-top: 16px;
	margin-bottom: 16px;
}

.main-body .header .menu li:hover {
	background-color: var(--serm-button-hover-color);
	color: white;
	cursor: pointer;
}

.main-body .header .menu li:active {
	background-color: var(--serm-button-active-color);
}

.main-body .header .menu li {
	font-size: var(--serm-title-text-size);
	color: var(--serm-title-text-color);
	padding: 8px;
	border-radius: 8px;
}

.main-body .content {
	min-height: 100vh;
}

.main-body .footer {
	background-color: var(--serm-background-color);
	min-height: 60px;
}

.modal-content {
	width: 100%;
	box-sizing: border-box;
	min-height: 300px;
	padding: 4px;
}

.modal-content h2 {
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	color: var(--serm-title-text-color);
	font-size: var(--serm-title-text-size);
}

.modal-content h2 {
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	color: var(--serm-subtitle-text-color);
	font-size: var(--serm-title-text-size);
}

.modal-content .form-buttons {
	text-align: right;
	margin-bottom: 4px;
	margin-top: 8px;
}

.modal-content input[type="submit"],
.modal-content input[type="button"] {
	padding: 8px;
	border: none;
	background-color: var(--serm-button-color);
	color: white;
	font-size: var(--text-size);
	float: right;
	margin-bottom: 8px;
}

.modal-content input[type="submit"]:hover,
input[type="button"]:hover {
	background-color: var(--serm-button-hover-color);
	cursor: pointer;
}

.modal-content input[type="submit"]:focus,
input[type="button"]:focus {
	background-color: var(--serm-button-hover-color);
}

.modal-content input[type="submit"]:active,
input[type="button"]:active {
	background-color: var(--serm-button-active-color);
}

.modal-content input {
	font-size: var(--text-size);
}

.modal-content input[class="line"] {
	font-size: var(--text-size);
	width: 100%;
	box-sizing: border-box;
}

.modal-content .form-input-box {
	box-sizing: border-box;
	height: calc(var(--text-size) + 12px);
	margin-bottom: 4px;
	clear: both;
}

.modal-content .form-input-box img {
	transform: translate(50%, 50%);
	height: var(--text-size);
	width: auto;
	box-sizing: border-box;
	position: absolute;
}

.modal-content .form-input-box input[type="text"],
.modal-content .form-input-box input[type="password"] {
	padding: 4px;
	padding-left: 32px;
	border: 2px solid var(--serm-border-color);
	width: 100%;
	box-sizing: border-box;
}

.modal-content .form-input-box input[type="text"],
.modal-content .form-input-box input[type="passowrd"]:focus {
	border: 2px solid var(--serm-border-color);
}

.modal-content input[type="file"] {
	width: 100%;
	box-sizing: border-box;
	font-size: var(--text-size);
	margin-top: 8px;
}

.modal-content .form-input-box .checkbox {
	padding: 4px;
	padding-left: 32px;
	border: 2px solid var(--serm-border-color);
	width: 100%;
	box-sizing: border-box;
}

.modal-content .form-input-box .checkbox label {
	font-size: var(--text-size);
	box-sizing: border-box;
}

.modal-content p[class="subtitle"] {
	margin: 0px;
	font-size: 12pt;
	margin-bottom: 8px;
}

.modal-content p {
	font-size: 16pt;
	color: black;
	text-align: left;
	word-break: break-word !important;
	margin-top: 4px;
	margin-bottom: 4px;
}

.modal-content .subspan {
	font-size: var(--serm-subtitle-text-size) !important;
	font-style: italic;
	text-align: right !important;
}

.modal-content textarea {
	box-sizing: border-box;
	width: 100%;
	resize: vertical;
	max-height: calc(var(--text-size) * 12);
	min-height: calc(var(--text-size) * 3);
	height: calc(var(--text-size) * attr(data-lines));
	padding: 4px;
}

.modal-content select {
	font-size: 8pt;
	padding: 2px;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 8px;
}

.modal-content .images-collection {
	text-align: center;
	padding: 4px;
	box-sizing: border-box;
	width: 100%;
	overflow: auto;
	overflow-y: hidden;
	white-space: nowrap;
}

.modal-content .images-collection img {
	min-width: 240px;
	width: 100%;
	height: 240px;
	border-radius: 4px;
	margin: 2px;
}

.modal-content .cells-collection {
	padding: 4px;
	box-sizing: border-box;
	width: 100%;
}

.modal-content .cells-collection .item {
	width: 100%;
	box-sizing: border-box;
	padding: 2px;
	clear: both;
	text-align: center;
}

.modal-content .cells-collection .item input[type="text"] {
	display: inline;
	font-size: var(--text-size) !important;
	width: 45%;
	box-sizing: border-box;
	text-align: center;
}

.modal-content .cells-collection .item select {
	display: inline;
	font-size: var(--text-size) !important;
	width: 45%;
	box-sizing: border-box;
	text-align: left;
}

.modal-content div[class="table-content"] {
	display: table;
	box-sizing: border-box;
	width: 100%;
	table-layout: fixed;
	border: 1px solid gray;
	border-spacing: 0px;
	border-collapse: inherit;
	-webkit-border-vertical-spacing: 2px;
}

.modal-content div[class="table-content"] .row {
	display: table-row;
	clear: both;
	box-sizing: border-box;
	width: 100%;
	font-size: 10pt;
	min-height: 10pt;
	text-overflow: ellipsis;
	max-height: calc(10pt + 8px);
}

.modal-content div[class="table-content"] .row:empty {
	height: calc(10pt * 3) !important;
}

.modal-content div[class="table-content"] .row:hover {
	background-color: #cae3fa;
}

.modal-content div[class="table-content"] .row-disabled {
	display: table-row;
	clear: both;
	box-sizing: border-box;
	width: 100%;
	font-size: 10pt;
	min-height: 10pt;
	text-overflow: ellipsis;
	max-height: calc(10pt + 8px);
	pointer-events: none;
	cursor: default;
	background-color: rgb(112, 93, 140);
}

.modal-content div[class="table-content"] .row-header {
	display: table-row;
	clear: both;
	box-sizing: border-box;
	width: 100%;
	font-weight: bold;
	font-size: 10pt;
	text-align: center;
	min-height: 10pt;
	max-height: calc(10pt + 8px);
}

.modal-content div[class="table-content"] .col {
	display: table-cell;
	box-sizing: border-box;
	width: auto;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: middle;
}

.modal-content div[class="table-content"] .col input,
.modal-content div[class="table-content"] .col select {
	margin: 0px !important;
}

.lk-body {
	width: 100%;
	box-sizing: border-box;
	height: calc(100vh - 83px);
	background-image: var(--lk-background-color);
}

.lk-body .header {
	background-color: var(--lk-header-background-color);
	padding: 4px;
	height: auto;
	width: 100%;
	box-sizing: border-box;
	clear: both;
	font-size: var(--serm-subtitle-text-size);
}

.lk-body .header .menu {
	list-style-type: none;
	margin: 0px;
	margin-top: 16px;
	margin-bottom: 16px;
	text-align: right;
	display: block;
}

.lk-body .header .menu li:hover {
	background-color: var(--lk-button-hover-color);
	color: white;
	cursor: pointer;
}

.lk-body .header .menu li:active {
	background-color: var(--lk-button-active-color);
}

.lk-body .header .menu li {
	font-size: var(--serm-subtitle-text-size);
	color: rgb(243, 240, 255);
	display: inline-block;
	padding: 8px;
	border-radius: 8px;
	vertical-align: middle;
}

.lk-body .leftmenu {
	float: left;
	box-sizing: border-box;
	width: 20%;
	height: 100%;
	background-color: var(--lk-leftmenu-background-color);
}

.lk-body .leftmenu .elements-group {
	margin-top: 16px;
}

.lk-body .leftmenu .elements-group:first-child {
	margin-top: 0px;
}

.lk-body .leftmenu .elements-group .chaptionname {
	font-size: var(--serm-subtitle-text-size);
	font-weight: bold;
	color: white;
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
}

.lk-body .leftmenu .elements-group .element {
	color: white;
	font-size: var(--serm-subtitle-text-size);
	text-align: left;
	padding: 4px;
	border-bottom: 2px solid black;
	vertical-align: middle;
	line-height: calc(var(--serm-subtitle-text-size) * 2);
}

.lk-body .leftmenu .elements-group .element img {
	box-sizing: border-box;
	width: var(--serm-subtitle-text-size);
	height: var(--serm-subtitle-text-size);
	margin-right: 16px;
	display: inline;
	vertical-align: middle;
}

.lk-body .leftmenu .elements-group .element span {
	display: inline;
	vertical-align: middle;
}

.lk-body .leftmenu .elements-group .element:hover {
	color: black;
	background-color: rgb(159, 143, 255);
	cursor: pointer;
}

.lk-body .leftmenu .elements-group .element:last-child {
	border-bottom: none;
}

.lk-body .leftmenu .elements-group .element-selected {
	color: black;
	font-size: var(--serm-subtitle-text-size);
	text-align: left;
	padding: 4px;
	border-bottom: 2px solid black;
	vertical-align: middle;
	line-height: calc(var(--serm-subtitle-text-size) * 2);
	background-color: rgb(91, 192, 222);
}

.lk-body .leftmenu .elements-group .element-selected img {
	box-sizing: border-box;
	width: var(--serm-subtitle-text-size);
	height: var(--serm-subtitle-text-size);
	margin-right: 16px;
	display: inline;
	vertical-align: middle;
}

.lk-body .leftmenu .elements-group .element-selected span {
	display: inline;
	vertical-align: middle;
}

.lk-body .leftmenu .elements-group .element-selected:hover {
	cursor: pointer;
}

.lk-body .leftmenu .elements-group .element .counter,
.lk-body .leftmenu .elements-group .element-selected .counter {
	display: inline-block;
	line-height: 0px;
	border-radius: 50%;
	background-color: red;
	font-size: 8pt;
	font-weight: bold;
}

.lk-body .leftmenu .elements-group .element .counter span,
.lk-body .leftmenu .elements-group .element-selected .counter span {
	display: inline-block;
	padding-top: 50%;
	padding-bottom: 50%;
	margin-left: 8px;
	margin-right: 8px;
}

.lk-body .content {
	float: right;
	box-sizing: border-box;
	width: 80%;
	height: 100%;
	padding: 16px;
	background-color: var(--lk-window-background-color);
	overflow-y: auto;
}

.page-content {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding-top: 8px;
}

.page-content .leftbody {
	float: left;
	box-sizing: border-box;
	width: 70%;
	height: 100%;
}

.page-content .leftbody .inlines {
	width: 100%;
	box-sizing: border-box;
}

.page-content .leftbody .inlines .inline-select {
	width: 100%;
	box-sizing: border-box;
	display: table;
	table-layout: fixed;
	border-spacing: 0px;
	border-collapse: collapse;
	line-height: calc(var(--text-size) + 4pt);
}

.page-content .leftbody .inlines .inline-select label {
	width: 75px;
	box-sizing: border-box;
	text-align: left;
	display: table-cell;
	font-size: var(--text-size);
	vertical-align: middle;
	margin-top: 2px;
	margin-bottom: 2px;
}

.page-content .leftbody .inlines .inline-select select {
	width: calc(100% - 10px);
	box-sizing: border-box;
	display: table-cell;
	float: right;
	font-size: calc(var(--text-size) - 4pt);
	border: none;
	box-shadow: 2px 2px 5px rgba(122, 122, 122, 0.5);
	vertical-align: middle;
	margin-top: 2px;
	margin-bottom: 2px;
}

.page-content .leftbody .inlines .inline-select input[type="button"] {
	font-size: calc(var(--text-size) - 4pt);
	box-sizing: border-box;
	width: min-content;
	min-width: 70px;
	max-width: 100%;
	padding: 4px;
	margin: 3px;
	box-shadow: 2px 2px 5px rgba(122, 122, 122, 0.5);
	background-color: rgb(105, 159, 247);
	border-radius: 4px;
	float: right;
	border: none;
	color: white;
}

.page-content .leftbody .inlines .inline-select input[type="button"]:hover {
	cursor: pointer;
	background-color: rgb(180, 207, 251);
}

.page-content .leftbody .inlines .inline-select input[type="button"]:active {
	background-color: rgb(238, 209, 207);
}

.page-content .leftbody .inlines .inline-select input[type="button"]:disabled {
	background-color: rgb(217, 231, 253);
	pointer-events: none;
	opacity: 0.4;
}

.page-content .leftbody .two-cols {
	clear: both;
	box-sizing: border-box;
	width: 100%;
	display: table;
}

.page-content .leftbody .two-cols .first {
	float: left;
	box-sizing: border-box;
	width: 50%;
	display: table-row;
}

.page-content .leftbody .two-cols .first div {
	box-sizing: border-box;
	width: calc(100% - 16px);
	height: 84px;
	margin-right: 16px;
	margin-bottom: 16px;
	border: none;
	padding: 8px;
	cursor: pointer;
	box-shadow: 2px 2px 5px rgba(122, 122, 122, 0.5);
}

.page-content .leftbody .two-cols .first div:hover,
.page-content .leftbody .two-cols .first div:hover {
	opacity: 0.7;
}

.page-content .leftbody .two-cols .first div h3 {
	padding: 0px;
	margin: 0px;
	display: inline;
	font-size: var(--serm-title-text-size);
	color: white;
	text-align: left;
	font-weight: normal;
}

.page-content .leftbody .two-cols .first div img {
	width: 52px;
	height: 52px;
	float: right;
}

.page-content .leftbody .two-cols .first .first-elem {
	background-color: var(--lk-button-dashborad-first-color);
}

.page-content .leftbody .two-cols .first .second-elem {
	background-color: var(--lk-button-dashborad-second-color);
}

.page-content .leftbody .two-cols .first .third-elem {
	background-color: var(--lk-button-dashborad-third-color);
}

.page-content .leftbody .two-cols .first div:last-child {
	padding-bottom: 0px;
}

.page-content .leftbody .two-cols .second {
	float: right;
	box-sizing: border-box;
	width: 50%;
	display: table-row;
}

.page-content .leftbody .two-cols .second div {
	box-sizing: border-box;
	width: calc(100% - 16px);
	height: 84px;
	margin-left: 16px;
	margin-bottom: 16px;
	border: none;
	padding: 8px;
	cursor: pointer;
	box-shadow: 2px 2px 5px rgba(122, 122, 122, 0.5);
}

.page-content .leftbody .two-cols .second div:hover,
.page-content .leftbody .two-cols .second div:active {
	opacity: 0.7;
}

.page-content .leftbody .two-cols .second div h3 {
	padding: 0px;
	margin: 0px;
	display: inline;
	font-size: var(--serm-title-text-size);
	color: white;
	text-align: left;
	font-weight: normal;
}

.page-content .leftbody .two-cols .second div img {
	width: 52px;
	height: 52px;
	float: right;
}

.page-content .leftbody .two-cols .second .first-elem {
	background-color: var(--lk-button-dashborad-fourth-color);
}

.page-content .leftbody .two-cols .second .second-elem {
	background-color: var(--lk-button-dashborad-fifth-color);
}

.page-content .leftbody .two-cols .second .third-elem {
	background-color: var(--lk-button-dashborad-sixth-color);
}

.page-content .leftbody .two-cols .second div:last-child {
	padding-bottom: 0px;
}

.page-content .leftbody .news-box {
	box-sizing: border-box;
	width: 100%;
	border-left: 2px solid rgba(66, 139, 202, 0.5);
}

.page-content .leftbody .news-box .element {
	box-sizing: border-box;
	width: 70%;
	margin-left: 8px;
	margin-bottom: 16px;
	box-shadow: 2px 2px 5px rgba(122, 122, 122, 0.5);
	padding: 16px;
	background-color: white;
	border-left: 2px solid rgb(66, 139, 202);
}

.page-content .leftbody .news-box .element:hover {
	cursor: pointer;
	transform: translateX(25px);
}

.page-content .leftbody .news-box .element:last-child {
	margin-bottom: 0px;
}

.page-content .leftbody .news-box .element .new-table {
	display: table;
	box-sizing: border-box;
	width: 100%;
	table-layout: fixed;
}

.page-content .leftbody .news-box .element .new-table .row {
	display: table-row;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--text-size);
}

.page-content .leftbody .news-box .element .new-table .col {
	display: table-cell;
	box-sizing: border-box;
	vertical-align: middle;
}

.page-content .leftbody .news-box .element h3 {
	padding: 0px;
	margin: 0px;
	font-size: 18px;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
}

.page-content .leftbody .news-box .element p {
	font-size: var(--text-size);
	box-sizing: border-box;
	width: 100%;
	word-break: break-word;
}

.page-content .leftbody .news-box .element .date {
	box-sizing: border-box;
	width: 100%;
	padding: 8px;
	background-color: rgb(91, 192, 222);
	color: white;
	font-size: calc(var(--text-size) - 4pt);
}

.page-content .leftbody .data-table {
	box-sizing: border-box;
	width: 100%;
	background-color: white;
	box-shadow: 2px 2px 5px rgba(122, 122, 122, 0.5);
	border-top: 2px solid rgb(66, 139, 202);
	border-spacing: 0px;
	border-collapse: collapse;
}

.page-content .leftbody .data-table thead tr {
	box-sizing: border-box;
	background-color: rgb(139, 157, 195);
	font-size: 12pt;
	font-weight: bold;
	text-align: center;
}

.page-content .leftbody .data-table tbody tr {
	box-sizing: border-box;
}

.page-content .leftbody .data-table tbody tr td,
.page-content .leftbody .data-table thead tr td {
	font-size: 8pt;
	padding: 2px;
	word-break: break-word;
	max-width: 200px;
	font-size: 10pt;
}

.page-content .leftbody .data-table tbody tr[class="disabled"] {
	background-color: rgba(86, 29, 184, 0.3);
	pointer-events: none;
	cursor: default;
}

.page-content .leftbody .data-table tbody tr[class="disabled"]:hover {
	background-color: rgba(86, 29, 184, 0.3);
	cursor: default;
}

.page-content .leftbody .data-table tbody tr[class="disabled"] .bigger-checkbox-fixed,
.page-content .leftbody .data-table tbody tr[class="disabled"] a {
	pointer-events: auto;
	cursor: pointer;
}

.page-content .leftbody .data-table tbody tr:hover {
	cursor: pointer;
	background-color: rgb(154, 121, 189);
}

.page-content .leftbody .data-table tbody tr td select {
	font-size: 8pt;
	padding: 2px;
	box-sizing: border-box;
	width: 100%;
}

.page-content .leftbody .data-table tbody tr td .show-button {
	background-color: #85e5bb;
	border: none;
	border-radius: 2px;
	padding: 2px;
	color: white;
	float: none;
	margin-bottom: 0px;
}

.page-content .leftbody .data-table tbody tr td .statusbox {
	font-size: 8pt;
	padding: 4px;
	box-sizing: border-box;
	background-color: var(--serm-subtitle-text-color);
	border: none;
	color: white;
	border-radius: 4px;
	text-align: center;
	vertical-align: middle;
}

.page-content .leftbody .data-table tbody tr td .action-button {
	font-size: calc(var(--text-size) - 4pt);
	box-sizing: border-box;
	width: min-content;
	min-width: 70px;
	max-width: 100%;
	padding: 4px;
	margin: 3px;
	box-shadow: 2px 2px 5px rgba(122, 122, 122, 0.5);
	background-color: green;
	border-radius: 4px;
	float: none !important;
	border: none;
	color: white;
}

.page-content .leftbody .data-table tbody tr td .action-button:hover {
	cursor: pointer;
	background-color: rgb(55, 212, 23);
}

.page-content .leftbody .data-table tbody tr td .action-button:active {
	background-color: rgb(103, 237, 76);
}

.page-content .leftbody .data-table tbody tr td .action-button:disabled {
	background-color: rgb(152, 212, 140);
	pointer-events: none;
	opacity: 0.4;
}

.page-content .leftbody .messages-body {
	box-sizing: border-box;
	width: 100%;
	height: calc(100vh - 128px);
	display: table;
}

.page-content .leftbody .messages-body .messages-table {
	box-sizing: border-box;
	width: 100%;
	display: table-row;
}

.page-content .leftbody .messages-body .messages-table .block {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	line-height: calc(12pt + 8px);
	font-size: 12pt;
	display: block;
	overflow-y: auto;
}

.page-content .leftbody .messages-body .messages-table .block .row {
	box-sizing: border-box;
	display: inline-block;
	width: 100%;
	vertical-align: middle;
	border-left: 2px solid rgb(66, 139, 202);
	padding-right: 30%;
}

.page-content .leftbody .messages-body .messages-table .block .row[data-fromuser="1"] {
	padding-right: 0px;
	padding-left: 30%;
	border-right: 2px solid rgb(66, 139, 202);
	border-left: none;
}

.page-content .leftbody .messages-body .messages-table .block .row[data-isread="0"] {
	background-color: rgba(167, 175, 255, 0.5);
}

.page-content .leftbody .messages-body .messages-table .block .row .row-content {
	box-sizing: border-box;
	width: 100%;
	background-color: white;
	padding: 4px;
	box-shadow: 2px 2px 5px rgba(122, 122, 122, 0.5);
	word-break: break-word;
}

.page-content .leftbody .messages-body .messages-table .block .row .row-content .text {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	width: 100%;
}

.page-content .leftbody .messages-body .messages-table .block .row .row-content .time-span {
	text-align: right;
	font-style: italic;
	font-size: 8pt;
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	width: 100%;
}

.page-content .leftbody .messages-body .attachments-box {
	box-sizing: border-box;
	width: 100%;
	height: calc(calc(var(--text-size) * 2) + 8px);
	background-color: rgba(167, 175, 255, 0.5);
	display: table-row;
	padding: 4px;
}

.page-content .leftbody .messages-body .send-box {
	box-sizing: border-box;
	width: 100%;
	height: calc(calc(var(--text-size) * 2) + 8px);
	background-color: rgba(167, 175, 255, 0.5);
	display: table-cell;
	padding: 4px;
}

.page-content .leftbody .messages-body .send-box textarea {
	resize: none;
	box-sizing: border-box;
	width: calc(calc(100% - calc(var(--text-size) * 4)) - 8px);
	font-size: calc(var(--text-size) - 4pt);
	line-height: var(--text-size);
	height: calc(var(--text-size) * 2);
	display: inline;
	vertical-align: middle;
}

.page-content .leftbody .messages-body .send-box .icon-image {
	box-sizing: border-box;
	width: calc(var(--text-size) * 2);
	height: calc(var(--text-size) * 2);
	display: inline;
	vertical-align: middle;
}

.page-content .leftbody .messages-body .send-box .icon-image:hover {
	cursor: pointer;
	transform: translateY(-4px);
}

.page-content .rightbody {
	float: right;
	box-sizing: border-box;
	width: 30%;
	padding-left: 64px;
}

.page-content .rightbody .element {
	box-sizing: border-box;
	width: initial;
	position: absolute;
	min-height: 128px;
	min-width: 200px;
	background-color: white;
	margin-bottom: 16px;
	margin-left: -32px;
	margin-right: 32px;
	padding: 8px;
	border-top: 2px solid rgb(66, 139, 202);
	box-shadow: 2px 2px 5px rgba(122, 122, 122, 0.5);
}

.page-content .rightbody .element:last-child {
	margin-bottom: 0px;
}

.page-content .rightbody .element h3 {
	padding: 0px;
	margin: 0px;
	font-size: 16px;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
}

.page-content .rightbody .element p {
	font-size: var(--text-size);
	box-sizing: border-box;
	width: 100%;
	word-break: break-all;
}

.page-content .rightbody .element .green-button {
	font-size: var(--text-size);
	box-sizing: border-box;
	width: calc(100% - 16px);
	clear: both;
	padding: 8px;
	margin: 8px;
	box-shadow: 2px 2px 5px rgba(122, 122, 122, 0.5);
	background-color: rgb(102, 180, 71);
	float: none !important;
	border: none;
	color: white;
}

.page-content .rightbody .element .green-button:hover {
	cursor: pointer;
	background-color: rgb(163, 210, 145);
}

.page-content .rightbody .element .green-button:active {
	background-color: rgb(194, 225, 181);
}

.page-content .rightbody .element .green-button:disabled {
	background-color: rgb(194, 225, 181);
	pointer-events: none;
	opacity: 0.4;
}

.page-content .rightbody .element .red-button {
	font-size: var(--text-size);
	box-sizing: border-box;
	width: calc(100% - 16px);
	clear: both;
	padding: 8px;
	margin: 8px;
	box-shadow: 2px 2px 5px rgba(122, 122, 122, 0.5);
	background-color: rgb(169, 27, 13);
	float: none !important;
	border: none;
	color: white;
}

.page-content .rightbody .element .red-button:hover {
	cursor: pointer;
	background-color: rgb(203, 118, 110);
}

.page-content .rightbody .element .red-button:active {
	background-color: rgb(238, 209, 207);
}

.page-content .rightbody .element .red-button:disabled {
	background-color: rgb(238, 209, 207);
	pointer-events: none;
	opacity: 0.4;
}

.page-content .rightbody .element .blue-button {
	font-size: var(--text-size);
	box-sizing: border-box;
	width: calc(100% - 16px);
	clear: both;
	padding: 8px;
	margin: 8px;
	box-shadow: 2px 2px 5px rgba(122, 122, 122, 0.5);
	background-color: rgb(105, 159, 247);
	float: none !important;
	border: none;
	color: white;
}

.page-content .rightbody .element .blue-button:hover {
	cursor: pointer;
	background-color: rgb(180, 207, 251);
}

.page-content .rightbody .element .blue-button:active {
	background-color: rgb(217, 231, 253);
}

.page-content .rightbody .element .blue-button:disabled {
	background-color: rgb(217, 231, 253);
	pointer-events: none;
	opacity: 0.4;
}

.menu-hider {
	display: none !important;
	width: 41px !important;
	height: 41px !important;
	padding: 0px !important;
	line-height: 41px !important;
	margin: 0px !important;
	float: left !important;
}

.menu-hider img {
	width: 41px;
	height: 41px;
	padding: 0px;
	margin: 0px;
}

label[class="positive-radio"] {
	width: 22px !important;
	height: 22px !important;
	display: inline-block !important;
	position: relative !important;
	margin: 2px;
}

label[class="positive-radio"] input[type="radio"] {
	display: none;
}

label[class="positive-radio"] input[type="radio"]+span {
	position: absolute;
	box-sizing: border-box;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(/assets/buttons/like_button.png) no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
}

label[class="positive-radio"] input[type="radio"]:checked+span {
	background: url(/assets/buttons/liked_button.png) no-repeat;
	background-size: 100% 100%;
}

label[class="negative-radio"] {
	width: 22px !important;
	height: 22px !important;
	display: inline-block !important;
	position: relative !important;
	margin: 2px;
}

label[class="negative-radio"] input[type="radio"] {
	display: none;
}

label[class="negative-radio"] input[type="radio"]+span {
	position: absolute;
	box-sizing: border-box;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(/assets/buttons/dislike_button.png) no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
}

label[class="negative-radio"] input[type="radio"]:checked+span {
	background: url(/assets/buttons/disliked_button.png) no-repeat;
	background-size: 100% 100%;
}

label[class="neutral-radio"] {
	width: 22px !important;
	height: 22px !important;
	display: inline-block !important;
	position: relative !important;
	margin: 2px;
}

label[class="neutral-radio"] input[type="radio"] {
	display: none;
}

label[class="neutral-radio"] input[type="radio"]+span {
	position: absolute;
	box-sizing: border-box;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(/assets/buttons/neutral_button.png) no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
}

label[class="neutral-radio"] input[type="radio"]:checked+span {
	background: url(/assets/buttons/neutral_button_pressed.png) no-repeat;
	background-size: 100% 100%;
}

label[class="trash-radio"] {
	width: 22px !important;
	height: 22px !important;
	display: inline-block !important;
	position: relative !important;
	margin: 2px;
}

label[class="trash-radio"] input[type="radio"] {
	display: none;
}

label[class="trash-radio"] input[type="radio"]+span {
	position: absolute;
	box-sizing: border-box;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(/assets/buttons/trashbox.png) no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
}

label[class="trash-radio"] input[type="radio"]:checked+span {
	background: url(/assets/buttons/filled_trashbox.png) no-repeat;
	background-size: 100% 100%;
}

span[class="green-text"] {
	color: green;
	font-size: 12pt;
}

input[class="bigger-checkbox"],
input[class="bigger-checkbox-fixed"] {
	transform: scale(1.3);
}


/* styles for project keywords/links modal table */
.project-keywords-container {
	max-height: 360px;
	overflow: auto;
	padding-top: 8px;
}

.project-keywords-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 6px;
	table-layout: fixed;
}

\n.project-keywords-table th:first-child,
.project-keywords-table td.pk-item {
	width: 50%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

\n.project-keywords-table th:last-child,
.project-keywords-table td.pk-actions {
	width: 50%;
	text-align: center;
	white-space: nowrap;
}

.project-keywords-table th,
.project-keywords-table td {
	border: none;
	padding: 6px;
	font-size: 12pt;
	vertical-align: middle;
}

.pk-system {
	margin-bottom: 10px;
}

.pk-system-title {
	font-weight: 700;
	padding: 8px 6px;
	border: none;
	margin-bottom: 6px;
	text-align: center;
	font-size: 13pt;
}

.pk-actions button.pk-exclude-button {
	margin-right: 6px;
	padding: 4px 8px;
	border: none;
	background: #d9534f;
	color: white;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12pt;
}

.pk-actions button.pk-exclude-button:hover {
	opacity: 0.9;
}

@media screen and (max-width: 900px) {
	:root {
		--text-size: 12pt;
	}

	.page-content .leftbody .two-cols .first div img {
		width: 30%;
		height: 30%;
	}

	.lk-body .leftmenu {
		width: 100%;
		height: auto;
	}

	.lk-body .content {
		width: 100%;
		height: auto;
	}

	.page-content .leftbody {
		width: 100%;
		height: auto;
		margin-bottom: 16px;
	}

	.page-content .rightbody {
		width: 100%;
		padding-left: 0px;
	}

	.menu-hider {
		display: inline-block !important;
	}
}