/*-------------------- Themes --------------------*/
[data-color-theme='classic'] {
    --bg-1:#f9f9f9;
    --bg-2:#fff;
    --bg-3:#ddd;
    --fm-rsv:#4d4d4d;
    --p-1:#4d4d4d;
    --shadow-1:#9b9b9b45;
    --title-1:#000;
    --section-h3: #454545;
    --q-user:#454545;
    --q-msj:#303030;
    --fc-today: #D9EDF7;
    --hr-border:#eee;
}
[data-color-theme='dark'] {
    --bg-1:#222;
    --bg-2:#383838;
    --bg-3:#595959;
    --fm-rsv:#222;
    --p-1:#e9e9e9;
    --shadow-1:#65656500;
    --title-1:#e9e9e9;
    --section-h3: #fff;
    --q-user: #e9e9e9;
    --q-msj:#e9e9e9;
    --fc-today:#4a4a4a;
    --hr-border:#383838;
}

/*--------------------  General -----------------------*/
body p {font-size: 16px;color:var(--p-1)}
body.swal2-toast-shown .swal2-container {height: 400px !important;}
p.form-rsv {color:var(--fm-rsv);}
span.help-block {display: none;}
#compartir {text-align: center;padding: 0 30px 20px 30px;}
#form-reservar  ul.errorlist {display: none;}
#form-reservar label {margin-bottom: 20px;}
#girar {display: none;}
#id_msj {width: 100%!important;}
#id_resp {border: #29CA8E 2px solid;}
#preguntas h3 {color:var(--section-h3);}
#preguntas hr {border-top-color: var(--hr-border);}
#prf-viewport {background-color: var(--bg-1);text-align:center;padding:30px 0 100px;}
#rating, #rating2 {text-align: center;margin-top:20px;}
#review-list {padding: 40px;}
#review-list dd p {margin-left: 40px;margin-bottom: 20px;font-style: italic;font-size: 16px;}
#testimonios {background-color:var(--bg-2);text-align:center;}
#testimonios .section-title {text-align:center; margin:40px auto; padding-bottom:0;}
.apuntador {display:block;width: 14px;height: 14px;border-left: #9c9c9c solid 1px;border-bottom: #9c9c9c solid 1px;margin-left: 20px;}
.bq {margin:0;background-color:#29ca8e;color:#ffffff;border-color:#000;font-family:'Montserrat', sans-serif;font-size:inherit;text-align:left;}
.btn-perfil, .btn-clase {
    background: #29CA8E;
    border: 0;
    color: #ffffff;
    font-size: inherit;
    font-weight: normal;
    transition: 0.5s;
    margin: 0 auto;
}
.btn-clase {border-radius: 14px;padding: 4px 12px;}
.btn-perfil {border-radius: 20px;padding:8px 12px;}
.btn-perfil:hover, .btn-clase:hover {background: #3F51B5;}
.btn-rsv {
    width: 100%;
    background-color: #29CA8E;
    border-radius: 50px;
    border: 0;
    color: #ffffff;
    font-size: inherit;
    font-weight: normal;
    padding: 10px;
    transition: 0.5s;
    margin: 0 auto;
}
.btn-rsv:hover {background-color: #3F51B5;}
.btn-ver-preg {width:100%;background-color:#000000;border-radius:50px;color:#ffffff;font-size:inherit;font-weight:normal;padding:10px;transition:0.5s;margin:0 auto;border:0;}
.btn-ver-preg:hover {background-color: #3F51B5;}
.centrado {text-align: center;margin-bottom: 20px;}
.coleg {margin:20px auto;border-radius:10px;padding:36px 14px;background-color: var(--bg-2);}
.cuadros {padding-left:0;padding-right:0;}
.cuy {font-weight:bold;color:#29CA8E;font-size:x-large;letter-spacing:1px;}
.geolocal {padding:0}
.leaflet-pane {z-index: 0 !important;}
.leaflet-bottom {z-index: 0 !important;}
.mb-30 {margin-bottom:30px;}
.matetag {color:#fff !important;background-color:#29CA8E;padding:3px 12px;border-radius:6px;font-size: 1.4rem;line-height:2.2;word-break:break-word;}
.media p {font-size: 16px;}
.md-tip {color:#286090;font-size:large;font-style:italic;}
.modal-title {color: #286090;}
.modal-header {display: flex;align-items: flex-end;justify-content: space-between;border-bottom: 0 ! important;}
.modal-header .close {position:absolute;top:26px;right:26px;}
.modal-footer {border-top: 0 !important;}
.quoteverde {color:#29CA8E;font-size: 80px;}
.pack {margin:30px auto;color:var(--title-1);}
.preg {margin: 8px auto;width: 100%;}
.prf-name {text-align: center; padding:0px 30px 30px 30px;}
.prf-name h1 {margin-top: 0;}
.prf-name h1 small, .prf-name span {color:var(--title-1);}
.price {display:flex;justify-content:space-between;align-items:baseline;}
.prof {border-radius:50%;text-align:center;margin:0 auto;}
.q-user {color:var(--q-user);}
.q-msj {color:var(--q-msj);}
.pb-0 {padding-bottom:0;}
.rew {text-align: left;display:flex;flex-wrap:wrap;}
.review {padding:30px 20px;}
.sct-colegas {padding:40px 0 100px;background-color: var(--bg-1);text-align:center;}
.sct-preg {padding-top:60px;background-color: var(--bg-1);}
.sctn-banner {background-color: var(--bg-1);padding:0;}
.social-icono {background-color: #3F51B5;text-align: center; border-radius: 0;list-style: none;padding: 6px;}
.social-icono:hover {background-color: #29CA8E;}
.social-icono a {color:#ffffff;}
.social-icono a:hover {color:#ffffff;}
.sombra {box-shadow: 0 0 9px 1px var(--shadow-1);}
.swal2-html-container {font-size: 1.6em;}
.swal2-popup.swal2-toast {border: #3F51B5 solid 3px;}
.swal2-popup.swal2-toast .swal2-title {font-size: 1.6em !important;letter-spacing: 1.5px;}
.team-info h1 small {color:#000;}
.team-info hr {border-top: 1px solid var(--bg-3);}
.team-info span {color:var(--title-1);}
.team-thumb {background-color: var(--bg-2);}
.team-thumb .social-icon li a {background: #29CA8E;color: #ffffff;}
.team-thumb .social-icon li a:hover {background: #3F51B5;}
.team-thumb .team-info h4 {color:var(--title-1)}
.toast {margin-top: 20px;}
.toast li a {
    background: #29CA8E;
    border-radius: 100px;
    font-size: 15px;
    color: #fff;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-decoration: none;
    text-align: center;
    transition: all 0.4s ease-in-out;
    position: relative;
    margin: 5px 5px 5px 0;
}
.toast li a:hover {background: #3F51B5;}
.toast li a:focus {outline: 0;}
.transicion-arriba {height:20px;background-image:repeating-linear-gradient(45deg, transparent, transparent 20px, #222222 20px, #222222 40px);background-color:#29ca8e;}
.transicion-abajo {height:20px;background-image:repeating-linear-gradient(135deg, transparent, transparent 20px, #222222 20px, #222222 40px);background-color:#29ca8e;}
@media screen and (max-width:396px) {.price{flex-wrap:wrap;}}
@media screen and (max-width: 559px) and (orientation: portrait) {#preguntas {padding: 3rem 0;}}
@media screen and (max-width:767px) {.rew {margin-top:20px;}}

/*------------------------- Banner -----------------------*/
.animate {
    display: flex;
    width: 100%;
    height: 40px;
    color: #fff;
    font-size: 23px;
    line-height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: hidden;
    justify-content: center;	
}
.animate ul {list-style: none;padding-left: 0px;animation: cambiar 12s infinite;animation-direction: normal;}
.animate ul p {margin: 0;}
.banner-title {background-color: transparent;padding:20px;font-family:'Montserrat',sans-serif;}
@keyframes cambiar {
    0%{ margin-top: 160px;}
    5%{ margin-top: 160px;}
    
    10% {margin-top: 0px;}
    20% {margin-top: 0px;}
    
    25% {margin-top: -40px;}
    40% {margin-top: -40px;}
    
    45% {margin-top: -80px;}
    60% {margin-top: -80px;}
    
    65% {margin-top: -120px;}
    80% {margin-top: -120px;}

    85% {margin-top: -160px;}
    100% {margin-top: -160px;}
}
.banner {background-image:url("/static/reservas/images/pizarra.e8d42887b602.png");background-position-y:bottom;background-size: cover;height:140px;text-align:center;}

/*----------------------- Paquetes -----------------------*/
.contenedor {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 200;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.contenedor input {position:absolute;opacity: 0;cursor: pointer;} /* Hide the browser's default radio button */
.checkmark {position:absolute;top:0;left:0;height:25px;width:25px;background-color:#ccc;} /* Create a custom radio button */
.contenedor:hover input ~ .checkmark {background-color:rgb(156, 156, 156);} /* On mouse-over, add a grey background color */
.contenedor input:checked ~ .checkmark {background-color: #29ca8e;} /* When the radio button is checked, add a green background */
.contenedor input:checked ~ .checkmark-gr {background-color:#3F51B5;}
.checkmark:after {content: "";position: absolute;display: none;} /* Create the indicator (the dot/circle - hidden when not checked) */
.contenedor input:checked ~ .checkmark:after {display: block;} /* Show the indicator (dot/circle) when checked */
.contenedor .checkmark:after {top:9px;left:9px;width:8px;height:8px;background:white;} /* Style the indicator (dot/circle) */
.pck {float:right;font-weight:bold;}

/*------------------------ Tooltip -----------------------*/
.test + .tooltip > .tooltip-inner {background-color:#3f51b5; color:#FFFFFF; padding:12px;font-size:12px;text-align:left;}
.test + .tooltip.top > .tooltip-arrow {border-top: 5px solid #3f51b5;} /* Tooltip on top */

/*------------------------ Video Modal -------------------*/
.html5-video-player {overflow: scroll;}
.modalvid {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    /*padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}         
.modalvid-content {
    margin: auto;
    width: 90%;
    max-width: 460px;
    max-height: 90%;
    background-color: transparent;
    border-radius: 6px;
    padding: 3em 2.5em;
    display: grid;
    gap: 1em;
    place-items: center;
    grid-auto-columns: 100%;
    transform: var(--transform);
    transition:var(--transition);
}         
.closevid {
    text-decoration: none;
    color: #ffffff;
    background-color: #29CA8E;
    padding: 0.3em 2.4em;
    /*border: 1px solid ;*/
    border-radius: 50px;
    display: inline-block;
    font-weight: 300;
    transition: background-color .3s;
}
.closevid:hover {cursor: pointer;}
.title_video{float:right;font-size: 2.2rem;}
.myBtn{
    width:80%;
    background: #ff2600;
    border-radius: 50px;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: inherit;
    font-weight: normal;
    padding: 15px 30px;
    transition: 0.5s;
    margin: 0 10% 0 10%;
}
.myBtn:hover {background:#3F51B5;}     
.image {
    position: absolute;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 50%;
    border-top: 3px solid #ff0077;
    border-right: 3px solid #ff2600;
    border-bottom: 3px solid #fdaf05;
    border-left: 3px solid rgb(244, 113, 104);
    animation: spinning-circle 1s linear 3;
    animation-delay: 3s;
}
.image:hover {
    cursor: pointer;
    border-right-style: dotted;
    border-left-style: dotted;
    border-bottom-style: dotted;
    animation: spinning-circle 1s linear infinite;
}
.centr {display:flex;justify-content:center;align-items: center;}
@keyframes spinning-circle {0% {transform:rotate(0deg);}100% {transform:rotate(360deg);}}
@-webkit-keyframes spinning-circle {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}

/*------------------------ Otros profesores ---------------------------*/
.md-padd {padding: 0 20px;}
.media-body {text-align: left;padding: 0 25px;width: 100%;}
.media-left {padding-right: 0;margin-bottom: 30px;}
.media-object {border-radius: 100%;padding: 0;}
.media-right {padding: 0px;}
.media-right .precio {font-size: 20px;font-weight: bold;color: #29CA8E;}
.nomcolor {color: #29CA8E;font-weight: bold;}
.butn {background-color: #29CA8E;color: white;margin-bottom: 20px !important;}
.butn:hover {color: white !important;background-color: #3f51b5;}
.gl-star-rating-stars>span {width:14px;height:14px;background-size:14px;margin:0;}
.owl-carousel.owl-colegas .owl-item img {width:120px;}
.owl-prev {position:absolute;top:110px;left:0;}
.owl-next {position:absolute;top:110px;right:0;}
@media only screen and (max-width: 767px) {.media, .media-left, .media-right {display:flex;flex-direction:column;align-items:center;}.md-padd {padding:0;}}

/* ------------------------ Mensajes -----------------------------------*/
.msj {margin-bottom: 30px;background-color: #e2e2e2;text-align: left;}
.form-control::placeholder {color:inherit;font-style: italic;}

/*------------------------ Calendario ------------------------------------*/
#calendar .fc-event{cursor: pointer;}
.table-bordered>tbody>tr>td, 
.table-bordered>tbody>tr>th, 
.table-bordered>tfoot>tr>td, 
.table-bordered>tfoot>tr>th, 
.table-bordered>thead>tr>td, 
.table-bordered>thead>tr>th {border:1px solid var(--bg-3);}
.fc-today {background-color: var(--fc-today);}
.fc-time-grid-event.fc-short .fc-time {display: initial;}
.fc-left {display:inline-flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:30px;}
.fc-toolbar {flex-direction:column;}
.sctn-calendar {background-color: var(--bg-2);}
.team-calendar {text-align:center;color:var(--title-1);}
@media screen and (max-width: 559px) and (orientation: portrait) {#girar {display: block;color: tomato;font-size: large;}}
@media screen and (max-width: 600px) {
    #calendar .btn {padding: 6px 10px !important;}
    td.fc-head-container.fc-widget-header {overflow: hidden;}
    .fc-toolbar {flex-direction: column;}
    .fc-toolbar h2 {font-size: 1em;font-weight: bold;}
}
@media screen and (max-width: 991px) {#calendar {margin: 30px 0;}}

/*------------------------- Cargar mas --------------------------*/
#loadMore {
    width: 200px;
    color: #fff;
    display: block;
    text-align: center;
    margin: 20px auto;
    padding: 10px;
    border-radius: 30px;
    border: 1px solid transparent;
    background-color: #3F51B5;
    transition: .3s;
}
#loadMore:hover {color: blue;background-color: #fff;border: 1px solid #3F51B5;text-decoration: none;}
.noContent {color: blue !important;background-color: transparent !important;border: 1px solid #000;pointer-events: none;}
.qa {display: none;}

/*--------- Barras actividad y tiempo de respuesta -------------*/
* {box-sizing:border-box}
.bandera {float:right;font-size:small;font-style:italic;}
.barra {margin-bottom:20px;text-align:left;color:var(--title-1);}
.barra i {color:var(--title-1);}
.envase {width: 100%;background-color:var(--bg-3);border-radius:10px;}
.skills {text-align:right;padding-right:5px;color:white;}
.orange {background-color: orange;width:40%;border-radius:10px;}
.red {background-color: red;width:20%;border-radius:10px;}
.green {background-color: green;width:95%;border-radius:10px;}
.yellowgreen {background-color: yellowgreen;width:80%;border-radius:10px;}
.gold {background-color: gold;width:60%;border-radius:10px;}