: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-darker:#000000;
	--kp-green3-color:#000000;

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

	--kp-mint-bg:#00FFC4;
	--kp-mint-color:#000000;
	
	--kp-white-bg:#FFF;
	--kp-white-color:#000;
		
	--kp-black-bg:#000;
	--kp-black-color:#FFF;
		
	--kp-grey-bg:#E6E6E6;
	--kp-grey-color:#000;

    --link-color: #000000;
    --link-color-visited: #000000;
    --link-color-hover: #000000;
}

* {
    padding: 0;
    margin: 0;
}

p{
    margin-bottom:0px;
    &:has(+ p){
        margin-bottom:1rem;
    }
}

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

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

    &:hover {
        text-decoration: underline;
        color:  var(--link-color-hover);
    }
    &.link {
        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;
    }
}

.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;
        gap:1rem;
        & > .search-container{
            display:flex;
            align-items:center;
            gap:0.5rem;
            & > .search-field{
                margin-bottom:0;
            }
        }
    }
}

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

.page-wrapper {
    margin-top: 81px;

    .band-primary-left{
        background-color:var(--kp-green-bg);
	    color:var(--kp-green-color);	
        align-content:center;
        text-align:center;
    }

    .band-primary-right{
	    background-color:var(--kp-green4-bg);
	    color:var(--kp-green4-color);	
        padding:1rem;

		& input, & input:focus{
		    color:var(--kp-green2-color);
		    border-width:0px;
            border-bottom-width:2px;
		    border-bottom-color:var(--kp-green4-color);
		}	
                              
		& select{
			background-color:var(--kp-green4-bg);
		    color:var(--kp-green2-color);
            
		    border-width:0px;
            border-bottom-width:2px;
		    border-bottom-color:var(--kp-green4-color);
            
		    & > *, & > * > * {
			    background-color:var(--kp-green4-bg);
		    }
		}
    
		& button{
		    background-color:var(--kp-green3-bg);
		    color:var(--kp-green3-color);
		    padding:10px 24px 14px;

		    -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 {
			    background-color:var(--kp-green3-darker);	
		    }
		}
    }

    & > main{
		background-color:var(--kp-white-bg);
		color:var(--kp-white-color);
        & > .band {
            padding:25px 0;
        }
        & .search-filter {
            padding-bottom: 4em;
        }

        & .search-result-education-courses{
            padding-bottom:4rem;
            & > .course-result
            {  
                margin-top:1rem;
                &:first-child{
                    margin-top:0rem;
                }

                padding-bottom:5px;
                border-bottom:3px solid var(--kp-black-bg);
                .course-result-course-title{
                    margin-bottom:0px;
                }
            }
            .course-result-course-infolist {
                margin: 0;
                & > span:not(:last-child):after {
                 content:' | ';
                }
            }
        }

        &.content {	
            > .title--bar{
                background-color:var(--kp-green4-bg);
                color:var(--kp-green4-color);
            }
		    .button{
	            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; 
    
                &.button-light{
                    background-color:var(--kp-mint-bg);
	                color:var(--kp-mint-color);	
                    &:hover{            
                        background-color:var(--kp-mint-bg);	        
                    }
                }

                &:hover{        
                    background-color:var(--kp-green-bg);	
        
                }
		    }

            .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-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;
                    }
                }
            }

            .main-right{
                & > .main-right-sticky{
                    position:sticky;
                    top:148px;
                    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;
                    }
                }
            }

            & > #header-placement{
                & .course__header{
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 20px;
                    & > h1.title{
                        margin: 0;
                        min-width: auto;
                        -webkit-hyphens: auto;
                        -moz-hyphens: auto;
                        -ms-hyphens: auto;
                        hyphens: auto;
                        word-break: break-word;
                        flex-grow: 1;
                        font-family: Georgia;
                    }
                }
            }

            & > #course {
                
	            & .course-fact__column {
                    background-color:var(--kp-green3-bg);
                    color:var(--kp-green3-color);
	                & > .course-fact__list {
		                display:flex;
		                flex-wrap:wrap;
                        align-content:flex-start;
                        column-gap:2rem;
		                word-break:break-word;
		                -webkit-hyphens:auto;
		                -moz-hyphens:auto;
		                -ms-hyphens:auto;
		                hyphens:auto;
                        padding-top:1rem;
                        padding-left: 1.75rem;
		                & > .course-fact {
			                margin-bottom:1rem;
			                flex-basis:200px;
			                flex-grow:1;
			                & > .course-fact__title {
				                font-weight: 700;
				                line-height:1.5rem;
			                }
			                & > .course-fact__content {
				                line-height:1.375rem;

                                & .note{
                                    margin-top:.5lh;
                                }
			                }	
		                }	
                    }
                }
                .search-container{
                    .search{
                        color:#000000;
                        background-color:#FFF000;
                        &.search-current{
                            background-color:#FFB400;
                        }
                    }
                }
                & > .course-info{

                    & .accordion {
	                    background-color:transparent;

	                    & .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;
                                & .learning-goal-subpart:not(:first-child){
                                    margin-top:1.5lh;
                                }
                                & .note{
                                    margin-top:.5lh;
                                }
                                & .exam-name{
                                    font-weight: 700;
                                    border-bottom:2px solid black;                                   
                                    margin-bottom:6px;
                                    font-size:1.15rem;
                                }
                                & .exam-attendance{
                                    & > .remedy-option{
                                        margin-top:.8lh;           
                                    }
                                    & + .exam-prerequisit {
                                        border-top:1px solid #D1D1D1;
                                        margin-top:.8lh;
                                        padding-top:.8lh;
                                    }
                                }
                                & .exam-prerequisit{
                                    & > .remedy-option{
                                        margin-top:.8lh;       
                                    }
                                    & + .exam-prerequisit {
                                        border-top:1px solid #D1D1D1;
                                        margin-top:.8lh;
                                        padding-top:.8lh;
                                    }
                                }

                                & .list--horizontal {
                                     display:flex;
                                     flex-direction:column;
                                    & > .list__item {
                                        display:flex;
                                        margin-bottom:15px;

                                        & > .item__label {
                                            width:35%;
                                            flex-shrink:0;
                                            font-weight:700;
                                            word-break:break-all;
                                            word-break:break-word;
                                        }

                                        & > .item__content {
                                            padding-left:10px;
                                            flex-grow:2;
                                        }
                                    }
                                }
		                    }
	
		                    & .accordion__title {
                                font-size: 1.25rem;
                                line-height: 1.5rem;
                                font-family: Arial;
                                font-weight: 700;
                                display: block;
                                padding: 35px 25px 42px 4.5rem;
                                position:relative;
                                & > .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);
                                        }
                                    }
                                }
                            }
	                    }
                    }
                }
            }
        }
    }
}
/* Foundation small -> medium treshhold*/
@media print, screen and (min-width: 40em) {
    .page-wrapper {

        & > main{
            &.content {	
                & .title--bar:has(.course__header){
                    position:sticky;
                    top:81px;
                    height:58px;
                    z-index:2;
                }
                & > #course {
                    .course-fact__column{
                        min-height: calc(100vh - 138px);
                        border-right: #E5E5E5 solid 1px;
                    }
                }
            }
        }
    }
}
h3, h4 {
    font-weight: 700;
}

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

h2 {
    font-family: Arial,sans-serif;
    font-size: 20pt;
    font-weight:bold;
    scroll-margin-top:91px;
}

#permalink{
    cursor:pointer;
}

#permalink-modal{
    & > .close-reveal {
        cursor: pointer;
        font-size: 2.22222rem;
        font-weight: bold;
        line-height: 1;
        position: absolute;
        top: 0.55556rem;
        right: 1.22222rem;
        text-decoration: none;
    }
}

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

h2 {
    line-height: 2rem;
    word-break:break-word;
}

h3 {
    font-size: 1.25rem;
    line-height: 2rem;
}

input[type='text'],
input[type='text']:focus {
    font-size: 12pt;
    color: #233249;
    border: none;
    border-bottom: 1px solid #233249;
    box-shadow: none;
    border-radius: 0;
    background: none;
    padding-left: 0;
    background-size: .9375rem;
}

input[type='text']::placeholder,
input[type='text']:focus::placeholder {
    color: inherit;
}

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

.flex > *:not(:last-child) {
    margin-right: 20px;
}

.as-link{
    cursor:pointer
}

.dropdown{ 
    display:none;
    .is-dropdown-submenu span {
        padding: .7rem 1rem;
        line-height:1;
        display:block;
    }
}
.nowrap{
    white-space:nowrap;
}

.gap-1-2{
    gap:.5rem;
}
.gap-1{
    gap:1rem;
}