@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: Lato !important; //
  }

h2{
   
	font-size: 34px;
	line-height: 40px;
	margin-top:0px;
	margin-bottom: 30px;
	font-weight: 400;
}

h3{
	
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 10px;
	padding-left: 15px;
	font-weight: 600;
}

.hidden{
	display:none;
}

.section{
	clear:both;
}

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

div#login{
	/*iborder-bottom: 1px solid #e0e0e0;
	display: block;*/
	top:150px;
	margin: auto;
	width:290px;
	padding-left: 30px;
	padding-right:30px;
	padding-top:1px;
	position: relative;
	/*height: 550px; *//*450px;*/
	
	border:#ccc solid 1px;
    box-shadow: 2px 2px 2px #ccc;
}



div#register{
	iborder-bottom: 1px solid #e0e0e0;
	display: block;
	
	top:10px; /* 100px */
	margin: auto;
	width:400px;
	padding-left: 35px;
	padding-right: 35px;
	padding-top:1px;
	position: relative;
	/*height: 930px;*/
	/*text-align: center;*/
	background-color: #fff;
	border:#ccc solid 1px;
    box-shadow: 2px 2px 2px #ccc;
}

div#plan{
	iborder-bottom: 1px solid #e0e0e0;
	display: block;
	top:150px;
	margin: auto;
	width:420px;
	padding-left: 30px;
	padding-right:30px;
	padding-top:1px;
          padding-bottom:20px;
	position: relative;
	/*height: 500px;*/
	/*text-align: center;*/
	background-color: #fff;
	border:#ccc solid 1px;
    box-shadow: 2px 2px 2px #ccc;
}

div#menutop{	
	height: 60px;
	background:  #4285f4;
}






.header {
	position: relative;
	margin:auto;
	overflow:hidden;
    font-family: "Roboto-Regular", sans-serif;
    margin: 0 15px 0 0;
    background-color:  #4285f4;
    height: 60px;
    box-shadow: 0 2px 5px rgba(0,0,0,.26);
}

.header h1 {
    line-height:64px;
    font-family: "Roboto-Regular", sans-serif;
    font-size: 24px;
    font-weight: 400;
    color:white;
   
    margin: 0;
}


div.sub_panel > .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 15;
}

div.sub_panel > .header > span {
	float: right;
}

div.sub_panel > .line {
	height: 130px;
	margin: 0 0 1px 0;
	clear: both;
}

div.dir {
	position: relative;
	margin: 1px;

	border:solid 3px blue;
}

div.dir .directory_name
{
	display: block;
	position: absolute;
	bottom: 0;
	text-align: center;
	padding: 5px;

	min-height: 20px;
	word-wrap: break-word;
	background:rgba(0, 0, 0, .35);
	
	left: 0;
	right: 0;
	color: white;
}




div.dir img{
	width:100%;
	margin-bottom:-5px;
}

div.bigimage_panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
/*	height: 130px;*/
	padding: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	z-index: 10;
}

.bigimage_panel > .header,
.bigimage_panel  h1,
.bigimage_panel  h2,
.bigimage_panel > .sectionvid,
.bigimage_panel > .sectiondir,
.bigimage_panel > .description
{
	display: none !important;
}

div.bigimage_panel  .line {
	display: inline-block;
	overflow: hidden;
}

div.bigimage_panel  .line > .item , div.linear_panel  .line > .item-video {
	width: 100px !important;
	height: 100px;
}

/* Lines */
.item-video {
	float:			left;
	margin-right:	3px;
	border-bottom:	2px solid rgba(0,0,0,0);
}

.line > .item.selected, .line > .item:hover , 
.line > .item-video.selected , .line > .item-video:hover{

}
/*
.dir_img > a,
.line > .item > a ,
.line > .item-video > a {
width: 100%;
height: 100%;

}

.line > .item > a:hover ,
.line > .item-video > a:hover {
opacity: .7;
}
*/

div.smallimage_panel {
position:absolute;
top:120px;
bottom:20px;
left:0;
right:0;
z-index:10;
box-shadow: 0 2px 5px rgba(0,0,0,.35);
overflow: auto;
}

div.smallimage_panel * a,
div.smallimage_panel * a:visited {
}

div.smallimage_panel > .box {
padding: 20px 5px 0px 5px;
font-size: 10pt;
}

div#big_image_panel {
	display: table;
	width: 100%;
	height: 100%;
	border-spacing: 5px;
	margin-top: -5px;
}

	
div#fullimage{
	display: table-row;
	width: 100%;
	height: 100%;
}

div#image_bar {
display: table-row;
font-size: 15px;
text-align: center;
background:grey;
}

div#image_bar > span {
display: inline-block;
width: 50px;
}

.floating-action{
	position: absolute;
	bottom: -25px;
	right : 30px;
    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;
}
/*
.floating-action:hover{

	}
*/
div#deleteform{
	right: 20px;
}

div#classifier_run_form,div#classifier_resume_form,div#classifier_pause_form,div#classifier_dequeue_form{
	right: 20px;
	top: 20px;
}

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

.sub_panel > .description{
	padding-left: 10px;
	padding-top: 10px;
	font-size: 22px;
	background:white;
    margin-left: 10px;
}

#big_image_panel > .description{
	display: table-row;
	text-align: center;
}

.description:empty{
	display: none !important;
}


.pure-button{
    white-space:normal;
    background: #4285f4;
    color:white;
    text-align:left;
}

.pure-button-disabled{
    cursor: pointer;
}

.pure-button-disabled:hover{
    cursor: pointer;
}

.button-success,
.button-error,
.button-warning,
.button-secondary {
    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-warning {
    background: rgb(223, 117, 20); 
}

.button-secondary {
    background: rgb(66, 184, 221); 
}

.button-xsmall {
    font-size: 70%;
}

.button-small {
    font-size: 85%;
}

.button-large {
    font-size: 110%;
}

.button-xlarge {
    font-size: 125%;
}

.buttongroup > .button-base{
    border-radius: 0;
    margin: 0;
}

.buttongroup > .button-base:first-child{
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
}


.buttongroup > .button-base{
    margin:0;
    border-radius:0px;
}

.buttongroup > .button-base:last-child{
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
}

.buttongroup-vertical{
   position:relative; 
    z-index:250;
}

.buttongroup-vertical > .button-base{
    border-radius: 0px;
}

.buttongroup-vertical > .button-base:first-child{
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.buttongroup-vertical > .button-base:last-child{
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}


.buttongroup-vertical > .button-base{
    z-index:250;
}

.buttongroup-vertical > .button-hidden {

}

.buttongroup-vertical:hover > .button-hidden {
    display: block;
}

.buttongroup-vertical > .button-hidden:hover {
    display: block;
}

.button-round{
    margin: auto;
    display:block;
    width:50px;
    height:50px;
    line-height:50px;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    font-size:20px;
    font-weight:bold;
    border:0;
}




#mainpage,
#menu,
.menu-link,
#menuright,
.menuright-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

#mainpage {
    position: relative;
    padding-left: 0;
}
    #mainpage.active {
        position: relative;
       
    }
        #mainpage.active #menu {
           
            width: 240px;
        }
/*
        #mainpage.active .menu-link {
          
        }

    #mainpage.active #image-panel{
       
    }*/
/*
#menuright {
  
}*/

#menuright.active{
    border-color: white;
    right:240px;
}
.menuright-link.active{
    right:240px;
}


#page{
    left:0;
    right:0;
    bottom:0;
    top: 0;
    height:100vh; 
    overflow-x:hidden;
    overflow-y:auto;
    background-size:cover;
   
}


#menu {
    border-right: 1px solid #e0e0e0;
    width: 240px;
    margin:auto;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000; 
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
        box-shadow: 5px 5px 5px black;
}


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

    .menu-link span,
    .menuright-link span
     {
        position: relative;
        display: block;
    }

    .menu-link span,
    .menu-link span:before,
    .menu-link span:after,
    .menuright-link span,
    .menuright-link span:before,
    .menuright-link span:after
    {
        background-color: #fff;
        width: 100%;
        height: 0.2em;
    }

        .menu-link span:before,
        .menu-link span:after,
        .menuright-link span:before,
        .menuright-link span:after {
            position: absolute;
            margin-top: -0.6em;
            content: " ";
        }

        .menu-link span:after,
        .menuright-link span:after {
            margin-top: 0.6em;
        }


.menu-link,
.menuright-link {
    position: fixed;
    display: block; 
    top: 0;
    font-size: 10px; 
    z-index: 400;
    width: 2em;
    height: auto;
    padding: 2.9em 1.6em;
}

.menu-link{
    left: 0; 
}

.menuright-link {
    right: 10px; 
}

.header {
    padding-left: 20px;
    padding-right: 2em;
}

@media (min-width: 48em) {


    .content {
        padding-left: 2em;
        padding-right: 2em;
    }

    #mainpage {
       
        left: 0;
    }
/*
    #menu {
       
    }
*/
    .menu-link {
        position: fixed;
       
        display: none;
    }
/*
    #mainpage.active .menu-link {
      
    }

    #page{
     
    }

    .item a{
  
    }

    .sub_panel > .header{
       
    }*/
}



.ui-widget-overlay
{
  opacity: .50 !important;/* Make sure to change both of these, as IE only sees the second one */
  filter: Alpha(Opacity=50) !important;

  background-color: rgb(50, 50, 50) !important; /* This will make it darker */
}