@font-face {
    font-family: 'Roboto';
    src: url(/assets/fonts/roboto-regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url(/assets/fonts/roboto-bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'),
        url(/assets/fonts/material-icons-regular.ttf) format('truetype');
}

:root {
    --rrsoftware-font-icons: "Material Icons";
    --rrsoftware-icon-location: "location_on";
    --rrsoftware-icon-date: "calendar_month";
    --rrsoftware-icon-time: "schedule";
    --rrsoftware-icon-price: "euro_symbol";
    --rrsoftware-icon-first: "first_page";
    --rrsoftware-icon-back: "chevron_left";
    --rrsoftware-icon-next: "chevron_right";
    --rrsoftware-icon-last: "last_page";
    --rrsoftware-icon-warn: "warning_amber";
    --rrsoftware-visibility-hints: hidden;

    --font-family: "Roboto", "sans-serif";
    --font-size-h1: 2rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
    --rrsoftware-text-dark: #212121;
    --rrsoftware-text-light: #a4a4a4;
    --rrsoftware-primary-color: #00324a;
    --rrsoftware-accent-color: #bfccff;
    --rrsoftware-component-background-100: #ffffff;
    --rrsoftware-component-background-200: #f5f5f5;
    --rrsoftware-warning-background: #ECD61080;
    --rrsoftware-warning-border: #ECD610;
    --rrsoftware-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

    --rrsoftware-primary: #1976d2;
    --rrsoftware-primary-dark: #1565c0;
    --rrsoftware-error: #FF2F4C;
    --rrsoftware-asterisk: #FF2F4C;
    --rrsoftware-label: #757575;
    --rrsoftware-field: #f5f5f5;
    --rrsoftware-border: #bdbdbd;
    --rrsoftware-label-focus: #1976d2;
    --rrsoftware-field-focus: #c5c5c5;

}

* {
    font-family: var(--font-family);
}

h1,
h2,
h3,
p {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3 {
    font-weight: 500;
    color: var(--rrsoftware-primary-color);
}

h1 {
    font-size: var(--font-size-h1) !important;
    line-height: var(--font-size-h1) !important;
}

h2 {
    font-size: var(--font-size-h2) !important;
    line-height: var(--font-size-h2) !important;
}

h3 {
    font-size: var(--font-size-h3) !important;
    line-height: var(--font-size-h3) !important;
}

p,
span,
label {
    color: var(--rrsoftware-text-dark);
    line-height: 1;
    font-weight: 400;
}


.rrsoftware__card {
    border-radius: 4px;
    border-top: 4px solid var(--rrsoftware-accent-color);
    background: var(--rrsoftware-component-background-100);
    box-shadow: var(--rrsoftware-box-shadow);
    padding-block: 16px;
    padding-inline: 16px;
}

.rrsoftware__course-details>header,
.rrsoftware__paginated-course-list>header,
.rrsoftware__card>header {
    margin-block-end: 16px;
}

.rrsoftware__course-card>header>:not(h3)>* {
    color: var(--rrsoftware-text-light);
}

.rrsoftware__pagination {
    border-radius: 4px;
    background-color: var(--rrsoftware-component-background-100);
    box-shadow: var(--rrsoftware-box-shadow);
    display: flex;
    width: fit-content;
    margin-block: 16px;
    margin-inline: auto;
    overflow: hidden;
}

.rrsoftware__pagination__button {
    text-decoration: none;
    color: inherit;
    padding-block: 8px;
    padding-inline: 16px;
    line-height: 1;
}

.rrsoftware__pagination__button--symbol {
    font-size: 24px;
    padding-block: 4px;
    padding-inline: 8px;
    background-color: var(--rrsoftware-component-background-200);
}

.rrsoftware__pagination__button:hover {
    background-color: var(--rrsoftware-accent-color);
}

.rrsoftware__course-details__summary {
    margin-block-start: 16px;
}

.rrsoftware__grid-third {
    margin-top: 16px;
}

.rrsoftware__course-details__description~.rrsoftware__enrollment {
    margin-top: 16px;
}

.rrsoftware__course-details__instructors {
    margin-bottom: 16px;
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.fieldset-no-design {
    margin: 0;
    padding: 0;
    border: none;

    legend {
        visibility: hidden;
        height: 0;
        width: 0;
    }
}

@media (min-width: 921px) {
    .rrsoftware__row {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 1fr auto;
        gap: 1.4%;
    }

    .rrsoftware__grid-third {
        grid-column: auto/span 4;
    }

    .rrsoftware__grid-two-thirds {
        grid-column: auto/span 8;
    }

    .rrsoftware__course-details__summary {
        margin-block-start: 0;
    }

    .rrsoftware__grid-third {
        margin-top: 0px;
    }
}