@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

:root {
    --color-primary: #12375e;/*#881B29*/;
    --color-primary-hover: #004bd6;
    --color-secondary: #ffffff;
    --color-secondary-inactive: #9b9898;
    --color-normal: #000;
    --color-action: blue;
    --color-status-sin-garantizar: #ffc107;
    --color-status-garantizado: #204d74;
    --color-status-pagado: #28a745;
    --color-status-cancelado: #dc3545;    
    --color-favorito: #ffc107;    
    --color-favorito-inactivo: #ced4da; 
    /**/
    --header-height: 3rem;
    --nav-width: 68px;
    --body-font: 'Nunito', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100
}

*,
::before,
::after {
    box-sizing: border-box
}

/* MODIFICANDO */
body {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    transition: .5s;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
}

a {
    text-decoration: none;
}
a.link {
    color: #0035f5 !important;
    text-decoration: underline !important;
}
/*Controles detail*/
#controles_detail > div.left,
#controles_detail > div.right{
    display: flex;
}
#controles_detail > div button.list-group-item{
    border: 0!important;
    cursor: pointer!important;
}

/*#nav-bar*/
.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--color-primary);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed)
}

#nav-bar.l-navbar .nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden
}

#nav-bar.l-navbar a.nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: .5rem 0 .5rem 1.5rem;
    text-decoration: none;
}

#nav-bar.l-navbar .nav_link {
    position: relative;
    color: var(--color-secondary-inactive);
    margin-bottom: 1.5rem;
    transition: .3s
}

#nav-bar.l-navbar .nav_link:hover {
    color: var(--color-secondary)
}

#nav-bar.l-navbar .nav_icon {
    font-size: 1.25rem
}

.nav_logo,
.nav_logo_min {
    padding: 5px 15px;
}

#nav-bar.l-navbar .nav_logo>img,
#nav-bar.l-navbar .nav_logo_min>img {
    width: 30px;
}
#nav-bar .active {
    color: var(--color-secondary); 
}
#nav-bar .active::before {
    content: '';
    position: absolute;
    left: 0;
    width: 5px;
    height: 32px;
    background-color: var(--color-secondary)
}
#nav-bar.show {
    left: 0
}
.height-100 {
    /* height: calc(100vh - var(--header-height) - 1rem); */
    margin-top: calc(var(--header-height));
}

/* LISTADO*/
/* Ya que estamos rompiedo la estructura de bootstrap, se define aqui */
.tr-striped {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}
/* Esta está definida aqui, ya que directamente de bootstrap estaba ganando la clase definida tr-striped definida en este archivo*/
.table-active {
    --bs-table-accent-bg: var(--bs-table-active-bg);
    color: var(--bs-table-active-color);
}

/*
.badge{
    font-size: medium;
}
*/

@media screen and (min-width: 768px) {
    .l-navbar {
        left: 0;
        padding: 1rem 1rem 0 0
    }

    #nav-bar.show {
        width: calc(var(--nav-width) + 156px)
    }

    #nav-bar .nav_logo {
        padding: 15px;
        text-align: center;
    }

    #nav-bar .nav_logo>img {
        width: 40px;
    }

    #nav-bar .nav_logo_min {
        padding: 15px;
    }

    #nav-bar .nav_logo_min>img {
        width: 30px;
    }  
    
}

.bg-status_sin_garantizar{
    background-color: var(--color-status-sin-garantizar);
    color: white;
}
.bg-status_garantizado{
    background-color: var(--color-status-garantizado);
    color: white;
}
.bg-status_pagado{
    background-color: var(--color-status-pagado);
    color: white;
}
.bg-status_cancelado{
    background-color: var(--color-status-cancelado);
    color: white;
}

.text-status_sin_garantizar{
    color: var(--color-status-sin-garantizar);
}
.text-status_garantizado{
    color: var(--color-status-garantizado);
}
.text-status_pagado{
    color: var(--color-status-pagado);
}
.text-status_cancelado{
    color: var(--color-status-cancelado);
}

.bg-color-primary{
    background-color: var(--color-primary);
    color: var(--color-secondary);
}
.bg-color-primary:hover{
    background-color: var(--color-primary-hover);
}
.bg-color-secondary{
    background-color: var(--color-secondary);
}
.bg-color-secondary-inactive{
    background-color: var(--color-secondary-inactive);
}
.bg-color-normal{
    background-color: var(--color-normal);
}
.bg-color-action{
    background-color: var(--color-action);
}


.btn-normal{
    background-color: var(--color-normal);
    color: black;
}
.btn-action{
    background-color: var(--color-primary);
    color: white;
}

/*Table*/
.table th {
    vertical-align: top;
}
.table td {
    vertical-align: middle;
}

/*Table Sort*/
table > thead th.sorting_desc:after {
    position: relative!important;
    opacity: 1!important;
    display: inline-block!important;
    width: 0.75rem;
    height: 0.75rem;
    content: " "!important;
    bottom: auto;
    right: auto!important;
    left: auto;
    margin-left: 0.5rem;
    opacity: 1;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-color: var(--text-muted);
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' fill='var%28--bs-text-muted%29'%3e%3cpath d='M2.76429 3.27989L1.02083 1.53642C0.848244 1.36382 0.568419 1.36383 0.395831 1.53642C0.223244 1.70901 0.223244 1.98882 0.395831 2.16139L2.70537 4.47096C2.86808 4.63371 3.13191 4.63371 3.29462 4.47096L5.60419 2.16139C5.77675 1.98883 5.77675 1.70901 5.60419 1.53642C5.43156 1.36383 5.15175 1.36383 4.97919 1.53642L3.23571 3.27989C3.10554 3.41006 2.89446 3.41006 2.76429 3.27989Z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' fill='var%28--bs-text-muted%29'%3e%3cpath d='M2.76429 3.27989L1.02083 1.53642C0.848244 1.36382 0.568419 1.36383 0.395831 1.53642C0.223244 1.70901 0.223244 1.98882 0.395831 2.16139L2.70537 4.47096C2.86808 4.63371 3.13191 4.63371 3.29462 4.47096L5.60419 2.16139C5.77675 1.98883 5.77675 1.70901 5.60419 1.53642C5.43156 1.36383 5.15175 1.36383 4.97919 1.53642L3.23571 3.27989C3.10554 3.41006 2.89446 3.41006 2.76429 3.27989Z'/%3e%3c/svg%3e");
}
table > thead th.sorting_asc:after {
    opacity: 1;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-color: var(--text-muted);
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' fill='var%28--bs-text-muted%29'%3e%3cpath d='M3.23571 2.72011L4.97917 4.46358C5.15176 4.63618 5.43158 4.63617 5.60417 4.46358C5.77676 4.29099 5.77676 4.01118 5.60417 3.83861L3.29463 1.52904C3.13192 1.36629 2.86809 1.36629 2.70538 1.52904L0.395812 3.83861C0.22325 4.01117 0.22325 4.29099 0.395812 4.46358C0.568437 4.63617 0.84825 4.63617 1.02081 4.46358L2.76429 2.72011C2.89446 2.58994 3.10554 2.58994 3.23571 2.72011Z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' fill='var%28--bs-text-muted%29'%3e%3cpath d='M3.23571 2.72011L4.97917 4.46358C5.15176 4.63618 5.43158 4.63617 5.60417 4.46358C5.77676 4.29099 5.77676 4.01118 5.60417 3.83861L3.29463 1.52904C3.13192 1.36629 2.86809 1.36629 2.70538 1.52904L0.395812 3.83861C0.22325 4.01117 0.22325 4.29099 0.395812 4.46358C0.568437 4.63617 0.84825 4.63617 1.02081 4.46358L2.76429 2.72011C2.89446 2.58994 3.10554 2.58994 3.23571 2.72011Z'/%3e%3c/svg%3e");
    position: relative!important;
    opacity: 1!important;
    display: inline-block!important;
    width: 0.75rem;
    height: 0.75rem;
    content: " "!important;
    bottom: auto;
    right: auto!important;
    left: auto;
    margin-left: 0.5rem;
}
/*Devide*/
@media screen and (min-width: 1200px) {
    .devide > .devide-1 {
        padding-right: 1rem !important;
    }
}

/*SWAL*/
[class^=swal2] button.swal2-confirm,
[class^=swal2] button.swal2-deny,
[class^=swal2] button.swal2-cancel {
    margin: 0 10px;
}
[class^=swal2] button.swal2-close {
    height: initial;
    padding: initial;
}

/*TABS*/
.nav:before {
    display: table;
    content: " ";
}
.nav-tabs>li {
    float: left;
    margin-bottom: -1px;
}
.nav>li {
    position: relative;
    display: block;
}
.nav-tabs>li>a.active,
.nav-tabs>li>a.active:focus,
.nav-tabs>li>a.active:hover {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}
.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}
.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.tab-content .card {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/*VERTICAL RULE*/
.vr {
    display: inline-block;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background-color: currentColor;
    opacity: .25;
}
/*GAP*/
.vr {
    display: inline-block;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background-color: currentColor;
    opacity: .25;
}
.gap-1 {
    gap: .25rem!important;
}
.gap-2 {
    gap: .5rem!important;
}
.gap-3 {
    gap: 1rem!important;
}
.gap-4 {
    gap: 1.25rem!important;
}
.gap-5 {
    gap: 1.5rem!important;
}
/*BADGE*/
.badge.badge-circle,.badge.badge-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    min-width: 1.75rem;
    padding: 0 .1rem
}

.badge.badge-circle {
    border-radius: 50%;
    padding: 0;
    min-width: unset;
    width: 1.75rem
}

.badge.badge-sm {
    min-width: 1.5rem;
    font-size: .85rem
}

.badge.badge-sm.badge-circle {
    width: 1.5rem;
    height: 1.5rem
}

.badge.badge-lg {
    min-width: 2rem;
    font-size: 1rem
}

.badge.badge-lg.badge-circle {
    width: 2rem;
    height: 2rem
}

.badge-white {
    color: #7e8299;
    background-color: #fff
}

.badge-light-white {
    color: #fff
}

.badge-light {
    color: #7e8299;
    background-color: #f5f8fa
}

.badge-light-light {
    color: #f5f8fa
}

.badge-primary {
    color: #fff;
    background-color: #4a97a7
}

.badge-light-primary {
    color: #4a97a7;
    background-color: #f1faff
}

.badge-secondary {
    color: #3f4254;
    background-color: #e4e6ef
}

.badge-light-secondary {
    color: #e4e6ef
}

.badge-success {
    color: #fff;
    background-color: #50cd89
}

.badge-light-success {
    color: #50cd89;
    background-color: #e8fff3
}

.badge-info {
    color: #fff;
    background-color: #7239ea
}

.badge-light-info {
    color: #7239ea;
    background-color: #f8f5ff
}

.badge-warning {
    color: #fff;
    background-color: #ffc700
}

.badge-light-warning {
    color: #ffc700;
    background-color: #fff8dd
}

.badge-danger {
    color: #fff;
    background-color: #f1416c
}

.badge-light-danger {
    color: #f1416c;
    background-color: #fff5f8
}

.badge-dark {
    color: #fff;
    background-color: #181c32
}

.badge-light-dark {
    color: #181c32;
    background-color: #eff2f5
}
/*MODAL*/
.modal.show{
    overflow: auto;
}