@font-face {
    font-family: CircularXXWeb;
    font-weight: 400;
    font-display: swap;
    font-style: normal;
    src: url(/content/fonts/CircularXXWeb-Book.woff) format("woff");
    src: url(/content/fonts/CircularXXWeb-Book.woff2) format("woff2");
}

@font-face {
    font-family: CircularXXWeb;
    font-weight: 400;
    font-display: swap;
    font-style: italic;
    src: url(/content/fonts/CircularXXWeb-BookItalic.woff) format("woff");
    src: url(/content/fonts/CircularXXWeb-BookItalic.woff2) format("woff2");
}

@font-face {
    font-family: CircularXXWeb;
    font-weight: 500;
    font-display: swap;
    font-style: normal;
    src: url(/content/fonts/CircularXXWeb-Medium.woff) format("woff");
    src: url(/content/fonts/CircularXXWeb-Medium.woff2) format("woff2");
}

@font-face {
    font-family: CircularXXWeb;
    font-weight: 500;
    font-display: swap;
    font-style: italic;
    src: url(/content/fonts/CircularXXWeb-MediumItalic.woff) format("woff");
    src: url(/content/fonts/CircularXXWeb-MediumItalic.woff2) format("woff2");
}

@font-face {
    font-family: CircularXXWeb;
    font-weight: 700;
    font-display: swap;
    font-style: normal;
    src: url(/content/fonts/CircularXXWeb-Bold.woff) format("woff");
    src: url(/content/fonts/CircularXXWeb-Bold.woff2) format("woff2");
}

@font-face {
    font-family: CircularXXWeb;
    font-weight: 700;
    font-display: swap;
    font-style: italic;
    src: url(/content/fonts/CircularXXWeb-BoldItalic.woff) format("woff");
    src: url(/content/fonts/CircularXXWeb-BoldItalic.woff2) format("woff2");
}

:root {
    --color1: #00163B;
    --color1-dark: #1027F5;
    --color2: #FFFFFF;
    --color3: #EDEDED;
    --color4: #FBB040;
    --color4-light: #FFDFB2;
    --color5: #233249;
    --color6: #001B36;
    --color7: #D8EAF6;
    --color8: #E14E41;
    --color9: #DEDEDE;
    --gutter: 2px;

    background-color: var(--color2);

    font-size: 19px;
    line-height: 1.5em;
    letter-spacing: 0.5px;
    color: var(--color5);
}
* {
    padding: 0;
    margin: 0;
    font-family: "CircularXXWeb", Arial, sans-serif !important;
    
}

body {
    background-color: var(--color2);
}

.page-wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;

    & > * {
        flex-shrink: 0;
    }

    & > .header {
        background-color: var(--color1);
        background: linear-gradient(to bottom right,var(--color1),var(--color1-dark));
        color: var(--color2);

        & > .header-top {
            display: flex;
            justify-content: space-between;
            height: 65.6px;
            font-size: 15px;

            & > .logo {
                & > img {
                    height: 65.6px;
                }
            }

            & > article {
                cursor: pointer;
                padding: 1rem 1.5rem;
            }

            & a, & article {
                color: color-mix(in oklab, var(--color2) 50%, transparent);
                transition: color 0.2s ease;
                white-space: nowrap;

                &:hover {
                    color: var(--color2)
                }
            }

            & > .right {
                margin-left: auto;
                display: flex;
                justify-content: end;

                & > * {
                    cursor: pointer;
                    padding: 1rem 1.5rem;
                    -webkit-transition: all 0.2s ease;
                    -moz-transition: all 0.2s ease;
                    -o-transition: all 0.2s ease;
                    transition: all 0.2s ease;
                }
            }
        }

        & > .header-intro {
            & > div {
                & > .header-page-heading {
                    font-size: 48px;
                    line-height: .98;
                    font-weight: bold;
                    letter-spacing: .5px;
                    word-break: break-word;
                }
            }
        }
    }

    .main {
        margin: 4rem 0;
        flex-grow: 1;

        h1, h2, h3, h4, h5 {
            font-weight: 700;
            line-height: 1.1em;
        }

        h2 {
            &.title {
                color: var(--color4);
                font-size: 24px;
                font-weight: bold;
                letter-spacing: .5px;
                word-break: break-word;
            }
        }

        h5 {
            font-size: 1rem;
            margin-top: 36px;
            margin-bottom: 12px;
        }

        table {
            /* Fjerner 100% bredde sat af foundation. */
            width:auto;

            /* Fjerner tabel baggrund sat af foundation. */
            & thead, & tbody, & tfoot {
                background-color: transparent;
                border-width:0px;
            }

            /* Fjerner tabel baggrund sat af foundation. */
            tbody tr:nth-child(even) {
                background-color: transparent;
            }

            /* Vertical align til top for alle tabeller. */
            td, th{
                vertical-align:top;
            }
        }
        table:not(.courseblock){
            border-collapse: collapse;
            & > thead{
                & > tr{
                    border-top:2px solid var(--color4);
                    border-bottom:2px solid var(--color4);
                }
            }
            & > tbody{
                & > tr {
                    &:nth-child(odd){
                        background-color:var(--color4-light)
                    }
                }
            }
        }
        .row{
            & > .appendix{
                background-color:var(--color9);
            }
        }

        .accordion {
            margin-bottom: 0;
            background-color: transparent;

            & > .accordion__item {
                position: relative;
                border-bottom: 2px solid var(--color5);

                &.is-active {
                    & > .accordion__title {
                        & > .arrow-expand > img {
                            transform: rotate(270deg);
                        }
                    }
                }

                & > .accordion__title {
                    display: block;
                    font-weight: 500;
                    color: var(--color4);
                    font-size: 24px;
                    padding: 10px 0;
                    padding-right: 30px;
                    line-height: 22px;

                    &.appendix{
                        background-color:var(--color9);
                    }

                    &:hover {

                        & > .arrow-expand {
                            & > img {
                                transition: transform 1s ease;

                                &.hover {
                                    display: block;
                                }

                                &.normal {
                                    display: none;
                                }
                            }
                        }
                    }


                    & > .arrow-expand {
                        position: absolute;
                        top: 4px;
                        right: 10px;
                        width: 27px;
                        height: 27px;
                        border: 2px solid var(--color4);
                        border-radius: 42px;
                        text-align: center;

                        & > img {
                            top: 6px;
                            left: 8px;
                            position: absolute;
                            transform: rotate(90deg);

                            &.hover {
                                display: none;
                            }
                        }
                    }
                }



                & > .accordion-content {
                    background-color: transparent;
                    border: none;
                    padding: 0;
                    padding-bottom: 10px;


                    .element{
                        &.appendix{                                      
                            background-color:var(--color9);
                        }
                    }
                }
            }
        }

        .subaccordion {
            & > .accordion {
                & > .accordion__item {
                    border-bottom: 0px;

                    & > .accordion__title {
                        font-size: 20px;
                    }
                }
            }
        }
    }

    .footer {
        font-size: .9em;
        padding: 2.5rem 0;
        background-color: var(--color6);
        color: var(--color7);

        & > .row {
            & > article {
                & > .logo {
                    width: 370px;
                    margin-bottom: 1em
                }
            }
        }
    }
}

.education-structure-block {
    --proeve1-color: #009490;
    --proeve2-color: #3d8eb7;
    --proeve3-color: #5d1145;
    --proeve4-color: #b0cd36;
    --proeve5-color: #cd3636;
    --proeve6-color: #855a03;
    --lineheight: 1lh;
    --padding: 5px;
    --ectsCalc: ( var(--lineheight) + var(--padding) * 2 + var(--gutter) ) - var(--gutter);
    & > section.education-structure {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: calc(-1 * var(--gutter));
        box-sizing: border-box;

        & > .semester {
            padding: var(--gutter);
            display: flex;
            flex-direction: column;
            width: 50px;
            flex-grow: 1;
            font-weight: 700;

            & > .header {
                background-color: var(--color1);
                color: var(--color2);
                text-align: center;
                padding: 5px;
            }

            & > .course {
                flex-grow: 1;
                word-break: break-all;
                word-break: break-word;
                font-size: 12px;
                line-height: var(--lineheight);
                white-space: nowrap;
                cursor: pointer;
                -webkit-transition: all 0.2s ease-out;
                -moz-transition: all 0.2s ease-out;
                -o-transition: all 0.2s ease-out;
                transition: all 0.2s ease-out;
                margin-top: 2px;



                &.ects-2_5 {
                    height: calc( var(--ectsCalc) );
                }

                &.ects-5 {
                    height: calc( 2 * var(--ectsCalc) );
                }

                &.ects-7_5 {
                    height: calc( 3 * var(--ectsCalc) );
                }

                &.ects-10 {
                    height: calc( 4 * var(--ectsCalc) );
                }

                &.ects-12_5 {
                    height: calc( 5 * var(--ectsCalc) );
                }

                &.ects-15 {
                    height: calc( 6 * var(--ectsCalc) );
                }

                &.ects-17_5 {
                    height: calc( 7 * var(--ectsCalc) );
                }

                &.ects-20 {
                    height: calc( 8 * var(--ectsCalc) );
                }

                &.ects-22_5 {
                    height: calc( 9 * var(--ectsCalc) );
                }

                &.ects-25 {
                    height: calc( 10 * var(--ectsCalc) );
                }

                &.ects-27_5 {
                    height: calc( 11 * var(--ectsCalc) );
                }

                &.ects-30 {
                    height: calc( 12 * var(--ectsCalc) );
                }

                &.ects-32_5 {
                    height: calc( 13 * var(--ectsCalc) );
                }

                &.ects-35 {
                    height: calc( 14 * var(--ectsCalc) );
                }

                &.ects-37_5 {
                    height: calc( 15 * var(--ectsCalc) );
                }

                &.ects-40 {
                    height: calc( 16 * var(--ectsCalc) );
                }

                & > .course-container {
                    background-color: var(--color4-light);
                    min-height: 100%;
                    width: 100%;
                    padding: 5px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    box-sizing: border-box;

                    & > .show-on-hover {
                        display: none;
                    }
                }

                &.course-proeve-1 {
                    & > .course-container {
                        border-left: 5px solid var(--proeve1-color);
                    }
                }

                &.course-proeve-2 {
                    & > .course-container {
                        border-left: 5px solid var(--proeve2-color);
                    }
                }

                &.course-proeve-3 {
                    & > .course-container {
                        border-left: 5px solid var(--proeve3-color);
                    }
                }

                &.course-proeve-4 {
                    & > .course-container {
                        border-left: 5px solid var(--proeve4-color);
                    }
                }

                &.course-proeve-5 {
                    & > .course-container {
                        border-left: 5px solid var(--proeve5-color);
                    }
                }

                &.course-proeve-6 {
                    & > .course-container {
                        border-left: 5px solid var(--proeve6-color);
                    }
                }

                &.internship {
                    & > .course-container {
                        background-color: var(--color4);
                    }
                }
            }
        }
    }
    & > .legend {
        width: 80%;
        margin: auto;
        margin-top: 2rem;

        & > div {
            display: flex;
            flex-wrap:wrap;
            gap:2px;
            & > div {
                background-color: var(--color4-light);
                padding: 2px;
                margin-left: 2px;
                flex: 1 1 23%;

                &.course-proeve-1 {
                    border-left: 5px solid var(--proeve1-color);
                }

                &.course-proeve-2 {
                    border-left: 5px solid var(--proeve2-color);
                }

                &.course-proeve-3 {
                    border-left: 5px solid var(--proeve3-color);
                }

                &.course-proeve-4 {
                    border-left: 5px solid var(--proeve4-color);
                }

                &.course-proeve-5 {
                    border-left: 5px solid var(--proeve5-color);
                }

                &.course-proeve-6 {
                    border-left: 5px solid var(--proeve6-color);
                }
            }
        }
    }
}

table.courseblock.courseblock--courses {
    width: 100%;
    border-collapse: collapse;
    & > thead{
        & > tr {
            & > th{
                background-color: var(--color1);
                color: var(--color2);
                font-weight: 700;
                font-size: 1.1rem;
                border-bottom: 3px solid var(--color3);

                & + th{
                    border-left: 3px solid var(--color3);
                }
            }
        }
    }
    & > tbody{
        & > tr {
            & > td {
                vertical-align: top;
                background-color: var(--color4-light);
                &:first-child {
                    width: 100px;
                }
                &:last-child {
                    text-align: center;
                    width: 75px;
                }
            }
            & + tr {
                & > td {
                    border-top: 3px solid var(--color4) !important;
                }
            }
        }
    }
}

a {
    font-weight: 700;
    text-decoration: none;
    color: inherit;
    transition: color 0.5s;

    &.course-link {
        &:before {
            font-family: "Font Awesome 5 Free";
            margin-right: 0.5rem;
            display: inline-block;
            content: '\f061';
            transition: -webkit-transform .5s;
            transition: transform .5s;
            transition: transform .5s, -webkit-transform .5s;
        }

        &:hover {
            &:before {
                transform: translateX(0.2em);                    
            }
        }
    }

    &:hover{
        color:var(--color8)
    }
}

.courseblock-exams{
    & > .courseblock-exams__semester {
        & > * {
            margin-bottom: 5px;

            &:last-child {
                margin-bottom: 10px;
            }
        }

        .semester {
            background-color: var(--color1);
            text-align: center;
            color: var(--color2);
            font-weight: 700;
            padding: 0.5rem 0.75rem;
        }

        & > .exams {
            & > .exam {
                background-color: var(--color4-light);
                display: flex;            
                padding: 0.5rem 0.75rem;
                margin-bottom: 5px;

                & > .left {
                    flex-grow: 1;
                

                    & > .exam__courses {
                        display: flex;
                        flex-direction: column;
                        white-space: nowrap;
                    }

                    & > .exam__title {
                        font-size: 18px;
                    }
                }

                & > .right {
                    margin-left: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    & > .exam__ects {
                        text-align: right;
                        font-weight: bold;
                    }

                    & > .exam__form {
                        font-style: italic;
                        font-size: 0.95em;
                        text-align: right;
                    }
                }
            }
        }
    }

    .courseblock-exams__ects-total {
        border-top: 3px solid var(--color1);
        text-align: right;
        font-weight: bold;
    }
}

/* IE10+ CSS styles go here */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    
    .courseblock-exams {
        & > .courseblock-exams__semester {
            & > .exams {
                & > .exam {                             
                    & > .right{                                  
                        display: block !important;
                        & > .exam__ects{                                           
                            display: block !important;
                        }
                        & > .exam__form{
                            display: block !important;
                        }
                    }
                }
            }
        }
    }
}


@media screen and (max-width: 500px) {
    .courseblock-exams {
        & > .courseblock-exams__semester {
            & > .exams{
                & > .exam {
                    flex-direction: column;         
                }
            }
        }
    }

    .elementlist {
        & > * {
            width: calc(100%);
        }
    }
}

@media screen and (min-width: 800px) {
    .page-wrapper {
        .education-structure-block {
            & > section.education-structure {
                & > .semester {
                    & > .course:hover {
                        transform: scale(1.1);
                        white-space: normal;
                        text-overflow: clip;
                        overflow: visible;
                        width: 200%;

                        & > .course-container {
                            background-color: var(--color4);
                            display: flex;
                            flex-direction: column;

                            & .show-on-hover {
                                display: block;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 800px) {
    .page-wrapper {
        .education-structure-block {
            & > section.education-structure {
                flex-direction: column;
                flex-grow: 1;

                & > .semester {
                    width: 100%;
                }
            }
        }
    }

    .elementlist {
        & > * {
            width: calc(50% - 2 * var(--gutter));
        }
    }
}

@color-secondary: #233249;

@color-primary: #EA5045;

@color-background: #EDEDED;


@media screen and (min-width: 1500px) {
    .row {
        max-width: 1170px;
    }
}

.row + .row:not(.row--accordion) {
    margin-top: 2rem;
}

.section-heading {
    font-size: 2rem;
    word-break: break-all;
    word-break: break-word;
}

span.course-text {
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    color: inherit;
}

.elementlist {
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--gutter));
    & > * {
        min-width: 200px;
        width: calc(25% - 2 * var(--gutter));
        margin: var(--gutter);
        text-overflow: ellipsis;
        color: var(--color2);
        padding: 0.5rem 0.75rem;
        background-color:var(--color1);

        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;     

        
        &:hover, &:active, &:focus {
            color: var(--color2);
        }

        span {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }    
}



//used then elements are links
.elementlist--arrow {
    & > * {
        @background: @color-secondary;
        cursor: pointer;
        display: flex;

        &:after {
            margin-left: auto;
            font-family: "Font Awesome 5 Free";
            margin-right: 0.5rem;
            display: inline-block;
            content: '\f061';
            -webkit-transition: -webkit-transform .5s;
            transition: -webkit-transform .5s;
            transition: transform .5s;
            transition: transform .5s, -webkit-transform .5s;
        }

        &:hover {
            background-color: lighten(@background, 5%);

            &:after {
                -webkit-transform: translateX(0.2em);
                transform: translateX(0.2em);                    
            }
        }

        &:active {
            background-color: darken(@background, 5%);
        }

        &:hover, &:active, &:focus {
            color: white;
        }

    }    
}

.factbox {
    a, span {
        font-size: 12px;
        text-transform: none;
        font-weight: normal;
        font-family: Roboto;
    }

    > * + *:before {
        content: " | ";
        color: @color-secondary;
    }

    margin-bottom: 42.5px;
}

@media screen and (max-width: 1000px) {
    .factbox {
        margin-bottom: 32.5px;
    }
}

.button {
    padding: 0 1.25em;
    font-family: RobotoCondensed;
    font-weight:700;
    text-shadow: none;
    text-decoration: none;
    background-color: @color-secondary;
    color: white;
    border-radius: 0;
    white-space: nowrap;
    height: 54px;
    letter-spacing: 0.5px;
    margin: 0;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;

    &:focus {
        background-color: lighten(@color-primary, 5%);
    }

    &:hover {
        background-color: @color-primary;
    }

    &:active {
        background-color: darken(@color-primary, 5%);
    }
}

input[type='text'], input[type='text']:focus {
    color: @color-secondary;
    border: none;
    box-shadow: none;
    border-radius: 0;
    height: 54px;
    padding-left: 30px;
    background: none;
    background-color: white;
    margin: 0;
    background-size: 0.9375rem;
    font-family: Roboto;


    &::placeholder {
        color: inherit;
    }
}


.main .row .element:last-of-type > *:last-child {
    margin-bottom: 0 !important;
}