@import url('https://fonts.googleapis.com/css?family=Cabin');
@import url('https://fonts.googleapis.com/css?family=Cabin+Condensed');

/* kb-155 - change 254888 by 152663, ffcf17 by ffcf17 */

.tabenvios {

    background-image: url('../img/pasopaso_amarillito.svg');
	background-position-y: 0px;
	height: 33px;
	background-repeat: no-repeat;
	border: none;
	padding-top:5px;
	padding-left: 10px;
	background-size: 100% 90px;
	max-width: 350px;
	list-style-type:none;
}

.lienvios{
	background:none !important;	border:none !important;
	text-decoration: none;
	list-style-image: none;
	color: white;
	width:110px;
    margin-left:0px;
    top: 25px;
}

.lienvios a{
	color:white;
	text-decoration:none;
    /*text-shadow: 1px 1px #ffcf17;*/
}


.botontabsel{
	font-weight:bold !important;
	/*color: #05549c !important;*/
	color: #818181 !important;
	pointer-events:all !important;
 /*   text-shadow: 0 0 5px #ffcf17,0 0 5px #ffcf17;*/
	                   
}

.botontab-estadoinicial{
	pointer-events:none !important;
}

.botontab{
	font-weight: normal !important;
	color: #aaa !important;
/*	color: #05549c !important;*/
}


.v-alineacion{
  display: inline-block !important;
  float: none !important;
  vertical-align: middle !important; 
}

#lienvio{
    left:-7px;
}

#lidestino{
    left:6px;
}

#liproducto{
    left:30px;
}




@media screen and (min-width:100px) and (max-width:760px) {
    .v-alineacion{
        display:inline !important;
    }
}

@media screen and (max-width: 600px) and (min-width: 425px) {
    .lienvios {
        width: 100px;
    }
    #tabladatos{
        font-size:0.7em;
    }    
}

#div-imagen-principal{
    width: 50%; 
    color: blue; 
    float: right;
    background-image:url('../img/imagen-home.jpg');
    height:100vh;
    background-size:cover;
    background-repeat:no-repeat;
    background-position-y: bottom; 
    background-position-x: left;
}
    
#div-barra-principal{
    background: #FFC300;
    height: 80px;
    /*border-bottom: #165396 solid 4px; */
    width: 100% !important;
    padding: 0 !important;
    min-height: 96px;
    position: relative;
    word-wrap: break-word;
}

#img-logo-principal{

    max-width: 100%;
    height: auto;border: 0;
    margin-top: 21px; 
    margin-left:33px;    /*1.3%;*/

}

@media screen and  (min-width:601px) and (max-width:2048px){
    #div-texto-principal{
          width: 50%;
          float: left;
          display: inline;
          color: red;
          /*background-image: url('../img/t1.jpeg');*/
          height: 100vh;
          /*! width: 100%; */      
          background-repeat:no-repeat;                
    }
    #div-texto-principal > div{
        padding-left:35px !important;
    }
    #div-texto-principal-titulo{
        padding-top:52px;
    }
    #div-imagen-principal{
        width: 50%; 
        color: blue; 
        float: right;
        background-image:url('../img/imagen-home.jpg');
        height:100vh;
        background-size:cover;
        background-repeat:no-repeat;
        background-position-y: top; 
        background-position-x: left;
    }

}

@media screen and (max-width:600px) and (min-width:100px){
    #div-texto-principal{
        width:100% !imporatnt;
        float:none !important;
        
    }
    #div-texto-principal > div{
        padding:5px !important;
    }
    #div-text-principal-texto{
        padding-top: 5px;        
    }
    #div-imagen-principal{
        width: 100% !important;
        float:none !important;
        clear:both;
        height:50% !important;
        background-positition-y:-62px !important;
    }
    #div-barra-principal{
        height:104px;
    }        
    #img-logo-principal{
        margin-top: 12px;
        margin-left: 0px;
        transform: scale(0.8);    
    }
}

@media screen and (max-width: 425px) and (min-width: 361px) {
    #lienvio {
        width: 81px;
        font-size:0.9em;
    }
    #lidestino {
        width:70px;
        font-size:0.9em;
    }
    #liproducto{
        width:70px;
        font-size:0.9em;
    }
    #tabladatos{
        font-size:0.6em;
    }
}


@media screen and (max-width: 360px) and (min-width: 320px) {
    #lienvio {
        width: 68px;
        font-size:0.9em;
        padding-left:0px;
    }
    #lidestino {
        width:68px;
        font-size:0.9em;
    }
    #liproducto{
        width:68px;
        font-size:0.9em;
    }
    #tabladatos{
        font-size:0.55em;
    }    
}

@media screen and (max-width: 320px) and (min-width: 310px) {
    #lienvio {
        width: 70px;
        font-size:0.8em;
        margin-left:-10px
    }
    #lidestino {
        width:58px;
        font-size:0.8em;
        margin-left:-10px
    }
    #liproducto{
        width:50px;
        font-size:0.8em;
        margin-left:5px
    }
    .lienvios{
        margin-top:2px;
    }
    #tabladatos{
        font-size:0.5em;
        overflow:auto;
    }    
}


@media screen and (max-width: 300px) and (min-width: 160px) {

    .ayuda{
        top:5px !important;
        font-size:0.8em !important;
        width:95% !important;
    }   
    #ulenvios{
        visibility:hidden;
    }
    #tabladatos{
        font-size:0.45em;
        overflow:auto;
    }    
}




.altolinea-30{
    line-height:30px !important;
}



.panel-azul-4a {
    border-color: #152663; /*2a5391*/
}

.panel-azul-4a .panel-heading {
    border-color: #152663;
    color: #152663;
    background-color: #f5f5f5;
}

.panel-azul-4a a {
    color: #152663 !important;
}

.panel-azul-4a a:hover {
    color: #71CBFF !important;
}
.panel-azul-4a .panel-footer {
    border-color: #152663;
    color: #fff;
    background-color: #152663;
}



.panel-verde-4a {
    border-color: #6aa843;
}

.panel-verde-4a .panel-heading {
    border-color: #6aa843;
    color: #6aa843;
    background-color: #f5f5f5;
}

.panel-verde-4a a {
    color: #6aa843 !important;
}

.panel-verde-4a a:hover {
    color: #D3FFAC !important;
}
.panel-verde-4a .panel-footer {
    border-color: #6aa843;
    color: #fff;
    background-color: #6aa843;
}




.panel-amarillo-4a {
    border-color: #ffcf17; /*FFC300*/
}

.panel-amarillo-4a .panel-heading {
    border-color: #ffcf17;
    color: #ffcf17;
    background-color:#f5f5f5;
}

.panel-amarillo-4a a {
    color: #ffcf17 !important;
}

.panel-amarillo-4a a:hover {
    color: #FFFB38 !important;
}

.panel-amarillo-4a .panel-footer {
    border-color: #ffcf17;
    color: #fff;
    background-color: #ffcf17;
}


.icono-panel-dash{
    font-size: 10em;
    margin-bottom: -44px;
    margin-top: -18px;
}

.panel-naranja-4a {
    border-color:#EF6B00;
}

.panel-naranja-4a .panel-heading {
    border-color: #EF6B00;
    color: #fff;
    background-color: #EF6B00;
}

.panel-naranja-4a a {
    color: #EF6B00 !important;
}

.panel-naranja-4a a:hover {
    color: #FFB30D !important;
}



.panel-naranja-4a {
    border-color: #EF6B00;
}

.panel-naranja-4a .panel-heading {
    border-color:#EF6B00;
    color: #fff;
    background-color: #EF6B00;
}

.panel-naranja-4a a {
    color: #EF6B00;
}

.panel-naranja-4a a:hover {
    color: #ed7c0d;
}

      
      
.panel-rojo-4a {
    border-color: #DA000A;
}

.panel-rojo-4a .panel-heading {
    border-color: #DA000A;
    color: #fff;
    background-color:#DA000A;
}

.panel-rojo-4a a {
    color: #DA000A !important;
}

.panel-rojo-4a a:hover {
    color: #FF7077 !important;
}
    
      
.open > .dropdown-menu {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);  
  opacity:1;
}
      
li .dropdown-menu {
  opacity:0; 
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-animation-fill-mode: forwards;  
  animation-fill-mode: forwards; 
  -webkit-transform: scale(1, 0);
  display: block; 
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}
 
 
  

.elipsis_cotizando:after{
   
 
    -webkit-animation-name: animar_cotizando;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: animar_cotizando;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: animar_cotizando;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;    
    
}

@-moz-keyframes animar_cotizando {  
    0% { content: 'cotizando tus env\00edos' ; }
    35% { content: 'cotizando tus env\00edos.'; }
    50% { content: 'cotizando tus env\00edos..'; }
    75% { content: 'cotizando tus env\00edos...'; }
    100% { content: 'cotizando tus env\00edos....'; }
}
@-webkit-keyframes animar_cotizando {  
    0% { content: 'cotizando tus env\00edos' ; }
    35% { content: 'cotizando tus env\00edos.'; }
    50% { content: 'cotizando tus env\00edos..'; }
    75% { content: 'cotizando tus env\00edos...'; }
    100% { content: 'cotizando tus env\00edos....'; }
}
@keyframes animar_cotizando {  
    0% { content: 'cotizando tus env\00edos' ; }
    35% { content: 'cotizando tus env\00edos.'; }
    50% { content: 'cotizando tus env\00edos..'; }
    75% { content: 'cotizando tus env\00edos...'; }
    100% { content: 'cotizando tus env\00edos....'; }
}

        
.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    40% { opacity: 0.0; }
    80% { opacity: 1.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    40% { opacity: 0.0; }
    80% { opacity: 1.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    40% { opacity: 0.0; }
    80% { opacity: 1.0; }
    100% { opacity: 1.0; }
}


#divc1, #divc2, #divc3, #divc4 {
    display:none;
} 

#boton-recarga{

  background-color: #fff; /* #ffcf17;  */
  color: #004688;
  font-weight: bold;
  border-color: #152663;
  float: left;
  margin-top: 20px;
  margin-bottom: 20px;

} 

#boton-recarga > span{
    color: #9a003f;
}


#boton-recarga:hover{
    color:#fff;
    background-color:  #004688;
}

#boton-recarga:hover>span{
    color:#fff;

}

.div-boton-izq{
  float: right; 
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 40px;
  vertical-align: middle;

}
   
.icono_grande{
    display:inline-block;
    font-size:1.4em;
    vertical-align:bottom;
}   


.animar-icono-avanzar{
/*margin-left:-20px; */
position:absolute;
margin-top:4px;
-webkit-animation:linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 2s;
animation: runms 2.0s linear infinite 0.0s;
}     
@-webkit-keyframes run {
    0% { left: 10px; opacity: 0;}
    40% {opacity:1;}
    80% {opacity:1;}
    100%{ left: 40px; opacity:0}
}
@keyframes runms {
  0% {
            transform: translateX(-50px) ;
            opacity:0;
  }
  40% {
            opacity:1;
  }

  80% {
            opacity:1;
  }
  100% {
            transform: translateX(-10px);
            opacity:0;
  }
}



.animar-icono-bambolear {
    animation: spin2 0.8s infinite linear;
    -animation: spin 0.8s infinite linear;
    -webkit-animation: spin2 0.8s infinite linear;
}

@-webkit-keyframes spin2 {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    33.33% { -webkit-transform: rotate(30deg);transform: rotate(30deg);}
    66.66% { -webkit-transform: rotate(-30deg);transform: rotate(-30deg);}
    100% { -webkit-transform: rotate(0deg);transform: rotate(0deg);}
}

@keyframes spin {
    0% { transform: scale(1) rotate(0deg);}
    33.33% { transform: scale(1) rotate(30deg);}
    66.66% { transform: scale(1) rotate(-30deg);}
    100% { transform: scale(1) rotate(0deg);}
}   


.topbackimagen{
    background-image:   url('/img/fondo_cajas2_amarillo.png');
    background-position-x: right;
    background-repeat: no-repeat;
    background-size:cover;
    
    
    /*box-shadow: 00px 6px 3px #30303066;*/
    box-shadow: 2px 4px 7px 3px #9e9e9e;
  /*z-index: 99999; */
    position: relative;
}

  
 a {
  color:blue;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;

}  


.menu-accordion{ 
	text-decoration:none !important;
	color:#245397;
	cursor:pointer;
	font-size:17px;
}


.btn-wel{
	background:transparent;
    /*border-color:white;*/
    color: #152663;
    line-height: 22px;
    padding: 14px;    
    transition:all 0.6s ease ;
}
.btn-wel:hover{
	background: #165396;
    color: #ffcf17;   
        color: white;
}



.wcptitulo a{
  background: -webkit-linear-gradient(#000c23, #c7d1dc);;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* font-size:1.2rem; */ 
  text-align:center;
  /* transition: all 500ms; */
}


.wcptitulo a:hover{
		  background: -webkit-linear-gradient(#f09606, #4a3c14);;
		  -webkit-background-clip: text;
		  -webkit-text-fill-color: transparent;    
}


.fondo-welcome{
/*	background:url(../front/images/fondot1.jpg) no-repeat center center fixed;
	background-size:cover;*/
    background-color:white;
	min-height:70vh;
	padding-top:0px;
    padding-bottom: 10px;

}





.pie-welcome{
    min-height:200px;
    height:20vh;
    background-color:  #2e2e2e;
    color: #e0e0e0;
    padding-top: 50px;
    text-align: center;  
}

.pie-welcome a{
    color:#fff;
    text-decoration:none;
}


.pie-welcome a:hover{
    color:#ffcf17;
    text-decoration:none;
}


#app-layout{
    padding-top:0px;
    padding-right:0px;
    padding-left:0px;

}


.btn-primary{
	background-color: #152663 !important;
	color:#fff !important;
}

.btn-primary:hover{
	background-color: #ffcf17 !important;
	color:#555 !important;
}


body{
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 0px;

}

.btniniciar{
    color:#152663;
    font-weight:bold;
    background: -moz-linear-gradient(center top, #ffcf17, #B87700); 
    background-image: -webkit-linear-gradient(top, #ffcf17, #B87700); 
    background: linear-gradient(center top, #ffcf17, #B87700);
}

.btniniciar:hover{
    color:#fff;
    font-weight:bold;
    background: -moz-linear-gradient(center top, #003FB3, #000D24); 
    background-image: -webkit-linear-gradient(top, #003FB3, #000D24); 
    background: linear-gradient(center top, #003FB3, #000D24);
}


.boton_llamativo_anim{
   color:#152663;
    font-weight:bold;   
    background: -moz-linear-gradient(center top, #FFF4C9, #B87700); 
    background-image: -webkit-linear-gradient(top, #FFF4C9, #B87700); 
    background: linear-gradient(center top, #FFF4C9, #B87700);
   background-size: 200% 200%;
   animation: cambio_brillo 2s infinite; 

}

.boton_llamativo_anim:hover{
    color:#fff;
    font-weight:bold;
    background: -moz-linear-gradient(center top, #003FB3, #000D24); 
    background-image: -webkit-linear-gradient(top, #003FB3, #000D24); 
    background: linear-gradient(center top, #003FB3, #000D24);
    background-size: 100% 100%;
    
}


@keyframes cambio_brillo {
    0% { 
        background-position:  0% 0%;   
     } 
    50% {
        background-position: 0% 100%;
    }
    100% { 
        background-position: 0% 0%   ;
    }   
}



.pasos {
  float: left;
  margin-top: -40px;
  margin-left: -40px;
  padding-left: 3px;
  padding-top: 3px;

}



.table-text{
    vertical-align:middle !important;
    background-color:transparent;
    color: #545454;    
}


.table_text_resaltado{
    background-color:#E7E7E7;
}


.cabaceratabla > TH{
    line-height:3em;
}


.checkbox {
  padding-left: 20px; }
  .checkbox label {
    display: inline-block;
    position: relative;
    padding-left: 5px; }
    .checkbox label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;    
      border: 1px solid #165396;
      border-radius: 3px;
      background-color: #165396;
      -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
    .checkbox label::after {
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      font-size: 11px;
      color: #555555; }
  .checkbox input[type="checkbox"] {
    opacity: 0; }
    .checkbox input[type="checkbox"]:focus + label::before {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
    .checkbox input[type="checkbox"]:checked + label::after {
      font-family: 'FontAwesome';
      content: "\f00c"; }
    .checkbox input[type="checkbox"]:disabled + label {
      opacity: 0.65; }
      .checkbox input[type="checkbox"]:disabled + label::before {
        background-color: #eeeeee;
        cursor: not-allowed; }
  .checkbox.checkbox-circle label::before {
    border-radius: 50%; }
  .checkbox.checkbox-inline {
    margin-top: 0; }

.checkbox-primary input[type="checkbox"]:checked + label::before {
  background-color: #E67706;
  border-color: #152663; }
.checkbox-primary input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox-danger input[type="checkbox"]:checked + label::before {
  background-color: #d9534f;
  border-color: #d9534f; }
.checkbox-danger input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox-info input[type="checkbox"]:checked + label::before {
  background-color: #152663;
  border-color: #152663; }
.checkbox-info input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox-warning input[type="checkbox"]:checked + label::before {
  background-color: #f0ad4e;
  border-color: #f0ad4e; }
.checkbox-warning input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox-success input[type="checkbox"]:checked + label::before {
  background-color: #5cb85c;
  border-color: #5cb85c; }
.checkbox-success input[type="checkbox"]:checked + label::after {
  color: #fff; }

.radio {
  padding-left: 20px; }
  .radio label {
    display: inline-block;
    position: relative;
    padding-left: 5px; }
    .radio label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid #cccccc;
      border-radius: 50%;
      background-color: #fff;
      -webkit-transition: border 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out;
      transition: border 0.15s ease-in-out; }
    .radio label::after {
      display: inline-block;
      position: absolute;
      content: " ";
      width: 11px;
      height: 11px;
      left: 3px;
      top: 3px;
      margin-left: -20px;
      border-radius: 50%;
      background-color: #555555;
      -webkit-transform: scale(0, 0);
      -ms-transform: scale(0, 0);
      -o-transform: scale(0, 0);
      transform: scale(0, 0);
      -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
  .radio input[type="radio"] {
    opacity: 0; }
    .radio input[type="radio"]:focus + label::before {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
    .radio input[type="radio"]:checked + label::after {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1); }
    .radio input[type="radio"]:disabled + label {
      opacity: 0.65; }
      .radio input[type="radio"]:disabled + label::before {
        cursor: not-allowed; }
  .radio.radio-inline {
    margin-top: 0; }

.radio-primary input[type="radio"] + label::after {
  background-color: #428bca; }
.radio-primary input[type="radio"]:checked + label::before {
  border-color: #428bca; }
.radio-primary input[type="radio"]:checked + label::after {
  background-color: #428bca; }

.radio-danger input[type="radio"] + label::after {
  background-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::before {
  border-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::after {
  background-color: #d9534f; }

.radio-info input[type="radio"] + label::after {
  background-color: #5bc0de; }
.radio-info input[type="radio"]:checked + label::before {
  border-color: #5bc0de; }
.radio-info input[type="radio"]:checked + label::after {
  background-color: #5bc0de; }

.radio-warning input[type="radio"] + label::after {
  background-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::before {
  border-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::after {
  background-color: #f0ad4e; }

.radio-success input[type="radio"] + label::after {
  background-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::before {
  border-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::after {
  background-color: #5cb85c; }




.nav-tabs { border-bottom: 2px solid #DDD; }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
    .nav-tabs > li > a { border: none; color: #666; }
        .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #152663 !important; background: transparent; }
        .nav-tabs > li > a::after { content: ""; background: #152663; height: 3px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
    .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}

/*
.card {background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }
*/

.nav_usuario {
    width:auto !important;
    padding-left:0px !important;
    padding-right:0px !important;

}


.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
    background-color:#ffcf17;
    
}


.checkbox_envio label::before{
    background-color: #eee;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    border: 1px solid #ccd0d2;

}



@media screen and (max-width: 480px) {
    .dvLOptionsContainer {
        display: contents;
    }
    .dvROptionsContainer {
        display: contents;
    }    
}



.icono_svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}


.td_etiquetas_torta{
  width: 70px;
  color: white;
  font-size: 0.7em;
  white-space: nowrap;
  padding: 2px 4px 2px 4px;
  text-align: center;
}

.divgraficos{
  border-color:#DADADA !important;
  border-radius: 8px;
  border: 1px solid;
  border-bottom-width: 3px;
  border-right-width: 3px;
  border-left-color: #DEDEDE !important;
  margin: 5px;
  text-align: center;
}

.divgrafico_linea{
  border-color:#9a003f !important;
  border-radius: 8px;
  border: 1px solid;
  border-bottom-width: 3px;
  border-right-width: 3px;
  border-left-color: #D18CA8 !important;
  margin: 5px;
  text-align: center;
}


.divgrafico_torta{
  border-color:#B2B2B2 !important;
  border-radius: 8px;
  border: 1px solid;
  border-bottom-width: 3px;
  border-right-width: 3px;
  border-left-color: #CDCDCD !important;
  margin: 5px;
  text-align: center;
}



.divgrafico_barra{
  border-color: #b25d0a !important;
  border-radius: 8px;
  border: 1px solid;
  border-bottom-width: 3px;
  border-right-width: 3px;
  border-left-color: #F9AF5C !important;
  margin: 5px;
  text-align: center;
}



.divcontenedorgraficos{
    display:flex ;
}


@media screen and   (max-width: 800px) and (min-width: 200px) {
    .divcontenedorgraficos {
        display:block;
    }


}


#cajamedidas {
  float: right;
  margin-top: -150px;
  margin-right: 60px;
  margin-left: 30px;

}

@media screen and (max-width: 880px )  and (min-width:640px){
    #cajamedidas{
        margin-right:0px;
    }
}

@media screen and (max-width:736) {
    #cajamedidas {
        margin-top:-300px;
    }
}

@media screen and (max-width: 639px )  and (min-width:360px){
    #cajamedidas{
        margin-right:-60px;
        margin-top:-300px;
    }
    .divopc1{
        width:100% !important;
        text-align: left !important;
        font-size:1em !important;
    }
}


@media screen and (max-width: 359px )  and (min-width:200px){
    #cajamedidas{
        margin:5px;
        float:none;
        margin-top:-300px;
    }
    .divopc1{
        width:100% !important;
        text-align: left !important;
        font-size:0.8em !important;
    }
}



  /* Tooltip */
  .ayudita + .tooltip > .tooltip-inner {
      background-color: #ffd157e0; 
      color: #152663; 
      border: 1px solid #ffcf17; 
      /*padding: 15px;
      font-size: 0.9em;*/
  }
  
  .tooltip-inner {
      background-color: #ffd157 !important; 
      color: #152663 !important; 
      border: 1px solid #ffcf17 !important; 
      /*padding: 15px;
      font-size: 0.9em;*/
  
  }
  
  .tooltip-arrow{
      border-top: 5px solid #152663;  
  }
  /* Tooltip on top */
  .ayuita + .tooltip.top > .tooltip-arrow {
      border-top: 5px solid #152663;
  }
  /* Tooltip on bottom */
  .ayudita + .tooltip.bottom > .tooltip-arrow {
      border-bottom: 5px solid #152663;
  }
  /* Tooltip on left */
  .ayudita + .tooltip.left > .tooltip-arrow {
      border-left: 5px solid #152663;
  }
  /* Tooltip on right */
  .ayudita + .tooltip.right > .tooltip-arrow {
      border-right: 5px solid #152663;
  } 

.ayudita + .tooltip > .tooltip-inner{
    min-width:350px;
}

.divlbl1 {
    margin-bottom:6px;
    mamrgin-top:15px;
}

.divopc1{
    padding:15px !important;
}

.boton-transicion{
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}


.divcuadros{
  border-color:#cecece !important;
  border-radius: 8px;
  border: 1px solid;
  background-color:#f6f6f6;
  /*border-bottom-width: 3px;
  border-right-width: 3px; 
  border-left-color: #DEDEDE !important;  */
  margin: 5px;
  text-align: center;
  padding:15px;
}


.blink_text {

    animation:2s blinker linear infinite;
    -webkit-animation:2s blinker linear infinite;
    -moz-animation:2s blinker linear infinite;

     ;
    }

    @-moz-keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
     }

    @-webkit-keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
     }

    @keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
     }
     
     


abbr {
    position: relative;
    border-bottom:1px #bebebe dotted;
}
abbr:hover::after {
    content: attr(data-title);
    position: absolute;
    width: 200px;
    left: 5%;
    display: block;
    padding: 1em;
    background: #ffffcf;
    border-radius:10px;
    font-size:0.8em;
    color:#8f8f8f;
    z-index:999999;
}

.liNavegacion{
    border-radius:5px;

}

.active > a{
  border-radius: 5px !important;
  box-shadow: 0px 0px 0px 2px #fff inset;
}

.open > a{
  border-radius: 5px !important;
  //box-shadow: 0px 0px 0px 2px #fff inset;
}


.spn-tolerancia {
  font-size: 10px !important;
  color: #9c9c9c;
}

#flotador {
    position: absolute;
    top: 30%;
    right: 1px;
    /*width: 100px;
    height: 47px;*/
    -webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    z-index: 1;
    border-radius: 28px 0 0 28px;
    padding: 10px;
    background-color: #32567e99;
    color: white;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 0 9px gold;
    z-index: 11111;
    padding: 5px;
    padding-right:1px;
}



.hacia-izquierda{
    margin-left:-5px;

}

.pos-btn{
	min-width: 144px;
	text-align: right;
	position: absolute;
	right: 12px;
	bottom: 8px;
}


.btn-navegar{
	margin-top:15px;
	background-color: transparent !important;
	border-radius:unset !important;
    color:  #152663 !important;
}


.btn-navegar:hover {
	box-shadow: 0px 8px 0px 0px #152663;    
}


nav > li > a:hover {
	box-shadow: 0px 8px 0px 0px #152663 !important;  
}

nav > li > a {
	margin-top:15px;
	background-color: transparent !important;
	border-radius:unset !important; 
}



.navbar-default .navbar-nav > .active > a {
    background-color: transparent !important;
    border: 0px !important;
    border-bottom-width: 0px;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
    border-bottom-width: 0px;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
    box-shadow: unset;
    border-radius: unset !important;
    border-bottom: solid 8px #152663 !important;
    transition:none !important;
    color: white !important;
    
} 


.liNavegacion:hover {
    background-color: transparent !important;
}


 .navbar-default .navbar-nav > li > a:hover {
    color: #333;
    background-color: transparent;
    box-shadow: unset;
    border-radius: unset !important;
    border-bottom: solid 8px #152663 !important;
    transition:none !important;
}


.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    background-color: transparent !important;
    color: #fff !important;
    transition:none;
}


.navbar-right {

    position: absolute;
    right: 24px;
    bottom: 0px;
}


.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    color: #152663;
    background-color: transparent;
    box-shadow: unset;
}




.btn-arrow-left2 {
    position: relative;
    padding-left: 18px;
    padding-right: 18px;
}

.btn-arrow-left2 {
    padding-right: 36px;
}

.btn-arrow-left2:before,
.btn-arrow-left2:after { /* make two squares (before and after), looking similar to the button */
    content:"";
    position: absolute;
    top: 5px; /* move it down because of rounded corners */
    width: 25px; /* same as height */
    height: 25px; /* button_outer_height / sqrt(2) */
    background: inherit; /* use parent background */
    border: inherit; /* use parent border */
    border-left-color: transparent; /* hide left border */
    border-bottom-color: transparent; /* hide bottom border */
    border-radius: 0px 4px 0px 0px; /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
    -webkit-border-radius: 0px 4px 0px 0px;
    -moz-border-radius: 0px 4px 0px 0px;
}

.btn-arrow-left2:before,
.btn-arrow-left2:after {
    transform: rotate(225deg); /* rotate left arrow squares 225 deg to point left */
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
}

.btn-arrow-left2:before { /* align the "before" square to the left */
    left: -14px;
}

.btn-arrow-left2:after { /* align the "after" square to the right */
    right: -14px;
    display:none;
}

.btn-arrow-left2:before { /* bring arrow pointers to front */
    z-index: 1;
}

.btn-arrow-left2:after { /* hide arrow tails background */
    background-color: white;
}




.btn-arrow-right2
 {
    position: relative;
    padding-left: 18px;
    padding-right: 18px;
}
.btn-arrow-right2 {
    padding-left: 36px;
}

.btn-arrow-right2:before,
.btn-arrow-right2:after { /* make two squares (before and after), looking similar to the button */
    content:"";
    position: absolute;
    top: 5px; /* move it down because of rounded corners */
    width: 25px; /* same as height */
    height: 25px; /* button_outer_height / sqrt(2) */
    background: inherit; /* use parent background */
    border: inherit; /* use parent border */
    border-left-color: transparent; /* hide left border */
    border-bottom-color: transparent; /* hide bottom border */
    border-radius: 0px 4px 0px 0px; /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
    -webkit-border-radius: 0px 4px 0px 0px;
    -moz-border-radius: 0px 4px 0px 0px;
}
.btn-arrow-right2:before,
.btn-arrow-right2:after {
    transform: rotate(45deg); /* rotate right arrow squares 45 deg to point right */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.btn-arrow-right2:before { /* align the "before" square to the left */
    left: -14px;
    display:none;
}
.btn-arrow-right2:after { /* align the "after" square to the right */
    right: -14px;
}
.btn-arrow-right2:after { /* bring arrow pointers to front */
    z-index: 1;
}
.btn-arrow-right2:before{ /* hide arrow tails background */
    background-color: white;
}

.btn-arrow-naranja2:hover {
    /* background-color: #ffcf17; */
    color: #e7e7e7;
}


.icono_svg2 {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  font-size: 2em;
  margin: -9px;
  padding: 0px;
}





/********* inicio checkbox **************/
input[type=checkbox] {
display:none;
}
 
input[type=checkbox] + label
{
  vertical-align:middle;
  background: #d2d4d1;
  height: 28px;
  width: 44px;
  display:inline-block;
  padding: 0 0 0 0px;
  background-image : url('../img/icono-desactivado.svg');
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 3px;
}
input[type=checkbox] + label:hover
{
  vertical-align:middle;
  background: #ee2939 ;       
  height: 28px;
  width: 44px;
  display:inline-block;
  padding: 0 0 0 0px;
  background-image : url('../img/icono-desactivado-h.svg');
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 3px;
}
input[type=checkbox]:checked + label
{
  vertical-align:middle;
  background: #d2d4d1;
  height: 28px;
  width: 44px;
  display:inline-block;
  padding: 0 0 0 0px;
  background-image : url('../img/icono-activado.svg') ;
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 3px;
}
input[type=checkbox]:checked + label:hover
{
  vertical-align:middle;
  background:  #16ac49;
  height: 28px;
  width: 44px;
  display:inline-block;
  padding: 0 0 0 0px;
  background-image : url('../img/icono-activado-h.svg') ;
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 3px;
}
/********* fin chckebox    **************/




.btn-desactivado{
  vertical-align:middle;
  background: #d2d4d1;
  height: 36px;
  width: 42px;
  display:inline-block;
  padding: 0 0 0 0px;
  background-image : url('../img/icono-activado.svg') ;
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 3px;
}
.btn-desactivado:hover{
  vertical-align:middle;
  background:  #16ac49;
  height: 36px;
  width: 42px;
  display:inline-block;
  padding: 0 0 0 0px;
  background-image : url('../img/icono-activado-h.svg') ;
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 3px;
}


.btn-activado{
  vertical-align:middle;
  background: #d2d4d1;
  height: 36px;
  width: 42px;
  display:inline-block;
  padding: 0 0 0 0px;
  background-image : url('../img/icono-desactivado.svg');
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 3px;
}
.btn-activado:hover
{
  vertical-align:middle;
  background: #ee2939 ;       
  height: 36px;
  width: 42px;   
  display:inline-block;
  padding: 0 0 0 0px;
  background-image : url('../img/icono-desactivado-h.svg');
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 3px;
}




.btn-gris{
  background-color: #d2d4d1;
  border-color: #d2d4d1;
  border-radius: 4px !important;
}

.btn-svg{
    height: 36px;
    padding: 0;
    padding-top: 0px;
    padding-top: 3px;
    font-size: 1.8em;

}


.btn{
    outline: none !important;
    border-radius: unset ;
}


.btn-rayita-abajo{
	margin-top:15px;
	background-color: transparent !important;
	border-radius:unset !important;
}

.btn-rayita-abajo:hover {
	box-shadow: 0px 8px 0px 0px #152663;    
}


.btn-arrow-left::after {
    right: -14px;
}


.btn-arrow-right::before, .btn-arrow-right::after, .btn-arrow-left::before, .btn-arrow-left::after {
    content: "";
    position: absolute;
    top: 4px;
    width: 24.627px;
    height: 24.627px;
}


.btn-arrow-right::after, .btn-arrow-left::after {
    right: -14px;
}


.btn-arrow-right::before, .btn-arrow-left::before {
    left: -14px;
}

.btn-arrow-inactivo{
    cursor:default;
    background-color:#e1e1e1;
    color:#333;
    pointer-events: none;
}



.btn-arrow-actual{
    cursor:default;
    background-color:#152663;
    color:#fff;
    pointer-events:none;
    
}
.btn-arrow-siguiente{
    background-color:#e1e1e1;
    color:#333;
}

.btn-arrow-siguiente:hover{
    background-color:#ffcf17;
    color:#333;
}

.btn-arrow-cancelar{
    background-color:#e1e1e1;
    color:#333;
}

.btn-arrow-cancelar:hover{
    background-color:#C85F48;
    color:#ddd;
}


.btn-hover-rojo{
   background-color: #d2d4d1;
   color:#636b6f;
}
.btn-hover-rojo:hover{
   background-color: #ee2939;
   color:white;
}


.btn-hover-azul{
    background-color:#d2d4d1;
    color: #636b6f;
}
.btn-hover-azul:hover{
    background-color:#264594;
    color:white;
}


body{
    padding-right:0px !important;

}


#app-layout{
    padding-top:0px;
   padding-right:0px !important;
    padding-left:0px;

}


.divcolfooter > div{
    width:  20% !important;
    float:left;


}


@media screen and (min-width:1px) and (max-width:760px) {
  .divcolfooter > div{
    width: 50% !important;
    float: none;
    margin: 0 auto;
    text-align: center;
    padding-top:20px;
  }    
}

.liNavegacion:hover{background-color:#15539B;}
.liNavegacion>a:hover{color:white ;}
.block-content p {
    margin: 0px 0 2px ;
	font-size: 13px;
	letter-spacing: initial;
}

.margin-grupo-campos{
    margin-right:1%;
}

#div-boton-volver{
  float: right;
  margin-top: 10px;
  position: absolute;
  right: 10px;
  bottom: 7px;
}

.btn-siguiente-envios{
    float:right;
}

.btn-cancelar-envios{
    float:right;
    margin-right:20px;
    /*background-color:#eee;*/
    border-radius:unset !important;
}


#app-navbar-collapse{
  position: absolute;
  bottom: 0px;
  right: 20px;
  /* ces propriétés sont très importantes pour que la navbar ne bouge pas */
  top: unset;
  height:unset !important;
}



@media (max-width: 900px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block; 
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
		/*margin-top: 7.5px;*/
	}
	.navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
  		display:block !important;
	}
    
    .navbar-default .navbar-nav > li > a:hover {
      color: #444;
      background-color: transparent;
      box-shadow: unset;
      border-radius: unset !important;
      border-bottom: none;
      transition: none !important;
    }

    .liNavegacion>a:hover {
        color: #2881c3 !important;
    }    
    
    .navbar-default .navbar-nav > li > a:hover {
        border-bottom:none !important;
    }
    
    .navbar-default .navbar-nav > .active > a {
        background-color: #152663 !important;
        border-bottom:none !important;
    }
    
    .site-logo{
        transform: scale(0.9);
    }
    
    
    .margin-grupo-campos{
        margin-right:unset;
        margin-left:1px;
    }
    


    #app-navbar-collapse{
        position: unset !important;
        top: unset;
    }
    
    .nomostrar{
        //display:none;
        display:none;
    }
    
    .mostrar {
        //visibility:visible;
        display:block;
    }
    
    
    
    .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
        color: #6c6c6c !important;
    }    

    .dropdown-menu {
        text-align: right;
    }


}      


@media (max-width:600px){
    .btn-siguiente-envios{
        float:left;
        width:136px
    }
    .btn-atras-envios{
        float:left;
        width:136px;
    }
    .btn-cancelar-envios{
        float:left;
        width:136px;
    }

    td.table-text.chkEnvios {
        padding-left: 20px !important;
    }
}