/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 07-abr-2021, 17:08:00
    Author     : Andres
*/

/* Corrección de estilo para textareas, el estilo principal no respeta las filas de este tipo de elementos */
.border-bottom { border-bottom: 1px solid #e9ebfd!important; }

.border-bottom-toggle { border-bottom: none; }

.padding-right-toggle { padding-right: 0!important; margin-bottom: 0px; }

div .py-2 {
    min-height: 65px!important;
}

textarea.form-control {
    height: inherit;
    font-size: 0.9rem;
}

.select2-container--bootstrap-5{
    width: 100% !important;
}

.card-footer {
    text-align: center;
}

/* Para label de input file */
.card-footer label {
    margin-left: 0px !important;
}

.form-label {
    font-size: 0.9rem!important;
    font-weight: 500!important;
}

.form-label strong{
    font-size: 0.95rem!important;
    font-weight: 600!important;
}

.item-data{
    color: #265ba9;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    overflow-x: hidden;
}

.item-data a {
    text-decoration: none;   
}

/*.item-data a:hover {
    text-decoration: underline;
    color:#009688!important;
}*/

.app-card-account .item {
    min-height: 75px!important;
}

.form-control {
    font-size: 0.9rem!important;
}

.form-select {
    font-size: 0.9rem!important;
}

.swal2-image {
    border-radius: 80px!important;
}

.swal2-html-container {
    font-size: 1rem!important;
}

h1, h2, h3, h4, h5, a, div, label, p, input, button {
    font-family: 'Lexend', sans-serif!important;
    color: #252930;
    font-weight: 400;
    font-size: 0.9rem;
}

h1 {
    color : #4d91bb;
    font-size: 1.5rem;
}

.mini-panel-green {
    background-color: #10ca93 !important;
}

.mini-panel-blue {
    background-color: #3a7afe !important;
}

.mini-panel-rose {
    background-color: #ec407a;
}

.mini-panel-violet {
    background-color: #7986cb;
}

.titulo {
    font-weight: 600!important;
    font-size: 1.3em!important;
    color: #4d91bb;
    letter-spacing: 1px;
}

.subtitulo {
    font-weight: 300!important;
    font-size: 1.3em!important;
    color: #009688;
    margin-top: -10px!important;
    display: block;
    letter-spacing: 1px;
}

.nav-link.active {
    color: #009688!important;
    background: #d0f7eb7a!important;
    border-left: 3px solid #009688 !important;
    font-weight: 600 !important;
    /* border-right: 3px solid #0096889e !important; */
    /* border-top: 1px dotted #00968873;
    border-bottom: 1px dotted #00968873; */
}

.nav-link:hover {
    color: #009688!important;
}

li .nav-item:hover {
    color: #009688!important;
}

.app-branding .logo-icon {
    width: 45px !important;
    height: 45px !important;
}

.app-card-account .item {
    min-height: 75px!important;
}

.swal2-image {
    border-radius: 80px!important;
}

.wrapper-button-header {
    border-left: 3px solid #009688;
    background-color: white;
    padding: 25px;
    margin-bottom: 10px;
    box-shadow: 0 1px 1px 0 rgb(65 69 88 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%)!important;
}

.panel-shadow {
    box-shadow: 0 7px 14px 0 rgb(65 69 88 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%)!important;
}

.accordion-button {
    font-size: 0.9rem!important;
    font-weight: 500!important;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.65rem 0.7em!important;
    text-align: left;
    /* background-color: white!important; */
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;
}

.container-xxl {
    padding-bottom: 25px;
}

.mb-3-end {
    margin-bottom: 1px!important;
}

.app-branding {
    height: 75px!important;
    padding-top: 1rem!important;
    padding-left: 1rem!important;
    margin-bottom: 0rem!important;
    background-image: url(../images/background/corner-logo.png)!important;
    background-size: 250px 75px!important;
}

/* Card Green */
.card-green { background-color: #edfdf6; border-top: 1px solid #56bcb0; border-bottom: 1px solid #56bcb0; }
.card-green-datatable { background-color: #edfdf6; border-top: 1px solid #56bcb0; border-bottom: 0px; background-color: white; padding-top: 16px; }
.card-green-image { background-color: white; padding-top: 16px; border-top: 1px solid #56bcb0; border-bottom: 1px solid #56bcb0; }
.card-header-green { background-color: white; border-radius: 5px; }
.card-header.accordion-item { border-color: #56bcb0!important; }
.card-body-green { padding: 15px; }
.border-green { border-color: #56bcb0!important; }
.card-footer-green { background-color: white; text-align-last: end; padding-top: 13px; padding-right: 15px; padding-bottom: 13px; border-radius: 4px; }
.card-body-slider { padding : 0px!important; }
.wrapper-slider { padding: 0px 1rem 1rem 1rem!important; }

/* Card Blue */
.card-blue { background-color: #f4f9ff; border-top: 0px solid #e2e2e2b3; }
.card-blue-image { background-color: white; padding-top: 0px; border-top: 0px solid #4d91bb; border-bottom: 0px solid #e2e2e2b3; }
.card-header-blue { background-color: white; border-radius: 5px; }
.accordion-item-image { border-color: #ebfcff!important; border-bottom: 1px solid #e2e2e2b3!important; }
.card-body-blue { padding: 20px;}
.card-body-image-blue { padding: 0px;}
.border-blue { border-color: #c7e1ff!important; }
.card-footer-blue { background-color: white; text-align-last: end; padding-top: 10px; padding-right: 7px; padding-bottom: 10px; border-radius: 0px; border-bottom: 0px solid #e9ecef; }

.card-blue-border { background-color: #f4f9ff; border: 1px solid #c8e5f7; border-radius: 4px; }


.card-footer-green-border {
    background-color: white; text-align-last: end; padding-top: 13px; padding-right: 15px; padding-bottom: 13px; border-radius: 4px;
    border-right: 1px solid #009688;
    border-top-right-radius: 0px;
    border-left: 1px solid #009688;
    border-top-left-radius: 0px;
}

.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: "url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e)";
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}

.app-card-footer-modal-blue {
    background-color: #fafbff;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.d-contents {
    display: contents;
}

.app-card-title {
    font-size: 1.125rem!important; margin-bottom: 0!important;
}

.btn-outline-success {
    color: #009688!important;
    border: 1px solid #009688!important;
    font-size: 1rem;
}

.btn-outline-success:hover {
    background-color: #009688!important;
    color: white!important;
}

.btn-outline-success-background {
    background-color: #fff!important;
    color: #009688!important;
    border: 1px solid #009688!important;
    font-size: 1rem!important;
    padding: 0.375rem 0.6rem!important;
}

.btn-outline-success-background:hover {
    background-color: #009688!important;
    color: white!important;
}

.btn-outline-default {
    background-color: #f0f9ff!important;
    font-weight: 400;
    color: #4d91bb!important;
    border: 1px solid #4d91bb!important;
}

.btn-outline-default:hover {
    background-color: #4d91bb!important;
    color: white!important;
}

.btn-outline-indigo-background {
    background-color: #fff!important;
    color: indigo!important;
    border: 1px solid indigo!important;
    border-radius: 5px;
    font-size: 0.8rem;
    padding: 3px 8px;
}

.btn-outline-indigo-background:hover {
    background-color: indigo!important;
    color: white!important;
}

.btn-inline-success {
    background-color: #009688!important;
    color: white!important;
}

.btn-inline-success:hover {
    background-color: #4d91bb!important;
    border: 1px solid #009688!important;
    font-size: 1rem;
}

.btn-inline-indigo {
    background-color: #6610f2!important;
    color: white!important;
}

.btn-inline-indigo:hover {
    background-color: #d63384!important;
    border: 1px solid #d63384!important;
    font-size: 1rem;
}

.btn-inline-verde {
    background-color: #20c997!important;
    color: white!important;
}

.btn-inline-verde:hover {
    background-color: #00bcd4!important;
    border: 1px solid #00bcd4!important;
    font-size: 1rem;
}

.btn-inline-blue {
    background-color: #4d91bb!important;    
    color: white!important;
}

.btn-inline-blue:hover {    
    background-color: #009688!important;
    font-size: 1rem;
}

.accordion-body {
    padding: 0.8rem!important;
}

.table-info {
    font-size: 0.8rem!important;
}

.app-btn {
    margin-right: 3px!important;
    background: #fff!important;
    color: #53595f!important;
    border: 1px solid #9b9d9e!important;
    font-size: 0.9rem!important;
    font-weight: 500!important;
}

.app-btn-footer {
    margin-right: 3px!important;
    background: #fff!important;
    color: #53595f!important;
    border: 1px solid #9b9d9e!important;
    font-size: 1rem!important;    
    font-weight: 500!important;
}

.app-btn-footer.blue:hover {
    color: #4d91bb!important;
    border: 1px solid #4d91bb!important;
}


.app-btn-secondary {
    border: 1px solid #56bcb0!important;
}

.app-btn.blue:hover {
    color: #4d91bb!important;
    border: 1px solid #4d91bb!important;
}

.app-btn.blue-small {
    padding: 3px 6px;
    font-size: 0.8rem!important;
}

.app-btn.blue-small:hover {
    color: #4d91bb!important;
    border: 1px solid #4d91bb!important;
}

.spinner-grow.spinner-grow-sm {
    background-color: #4a7bc3;
    margin-bottom: 0px;
    margin-right: 10px;
    font-weight: 800;
    height: 20px;
    width: 20px;
}

.spinner-border.spinner-border-sm {
    color: #212529;
    /* margin-right: 10px;
    height: 18px;
    width: 18px; */
    border-width: .1em!important;
}

.modal-header{
    background-color: white!important;
    padding: 0.6rem 1rem!important;
    border-bottom: 1px solid #adb5bd!important;
}

.modal-header svg, h5 {
    margin-right: 12px;
    /* color: #4d91bb;
    font-weight: 600!important; */
}

.modal-title {
    font-size: 1rem!important;
}

.modal-content {
    background-color: #fff;
    background-clip: padding-box;
    border-radius: .4rem!important;
}

.app-icon-holder-green {
    display: inline-block!important;
    background: #edfdf6!important;
    color: #009688!important;
    width: 50px!important;
    height: 50px!important;
    padding-top: 10px!important;
    font-size: 1rem!important;
    text-align: center!important;
    border-radius: 50%!important;
}

.app-icon-holder-blue {
    display: inline-block!important;
    background: #ebfcff!important;
    color: #4d91bb!important;
    width: 50px!important;
    height: 50px!important;
    padding-top: 10px!important;
    font-size: 1rem!important;
    text-align: center!important;
    border-radius: 50%!important;
}    

.card-body-image-violet {
    background-color: #f5f6fe!important;
    margin-bottom: 25px;
    border-radius: 4px;
    height: 165px;
}

.border-radius-rigth {
    border-top-right-radius: 4px!important;
    border-bottom-right-radius: 4px!important;
}

thead, tbody, tfoot, tr, td, th {
   border-color: inherit;
   border-style: hidden!important;
   border-width: 0;
}

table.dataTable tr:nth-child(even) { background: #f5f6feab!important; vertical-align: middle; }
table.dataTable tr:nth-child(odd) { background: #fff!important; vertical-align: middle;}

tr td img {
   max-width: 50px!important;
   max-height: 50px;
   border-radius: 50px;
   /* border: 2px solid #a0aff9; */
}

table.dataTable.no-footer {
    border-bottom: 1px solid #56bcb0!important;
    padding-bottom: 20px!important;
    font-size: 0.85rem;
}

.dt-button.buttons-page-length, .dt-button.buttons-copy, .dt-button.buttons-csv, .dt-button.buttons-excel, .dt-button.buttons-pdf, .dt-button.buttons-print {
    border: 1px solid #009688;
    background-color: #edfdf6!important;
    color: #009688!important;
    background-image: none!important;
    border-radius: 5px!important;
    margin-left: 2px!important;
    /* margin-right: 8px!important; */
    font-weight: 400;
    font-size: 0.8rem!important;
    padding: 0.4em 0.9em!important;
    margin-bottom: 12px;
    width: 65px;
}

.dt-button.buttons-page-length:hover, .dt-button.buttons-copy:hover, .dt-button.buttons-csv:hover, .dt-button.buttons-excel:hover, .dt-button.buttons-pdf:hover, .dt-button.buttons-print:hover {
    border: 1px solid #009688!important;
    background-color: #009688!important;
    color: white!important;
}

.dataTables_filter input {
    border: 1px solid #009688!important;
    border-radius: 4px!important;
    padding: 5px 10px!important;
}

.dataTables_filter input[type=search] {
    box-shadow: none!important;
    outline-offset: 0px!important;
    outline-color: #009688!important;
    -webkit-appearance: none!important;
}

.dataTables_filter {
    margin-bottom: 15px!important;
}

table.dataTable {
     padding-top: 15px!important;
     border-top: 1px solid #56bcb0!important;
     width: 100%!important;
}

.app-btn-view {
    color: #4d91bb;
    background-color: transparent;
    border: 1px solid #4d91bb;
    border-radius: 3px;
    padding: 0.28rem 0.28rem!important;
    margin-right: 1px;
}

.app-btn-view:hover {    
    background-color: #ebfcff;
}



/* .btn-outline-success-background {
    background-color: #edfdf6!important;
    color: #009688!important;
    border: 1px solid #009688!important;
    font-size: 1rem!important;
    padding: 0.375rem 0.6rem!important;
} */

.app-btn-update {
    color: #009688;
    background-color: #fff;
    border: 1px solid #009688;
    border-radius: 3px;
    padding: 0.28rem 0.28rem!important;
    margin-right: 1px;
}

.app-btn-update svg{
    vertical-align: middle;
}

/* .app-btn-update span {
    margin-left: 3px!important;
    margin-right: 3px!important;
    vertical-align: sub!important;
    display: none;
} */

.app-btn-update:hover {
    background-color: #edfdf6;
}

.app-btn-trash {
    color: #ec407a;
    background-color: transparent;
    border: 1px solid #ec407a;
    border-radius: 3px;
    padding: 0.28rem 0.28rem!important;
}

.app-btn-trash:hover {
    background-color: #ffecee;
}

.td-img {
    text-align: left;
    min-width: 80px!important;
    display: block;
}

.td-id {
    min-width: 50px;
    text-align: left;
}

.td-marca {
    min-width: 70px;
}

.td-descripcion {
    min-width: 90px;
    max-width: 240px;
}

.td-estado {
    text-align: center;
    min-width: 60px;
}

.td-action {
    text-align: center;    
    min-width: 130px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: none!important;
    background-color: #e9ebfd!important;
    border-radius: 5px!important;
    border: 0px solid #0d6efd!important;
    color: #d0f7eb!important;
    font-weight: bold;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: none!important;
    box-sizing: border-box!important;
    display: inline-block!important;
    min-width: 1.5em!important;
    padding: 0.4em 0.9em!important;
    margin-left: 2px!important;
    text-align: center!important;
    text-decoration: none !important;
    cursor: hand!important;
    color: blue!important;
    border: 0px solid #ababad !important;
    border-radius: 5px!important;
    font-size: 0.8rem!important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: none!important;
    background-color: #c6ccfd!important;
    border-radius: 5px!important;
    border: 0px solid #0d6efd!important;
    color: blue!important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  border: 0px solid grey !important;
}

.dataTables_wrapper .dataTables_info {
    margin-top: 5px!important;
    padding-bottom: 5px!important;
}

.dataTables_wrapper .dataTables_paginate {
    margin-top: 5px!important;
}

.pre-footer{
    background-color: #95f7de;
    height: 4px;
    margin-top: 0px;
}

.footer {
    background-color: #115164;
    padding: 0px;
}

.footer p {
    color: #f5f6fe;
    margin-bottom: 0px;
    font-size: 0.7rem;
}

.footer .py-3 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.7rem !important;
}

.footer a {
     color: #f5f6fe;
     text-decoration: none;
     font-size: 0.7rem!important;
}

.footer a:hover {
     color: #022354;
}

@media screen and (min-width: 280px) and (max-width: 640px) {
    
    .border-bottom-toggle { border-bottom: 1px solid #e9ebfd!important; }
    .margin-top-toggle    { margin-top: 0px!important; }
    .padding-right-toggle { padding-right: 11px!important; margin-bottom: 10px; }
    
    div.dt-buttons {
        float: none !important;
        text-align: center;
        margin: auto!important;
        border-bottom: 0px solid #56bcb0!important;        
        padding-bottom: 10px!important;
    }
    
    .dataTables_filter {
        margin-top: 0px!important;
        background-color: #edfdf6!important;
    }
    
    .dataTables_filter label {
        width: 100%!important;
        text-align: center!important;
    }
    
    .dataTables_filter input[type=search] {
        width: 75%!important;
    }
    
    .dataTables_filter {
        border-bottom: 1px solid #56bcb0!important;
        padding-top: 15px!important;
        padding-bottom: 15px!important;
    }
    
    table.dataTable {
        padding-top: 0px!important;
        border-top: 0px solid #56bcb0!important;
    }

}

@media screen and (min-width: 320px) and (max-width: 640px) {
    
    .border-bottom-toggle { border-bottom: 1px solid #e9ebfd!important; }
    .margin-top-toggle    { margin-top: 0px!important; }
    .padding-right-toggle { padding-right: 11px!important; margin-bottom: 10px; }
    
    div.dt-buttons {
        float: none !important;
        text-align: center;
        margin: auto!important;
        border-bottom: 1px solid #56bcb0!important;
        padding-bottom: 10px!important;
        padding-bottom: 4px!important;
    }
    
    .dataTables_filter {
        margin-top: 0px!important;
        background-color: #edfdf6!important;
    }
    
    .dataTables_filter label {
        width: 100%!important;
        text-align: center!important;
    }
    
    .dataTables_filter input[type=search] {
        width: 93%!important;
        display: block!important;
        margin-top: 10px;
        margin-left: 10px!important;
    }
    
    .dataTables_filter {
        border-bottom: 1px solid #56bcb0!important;
        padding-top: 15px!important;
        padding-bottom: 15px!important;
    }
    
    table.dataTable {
        padding-top: 0px!important;
        border-top: 0px solid #56bcb0!important;
    }
    
}
/*btn-violet-datatable {
    border: 2px solid #909cfd;
    background-color: white!important;
    background-image: none!important;
    border-radius: 5px!important;
    margin-right: 5px!important;
}*/

/*.app-card .app-icon-holder {
    display: inline-block;
    background: #f5f6fe;
    color: #909cfd;
    width: 50px;
    height: 50px;
    padding-top: 10px;
    font-size: 1rem;
    text-align: center;
    border-radius: 50%;
}*/

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
  /* CSS */
  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1024px) and (max-width: 1366px) {  
  .padding-right-toggle { padding-right: 11px!important; margin-bottom: 0px!important; }
  .dt-buttons {
        width: auto!important;
        text-align: center!important;
    }

    .dataTables_filter {
        width: auto!important;
        text-align: center!important;
    }
}

@media (min-width: 768px) and (max-width: 1366px) {  
  .padding-right-toggle { padding-right: 11px!important; margin-bottom: 10px; }  
}


@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {  
  .padding-right-toggle { padding-right: 11px!important; margin-bottom: 10px; }  
}

@media (min-width: 812px) and (max-width: 375x) and (orientation: landscape) {
  
  .padding-right-toggle { padding-right: 11px!important; margin-bottom: 10px; }  
}

@media (min-width: 481px) and (max-width: 767px) {
  
  .padding-right-toggle { padding-right: 11px!important; margin-bottom: 10px; }
  
}

@media (min-width: 320px) and (max-width: 480px) {
  
  img { max-height: 250px; }
  .card-green { border-bottom: 0px!important; }
  
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    /* --bs-table-accent-bg: #e7e7e757!important;  #f8f9fe*/
    --bs-table-accent-bg: #f8f9fa!important;
    background-color: #f8f9fa!important;
}

.app-card.app-card-basic:hover {
    box-shadow: 0 0px 14px 0 rgb(0 150 136 / 35%), 0 0px 0px 0 rgb(0 0 0 / 1%)!important;
    background-color: #edfdf6;
}

div.dt-button-collection button.dt-button, div.dt-button-collection div.dt-button, div.dt-button-collection a.dt-button {
    width: 132px;
}

.accordion-button:not(.collapsed) {
    color: #0c63e4;
    background-color: #eef1ff!important;
    box-shadow: none!important;
}

.accordion-item {
    background-color: #fff;
    /* border-bottom: 1px solid #3f51b5!important; */
}

/* .accordion-item button {
    font-weight: 600!important;
} */

.fg-300 {
    font-weight: 300;
}

.accordion-button:focus {
    box-shadow: none!important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {    
    line-height: 0.69rem!important;
    font-family: 'Lexend'!important;
}

@media (min-width: 320px) and (max-width: 768px) {
  
    .dt-buttons {
        /* width: 100%!important; */
        margin-right: 0px!important;
        /* text-align: center!important; */
    }
    
    .dataTables_filter {
        /* width: 100%!important; */
        text-align: center!important;
    }

    .dataTables_filter input{
        width: 145px!important;
    }

}

div.dataTables_info {
    padding-top: 8px;
    white-space: normal!important;
}

.info-overflow-imagen {
    width: 97%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    font-weight: 300;
}

.card-footer-file{
    background-color: white;
    text-align: center;
    box-shadow: 0 7px 14px 0 rgb(65 69 88 / 10%), 0 3px 6px 0 rgb(0 0 0 / 7%)!important;
}