/*#region variables */
:root {
    --naranja-principal-color: rgb(245, 134, 52);
    --mi-agenda-turnos-color: rgb(223, 126, 65);
    --mi-cuenta-color: rgb(200,117,77);
    --configuracion-color: rgb(177,108,89);
    --buscador-turnos-color: rgb(154,99,101);
    --control-color: rgb(131,91,113);
    --turnos-que-saque-color:rgb(108,82,125);
    --ayuda-color:rgb(85,73,137);
    --azul-principal-color: rgb(62,64,149);

    --ver-turnos-color: rgb(92, 76, 133);
    --probar-color: rgb(123, 87, 117);
    --contacto-color: rgb(154, 99, 101);
    --precios-color:rgb(184, 111, 84);
    --mas-info-color: rgb(215, 122, 68);

    --ver-partners-color: rgb(200,117,77);
    --ver-mis-turnos-color: rgb(154,99,101);
    --obtener-cuenta-partner-color: rgb(108,82,125);
}

@keyframes girar {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

/*#endregion */

/*#region general */

table.full {
    width: 100%;
}

.pagina > h3 {
    text-align: center;
}

#video {
    position: absolute;
    top: 150%;
}

.icono-grande {
    font-size: 8em;
}

nav ul a, nav .brand-logo {
    color: #444;
}

p {
    line-height: 2rem;
}

.sidenav-trigger {
    color: #26a69a;
}

.header-bar {
    background-color: var(--naranja-principal-color);
    border-bottom: 0px solid #614f00;
}

.side-panel .header-bar {
    background-color: var(--naranja-principal-color);
}

.side-panel {
    background-color: var(--azul-principal-color);
}

.label-activo {
    -webkit-transform: translate3d(0, -60%, 0);
    transform: translate3d(0, -60%, 0);
    font-size: 12px;
}

.aplicacion {
    height: 100%;
}

.aplicacion > .controlador > .contenedor-cabecera {
    position: absolute;
    top: 0;
    width: 100%;
    height: 52px;
    overflow: hidden;
    z-index: 5;
}
.aplicacion > .controlador > .contenedor-cabecera > .cabecera {
    color: white;
    padding: 12px;
    margin: 4px;
    border-radius: 5px;
    text-align: center;
}

.aplicacion > .controlador > .contenedor-cabecera > .cabecera > button {
    top: -12px;
    color: white;
    background: transparent;
}

.aplicacion > .controlador > .pagina {
    position: absolute;
    top: 52px;
    left: 0;
    width: 100%;
    height: Calc(100% - 104px);
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
    opacity: 0;
    display: none;
    transition: transform 1s cubic-bezier(0, 0.79, 0.11, 0.99), opacity 1s;
    overflow: auto;
    padding-right: 5px;
    padding-left: 5px;
    z-index: 4;
}

.aplicacion > .controlador > .pagina.activa {
    opacity: 1;
    display: block;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

.aplicacion > .controlador > .pagina.lista {
    height: Calc(100% - 52px);
}

.aplicacion > .controlador > .pagina > form {
    padding-left: 50px;
    padding-right: 50px;
    width: 100%;
    height: fit-content;
}


.aplicacion > .controlador > .botonera {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 52px;
    overflow: hidden;
    padding-right: 5px;
    padding-left: 5px;
    z-index: 3;
    background-color: white;
}

.aplicacion > .controlador > .botonera > button:not(.mercadopago-button) {
    position: absolute;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 8px;
    font-size: 18px;
    color: white;
    margin-top: 7px;
    -webkit-transform: translateX(1000%);
    transform: translateX(1000%);
    opacity: 0;
    transition: transform 1s cubic-bezier(0, 0.79, 0.11, 0.99), opacity 1s;
}

.aplicacion > .controlador > .botonera > button.activa {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

.aplicacion > .controlador > .botonera > button.anterior {
    background: #858585;
    left: 5px;
}

.aplicacion > .controlador > .botonera > button.siguiente {
    right: 5px;
}

#dudas {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background: #aaabae;
    border-radius: 8px;
    font-size: 18px;
    color: white;
    position: absolute;
    top: 90%;
    left: 90%;
    width: 100px;
    height: 50px;
    border: none;
    z-index: 2;
}

home {
    background-image: linear-gradient(180deg, rgb(220,220,220), white 50%);
}

home > .header-bar {
    display: none;
}

.pc {
    display: block;
}

.icon.pregunta::before{
    content: '?';
    font-family: "Segoe UI";
    padding-left: 10px;
    border-radius: 50%;
    border: 1px solid #3e4095;
    padding-right: 10px;
    background: #3e4095;
}

.boton-filtro {
    height: 42px;
    position: relative;
}

hr {
    position: relative;
    top: 10px;
    margin-bottom: 17px;
}

.mobile{    
    display: none;
}

form > div > div.binario {
    text-align: center;
}

#buscar_localidad {
    height: 45px;
    position: absolute;
    width: 97%;
}

#listado_localidades {
    overflow: auto;
    position: absolute;
    top: 45px;
    width: 97%;
    height: Calc(100% - 90px);
}

@media only screen and (max-width : 600px) {
    .pc {
        display: none;
    }

    .mobile{    
        display: block;
    }

    home > .header-bar {
        display: block;
    }

    .aplicacion {
        padding-top: 52px;
    }

    .aplicacion > .controlador > .pagina {    
        top: 104px;
        height: Calc(100% - 156px);
    }
    
    .aplicacion > .controlador > .contenedor-cabecera {
        top: 52px;
    }

    .aplicacion > .controlador > .pagina > form {
        padding-left: 0px;
        padding-right: 0px;
    }

    .aplicacion > .controlador > .pagina.lista {
        height: Calc(100% - 104px);
    }

    #dudas {
        display: none;
    }

    #buscar_localidad {
        height: 90px;
    }

    #listado_localidades {
        top: 90px;
    }
}
/*#endregion */

/*#region colores del menu */

.side-panel > .content > ul >li {
    display: none;
}

.side-panel > .content > ul >li.activo {
    display: block;
}

.side-panel > .content > ul > li > a > i {
    position: relative;
    top: 7px;
}

.side-panel > .content > .list > .imagen-usuario{
    background: var(--naranja-principal-color);
}
.side-panel > .content > .list > .nombre-usuario{
    background: var(--naranja-principal-color);
}

.hijo > a {
    position: relative;
    left: 40px;
}

/*#endregion*/

/*#region agenda de turnos */
.cabecera.agenda-de-turnos {
    background: var(--mi-agenda-turnos-color);
}

#Turnos > .botonera > button.siguiente {
    background: var(--mi-agenda-turnos-color);
}

#Turnos > .pagina:not(.lista) {
    overflow: auto;
    padding-top: 50px;
    padding-left: 50px;
    padding-right: 50px;
}

#Turnos .pagina.lista {
    overflow: hidden;
}

@media only screen and (max-width : 600px) {
    #Turnos > .pagina:not(.lista) {
        padding-top: 15px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

#Turnos > .pagina > form > .tablet-4 > div {
    margin: 5px;
    background: #d4d4d4;
    text-align: center;
    height: 35px;
    max-height: 35px;
    overflow: auto;
}

#Turnos > .pagina > form > .tablet-4 > div > label {
    color: #858585;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
}

#Turnos > .pagina > form > .tablet-8 > div {
    text-align: center;
    margin: 5px;
    background: #e8e8e8;
    height: 35px;
}

#Turnos > .pagina > form > .tablet-8 > div > input {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#Turnos #buscar_localidad {
    top: 0;
}

.info-cambio {
    position: relative;
    top: 25%;
}

.info-cambio > h4 {
    text-align: center;
}

#detalle_turno_multiple > div > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
}

#detalle_turno_multiple > div > div > div {
    background: #d4d4d4;
}

#detalle_turno_multiple > div > div > div > label{
    width: 100%;
    display: inline-block;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #858585;
    transition: width 1s;
    padding-left: 5px;
    font-weight: bold;
}

#detalle_turno_multiple > div > div > div > label.activo {
    width: 50%;
}

#detalle_turno_multiple > div > div > div >.botones {
    position: relative;
    top: -50px;
    left: 50%;
    width: 50%;
    height: 50px;
    background: #d4d4d4;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
    transition: transform 1s;
}

#detalle_turno_multiple > div > div > div >.botones > button {
    height: 49px;
    text-align: center;
    background: transparent;
    width: 50%;
    border: 1px solid;
    border-radius: 8px;
    color: var(--mi-agenda-turnos-color);
}


#detalle_turno_multiple > div > div > div >.botones.activo {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}

.cabecera-fija {
    position: -webkit-sticky;
    position: sticky;
    top: 1px;
    z-index: 1;
    background: white;
    padding-top: 1px;
    border-top: 2px white solid;
}

.cabecera-agenda {
    background: #bebfc1;
    color: white;
    margin: 4px;
    height: 50px;
    overflow: hidden;
    border-radius: 5px;
}

.cabecera-agenda > .column.phone-8 {
    background: #bebfc1;
    height: 50px;
    border-right: 1px white solid;
}

.cabecera-agenda > .column.phone-4 {
    background: #bebfc1;
    height: 50px;
    border-left: 1px white solid;
}

.cabecera-agenda > .column.phone-4{
    padding: 12px;
}

.cabecera-agenda > .column.phone-4 > div > button {
    background: transparent;
    color: white;
}

.cabecera-agenda > div > select {
    background: transparent;
    color: white;
    padding-left: 10px;
}

.cabecera-agenda > div > select > option {
    color: black;
}

.cabecera-agenda > div > i {
    position: absolute;
    left: 85%;
    top: 14px;
    pointer-events: none;
    background: #8c8d8f;
    border-radius: 6px;
}

.cabecera-agenda > .column.tablet-2 > div > button {
    background: transparent;
    color: white;
}

.cabecera-seleccionar-dia {
    height: 50px;
    background: #e6e7e9;
    margin: 4px;
    overflow: hidden;
    border-radius: 5px;
}

.cabecera-seleccionar-dia > div {
    background: inherit;
}

.cabecera-seleccionar-dia > .phone-8.tablet-8.column > button > i {
    position: absolute;
    left: 85%;
    top: 10px;
    pointer-events: none;
    background: #8c8d8f;
    border-radius: 6px;
    color: white;
}

.cabecera-agenda.pc > .tablet-3 {
    padding-right: 3px;
    border-right: 2px white solid;
    padding-left: 3px;
}

.cabecera-agenda.pc > .tablet-3 > select {
    height: 50px;
}

.cabecera-agenda.pc > .tablet-7 {
    border-right: 2px white solid;
    border-left: 2px white solid;
    padding: 4px;
}

.cabecera-agenda.pc > .tablet-2 {
    padding: 11px;
    border-left: 2px white solid;
}

.cabecera-agenda.pc > .tablet-2 > button {
    background-color: transparent;
}

.cabecera-libre.pc {
    position: -webkit-sticky;
    position: sticky;
    top: 1px;
    height: Calc(100% - 65px);
    background: #bebfc1;
    border: 2px white solid;
    border-radius: 5px;
    border-left: 4px white solid;
}

#Turnos > .pagina > form > div > .column.item {
    background: #d4d4d4;
    border-radius: 3px;
}

#Turnos > .pagina > form > div > .column.item > label {
    width: 100%;
    display: inline-block;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #858585;
    transition: width 1s;
    padding-left: 5px;
    font-weight: bold;
}

#Turnos .contenedor-de-icono {
    position: absolute;
    right: 10px;
    top: calc(50% - 10px);
}
#Turnos .cargando {
    position: relative;
    height: 20px;
    width: 20px;
    display: inline-block;
    animation: girar 5.4s infinite;
}

#Turnos .cargando::after, .cargando::before {
    content: "";
    background: transparent;
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-width: 2px;
    border-color: #333 #333 transparent transparent;
    border-style: solid;
    border-radius: 20px;
    box-sizing: border-box;
    top: 0;
    left: 0;
    animation: girar 0.7s ease-in-out infinite;
}

#Turnos .cargando.loader::after {
    animation: girar 0.7s ease-in-out 0.1s infinite;
    background: transparent;
}

#Turnos .personas_intereadas {
    display: grid;
    place-items: center;
    height: 35px;
    background: beige;
    border-radius: 5px;
}

#personas_interesadas .item {
    background: #e6e7e9;
    border-radius: 10px;
    text-align: center;
    margin-top: 2px;
}

#Turnos #telefono, #editar_telefono {
    width: 60%;
    float: right;
}

#Turnos #codigo_pais {
    width: 39%;
    float: left;
    height: 35px;
    background: transparent;
}

/*#endregion*/

/*#region perfil */
.cabecera.perfil {
    background: var(--mi-cuenta-color);
}

#Perfil > .pagina  > form > .banner {
    padding-top: 10px;
    width: 100%;
    height: 250px;
    background-color: grey;
    position: relative;
}

#Perfil > .pagina  > form > .banner > a {
    position: relative;
    left: 94%;
}

#Perfil > .pagina  > form > .contenedor-imagen {
    width: 250px;
    top: -185px;
    position: relative;
    left: 35px;
    margin-bottom: -265px;
    height: 250px;
    border-radius: 50%;
    border: 2px white solid;
}

#Perfil > .pagina  > form > .contenedor-imagen > a{
    position: absolute;
    top: 93px;
    left: 175px;
}

#Perfil > .pagina  > form > .titulo {
    margin-top: 35px;
    background: #e6e7e9;
    height: 68px;
    text-align: right;
    padding: 5px;
    font-size: 45px;
    padding-right: 10px;
    font-weight: bold;
}

#Perfil > .pagina  > form > .titulo > input {
    color: 969799;
    background: transparent;
    font-size: 40px;
    text-align: right;
    font-weight: bold;
    border-bottom: 0;
}

#Perfil > .pagina  > form > .tablet-4 > div {
    margin: 5px;
    background: #d4d4d4;
    text-align: center;
    height: 35px;
    max-height: 35px;
    overflow: auto;
}

#Perfil > .pagina  > form > .tablet-4 > div > label{
    color: #858585;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
}

#Perfil > .pagina  > form > .tablet-8 > div {
    text-align: center;
    margin: 5px;
    background: #e8e8e8;
    height: 35px;
}

#Perfil > .pagina  > form > .tablet-8 > div.binario {
    padding: 10px;
}


#Perfil > .pagina  > form > .tablet-8 > div > input{
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#Perfil > .pagina  > form > .tablet-8 > div > textarea {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#Perfil > .pagina  > form > .tablet-8 > div > select{
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#Perfil > .pagina  > form > .tablet-6 > div {
    text-align: center;
    margin: 5px;
    background: #e8e8e8;
}

#Perfil > .pagina  > form > .tablet-6 > div > input{
    background-color: #e8e8e8;
    text-align: center;
    height: 35px;
}

#Perfil > .pagina  > form > .tablet-2 > div {
    text-align: center;
    margin: 5px;
    background: #e8e8e8;
}

#Perfil > .pagina  > form > .tablet-2 > div > button{
    background-color: transparent;
    height: 35px;
}

#Perfil > .pagina  > form > .tablet-2 > div > button.activo {
    color: var(--mi-cuenta-color);
}

#Perfil > .pagina  > form > button {
    margin-top: 5px;
    margin-bottom: 15px;
}

#Perfil > .botonera > button.siguiente {
    background:var(--mi-cuenta-color);
}

#Perfil .icono-select {
    position: relative;
    left: 45%;
    top: -29px;
    pointer-events: none;
}

#Perfil #telefono {
    width: 60%;
    float: right;
}

#Perfil #codigo_pais {
    width: 39%;
    float: left;
    height: 35px;
    background: #e8e8e8;
}

@media only screen and (max-width : 600px) {

    #Perfil > .pagina  > form > .banner {
        height: 130px;
        background-size: contain;
    }

    #Perfil > .pagina  > form > .contenedor-imagen {
        top: -100px;
        left: 15px;
        margin-bottom: -167px;
        height: 150px;
        width: 150px;
        background-size: contain;
    }

    #Perfil > .pagina  > form > .banner > a {
        left: 86%;
    }

    #Perfil > .pagina  > form > .contenedor-imagen > a {
        top: 29px;
        left: 49px;
    }
}

/*#endregion */

/*#region servicios */
.cabecera.servicios {
    background: var(--configuracion-color);
}
#Servicios > .pagina > h4 {
    display: none;
}

#Servicios > .pagina > br {
    display: none;
}

#Servicios > .pagina > button {
    width: 100%;
    background: #d4d4d4;
    color: #858585;
    font-weight: bold;
    height: 50px;
}

#Servicios > .pagina > .correcto {
    text-align: center;
    height: 200px;
}

#Servicios > .pagina > div:not(.grande) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
}

#Servicios > .pagina > div > div {
    background: #d4d4d4;
}

#Servicios > .pagina > div > div > label {
    width: 100%;
    display: inline-block;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #858585;
    transition: width 1s;
    padding-left: 5px;
    font-weight: bold;
}

#Servicios > .pagina > div > div > label.activo {
    width: 50%;
}

#Servicios > .pagina > div > div > div {
    position: relative;
    top: -50px;
    left: 50%;
    width: 50%;
    height: 50px;
    background: #d4d4d4;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
    transition: transform 1s;
}
#Servicios > .pagina > div > div > div.activo  {
    --webkit-transform: translateX(0px);
    transform: translateX(0px);
}

#Servicios > .pagina > div > div > div > button {
    height: 48px;
    text-align: center;
    background: transparent;
    width: 50%;
    border: 2px solid;
    border-radius: 8px;
    color:var(--configuracion-color);
}

#Servicios > .pagina > form > .tablet-4 > div {
    margin: 5px;
    background: #d4d4d4;
    text-align: center;
    height: 35px;
    max-height: 35px;
    overflow: auto;
}

#Servicios > .pagina > form > .tablet-4 > div > label {
    color: #858585;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
}

#Servicios .icono-select {
    position: relative;
    left: 45%;
    top: -29px;
    pointer-events: none;
}


#Servicios > .pagina > form > .tablet-8 > div {
    text-align: center;
    margin: 5px;
    background: #e8e8e8;
    height: 35px;
}

#Servicios > .pagina > form > .tablet-8 > div > input {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#Servicios > .pagina > form > .tablet-8 > div > div {
    height: 35px;
}

#Servicios > .pagina > form > .tablet-8 > div > div > div > button {
    height: 35px;
    width: 100%;
}

#Servicios > .pagina > form > .tablet-8 > div > div > div.seleccionado {
    background:var(--configuracion-color);
    border-radius: 8px;
}

#Servicios > .pagina > form > .tablet-8 > div > div > input {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#Servicios > .botonera > button.siguiente {
    background:var(--configuracion-color);
}

/*#endregion */

/*#region Agendas */
.cabecera.agendas {
    background: var(--configuracion-color);
}

#Agendas > .lista > h4 {
    display: none;
}

#Agendas > .pagina > br {
    display: none;
}

#Agendas > .lista > button {
    width: 100%;
    background: #d4d4d4;
    color: #858585;
    font-weight: bold;
    height: 50px;
}

#Agendas .tipos_agendas {
    height: auto !important;
}

#Agendas > .pagina > div:not(.grande) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
}

#Agendas > .pagina > div > div.item {
    background: #d4d4d4;
}

#Agendas > .pagina > div > div > label {
    width: 100%;
    display: inline-block;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #858585;
    transition: width 1s;
    padding-left: 5px;
    font-weight: bold;
}

#Agendas > .pagina > div > div > label.activo {
    width: 50%;
}

#Agendas > .pagina > div > div > div {
    position: relative;
    top: -50px;
    left: 50%;
    width: 50%;
    height: 50px;
    background: #d4d4d4;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
    transition: transform 1s;
}

#Agendas > .pagina > div > div > div.activo {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}

#Agendas > .pagina > div > div > div > button {
    height: 48px;
    text-align: center;
    background: transparent;
    width: 50%;
    border: 2px solid;
    border-radius: 8px;
    color: var(--configuracion-color);
}

#Agendas > .pagina > form > .tablet-4 > div {
    margin: 5px;
    background: #d4d4d4;
    text-align: center;
}

#Agendas > .pagina > form > .tablet-4 > div > label {
    color: #858585;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
}

#Agendas > .pagina > form > .tablet-8 > div {
    text-align: center;
    margin: 5px;
    background: #e8e8e8;
}

#Agendas > .pagina > form > .tablet-8 > div > input  {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#Agendas > .pagina > form > .tablet-8 > div > p  {
    background-color: transparent;  
    text-align: center;
    height: 35px;
}

#Agendas > .pagina > form > .tablet-8 > div > textarea {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#Agendas > .botonera > button.siguiente {
    background: var(--configuracion-color);
}

#Agendas > div > div > div.opcion_activa {
    color: var(--configuracion-color);
}

#Agendas .dias_que_repite {
    display: inline-flex;
    height: 40px;
}

#Agendas .dias_que_repite > button {
    flex: 1 1 1px;
}

#Agendas .dias_que_repite > button.activo{
    background: var(--configuracion-color);
    color: white;
    font-weight: bold;
    border-radius: 5px;
}

#Agendas .repeticiones {
    text-align: center;
    width: 100%;
    height: 45px;
    align-items: center;
    display: inline-flex;
}

#Agendas .repeticiones > span {
    flex: 1;
}

@media only screen and (max-width: 600px) {
    
    #Agendas .tipos_agendas > .column {
        margin-top: 15px;
        margin-bottom: 15px;
    }
}

/*#endregion */

/*#region Directorio */
.cabecera.directorios {
    background: var(--configuracion-color);
}

#directorios > .lista > button {
    width: 100%;
    background: #d4d4d4;
    color: #858585;
    font-weight: bold;
    height: 50px;
}

#directorios > .pagina > .filtro {
    position: relative;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#directorios > .pagina > .filtro.activo {
    max-height: 150px;
}

#directorios > .pagina > .filtro > div{
    padding: 10px;
}

#directorios > .pagina > .filtro > div > div > input {
    background: transparent;
}

#directorios > .pagina > div:not(.grande) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
}

#directorios > .pagina > div > div.item {
    background: #d4d4d4;
}

#directorios > .pagina > div > div.item > label {
    width: 100%;
    display: inline-block;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #858585;
    transition: width 1s;
    padding-left: 5px;
    font-weight: bold;
}

#directorios > .pagina > div > div > label.activo {
    width: 50%;
}

#directorios > .pagina > div > div.item > div {
    position: relative;
    top: -50px;
    left: 40%;
    width: 60%;
    height: 50px;
    background: #d4d4d4;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
    transition: transform 1s;
}

#directorios > .pagina > div > div > div.activo {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}

#directorios > .pagina > div > div > div > button {
    height: 48px;
    text-align: center;
    background: transparent;
    width: 33.3%;
    border: 2px solid;
    border-radius: 8px;
    color: var(--configuracion-color);
}

#directorios > .pagina > form > .tablet-4 > div {
    margin: 5px;
    background: #d4d4d4;
    text-align: center;
    height: 35px;
}

#directorios > .pagina > form > .tablet-4 > div > label {
    color: #858585;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
}

#directorios > .pagina > form > .tablet-8 > div {
    text-align: center;
    margin: 5px;
    background: #e8e8e8;
    height: 35px;
}

#directorios > .pagina > form > .tablet-8 > div > i {
    position: relative;
    top: -80%;
    left: 44%;
}

#directorios > .pagina > form > .tablet-8 > div > input {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#directorios > .pagina > form > .tablet-8 > div > select {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#directorios > .pagina > form > .tablet-8 > div > textarea {
    background-color: inherit;
}

#directorios > .botonera > .siguiente {
    background: var(--configuracion-color);
}

#directorios #telefono_del_directorio {
    width: 60%;
    float: right;
}

#directorios #codigo_pais {
    width: 39%;
    float: left;
    height: 35px;
    background: transparent;
}

/*#endregion */

/*#region configurar notificaciones */

.cabecera.configurar {
    background: var(--configuracion-color);
}

#ConfigurarSMS > .pagina > form > .tablet-4 > div {
    margin: 5px;
    background: #d4d4d4;
    text-align: center;
    max-height: 35px;
    overflow: hidden;
}

#ConfigurarSMS > .pagina > form > .tablet-4 > div > label {
    color: #858585;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
}

#ConfigurarSMS > .pagina > form > .tablet-8 > div {
    text-align: center;
    margin: 5px;
    background: #e8e8e8;
}

#ConfigurarSMS > .pagina > form > .tablet-8 > div > button {
    background-color: transparent;
    text-align: center;
    height: 35px;
    color: grey;
}

#ConfigurarSMS > .pagina > form > .tablet-8 > div > button.activo {
    color: var(--configuracion-color);
}
#ConfigurarSMS > .botonera > button {
    background: var(--configuracion-color);
}

#ConfigurarSMS > .pagina > form > .tablet-8 > div > div {
    height: 35px;
    padding-top: 9px;
}

#ConfigurarSMS .cabecera-notificacion {
    background: #d4d4d4 !important;
}

#ConfigurarSMS .cabecera-notificacion > div {
    color: #858585;
    font-weight: bold;
}

/*#endregion */

/*#region configurar_datos_turno */

.cabecera.configurar_datos_turno {
    background: var(--configuracion-color);
}

#configurar_datos_turno > .pagina > form > .tablet-4 > div {
    margin: 5px;
    background: #d4d4d4;
    text-align: center;
    height: 35px;
    max-height: 35px;
    overflow: auto;
}

#configurar_datos_turno > .pagina > form > .tablet-4 > div > label {
    color: #858585;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
}

#configurar_datos_turno > .pagina > form > .tablet-8 > div {
    text-align: center;
    margin: 5px;
    background: #e8e8e8;
}

#configurar_datos_turno > .pagina  > form > .tablet-8 > div.binario {
    padding: 10px;
}

#configurar_datos_turno > .pagina > form > .tablet-8 > div > span{
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#configurar_datos_turno > .botonera > button {
    background: var(--configuracion-color);
}

.contenedor_boton {
    width: 100%;
    height: 45px;
    display: grid;
    place-items: center;
}

.contenedor_boton > button {
    background: #b16c59;
    color: wheat;
    font-weight: bold;
    border-radius: 5px;
    width: 50%;
    height: inherit;
}

.editar_listado {
    width: 100%;
    height: 45px;
    display: grid;
    place-items: center;
}

.editar_listado > button {
    background: #b16c59;
    color: wheat;
    font-weight: bold;
    border-radius: 5px;
    width: 50%;
    height: inherit;
}

#configurar_datos_turno  > .pagina > form > .tablet-8 > div > input {
    background-color: transparent;
    text-align: center;
    height: 35px;   
}

#configurar_datos_turno  > .pagina > form > .tablet-8 > div > select {
    background-color: transparent;
    text-align: center;
    height: 35px;   
}

#configurar_datos_turno  > .pagina > form > .tablet-8 > .binario.botones {
    display: flex;
    justify-content: space-around;
    height: 35px;
}

#configurar_datos_turno  > .pagina > form > .contenedor-items {
    display: flex;
    margin-bottom: 10px;
}

#configurar_datos_turno  > .pagina > form > .contenedor-items > .orden {
    flex: 1;
}

#configurar_datos_turno  > .pagina > form > .contenedor-items > div > input {
    width: 95%;
    height: 35px;
    background: transparent;
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
}

#configurar_datos_turno  > .pagina > form > .contenedor-items > .eliminar {
    flex: 1;
    text-align: center;
}

#configurar_datos_turno  > .pagina > form > .contenedor-items > .eliminar > button {
    background: transparent;
    height:35px;
}

#configurar_datos_turno  > .pagina > form > .contenedor-items > .valor {
    flex: 5;
}

 /*#endregion */

/*#region buscar_turnos */

.cabecera.buscar_turnos {
    background: var(--buscador-turnos-color);
}

#buscar_turnos > .pagina > .filtro {
    position: relative;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#buscar_turnos > .pagina > .filtro.activo {
    max-height: 500px;
}

#buscar_turnos > .pagina > .filtro > div {
    padding: 10px;
}

#buscar_turnos > .pagina > .filtro > div > div > input {
    background: transparent;
}

#buscar_turnos > .pagina > .filtro > div > div > select {
    background: transparent;
    height: 48px;
}


#buscar_turnos .icono-select {
    position: relative;
    left: 93%;
    top: -38px;
    pointer-events: none;
}

#buscar_turnos .limpiar-elemento {
    position: absolute;
    top: 12px;
    left: 230px;
}


#buscar_turnos > .pagina > div:not(.grande) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
}

#buscar_turnos > .pagina > div > div.item {
    background: #d4d4d4;
}

#buscar_turnos > .pagina > div > div.item > label {
    width: 100%;
    display: inline-block;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #858585;
    transition: width 1s;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bold;
}

#buscar_turnos > .pagina > div > div > label.activo {
    width: 50%;
}

#buscar_turnos > .pagina > div > div.item > div {
    position: relative;
    top: -50px;
    left: 50%;
    width: 50%;
    height: 50px;
    background: #d4d4d4;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
    transition: transform 1s;
}

#buscar_turnos > .pagina > div > div > div.activo {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}

#buscar_turnos > .pagina > div > div > div > button:not(.calendario) {
    height: 48px;
    text-align: center;
    background: transparent;
    width: 50%;
    border: 2px solid;
    border-radius: 8px;
    color: var(--buscador-turnos-color);
}

@media only screen and (max-width: 600px){

    #buscar_turnos .limpiar-elemento {
        left: 90px;
    }
}


/*#endregion */

/*#region pagos realizados */
.cabecera.pagos {
    background: var(--control-color);
}

#pagos > .pagina > .filtro {
    position: relative;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#pagos > .pagina > .filtro.activo {
    max-height: 150px;
}

#pagos > .pagina > .filtro > div {
    padding: 10px;
}

#pagos > .pagina > .filtro > div {
    padding: 10px;
}

#pagos > .pagina > .filtro > div > div > input {
    background: transparent;
}

#pagos > .lista > button {
    width: 100%;
    background: #d4d4d4;
    color: #858585;
    font-weight: bold;
    height: 50px;
}

#pagos > .pagina > div:not(.grande) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
}

#pagos > .pagina > div > div.item {
    background: #d4d4d4;
}

#pagos > .pagina > div > div.item > label {
    width: 100%;
    display: inline-block;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #858585;
    transition: width 1s;
    padding-left: 5px;
    font-weight: bold;
}

#pagos > .pagina > form > .tablet-4 > div {
    margin: 5px;
    background: #d4d4d4;
    text-align: center;
}

#pagos > .pagina > form > .tablet-4 > div > label {
    color: #858585;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
}

#pagos > .pagina > form > .tablet-8 > div {
    text-align: center;
    margin: 5px;
    background: #e8e8e8;
    height: 35px;
}

#pagos .botonera > a {
    background: var(--control-color);
    padding: 15px;
    color: white;
    border-radius: 8px;
}

#pagos .limpiar-elemento {
    position: absolute;
    top: 12px;
    left: 230px;
}

@media only screen and (max-width: 600px){
    #pagos .limpiar-elemento {
        left: 90px;
    }
}

/*#endregion */

/*#region dashboard_partners */
    
.cabecera.dashboard {
    background: var(--control-color);
}

#dashboard .siguiente {
    background: var(--control-color);
}

.indicadores-principales > .column > .row {
    background: var(--control-color);
    border-radius: 5px;
    border: 1px solid black;
    padding: 20px;
    margin: 10px;
    color: white;
    cursor: pointer;
}

.indicadores-principales > .column.centrar-vertical {
    margin-top: 50px;
}

#dashboard .seleccionar-dia > div{
    text-align: center;
}

#dashboard .seleccionar-dia > div > button {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 8px;
    font-size: 18px;
    color: white;
    background: gray;
}

#dashboard .tarjeta > div.numero {
    font-size: xx-large;
}

#dashboard .tarjeta > div:not(.numero) {
    padding-top: 10px;
}


/*#endregion */

/*#region smss */

.cabecera.smss {
    background: var(--control-color);
}

#smss > .pagina > .filtro {
    position: relative;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#smss > .pagina > .filtro.activo {
    max-height: 260px;
}

#smss > .pagina > .filtro > div {
    padding: 10px;
}

#smss > .pagina > .filtro > div > div > input {
    background: transparent;
}

#smss .limpiar-elemento {
    top: 12px;
    left: 376px;
    position: absolute;
}

#smss > .pagina > div:not(.grande) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
}

#smss > .pagina > div > div.item {
    background: #d4d4d4;
}

#smss > .pagina > div > div.item > label {
    width: 100%;
    display: inline-block;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #858585;
    transition: width 1s;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bold;
}

#smss > .pagina > div > div.item > div {
    position: relative;
    top: -50px;
    left: 50%;
    width: 50%;
    height: 50px;
    background: #d4d4d4;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
    transition: transform 1s;
}

#smss > .pagina > div > div > div > button {
    height: 49px;
    text-align: center;
    background: var(--control-color);
    width: 33.3%;
    border: 1px solid;
    border-radius: 8px;
}

@media only screen and (max-width: 600px) {
    #smss .limpiar-elemento {
        left: 90px;
    }
}

/*#endregion */

/*#region listado de turnos */

    #formNuevoTurno > div > div > button {
        background-color: transparent;
    }

    #formNuevoTurno > .tablet-8 > div.binario {
        padding: 10px;
    }

    #Turnos input {
        background-color: transparent;
    }

    #Turnos textarea {
        background-color: transparent;   
    }

    .imagen-usuario-turno {
        width: 20%;
        border-radius: 50%;
    }

    .listado-turnos {
        height: Calc(100% - 65px);
        overflow: scroll;
    }

    .listado-turnos > div {
        height: 50px;
        margin: 4px;
    }

    .listado-turnos > div > button {
        height: -webkit-fill-available;
        height: -moz-available;
        height: fill-available;
        height: 100%;
    }

    .turno {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 5px;
    }

    .tag {
        border: 1px solid;
        padding: 2px;
        border-radius: 5px;
        margin: 1px;
        background: green;
        color: white;
    }

    @media only screen and (max-width : 600px) {
        .listado-turnos {
            height: Calc(100% - 120px);
        }
    }

/*#endregion*/

/*#region presentacion */
#TurnosUsuario >.pagina-turnos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: Calc(100% - 52px);
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
    opacity: 0;
    transition: transform 1s cubic-bezier(0, 0.79, 0.11, 0.99), opacity 1s;
    overflow: auto;
    padding-right: 5px;
    padding-left: 5px;
    z-index: 4;
}

#TurnosUsuario >.pagina-turnos.activa {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
}

#TurnosUsuario > .pagina-turnos:not(.presentacion) {
    padding: 50px;
    overflow: auto;
}

#TurnosUsuario > .presentacion {
    padding-left: 50px;
    padding-right: 50px;
}

#TurnosUsuario > .presentacion > .banner {
    padding: 10px;
    overflow: hidden;
}

#TurnosUsuario > .presentacion > .titulo {
    margin: 10px;
    background: #e6e7e9;
    height: 68px;
    color: #7e7e7e;
    text-align: right;
    padding: 5px;
    font-size: 45px;
    padding-right: 10px;
    font-weight: bold;
}

#TurnosUsuario > .presentacion > .contenedor-imagen {
    width: 25%;
    top: 95px;
    position: absolute;
    left: 80px;
}

#TurnosUsuario > .presentacion > .contenedor-imagen > img {
    width: 100%;
    border-radius: 50%;
    border: 1px solid;
}
#TurnosUsuario > .botonera > button.siguiente {
    background: var(--ver-partners-color);
}
#TurnosUsuario > .botonera > button.anterior {
    background: #858585;
}

#TurnosUsuario .contenedor-de-icono {
    position: absolute;
    right: 10px;
    top: calc(50% - 10px);
}
#TurnosUsuario .cargando {
    position: relative;
    height: 20px;
    width: 20px;
    display: inline-block;
    animation: girar 5.4s infinite;
}

#TurnosUsuario .cargando::after, .cargando::before {
    content: "";
    background: transparent;
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-width: 2px;
    border-color: #333 #333 transparent transparent;
    border-style: solid;
    border-radius: 20px;
    box-sizing: border-box;
    top: 0;
    left: 0;
    animation: girar 0.7s ease-in-out infinite;
}

#TurnosUsuario .cargando.loader::after {
    animation: girar 0.7s ease-in-out 0.1s infinite;
    background: transparent;
}

#TurnosUsuario > .presentacion > .descripcion {
    margin-top: 10px;
    padding-left: 150px;
    padding-right: 150px;
    text-align: center;
    font-size: 15px;
}

#TurnosUsuario > .presentacion > .text-center > button {
    background: #cc754a;
    color: white;
}

#TurnosUsuario .boton_obtener_turno {
    text-align: center;
}

#TurnosUsuario .boton_obtener_turno > button {
    background: var(--ver-partners-color);
    color: white;
    margin-top: 50px;
    border-radius: 8px;
}

#TurnosUsuario > .pagina-turnos > .botonera > a {
    color: dimgray;
}

#TurnosUsuario > .pagina-turnos > .botonera > a > svg {
    height: 35px;
    width: 35px;
}

#TurnosUsuario .descripcion-turno {
    top: 1px;
    overflow: hidden;
    z-index: 1;
    background: #e6e7e9;
    color: black;
    padding: 15px;
    text-align: center;
}

#TurnosUsuario .horarios-disponibles {
    text-align: center;
}


#TurnosUsuario > .pagina-turnos > form > .tablet-4 > div {
    margin: 5px;
    background: #d4d4d4;
    text-align: center;
}

#TurnosUsuario > .pagina-turnos > form > .tablet-4 > div > label {
    color: #858585;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
}

#TurnosUsuario > .pagina-turnos > form > .tablet-8 > div {
    text-align: center;
    margin: 5px;
    background: #e8e8e8;
}

#TurnosUsuario > .pagina-turnos > form > .tablet-8 > div > input {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

@media only screen and (max-width : 600px) {
    #TurnosUsuario > .presentacion {
        padding-left: 0px;
        padding-right: 0px;
    }

    #TurnosUsuario > .presentacion > .contenedor-imagen {
        top: 75px;
        left: 20px;
    }

    #TurnosUsuario > .presentacion > .titulo {
        margin-top: 0px;
        margin-left: 10px;
        margin-right: 10px;
        height: 45px;
        padding: 4px;
        font-size: 30px;
    }

    #TurnosUsuario > .presentacion > .descripcion {
        padding-left: 15px;
        padding-right: 15px;
    }

    #TurnosUsuario > .pagina-turnos {
        margin-top: 52px;
        height: Calc(100% - 104px);
    }

    #TurnosUsuario > .pagina-turnos:not(.presentacion) {
        padding: 15px;
    }

    #TurnosUsuario .banner > img {
        width: 100%;
        min-height: 110px;
    }
    #TurnosUsuario #interes_telefono {
        width: 60%;
        float: right;
    }
    #TurnosUsuario #interes_codigo_pais {
        width: 39%;
        float: left;
        height: 35px;
        background: transparent;
    }
}

.contenedor-boton {
    height: 50px;
    margin: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 5px;
    background: #c9c9c9;
}

.contenedor-boton > button {
    height: -webkit-fill-available;
    height: -moz-available;
    height: fill-available;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;  
    background: transparent;  
}

/*#endregion*/

/*#region configurar */
    
.cabecera.configurar {
    background: var(--configuracion-color);
}

#configurar .siguiente {
    background: var(--configuracion-color);
}

#configurar > .pagina > h1 {
    padding-top: 45px;
}

#configurar > .pagina > h1.icono {
    font-size: 8em;
}

#configurar > .pagina > table {
    width: 100%;
    height: 100%;
}

#configurar > .pagina > table > tbody > tr.activo {
    background: #e8e8e8;
}

#configurar > .pagina > table > tbody > tr:not(.activo) {
    background: #ffbcbc;
    text-decoration: line-through;
}

#configurar > .pagina > table > tbody > tr > td > input {
    background: transparent;
    height: auto;
    padding: 0px;
}

#configurar > .pagina > form > div.tablet-4 > div {
    margin: 5px;
    background: #d4d4d4;
    text-align: center;
}

#configurar > .pagina > form > div.tablet-4 > div > label {
    color: #858585;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
}

#configurar > .pagina > form > div.tablet-8 > div{
    margin: 5px;
    background: #e8e8e8;
}

#configurar > .pagina > form > div.tablet-8 > div > input {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#configurar > .pagina > form > div.tablet-8 > div > textarea {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#configurar > .pagina > button {
    width: 100%;
    background: #d4d4d4;
    color: #858585;
    font-weight: bold;
    height: 50px;
}

#configurar > .pagina > button.soy {
    width: 50%;
    background: transparent;
    padding-top: 4em;
}

#configurar > .pagina > button.soy > .emoji {
    font-size: 5em;
}

#configurar > .pagina > div:not(.grande) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
}

#configurar > .pagina > div > div:not(.sin_fondo) {
    background: #d4d4d4;
}

#configurar > .pagina > div > div > label {
    width: 100%;
    display: inline-block;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #858585;
    transition: width 1s;
    padding-left: 5px;
    font-weight: bold;
}

#configurar > .pagina > div > div > div {
    position: relative;
    top: -50px;
    left: 50%;
    width: 50%;
    height: 50px;
    background: #d4d4d4;
    -webkit-transform: translateX(150%);
    transform: translateX(150%);
    transition: transform 1s;
}

#configurar > .pagina > div > div > div > button {
    height: 49px;
    text-align: center;
    background: transparent;
    width: 50%;
    border: 1px solid;
    border-radius: 8px;
    color: var(--configuracion-color);
}

#configurar .tipos_agendas {
    height: auto !important;
    margin-top: 40px;
}

#configurar > .pagina > form > .tablet-8 > div > div > div.seleccionado {
    background: var(--configuracion-color);
    border-radius: 8px;
}

#configurar > .pagina > form > .tablet-8 > div > div {
    height: 35px;
}

#configurar > .pagina > form > .tablet-8 > div > div > div > button {
    height: 35px;
    width: 100%;
}

#configurar > .pagina > form > .tablet-8 > div > div > input {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#configurar > .pagina > .correcto {
    text-align: center;
    height: 200px;
}

.pagina.correcto {
    text-align: center;
    height: 200px;
}

#configurar > div > div > div.opcion_activa {
    color: var(--configuracion-color);
}

#configurar > .pagina > div > div > label.activo {
    width: 50%;
}
#configurar > .pagina > div > div > div.activo {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}

#configurar > div > div > div > input {
    background: transparent;
}

.pagina.llave {
    text-align: center;
}

#configurar > .llave > div > div > input {
    font-size: xxx-large;
    text-align: center;
}

#configurar .aviso {
    margin-left: 40px;
    margin-right: 40px;
    border: 2px solid yellow;
    padding: 5px;
    border-radius: 15px;
    background: lightyellow;
    font-size: 18px;
    position: relative;
    top: -15%;
}

#configurar .servicio > form{
    height: inherit;
}

.preguntas-uso-turnalo {
    text-align: center;
}

.preguntas-uso-turnalo > .column{
    padding: 10px;
}

.preguntas-uso-turnalo > .column > button {
    height: 60px;
    width: 60%;
    border-radius: 15px;
    color: white;
    font-size: x-large;
}

.preguntas-uso-turnalo > .column > button.si {
    background-color: var(--naranja-principal-color);
}

.preguntas-uso-turnalo > .column > button.no {
    background-color: rgba(62, 64, 149, 1);
}

#configurar #telefono {
    width: 60%;
}

#configurar #codigo_pais {
    width: 39%;
    float: left;
    height: 35px;
    background: transparent;
}

/*#endregion */

/*#region turno-no-disponible */
    
.cabecera.turno-no-disponible {
    background: var(--mi-cuenta-color);
}

#turno-no-disponible .siguiente {
    background: var(--mi-cuenta-color);
}

/*#endregion */

/*#region compartir perfil */
    
.cabecera.compartir-agenda {
    background: rgba(219, 124, 66, 1);
}

#seccionCompartir > .pagina > form > .tablet-8 > div {
    margin: 5px;
    background: #d4d4d4;
    text-align: center;
}

#seccionCompartir > .pagina > form > .tablet-8 > div > label {
    color: #858585;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
}

#seccionCompartir > .pagina > form > .tablet-4 > div {
    text-align: center;
    margin: 5px;
    background: #e8e8e8;
}

#seccionCompartir > .pagina > form > .tablet-4 > div > button {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#seccionCompartir .wpp {
    background: #2ab200 !important;
}

#seccionCompartir .fb {
    background: #3b5998 !important;
}

/*#endregion */

/*#region terminos y condiciones */
#terminosycondiciones {
    padding: 40px;
}

#terminosycondiciones > h2 {
    color: grey;
}

#terminosycondiciones > h3 {
    color: darkblue;
    line-height: 40px;;
}

#terminosycondiciones > h4 {
    color: black;
    line-height: 30px;
}

#calendario_especial > tbody > tr > td > button.marcado {
    background: #ab6567;
    margin: 3px;
    border-radius: 5px;
    border: 1px solid;
    color: white;
}
/*#endregion */

/*#region cancelar turno*/
.cabecera.cancelar-turno {
    background: var(--naranja-principal-color);
}

.pregunta_cancelar_turno.siguiente {
    background: var(--naranja-principal-color);
}

.btn.volver {
    background: var(--naranja-principal-color);
}
/*#endregion */

/*#region eliminar_cuenta*/
.cabecera.eliminar_cuenta {
    background: var(--mi-cuenta-color);
}

#eliminar_cuenta .siguiente {
    background: var(--mi-cuenta-color);
}
/*#endregion */

/*#region correos bloqueados */

#correos_bloqueados > .pagina > .filtro {
    position: relative;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#correos_bloqueados > .pagina > .filtro.activo {
    max-height: 233px;
}

#correos_bloqueados > .lista > button {
    width: 100%;
    background: #d4d4d4;
    color: #858585;
    font-weight: bold;
    height: 50px;
}

#correos_bloqueados > .pagina > div:not(.grande) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
}

#correos_bloqueados > .pagina > div > div.item {
    background: #d4d4d4;
}

#correos_bloqueados .siguiente {
    background: var(--configuracion-color);
}
/*#endregion */

.mercadopago-button {
    padding: 7px !important;
    width: 90px;
    font-weight: 500;
    background: #845b71 !important;
    text-transform: uppercase;
    border-radius: 8px !important;
    float: right;
}

/*#region confirmar_turno */

.cabecera.confirmar_turno {
    background: var(--configuracion-color);
}

#confirmar > .pagina > form > .tablet-4 > div {
    margin: 5px;
    background: #d4d4d4;
    text-align: center;
    height: 35px;
    max-height: 35px;
    overflow: auto;
}

#confirmar > .pagina > form > .tablet-4 > div > label {
    color: #858585;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
}

#confirmar > .pagina > form > .tablet-4 > div > label > span {
    float: right;
    margin-right: 5px;
}

#confirmar > .pagina > form > .tablet-8 > div {
    text-align: center;
    margin: 5px;
    background: #e8e8e8;
    height: 35px;
}

#confirmar > .pagina  > form > .tablet-8 > div > input {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#confirmar > .pagina  > form > .tablet-8 > div > select {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#confirmar > .pagina > form > .tablet-8 > div > span{
    background-color: transparent;
    text-align: center;
    height: 35px;
}

#confirmar > .pagina > h1{
    text-align: center;
}

#confirmar > .botonera > button {
    background: var(--configuracion-color);
}

#confirmar #telefono {
    width: 60%;
    float: right;
}

#confirmar #codigo_pais {
    width: 39%;
    float: left;
    height: 35px;
    background: transparent;
}
/*#endregion */

/*#region ver mis turnos */
.cabecera.mis-turnos {
    background: var(--configuracion-color);
}
#misTurnos > .botonera > button {
    background: var(--configuracion-color);
}

#misTurnos > .pagina > .grande > .padded-full > ul > li {
    overflow: hidden;
    height: 1.2em;
    line-height: 1.2em;
    border: 1px dotted black;
    margin: 1em;
}
#misTurnos > .pagina > .grande > .padded-full > ul > li::before {
    content: '';
    display: inline-block;
}

#misTurnos > .pagina > .grande > .padded-full > ul > li > span {
    display: inline-block;
    white-space: nowrap;
}

#misTurnos .dias-que-faltan {
    width: 75px;
}

.noventa {
    height: 90%;
    overflow: auto;
}

/*#endregion */


/*#region confirmar_turno */

.pagina > form > .tablet-8 > div > input, select {
    background-color: transparent;
    text-align: center;
    height: 35px;
}

.pagina > form > .tablet-4 > div {
    margin: 5px;
    background: #d4d4d4;
    text-align: center;
}

.pagina > form > .tablet-4 > div > label {
    color: #858585;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
}

.pagina > form > .tablet-8 > div {
    text-align: center;
    margin: 5px;
    background: #e8e8e8;
}

#pagos_admin > .pagina > button {
    width: 100%;
}

#pagos_admin > .botonera > button.siguiente {
    background-color: var(--ver-partners-color);
}

/*#endregion */

a >.icono-notificacion {
    background: red;
    border-radius: 50%;
    height: 60% !important;
    width: 60% !important;
    margin: 10px;
    font-size: smaller;
}

a > .icono-notificacion > span {
    position: relative;
    top: -12px;
}

.hidden {
    visibility: hidden;
}

.notificaciones > a.notif {
    left: 0px;
}