html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #000 !important;
    color: #fff !important;
    overflow-x: hidden;
    font-size: 16px;
}
header,
section,
main {
    font-family: 'Oswald', sans-serif !important;
    font-family: 'Roboto', sans-serif;
}

main{
    padding-top: 100px;
}

.main-header .navbar{
    position: fixed;
    z-index: 999;
    background: rgba(0,0,0,0.4);
    background: -moz-linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0.4)), color-stop(100%, rgba(0,0,0,0.4)));
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%);
    background: -o-linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%);
    background: -ms-linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%);
    background: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );

}

header .nav-pills {
    border: none !important;
    align-items: center;
    justify-content: center;
}
header .nav-pills li {
    text-transform: uppercase;
    font-size: 14px !important;
    letter-spacing: 2px;
}
header .nav-pills li a {
    color: #fff !important;
}
header .nav-pills li.active a {
    color: #2AA0C8 !important;
}
header .nav-pills li.nav-usuario {
    padding: 0 !important;
    margin-right: 8px;
}
header .nav-pills li.nav-usuario .usuario-nombre {
    display: block;
    margin-left: 6px;
}
header .nav-pills li.nav-usuario .usuario-nombre span {
    display: block;
    line-height: 1rem;
}
header .nav-pills-responsive {
    justify-content: flex-start;
    border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
    padding-top: 8px;
}
header .nav-pills li.nav-reservas {
    background-color: #2AA0C8;
    border: 0 !important;
    border-radius: 0 0 0 20px !important;
    height: 100px;
    padding: 0 34px !important;
}
header .nav-pills li.nav-reservas a {
    padding-left: 10px !important;
}
header .nav-pills-responsive li.nav-reservas {
    background-color: #2AA0C8;
    border: 0 !important;
    width: 207px;
    height: 39px;
    line-height: 39px;
    border-radius: 0 !important;
}
header .nav-pills-responsive li.nav-reservas a {
    padding-left: 10px !important;
}

header .navbar-collapse {
    justify-content: flex-end !important;
}

.nav-tabs {
    border: none !important;
}
.nav-tabs .nav-link- {
    border: none !important;
    background-color: transparent !important;
    color: #fff !important;
    
}

.flashmsg{
    display: flex;
    justify-content: center;
    margin-top: 7rem;
    margin-bottom: -7rem;
}


.nav-tabs .nav-link.active- {
    border: none !important;
    background-color: transparent !important;
    color: #2AA0C8 !important;
}
.nav-tabs-active {
    list-style: none;
    background-color: #393939;
    height: 3px;
    padding: 0;
    margin: 0;
}
.nav-tabs-active .col.active {
    display: flex;
    justify-content: center;
}
.nav-tabs-active .col.active::after {
    content: "";
    width: 100%;
    max-width: 90px;
    background-color: #2AA0C8;
}
.tabla-horarios {
    margin: 0 -12px !important;
}
.table tbody td .horario {
    text-align: center;
}
.table tbody td .horario h4 {
    font-size: 18px;
    margin: 0;
}
.table tbody td .horario p {
    font-size: 12px;
    font-weight: 400 !important;
    color: #2AA0C8;
    margin: 0;
}
section.barra-gris-titulo {
    background-color: #262626;
    font-size: 40px;
    font-weight: 600 !important;
}
section.barra-gris-titulo h1 {
    font-weight: 600 !important;
}
.barra-gris-filtros {
    background-color: #2626267A;
    font-size: 40px;
    font-weight: 600 !important;
    padding: 12px 0.5rem !important;
    margin-bottom: 13px;
}
.barra-gris-filtros > * {
    padding: 0 4px !important;
}
.barra-gris-filtros .dropdown {
    height: 100% !important;
}
.barra-gris-filtros .dropdown button {
    display: block;
    background-color: transparent;
    border: 1px solid #262626;
    border-radius: 0;
    color: #fff !important;
    font-size: 14px !important;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: left;
    padding: 0 12px !important;
    text-transform: uppercase;
}
.barra-gris-filtros .dropdown button::after {
    position: absolute;
    top: calc(50% - 5px);
    right: 12px;
    content: '';
    background-image: url('images/select.svg');
    background-repeat: no-repeat;
    width: 15px;
    height: 9px;
    border: none !important;
}
.barra-gris-filtros .dropdown-menu {
    width: 100%;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.barra-gris-filtros .dropdown-menu li {
    font-size: 14px !important;
    background-color: #121212 !important;
    border-bottom: 1px solid #262626;
    padding: 8px 4px !important;
}
.barra-gris-filtros .dropdown-menu li:hover {
    opacity: 0.5;
}
.barra-gris-filtros .dropdown-menu li a:hover {
    background-color: transparent !important;
}
button.btn-primary-clase {
    width: 125px;
    height: 30px;
    line-height: 30px;
    border-radius: 55px;
    font-size: 14px;
    background-color: #2AA0C8 !important;
    padding: 0 !important;
    border: none !important;
}
button.btn-primary.btn-primary-clase:hover {
    /* background-color: #2AA0C8 !important; */
    color: #fff;
}
button.btn-primary-reservar {
    width: 170px;
    height: 40px;
    border-radius: 0;
    font-size: 15px;
    color: #2AA0C8 !important;
    background-color: #000;
    padding: 0 !important;
    border: 2px solid #2AA0C8 !important;
    text-transform: uppercase;
}
button.btn-primary-cancelar {
    width: 170px;
    height: 40px;
    border-radius: 0;
    font-size: 15px;
    color: #F50606 !important;
    background-color: #000;
    padding: 0 !important;
    border: 2px solid #F50606 !important;
    text-transform: uppercase;
}
button.btn-primary:hover {
    background-color: #393939 !important;
}
button.btn-primary-reservar:hover {
    background-color: #000 !important;
}
button.btn-primary-cancelar:hover {
    background-color: #000 !important;
}
button.btn-primary-confirmar {
    width: 175px;
    height: 54px;
    line-height: 54px;
    border-radius: 0;
    font-size: 14px;
    color: #fff !important;
    background-color: #2AA0C8;
    padding: 0 !important;
    border: none !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}

input.btn-primary-confirmar {
    width: 170px;
    height: 40px;
    border-radius: 0;
    font-size: 14px;
    color: #fff !important;
    background-color: #2AA0C8;
    padding: 0 !important;
    border: none !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}

button.btn-danger-confirmar {
    width: 170px;
    height: 54px;
    border-radius: 0;
    font-size: 14px;
    color: #fff !important;
    background-color: #F50606;
    padding: 0 !important;
    border: none !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}

button.btn-danger-confirmar a{
    text-decoration: none;
}

button.btn-primary-disabled {
    width: 175px;
    height: 54px;
    line-height: 54px;
    border-radius: 0;
    font-size: 14px;
    color: #fff !important;
    background-color: #393939;
    padding: 0 !important;
    border: none !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}
input.form-buscar {
    background-image: url('images/buscar.svg');
    background-repeat: no-repeat;
    background-position-y: center; 
    background-position-x: calc(100% - 8px);
    padding-right: 8px !important;
    text-transform: uppercase;
}
button.form-buscar {
    background-image: url('images/buscar.svg');
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: calc(100% - 8px);
    padding-right: 28px !important;
    text-transform: uppercase;
}

.btn-clase{
    width: 125px;
    height: 30px;
    line-height: 25px;
    border-radius: 55px;
    font-size: 14px;
    padding: 0 !important;
    pointer-events: none !important;
    letter-spacing: 1px;
}

.btn-clase-demo{
    width: 90px;
    height: 21px;
    line-height: 15px;
    border-radius: 55px;
    font-size: 10px;
    padding: 0 !important;
    pointer-events: none !important;
}

.btn-clase-demo2{
    width: 54px;
    height: 16px;
    line-height: 10px;
    border-radius: 55px;
    font-size: 8px;
    padding: 0 !important;
    pointer-events: none !important;
}

input.input-text {
    height: 35px;
    font-family: 'Roboto';
    font-size: 12px;
    font-weight: 300;
    padding: 0 8px;
    color: #262626;
}
.form-select {
    background-image: url('images/select.svg') !important;
    text-transform: uppercase !important;
}

.modal-title{
    letter-spacing: 4px;
}

.modal-body .nav-tabs .nav-item .fw-bold{
    letter-spacing: 2px;
}
/*.modal .modal-dialog {
    max-width: 725px !important;
}*/
.modal .modal-content {
    background-color: #262626 !important;
}
.modal .modal-header,
.modal .modal-footer {
    border: none !important;
    justify-content: center;
    padding: 0;
}
.modal .modal-footer > div {
    width: 100%;
    max-width: 430px;
    margin-bottom: 64px !important;
}
.modal .modal-footer>* {
    margin: 0 !important;
}
.modal .modal-header .container {
    padding-top: 30px;
}
.modal .modal-header .container h1 {
    font-size: 40px !important;
}
.modal .modal-header .container h6 {
    /*font-family: 'Roboto';*/
    font-size: 12px !important;
    font-weight: 400 !important;
}
.modal .modal-header .container img {
    margin-bottom: 35px;
}
.modal .reserva-detalles {
    background-color: inherit !important;
    color: #2AA0C8 !important;
    max-width: 430px;
    border-radius: 4px;
    /*font-family: 'Roboto';*/
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modal .reserva-detalles li {
    margin-bottom: 12px;
}
.modal .reserva-detalles li:last-child {
    margin-bottom: 0px;
}
footer .thfit {
    margin-left: 110px;
}
footer .derechos {
    background-color: #fff;
    height: 51px;
    color: #262626;
    padding-top: 14px;
}
footer .derechos p {
    margin: 0;
    padding: 0 8px;
    font-size: 14px !important;
    font-weight: 300 !important;
}
footer .derechos p a {
    color: #262626 !important;
}
.container-footer {
    /*background-color: #262626 !important;*/
    background-color: #000 !important;
    letter-spacing: 2px;
}
.container-footer-2 {
    height: 50px;
    padding: 0 !important;
}
.container-footer-2 > section {
    justify-content: space-between !important;
}
.container-footer-2 .footer-telefono {
    height: 50px;
    width: auto;
}
.container-footer-2 .social-media {
    font-size: 14px !important;
}
.form {
    display: flex;
    flex-direction: row;
    padding-left: 4px !important;
    padding-right: 4px !important;
}
.search-field {
    width: 100%;
    padding: 4px 12px;
    border: none;
    outline: none;
    font-size: 14px !important;
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid #262626;
    color: #fff;
}
.search-field::placeholder {
    color: #fff;
}
.search-button {
    background: transparent;
    border: none;
    outline: none;
    margin-left: -43px;
    margin-top: -10px;
    display: block;
}
.search-button img {
    width: 20px;
    height: 20px;
    object-fit: cover;
}

.btn-perfil-primary {
    width: 26px;
    height: 26px;
}
.btn-perfil-primary > img {
    vertical-align: unset !important;
}
.btn-filtro-link > img {
    width: 16px;
    height: auto;
}
.tablas .tabla table td {
    font-size: 10px !important;
    font-weight: 400;
}
.form-control-buscar {
    background-image: url(images/buscar.svg);
    background-repeat: no-repeat;
    background-position: 100px center;
    padding: 0 8px;
    height: 39px;
}

.footer {
    height: 51px;
}
.footer p {
    font-size: 12px !important;
}

.font-roboto {
    font-family: 'Roboto' !important;
}
.font-oswald {
    font-family: 'Oswald' !important;
}
.font-size-9 {
    font-size: 9px !important;
}
.font-size-10 {
    font-size: 10px !important;
}
.font-size-11 {
    font-size: 11px !important;
}
.font-size-12 {
    font-size: 12px !important;
}
.font-size-14 {
    font-size: 14px !important;
}
.font-size-16 {
    font-size: 16px !important;
}

.filtros-primary .dropdown-toggle::after {
    margin-left: 30px;
}

.filter-white {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(100%) contrast(104%);
}
.filter-celeste {
    filter: invert(37%) sepia(95%) saturate(430%) hue-rotate(149deg) brightness(92%) contrast(82%);
}

.bootstrap-table .fixed-table-pagination {
    padding: 0 16px;
    font-size: 10px !important;
}
.bootstrap-table .fixed-table-pagination .btn {
    padding: 1px 4px !important;
    line-height: 1.2rem;
}
.bootstrap-table .fixed-table-pagination .btn .page-size {
    font-size: 10px !important;
}
.bootstrap-table .fixed-table-pagination .page-item.page-pre a,
.bootstrap-table .fixed-table-pagination .page-item.page-next a
{
    background-color: #2AA0C8 !important;
    color: #fff !important;
}
.bootstrap-table .fixed-table-toolbar {
    padding-right: 16px;
}
/*
.bootstrap-table .fixed-table-toolbar .search .btn {
    background-color: #2AA0C8 !important;
    border: 2px solid #2AA0C8;
}
.bootstrap-table .fixed-table-toolbar .search input {
    height: 40px;
    border-radius: 0;
}
.bootstrap-table .fixed-table-toolbar .export .btn {
    background-color: #2AA0C8 !important;
    border: 2px solid #2AA0C8;
}
*/
.bootstrap-table .fixed-table-toolbar .btn {
    background-color: #2AA0C8 !important;
    border: 2px solid #2AA0C8;
}
.table-hover-display-hidden .d-on-hover {
    visibility: hidden !important;
}
.table-hover-display-hidden tbody tr:hover .d-on-hover {
    visibility: visible !important;
}
.table-hover tbody tr:hover a {
    color: #fff !important;
}

.content-overflow {
    width: 100% !important;
}

.square {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.deshabilitado{
    opacity: var(--bs-btn-disabled-opacity) !important;
    cursor: default !important;
}

.letra-azul{
    color: #2AA0C8;
}

.contenedor-info{
    background-color: #005673 !important;
    border-radius: 20px !important;
    padding: 3px 20px;
    margin-right: 20px;
}

.contenedor-info2{
    background-color: #FFF ;
    color: #000;
    border-radius: 10px;
}

.cajaperfil{
    border-radius: 20px;
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(170,217,233,0) 0%, rgba(42,160,200,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(0%, rgba(170,217,233,0)), color-stop(100%, rgba(42,160,200,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(170,217,233,0) 0%, rgba(42,160,200,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(170,217,233,0) 0%, rgba(42,160,200,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(170,217,233,0) 0%, rgba(42,160,200,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(170,217,233,0) 0%, rgba(42,160,200,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#2aa0c8', GradientType=0 );
}

.modalpago {
    background-image: url(../images/fondomodal.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #3C4C52;
    background-blend-mode: luminosity;
}

.modal .detalles-pago {
    color: #fff !important;
    max-width: 100%;
    border-radius: 4px;
    /*font-family: 'Roboto';*/
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(170,217,233,0) 20%, rgba(42,160,200,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(20%, rgba(170,217,233,0)), color-stop(100%, rgba(42,160,200,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(170,217,233,0) 20%, rgba(42,160,200,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(170,217,233,0) 20%, rgba(42,160,200,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(170,217,233,0) 20%, rgba(42,160,200,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(170,217,233,0) 20%, rgba(42,160,200,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#2aa0c8', GradientType=0 );
    
}

.fondofoto {
    background-image: url(../images/fondologin.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #3C4C52;
    background-blend-mode: luminosity;
}

.font-size-8{
    font-size: 8px;
}

.clasesplan{
    color: #2AA0C8;
}

.tituloplan{
    /*height: 55px;*/
    color: #2AA0C8;
    letter-spacing: 1px;
}

.descplan{
    border-bottom: 3px solid #2AA0C8;
    margin-bottom: 10px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 8px!important;
    padding: 0 20px;
}

.div-plan{
    height: 300px;
    background-color: #fff;
    padding: 20px 13px;
    width: 200px;
    margin: 10px;
    position: relative;
    color: #000;
    -webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.4);
    box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.4);
    border-radius: 15px;
}

.div-plan2{
    height: 410px;
    background-color: #fff;
    padding: 20px 13px;
    width: 250px;
    margin: 10px;
    position: relative;
    color: #000;
    -webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.4);
    box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.4);
    border-radius: 15px;
}

.div-plan2 .tituloplan{
    font-size: 16px!important;
}

.descplan2{
    border-bottom: 3px solid #2AA0C8;
    margin-bottom: 10px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px!important;
    padding: 0 20px;
}

.clasedivplan{
    font-size: 16px;
}

.clasedivplan span{
    font-size: 12px;
}

.div-plan3{
    height: 410px;
    background-color: #000;
    padding: 20px 13px;
    width: 250px;
    margin: 10px;
    position: relative;
    color: #fff;
    -webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.4);
    box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.4);
    border-radius: 15px;
}

.descplan3{
    border-bottom: 3px solid #2AA0C8;
    margin-bottom: 10px;
    height: 130px;
    padding: 0 20px;
}

.btn-sombreado{
    -webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.6);
    -moz-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.6);
    box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.6);
}

.div-plan.active{
    background-color: #2AA0C8 !important;
    color: #fff !important;
}

.tituloplan.active{
    color: #fff!important;
}

.descplan.active{
    border-bottom: 3px solid #fff!important
}

.div-clases{
    position: absolute;
    top: 310px;
    left: 0;
    right: 0;
}

.clasesplan.active{
    color: #fff;
}

.subcajasplanes{
    overflow-x: scroll;
    width: 100%;
    display: -webkit-inline-box;
}

.btn-validar{
    color: #fff;
    background-color: #323E42;

}

.btn-pagar{
    color: #fff;
    background-color: #45CB28;
    
}

.btn-validar:hover{
    background-color: #005673;
}

.btn-pagar:hover{
    background-color: #005673;
}

.paddle {
	position: absolute;
	top: 35%;
    height: 30px;
	bottom: 50%;
	width: 30px;
}
.left-paddle {
	left: 0;
}
.right-paddle {
	right: 0;
}

.left-paddle:hover {
	color: #000!important;
    background-color: transparent!important;
}
.right-paddle:hover {
	color: #000!important;
    background-color: transparent!important;
}
.hidden {
	display: none;
}

.btncerrar{
    color: #fff;
}

.btncerrar:hover{
    color: #2AA0C8;
    background-color: transparent!important; 
}

.tbl-stats tbody tr{
    border-bottom: none!important;
    border-left: 2px dotted #6E6E6E!important;
    border-right: 2px dotted #6E6E6E!important;
}

.tbl-stats tbody tr td{
    border-left: 2px dotted #6E6E6E!important;
    border-right: 2px dotted #6E6E6E!important;
    background-color: #262626;
}

.btn-estadisticas{
    width: 35px;
    height: 35px;
    border-radius: 50px;
    font-size: 12px;
}

tbody tr{
    border-bottom: 3px dotted #6E6E6E!important;
}

table{
    text-transform: uppercase!important;
    letter-spacing: 2px;
    text-align: center!important;
}

.nav-link.active{
    background-color: inherit!important;
    color: inherit!important;
    border-bottom: 5px solid #2AA0C8!important;
}

.nav-link.reserva{
    border-bottom: 5px solid #393939;
}

.titulos{
    border-bottom: 1px solid #d3d3d3 !important;
    letter-spacing: 8px;
}

.filter-control .form-select, .filter-control .form-control {
    background-color: #2AA0C8 !important;
    border: 1px solid #fff !important;
    color: #fff !important;
}

.fotoperfil{
    display: block;
    object-fit: cover;
}

.col-sm-5.cajaperfil{
    min-height: 640px;
}

.spacing-1{
    letter-spacing: 1px;
}
.spacing-2{
    letter-spacing: 2px;
}
.spacing-3{
    letter-spacing: 3px;
}
.spacing-4{
    letter-spacing: 4px;
}

.linksfooter{
    margin-left: 3rem!important;
    margin-right: 3rem!important;
}

.logofooter{
    display: flex!important;
}

.logoheader{
    width: 50px;
}

.avatarheader{
    width: 45px;
    height: 45px;
    object-fit: cover;
}
.divcajaplan{
    display: block;
}

.btn{
    letter-spacing: 1px;
}

.desktop{
    display: flex;
}

.tabla-horarios.desktop{
    display: block;
}

.tabla-horarios.mobile{
    display: none;
}
.tabla.desktop{
    display: block;
}
.tabla.mobile{
    display: none;
}

th.detail{
    color: #ffffff;
    background: #2AA0C8;
    text-transform: uppercase!important;
    text-align: center !important;
    vertical-align: middle!important;
}

th.detail::after{
    content: '+INFO';
}

.mobile table{
    letter-spacing: 1px!important;
}

.container-footer.destop{
    display: flex;
}
.container-footer.mobile{
    display: none;
}

.logobindex{
    width: 60px;
}

#nav-tab-dias2.nav{
    display: none;
}

.nav-usuario .dropdown-menu{
    top: 105%;
    right: -25%;
    left: auto;
    margin-top: 0;
    margin-right: var(--bs-dropdown-spacer);
    --bs-dropdown-min-width: 1rem!important;
}

.asidebar{
    width: 215px!important;
    background-color: #000 !important;
    overflow-y: auto!important;
    /*background-color: #262626 !important;*/
}
.maincontainer{
    width: calc(100% - 215px);
}
.btnmenu{
    display: none;
}

.padcaja{
    margin-top: 3rem;
}

@keyframes loader_mbi {
    from {
        opacity: 0;
    }
  
    to {
        opacity: 1;
    }
}

.loader{
    height: 250px!important;
    position: relative!important;
}
  
.square {
    background: #2AA0C8;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -5px;
    margin-left: -5px;
}

#sq1 {
    margin-top: -25px;
    margin-left: -25px;
    animation: loader_mbi 675ms ease-in-out 0s infinite alternate;
}

#sq2 {
    margin-top: -25px;
    animation: loader_mbi 675ms ease-in-out 75ms infinite alternate;
}

#sq3 {
    margin-top: -25px;
    margin-left: 15px;
    animation: loader_mbi 675ms ease-in-out 150ms infinite;
}

#sq4 {
    margin-left: -25px;
    animation: loader_mbi 675ms ease-in-out 225ms infinite;
}

#sq5 {
    animation: loader_mbi 675ms ease-in-out 300ms infinite;
}

#sq6 {
    margin-left: 15px;
    animation: loader_mbi 675ms ease-in-out 375ms infinite;
}

#sq7 {
    margin-top: 15px;
    margin-left: -25px;
    animation: loader_mbi 675ms ease-in-out 450ms infinite;
}

#sq8 {
    margin-top: 15px;
    animation: loader_mbi 675ms ease-in-out 525ms infinite;
}

#sq9 {
    margin-top: 15px;
    margin-left: 15px;
    animation: loader_mbi 675ms ease-in-out 600ms infinite;
}


/*--------Graficos---------------*/

.c3-axis-y text {
    fill: #fff;
    font-size:11px;
}
.c3-axis-x text {
    font-size:11px;
    fill:#fff;
}

.c3-legend-item {
    fill: #fff;
    font-size: 10px!important;
}

.c3-tooltip td {
    font-size:12px;
    padding: 3px 6px;
    background-color:#262626!important;
    border-left:1px dotted #999;
    color: #fff;
}

.c3-chart-arcs-title{
    font-size:11px!important;
    fill:#fff;
}
.c3-chart-arc path {
    stroke: none!important;
}

.c3-line {
    stroke-width: 2px !important; 
}

path.domain {
    stroke: #fff!important;
}

.c3 svg {
    font: 10px 'Oswald', sans-serif !important;
}

@media (max-width: 768px){
    .logobindex{
        width: 45px;
    }
    .logofooter{
        display: block!important;
        margin-bottom: 50px;
    }
    .logofooter img{
        width: 35px;
    }
    .logoheader{
        width: 30px;
    }
    .avatarheader{
        width: 30px;
        height: 30px;
    }
    header a.nav-link {
        font-size: 10px;
        padding: 0 3px !important;
    }
    .contenedor-info{
        margin-right: 4px;
    }
    header .nav-pills li.nav-usuario {
        margin-right: 0;
        width: 60px;
    }

    .titulos h1{
        font-size: 24px!important;
        letter-spacing: 4px!important;
        margin-left: 12px;
    }
    .divcajaplan{
        display: none;
    }

    .desktop{
        display: none;
    }

    .tabla-horarios.desktop{
        display: none;
    }
    
    .tabla-horarios.mobile{
        display: block;
    }
    .tabla.desktop{
        display: none;
    }
    .tabla.mobile{
        display: block;
    }

    button.btn-primary-reservar {
        width: 35px;
        height: 36px;
        font-size: 14px;
        color: #fff !important;
        background-color: #2AA0C8;
        padding: 0 !important;
        text-transform: uppercase;
        border-radius: 10px;
    }
    button.btn-primary-cancelar {
        width: 35px;
        height: 36px;
        font-size: 14px;
        color: #fff !important;
        background-color: #F50606;
        padding: 0 !important;
        text-transform: uppercase;
        border-radius: 10px;
    }
    .btn-clase{
        width: 100px;
        height: 30px;
        border-radius: 55px;
        font-size: 12px;
    }

    .btn-clase.btn-inst{
        width: 70px;
        height: 20px;
        border-radius: 35px;
        font-size: 9px;
        line-height: 15px;
    }

    .container-footer.destop{
        display: none;
    }
    .container-footer.mobile{
        display: flex;
    }

    .mobile .logofooter{
        margin: 0!important;
    }

    #nav-tab-dias2.nav {
        white-space: nowrap;
        display:block!important;
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch
      }
      
    #nav-tab-dias2.nav li {
        display: inline-block
    }
    .padcaja{
        margin-top: 1.2rem;
    }

    tbody tr{
        border-bottom: 2px dotted #6E6E6E!important;
    }
    
    .col-sm-5.cajaperfil{
        min-height: 490px;
    }

    .div-plan2{
        height: 300px;
        width: 200px;
    }
    
    .div-plan2 .tituloplan{
        font-size: 12px!important;
    }
    
    .descplan2{
        height: 80px;
        font-size: 8px!important;
    }
    
    .clasedivplan{
        font-size: 14px;
    }
    
    .clasedivplan span{
        font-size: 10px;
    }
}

@media (max-width: 575px){
    .div-avatar{
        text-align: center !important;
    }
    .img-avatar{
        position: static !important;
        transform: translate(0%, 0%) !important;
    }
    .col-sm-5.cajaperfil{
        margin-bottom: 100px;
    }
    .fotoperfil{
        display: none;
    }
    .nombreperfil{
        text-align: left!important;
    }
    
    
}
@media (min-width: 992px) {
    #navbarresponsive{
        display: none!important;
    }
}
@media (max-width: 991px) {
    header.main-header .navbar .container-fluid {
        margin-bottom: 8px;
    }
    .content-overflow {
        width: 1000px !important;
    }
    .linksfooter{
        margin-left: 0!important;
        margin-right: 0!important;
    }
    .maincontainer{
        width: 100%;
    }

    .btnmenu{
        display: block;
    }
    .menudesktop{
        display: none;
    }
    /*.main-header .navbar{
        position: relative;
    }*/

}

@media (max-width: 429px) {
    header.main-header {
        justify-content: space-between !important;
        align-items: center !important;
    }
    

    .barra-gris-filtros {
        padding: 0.5rem !important;
    }
    .barra-gris-filtros .dropdown button {
        height: 45px !important;
    }
    .search-button {
        margin-top: -14px;
        margin-left: -37px;
    }
    .table thead {
        font-size: 9px;
    }
    .table thead tr th {
        height: auto;
    }
    .table tbody td {
        padding: 12px 0 !important;
        font-size: 9px;
    }
    .table tbody td .horario {
        text-align: center;
    }
    .table tbody td .horario h4 {
        font-size: 9px;
        margin: 0;
    }
    .table tbody td .horario p {
        font-size: 9px;
        font-weight: 400 !important;
    }
    button.btn-primary-clase {
        width: auto;
        height: 20px;
        line-height: 20px;
        font-size: 9px;
        padding: 0 8px !important;
    }

    /*header ul.nav-pills {
        display: block !important;
        margin-left: 24px;
        margin-top: 18px;
    }*/
    header ul.nav-pills-responsive {
        display: flex !important;
        justify-content: space-between !important;
        margin-left: 0;
        margin-top: 0;
    }

    header .nav-pills li a.nav-link {
        font-size: 10px;
        padding: 0 4px !important;
    }
    header .nav-pills li.nav-usuario a {
        align-items: center;
    }
    .container-footer-2 .footer-telefono {
        height: auto;
        width: 100%;
    }
    ul.d-flex.nav-tabs-active {
        display: none !important;
    }
    .form {
        padding-left: 4px !important;
        padding-right: 4px !important;
        height: 45px !important;
    }
    .container-footer-2 .nav-link {
        font-size: 9px;
    }
    footer .derechos {
        font-size: 9px;
        text-align: center;
    }
    footer .derechos p {
        margin: 0;
        padding: 0 8px;
        font-size: 11px !important;
        font-weight: 300 !important;
    }
    footer .thfit {
        margin-left: 0px !important;
    }
    .modal .modal-header .container {
        padding-top: 0px;
    }
    .modal .modal-header .container img {
        transform: scale(0.5);
        margin: 0;
    }
    .modal .modal-header .container h1 {
        font-size: 24px !important;
    }
    .content-overflow {
        width: 1000px !important;
    }
}