:root{
	--azul: blue;
	--azulOscuro: darkblue;
	--naranja: orange;
	--blanco: white;
}

input, button, select, textarea, button{
	padding-top:7px;
	padding-bottom:7px;
	padding-left:5px;
	margin:0px;
}

.flotante, #alerta, #input{
		z-index: 100;
    width:98vw;
    height:calc(100vh - 10px);
    left:2px;
    top:5vh;
    top:-200vh;
    background-color:#4CAF50;
    border: 1px solid gray;
    position:fixed;
    transition-property: top;
    transition-duration: 0.8s;
    -webkit-box-shadow: 1px 4px 16px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 4px 16px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 4px 16px 0px rgba(0,0,0,0.75);
}

.flotante>h4,
#alerta>h4,
#input>h4{
    float:left;
    padding:10px;
	margin:0px;
	color:var(--blanco)
}

.flotante>div,
#alerta>div,
#input>div{
    background-color:var(--blanco);
    width:calc(100% - 22px);
    height:calc(100% - 61px);
    margin-top:40px;
    padding:10px;
		overflow:auto;
		/*text-align:center;*/
		position:relative;
}

.flotante > button,
#alerta > button,
#input>button{
  float:right;
	margin-right:2px;
	color:white;
	background-color: red;
}

#alerta, #input{
    height:225px;
    width:95vw;
    left:5px;
    margin-left:0px;
}

#alerta div{
    text-align:center;
}

.icono{
	display: inline-block;
	vertical-align:top;
	top:0px;
	text-align:center;
	width:100px;
	height:120px;
	border-radius:10px;
	padding:10px;
}
.icono:hover{background-color:rgba(255,255,255,0.5)}
.icono>img{
	width:50px;
}

._panel > label{
	width:100px!important;
	display:inline-block;
	background-color:var(--azul);
	color:var(--blanco);
	padding:5px;
	margin-right:10px;
}

.panel>*{width:calc(100% - 10px)}

#_autoList{
	display:none;
	background-color: silver;
	border:2px solid gray;
	position:absolute;
	max-height: 300px;
	overflow: auto;
}

#_autoList>div{
	padding:2px;
	font-size:11px;
	background-color: var(--blanco);
}

#_autoList>div:focus {
    background-color: Aqua;
}

.winPopup{
	position:fixed;
	height: 80vh;
	width: 80vw;
	margin: 10%;
	top:-50px;
	border:1px solid black;
	padding:8px;
	background-color:var(--blanco);
	display:none;
	overflow: auto;
}

.pag{
	width:25px;
	height:20px;
	display:inline-block;
	text-align:center;
	color:gray;
	cursor:pointer;
}

.pag:hover{
	background-color:var(--azul);
	color: var(--blanco);
}
.pagSel{
	background-color:var(--naranja);
	color: var(--blanco);
}

#jwf_autoSearch{
	position:absolute;
	display:none;
	min-height:10px;
	max-height:250px;
	max-width:300px;
	padding:0px;
	margin:0px;
	border:1px solid silver;
}

#jwf_autoSearch ul {padding:0px;margin:0px;}

#jwf_autoSearch ul li{
	padding:4px;
	background-color:rgba(220,220,220,0.8);
	color:black;
	font-size:Arial;
	font-size:11px;
	/*border:1px solid gray;*/
}

#jwf_autoSearch ul li:hover{
	background-color:silver;
	color:var(--blanco);
}

.jwf_floatTask{
	text-align:right;
	padding:4px;
	background-color:silver;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
}

.jws_screen{
	width: 90vw;
	height: 90vh;
	left: 5vw;
	position:fixed;
	top:20px;
	visibility: hidden;
	background-color: var(--blanco);
	border: 1px solid silver;
}

.cEdit:hover {
	background-image: url('../image/edit.png');
	background-repeat:no-repeat;
	/*background-position: 5px 5px;*/
	background-size: 18px, 18px;
	background-position:calc(100% - 5px) calc(100% - 5px);
}


#jws_loading{
	position: fixed;
	top:50%;
	left:50%;
	margin-top:-150px;
	margin-left:-150px; 
	width:300px;
	height:300px;
}

#jws_loading img {
	width:100%;
}


/**DB SELECT */
.dbSelect{
	margin: 0px;
	list-style: none;
	padding-left:0px;
	position:relative;
	width:auto;
	position:relative;
	display:inline-block;
	width:100%;
   }
 .dbSelect>button{
	 position:absolute;
	 top:0px;
	 right:0px;
 }
 .dbSelect>input{
	 /*background-color:white;*/
	 border: 1px solid silver;
	 padding-right:35px;
	 display:block;
	 width:calc(100% - 45px);
 }
 .dbSelect>div>button{
	 padding:5px;
	 width:100%;
 }
 .dbSelect>div{
	 display:none;
	 position:absolute;
	 border:1px solid gray;
	 background-color:white;
	 color:gray;
	 margin-left:10px;
	 min-width:70%;
	 max-height:250px;
	 z-index:800;
	 overflow:auto;
 }
 .dbSelect>div>li{
	 padding:5px;
 }
 .dbSelect>div>li:hover{
	 color:white;
	 background-color:var(--azulOscuro);
 }

 /*dbBuscar*/
 .dbBuscar{
	 background-color: rgb(255, 78, 78);
	 color:white;
 }
 .dbBuscar>option{
	 color:black;
 }

._tabs{
	border:1px solid silver;
	border-top: 0px;
}

 ._tabs>div {
	display:none;
	padding:10px;
	height:calc(100% - 50px);
	overflow:auto;
 }

 ._mmItem{
	display:inline-block;
	vertical-align: top;
	top:0px;
	padding:5px;
	width:90px;
	height:100px;
	text-align:center;
	border: 1px solid white;
	position:relative
 }
 ._mmItem:hover{
	 border: 1px solid silver;
	 border-radius: 5px
 }

 ._mmItem>img{
	max-width:100%
 }
 ._mmItem>label{
	position:absolute;
	bottom:10px;
	left:0px;
	width:100%;
	text-align: center
 }
 ._mmItem._dir{
	 background: silver;
	 font-weight: bold
 }
 ._mmItem>label{
	 background-color:rgba(255,255,255,0.7);
	 padding:5px
 }



 ._pref input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	height: 8px;
	padding:0px;
	background: silver;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
  }
  
  ._pref input[type=range]:hover {
	opacity: 1;
  }
  
  ._pref input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	background: darkgreen;
	background-image: url('../image/q.png');
	cursor: pointer;
	border:1px solid silver;
	border-radius:15px
  }
  
  ._pref input[type=range]::-moz-range-thumb {
	width: 25px;
	height: 25px;
	background: #4CAF50;
	background-image: url('../image/q.png');
	cursor: pointer;
  }

  ._pref>div {
	  padding:10px
  }

  ._pref>label>label{
	  display:inline-block;
	  width:10%;
	  border:1px solid gray;
	  padding:10px;
	  margin-right:20px
  }

  ._pref .i{
	  width:90px;
	  float:right;
	  text-align:right;
	}
	
	._error{
    background-color: orangered;
    font-weight: bold;
    color:white;
    padding:5px;
}
._frmCol{
    display:inline-block;
    padding:0px;
    vertical-align: top;
    top:0px
}

._iconos ._file,._iconos ._folder, ._back {
	width:45%;
	display:inline-block;
	height:125px;
	margin:5px;
	font-size:12px;
	border:1px solid rgba(255,255,255,0);
	text-align:center;
	position:relative
}

._iconos ._file:hover,._iconos ._folder:hover {
	border:1px solid silver
}

._iconos ._file>label,._iconos ._folder>label{
	position:absolute;
	display:block;
	top:85px;
	width:100%;
	text-align:center;
}

.ruta{padding:10px}
.ruta>span{
	background:rgba(220,220,220,0.5);
	border-radius: 5px;
	color: gray;
	padding:5px;
	cursor:pointer
}

._pre2Editor{
	border:1px solid gray;
	background:white;
}

._pre2Editor>.barra{
	padding:15px;
	background:var(--naranja);
	color:white;
	width:calc(100% - 30px);
}
._pre2Editor>.canvas{
	border: 1px solid silver;
	padding:10px;
	min-height:calc(100vh - 200px);
	width:calc(100% - 22px)
}

._pre2Editor>.console{
	border: 1px solid silver;
	padding:10px;
	width:calc(100% - 22px);
	background: black;
	color:darkgreen;
	font-size: 'courrier new'
}

table ._oculta{
	display:none!important
}

.mnFlotante{
	position:fixed;
	-webkit-box-shadow: 1px 4px 16px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 1px 4px 16px 0px rgba(0,0,0,0.75);
	box-shadow: 1px 4px 16px 0px rgba(0,0,0,0.75);
	background:#4CAF50;
	width:30px;
	height:50px;
	right:-25px;
	border-radius: 5px;
	color:white;
	font-weight: bold;
	margin:10px;
	padding:4px;
	overflow: visible;
	z-index:90
}

.mnFlotante>div{
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	width:80px;
	margin-left:-20px;
	/*margin-top:0px;*/
}

.mnFlotante>div>div{
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	width:50px;
	height:0px;
	overflow:hidden;
	color:black;
	padding:0px;
	margin:0px;
	border-radius:5px;
	background: rgba(255, 255, 255, 0);
}
.mnFlotante:hover{
	right:-18px;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
.mnFlotante:hover>div{
	margin-left:-80px;
	margin-top:-80px;
}
.mnFlotante:hover>div>div{
	position:relative;
	height:50px;
	padding:4px;
	margin:5px;
	background: rgba(255, 255, 255, 0.801);
	text-align:center
}

.menu-main{ /*contenedor de menu*/
	height:40px;
	overflow: visible;
	padding-left:35px;
	background:var(--azulOscuro);
	position:relative;
	color:white
}
.menu-main div { /*todos los divs del menu*/
	z-index:1;
	cursor:pointer; 
}

.menu-main div>ul{ /*Todos los submenus*/
	height:0px;
	margin:0px;
	overflow:hidden;
	padding:0px;
	transition: all 0.2s !important;
	list-style:none;
	width:200px;
}

.menu-main>div>ul{
	background-color: #afc5f5;
}

.menu-main>div{display:inline-block;padding:10px;height:20px} /*raiz menu*/

.menu-main>div>ul{
	position:absolute;
	top:34px;
}
.menu-main div>ul>li{ 
	height:0px;
	padding:0px;
	transition: all 0.5s !important;
	border-left:1px solid white;
}
.menu-main div>ul>li:hover{
	background-color: #3b5998;
	color:white;
}
.menu-main div:hover{
	background: #3b5998;
}
.menu-main div:hover>a{
	color:#3b5998;
}

.active>ul>li{
	color:white
}

.active>ul>li:hover{
	background-color:white!important;
	color:var(--azulOscuro)!important;
	border-left:3px solid red!important
}

@media(min-width:870px) {
	._iconos ._file,._iconos ._folder, ._back {width:150px;}
	#alerta, #input{
		height:225px;
		width:450px;
		left:50vw;
		margin-left:-225px;
	}

	#alerta div{
		text-align:center;
	}
}

@media (max-width: 768px) {
	.menu-main{
			border-bottom: 0px;
			display: block;
			height:auto
	}
	.menu-main>div{
			height:auto;
			border-bottom: 1px solid #29487d;
			display:block
	}
	
	.menu-main div, #menu-main ul{
			width:100%
	}
	.menu-main>div>ul{
			position:static;
			width:auto;
			margin-top:10px;
	}
}