@import url('https://fonts.googleapis.com/css?family=Open+Sans:400');


html {
    font-size: 100%; /*usually 16px*/
}


body {
    background: white;
    font-family: 'Open Sans', sans-serif;
    font-size: var(--base-size);
    font-weight: 400;
    line-height: 1.3;
    color: var(--ui-font-base);
}

p {
    margin-bottom: 1rem;
}

h1, h2, h3, h4, h5 {
    margin: 1.38rem 0 1.38rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.4;
}

h1 {
    margin-top: 0;
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

h5 {
    font-size: var(--h5);
}

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

a {
    color: var(--secondary-blue-dark);
}

    a:hover {
        color: var(--secondary-blue);
    }


img{
    width: 100%;
    max-width: 100%;
}

.primary--1 {
    background-color: var(--primary-blue-dark);
}

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

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

.secondary--1 {
    background-color: var(--secondary-blue-dark);
}

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

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

.tertiary--1 {
    background-color: var(--tertiary-blue-dark);
}

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

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

/* OTHER */

.loading--inline {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 80px;
    padding-left: 8px;
    padding-top: 20px;
}

/* TELERIC THEME OVERWRITES */
.k-picker-solid {
    background-color: var(--ui-components);
    background-image: none;
}

.k-button-solid-base {
    background-color: var(--ui-components);
    background-image: none;
}

.k-loader-canvas {
    background-color: var(--primary--1);
}

.k-list-item:nth-child(even) {
    background-color: var(--ui-components);
}

.k-list-item .k-selected .k-focus {
    background-color: var(--secondary-blue);
    color: white;
}

.k-list-item:hover, .k-list-item:nth-child(even):hover, .k-list-optionlabel:hover, .k-list-item.k-hover, .k-hover.k-list-optionlabel {
    color: white;
    background-color: var(--secondary-blue-dark);
}

.k-list-item.k-selected, k-list-item.k-selected:nth-child(2n), .k-selected.k-list-optionlabel {
    color: white;
    background-color: var(--primary-blue-dark);
}

.k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover, .k-list-item.k-selected.k-hover, .k-selected.k-hover.k-list-optionlabel {
    color: white;
    background-color: var(--secondary-blue-dark);
}

.k-ghost-splitbar-vertical, .k-splitbar-vertical {
    height:23px;
}

.k-splitbar {
    background-color: #ececec;
}

.k-splitter {
    border: none;
}


/* IFRAMES */
    [style*="--aspect-ratio"] > :first-child {
    width: 100%;
}

@supports (--custom:property) {
    [style*="--aspect-ratio"] {
        position: relative;
    }

        [style*="--aspect-ratio"]::before {
            content: "";
            display: block;
            padding-bottom: calc(100% / (var(--aspect-ratio)));
        }

        [style*="--aspect-ratio"] > :first-child {
            position: absolute;
            top: 0;
            left: 0;
        }
}

.main-content > .iframe--noscroll {
    overflow: hidden;
}

/* IMAGES */
.img__decorative {
    border-radius: var(--img-border-radius);
    background-color: var(--tertiary-blue);
    height: auto;
    width: 100%;
    margin-top: 49px;
    margin-bottom: 49px;
}