:root{

    /* ---------- COLOR ---------- */

    --c-primary-000: #f9fafb;
    --c-primary-050: #edf6f8;
    --c-primary-100: #CFE2E8;
    --c-primary-200: #9ec5d1;
    --c-primary-300: #6A9DB2;
    --c-primary-400: #357593;
    --c-primary-500: #28607F;
    --c-primary-600: #1B4A6A;
    --c-primary-700: #0E3456;
    --c-primary-800: #001e41;
    --c-primary-900: #050F16;

    --c-secondary-200: #DADADA;
    --c-secondary-300: #B5B5B5;
    --c-secondary-400: #6a6a6a;
    --c-secondary-500: #383B3D;
    --c-secondary-600: #1F2426;

    --c-danger: #eb7d93;
    /* ---------- TIPOGRAFIA ---------- */

    --ff-main: "Ubuntu Regular", sans-serif;
    --ff-bold: "Ubuntu Bold", sans-serif;
    --fs-400: 0.9rem;

    /* ---------- OTROS ---------- */

    --max-width: 2000px;
    
    --br-main: .5rem;

    --border-main: 2px solid var(--c-primary-100);
    --shadow-main: 0px 0px 20px 0px hwb(205 2% 91% / 0.05);
}

/* Scrollbar Width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
  
/* Scrollbar Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: var(--br-main);

}

/* Scrollbar Handle */
::-webkit-scrollbar-thumb {
background: var(--c-primary-200);
border-radius: var(--br-main);
}

/* Scrollbar Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--c-primary-300);
}

*{
    box-sizing: border-box;
}

button{
    cursor: pointer;
}

body{
    font-family: var(--ff-main);
    font-size: var(--fs-400);

    margin: 0;
    padding: 0;

    color: var(--c-secondary-600);

    background-color: var(--c-primary-000);
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

img{
    max-width: 100%;
    display: block;
}

p, h1, h2, h3, h4, a, button{
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-transform: none;
    text-decoration: none;
}

.main__tab{
    display: none;    
}

.main__tab.active{
    position: relative;
    display: block;
    z-index: 1;
}

.header{
    width: 100%;
}

.nav{
    width: 90%;
    max-width: var(--max-width);
    /* background-color: white; */
    padding: 1rem 0;
    margin: 1.5rem auto .25rem;
    /* border-radius: var(--br-main); */
    /* border-bottom: var(--border-main); */
    color: var(--c-primary-300);
}

.nav__burger{
    display: none;
}

.nav__ul{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.nav__li{
    margin: 0 .75rem ;
}

.logo {
    max-width: 150px;
    margin: 0 2rem;
}

.logo a{
}

.nav__a{
    letter-spacing: .5px;
    font-weight: bold;
    padding: .5rem 1.5rem;
    display: block;
    /* border: var(--border-main); */
    border-radius: var(--br-main);

    color: var(--c-primary-400);
    border: var(--border-main);
    background-color: white;

    transition: border .3s ease;
}

.nav__a i{
    display: none;
}

.nav__a:hover{
    border-color: var(--c-primary-300);
}

.nav__li.active .nav__a{
    color: white;
    border-color: var(--c-primary-400);
    background-color: var(--c-primary-400);
}

.nav__logo--mov{
    display: none;
}

.main{
    --circle-size: 3rem;
    --circle-size-sm: 1.25rem;

    position: relative;

    width: 90%;
    max-width: var(--max-width);
    min-height: 70vh;
    margin: 0 auto;
    border-radius: var(--br-main);

    background-color: white;
    border: var(--border-main);

    padding: 3rem;
}

.main::before{
    --bkg-pseudo: white;
    --bkg-pseudo-sec: var(--c-primary-400);

    content: '';
    display: block;
    width: var(--circle-size);
    height: var(--circle-size);
    background-color: white;
    border: var(--border-main);

    position: absolute;
    top: calc((var(--circle-size) / 2) * -1);
    right: 5%;

    border-radius: 50%;
    z-index: 1;
}

.main::after{
    --bkg-active: var(--c-primary-100);
    --transparent: transparent;

    content: '';
    display: block;
    width: var(--circle-size-sm);
    height: var(--circle-size-sm);
    background-color: var(--c-primary-000);
    border: var(--border-main);

    position: absolute;
    top: calc((var(--circle-size-sm) / 2) * -1 );
    right: calc( 5% + ((var(--circle-size) - var(--circle-size-sm)) / 2));

    border-radius: 50%;
    z-index: 1;
}

.main.load::before, .main.load::after{
    animation: circle-animation 15.5s ease 0s 1 normal both;
}

.main__header{
    padding-bottom: .5rem;
    margin-bottom: 1rem;

    border-bottom: var(--border-main);
    /* border-color: var(--c-primary-400); */
    color: var(--c-primary-400);

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.main__title{
    font-size: 2rem;
}

.main__title i{
    font-size: .95em;
    margin-right: .15em;
}

.main__title + p{
    display: none;
}

.main__title + p.active{
    display: block;
}

@property --a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@property --b {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.main__animation{
    position: absolute;
    top: -1.5px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 3px);
    border-radius: var(--br-main);
    background-color: var(--c-primary-400);
    background-image: conic-gradient( at 95% 50% , var(--c-primary-200) var(--b), var(--c-primary-400) var(--a));
    box-shadow: 0 0 15px 0 var(--c-primary-200);

    display: none;
}

.main__cover-animation{
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background-color: white;
    border-radius: .25rem;
}

.main__animation.load{
    --min: -10px;
    --max: calc(100% + 10px);
    --med: 95%;

    display: block;

    clip-path: polygon(50% 50%, var(--med) var(--min), var(--med) var(--min), var(--med) var(--min), var(--med) var(--min), var(--med) var(--min), var(--med) var(--min));
    pointer-events: none;

    animation: path-line-animation 15s ease-in-out .5s 1 normal both;
}

@keyframes circle-animation{
    0%{
        border-color: var(--c-primary-100);
        background-color: var(--bkg-pseudo, var(--c-primary-000));
    }
    6%{
        border-color: var(--c-primary-400);
        background-color: var(--bkg-pseudo-sec, var(--c-primary-000));

    }
    20%{
        background-color: var(--bkg-pseudo-sec, var(--c-primary-000));
    }
    50%{
        background-color: var(--bkg-pseudo-sec, var(--c-primary-000));
        box-shadow: 0px 0px 0px 4px transparent, 0px 0px 0px 7px transparent;
    }
    52%{
        background-color: var(--bkg-active, var(--bkg-pseudo-sec));
        box-shadow: 0px 0px 0px 6px var(--transparent, white), 0px 0px 0px 9px var(--transparent, var(--c-primary-400));
    }
    56%{
        box-shadow: 0px 0px 5px 15px transparent, 0px 0px 5px 15px transparent;
    }
    97%{
        border-color: var(--c-primary-400);
        background-color: var(--bkg-pseudo-sec, var(--bkg-active));
    }
    100%{
        border-color: var(--c-primary-100);
        background-color: var(--bkg-pseudo, var(--c-primary-000));
    }
}

@keyframes path-line-animation {
    0%{
        clip-path: polygon(50% 50%, var(--med) var(--min), var(--med) var(--min), var(--med) var(--min), var(--med) var(--min), var(--med) var(--min), var(--med) var(--min));
    }
    2.5%{
        clip-path: polygon(50% 50%, var(--med) var(--min), var(--max) var(--min), var(--max) var(--min), var(--max) var(--min), var(--max) var(--min), var(--max) var(--min));
    }
    15%{
        clip-path: polygon(50% 50%, var(--med) var(--min), var(--max) var(--min), var(--max) var(--max), var(--max) var(--max), var(--max) var(--max), var(--max) var(--max));
    }
    27.5%{
        clip-path: polygon(50% 50%, var(--med) var(--min), var(--max) var(--min), var(--max) var(--max), var(--min) var(--max), var(--min) var(--max), var(--min) var(--max));
    }
    40%{
        clip-path: polygon(50% 50%, var(--med) var(--min), var(--max) var(--min), var(--max) var(--max), var(--min) var(--max), var(--min) var(--min), var(--min) var(--min));
    }
    45%{
        --a : 0deg;
    }
    50%{
        clip-path: polygon(50% 50%, var(--med) var(--min), var(--max) var(--min), var(--max) var(--max), var(--min) var(--max), var(--min) var(--min),  var(--med) var(--min));
        --b: 0deg;
    }
    52.5%{
        clip-path: polygon(50% 50%, var(--max) var(--min), var(--max) var(--min), var(--max) var(--max), var(--min) var(--max), var(--min) var(--min),  var(--med) var(--min));
    }
    65%{
        clip-path: polygon(50% 50%, var(--max) var(--max), var(--max) var(--max), var(--max) var(--max), var(--min) var(--max), var(--min) var(--min),  var(--med) var(--min));
        --a : 360deg;
    }
    77.5%{
        clip-path: polygon(50% 50%, var(--min) var(--max), var(--min) var(--max), var(--min) var(--max), var(--min) var(--max), var(--min) var(--min),  var(--med) var(--min));
    }
    90%{
        clip-path: polygon(50% 50%, var(--min) var(--min), var(--min) var(--min), var(--min) var(--min), var(--min) var(--min), var(--min) var(--min),  92% var(--min));
    }
    100%{
        clip-path: polygon(50% 50%, var(--med) var(--min), var(--med) var(--min), var(--med) var(--min), var(--med) var(--min), var(--med) var(--min),  var(--med) var(--min));
        --b: 360deg;
    }
}

@keyframes gradient {
    
}

.main__animation::before, .main__animation::after{
    border-color: var(--c-primary-400);
}

@media screen and (max-width: 1190px){
    /* .main::before, .main::after{
        display: none;
    } */
}

@media screen and (max-width: 990px) {
    .nav{
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding: .5rem 0;
    }

    .nav__li{
        margin: 0 .25rem;
    }

    .logo{
        margin: 0 1.5rem;
    }

    .nav__a span{
        display: none;
    }

    .nav__a{
        cursor: pointer;
        font-size: 1.15rem;
        padding: .5rem;
    }

    .nav__a i{
        display: block;
    }
}

@media screen and (max-width: 700px){
    .nav{
        justify-content: space-between;
        margin-bottom: 1.5rem;
    }

    .logo{
        display: none;
    }

    .nav__ul{
        margin-left: 5%;
    }

    .nav__logo--mov{
        display: block;
        max-width: 125px;
        margin: 0;
        flex-shrink: 0;
    }
}

th i{
    margin-right: .5em;
}

.main__asset-button, .main__asset-trace{
    background-color: transparent;
    border: none;
    cursor: pointer;

    margin-right: .5em;
    transition: margin .3s ease;
}

.main__asset-button:hover, .main__asset-trace:hover{
    text-decoration: underline;
}
/* 
.main__asset-button i, .main__asset-track i{
    margin-right: .5em;
    transition: margin .3s ease;
}

.main__asset-button:hover i, .main__asset-track:hover i{
    margin-right: 1em;
} */

/* td[headers="asset-trace"], td[headers="people-trace"], #asset-trace, #people-trace{
    text-align: right;
} */

td[headers="asset-tag-id"], td[headers="people-tag-id"]{
    font-family: var(--ff-bold);
}

.main td[headers="asset-trace"] i, .main td[headers="people-trace"] i{
    display: none;
}

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

    .main__title{
        font-size: 1.5rem;
    }

    .main{
        /* padding: 1.5rem; */
    }

    .main th i{
        display: none;
    }

    .main td[headers="asset-trace"] i, .main td[headers="people-trace"] i{
        display: block;
    }

    .main td[headers="asset-trace"] span, .main td[headers="people-trace"] span{
        display: none;
    }

    .main td[headers="asset-trace"], .main td[headers="people-trace"]{
        text-align: center;
        width: 50px;
    }
    
}

/* --------------TABLES--------------- */

body{
    /* padding-top: 2rem; */
}

#table_wrapper{
    padding-top: 2rem;
}

table.dataTable.no-footer{
    /* border-bottom: var(--border-main); */
    border-bottom: none;
}

.select-info{
    display: none;
}


.dataTables_wrapper .dataTables_length{
    /* position: absolute;
    bottom: -1.75rem;
    left:0; */
    margin-left: .5rem;
    padding-top: .85em;
}

div.dataTables_wrapper div.dataTables_paginate{
    float: right;
    padding-top: 1em;
}

.paginate_button.disabled{
    display: none;
}

.dataTables_info{
    color: var(--c-secondary-400);
    margin-left: .5rem;
    font-size: .85rem;
    display: inline-block;
}

@media screen and (max-width: 767px){
    div.dataTables_wrapper span.select-info{
        display: none;
    }

    div.dataTables_wrapper div.dataTables_length {
        bottom: 4.7rem;
        text-align: left;
    }

    .dataTables_wrapper .dataTables_info{
        text-align: left;
    }
}

@media screen and (max-width: 400px){
    .dataTables_wrapper .dataTables_length {
        bottom: -5.3rem;
    }
}



button.dt-button{
    background: white;
    border: var(--border-main);
    border-radius: var(--br-main); 

    font-size: .9rem;
    color: var(--c-primary-500);
}

button.dt-button:focus:not(.disabled), 
button.dt-button:active:not(.disabled),
button.dt-button:active:not(.disabled):hover:not(.disabled){
    background: var(--c-primary-200)!important;
    border: var(--border-main);
    text-shadow: none;
    box-shadow: none;
    color: var(--c-primary-500);
}

div.dt-button-background{
    display: none!important;
}

div.dt-button-collection{
    border: var(--border-main);
    box-shadow: var(--shadow-main);
    background-color: white;
    padding: .65rem .75rem .75rem;
}

div.dt-button-collection button.dt-button{
    box-shadow: none;
    border: var(--border-main);
    color: var(--c-secondary-200);
    background: transparent;
    border-radius: var(--br-main);
}

div.dt-button-collection button.dt-button[data-cv-idx="0"]{
    display: none;
}

div.dt-button-collection button.dt-button.active:not(.disabled){
    box-shadow: none;
    color: var(--c-primary-000);
    border: var(--border-main);
    border-color: var(--c-primary-400);
    background: var(--c-primary-400);
}

div.dt-button-collection button.dt-button.active:not(.disabled):hover{
    background: var(--c-primary-300);
}

/* div.dt-button-collection button.dt-button:not(.disabled):focus,
div.dt-button-collection button.dt-button:not(.disabled):active{
    background: var(--c-primary-200)!important;
    text-shadow: none;
    box-shadow: none;
    border: var(--border-main);
} */

/* div.dt-button-collection button.dt-button.active:not(.disabled):focus,
div.dt-button-collection button.dt-button.active:not(.disabled):active{
    background: var(--c-primary-300)!important;
    text-shadow: none;
    border: 1.5px solid var(--c-primary-400);
} */

button.dt-button:hover:not(.disabled){
    border: var(--border-main);
    background: var(--c-primary-200);
}

button.dt-button.disabled{
    opacity: .5;
}

table.dataTable, .dataTables_scroll{
    padding: 0;
    margin-bottom: 0!important;
}

div.dts div.dataTables_scrollBody{
    border-left: var(--border-main);
    border-right: var(--border-main);
    background: transparent;
}

table.dataTable thead>tr>th.sorting::before, table.dataTable thead>tr>th.sorting::after{
    opacity: .25;
}

table.dataTable thead>tr>th.sorting.sorting_asc::before{
    opacity: 1;
}

table.dataTable thead>tr>th.sorting.sorting_desc::after{
    opacity: 1;
}

table thead{
    font-family: var(--ff-bold);
    font-size: .9rem;
    text-transform: uppercase;
    color: var(--c-primary-500);
}

table.dataTable thead>tr>th{
    border-bottom: var(--border-main);
    border-top: var(--border-main);
    padding: .8rem .5rem;
    text-align: left;
    white-space: nowrap;
}

table.dataTable thead>tr>th.sorting:first-child, table.dataTable thead>tr>th:first-child{
    border-left: var(--border-main);
    border-radius: 0;
    padding-left: 1.5rem;
}

table.dataTable thead>tr>th.sorting:last-child, table.dataTable thead>tr>th:last-child{
    border-right: var(--border-main);
    border-radius: 0;
    padding-right: 1.5rem;
}

table.dataTable>thead .sorting:after, table.dataTable>thead .sorting_asc:after, table.dataTable>thead .sorting_desc:after, table.dataTable>thead .sorting_asc_disabled:after, table.dataTable>thead .sorting_desc_disabled:after{
    right: 0.15em;
}

table.dataTable>thead .sorting:before, table.dataTable>thead .sorting_asc:before, table.dataTable>thead .sorting_desc:before, table.dataTable>thead .sorting_asc_disabled:before, table.dataTable>thead .sorting_desc_disabled:before{
    right: .5em;
}

table.dataTable tbody td{
    border-bottom: var(--border-main);
    border-color: var(--c-primary-050);
    padding: .8rem .5rem;
    font-size: .9rem;
}

.dataTables_wrapper{
    max-width: 100%;
    /* overflow-x: auto; */
}

table.dataTable{
    max-width: 100%!important;
    overflow-x: auto;
}

table.dataTable tbody td:first-child{
    border-left: var(--border-main);
    padding-left: 1.5rem;
}

table.dataTable tbody td:last-child{
    border-right: var(--border-main);
    padding-right: 1.5rem;
}

table tbody{
    color: var(--c-primary-600);
    /* background-color: plum; */
}

table tbody tr{
    position: relative;
}

table tbody tr:nth-child(even){
    background-color: var(--c-primary-000);
}

table tbody tr:hover{
    /* background-color: var(--c-primary-200); */
    color: var(--c-primary-400);
}

table tbody tr:nth-child(even):hover{
    color: var(--c-primary-500);
}

table tbody tr:last-child td{
    border-bottom: var(--border-main);
}

table tbody tr:last-child td:first-child{
    border-radius: 0 0 0 var(--br-main);
}

table tbody tr:last-child td:last-child{
    border-radius: 0 0 var(--br-main) 0;
}

table.dataTable tbody th.focus, table.dataTable tbody td.focus{
    outline: none;
    background: var(--c-primary-050);
}

table.dataTable tbody th.focus, table.dataTable tbody td.focus.select-checkbox{
    background: transparent;
}

table.dataTable tbody th.focus, table.dataTable tbody td.focus.select-checkbox::before{
    border-width: 2px;
}

table tfoot{
    font-family: var(--ff-bold);
    color: var(--c-primary-500);
}

table.dataTable tfoot td{
    border-bottom: var(--border-main);
    padding: .8rem .5rem;
}

table tfoot td:first-child{
    border-left: var(--border-main);
    border-radius: 0 0 0 var(--br-main);
    padding-left: 1.5rem;
}

table tfoot td:last-child{
    border-right: var(--border-main);
    border-radius: 0 0 var(--br-main) 0;
    padding-right: 1.5rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
    color: var(--c-primary-700)!important;
    border:none;
    border-radius: var(--br-main);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
    opacity: 0;
    pointer-events: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    color: var(--c-primary-500)!important;
    background: var(--c-primary-200)!important;
    border:none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current{
    color: var(--c-primary-000)!important;
    background: var(--c-primary-400)!important;
    border: none;
    border-radius: var(--br-main);
    padding: .25rem .5rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    color: var(--c-primary-000)!important;
    background: var(--c-primary-400)!important;
    border: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous{
    color: var(--c-primary-500)!important;
}

.dataTables_wrapper .dataTables_length select{
    border: 1px solid var(--c-primary-200);
    margin: 0 .5rem;
}

.dataTables_wrapper .dataTables_filter{
    float: right;
    width: 100%;
    max-width: 300px;
    text-align: left;

    display: flex;
    margin-bottom: .5rem;
}

.dataTables_wrapper .dataTables_filter label{
    display: flex;
    align-items: center;
    width: 100%;
}

.dataTables_wrapper .dataTables_filter input[type="search"]{
    margin-left: .5rem;
    width: 100%;
    padding: 5px;

    border: var(--border-main);
    background-color: var(--c-primary-bkg);
}

@media screen and (max-width: 950px) {
    .dataTables_wrapper .dataTables_filter{
        /* float: left; */
        /* clear: both; */
        /* width: 100%; */
    }
}

@media screen and (max-width: 600px) {
    .dataTables_wrapper .dataTables_filter{
        /* float: left; */
        /* clear: both; */
        /* width: 100%; */
        max-width: none;
    }
}

/* .dataTables_wrapper .dataTables_filter input{
    
    margin: 0; 
    width: 100%;
    display: block;
} */

.btn-filter.filtering{
    color: white;
    border-color: var(--c-primary-400);
    background-color: var(--c-primary-400);
}

.btn-filter.filtering:hover:not(.disabled){
    border-color: var(--c-primary-400);
    background-color: var(--c-primary-300);
}

.dataTables_empty{
    color: var(--c-secondary-400);
}


table.dataTable tbody tr.selected>* {
    box-shadow: inset 0 0 0 9999px var(--c-primary-200);
    color: inherit;
}

table.dataTable>tbody>tr.selected>td.select-checkbox:before{
    border-color: inherit;
}

div.dataTables_processing>div:last-child>div{
    background: var(--c-primary-300);
}

.filter-tags__container{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    /* margin-bottom: 0.5rem; */
    clear: both;
}

.filter-tags__tag{
    margin-right: 0.5rem;
    /* margin-top: 0.5rem; */
    margin-bottom: 0.75rem;
}

.filter-tags__value{
    background: var(--c-primary-400);
    color: white;
    padding: 0.65rem 0.5rem 0.5rem 0.75rem;
    border-radius: var(--br-main);
    display: inline-block;
    line-height: 0;
}

.filter-tags__remove{
    margin-left: 0.75rem;
    background: transparent;
    border: none;
    color: inherit;
    opacity: .5;
}

.filter-tags__remove:hover{
    opacity: 1;
}

div.dt-buttons{
    margin-right: 2rem;
}

@media screen and (max-width: 900px) {
    div.dt-buttons{
        width: 100%;
        text-align: left;
        float: none;
        /* margin-bottom:1rem; */
    }
}

.main__add-button{
    border: var(--border-main);
    background-color: var(--c-primary-bkg);
    padding: .5em 1em;
}

table.dataTable tbody td.delete-button{
    position: absolute;
    top: 0;
    right: 0;
    min-width: 3rem;
    height: 95%;
    padding: 0;
    border: none;
}

.delete-button__button{
    background-color: transparent;
    border: none;

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    color: var(--c-primary-100);
    opacity: 0;
    transition: all .2s ease;
}

tr:hover .delete-button__button{
    opacity: 1;
}

tr:hover .delete-button__button:hover{
    color: var(--c-danger);
}

.delete-button__button i{
    font-size: .85rem;
    margin: 0;
}

table.dataTable>thead>tr>th.empty{
    padding: 0;
}

table.dataTable>thead>tr>th:not(.sorting_disabled).empty::after, table.dataTable>thead>tr>th:not(.sorting_disabled).empty::before{
    content: "";
}

table.dataTable>thead .sorting:before, table.dataTable>thead .sorting:after, table.dataTable>thead .sorting_asc:before, table.dataTable>thead .sorting_asc:after, table.dataTable>thead .sorting_desc:before, table.dataTable>thead .sorting_desc:after, table.dataTable>thead .sorting_asc_disabled:before, table.dataTable>thead .sorting_asc_disabled:after, table.dataTable>thead .sorting_desc_disabled:before, table.dataTable>thead .sorting_desc_disabled:after{
    position: absolute;
    bottom: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
}


/* ------------------ MODAL ------------------ */

.modal__container{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: rgba(57, 121, 148, 0.25);
    z-index: 4;

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    pointer-events: none;

    transition: all .3s ease;
   }

   .modal__container.openModalBkg{
    opacity: 1;
    pointer-events: auto;
   }

   .modal{
    width: calc(100% - 8vw);
    min-width: 400px;
    max-height: calc(100vh - var(--header-height) * 2);
    padding-bottom: 2.5rem;
      
    background-color: white;
    border-radius: var(--br-main);

    box-shadow: var(--shadow-main);

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;

    transform: translateY(1.25rem);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: all .5s ease;
   }

   .openModalBkg .modal.openModal{
    opacity: 1;
    pointer-events: auto;
    position: relative;
    transform: translateY(0);
   }

  .modal--xs{
   max-width: 500px;
  }

  .modal--sm{
   max-width: 700px;
  }

  .modal--md{
   max-width: 1000px;
  }

  .modal__close{
   position: absolute;
   top: .5rem;
   right: .5rem;

   width: 2.25rem;
   height: 2.25rem;

   font-size: 1rem;

   border: none;
   border-radius: var(--br-main);
   color: var(--c-primary-200);
   background-color: transparent;

   transition: color .2s ease;
  }

  .modal__close:hover{
   color: var(--c-primary-000);
  }

  .modal__header{
   padding: 1.25rem 2rem;
   color: var(--c-primary-000);
   background-color: var(--c-primary-400);

   border-radius: var(--br-main) var(--br-main) 0 0;
   text-align: center;

   height: 100%;
  }

  .modal__title{
   font-family: var(--ff-bold);
   font-size: 1.5rem;
   text-transform: uppercase;
   text-align: inherit;
  }

  .modal__text{
    font-size: 1rem;
    text-align: center;
    line-height: 1;
    
    padding: 0 2rem 1rem;
    margin-bottom: 1rem;
    
    color: var(--c-secondary-500);
   }

  .modal__body{
   margin: 2.5rem 0 0;
   padding: 0 2.5rem;
   height: 100%;
   overflow-y: auto;
  }

  .modal__button-container{
   display: flex;
   justify-content: flex-end;
   align-items: center;
   margin-top: 3rem;
  }

  .modal__button{
   font-size: 1.1rem;
   color: var(--c-primary-000);
   background-color: var(--c-primary-400);

   padding: .5rem 1.5rem;
   border: var(--border-main);  
   border-color: var(--c-primary-400);
   border-radius: var(--br-main);

   margin: 0 .5rem;
   cursor: pointer;
  }

  .modal__button:hover{
   background-color: var(--c-primary-300);
   border-color: var(--c-primary-300);
  }

  .modal__button.secondary{
   color: var(--c-primary-400);
   border: var(--border-main);
   background-color: transparent;
  }

  .modal__button.secondary:hover{
   background-color: var(--c-primary-000);
  }

  .modal__button.delete:hover{
   color: var(--c-danger-500);
   border: 1.5px solid var(--c-danger-500);
   background-color: var(--c-danger-o-15);
  }

  .modal form{
    display: flex;
    justify-content: space-between;
    align-items: stretch;

    flex-wrap: wrap;
  }

  /* .modal form.visible{
    display: flex;
  } */

  .modal label{
    display: flex;
    flex-direction: column;
    flex-basis: 45%;
    flex-grow: 1;
    margin: .25rem;
  }

  .modal input, .modal select{
    color: var(--c-primary-700);
    border: var(--border-main);
    background-color: transparent;
    font-size: .9rem;

    padding: .5em .75em;
  }

  .modal label span{
    font-size: .9rem;
    margin: .75em 0 .5em;
  }

  .modal input:focus, .modal select:focus{
    outline-color: var(--c-primary-200);
  }

  form .modal__button-container{
    flex-basis: 100%;
  }

  #asset-form .label-person, #person-form .label-asset{
    display: none;
  }

  .hub-table{
    margin-top: 2rem;
  }