@charset "CP850";
/* DEFINITIONS START */
/* VALUES */
/* COLORS */
/* farver - HER SKAL RENSES UUUDDDDDDDDDDDDDDD 
	colLCQPh
	tekstStor
	Skygger om firkant
	inkMenu
	da/fr  InkMenu
	menuLine
	*/
/* FONTS */
/* ANIMATION */
/* GRAFIC */
/* My gridsize */
/* Space top of page */
/* $grid WITH px-unit */
/* RESPONSIVE */
/*
		@media (min-width: $respXlimitL){
			
		} 
		
		@media (min-width: $respXlimitS+1px) and (max-width: $respXlimitM) {
			
		}	
		
		@media (max-width: $respXlimitS) {
			
		}
		
		@media (max-width: $respXlimitXS) {
			
		}
		
*/
/* FUNCTION */
/* end DEFINITIONS */
/* MIXINS */
/* end MIXINS */
/* @include($attrib:'attrib', $value:value, $duration:duration[$hoverTransitionTime*?])*/
/*

/* This is not used (a Microsoft compability thing)*/
/* FONT */
@font-face {
  font-family: "journal";
  src: local("journal"), url("../font/journal-webfont.eot"), url("../font/journal-webfont.eot?#iefix") format("embedded-opentype"), url("../font/journal-webfont.woff2") format("woff2"), url("../font/journal-webfont.woff") format("woff"), url("../font/journal.ttf") format("truetype"), url("../font/journal-webfont.svg#journalregular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Segoe UI";
  src: local("Segoe UI"), url("../font/SEGOEUI.TTF") format("truetype");
  src: local("Segoe UI"), url("../font/segoeui-webfont.eot?#iefix") format("embedded-opentype"), url("../font/segoeui-webfont.woff") format("woff"), url("../font/SEGOEUI.TTF") format("truetype"), url("../font/segoeui-webfont.svg#segoeuiRegular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Segoe Script";
  src: local("Segoe Script"), url("../font/segoesc-webfont.eot?#iefix") format("embedded-opentype"), url("../font/segoesc-webfont.woff") format("woff"), url("../font/SEGOESC.TTF") format("truetype"), url("../font/segoesc-webfont.svg#segoescRegular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'segoe ui symbol';
  src: local("segoe ui symbol"), url("../font/seguisym-webfont.eot?#iefix") format("embedded-opentype"), url("../font/seguisym-webfont.woff") format("woff"), url("../font/SEGUISYM.TTF") format("truetype"), url("../font/seguisym-webfont.svg#seguisymRegular") format("svg");
  font-weight: normal;
  font-style: normal; }
/* end FONT */
/* FUNCTION SKAL SLETTES NÅR SITET KØRER NOGENLUND, som p i #topbar!
/* Chrome, Safari, Opera */
@-webkit-keyframes bouge {
  from {
    background-color: rgba(241, 208, 120, 0.5);
    left: 0px; }

  to {
    background-color: rgba(75, 44, 53, 0.5);
    left: 10px; } }
/* Standard syntax */
@keyframes bouge {
  from {
    background-color: rgba(241, 208, 120, 0.5);
    left: 0px; }

  to {
    background-color: rgba(75, 44, 53, 0.5);
    left: 10px; } }
/* 27/11/2015 */
#middle {
  position: relative;
  top: 193px; }
  #middle div.news {
    background: rgba(254, 241, 184, 0.5);
    font-family: "Segoe UI";
    padding: 5px;
    margin: 10px;
    line-height: 1.4em; }
    #middle div.news h6 {
      color: #fef1b8;
      color: rgba(254, 241, 184, 0.5);
      color: #cac57c;
      font-size: 2em;
      background: rgba(159, 62, 81, 0.5);
      background-image: -moz-radial-gradient(45px 45px 0deg, circle cover, rgba(159, 62, 81, 0) 0%, rgba(159, 62, 81, 0.5) 33%, rgba(159, 62, 81, 0.5) 67%, rgba(159, 62, 81, 0) 100%);
      background-image: -webkit-radial-gradient(45px 45px, circle cover, rgba(159, 62, 81, 0.5), rgba(159, 62, 81, 0.1));
      background-image: radial-gradient(45px 45px 0deg, circle cover, rgba(159, 62, 81, 0) 0%, rgba(159, 62, 81, 0.5) 33%, rgba(159, 62, 81, 0.5) 67%, rgba(159, 62, 81, 0) 100%);
      box-shadow: inset 10px 0px 20px rgba(254, 241, 184, 0.5), 10px 0px 20px rgba(254, 241, 184, 0.5);
      padding: 5px;
      margin: 10px;
      text-shadow: -1px -1px 1px rgba(33, 22, 21, 0.5);
      text-align: center; }
    #middle div.news > p:nth-child(2) {
      margin: 12px;
      padding: 5px 12px;
      white-space: pre; }
  #middle #news, #middle #newsMove {
    position: absolute;
    display: inline-block;
    top: -72px;
    /*-4*/
    left: 514px;
    margin: 0;
    padding: 0;
    width: 300px;
    max-width: 100%;
    z-index: 4;
    box-shadow: 1px 1px 3px rgba(33, 22, 21, 0.8), 2px 2px 4px rgba(255, 255, 0, 0.8); }

  #middle #info1 {
    position: absolute;
    top: -64.8px;
    /*-4*/
    left: 0px;
    margin: 0;
    padding: 0;
    width: 522px;
    height: 270px;
    max-width: 522px;
    z-index: 3; }
    #middle #info1 pre {
      margin: 0 0 0 69px;
      /* 61px 0 0 69px 20/08/2016*/ }
 
  #middle #info2 {
    position: absolute;
    top: 195px; //167.4 20-06-2021 - stort INFO...
    left: 10px; //189 20-06-2021 - stort INFO...
    margin: 0;
    padding: 0;
    width: 288px;
    height: 198px;
    max-width: 288px;
    z-index: 3; }
    #middle #info2 pre {
      margin: 0 0 0 72px;
      /* 37px 0 0 72px 20/80/2016*/ }

  #middle #header_imageX {
    position: absolute;
    top: 180px;
    left: 432px;
    padding: 0;
    margin: 0;
    width: 396px;
    height: 288px;
    max-width: 100%;
    display: inline-block;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1); }

/* STYLE */
#middle #news pre {
  color: #002300;
  text-align: left;
  font: normal normal 500 0.9em/1.3 "Segoe UI";
  text-shadow: 0 0 rgba(255, 255, 255, 0.2);
  z-index: 4; }
#middle #info1 pre, #middle #info2 pre {
  color: #002300;
  color: #ede4bf;
  color: #ede4bf;
  background-color: transparent;
  text-align: left;
  font: normal normal 500 0.9em/1.8 "Segoe UI";
  font: normal normal 500 14.4px/1.8 "Segoe UI";
  text-shadow: 0 0 rgba(255, 255, 255, 0.2);
  z-index: 4; }

#middle #info2 pre {
	line-height: 1.4em;
}
#middle #header_image {
  /*background: url('../images/IMG_Marie_Vergmann.png');*/
  /*background: url('../images_eksperimenter/DSC_0230_accueil.JPG');*/
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  z-index: 0; }

.bubble {
  border-radius: 50%;
  box-shadow: inset 30px 30px 75px rgba(255, 255, 255, 0.1), inset 0px 0px 15px rgba(255, 255, 255, 0.5), inset 0px 0px 55px rgba(255, 255, 255, 0.5), inset 3px 3px 5px rgba(255, 255, 255, 0.5), 0 0 50px rgba(255, 255, 255, 0.3);
  /* this puts a white glow all around the outside of the bubble to better contrast the edge */
  background: rgba(145, 114, 123, 0.4);
  /* makes our bubble slightly lighter in color than the background */
  position: relative;
  /* allows us to absolutely position the pseudo elements within the bubble */ }

.animBubbles {
  /*	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, $color1 0%, $color2 100%, $color3 95%);
  	background-image: -webkit-radial-gradient(45px 45px, circle cover, $color1, $color2);
  	background-image: radial-gradient(45px 45px 45deg, circle cover, $color1 0%, $color2 100%, $color3 95%);
  */
  animation-name: animBubbles;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: animBubbles;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: animBubbles;
  -moz-animation-duration: 10s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: animBubbles;
  -ms-animation-duration: 10s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear; }

.bubble:before {
  /* adds the white highlight on the top left of the bubble */
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 50%;
  top: 15px;
  left: 15px;
  border-radius: 75% 25%;
  box-shadow: inset 10px 10px 50px rgba(255, 255, 255, 0.6); }
  @media (max-width: 768px) {
    .bubble:before {
      width: 37.5%;
      height: 37.5%;
      top: 25px;
      left: 25px; } }
  @media (max-width: 640px) {
    .bubble:before {
      display: none; } }

#newsMove.bubble {
  border-radius: 50%;
  box-shadow: inset 30px 30px 75px rgba(255, 255, 255, 0.1), inset 0px 0px 15px rgba(255, 255, 255, 0.5), inset 0px 0px 55px rgba(255, 255, 255, 0.5), inset 3px 3px 5px rgba(255, 255, 255, 0.5), 0 0 50px rgba(255, 255, 255, 0.3);
  /* this puts a white glow all around the outside of the bubble to better contrast the edge */
  position: relative;
  /* allows us to absolutely position the pseudo elements within the bubble */ }

/* Create the animation blocks */
@keyframes animBubbles {
  from {
    transform: rotate(0deg);
    background: rgba(105, 74, 83, 0.4);
    /*	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, $color1 0%, $color2 95%, $color3 100%);
    	background-image: -webkit-radial-gradient(45px 45px, circle cover, $color1, $color2);
    	background-image: radial-gradient(45px 45px 45deg, circle cover, $color1 0%, $color2 95%, $color3 100%);	*/ }

  to {
    transform: rotate(360deg);
    background: rgba(155, 124, 133, 0.7);
    /*	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, $color2 100%, $color1 50%);
    	background-image: -webkit-radial-gradient(45px 45px, circle cover, $color2, $color1);
    	background-image: radial-gradient(45px 45px 45deg, circle cover, $color2 100%, $color1 50%);*/ } }
@-webkit-keyframes animBubbles {
  0% {
    transform: rotate(0deg);
    background: rgba(155, 124, 133, 0.6);
    box-shadow: inset 30px 30px 75px rgba(255, 255, 255, 0.1), inset 0px 0px 15px rgba(255, 255, 255, 0.5), inset 0px 0px 55px rgba(255, 255, 255, 0.5), inset 3px 3px 5px rgba(255, 255, 255, 0.5), 0 0 50px rgba(255, 255, 255, 0.3);
    /* this puts a white glow all around the outside of the bubble to better contrast the edge */ }

  50% {
    transform: rotate(180deg);
    background: rgba(112, 66, 79, 0.5);
    box-shadow: inset 10px 30px 75px rgba(255, 255, 255, 0.21), inset 5px 5px 15px rgba(255, 255, 255, 0.5), inset 10px 0px 55px rgba(255, 255, 255, 0.5), inset 3px 13px 5px rgba(255, 255, 255, 0.75), 0 0 50px rgba(0, 128, 0, 0.3);
    /* this puts a white glow all around the outside of the bubble to better contrast the edge */ }

  100% {
    transform: rotate(360deg);
    background: rgba(155, 124, 133, 0.6);
    box-shadow: inset 30px 30px 75px rgba(255, 255, 255, 0.1), inset 0px 0px 15px rgba(255, 255, 255, 0.5), inset 0px 0px 55px rgba(255, 255, 255, 0.5), inset 3px 3px 5px rgba(255, 255, 255, 0.5), 0 0 50px rgba(255, 255, 255, 0.3);
    /* this puts a white glow all around the outside of the bubble to better contrast the edge */ } }
@keyframes colChange {
  from {
    transform: rotate(360deg); }

  to {
    transform: rotate(0deg); } }
@-webkit-keyframes colChange {
  from {
    transform: rotate(360deg); }

  to {
    transform: rotate(0deg); } }
/*.animBubbles {
	$time:3s;
	animation-name: animBubbles; 
	animation-duration: $time;
	animation-iteration-count: infinite; 
	animation-timing-function: linear;
	//animation-direction: alternate;
	-webkit-animation-name: animBubbles;
	-webkit-animation-duration: $time;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	//-webkit-animation-direction: alternate;
	-moz-animation-name: animBubbles;
	-moz-animation-duration: $time;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	//-moz-animation-direction: alternate;
	-ms-animation-name: animBubbles;
	-ms-animation-duration: $time;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;
	//-ms-animation-direction: alternate;
	}*/
.colChange {
  animation-name: colChange;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
  -webkit-animation-name: colChange;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: alternate;
  -moz-animation-name: colChange;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -moz-animation-direction: alternate;
  -ms-animation-name: colChange;
  -ms-animation-duration: 3s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -ms-animation-direction: alternate; }

  	.calendar {
		position: absolute;
		height: auto;
		width: 175px;
/*width: auto; ONLY PREPROD.  */
		overflow-x: auto;
		overflow-y: hidden;
		z-index: 1;
	}

	.calendar table {
    	margin-left: 8px;
    	margin-right: 6px;
	}	
	.calendar td {
		border-collapse: collapse;
		padding: 0 3px;
		text-align:center;
		font-size: 11px;
	}
.calendar td:hover {
	cursor: pointer;
}
	.calendar td span, #info2 pre#help span {	
	    border-radius: 0.5em;
    	background-color: #777;
    	color: #f3ecd3;
    	padding: 0 2px;
    	border: 1px solid black;
    	margin: -1px;
    }
    #info2 pre#help span.yellow {
	    color: #00f;
	    font-weight: 800;
	    background-color: #ff0;
	}
    #info2 pre#help span.red {
		color: #000;
	    font-weight: 800;
	    background-color: #f00;
	}	
    .calendar td span.calendarTaken, #info2 pre#help div span.green {
    	border-radius: 0px;
    	background-color: #090;
    	color: white;
    	padding: 0 2px;
    	border: 2px solid white;
    	margin: -2px;
    	font-weight: 800;
    	z-index: 2;
     }
     td span.held , div#info2.bubblex pre span.help pre#help div span.held {
     	position: absolute;
	    margin: -2px 0 0 23px;
	    border-radius: 50%;
	    font-size: 10px;
	    height: 10px;
	    width: 6px;
	    background-color: green;
	    border: 2px solid white;
	    vertical-align: top;
	    opacity: 0.5;
	    z-index: 4;
    }
	td span.held {
		cursor: default;
	}
    td span.held span, div#info2.bubblex pre span.help pre#help div span.held span{
    	position: absolute;   
    	color:#fff;
    	font-weight:800;
    	background-color: #f000;
    	border: 1px solid #0000;
    	margin: -6px 0px 0px -6px;
    }
    
    
    td span.held2:has(>div) {
    	position: absolute;
    	width: 0px;
    	height: 0px;
    	pointer-events: none;
    }    
    
    td span.held2 > div {
	    position: relative;
	    top: -2px;
	    width: 12px;
	    border-radius: 50%;
	    background-color: #9c7c56aa; # /*563226bf;*/
	    color: #f3ecd3;
	    padding: 2px 0;
	    border: 0px solid #b59560;
	    font-size: 8px;
	    left: 23px;
	    height: auto;
	    line-height: 1;
	    /*opacity: 0.8;*/
    }
    
	#calendarMenuPoint {
 		position: relative;
     	display: block;
 		width: 175px;
   		height: auto;
   		//margin: 0px 0 0 0px;
		font-size: 0.7em;
		overflow-x: clip;
		z-index:2;	
	}
	#calendarMenuPoint:hover {
		cursor: pointer;
		//color: cornflowerblue;
		font-style: italic;
		//color: #ede4bf;
		color: #f4eed7;
	}
	#calendarMenu {
		position: relative;
		width:auto;
		min-height: 10px;
		height:auto;
		display:none;
/*		left: 130px;*/
		background-color:#333;
		color:#fff;
		font-size: 1em;
		border: 1px solid white;
		margin: -1px; // compensate the border!
		border-radius:0;
		padding: 3px;
		z-index:4;
	}

	.calendar::-webkit-scrollbar {
    	width: 12px;
	}
	.calendar::-webkit-scrollbar-thumb {
	    -webkit-border-radius: 10px;
	    border-radius: 10px;
 	    background: #f1d078ff; 
	    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 50%);
	}
	.calendar::-webkit-scrollbar-track {
	    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
	    -webkit-border-radius: 10px;
	    border-radius: 10px;
	    //background-color: #f1d078ff;
	}
	td.calendarTaken {
		background-color:#fff3;
		color:#1b1;
		border-radius: 5px;
		
	}
	div.point {
		position: relative;
 		 display: block;
		 height: 0px;
		 width: 0px;
	}
	
	div.infoNumber {
		position: absolute;
		height: auto;
		width: auto;
		overflow: visible;
		background-color: #fff;
		padding: 1px 3px;
		color: #333;
		border: 1px solid #333; 
		z-index: 5;	
	}
	
/* HELP */
/*div#info {
	position:absolute;
	font: normal normal 900 0.8em arial;
	box-shadow: rgb(204 255 204 / 45%) 0px 0px 5px 3px;
	top: 0px;
	left: -100px;
	background:blue;
    font: normal normal 900 0.8em arial;
	color: white;
	white-space: nowrap;
	border-radius: 10px;
    margin: 0px 0px;
	padding: 1px 7px;
    border: solid 2px white;
	z-index: 2;
    opacity: 0.7;
	touch-action: manipulation;
	transition: opacity 0.25s linear;
}

div#info:hover {
    opacity: 1;
    transition: opacity 0.25s linear;
	cursor: pointer;
}
*/

span.help {
	/**/position: -webkit-sticky;
	position: sticky;
	top:0;
	left:0;
	z-index:5;
	touch-action: manipulation;
/*z-index:4;
position: absolute;
top:100px;
left:100px;
	height:300px;
	box-shadow: 0px 0px 0 1px #e8e8e8;
	overflow: auto;
	border-collapse: collapse;*/
}

span.info1 {
    font-size: 8px;
    vertical-align: super;
    padding: 0 2px;
    background-color: blue;
    color: white;
    /* font-weight: bold; */
    border-radius: 30%;
    border: 1px solid white;
    margin-left: 2px;
	cursor: pointer;
}

p#question {
    position: absolute;
    left: 7px;
    display: inline-block;
    border-radius: 50%;
    width: 16.2px;
    height: 16.2px;
    margin: 2px 3px;
    border: solid 2px white;
	z-index: 4;

    background-color: blue;
//    cursor: pointer;
    color: white;
    text-align: center;
    vertical-align: middle;
    font: normal normal 900 0.8em arial;
	box-shadow: 0px 0px 5px 3px #ccffcc;
    opacity: 0.5;
//display:none;
	transition: opacity 0.25s linear;
}

p#question:hover {
	cursor: pointer;
    opacity: 1;
    transition: opacity 0.25s linear;
}

pre#help:hover {
	cursor: pointer;
}

#middle #info2 pre#help {
    background-color: rgba(240, 255, 240, 0.9);
    color: black;
    text-align: left;
    vertical-align: middle;
    font: normal normal 500 10.5px/1.3 "Segoe UI";
    border: solid 0 rgba(0, 0, 0, 0.1);
    border-width: 0 1px 1px 0;
	box-shadow: 5px 5px 15px #447744,
		7px 7px 5px -3px #225522;

    z-index: 4;
    position: absolute;
    top: -160px;
	top: -30px;
    left: 17px;
    border-radius: 4px;
    padding: 4px;
    margin: 6px;
	height: auto;
	height: 200px;
	width: 415px;
	overflow: hidden;
	overflow-y: scroll;
	transition: opacity 0.5s linear;
}

.data_title {
	position: absolute;
    text-align: left;
    padding: 4px;	
	border: 1px solid white;
	font: 12px/16px Tahoma, Verdana, Arial, sans-serif;
	color: white;
	background: #000;
	left:100px;
	top: 0;
}