:root {
    /* ===== Colors ===== */
    --primary-color: #091D3E;
    --primary-color-rgb: 9, 29, 62;
    --primary-color-focus: rgba(var(--primary-color-rgb),0.8);
    --primary-color-icon: rgba(var(--primary-color-rgb),0.2);
    --secondary-color: #52495a;
    --tertiary-color: #757575;
    --primary-color-light: #091D3EE0;
    --body-color: #ffffff;
    --sidebar-color: #fff;
    --topbar-color: rgba(var(--primary-color-rgb),0.9);
    --toggle-color: var(--sidebar-color);
    --text-color: #424242;
    --text-topbar-color: #fff;
    --text-color-header-table: #fff;
    --header-table: #091D3E;
    --light-color: #E4E9F7;
    --light-gray-color: #e0e0e0;
    --gray-color: #bbbbbb;
    --table-light-color: #f8f8f8;
    --middle-color: #E24242;
    --dark-color: #332e38;
    --success-color: #4caf50;
    --danger-color: #E24242;
    --sidebar-widht-close: 60px;
    --sidebar-widht: 240px;
    --disabled-input: #f3f3f3;
    --hover-notification: #E4E9F7;
    --reserva-rechazada: orange;
    --tarifa-invalida: lightblue;
    --reserva-prefacturada: yellow;
    --reserva-estimada: lightseagreen;
    --concepto-cob-pag: lightgreen;
    --concepto-fact: lightblue;
    --concepto-pref-est: yellow;
    --concepto-canc-nc: lightpink;
    --proyecto-sin-verificar: #5a3b00;
    --proyecto-roleado: #6a6a00;
    /* ====== Transition ====== */
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: rgba(120, 120, 120, 0.3);
}

::selection {
    background-color: var(--primary-color);
    color: #fff;
}

hr {
    border-top: var(--bs-border-width) solid var(--toggle-color);
}

div.dt-container div.dt-length, div.dt-container div.dt-info, div.dt-container div.dt-paging {
    padding: 5px 0;
}

div.dt-container div.dt-paging button.dt-paging-button {
    border-color: var(--light-gray-color);
    color: var(--primary-color) !important;
}

    div.dt-container div.dt-paging button.dt-paging-button:hover,
    div.dt-container div.dt-paging button.dt-paging-button.current:hover {
        background: var(--primary-color) !important;
        border-color: var(--primary-color);
        color: var(--light-color) !important;
    }

    div.dt-container div.dt-paging button.dt-paging-button.disabled {
        border-color: var(--light-color);
        background: none;
        color: var(--gray-color) !important;
    }

        div.dt-container div.dt-paging button.dt-paging-button.disabled:hover {
            border-color: var(--light-color);
            background: none !important;
            color: var(--gray-color) !important;
        }

    div.dt-container div.dt-paging button.dt-paging-button.current {
        border-color: var(--primary-color);
        background: none;
        color: var(--primary-color) !important;
    }


.btn {
    font-size: 14px;
}

.btn-primary {
    border-color: #ffffff;
    background-color: var(--primary-color);
    color: white !important;
}


.btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-secondary {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.btn-outline-tertiary {
    border-color: var(--tertiary-color);
    color: var(--tertiary-color);
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem var(--primary-color-focus);
}

.btn-primary:hover {
    box-shadow: 0 0px 10px 0px #fff;
    background-color: var(--primary-color);
    border-color: #fff;
}

.btn-outline-primary:hover {
    box-shadow: 0 8px 25px -8px var(--primary-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color)
}

.btn-outline-secondary:hover {
    box-shadow: 0 8px 25px -8px var(--secondary-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-outline-tertiary:hover {
    box-shadow: 0 8px 25px -8px var(--tertiary-color);
    background-color: var(--tertiary-color);
    border-color: var(--tertiary-color)
}

.btn-outline-danger:hover {
    box-shadow: 0 8px 25px -8px var(--danger-color);
    background-color: var(--danger-color);
    border-color: var(--danger-color)
}

.btn-outline-success:hover {
    box-shadow: 0 8px 25px -8px var(--success-color);
    background-color: var(--success-color);
    border-color: var(--success-color)
}

.form-check:focus, .form-select:focus, .form-control:focus {
    /*color: var(--text-color);
    background-color: var(--primary-color-light);*/
    border-color: var(--primary-color-focus);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(102, 51, 153, 0.25);
}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--dark-color);
}

.titulos h3 i {
    font-size: 2.2rem;
    vertical-align: text-bottom;
}


h1,
.h1 {
    font-size: 2.0325rem;
}

h2,
.h2 {
    font-size: 1.626rem;
}

h3,
.h3 {
    font-size: 1.42275rem;
}


h4,
.h4 {
    font-size: 1.2195rem;
}

h5,
.h5 {
    font-size: 1.01625rem;
}

h6,
.h6 {
    font-size: 0.813rem;
}

body.dark {
    --primary-color: #1f66e0;
    --body-color: #18191a;
    --sidebar-color: #242526;
    --topbar-color: #242526;
    --primary-color-light: #3a3b3c;
    --primary-color-icon: rgba(var(--primary-color-rgb),0.8);
    --toggle-color: #fff;
    --text-color: #ccc;
    --text-topbar-color: #ccc;
    --light-color: #2c2e30;
    --dark-color: #e9e9e9;
    --disabled-input: #222222;
    --hover-notification: #000;
    --header-table: #242526;
    --reserva-rechazada: #5a3b00;
    --tarifa-invalida: #354b51;
    --reserva-prefacturada: #6a6a00;
    --reserva-estimada: lightseagreen;
    --concepto-cob-pag: #3c643c;
    --concepto-fact: #354b51;
    --concepto-pref-est: #6a6a00;
    --concepto-canc-nc: #604449;
}



.separator-breadcrumb {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}


.border-bottom-primary {
    border-bottom: 2px solid var(--primary-color) !important;
    --bs-card-spacer-y: 0rem;
    --bs-card-spacer-x: 0rem;
}

.text-primary {
    color: var(--primary-color) !important;
}

.text-success {
    color: var(--success-color) !important;
}

.card-icon-bg .card-body {
    display: flex;
}

.card-icon-bg i {
    font-size: 4rem;
    padding: 10px 20px;
}

.icon-primary [class^="i-"] {
    color: var(--primary-color-icon);
}

.card-icon i {
    display: block;
    font-size: 3rem;
    padding: 30px;
}

.card-icon.icon-primary i {
    color: var(--primary-color);
}

table {
    width: 100% !important;
}

.card-group {
    margin-bottom: var(--bs-card-title-spacer-y);
}

.card {
    border-radius: 10px;
    box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.08);
    border: 0;
}

.close-menu {
    --sidebar-widht-close: 0px;
    --sidebar-widht: 0px;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 400;
    font-family: 'Nunito', sans-serif;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--sidebar-widht);
    background: var(--sidebar-color);
    z-index: 100;
    transition: var(--tran-05);
    box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.08);
}

    .sidebar.close {
        width: var(--sidebar-widht-close);
    }

    .sidebar .logo-details {
        justify-content: space-around;
        height: var(--sidebar-widht-close);
        width: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .sidebar .logo-details .logotipo {
        margin-left: 5px;
        content: url('../img/logo_negro.png');
    }

    body.dark .sidebar .logo-details .logotipo {
        content: url('../img/logo_blanco.png');
    }
   
    /*Portal cliente*/
    .sidebar .logo-details .south-atlantic {
        margin-left: 5px;
        content: url('../img/logo_south_atlantic.png');
    }

    body.dark .sidebar .logo-details .south-atlantic {
        content: url('../img/logo_south_atlantic_blanco.png');
    }

    .sidebar.close .logo-details .south-atlantic {
        margin-left: 5px;
        content: url('../img/logo_south_atlantic_square.png');
    }

body.dark .sidebar.close .logo-details .south-atlantic {
    content: url('../img/logo_south_atlantic_blanco_square.png');
}
    /****************/

    .sidebar .nav-links {
        height: calc(100vh - 175px);
        padding: 30px 0 0 0;
        overflow: auto;
    }

    .sidebar.close .nav-links {
        overflow: visible;
    }

        .sidebar.close .nav-links li .sub-menu.config {
            height: 250px;
            overflow-y: scroll;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

            .sidebar.close .nav-links li .sub-menu.config::-webkit-scrollbar {
                display: none;
            }

    .sidebar .nav-links-bottom {
        padding: 0 !important;
    }

    .sidebar .nav-links::-webkit-scrollbar {
        /*display: none;*/
        height: 0;
    }

    .sidebar .nav-links li {
        position: relative;
        list-style: none;
        transition: var(--tran-04);
    }

        .sidebar .nav-links li:hover {
            background: var(--primary-color);
        }

       /* .sidebar .nav-links li.mode:hover {
            background: var(--primary-color-light);
        }*/

        .sidebar .nav-links li:hover i,
        .sidebar .nav-links li:hover .link_name,
        .sidebar .nav-links li:hover .sub-menu a {
            color: #fff;
            opacity: 1;
        }

        .sidebar .nav-links li.mode:hover .link_name,
        .sidebar .nav-links li.mode:hover .sub-menu a {
            color: var(--text-color);
        }

        .sidebar .nav-links li.mode .moon {
            color: var(--body-color);
        }

        .sidebar .nav-links li.mode:hover .sun {
            color: transparent;
        }

body.dark .nav-links li.mode:hover .sun {
    color: var(--text-color);
}

body.dark .sidebar .nav-links li.mode:hover {
    background: var(--primary-color-light);
}

body.dark .sidebar .nav-links li:hover i,
body.dark .sidebar .nav-links li:hover .link_name,
body.dark .sidebar .nav-links li:hover .sub-menu a {
    color: var(--text-color);
}

.sidebar .nav-links li .icon-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar.close .nav-links li .icon-link {
    display: block;
}

.sidebar.close .nav-links li.mode .icon-link {
    display: flex;
}

.sidebar .nav-links li i {
    height: 50px;
    min-width: var(--sidebar-widht-close);
    text-align: center;
    line-height: 50px;
    color: var(--text-color);
    font-size: 20px;
    cursor: pointer;
    transition: var(--tran-03);
}

.sidebar .nav-links li.showMenu i.arrow {
    transform: rotate(-180deg);
}

.sidebar.close .nav-links i.arrow {
    display: none;
}

.sidebar .nav-links li a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

    .sidebar .nav-links li a .link_name {
        font-size: 15px;
        color: var(--text-color);
        transition: var(--tran-04);
        white-space: nowrap;
        max-width: 114px;
        overflow: hidden;
    }

.sidebar.close .nav-links li a .link_name {
    opacity: 0;
    pointer-events: none;
}

.sidebar .nav-links li .sub-menu {
    padding: 6px 6px 14px 60px;
    margin-top: -10px;
    display: none;
}

.sidebar .nav-links li.showMenu .sub-menu {
    display: block;
}

.sidebar .nav-links li .sub-menu a {
    color: var(--text-color);
    font-size: 15px;
    padding: 5px 0;
    white-space: nowrap;
    transition: var(--tran-03);
}

    .sidebar .nav-links li .sub-menu a:hover {
        color: var(--light-gray-color);
    }

.sidebar.close .nav-links li .sub-menu {
    position: absolute;
    left: 100%;
    top: -10px;
    margin-top: 0;
    padding: 10px 20px;
    border-radius: 0 6px 6px 0;
    opacity: 0;
    display: block;
    pointer-events: none;
    transition: 0s;
}

.sidebar.close .nav-links li:hover .sub-menu {
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transition: var(--tran-04);
    background-color: var(--primary-color);
}

.sidebar .nav-links li .sub-menu .link_name {
    display: none;
}

.sidebar.close .nav-links li .sub-menu .link_name {
    font-size: 15px;
    opacity: 1;
    display: block;
}

.sidebar .nav-links li .sub-menu.blank {
    opacity: 0;
    pointer-events: auto;
    padding: 3px 20px 6px 16px;
    pointer-events: none;
}

.sidebar .nav-links li:hover .sub-menu.blank {
    top: 50%;
    transform: translateY(-50%);
}

.sidebar .profile-details {
    position: fixed;
    bottom: 0;
    width: var(--sidebar-widht);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--primary-color-light);
    padding: 12px 0;
    transition: var(--tran-05);
}

.sidebar.close .profile-details {
    background: none;
}

.sidebar.close .profile-details {
    width: var(--sidebar-widht-close);
}

.sidebar .profile-details .profile-content {
    display: flex;
    align-items: center;
}

.sidebar .profile-details img {
    height: 52px;
    width: 52px;
    object-fit: cover;
    border-radius: 16px;
    margin: 0 14px 0 12px;
    background: var(--primary-color-light);
    transition: var(--tran-05);
}

.sidebar.close .profile-details img {
    padding: 10px;
}

.sidebar .profile-details .profile_name,
.sidebar .profile-details .job {
    color: var(--text-color);
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
}

.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job {
    display: none;
}

.sidebar .profile-details .job {
    font-size: 12px;
}

.home-section {
    position: relative;
    background: var(--body-color);
    color: var(--text-color);
    min-height: 100vh;
    left: var(--sidebar-widht);
    width: calc(100% - var(--sidebar-widht));
    transition: var(--tran-05);
}

.sidebar.close ~ .home-section {
    left: var(--sidebar-widht-close);
    width: calc(100% - var(--sidebar-widht-close));
}

.home-section .render-body {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--topbar-color);
}

.menu-usuarios {
    display: flex;
    align-items: center;
}

.menu-usuarios i {
    font-style:inherit;
}

.a-menu {
    color: var(--text-topbar-color);
    text-decoration: none;
    padding-right: 8px;
}

.home-section .render-body .bx-menu {
    color: var(--text-topbar-color);
    margin: 0 15px;
    cursor: pointer;
    font-size: 35px;
}

.home-section .render-body .text {
    color: var(--text-topbar-color);
    font-size: 26px;
}

@media (max-width: 700px) {
    /*.sidebar.close .nav-links li .sub-menu {
        display: none;
    }*/

    .sidebar {
        width: var(--sidebar-widht-close);
    }

        .sidebar.close {
            width: 0;
        }

    .home-section {
        left: var(--sidebar-widht-close);
        width: calc(100% - var(--sidebar-widht-close));
        z-index: 100;
    }

    .sidebar.close ~ .home-section {
        width: 100%;
        left: 0;
    }
}

.bottom-content .toggle-switch {
    height: 100%;
    min-width: var(--sidebar-widht-close);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 14px 0;
}

.toggle-switch .switch {
    position: relative;
    height: 22px;
    width: 40px;
    border-radius: 25px;
    background-color: var(--toggle-color);
    transition: var(--tran-03);
}

.mode .sun-moon i {
    position: absolute;
}

    .mode .sun-moon i.sun {
        opacity: 0;
    }

body.dark .mode .sun-moon i.sun {
    opacity: 1;
}

body.dark .mode .sun-moon i.moon {
    opacity: 0;
}

.mode .sun-moon {
    height: 50px;
    width: 60px;
}

.sidebar.close .mode .sun-moon {
    display: none;
}

.bottom-content {
    height: 100%
}

.switch::before {
    content: '';
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    background-color: var(--topbar-color);
    transition: var(--tran-03);
}

body.dark .switch::before {
    left: 20px;
}

.sidebar .mode {
    background-color: var(--primary-color-light);
    position: relative;
    transition: var(--tran-03);
}

body.dark .sidebar header .toggle {
    color: var(--text-color);
}

main {
    padding: 1rem 0.7rem;
}

.dtfc-right-top-blocker {
    top: 5px !important;
}

body.dark .dtfc-right-top-blocker {
    background-color: var(--light-color);
}

body.dark td.dtfc-fixed-right {
    background-color: var(--light-color) !important;
}

table {
    font-size: 0.8rem;
}

.btn-table {
    opacity: 0.5;
    padding-left: 5px;
    padding-right: 5px;
    cursor: pointer;
    text-decoration: none;
}

    .btn-table:hover {
        opacity: 1;
    }

    .btn-table.success {
        color: var(--success-color);
    }

    .btn-table.danger {
        color: var(--danger-color);
    }

table > thead > tr > th {
    color: var(--text-color-header-table);
    background-color: var(--header-table) !important;
}

table.table-bordered.dataTable th,
table.table-bordered.dataTable td {
    border: none
}

.table.datatable tbody tr td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

.table.datatable thead tr th {
    white-space: nowrap;
}

table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > th.sorting_asc_disabled:after,
table.dataTable thead > tr > th.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_desc_disabled:after {
    font-size: .5em !important;
    font-family: 'Line Awesome Free' !important;
    opacity: 0.8 !important;
    content: '\f107' !important;
}



table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > th.sorting_desc_disabled:before,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:before {
    font-size: .5em !important;
    font-family: 'Line Awesome Free' !important;
    opacity: 0.8 !important;
    content: '\f106' !important;
}


table.dataTable.row-border > tbody > tr > th,
table.dataTable.row-border > tbody > tr > td,
table.dataTable.display > tbody > tr > th,
table.dataTable.display > tbody > tr > td {
    border: none !important
}

div.dt-processing > div:last-child > div {
    background-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
}


.dt-paging button {
    font-size: 12px;
}

input::placeholder {
    color: rgb(196, 196, 196) !important;
}

.form-check {
    width: 2rem;
}
/*
main .titulos h3 {
    text-transform: capitalize;
}*/

/* Works on Firefox */
.scroll-cs * {
    scrollbar-width: thin;
    scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */
.scroll-cs::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scroll-cs::-webkit-scrollbar-track {
    border-radius: 10px;
    border: 1px solid #C0C0C0;
    background-color: #F5F5F5;
}

.scroll-cs::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 10px;
}

.dt-search{
    margin-bottom: 0.5rem;
}

input[type="text"]:read-only,
input[type="email"]:read-only,
input[type="number"]:read-only,
input[type="date"]:read-only,
input[type="datetime-local"]:read-only,
textarea:read-only,
.read-only-select{
    background-color: var(--bs-secondary-bg);
}

.style-card {
    background-color: #000000bb;
    color: #fff;
}

    .style-card .form-group {
        margin-top: 10px
    }

        .style-card .form-group .field-validation-error {
            color: #ff9292 !important;
        }

.title-card {
    color: #fff;
}

a.link-forgot-password {
    color: #fff;
    text-decoration: none;
}

    a.link-forgot-password:hover {
        color: var(--tertiary-color);
    }

.border-button {
    border: 1px solid #fff
}

div.text-color-danger {
    color: #ff9292 !important;
}

.sorting_disabled {
    text-wrap: nowrap;
}

.table-price {
    text-align: right;
}

.grecaptcha-badge
{
    display: none;
}