/* FONTS
----------------------------------------------------------*/

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/roboto-v29-latin-ext_latin-300.woff2') format('woff2'), url('/fonts/roboto-v29-latin-ext_latin-300.woff') format('woff');
    font-display: block;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/roboto-v29-latin-ext_latin-regular.woff2') format('woff2'), url('/fonts/roboto-v29-latin-ext_latin-regular.woff') format('woff');
    font-display: block;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/roboto-v29-latin-ext_latin-500.woff2') format('woff2'), url('/fonts/roboto-v29-latin-ext_latin-500.woff') format('woff');
    font-display: block;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/roboto-v29-latin-ext_latin-700.woff2') format('woff2'), url('/fonts/roboto-v29-latin-ext_latin-700.woff') format('woff');
    font-display: block;
}


/* HTML, CUSTOM VARIABLES
----------------------------------------------------------*/

html, input, button, textarea, table {
    font-size: 10px;
    letter-spacing: 0.01em;
    line-height: 1.5;
    font-family: Roboto, Arial, Helvetica, Sans-Serif;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: 100%;
    /* iOS improvements: */
    text-rendering: optimizeLegibility;
    -webkit-font-variant-ligatures: no-common-ligatures;
    -webkit-font-feature-settings: "kern";
    -webkit-font-smoothing: subpixel-antialiased;
}

body {
    margin: 0;
    padding: 0;
    color: var(--g-text-color--grey);
}

article, aside, canvas, details,
figcaption, figure, footer, header,
hgroup, main, nav, section, summary, video {
    display: block;
}

:root {
    --g-text-color--grey: #191919;
    --g-text-color--link: #006eb8;
    --g-text-color--link--hover: #ed5f10; /* use to be #ef7200 */
    --g-color--red: #d20c0c;
    --g-button--hover--red--background: #e41111;
    --g-button--hover--red--border: #c80909;
    --g-button--outline--hover--red--background: rgba(200,9,9,0.08); /* = 8% of --g-button--hover--red--border */
    --g-color--red-2: #ff3333;
    --g-color--blue: #0084dc;
    --g-button--hover--blue--background: #009be3;
    --g-button--hover--blue--border: #0077d8;
    --g-button--outline--hover--blue--background: rgba(0,119,216,0.08); /* = 8% of --g-button--hover--blue--border */
    --g-color--orange: #ec4c1f;
    --g-button--hover--orange--background: #f15f27;
    --g-button--hover--orange--border: #e83b18;
    --g-button--outline--hover--orange--background: rgba(232,59,24,0.05); /* = 5% of --g-button--hover--orange--border */
    --g-button--outline--hover--orange--background--flat: #fef5f3; /* = dtto */
    --g-color--grey: #646464;
    --g-button--hover--grey--background: #7c7c7c;
    --g-button--hover--grey--border: #5c5c5c;
    --g-button--outline--hover--grey--background: rgba(92,92,92,0.08); /* = 8% of --g-button--hover--grey--border */
    --g-color--grey-00: #969696;
    --g-color--grey-01: #a0a0a0;
    --g-color--grey-02: #aaaaaa;
    --g-color--grey-03: #b4b4b4;
    --g-color--grey-04: #bebebe;
    --g-color--grey-05: #cccccc;
    --g-color--grey-0: #cdcdcd;
    --g-color--grey-1: #d7d7d7;
    --g-color--grey-2: #dcdcdc;
    --g-color--grey-3: #e6e6e6;
    --g-color--grey-4: #f0f0f0;
    --g-color--grey-5: #fafafa;
    --g-color--dark-grey: #464646;
    --g-color--dark-grey-1: #505050;
    --g-color--dark-grey-15: #555555;
    --g-color--dark-grey-2: #5a5a5a;
    --g-color--turquoise: #00a4bb;
    --g-button--hover--turquoise--background: #00b5c8;
    --g-button--hover--turquoise--border: #009bb4;
    --g-button--outline--hover--turquoise--background: rgba(0,155,180,0.08); /* = 8% of --g-button--hover--turquoise--border */
    --g-text-color--turquoise: #007399;
    --g-color--green: #00b900;
    --g-button--hover--green--background: #00c900;
    --g-button--hover--green--border: #00ad00;
    --g-button--outline--hover--green--background: rgba(0,173,0,0.08); /* = 8% of --g-button--hover--green--border */
    --g-text-color--green: #008c00; /* #009017; #009c0c*/
    --g-color--green-2: #00ad48;
    --g-button--hover--green-2--background: #00bf58;
    --g-button--hover--green-2--border: #009f3c;
    --g-button--outline--hover--green-2--background: rgba(0,159,60,0.08); /* = 8% of --g-button--hover--green-2--border */
    --g-color--yellow: #d2b700;
    --g-button--hover--yellow--background: #ddc800;
    --g-button--hover--yellow--border: #cdae00;
    --g-color--yellow-2: #de9432;
    --g-text-color--yellow-2: #aa4701; /*#b06002*/
    --g-button--outline--hover--yellow--background: rgba(205,174,0,0.08); /* = 8% of --g-button--hover--yellow--border */
    --g-shadow-05: 0.1rem 0.1rem 0.25rem rgba(0,0,0,0.2);
    --g-shadow-1: 0.1rem 0.1rem 0.5rem rgba(0,0,0,0.25);
    --g-shadow-1--orange: 0.1rem 0.1rem 0.5rem rgba(236,76,31,0.25);
    --g-shadow-1--on-white: 0rem 0rem 0.6rem rgba(0,0,0,0.35);
    --g-shadow-1--top-only: 0 0.1rem 0.5rem rgba(0,0,0,0.25);
    --g-shadow-2: 0.1rem 0.1rem 0.75rem rgba(0,0,0,0.3);
    --g-input--focus--hover--background: #f0f7fd; /* = 6% of --g-button--hover--blue--border */
    --g-input--focus--border: #78bae6;
    --g-input--error--background: #fdf5f5; /* = 4% of --g-button--hover--red--border */
    --g-animation-time--slow: 0.25s;
    --g-animation-time--quick: 0.125s;
}


/* GENERAL
----------------------------------------------------------*/

b,
strong,
.g-bold {
    font-weight: 500;
    letter-spacing: 0.02em;
}

.g-bolder {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.g-not-bold {
    font-weight: 400;
    letter-spacing: 0.01em;
}

a:link,
a:visited,
a:active,
.g-link {
    cursor: pointer;
    text-decoration: none;
    color: var(--g-text-color--link);
    outline: 0;
}

a:focus,
a:hover,
a:active,
.g-link:focus,
.g-link:hover,
.g-link:active {
    text-decoration: none;
    color: var(--g-text-color--link--hover);
}

.g-text-color--link {
    color: var(--g-text-color--link);
}

img {
    width: 100%;
    height: auto;
    border: none;
}

img:not([src]) {
    visibility: hidden;
}

p {
    font-size: 1.6rem;
    padding-bottom: 1em;
    margin: 0;
}

p:last-of-type {
    padding-bottom: 0;
}

ul {
    margin: 0;
    padding: 0 0 0 2em;
}

ul.g-list-style-none {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.g-list-style-none--simplified {
    list-style: none;
}

ul.g-list-style-default {
    font-size: 1.6rem;
    list-style: none;
    padding: 0;
    padding-left: 1em;
    margin: 0;
}

ul.g-list-style-default li {
    position: relative;
}

ul.g-list-style-default li::before {
    position: absolute;
    content: "\2022";
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

ul.g-list-style-default .g-list-style-default li::before {
    content: "\25E6";
}

ul.g-list-style-default ::marker {
    font-size: 1.6rem;
}

.g-text-align--center {
    text-align: center;
}

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

.g-text-align--justify {
    text-align: justify;
}

.g-text-decoration--underline {
    text-decoration: underline !important;
}

.g-text-decoration--line-through {
    text-decoration: line-through;
}

.g-text-decoration--line-through--bold {
    text-decoration-thickness: 0.2rem;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 5rem;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
}

.g-border {
    border: 0.2rem solid black;
}

.g-pen {
    pointer-events: none !important; /* important because of cases when inside over-main */
    -webkit-user-select: none;
    user-select: none;
}

.g-block-ui {
    pointer-events: none !important; /* important because of cases when inside over-main */
    -webkit-user-select: none !important;
    user-select: none !important;
    -moz-user-focus: ignore;
    opacity: 0.5;
}

.g-user-select--none {
    -webkit-user-select: none;
    user-select: none;
}

.g-user-select--all {
    -webkit-user-select: all;
    user-select: all;
    cursor: text;
}

.g-grayscale--1 {
    filter: grayscale(1);
}

video {
    outline: 0;
}


/* COLORS
----------------------------------------------------------*/

.g-color--white {
    background-color: white;
}

.g-color--red {
    background-color: var(--g-color--red);
}

.g-color--blue {
    background-color: var(--g-color--blue);
}

.g-color--orange {
    background-color: var(--g-color--orange);
}

.g-color--grey {
    background-color: var(--g-color--grey);
}

.g-border-color--grey {
    border-color: var(--g-color--grey);
}

.g-color--grey-1 {
    background-color: var(--g-color--grey-1);
}

.g-border-color--grey-1 {
    border-color: var(--g-color--grey-1);
}

.g-color--grey-2 {
    background-color: var(--g-color--grey-2);
}

.g-border-color--grey-2 {
    border-color: var(--g-color--grey-2);
}

.g-color--grey-3 {
    background-color: var(--g-color--grey-3);
}

.g-border-color--grey-3 {
    border-color: var(--g-color--grey-3);
}

.g-color--grey-4 {
    background-color: var(--g-color--grey-4);
}

.g-border-color--grey-4 {
    border-color: var(--g-color--grey-4);
}

.g-color--dark-grey {
    background-color: var(--g-color--dark-grey);
}

.g-color--dark-grey-1 {
    background-color: var(--g-color--dark-grey-1);
}

.g-color--dark-grey-15 {
    background-color: var(--g-color--dark-grey-15);
}

.g-color--dark-grey-2 {
    background-color: var(--g-color--dark-grey-2);
}

.g-color--black {
    background-color: black;
}

.g-color--turquoise {
    background-color: var(--g-color--turquoise);
}

.g-border-color--turquoise {
    border-color: var(--g-color--turquoise);
}

.g-color--green {
    background-color: var(--g-color--green);
}

.g-border-color--green {
    border-color: var(--g-color--green);
}

.g-color--green-2 {
    background-color: var(--g-color--green-2);
}

.g-border-color--green-2 {
    border-color: var(--g-color--green-2);
}

.g-color--yellow {
    background-color: var(--g-color--yellow);
}

.g-border-color--yellow {
    border-color: var(--g-color--yellow);
}

.g-color--yellow-2 {
    background-color: var(--g-color--yellow-2);
}

.g-text-color--white {
    color: white !important;
}

.g-text-color--black {
    color: black !important;
}

.g-text-color--red {
    color: var(--g-color--red) !important;
}

.g-text-color--red-2 {
    color: var(--g-color--red-2) !important;
}

.g-text-color--orange {
    color: var(--g-color--orange) !important;
}

.g-text-color--grey {
    color: var(--g-text-color--grey) !important;
}

.g-text-color--grey-2 {
    color: var(--g-color--grey) !important;
}

.g-text-color--grey-3 {
    color: var(--g-color--grey-03) !important;
}

.g-text-color--grey-4 {
    color: var(--g-color--grey-05) !important;
}

.g-text-color--turquoise {
    color: var(--g-text-color--turquoise) !important;
}

.g-text-color--green {
    color: var(--g-text-color--green) !important;
}

.g-text-color--yellow-2 {
    color: var(--g-text-color--yellow-2) !important;
}


/* SHADOWS
----------------------------------------------------------*/

.g-shadow-05 {
    box-shadow: var(--g-shadow-05);
}

.g-shadow-05--inset {
    box-shadow: inset var(--g-shadow-05);
}

.g-shadow-1 {
    box-shadow: var(--g-shadow-1);
}

.g-shadow-1--inset {
    box-shadow: inset var(--g-shadow-1);
}

.g-shadow-1--orange {
    box-shadow: var(--g-shadow-1--orange);
}

.g-shadow-1--on-white {
    box-shadow: var(--g-shadow-1--on-white);
}

.g-shadow-2 {
    box-shadow: var(--g-shadow-2);
}

.g-shadow-2--inset {
    box-shadow: inset var(--g-shadow-2);
}


/* BORDERS
----------------------------------------------------------*/

.g-border--none {
    border: none !important;
}

.g-border-top--02-rem {
    border-top-width: 0.2rem;
    border-top-style: solid;
}

.g-border-right--02-rem {
    border-right-width: 0.2rem;
    border-right-style: solid;
}

.g-border-bottom--02-rem {
    border-bottom-width: 0.2rem;
    border-bottom-style: solid;
}

.g-border-left--02-rem {
    border-left-width: 0.2rem;
    border-left-style: solid;
}

.g-border-radius--05-rem {
    border-radius: 0.5rem;
}


/* OPACITY
----------------------------------------------------------*/

.g-opacity--05 {
    opacity: 0.5;
}

.g-opacity--066 {
    opacity: 0.66;
}


/* MARGIN, PADDING
----------------------------------------------------------*/

.g-margin-bottom--0 {
    margin-bottom: 0;
}

.g-margin-bottom--1-rem {
    margin-bottom: 1rem;
}

.g-margin-bottom--1-5-rem {
    margin-bottom: 1.5rem;
}

.g-margin-bottom--2-rem {
    margin-bottom: 2rem;
}

.g-margin-bottom--4-rem {
    margin-bottom: 4rem;
}

.g-margin-bottom--6-rem {
    margin-bottom: 6rem;
}

.g-margin-left--auto {
    margin-left: auto !important;
}

.g-margin-left--1-rem {
    margin-left: 1rem;
}

.g-margin-left--2-rem {
    margin-left: 2rem;
}

.g-margin-right--2-rem {
    margin-right: 2rem;
}

.g-margin-top--0 {
    margin-top: 0 !important
}

.g-margin-top--1-rem {
    margin-top: 1rem;
}

.g-margin-top--2-rem {
    margin-top: 2rem;
}

.g-margin-top--4-rem {
    margin-top: 4rem;
}

.g-margin-top--3-rem--negative {
    margin-top: -3rem;
}

.g-margin-left-right--auto {
    margin-left: auto;
    margin-right: auto;
}

.g-padding--1-rem {
    padding: 1rem;
}

.g-padding-top--05-rem {
    padding-top: 0.5rem;
}

.g-padding-top--1-em {
    padding-top: 1em;
}

.g-padding-bottom--0 {
    padding-bottom: 0;
}

.g-padding-bottom--1-em {
    padding-bottom: 1em !important;
}

.g-padding-bottom--1-rem {
    padding-bottom: 1rem;
}

.g-padding-left--0 {
    padding-left: 0;
}

.g-padding-left--2-rem {
    padding-left: 2rem;
}

.g-padding-right--2-rem {
    padding-right: 2rem;
}


/* TABLES, FLEX
----------------------------------------------------------*/

.g-display--table {
    display: table;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.g-display--table-row {
    display: table-row;
}

.g-display--table-cell {
    display: table-cell;
    font-size: 0;
}

table {
    font-size: 1.6rem;
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

th,
td {
    padding: 2rem 2rem;
    border-color: var(--g-color--grey-2);
    border-style: solid;
    border-width: 0;
    border-top-width: 0.2rem;
    border-left-width: 0.2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

th {
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: left;
    border-top-width: 0.2rem;
}

td {
    background-color: white;
}

th:last-child,
td:last-child {
    border-right-width: 0.2rem;
}

tr:last-child th,
tr:last-child td {
    border-bottom-width: 0.2rem;
}

tr:first-child th:first-child,
tr:first-child td:first-child {
    border-top-left-radius: 0.5rem;
}

tr:first-child th:last-child,
tr:first-child td:last-child {
    border-top-right-radius: 0.5rem;
}

tr:last-child th:first-child,
tr:last-child td:first-child {
    border-bottom-left-radius: 0.5rem;
}

tr:last-child th:last-child,
tr:last-child td:last-child {
    border-bottom-right-radius: 0.5rem;
}

.g-table--bold-content th {
    font-weight: 400;
    letter-spacing: 0;
}

.g-table--bold-content td {
    font-weight: 500;
    letter-spacing: 0.02em;
}

.g-table--small-spacing th,
.g-table--small-spacing td {
    padding: 1.5rem 2rem;
}

.g-table--smaller-spacing th,
.g-table--smaller-spacing td {
    padding: 1rem 2rem;
}

.g-display--flex {
    display: flex;
}

.g-display--flex--space-between {
    display: flex;
    justify-content: space-between;
}

.g-display--flex--center {
    display: flex;
    justify-content: center;
}

.g-display--flex--align-center {
    display: flex;
    align-items: center;
}

.g-display--flex--shrink-0 {
    flex-shrink: 0;
}

.g-display--flex--no-wrap {
    flex-wrap: nowrap !important;
}

.g-column-gap--2-rem {
    column-gap: 2rem;
}


/* FORMS, BUTTONS
----------------------------------------------------------*/

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
}

input, select {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    height: 5.4rem;
    line-height: normal;
    padding-top: 0; /* původně 1.7rem, ale blbne ve Firefoxu u Select + Date elementů */
    padding-bottom: 0; /* původně 1.7rem, ale blbne ve Firefoxu u Select + Date elementů */
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1.6rem;
    vertical-align: middle;
    text-overflow: ellipsis;
    background-color: white;
    border: 0.2rem solid black;
    box-shadow: none;
    color: var(--g-text-color--grey);
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=checkbox] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type=date] {
    padding-right: 2rem;
}

input:not([type=text]):focus:not(:disabled),
input:not([type=text]):hover:not(:disabled),
input:not([type=text]):active:not(:disabled),
input[type=text]:focus:not(:disabled):not(:read-only),
input[type=text]:hover:not(:disabled):not(:read-only),
input[type=text]:active:not(:disabled):not(:read-only),
textarea:focus:not(:disabled),
textarea:hover:not(:disabled),
textarea:active:not(:disabled),
select:focus:not(:disabled),
select:hover:not(:disabled),
select:active:not(:disabled) {
    background-color: var(--g-input--focus--hover--background);
}

input:focus,
input:active,
textarea:focus,
textarea:active,
select:focus,
select:active {
    outline: 0;
}

input:not([type=text]):focus:not(:disabled),
input:not([type=text]):active:not(:disabled),
input[type=text]:focus:not(:disabled):not(:read-only),
input[type=text]:active:not(:disabled):not(:read-only),
.g-text-editor-wrapper.g-active:not(.g-disabled),
textarea:focus:not(:disabled),
textarea:active:not(:disabled),
select:focus:not(:disabled),
select:active:not(:disabled) {
    border: 0.2rem solid var(--g-input--focus--border);
}

input:disabled,
input[type=text]:read-only,
textarea:disabled,
select:disabled {
    background-color: transparent;
    opacity: 1;
    color: var(--g-text-color--grey);
    -webkit-text-fill-color: var(--g-text-color--grey) !important; /* iOS fix */
}

input.g-text-color--red:disabled,
input[type=text].g-text-color--red:read-only,
textarea.g-text-color--red:disabled,
select.g-text-color--red:disabled {
    -webkit-text-fill-color: var(--g-color--red) !important; /* because of iOS fix */
}

input:-webkit-autofill {
    border-color: var(--g-color--grey-2);
    -webkit-text-fill-color: var(--g-text-color--grey);
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

input:-webkit-autofill::first-line {
    font-family: Roboto, Arial, Helvetica, Sans-Serif;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--g-text-color--grey);
    -webkit-box-shadow: 0 0 0px 1000px var(--g-input--focus--hover--background) inset;
}

input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    border: 0.2rem solid var(--g-input--focus--border);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

::placeholder {
    color: var(--g-color--grey);
    opacity: 1; /* kvůli Firefoxu */
}

input:focus::placeholder,
input:active::placeholder {
    color: transparent;
}

.g-input--error,
input.invalid,
.g-text-editor-wrapper.invalid,
.g-text-editor-wrapper.g-active.invalid,
textarea.invalid,
select.invalid {
    animation: g-input--error-animation var(--g-animation-time--slow) ease-out 1 forwards !important;
    border-color: var(--g-color--red) !important;
}

input.g-input--error:focus,
input.g-input--error:hover,
input.g-input--error:active,
input.invalid:focus,
input.invalid:hover,
input.invalid:active,
textarea.g-input--error:focus,
textarea.g-input--error:hover,
textarea.g-input--error:active,
textarea.invalid:focus,
textarea.invalid:hover,
textarea.invalid:active,
select.g-input--error:focus,
select.g-input--error:hover,
select.g-input--error:active,
select.invalid:focus,
select.invalid:hover,
select.invalid:active {
    border-color: var(--g-color--red) !important;
    background-color: var(--g-input--error--background) !important;
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

.invalid:-webkit-autofill.invalid,
.g-input--error:-webkit-autofill,
.invalid:-webkit-autofill:focus,
.invalid:-webkit-autofill:hover,
.invalid:-webkit-autofill:active,
.g-input--error:-webkit-autofill:focus,
.g-input--error:-webkit-autofill:hover,
.g-input--error:-webkit-autofill:active {
    border-color: var(--g-color--red);
    -webkit-box-shadow: 0 0 0px 1000px var(--g-input--error--background) inset;
}

input[type="file"] {
    height: 5.6rem;
    padding: 0;
    color: var(--g-text-color--grey);
}

input[type="file"]::-webkit-file-upload-button {
    height: 5.4rem;
    background-color: var(--g-color--grey);
    outline: 0;
    border-width: 0;
    padding: 0 2.2rem 0 2rem;
    color: white;
}

.g-file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.g-text-editor-wrapper {
    border-width: 0.2rem;
    border-style: solid;
    overflow: hidden;
}

textarea {
    resize: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 13.6rem;
    padding-top: 1.7rem;
    padding-bottom: 1.7rem;
    padding-left: 2rem;
    padding-right: 2rem; /* use to be missing, probably on purpose, not sure why, causes issues in frontend */
    font-size: 1.6rem;
    vertical-align: middle;
    background-color: white;
    border: 0.2rem solid black;
    box-shadow: none;
}

button {
    margin: 0; /* because of iPad Safari */
    padding: 0;
    cursor: pointer;
    border: none;
    border-radius: 0;
    background-color: inherit;
    text-align: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-user-select: none;
    user-select: none;
}

.g-button {
    position: relative;
    box-sizing: border-box;
    display: inline-flex; /* use to be inline-block */
    overflow: hidden;
    width: 100%;
    height: 6rem;
    font-size: 1.6rem;
    padding: 0;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-align: center;
    border: 0.2rem solid black;
}

.g-button--smaller {
    height: 5.4rem;
}

button:disabled,
.g-button--disabled {
    cursor: default !important; /* use to be without important */
}

button:focus,
button:hover,
button:active,
.g-button:focus,
.g-button:hover,
.g-button:active {
    outline: 0;
}

button::-moz-focus-inner {
    border: 0;
}

.g-button > span {
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin: auto;
    width: 100%;
    text-align: center;
    line-height: 5.6rem;
    padding: 0 3rem;
    /*padding: 0 min(50%, 3rem); disabled - causes issues with width: auto - possible webkit bug */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.g-button--smaller > span {
    line-height: 5rem;
}

.g-button--text__img {
    flex-shrink: 0;
    width: 5.6rem;
    height: 5.6rem;
    margin-left: -1.5rem;
    margin-right: 0;
    background-size: 2000%;
    background-position: 0 0;
    transform: scale(1.071); /* as if cointaner had 6rem */
}

.g-button--smaller .g-button--text__img {
    width: 5rem;
    height: 5rem;
    margin-left: -1.2rem;
    margin-right: 0.3rem;
    transform: scale(1.2); /* as if cointaner had 6rem */
}

.g-button--large-image .g-button--text__img {
    margin-left: -1rem;
    margin-right: 0.5rem;
}

.g-button--text__img:only-child {
    margin-left: 0;
    margin-right: 0;
}

.g-button--text__text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis
}

.g-button--double-lined {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.g-button--double-lined .g-button--double-lined__text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.438; /* line height is 2.3rem for 1.6rem font-size */
    margin-top: 0;
    margin-bottom: 0;
}

.g-button--text__img + .g-button--double-lined__text-wrapper {
    align-items: start;
}

.g-button--double-lined .g-button--double-lined__secondary-text {
    max-width: 100%;
    font-size: 1.4rem;
    line-height: 1.36;
    opacity: 0;
    height: 1.9rem;
    margin-bottom: -1.9rem;
    overflow: hidden;
    text-overflow: ellipsis
}

.g-button--double-lined.g-button--double-lined--large-secondary-text .g-button--double-lined__secondary-text {
    font-size: 1.6rem;
    line-height: 1.438; /* line height is 2.3rem for 1.6rem font-size */
    height: 2.3rem;
    margin-bottom: -2.3rem;
}

.g-button--double-lined.g-button--double-lined--secondary-text-visible.g-button--double-lined--large-secondary-text > span > span:not(.g-button--double-lined__secondary-text) {
    font-size: 1.4rem;
    line-height: 1.36;
}

.g-button--double-lined.g-button--double-lined--secondary-text-visible .g-button--double-lined__secondary-text:not(:empty) {
    opacity: 1;
    margin-bottom: 0;
}

.g-button--double-lined.g-button--double-lined--secondary-text-visible.g-button--double-lined--large-secondary-text .g-button--double-lined__secondary-text:not(:empty) {
    opacity: 1;
    margin-bottom: -0.2rem; /* visually tweaked to better align to the middle */
}

.g-button--double-lined.g-button--double-lined--secondary-text-visible.g-button--double-lined--double-lined-secondary-text .g-button--double-lined__secondary-text {
    font-size: 1.6rem;
    line-height: 1.438; /* line height is 2.3rem for 1.6rem font-size */
    height: 2.3rem;
    margin-bottom: -2.3rem;
}

.g-button--double-lined.g-button--double-lined--secondary-text-visible.g-button--double-lined--double-lined-secondary-text .g-button--double-lined__secondary-text:not(:empty) {
    margin-bottom: 0;
}

.g-button.g-color--red {
    color: white;
    border: 0.2rem solid var(--g-button--hover--red--border);
}

.g-button.g-color--red:focus,
.g-button.g-color--red:hover,
.g-button.g-color--red:active,
.g-button.g-working.g-color--red,
.g-button.g-active.g-color--red {
    background-color: var(--g-button--hover--red--background);
}

.g-button--outline.g-color--red {
    background-color: transparent;
    color: var(--g-color--red); /* different than other colors due to validation errors and visual consistency */
    border: 0.2rem solid var(--g-color--red) !important; /* different than other colors due to validation errors and visual consistency */
}

.g-button--outline.g-color--red:focus,
.g-button--outline.g-color--red:hover,
.g-button--outline.g-color--red:active,
.g-button--outline.g-working.g-color--red,
.g-button--outline.g-active.g-color--red {
    background-color: var(--g-button--outline--hover--red--background);
}

.g-button.g-color--blue {
    color: white;
    border: 0.2rem solid var(--g-button--hover--blue--border);
}

.g-button.g-color--blue:focus,
.g-button.g-color--blue:hover,
.g-button.g-color--blue:active,
.g-button.g-working.g-color--blue,
.g-button.g-active.g-color--blue {
    background-color: var(--g-button--hover--blue--background);
}

.g-button--outline.g-color--blue {
    background-color: transparent;
    color: var(--g-button--hover--blue--border);
}

.g-button--outline.g-color--blue:focus,
.g-button--outline.g-color--blue:hover,
.g-button--outline.g-color--blue:active,
.g-button--outline.g-working.g-color--blue,
.g-button--outline.g-active.g-color--blue {
    background-color: var(--g-button--outline--hover--blue--background);
}

.g-button.g-color--orange {
    color: white;
    border: 0.2rem solid var(--g-button--hover--orange--border);
}

.g-button.g-color--orange:focus,
.g-button.g-color--orange:hover,
.g-button.g-color--orange:active,
.g-button.g-working.g-color--orange,
.g-button.g-active.g-color--orange {
    background-color: var(--g-button--hover--orange--background);
}

.g-button--outline.g-color--orange {
    background-color: transparent;
    color: var(--g-button--hover--orange--border);
}

.g-button--outline.g-color--orange:focus,
.g-button--outline.g-color--orange:hover,
.g-button--outline.g-color--orange:active,
.g-button--outline.g-working.g-color--orange,
.g-button--outline.g-active.g-color--orange {
    background-color: var(--g-button--outline--hover--orange--background);
}

.g-button.g-color--grey {
    color: white;
    border: 0.2rem solid var(--g-button--hover--grey--border);
}

.g-button.g-color--grey:focus,
.g-button.g-color--grey:hover,
.g-button.g-color--grey:active,
.g-button.g-working.g-color--grey,
.g-button.g-active.g-color--grey {
    background-color: var(--g-button--hover--grey--background);
}

.g-button--outline.g-color--grey {
    background-color: transparent;
    color: var(--g-button--hover--grey--border);
    border-color: var(--g-color--grey); /* use to be not present, added because of outline button with image only for consistency */
}

.g-button--outline.g-color--grey:focus,
.g-button--outline.g-color--grey:hover,
.g-button--outline.g-color--grey:active,
.g-button--outline.g-working.g-color--grey,
.g-button--outline.g-active.g-color--grey {
    background-color: var(--g-button--outline--hover--grey--background);
}

.g-button.g-color--turquoise {
    color: white;
    border: 0.2rem solid var(--g-button--hover--turquoise--border);
}

.g-button.g-color--turquoise:focus,
.g-button.g-color--turquoise:hover,
.g-button.g-color--turquoise:active,
.g-button.g-working.g-color--turquoise,
.g-button.g-active.g-color--turquoise {
    background-color: var(--g-button--hover--turquoise--background);
}

.g-button--outline.g-color--turquoise {
    background-color: transparent;
    color: var(--g-button--hover--turquoise--border);
}

.g-button--outline.g-color--turquoise:focus,
.g-button--outline.g-color--turquoise:hover,
.g-button--outline.g-color--turquoise:active,
.g-button--outline.g-working.g-color--turquoise,
.g-button--outline.g-active.g-color--turquoise {
    background-color: var(--g-button--outline--hover--turquoise--background);
}

.g-button.g-color--green {
    color: white;
    border: 0.2rem solid var(--g-button--hover--green--border);
}

.g-button.g-color--green:focus,
.g-button.g-color--green:hover,
.g-button.g-color--green:active,
.g-button.g-working.g-color--green,
.g-button.g-active.g-color--green {
    background-color: var(--g-button--hover--green--background);
}

.g-button--outline.g-color--green {
    background-color: transparent;
    color: var(--g-button--hover--green--border);
}

.g-button--outline.g-color--green:focus,
.g-button--outline.g-color--green:hover,
.g-button--outline.g-color--green:active,
.g-button--outline.g-working.g-color--green
.g-button--outline.g-active.g-color--green {
    background-color: var(--g-button--outline--hover--green--background);
}

.g-button.g-color--green-2 {
    color: white;
    border: 0.2rem solid var(--g-button--hover--green-2--border);
}

.g-button.g-color--green-2:focus,
.g-button.g-color--green-2:hover,
.g-button.g-color--green-2:active,
.g-button.g-working.g-color--green-2,
.g-button.g-active.g-color--green-2 {
    background-color: var(--g-button--hover--green-2--background);
}

.g-button--outline.g-color--green-2 {
    background-color: transparent;
    color: var(--g-button--hover--green-2--border);
}

.g-button--outline.g-color--green-2:focus,
.g-button--outline.g-color--green-2:hover,
.g-button--outline.g-color--green-2:active,
.g-button--outline.g-working.g-color--green-2,
.g-button--outline.g-active.g-color--green-2 {
    background-color: var(--g-button--outline--hover--green-2--background);
}

.g-button.g-color--yellow {
    color: white;
    border: 0.2rem solid var(--g-button--hover--yellow--border);
}

.g-button.g-color--yellow:focus,
.g-button.g-color--yellow:hover,
.g-button.g-color--yellow:active,
.g-button.g-working.g-color--yellow,
.g-button.g-active.g-color--yellow {
    background-color: var(--g-button--hover--yellow--background);
}

.g-button--outline.g-color--yellow {
    background-color: transparent;
    color: var(--g-button--hover--yellow--border);
}

.g-button--outline.g-color--yellow:focus,
.g-button--outline.g-color--yellow:hover,
.g-button--outline.g-color--yellow:active,
.g-button--outline.g-working.g-color--yellow,
.g-button--outline.g-active.g-color--yellow {
    background-color: var(--g-button--outline--hover--yellow--background);
}

.g-working,
.g-working:focus,
.g-working:hover,
.g-working:active {
    cursor: default!important;
    pointer-events: none;
}

.g-working > span {
    animation: g-working-animation-1 var(--g-animation-time--slow) ease-out 1 forwards;
}

.g-working:after {
    content: "";
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCA1NCI+PHRpdGxlPmFzZGY8L3RpdGxlPjxnIGlkPSJiZmRmODg2Zi01OWZkLTQyZmEtOGEwMy05ZTFmOGFkYWNjZTYiIGRhdGEtbmFtZT0iU1ZHX0ZJWCI+PHJlY3Qgd2lkdGg9IjU0IiBoZWlnaHQ9IjU0IiBmaWxsPSJub25lIi8+PC9nPjxnIGlkPSJhYjg1OWM3NC05NDQ1LTQzN2YtOTljZS0yZWYzYzYyNWQwMjEiIGRhdGEtbmFtZT0iVnJzdHZhIDgiPjxwYXRoIGQ9Ik0yNyw2QTIxLDIxLDAsMSwwLDQ4LDI3LDIxLDIxLDAsMCwwLDI3LDZabTAsMzdBMTYsMTYsMCwxLDEsNDMsMjcsMTYsMTYsMCwwLDEsMjcsNDNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjMzIi8+PC9nPjxnIGlkPSJiMWQ4ZDFmNC04OWUyLTQ4ZjUtYjc5Ny02ZGExYTgxNDFlMzUiIGRhdGEtbmFtZT0iTGF5ZXIgMSBjb3B5wqBPYnJheiI+PHBhdGggZD0iTTQ4LDI3SDQzQTE2LDE2LDAsMCwwLDI3LDExVjZBMjEsMjEsMCwwLDEsNDgsMjdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
    background-size: cover;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    animation: g-working-animation-2 var(--g-animation-time--slow) ease-out 1 forwards, g-working-animation-3 1s linear infinite;
}

.g-working--blue:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCA1NCI+PHRpdGxlPnRvY2l0a288L3RpdGxlPjxnIGlkPSJTVkdfRklYIj48cmVjdCB3aWR0aD0iNTQiIGhlaWdodD0iNTQiIGZpbGw9Im5vbmUiLz48L2c+PGcgaWQ9IlZyc3R2YV84IiBkYXRhLW5hbWU9IlZyc3R2YSA4Ij48cGF0aCBkPSJNMjcsNkEyMSwyMSwwLDEsMCw0OCwyNywyMSwyMSwwLDAsMCwyNyw2Wm0wLDM3QTE2LDE2LDAsMSwxLDQzLDI3LDE2LDE2LDAsMCwxLDI3LDQzWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIgZmlsbD0iIzAwNzdkOCIgb3BhY2l0eT0iMC4zMyIvPjwvZz48ZyBpZD0iTGF5ZXJfMV9jb3B5X09icmF6IiBkYXRhLW5hbWU9IkxheWVyIDEgY29wecKgT2JyYXoiPjxwYXRoIGQ9Ik00OCwyN0g0M0ExNiwxNiwwLDAsMCwyNywxMVY2QTIxLDIxLDAsMCwxLDQ4LDI3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIgZmlsbD0iIzAwNzdkOCIvPjwvZz48L3N2Zz4=");
} /* color: g-button--hover--blue--border */

.g-working--red:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCA1NCI + PHRpdGxlPnJlZC10b2NpdGtvPC90aXRsZT48ZyBpZD0iZmNhZTdlZTYtY2IyZC00YmM3LThhMmEtMmU1NDMxMmIwYTBiIiBkYXRhLW5hbWU9IlNWR19GSVgiPjxyZWN0IHdpZHRoPSI1NCIgaGVpZ2h0PSI1NCIgZmlsbD0ibm9uZSIvPjwvZz48ZyBpZD0iZTEzMGI0N2UtNmI2ZS00ZmE5LWIxNjctOWQyNzM4YzFiMjY4IiBkYXRhLW5hbWU9IlZyc3R2YSA4Ij48cGF0aCBkPSJNMjcsNkEyMSwyMSwwLDEsMCw0OCwyNywyMSwyMSwwLDAsMCwyNyw2Wm0wLDM3QTE2LDE2LDAsMSwxLDQzLDI3LDE2LDE2LDAsMCwxLDI3LDQzWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIgZmlsbD0iI2QyMGMwYyIgb3BhY2l0eT0iMC4zMyIvPjwvZz48ZyBpZD0iYmU2N2E3MGYtOWE2ZS00NWEzLWEzMGMtYWJmZGMzNmQxNDJjIiBkYXRhLW5hbWU9IkxheWVyIDEgY29wecKgT2JyYXoiPjxwYXRoIGQ9Ik00OCwyN0g0M0ExNiwxNiwwLDAsMCwyNywxMVY2QTIxLDIxLDAsMCwxLDQ4LDI3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIgZmlsbD0iI2QyMGMwYyIvPjwvZz48L3N2Zz4= ");
} /* color: g-color--red */

.g-working--dark:after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCA1NCI+PHRpdGxlPnRvY2l0a288L3RpdGxlPjxnIGlkPSJTVkdfRklYIj48cmVjdCB3aWR0aD0iNTQiIGhlaWdodD0iNTQiIGZpbGw9Im5vbmUiLz48L2c+PGcgaWQ9IlZyc3R2YV84IiBkYXRhLW5hbWU9IlZyc3R2YSA4Ij48cGF0aCBkPSJNMjcsNkEyMSwyMSwwLDEsMCw0OCwyNywyMSwyMSwwLDAsMCwyNyw2Wm0wLDM3QTE2LDE2LDAsMSwxLDQzLDI3LDE2LDE2LDAsMCwxLDI3LDQzWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIgZmlsbD0iIzY0NjQ2NCIgb3BhY2l0eT0iMC4zMyIvPjwvZz48ZyBpZD0iTGF5ZXJfMV9jb3B5X09icmF6IiBkYXRhLW5hbWU9IkxheWVyIDEgY29wecKgT2JyYXoiPjxwYXRoIGQ9Ik00OCwyN0g0M0ExNiwxNiwwLDAsMCwyNywxMVY2QTIxLDIxLDAsMCwxLDQ4LDI3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIgZmlsbD0iIzY0NjQ2NCIvPjwvZz48L3N2Zz4=");
}

label,
.g-label {
    display: flex;
    justify-content: space-between;
    width: min-content;
    max-width: 100%;
    height: 2.5rem;
    font-size: 1.4rem;
    white-space: nowrap;
}

label.g-label--note-visible,
.g-label.g-label--note-visible {
    width: auto;
}

label.g-label--overflow,
.g-label.g-label--overflow {
    max-width: initial;
}

label.g-label--align--right,
.g-label.g-label--align--right {
    align-self: flex-end;
}

label,
.g-label.g-label--force-mouse-pointer {
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

label > span,
.g-label > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

label > span.g-label--error,
.g-label > span.g-label--error {
    display: inline-block;
    animation: g-label--error-animation var(--g-animation-time--slow) ease-out 1 forwards;
}

label > span + span.g-label--error,
.g-label > span + span.g-label--error {
    display: none;
}

.g-file-input + label {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    border-width: 0.2rem;
    border-style: solid;
    height: 5.4rem;
    line-height: 5.4rem;
    font-size: 0;
    background-color: white;
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

.g-file-input + label > .g-button {
    height: 5.4rem;
    margin-top: -0.2rem;
    margin-left: -2rem;
    vertical-align: top;
}

.g-file-input + label > .g-button > span {
    line-height: 5.4rem;
    padding-left: 6rem;
}

.g-file-input + label > span:not(.g-button) {
    padding: 0 4rem;
    font-size: 1.6rem;
    line-height: 5rem;
}

.g-form__errror-message-box {
    font-size: 1.6rem;
    overflow: hidden;
    color: white;
    padding: 2rem;
}

.g-form__errror-message-box ul {
    padding: 0;
}

.g-form__errror-message-box ul li {
    margin-left: 2rem;
}

.g-form__errror-message-box li:only-child {
    list-style: none;
    margin-left: 0;
    text-align: center;
}


/* POSITIONING
----------------------------------------------------------*/

.g-position--relative {
    position: relative;
}

.g-width--auto {
    width: auto !important;
}

.g-width--100 {
    width: 100% !important;
}

.g-min-width--0 {
    min-width: 0;
}

.g-display--inline-block {
    display: inline-block;
}

.g-display--block {
    display: block;
}

.g-display--none {
    display: none;
}

.g-float--left {
    float: left;
}

.g-float--right {
    float: right;
}

.g-clear--both {
    clear: both;
}

.g-white-space--normal {
    white-space: normal !important;
}

.g-white-space--no-wrap {
    white-space: nowrap;
}

.g-white-space--pre-wrap {
    white-space: pre-wrap !important;
}

.g-overflow--hidden {
    overflow: hidden;
}

.g-overflow--visible {
    overflow: visible !important;
}

.g-z-index--0 {
    z-index: 0;
}

.g-mobile--display-block,
.g-mobile--display-inherit,
.g-mobile--min--display-block,
.g-mobile--min--display-inline,
.g-mobile--min--display-inherit,
.g-mobile--max--display-block,
.g-mobile--max--display-inline {
    display: none !important;
    visibility: hidden;
}

.g-mobile--display-block--fluid,
.g-mobile--min--display-block--fluid,
.g-mobile--max--display-block--fluid {
    visibility: hidden;
    pointer-events: none;
}


/* FONTS
----------------------------------------------------------*/

.g-font-size--0 {
    font-size: 0;
}

.g-font-size--1-4-rem {
    font-size: 1.4rem;
}

.g-font-size--1-6-rem {
    font-size: 1.6rem;
}

.g-font-size--1-8-rem {
    font-size: 1.8rem;
}

.g-font-size--2-rem {
    font-size: 2rem;
}

/* ANIMATIONS
----------------------------------------------------------*/

@keyframes g-label--error-animation {
    0% {
        padding-top: 2.5rem;
        opacity: 0;
    }

    100% {
        padding-top: 0;
        opacity: 1;
    }
}

@keyframes g-input--error-animation {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scaleX(0.98);
    }

    40% {
        transform: scaleX(1.05);
    }

    60% {
        transform: scaleX(0.98);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes g-working-animation-1 {
    0% {
        /* transform: scale(1); looked distractng with in case of buttons */
        opacity: 1;
    }

    100% {
        /* transform: scale(0); looked distractng with in case of buttons */
        opacity: 0;
    }
}

@keyframes g-working-animation-2 {
    0% {
        height: 0;
        width: 0;
        margin: 0;
        opacity: 0;
    }

    50% {
        height: 5.8rem;
        width: 5.8rem;
        margin: -2.9rem;
        opacity: 1;
    }

    100% {
        height: 4.6rem;
        width: 4.6rem;
        margin: -2.3rem;
        opacity: 1;
    }
}

@keyframes g-working-animation-3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* RESPONSIVE
----------------------------------------------------------*/

@media screen and (width > 1280px) {
}

@media screen and (width <= 1280px) {

    .g-mobile--max--display-none {
        visibility: hidden;
        display: none !important;
    }

    .g-mobile--max--display-block {
        visibility: visible;
        display: block !important;
    }

    .g-mobile--max--display-inline {
        visibility: visible;
        display: inline !important;
    }

    .g-mobile--max--display-none--fluid {
        visibility: hidden;
        pointer-events: none;
    }

    .g-mobile--max--display-block--fluid {
        visibility: visible;
        pointer-events: auto;
    }
}

@media screen and (width > 1024px) and (width <= 1280px) {
}

@media screen and (width <= 1024px) {

    .g-mobile--display-none {
        visibility: hidden;
        display: none !important;
    }

    .g-mobile--display-block {
        visibility: visible;
        display: block !important;
    }

    .g-mobile--display-inherit {
        visibility: visible;
        display: inherit !important;
    }

    .g-mobile--display-none--fluid {
        visibility: hidden;
        pointer-events: none;
    }

    .g-mobile--display-block--fluid {
        visibility: visible;
        pointer-events: auto;
    }
}

@media screen and (width > 820px) {

    .g-text-color--grey--desktop {
        color: var(--g-text-color--grey) !important;
    }
}

@media screen and (width <= 820px) {

    .g-mobile--min--display-none {
        visibility: hidden;
        display: none !important;
    }

    .g-mobile--min--display-block {
        visibility: visible;
        display: block !important;
    }

    .g-mobile--min--display-inline {
        visibility: visible;
        display: inline !important;
    }

    .g-mobile--min--display-inherit {
        visibility: visible;
        display: inherit !important;
    }

    .g-mobile--min--display-none--fluid {
        visibility: hidden;
        pointer-events: none;
    }

    .g-mobile--min--display-block--fluid {
        visibility: visible;
        pointer-events: auto;
    }

    .g-text-color--grey--mobile {
        color: var(--g-text-color--grey) !important;
    }
}


/* TOUCH DEVICES
----------------------------------------------------------*/

@media screen and (hover: none) {

    a:hover:not(:active):not(.g-button),
    .g-link:hover:not(:active):not(.g-button) {
        color: var(--g-text-color--link);
    }

    input:not([type='text']):not([type='radio']):hover:not(:active):not(:focus):not(:disabled),
    input[type=text]:hover:not(:active):not(:focus):not(:disabled):not(:read-only),
    select:hover:not(:active):not(:focus):not(:disabled),
    textarea:hover:not(:active):not(:focus):not(:disabled) {
        background-color: white;
    }

    input:not([type='radio']).g-input--error:hover:not(:active):not(:focus),
    input:not([type='radio']).invalid:hover:not(:active):not(:focus),
    textarea.g-input--error:hover:not(:active):not(:focus),
    textarea.invalid:hover:not(:active):not(:focus),
    select.g-input--error:hover:not(:active):not(:focus),
    select.invalid:hover:not(:active):not(:focus) {
        background-color: white !important;
    }

    input:-webkit-autofill:hover:not(:active):not(:focus) {
        -webkit-box-shadow: 0 0 0px 1000px white inset;
    }

    button.g-color--red:hover:not(:active):not(.g-working):not(.g-active),
    .g-button.g-color--red:hover:not(:active):not(.g-working):not(.g-active) {
        background-color: var(--g-color--red);
    }

    button.g-button--outline.g-color--red:hover:not(:active):not(.g-working):not(.g-active),
    .g-button.g-button--outline.g-color--red:hover:not(:active):not(.g-working):not(.g-active) {
        background-color: inherit;
    }

    button.g-color--blue:hover:not(:active):not(.g-working):not(.g-active),
    .g-button.g-color--blue:hover:not(:active):not(.g-working):not(.g-active) {
        background-color: var(--g-color--blue);
    }

    button.g-button--outline.g-color--blue:hover:not(:active):not(.g-working):not(.g-active),
    .g-button.g-button--outline.g-color--blue:hover:not(:active):not(.g-working):not(.g-active) {
        background-color: inherit;
    }

    button.g-color--orange:hover:not(:active):not(.g-working):not(.g-active),
    .g-button.g-color--orange:hover:not(:active):not(.g-working):not(.g-active) {
        background-color: var(--g-color--orange);
    }

    button.g-button--outline.g-color--orange:hover:not(:active):not(.g-working):not(.g-active),
    .g-button.g-button--outline.g-color--orange:hover:not(:active):not(.g-working):not(.g-active) {
        background-color: inherit;
    }

    button.g-color--grey:hover:not(:active):not(.g-working):not(.g-active),
    .g-button.g-color--grey:hover:not(:active):not(.g-working):not(.g-active) {
        background-color: var(--g-color--grey);
    }

    button.g-button--outline.g-color--grey:hover:not(:active):not(.g-working):not(.g-active),
    .g-button.g-button--outline.g-color--grey:hover:not(:active):not(.g-working):not(.g-active) {
        background-color: inherit;
    }

    button.g-color--green:hover:not(:active):not(.g-working):not(.g-active),
    .g-button.g-color--green:hover:not(:active):not(.g-working):not(.g-active) {
        background-color: var(--g-color--green);
    }

    button.g-button--outline.g-color--green:hover:not(:active):not(.g-working):not(.g-active),
    .g-button.g-button--outline.g-color--green:hover:not(:active):not(.g-working):not(.g-active) {
        background-color: inherit;
    }

    button.g-color--turquoise:hover:not(:active):not(.g-working):not(.g-active),
    .g-button.g-color--turquoise:hover:not(:active):not(.g-working):not(.g-active) {
        background-color: var(--g-color--turquoise);
    }

    button.g-button--outline.g-color--turquoise:hover:not(:active):not(.g-working):not(.g-active),
    .g-button.g-button--outline.g-color--turquoise:hover:not(:active):not(.g-working):not(.g-active) {
        background-color: inherit;
    }

    button.g-color--yellow:hover:not(:active):not(.g-working):not(.g-active),
    .g-button.g-color--yellow:hover:not(:active):not(.g-working):not(.g-active) {
        background-color: var(--g-color--yellow);
    }

    button.g-button--outline.g-color--yellow:hover:not(:active):not(.g-working):not(.g-active),
    .g-button.g-button--outline.g-color--yellow:hover:not(:active):not(.g-working):not(.g-active) {
        background-color: inherit;
    }
}


/* PRINT
----------------------------------------------------------*/

@media print {

    @page {
        size: A4 portrait;
        margin: 17.5mm;
        padding: 0;
    }

    .g-print__page-break-before--always {
        page-break-before: always !important;
    }

    .g-print__page-break-before--avoid {
        page-break-before: avoid !important;
    }

    .g-print__page-break-after--always {
        page-break-after: always !important;
    }

    .g-print__page-break-after--avoid {
        page-break-after: avoid !important;
    }

    .g-print__page-break-inside--avoid {
        page-break-inside: avoid !important;
    }

}