:root {
    --clr-green: #008938;
    --clr-dark-green: #124D47;
    --clr-yellow: #f2b700;
    --smaller-font: 0.8rem;
    --small-font: 0.7rem;
    --bigger-font: 1.2rem;
    --big-font: 1.3rem;
}

.bg-green {
    background-color: var(--clr-green);
    color: white;
}

.bg-yellow {
    background-color: var(--clr-yellow);
    color: white;
}

.bg-green a {
    text-decoration-color: var(--clr-yellow);
}


.txt-yellow {
    color: var(--clr-yellow);
}

.txt-right {
    text-align: right;
}

.smaller-font {
    font-size: var(--smaller-font);
}

.small-font {
    font-size: var(--small-font);
}

.bigger-font {
    font-size: var(--bigger-font);
}

.big-font {
    font-size: var(--big-font);
}

.gap-05 {
    gap: 0.5rem;
}

.gap-1 {
    gap: 1rem;
}

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-end {
    justify-content: end;
}

.align-items-end {
    align-items: end;
}

.align-items-center {
    align-items: center;
}

.m-bl-05 {
    margin-block: 0.5rem;
}

.p-bl-05 {
    padding-block: 0.5rem;
}

.line-height-1 {
    line-height: 1;
}

.w-max-content {
    width: max-content;
    text-wrap: nowrap;
}

.flex-wrap {
    flex-wrap: wrap;
}

button {
    cursor: pointer;
}

.btn {
    border: none;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.5em;
    border-radius: 0.5em;
    padding: 0.5em 2em;
    text-transform: uppercase;
}

i:has(svg) {
    display: inline-block;
    line-height: 1;
}

i svg {
    width: 1.7em;
    height: auto;
    fill: currentColor;
}

.hide-on-desktop {
    display: none;
}

@media (width < 43.75em) {
    .hide-on-mobile {
        display: none;
    }

    .hide-on-desktop {
        display: block;
    }
}
/* https://piccalil.li/blog/a-more-modern-css-reset */

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
    margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'], ol[role='list'] {
    list-style: none;
}

/* Set core body defaults */
body {
    font-family: -apple-system, system-ui, sans-serif;
    min-height: 100vh;
    line-height: 1.5;
    overflow-x: hidden;
    min-width: 300px;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4, button, input, label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2, h3, h4 {
    text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

/* Make images easier to work with */
img, picture {
    max-width: 100%;
    display: inline-block;
}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}

p, li, figcaption {
    text-wrap: pretty;
    max-width: 65ch;
}
@font-face {
    font-family: 'SubwaySans';
    src: url("../../files/assets/fonts/SubwaySans-Regular-Cy-Gr-Web.woff2") format('woff2');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'SubwaySans';
    src: url("../../files/assets/fonts/SubwaySans-Bold-Cy-Gr-Web.woff2") format('woff2');
    font-weight: bold;
    font-style: normal
}

@font-face {
    font-family: 'SubwaySans';
    src: url("../../files/assets/fonts/SubwaySans-BoldItalic-Cy-Gr-Web.woff2") format('woff2');
    font-weight: bold;
    font-style: italic
}

body {
    font-family: 'SubwaySans', -apple-system, system-ui, sans-serif;
    font-variant: tabular-nums;
    color: var(--clr-dark-green);
}

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

#container {
    flex: 1;
}

#main .inside > * > * {
    margin-block: 1rem;
}

header, footer {
    background-color: var(--clr-dark-green);
    color: white;
}

header .mbtlbx-logo {
    width: 200px;
}

header .logo-my path, header .logo-toolbox path {
    fill: white;
}

.invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.bi {
    width: 1.7em;
    height: auto;
}

button .bi {
    width: 1em;
    height: auto;
}

nav {
    background-color: var(--clr-yellow);
}

nav ul {
    display: flex;
    gap: 1em;
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-size: var(--bigger-font);
}

nav li.active {
    color: var(--clr-dark-green)
}

a {
    text-decoration: none;
}

button:hover, a:hover {
    text-decoration: underline;
}

.widget:has(label) {
    display: flex;
    flex-direction: column;
    margin-block: 0.5em;
}

.widget label {
    font-size: var(--small-font);
}

.mod_login form {
    background-color: var(--clr-yellow);
    padding: 1rem 2rem;
}

#menu-btn {
    position: absolute;
    top: var(--space-gap);
    right: var(--space-gap);
}

@media (width < 43.75em) {
    nav {
        position: absolute;
        top: 0;
        right: 0;
        transform: translateX(100%);
        padding: 1rem;
        text-align: center;
        height: 100%;
    }

    nav .fb-col-wrapper {
        display: block;
        margin-block: 1rem;
    }

    nav ul {
        flex-direction: column;
    }
}

/*  https://github.com/thecodercoder/fullbleed-grid */

:root {
    --space-lr: 40px;
    --space-gap: 20px;
    --col-count: 2;
}

.fb-col-wrapper {
    display: grid;
    grid-template-columns: 1fr repeat(var(--col-count), calc((min(100% - var(--space-lr), 60rem) - (var(--col-count) - 1) * var(--space-gap)) / var(--col-count))) 1fr;
    grid-gap: 0 var(--space-gap);
}

.fb-col-wrapper > :not([class*="g-col-start-"]),
[class*="g-col-start-1"],
[class*="g-col-start-2"],
[class*="g-col-start-3"],
[class*="g-col-start-4"],
[class*="g-col-start-5"],
[class*="g-col-start-6"] {
    grid-column-start: 2;
}

.fb-col-wrapper > :not([class*="g-col-end-"]),
[class*="g-col-end-1"],
[class*="g-col-end-2"],
[class*="g-col-end-3"],
[class*="g-col-end-4"],
[class*="g-col-end-5"],
[class*="g-col-end-6"] {
    grid-column-end: -2;
}

[class*="g-col-start-edge"] {
    grid-column-start: 1;
}

[class*="g-col-end-edge"] {
    grid-column-end: -1;
}

@media (width >= 43.75em) {
    :root {
        --space-lr: 80px;
        --space-gap: 30px;
        --col-count: 6;
    }

    [class*="g-col-start-1"] {
        grid-column-start: 2;
    }

    [class*="g-col-start-2"] {
        grid-column-start: 3;
    }

    [class*="g-col-start-3"] {
        grid-column-start: 4;
    }

    [class*="g-col-start-4"] {
        grid-column-start: 5;
    }

    [class*="g-col-start-5"] {
        grid-column-start: 6;
    }

    [class*="g-col-start-6"] {
        grid-column-start: 7;
    }

    [class*="g-col-end-1"] {
        grid-column-end: 3;
    }

    [class*="g-col-end-2"] {
        grid-column-end: 4;
    }

    [class*="g-col-end-3"] {
        grid-column-end: 5;
    }

    [class*="g-col-end-4"] {
        grid-column-end: 6;
    }

    [class*="g-col-end-5"] {
        grid-column-end: 7;
    }

    [class*="g-col-end-6"] {
        grid-column-end: 8;
    }
}

@media (width >= 62.5em) {
    :root {
        --col-count: 12; /* +2 edge cols */
    }

    [class*="g-col-start-1"] {
        grid-column-start: 2;
    }

    [class*="g-col-start-2"] {
        grid-column-start: 4;
    }

    [class*="g-col-start-3"] {
        grid-column-start: 6;
    }

    [class*="g-col-start-4"] {
        grid-column-start: 8;
    }

    [class*="g-col-start-5"] {
        grid-column-start: 10;
    }

    [class*="g-col-start-6"] {
        grid-column-start: 12;
    }

    [class*="g-col-end-1"] {
        grid-column-end: 4;
    }

    [class*="g-col-end-2"] {
        grid-column-end: 6;
    }

    [class*="g-col-end-3"] {
        grid-column-end: 8;
    }

    [class*="g-col-end-4"] {
        grid-column-end: 10;
    }

    [class*="g-col-end-5"] {
        grid-column-end: 12;
    }

    [class*="g-col-end-6"] {
        grid-column-end: 14;
    }
}