:root body {
   /*  Typography  */
   --kompassi-font: 'Lato', Helvetica, Arial, sans-serif;
   --kompassi-font-size: 16px;
   --kompassi-line-height: 1.3em;

   /*  Colors  */
   --kompassi-hue: 205;

   --kompassi-fg-lightness: 13%;
   --kompassi-fg: hsla(0,0%,var(--kompassi-fg-lightness),1);
   --kompassi-fg-10: hsla(0,0%,var(--kompassi-fg-lightness),0.1);
   --kompassi-fg-25: hsla(0,0%,var(--kompassi-fg-lightness),0.2);
   --kompassi-fg-50: hsla(0,0%,var(--kompassi-fg-lightness),0.5);
   --kompassi-fg-75: hsla(0,0%,var(--kompassi-fg-lightness),0.75);
   --kompassi-fg-invert: hsla(0,0%,100%,1);

   --kompassi-bg: rgb(255, 255, 255); /* Need to use rgb() value! */
   --kompassi-bg-alt: hsl(var(--kompassi-hue),30%,97%);

   /*  Palette  */
   --kompassi-palette-0: hsl(var(--kompassi-hue),20%,10%);
   --kompassi-palette-1: hsl(var(--kompassi-hue),60%,20%);
   --kompassi-palette-2: hsl(var(--kompassi-hue),60%,35%);
   --kompassi-palette-3: hsl(var(--kompassi-hue),40%,60%);
   --kompassi-palette-4: hsl(var(--kompassi-hue),50%,90%);
   --kompassi-palette-5: hsl(var(--kompassi-hue),10%,95%);

   /*  Non-main palette colors  */
   --kompassi-indicator-bg: hsl(0,100%,40%);
   --kompassi-note-bg: hsl(60,100%,90%);

   /*  Common definitions  */
   --kompassi-box-shadow: 0 0 3px var(--kompassi-fg-10);
   --kompassi-radius: 0.3em;
   --kompassi-padding: 0.6em;
   --kompassi-padding-large: 1.5em;
   --kompassi-icon-size: 21px;
   --kompassi-modal-max-width: 1000px;
}

@media screen and (max-width:599px) {
   :root body {
      --kompassi-padding-large: 1em;
   }
}

/*
 *  Color scheme support
 *
 */

@media (prefers-color-scheme: dark) {
   :root body:not(.kompassi-color-scheme-light) {
      --kompassi-fg-lightness: 87%;
      --kompassi-fg-invert: #222;
      --kompassi-bg: hsl(var(--kompassi-hue),5%,10%);

      --kompassi-palette-0: hsl(var(--kompassi-hue),20%,15%);
      --kompassi-palette-1: hsl(var(--kompassi-hue),70%,40%);
      --kompassi-palette-2: hsl(var(--kompassi-hue),70%,25%);
      --kompassi-palette-3: hsl(var(--kompassi-hue),40%,60%);
      --kompassi-palette-4: hsl(var(--kompassi-hue),50%,15%);
      --kompassi-palette-5: hsl(var(--kompassi-hue),10%,17%);

      --kompassi-note-bg: hsl(50,100%,20%);
   }
   body:not(.kompassi-color-scheme-light) [class*="kompassi-icon"]::before {
      filter: invert() !important;
      opacity: 1 !important;
   }
      body:not(.kompassi-color-scheme-light) .is-favorite .kompassi-icon-favorite::before,
      body:not(.kompassi-color-scheme-light) .kompassi-icon-favorite.active::before {
         filter: none !important;
      }
   body:not(.kompassi-color-scheme-light) .kompassi-provided {
      filter: invert() saturate(0%) brightness(200%);
   }
}

:root body.kompassi-color-scheme-dark {
   --kompassi-fg-lightness: 87%;
   --kompassi-fg-invert: #222;
   --kompassi-bg: hsl(var(--kompassi-hue),5%,10%);

   --kompassi-palette-0: hsl(var(--kompassi-hue),20%,15%);
   --kompassi-palette-1: hsl(var(--kompassi-hue),70%,40%);
   --kompassi-palette-2: hsl(var(--kompassi-hue),70%,25%);
   --kompassi-palette-3: hsl(var(--kompassi-hue),40%,60%);
   --kompassi-palette-4: hsl(var(--kompassi-hue),50%,15%);
   --kompassi-palette-5: hsl(var(--kompassi-hue),10%,17%);

   --kompassi-note-bg: hsl(50,100%,20%);
}
body.kompassi-color-scheme-dark [class*="kompassi-icon"]::before {
   filter: invert() !important;
   opacity: 1 !important;
}
   body.kompassi-color-scheme-dark .is-favorite .kompassi-icon-favorite::before,
   body.kompassi-color-scheme-dark .kompassi-icon-favorite.active::before {
      filter: none !important;
   }
body.kompassi-color-scheme-dark .kompassi-provided {
   filter: invert() saturate(0%) brightness(200%);
}

/*
 *
 *
 */

.kompassi-integration {
	container-name: kompassi-integration;
	container-type: inline-size;
   position: relative;

	font-family: var(--kompassi-font);
   font-size: var(--kompassi-font-size);
   line-height: var(--kompassi-line-height);
}

.kompassi-integration.fix-bg-contrast {
   --kompassi-bg: var(--kompassi-bg-alt);
   --kompassi-box-shadow: 0 0 3px var(--kompassi-fg-25);
}

/*
 *  Icons
 *
 */

.kompassi-icon-arrow-left::before { background-image: url(../images/icons/arrow_left.svg); }
.kompassi-icon-arrow-right::before { background-image: url(../images/icons/arrow_right.svg); }
.kompassi-icon-clear-filters::before { background-image: url(../images/icons/clear_filters.svg); }
.kompassi-icon-close::before { background-image: url(../images/icons/close.svg); }
.kompassi-icon-ellipsis::before { background-image: url(../images/icons/ellipsis.svg); }
.kompassi-icon-favorite::before { background-image: url(../images/icons/favorite.svg); }
.kompassi-icon-filter::before { background-image: url(../images/icons/filter.svg); }
.kompassi-icon-list::before { background-image: url(../images/icons/list.svg); }
.kompassi-icon-signup::before { background-image: url(../images/icons/signup.svg); }
.kompassi-icon-timeline::before { background-image: url(../images/icons/timeline.svg); }
.kompassi-icon-timetable::before { background-image: url(../images/icons/timetable.svg); }

.kompassi-icon-favorite.active::before,
.is-favorite .kompassi-icon-favorite::before,
#kompassi_schedule[data-display="timeline"] .is-favorite .title::after { background-image: url(../images/icons/is_favorite.svg); }

/*  Active button style is dark by default, make sure the icons are visible  */
[class*="kompassi-icon"].active:not(.kompassi-icon-favorite)::before { filter: invert(); }
[class*="kompassi-icon"].active::before { opacity: 1 !important; }

/*  Icons without button group parent  */
:not(.kompassi-button-group) > [class*="kompassi-icon"]::before {
   content: '';
   display: inline-block;
   height: 1.25em;
   width: 1.25em;
   margin-right: 0.5em;
   background-size: contain;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}

/*
 *  Indicators
 *
 */

.kompassi-indicator:not(:empty) {
    display: inline-block;
    float: right;
    margin-left: var(--kompassi-padding);
    width: var(--kompassi-icon-size);
    height: var(--kompassi-icon-size);
    color: #fff;
    background-color: var(--kompassi-indicator-bg);
    text-align: center;
    border-radius: 9999px;
    align-content: center;
}

/*
 *  Notes
 *
 */

.kompassi-notes:not(:empty) {
	padding: 0.5em;
	border-radius: var(--kompassi-radius);
	box-shadow: var(--kompassi-box-shadow);
	background-color: var(--kompassi-note-bg);
	color: var(--kompassi-fg);
	margin-bottom: 0.5em;
}
   .kompassi-notes span {
		display: inline-block;
		margin-right: 1em;
	}
      .kompassi-notes .program-count {
			font-weight: 600;
		}


/*
 *  Footer
 *
 */

.kompassi-footer {
   margin: 1em 0;
}
   .kompassi-contact {
      font-size: 85%;
      letter-spacing: 0.02em;
      font-weight: 600;
      color: var(--kompassi-fg-75);
   }
   .kompassi-provided {
   	text-align: right;
   }
   	.kompassi-provided a {
   		text-decoration: none;
   	}
   	.kompassi-provided img {
   		height: 50px;
   		weidth: auto;
   	}

@media screen and (min-width:800px) {
   .kompassi-footer {
      display: grid;
      grid-template-columns: auto max-content;
   }
}

/*
 *  Button groups
 *
 */

.kompassi-button-group {
	display: block;
}
   .kompassi-button-group > a {
		cursor: pointer;
		position: relative;
		display: inline-block;
		padding: var(--kompassi-padding);
      color: var(--kompassi-fg);
		background: var(--kompassi-bg);
		border-radius: var(--kompassi-radius);
		margin-right: var(--kompassi-padding);
		margin-bottom: var(--kompassi-padding);
		box-shadow: var(--kompassi-box-shadow);
      text-decoration: none;
   }
      .kompassi-button-group > a:visited {
         color: var(--kompassi-fg);
      }
      .kompassi-button-group > a:is(:hover,:active,:focus) {
         color: var(--kompassi-palette-2);
      }
		.kompassi-button-group.has-icon-and-label > a:is([class*="kompassi-icon"]) {
			padding-left: calc( ( var(--kompassi-padding) * 2 ) + var(--kompassi-icon-size) );
		}
			.kompassi-button-group:is(.has-icon-and-label, .has-icon-only) > a::before {
				content: '';
				display: inline-block;
				position: absolute;
				top: var(--kompassi-padding);
				left: var(--kompassi-padding);
				width: var(--kompassi-icon-size);
				height: var(--kompassi-icon-size);
				background-repeat: no-repeat;
				background-position: 50% 50%;
				background-size: contain;
				opacity: 0.5;
			}
			.kompassi-button-group.has-icon-only > a {
				width: var(--kompassi-icon-size);
				height: var(--kompassi-icon-size);
            user-select: none;
			}

		.kompassi-button-group > a.active {
         color: #fff !important;
         background: var(--kompassi-palette-2) !important;
		}

@container kompassi-integration (min-width: 0px) {
	.kompassi-button-group {
		margin-right: var(--kompassi-padding);
		margin-bottom: var(--kompassi-padding);
	}
		.kompassi-button-group > a {
			border-radius: 0;
			margin-right: 0;
			margin-bottom: 0;
		}
			.kompassi-button-group > a:not(:last-of-type) {
            border-right: 1px solid var(--kompassi-fg-10);
			}
			.kompassi-button-group > a:first-child {
				border-bottom-left-radius: var(--kompassi-radius);
				border-top-left-radius: var(--kompassi-radius);
			}
			.kompassi-button-group > a:last-of-type {
				border-top-right-radius: var(--kompassi-radius);
				border-bottom-right-radius: var(--kompassi-radius);
			}
}

/*
 *  Dropdown menu
 *
 */

.kompassi-dropdown-menu-items {
   display: none;
   list-style-type: none;
   padding-left: 0;
   margin: 0;
}
   .kompassi-dropdown-menu.open .kompassi-dropdown-menu-items {
      position: absolute;
      display: block;
      z-index: 3000;
   }

   .kompassi-dropdown-menu > a,
   .kompassi-dropdown-menu-items {
		cursor: pointer;
		background: var(--kompassi-bg);
		border-radius: var(--kompassi-radius);
		box-shadow: var(--kompassi-box-shadow);
      text-decoration: none;
	}
      .kompassi-dropdown-menu > a {
         display: block;
         position: relative;
         user-select: none;

         width: calc( var(--kompassi-icon-size) + var(--kompassi-padding) * 2 );
         height: calc( var(--kompassi-icon-size) + var(--kompassi-padding) * 2 );
      }
         .kompassi-dropdown-menu > a::before {
            content: '';
            display: inline-block;
            position: absolute;
            top: var(--kompassi-padding);
            left: var(--kompassi-padding);
            width: var(--kompassi-icon-size);
            height: var(--kompassi-icon-size);
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: contain;
            opacity: 0.5;
         }

      .kompassi-dropdown-menu-items {
         border-top-left-radius: 0;
         min-width: max-content;
      }
         .kompassi-dropdown-menu-items li {
            border-bottom: 1px solid var(--kompassi-fg-10);
         }
         .kompassi-dropdown-menu-items a {
            display: block;
            padding: var(--kompassi-padding);
            color: var(--kompassi-fg);
            text-decoration: none;
         }
.kompassi-dropdown-menu.open > a {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;

   color: #fff;
   background-color: var(--kompassi-palette-2);
}


/*
 *  Modal
 *
 */

#kompassi_modal {
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 5000;

   color: var(--kompassi-fg);
	background-color: var(--kompassi-bg);
	box-shadow: var(--kompassi-box-shadow);

	overflow: hidden;
   user-select: text !important;
}

@supports (height:100dvh) {
	#kompassi_modal {
		height: 100dvh;
	}
}

#kompassi_modal {
	display: flex;
	flex-direction: column;
}
	#kompassi_modal .header {
		position: relative;
		display: grid;
		grid-template-columns: auto max-content;
		grid-template-areas: 'title actions';
		grid-gap: var(--kompassi-padding-large);
		padding: var(--kompassi-padding-large);
      background-color: var(--kompassi-bg);
	}
		#kompassi_modal .header .title {
			font-size: 120%;
         line-height: var(--kompassi-line-height);
			align-self: center;
		}
      #kompassi_modal .header .actions {
         --kompassi-icon-size: var(--kompassi-line-height);
      }
         #kompassi_modal .header .actions [class*="kompassi-icon"]::before {
            margin: 0 0 0 0.5em;
            height: calc( var(--kompassi-icon-size) + var(--kompassi-padding) );
            width: calc( var(--kompassi-icon-size) + var(--kompassi-padding) );
            background-position: 50% 50%;
            background-size: contain;
            background-repeat: no-repeat;
            cursor: pointer;
         }

		#kompassi_modal .content .actions {
         background-color: var(--kompassi-palette-3);
         padding: var(--kompassi-padding) var(--kompassi-padding-large);
			margin-right: 0;
         margin-bottom: 0;
		}
         #kompassi_modal.actions-bottom-right .content .actions {
            text-align: right;
            order: 2;
         }
			#kompassi_modal .content .actions a::before {
				opacity: 1;
         }
         #kompassi_modal .content .actions:is(.has-icon-and-label) a::after {
            content: attr(title);
         }
				#kompassi_modal.is-favorite .content .actions .favorite {
               color: #fff;
               background-color: var(--kompassi-palette-2);
				}
      #kompassi_modal .content .main,
      #kompassi_modal .content .footer {
         padding: var(--kompassi-padding-large);
      }

/* TODO: Prefer container query */
@media screen and (max-width:599px) {
	#kompassi_modal .actions a {
		display: block;
      width: calc(100% - var(--kompassi-padding) * 2);
	}
      #kompassi_modal .content .actions a[class*="kompassi-icon"] {
         width: calc(100% - var(--kompassi-padding) * 3 - var(--kompassi-icon-size));
      }
      #kompassi_modal .content .actions a {
         border-radius: 0;
      }
         #kompassi_modal .content .actions a:first-child {
            border-top-right-radius: var(--kompassi-radius);
            border-top-left-radius: var(--kompassi-radius);
         }
         #kompassi_modal .content .actions a:last-child {
            border-bottom-right-radius: var(--kompassi-radius);
            border-bottom-left-radius: var(--kompassi-radius);
         }
      #kompassi_modal .content .actions .favorite {
         margin-right: 0;
      }
      #kompassi_modal .content .actions a {
         border-right: none;
         box-shadow: none;
      }
         #kompassi_modal > .content > .actions a:not(:last-child) {
            border-bottom: 1px solid var(--kompassi-fg-10);
         }

}
      #kompassi_modal .content:not(.dimension) {
			display: flex;
			flex-direction: column;
			flex: auto;
			overflow-y: auto;
			background:
				/* Shadow covers */
            linear-gradient(hsl(0,0%,0%,0.05) 30%, rgba(255,255,255,0)),
            linear-gradient(rgba(255,255,255,0), hsl(0,0%,0%,0.05) 70%) 0 100%,

				/* Shadows */
				radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
				radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;

			background-repeat: no-repeat;
         background-color: var(--kompassi-palette-5);
			background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

			/* Opera doesn't support this in the shorthand */
			background-attachment: local, local, scroll, scroll;
		}
				#kompassi_modal .content .main {
					flex: auto;
					display: flex;
					flex-direction: column;

               font-size: 107%;
               line-height: 1.7em;
				}
               #kompassi_modal .content .main > * {
                  margin-left: 0;
                  padding-left: 0;
               }

               #kompassi_modal .content .main > :last-child {
                  margin-bottom: 0;
               }
            #kompassi_modal .content .footer {
					flex: 0 0 min-content;
               background-color: var(--kompassi-bg);
				}

@media screen and (min-width:900px) and (min-height: 800px) {
	#kompassi_modal {
		width: auto;
		height: calc( 100vh - 7em );
		max-width: var(--kompassi-modal-max-width);
		right: max( 4em, calc( ( 100vw - var(--kompassi-modal-max-width) ) / 2 ) );
		left: max( 4em, calc( ( 100vw - var(--kompassi-modal-max-width) ) / 2 ) );
		top: 3.5em;
		bottom: 3.5em;
      border-radius: var(--kompassi-radius);
	}
      #kompassi_modal.small-modal {
         right: max( 4em, 15vw );
         left: max( 4em, 15vw );
         top: max( 4em, 15vh );
         bottom: max( 4em, 15vh );
         height: auto;
      }
      #kompassi_modal .header .title {
         font-size: 150%;
      }
}
@media screen and (min-width:1100px) and (min-height: 1000px) {
   #kompassi_modal.small-modal {
      right: max( 4em, 25vw );
      left: max( 4em, 25vw );
      top: max( 4em, 25vh );
      bottom: max( 4em, 25vh );
   }
}

#kompassi_modal :is(dt,dd) {
   font-size: 90%;
}
   #kompassi_modal dt {
      font-weight: bold;
   }

/* TODO: Prefer container query */
@media screen and (min-width: 800px) {
   #kompassi_modal dl {
		display: grid;
		grid-template-columns: max-content auto;
		grid-gap: 0 2em;
	}
}

/*  Document modal  */
#kompassi_modal.kompassi-document ul {
   list-style-position: inside;
}
   #kompassi_modal.kompassi-document ul li::marker {
      content: "– ";
   }

#kompassi_modal_underlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
   background-color: var(--kompassi-palette-0);
   opacity: 0.85;
	z-index: 4999;
}

/*
 *  Popover
 *
 */

#kompassi_popover {
   container-type: normal;
   position: absolute;
	z-index: 4998;

	padding: 0.5em;

   color: #fff;
   background-color: var(--kompassi-palette-1);
	box-shadow: var(--kompassi-box-shadow);
	border-radius: var(--kompassi-radius);
}
   #kompassi_popover p {
      margin: 0;
   }

/*
 *  Dropdown lists
 *
 */

.kompassi-dropdown {
   position: relative;
}
   .kompassi-dropdown > * {
      width: 100%;
   }
   .kompassi-dropdown button {
      position: relative;
      appearance: none;
      cursor: pointer;

      padding: var(--kompassi-padding);
      color: #fff;
      background-color: hsl(0,0%,0%,0.2);
      border: none;
      border-radius: var(--kompassi-radius);
      font-family: var(--kompassi-font);
      font-size: 100%;
      text-align: left;
   }
      .kompassi-dropdown button::after {
         content: '';
         display: block;
         position: absolute;
         top: 0;
         bottom: 0;
         right: 0.5em;
         width: 1em;
         height: 100%;
         margin: 0 auto;

         border: none;
         background-image: url(../images/icons/dropdown.svg);
         background-size: contain;
         background-repeat: no-repeat;
         background-position: 50% 50%;
         filter: invert();
      }
   .kompassi-dropdown ul {
      display: none;
      list-style-type: none;
      margin-top: 0;
      padding-left: 0;
      border: 1px solid var(--kompassi-fg-50);
      max-height: 400px;
      overflow-y: scroll;
   }
      .kompassi-dropdown li {
         color: var(--kompassi-fg);
         background-color: var(--kompassi-bg);
         border-top: 1px solid var(--kompassi-fg-10);
      }
         .kompassi-dropdown li.description,
         .kompassi-dropdown li label {
            padding: calc(var(--kompassi-padding) / 2);
         }
         .kompassi-dropdown li label {
            cursor: pointer;
            display: grid;
            grid-template-columns: 2em auto;
         }
            .kompassi-dropdown li label input {
               vertical-align: top;
               height: 1em;
               outline: none;
            }

   .kompassi-dropdown.open ul {
      display: block;
      position: absolute;
      left: 0;
      z-index: 4000;
      background-color: #eee;
   }

/*
 *  Tables
 *
 */

.kompassi-table {
   width: 100%;
   border-collapse: collapse;
   box-shadow: var(--kompassi-box-shadow);
}
   .kompassi-table th {
      text-align: left;
   }
   .kompassi-table th, td {
      padding: var(--kompassi-padding) !important;
      border: 1px solid var(--kompassi-fg-25);
   }