/* ---------------------------------- En plantilla ---------------------------------- */

.boton-usuario {
    max-width: 350px;
    height: 30px;
    vertical-align: middle;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    text-align: center;
    vertical-align: middle;
    font-family: 'MerriweatherSans-Bold';
    color: #092834;
    border: #FF026A solid 2px;
    cursor: pointer;
    text-decoration: none;
    /* font-size: 12px; */
    font-size: 13.8px;
}

.boton-usuario:hover {
    background-color: #FF026A;
    color: #fff;
    /* font-size: 12px; */
    font-size: 13.8px;
}

.boton-usuario-activo {
    background-color: #FF026A;
    color: #fff;
    max-width: 350px;
    height: 30px;
    font-family: 'MerriweatherSans-Bold';
    vertical-align: middle;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    /* font-size: 12px; */
    font-size: 13.8px;
}

/* .boton-usuario-activo:hover {
    color: #092834;
} */

a.boton-usuario-activo:hover{
    color: #ffffff;
}

.boton-texto-activo {
    text-align: center;
    vertical-align: middle;
    font-family: 'MerriweatherSans-Bold';
    color: #FFF;
    /* font-size: 12px; */
    font-size: 13.8px;
}

@media (min-width: 768px) and (max-width: 991.9px) {

    .boton-usuario,
    .boton-usuario-activo {
        max-width: 350px;
    }
}

@media (min-width: 992px) {

    .boton-usuario,
    .boton-usuario-activo {
        max-width: 200px;
    }


    .boton-usuario {
        font-size: 13.8px;
    }
    
    .boton-usuario:hover {
        font-size: 13.8px;  
    }

    .boton-usuario-activo {
        font-size: 13.8px;
    }
    
    .boton-texto-activo {
        font-size: 13.8px;
    }

}


/* ---------------------------------- En Mi Perfil ----------------------------------  */


.perfil-foto {
    width: 85vw;
    height: auto;
}

.perfil-datos {
    display: inline;
}

.altura-h6 {
    /* width: 145px; */
    line-height: 1.7;
}

.editar {
    width: 23px;
    height: 23px;
    cursor: pointer;
    background-image: url(/work/models/memorica/recursos/img/miperfil/editar.svg);
    background-repeat: no-repeat;
    margin-bottom: 5px;
    justify-items: end;
}

.editar:hover {
    background-image: url(/work/models/memorica/recursos/img/miperfil/editar-hover.svg);
    background-repeat: no-repeat;
    cursor: pointer;
}

h6,
.subir {
    font-family: 'MerriweatherSans-bold';
    color: #092834;
    font-size: 13px;
}

.my-underline {
    border-bottom: 0.6pt solid #092834;
    position: relative;
    bottom: 20px;
}


.captura {
    border-radius: 100px;
    width: 100%;
    font-family: 'MerriweatherSans-Regular';
    color: #092834;
    font-size: 14px;
}

.cameo-card {
    border: 7px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 11px 15px -4px rgba(0, 0, 0, 0.4);
    width: 100%;
    height: auto;

}

.cameo {
    width: 100%;
    height: auto;
}

.modal-header {
    border-bottom: 0px solid #fff;
}

.modal-footer {
    border-top: 0px solid #ffffff;
}

.boton-modal-aceptar,
.boton-modal-cancelar {
    max-width: 350px;
    height: 30px;
    vertical-align: middle;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    text-align: center;
    vertical-align: middle;
    font-family: 'MerriweatherSans-Bold';
    color: #092834;
    border: #FF026A solid 2px;
    cursor: pointer;
    text-decoration: none;
    /* font-size: 12px; */
    font-size: 13.8px;
}

.boton-modal-cancelar {
    border: #347B98 solid 2px;
}

.boton-modal-aceptar:hover {
    background-color: #FF026A;
    color: #fff;
}

.boton-modal-cancelar:hover {
    background-color: #347B98;
    color: #fff;
}

.input-group {
    width: 100%;
    margin-top: -10px;
}

/* button {
            -webkit-appearance: button;
        } */

button:focus {
    /* outline: 1px dotted; */
    /* outline: 5px auto -webkit-focus-ring-color */
    outline: none;
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: none;
}

.calendario-ios {
    -webkit-min-logical-width: calc(100% - 16px);
}

.custom-file-label {
    border-radius: 0% 100% 100% 0%;
}

.custom-file-input:lang(en)~.custom-file-label::after {
    content: url(/work/models/memorica/recursos/img/miperfil/lupita-blanca1920.png);

}


.custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + .75rem);
    padding: .375rem .75rem;
    line-height: 1.5;
    color: #979797;
    content: url(/work/models/memorica/recursos/img/miperfil/lupita-blanca1920.png);
    background-color: #979797;
    border-left: inherit;
    border-radius: 0px 100px 100px 0px;
    /* border-radius: 0 .25rem .25rem 0 */
}

.modal-content {
    border-radius: 0px;
}

.modal-body h5 {
    text-align: left;
}

.digitos {
    z-index: 10;
    position: absolute;
    right: 35px;
    line-height: 1.6rem;
}


@media (max-width: 575.9px) {
    .modal .medianin {
        top: 0vh;
    }
}


@media (min-width: 576px) and (max-width: 767.9px) {
    .modal .medianin {
        top: 4vh;
    }
}

@media (min-width: 576px) {
    .digitos {
        z-index: 10;
        position: absolute;
        right: 74px;
    }
}

.modal .corto {
    top: 15vh;
}



.modal .largo {
    top: 5vh;
}

@media (min-width: 768px) {
    .modal {
        top: 0;
    }

    .modal .largo {
        top: 1vh;
    }

    .modal .medianin {
        top: 15vh;
    }

    .modal .corto {
        top: 20vh;
    }
}

@media (max-width: 355px) {
    .wipeout {
        color: #fff;
    }
}

@media (min-width: 400px) {

    .boton-modal-aceptar,
    .boton-modal-cancelar {
        max-width: 200px;
    }
}

@media (min-width: 450px) {
    .perfil-foto {
        width: 284px;
        height: 284px;
    }
}

/* ---------------------------------- En Favoritos  ---------------------------------- */

.h6-cards {
    text-align: center;
    padding-top: 10px;
}

.imagen-superior-favs {
    min-height: 130px;
    min-width: 100%;
    background-color: #fff;
    margin-top: -0.5px;
}

.card-titulo-favs {
    min-height: 70px;
    max-height: 70px;
    overflow: hidden;
    z-index: 1;
}

.pleca-centro {
    width: 45px;
    height: 4px;
    display: flex;
    justify-content: center;
}

.card-img-overlay {
    padding: 0rem;
}

.cls-1,
.icon-color {
    fill: #347b98;
}

.trash-size {
    max-width: 40px;
    max-height: 40px;
}

.cls-1:hover,
.icon-color:hover {
    fill: #092834
}



@media (min-width: 992px) {
    .card-titulo-favs {
        min-height: 60px;
        max-height: 60px;
        overflow: hidden;
        z-index: 1;
    }
}

/* ---------------------------------- En Colecciones menú  ---------------------------------- */


.paginadore,
.paginase {
    justify-content: center;
}

@media (min-width: 768px) {
    .paginadore {
        justify-content: flex-start;
    }

    .paginase {
        justify-content: flex-end;
    }
}

.coleccion {
    display: flex;
    font-family: 'MerriweatherSans-Bold';
    font-size: 12px;
    color: #092834;
    min-height: 20px;
    max-width: 130px;
    justify-content: center;
    align-items: center;
    z-index: 10;
    position: relative;
    bottom: 40px;
}

.privada {
    background-color: #FF026A;
}


.trash-size {
    max-width: 40px;
    max-height: 40px;
}

/* Deben eliminarse las clases 
.st0 
.st1 
porque son usadas en buscador avanzado */

.icono_objetodigital {
    position: relative;
    /* top: 6px; */
    top: -2px;
    display: inline-block;
    z-index: 14;
    right: 0px;
}

.label_objeto {
    /* background-color: #092834; */
    /* width: 50px; */
    height: 50px;
    position: absolute;
    /* right: 0; */
    z-index: 13;
    top: 0px;

}

/* @media (min-width: 1200px) {
    .icono_objetodigital {
        top: 6px;          
        right: 0px;
    }

    .label_objeto {
        right: 0;
        top: 0px;
        left: 229px;
    } 

    } */

  
/* ---------------------------------- En Botones para editar colecciones  ---------------------------------- */

.boton-edicion {
    max-width: 265px;
    height: 30px;
    vertical-align: middle;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    text-align: center;
    vertical-align: middle;
    font-family: 'MerriweatherSans-Bold';
    color: #fff;
    /* border: #FF026A solid 2px; */
    background-color: #347B98;
    cursor: pointer;
    text-decoration: none;
    font-size: 12px;
}

.boton-edicion:hover {
    background-color: #092834;
    color: #fff;
}

.boton-edicion-activo {
    background-color: #092834;
    color: #fff;
    max-width: 250px;
    height: 30px;
    font-family: 'MerriweatherSans-Bold';
    vertical-align: middle;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.boton-edicion-texto-activo {
    text-align: center;
    vertical-align: middle;
    font-family: 'MerriweatherSans-Bold';
    color: #FFF;
    font-size: 12px;
}

.alerta-portada {
    background-color: #FF026A;
    text-decoration-color: #FFF;
    color: #FFF;
    max-width: 350px;
    height: 50px;
    vertical-align: middle;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    font-family: 'MerriweatherSans-Bold';
}

.alerta-texto {
    color: #FF026A;
    font-family: 'MerriweatherSans-Bold';
}

@media (min-width: 576px) and (max-width: 991.9px) {

    .boton-edicion,
    .boton-edicion-activo {
        max-width: 150px;
    }
}

@media (min-width: 992px) {

    .boton-edicion,
    .boton-edicion-activo {
        max-width: 150px;
    }
}



/* Clases de la librería Skin modificadas: */
.form-signin input[type="text"] {
    margin-bottom: 1rem;
    text-align: start;
}

.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;

}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .10rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #092834;
    border-radius: 1.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-signin button:hover {
    border: 2px solid rgb(207, 206, 207);
    color: #FFF;
    background-color: rgb(207, 206, 207);
}



/* Clases que reescriben la hoja de estilo skin.min.css de la librería TinyMCE */
.tox .tox-toolbar__group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0;
    padding: 0 4px 0 4px;
    border-bottom: 1px solid #092834;
}

.tox-tinymce {
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: "Lato", "Helvetica Neue", sans-serif;
    overflow: hidden;
    position: relative;
    visibility: inherit !important;
}

.tox-editor-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.tox .tox-tbtn {
    align-items: center;
    background: 0 0;
    border: 0;
    border-radius: 3px;
    box-shadow: none;
    color: #222f3e;
    display: flex;
    flex: 0 0 auto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    height: 34px;
    justify-content: center;
    margin: 2px 0 3px 0;
    outline: 0;
    overflow: hidden;
    padding: 0;
    text-transform: normal;
    width: 34px;
}

.tox .tox-tbtn--disabled,
.tox .tox-tbtn--disabled:hover,
.tox .tox-tbtn:disabled,
.tox .tox-tbtn:disabled:hover {
    background: 0 0;
    border: 0;
    box-shadow: none;
    color: rgba(34, 47, 62, .5);
    cursor: not-allowed;
}

.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff;
    background-color: rgb(255, 255, 255);
    background-color: #fff;
    border-top: 1px solid #ccc;
    display: flex;
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-shrink: 0;
    flex-wrap: wrap;
    margin-bottom: -1px;
    padding: 0 0;
}



.tox .tox-anchorbar {
    display: flex;
    flex: 0 0 auto;
}

.tox .tox-sidebar-wrap {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    min-height: 0;
}

.tox .tox-edit-area__iframe {
    background-color: #fff;
    border: 0;
    box-sizing: border-box;
    flex: 1;
    -ms-flex-preferred-size: auto;
    height: 100%;
    position: absolute;
    width: 100%;
}

.tox :not(svg) {
    box-sizing: inherit;
    color: inherit;
    cursor: inherit;
    direction: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    -webkit-tap-highlight-color: inherit;
    text-align: inherit;
    text-decoration: inherit;
    text-shadow: inherit;
    text-transform: inherit;
    vertical-align: inherit;
    white-space: inherit;
}



/* ---------------------------------- En Editar Colecciones  ---------------------------------- */
/* Todas las clases de "Editar colecciones" están en el style.css o en las secciones de aqui arriba */



/* -------------------- En JSPs para agregar íconos en Temas y Recursos  ---------------------- */

[data-tooltip] {
    --arrow-size: 5px;
    position: relative;
    z-index: 10;
}

/* Positioning and visibility settings of the tooltip */
[data-tooltip]:before,
[data-tooltip]:after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    /* left: 50%;  ESTO SERÏA PARA EL GLOBITO JUSTO A LA MITAD POR ARRIBA*/
    left: -80%;
    bottom: calc(100% + var(--arrow-size));
    pointer-events: none;
    transition: 0.2s;
    will-change: transform;
}

/* The actual tooltip with a dynamic width */
[data-tooltip]:before {
    content: attr(data-tooltip);
    padding: 10px 18px;
    min-width: 50px;
    max-width: 300px;
    width: max-content;
    width: -moz-max-content;
    border-radius: 6px;
    font-size: 14px;
    background-color: rgba(59, 72, 80, 0.9);
    background-image: linear-gradient(30deg,
            rgba(59, 72, 80, 0.44),
            rgba(59, 68, 75, 0.44),
            rgba(60, 82, 88, 0.44));
    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
    color: #fff;
    text-align: center;
    white-space: pre-wrap;
    transform: translate(-50%, calc(0px - var(--arrow-size))) scale(0.5);
    
    
}

/* Tooltip arrow */
[data-tooltip]:after {
    content: '';
    border-style: solid;
    border-width: var(--arrow-size) var(--arrow-size) 0px var(--arrow-size);
    /* CSS triangle */
    border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
    transition-duration: 0s;
    /* If the mouse leaves the element, 
                                the transition effects for the 
                                tooltip arrow are "turned off" */
    transform-origin: top;
    /* Orientation setting for the
                                slide-down effect */
    transform: translateX(-50%) scaleY(0);
    
    
}

/* Tooltip becomes visible at hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1;
}

/* Scales from 0.5 to 1 -> grow effect */
[data-tooltip]:hover:before {
    transition-delay: 0.3s;
    transform: translate(-50%, calc(0px - var(--arrow-size))) scale(1);
}

/* 
    Arrow slide down effect only on mouseenter (NOT on mouseleave)
  */
[data-tooltip]:hover:after {
    transition-delay: 0.5s;
    /* Starting after the grow effect */
    transition-duration: 0.2s;
    /* transform: translateX(-50%) scaleY(1); ESTO SEÏA PARA LA FLECHA JUSTO A LA MITAD POR ARRIBA*/
    transform: translateX(300%) scaleY(1);
}

/*
    That's it for the basic tooltip.
  
    If you want some adjustability
    here are some orientation settings you can use:
  */

/* LEFT */
/* Tooltip + arrow */
[data-tooltip-location="left"]:before,
[data-tooltip-location="left"]:after {
    left: auto;
    right: calc(100% + var(--arrow-size));
    bottom: 50%;
}

/* Tooltip */
[data-tooltip-location="left"]:before {
    transform: translate(calc(0px - var(--arrow-size)), 50%) scale(0.5);
}

[data-tooltip-location="left"]:hover:before {
    transform: translate(calc(0px - var(--arrow-size)), 50%) scale(1);
}

/* Arrow */
[data-tooltip-location="left"]:after {
    border-width: var(--arrow-size) 0px var(--arrow-size) var(--arrow-size);
    border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
    transform-origin: left;
    transform: translateY(50%) scaleX(0);
}

[data-tooltip-location="left"]:hover:after {
    transform: translateY(50%) scaleX(1);
}



/* RIGHT */
[data-tooltip-location="right"]:before,
[data-tooltip-location="right"]:after {
    left: calc(100% + var(--arrow-size));
    bottom: 50%;
}

[data-tooltip-location="right"]:before {
    transform: translate(var(--arrow-size), 50%) scale(0.5);
}

[data-tooltip-location="right"]:hover:before {
    transform: translate(var(--arrow-size), 50%) scale(1);
}

[data-tooltip-location="right"]:after {
    border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0px;
    border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;
    transform-origin: right;
    transform: translateY(50%) scaleX(0);
}

[data-tooltip-location="right"]:hover:after {
    transform: translateY(50%) scaleX(1);
}



/* BOTTOM */
[data-tooltip-location="bottom"]:before,
[data-tooltip-location="bottom"]:after {
    top: calc(100% + var(--arrow-size));
    bottom: auto;
}

[data-tooltip-location="bottom"]:before {
    transform: translate(-50%, var(--arrow-size)) scale(0.5);
}

[data-tooltip-location="bottom"]:hover:before {
    transform: translate(-50%, var(--arrow-size)) scale(1);
}

[data-tooltip-location="bottom"]:after {
    border-width: 0px var(--arrow-size) var(--arrow-size) var(--arrow-size);
    border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;
    transform-origin: bottom;
}

/* ----------------- En modales desde cédula para agregar recurso a favoritos o colecciones -------- */
/* Excepto clase .medianin que está más arriba */
.icon-verde {
    /* fill: #a4a4a4; */
    fill: #B2D732;
}


.portada-coleccion {
    max-height: 281px;
    object-fit: cover;
    min-width: 100%;
}

.scroll-contenedor {
    display: block;
    width: 100%;
    /* max-height: 200px; */
    max-height: 177px;
    overflow-y: scroll;
    scroll-behavior: smooth;
    margin-left: 0;
    margin-right: 0;
}

.viewport-ergo {
    width: 26px;
    height: 25px;
}

@media (max-width: 575.9px) {
    .scroll-contenedor {
        /* text-align: center; */
    }
}


.control_indicator {
    position: absolute;
    top: 1px;
    left: 0;
    height: 15px;
    width: 15px;
    background: #e6e6e6;
    border: 1px solid #092834;
    border-radius: none;
}

@media (max-width: 279.9px) {
    .scroll-contenedor {
        margin-left: 0;
        margin-right: 0;
    }
}




/* Los siguientes media queries serían por si se quiere centrar la lista */
/* 
@media (min-width: 280px) and (max-width: 328.9px) {
    .scroll-contenedor {
        margin-left: calc(15%);
        margin-right: calc(15%);
    }
}

@media (min-width: 329px) and (max-width: 416.9px) {
    .scroll-contenedor {
        margin-left: calc(20%);
        margin-right: calc(20%);
    }
}

@media (min-width: 417px) and (max-width: 475.9px) {
    .scroll-contenedor {
        margin-left: calc(22%);
        margin-right: calc(25%);
    }
}

@media (min-width: 476px) and (max-width: 575.9px) {
    .scroll-contenedor {
        margin-left: calc(22%);
        margin-right: calc(30%);
    }
} */

@media (min-width: 576px) {
    .scroll-contenedor {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width: 992px) {
    .viewport-ergo {
        width: 22px;
        height: 21px;
    }
}


.control-radio .control_indicator {
    border-radius: 25%;
}