/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 30-mag-2015, 12.14.41
    Author     : Stefano Gabriele
*/

/*BROWSER RESETS ____________________________________________________________ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*_____________________________________________________________ BROWSER RESETS*/

b {
    font-weight: bold;
}

html,body{
    width: 100%;
    height: 100%;    
    font-family: Segoe UI,Arial,sans-serif;
    overflow: hidden;
    background: linear-gradient( #00000f,  #8080ff);
}

/* 3D (Contains canvas) _____________________________________________________ */
#_3D {}

/* TITLE ____________________________________________________________________ */
#mlj-title {
    color: white;
    background-image: url('../img/favicon.png');
    background-size: auto 30px;
    background-repeat: no-repeat;
    padding-left: 50px;    
    line-height: 30px;    
    font-weight: bold;
    font-size: 12pt;
    opacity: 0.8;
}

/* TOOLS PANE _______________________________________________________________ */
#mlj-tools-pane {    
    min-width: 200px;
    width: 400px;
    min-width: 400px;
    max-width: 600px;
    height: 100%;    
    border-right: gainsboro ridge;
}
#mlj-tabbed-pane {
    font-size: 10pt;
}
/* Buttons ____________________________________________________________ */

.mjs-toolbar .ui-button .ui-button-text,
.ui-accordion-header .ui-button .ui-button-text {
    padding: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
}

.ui-button img {
    width: 18px;
    height: 18px;     
    vertical-align: middle;   
}
.ui-button-right-align {
	float:right;
}
#mlj-scenebar-widget .ui-button img {
    width: 14px;
    height: 14px;
}

.ui-button.mlj-toggle-on {
    background: rgb(169,219,128);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNhOWRiODAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNzdhZDYyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover,  rgba(169,219,128,1) 0%, rgba(119,173,98,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(169,219,128,1)), color-stop(100%,rgba(119,173,98,1)));
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(169,219,128,1) 0%,rgba(119,173,98,1) 100%);
    background: -o-radial-gradient(center, ellipse cover,  rgba(169,219,128,1) 0%,rgba(119,173,98,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover,  rgba(169,219,128,1) 0%,rgba(119,173,98,1) 100%);
    background: radial-gradient(ellipse at center,  rgba(169,219,128,1) 0%,rgba(119,173,98,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#77ad62',GradientType=1 );    
}

/* SEARCH WIDGET ____________________________________________________________ */
#mlj-search-widget {                
    /*background-color: gainsboro;*/          
    padding: 5px;    
    width: 100%;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#mlj-search-widget input { 
    width: 100%;    
    padding: 5px;   
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* LAYERS WIDGET ____________________________________________________________ */

#mlj-layers {        
    overflow: auto;    
    height: 100%;
}

#mlj-layers .mlj-layers-entry {    
    height: 24px;
    margin: 4px 0;
    position: relative;
}

#mlj-layers .mlj-layer {       
    border: solid 1px rgba(0,0,0,0);
    top:0px;
    left: 30px;
    right: 2px;
    height: 100%;    
    line-height: 24px;
    padding-left: 5px;    
}

#mlj-layers .mlj-layer.selected,
#mlj-layers .mlj-layer.selected:hover{
    /*   font-weight: bold;
       color: green; */
    /*    background-color: gainsboro;*/
    border: solid 1px rgba(0,0,0,0);
    cursor: default;
    background-color: #0277BD;
    color: white;
}

#mlj-layers .mlj-layer:hover {
    border: solid 1px #BDBDBD;
    background-color: #FAFAFA;
    cursor: pointer;
}

#mlj-layers .mlj-eye {
    height: 24px;
    width: 24px;
    margin-left: 5px;
    background-size: 16px 16px;
    background-color: rgba(255,255,255,0.7); 
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 2px;    
}

#mlj-layers .mlj-eye.show {
    background-image: url('../img/icons/IcoMoon-Free-master/PNG/48px/0207-eye.png');    
}

#mlj-layers .mlj-eye.hide {
    background-image: url('../img/icons/IcoMoon-Free-master/PNG/48px/0210-eye-blocked.png');        
}


/* LOG WIDGET _______________________________________________________________ */

#mlj-log-widget  {    
    position: relative;    
    width: 100%;
    height: 100%;             
    background-color: rgba(0,0,0,0.5);    
}

#mlj-log-widget textarea{
    position: absolute;
    background:none;
    color: white;
    border: none;    
    margin: 0;
    resize: none;
    padding: 5px;
    top:0; bottom:0;
    width: 100%;
    height: 100%;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: auto;
}

/* INFO WIDGET ______________________________________________________________ */
#mlj-info {    
    /*overflow: auto;*/
    padding: 3px;
    width: 120px;
    height: 60px;    
    background-color: rgba(0,0,0,0.5);    
    color: white;
    font-size: 75%;
    text-align: center;
    vertical-align: middle;
    border-radius: 12px;
}

#mlj-info p {
    margin: 5px;
}

/* MeshLabJs Toolbar style __________________________________________________ */
.mjs-toolbar {
    padding: 6px 5px;
    background-color: #E0E0E0;
    /*background-color: #0F2D60;*/  
    /*background-color: #0D47A1;*/      
    border-bottom: darkgray thin solid;    
}

.mjs-toolbar button {
    margin-right:2px;
    border: solid thin darkgray;
    border-radius: 2px;
}


/* Save dialog style ________________________________________________________ */

#mlj-save-dialog input[type='checkbox']{
    width: 20%;
    text-align: center;
}

#mlj-save-dialog input,
#mlj-save-dialog select {
    margin: 6px 0;
    width: 100%;
}

#mlj-save-dialog #button-wrapper {
    text-align: right;
    margin: 6px 0; 
}


/* Custom Toggle Button _____________________________________________________ */
.mlj-custom-toggle-button {
    display: inline-block;
    padding-bottom: 8px;
    position: relative;
}

.mlj-custom-toggle-button-arrow {
    width: 0px;
    height: 0px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0,0,0,0.2);
    position: absolute;
    bottom: 0px;
    left: 5px;
}

.mlj-custom-toggle-button-arrow.arrow-selected {
    border-top: 6px solid black;
}

/* MeshLabJs global styles __________________________________________________ */

.ui-resizable-s { 
    cursor: s-resize;                                 
    left: 0; 
    right: 0;
    bottom:0;
    height: 4px;
    background-color: darkgray;
    opacity: 0.5;    
}

.ui-resizable-s:hover {     
    background-color: black;
    opacity: 0.5;
    visibility:  visible;
}

.ui-tooltip {
    border-radius: 4px;
}
.ui-tooltip-content {
    font-size: 66%;
    line-height: 120%;
}
.ui-tabs .ui-tabs-panel {
    padding: 0.5em 0;
}

.ui-accordion-header .ui-button {
    margin-left: 5px; 
}

.ui-accordion .ui-accordion-content {
    padding: 0;
	font-size: 90%;
    background: #D9DBDC;
}

.mlj-color-picker {    
    height: 20px;    
    display: table;   
    border: darkgray thin solid;
    border-radius: 2px;
}

.mlj-picker {        
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:70px;
    display: table-cell;
    border: none;
    padding: 4px;
}

.mlj-picker-preview {    
    width:22px;    
    background-color: red;
    display: table-cell;
    border-left: solid 1px darkgray;    
}

.colpick {
    z-index: 999;
}

/* Histogram labels ______________________________________________________________ */
.mlj-hist-label {    
    /*overflow: auto;
    padding: 4px;
    background-color: rgba(0,0,0,0.5); */   
    color: white;
    font-size: 65%;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px;
}

 #sketchfabProgressBar {
    position: relative;
    width: 100%;
    height: 20px;
    background-color: #BCC6CC;
    margin-top: 10px;
}

#progressBar {
    position: absolute;
    width: 0%;
    height: 100%;
    background-color: #4863A0;
}

#pBarLabel {
    text-align: center; /* If you want to center it */
    line-height: 20px; /* Set the line-height to the same as the height of the progress bar container, to center it vertically */
    color: white;
}

#exitUpdateButton,#mlj-upload-dialog-button,#uploadButton{
    width: 50%;
    height: 30px;
    text-align: center;
    position: relative;
    left: 25%;
    margin-top: 10px;
}

#the-form input[type='text'],#the-form input[type='password'],#the-form textarea{
    width: 98%;
}

#the-form{
    line-height: 19px;
}

#passwordCounter,#descriptionCounter,#nameCounter {
    display:inline;
    color: grey;   
    font-size: 90%;
}

#passwordCounter.overflow,#descriptionCounter.overflow,#nameCounter.overflow,#status.error{
    color: red;
}

#sketchfabUpload{
    margin-top: 8px;
}