html {
    font-size: 14px!important;
    color: #58595B;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

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

body {
    margin-bottom: 60px;
    font-family: 'DM Sans', Arial, Helvetica, sans-serif;
    color: #58595B;
}
h1 {
    font-size:2rem;
}
h2 {
    font-size: 1.8rem;
}
h3 {
    font-size: 1.6rem;
}
h4 {
    font-size: 1.4rem;
}
h5 {
    font-size: 1.2rem;
}
h6 {
    font-size: 1rem;
}
h1, h2, h3, h4, h5, h6 {
    letter-spacing:-.05rem;
}

/*SIDEBAR*/
.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #f2f2f2;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 80px;
    opacity: 0;
}

    .sidebar.open {
        width: 270px;
        opacity: 1;
        z-index: 100;
    }
        .sidebar.open a, .sidebar.open p {
            margin-left: 10px;
        }


    .sidebar a, .sidebar p {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 14px;
        color: #58595B;
        display: block;
        margin-left: -270px;
        margin-right: 10px;
        transition: 0.5s;
    }
        .sidebar a.selected {
            background-color: #e6e6e6;
            border-radius: 20px;
        }

        .sidebar a:hover {
            color: #939598;
        }

    .sidebar .closebtn {
        position: absolute;
        top: 0;
        right: 0px;
        font-size: 36px;
        margin-left: 50px;
    }

.sidebartitle {
    background-color: #b1b1b1;
    color: white;
    font-weight: bold;
}

#main {
    margin-left: 0px;
    transition: margin-left .5s;
}

    #main.open {
        margin-left: 270px;
    }

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidebar {
        padding-top: 15px;
    }

        .sidebar a {
            font-size: 14px;
        }
}

@media screen and (max-width: 600px) {
    .sidebar a {
        font-size: 16px;
    }
    .sidebar.open  {
        width: 100%;
    }
    .footer.open {
        width: 100%!important;
        margin-left:0!important;
    }
    #main.open {
        width: 100%;
        margin-left:0;
    }
    .logincontainer {
        margin-top: 0px !important;
    }
}

.encabezado {
    border-bottom: 1px solid #D0D2D3
}

    .encabezado h1 {
        color: #1C3F94;
    }

/*end sidebar*/

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    margin-left: 0px;
    transition: all .5s;
}
    .footer.open {
        margin-left: 270px;
        width: calc(100% - 270px);
    }


.dataTable {
    display: table;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 5px;
    border-collapse: collapse;
}

.dataRow {
    display: table-row;
    width: 100%;
    height: 60px;
}

    .dataRow.header {
        font-weight: 700;
    }

    .dataRow.rowSmall {
        line-height: 40px;
        height: 40px;
    }

    .dataRow.selected, .dataCell.selected {
        background-color: #E6E7E8 !important;
    }

.dataCell {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    width: auto;
    padding-left: 15px;
    font-weight: inherit;
}

    .dataCell .colTitle {
        display: none;
    }

    .dataCell.sortable.sortASC:before {
        position: absolute;
        font-family: 'Font Awesome 6 Pro';
        top: 15px;
        right: 15px;
        content: "\f062";
    }

    .dataCell.sortable.sortDESC:before {
        position: absolute;
        font-family: 'Font Awesome 6 Pro';
        top: 15px;
        right: 15px;
        content: "\f063";
    }

    .dataCell.sortable {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

        .dataCell.sortable:hover {
            background-color: #efefef;
            cursor: pointer;
        }

#searchText {
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.showBuscar {
    max-width: 500px !important;
}

.modal-content {
    -webkit-transition: all 1s ease-out !important;
    transition: all 1s ease-out !important;
}

a.cardLink {
    text-decoration: none;
    color:inherit;
}


.ui-autocomplete {
    background-color: white;
    padding: 10px;
    border: 1px solid #ced4da;
    max-height: 200px;
    overflow-y:auto;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background-color: var(--bs-light);
}

.ui-menu-item {
    font-size: 13px;
    padding: 4px;
}

.ui-autocomplete-loading {
    /*background: url('/images/loadingModal.gif') no-repeat 97% center;*/
    background: url('/images/loading.svg') no-repeat 97% center;
}

.arrowRotate {
    transition: all 0.5s;
}
.rotate {
    transform: rotate(180deg);
}

@media (max-width: 992px) {
    .dataRow {
        display: block;
        height: auto;
        padding: 20px;
    }

        .dataRow.rowSmall {
            height: auto;
            line-height: normal;
            padding: 10px;
        }

        .dataRow.header {
            display: none;
        }

    .dataCell {
        display: block;
        width: 100%;
        padding-left: 10px;
        /*font-weight: bold;*/
    }

        .dataCell .colTitle {
            display: inline;
        }

        .dataCell.sortable {
            border-bottom: 1px solid lightgray;
            padding-top: 12px;
            padding-bottom: 12px;
        }

        .dataCell.notsortable {
            display: none;
        }


    .rowTitleResponsiveHide {
        display: none;
    }

}