/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    src: local('Titillium Web Light'), local('TitilliumWeb-Light'), url(titillium-web-light-ext.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    src: local('Titillium Web Light'), local('TitilliumWeb-Light'), url(titillium-web-light.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'), url(titillium-web-ext.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'), url(titillium-web.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    src: local('Titillium Web SemiBold'), local('TitilliumWeb-SemiBold'), url(titillium-web-semibold-ext.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    src: local('Titillium Web SemiBold'), local('TitilliumWeb-SemiBold'), url(titillium-web-semibold.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'), url(titillium-web-bold-ext.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'), url(titillium-web-bold.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* color */
    --primary-color: #2C579F;
    --primary-hover-background: #1E3C6F;
    --secondary-color: #515B6D;
    --info-color: #1982B0;
    --warn-color: ##FAA33D;
    --success-color: #2A7E3E;
    --error-color: #D42030;
    --surface-color: #FFFFFF;
    --grays-color-base: #1D2227;
    --text-color: #1D2227;
    /* fonts */
    --font-family: "Titillium Web", sans-serif;
    --font-size-index: 16px;
    --font-size: 1rem;
    --font-weight: 400;
    --font-weight-bold: 600;
    --font-weight-title: 400;
    --line-height: 1.2;
    --line-height-label: 1.2;
    --line-height-title: 1.3;
    --font-size-h1: 3.052rem;
    --font-size-h2: 2.441rem;
    --font-size-h3: 1.953rem;
    --font-size-h4: 1.563rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1.125rem;
    --font-size-small: 0.8rem;
    /* spacing */
    --spacing-unit: 8px;
    --spacing-0-5: calc(var(--spacing-unit) * 0.5);
    --spacing-1: var(--spacing-unit);
    --spacing-2: calc(var(--spacing-unit) * 2);
    --spacing-3: calc(var(--spacing-unit) * 3);
    --spacing-4: calc(var(--spacing-unit) * 4);
    --spacing-6: calc(var(--spacing-unit) * 6);
    --j-gutter: var(--spacing-2);
    /* border */
    --j-border-radius: 0;
    --j-button-border-width: 1px;
    --shadow: 0;
    /* buttons */
    --font-size-button-text: 0.875rem;
    --line-height-button-text: 1;
    --font-weight-button-text: 600;
    --letter-spacing-button-text: 0.046875rem;
    --text-transform-button-text: uppercase;
}

html {
    font-size: var(--font-size-index);
    width: 100%;
    height: 100%;
}

body {
    background: #F5F8FE;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: var(--text-color);
    margin: 0;
    width: 100%;
    height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-weight-title);
    line-height: var(--line-height-title);
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

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

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

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

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

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

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

.m-1 {
    margin: var(--spacing-1);
}

.p-1 {
    padding: var(--spacing-1);
}

.p-2 {
    padding: var(--spacing-2);
}

.p-3 {
    padding: var(--spacing-3);
}

.p-4 {
    padding: var(--spacing-4);
}

.m-r-1 {
    margin-right: var(--spacing-1);
}

.m-l-1 {
    margin-left: var(--spacing-1);
}

.m-t-1 {
    margin-top: var(--spacing-1);
}

.m-b-1 {
    margin-bottom: var(--spacing-1);
}

.m-2 {
    margin: var(--spacing-2);
}

.m-r-2 {
    margin-right: var(--spacing-2);
}

.m-l-2 {
    margin-left: var(--spacing-2);
}

.m-t-2 {
    margin-top: var(--spacing-2);
}

.m-b-2 {
    margin-bottom: var(--spacing-2);
}

.m-3 {
    margin: var(--spacing-3);
}

.m-r-3 {
    margin-right: var(--spacing-3);
}

.m-l-3{
    margin-left: var(--spacing-3);
}

.m-t-3 {
    margin-top: var(--spacing-3);
}

.m-b-3 {
    margin-bottom: var(--spacing-3);
}

.m-4 {
    margin: var(--spacing-2);
}

.m-r-4 {
    margin-right: var(--spacing-4);
}

.m-l-4 {
    margin-left: var(--spacing-4);
}

.m-t-4 {
    margin-top: var(--spacing-4);
}

.m-b-4 {
    margin-bottom: var(--spacing-4);
}

.j-gutter {
    padding-left: var(--j-gutter);
    padding-right: var(--j-gutter);
}

.j-h-gutter {
    padding-top: var(--j-gutter);
    padding-bottom: var(--j-gutter);
}

.flex-row {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

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

.flex-end {
    justify-content: flex-end;
}

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

.button--raised {
    --circular-bar-base-circle-color: var(--surface-color);
}

button {
    letter-spacing: var(--letter-spacing-button-text);
    text-transform: var(--text-transform-button-text);
    font-size: var(--font-size-button-text);
    font-weight: var(--font-weight-button-text);
    line-height: var(--line-height-button-text);
}

.button--raised {
    border: var(--j-button-border-width);
}

.button--raised {
    color: var(--surface-color);
    background: var(--primary-color);
    box-shadow: var(--shadow);
    border-radius: var(--j-border-radius);
}

    .button--raised:hover, .button--raised:focus {
        background: var(--primary-hover-background);
    }

.button, .button--flat, .button--raised, .button--outlined {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.5625rem 1rem;
    min-height: 2.25rem;
    border: none;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    outline-style: none;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    white-space: nowrap;
    transition: color 1ms ease-in-out, background-color 1ms ease-in-out, border-color 1ms ease-in-out, box-shadow 1ms ease-in-out;
    font-family: inherit;
    font-size: var(--font-size-button-text);
    line-height: var(--line-height-button-text);
    font-weight: var(--font-weight-button-text);
    letter-spacing: var(--letter-spacing-button-text);
    text-transform: var(--text-transform-button-text);
    text-decoration: none;
}

.j-surface-color {
    color: var(--surface-color);
}

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

.j-box-shadow-hover:hover {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
}