:root {    
    /* FONTS */
    /* FONTS */
    /* FONTS */
    
    --body-font1: "Ubuntu", Arial, Helvetica, sans-serif;
    --title-font1: "Outfit", Arial, Helvetica, sans-serif;
    
    /* COLORS */
    /* COLORS */
    /* COLORS */
    
    --dd-focus-outline-color: #4b92e7;
    
    --bg-dark1-hs: 216, 22%;
    --bg-dark1: hsl(var(--bg-dark1-hs), 22%);
    
    --bg-light1-hs: 0, 0%;
    --bg-light1: hsl(var(--bg-light1-hs), 93%);
    
    --bg-light2-hs: 219, 21%;
    --bg-light2: hsl(var(--bg-light2-hs), 87%);
    
    --bg-red1-hs: 0, 94%;
    --bg-red1: hsl(var(--bg-red1-hs), 33%);
    
    --bg-yellow1-hs: 42, 70%;
    --bg-yellow1: hsl(var(--bg-yellow1-hs), 67%);
    
    --bg-cyan1-hs: 183, 75%;
    --bg-cyan1: hsl(var(--bg-cyan1-hs), 37%);
    
    --text-light1-hs: 0, 0%;
    --text-light1: hsl(var(--text-light1-hs), 78%);
    
    --text-dark1-hs: 0, 0%;
    --text-dark1: hsl(var(--text-dark1-hs), 15%);
    
    --text-brown1-hs: 45, 45%;
    --text-brown1: hsl(var(--text-brown1-hs), 26%);
    
    --text-green1-hs: 120, 100%;
    --text-green1: hsl(var(--text-green1-hs), 25%);
    
    --text-darkblue1-hs: 222, 31%;
    --text-darkblue1: hsl(var(--text-darkblue1-hs), 33%);
    
    --white-hs: 0, 0%;
    --white: hsl(var(--white-hs), 100%);
    
    --black-hs: 0, 0%;
    --black: hsl(var(--black-hs), 0%);
    
    --grey95: hsl(var(--black-hs), 95%);
    --grey90: hsl(var(--black-hs), 90%);
    --grey85: hsl(var(--black-hs), 85%);
    --grey80: hsl(var(--black-hs), 80%);
    --grey75: hsl(var(--black-hs), 75%);
    --grey70: hsl(var(--black-hs), 70%);
    --grey65: hsl(var(--black-hs), 65%);
    --grey60: hsl(var(--black-hs), 60%);
    --grey55: hsl(var(--black-hs), 55%);
    --grey50: hsl(var(--black-hs), 50%);
    --grey45: hsl(var(--black-hs), 45%);
    --grey40: hsl(var(--black-hs), 40%);
    --grey35: hsl(var(--black-hs), 35%);
    --grey30: hsl(var(--black-hs), 30%);
    --grey25: hsl(var(--black-hs), 25%);
    --grey20: hsl(var(--black-hs), 20%);
    --grey15: hsl(var(--black-hs), 15%);
    --grey10: hsl(var(--black-hs), 10%);
    --grey5: hsl(var(--black-hs), 5%);
    
    --green1-hs: 120, 100%;
    --green1: hsl(var(--green1-hs), 25%);
    
    --darkblue1-hs: 216, 22%;
    --darkblue1: hsl(var(--darkblue1-hs), 22%);
    
    --burgundy1-hs: 0, 79%;
    --burgundy1: hsl(var(--burgundy1-hs), 30%);
    
    --lightblue1-hs: 220, 24%;
    --lightblue1: hsl(var(--lightblue1-hs), 80%);
}

/* BASE STYLES */
/* BASE STYLES */
/* BASE STYLES */

html, body {
    font-family: var(--body-font1);
    background-color: var(--bg-light1);
    color: var(--text-dark1);
    margin: 0;
}

[hidden] { display: none !important }

input[type="checkbox"] {margin: 0}
input {font-size: inherit}

*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0 }

p {
    margin-bottom: 1em;
}

a, a:hover, a:visited {
    text-decoration: none;
    color: inherit;
    line-height: 1;
}

::-moz-focus-inner {border: none}

:focus { outline: none }

/* GRID UTILITY CLASSES */
/* GRID UTILITY CLASSES */
/* GRID UTILITY CLASSES */

[class*="grid"] { display: grid; }
.grid-2c { grid-template-columns: var(--c1, auto) var(--c2, auto) }
.grid-3c { grid-template-columns: var(--c1, auto) var(--c2, auto) var(--c3, auto) }
.grid-4c { grid-template-columns: var(--c1, auto) var(--c2, auto) var(--c3, auto) var(--c4, auto) }

[class*="grid"] .row {
    display: contents;
    background-color: inherit;
    color: inherit;
    cursor: var(--row-cursor, auto);
}

[class*="grid"] .row:hover {
    background-color: var(--row-hover-bg, inherit);
}

[class*="grid"] > .body {
    display: contents;
    background-color: var(--body-bg, inherit);
    color: var(--body-color, inherit);
}

[class*="grid"] .cell {
    display: var(--cell-display, block);
    padding: var(--cell-padding, 0);
    background-color: var(--cell-bg, inherit);
    color: var(--cell-color, inherit);
}

[class*="grid"] .header .cell {
    padding: var(--header-padding, var(--cell-padding, 0));
    background-color: var(--header-bg, inherit);
    color: var(--header-color, inherit);
    font-weight: var(--header-font-weight, inherit);
    font-size: var(--header-font-size, inherit);
    text-transform: var(--header-text-transform, none);
}

[class*="grid"] .header .cell:hover {
    background-color: var(--header-cell-hover-bg, var(--header-bg, inherit));
}

.grid-2c > .cell:nth-child(2n+1) {
    display: var(--c1-display, var(--cell-display, block));
    color: var(--c1-color, var(--cell-color, inherit));
}

.grid-2c > .cell:nth-child(2n+2) {
    display: var(--c2-display, var(--cell-display, block));
    color: var(--c2-color, var(--cell-color, inherit));
}

/* BUTTONS */
/* BUTTONS */
/* BUTTONS */

[class*="button-style"], [class*="tag-style"], [class*="label-style"], [class*="header-style"], [class*="checkbox-style"] {
    --border-color: var(--button-border-color, transparent);
    --border-style: var(--button-border-style, solid);
    --border-width: var(--button-border-width, 0);
    
    --border-top: var(--button-border-top, var(--border-width) var(--border-color));
    --border-right: var(--button-border-right, var(--border-width) var(--border-color));
    --border-bottom: var(--button-border-bottom, var(--border-width) var(--border-color));
    --border-left: var(--button-border-left, var(--border-width) var(--border-color));
    
    --button-margin: var(--button-margin-top, 0) var(--button-margin-right, 0) var(--button-margin-bottom, 0) var(--button-margin-left, 0);
    
    display: var(--button-display, flex);
    gap: var(--button-gap, 0.3em);
    align-items: center;
    justify-content: var(--button-justify-content, center);
    
    background-color: var(--button-bg, transparent);
    background-clip: padding-box;
    color: var(--button-color, inherit);
    padding: var(--button-padding, 0);
    margin: var(--button-margin, 0);
    
    border-top: var(--border-style) var(--border-top);
    border-right: var(--border-style) var(--border-right);
    border-bottom: var(--border-style) var(--border-bottom);
    border-left: var(--border-style) var(--border-left);
    
    border-radius: var(--button-border-radius, 0);
    font-size: var(--button-font-size, inherit);
    line-height: var(--button-line-height, 1);
    font-weight: var(--button-font-weight, inherit);
    cursor: var(--button-cursor, pointer);
    text-transform: var(--button-text-transform, none);
    width: var(--button-width, initial);
    white-space: var(--button-white-space, normal);
}

[class*="tag-style"], [class*="header-style"] { cursor: var(--button-cursor, default) }
[class*="header-style"] { cursor: auto }

[class*="button-style"]:hover, [class*="checkbox-style"]:hover, [class*="tag-style"]:hover {
    color: var(--button-hover-color, var(--button-color, inherit));
    background-color: var(--button-hover-bg, var(--button-bg, inherit));
    border-color: var(--button-hover-border-color, var(--button-border-color, transparent));
}

[class*="button-style"].button-active {
    color: var(--button-active-color, var(--button-color, inherit));
    background-color: var(--button-active-bg, var(--button-bg, inherit));
    border-color: var(--button-active-border-color, var(--button-border-color, transparent));
    font-weight: var(--button-active-font-weight, var(--button-font-weight, inherit));
}

[class*="button-style"] .fa {
    font-size: 1.2em;
}

[class*="button-style1"] {
    --button-font-size: .9rem;
    --button-border-width: 1px;
    --button-border-radius: .4em;
    --button-padding: .3em .8em;
    --button-font-weight: bold;
}

[class*="button-style1-white1"] {
    --button-color: hsl(var(--text-dark1-hs), 25%);
    --button-bg: hsl(0, 0%, 100%);
    --button-border-color: hsl(0, 0%, 70%);
    --button-border-bottom: 2px var(--button-border-color);
    
    --button-hover-color: hsl(var(--text-dark1-hs), 10%);
    --button-hover-border-color: hsl(0, 0%, 60%);
}
    
[class*="button-style1-red1"] {
    --button-color: hsl(var(--text-light1-hs), 90%);
    --button-bg: var(--bg-red1);
    
    --button-hover-color: hsl(var(--text-light1-hs), 100%);
    --button-hover-bg: hsl(var(--bg-red1-hs), 25%);
}

[class*="button-style2"] {
    --button-border-radius: 0.7em;
    --button-padding: 0.2em 0.7em;
    --button-font-size: 1rem;
    --button-font-weight: bold;
    --button-hover-bg: hsl(var(--bg-light1-hs), 78%);
    --button-active-bg: var(--bg-dark1);
    --button-active-color: hsl(var(--text-light1-hs), 90%);
}

[class*="tag-style1"] {
    --button-text-transform: uppercase;
    --button-font-size: .77rem;
    --button-border-radius: 5px;
    --button-font-weight: bold;
    --button-padding: 0 4px;
}

.tag-style1-yellow1 {
    --button-bg: var(--bg-yellow1);
    --button-color: var(--text-brown1);
}

/* INPUT */
/* INPUT */
/* INPUT */

[class*="input-style"] {
    --input-border-radius:
        var(--input-border-top-left-radius, 0)
        var(--input-border-top-right-radius, 0)
        var(--input-border-bottom-right-radius, 0)
        var(--input-border-bottom-left-radius, 0);
    
    --border-color: var(--input-border-color, transparent);
    --border-style: var(--input-border-style, solid);
    --border-width: var(--input-border-width, 0);
    
    --border-top: var(--input-border-top, var(--border-width) var(--border-color));
    --border-right: var(--input-border-right, var(--border-width) var(--border-color));
    --border-bottom: var(--input-border-bottom, var(--border-width) var(--border-color));
    --border-left: var(--input-border-left, var(--border-width) var(--border-color));
    
    display: var(--input-display, inline-block);
    font-size: var(--input-font-size, 1rem);
    line-height: var(--input-line-height, 1.1);
    outline: var(--input-outline, none);
    width: 100%;
    max-width: var(--input-max-width, none);
    min-width: var(--input-min-width, none);
    
    border-top: var(--border-style) var(--border-top);
    border-right: var(--border-style) var(--border-right);
    border-bottom: var(--border-style) var(--border-bottom);
    border-left: var(--border-style) var(--border-left);
    
    border-radius: var(--input-border-radius);
    
    background-color: var(--input-bg, #fff);
    padding: var(--input-padding);
}

[class*="input-style"]:focus {
    border-color: var(--input-focus-border-color, transparent);
    outline: var(--input-focus-outline, none);
}

[class*="input-style1"], .input1 {
    --input-padding: .25em .4em;
    --input-border-width: 1px;
    --input-border-color: var(--grey75);
    --input-border-radius: .3em;
    --input-focus-border-color: #000;
}

/* CHECKBOX */
/* CHECKBOX */
/* CHECKBOX */

[class*="checkbox-style"]::before {
    content: '';
    width: var(--checkbox-size, 13px);
    height: var(--checkbox-size, 13px);
    border-radius: 3px;
    border: 2px solid var(--checkbox-bg, var(--white));
    background: var(--checkbox-bg, var(--white));
    box-shadow: 0 0 1px 1px var(--grey75);
}

[class*="checkbox-style"].checked::before {
    background: var(--checkbox-checked-bg, #4b92e7);
}

[class*="checkbox-style"].checked {
    color: var(--checkbox-checked-color, var(--button-color, inherit));
}

[class*="checkbox-style"].checked:hover {
    color: var(--button-hover-color, var(--checkbox-checked-color, inherit));
}

/* SEPARATOR (hr) */
/* SEPARATOR (hr) */
/* SEPARATOR (hr) */

hr {
    width: var(--separator-width, calc(100% - 2 * var(--separator-margin-inline, 0px)));
    max-width: var(--separator-max-width, none);
    height: var(--separator-height, 1px);
    background-color: var(--separator-color, #888);
    margin-top: var(--separator-margin-top, var(--separator-margin, 0));
    margin-bottom: var(--separator-margin-bottom, var(--separator-margin, 0));
    margin-left: var(--separator-margin-inline, 0);
    margin-right: var(--separator-margin-inline, 0);
    padding: var(--separator-padding, 0);
    border: none;
}

/* TOP MENU */
/* TOP MENU */
/* TOP MENU */

.top-menu1 {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    justify-items: center;
    width: 100%;
    background: #2c3645;
    font-size: 1.3rem;
    color: var(--grey70);
}

.top-menu1 > *:first-child {
    display: flex;
    font-size: 1rem;
    height: 100%;
    justify-self: start;
}

.top-menu1 > *:nth-child(2) {
    --button-color: var(--grey70);
    --button-hover-color: var(--grey85);
    --button-active-color: white;
    --button-padding: 0 .5em;
    
    display: flex; 
    font-weight: bold;
    justify-content: center;
    align-items: stretch;
}

.top-menu1 .logo {
    line-height: 0;
    padding: .2em .5em;
}

.hamburger-button1 {
    --button-color: var(--grey70);
    --button-hover-color: white;
    
    padding: 0 10px;
    font-size: 1rem; 
    display: flex;
    align-items: center;
    line-height: 1;
    justify-self: end;
}

.hamburger-button1 .avatar_svg {
    width: 26px;
    height: 26px;
}

.hamburger-menu1 {
    --button-color: var(--grey70);
    --button-hover-color: white;
    --button-padding: .2em .6em;
    --button-font-size: 1.3rem;
    --button-justify-content: flex-start;
    
    --separator-margin-inline: .5em;
    --separator-color: var(--grey50);
    --separator-margin: .2em;
    
    border-bottom-left-radius: .4em;
    background: var(--darkblue1);
    box-shadow: -1px 1px 1px var(--grey70);
}

/* BUTTONS */
/* BUTTONS */
/* BUTTONS */

[class*="button-style-round"], [class*="button-pill"] {
    --button-font-weight: bold;
    --button-border-radius: 9999px;
    --button-padding: .5em .8em;
}

.button-style-round-green1, .button-pill-green1 {
    --button-bg: var(--green1);
    --button-hover-bg: hsl(var(--green1-hs), 22%);
    --button-color: var(--grey90);
    --button-hover-color: var(--white);
}

.button-style-round-grey1, .button-pill-grey1 {
    --button-bg: var(--grey45);
    --button-hover-bg: var(--grey35);
    --button-color: var(--grey90);
    --button-hover-color: var(--white);
}

.button-style-round-darkblue1, .button-pill-darkblue1 {
    --button-bg: var(--darkblue1);
    --button-hover-bg: hsl(var(--darkblue1-hs), 15%);
    --button-color: var(--grey90);
    --button-hover-color: var(--white);
}

.button-style-round-burgundy1, .button-pill-burgundy1 {
    --button-bg: var(--burgundy1);
    --button-hover-bg: hsl(var(--burgundy1-hs), 25%);
    --button-color: var(--grey90);
    --button-hover-color: var(--white);
}

[class*="button-style3"], [class*="button-small"] {
    --button-font-weight: bold;
    --button-text-transform: uppercase;
    --button-padding: 0em;
    --button-color: var(--grey45);
    --button-bg: var(--grey80);
    --button-border-radius: .2em;
    --button-font-size: .85rem;
    --button-padding: .15em .3em;
    --button-hover-color: var(--white);
}

.button-style3-darkblue1, .button-small-darkblue1 {
    --button-bg: var(--darkblue1);
    --button-color: var(--grey85);
}

.button-style3-burgundy1, .button-small-burgundy1 {
    --button-bg: var(--burgundy1);
    --button-color: var(--grey85);
}

.button-style3-green1, .button-small-green1 {
    --button-bg: var(--green1);
    --button-color: var(--grey85);
}

/* DD-SELECT */
/* DD-SELECT */
/* DD-SELECT */

dd-select {
    box-shadow: 0px 0px 1px var(--grey70);
}

.select1 {
    --button-color: var(--grey20);
    --button-hover-color: var(--black);
    --button-padding: .2em .6em;
    --button-hover-bg: hsl(var(--lightblue1-hs), 74%);
    border-radius: .3em;
    padding: .2em;
    background: var(--lightblue1);
    min-width: 150px;
}

/* TABLET VIEW */
/* TABLET VIEW */
/* TABLET VIEW */

@media(max-width: 1170px) {
    .top-menu1 {
        grid-template-columns: 1fr 1fr;
    }
}