@font-face {
    font-family: 'robotoregular';
    src: url('GoldTheme/fonts/roboto-regular.eot');
    src: url('GoldTheme/fonts/roboto-regular.eot?#iefix') format('embedded-opentype'), url('GoldTheme/fonts/roboto-regular.ttf') format('truetype'), url('GoldTheme/fonts/roboto-regular.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
:root {
    --clr-background-primary: #fafafa;
    --clr-background-secondary: #fff;
    --clr-text-primary: #000;
    --clr-text-invert: #fff;
    --clr-primary: #2293c5;
    --clr-primary-hover: #2271b1;
    --clr-border: #eee;
    --min-width: 320px;
    --max-width: 1000px;
    --gap: 32px;
}
.document-page {
    background-color: var(--clr-background-primary);
    color: var(--clr-text-primary);
    font-size: 16px;
    line-height: 1.5;
    font-family: 'robotoregular';
}

.document-page .grid-container {
    --flap: minmax(var(--gap), 1fr);
    --content: minmax(var(--min-width), var(--max-width));
    display: grid;
    grid-template-columns: 
        var(--flap) 
        var(--content) 
        var(--flap);
}
.document-page .grid-content {
    grid-column: 2 / 3;
}

.document-page .page-header {
    background-color: var(--clr-background-secondary);
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--clr-border);
}
.page-header .header-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
}
.document-page .logo {
    padding: 1rem;
}
.document-page .nav-header {
    display: flex;
    gap: var(--gap);
    align-items: center;
    justify-content: flex-end;
}


.document-page .page-header .dxbButton {
    line-height: 1.5;
    font-family: 'robotoregular';
    font-size: 16px;
    background-image: none;
    background-color: var(--clr-primary);
    color: var(--clr-text-invert);
    border: none;
    min-width: 9rem;
    border-radius: 0.25rem;
    transition: all 256ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.document-page .page-header .dxbButton.dxbButtonHover {
    background-color: var(--clr-primary-hover);
}
.document-page .page-header .dxbButton div.dxb {
    padding: 0.375rem 1.5rem;
}
.document-page .page-header .dxbButton div.dxb img.dx-vam {
    padding-right:0.25rem;
}