@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@font-face {
    font-family: Frutiger LT Std;
    src:url(fonts/Frutiger_1977/FrutigerLTStd-Roman.otf);
}
@font-face {
    font-family: Frutiger LT Std;
    src: url(fonts/Frutiger_1977/FrutigerLTStd-Bold.otf);
    font-weight: bold;
}
@font-face {
    font-family: Frutiger LT Std;
    src: url(fonts/Frutiger_1977/FrutigerLTStd-Light.otf);
    font-weight: light;
}
@font-face {
    font-family: Frutiger LT Std;
    src: url(fonts/Frutiger_1977/FrutigerLTStd-Light.otf);
    font-weight: lighter;
}
html, body {
    font-family: 'Frutiger LT Std', Helvetica, Arial, sans-serif;
}

body{
    overflow-x:hidden;
}

h1 {
    font-size: 30pt;
    font-weight: bold;
    color: #F3A803;
}
p {
    color: #3682C4;
    font-family:'Frutiger LT Std';
    font-size:12pt;
}


.main {
    /*flex: 1;
    position:relative;*/
    width: 100%;
    overflow: auto;
    /*padding-bottom: 15%*/
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

        .main .top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

/** inicio - Authentication page **/
.authentication {
    background-color: #DBDBDB;
    height: 100vh;
    padding-bottom: 0;
}
    .authentication .content, .authentication .content .row {
        height: 100%;
        align-items: center;
    }
    .authentication .col-3{
        margin:0 5%
    }
    .authentication .col-5 {
        margin-left:10%
    }
    .authentication h2 {
        font-size:21pt;
        font-weight:bold;
        color: #3682C4;
        text-align:center;
        margin:7% 0;
    }
    .authentication .div-btn-submit{
        text-align:center;
        padding:5% 0;
    }
        .authentication .div-btn-submit .btn {
            padding: 0 8%
        }
        .authentication .div-btn-submit a {
            color: #004D9D;
            font-size: 9pt;
            font-weight: lighter;
        }
    .authentication .form-control, .authentication .form-control::placeholder, .authentication .form-control:focus {
        color: #F3A803;
        font-size:14pt;
        font-weight:lighter;
    }
    div.auth {
        background-color: white;
        box-shadow: 0px 0px 20px 10px gray;
    }

span.input-group-text {
    color: white;
    background-color: #F3A803;
    border-radius: 50% !important;
    margin-right:1.5rem;
}

.input-group {
    margin-bottom: 1rem;
}

/** fin - Authentication page **/




    .input-group-search {
    width: 30%;
    margin-right: 0;
    margin-left: auto;
}

.input-group-search .form-control, .form-control::placeholder, .form-control:focus {
    color: #F3A803;
    font-size: 14pt;
    font-weight: lighter;
}

/** inicia - card **/

h5, .card .btn-link {
    color: #004D9D;
    font-size: 12pt;
    font-weight: bold;
    padding: 0;
}

.card{
    border-width: 3px;
}

.card-header {
    background-color: #DBDBDB;    
}
/** termina - card **/

/** inicia - accordion catalogo doctos **/
#catalogo_accordion .card-header {
    background-color: #004D9D;
    padding: .1rem;
}

#catalogo_accordion .btn-link {
    color: white;
}

#catalogo_accordion .card-body{
    padding: .1rem;
}
/** termina - accordion catalogo doctos **/

/** catalogo documentos **/
.blazored-modal {
    width: 60%;
    height: 90%;
    overflow: auto;
}

.blazored-modal-header {
    padding: 0;
}

.catalogo-comentario label {
    color: #004D9D;
    font-size: 12pt;
    font-weight: bold;
}
.catalogo-comentario textarea {
    width: 70%;
}

    .catalogo-comentario textarea, .catalogo-comentario textarea::placeholder, .catalogo-comentario textarea:focus {
        color: #F3A803;
        font-size: 12pt;
        font-weight: lighter;
    }

/** termina - catalogo documentos **/


/** inicia - mi perfil **/
.mi-perfil .btn {
    width: 45%;
    padding: 0;
}
.mi-perfil label {
    color: #004D9D;
    font-size: 12pt;
    font-weight: bold;
}
.mi-perfil .form-control, .mi-perfil .form-control::placeholder, .mi-perfil .form-control:focus {
    color: #004D9D;
    font-size: 12pt;
    font-weight: lighter;
    border-top-left-radius: 25px;
    border-radius: 25px;
}


/** termina - mi perfil **/

/** inicia - cargar documentos **/
.div-info-cliente .drag-drop-zone {
    padding: 1rem;
}
.div-info-cliente label {
    color: #004D9D;
    font-size: 10pt;
    font-weight: bold;
    margin-right: .3rem;
}
.div-info-cliente span {
    color: #3682C4;
    font-size: 10pt;
    font-weight: lighter;    
}
/** termina - cargar documentos **/

/** inicia - data cliente **/
.div-data-cliente .form-row .form-group label {
    color: #004D9D;
    font-size: 10pt;
    font-weight: bold;
}
.div-data-cliente .form-row .form-group .form-control, .div-data-cliente .form-row .form-group .form-control::placeholder,
.div-data-cliente .form-row .form-group .form-control:focus {
    color: #F3A803;
    font-size: 9pt;
    font-weight: light;
}
/** termina - data cliente **/
.div-logout {
    /*position: absolute;
    bottom: 3rem;
    left: 1rem;
    margin-top:15%;*/
}
    .div-logout button{
        /*color: white;*/
        font-size: 10pt;
    }
    .div-logout svg {
        color: #F3A803;
    }

.authentication .bottom-row {
    width: 100%;
}


a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    height: 2rem;
    display: flex;
}



.bottom-row {
    color: white;
    height: 1.5rem;
    background-color: #F3A803;
    /*bottom: 0;
    position:fixed;*/
    /*width:85%;*/
    margin-top: 200px;
    overflow:hidden;
}
.bottom-row .rights-reserved {
    width:100%;
    text-align: center;

}



.sidebar {
    background-image: linear-gradient(20deg, #004D9D, #3682C4 5%, #DBDBDB 30%);
}

    .sidebar .top-row {
        background-color: #DBDBDB;
        height: 8rem;
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
       
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 15px;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }

        .sidebar .nav-item:first-of-type {
            /*padding-top: 1rem;*/
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: #004D9D;
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            /*  |line-height: 3rem;*/
            font-size: 10pt;
            cursor:pointer;
        }

            .sidebar .nav-item a.active {
                background-color: rgba(255,255,255,0.25);
                color: #004D9D;
            }

            .sidebar .nav-item a:hover {
                background-color: rgba(255,255,255,0.1);
                color: #3682C4;
        }
        .sidebar .nav-item .disabled{
            color:gray !important;
        }

        .sidebar .nav-item .nav-user div {
            line-height: 1rem;
        }
        .sidebar .nav-item .nav-user img {
            width: 70%
        }
            .sidebar .nav-item .nav-user .user-name {
                font-size: 14pt;
                font-weight: bold;
                color: #3682C4;
            }
        .sidebar .nav-item p {
            font-size: 10pt;
            font-weight: bold;
            color: #004D9D;
        }


.content {
    padding-top: 8%;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}



.valid.modified:not([type=checkbox]) {
    /*outline: 1px solid #26b050;*/
    box-shadow: 0 0 2pt .3pt #26b050;
}

.invalid {
    /*outline: 1px solid red;*/
    box-shadow: 0 0 2pt .3pt red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
    .div-logout button {
        color: white;
    }
    .div-btn .btn {
        font-size: 9pt;
    }
    div.auth{
        margin:0 5%
    }

    .sidebar .top-row{
        text-align:left !important;
        padding-top: 1rem;
    }
    .sidebar .top-row img{
        width: 126px;
    }

}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 15%;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }


    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .sidebar .top-row {
        text-align: center !important;
    }

        .sidebar .top-row img {
            width: 80%;
        }
}

    /** DragDrop FileUpload **/
    .drag-drop-zone {
        border: 3px dashed #e68710;
        padding: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #eee;
        box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
        color: #aeaeae;
        font-size: 1.5rem;
        cursor: pointer;
        margin: 1.5rem 0 2rem 0;
        position: relative;
    }

        .drag-drop-zone:hover {
            background-color: #f5f5f5;
        }

        .drag-drop-zone input[type=file] {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }


    /** inicia - table **/

    .table thead {
        background-color: #004D9D;
        color: #F2F2F2;
        font-size: 10pt;
        font-weight: bold;
    }

        .table thead th {
            padding: .3rem;
            text-align: left;
            vertical-align: middle;
        }

    .table tbody tr {
        color: #004D9D;
        font-size: 10pt;
        font-weight: lighter;
    }

    .table tbody td {
        border-width: 1pt;
        border-color: white;
        padding: .1rem;
        text-align: left;
        vertical-align: middle;
    }

    .table .btn-sm {
        color: #F3A803;
    }

    .div-btn {
        text-align: right;
    }
    .mi-perfil .div-btn {
        text-align: left;
    }
        .div-btn .btn {
            margin-top: 2rem;
            width: 30%;
            padding: 0 3%;
            font-size: 14pt;
            font-weight: bold;
        }



    /** termina - table **/


    /** inicia - recordatorios **/
    .div-recordatorio .titulo {
        border: 5px solid #DBDBDB;
        background: #DBDBDB;
        font-weight: bold;
        font-size: 12pt;
        color: #3682C4;
        margin-bottom:1px;
    }

    .div-recordatorio .subtitulo {        
        font-weight: bold;
        font-size: 9pt;
        color: #004D9D;
    }

    .div-recordatorio .contenido {
        border: 3px solid #DBDBDB;
    }

    .div-recordatorio .texto {
        font-size: 8pt;
        color: #3682C4;
    }
    /** termina - recordatorios **/



    /** inicia - reporte **/
    .div-reporte{
        overflow:hidden;
        padding:0 5% 10% 5%;
    }
        .div-reporte .lines {
            border-top: 3px solid #F3A803;
            border-bottom: 3px solid green;
            height: 10px;
            width: 100%;
        }

    .div-reporte .image{
        margin-bottom:10pt;
    }

    .div-reporte .title {
        font-weight: bold;
        color: dimgray;
    }
    .div-reporte label{
        font-weight: bold;
    }

@media print {
    .div-reporte{
        display:block;
        position:relative;
        height:100%
    }
    .div-reporte .bottom-row {
        display:block;   
        position:absolute;
        bottom: 0;
    }


    body{
        height:100%
    }
}

.div-reporte .bottom-row {
    background-color: white;
    color: black;
}
        .div-reporte table {
            width:100%;
        }
        .div-reporte th {
            border: 1px solid black;
            background-color: #F3A803;
        }
        .div-reporte td {
            border: 1px solid black;
        }

    /** termina - reporte **/


    /** Loading animation **/
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #F3A803;
    border-color: #F3A803 transparent #F3A803 transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

.lds-dual-ring-small:after {
    content: " ";
    display: block;
    width: 20px;
    height: 20px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #F3A803;
    border-color: #F3A803 transparent #F3A803 transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/** INICIA: historial doctos **/
.doctos-historial .card-body, .doctos-historial .card-header {
    padding: 0;
}
    .doctos-historial .card-body .card-header {
        padding: 0 0 0 5%;
        background-color: white;
        border: 1px solid black;
        text-align: left;
    }
        .doctos-historial .card-body .card-header h5, .doctos-historial .card-body .btn-link {
            text-align: left;
        }
    .doctos-historial .card-body .card-body {
        padding: 0 0 0 5%;
        border: 1px solid black;
    }
    

/** INICIA: reporte cliente-documentador **/
.rpt-cliente-documento tbody tr:hover, .rpt-cliente-documento tbody tr.active {
    background-color: #F3A803 !important;
    cursor:pointer;
}

.in-reports .btn-group {
    display:none;
}

.date-about-expire{
    color:orange !important;
}
.date-expired{
    color:darkred !important;
}

.input-group-search-component {

    margin-right: 0;
    margin-left: auto;
}

@media screen {
    div.divFooter {
        display: none;
    }    
    div.divHeader{
        display:none;
    }
    div.doctos-historial div.div-info-cliente {
        display: none;
    }
}

@media print {
    .sidebar{
        display:none;        
    }
    .btn-sm{
        display:none;
    }
    .btn-group{
        display:none;
    }
    .input-group-search-componente{
        display:none;
    }

    table.table-cliente-documentador {
        display: none;
    }
    div.doctos-historial div.div-info-cliente {
        display: block;
    }
    div.bottom-row{
        display:none;
    }

    div.saltopagina {
        display: block;
        page-break-before: always;
    }

    div.divHeader {
        width: 100%;
        position: fixed;
        top: 0;
    }

    div.divFooter {
        width:100%;
        position: fixed;
        bottom: 0;
    }
    h1{
        font-size:16pt;
    }
    .main{
        margin: 10% 0;
    }
    
}

.input-group-search-componente input .form-control, .input-group-search-componente .form-control::placeholder, .input-group-search-componente .form-control:focus {
    color: #004D9D;
    font-size: 12pt;
    font-weight: lighter;
    border-top-left-radius: 25px !important;
    border-radius: 25px !important;
}