body, html {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000033;
	cursor: pointer;
}

/*-- Sign Styles --*/
.sign {
	position: fixed;
	top: 0;
	z-index: 100;
	margin-top: 10vh;
	width: 100%;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	height: 35%;
	font-family: sans-serif;
	box-sizing: border-box;
	font-weight: 700;
}
.sign span {
    display: table-cell;
    vertical-align: middle;
}
.content{
	display:table;
	width:100%;
	height:30%;
	padding:0 4px;
	text-align:center;
	box-sizing:border-box;
}
.sign__word {
	text-align: center;
	line-height: 1;
	color: #fff086;
	-webkit-animation: neon .08s ease-in-out infinite alternate;
	animation: neon .08s ease-in-out infinite alternate;
}

/*-- Animation Keyframes --*/
@-webkit-keyframes neon {
  from {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(30, 132, 242, 0.52), 0 0 21px rgba(30, 132, 242, 0.92), 0 0 34px rgba(30, 132, 242, 0.78), 0 0 54px rgba(0, 76, 158, 0.92);
  }
  to {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(30, 132, 242, 0.58), 0 0 22px rgba(30, 132, 242, 0.84), 0 0 38px rgba(30, 132, 242, 0.88), 0 0 60px #004b9c;
  }
}
@keyframes neon {
  from {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(30, 132, 242, 0.52), 0 0 21px rgba(30, 132, 242, 0.92), 0 0 34px rgba(30, 132, 242, 0.78), 0 0 54px rgba(0, 76, 158, 0.92);
  }
  to {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(30, 132, 242, 0.58), 0 0 22px rgba(30, 132, 242, 0.84), 0 0 38px rgba(30, 132, 242, 0.88), 0 0 60px #004b9c;
  }
}

#linkpanel{
	margin-top: 65%;
	position:relative;	
}

#linkpanel a{
	width:33%;
}
#buffname, #buffimage{
	display:none;
}
.frame{
	padding: 12px;
    position: absolute;
    cursor: pointer;
    z-index: 10!important;
 /*   top: 65%;
   left: 30%;
 */ 
	width: 200px;
    height: 300px;
	background: transparent;
    border: none;
 /*   -webkit-perspective: 100px;
    perspective: 20px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);*/
}


.card {
  position: relative;
/*  width: 300px;
  height: 300px;
  margin: 0 auto;
  background: #8056ff;
  font-size: 20px;*/
  transition: 0.6s;
  transform-style: preserve-3d;
}

/* flip the card when hovered */
.card:hover {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #333;
  text-align: center;
/*  padding: 20px;*/
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
}

.front {
 /* background: #8056ff;*/
  transform: rotateY(0deg);
  z-index: 2;
}

.back {
  background: #ffffdd;
  transform: rotateY(-180deg);
}


.frame .card{
/*	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
*/	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #ffff9e;
	border: 5px solid #ffe075;
	background: URL(../images/cardbg.jpg) #d2e7ff;
	border-radius: 20px;
	box-shadow: 0 0 2px rgba(30, 30, 20, 0.5);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
/*	overflow: hidden;*/
	position: relative;
}
.frame .card img{
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
.frame .text {
    text-align: center;
    font-weight: 600;
    line-height: 20px;
    margin-top: 6px;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 10px;
    background: #d2e7ff;
	font-size: 16px;
}

#contextBlock-3 .el-rte-structure{
	background:#00ff00;
}
.el-rte-structure{
	background:#00ff00;
}


html,
body {
    margin: 0;
    overflow: hidden;
    height: 100%;
}
*{
	box-sizing: content-box;
}   
#main_menu{
	position: relative;
    width: 100%;
    height: 60px;
	background-color:#ffa;
	border-bottom:1px solid #7272e0;
}
#wrap {
    width: 100%;
    height: 90vh;
    height: calc(100vh - 65px);
	overflow:auto;
	position:relative;
/*	background: URL(..images/bg/bg.jpg) lavender;*/
	background-size: cover;
	
}
canvas{
	border:solid 1px #ccc;
}

#cnv{
    position: absolute;
    z-index: 1;
    top: 60px;
    background: darkblue!important;
}



#upper-canvas{
	display:none;
}
.container {
left: 0;
margin: auto;
position: absolute;
top: 20%;
width: 100%;
text-align: center;
}
.contextmenu {
position: absolute;
width: 200px;
padding: 2px;
margin: 0;
border: 1px solid #bbb;
background: #eee;
background: -webkit-linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
z-index: 100;
border-radius: 3px;
box-shadow: 1px 1px 4px rgba(0,0,0,.2);
opacity: 0;
-webkit-transform: translate(0, 15px) scale(.95);
transform: translate(0, 15px) scale(.95);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.menu-item {
display: block;
position: relative;
margin: 0;
padding: 0;
white-space: nowrap;
}
.menu-btn {
background: none;
line-height: normal;
overflow: visible;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
display: block;
width: 100%;
color: #444;
font-family: 'Roboto', sans-serif;
font-size: 13px;
text-align: left;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 8px;
border-radius: 3px;
}
.menu-btn::-moz-focus-inner,
.menu-btn::-moz-focus-inner {
border: 0;
padding: 0;
}
.menu-text {
margin-left: 25px;
}
.menu-btn .fa {
position: absolute;
left: 8px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.menu-item:hover > .menu-btn {
color: #fff;
outline: none;
background-color: #2E3940;
background: -webkit-linear-gradient(to bottom, #5D6D79, #2E3940);
background: linear-gradient(to bottom, #5D6D79, #2E3940);
border: 1px solid #2E3940;
}
.menu-item.disabled {
opacity: .5;
pointer-events: none;
}
.menu-item.disabled .menu-btn {
cursor: default;
}
.menu-separator {
display:block;
margin: 2px 5px;
height:1px;
border-bottom: 1px solid #fff;
background-color: #aaa;
}
.menu-item.submenu::after {
content: "";
position: absolute;
right: 6px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: 5px solid transparent;
border-left-color: #808080;
}
.menu-item.submenu:hover::after {
border-left-color: #fff;
}
.menu .menu {
top: 4px;
left: 99%;
}
.show-menu,
.menu-item:hover > .menu {
opacity: 1;
-webkit-transform: translate(0, 0) scale(1);
transform: translate(0, 0) scale(1);
pointer-events: auto;
}
.menu-item:hover > .menu {
-webkit-transition-delay: 100ms;
transition-delay: 300ms;
}
#language_service{
	position:absolute;
	z-index: 1020;
	top:0;
	right: 12px;
}
#language_service img{
    width: 22px;
    padding: 4px 0 0 1px;
	cursor: pointer;
}
#langmenu{
	position: absolute;
    z-index: 1000;
    left: -1px;
    top: 27px;
    border: solid 1px #bababa;
    width: 25px;
}
.langbutton{
	width: 25px;
    height: 19px;
    display: inline-block;
    background-size: contain;
    float: left;
    margin: 1px 0;
}
.bootbox-confirm{
	z-index:1700!important;
}
.modal-backdrop{
	z-index:1600!important;
}
.confirm{
	background-image: url(../images/attention.png);
	width:120px;
	height:120px;
	float:left;
}
#en{
	background-image: url(../images/en.gif);
}
#ua{
	background-image: url(../images/ua.gif);
}
#ru{
	background-image: url(../images/ru.gif);
}
#node_properties{
	position: fixed;
	top:60px;
	right:10px;
	height: 300px;
	width: 120px;
	background-color:RGBA(0,0,0,0.5);
	display:none;
}

.close{
	border: 1px solid #333 !important;
    opacity: .5;
    width: 21px!important;
    height: 22px!important;
    border-radius: 50%;
    cursor: pointer;
    background: url(../images/delete.gif) 24px -13px #fff;
	display:none;
}
.close:hover{
    opacity: .9;
}	
.closeContextBlock{
	    background: url(../images/delete.gif) 26px -11px #fff;
		margin-right: 12px!important;
}
#panel_properties_close{
		position: absolute;
}
.popup{
	position: absolute;
	border: 1px solid;
	background-color:#ffffdd;	
	z-index:1500;
}
.modal {
    z-index: 1650!important;
}
#context, #viewercontext{
    width: 95%;
    height: 95%;	
	left: 2.5%;
	top: 2.5%;
	overflow: auto;
	display:none;
}

#substrate{
	display:none;
	position: fixed;
    width: 100%;
    height: 100%;	
	left: 0;
	top: 0%;
	z-index:1200;
	background-color:RGBA(0,0,0,0.85);
}
#objectname, #objectcolor, #objectclass, #classselector, #objectleft, #objecttop{
	position: absolute;
	display:none;
	width:228px;	
	padding: 0;
}
#defaultobjectcolor{
	width:24px;
	height:24px;
	border-radius:50%;
	position: absolute;
	cursor: pointer;
	display:none;
}
#objectcolor{
		width:100px;	
}
#objectleft, #objecttop{
		width:50px;	
}
#manage{
	height:100%;
	width:220px;
	display:block;
	float:left;
	margin: 0;
	border-right: 1px solid #bbb;
	background: #eee;
	background: -webkit-linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
	background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
}
#content {
    height: 100%;
    box-sizing: border-box;
    display: flow-root;
    overflow: auto;
}
.imglock{
	width: 26px;
    height: 25px;
    display: inline-block;
    vertical-align: top;
    margin: 0 2px 0 -4px;
	cursor:pointer;
}
.lock{
	background: url(../images/lock.png) 25px -12px;
}
.unlock{
	background: url(../images/open_lock.png) 25px -12px;
}
.button{
	float: left;
    height: 51px;
    width: 51px;
    margin: 3px;
	border: 1px solid rgb(228, 228, 154);
	cursor:pointer;
	box-shadow:1px 1px 1px #666;
}

#text_login {
    position: absolute;
    color: aqua;
    font-size: 12px;
    width: 70px;
    text-align: center;
}

.button:hover{
	margin: 4px 3px 0px 3px;
	box-shadow:1px 1px 0px #ccc;
}
.button.disabled{
	opacity: 0.3;
    cursor: default;
	box-shadow:1px 1px 0px #ccc;
}
.button.disabled:hover{
	margin: 3px;
}
#logoutfield{
    position: absolute;
    display: none;
    border: solid 2px #006000;
    background: #000060;
    top: 86px;
    left: 903px;
    height: 78px;
    width: 78px;
    border-radius: 50%;
    z-index: 100;
	cursor:pointer;
}
#logout_title{
	margin: 24px 12px;;
    color: #ffffdd;
    font-size: 20px;
	cursor:pointer;
}
#login_title{
	margin: 24px 0px -38px 53px;
    color: #ffffdd;
    font-size: 26px;
}
#loginfield{
    position: absolute;
    display: none;
    border: solid 2px #006000;
    background: #000060;
    top: 83px;
    left: 378px;
    height: 198px;
    width: 198px;
    border-radius: 50%;
	z-index: 99;
}
#loginfield label{
	color: #ffffdd;
}
#login_body{
	margin: 60px 0 0 0;
    width: 194px;
    text-align: right;
}
#username, #userpassword{
    line-height: 12px;
    width: 106px;
}
#cancelpassword{
	background: url(../images/cancel.gif) 25px -12px;
    margin: 16px 32px;
    border-radius: 50%;
    width: 25px;
    float: left;
    height: 25px;
    cursor: pointer;
}
#testpassword{
	background: url(../images/somebody.gif) 25px -12px;
    margin: -1px 7px;
    border: solid 1px #ffffdd;
    box-shadow: 1px -1px 0px #ffffff;
    border-radius: 50%;
    width: 25px;
    float: left;
    height: 25px;
    cursor: pointer;
}
#setpassword{
    float: left;
    margin: 12px -15px;
    color: #ffffdd;
    border: solid 1px #006000;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #d5d597;
}
#setcanvassize{
	display: none;
    position: fixed;
    top: 60px;
    left: 60px;
    background: linear-gradient(0deg, #e4e4e4, #c0e0fe);
    height: 164px;
    border: solid 1px #60a8e0;
    width: 210px;	
}
.insetcanvas{
    width: 50%;
    height: 40px;
    float: left;
}
#setcanvassize input{
	width:80%;
	margin-top: 0px;
}
#cancel_button, #set_button{
    background: #deefff;
    border-radius: 6px;
    border: 1px solid #b6dcfe;
    height: 30px;
    width: 84px;
    float: left;
    margin: 5px;
    line-height: 28px;
    text-align: center;
    box-shadow: 1px 1px 1px #333;
	cursor:pointer;
}
#cancel_button:hover, #set_button:hover{
margin: 6px 4px 4px 6px;	
box-shadow: 0px 0px 1px #333;
}

#userhello{
	color: #ffffdd;
    display: none;
    margin: 65px 10px 0;
    text-align: center;
    font-size: 20px;
}
#usershow{
	color: #ffffdd;
    display: none;
    margin: 21px 10px 0;
    text-align: center;
    font-size: 24px;
    overflow-x: auto;
    white-space: nowrap;
	min-height: 32px;
}
#go_home{
    background: url(../images/home_page.gif) #f0f0a0;
}
#cabinetshow{
    background: url(../images/cabinet.gif) #f0f0a0;
}
#load_ontos{
    background: url(../images/upload.gif) #f0f0a0;
}
#save_ontos{
    background: url(../images/download.gif) #f0f0a0;
}
#btn_gohome{
    background: url(../images/home_page.gif) #f0f0a0;
}
#btn_filter{
    background: url(../images/filter_g.gif) #f0f0a0;
}
#btn_search{
    background: url(../images/explore.gif) #ffffee;
}
#btn_sortaz{
    background: url(../images/sort_cyr_a-z.gif) #ffffee;
}
#btn_sortza{
    background: url(../images/sort_cyr_z-a.gif) #ffffee;
}
#btn_settings{
    background: url(../images/options.gif) #f0f0a0;
	display:none;
}
#btn_info{
    background: url(../images/info.gif) #ffffee;
}
#go_viewer{
    background: url(../images/viewer.gif) #f0f0a0;
}
#new_ontos{
    background: url(../images/new_document.gif) #f0f0a0;
}
#size_canvas{
    background: url(../images/canvas_size.gif) #f0f0a0;
}
#add_ontos{
    background: url(../images/upload_add.png) #f0f0a0;
}
#service{
    background: url(../images/options.gif) #f0f0a0;
}
#manage_menu{
	height:36px;	
}



.smallbutton{
	float: left;
    height: 25px;
    width: 23px;
    margin: 2px;
	border: 1px solid rgb(228, 228, 154);
	cursor:pointer;
	box-shadow:1px 1px 1px #666;
}
.smallbutton:hover{
	margin: 3px 1px 1px 3px;
	box-shadow:1px 1px 0px #ccc;
}	
.sliderobjectstext{
	cursor:pointer;
	position: absolute;
    font-weight: 600;
    text-shadow: 0px 0px 6px #ffffdd;
    color: #000a40;
    max-width: 100%;
    min-width: 100%;
    max-height: 100%;
    overflow: hidden;
    z-index: 10;
    top: 6px;
}
.sliderobjects img, .dbimage img{
	height: auto;
    width: auto;
    max-width: 99%;
    max-height: 99%;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
	z-index: 5;
	border-radius: 12px;
    border: solid 4px #807e89;
}
#searchPanel_close{
    right: 1px;
    top: 1px;
    position: absolute;
    display: block;
}
.dbimage.in img{
	position: relative;
    transform: translate(0, 0);
	left:0;
	top:0;
}

.menu-btn{
	box-sizing: border-box;
}
.sliderobjects {
    display: inline-block; /* Строчно-блочный элемент */
    position: relative; /* Относительное позиционирование */
	background-size:cover!important;
   }
.sliderobjects:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
/*     left: 0; top: 10px; Положение подсказки */
    z-index: 12; /* Отображаем подсказку поверх других элементов */
    background: rgba(255,255,230,0.9); /* Полупрозрачный цвет фона */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 11px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
	width:120px;
	max-width:100%;
	top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
   }
   
#viewerpopup_indicator{
	background: url(../images/grey_point.gif) 25px -12px;
	display:none;
	width:28px;
	height:28px;
	float:right;
}
#viewerpopup_save{
	background: url(../images/save.gif) 25px -12px;
	display:none;
	float:right;
}
#viewerpopup_pdf{
	background: url(../images/pdf.gif) 25px -12px;
	display:none;
	float:right;
}
#viewerpopup_home{
	background: url(../images/pdf.gif) 25px -12px;
	float:right;
}   
#newcontextblock{
	background: url(../images/new_document.gif) 25px -12px;
}
#savecontextblock{
	background: url(../images/save.gif) 25px -12px;
}
#saveandexitcontext{
	background: url(../images/save_and_exit.png) 25px -12px;
}
#exitwithoutsavecontext{
	background: url(../images/exit.gif) 25px -12px;
	margin-right: 6px;
}
#tocover{
	background: url(../images/book.gif) 25px -12px;
	float:left;
}
#tohome{
	background: url(../images/home_page.gif) 25px -12px;
	float:left;
}
#toservise{
	background: url(../images/options.gif) 25px -12px;
	float:left;
}
#fullscreen{
	background: url(../images/display.gif) 25px -12px;
}
#changeface{
	background: url(../images/image.gif) 25px -12px;
	float:left;
}
#popupdata{
	background: url(../images/script.gif) 25px -12px;
}
#downlevel{
	background: url(../images/go_down.gif) 25px -12px;
}
#uplevel{
	background: url(../images/go_up.gif) 25px -12px;
}
#mainscreennavigatortext{
	float: left;
    text-align: center;
    overflow: auto;
    white-space: nowrap;
    line-height: 25px;
    margin-left: 1px;
	font-weight: bold;
    font-size: 14pt;
    text-shadow: 1px 1px 1px #ffffdd;
}
#toleft{
	background: url(../images/toleft.png) #ffffff;
    opacity: .35;
    border-radius: 50%;
	background-size: cover;
	position: absolute;
    width: 60px;
    height: 60px;
    z-index: 100;
	display:none;
	cursor:pointer;
}
#toleft:hover{
	opacity: .75;
}

#toright{
	background: url(../images/toright.png) #ffffff;
    opacity: .35;
    border-radius: 50%;
	background-size: cover;
	position: absolute;
    width: 60px;
    height: 60px;
    z-index: 100;
	display:none;
	cursor:pointer;
}
#toright:hover{
	opacity: .75;
}
#bottompanel{
	position: absolute;
	display:none;
	height: 34px;
}
#bottomtoleft, #bottomtoright {
    text-align: center;
    font-size: x-large;
    font-weight: 700;
    cursor: pointer;
    height: 32px;
    line-height: 32px;
    margin: 1px;
    float: left;
    border-radius: 0 6px 6px 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 5px 3px 10px 1px #666, 0 1px 4px rgb(0 0 0 / 79%), 4px 5px 16px 10px rgb(190 187 208 / 75%) inset;
}
#bottomseparator{
	height:32px;
	width:28px;
	margin:1px;
	float:left;
	background: url(../images/bottomseparator.png);
}
.textariaView, .stringView{
	width:100%;
}

.textariaView{
    min-height: 200px;
}

.smallbutton.disabled{
	opacity: 0.5;
	box-shadow: 1px 1px 1px #666;
	cursor: no-drop;
}
.smallbutton.disabled:hover{
	margin:2px;
}
.toBottomContextBlock{
	background: url(../images/bottom.gif) 25px -12px;
	margin-right: 6px;
}
.toBottomContextBlock:hover{
	margin-right: 5px;
}	
.toDownContextBlock{
	background: url(../images/down.gif) 25px -12px;
	margin-right: 2px;
}
.toUpContextBlock{
	background: url(../images/up.gif) 25px -12px;
	margin-right: 2px;
}
.toTopContextBlock{
	background: url(../images/top.gif) 25px -12px;
	margin-right: 2px;
}
.propertiesButton{
	background: url(../images/apply.gif) 25px -12px;
	margin: -2px 2px;
	display:none;
}
.propertiesButton:hover{

	margin: -1px 3px;
}
.titleContentBlock{
	height: 30px;
    width: 100%;
    background: #e5e5e5;
}
.contentblock{
	height: max-content;
	border: 1px solid #ccc;
    display: grid;
}
.bodyContentBlock{
    width: 100%;
    background: #f0f0f0;	
}
iframe{
	background: #fcfcfc;
}
.right{
	float:right;
}
.bodyContentBlock textarea{
	width:99%;
	height:200px;
	background: #ffffdd;
}
.hyperlinkBackground{
	padding:12px;
}
.hyperlinkBackground input{
	width:360px;
}
.imgContext{
	float:left;
}
#editor {
    top: 0px;
    margin: 0px;
	display:none;
}
#editorblock{
	
}
#editor > div{
	width:99.5%!important;
}
.nameContextBlock{
	width:420px;
}
label[for="nodename"]{
	margin-left:6px;
}
.nodename{
	width:98%;
}
.idContextBlock{
	display:none;
}
iframe{
	box-sizing: border-box;
}
.hyperlink{
	width:354px;
}
.propertiesContextBlock{
	display: block;
	float:left;
}
.wallFaceCheck{
	float:right;
	display:none;
}
#contentMenu{
    position: absolute;
	z-index: 120;
    width: 326px;
    top: 63px;
    left: -327px;
    border: solid 1px #7272e0;
    height: 90vh;
    background: #ffffdd;
    height: calc(100vh - 65px);
	-webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
}
#contentMenuField{
 	height: 99vh;
    background: #ffffdd;
    overflow: auto;
  /*  height: calc(100vh - 62px);*/
  height: 100%;
}
#contentMenuButton {
 /*   background: #0000c8;
    opacity: .95;
    height: 32px;
    width: 180px;
    position: absolute;
    border: solid 1px #1b711b;
    left: 252px;
    top: 134px;
    border-radius: 0 0px 12px 12px;
    cursor: pointer;
    color: #ffffdd;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    font-size: 29px;
    text-align: center;
    line-height: 28px;*/
	position: absolute;
    left: 324px;
    top: 10%;
	line-height: 1.3;
    cursor: pointer;
    text-align: center;
    font-size: 130%;
    font-weight: bold;
    margin: 6px;
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    writing-mode: tb-rl;
    width: 32px;
    height: 136px;
    border-collapse: separate;
    -webkit-background-origin: border !important;
    -moz-background-origin: border !important;
    background-origin: border-box !important;
    -webkit-box-shadow: 0 8px 5px -5px rgb(0 0 0 / 50%), 0 1px 4px rgb(0 0 0 / 30%), 0 0 30px rgb(0 0 0 / 10%) inset;
    -moz-box-shadow: 0 8px 5px -5px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 8px 5px -5px rgb(0 0 0 / 50%), 0 1px 4px rgb(0 0 0 / 30%), 0 0 30px rgb(0 0 0 / 10%) inset;
    color: #000;
    text-shadow: 0 1px 0 #f3f3f3;
    background: #ededed;
    border: solid 1px #cfcfcf;
}
.contenlistfield{
	height: calc(100% - 4px);
	width:calc(100% - 4px);
}

#mainscreen{
	position:absolute;
	border-radius: 12px;
	border: 2px  solid rgb(0, 0, 200);
	background-color: #ffffdd;	
	overflow: auto;
	box-shadow: 6px 5px 15px #000;
}
#mainscreenfield{
	width: 100%;
    min-height: 99%;
    background-color: transparent;
    padding-top: 3px;
    text-align: center;
    background-size: cover;
}
#mainscreennavigator{
	display:none;
	position:absolute;
}
#viewercontext_title{
    height: 32px;
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    overflow: auto;
    font-weight: bold;
    padding: 0 30px;
    background: #ffffcc;
    border-bottom: 1px solid rgb(0, 0, 200);
}
#viewerpopup_close{
    display: block;
    position: sticky;
    right: 3px;
    top: 3px;
}
#mainscreenfield .face{
	margin: 0;
    border: none;
    width: 100%;
	height: 100%;
    left: 0;
    position: absolute;
}
.infase{
	top: 20px;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size: xx-large;
}
.sliderobjects{
	margin:1px;
	border-radius: 6px;
	border: 2px  solid rgb(0, 0, 200);
	background-color: #beebff;
	display:inline-block;
	vertical-align: middle;
	/*overflow: hidden;*/
	cursor:pointer;
	position: relative;
    word-break: break-word;
}
.sliderobjects span {
    display: inline-block;
    width: 98%;
    height: 97%;
    border-radius: 6px;
    position: relative;
    margin: 1%;
}

.sliderobjects span:hover {
    box-shadow: inset 2px 2px 10px rgb(0, 0, 0), 1px 1px 7px rgba(255, 255, 255, 1);
}


.dbimage{
    float: left;
    padding: 6px;
    margin: 2px 12px 2px 2px;
    border: solid 1px #7272e0;
    border-radius: 6px;
    background: #ffffcc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset -2px -2px 2px rgb(200, 200, 251);
    max-width: 30%;
}

.dbcaption{
    display: block;
    font-weight: 700;
    padding: 6px;
    text-align: justify;
}
.dbtext{
    display: block;
    padding: 6px;
    text-align: justify;
    text-indent: 1cm;
}
.datablock{
    background: #ffffdd;
    display: inline-block;
    border-bottom: solid 1px #7272e0;
    padding-bottom: 6px;
    margin-bottom: 12px;
	width: 95%;
	width: calc(100% - 24px);
}
.viewercontent{
	display: inline-block;
}
#viewercontent{
	padding:0 20px;
}
.hide{
	display:none;
}

label.titlewall  {
	display:none
}

#cabinet{
	display:none;
	width: 95%;
    height: 95%;
    left: 2.5%;
    top: 2.5%;
    overflow: auto;
}
#cabinettop{
	width: 100%;
    float: right;
    text-align: right;
}
#cabinetcontent{
	display: block;
    height: calc(100% - 41px);
    float: left;
    width: calc(100% - 8px);
    border: ridge 5px #006000;
}
#cabinetleft{
	background: white;
    float: left;
    height: 100%;
    width: calc(35% - 3px);
    border-right: ridge 3px #006000;
}
#cabinetright{
	float: left;
    height: 100%;
    background: white;
    width: 65%;
}
#projectfield{
}
#projectmenu{
	background: #ffffcc;
    display: block;
    float: left;
    width: 100%;
}
#folderproject{
}
.projectline{
	display: block;
    float: left;
    width: 100%;
    background: aliceblue;
    line-height: 32px;
    padding: 2px 0px;
    border-bottom: solid 1px #c1cccc;
    border-right: ridge 3px #006000;
}
input.plcheck{
	 margin: 6px 0 0 10px;
}
.plcheck, .plname, .plfilename{
	float:left;
	height:22px;
}
.plicon{
	float:left;
    width: 30px;
    height: 32px;
    background: url(../images/structure.gif) 29px -9px;
    border: solid 1px #c1cccc;
    margin: 0 10px;
}
.plname{
    margin-top: 5px;
}
.plfilename{
    border: none;
}
#foldermenu{
	background: #ffffcc;
    display: block;
    float: left;
    width: 100%;
}
.level{
	 background: url(../images/structure.gif) 25px -12px;
    position: absolute;
    right: 6px;
    top: 6px;
    border-radius: 4px;	
	z-index:100;
}
#cabinethelp{
	float: right;
    margin-right: 12px;
	background: url(../images/question.gif) 25px -12px;	
}
#userprofile{
	float: right;
	background: url(../images/user_info.gif) 25px -12px;	
}
#create_project{
	background: url(../images/script_1.gif);
}
#save_project{
	background: url(../images/save_current_project.jpg);
}
#edit_project{
	background: url(../images/edit_project.jpg);
}
#open_project{
	background: url(../images/notes.gif);
}
#upload_project{
	background: url(../images/script_1_upload.gif);
}
/*
#save_project{
	background: url(../images/bottom.gif);
}
*/
#download_project{
	background: url(../images/script_1_download.gif);
}
#export_project{
	background: url(../images/script_1_export.gif);
}
#delete_project{
	background: url(../images/script_1_delete.gif);
}
#upload_object{
	background: url(../images/upload_image_1.gif);
}
#download_object{
	background: url(../images/download_image_1.gif);
}
#delete_object{
	background: url(../images/image_1_delete.gif);
}
#create_folder{
	background: url(../images/new_folder.gif);
}
#extract_archives{
	background: url(../images/archive.gif);
}
#select_all_object{
	background: url(../images/order.gif);
}
#stylevisualisation_object{
	background: url(../images/bottom.gif);
}
#textmenu{
	position:absolute;
	width: 150px;
    height: 96px;
    padding: 0;
	background:white;
	border:solid 1px #000060;
	top:200px;
	left:200px;
	z-index:2000;
	display:none;
}
#textmenu div{
	width: 150px;
    height: 30px;
    text-indent: 50px;
    background-repeat: no-repeat;
    line-height: 27px;
    cursor: pointer;
    border: solid 1px #ddd;
}
#textmenucut{
	background: url(../images/cut3.png);			
}
#textmenucopy{
	background: url(../images/copy3.png);	
}
#textmenupaste{
	background: url(../images/paste3.png);	
}
   ::-webkit-scrollbar{
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb{
    border-width:1px 1px 1px 2px;
    border-color: #1414cc;
    background-color: #7c7ce2;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:hover{
    border-width: 1px 1px 1px 2px;
    border-color: #1414cc;
    background-color: #7c7ce2;
}
::-webkit-scrollbar-track{
    border-width:0;   
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
::-webkit-scrollbar-track:hover{
    border-left: solid 1px #aaa;
    background-color: #eee;
} 

/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}


/* =============================================================================
   My CSS
   ========================================================================== */

/* ---- base ---- */
/*
html,body{ 
	width:100%;
	height:100%;
}

html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body{
  font:normal 75% Arial, Helvetica, sans-serif;
}
*/
canvas{
  display:block;
  vertical-align:bottom;
}


/* ---- stats.js ---- */

.js-count-particles{
  font-size: 1.1em;
}

#stats,
.count-particles{
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats{
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles{
  border-radius: 0 0 3px 3px;
}
#setting{
	width: 95%;
    height: 95%;
    left: 2.5%;
    top: 2.5%;
    overflow: auto;
    display: none;
	padding: 0 2px;
    border-radius: 20px 20px 0 0;
    background-color: #262616;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 14px;
}
#field_collection, #field_viewer{
	height:100%;	
	background: #ffffee;
	width: 49%;
    width: calc(50% - 3px);
    display: block;
}
#field_collection{
	border-right: solid 2px #ccc;
    border-radius: 0 22px;
	float:left;
}
#field_viewer{
	border-left: solid 2px #ccc;
    border-radius: 22px 0;
	float:right;
}
#caption_collection, #caption_viewer{
    height: 32px;
    width: 100%;
}
#content_collection, #content_viewer{
	height: calc(100% - 130px);
    border: solid 4px #f1f1dd;
    width: calc(100% - 46px);
    margin: 10px;
	padding: 10px;
    border-radius: 12px 12px 0 12px;
	overflow:auto;
}
#content_viewer{
	    border-radius: 12px 12px 12px 0;
}    
/*#cc_default, #cc_image, #cc_background{*/
.insettingzone{
	min-height: 60px;
    border: solid 1px #ccc;
    border-radius: 12px;
    padding: 4px;
    margin-top: 12px;
    border-style: outset;
    background: aliceblue;
	display: grid;
    display: flow-root;
}
#caption_cc_default, #caption_cc_image, #caption_cc_background{
	width: 60%;
    height: 20px;
    border-bottom: solid 1px #ccc;
	margin: 0 0 6px 0;
}

#content_cc_cancel, #content_cc_apply, #content_filter_cancel, #content_filter_apply{
    border: solid 1px #ccc;
    border-style: outset;
    width: 160px;
    line-height: 32px;
    float: right;
    margin: 2px 10px;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    background: aliceblue;
}
#content_cc_cancel:hover, #content_cc_apply:hover, #content_filter_cancel:hover, #content_filter_apply:hover{
	border-style: inset;
}
#main_menu_captions{
    font-family: sans-serif;
    font-size: 32px;
    font-weight: 600;
    width: calc(100% - 310px);
    text-align: center;
    line-height: 58px;
    color: darkblue;
    text-shadow: 1px 1px 2px #ae6939;
}
#filter{
    width: 50%;
    height: 320px;
    left: 50%;
    top: 60px;
    margin-left: -25%;
    border: solid 2px #ccc;
    border-radius: 20px;
    padding: 10px;
    display: none;
}
#filter_classes .settingtext {
    min-width: 350px;
}
#filter_classes{
    margin: 20px 0;
    border: solid 1px #ccc;
    border-radius: 12px;
    padding: 12px;
}
#filter-0 {
    border-bottom: solid 1px #ccc;
    margin-bottom: 12px;
}
#cc_brdr_width{
	width: 30px;
    float: left;
}
#cc_brdr_color_text{
    width: 92px;
}
#cc_brdr_color{
    width: 32px;
}
.setting {
    width: 100%;
	height: 29px;
    line-height: 22px;
    text-transform: none;
    text-indent: 12px;
}
.settingtext {
    margin-top: 3px;
    margin-left: 18px;
    width: 177px;
    text-align: left;
	float: left;
}
.searcher .settingtext{
    float: none;
}
.settinginput{
    float: left;
	height: 18px;
	width: 96px;
}
input.searcher{
	float:left;
}
form.searcher{
    float: left;
    width: 278px;
}
#formfill{
/*	display:contents;*/
}
#searchPanel{
position: absolute;
    top: 90px;
    left: 10px;
    background-color: #ffffcc;
    height: 120px;
    width: 420px;
    padding: 2px;
    border: 1px solid #000080;
    border-radius: 3px 12px 3px 3px;
	display:none;
}

.panelCaption {
    width: calc(100% - 4px);
    height: 18px;
    background-color: #337ab7;
    font-size: 14px;
    /* font-weight: 600; */
    padding: 4px 0 0 4px;
    border-bottom: solid 2px #b2b288;
    border-top-right-radius: 8px;
    cursor: move;
    color: white;
}
#search_text{
	height: 20px;
    margin-bottom: 4px;
    width: 380px;
}

#search_btn{
	height: 30px;
    width: 68px;
    line-height: 28px;
    padding-left: 36px;
    background: url(../images/explore.gif) no-repeat -49px -7px #ffffff;
    margin-left: 3px;
}
#filter_inform{
	position: absolute;
	width:200px;
	height:20px;
	background-color:#FFFFFF;
	bottom:0;
	right:0;
}
#pattern_viewer{
	border: 2px outset #ccc;
    width: calc(100% - 290px);
    height: 96px;
    display: inline-block;
	overflow:auto;
}
#pattern_viewer.active{
	border: 2px outset #0075ff;
}
#pattern_field{
	min-width: 100%;
	height: 90px;
	background-color:#ffffff;
	display: flex;
}
.objectfield{
	float:left;
}
.objectfield.active{
	background-color:#0075ff;
}
.objecticon{
	height:59px;
	width:76px;
	margin:10px	10px 4px 10px;
	background-repeat: no-repeat;
    background-size: contain;
	border:1px solid #000080;
}
.objectname{
	text-align:center;
}
.sorrow{
/*	background: url(../images/eye.gif);*/
	max-width:50%;
	max-height:50%;
	position:absolute!important;
	right:0;
	z-index: 100;
}
#structure_reload, #cw_login{
	height: 30px;
    width: 68px;
    line-height: 28px;
    padding-left: 36px;
    background: url(../images/refresh.gif) no-repeat -49px -7px #ffffff;
    margin-left: 3px;
}
#structure_reload, #cw_login:hover{
	margin-bottom:2px;
}
#cw_login{
    background: url(../images/apply_user.gif) no-repeat -52px -11px #ffffff;
    height: 26px;
}

#contentOVC{display:none}

/*************************ontosContainer*******************************/

#ontosContainer{
	width: calc(100% - 6px);
    height: 100%;
}

#ontosContainer  div{
	box-sizing: border-box;
}
#headerBlock{
    width: 100%;
    display:table;
}
#leftBlock{
	position:relative;
	float:left;
}

#rightBlock{
position:relative;
	float:right;
}
.ontosGroup{
/*width:calc(100% - 66px);*/
	float:left;
}
#topBlock, #bottomBlock{
	width:100%;
}

#topBlock div{
	border:none;
}

#mainBlock{
	position:relative;
	width:100%;
	overflow: auto;
}

#footerBlock{
	width:100%;
	float: left;
}

#toLeft{
	background: url(../images/toleft.png) #ffffff;
    opacity: .35;
    border-radius: 50%;
	background-size: cover;
	position: absolute;
    width: 60px;
    height: 60px;
    z-index: 100;
	display:none;
	cursor:pointer;
}
#toLeft:hover{
	opacity: .75;
}
.smallbutton.level{
	position: absolute;
    bottom: 2px;
    right: 2px;
	background: url(../images/structure_3.png) 25px -12px;
}

#toRight{
	background: url(../images/toright.png) #ffffff;
    opacity: .35;
    border-radius: 50%;
	background-size: cover;
	position: absolute;
    width: 60px;
    height: 60px;
    z-index: 100;
	display:none;
	cursor:pointer;
}
#toRight:hover{
	opacity: .75;
}
.bblmLine{
    display: inline-block;
    float: none;
}
.bblmCheck{
    border: solid 1px #ccc;
    width:20px;
    padding: 0 0 4px 4px;
    height: 17px;
}
.bblmTitle{
    border: solid 1px #ccc;
    width: 115px;
    padding: 0 0 4px 4px;
    text-align: center;
     height: 17px;
}
.bblmIdentifier{
    border: solid 1px #ccc;
    width: 496px;
    padding: 0 4px 4px 4px;
    text-align: right;
     height: 17px;
}
.upd, .upd:focus-visible{
    border: none;
    background: #ededed;
}
.bblmH{
    border: solid 1px #ccc;
    width: 115px;
    padding: 0 0 4px 4px;
    text-align: left;
    height: 17px;
}
.contentDate{
    padding: 2px;
    border-radius: 5px;
    border: 1px solid #767676;
    margin: 4px 13px;
    float: none;
}
#bblmLine{
    font-weight: 600;
    text-align: center;
    margin-top: 6px;
}
.bblmBlock input{
    height:15px;
}
.addressScopus, .addressWoS{
    float: revert;
}

.refresh{
 	background: url(../images/refresh.gif) 25px -12px;
}

/*************************bookScreen*******************************/

#bookScreen{
	position:absolute;
	border-radius: 12px;
	border: 2px  solid rgb(0, 0, 200);
	background-color: #ffffdd;	
	overflow: auto;
	top:0;
	left:0;
}


#mainscreenfield{
	width: 100%;
    min-height: 99%;
    background-color: transparent;
    padding-top: 3px;
    text-align: center;
    background-size: cover;
}
#OCNavigator{
	
}

#OCNavigatorText{
	float: left;
    text-align: center;
    overflow: auto;
    white-space: nowrap;
    line-height: 28px;
    margin-left: 3px;
}
#RecaptchaField2{
    margin: 8px;
    display: inline-table;
}
/*************************mainscreennavigator*******************************/
/*Деревовидний список*/
.readingRoom{
    font-size:12pt!important;
}
.readingRoomTitle{
    text-align: center;
    font-weight: 700;
    color: #286090;
    border-bottom: solid 1px;
    padding-bottom: 8px
}

.readingRoom div {
  position: relative;
  margin: 0 0 0 .5em;
  padding: 0 0 0 1.2em;
  line-height: 2em;
}

.readingRoom summary { /* стилями можно задать любую форму */
    width: 1em;
    height: 1em;
    line-height: 1em;
    text-align: center;
    background: #fff;
    cursor: pointer;
    border: solid 1px #1a73e8;
}

.readingRoom details[open] summary { /* убрать рамку при фокусе */
  outline: none;
}

details summary:before {
content: "+";
}

details[open] > summary::before {
content: "-";
}

.readingRoom summary::-webkit-details-marker {
display: none!important;
}

.decor {
    width: 80px;
    border-radius: 50%;
    border: solid 2px #83c6fd;
    margin-right: 10px;
    float: left;
    cursor: pointer;
    display:none;
}
.RRL {
    display:block;
    float:none;
}
.readingRoom div.RRelement {
    margin-left: 40px;
}
.RRelement:before {
  content: "";
    position: absolute;
    top: 0!important;
    left: 0;
    width: 1.1em;
    height: 1em;
    border-bottom: 1px solid #1a73e8;
}
.RRelement:not(:last-child) { /* необязательно */
  border-left: 1px solid #1a73e8;
}
.RRelement:last-child:before { /* необязательно */
  border-left: 1px solid #1a73e8;
}
.levelname{
    padding: 0!important;
    margin: 0px 0px -24px 27px!important;
    overflow: hidden;
    cursor: pointer;
    display:block;
}
/*
.levelname:before, .level-2:before {
    border-bottom: none!important;
}
*/
.lPTLine{
    border-bottom:solid 1px #aaa;
    cursor:pointer;
}
.lPTLine.sel{
    background-color: #e1f5ff;
}
.lptop{
    width: 100%;
    border-bottom: solid 1px #aaa;
    border-left: solid 1px #aaa;
    height: 22px;
    float: left;
    display: block
}
.lpbottom{
    width: 100%;
    border-top: solid 1px #aaa;
    border-left: solid 1px #aaa;
    height: 40px;
    float: left;
    display: block
}
.lpcontent{
    height: calc(100% - 4px);
    display: inline-block;
    width: calc(100% - 161px);
}
.lpcard{
    width: calc(50% - 1px);
    border-left: solid 1px #aaa;
    height: calc(100% - 60px);
    float: left;
    text-align:center;
}
.lpleft{
    width: 160px;
    height: 100%;
    float: left;
    overflow-y: auto;
}
.cardContentFront{
    height: 48px;
    max-height:80px;
}
.cardContentBack{
    height: 256px;
    margin-top:14px;
    max-height:275px;
}
.contextcard{
    width: 200px;
    border: solid 2px #aaa;
    border-radius:6px;
    height: 300px;
    float: left;
    text-align:center;
    margin:6px;
}

fieldset {
    margin: 4px;
    padding: 4px;
    border: 1px solid #919B9C;
    font-family: Verdana, Arial;
    font-size: 12px;
}
input.fGInput {
    margin-right: 12px;
}
.objFrame {
    position: absolute;
    z-index: 10!important;
    background: transparent;
    border: none;
}   
.objCard{
    position: relative;
    transition: 0.6s;
    transform-style: preserve-3d;
    border-radius: 12px;
    cursor: pointer;
    
  /*  border-radius: 12px;
    box-shadow: 6px 6px 16px #777;
    cursor: pointer;
    overflow: hidden;
    display: inline-block;*/
}   
.objCard:hover {
    transform: rotateY(180deg);
}
.objFrame .objCard {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  /*  background-color: #ffff9e;
    border: 5px solid #ffe075;
    background: URL(../images/cardbg.jpg) #d2e7ff;
    border-radius: 20px;
    box-shadow: 0 0 2px rgb(30 30 20 / 50%);
    -webkit-transform-origin: 50% 50%;
  */  transform-origin: 50% 50%;
    /* overflow: hidden; */
    position: relative;
}
.frontSide, .backSide{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #333;
    text-align: center;
    /* padding: 20px; */
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    box-shadow: 6px 6px 16px #777;
   }
.frontSide{
    transform: rotateY(0deg);
    z-index: 2;
} 
.backSide{
    background: #ffffdd;
    transform: rotateY(-180deg);
}
.frontSideImage {
    height: auto;
    display: block;
    width: 95%;
    border-radius: 5px;
    border: solid 2px #ffffee;
    margin-left: calc(2.5% - 2px);
    margin-top: 4px;
    min-height: 255px;
    background: url(../images/image-not-found.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.frontSideText{
    text-align: center;
    width: 100%;
    resize: none;
    background: #ffffee;
    min-height: 28px;
    max-width: -webkit-fill-available;
    position: absolute;
    bottom: 2px;
    left: 0;
    border-radius: 7px;
 /*   opacity: 0.7;*/
    height: 48px;
    z-index:4;
}
.backSideText{
    width: 100%;
    height: 100%;
    background: #ffffdd;
    resize: none;
    cursor: pointer;
    text-align: center;
}
/*
.jstree-default .jstree-leaf>.jstree-ocl {
    background-position: -68px 6px;
}
.jstree-default .jstree-icon {
    background-image: url(../images/darkblue_point.gif);
}*/
.jstree-anchor {
    max-width: 275px;
    white-space: pre-line;
    text-align: left;
    text-indent: -27px;
    margin-left: 21px;
    margin-bottom: 8px;
    display:inline-table;
}
.jstree .jstree-open>.jstree-children {
    display: block;
    margin-top: 0px;
}