@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");


:root {
  --bs-blue: #4388ee;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #d9534f;
  --bs-orange: #fd7e14;
  --bs-yellow: #e5a54b;
  --bs-green: #4bbf73;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #495057;
  --bs-gray-dark: #343a40;
  --bs-primary: #4388ee;
  --bs-secondary: #293042;
  --bs-success: #4bbf73;
  --bs-info: #0dcaf0;
  --bs-warning: #e5a54b;
  --bs-danger: #d9534f;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: 'Roboto', sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-size: 0.875rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.625;
  --bs-body-color: #495057;
  --bs-body-bg: #f7f9fc;
}

#root, body, html {
    height: 100%;
    font-size: 14px;
}


body {
    opacity: 1!important;
    overflow-y: scroll;
    font-size: 0.875rem;
    background-color: #f7f9fc;
    letter-spacing: .2px;
}

body[data-sidebar-position=right] {
    direction: rtl;
}

.bold {
    font-weight: bold;
}

.text-primary {
    color: #00a8da !important;
}

.text-secondary {
    color: #293042 !important;
}

.bg-primary {
    background-color: #00a8da!important;
}

.blanca { color: #fff; }
.verde { color: #5cdb0c }
.amarilla { color: #FF7000 }
.roja { color: #e71b1b }

.bg-white { background-color: #fff; }
.bg-green { background-color: #5cdb0c }
.bg-yellow { background-color: #FF7000 }
.bg-red { background-color: #e71b1b }


.btn-primary {
    background-color: #00a8da;
    border-color: #00a8da;
    color: #fff;
}

.btn-check:focus+.btn-primary, .btn-primary:focus, .btn-primary:hover {
    background-color: #293042;
    border-color: #293042;
    color: #fff;
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #212529;
    background-color: #e9ecef;
    border-color: #ced4da;
}


.btn-secondary {
    background-color: #293042;
    border-color: #293042;
    color: #fff;
}

.btn-check:focus+.btn-secondary, .btn-secondary:focus, .btn-secondary:hover {
    background-color: #E8E9F3;
    border-color: #293042;
    color: #293042;
}

.btn-success {
    background-color: #4bbf73;
    border-color: #4bbf73;
    color: #000;
}

.btn-check:focus+.btn-success, .btn-success:focus, .btn-success:hover {
    background-color: #66c988;
    border-color: #5dc581;
    color: #000;
}

.btn-danger {
    background-color: #d9534f;
    border-color: #d9534f;
    color: #fff;
}

.btn-check:focus+.btn-danger, .btn-danger:focus, .btn-danger:hover {
    background-color: #b84743;
    border-color: #ae423f;
    color: #fff;
}

.btn-warning {
    background-color: #e5a54b;
    border-color: #e5a54b;
    color: #000;
}

.btn-check:focus+.btn-warning, .btn-warning:focus, .btn-warning:hover {
    background-color: #e9b366;
    border-color: #e8ae5d;
    color: #000;
}

.btn-info {
    background-color: #1f9bcf;
    border-color: #1f9bcf;
    color: #fff;
}

.btn-check:focus+.btn-info, .btn-info:focus, .btn-info:hover {
    background-color: #1a84b0;
    border-color: #197ca6;
    color: #fff;
}


.page-item.active .page-link {
    background-color: #293042;
    border-color: #293042;
}


.list-group-item.active {
    background-color: #00a8da;
    border-color: #00a8da;
}


.wrapper {
    align-items: stretch;
    display: flex;
    width: 100%;
}



.sidebar {
    background: #293042;
    direction: ltr;
    max-width: 215px;
    min-width: 215px;
    transition: margin-left .35s ease-in-out,left .35s ease-in-out,margin-right .35s ease-in-out,right .35s ease-in-out;
}

body:not([data-sidebar-position=right]) .sidebar.collapsed {
    margin-left: -215px;
}

body[data-sidebar-position=right] .sidebar.collapsed {
    margin-right: -215px;
}


.sidebar-content {
    background: #293042;
    transition: margin-left .35s ease-in-out,left .35s ease-in-out,margin-right .35s ease-in-out,right .35s ease-in-out;
}


[data-simplebar] {
    align-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative;
}


.sidebar-brand {
    color: #fff;
    display: block;
    font-size: 1.125rem;
    font-weight: 500;
    padding: 1.15rem 1.5rem;
    text-align: center;
    text-decoration: none;
}

.sidebar-brand img {
    height: 44px;    
    width: auto;
}


body[data-sidebar-behavior=sticky] .sidebar-content {
    height: 100vh;
    left: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    overflow-y: auto;
}



.sidebar-content::-webkit-scrollbar{
  width: 6px;
}
.sidebar-content::-webkit-scrollbar-thumb{
  background: #59688e;

}
.sidebar-content::-webkit-scrollbar-thumb:hover{
  background: #eaeaea;
}
.sidebar-content::-webkit-scrollbar-track{
  background: transparent;
  box-shadow: none;
  margin-top: 0;
  margin-bottom: 0;
}

.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    transition: margin-left .35s ease-in-out,left .35s ease-in-out,margin-right .35s ease-in-out,right .35s ease-in-out;
    width: 100%;
}


.navbar-bg {
    background: #fff;
}


.navbar-expand {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.navbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    position: relative;
    border-bottom: 0;
    box-shadow: 0 0 2rem 0 rgb(41 48 66 / 10%);
}

.navbar .nav-link {

}

.navbar .nav-link:hover {

}

body:not([data-sidebar-position=right]) .navbar-align {
    margin-left: auto;
}

body[data-sidebar-position=right] .navbar-align {
    margin-right: auto;
}


.sidebar-toggle {
    cursor: pointer;
    display: flex;
    height: 26px;
    width: 26px;
    font-size: 24px;
    color: #00a8da;
    
}

body:not([data-sidebar-position=right]) .sidebar-toggle {
    margin-right: 1rem;
}

body[data-sidebar-position=right] .sidebar-toggle {
    margin-left: 1rem;
}

.sidebar-toggle:hover {
    color: #293042;
}

.sidebar-nav {
    list-style: none;
    padding-left: 0;
}

.sidebar-header {
    background: transparent;
    color: #ced4da;
    font-size: 0.9rem;
    padding: 1.5rem 1.5rem 0.375rem;
}

.sidebar-link, a.sidebar-link {
    font-size: 0.825rem;
    color: rgba(233,236,239,.5);
    cursor: pointer;
    display: block;
    font-weight: 400;
    padding: 0.625rem 1.625rem;
    position: relative;
    text-decoration: none;
    transition: color 75ms ease-in-out;
}

.sidebar-link:hover {
    color: rgba(233,236,239,.75);
}

.sidebar-link i,
.sidebar-link svg,
a.sidebar-link i,
a.sidebar-link svg {
    color: rgba(233,236,239,.5);
    margin-right: 0.75rem;
}

.sidebar-link:hover i, .sidebar-link:hover svg {
    color: rgba(233,236,239,.75);
}

.sidebar-item.active .sidebar-link:hover,
.sidebar-item.active>.sidebar-link {
    color: #e9ecef;
}

.sidebar-dropdown .sidebar-link {
    color: #adb5bd;
    font-weight: 400;
    padding: 0.55rem 1.5rem 0.55rem 3.7rem;
}

.sidebar-dropdown .sidebar-dropdown .sidebar-link {
    padding: 0.55rem 1.5rem 0.55rem 4.5rem;
}

.sidebar-dropdown .sidebar-item .sidebar-link:hover {
    color: #e9ecef;
    font-weight: 400;
}

.sidebar-dropdown .sidebar-item.active .sidebar-link {
    color: #00a8da;
    font-weight: 400;
}

.sidebar [aria-expanded=true],
.sidebar [data-bs-toggle=collapse]:not(.collapsed) {
    color: #e9ecef
}

.sidebar [aria-expanded=true]:before,
.sidebar [data-bs-toggle=collapse]:not(.collapsed):before {
    top: 1.2rem;
    transform: rotate(-135deg);
}

.sidebar [data-bs-toggle=collapse]:before {
    border: solid;
    border-width: 0 0.1rem 0.1rem 0;
    content: " ";
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 1.7rem;
    top: 1rem;
    transform: rotate(45deg);
    transition: all .2s ease-out;
}


.nav-flag, .nav-icon {
    color: #293042;
    display: block;
    font-size: 1.5rem;
    line-height: 1.4;
    padding: 0.1rem 0.8rem;
    transition: background .1s ease-in-out,color .1s ease-in-out;
    text-decoration: none;
}

.nav-flag .feather,
.nav-flag svg,
.nav-icon .feather,
    .nav-icon svg {
    height: 20px;
    width: 20px;
}

.nav-flag img {
    border-radius: 50%;
    height: 20px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 20px;
}

.nav-item .indicator {
    background: #4388ee;
    border-radius: 50%;
    box-shadow: 0 0.1rem 0.2rem rgb(0 0 0 / 5%);
    color: #fff;
    display: block;
    font-size: .675rem;
    height: 18px;
    padding: 1px;
    position: absolute;
    right: -8px;
    text-align: center;
    top: 0;
    transition: top .1s ease-out;
    width: 18px;
}

.dropdown-toggle:after{
    border:solid;
    border-width:0 2px 2px 0;
    display:inline-block;
    padding:2px;
    transform:rotate(45deg);
}

.dropdown-menu { font-size: 0.875rem }

.avatar {
    height: 40px;
    margin-bottom: -15px;
    margin-top: -15px;
    width: 40px;
}



.section-options {

}

.section-options .dropdown,
.section-options .btn {
    margin-left: 0.5rem;
}


.content {
    direction: ltr;
    flex: 1;
    padding: 1.5rem 2.5rem 1.5rem;
}





footer.footer {
    background: #fff;
    border-top: 1px solid #dee6ed;
    direction: ltr;
    padding: 1rem 0.75rem;
}

footer.footer ul {
    margin-bottom: 0;
}



.card {
    word-wrap: break-word;
    background-clip: border-box;
    background-color: #fff;
    border: 0 solid transparent;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    box-shadow: 0 0 0.875rem 0 rgb(41 48 66 / 5%);
    margin-bottom: 24px;
}


.card-header {
    background-color: #fff;
    border-bottom: 1px solid transparent;
    margin-bottom: 0;
    padding: 1rem 1.25rem;
}

.card-title {
    font-size: 1rem;
    margin: 0;
}

.card-header:first-child {
    border-radius: 0.25rem 0.25rem 0 0;
}

.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}


.ck-error {
    border-color: #d9534f !important
}


.form-check-input {
    font-size: 1rem;
    margin-top: 0.15em;
}


.form-select,
.form-control {
    font-size: 0.875rem
}


.form-select.form-select-fix-height {
    min-height: 7.5rem;
}

.lead {
    font-size: 1.125rem    
}

.list-simple {
    padding: 0 0 0 1rem
}


.list-simple.list-simple-photo {
    padding: 0;
    list-style: none;
}

.list-simple:last-of-type { margin-bottom: 0 }

.list-simple li { margin-bottom: 0.5em }
.list-simple li:last-of-type { margin-bottom: 0 }

.list-simple .badge { margin-bottom: 0.5em !important }

.card-body p > .badge { vertical-align: text-bottom; }

.photo-mini { margin-right: 0.5rem; }

/* DATATABLE CUSTOM */


table.dataTable tbody tr td {
    vertical-align: middle;
}

/*
table.dataTable tbody tr.odd td {
    background-color: #f9f9f9;
}
*/

tr.selected td {
    background-color: #a6b4cd;
}
table.dataTable.display tbody>tr.odd.selected>.sorting_1, table.dataTable.order-column.stripe tbody>tr.odd.selected>.sorting_1,
table.dataTable.display tbody > tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_1 {
    background-color: #a6b4cd;
}

table.dataTable.stripe tbody>tr.odd.selected, table.dataTable.stripe tbody>tr.odd>.selected, table.dataTable.display tbody>tr.odd.selected, table.dataTable.display tbody>tr.odd>.selected {
    background-color: #acbad4;
}

table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected {
    background-color: #b0bed9;
}

table.dataTable.order-column tbody>tr.selected>.sorting_1, table.dataTable.order-column tbody>tr.selected>.sorting_2, table.dataTable.order-column tbody>tr.selected>.sorting_3, table.dataTable.order-column tbody>tr>.selected, table.dataTable.display tbody>tr.selected>.sorting_1, table.dataTable.display tbody>tr.selected>.sorting_2, table.dataTable.display tbody>tr.selected>.sorting_3, table.dataTable.display tbody>tr>.selected {
    background-color: #a6b4cd;
}


table.dataTable tbody tr.selected, table.dataTable tbody th.selected, table.dataTable tbody td.selected {
    color: inherit;
}

table.dataTable.order-column tbody>tr.selected>.sorting_1, table.dataTable.order-column tbody>tr.selected>.sorting_2, table.dataTable.order-column tbody>tr.selected>.sorting_3, table.dataTable.order-column tbody>tr>.selected, table.dataTable.display tbody>tr.selected>.sorting_1, table.dataTable.display tbody>tr.selected>.sorting_2, table.dataTable.display tbody>tr.selected>.sorting_3, table.dataTable.display tbody>tr>.selected {
    background-color: #acbad5;
}

table.dataTable.hover tbody>tr.selected:hover, table.dataTable.hover tbody>tr>.selected:hover, table.dataTable.display tbody>tr.selected:hover, table.dataTable.display tbody>tr>.selected:hover {
    background-color: #aab7d1;
}


.dt-bootstrap5 .btn-group>.btn {
    margin-right: 3px;
}

.dt-bootstrap5 div.dt-button-background {
    background-color: rgba(0,0,0,0.3)
}


.dt-bootstrap5 .dropdown-menu {
    font-size: 0.75rem;
}

.dt-bootstrap5 div.dt-button-collection div.dropdown-menu { padding: 0 }

.dt-bootstrap5 div.dt-button-collection {
    padding: 0;
    border:none;
    overflow: hidden !important;
}

.dt-bootstrap5 div.dt-button-collection .dt-button { min-width: inherit; margin-bottom: 1px }
.dt-bootstrap5 div.dt-button-collection .dt-button:last-of-type {  margin: 0 }


table.dataTable > thead > tr > th.dt-center:not(.sorting_disabled), table.dataTable > thead > tr > td.dt-center:not(.sorting_disabled) {
    padding-left: 25px;        
    padding-right: 25px; 
}



div.dataTables_scrollBody {
    border-left: 0px solid #ddd!important;
}

table.dataTable a {
    text-decoration: none;
}


.uploadifive-button { 
    background-color: #00a8da;
    border-color: #00a8da;
    color: #fff;
    background-image: none;
    border-radius: 4px;
    font-weight: 400;
    font-size: 1rem;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    height: inherit !important;
    line-height: 1.5 !important
}


.uploadifive-button:focus, .uploadifive-button:hover {
    background-color: #293042;
    border-color: #293042;
    color: #fff;
    background-image: none;
}

.uploadifive-button:focus {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
}



.form-select[multiple] option {
    margin: 0.25rem;
}



/* CROPIE */

.config-box {

}

.config-box .crop-container {
    display: flex;
    flex-direction: column;
    width: 300px;
}

.config-box .croppie-container .cr-slider-wrap {
    text-align: center;
}

.config-box .crop-options {
    display: flex;
    justify-content: space-between;
}




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

    .content {
        padding: 1.5rem 1.5rem 1.5rem;
    }

}





/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 


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

    .navbar .navbar-collapse {
        flex-grow: 0;
    }
    
    div.dt-buttons {

    }

    .dt-bootstrap5 .btn-group>.btn {
        margin: 4px;
        border-radius: 0 !important
    }


    .sidebar {
        position: fixed;
        z-index: 99;
    }

    .card-body {
        
    }
}

i.fi {
    font-size: 1.6em;
    color: #00a8da;
    vertical-align: middle;
    line-height: 1;
    margin-right: 9px;
}