/* Constants */

:root {
    --primary-color: #00b1c7;
    --navbar-height: 75px;
    --sidenav-width: 430px;
    --items-icon-width: 50px;
    --items-icon-height: 30px;
    --link-hover-radius: 20px;
    --items-hover-color: #f1f3f4;
}


/* Header */

.sidenav
{
    width: var(--sidenav-width) !important;
    z-index: 10 !important;
}

.offcanvas-backdrop
{
    z-index: 5 !important;
}

.sidenav-item
{
    display: inline-flex;
    align-items: center;
}

.main-navbar
{
    background-color: var(--primary-color) !important;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
}

.navbar-container
{
    height: var(--navbar-height);
}

.nav-link-mod
{
    font-weight: bold;
}

.hide-scroll
{
    overflow-x: hidden;
    -ms-overflow-style: none;
}
    
    .hide-scroll::-webkit-scrollbar 
    {
        display: none;
    }


/* Fotter */

.footer-secondary-color-bg-dark
{
    color: #eee;
    background-color: #444449;
}

#links a
{
    margin: 0 .3em;
    text-decoration: none !important;
    display: inline-block;
}

    #links a:hover
    {
        color: var(--primary-color) !important;
        text-decoration: underline;
    }

.row-container-app-logo
{
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

@media (max-width: 600px)
{
    .row-container-app-logo
    {
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
}

.gba-footer
{
    max-width: 262px;
}


/* Sidenav Icons */

.navbar-light .navbar-nav .nav-link
{
    color: #7f7f7f !important;
}

    .navbar-light .navbar-nav .nav-link:hover
    {
        background-color: var(--items-hover-color);
        border-top-right-radius: var(--link-hover-radius);
        border-bottom-right-radius: var(--link-hover-radius);
    }

    .dropdown-item:hover
    {
        background-color: var(--items-hover-color);
        border-top-right-radius: var(--link-hover-radius);
        border-bottom-right-radius: var(--link-hover-radius);
    }

.item-icon
{
    justify-content: center;
    align-items: center;

    font-size: 1.2em;
    width: var(--items-icon-width);
    height: var(--items-icon-height);
}
:root
{
    --input-spacing: 1.2em;
    --close-error-spacing: 15px;
    --min-card-msg-width: 350px;
}

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

.input-form-spacing
{
    padding-top: var(--input-spacing);
    padding-bottom: var(--input-spacing);
}

.trailing-icon
{
    pointer-events: initial !important;
    cursor: pointer;
}

.icon-disabled
{
    cursor: default;
}

.main-title
{
    font-family: PTSans;
    font-weight: bold;
}

@media (max-width: 576px)
{
    .main-title
    {
        font-size: 1.5em !important;
    }
}

.back-arrow
{
    font-size: x-large;
    padding-right: 0.5em;
    cursor: pointer;
}

.back-form
{
    width: fit-content;
    display: inline-block;
}

.back-button
{
    border-style: none;
    background: none !important;
    color: black !important;
}

/* Apply this styles in forms things */

.static-label
{
    font-size: .9em;
}

.hide-scroll::-webkit-scrollbar
{
    display: none;
}

.hide-scroll
{
    -ms-overflow-style: none;
}

.counter-label
{
    display: flex;
    justify-content: end;
    font-size: small;
    color: gray;
}

/* No arrows for type number */

.no-number-arrows::-webkit-outer-spin-button,
.no-number-arrows::-webkit-inner-spin-button
{
    -webkit-appearance: none;
    margin: 0;
}

.no-number-arrows[type=number]
{
    -moz-appearance: textfield;
}

.close-error
{
    position: absolute;
    right: var(--close-error-spacing);
    top: var(--close-error-spacing);
}

.icon-close
{
    font-size: .7em;
}

@media (max-width: 530px)
{
    .default-msg
    {
        font-size: 1.2em !important;
    }
}

.card
{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.card-msg
{
    width: 75%;
    min-width: var(--min-card-msg-width);
}

/* tramitesDigitales/index.cshtml */

.filters-container
{
    border: 1px solid rgb(222, 226, 230);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.filters-arrow-transition
{
    transition: transform .35s ease;
}

.filters-arrow-animation
{
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg) !important;
}
:root
{
    --btn-action-size: 35px;
    --height-row: 35px;
    --width-short-table: 300px;
}

.first-col
{
    padding-left: 2.5em !important;
}

/*use this class when column doesn't contain text*/
.center-col
{
    display: flex;
    justify-content: space-around;
}

.weighted-col
{
    font-weight: bold;
}

.table > :not(caption) > * > *
{
    padding: 1em .7em !important;
}

.dataTables_wrapper .row
{
    margin: .5em 0 !important;
}

.dataTables_wrapper tr
{
    vertical-align: middle;
    text-align: center;
}

.dataTables_wrapper td
{
    height: var(--height-row);
}

/*.dataTables_wrapper td a
{
    color: black;
}*/

.dataTables_wrapper td a i
{
    color: white;
}

.white-link
{
    color: white !important;
}

.dataTables_wrapper td ul
{
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
}

    .dataTables_wrapper td ul li
    {
        display: flex;
        align-items: center;
        align-self: flex-start;
        width: -webkit-fill-available;
        justify-content: space-between;
        padding: .7em 0 !important;
    }

    table.dataTable > tbody > tr.child ul.dtr-details > li:hover
    {
        background-color: var(--items-hover-color);
    }

    .dataTables_wrapper td ul li .dtr-title {
        display: flex !important;
    }


/*Table icons*/
.btn-action-table
{
    width: var(--btn-action-size) !important;
    height: var(--btn-action-size) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.male-symbol
{
    font-weight: bold;
    font-size: 1.2em;
    color: #00aff7;
}

.female-symbol
{
    font-weight: bold;
    font-size: 1.2em;
    color: #f789d3;
}

.genderless-symbol
{
    font-weight: bold;
    font-size: 1.2em;
    color: #bcbcbc;
}

.dtr-control:before
{
    left: -10px !important;
    background-color: #0d6efd !important;
}

@media (max-width: 450px)
{
    .dtr-control:before
    {
        left: -5px !important;
    }
}


/*Table Footer*/
.dataTables_info
{
    font-size: .9em;
    width: max-content;
    padding-bottom: 0.85em;
    padding-left: 1em;
    padding-top: 0 !important;
    color: #757575 !important;
}

.dataTables_paginate
{
    width: fit-content;
    box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px;
    margin-left: auto !important;
}


/*Table Header*/
.dataTables_filter
{
    display: flex;
    justify-content: flex-end
}


/* MDB overwriting*/
.table-hover > tbody > tr
{
    transition: none;
}

    .table-hover > tbody > tr:not(.child):hover
    {
        --mdb-table-hover-bg: transparent;
        box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
    }

    .table-hover > tbody > tr > td:hover
    {
        --mdb-table-accent-bg: transparent;
    }

.table-responsive
{
    overflow-x: inherit !important;
}