/* 
    Created on : 20/02/2019, 09:58:43 AM
    Author     : CC
*/
:root {
   --lumo-primary-color:#123224;   /* color texto botones*/ 
   --lumo-contrast-5pct:#BBD7CA;  /* background botones*/  
   --lumo-primary-color-50pct:#60c5b1e3;
   --lumo-primary-color-10pct: hsla(125, 34%, 49%, 0.3);
   --lumo-shade-5pct:#123224;  /* background corporativo encabezado*/
   --lumo-font-size-s: 1.08rem;
}
html{
    --lumo-font-size-s: 14px !important; //letra encabezado tabla    
}
.v-loading-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: auto;
  z-index: 2147483647;
}
.v-loading-indicator:before {
  width: 100% !important; 
  height: 100% !important; 
  background: url(../images/logo/APPMUEVETE.gif) no-repeat 50% !important; 
  display: flex !important; 
  align-items: center !important; 
  justify-content: center !important; 
  position: fixed !important; 
  top: 0 !important; 
  right: 0 !important; 
  bottom: 0 !important; 
  animation: bouncedelay 1.2s infinite 3.5s ease-in-out both !important; 
  content: "" !important; 
  
}

vaadin-grid{   
    border-color: #60C5B1;
}
.grow:hover
{
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    color:#63C3B0;
    border-radius:5px;
}
.grow{
    color:#075249;       
}
.border:hover
{
    box-shadow: inset 0px 0px 20px 0px #60C5B1;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}       

.menuoptions{

    background-color: #51a49a3d;
    padding:3%;
    border-radius: 15px;
    
}
.menuoptions:after {
  content: url(../images/logo/appcel2.png);   
  z-index: 9999;
  opacity: 0.2; 
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
    
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.hmenu{    
    background-color: #51A49A;
    border-radius: 10px;
    color: #fff;
    margin: 0px;
    align-items: center;
    text-align: center;
    padding-left: 8px;
}
.hlayout{
    text-align: center;
    background-color: #51A49A;
   
    margin-top: 5px;
    border-radius: 10px;
    color: #fff;
    width: 100%;
    align-items: center;
    margin-bottom: 5px;
    
}
.linkmenu:hover{ 
   transform: translateX(1em);    
}
a{    
    color:#075249 !important;
}
.btncerrar{
      text-align: center;  
}
.v-loading-indicator{
    background-color:#60C5B1 !important;
}
.sombra{
-webkit-box-shadow: 20px 20px 5px -15px rgba(130,127,130,1);
-moz-box-shadow: 20px 20px 5px -15px rgba(130,127,130,1);
box-shadow: 20px 20px 5px -15px rgba(130,127,130,1);
}
 
.usermenu{    
    border-bottom: black;
    border-bottom-style: dashed;
    border-width: 1px;
    padding-bottom: 17px;
    text-align: center;
    width: 100% !important;
}
.divuser{
    
    align-items: center;
    text-align: center;
    width: 100% !important;
    padding-bottom: 25px;
}

.circulo {
  height: 100px;
  width: 100px;
  background-color: #bbbbbb4f;
  border-radius: 50%;
  display: inline-block;
}

@media screen and (max-width:640px) {
    .tablaweb{
        width: 100%;
    }
    .tablaweb2{
        width: 100%;
    }
    .tablawebtitulos{
        width: 100%;
    }
}
@media screen and (max-width:1024px) and (min-width:640px) {
  .tablaweb{
        width: 80%;
    }
  .tablaweb2{
        width: 60%;
    }
    .tablawebtitulos{
        width: 90%;
    }
}
@media screen and (max-width:1920px) and (min-width:1024px) {
    
  .tablaweb{
        width: 75%;
    }
   .tablaweb2{
        width: 60%;
    }
    .tablawebtitulos{
        width: 80%;
    }
}

@media screen and (min-width:1920px) {
    
    .tablaweb2{
        width: 50%;
    }
    .tablaweb{
        width: 65%;
    }
    .tablawebtitulos{
        width: 70%;
    }
}