/* ============================================
   MAIN DESIGN
   ============================================ */

:root {
    /* Core colors */
    --color-black: #000000;
    --color-white: #ffffff;

    --color-blue-700: #15428b;
    --color-blue-600: #1658ad;
    --color-blue-200: #8dbde5;
    --color-blue-100: #dce8f5;

    --color-green-700: #1d8b3a;
    --color-green-600: #1fad48;
    --color-green-200: #a1e5b5;
    --color-green-100: #ddf5e4;

    --color-red-700: #8b1d1d;
    --color-red-600: #ad1f1f;
    --color-red-200: #e5a1a1;
    --color-red-100: #f5dddd;

    /* Orange colors */
    --color-orange-700: #bf4d10;
    --color-orange-600: #ff6d00;
    --color-orange-200: #ffb74d;
    --color-orange-100: #ffefd7;

    --color-black-700: #1f1f1f;
    --color-black-600: #2f2f2f;
    --color-black-200: #b5b5b5;
    --color-black-100: #dddddd;

    --color-gray-900: #1f1f1f;
    --color-gray-700: #4a4a4a;
    --color-gray-400: #c4c4c4;
    --color-gray-200: #dadada;
    --color-gray-100: #f1f1f1;
    --color-gray-050: #fafafa;

    /* Semantic colors */
    --color-primary: var(--color-black);
    --color-secondary: var(--color-blue-700);
    --color-light: var(--color-white);
    --color-dark: var(--color-black);

    --color-icons: var(--color-blue-600);
    --color-links: var(--color-blue-600);
    --color-border-primary: var(--color-blue-200);
    --color-border-secondary: var(--color-white);
    --color-border-muted: var(--color-gray-400);

    /* Background colors */
    --color-background-primary: var(--color-blue-100);
    --color-background-secondary: var(--color-white);
    --color-background-row-even: var(--color-gray-050);
    --color-background-row-odd: var(--color-white);
    --color-background-row-hover: #eeeeee;

    /* Alert colors */
    --color-alert-success-bg: var(--color-green-100);
    --color-alert-success-border: var(--color-green-200);
    --color-alert-success-text: var(--color-green-700);

    --color-alert-warning-bg: var(--color-orange-100);
    --color-alert-warning-border: var(--color-orange-200);
    --color-alert-warning-text: var(--color-orange-700);

    --color-alert-error-bg: var(--color-red-100);
    --color-alert-error-border: var(--color-red-200);
    --color-alert-error-text: var(--color-red-700);

    --color-alert-info-bg: var(--color-blue-100);
    --color-alert-info-border: var(--color-blue-200);
    --color-alert-info-text: var(--color-blue-700);

    /* Button variants */
    --color-button-primary-bg: var(--color-secondary);
    --color-button-primary-text: var(--color-white);
    --color-button-primary-border: var(--color-secondary);

    --color-button-secondary-bg: var(--color-background-secondary);
    --color-button-secondary-text: var(--color-primary);
    --color-button-secondary-border: var(--color-border-primary);

    --color-button-success-bg: var(--color-green-600);
    --color-button-success-text: var(--color-white);
    --color-button-success-border: var(--color-green-600);

    --color-button-warning-bg: var(--color-orange-600);
    --color-button-warning-text: var(--color-white);
    --color-button-warning-border: var(--color-orange-600);

    --color-button-error-bg: var(--color-red-600);
    --color-button-error-text: var(--color-white);
    --color-button-error-border: var(--color-red-600);

    /* Gradients */
    --gradient-header: linear-gradient(to bottom, #d6e8f5 0%, #d6e8f5 50%, #b1d0ec 50%, #c5def1 100%);
    --gradient-button: linear-gradient(to bottom, #f7f7f7 0%, #f1f1f1 50%, #dadada 50%, #f0f0f0 100%);
    --gradient-panel: linear-gradient(to bottom, #e8fbff 0%, #d3edfe 100%);
    --gradient-toolbar: linear-gradient(to bottom, #d6e7f3 0%, #c9deee 100%);

    /* Sizing */
    --radius-sm: 3px;
    --radius-md: 6px;

    /* Spacing scale (1 = 0.3rem, 2 = 0.5rem, 3 = 1rem, 4 = 1.5rem, 5 = 2rem) */
    --spacing-1: 0.3rem;
    --spacing-2: 0.5rem;
    --spacing-3: 1rem;
    --spacing-4: 1.5rem;
    --spacing-5: 2rem;

    /* Typography */
    --font-family-base: Arial, Tahoma, Helvetica, sans-serif;
    --font-size-base: 11px;
    --font-weight-bold: 700;

    /* Effects */
    --shadow-inset: inset 0 0 2px 1px rgba(255, 255, 255, 0.6);
    --shadow-focus: 0 0 0 2px rgba(78, 125, 195, 0.2);
}

/* ============================================
   THEME VARIANTS
   ============================================ */

:root.green {
    --color-secondary: var(--color-green-700);
    --color-icons: var(--color-green-600);
    --color-links: var(--color-green-600);
    --color-border-primary: var(--color-green-200);
    --color-background-primary: var(--color-green-100);
    --gradient-header: linear-gradient(to bottom, #ddf5e4 0%, #ddf5e4 50%, #b1ecc0 50%, #c5f1cf 100%);
    --gradient-panel: linear-gradient(to bottom, #f0fff3 0%, #def8e3 100%);
    --gradient-toolbar: linear-gradient(to bottom, #d6f3dc 0%, #c9eed0 100%);
    --shadow-focus: 0 0 0 2px rgba(78, 195, 101, 0.2);
}

:root.red {
    --color-secondary: var(--color-red-700);
    --color-icons: var(--color-red-600);
    --color-links: var(--color-red-600);
    --color-border-primary: var(--color-red-200);
    --color-background-primary: var(--color-red-100);
    --gradient-header: linear-gradient(to bottom, #f5dddd 0%, #f5dddd 50%, #ecb1b1 50%, #f1c5c5 100%);
    --gradient-panel: linear-gradient(to bottom, #fff0f0 0%, #f8dede 100%);
    --gradient-toolbar: linear-gradient(to bottom, #f3d6d6 0%, #eec9c9 100%);
    --shadow-focus: 0 0 0 2px rgba(195, 78, 78, 0.2);
}

:root.gray {
    --color-secondary: var(--color-black-700);
    --color-icons: var(--color-black-600);
    --color-links: var(--color-black-600);
    --color-border-primary: var(--color-black-200);
    --color-background-primary: var(--color-black-100);
    --gradient-header: linear-gradient(to bottom, #dddddd 0%, #dddddd 50%, #b5b5b5 50%, #c5c5c5 100%);
    --gradient-panel: linear-gradient(to bottom, #f0f0f0 0%, #d9d9d9 100%);
    --gradient-toolbar: linear-gradient(to bottom, #d6d6d6 0%, #c9c9c9 100%);
    --shadow-focus: 0 0 0 2px rgba(78, 78, 78, 0.2);
}

:root.orange {
    --color-secondary: var(--color-orange-700);
    --color-icons: var(--color-orange-600);
    --color-links: var(--color-orange-600);
    --color-border-primary: var(--color-orange-200);
    --color-background-primary: var(--color-orange-100);
    --gradient-header: linear-gradient(to bottom, #ffe0b2 0%, #ffe0b2 50%, #fbdaaa 50%, #ffa726 100%);
    --gradient-panel: linear-gradient(to bottom, #fff3e0 0%, #ffe0b2 100%);
    --gradient-toolbar: linear-gradient(to bottom, #ffecb3 0%, #ffcc80 100%);
    --shadow-focus: 0 0 0 2px rgba(255, 140, 0, 0.2);
}

/* ============================================
   GENERAL
   ============================================ */

*, *::before, *::after { box-sizing: border-box; border: 0; text-decoration: none; font-family: inherit; font-size: inherit; text-align: inherit; word-wrap: break-word; }

input, textarea, button, label { margin: 0; padding: 0; }

html { padding: 0; margin: 0; font-size: var(--font-size-base); }

body {
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    font-family: var(--font-family-base);
    color: var(--color-primary);
    background: var(--color-background-secondary);
}

a { color: var(--color-links); text-decoration: none; }
a:hover { color: var(--color-links); text-decoration: underline; }
img { max-width: 100%; }
b { font-weight: var(--font-weight-bold); }
strong { font-weight: bold; }
.block { display: block; }

/* Background & Color Utilities */
.bg-primary { background: var(--color-background-primary); }
.bg-secondary { background: var(--color-background-secondary); }
.color-primary { color: var(--color-primary); }
.color-secondary { color: var(--color-secondary); }

.clear { clear: both; }
.overflow { overflow: auto; }

/* Display element on different screens */
.hidden { display: none; }

@media all and (max-width: 768px) {
    .on-sm { display: block; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .on-md { display: block; }
}

@media (min-width: 1024px) {
    .on-lg { display: block; }
}


/* ============================================
   ALIGNMENT
   ============================================ */

/* Text alignment */
.tleft { text-align: left; }
.tright { text-align: right; }
.tcenter { text-align: center; }

/* Floats */
.left { float: left; }
.right { float: right; }
.center { margin-left: auto; margin-right: auto; }

/* ============================================
   SPACING UTILITIES
   ============================================ */

/* Margin - All sides */
.m1 { margin: var(--spacing-1); }
.m2 { margin: var(--spacing-2); }
.m3 { margin: var(--spacing-3); }
.m4 { margin: var(--spacing-4); }
.m5 { margin: var(--spacing-5); }

/* Margin - Top */
.mt1 { margin-top: var(--spacing-1); }
.mt2 { margin-top: var(--spacing-2); }
.mt3 { margin-top: var(--spacing-3); }
.mt4 { margin-top: var(--spacing-4); }
.mt5 { margin-top: var(--spacing-5); }

/* Margin - Right */
.mr1 { margin-right: var(--spacing-1); }
.mr2 { margin-right: var(--spacing-2); }
.mr3 { margin-right: var(--spacing-3); }
.mr4 { margin-right: var(--spacing-4); }
.mr5 { margin-right: var(--spacing-5); }

/* Margin - Bottom */
.mb1 { margin-bottom: var(--spacing-1); }
.mb2 { margin-bottom: var(--spacing-2); }
.mb3 { margin-bottom: var(--spacing-3); }
.mb4 { margin-bottom: var(--spacing-4); }
.mb5 { margin-bottom: var(--spacing-5); }

/* Margin - Left */
.ml1 { margin-left: var(--spacing-1); }
.ml2 { margin-left: var(--spacing-2); }
.ml3 { margin-left: var(--spacing-3); }
.ml4 { margin-left: var(--spacing-4); }
.ml5 { margin-left: var(--spacing-5); }

/* Margin - X-axis */
.mx1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
.mx2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
.mx3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }
.mx4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
.mx5 { margin-left: var(--spacing-5); margin-right: var(--spacing-5); }

/* Margin - Y-axis */
.my1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
.my2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.my3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
.my4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.my5 { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }

/* Padding - All sides */
.p1 { padding: var(--spacing-1); }
.p2 { padding: var(--spacing-2); }
.p3 { padding: var(--spacing-3); }
.p4 { padding: var(--spacing-4); }
.p5 { padding: var(--spacing-5); }

/* Padding - Top */
.pt1 { padding-top: var(--spacing-1); }
.pt2 { padding-top: var(--spacing-2); }
.pt3 { padding-top: var(--spacing-3); }
.pt4 { padding-top: var(--spacing-4); }
.pt5 { padding-top: var(--spacing-5); }

/* Padding - Right */
.pr1 { padding-right: var(--spacing-1); }
.pr2 { padding-right: var(--spacing-2); }
.pr3 { padding-right: var(--spacing-3); }
.pr4 { padding-right: var(--spacing-4); }
.pr5 { padding-right: var(--spacing-5); }

/* Padding - Bottom */
.pb1 { padding-bottom: var(--spacing-1); }
.pb2 { padding-bottom: var(--spacing-2); }
.pb3 { padding-bottom: var(--spacing-3); }
.pb4 { padding-bottom: var(--spacing-4); }
.pb5 { padding-bottom: var(--spacing-5); }

/* Padding - Left */
.pl1 { padding-left: var(--spacing-1); }
.pl2 { padding-left: var(--spacing-2); }
.pl3 { padding-left: var(--spacing-3); }
.pl4 { padding-left: var(--spacing-4); }
.pl5 { padding-left: var(--spacing-5); }

/* Padding - X-axis */
.px1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.px2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.px3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.px4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }

/* Padding - Y-axis */
.py1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.py4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }

/* ============================================
   BORDER UTILITIES
   ============================================ */

/* Border - All sides */
.b { border: 1px solid var(--color-border-primary); }

/* Border - Top */
.bt { border-top: 1px solid var(--color-border-primary); }

/* Border - Right */
.br { border-right: 1px solid var(--color-border-primary); }

/* Border - Bottom */
.bb { border-bottom: 1px solid var(--color-border-primary); }

/* Border - Left */
.bl { border-left: 1px solid var(--color-border-primary); }

/* Border - X-axis */
.bx { border-left: 1px solid var(--color-border-primary); border-right: 1px solid var(--color-border-primary); }

/* Border - Y-axis */
.by { border-top: 1px solid var(--color-border-primary); border-bottom: 1px solid var(--color-border-primary); }

/* Border radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }

/* ============================================
   ALERT COMPONENTS
   ============================================ */

.alert {
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-2);
}

.alert-success { background-color: var(--color-alert-success-bg); border: 1px solid var(--color-alert-success-border); color: var(--color-alert-success-text); }
.alert-warning { background-color: var(--color-alert-warning-bg); border: 1px solid var(--color-alert-warning-border); color: var(--color-alert-warning-text); }
.alert-error { background-color: var(--color-alert-error-bg); border: 1px solid var(--color-alert-error-border); color: var(--color-alert-error-text); }
.alert-info { background-color: var(--color-alert-info-bg); border: 1px solid var(--color-alert-info-border); color: var(--color-alert-info-text); }

/* ============================================
   GRID SYSTEM
   ============================================ */

.container { width: 100%; max-width: 1200px; margin-right: auto; margin-left: auto; }
.container-fluid { width: 100%; margin-right: auto; margin-left: auto; }

.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; }

/* Small devices */
.col-sm-1  { grid-column: span 1; }
.col-sm-2  { grid-column: span 2; }
.col-sm-3  { grid-column: span 3; }
.col-sm-4  { grid-column: span 4; }
.col-sm-5  { grid-column: span 5; }
.col-sm-6  { grid-column: span 6; }
.col-sm-7  { grid-column: span 7; }
.col-sm-8  { grid-column: span 8; }
.col-sm-9  { grid-column: span 9; }
.col-sm-10 { grid-column: span 10; }
.col-sm-11 { grid-column: span 11; }
.col-sm-12 { grid-column: span 12; }

/* Medium devices */
@media (min-width: 768px) {
    .col-md-1  { grid-column: span 1; }
    .col-md-2  { grid-column: span 2; }
    .col-md-3  { grid-column: span 3; }
    .col-md-4  { grid-column: span 4; }
    .col-md-5  { grid-column: span 5; }
    .col-md-6  { grid-column: span 6; }
    .col-md-7  { grid-column: span 7; }
    .col-md-8  { grid-column: span 8; }
    .col-md-9  { grid-column: span 9; }
    .col-md-10 { grid-column: span 10; }
    .col-md-11 { grid-column: span 11; }
    .col-md-12 { grid-column: span 12; }
}

/* Large devices */
@media (min-width: 1024px) {
    .col-lg-1  { grid-column: span 1; }
    .col-lg-2  { grid-column: span 2; }
    .col-lg-3  { grid-column: span 3; }
    .col-lg-4  { grid-column: span 4; }
    .col-lg-5  { grid-column: span 5; }
    .col-lg-6  { grid-column: span 6; }
    .col-lg-7  { grid-column: span 7; }
    .col-lg-8  { grid-column: span 8; }
    .col-lg-9  { grid-column: span 9; }
    .col-lg-10 { grid-column: span 10; }
    .col-lg-11 { grid-column: span 11; }
    .col-lg-12 { grid-column: span 12; }
}

/* ============================================
   SECTIONS
   ============================================ */

section {
    border: 1px solid var(--color-border-primary);
    margin-bottom: var(--spacing-2);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

section:last-child { margin-bottom: 0; }

section > header {
    background: var(--gradient-header);
    border-top: 1px solid var(--color-border-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}

section > header > h1,
section > header > h2,
section > header > h3,
section > header > h4,
section > header > h5,
section > header > h6 {
    padding: var(--spacing-2);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
    display: inline-block;
    margin: 0;
}

section > header > nav { float: right; padding: var(--spacing-1) var(--spacing-2); }

section > header > nav a {
    background: var(--gradient-button);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    display: inline-block;
    vertical-align: top;
    margin-left: var(--spacing-2);
    color: var(--color-icons);
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    padding: 0.1rem;
    box-shadow: inset 0 0 2px 1px var(--color-background-secondary);
    text-decoration: none;
}

section > header > nav a:hover {
    border-color: var(--color-icons);
    cursor: pointer;
    box-shadow: inset 0 0 2px 0 var(--color-icons);
}

section > header > nav a.material-symbols-outlined,
section > header > nav a .material-symbols-outlined {
    font-size: 1.4rem;
    color: var(--color-icons);
    vertical-align: top;
    text-decoration: none;
}

section > article { background-color: var(--color-background-secondary); padding: var(--spacing-2); }
section > main { padding: var(--spacing-2); background-color: var(--color-background-primary); }

/* ============================================
   FORMS
   ============================================ */

form { padding: 1rem; }
form .form-group { margin-bottom: 1rem; }

form .form-checkboxes > .form-group,
form .form-radios > .form-group {
    display: inline-block;
    vertical-align: top;
    margin-right: 4rem;
}

form .form-checkboxes > .form-group > *,
form .form-radios > .form-group > * {
    display: inline-block;
    vertical-align: top;
}

form .form-checkboxes > .form-group > label,
form .form-radios > .form-group > label {
    margin-left: var(--spacing-2);
    cursor: pointer;
    font-weight: normal;
    min-width: 100px;
}

form label { display: block; font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-2); }

form input[type='text'],
form input[type='number'],
form input[type='time'],
form input[type='date'],
form input[type='password'],
form input[type='email'],
form select,
form textarea {
    width: 100%;
    padding: var(--spacing-2);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    background: var(--color-background-secondary);
    box-shadow: var(--shadow-inset);
}

form input:focus,
form select:focus,
form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

form fieldset {
    border: 1px solid var(--color-border-primary);
    padding: var(--spacing-3);
    padding-bottom: 0;
}

form fieldset legend { font-weight: var(--font-weight-bold); padding-inline: 0.3rem; }

main > form { padding: 0; }

/* ============================================
   BUTTONS
   ============================================ */

.button-group.tright button,
.button-group.tright a { margin-left: var(--spacing-2); margin-right: 0; text-decoration: none; }

.button-group button,
.button-group a {
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-sm);
    background: var(--gradient-button);
    color: var(--color-primary);
    border: 1px solid var(--color-border-muted);
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    margin-right: var(--spacing-2);
    text-decoration: none;
}

.button-group button:hover,
.button-group a:hover {
    background: var(--gradient-header);
    color: var(--color-secondary);
    border-color: var(--color-border-primary);
}

.button-group button .material-symbols-outlined,
.button-group a .material-symbols-outlined {
    font-size: 1.4rem;
    color: var(--color-primary);
    vertical-align: top;
}

/* ============================================
   TABLES
   ============================================ */

table {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
}

table caption {
    background: var(--gradient-toolbar);
    border-top: 1px solid var(--color-border-secondary);
    border-bottom: 1px solid var(--color-border-primary);
    padding: var(--spacing-2);
}

table thead { background: var(--gradient-button); }
table thead th { border-top: 1px solid var(--color-border-secondary); border-bottom: 1px solid var(--color-border-muted); font-weight: var(--font-weight-bold); }

table tfoot {
    background: var(--gradient-toolbar);
    border-top: 1px solid var(--color-border-secondary);
    padding: var(--spacing-2);
}

table thead th, tfoot td { padding: var(--spacing-2); }
table tbody tr td { padding: var(--spacing-2); }

table tbody tr:nth-child(odd) td {
    background-color: var(--color-background-row-odd);
    border-bottom: 1px solid var(--color-background-row-even);
}

table tbody tr:nth-child(even) td {
    border-top: 1px solid var(--color-background-row-odd);
    background-color: var(--color-background-row-even);
}

table tbody tr:hover td { background-color: var(--color-background-row-hover); }

/* ============================================
   MODAL
   ============================================ */

dialog {
    max-width: 700px;
    width: calc(100% - 20px);
    padding: 0;
    background-color: var(--color-background-primary);
    outline: 1px solid var(--color-border-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

dialog::backdrop { background: var(--color-background-secondary); opacity: 0.7; }

dialog > header > h1,
dialog > header > h2,
dialog > header > h3,
dialog > header > h4,
dialog > header > h5,
dialog > header > h6 {
    padding: var(--spacing-2);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
    display: inline-block;
    margin: 0;
}

dialog > header > nav { float: right; padding: var(--spacing-1) var(--spacing-2); }

dialog > header > nav a,
dialog > header > nav button {
    background: var(--gradient-button);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    display: inline-block;
    vertical-align: top;
    margin-left: var(--spacing-2);
    color: var(--color-icons);
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    padding: 0.1rem;
    box-shadow: inset 0 0 2px 1px var(--color-background-secondary);
    text-decoration: none;
    cursor: pointer;
}

dialog > header > nav a:hover,
dialog > header > nav button:hover {
    border-color: var(--color-icons);
    box-shadow: inset 0 0 2px 0 var(--color-icons);
}

dialog > header > nav a.material-symbols-outlined,
dialog > header > nav button.material-symbols-outlined,
dialog > header > nav a .material-symbols-outlined,
dialog > header > nav button .material-symbols-outlined {
    font-size: 1.4rem;
    color: var(--color-icons);
    vertical-align: top;
    text-decoration: none;
}

dialog > article { background-color: var(--color-background-secondary); padding: var(--spacing-2); }
dialog > main { padding: var(--spacing-2); }


/* ============================================
   ARTICLE CONTENT
   ============================================ */

.content p {
    display: block;
    margin: 0;
    margin-bottom: 1rem;
    line-height: 1.5;
    text-align: justify;
    position: relative;
}

.content h1, .content h2, .content h3, .content h4 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 3rem;
}

.content code {
    background: #efefef;
    border-radius: 5px;
    padding: 2px 5px;
}

.content mark {
    background: #F2E7D5;
    border-radius: 5px;
    padding: 2px 5px;
}

.content a {
    font-weight: bold;
    padding-bottom: 1px;
    border-bottom: 0.1rem solid var(--color-border-primary);
}
.content a::after {
  content: '';
  position: relative;
  left: 2px;
  height: 20px;
  width: 20px;
  margin-right: 2px;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPgoJPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz4KCTxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTUuNjE2IDIwcS0uNjkxIDAtMS4xNTMtLjQ2MlQ0IDE4LjM4NFY1LjYxNnEwLS42OTEuNDYzLTEuMTUzVDUuNjE2IDRoNS42MTV2MUg1LjYxNnEtLjIzMSAwLS40MjQuMTkyVDUgNS42MTZ2MTIuNzY5cTAgLjIzLjE5Mi40MjN0LjQyMy4xOTJoMTIuNzdxLjIzIDAgLjQyMy0uMTkydC4xOTItLjQyM3YtNS42MTZoMXY1LjYxNnEwIC42OS0uNDYyIDEuMTUyVDE4LjM4NCAyMHptNC4xMjMtNS4wM2wtLjcwOC0uNzA5TDE4LjI5MiA1SDE0VjRoNnY2aC0xVjUuNzA4eiIgLz4KPC9zdmc+Cg==');
  background-size: auto;
  background-size: 20px 20px;
  vertical-align: -4px;
  display: inline-block;
}
.content blockquote {
    border-left: 0.5rem solid var(--color-border-primary);
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
    margin: 0;
    margin-bottom: 10px;
    line-height: 1.5;
    text-align: justify;
    position: relative;
}
.content pre {
    background: #F3E8E8;
    padding: 10px 15px;
    color: #000;
    font-family: monospace;
    text-align: left;
    border-radius: 10px;
    font-size: 1rem;
}
.content p.lo-left {
    text-align: left;
}
.content p.lo-center {
    text-align: center;
}
.content p.lo-right {
    text-align: right;
}
.content p.lo-img {
    text-align: center;
}
.content p img {
    display: inline-block;
    max-width: 100%;
    margin: 0 auto 10px;
}
.content hr {
    width: 100%;
    height: 0.2rem;
    border: 0;
    background: var(--color-border-primary);
    margin-bottom: 15px;
    margin-top: 15px;
}