:root{
	--kp-red-bg:#FA3C3C;
	--kp-red-color:#FFFFFF;

	--kp-green-bg:#005447;
	--kp-green-color:#FFFFFF;

	--kp-green2-bg:#148C78;
	--kp-green2-color:#000000;

	--kp-green3-bg:#BAE1D5;
	--kp-green3-color:#000000;

	--kp-green4-bg:#8CCDB9;
	--kp-green4-color:#000000;
    
	--kp-menu-color:#000000;

	--kp-mint-bg:#00FFC4;
	--kp-mint-color:#000000;
    --kp-mint-darker:#01cb9c;

	--kp-white-bg:#FFF;
	--kp-white-color:#000;
		
	--kp-black-bg:#000;
	--kp-black-color:#FFF;


    --kp-grey2-bg: #E6E6E6;
    --kp-grey2-color: #000000;

    --kp-grey4-bg: #B3B3B3;
    --kp-grey4-color: #000000;
	
    --kp-link-color: #cc0505;
    --kp-link-hover-color:#000;

	--gutter: 2px;

    --background-color:#FFFFFF;
}

* {
  padding: 0;
  margin: 0;
}

:root,
html,
body {
	font-size:12pt;
	font-family: Arial;
}

.logobar{
	position:fixed;
	height:81px;
    padding:1rem 2rem;
	display:flex;
	justify-content: space-between;
    align-items:center;
	top:0px;
	left:0px;
	width:100%;
	color:var(--kp-green4-color);
	background-color:var(--kp-green4-bg);
	z-index:1;
	& .logo{
        & .logo-large{
            height:3rem;
            width:15.125rem;
            display:none;
        }

        & .logo-small{
            height:26px;
            width:140px;

        }
	}
    & > .itemsbar{
        display:flex;
        align-items:center;
        & > .language-link {
            cursor:pointer;
            text-decoration: none;
            display: block;
            color: #000;
            border: 2px solid #000;
            font-weight: 800;
            font-size: 12px;
            font-size: .75rem;
            padding: 8px 10px;
            line-height: 1;
        }
        & > .search-container{
            display:flex;
            align-items:center;
            gap:0.5rem;
            & > .search-field{
                margin-bottom:0;
            }
        }
    }
}

.button{
    &.fullwidth{
        width:100%;
    }
	background-color:var(--kp-green-bg);
	color:var(--kp-green-color);		

	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease; 
    word-break: break-word;
    
    &.button-light{
        background-color:var(--kp-mint-bg);
	    color:var(--kp-mint-color);	
        &:hover{            
            background-color:var(--kp-mint-bg);	        
        }
    }
    &.button-one-line{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        text-align:left;
        & > *{                 
            overflow:hidden;
            text-overflow:ellipsis;
            max-width:100%;
            
        }
    }

    &:hover{        
        background-color:var(--kp-green-bg);	
        
    }
    & > .download{
        line-height:24px;
        background: url("data:image/svg+xml,%3Csvg width='14' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 9l-1.406-1.406L8 11.188V0H6v11.188L2.406 7.594 1 9l6 6 6-6zM0 17v2h14v-2H0z' fill='%23FFFFFF'/%3E%3C/svg%3E ") left top/contain no-repeat;
        background-size:14px 19px;
        padding-left: 1.5rem;
        display:inline-block;
    }

    & > .download-after{

        background: url("data:image/svg+xml,%3Csvg width='14' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 9l-1.406-1.406L8 11.188V0H6v11.188L2.406 7.594 1 9l6 6 6-6zM0 17v2h14v-2H0z' fill='%23FFFFFF'/%3E%3C/svg%3E ") left top/contain no-repeat;
        background-size:10px 14px;
        background-position-x:right;
        padding-right: 1rem;
        display:inline-block;
    }
}

@media(min-width:1280px) {
    .logobar {
        & .logo{
            & .logo-large{
                display: inline;
            }
            & .logo-small{
                display:none;
            }
        }
    }
}


.page-wrapper{
	margin-top:81px;
    min-height:calc(100vh - 81px);
	& > main{
		background-color:var(--kp-white-bg);
		color:var(--kp-white-color);	
        min-height:calc(100vh - 81px);
        > .title--bar{
            background-color:var(--kp-green4-bg);
            color:var(--kp-green4-color);
        }
        .top-menu{
            position:sticky;
            top:81px;
            max-height:calc(100vh - 100px);
            overflow-y:auto;
		    background-color:var(--kp-white-bg);
            z-index:2;
            & > *:not(:first-child){
                display:none;
            }
                                   
            &.show-toc > .toc{
                display:block;
            }
                                   
            &.show-search > .search{
                display:flex;
                gap:4px;
                & > input{
                    margin:0px;
                    padding:0px;
                    border:0px;
                    box-shadow:0px;
                    border-bottom:2px solid black;
                    background-color:transparent;
                    height:unset;
                    width:7rem;
                }
            }

            & > .toc{
                & > .anchor-nav--menuitem-1 {
                    font-family: Arial,sans-serif;
                }
                & > .anchor-nav--menuitem-2 {
                    font-family: Arial,sans-serif;                    
                    padding-left: 1.5rem;
                }
            }
        }
		.main-left{
            border-right:rgb(229,229,229) solid 1px;
            background-color:var(--kp-green3-bg);
            color:var(--kp-menu-color);
            min-height:calc(100vh - 81px - 73px);
            & > .main-left-sticky{
                position:sticky;
                top:81px;
                max-height:calc(100vh - 100px);
                overflow-y:auto;
                & > .anchor-nav--menuitem-1 {
                    display: inline-block;
                    font-family: Arial, sans-serif;
                    color:var(--kp-menu-color);
                    font-size: .9rem;
                    line-height: 15px;
                    align-items: center;
                    margin: 0 0;
                    text-decoration: none;
                    padding-right: 1.5rem;
                    padding-left: 1.75rem;
                    position: relative;
                    transition: padding 350ms ease-in-out,color 350ms ease-in-out;
                    word-break:break-word;
                    cursor:pointer;
                    &:first-child{                                     
                        padding-top:1rem;
                    }
                    &:hover{        
                        color: #000000;
                    }
                }
                & > .anchor-nav--menuitem-2 {
                    display: inline-block;
                    font-family: Arial,sans-serif;
                    color:var(--kp-menu-color);
                    font-size: 0.85rem;
                    line-height: 15px;
                    align-items: center;
                    margin: 0 0;
                    text-decoration: none;
                    padding-right: 1.5rem;
                    padding-left: 2.25rem;
                    position: relative;
                    transition: padding 350ms ease-in-out,color 350ms ease-in-out;
                    word-break:break-word;
                    cursor:pointer;
                    margin-bottom:0;
                    margin-top:0.5rem;
                    margin-left:0;
                    margin-right:0;

                    &:target-current{
                        font-style:italic;
                    }

                    &:hover{        
                        color: #000000;
                    }
                    & + .anchor-nav--menuitem-1{
                        margin-top:1rem;
                    }
                }
            }
		}
        .main-center{
            padding-left:1rem;
            .search{
                color:#000000;
                background-color:#FFF000;
                &.search-current{
                    background-color:#FFB400;
                }
            }
        }
        .main-right{
            & > .main-right-sticky{
                position:sticky;
                top:81px;
                z-index:2;
                display:flex;
                flex-direction:column;
                & > .menu-item{
                    display:flex;
                    gap:4px;
                    & > input{
                        margin:0px;
                        padding:0px;
                        border:0px;
                        box-shadow:0px;
                        border-bottom:2px solid white;
                        background-color:transparent;
                        height:unset;
                        width:7rem;
                        color:#FFFFFF;
                    }
                }
            }
        }

        #toggle-expansion{
            display:block;
            &:not(.expanded){
                & > .toggle-expansion-show-on-expanded{
                    display:none;
                }
                & > .toggle-expansion-show-on-collapsed{
                    display:inline;
                }
            }
            &.expanded{
                & > .toggle-expansion-show-on-expanded{
                    display:inline;
                }
                & > .toggle-expansion-show-on-collapsed{
                    display:none;
                }
            }
        }

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

        & .accordion {
            background-color: transparent;            
            scroll-margin-top:91px;
            & .accordion__item {
                position: relative;
                border-bottom: 1px solid rgba(0,0,0,0.5);
                & .accordion-content {
                    background-color: transparent;
                    border-width:0px;                    
                    padding-top:0px;
                    & > .element{
                        &.appendix{    
                            --background-color:#dedede;                        
                            background-color: var(--background-color);
                        }
                        & > ul{
                            margin-bottom:1rem;
                        }
                    }
                }

                & > .accordion__title {
                    font-size: 14pt;
                    line-height: 1.5rem;
                    font-family: Arial,sans-serif;
                    font-weight: 700;
                    display: block;
                    padding: 35px 25px 42px 4.5rem;
                    color: #000000;
                    position:relative;                    
                    scroll-margin-top:91px;
                    & > .arrow-expand {
                        position: absolute;
                        top: 50%;
                        left: 0;
                        left: .5rem;
                        transform: translateY(-50%);
                        height: .125rem;
                        width: 2rem;
                        background-color: #cc0505;
                        display: inline-block;
                        &::after {
                          content: "";
                          background-color: #cc0505;
                          height: .125rem;
                          width: 2rem;
                          position: absolute;
                          left: 0;
                          top: 0;
                          transform-origin: center;
                          transition: all 220ms ease-in-out;
                          transform: rotate(-90deg);
                          display: inline-block;
                        }
                    }
                }

                &.is-active {
                    & > .accordion__title {
                        & > .arrow-expand {
                            &::after {
                                transform: rotate(0);
                            }
                        }
                    }
                }
            }

            &.headline-level-1{
                & > .accordion__item{
                    & > .accordion__title{
                        font-size: 22pt;
                        font-family: Georgia;
                    }
                }
            }

            &.headline-level-2{
                & > .accordion__item{
                    & > .accordion__title{
                        font-size: 19pt;
                    }
                }
            }

            &.headline-level-3{
                & > .accordion__item{
                    & > .accordion__title{
                        font-size: 16pt;
                    }
                }
            }
        }
	}
}
.page-heading-preline{
    font-family:Georgia;
}
.page-heading {
    margin: 0;
    min-width: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: break-word;

    font-size: 26pt;
    font-family:Georgia;
    font-weight:bold;
}

h1{
    font-size: 26pt;
    font-family:Georgia;
    font-weight:bold;
}

h2 {
    font-family: Arial,sans-serif;
    font-size: 22pt;
    font-weight:bold;
    scroll-margin-top:91px;
    margin-top:1rem;
    word-wrap:break-word;
}
div.headline-level-1{
    color:var(--kp-green-bg);
}
h3 {
    font-family: Arial,sans-serif;
    font-size: 16pt;
    font-weight:bold;
    scroll-margin-top:91px;
}

h4 {
    font-family: Arial,sans-serif;
    font-size: 14pt;
    font-weight:bold;
}

.as-link{
    cursor:pointer;
}

a{        
    text-decoration: none;
    font-weight: bold;
    color: var(--kp-link-color);
    &:hover{
        color:var(--kp-link-hover-color);
    }

    &:not(.accordion__title, .download, .button):only-child {
        transition: color 0.5s;
        line-height:24px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  fill='none' width='14' height='24' %3E%3Cpath d='M1 1l12 11.5L1 24' stroke='%23D10505' stroke-width='2'/%3E%3C/svg%3E ") left top/contain no-repeat;
        background-size:14px 24px;
        padding-left: 1.5rem;
        display:inline-block;
    }
    &.download {
        transition: color 0.5s;
        line-height:24px;
        background: url("data:image/svg+xml,%3Csvg width='14' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 9l-1.406-1.406L8 11.188V0H6v11.188L2.406 7.594 1 9l6 6 6-6zM0 17v2h14v-2H0z' fill='%23d10505'/%3E%3C/svg%3E ") left top/contain no-repeat;
        background-size:14px 19px;
        padding-left: 1.5rem;
        display:inline-block;
    }
}


p{
    &:has(+ ul){
        margin-bottom:.5rem;
    }
}
ul ul{
   margin-bottom:.5rem;
}
main a.accordion__title {
    transition: color 0.5s;
    line-height:24px;
}

.education-structure-block {
    --proeve1-color: #009490;
    --proeve2-color: #3d8eb7;
    --proeve3-color: #5d1145;
    --proeve4-color: #b0cd36;
    --proeve5-color: #cd3636;
    --proeve6-color: #855a03;
    --lineheight: 18px;
    --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;
            & > .header {
                background-color: var(--kp-green-bg);
                color: var(--kp-green-color);
                text-align: center;
                padding: 5px;
				font-weight: 700;
                container-name: term-header;
                container-type:inline-size;
            }

            & > .course {
                flex-grow: 1;
                word-break: break-all;
                word-break: break-word;
                font-size: .7em;
                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(--kp-green4-bg);
					color: var(--kp-green4-color);
                    min-height: 100%;
                    width: 100%;
                    padding: 5px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    box-sizing: border-box;
					font-weight: 700;
                    & > .show-on-hover {
                        display: none;
                    }

                    & a {
                        background: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  fill='none' width='5.5' height='12' %3E%3Cpath d='M1 1l4.5 6L1 12' stroke='%23000000' stroke-width='2'/%3E%3C/svg%3E ) left top/contain no-repeat;
                        background-size: 5.5px  12px;
                        padding-left: calc(1.0rem * 0.7);
                        color:var(--kp-green4-color);
                        display:inline;
                    }
                }

                &.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(--kp-green3-bg);
                        color: var(--kp-green3-color);
                    }
                }
            }
        }
    }
    & > .legend {
        width: 80%;
        margin: auto;
        margin-top: 2rem;

        & > div {
            display: flex;
            flex-wrap:wrap;
            gap:2px;
            & > div {
				background-color: var(--kp-grey2-bg);
				color: var(--kp-grey2-color);
                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);
                }
            }
        }
    }
}


@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%;
                        font-size: calc(1rem / 1.1); /* nulstiller scale transformationen */

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

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


                            & a {
                                background: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  fill='none' width='8' height='16' %3E%3Cpath d='M1 1l7.5 8L1 16' stroke='%23000000' stroke-width='2'/%3E%3C/svg%3E ) left top/contain no-repeat;
                                background-size:8px 16px;
                                padding-left: 1rem;
                                color:var(--kp-green3-color)
                            }
                        }
                    }
                }
            }
        }
    }
}

@container term-header (width < 105px){
    span[data-alt]{
        font-size:0px;
        &:after{
            content:attr(data-alt);
            font-size:16px;
            white-space:nowrap;
        }
    }
}

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

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

.element:has(table.courseblock-exams){
    width:100%;
    overflow-x:auto;
}

table.courseblock-exams{   
    max-width:100%;
    font-size: .75em;
    & > thead{
        top:81px;      
        z-index:3;
	    & > tr{
		    & > th{
			    background-color: var(--kp-green-bg);
			    color: var(--kp-green-color) !important;
                border:3px solid var(--background-color);
		    }
	    }
    }
    & > tbody{
	    & > tr{
		    & > td{
			    background-color: var(--kp-green3-bg);
			    color: var(--kp-green3-color);
			    vertical-align:top;
                border:2px solid var(--background-color);
			    & a {
				    background: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' width='8' height='16' %3E%3Cpath d='M1 1l7 8L1 16' stroke='%23000000' stroke-width='2'/%3E%3C/svg%3E) left top / contain no-repeat !important;
				    background-size: 8px 16px !important;
				    padding-left: 1rem !important;
				    color: var(--kp-green3-color) !important;
			    }
		    }

		    &.term{
			    & > td{
				    background-color: var(--kp-green4-bg);
				    color: var(--kp-green4-color);
			    }
		    }
		    &.total{
			    & > td{
				    text-align:right;
			    }
		    }
	    }
    }
}

@media screen and (min-width: 40em) {
    table.courseblock-exams {
        & > tbody{
            & > tr{
                & > td:nth-child(2){
                    max-width:90px;
                    & > div > div > *{
                        overflow:hidden;
                        white-space:nowrap;
                        text-overflow:ellipsis;
                        display:inline-block;
                        width:100%;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 40em) {
    table.courseblock-exams {
        display: block;
        & > thead{
            display:none;
        }

         & > tbody {
            display: block;
            & > tr {
                display: flex;
                flex-direction: column;
                border-bottom: 1px solid #ccc;
                &:not(.term, .total){
                    & > td {
                        display: flex;
                        grow:2;
                        padding:0px;
                        margin:0px;
                        &:first-child{
			                background-color: var(--kp-green4-bg);
			                color: var(--kp-green4-color) !important;
                            border-top-width:6px;
                        }
                        &::before{
                            content: attr(data-header);                           
                            width:35%;
                            min-width:35%;
                            font-weight: bold;
			                background-color: var(--kp-green-bg);
			                color: var(--kp-green-color) !important;
                            padding-top:0.5rem;
                            padding-bottom:0.5rem;
                            padding-left:0.5rem;
                            margin-right:0.5rem;
                            word-break:break-all;
                        }
                    }                
                }
            }
        }
    }
}

table.courseblock.courseblock--courses {
    width: 100%;
    border-collapse: collapse;
    & > thead{
        border:0px;
        & > tr {
            & > th{
				background-color: var(--kp-green-bg);
				color: var(--kp-green-color);
                font-weight: 700;
                font-size: 1.1rem;
            }
        }
    }
    & > tbody{
        border:0px;
        & > tr {
            & > td {
                vertical-align: top;
				background-color: var(--kp-green3-bg);
				color: var(--kp-green3-color);
                &:first-child {
                    width: 100px;
                }
                &:last-child {
                    text-align: center;
                    width: 75px;
                }



                & a {
                    background: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  fill='none' width='8' height='16' %3E%3Cpath d='M1 1l7 8L1 16' stroke='%23000000' stroke-width='2'/%3E%3C/svg%3E ) left top/contain no-repeat;
                    background-size:8px 16px;
                    padding-left: 1rem;
                    color:var(--kp-green3-coor)
                }
            }
            & + tr {
                & > td {
                    border-top: 3px solid var(--kp-green-bg) !important;
                }
            }
        }
    }
}

table:not(.courseblock--courses,.courseblock-exams){
    border-collapse: collapse;
    background-color:#FFFFFF;
    & > thead{
        border:0px;
        & > tr{
            background-color:var(--kp-green-bg);
            & > td, & > th{
                padding: 0.5rem 0.625rem 0.625rem;
                font-weight: bold;
                text-align: left;
                border:0px;
                color:var(--kp-green-color)
            }
        }
    }
    & > tbody{
        background-color:#FFFFFF;
        border:0px;
        & > tr {                   
            background-color:#FFFFFF;
            & > td, & > th{
                padding: 0.5rem 0.625rem 0.625rem;
            }
            &:nth-child(odd){
                background-color:var(--kp-grey2-bg)
            }
        }
    }
}