/* global */

body {
    --base-font-family: system-ui, sans-serif;
    --lightgrey: #dfe1e1;
    --metalblack: #3a3d4d;
    --metalblack-x: #23252f;
    --metalblack-hover: #3a3d4ddd;

    --sandyellow: #f1f181;
    --sandyellow-strong: #fafa72;

    /* buttons */
    --button-color: #313025;
    --button-color-hover: #313025dd;
    --button-selected: #9e9b76;
    --button-selected-hover: #9e9b76e9;

    /* header/footer */
    --sandygrey: #bebba3;
    --sandywarmgrey: #c8c1af;
    --sandygrey-hover: #a2a08c;
    --sandyblack: #1b1c15;

    --box-margin: 26px;
    --box-box-margin: 34px;
    --section-section-margin: 42px;
    --box-max-width: 620px;
    --text-font-size: 16px;
    --h3-font-size: 18px;
    --text-line-height: 22px;
    --text-heading-margin: 22px;
    --text-margin: 16px;
    --text-margin-mobile: 12px;
    --text-max-width: 730px;
    --slim-text-max-width: 580px;
    --text-col2-max-width: 840px;
    --box-slight-indent: 0.4%;
    --list-item-margin: 5px;
    --menu-gap: 8px;
    --slow-transition: background-color 0.25s ease-in-out;
    --medium-transition: background-color 0.18s ease-in-out;
    --fast-transition: background-color 0.05s ease-in-out;
}

body * { box-sizing: border-box;}

table { border-collapse: collapse;}
table td { vertical-align: top;}

.slow-transition {transition: var(--slow-transition)}
.medium-transition, a, .standard-button, .slim-button {transition: var(--medium-transition)}
.fast-transition {transition: var(--fast-transition)}

.nowrap { white-space: nowrap;}
.text-center { text-align: center;}

.header-menu-block { position:absolute; z-index: 50; top: 12px; right: 12px; display: flex; gap: 10px;}
.user-profile { display: flex; gap:10px; }

.tools-menu { display: flex; gap: 10px;}
@media (max-width: 800px){.tools-menu {  display: none;} } /* testing */


.small-button { text-decoration: none; background-color: #555E6787; padding: 2px 12px 4px;  border: none;  border-radius: 3px; color: white;}
.small-button:hover { background-color: #41484F87;}


.text-link-menu { margin: var(--text-margin) 0; margin-left: -4px; display: flex; gap:5px;}
.text-link-menu a, .text-link { color: blue; padding: 0 6px 2px;  border-radius: 5px; }
.text-link-menu a:hover, .text-link:hover {  background-color: #e9e9e9; }
.static-link { text-decoration: none; color: black;}

.link-button-bar {  display: flex; margin: var(--box-box-margin) 0; }
@media (max-width: 680px)
{
    .link-button-bar { justify-content: center; }
}


.message-bar { display: flow-root; max-width: 460px;  width: fit-content; margin: 20px auto 22px;  padding: 0 18px 0 52px;  border-radius: 5px;  background-position: 12px center;  background-repeat: no-repeat;}
.warning-bar { background-color: #FCE8E6;  background-image: url("images/icons/warning-large.png");}
.info-bar { background-color: #d6e2ff;  background-image: url("images/icons/info-large.png");}
.success-bar { background-color: #d9ffd6;  background-image: url("images/icons/success-large.png");}