.fs-14 {
    font-size: 14px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.w-16 {
    width: 16px !important;
}

.h-16 {
    height: 16px !important;
}

.white-space-no-wrap {
    white-space: nowrap !important;
}

.w-fit {
    width: fit-content !important;
}

/* align-items-start exists but it is not important  */
.align-items-start {
    align-items: start !important;
}

/* custom style */
.footer-links {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 85em) {
    .footer-links {
        flex-direction: column;
    }

    /* override justify-content: start */
    .csu-footer_section {
        justify-content: center;
    }
}

/* make footer image not scale, but have a static size instead */
.csu-footer_insbox img {
    min-width: 97px;
}

/* always show header navbar */
.csu-header__navbar .csu-header-nav {
    display: block;
}

/* override navbar stuff so that it being visible does not mess things up too much */
@media (max-width: 63.99em) {
    .csu-header__navbar .csu-header-nav .csu-header-subnav__link {
        padding: 0 !important;
        margin-left: 8px !important;
        margin-right: -8px !important;
    }

    .csu-header__navbar .csu-header-nav .csu-header-subnav__link gov-icon {
        width: 16px !important;
        height: 16px !important;
    }

    .csu-header__navbar .csu-header-nav .csu-header-subnav__link gov-button,
    .csu-header__navbar .csu-header-nav .csu-header-subnav__link button {
        font-size: 14px !important;
        column-gap: 8px !important;
        margin: -11px 0 !important;
    }

    .csu-header__navbar .csu-header-nav .csu-header-subnav__link button {
        padding: 8px 8px 10px 8px !important;
    }
}

/* if the change lang button is not shown, force the header to stay the same height */
@media (min-width: 63.99em) {
    .csu-header__navbar .csu-row {
        min-height: 106px;
    }
}

/* increase odds that things will fit in smaller resolutions */
.csu-header .secondary-logo {
    margin-right: -20px;
}

/* limit how much can the volby.cz logo grow in size */
@media (min-width: 63.99em) {
    .csu-header .secondary-logo,
    .csu-header .secondary-logo img {
        max-width: 150px !important;
        max-height: 35px !important;
    }
}

/* custom style to align the start of the message with csu-section box */
.integrated-message {
    padding: 0 14px !important;
}

/* if message spans multiple lines, keep the icon in the middle */
.integrated-message gov-message {
    display: flex;
    align-items: center;
}

/* in medium view, keep message content margins at 0 */
.integrated-message gov-message .gov-message__content {
    margin: 0 !important;
}

@media (min-width: 63.99em) {
    /* in large view, decouple the icon from the document so that the content get be offset properly */
    .integrated-message gov-message .gov-message__icon {
        position: absolute;
    }

    /* in large view adjust margins of message content so that it starts in line with the other texts on screen */
    .integrated-message gov-message .gov-message__content {
        margin-left: -4px !important;
        margin-right: 4px !important;
    }
}

/* I nicked this from official CSU website styles */
.csu-skip-to-content {
    position: relative
}

.csu-skip-to-content a {
    font-size: var(--gov-text-s-font-size);
    line-height: var(--gov-text-s-line-height);
    letter-spacing: var(--gov-text-s-letter-spacing);
    font-weight: var(--gov-text-s-font-weight);
    position: absolute;
    top: -2.5rem;
    left: 0;
    z-index: -1;
    display: block;
    padding: 0.5rem;
    color: var(--gov-color-neutral-white);
    background-color: var(--gov-color-primary)
}

.csu-skip-to-content a:not(:focus):not(:focus-within) {
    clip: rect(0, 0, 0, 0)
}

.csu-skip-to-content a:focus {
    top: 0;
    z-index: 4010
}

/* requested by csu */
gov-breadcrumbs,
gov-breadcrumbs a {
    font-size: 14px !important;
}

/* allow justify-content to have effect (by default it is centered) */
.csu-footer > .csu-container > .csu-footer_section {
    margin: 0 !important;
}
/* in full view where all links are in line, align footer logo with header logo */
@media (min-width: 85em) {
    .csu-footer > .csu-container {
        justify-content: start !important;
    }
}

/* csu wanted their header between 56 and 85px tall */
.csu-header__navbar {
    min-height: 56px !important;
    max-height: 85px !important;
}
.csu-header__navbar > .csu-container,
.csu-header__navbar > .csu-container > .csu-row {
    height: 100% !important;
}
/* < 63.99 === default header settings */
@media (min-width: 63.99em) {
    /* this determines actual header height */
    .csu-header__navbar {
        height: 82px !important;
    }
    /* this was why the header was so tall before */
    .csu-header__navbar > .csu-container > .csu-row {
        min-height: unset !important;
    }
    /* make all columns fit the space + align their contents */
    .csu-header__navbar > .csu-container > .csu-row > div {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    /* make everything in the navigation column fit height content */
    .csu-header__navbar > .csu-container > .csu-row > div > nav,
    .csu-header__navbar > .csu-container > .csu-row > div > nav * {
        height: 100% !important;
    }
    /* remove padding that used to align it to the center */
    .csu-header-subnav__link {
        padding: 0 !important;
    }
}

.csu-container > gov-breadcrumbs {
    display: flex !important; /* this styles is for some reason missing everywhere except homepage */
    margin-bottom: -16px !important; /* on CSU request - decrease the space between breadcrumbs and H1 */
}
.csu-container > gov-breadcrumbs > nav {
    width: 100%; /* this styles is for some reason missing everywhere except homepage */
}
.csu-container > gov-breadcrumbs > nav > ul {
    width: 100%; /* this styles is for some reason missing everywhere except homepage */
    overflow-x: auto !important; /* this is here in order to prevent horizontal overflow */
    overflow-y: hidden; /* ok honestly i don't even know anymore */
}

/* custom tooltip that tries to emulate gov-tooltip */
.elect-tooltip {
    position: relative;
}
.elect-tooltip-text {
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--gov-font-family, "Roboto", sans-serif), sans-serif;
    word-break: break-word;
    text-align: start;

    display: none;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 125;

    padding: 1rem;
    border-radius: 3px;
    width: max-content;

    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);

    cursor: initial;
    transition: opacity ease-in 200ms;
    background-color: var(--gov-color-primary-700);
    color: var(--gov-color-neutral-white);
}
.elect-tooltip:focus > .elect-tooltip-text,
.elect-tooltip:hover > .elect-tooltip-text {
    visibility: visible;
    opacity: 1;
}