/* =============================================================================
* This file include required UI Framework components needed for cookie concent.
============================================================================= */

/* UI Framework globals like body { font-family: ... } rewritten to local scope */

.c-cookie-banner,
.c-cookie-settings {
    font-size: 15px;
    font-family: Open Sans, sans-serif;
    color: #333;
}

.c-cookie-settings p {
    margin: 0;
}

.c-input-checkbox__input-graphic {
    box-sizing: border-box;
}

/* UI Framework components */

/* =============================================================================
* Heading
============================================================================= */

.c-heading {
    width: 100%;
    margin-bottom: 1.6rem;
    color: #333;
}

.c-heading:last-child {
    margin-bottom: 0;
}

.c-heading__header {
    display: inline-flex;
    align-items: center;
}

.c-heading__title {
    /* autoprefixer: off */
    display: inline;
    -ms-word-wrap: break-all;
    word-wrap: break-word;
    word-break: break-word;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
}

h1.c-heading__title {
    font: 800 30px/1.48 "Open Sans", Arial, sans-serif;
}

h2.c-heading__title {
    font: 800 22px/1.48 "Open Sans", Arial, sans-serif;
}

h3.c-heading__title {
    font: 800 18px/1.48 "Open Sans", Arial, sans-serif;
}

h4.c-heading__title {
    font: 600 15px/1.48 "Open Sans", Arial, sans-serif;
}

@media screen and (min-width:900px) {
    h1.c-heading__title {
        font: 800 60px/1.48 "Open Sans", Arial, sans-serif;
    }

    h2.c-heading__title {
        font: 800 30px/1.48 "Open Sans", Arial, sans-serif;
    }

    h3.c-heading__title {
        font: 800 22px/1.48 "Open Sans", Arial, sans-serif;
    }

    h4.c-heading__title {
        font: 800 18px/1.48 "Open Sans", Arial, sans-serif;
    }
}

.c-heading__intro {
    display: block;
    max-width: 800px;
    width: 100%;
    margin: 0.8rem 0 0;
    color: inherit;
    font: 100 18px/1.48 "Open Sans", Arial, sans-serif;
}

@media screen and (min-width:900px) {
    .c-heading__intro {
        margin-top: 1.6rem;
        font: 100 22px/1.48 "Open Sans", Arial, sans-serif;
    }
}

.c-heading__byline {
    max-width: 700px;
    margin: 0.8rem 0 0;
    color: #595959;
    font-style: italic;
}

/* =============================================================================
* Button
============================================================================= */

.c-button,
.c-button:visited {
    display: inline-block;
    flex: none;
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    background: none;
    color: #005799;
    font: 400 15px/1.48 "Open Sans", Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 100ms ease;
}

.c-button:not(:last-child) {
    margin-right: 12px;
}

.c-button:only-child {
    margin-right: 0;
}

/* Default button
------------------------------------------------------------------------------ */

.c-button:hover,
.c-button:focus,
.c-button:active {
    color: #004172;
    text-decoration: underline;
}

/* Disabled button
------------------------------------------------------------------------------ */

.c-button:disabled {
    background-color: #959595;
    color: #fff;
    cursor: not-allowed;
}

.c-button:disabled:hover,
.c-button:disabled:active,
.c-button:disabled:visited,
.c-button:disabled:visited:hover {
    background-color: #959595;
    text-decoration: none;
}

/* Primary button
------------------------------------------------------------------------------ */

.c-button--primary,
.c-button--primary:visited {
    padding: 7px 16px;
    background-color: #005799;
    color: #fff;
}

.c-button--primary:hover,
.c-button--primary:focus,
.c-button--primary:active,
.c-button--primary:visited:hover {
    background-color: #004172;
    color: #fff;
    text-decoration: none;
}

/* =============================================================================
* Form-item
============================================================================= */

.c-form-item {
    position: relative;
    max-width: 480px;
    width: 100%;
    margin-bottom: 1.6rem;
}

.c-form-item::after {
    display: table;
    clear: both;
    content: "";
}

.c-form-item:last-child {
    margin-bottom: 0;
}

.c-form-item--full-width {
    max-width: 100%;
}

/* =============================================================================
* Input Checkbox
============================================================================= */

.c-input-checkbox {
    display: flex;
    position: relative;
    align-items: flex-start;
}

.c-input-checkbox input {
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 1;
    width: 44px;
    height: 44px;
    opacity: 0;
    cursor: pointer;
}

.c-input-checkbox__input-graphic {
    position: relative;
    min-width: 22px;
    height: 22px;
    border: 1px solid #959595;
    transition: border-color 100ms;
}

.c-input-checkbox__input-graphic::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 13px;
    margin-top: -1px;
    border-right: 3px solid #005799;
    border-bottom: 3px solid #005799;
    content: "";
    opacity: 0;
    transition: opacity 25ms;
    transform: translate(-50%, -50%) rotate(45deg);
}

.c-input-checkbox input:checked~.c-input-checkbox__input-graphic::before,
.c-input-checkbox input:checked~.c-input-checkbox__input-graphic::after {
    opacity: 1;
}

.c-input-checkbox input:hover~.c-input-checkbox__input-graphic,
.c-input-checkbox input:focus~.c-input-checkbox__input-graphic {
    border-width: 2px;
    border-color: #005799;
}

.c-input-checkbox__label {
    padding-left: 0.8rem;
    cursor: pointer;
}

/* Disabled
------------------------------------------------------------------------------ */

.c-input-checkbox input:disabled,
.c-input-checkbox input:disabled~.c-input-checkbox__label {
    cursor: not-allowed;
}

.c-input-checkbox input:disabled~.c-input-checkbox__input-graphic {
    border-color: #ccc;
}

.c-input-checkbox input:disabled:hover~.c-input-checkbox__input-graphic,
.c-input-checkbox input:disabled:focus~.c-input-checkbox__input-graphic {
    border-width: 1px;
    border-color: #ccc;
}

.c-input-checkbox input:disabled:checked~.c-input-checkbox__input-graphic::before {
    border-color: #ccc;
}

/* =============================================================================
* Box
============================================================================= */

.c-box {
    position: relative;
    padding: 1.2rem;
}

.c-box--grey {
    background-color: #fafafa;
}

.c-box--blue {
    background-color: #f4f9fc;
}

/* =============================================================================
 * Alert
============================================================================== */

.c-alert {
    margin-bottom: 1.6rem;
}

.c-alert__header {
    display: flex;
    align-items: flex-start;
    padding: 0.8rem;
    background-color: #005799;
    color: #fff;
}

.c-alert__title {
    font: 600 18px/1.48 "Open Sans", Arial, sans-serif;
}

.c-alert__header .c-icon {
    width: 24px;
    height: 24px;
    margin-top: 2px;
    margin-right: 0.8rem;
}

.c-alert__content {
    padding: 0.8rem;
    border: 1px solid #ccc;
}

.c-alert__header+.c-alert__content {
    border-top: 0;
}

/* Success
------------------------------------------------------------------------------ */

.c-alert--success .c-alert__header {
    background-color: #00664a;
}

/* =============================================================================
* Space
* postcss-bem-linter: define space
============================================================================= */

/* All around margin
----------------------------------------------------------------------------- */

/* Top margin
----------------------------------------------------------------------------- */

.t-space-top-s {
    margin-top: 0.4rem !important;
}

/* Bottom margin
----------------------------------------------------------------------------- */

.t-space-bottom-s {
    margin-bottom: 0.4rem !important;
}

/* Right margin
----------------------------------------------------------------------------- */

@media(min-width:600px) {
    .t-space-right-ml\@m {
        margin-right: 1.2rem !important;
    }
}