/* Variables para Cambio de Color Entre Aplicaciones. */

:root {
  --app-color:#213a5f;

  --app-color-opacity:#334663;
  --appText-color-opacity:#313131;
  
  --appText-color:#213a5f;
  --appText-color-hover: #fff;
  --appBorder-color:#3346639c;

  --alerts-bgcolor:#fff;

  --backGround-solidImage:url('/core/imgGlobals/background.png');
  --background-waterMarkImage:url('/core/imgGlobals/bgWaterMark.png');
}

/* information Messagges infoAlert*/

.asx-yellow-alert{color:#fff!important;background-color:#bd740c!important}
.asx-red-alert{color:#fff!important;background-color:#c00202!important}
.asx-green-alert{color:#fff!important;background-color:#157a14!important}
.asx-orange-alert{color:#fff!important;background-color:#c13f07!important}
.asx-incl-left{transform:rotate(-5deg)}
.asx-incl-right{transform:rotate(5deg)}


/* Principales de Toda la Aplicacion. */

body, html{
	height: 100%;
}

.backGroundImage{
	width:100%;height:100%;background-position:bottom right;background-repeat:no-repeat;
  background-image:var(--backGround-solidImage);
}

/* Imagen de Fondo de la webApp Tipo Marca de Agua. */
.imgBackGroundWaterMark{
	width:100%;height:100%;background-position:bottom right;
  background-repeat:no-repeat;background-image:var(--background-waterMarkImage);
}

/* -- Estilos de Formularios -- */

textarea:focus, input:focus{
  outline: none;
}

[type=checkbox],[type=radio]{padding:0}

.asx-input{
  padding:6px;
  display:block;
  border:1px solid;
  border-color:var(--appBorder-color);
  width:100%;
}

.asx-input-maskUpper{
  text-transform: uppercase;
  ::-webkit-asx-input-maskUpper-placeholder { /* WebKit browsers */
    text-transform: none;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
  }
  :-ms-asx-input-maskUpper-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
  }
  ::placeholder { /* Recent browsers */
    text-transform: none;
  }
}

input[type="file"]{
  border: none;
}

input[type="file"]::file-selector-button {
  border:none;
  display:inline-block;
  padding:8px 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background-color:inherit;
  text-align:center;
  cursor:default;
  white-space:nowrap;
  color:var(--appText-color-hover)!important;
  background-color:var(--app-color)!important;
}

input[type="file"]::file-selector-button:hover {
  color:var(--appText-color-hover)!important;
  opacity:0.60;
  background-color:var(--app-color-opacity)!important;
}

.asx-select{
  padding:6px 0;
  border:1px solid;
  border-color:var(--appBorder-color);
  width:100%;
}

.asx-normalCheck{
  cursor: auto;
  position:relative;
  top: 4px;
  background-color: #fff;
  color: #fff;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  width: 18px;
  height: 18px;
  appearance: none;
  border: 1px solid;
  border-color:var(--appBorder-color);
  background-position: 0 -2rem;
  background-size: 100%;
  background-repeat: no-repeat;
  transition: all 0.3s ease-in-out;
}

.asx-normalCheck:checked{
  background-color: rgb(255, 255, 255);
  background-position: 0 0;
}

/*
.asx-normalCheck:focus{
  border-color: var(--app-color);
}
*/

.asx-normalCheck:disabled{
  background-color: rgb(198, 198, 198);
  background-image: none;
}

.asx-normalCheck:disabled:checked{
  background-color: rgb(198, 198, 198);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

/* -- Contenedores Personalizdos -- */
.asx-modal-normal{
  z-index:3;display:none;padding-top:3%;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.8);
}

.asx-modal-small{
  z-index:3;display:none;padding-top:12%;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.8);
}

.asx-container-centerScreen{
  display:flex;width:100%;height:100%;justify-content:center;align-items:center;
}

.asx-container-showAsincronic{
  position:absolute;left:0px;top:51px;width:100%;height:calc(100% - 51px);overflow:auto;
}

/* -- Muestreo de Loader y Alertas de Notificacion dentro de Una Ventana Modal W3CSS o asxConteiners-- */
.coverModal{
  position:absolute;left:0px;top:0px;width:100%;height:100%;background:var(--app-color);
  z-index:2;transition:width 0.2s ease-in-out;display:none;
}

.coverModal>.animModalLoader{
  position:absolute;width:150px;height:150px;top:calc(50% - 140px);
  left:calc(50% - 120px);border:2px solid #fff;border-radius:50%;
  margin:50px 50px;animation:loading 2s linear infinite;
}

.coverModal>.animModalLoader:after{
  content: "";left: 65px;top: -10px; position: absolute;
  width: 20px;height: 20px;background: #fff;border-radius: 50%;
}

@keyframes loading{
  50%{opacity:0.5;}
  100%{transform: rotate(360deg);}
}

.infoAlert{
  position:absolute;top:calc(50% - 100px);padding:10px 0 ;width:100%;height:100px;
  text-align:center;display:none;z-index: 1000;
}

/* -- Colores Personalizados FaFontsIcons --*/
.asx-ligth-unlock-02{color:green;}
.asx-ligth-lock-02{color:red;}

/* -- Estilos de Texto, Botones, Bordes, w3css Modded ADD -- */

.asx-main-color,.asx-hover-main-color:hover{color:var(--appText-color-hover)!important;background-color:var(--app-color)!important}
.asx-text-color,.asx-hover-text-color:hover{color:var(--appText-color)!important}
.asx-border-color,.asx-hover-border-color:hover{border-color:var(--appBorder-color)!important} 
.asx-main-color-opacity,.asx-hover-main-color-opacity:hover{color:var(--appText-color-hover)!important;background-color:var(--app-color-opacity)!important}
.asx-btntab-active{font-weight:bold;color:var(--appText-color-hover)!important;background-color:var(--app-color-opacity)!important}

/* -- Maquetado Principal de appHome -- */
/*.barraSuperior{position:fixed;top:0px;height:50px;width:calc(100% - 200px);margin-left:200px;background-color:#3b5998;color:#fff;}
.menuLateral{position:fixed;top:50px;height:100%;width:200px;background-color:#3b5998;color:#fff;}
.appUI{position:fixed;top:50px;height:calc(100% - 45px);width:calc(100% - 200px);background-color:#fff;color:#000;overflow:scroll;overflow-x:hidden;overflow-y:auto;}
.w3-bar-block.w3-bar-item{padding:16px;} */

/* Posicionamiento de Bloque de Developer & Distribuidor */
/*
.block-develop {
  display:block;
  width:250px;
  height:25px;
  color:rgba(51, 51, 51, 0.637);
  color : #043560;
  position: fixed;
  right:0px;
  bottom:10px;
  z-index:999;
}
*/

/* -- Ventana de Inicio de Sesion -- */
/*
.w3-asx-modal{
  z-index: 3;
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(177, 13, 13, 0.4)
}

.w3-asx-modal-content{
  top: 50%;
  left: 50%;
  margin-left: calc((360px / 2) * -1);
  margin-top: calc((500px / 2) * -1);
  background-color: #973b3b;
  position: relative;
  padding: 0;
  outline: 0;
  width: 360px;
  height:500px;
}
*/

/* Colores W3Css FlatUI */
.w3-flat-turquoise
{color:#fff!important;background-color:#1abc9c!important}
.w3-flat-emerald
{color:#fff!important;background-color:#2ecc71!important}
.w3-flat-peter-river
{color:#fff!important;background-color:#3498db!important}
.w3-flat-amethyst
{color:#fff!important;background-color:#9b59b6!important}
.w3-flat-wet-asphalt
{color:#fff!important;background-color:#34495e!important}
.w3-flat-green-sea
{color:#fff!important;background-color:#16a085!important}
.w3-flat-nephritis
{color:#fff!important;background-color:#27ae60!important}
.w3-flat-belize-hole
{color:#fff!important;background-color:#2980b9!important}
.w3-flat-wisteria
{color:#fff!important;background-color:#8e44ad!important}
.w3-flat-midnight-blue
{color:#fff!important;background-color:#2c3e50!important}
.w3-flat-sun-flower
{color:#fff!important;background-color:#f1c40f!important}
.w3-flat-carrot
{color:#fff!important;background-color:#e67e22!important}
.w3-flat-alizarin
{color:#fff!important;background-color:#e74c3c!important}
.w3-flat-clouds
{color:#000!important;background-color:#ecf0f1!important}
.w3-flat-concrete
{color:#fff!important;background-color:#95a5a6!important}
.w3-flat-orange
{color:#fff!important;background-color:#f39c12!important}
.w3-flat-pumpkin
{color:#fff!important;background-color:#d35400!important}
.w3-flat-pomegranate
{color:#fff!important;background-color:#c0392b!important}
.w3-flat-silver
{color:#000!important;background-color:#bdc3c7!important}
.w3-flat-asbestos
{color:#fff!important;background-color:#7f8c8d!important}