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

/*autocomplete*/
.autocomplete-suggestions { border: 1px solid #cacaca; background: #FFF; overflow: auto; cursor: pointer; }
.autocomplete-suggestion { font-size: 0.725rem; padding: 2px 5px; white-space: nowrap; overflow: hidden; }
    .autocomplete-suggestion .detail { font-size: 0.7rem; color: #a4a4a4; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; font-size: 0.725rem; color: #3399FF; cursor: default; }
.autocomplete-group { padding: 2px 5px; }
    .autocomplete-group strong { display: inline-block; padding: .1rem .2rem; font-size: .675rem; white-space: nowrap; cursor: default; border-radius: 0; background: #2199e8; color: #fefefe; }


/*fix boton dentro de un tab*/
ul.tabs > li:not(.tabs-title) a.button { display: block; border: none; padding: 1.25rem 1.5rem; font-size: .75rem; line-height: 1; margin-bottom: 0rem; }

div.title-bar { position: sticky; top: 0; z-index: 1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); background-image: url(/topbar_background.jpg); background-position: center; background-size: cover; color: #1c3363; }
div.title-bar-left img { max-height: 3rem; margin-left: 2em; }
div.title-bar > a, div.title-bar a:hover, div.title-bar a:visited { color: #1c3363 }
div.title-bar button::after { background-color: #1c3363; color: #1c3363; border-color: #1c3363 transparent transparent !important; box-shadow: 0 7px 0 #1c3363,0 14px 0 #1c3363; }

div.off-canvas { background: linear-gradient(135deg, #7384C0 0%, #5A6FAE 60%, #4A5C93 100%) }
    div.off-canvas * { color: white !important; }
    div.off-canvas a::after { border-color: white transparent transparent !important }

/*cuadro de filtros en los abm*/
form.filters-form div.callout { background: #f9fafb; border: 1px solid #d4dbe4; border-radius: 0.5em; margin-top: 0.5em; margin-bottom: 1.5em; }
form.filters-form > div > div:first-child { margin-bottom: 0.5em; }

/*table header*/
div.table-header { border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; padding-top: 0.3em; padding-bottom: 0.3em; border-bottom-color: #D29E65; border-bottom: 2px solid #627b93; background: #f9fafb; }
    div.table-header > div.cell > .button { margin-bottom: 0em; }
    div.table-header > div.cell > select { margin-bottom: 0em; }

/*table data*/
div.table-data { font-size: 0.85rem; border-bottom: 1px solid #eceff3; }
    div.table-data:nth-child(even) { background-color: #fcfbfa; }
    div.table-data:nth-child(odd) { background-color: #fff; }
div.table-data { min-height: 2.25em; }
    div.table-data > div.cell:last-child ul.menu { min-height: 2.17em; }
        div.table-data > div.cell:last-child ul.menu > li > a, div.table-data > div.cell:last-child ul.menu > li > button.clear { padding: 0.5rem 0.5rem; }

    div.table-data > div.cell > input, div.table-data > div.cell > label > input { margin-bottom: 0.5em; margin-top: 0.5em; }
    div.table-data > div.cell > textarea, div.table-data > div.cell > label > textarea { margin-bottom: 0.5em; margin-top: 0.5em; }
    div.table-data > div.cell > div.switch { margin-bottom: 0em; }
    div.table-data > div.cell > .button { margin-bottom: 0em; }
    div.table-data > div.cell > select, div.table-data > div.cell > label > select { margin-bottom: 0em; }

/* Pager */
div.pager { margin-top: 1em; }
    div.pager * { font-size: 0.725rem !important; }
    div.pager input { display: inline; text-align: center; width: 4em; height: 2.5em; }

/*edit area*/
div.edit-area { background: #f9fafb; border: 1px solid #d4dbe4; border-radius: 0.3rem; padding-top: 1.5em; padding-bottom: 1em; margin-top: 1em; }


/*helpers*/
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ellipsis-multiline-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; }
.ellipsis-multiline-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; }
.ellipsis-multiline-4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 4; }
.ellipsis-multiline-5 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 5; }

.nobr { white-space: nowrap; }