@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-icon-filter-show: "filter_alt";
    --rrsoftware-icon-filter-hide: "filter_alt_off";
    --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: #ECD610;
    --rrsoftware-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

    /* Design Colors */
    --rrsoftware-primary: #1976d2;
    --rrsoftware-headline: #00324a;
    --rrsoftware-accent-color: #bfccff;
    --rrsoftware-asterisk: #FF2F4C;

    /* Error and Log Colors */
    --rrsoftware-error: #FF2F4C;
    --rrsoftware-error-background: #e95f5f80;
    --rrsoftware-warning: #ECD610;
    --rrsoftware-warning-background: #ECD61080;
    --rrsoftware-info: #2196F3;
    --rrsoftware-info-background: #2196F380;
    --rrsoftware-debug: #8d22d4;
    --rrsoftware-trace: #757575;

    /* Functional Colors */
    /*      Gray Label for Inputs */
    --rrsoftware-input-label: #757575;
    /*      Colored Label for selected Inputs */
    --rrsoftware-input-label-focus: #1976d2;
    /*      Gray Border for Inputs (e.g. Checkboxes) */
    --rrsoftware-input-border: #bdbdbd;
    /*       Disabled Color for Inputs */
    --rrsoftware-input-disabled: #bdbdbd;
    /*       Background Color for Inputs */
    --rrsoftware-input-bg: #f5f5f5;
    /*       Background Color for selected Inputs */
    --rrsoftware-input-bg-focus: #c5c5c5;

}

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

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

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

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-details__summary {
    margin-block-start: 16px;
}

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

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

.rrsoftware__course-details__summary {
    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%;
    }

    /* // TODO refactor names, etc */
    .rrsoftware__grid-third {
        grid-column: auto/span 3;
    }

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

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

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