/* 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;
    --sandygrey-hover: #a2a08c;
    --sandyblack: #1b1c15;

    --box-margin: 26px;
    --box-box-margin: 34px;
    --box-max-width: 620px;
    --text-font-size: 16px;
    --text-line-height: 22px;
    --text-margin: 16px;
    --text-margin-mobile: 12px;
    --text-max-width: 730px;
    --text-max-width-x: 840px;
    --narrow-text-max-width: 580px;
    --box-slight-indent: 0.4%;
    --list-item-margin: 5px;
    --menu-gap: 8px;
}

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

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

a, .base-transition, .standard-button, .slim-button, .item-label, .single-checkbox /*, label*/ { transition: background-color 0.18s ease-in-out;}
.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; }

@media (max-width: 1350px)
{
    .header-menu-block { position: relative; flex-flow: row-reverse;}
}

@media (max-width: 560px)
{
    .header-menu-block { margin-bottom: 12px;}
}

.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(--box-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; }

.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-icon-large.png");}
.info-bar { background-color: #d6e2ff;  background-image: url("images/icons/info-icon-large.png");}
.success-bar { background-color: #d9ffd6;  background-image: url("images/icons/success-icon-large.png");}