.breadcrumb {
  text-align:center;
  background-color:transparent;
  border-bottom:1px solid #eee;
  padding-top:12px;
  padding-bottom:12px;
  margin-bottom:40px;
}

nav.navbar.navbar-default {
  margin-bottom:0px;
}

@media (min-width:992px) {
  .product h2 {
    margin-top:0;
  }
}

.navbar .navbar-brand {
  font-size:24px;
  line-height:18px;
}

.reviewer-name {
  margin-right:10px;
}

.site-footer {
  padding:20px 0;
  text-align:center;
}

@media (min-width:768px) {
  .site-footer h5 {
    text-align:left;
  }
}

.site-footer h5 {
  color:inherit;
  font-size:16px;
}

.site-footer .social-icons a:hover {
  opacity:1;
}

.site-footer .social-icons a {
  display:inline-block;
  width:32px;
  border:none;
  font-size:20px;
  border-radius:50%;
  margin:4px;
  color:#fff;
  text-align:center;
  background-color:#798FA5;
  height:32px;
  opacity:0.8;
  line-height:32px;
}

@media (min-width:768px) {
  .site-footer .social-icons {
    text-align:right;
  }
}

.btn.write-review {
  float:right;
  margin-top:-6px;
}

div.BackColor {
  background-color:"#a9bcf5";
}

div.BackColor {
  background-color:initial;
}

body {
  background-color:#f2f2f2;
}

li.active {
  background-color:#bdbdbd;
}

button.btn.btn-primary.btn-sm {
  margin-right:2px;
}

div.modal-body {
  /*position:relative;*/
  /*padding:20px;*/
  max-height:calc(100vh - 250px);
  overflow-y:auto;
}

.selected {
  /*background-color:brown;*/
  color:blue;
}
/*
Force table width to 100%
*/
 table.table-fixedheader {
    width: 100%;   
}
/*
Set table elements to block mode.  (Normally they are inline).
This allows a responsive table, such as one where columns can be stacked
if the display is narrow.
*/
 table.table-fixedheader, table.table-fixedheader>thead, table.table-fixedheader>tbody, table.table-fixedheader>thead>tr, table.table-fixedheader>tbody>tr, table.table-fixedheader>thead>tr>th, table.table-fixedheader>tbody>td {
    display: block;
}
table.table-fixedheader>thead>tr:after, table.table-fixedheader>tbody>tr:after {
    content:' ';
    display: block;
    visibility: hidden;
    clear: both;
}
/*
When scrolling the table, actually it is only the tbody portion of the
table that scrolls (not the entire table: we want the thead to remain
fixed).  We must specify an explicit height for the tbody.  We include
100px as a default, but it can be overridden elsewhere.

Also, we force the scrollbar to always be displayed so that the usable
width for the table contents doesn't change (such as becoming narrower
when a scrollbar is visible and wider when it is not).
*/
 table.table-fixedheader>tbody {
    overflow-y: auto;
    height: 100px;
    width:auto;
}
/*
We really don't want to scroll the thead contents, but we want to force
a scrollbar to be displayed anyway so that the usable width of the thead
will exactly match the tbody.
*/
 /*table.table-fixedheader>thead {
    overflow-y: scroll;    
}*/
/*
For browsers that support it (webkit), we set the background color of
the unneeded scrollbar in the thead to make it invisible.  (Setting
visiblity: hidden defeats the purpose, as this alters the usable width
of the thead.)
*/
 table.table-fixedheader>thead::-webkit-scrollbar {
    background-color: inherit;
}


table.table-fixedheader>thead>tr>th:after, table.table-fixedheader>tbody>tr>td:after {
    content:' ';
    display: table-cell;
    visibility: hidden;
    clear: both;
}

/*
We want to set <th> and <td> elements to float left.
We also must explicitly set the width for each column (both for the <th>
and the <td>).  We set to 20% here a default placeholder, but it can be
overridden elsewhere.
*/

 table.table-fixedheader>thead tr th, table.table-fixedheader>tbody tr td {
    float: left;    
    word-wrap:break-word;     
}

.disableimg {
    border-width: 5px;
    border-color: #A4A4A4;
    border-style: solid;
    opacity: 0.4;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    width: 270px;
    height: 270px;
    display: inline-block;
}
.enablebleimg {
    border-width: 5px;
    border-color: #A4A4A4;
    border-style: solid;
    opacity: 1;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    width: 270px;
    height: 270px;
    display: inline-block;
}
.modal-large {
    width: 97%; /* respsonsive width */
}
.hide{
  display:none;  
}
.gototop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0,0,0,0.5);
    padding: 10px;
    color: #fff;
}
    .gototop i {
        line-height: 0.5em;
    }


    .licorner {
    border-radius: 8px 32px;
    background: #F8FBEF;
    padding: 20px; 
    width: 310px;
    height: 62px; 
}
    .thumbnail {
    padding:0;
       text-align:center;
}
    a {
  color:black;
}
 .my-custom-scrollbar {
position: relative;
height: 200px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
.TCredito{background-image:url(../img/TCredito.png);}
.TDebito{background-image:url(../img/TDebito.png);}
.TBancolombia{background-image:url(../img/bancolombia.png);}
/*.nequi{background-image:url(../img/nequi.png);}
.american{background-image:url(../img/american.png);}
.pse{background-image:url(../img/pse.png);}*/

.cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:115px;height:85px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}
.bnt-juridico{
     left: 100px;
}
.texto-justificado{
text-align: justify ;
}

/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}

/*td[contenteditable="true"] {
    background: red;
}*/

[class*="red"]:focus {
  border:none;
  outline:solid;
  outline-color:red;
}

[class*="blue"]:focus {
  border:none;
  outline:solid;
  outline-color:dodgerblue;
}
#cameraperfil {
		position: relative;
		text-align: center;
}

#cameradocuento {
		position: relative;
		text-align: center;
}

.canvasrostro {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 190px;
  height: 250px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
}

.documentofrontal {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*background-color: white;  Fondo blanco para cada documento */
    border: 2px solid #fff; /* Borde gris claro */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Evita que el contenido se desborde */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    width: 250px; /* Ancho fijo para los documentos */
    height: 190px;
    /*transition: transform 0.2s;  Transición suave para el efecto hover */
}
.documentoatras {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*background-color: white;  Fondo blanco para cada documento */
    border: 2px solid #fff; /* Borde gris claro */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Evita que el contenido se desborde */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    width: 250px; /* Ancho fijo para los documentos */
    height: 190px;
    /*transition: transform 0.2s;  Transición suave para el efecto hover */
}

.select-editable {
     position:relative;
     background-color:white;
     border:solid grey 1px;
     width:120px;
     height:18px;
 }
 .select-editable select {
     position:absolute;
     top:0px;
     left:0px;
     font-size:14px;
     border:none;
     width:120px;
     margin:0;
 }
 .select-editable input {
     position:absolute;
     top:0px;
     left:0px;
     width:100px;
     padding:1px;
     font-size:12px;
     border:none;
 }
 .select-editable select:focus, .select-editable input:focus {
     outline:none;
 } 
 /*Estilis sobreescritos*/    
 .input-sm{
    border-radius: 10px;
}
.input-group-btn>.btn {
    border-radius: 10px;
}
.btn {
    border-radius: 10px;
}
.CustomerBorder {
    border-radius: 10px;
}
.navbar {
   background: linear-gradient(black, white);
    border: none;
}
.btn-sm, .btn-group-sm>.btn {
    border-radius: 10px;
}
.login-card .profile-img-card {
    width: 220px;
    height: 96px;
}
.input-lg{
    border-radius: 10px;
}
.modal-content{
     border-radius: 10px;
}
.input_generales{
   display: flex;
  justify-content: space-between; /* Esto separará el título y el input hacia los extremos */
  align-items: center; /* Esto centrará verticalmente los elementos */
  padding: 10px;
  margin-left: 1000px; 
}
.nuevaUCD {
        border: 2px solid #000; /* Borde negro más grueso */
        padding: 20px 10px 10px 10px; /* Espaciado interno, más espacio arriba para el título */
        margin: 30px 0 10px 0; /* Espaciado entre recuadros */
        border-radius: 5px; /* Bordes redondeados */
        background-color: transparent; /* Sin color de fondo */
        position: relative; /* Necesario para posicionar el título */
        overflow: visible; /* Para evitar que el contenido se salga del cuadro */
        }

.CheckFacturas {
        border: 2px solid #000; /* Borde negro más grueso */
        padding: 20px 10px 10px 10px; /* Espaciado interno, más espacio arriba para el título */
        margin: 0px 0 10px 0; /* Espaciado entre recuadros */
        border-radius: 4px; /* Bordes redondeados */
        background-color: transparent; /* Sin color de fondo */
        position: relative; /* Necesario para posicionar el título */
        overflow: visible; /* Para evitar que el contenido se salga del cuadro */
        }
.CheckCopiaUsuarios {
        border: 2px solid #000; /* Borde negro más grueso */
        padding: 20px 10px 10px 10px; /* Espaciado interno, más espacio arriba para el título */
        margin: 0px 0 10px 0; /* Espaciado entre recuadros */
        border-radius: 4px; /* Bordes redondeados */
        background-color: transparent; /* Sin color de fondo */
        position: relative; /* Necesario para posicionar el título */
        overflow: visible; /* Para evitar que el contenido se salga del cuadro */
        }

.nuevaUCD .titulo {
        position: absolute;
        top: -15px; /* Posiciona el título justo encima del borde */
        left: 20px; /* Espacio desde la izquierda */
        background: #f2f2f2; /* Fondo blanco para cubrir el borde */
        padding: 0 10px; /* Espaciado interno */
        font-weight: bold; /* Opcional: Negrita para el título */
        white-space: nowrap; /* Evita que el texto se divida en varias líneas */
        z-index: 1; /* Asegura que el título esté sobre el borde */
    }

.CheckFacturas .titulo {
        position: absolute;
        top: -15px; /* Posiciona el título justo encima del borde */
        left: 20px; /* Espacio desde la izquierda */
        background: #f2f2f2; /* Fondo blanco para cubrir el borde */
        padding: 0 10px; /* Espaciado interno */
        font-weight: bold; /* Opcional: Negrita para el título */
        white-space: nowrap; /* Evita que el texto se divida en varias líneas */
        z-index: 1; /* Asegura que el título esté sobre el borde */
    }
#TtPagare {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#TtPagare img {
  max-width: 80%;
  max-height: 80%;
}

.hidden {
  display: none;
}

.visible {
  display: flex;
  opacity: 1;
}
details summary {
    cursor: pointer;
    padding: 10px;
    background-color: #e6ebef; /* Color de fondo del botón */
    color: #000000; /* Color del texto */
    border-radius: 5px; /* Bordes redondeados */
    font-weight: bold; /* Texto en negrita */
    border: none; /* Sin borde */
    width: 100%;
    text-align: left;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para darle un efecto de elevación */
    transition: background-color 0.3s ease; /* Animación para el cambio de color */
}
details summary:hover {
    background-color: #77afed; /* Color al pasar el cursor */
}
details[open] summary {
    background-color: #77afed; /* Cambia el color cuando se expande */
}
details[open] summary::before {
    content: "▼ "; /* Icono de flecha hacia abajo cuando está abierto */
}
details summary::before {
    content: "► "; /* Icono de flecha hacia la derecha cuando está cerrado */
}
details summary {
    display: inline-block;
}
details ul {
    /*padding: 0 10px;
    margin: 0;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
    max-height: 0; /* Inicia cerrado */
    overflow: hidden; /* Evitar que el contenido se vea antes de expandirse */
     /* Duración y suavidad del efecto */
}

details[open] ul {
    max-height: 600px; /* Establece el alto máximo cuando está abierto (ajústalo según tu contenido) */
}

details ul li a {
    color: #77afed;
    text-decoration: none;
}

.bold-text {
    font-weight: bold;
}