: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);
}

@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;
	}
}