﻿/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* Global styles
-------------------------------------------------- */

/*.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: red;
}*/

@font-face {
    font-family: 'Gotham';
    src: url('../font/Gotham-Medium.eot');
    src: local('Gotham Medium'), local('Gotham-Medium'), url('../font/Gotham-Medium.ttf') format('truetype'), url('../font/Gotham-Medium.eot?#iefix') format('embedded-opentype'), url('../font/Gotham-Medium.woff2') format('woff2'), url('../font/Gotham-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    font-family: Gotham;
}

main#editor {
    display: flex;
    flex-wrap: nowrap;
    min-height: calc(100vh - 130px);
    overflow-x: auto;
    overflow-y: hidden;
}

#app,
form {
    width: 100%;
}

.sr-only {
    display:none;
}

input,
.form-control {
    border-radius: 50px;
}
textarea.form-control {
    border-radius: 20px !important;
}
textarea.form-control {
    padding: 10px 20px;
}
.fw-800 {
    font-weight: 800;
}

.bg-none {
    background-color: transparent !important;
}

.txt-purple {
    color: rgb(159, 38, 139);
}
.txt-white {
    color: #fff;
}
.txt-gray {
    color: #808080;
}
.txt-right {
    text-align: right !important;
}
/*/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}
.pd-0 {
    padding: 0 !important;
}

.pointer {
    cursor: pointer !important;
}

.btn-qualitas-blue {
    color: #fff;
    border-radius: 50px;
    margin-right: 20px;
    background-color: rgb(36,168,183);
    border: 2px solid rgb(168,255,249);
}
.btn-qualitas-blue:hover {
    color: #fff;
    border: 2px solid rgb(168,255,249);
    background-color: rgba(36,168,183,.8);
}
.btn-primary {
    background-color: rgb(36,168,183);
    border-color: rgb(36,168,183);
}
.btn-primary:hover {
    background-color: rgb(168,255,249);
    border-color: rgba(36,168,183,.8);
}
.btn-primary,
.btn-secondary {
    border-radius: 50px !important;
}
form .btn-secondary {
    width: 110px !important;
}

.outline-purple {
    color: rgb(157, 59, 129);
    border-color: rgb(157, 59, 129);
}

.outline-purple:hover {
    color: #fff;
    background-color: rgb(157, 59, 129);
    border-color: rgb(157, 59, 129);
}

.outline-blue {
    color: rgb(36,168,183);
    border-color: rgb(36,168,183);
}

.outline-blue:hover {
    color: #fff;
    background-color: rgb(36,168,183);
    border-color: rgb(36,168,183);
}


.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.icon-web {
    content: url('../img/Login/web_plataformaQ.png');
}

.icon-fb {
    content: url('../img/Login/facebook_plataformaQ.png');
}

.icon-linkedin {
    content: url('../img/Login/linkedin_plataformaQ.png');
}

.icon-instagram {
    content: url('../img/Login/instagram_plataformaQ.png');
}

.title {
    font-weight: 700;
    text-align: center;
    padding-bottom: 30px;
    color: rgb(159, 38, 139);
}

.icon-nombre {
    content: url('../img/icono_nombre.png');
}

.icon-categoria {
    content: url('../img/icono_categoria.png');
}

.icon-formato {
    content: url('../img/icono_formato.png');
}

.icon-para {
    content: url('../img/icono_para.png');
}

.icon-rebase {
    content: url('../img/icono_rebase.png');
}

.icon-dpi {
    content: url('../img/icono_dpi.png');
}

.icon-cmyk {
    content: url('../img/icono_CMYK_RGB.png');
}

.icon-kit {
    content: url('../img/icono_kit.png');
}

.icon-etiqueta {
    width: 30px !important;
    margin-right: 20px !important;
    margin-left: 10px;
    content: url('../img/icono_etiqueta.png');
}

.icon-imagen {
    height: 30px;
    width: 26px !important;
    margin-right: 19px !important;
    margin-left: 15px;
    content: url('../img/icono_imagen.png');
}

.icon-flt-user {
    width: 30px;
    content: url('../img/filter/icono_nombre.png');
}
.icon-flt-doc {
    width: 28px;
    content: url('../img/filter/nombre_documento.png');
}
.icon-flt-etiquetas {
    width: 35px;
    content: url('../img/filter/icono_etiqueta.png');
}

.icon-profile-nombre {
    content: url('../img/profile/icono_nombre_perfil.png');
}
.icon-profile-nombre-agente {
    content: url('../img/profile/icono_nombre_agente.png');
}
.icon-profile-nombre-oficina {
    content: url('../img/profile/icono_nombre_oficina.png');
}
.icon-profile-rfc {
    content: url('../img/profile/icono_rfc_perfil.png');
}
.icon-profile-puesto {
    content: url('../img/profile/icono_nombre_perfil.png');
}
.icon-profile-email {
    content: url('../img/profile/icono_correo_perfil.png');
}
.icon-profile-phone {
    content: url('../img/profile/icono_telefono_perfil.png');
}
.icon-profile-web {
    content: url('../img/profile/icono_web_perfil.png');
}
.icon-profile-location {
    content: url('../img/profile/icono_direccion_perfil.png');
}


.btn-info {
    color: #fff;
}
.btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.btn-info.focus, .btn-info:focus, .btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
    border: 1px solid rgb(254,99,235);
}

.btn-qualitas {
    color: #fff;
    margin-right: 20px;
    border: 1px solid rgb(255,99,234);
    background-color: rgb(159, 38, 139);

}

.btn-qualitas:hover {
    cursor: pointer;
    border: 1px solid rgb(255,99,234);
    background-color: rgb(170, 66, 155);
}

.pt-6 {
    padding-top: 6px;
}

.main-container {
    padding-top: 50px;
}



/* Qualitas table styles
-------------------------------------------------- */
.tbl-qualitas {
    padding: 40px 30px !important;
}

    .tbl-qualitas .tbl-filter {
        padding: 20px;
        /*background: linear-gradient(180deg, rgba(0,1,6,0.2329306722689075) 0%, rgba(213,207,208,0.31976540616246496) 100%);*/
        /* background-image: linear-gradient( 0deg, transparent 0%, #dcdbd9 100%);*/
        /*background-color: rgba(36,168,183,0.6);
    border: 2px solid rgb(168,255,249);*/
        /*background-color: #ccc;
        border: 2px solid #fff;
        border-radius: 20px;*/
        /*margin-bottom: 10px;*/

        background-color: rgb(183,184,183);
        border: 4px solid #fff;
        border-radius: 20px;
        margin-bottom: -4px;
        z-index: 999;
        margin-left: -18px;
        margin-right: -18px;
    }

.tbl-qualitas .tbl-filter label {
    /*color: rgb(159, 38, 139);*/
    color: #000;
    font-weight: bold;
    text-align: right;
}

.tbl-qualitas .tbl-filter .filter-icon {
    width: 50px;
}


.tbl-qualitas .tbl-title {
    text-align: center;
    color: rgb(159, 38, 139);
    padding-bottom: 30px;
}

.tbl-qualitas .table > :not(:first-child) {
    /* border-top: 2px solid rgb(159, 38, 139);*/
    /*border-top: 2px solid gray;*/
    border: none;
}
    .tbl-qualitas .b-table thead tr th {
        /* background-color: rgba(159, 38, 139,.8);*/
        background-color: rgba(36,168,183,.2);
    }


.tbl-qualitas .table.b-table > thead > tr div {
    /*color: rgb(98,98,98);*/
    color: #000;
}

.tbl-qualitas .btn-group > .btn:not(:first-child) {
    margin-left: 6px !important;
}

.tbl-qualitas td {
    color: #000 !important;
}

.tbl-qualitas tr {
    border-color: transparent !important;
}

.tbl-qualitas .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(223,223,223,.5);
}

    .tbl-qualitas .table > :not(caption) > * > * {
        /* background-color: rgba(255,255,255,.5);*/
        background-color: #f9f8f8;
    }

.tbl-qualitas .tbl-footer .page-item.active .page-link {
    background-color: rgba(159, 38, 139, .9);
    border-color: transparent;
}

/*.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: rgb(219,218,219);
    color: white;
}

.table-striped > tbody > tr:nth-child(even) > td,
.table-striped > tbody > tr:nth-child(even) > th {
    background-color: rgb(242,242,242);
    color: white;
}
*/

/* Login styles
-------------------------------------------------- */
body#login {
    background-image: url('../img/Login/bg-login.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#login a {
    color: #fff;
}

#login input {
    border-radius: 0 !important;
}

.social-media-icon {
    height: 16px;
    width: 16px;
    object-fit: contain;
    cursor: pointer !important;
    margin-right: 6px;
}

#login .jumbotron {
    background-color: transparent;
    padding: 0 2rem 0 2rem;
}

#login .login-form {
    color: #fff;
    padding: 20px 20px;
}

#login .login-form form {
    padding: 50px 0;
}

#login .login-form form .input-group-prepend {
    margin-right: 0;
}

#login .login-form form input.form-control,
#login .login-form form .input-group-text {
    border: none;
    background: rgba(255, 255, 255, 0.6);
}

#login .login-form .social-media {
    position: absolute;
    bottom: 0;
    padding: 16px 16px;
}

#login .dotContainer {
    margin: 0 0 50px 0;
}

#login .dotUser {
    width: 200px;
    height: 200px;
    border: none;
    border-radius: 50%;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#login .login-images {
    padding: 50px 0 0 0;
}

.login-img-1 {
    width: 100%;
    height: 190px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../img/logo.png);
    background-size: 50%;
    background-position: bottom center;
}

.login-img-2 {
    width: 100%;
    height: 450px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../img/Login/imagen_fondo.png);
}

.icon-user {
    width: 20px;
    content: url('../img/Login/user-icon.png');
}

.icon-lock {
    width: 25px;
    content: url('../img/Login/lock-icon.png');
}

.btn-login {
    color: #fff;
    width: 100%;
    border: none;
    background: rgba(0,0,0,0.6);
}

.btn-login:hover {
    color: rgb(159, 38, 139);
}

.bg-container {
    padding: 30px 15px;
    border-radius: 30px;
    background-color: rgba(249,249,249, 0.88);
}

.btn-plantilla {
    width: 30px;
    cursor: pointer;
}

/* Admin profile styles
-------------------------------------------------- */
body#admin {
    background-image: url('../img/bg_admin.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}
.navbar-brand {
    padding: 0;
}
.nav-item {
    text-align: center;
}
.nav-item:hover {
    cursor: pointer !important;
}
.nav-item > img {
   /* width: 80px;*/
}
.nav-item .menu-icon {
    height: 60px;
    width: 110px;
    background-repeat: no-repeat;
    background-size: cover;
}
.nav-item > .nav-link > .icon-inicio {
    content: url('../img/menu_inicio.png');
}

.nav-item > .nav-link:hover > .icon-inicio {
    content: url('../img/menu_inicio_over.png');
}

.nav-item > .nav-link > .icon-etiquetas {
    content: url('../img/menu_etiquetas.png');
}

.nav-item > .nav-link:hover > .icon-etiquetas {
    content: url('../img/menu_etiquetas_over.png');
}

.nav-item > .nav-link > .icon-kits {
    content: url('../img/menu_kits.png');
}

.nav-item > .nav-link:hover > .icon-kits {
    content: url('../img/menu_kits_over.png');
}

.nav-item > .nav-link > .icon-oficinas {
    content: url('../img/menu_oficinas.png');
}

.nav-item > .nav-link:hover > .icon-oficinas {
    content: url('../img/menu_oficinas_over.png');
}

.nav-item > .nav-link > .icon-plantillas {
    content: url('../img/menu_plantillas2.png');
}

.nav-item > .nav-link:hover > .icon-plantillas {
    content: url('../img/menu_plantillas2_over.png');
}

.nav-item > .nav-link > .icon-usuarios {
    content: url('../img/menu_usuarios.png');
}

.nav-item > .nav-link:hover > .icon-usuarios {
    content: url('../img/menu_usuarios_over.png');
}

.nav-item > .nav-link > .icon-categorias {
    content: url('../img/menu_categorias.png');
}

.nav-item > .nav-link:hover > .icon-categorias {
    content: url('../img/menu_categorias_over.png');
}
.nav-item > .nav-link > .icon-videos {
    content: url('../img/menu_video.png');
}

.nav-item > .nav-link:hover > .icon-videos {
    content: url('../img/menu_video_over.png');
}
.nav-item > .nav-link > .icon-baner {
    content: url('../img/menu_banner.png');
}

.nav-item > .nav-link:hover > .icon-baner {
    content: url('../img/menu_banner_over.png');
}

.nav-item > .nav-link > .icon-docs {
    content: url('../img/menu_misDocumentos.png');
}

.nav-item > .nav-link:hover > .icon-docs {
    content: url('../img/menu_misDocumentos_over.png');
}

.nav-item > .nav-link > .icon-misdocs {
    content: url('../img/menu_misDocumentosB.png');
}

.nav-item > .nav-link:hover > .icon-misdocs {
    content: url('../img/menu_misDocumentosB_over.png');
}

.nav-item > .nav-link > .icon-buscardocs {
    content: url('../img/buscar_diseno.png');
}

.nav-item > .nav-link:hover > .icon-buscardocs {
    content: url('../img/buscar_diseno_over.png');
}


.nav-item > .nav-link > .icon-descargables {
    content: url('../img/mis_descargas.png');
}

.nav-item > .nav-link:hover > .icon-descargables {
    content: url('../img/mis_descargas_over.png');
}

.nav-item > .nav-link img {
    width: 50px;
}


.nav-item > .nav-link > div {
    border-radius: 18px;
    font-weight: 500;
    background-color: transparent;
    padding: 4px 20px;
    margin-top: -8px;
    font-size: 1rem;
    line-height:1.2em;
}
.nav-item > .nav-link:hover > span {
    color: rgb(159, 38, 139);
    font-weight: 500;
    background-color: rgb(198, 198, 198);
}


.btn-logout {
    color: rgb(159, 38, 139);
    border: none;
    border-radius: 50px;
    background-color: #fff;
    width: 6%;
    font-weight: 500;
    text-align: center;
}

.btn-logout:hover {
    color: rgb(0, 147, 201);
}

.icon-form {
    width: 50px;
    margin-right: 10px;
}

.form-select.home-select {
    border-radius: 50px;
}

#admin .lbl-items .list-group,
#admin .img-items .list-group {
    border: 1px solid #ccc;
    border-radius: 20px !important;
}
#admin .lbl-items .list-group-item,
#admin .img-items .list-group-item {
    cursor: pointer;
    border: none;
}

#admin .lbl-items .list-group-item > span,
#admin .lbl-items .list-group-item > span > label:hover,
#admin .lbl-items .list-group-item > span > input:hover {
    cursor: pointer;
}

footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #efefef;
    text-align: center;
}

/* User profile styles
-------------------------------------------------- */
#frm-profile .icon-form {
    width: 60px;
}
#frm-profile label.form-label {
    padding-top: 10px;
}
#frm-profile .profile-title {
    color: rgb(159, 38, 139);
}
#frm-profile .img-profile-container {
    width: 100px;
    height: 100px;
    margin-right: 20px !important;
    border-radius: 50%;
    background: linear-gradient(#eee,#eee) padding-box, linear-gradient( 45deg, rgb(36,168,183),rgb(159, 38, 139)) border-box;
    color: #313149;
    padding: 0;
    border: 5px solid transparent;
    border-radius: 50%;
    display: inline-block;
    margin: 20px 0;
}
#frm-profile .img-profile-container > .img-profile {
    width: 90px;
    height: 90px;
    border-radius: 50%;
}
#frm-profile .img-profile-container > .add-img {
    width: 35px;
    height: 35px;
    background-color: purple;
    position: absolute;
    margin-left: 60px;
    margin-top: -25px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
    border: 2px solid rgb(216,216,216);
}

#frm-profile .img-profile-container > .add-img > label {
    cursor: pointer !important
}

.home-banner {
    margin-left: -15px;
    margin-right: -11px;
}
.home-banner img {
    width: 100%;
    height: auto;
}
div.home-tutorial > div {
    padding: 50px 0;
}

div.home-tutorial .video-container > video {
    border-radius: 50px;
    width: 100%;
    height: 100%;
    /*border: 4px solid rgb(168,255,249);*/
}
div.home-tutorial .pdf-container {
    width: 100%;
    height: 500px;
}
div.home-tutorial .pdf-container > img {
    width: 34%;
    height: auto;
    position: absolute;
    right: 0;
    z-index: -99;
}
div.home-tutorial .pdf-container > a > div {
    height: 18%;
    width: 16%;
    /*background: red;*/
    position: absolute;
}
div.user-home-idx {
    border-radius: 20px;
    background-color: rgba(255,255,255, 0.6);
    margin-top: -150px;
}
div.user-home-idx .jumbotron {
    padding-bottom: 30px;
    background-color: transparent;
}
div.user-home-idx .jumbotron .myDocs-title {
    padding: 20px 0;
    text-align: center;
    color: rgb(159, 38, 139);
}
div.user-home-idx .tbl-qualitas, div.user-home-idx .tbl-qualitas .tbl-filter {
   /* background: none;*/
}
.multiselect__option--highlight {
    background: #ab3c92 !important;
}

.multiselect__option--selected.multiselect__option--highlight {
    background: #0095ca !important;
}
.invalid-feedback.field-validation-error {
    display: inline-block;
}

.img-ico {
    max-width: 80px;
    max-height: 80px;
}
.txt-retrato {
    display: none;
}

#img-retrato {
    border-radius: 50%;
}

#Retrato {
    display: none;
}

.women {
    margin-top: -300px;
}


.caja-redonda {
    border-radius: 50px;
    padding:1em 2em;
}

.caja-morada {
    background-color: #a20084;
}
#admin #editor.pb-3 {
    padding-bottom: 48px !important;
}
.nota {
    font-size: 0.9em;
    font-style: italic;
    opacity: 0.6;
}
#preload {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
}
#preload-01 {
    background: url('../img/menu_misDocumentosB_over.png') no-repeat -9999px -9999px;
}
#preload-02 {
    background: url('../img/buscar_diseno_over.png') no-repeat -9999px -9999px;
}
#preload-03 {
    background: url('../img/mis_descargas_over.png') no-repeat -9999px -9999px;
}
#preload-04 {
    background: url('../img/menu_inicio_over.png') no-repeat -9999px -9999px;
}
#preload-05 {
    background: url('../img/menu_usuarios_over.png') no-repeat -9999px -9999px;
}

/* Responsive styles
-------------------------------------------------- */
@media (max-width: 768px) {
    .bg-gray {
        background-color: rgb(236, 236, 236);
    }
    #home .form-group {
        margin-bottom: 1rem;
    }
    .btn-logout {
        width: 70px;
    }
    .navbar-brand img {
        width: 300px;
    }
    .nav-item > .nav-link {
        padding: 0;
        margin-top: 0;
    }
    .icon-form {
        margin-right: 0;
    }
    .icon-etiqueta {
        margin-right: 10px !important;
    }

    .icon-imagen {
        margin-right: 12px !important;
    }
    div.home-tutorial .pdf-container > a > div {
        height: 8%;
        width: 30%;
    }
    .user-menu {
        margin-left: 0;
    }
    .nav-item > .nav-link > span {
        font-size: 1.2rem;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
    .btn-logout {
        width: 80px;
    }
    #login .login-form,
    #login .login-form form {
        padding: 0 0;
    }
    .navbar-brand img {
        width: 300px;
    }
    /*.myProfile {
        width: 150px;
    }
    .myDocs {
        width: 250px;
    }*/
    .user-menu {
        margin-left: 20%;
    }
    .women {
        width: 30%;
        margin-top: -200px;
    }
}




@media (min-width: 1600px) {
    #login .login-form form {
        padding: 150px 0;
    }
    .login-img-1 {
        height: 300px;
        background-position: center left;
    }
    .login-img-2 {
        height: 680px;
        background-position: center right;
    }
    .main-container {
        padding-top: 50px;
    }
    .navbar-nav {
        padding-inline-start: 180px;
    }
    .nav-item > .nav-link > span {
        font-size: 1.2rem;
    }
    .home-banner img {
        height: 500px;
    }
    .women {
        margin-top: -200px;
    }
}
