:root{
  --main-bg-color: coral;
  --cabecera-bg-color: #2d3436;
}


*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
    
    
    
    
    
    .bgprincipal{
      background-color: rgba(223, 230, 233,.7);
    }
    .barrafija{
      background-color: #2d3436;
    }

    .bg-nav {
      background-color: #f7b731 !important;
    }

    .margentoplogo{
      margin-top: -45px;
    }

    .bg-modal{
      background-color: #dfe4ea;
    }
    /******************************* font size **************/
    .font-10{
    font-size: 10px;
    }
    .font-12{
    font-size: 12px;
    }
    .font-14{
    font-size: 14px;
    }
    .font-16{
    font-size: 16px;
    }
    .font-18{
    font-size: 18px;
    }
    .font-20{
    font-size: 20px;
    }
    .font-21{
      font-size: 21px;
      }
    .font-22{
    font-size: 22px;
    }
    .font-24{
    font-size: 24px;
    }
    .custom-file-input:lang(es)~.custom-file-label2::after {
      content: "Explorador" !important;
  }

  .text-negro{
    color : black !important;
  }

  /******************************+++  mis btns  *********************/
  .btn-blue
    {
      color:#fff;
      background-color:rgba(27, 20, 100,.7);/*#28a745;*/
      border-color:rgba(27, 20, 100,.6);/*#28a745*/
    }
  .btn-blue:hover
    {
      color:#fff;
      background-color:rgba(27, 20, 100,.9);/*#218838;*/
      border-color:rgba(27, 20, 100,.7);;/*#1e7e34*/
    }
  .btn-blue.focus,.btn-blue:focus
    {
      color:#fff;
      background-color:rgba(27, 20, 100,1.0);/*#218838;*/
      border-color:rgba(27, 20, 100,.7);/*#1e7e34;*/
      box-shadow:0 0 0 .2rem rgba(27, 20, 100,.5);/*rgba(72,180,97,.5)*/
    }
  .btn-blue.disabled,.btn-blue:disabled
    {
      color:#fff;
      background-color:rgba(27, 20, 100,.6);;/*#28a745;*/
      border-color:rgba(27, 20, 100,.6);;/*#28a745*/
    }
  .btn-blue:not(:disabled):not(.disabled).active,.btn-blue:not(:disabled):not(.disabled):active,.show>.btn-blue.dropdown-toggle
    {
      color:#fff;
      background-color:#1e7e34;
      border-color:#1c7430
    }
  .btn-blue:not(:disabled):not(.disabled).active:focus,.btn-blue:not(:disabled):not(.disabled):active:focus,.show>.btn-blue.dropdown-toggle:focus
    {
      box-shadow:0 0 0 .2rem rgba(72,180,97,.5)
    }
    /************************************ centrar *************/
    .centrado{
    margin-left: auto;
    margin-right: auto;
    }
    .numero-alerta{
      background: #c0392b;
   border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  /*color: #ffffff;*/
  display: inline-block;
  font-weight: bold;
  line-height: 1.2em;
  margin-right: 5px;
  text-align: center;
  width: 1.2em; 
    }
    /******************************* fondo blanco transparente ******************/
    .bg-white-50{
    background: rgba(255,255,255,.6);
    }
    .bg-white-30{
    background: rgba(255,255,255,.3);
    }
    .bg-white-20{
    background: rgba(255,255,255,.2);
    }
    
    /******************************* fondo verde transparente ******************/
    .bg-verde-50{
    background: rgba(0,204,0,.5);
    }
    .bg-verde-30{
    background: rgba(0,204,0,.3);
    }
    .bg-verde-20{
    background: rgba(0,204,0,.2);
    }
    /******************************* border redondeados ******************/
    .rounded-3{
    border-radius: 3px;
    }
    .rounded-4{
    border-radius: 4px;
    }
    .rounded-5{
    border-radius: 5px;
    }
    .rounded-7{
    border-radius: 7px;
    }
    .rounded-10{
    border-radius: 10px;
    }
    .rounded-50{
    border-radius: 50%;
    }
    /******************************* opacitys ******************/
    .opaci-10{
    opacity : 0.1;
    }
    .opaci-25{
    opacity : 0.25;
    }
    .opaci-50{
    opacity : 0.5;
    }
    .opaci-75{
    opacity : 0.75;
    }
    /****************************** varios colores fondo ********/
    .bg-bio1{
    background-color:rgb(230, 230, 230);
    }
    .bg-azul1{
    background-color: rgb(0, 38, 153);
    }

    .bg1{
      background-color: #2c3e50;
    }
    .bg2{
        background-color: #bdc3c7;
    }
    .bg3{
        background-color: #ecf0f1;
    }

    .bgimagen {
      background: url(http://localhost/wow_lotes/public/images/wowfondo4.jpg) no-repeat center center fixed;
      background-size: cover;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
    }
    @media (max-width: 600px) {
      .bgimagen {
        background: url(http://localhost/wow_lotes/public/images/wowfondo5.jpg) no-repeat center center fixed;
        background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
      }
    }
    /***********************  varios colores de texto ********************/
    .font-carrot {
      color : #e67e22;
    }
    .font-pumpkin {
      color : #d35400;
    }
    .font-alizarin {
      color : #e74c3c;
    }
    .font-greensea {
      color : #16a085;
    }
    .font-belizehole {
      color : #2980b9;
    }
    .font-midnight {
      color : #2c3e50;
    }
    .font-deepcove {
      color : #130f40;
    }
    .font-blurple {
      color : #4834d4;
    }
    .font-harelyorange {
      color : #c23616;
    }
    /************  fuentes *************************************/
    
    .font-consolas{
      font-family:  Consolas,monaco,monospace;;
    }

    .font-convergence{
      font-family: Convergence; 
    }


    

    /*******************************************************************************************************/
    a:hover{
        text-decoration: none;
      }
    
      a{
        text-decoration: none;
      }
    
      .sidenav{
        text-decoration: none;
      }
    
      .sidenav:hover{
        text-decoration: none;
      }
    
      .sidenav a:hover{
        text-decoration: none;
        text-transform: uppercase;
      }
    
      select{
        border: 0;
      }
    
      .sinborde{
        border:0;
      }

      .pointer:hover {
        cursor: pointer;
      }

      .box{
        min-height: 200px;
        max-height: 300px;
        overflow-y: scroll;
      }

      /* The sidebar menu */
.sidenav {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 160px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
  }
  
  /* The navigation menu links */
  .sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 18px;
    color: #818181;
    display: block;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
    color: #f1f1f1;
  }
  
  /* Style page content */
  .main {
    margin-left: 160px; /* Same as the width of the sidebar */
    padding: 0px 10px;
  }
  
  /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }
/****************************************************************************************************************/
.results tr[visible='false'],
.no-result{
  display:none;
}

.results tr[visible='true']{
  display:table-row;
}

.counter{
  padding:8px; 
  color:#ccc;
}
a.rojo{
  color: #c0392b;
}
a.rojo:hover{
  color: #c0392b;
}


/*************************************************************  style para checkbox switch  */
input[type=checkbox]{
  height : 0;
  width: 0;
  visibility: hidden;
  }
  
  .labelc {
  cursor: pointer;
  text-indent: -9999px;
  width: 50px;
  height: 31px;
  background: gray;
  display: block;
  border-radius: 3px;
  position: relative;
  }
  
  .labelc:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 27px;
  background: #fff;
  border-radius: 3px;
  transition: 0.3s;
  }
  
  input:checked + .labelc{
  background : #27ae60;
  }
  
  input:checked + .labelc:after{
  left: calc(100% - 2px);
  transform: translateX(-100%);
  
  }
  
  .labelc:active:after{
  width: 65px;
  }




.bloqueado{
  background-color: rgba(192, 57, 43,.3);
  color: rgba(192, 57, 43,1.0);
}

/*********************************************************************************************************************************************/
/*                          CSS PARA LA TABLAS DESPLEGABLES*/



#container-main{
  margin:40px auto;
  width:95%;
  min-width:320px;
  max-width:960px;
}



.accordion-container {
  width: 100%;
  clear:both;
}

.accordion-titulo {
  position: relative;
  display: block;
  background: #2c3e50;
  color: #fff;
  text-decoration: none;
  border: solid 1px gray;
}
.accordion-titulo.open {
  background: #16a085;
  color: #fff;
}
.accordion-titulo:hover {
  background: #1abc9c;
  text-decoration: none;
}

.accordion-titulo span.toggle-icon:before {
  content:"+";
}

.accordion-titulo.open span.toggle-icon:before {
  content:"-";
}

.accordion-titulo span.toggle-icon {
  position: absolute;
  right: 20px;
  font-weight:bold;
}

.accordion-content {
  display: none;
  padding: 20px;
  overflow: auto;
}

.accordion-content p{
  margin:0;
}

.accordion-content img {
  display: block;
  float: left;
  margin: 0 15px 10px 0;
  width: 50%;
  height: auto;
}




/*********************************************************************************************************************************************/