html{
 font-family: Georgia,Tahoma,Vernada,Arial,sans-serif;
 font-size: 1em; 
 font-weight : bold ;
 color: black ; 
 scroll-behavior: smooth;
}

body {
 background-color: #333 ;
 color: black ;
 width : 100% ;
 margin: 0 !important ;
 padding: 0 !important;
 overflow-x: hidden ;
 overflow-y: hidden ;
}

img{
 border: none;
}

div{
 box-sizing: border-box ;
}

#layout{
 display : block ; 
 width : 100% ;	 
 height : 100% ; 
}

.section{	
 display: grid;
 width : 100% ;  
 grid-template-columns: repeat(3,1fr) ;
 grid-gap: 0.5vw;
 padding-bottom : 5vh ;     
}

.pure-g{
 display: flex;
 display: -o-flex;
 flex-direction: row;
 -o-flex-direction: row;
 flex-wrap: wrap;
 -o-flex-wrap: wrap; 
}

h2{ 
 font-size: 1.1em;
 line-height: 1.1 ;
 font-weight: bold;
 letter-spacing : 1.3px ;
}

h3{ 
 font-size: 1em;
 line-height: 1 ;
 margin-bottom: 0;
 font-weight: bold ;
 letter-spacing : 1.2px ;
}

.hidden{
 display:none;
}

.center{
 margin: auto;
 text-align: center;
}

.header{ 
 display : flex;	
 flex-direction : row ;
 align-items: center;
 text-align : left ;
 overflow:hidden;
 background-color: #00bcd4;  
 /*background-image: url('../images/eye.jpg') ;
 background-size : cover ;*/
 letter-spacing : 1.6px ;
 width : 100% ;
 opacity : 0.8 ;
 z-index : 100 ;
}

.stay{
 height : 38px ;	
 line-height : 1.8 ;
}

#header_caption{	
 font-size: 1.4em;
 color: #fff;
 padding-left : 6% ;
 width : auto ;
 text-shadow: #1C222F 2px 2px 0;
}

#header_service{
 display : flex;	
 flex-direction : row ;
 align-items: center;
 margin-left : 24% ;
 position : relative ;	 
 height : 30px ;	
 background-color:rgb(58,214,214) ;
 border:1px solid white;
 border-radius: 9px; 
}

.header_btn{
 padding-left : 20px	;
 padding-right : 20px	;
 height : 25px ;
 width : 25px ;
}

#page{
 position: fixed ;
 display : block ;
 width : 100% ;
 height : 100% ;	 
 overflow-x:hidden !important;
 overflow-y: auto ; 
 scroll-behavior: smooth;
}

.image_link{
  width : 30px ; 	
  height : 28px ; 	
  border: 2px solid #FFA07A ;
  border-radius: 15px ;
}

.sectiondir{	
 display: grid;
 width : 100% ;  
 grid-template-columns: repeat(3,1fr) ;
 grid-gap: 1vw;
 padding-bottom : 2vh ;     
}

.panel{	
 display : block ; 
 padding-left : 0.3vw ; 
 padding-bottom : 2em;
 padding-top : 1vh ;
}

.image_panel {	
 display: block; 
 color: white;
 padding : 0 !important;
 width : 100% ;
 z-index:10;
 overflow: hidden ;
 margin : 0px !important ;  
}

.item img{
 padding : 0 ;
 width: 98%;
 border: 2px solid gray;
  border-radius: 10px;
 /* opacity : 0 ;    */
}
 
.pure-commons{
 opacity: 0 ;	
} 
 
.zoom{  
 position : relative ; 
 box-shadow: 2px 2px 10px #666;
 border : 1px solid #333 ;
 border-radius : 5px ; 
 z-index: 101;
 
 -o-transition: all 200ms ease-in;
 -o-transform: scale(3.5);
 
 -ms-transition: all 200ms ease-in;
 -ms-transform: scale(3.5);   
 
 -moz-transition: all 200ms ease-in;
 -moz-transform: scale(3.5);
 
 transition: all 200ms ease-in;
 transform: scale(3.5);  
}
 
.zoom_big{  
 position : relative ;  
 box-shadow: 2px 2px 10px #666;
 border : 1px solid gray ;
 border-radius : 5px ; 
  
 -o-transition: all 200ms ease-in;
 -o-transform: scale(3.5);
 
 -ms-transition: all 200ms ease-in;
 -ms-transform: scale(3.5);   
 
 -moz-transition: all 200ms ease-in;
 -moz-transform: scale(3.5);
 
 transition: all 200ms ease-in;
 transform: scale(3.5);  
}
   
.zoom-top-left
{
 -o-transform-origin: top left;
 -moz-transform-origin: top left;
 -ms-transform-origin: top left;
 transform-origin: top left;	 
 z-index : 100 ; 
} 

.zoom-top-right
{
 -o-transform-origin: top right;
 -moz-transform-origin: top right;
 -ms-transform-origin: top right;
 transform-origin: top right;	    
 z-index : 100 ; 
}

.zoom-bottom-right
{
 -o-transform-origin: bottom right ;
 -moz-transform-origin: bottom right;
 -ms-transform-origin: bottom right ;
 transform-origin: bottom right ;  
 z-index : 100 ; 
}
 
.zoom-bottom-left
{ 
 -o-transform-origin: bottom left;
 -moz-transform-origin: bottom left;
 -ms-transform-origin: bottom left;
 transform-origin: bottom left;	
 z-index : 100 ; 
} 
 
.item.selected a{
 opacity:1;
}

.dirname
{
 display : block ;	
 text-align: center;
 padding: 3px;
 min-height: 20px;
 word-wrap: break-word; 
 font-size : 1.2em ;
 background: #00897b;
 color: white ;
 cursor: pointer; 
 width : 98% ;
 opacity: 0;
} 

.linear_panel {	
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0; 
 height: 6%; 
 border-top : 1px solid #222 ;
 background-color : #222;  
 overflow-x: hidden;
 overflow-y: hidden;
 white-space: nowrap;
 -o-overflow-scrolling: touch; 
 z-index: 10;
 cursor : pointer ;		
}

.linear_panel .line{	
 display: inline-block;
}

.linear_panel .line > .item{	 
 margin-right : 2px ;   
}

.line > .item.selected, .line > .item:hover,.header_btn:hover{ 
 filter: contrast(120%) brightness(110%) ;
 -o-filter: contrast(120%) brightness(110%);
}

.line > .item.selected{ 
 -webkit-filter: brightness(140%);
 filter: brightness(140%);
 border : 1px solid greenyellow ;
}

.dir_img > a,.line > .item > a{
 width: 100%;
 height: 100%;
 -o-transition: opacity ease-in-out .2s;
 -ms-transition: opacity ease-in-out .2s;
 -moz-transition: opacity ease-in-out .2s;
 -o-transition: opacity ease-in-out .2s;
 transition: opacity ease-in-out .2s;
}

div.image_panel * a,div.image_panel * a:visited{
 color: white;
}

div.image_panel > .box{
 padding: 20px 5px 0px 5px;
}

#image_panel_table{	
 display: block;
 width: 100%;
}

#bigimage,#bigvideo{
 padding :  2px 0 0 0 ; 
 display : block  ;  
}

video,.video_div,#bigimage > video{	 
 width : auto ;
 max-width : 98% ;
 opacity : 0.8 ;  
 vertical-align: middle;
 position : relative ;  
}

.img_dragable{
 display : block ;	
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);	 
}

.video_modal {
 /* border : 2px solid gray ;
  border-radius : 10px ;	*/
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}


#image_desc{ 
 font-size: 1em;
 line-height : 2em ;
 height : 2em ; 
 text-align: center ;
 opacity : 0 ;
}

#image_bar{  
 line-height : 3em ;   
 font-size: 1em;
 height : 3em ;  
 text-align: center;
 cursor : pointer ;
 opacity : 0 ;
}

.image_bar_span {
 padding : 0 1em ; 
 vertical-align: middle;
 cursor : pointer ;
 line-height: normal;
}

.pure-menu{
 padding-bottom: 1em;
}

ul.selected > li > ul{
 position: relative;
 visibility: visible;
 left: auto;
 top: auto;
 margin-left: 0.8em;
}

.pure-menu ul{
 border-top: 0;
}

li{
 border: none;
 margin: 0;
 padding: 0 10px 0 0;	
}

.pure-menu a{
 font-family: Georgia,Tahoma,Vernada,Arial,sans-serif;
 font-size: 1em;
 color: black;
}

li.currentSelected{
}

li.currentSelected > a{
  color: black !important;
}

.infos_img{
 display : block ;
 width : 95% ;
 height : 18em  ;
 margin-top : 1em ;
 margin-bottom : 1em ;
 padding : 0 5px ;
 border: 1px solid gray ;
 border-radius : 5px ;   
}

.infos_img > img{
 height : 99% ;
 max-width : 99.5% ; 
 position:relative;
}

.infos_title {	
 bottom: 0;
 left: 0;
 right: 0;	
 overflow: hidden;
 font-family: Georgia,Tahoma,Vernada,Arial,sans-serif;
 font-size: 1em;
 font-weight: bold;
 background: #00796b;
 border-radius : 5px ;
 color: white;
 width : 95% ;
 letter-spacing : 2.5px ;
 padding: 5px 5px 5px 5px;
}

#deleteform{
 position : relative ;
 top : -96.7% ;
 right : -44.5%;
}

.infos .pure-g > .pure-u-1-2 > input[type=text] {
  width: 100%;
}

.panel > .description{
 padding-left: 40px;
 padding-top: 20px;
 font-size: 1.3em;
}

#image_panel_table > .description{
 display: table-row;
 text-align: center;
 font-size : 1em ;	
 line-height : 1.23 ;
}

.description:empty{
 }

.modal_popup{
 display: none ;
 overflow-y: hidden ;
 overflow-x: hidden ;
 position: absolute;
 top: 0 ;
 left: 0 ;
 cursor: pointer ;
 padding-top: 5px ;
 padding-bottom : 10px ;
 background-color: #f5f5ff; 
 z-index: 9000 ; 
 box-sizing: border-box ;
}

#modal_tmp{
 display: none ;
 opacity: .4 ;
 position: absolute ;
 top: 0 ;
 left: 0 ;
 background-color: black ;
 width: 100% ;
 z-index: 8900 ; 
}

.modal_close{
 background-image: url('../images/modal_close.png') ;
 background-size: 36px 36px ;
 position: absolute;
 padding : 0 ;
 margin : 0 ;
 display: block ;
 left: -1px ;
 top: -1px;
 width: 36px;
 height: 36px;
 cursor: pointer; 
 z-index : 8901 ;
 opacity: .5;
 -moz-transition: opacity .35s linear 0s;
 transition: opacity .35s linear 0s; 
 -o-transition: opacity .35s linear 0s;
 transition: opacity .35s linear 0s; 
}

#prev_btn{
 background-image: url('../images/left.png'); 
 display : block ;
 position:absolute;
 top:50%; 
 left: -3px;
 background-size: 36px 36px ; 
 width: 36px;
 height: 36px; 
 z-index : 3001 ;
}

#next_btn{
 background-image: url('../images/right.png'); 
 display : block ;
 position:absolute; 
 top:50%; 
 right: -3px !important;
 background-size: 36px 36px ; 
 width: 36px;
 height: 36px;  
 z-index : 3001 ;
}

.go_full{
 background-image: url('../images/info.png') ;
 background-size: 24px 24px ;
 position: absolute;
 padding : 0 ;
 margin : 0 ;
 display: block ;
 right: 5px !important;
 top: 1px;
 width: 24px;
 height: 24px;
 cursor: pointer; 
 z-index : 8901 ;
 opacity: .5; 
}

.go_slice{
 background-image: url('../images/info.png') ;
 background-size: 24px 24px ;
 position: absolute;
 padding : 0 ;
 margin : 0 ;
 display: block ;
 right: 5px !important;
 top: 1px;
 width: 24px;
 height: 24px;
 cursor: pointer; 
 z-index : 8901 ;
 opacity: .5; 
}

.modal_css{
 border-radius: 5px ;
 width: auto ;
 height: auto !important ; 
 box-shadow: 1px 2px 5px #000000;
}

.fancy-effects{
 height: auto ;
 width: auto ; 
 min-width : 450px ;
 font-family: Georgia , Tahoma, Helvetica , sans-serif ;
 font-size: 1em ;
 font-weight: bold ;
 color : black ;
 line-height: normal ; 
 padding-top: 1em ;
 padding-left: 1.8em ;
 padding-right: 1.8em ;
 padding-bottom: 1.8em ;
}

#loginform p{
 font-size : 1.3em !important ;	 
}

.login_button{ 
 text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
 width: 75% ;
 font-size : 1em !important;
 height: 2.5em ;
 line-height: 1 ;
 text-align: center ;
 color: green  ;
 border-radius: 5px ;
 box-shadow: 1px 1px 2px #000000;
}

#user_login,#user_pass{
 margin-top: 6px ;
 font-size : 0.9em !important;
}

.button-error{
 color: white;
 border-radius: 2px;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success{
 background: rgb(28, 184, 65); 
}

.button-error {
 background: rgb(202, 60, 60); 
}

.button-round{
    margin: auto;
    display:block;
    width:50px;
    height:50px;
    line-height:50px;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    box-shadow: 0 2px 5px rgba(0,0,0,.35);
    font-size:20px;
    font-weight:bold;
    border: 1px solid red;
}

#menuright{ 
 z-index: 1000;
 overflow-y: hidden;
 overflow-x: hidden; 
 -o-overflow-scrolling: touch; 
}

#menu {
 white-space: nowrap;
 z-index: 1000; 
 overflow-y: auto;
 overflow-x: hidden;
 padding : 0 ;
 margin: 0 ;
 -o-overflow-scrolling: touch; 
}

#menu .pure-menu,#menu .pure-menu ul{
 border: none;
 background: transparent;
}

#menu .pure-menu li a:hover,#menu .pure-menu li a:focus{
 background: #efefef;
}

#menu .pure-menu-selected a{
 color: #fff;
}

#menu .pure-menu-heading{
 font-size: 110%;
 color: #fff;
 margin: 0;
}

#menuright-link{
 position: absolute;
 display: block; 
 top: 0.7vh;
 height : 24px ;
 right: 0.8vw;
 /*width : 24px ;*/  
 z-index: 400; 
}

#screen_link
{
 position : absolute ;
 display : block ;
 top : 0.5vh ;
 left : 0.5vw ;
 /*width : 24px ;  */
 height : 24px ;   
 z-index : 400 ;
}

.item a{
 opacity:.7;
}

#menuright{
 /*background: #FFF0F5;*/
}

h2,h3,a{
 color : black ;
}

.infos {
 color: #333;
 font-size : 0.9em ;
 font-weight : 700 ;
 border-radius : 8px ;
 padding : 8px 3px 3px 8px ;
}

div.directory .dirname {
 background-color: #00897b;
}

div#menuright-header > div.infos_title {	
 background-color: #00897b;
}

#description_form {
 font-weight : bold !important;
}

#description_form textarea{
 margin-top : 5px ;
 font-family: Georgia,Tahoma,Vernada,Arial,sans-serif;
 font-size : 1em !important ;
 font-weight : 700 ;
}

li.currentSelected > a:hover {
  color:  White !important;	
}

#menu .pure-menu li a:focus {
 border : none ;
 color: blue ;
}

#menu .pure-menu li a:hover
{
 background-color: #00897b;
 color: White;
}

.pure-common{
  width: 32%;
  margin-right : 10px ;
  margin-bottom : 10px ;
}

.pure-common_small{
  width: 32%;
  margin-right : 10px ;
  margin-bottom : 10px ;  
}

.pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected {
 background-color: #00877b;
}

#upload_wrapper{
 background-color: #f5f5ff ;
 width : 100%;
 height : auto ;
 color : black ;
 padding-bottom : 10px ;
}

#upload_form,#upload_image_wrapper{
 background-color: #f5f5ff ;
 min-height : 50px ;
 margin-top : 10px ;
 width : 98.5% ;
 color : black ;
}

#upload_wrapper  input{
 display : none ;
}

#upl_desc_input{
 font-size: 14px;
 font-weight: bold ;
 width : 91.7% ;
 padding: .245em .6em;
 border: 1px solid #00897b;
 box-shadow: inset 0 1px 3px #ddd;
}

#upl_desc_div{
 display : none ;	
 width:100% ;
}
#upload_wrapper  p{
 margin-top : 8px ;
 margin-bottom : 8px ;
}
#upload_desc{
 display : none ;	
 float   :right;
 padding-right: 15px;
 font-size: 14px;
 font-weight: bold ;
 white-space: nowrap;
 overflow: hidden;
 text-overflow:ellipsis;
 max-width:60%;
 padding-top : 4px ;
 vertical-align: middle;
}
#upload_info{
 font-size: 14px;
 font-weight: 600 ;
 display : none ;
 padding-top : 5px ;
}
.btn{
 display: inline-block;
 padding: 2px 8px;
 margin-bottom: 0;
 font-size: 1em;
 font-weight: bold;
 text-align: center;
 white-space: nowrap;
 vertical-align: middle;
 -ms-touch-action: manipulation;
 touch-action: manipulation;
 cursor: pointer;
 -o-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 background-image: none;
 border: 1px solid transparent;
 border-radius: 4px;
 color : #fff ;
}
.btn:hover,#upl_desc_submit:hover{
 color : black ;
 background-color : #FDF5E6 !important ;  
}
#upload-input,#crop-input{
 background-color : green ;
 border: 1px solid green ;  
}
#upload-submit{
 background-color: #286090;
 border-color: #204d74;
 display : none ;
}
#upload-webp{
 background-color: #00796b;
 border-color: gray;
 display : none ;
}
#upload-reset{
 background-color: /*#f0ad4e*/red;
 border-color: gray;
 display : none ;
}
#crop-save{
 background-color: /* #f0ad4e*/ blue;
 border-color: #eea236;
}
.upload-buttons{
 margin-left : 1% ;	
}
.text_on_img{
 position: absolute ;
 background-color : white ;
 padding : 3px 10px ;
 font-size : 13px ;
 border-radius : 6px ;
 color: black ;
 bottom: 16px ;
 left: 16px ;	
}
.tooltip{
 position :relative; 
 z-index : 500 ;
}
.tooltip_title{
 font-size : 0.7em ;	
 font-weight : bold ;
 height: auto ;
 color : black ;
 padding : 3px 8px ;
 margin-bottom : 5px ; 
 line-height : 123% ;
}
.scrollbot-scrollbar-holder
{
 right: 3px ;
 top: 0px;
 background-color: rgb(173, 173, 173);
 border-radius: 15px;
 display: block ;
}

.scrollbot-scrollbar{}

#crop_wrapper{
 background-color: /*#f5f5ff*/ #FFF5EE;;	 
 min-height : 500px ;
 color : black ;
 padding-left : 3px ; 
 padding-right : 3px ; 
 padding-bottom : 3px ; 
}

#crop_descr{
 border-bottom : 1px solid black ;	
}

#crop_descr p{
  margin-top : 0.8em ;	
  margin-bottom : 0.8em  ;	
  font-weight : bold ;
  padding : 0 ;
}

#crop_linear_panel{   
 height: 73px;
 width : auto ;   
 /*border : 1px solid #f5f5ff ;*/
 overflow-x: hidden;
 overflow-y: hidden;
 white-space: nowrap; 
 background-color : #2F4F4F !important; 
}

#crop_linear_panel #sectionimg_line{
  background-color : #2F4F4F  !important; 
}

#crop_linear_panel  > .item {
 /*width: 70px !important; */
}

#crop_table
{
 border : 1px solid white ;
 border-radius : 5px ;
 
 box-shadow: 1px 2px 5px #000000;
 -o-box-shadow: 1px 2px 5px #000000;
 padding : 0 ;
 width : 100% ;
}

.cron_image_desc{  
 background-color: #f5f5ff;
 border-right : 1px solid white ;	
 margin-top: 0 ;
 padding : 0 ;
}

#cron_image_desc_src{ 
background : black ; 
}

.crop_text_on_img{
 position: absolute;
 background-color: white;
 padding: 3px 10px;
 font-size: 0.8em;
 border-radius: 6px;
 color: black;
 top: 87%;
 left: 16px;
} 

.text_on_dragger{
 position: absolute;
 background-color: white;
 padding: 3px 10px;
 font-size: 1em;
 border-radius: 6px;
 color: black;
 top: 94.8%;
 left: 12px;
} 

.image_desc_name{
 max-width : 60% ;	
}

.crop-buttons{
  font-weight : bold !important;
}

.image_desc_old{
  background-color: white ;
  position : absolute ;
  right : 10px ;
  width : 9em ;
  min-width : 9em ;
  color : black ;
  font-family : Georgia , sans-serif ;
  font-size : 0.9em ;
  text-align : right ;
  padding : 2px 3px ;
  border : 1px solid gray ;
}	

#login_button,#logout_button{
  font-family : Georgia  , sans-serif ;
  font-size : 1em ;	
  font-weight : bold ;
  font-style : normal !important;
  color : black ;
  width : 80% ;
  background-color : lightgray  ;  
}

.infos_btn{
 width : 85% ;	
 height : 2em ;
 font-family : Georgia  , sans-serif ;
 font-size : 1em ;	
 font-weight : bold ;
 background-color:#00877b ;
 border : 1px solid green ;
 border-radius : 5px ; 
 margin-bottom : 0.25em ;
 letter-spacing : 1.2px ;
 word-spacing : 2px ;
}

.infos_btn:hover{
 background-color : lightgreen !important;	
}

.toto{
 margin-top : 8px ;		
 margin-bottom : 8px ;	
 width : 90% ;
 font-family : Georgia , sans-serif ;
 font-size : 1em ;	
 font-weight : bold ;
}

.infos_description{ 
 padding-left : 10px ;	
 padding-top : 8px ;	
 padding-bottom: 12px ;	
 border : 1px solid gray ;
 border-radius : 5px ;
 margin-top : 1.2em ;
 margin-left : 1.6% ;
 width : 93% ;
}

#themes_wrapper{
 background-color: #f5f5ff ;	
 font-size : 1em ;
 width : 98.5%;
 height : 100% ;
 color : black ; 
 padding-top : 10px  ;
 padding-bottom : 8px  ; 
}

#themes_table{
 width: 100%;
 margin-top:1em ;
 margin-bottom : -1px ;
}


#themes_table th{
 height:2em;
 background-color: #f5f5dc;
 letter-spacing : 1.8px ;
 padding-left : 5px ;
}

#themes_table td{
 height: 100px ; 
 padding : 5px ;
}

.themes_checkbox{
 box-sizing : border-box; 
 height : 23px  ;
 width  : 26px ; 
 font-size : 17.5px ;
 border : 1px solid gray ;
 border-radius : 5px ;
}

.themes_image{
 width  : 98% ;
 height : 98% ;
}

#themes_check{
 display:block;
 height : 2em ;
 margin-top: 0.9em;
 margin-bottom: 0.4em;
 padding-left:5px ;	
}

#themes_check > span{
 padding-left : 8px ;	
 color : blue ;
}

#themes_check > button{
 float:right;
 margin-right:5px;
 border:1px solid gray;
 color: white ;
 height : 1.5em ;
 line-height : 1 ;
 font-family: Georgia , Tahoma, Helvetica , sans-serif ;
 font-size: 1.2em ;
 font-weight: bold ;
 background-color : #00877b;
} 

#themes_check > button:hover{
 color : black ;	
}

/*--------------------------------------*/

.pure-menu ul{
 position: absolute;
 visibility: hidden ;
}

.pure-menu.pure-menu-open{
 visibility: visible;
 z-index: 2;
 width: 100%
}

.pure-menu ul{
 list-style: none;
 margin: 0;
 padding: 0;
 z-index: 1
}

.pure-menu>ul{
 position: relative
}

.pure-menu-open>ul{
 left: 0;
 top: 0;
 visibility: visible
}

.pure-menu-open > ul:focus{
 outline: 0
}

.pure-menu li{
 position: relative
}

.pure-menu a,.pure-menu .pure-menu-heading{
 display: block;
 color: inherit;
 line-height: 1.3;
 padding: 5px 20px;
 text-decoration: none;
 white-space: nowrap
}

.pure-menu.pure-menu-horizontal > .pure-menu-heading{
 display: inline-block;
 margin: 0;
 vertical-align: middle
}

.pure-menu.pure-menu-horizontal > ul{
 display: inline-block;
 vertical-align: middle
}

.pure-menu li a{
 padding: 4px 20px
}

.pure-menu-hidden{
 display: none
}

.pure-menu-fixed{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%
}

.pure-menu a{
 border: 1px solid transparent;
 border-left: 0;
 border-right: 0
}

.pure-menu a,.pure-menu .pure-menu-can-have-children>li:after{
 color: black ;
}

.pure-menu .pure-menu-can-have-children>li:hover:after{
 color: #fff
}

.pure-menu .pure-menu-open{
 background: #dedede
}

.pure-menu li a:hover,.pure-menu li a:focus{
 background: #eee ;
}

.pure-menu li.pure-menu-disabled a:hover,.pure-menu li.pure-menu-disabled a:focus{
 background: #fff;
 color: #bfbfbf
}

.pure-menu .pure-menu-disabled>a{
 background-image: none;
 border-color: transparent;
 cursor: default
}

.pure-menu .pure-menu-disabled>a,.pure-menu .pure-menu-can-have-children.pure-menu-disabled>a:after{
 color: #bfbfbf
}

.pure-menu .pure-menu-heading{
 color: #565d64;
 text-transform: uppercase;
 font-size: 90%;
 margin-top: .5em;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #dfdfdf
}

.pure-menu .pure-menu-selected a{
 color: #000
}

.pure-menu.pure-menu-open.pure-menu-fixed{
 border: 0;
 border-bottom: 1px solid #b7b7b7
}

.pure-u{
 display: inline-block;
 /*letter-spacing: normal;
 word-spacing: normal;*/
 vertical-align: top;
 margin-right : 2px ;
 /*text-rendering: auto*/
}

.infos-input-btn{
 width : 63% ;
 border : 1px solid gray ;
 font-family : Georgia  , sans-serif ;
 font-size : 1em ;	
 font-weight : bold ;
 border-radius : 5px ;
 background-color : #00796b ;
 color : white ;
 padding-top : 4px ;
 padding-bottom : 4px ;
 margin-top : 3px ;
}

.niceform{
 font-family : Georgia,Tahoma,Vernada,Arial,sans-serif;
 font-weight : bold ;
 font-size : 1em ;
}

.infos-input-btn:hover{
 background-color : lightgreen ;
 color : black ;
}

#infos_em{
 font-weight : 600 ;
 font-style : italic ;
}

.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px;background:url(../images/wingrip.png);}
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}


.modal_optima{
 border-radius: 5px ;
 width: 100% ;
 overflow: hidden !important;
 background-color: #f5f5ff !important; 
 box-shadow: 1px 2px 5px #000000;
}

#optima_wrapper_id{
 overflow : hidden ;
}

#optima_table_header{
 padding : 0 ;
 width : 99%;
}

#optima_table_header tr{
 background-color : lightyellow ;
 height : 2em ;
}

#optima_table_body{
 width : 99% ;
}

#optima_table_body tr{
 height : 70px ;
}

.tr_deleted{
 background-color : lightgray ;
 color : lightgray ;
}

.tr_deleted input{
 display : none ;
}

#optima_table_body input{
 font-size : 1em ;
 font-weight : bold ;
 background-color : #FFFAF0;
 padding-left : 3px ;
}

.optima_td{
 text-align: left;
 padding-left : 5px ;	
}

.scrollable-element{
  scrollbar-width: thin;
}

.optima_result{
  height:1.4em;
  width:1.4em;
  border-radius:8px;
  border:1px solid lightgray;
  background-color:lightgray ;	
} 

.optima_btn{
 border : 1px solid gray ;	
 font-size : 0.9em ;
 font-weight : bold ;
}

#optima_mask
{
  float : right ;	
  font-size : 1em ;
  padding-right : 1.8em ;
}

#optima_mask input
{
  padding-left : 5px ;	
}

.image_big{
 cursor : pointer ;	 
 opacity : 0 ;
}

.image_trans_all{
 -moz-transition: all 600ms linear ;
 -ms-transition: all 600ms linear ;
 -o-transition: all 600ms linear ;
 transition: all 600ms linear ;      
}

.image_trans_h_w{
 transition: opacity .25s cubic-bezier(0,0,0.2,1) ; 
}

.board_item_img{  
/* height : auto ;   */
}

#draggle_img{}

#imagick_colors input{
 font-family: Georgia,Tahoma,Vernada,Arial,sans-serif;
 font-size : 1em ;
 font-weight : bold ;	
}

.imagick_name{
 margin-top : 10px ;	
 margin-bottom : 6px ;	
 font-family: Georgia,Tahoma,Vernada,Arial,sans-serif;
 font-size : 1em ;
 font-weight : bold ;
}

.imagick_value{
 margin-bottom : 16px ;	
 display : flex ;
 flex-direction: row;
}

.imagick_range{
 margin-left : 20px ;	
}

.range_val{
 padding-left : 3px ;
 background : lightyellow ; 
}

#imagick_submit{
 margin-top : 10px ;
 font-family: Georgia,Tahoma,Vernada,Arial,sans-serif;
 font-size: 1em;
 font-weight: bold;
 background-color :  #00877b;
 border: 1px solid green ;  
}

input[type=range]{
 -o-appearance: none;
 background-color: black;
 border: 1px solid black ;
 width: 80%;
 height: 1px;
 cursor: pointer;
 margin-left : 35px  ; 
 margin-top : 8px ;
 margin-bottom : 8px ;
}

input[type=range]::-moz-range-thumb{
 width: 12px; 
 height: 12px;
 border-radius : 7px ;
 background : blue ; 
 cursor: pointer; 
}

input[type=range]::-moz-range-thumb:hover{  
 background : green ; 
 cursor: pointer; 
}

.left_menu{
 font-size : 1.1em ;	
 background-color: #f5f5ff !important; 
 border-radius: 5px; 
 padding-left : 8px ;
 padding-right : 8px ;
 box-shadow: 1px 2px 7px #000000;
 overflow-y: hidden !important ;   
}

.right_menu{
 font-size : 1.1em ;	
 background-color: #f5f5ff !important;
 border-radius: 5px; 
 box-shadow: 1px 2px 7px #000000;   
}

.upload_result{
 position : absolute ;
 top : 100px ;
 left : 100px ;
 border : 1px solid gray ; 
 border-radius : 8px ; 
 padding : 10px ;
 font-size : 1.3em ; 
 font-weight : bold ;
 color : black ;
 box-shadow: 1px 2px 10px #000000;
 -webkit-box-shadow: 1px 2px 10px #000000; 
 background-color: #fffffc ;
 z-index : 9001 ; 
}

.start{
 background-color : white ;
 color : black ;  
 width : 75% !important; 
 padding : 10px ;
 margin-top : 10px ;
 margin-left : 15% ;
}


#site_login_form
{
  border-radius: 5px ;  
  font-family:  Georgia,Tahoma,Verdana, sans-serif ;
  font-size: 1em !important;
  line-height: 1.1 ;
  font-weight : bold ;
}

#site_login_form input
{
  font-size: 1.15em !important;
}

.index_btn{ 
 text-shadow: 0 -1px 0 rgba(0, 0, 0, .7);
 width: 280px ;
 font-size: 1em;
 font-weight : bold ;
 line-height: 1.2 ;
 text-align: center ;
 padding : 5px 12px 5px 12px ;
 color: navy  ;
 border-radius: 5px ;
 box-shadow: 1px 1px 2px #000000;
}

#flash {
  background-color: #000 ; /* Чёрный фон */
  height: 100%; /* Высота максимальна */
  left: 0; /* Нулевой отступ слева */
  opacity: 0.95 ; /* Степень прозрачности */
  position: fixed; /* Фиксированное положение */
  top: 0; /* Нулевой отступ сверху */
  width: 100%; /* Ширина максимальна */
  z-index: 100; /* Заведомо быть НАД другими элементами */
}

.level-2 a,.level-3 a,.level-4 a{
 color : darkblue ; 	
}

#header_buttons{
  position:absolute;
  left:47%; 
}

.gPxRyv
{
  inset : 2% 4% !important;	
}
.kAFRsS
{
  color : white !important ;
}
.epngpB,.kLxiCk,.lnDCWm{
 display : none !important ;
}
.eQPgZY{ 
 font-family: Georgia,Tahoma,Vernada,Arial,sans-serif !important;
 font-weight : bold !important;
 letter-spacing : 1.5px !important ;
 word-spacing : 25px !important ;
}

.dUIFrF{
 height : 110px !important ;	
}

.preloader__loader 
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.tree_chart{ 
 height: 100% ;  
 width: 100%; 
 margin: 0 2px;
 padding-bottom : 4em ;
}

.tree_chart  p{
 margin:0;
 padding:0;	
}

.node-name{
 font-weight: bold;
}

.nodeSavelev{	
 display : flex ;	
 flex-direction : column ;	
 justify-content: center;
 align-items : center ;
 padding: /*8px 8px 3px 8px*/5px;
 -webkit-border-radius: 3px;
 -o-border-radius: 3px;
 border-radius: 3px;
 background-color: lightyellow;
 border: 1px solid #000;
 width: auto;
 min-width : 80px ;
 box-shadow: 1px 3px 5px #333;
 -webkit-box-shadow: 1px 3px 5px #333;
 font-size : 0.9em ;
}

.nodeSavelev img{
 border: 1px solid gray; 
 padding : 0 ;
 margin :0 ;
}

.image_div{
 height : 72px ;	
 margin-bottom : 4px ; 
}

#family_tree{
 display : flex ;	
 flex-direction : column ;	
 width:100% ; 
}

#family_caption{
 font-size : 1.2em ;	
 width : 100% ;
}

.Treant { position: relative; overflow: hidden; padding: 0 !important; }
.Treant > .node,.Treant > .pseudo { position: absolute; display: block; visibility: hidden; }
.Treant.Treant-loaded .node,.Treant.Treant-loaded .pseudo { visibility: visible; }
.Treant > .pseudo { width: 0; height: 0; border: none; padding: 0; }
.Treant .collapse-switch
{
  width:6px;height:6px;display:block;border:1px solid black;position:absolute;top:1px;right:1px;cursor:pointer; 
  background-color:green;border-radius: 3px ;
}

.tree_css{
 opacity : 0 ;
}

div.jqcloud {
 font-family: Georgia,Vernada,sans-serif ;
 font-size: 0.7em ;
 font-weight: bold ;
 line-height: normal;
}

div.jqcloud span.vertical 
{
  -webkit-writing-mode: vertical-rl;
  writing-mode: tb-rl;
}

div.jqcloud span.w10 { font-size: 200%; color: black ;}
div.jqcloud span.w9 { font-size: 195%; color: navy; }
div.jqcloud span.w8 { font-size: 190%; font-weight: 600 ; color: blue;}
div.jqcloud span.w7 { font-size: 180%; font-weight: 550 ;color: darkblue;}
div.jqcloud span.w6 { font-size: 175%; font-weight: 500 ;color: #333;}
div.jqcloud span.w5 { font-size: 160%; color: blue;}
div.jqcloud span.w4 { font-size: 130%; color: olive;}
div.jqcloud span.w3 { font-size: 120%; color: maroon ;}
div.jqcloud span.w2 { font-size: 110%; color: darkgray ; }
div.jqcloud span.w1 { font-size: 100%; color: teal; }

div.jqcloud span { padding: 0; }
div.jqcloud span:hover {background-color : #ADD8E6 ;}

#infos_cloud{
 width : 92% ;
 margin-top : 2em ;
 margin-left : 1.6% ;
 overflow: hidden;
 position: relative;
 cursor: pointer;
 border : 1px solid gray ;
 border-radius: 6px;
 background: -moz-linear-gradient(100% 100% 90deg, #cce, #dde, #ffe 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffe), color-stop(100%, #ccc));
 background: -webkit-linear-gradient(linear, left top, left bottom, from(#ffe), to(#ccc));
 background: -o-linear-gradient(#ffe,#ccc);
 background: -ms-linear-gradient(#ffe,#ccc);
 background: linear-gradient(linear, left top, left bottom, from(#ffe),to(#ccc));
 box-shadow: 1px 2px 3px #000; 
 padding : 5px ;
}

/*
.item{ 
 background-color: red ;
 transition: background-color 0.5s; 
} 
*/
.mosaicflow__column 
{
  float:left;    
}

.mosaicflow__item{
 position:relative;
 margin-bottom : 7px ;
 display : block ;   
 /*background-color: #333 ; 
 transition: background-color 0.2s; */ 
}

.mosaicflow__item img 
{
  width:98%;
  height:auto;    
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 margin: 0;
 scale : 1.2 ;
}

input[type=number]{
 -moz-appearance: none;
 scale : 1.2 ;
}
.columns {
    width: 87%;
    font-size: 1em;
}
.radio,.check{
  scale : 1.7 ;	
}
.wrap_inner_hide{ 
 padding : 0 ;
 margin : 0 ; 
 animation-timing-function: ease-in-out; 
 -webkit-animation-timing-function: ease-in-out;  
 -o-animation-timing-function: ease-in-out;  
 -moz-animation-timing-function: ease-in-out;   
}
#tipchik{
 background: lightyellow;
 color : black ;
 border: 2px solid gray ;
 border-radius : 8px ;
 padding: 3px 8px;
 max-width : 500px ;
 z-index : 9999 ;
}

.aforizm{
 overflow-y:auto;
 font-size: 16px !important;
}

::-webkit-scrollbar{ 
 opacity:0 ;
}


.mosaicflow__item img:hover
{ 
 border-bottom: 3px solid #53ea93 ;   
 border-radius: 3px;
 -webkit-transform: translateY(-4px);
 transform: translateY(-4px);   
}