/* Stable portal structure and component density. */

/* User-controlled text scale. Medium preserves the existing portal size.
   rem-based controls grow with the text so larger content is never clipped. */
html[data-portal-text-size="small"] {
    font-size: 87.5% !important;
}

html[data-portal-text-size="medium"] {
    font-size: 100% !important;
}

html[data-portal-text-size="large"] {
    font-size: 112.5% !important;
}

body {
    padding-top: 70px;
    padding-bottom: 20px;
}

.portal-navbar .navbar-collapse > .top-menu {
    margin-inline-start: auto !important;
}

@media (max-width: 991.98px) {
    .portal-navbar .top-menu {
        top: 6px;
        right: 52px;
        width: 100%;
        margin-inline-start: 0 !important;
    }

    .portal-navbar .top-menu > .navbar-nav > li {
        float: none !important;
    }
}

@media (min-width: 992px) {
    .portal-navbar .top-menu {
        margin-right: -15px;
    }

    .top-auth-menu {
        margin-left: auto;
    }
}

.dx-bs5.bg-light {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 576px) {
    .dx-bs5.bg-light {
        padding: 4rem 2rem;
    }
}

.gridViewClass {
    font-size: 0.875rem;
}

.gridViewClass .form-control,
.gridViewClass .btn,
.gridViewClass .form-control-plaintext {
    font-size: 0.875rem;
}

/* Band headers span multiple child columns. Keep them centered and on one
   line so grouped headings do not make the grid header unnecessarily tall. */
.HeaderCellClass {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

/* Shared DevExpress grid density. 0.3rem equals 4.8px at the browser default
   and preserves the information density of the portal independently of theme. */
.dxbs-table > thead > tr:not(.dxbs-filter-row) > th,
.dxbs-table > tbody > tr:not(.dxbs-edit-row):not(.dxbs-preview-row):not(.dxbs-empty-data-row):not(.dxgvADR) > td {
    padding: 0.3rem !important;
}

/* Child headings in banded grids need less vertical space than the parent
   band row. Horizontal spacing stays aligned with the other grid headers. */
.dxbs-table > thead > tr:not(:first-child):not(.dxbs-filter-row) > th {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}

.gridView_Small {
    font-size: 0.75rem !important;
}

.gridView_Small .form-control,
.gridView_Small .btn,
.gridView_Small .form-control-plaintext {
    font-size: 0.75rem !important;
}

.smallerText {
    font-size: 0.75rem !important;
}

.smallerTextL,
.treeviewNode {
    font-size: 0.9em;
}

.navbarMenuItem > a.active {
    font-weight: bold;
}

.jumbotron {
    background-image: url('../img/citera_front.jpg');
    background-size: 100% 100%;
    padding: 8rem 1rem 15rem 2rem;
}

.hr {
    margin-bottom: 0;
}

.helpText {
    font-size: smaller;
}

.white-space-nowrap .text {
    white-space: nowrap !important;
}

.popover-header {
    font-size: small;
}

.popover.popover-wide {
    width: 500px !important;
    max-width: min(750px, calc(100vw - 2rem));
}

.extra-space-menu {
    margin-right: 1rem;
    margin-left: 1rem;
}

.portal-text-size-menu > a {
    font-variant-numeric: lining-nums;
    letter-spacing: 0.015em;
}

.portal-text-size-option:is(a)::after,
.portal-text-size-option > a::after {
    width: 1.1rem;
    margin-left: auto;
    content: "";
    text-align: right;
}

.portal-text-size-option.portal-text-size-option--selected:is(a)::after,
.portal-text-size-option:is(a).active::after,
.portal-text-size-option.portal-text-size-option--selected > a::after,
.portal-text-size-option a.active::after {
    content: "\2713";
}

.portal-color-mode-option:is(a)::after,
.portal-color-mode-option > a::after {
    width: 1.1rem;
    margin-left: auto;
    content: "";
    text-align: right;
}

.portal-color-mode-option.portal-color-mode-option--selected:is(a)::after,
.portal-color-mode-option:is(a).active::after,
.portal-color-mode-option.portal-color-mode-option--selected > a::after,
.portal-color-mode-option a.active::after {
    content: "\2713";
}