/* limpia los márgenes y el espaciado */
ul {
padding: 0;
margin: 0;
}
/* define la separación inferior entre botones */
li {
margin-bottom: .15rem;
}
/* Establece las propiedades del contenedor de los botones */
.contenedor {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
/* Define las propiedades del botón y los coloca en horizontal */
.btn {
display: inline-block;
min-width:16em;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn:focus, .btn:hover {
text-decoration: none;
}
.btn.focus, .btn:focus {
outline: 0;
box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}
.btn.disabled, .btn:disabled {
opacity: .65;
}
.btn:not([disabled]):not(.disabled) {
cursor: pointer;
}
.btn:not([disabled]):not(.disabled).active, .btn:not([disabled]):not(.disabled):active {
background-image: none;
}
/* Botón azul */
.btn-azul {
color: #fff;
background-color: #0075E3;
border-color: #0075E3;
}
.btn-azul:hover {
color: #fff;
background-color: #225AA8;
border-color: #225AA8;
}
.btn-azul.focus, .btn-azul:focus {
box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .5);
}
/* Botón gris */
.btn-gris {
color: #fff;
background-color: #868e96;
border-color: #868e96;
}
.btn-gris:hover {
color: #fff;
background-color: #727b84;
border-color: #6c757d;
}
.btn-gris.focus, .btn-gris:focus {
box-shadow: 0 0 0 .2rem rgba(134, 142, 150, .5);
}
/* Botón verde */
.btn-verde {
color: #fff;
background-color: #1BAB50;
border-color: #1BAB50;
}
.btn-verde:hover {
color: #fff;
background-color: #0B7039;
border-color: #0B7039;
}
.btn-verde.focus, .btn-verde:focus {
box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5);
}
/* Botón cielo */
.btn-cielo {
color: #fff;
background-color: #17a2b8;
border-color: #17a2b8;
}
.btn-cielo:hover {
color: #fff;
background-color: #138496;
border-color: #117a8b;
}
.btn-cielo.focus, .btn-cielo:focus {
box-shadow: 0 0 0 .2rem rgba(23, 162, 184, .5);
}
/* Botón naranja*/
.btn-naranja {
color: #212529;
background-color: #FFA600;
border-color: #FFA600;
}
.btn-naranja:hover {
color: #212529;
background-color: #F18200;
border-color: #F18200;
}
.btn-naranja.focus, .btn-naranja:focus {
box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .5);
}
/* Botón rojo */
.btn-rojo {
color: #fff;
background-color: #CB0000;
border-color: #CB0000;
}
.btn-rojo:hover {
color: #fff;
background-color: #75011D;
border-color: #75011D;
}
.btn-rojo.focus, .btn-rojo:focus {
box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .5);
}
/* Botón gris claro*/
.btn-blanco {
color: #212529;
background-color: #f8f9fa;
border-color: #f8f9fa;
}
.btn-blanco:hover {
color: #212529;
background-color: #E8EAED;
border-color: #E8EAED;
}
.btn-blanco.focus, .btn-blanco:focus {
box-shadow: 0 0 0 .2rem rgba(248, 249, 250, .5);
}
/* Botón negro*/
.btn-negro {
color: #fff;
background-color: #3C4043;
border-color: #3C4043;
}
.btn-negro:hover {
color: #fff;
background-color: #202124;
border-color: #202124;
}
.btn-negro.focus, .btn-negro:focus {
box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5);
}
/* Posición del número */
.btn .insignia {
position: relative;
top: -1px;
}
/* Propiedades del número */
.insignia {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
}
.insignia:empty {
display: none;
}
.btn .insignia {
position: relative;
top: -1px;
}
.insignia-pastilla {
padding-right: .6em;
padding-left: .6em;
border-radius: 10rem;
}
/* número azul */
.insignia-azul {
color: #fff;
background-color: #0075E3;
}
/* número gris */
.insignia-gris {
color: #fff;
background-color: #868e96;
}
/* número verde */
.insignia-verde {
color: #fff;
background-color: #1BAB50;
}
/* número cielo */
.insignia-cielo {
color: #fff;
background-color: #17a2b8;
}
/* número Naranja */
.insignia-naranja {
color: #212529;
background-color: #FFA600;
}
/* número rojo */
.insignia-rojo {
color: #fff;
background-color: #CB0000;
}
/* número blanco */
.insignia-blanco {
color: #212529;
background-color: #f8f9fa;
}
/* número negro */
.insignia-negro {
color: #fff;
background-color: #3C4043;
}
/* enlaces blancos para azul, cielo, verde, rojo y negro */
li.btn-azul > a, li.btn-cielo > a, li.btn-verde > a, li.btn-rojo > a, li.btn-negro > a {
color: #ffffff;
text-decoration: none;
background-color: transparent;
}
li.btn-azul > a:hover, li.btn-cielo > a:hover, li.btn-verde > a:hover, li.btn-rojo > a:hover, li.btn-negro > a:hover {
color: #ffffff;
text-decoration: none;
}
/* enlaces negros para naranja, gris y blanco */
li.btn-naranja > a, li.btn-blanco > a, li.btn-gris > a {
color: #000000;
text-decoration: none;
background-color: transparent;
}
li.btn-naranja > a:hover, li.btn-blanco > a:hover {
color: #000000;
text-decoration: none;
}