header,
.main,
 footer {
    background-color: #f8f9fa; 
    padding: 10px 0;
    margin-top: 20px;
    width: 100%;
}


/*footer {
    margin-top: 20px;
    position: fixed;
    bottom: 0;
}

/*footer {
    margin-top: 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f8f9fa;
    padding: 10px 0;
}*/

body,html
{overflow-x:hidden;}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 48px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';



}

.carhead{
    background-color: black;
    color: white;
}

::-webkit-input-placeholder {
   text-align: center;
   vertical-align: middle;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;
   vertical-align: middle;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
   vertical-align: middle;
}

:-ms-input-placeholder {  
   text-align: center; 
   vertical-align: middle;
}

.navbar-default{
    background-color: transparent;
    border-color: transparent;
}
.ar{
    height: 30px;
    background-color: #E6E6E6;
}

.ard{
    height: 50px;
    background-color: lightgrey !important;
}

.gris{
    padding: 1%;
    height: 600px;
    width: 85%;
    background-color: lightgrey !important;
}
.grispedido{
    padding: 1%;
    height: 500px;
    width: 85%;
    background-color: #d3d3d3 !important;
}

.grisbienvenido{
    padding: 1%;
    height: 80px;
    width: 85%;
    background-color: gray;
}

.griscuenta{
    padding: 1%;
    height: 40%;
    width: 100%;
    background-color: #E6E6E6;
}

.grisfinanc{
    padding: 1%;
    height: 300px;
    width: 85%;
    background-color: lightgrey !important;
}

.separacion{
    padding: 0.5%;
    height: 5%;
    width: 100%;
    background-color: white;
}
.separaciontrans{
    padding: 0.5%;
    height: 5%;
    width: 100%;
    background-color: transparent;
}

.separacionCuenta{
    height: 1%;
    width: 100%;
    background-color: white;
}

.separacionTarifas{
    height: 5px;
    width: 100%;
    background-color: white;
}
.formcons{
    padding-top: 10%;
    text-align: justify;
    vertical-align: middle;
}

.formcons2{
    padding-top: 3%;
    text-align: justify;
}

.float-right{
    float:right;
}

.cuentaForm{
background-color: #FBFBFB;
}

.header{
    width: 100%;
    height: 20% !important;
    padding-bottom: 1%;
}


.bienve{
    padding: 1%;
    background-color: lightgrey;
}

.vertical-line{
    border-left: thick solid #337ab7;    
    }

.vertical-line-right{
    border-Right: thick solid #337ab7;    
    }

hr.gris2{
    border-top: thick solid #ccc;
}

hr.blue{
   border-top: 1px solid blue;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left:  0px;
   width: 88%;
}

.sinlist{
    list-style: none;
}

.fecha{
    margin-left: 1%;
}

.total{
    font-size: 1.5em;
}

.peq{
    font-size: 0.8em;
    margin-left: 1em;
}

.pedido{
    padding-top:20% ;
}

.detalles{
    padding-top:5% ;
}

.showpanel{
    height: 300px;
    width: 85%;
    background-color: lightgrey !important;
    display:none;
}

.direccion{
    height: 300px;
    width: 85%;
    display:none;
}

.slideimg2 {
    display:none;
}
.slideimg{
    display:block;
    margin-left: 5px;

}
.slideimg3 {
    display:none;
    width: 85%;
}
.slideimg4 {
    display:none;
    width: 85%;
}
.slideimg5 {
    display:none;
    width: 85%;
}

.detalles{
    color:  white;
}

.margin-left{
    margin-left: 1%;
}

.margin-right{
    margin-right: 10%;
}

.imgder{
    height: 200px; 
    padding-top: 2%;
     background-color: #9D2235;
    color:  white;
}

p.toggle{
    color: white
}

.ulnd{
    text-decoration: none;
    list-style: none;
}

.bg-contacto{
    background-color: lightblue;
    border-top: 1px solid blue ;
    height: 400px;
    width: 90%;
}
.bg-contactodown{
    background-color: #B0E0E6;
    border-top: 2px solid blue ;
    height: 300px;
    width: 90%;
}

.contacto{
    color: blue;
    padding-top: 20%;
    padding-left: 20%;
    padding-right: 20%;
    padding-bottom: 5%;
}

.contacto2{
    color: blue;
    padding: 5%;
}

.cont{
    padding-top: 5%;
}

.contacta{
    color: blue;
    font-size: 2em;
    padding-left: 5%;
    padding-top: 5%;
}
.titlequest{
    padding-left: 5%;
    padding-top: 5%;
}

.menuCuenta{ 
  height: 50%;
  width: 200px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  background-color: #FBFBFB; 
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  margin-left: 0px;
}

.licuenta {
    list-style: none;
    margin-bottom: 10%;
}

.licuenta,a:hover{
    text-decoration: none;
}

.licuenta.active {
    background-color: #4CAF50; /* Color de fondo cuando está activo */
    color: white; /* Color de texto cuando está activo */
}


.containerCuenta{
    margin-left: 215px; /* Same as the width of the sidebar */
    height : 30em;
    padding: 10px 10px;
    background-color: #F5F5F5;
}

.containerCuenta2{
    margin-left: 215px; /* Same as the width of the sidebar */
    margin-right: 155px;
    height : auto;
    padding: 10px 10px;
    background-color: #F5F5F5;
}

.containerCuenta3{
    margin-left: 215px; /* Same as the width of the sidebar */
    height : 20em;
    padding: 10px 10px;
    background-color: #F5F5F5;
}



.mainhome{
   margin-left: 215px; /* Same as the width of the sidebar */
    height : auto;
    padding: 10px 10px;
    background-color: #F5F5F5; 
}

.titlecuenta{
    padding-left: 1%;
    padding-top: 1%;
}
p.dir{
    background-color: #FBFBFB !important;
}

.icuenta{
    padding: 1%;
}

.float-left{
    margin-left: 0%;
}

.buscar{
    margin-right: 0% !important;
    
    padding-bottom: 2%;
}

.cookies{
     position: fixed;
     bottom: 0px;
}

#div1{
    overflow: scroll;
    height: 300px;
    width: 100%;
}
#div1 .tabrut{
    font-size: small;

}
.rutamar{
    padding-left: 2%;
}

.text-white{
    font-color: white;
}
 
.estado{
    vertical-align: middle;
}

.ml-1{
    margin-left: 0.3em;
}

.ml-2{
    margin-left: 1em;
}

.ml-3{
    margin-left: 3em;
}

.ml-4{
    margin-left: 4em;
}

.nomb{
    margin-bottom: 0px;
}

.mr-1{
    margin-right: 1em;
}

.pb-1{
    padding-bottom: 0.7em;
}

.pb-2{
    padding-bottom: 2em;
}

.pb-5{
    padding-bottom:5em;
}

.pl-1{
    padding-left: 1em;
}

.pl-2{
    padding-left: 2em;
}

.pt-1{
    padding-top: 1em;
}

.pt-2{
    padding-top: 2em;
}
.pt-3{
    padding-top: 3em;

}

.pt-b{
    padding-top: 11em;
}