@charset "UTF-8";


:root {
	
	--cssversion:", CSS-version 2.5";
}

.full-page-fill, .full-page-fill *
{
	clip:auto !important;
	height:100% !important;

}

.fixed
{
	position:fixed !important;
}

.version::after {
    content: var(--cssversion);
	display:inline;
	width:;
	border:0px solid red;
	font-size: 13px;
}
.version p{
	display:inline;
	
}


.icon-inner-fill 
{
	
	background-image:url('included_files/hotspot-bg.png');
	background-position: 50% 50%;
	background-repeat:no-repeat;
	background-size:50% 50%;
}

body
{
	 font-family: var(--base-body-font) !important;
}

/* *************** STYLED LISTS FOR SUMMARY AND CHECKLIST PAGES ************** */

/* **** Numbered lists  ****  */
.styled-list ol {
  /*max-width: 350px;*/
  counter-reset: list-counter;
  list-style: none;
  padding-left: 25px;
}
.styled-list ol li {
  /*margin: 0 0 0.5rem 0;*/
  counter-increment: list-counter;
  position: relative;
  list-style: none!important;
  margin-left:0px !important;
	  
}
.styled-list ol li::before {
  content: counter(list-counter);
  color: var(--list-item-color);/*#fcd000;*/
  font-size: 0.9rem;
  font-weight: bold;
  position: absolute;
  --size: 21px;
  left: calc(-1 * var(--size) - 0px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0px;
  transform: rotate(0deg);
  background: var(--list-item-bgcolor);
  border-radius: 50%;
  text-align: center;
  box-shadow: 0px 0px 0 #999;
}



.styled-list.small-list ol li::before 
{
  font-size: 0.9rem;
  --size: 23px;
   top: 0px;
}


.styled-list ol li::marker 
{
	opacity:0;
}

.pop-up-2.styled-list ol li::before {
	background: var(--list-item-in-pop-up-bgcolor);
	color: var(--list-item-in-pop-up-color);
}



.styled-list.big-list ol li::before {
  
  color: var(--list-item-in-pop-up-color);/*#fcd000;*/
   background: var(--list-item-in-pop-up-bgcolor);
   font-size: 1.2rem;
  --size: 27px;
   top: -2px;
  
}


.styled-list.big-list ol li{
  
 padding-left:18px !important;
  padding-left: 1.1em !important;
}



/* **** Unordered list ****  */

.styled-list  ul{
	list-style: none;
	padding-left: 0;
}

.styled-list ul li {
	padding-left: 1.1em !important;
	/*margin-bottom: 0.5em !important;*/
	list-style-type: none !important;
	list-style-image: none !important;
	padding-left: 20px !important;
}

.styled-list  ul li::after {
	content: '';
	position: absolute;
	left: -12px;
	top: -2px;
	 --size: 25px;
	width: var(--size);
  height: var(--size);
	background-repeat: no-repeat;
	background-image: var(--bullet-list-image);
	
	
}


.styled-list  ul li::before {
	content: '';
	position: absolute;
	 left: -8px;
    top: 2px;
	 --size: 17px;
	width: var(--size);
	height: var(--size);
	background-color:var(--list-item-color);
	/*background-color:red;*/
	opacity:var(--list-item-bg-opacity);
	border-radius:50%;		
}


.pop-up-2.styled-list ul li::after {
	background-image: var(--bullet-list-image-inverted);
	
}
.pop-up-2.styled-list ul li::before 
{
	background-color:var(--list-item-in-pop-up-color);
}
.styled-list.big-list ul li
{
	/*padding-left: 45px !important;*/
	padding-left: 27px !important;
	
	
}

.styled-list.big-list ul li
{
	/*padding-left: 45px !important;*/
	padding-left: 32px !important;
}

.styled-list.big-list ul li::after
{
	
		/*border: solid .8em var(--list-item-in-pop-up-color);*/
		top: -5px;
		--size: 33px;
		width: var(--size);
		left: -19px;
		height: var(--size);
		background-image: var(--bullet-list-image-inverted);
		
}
.styled-list.big-list ul li::before
{
	
		/*border: solid .8em var(--list-item-in-pop-up-color);*/
		top:-1px;
		left: -15px;
		--size: 25px;
		width: var(--size);
		height: var(--size);
		background-color:var(--list-item-in-pop-up-color);
		
	
}

/* ----  General changes for the big version --- */


.styled-list.big-list td>div
{
	overflow: visible !important;
}


/* END OF STYLED LISTS */

/* INFO BOX */
.info-box, .info-box svg path
{
	background-color:var(--info-box-bg) !important;;
	fill:var(--info-box-bg) !important;
	border-radius:var(--pop-up-border-radius);
}

.info-box-2, .info-box-2 svg path
{
	background-color:var(--info-box-2-bg) !important;;
	fill:var(--info-box-2-bg) !important;
	border-radius:var(--pop-up-border-radius);
}

.info-box, .info-box-2
{
	border-radius:var(--pop-up-border-radius);
}

/* *************** ICONS ************** */
/* */



.parent {
    display: flex;
    justify-content: space-between;
}

/*--- IN USE? ---*/				   
span.circle {
  height: 20px;
  width: 20px;
  border-radius: 100%;
  border: 1px solid #eee;
  background:#ddd;   
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

.page-bg, .page-bg path
{
	background-color:var(--test-bg) !important;;
	fill:var(--test-bg) !important;
}

.drag-text
{
	border-radius:var(--pop-up-border-radius);
	border: 2px solid var(--base-color) !important;
	-webkit-box-shadow: 2px 5px 5px -3px rgba(0,0,0,0.41); 
	box-shadow: 2px 5px 5px -3px rgba(0,0,0,0.41);
}
/* *************** SLIDERS ************** */
/* */
#slider-dot-navigation
{	
	display: flex;
    justify-content: center;/*space-between;*/
	text-align:center;
	margin-top:16px;
	height: 20px;
}

.slider-dot 
{
    --size: 20px;
    background-color: var(--slider-dot-bg); /*var(--button-bgcolor);*/
	height: var(--size);
    width: var(--size);
    color: var(--button-color);
    border: 1px solid white;
    border-radius: 100%;
    margin: 1px;
	cursor:pointer;
	aspect-ratio:1/1;
	max-width: var(--size);
	margin-left: 5px;
	margin-right: 5px;
	padding-right:0px;
	
}

.slider-dot.active 
{
	
	background-color: var(--slider-dot-bg-active);
}

#sliderarea
{
	border:0px solid red;
}

.slideobj{
	position:relative !important;
	top:0px !important;
	left:0px !important;
	display: inline-block;
	clip:auto;
	vertical-align:top;
	width: 100% !important;
}

.slideobj img{
	height:100% !important;
}

.image-slide-text
{
	display:inline-block;
	border:0px solid green;
	width: 100%;
    z-index: inherit;
    position: absolute;
	text-align:center;
	bottom:51px;
	color:var(--text-on-slide-image-color);
	white-space: break-spaces;
	
}


.image-slide-text p
{
	text-align:center !important;
	margin-block-start: 10px;
    margin-block-end: 10px;
	margin-left: 15px;
    margin-right: 15px;
}

.image-slide-text span
{
	color:var(--text-on-slide-image-color) !important;
}

.slide-item{
	position:relative !important;
	top:0px !important;
	left:0px !important;
	display: inline-block;
	margin-right:5px;
	margin-top: 4px;
}

.slide-item-vertical{
	display: block;
}

.slide-attach-prev-bottom
{
	margin-top:-1px !important;
	margin-right:0px;
	text-align:center;
}

.scroll-wrapper-vertical {
    
    overflow-y: scroll;
	overflow-x: hide;
    height: 100%;
}


.scroll-wrapper
{
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
	margin-left: 4px;
	margin-right: 4px;
}

.scroll-wrapper-vertical {
    
    overflow-y: scroll !important;
	overflow-x: hidden !important;
    height: 100%;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 4px;
	margin-bottom: 4px;
}



.scroll-wrapper-vertical .slide-item
{
	display: block;
	margin-top: 5px;
}

.scroll-wrapper-overlay-btns
{
	margin-left: 0px;
	margin-right: 0px;
}

.slider-touch-area
{
	width:100%;
	height:100%;
	position:absolute;
	z-index:inherit;
	top:0px;
	
}

.image-slider-btn
{
	position:absolute;
	height:100%;
	width:43px;
	border:0px solid green;
	opacity:1;
	background:transparent;
	cursor:pointer;
	z-index:250;
	
}

#scroll-left.image-slider-btn
{
	left:-1px;
	
	background-image:url("included_files/img/swipe-gradient.png");
	background-repeat: repeat-y;
	background-position:top center;
	transform: rotate(180deg);
}

#scroll-right.image-slider-btn
{
	right:0px;
	background-image:url("included_files/img/swipe-gradient.png");
	background-repeat: repeat-y;
	background-position:top center;
}


.slider-btn
{
	position:absolute;
	height:90%;
	width:43px;
	border:0px solid green;
	opacity:1;
	cursor:pointer;
	z-index:250;
	margin-left: 4px;
	margin-right: 4px;
    margin-top: 4px;
	background:var(--icon-slider-btn-bg);
	vertical-align:middle;
	padding: 0px;
	-webkit-transform: translate3d(0,0,0);
}


.slider-btn:hover
{
	
	/*opacity:0.9;*/
}

#slider-btns 
{
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}	

#scroll-left
{
	left:0px;
	background: rgb(255,255,255);
    background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 36%, rgba(255,255,255,1) 100%);
	padding-right: 8px;
	display:none;
}
#scroll-right
{
	right:0px;
	background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 36%, rgba(255,255,255,1) 100%);
	padding-left: 8px;
}

#scroll-up
{
	top:0px;
	height:43px;
	width:100%;
	display:none;
	background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 36%, rgba(255,255,255,1) 100%);
	padding-bottom: 8px;
}

#scroll-down
{
	bottom:0px;
	height:43px;
	width:100%;
	display:none;
	background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 36%, rgba(255,255,255,1) 100%);
	padding-top: 8px;
}

.slider-vertical #scroll-left, .slider-vertical #scroll-right
{
	display:none;
}

.slider-vertical #scroll-up, .slider-vertical #scroll-down
{
	
	margin-left: 0px;
    margin-top: 0px;
}

.slider-vertical #scroll-down
{
	display:block;
}

.scroll-wrapper-no-buttons #slider-btns 
{
	display:none;
}
/* *************** END SLIDERS ************** */
.link-to-content 
{
	z-index:500 !important;
}

.link-to-content a
{
	opacity:0 !important;
	pointer-events:none !important;
}


.visual-feedback
{
	border:1px solid red;
	position:absolute;
	width:400px;
}

.visual-feedback-icon
{
	position:absolute;
	width:25px;
	height:25px;
}

#initClickDiv
{
	background:url('included_files/init-click-image.jpg') no-repeat 0 0 !important;
	background-size: 100% 100% !important;
	/*outline: none !important;*/
	width:100% !important;	
	height:100% !important;
	margin:0 !important;
	left: 0 !important;
	top: 0 !important;

}

#initClickBtn
{
	margin-top: 25% !important;
}

body.isInAccMode 
{
	
}



input[type="radio"], input[type="checkbox"]
{
	width:20px !important;
	height:20px !important;
	margin-bottom:1px;
}

input[type="radio"]::before
{
	content:""
	
}

input[type="radio"]
{
		accent-color: var(--input-outline-color);
		
}



input[type="checkbox"]
{
	outline: 0px solid var(--input-outline-color);
	accent-color: var(--input-bgcolor);
	
}

input:checked
{
	outline-width:0px;
}


/* Here you set colors for icons */

.icon-default
{
	fill:var(--icon-default-color) !important;
}

.icon-primary
{
	fill:var(--icon-primary-btn-color) !important;
}



.icon-inverted
{
	
	fill:var(--icon-inverted-color) !important;
}

.icon-deactivated
{
	fill:var(--icon-deactivated-color) !important;
	fill-opacity:var(--icon-deactivated-opacity);
	pointer-events:none !important;
}


.icon-deactivated .icon-inverted
{
	
	fill:var(--icon-inverted-deactivated-color) !important;
	fill-opacity:var(--icon-inverted-deactivated-opacity);
}

.icon-secondary
{
	fill:var(--icon-secondary-btn-color) !important;
}

.icon-inverted.icon-secondary
{
	
	fill:var(--icon-secondary-inverted-btn-color) !important;
}

.icon-deactivated .icon-inverted.icon-secondary
{
	
	fill:var(--icon-secondary-inverted-btn-deactivated-color) !important;
	fill-opacity:var(--icon-secondary-inverted-btn-deactivated-opacity);
}

.icon-on-image
{
	fill:var(--icon-on-image) !important;
}

.icon-on-image .icon-inverted
{
	fill:var(--icon-on-image-inverted) !important;
}

.icon-default.icon-in-pop-up
{
	fill:var(--icon-in-pop-up-color) !important;
}

.pop-up-close .icon-default
{
	fill:var(--icon-in-pop-up-color) !important;
}

/**** For global icons  ******/
.icon-global .icon-default
{
	fill:var(--global-icon-default-color) !important;
}
.icon-global.icon-inverted .icon-default
{
	fill:var(--global-icon-inverted-color) !important;
}

.icon-global.icon-deactivated .icon-default
{
	fill:var(--global-icon-deactivated-color) !important;
	fill-opacity:var(--global-icon-deactivated-opacity);
}





/* if circle icon is used */

.circle-icons.icon-global
{
	background-color:var(--icon-circle-bgcolor) !important;
	border-radius:50%;
	
}

.circle-icons.icon-global .icon-default
{
	fill:var(--icon-circle-color)  !important;
}


.icon-deactivated.circle-icons.icon-global
{
	background-color:var(--icon-circle-deactivated-bgcolor) !important;
	
}

.icon-deactivated.circle-icons.icon-global .icon-default
{
	fill:var(--icon-circle-deactivated-color)  !important;
}

/* Hotspot icons*/
.icon-hotspot
{
	fill:var(--icon-hotspot-color) !important;
	background-image:url('included_files/hotspot-bg.png');
	background-position: 50% 50%;
	background-repeat:no-repeat;
	background-size:50% 50%;
	transition: scale 0.2s;
}

a:active .icon-hotspot
{
	fill:var(--icon-hotspot-clicked-color) !important;
	background-image:url('included_files/hotspot-bg-down.png');
}
.icon-hotspot-visited
{
	fill:var(--icon-hotspot-visited-color) !important;
	background-image:url('included_files/hotspot-bg-visited.png');
}

.icon-hotspot:hover, .icon-hotspot.hover
{
	fill:var(--icon-hotspot-hover-color) !important;
	background-image:url('included_files/hotspot-bg-hover.png');
	scale: 1.08;
    
}



/*.icon-hotspot-over
{
	fill:var(--icon-hotspot-visited-color)  !important;
	background-image:url('included_files/hotspot-bg-hover.png');
}*/

.icon-hotspot-selected
{
	fill:var(--icon-hotspot-selected-color) !important;
	background-image:url('included_files/hotspot-bg-selected.png');
}


/*.icon-hotspot-bg {
    background: #ffffff;
    position: absolute;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
}*/


.icon-red /*wrong?*/
{
	fill:var(--icon-red-color) !important;
}
.icon-green /*correct?*/
{
	fill:var(--icon-green-color)  !important;
}

.icon-done-check /*done checkmark*/
{
	fill:var(--icon-done-color)  !important;
	
}

.icon-deactivated a, .icon-deactivated svg
{
	pointer-events:inherit !important;
	fill:inherit !important;
}

.icon-image-slider-arrow
{
	fill:var(--icon-image-slider-arrow-color)  !important;
}

.pop-up-close .icon-on-video
{
	fill: var(--icon-on-video-color) !important;
	background-color: var(--icon-on-video-bgcolor); 
}
.nav-button
{
	/*background-color:rgba(255, 255, 255, 0.6) !important;*/
	
}

.icon-inner-fill-white 
{
     background-image:url('included_files/icon-bg-white.png'); 
    background-position: 50% 50%;
    background-repeat:no-repeat;
    background-size:50% 50%;
}

.icon-inner-fill-black 
{
     background-image:url('included_files/icon-bg-black.png'); 
    background-position: 50% 50%;
    background-repeat:no-repeat;
    background-size:50% 50%;
}
.icon-wrapper
{
	/*background-color:rgba(255, 255, 255, 0.6) !important;
	border-radius:50%;*/
	clip:auto !important;
}

.done-icon-wrapper
{
	position:absolute;
	display: flex;
    width: 100%;
    align-items: center;
    height: 100%;	
}

.done-icon-wrapper .icon-wrapper
{
	top: auto !important;
    left: auto !important;
    margin-right: 12px;
    margin-left: 12px;
}

.done-icon-wrapper-left
{
	
	/*left:12px !important;*/
	justify-content: flex-start;
}

.done-icon-wrapper-right
{
	/*right:45px !important;*/
	justify-content: flex-end;
}

.circle-icons .icon-container
{
	padding:3px;
}

#iconglobalspeaker
{
	/*z-index:250 !important;  Fix for the icon to be placed above the audio player */
}

/* *************** END ICONS ************** */




/* *************** CSS FOR FOCUS ************** */

/* This controls the "highligt" around icons, on focus when tabbing on the keyboard . You need to change on all places the color is set (8 places) 
.isInAccMode .icon-wrapper:focus-within,.isInAccMode .icon-wrapper a:focus-visible  {
  border-color: var(--icon-focus-highlight-color);
    outline: var(--icon-focus-highlight-color);
    -webkit-box-shadow: inset 0 0 6px 1px rgb(var(--icon-focus-highlight-color-rgb)), 0 0 6px 1px rgb(var(--icon-focus-highlight-color-rgb) / 80%);
    -moz-box-shadow: inset 0 0 6px 1px rgba(var(--icon-focus-highlight-color-rgb)), 0 0 6px 1px rgb(var(--icon-focus-highlight-color-rgb)/ 80%);
	box-shadow: inset 0 0 6px 1px rgb(var(--icon-focus-highlight-color-rgb)), 0 0 6px 1px rgb(var(--icon-focus-highlight-color-rgb)/ 80%);
}
*/
.isInAccMode-bup *:focus,
.isInAccMode-bup a:focus img,
.isInAccMode-bup button:focus svg,
.isInAccMode-bup button:focus img,
.isInAccMode-bup .icon-wrapper a:focus-visible,
.isInAccMode-bup .icon-wrapper:focus-within,
.isInAccMode-bup .lex-accordian a:focus .menu-text-wrapper,
.isInAccMode-bup .lex-accordian a:focus .dict-text  /**/
{
	outline:var(--focus-highlight-width) var(--focus-highlight-color) var(--focus-highlight-style)  !important;
	box-shadow:none !important;
	-moz-box-shadow:none !important;
	-webkit-box-shadow:none !important;
	outline-offset: 2px;
	
}

.isInAccMode-bup .lex-accordian a:focus img,
.isInAccMode-bup .lex-accordian a:focus
{
	outline:none !important;
}

*:focus-visible,
a:focus-visible img,
a:focus-visible svg,
button:focus-visible svg,
button:focus-visible img,
.icon-wrapper a:focus-visible,
.icon-wrapper:focus-within,
.lex-accordian a:focus-visible .menu-text-wrapper,
.lex-accordian a:focus-visible .dict-text  /**/
{
	outline:var(--focus-highlight-width) var(--focus-highlight-color) var(--focus-highlight-style)  !important;
	box-shadow:none !important;
	-moz-box-shadow:none !important;
	-webkit-box-shadow:none !important;
	outline-offset: 2px;
	
}

.lex-accordian a:focus-visible img,
.lex-accordian a:focus, .icon-wrapper:focus, .custom-lex-accordian:focus, .lex-button button:focus, .lex-button:focus, .slider-btn:focus-visible svg
{
	outline:none !important;
}

.link-to-content a:focus 
{
	opacity:1 !important;
	background-color:white !important;
	display:block  !important;
	pointer-events:auto !important;
}


.link-to-content a:focus span
{
	
	color:var(--link-to-content-textcolor) !important;
	
}


/* This is for removing the focus outline on text divs, when they get focus */
div[id*='text']:focus, div[id*='shape']:focus, div.custom-lex-accordian:focus, div[id*='video']:focus, div[id*='audio']:focus
{
	outline:none;
}

/* for removing 2 outline boxes on :focus-visible, on hotspots */
.eva-hover{
	display:block !important;
}


/* *************** END FOCUS CSS ************** */


.header-line path
{
	/*Går att påverka linjesfärg under headern*/
	/*stroke: blue !important;*/
}

.header-bg path, .global-fades path
{
	/*Går att påverka headerns bakgrundsfärg*/
	
   /*fill: #dedede !important;*/
}



/* ------------- Help css for adding on elements ------------------*/

/* Rounded corners on text-boxes */

.rounded-corner-5px , .rounded-corner-5px img
{
	border-radius:5px;
	/*padding:20px;*/
}



.rounded-corner-5px , .rounded-corner-5px img, .rounded-corner-5px svg
{
	border-radius:5px !important;
	/*padding:20px;*/
}

.rounded-corner-10px , .rounded-corner-10px img, .rounded-corner-10px svg
{
	border-radius:10px;
	/*padding:20px;*/
}

.rounded-corner-20px , .rounded-corner-20px img, .rounded-corner-20px svg
{
	border-radius:20px;
	/*padding:20px;*/
}

.rounded-corner-20 , .rounded-corner-20 img, .rounded-corner-20 svg
{
	border-radius:20%;
}

.rounded-corner-50 , .rounded-corner-50 img, .rounded-corner-50 svg
{
	border-radius:50%;
}

.rounded-corner-100 , .rounded-corner-100 img, .rounded-corner-100 svg
{
	border-radius:100%;
}
.text-on-image-btn
{
	background-color:var(--text-on-image-btn-bg) !important;
	font-family: var(--button-font-family);
}

/* Black and wihte text-boxes with opacity */
.dark-pop-up, .dark-pop-up svg path
{
 	background-color:rgba(0, 0, 0, 0.9) !important;
	fill:rgba(0, 0, 0, 0.9) !important;
}

.black-90, .black-90 svg path
{
 	background-color:rgba(0, 0, 0, 0.9) !important;
	fill:rgba(0, 0, 0, 0.9) !important;
}

.black-80, .black-80 svg path
{
 	background-color:rgba(0, 0, 0, 0.8) !important;
	fill:rgba(0, 0, 0, 0.8) !important;
}

.black-60, .black-60 svg path
{
 	background-color:rgba(0, 0, 0, 0.6) !important;
	fill:rgba(0, 0, 0, 0.6) !important;
}
.black-50, .black-60 svg path
{
 	background-color:rgba(0, 0, 0, 0.5) !important;
	fill:rgba(0, 0, 0, 0.5) !important;
}

.black-99, .black-99 svg path
{
 	background-color:rgba(0, 0, 0, 0.99) !important;
	fill:rgba(0, 0, 0, 0.99) !important;
}


.white-90, .white-90 svg path
{
 	background-color:rgba(255, 255, 255, 0.9) !important;
	fill:rgba(255, 255, 255, 0.9) !important;
}

.white-80, .white-80 svg path
{
 	background-color:rgba(255, 255, 255, 0.8) !important;
	fill:rgba(255, 255, 255, 0.8) !important;
}

.white-60, .white-60 svg path
{
 	background-color:rgba(255, 255, 255, 0.6) !important;
	fill:rgba(255, 255, 255, 0.6) !important;
}

.white-50, .white-50 svg path
{
 	background-color:rgba(255, 255, 255, 0.5) !important;
	fill:rgba(255, 255, 255, 0.5) !important;
}
/* makes a text-box circle or oval depending on form i lectora*/
.round-text
{
	border-radius:50%;
}

.round-text p, .round-text div  
{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Remove bottom padding on text objects with margin, to reduce size when needed */
.remove-bottom-padding tbody tr td {
    padding-bottom: 0px !important;
}

/* Make text centered in object. */
.center, .center table td div 
{  
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Makes images and images in buttons scale/grow on hover*/

.scale-text-on-hover button div /*svg pattern image*/
{
	transition: 0.1s all ease-in-out;
	transform-origin: center;
}

.scale-text-on-hover:hover button div
{
	transform: scale(1.05);
	/*cursor: pointer;*/
}

.scale-on-hover
{
	/*clip:revert !important;*/
}

.scale-on-hover img, .scale-on-hover button /*svg pattern image*/
{
	transition: 0.5s all ease-in-out;
	transform-origin: center;
	/*cursor: pointer;*/
}
.scale-on-hover:hover img, .scale-on-hover:hover button /*svg  pattern image*/, .scale-on-hover.scale-it img
{
	transform: scale(1.2);
	/*cursor: pointer;*/
}



.scale-it
{
	
	transform: scale(1.2);
	
}

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important;  /* 2 */
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            /* 3 */

}

/*.scale-on-hover.scale-it img
{
	transform: scale(1.2);
	
}*/

/* for titles on menu pages  */
.menu-title
{ 
	background-color: var(--menu-title-bg);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

/* Makes headings that have set H-tags as uppercase, if changing "none" to "uppercase"*/

h1
{
	text-transform: var(--h1-text-transform) !important;
}

h2
{
	text-transform: var(--h2-text-transform)  !important;
}




.z-100{
z-index: 100 !important;
}

.z-500{
z-index: 500 !important;
}


/************ NYA POP-UPPER för dynamiska ikonknappar*******************/

/* Fix för online*/
.pop-up-new>div {
 background-color: inherit !important;
}



/* CSS FÖR INKONERNA SOM FLYTTAS DYNAMISKT*/

div.pop-up-icons-wrapper
{
 position:absolute;
 width:90px;
 border:0px solid red;
 right:0px;
 top:10px;
 text-align: right;
 padding-right: 5px !important;	
 background-color:transparent !important;
}


div.pop-up-icons-container, div.minimize-icons-container
{
 position:absolute;
 width:;
 border:0px solid red;
 right:3px;
 top:3px;
 text-align: right;
 padding-right: ;	
 background-color:transparent !important;
 margin-right: 0px;
 pointer-events: auto !important;
 z-index:500 !important;
}


.icon-wrapper.tiny-icon

{
	width: 25px !important;
	height: 25px !important;
	margin:5px;
}


.pop-up-icon
{
	/*width:40px;
	height:40px;
	display:inline-block;*/
	border:0px solid green;
}



.pop-up-close, .pop-up-speaker, .pop-up-close img, .pop-up-speaker img, .text-minimize
{
	position: relative !important;
	left: 0px !important;
	top: 0px !important;
}

.pop-up-close, .pop-up-speaker 
{
	z-index:500;
}


/* HÄR ANGER DU BAKGRUNDSFÄRGEN FÖR POP-UPS*/
/* In use?*/
.pop-up-new 
{
	
	background-color:#ccf1fd !important;
	padding-top:40px;
	z-index: 500 !important;
}

.pop-up-slide
{
	background-color:var(--pop-up-bg) !important;
	
	/*z-index: 500 !important;*/
	border-radius:var(--pop-up-border-radius);
}

.pop-up-2
{
	
	background-color:var(--pop-up-bg) !important;
	
	z-index: 500 !important;
	border-radius:var(--pop-up-border-radius);
}


.pop-up-2 span{
	color:var(--pop-up-text-color) !important;
	
}

.pop-up-2>div {
	/*background-color: inherit !important;*/
}

.pop-up-bg
{
	clip:auto !important;
}


.pop-up-content
{	
	z-index: 550 !important;
	color:var(--pop-up-text-color) !important;

}

.pop-up-content span
{
	color:var(--pop-up-text-color) !important;
}

/*Bullet list should get the sam color as pop-up text */
/*----------------------------------*/
/* Unordered Lists*/

.pop-up-2:not(.styled-list) ul, .pop-up-content:not(.styled-list) ul  
{
	list-style: disc !important; 
   /*list-style-position: inside !important; */
}

.pop-up-2:not(.styled-list) ul li, .pop-up-content:not(.styled-list) ul li 
{
	list-style-image:none !important;
	margin-left:28px !important;
	padding-left:0px !important;  
}

.pop-up-2:not(.styled-list) ul > li::marker, .pop-up-content:not(.styled-list) ul > li::marker {
	color:var(--pop-up-text-color) !important;
	/*color:white !important; REMOVE*/
	font-size: 1.5rem;
}
/* Ordered Lists*/
.pop-up-2:not(.styled-list) ol > li::marker, .pop-up-content:not(.styled-list) ol > li::marker {
  /*font-size: 1rem*/
}

.pop-up-2:not(.styled-list) ol li, .pop-up-content:not(.styled-list) ol li 
{
	color:var(--pop-up-text-color) !important;
	/*color:white !important; REMOVE*/
}
/*END Bullet list */

div.done-icon-container
{
    position: absolute;
    right: 0px;
    height: 100%;
    width: 45px;
	margin-right: 5px;
}

div.done-icon-container .done-icon .icon-wrapper
{
    top: 50%  !important;
    left: 50%  !important;
    transform: translate(-50%, -50%);
}

.test-question-feedback.correct
{
	background-color: var(--icon-green-color) !important;
	
}

.test-question-feedback.wrong
{
	background-color: var(--icon-red-color)!important;
	
}


/* HÄR ANGER DU MARGINALER I POP-UP*/
/* In use?*/
.pop-up-new>* 
{
	padding-left:30px; 
	padding-right:30px;
		
}
/* In use?*/
/*.pop-up-w-icons h2:before, .text-icon-minimize h2:before 
{
	content: '';
	  float: right;
	  width: 25px;
	  height:25px;
}*/

/* JUSTERAR FÖRSTA ELEMENTET I POP-UP SÅ ATT DEN INTE GÅR IN ÖVER IKONER
OM INTE H-TAG ÄR SATT PÅ TEXTOBJEKTET MÅSTE kLASSEN "icons-in-text-no-header" FINNAS PÅ TEXTOBJEKTET
*/ 
/* In use?*/
.icons-in-text>div:first-of-type, .icons-in-text-no-header>p:first-of-type
{
	/*padding-right: 100px;*/
   padding-top:20px;
}


/*.pop-up-new p:first-of-type, {
  padding-right: 100px;
  padding-top:20px;
}*/


/* ANVÄNDS TEX PÅ BILDER I POP-UP OM MAN VILL ATT DEN SKA VARA UTFALALNDE OCH INTE TA HÄNSYN TILL MARGINALER I POP-UP*/
/* In use?*/
.no-margins-in-pop-up 
{
	/*padding:0px;*/
	left: -40px;
}

.scroll-padding
{
	padding-right:15px;
}

/* This (the class "scroll-text") moves the scrollbar in text objects that has margin to align better. Can be used in pop-ups  */

.Desktop .scroll-text td>div, .TabletLandscape .scroll-text td>div
{
	padding-right:10px !important;
}

.Desktop .scroll-text td, .TabletLandscape .scroll-text td
{
	padding-right: 20px !important;
}

/* This handle showing and displaying te textes that is joined in different views */
.PhonePortrait div[class*='join-text'], .TabletPortrait div[class*='join-text']
{
	display:none;
}

.Desktop div[class*='join-text'], .TabletLandscape div[class*='join-text']
{
	display:block;
}


.Desktop .joined-text, .TabletLandscape .joined-text
{
	display:none;
}

.PhonePortrait .joined-text, .TabletPortrait .joined-text
{
	display:auto;
}

/* This is only used in Firefox, since the border radius is cut in the browser*/
@-moz-document url-prefix() {
  .lex-button>button
	{
		padding-right: 2px !important;
		padding-bottom: 2px !important;
	}
}

.lex-button
{
	clip:auto !important;
}

.lex-button>button>svg
{
	border-radius:var(--button-border-radius);

}

.lex-button>button>div>span
{
	font-family: var(--button-font-family);
}

.lex-button-no-style
{
	clip:auto !important;
}


/* hotspot labels*/

.hotspot-label
{
	background: var(--hotspot-label-bg);
	border-radius:var(--hotspot-label-border-radius);
	box-shadow: var(--hotspot-label-dropshadow);

}

/* embeded info boxes */

.embeded-info-box-in-text
{
	border-radius:var(--embedded-info-box-border-radius);
	padding:20px;
	margin-bottom: 10px;
    padding-bottom: 8px;
}

.small-margins .embeded-info-box-in-text
{
	padding:10px;
	padding-bottom: 5px;
}

.embeded-info-box-in-text
{
	background-color:var(--info-box-bg) !important;
}

.embeded-info-box-2 .embeded-info-box-in-text
{
	background-color:var(--info-box-2-bg) !important;;
}

.embeded-info-box-in-text ul 
{
	list-style: disc !important; 
	margin-bottom:10px !important;
	margin-top: -5px !important;
}

.embeded-info-box-in-text ul li
{
	list-style-image:none !important;
	margin-left:28px !important;
	padding-left:0px !important;
	margin-bottom:0px !important;	
}

.embeded-info-box-in-text ul > li::marker 
{
	font-size: 1.5rem;
}
/* Ordered Lists*/
.embeded-info-box-in-text ol
{
	margin-bottom:10px !important;
}
/* End embeded info boxes*/

/*
************ Test for dynamic css checkmarks on buttons *****************
.lex-button>button>div::after
{
	content:"";
	width:20%;
	height:80%;
	background-image:url("images/done_icon_2x.png");
	
}*/

/* DENNA REGLERAR TRANSPARENS OCH MARGINALER PÅ BILD OCH TEXT I CHAPTERINTRO*/
/* Används i: ChapterIntro*/

#pageDIV .chapter-intro, .pageDIV .chapter-intro {
background-color:rgba(255, 255, 255, 0.9) !important;
}

/* Används av Online - ÄNDRA ÄVEN DENNA OM DEN OVAN ÄNDRAS */
.chapter-intro>div{
/*background-color:rgba(255, 255, 255, 0.9) !important;*/
}




.chapter-intro p, .chapter-intro h1, .chapter-intro h2, .chapter-intro ul, .chapter-intro ol {
padding-left:15%;
padding-right:15%;
}

.chapter-intro {
padding-top:20px;
}

.chapter-intro p:last-of-type {
padding-bottom:25px;
}

/* Klassen "transparent-box-90" används när man vill ha en transparent (med 90% opacitet) textbox med 20px marginal */
#pageDIV .transparent-box-90, .pageDIV .transparent-box-90 {
background-color:rgba(255, 255, 255, 0.9) !important;
}


.transparent-box-90 p, .transparent-box-90 ol, .transparent-box-90 ul {
padding-left:20px;
padding-right:20px;
}

.transparent-box-90 p:first-of-type {
padding-top:20px;
}

.transparent-box-90 p:last-of-type {
padding-bottom:20px;
}



/* DENNA REGLERAR MARGINALER PÅ BILD OCH TEXT I TEXTIMAGE*/
/* ANVÄNDS I: TextImage*/

.text-block-with-image p, .text-block-with-image ol, .text-block-with-image ul{
	padding-left:0px !important;
	padding-right:10px !important;
}


.text-block-with-image img 
{

	margin-left:-10px !important;
	margin-right:10px !important; 
}


/* DENNA REGLERAR TRANSPARENS OCH MARGINALER PÅ BILD OCH TEXT I TEXTIMAGE*/
/* Används i: TextImage B*/

#pageDIV .text-block-without-image, .pageDIV .text-block-without-image  {
background-color:rgba(255, 255, 255, 0.9) !important;
}

/* Används av Online - ÄNDRA ÄVEN DENNA OM DEN OVAN ÄNDRAS */
.text-block-without-image>div {
background-color:rgba(255, 255, 255, 0.9) !important;
}


/*Förhindrer dubbel transparens på Inspire om H-tagg används*/
#pageDIV .text-block-without-image>div, .pageDIV .text-block-without-image>div  {
background-color:transparent !important;
}

/*Hanterar marginaler i tranparent textblock*/
.text-block-without-image p, .text-block-without-image h2, .text-block-without-image h1,.text-block-without-image ul, .text-block-without-image ol{
padding-left:40px;
padding-right:40px;
}

.text-block-without-image, .text-block-without-image .ttxt {
padding-top:40px;

}


/* DENNA REGLERAR FÖRSTA RADEN I POPUPPRUTAN PÅ HOTSPOT FULLSCREEN, DVS SPEAKER- OCH STÄNGKNAPP */
/* Används i: HotSpot Fullscreen på ruta med minimeraknapp*/

#pageDIV .popup-base-text, .pageDIV .popup-base-text, #pageDIV .maximize-icon, .pageDIV .maximize-icon {
background-color:rgba(255, 255, 255, 0.9) !important;
}

/* Används av Online - ÄNDRA ÄVEN DENNA OM DEN OVAN ÄNDRAS */*/
.popup-base-text>div, .maximize-icon>div{
background-color:rgba(255, 255, 255, 0.9) !important;
}

.maximize-icon
{
	cursor:pointer;
}

/* DENNA REGLERAR FÖRSTA RADEN I POPUPPRUTAN, DVS MINIMERAKNAPP */
/*.popup-base-text p:first-of-type {
	padding-right:5px; 
	padding-top:5px;
	padding-left:5px; 
	padding-bottom:5px;
}*/

/* DENNA REGLERAR DE ÖVRIGA RADERNA I POPUPPRUTAN, DVS RUBRIK OCH BRÖDTEXT*/

.popup-base-text > :first-child 
	{
		padding-top:40px;
	} 
	

.popup-base-text>*
{
	padding-left:40px; 
	padding-right:40px; 
}

/* DENNA REGLERAR TRANSPARENS OCH MARGINALER PÅ TEXT I TESTINTRO-RESULT*/
/* Används i: test-intro-result*/

#pageDIV .test-intro-result, .pageDIV .test-intro-result  {
	background-color:rgba(255, 255, 255, 0) !important;
}

/* Används av Online - ÄNDRA ÄVEN DENNA OM DEN OVAN ÄNDRAS */*/
.test-intro-result>div{
	background-color:rgba(255, 255, 255, 0) !important;
}


.test-intro-result p {
padding-left:15%;
padding-right:15%;
}

.test-intro-result p:first-of-type {
padding-top:20px;
}

.test-intro-result p:last-of-type {
padding-bottom:20px;
}



/* MENYN*/
/* DENNA REGLERAR MENYN OCH EV ÖVRIGA "ACCORDIANS", SOM TEX ORDLISTA, SE SEPARATA KOMMENTARER NEDAN
 lex-accordian är accordian-objektet, som menyn
*/
#lex-menu
{
	background-color: var(--menu-bgcolor) ; 
}
.custom-lex-accordian
{
	z-index:5020 !important;
	
}
.lex-accordian ul,
.lex-accordian li,
.lex-accordian a{
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: var(--menu-font), var(--menu-alternative-font); /* Här anges teckensnitt för menyn */
  font-size: var(--menu-font-size); /* Här anges fontstorlek för menyn */
  position: relative;
  text-transform: none !important;
}

.lex-accordian dt a
{
	color: var(--menu-colapsed-chapter-font-color);
	font-family: var(--menu-page-font);
	font-size: var(--menu-font-size);
}
.lex-accordian .dict-text
{
	color: var(--menu-colapsed-chapter-font-color);
	font-family: var(--menu-page-font);
	font-size: var(--menu-font-size);
}

.lex-accordian > ul
{
	padding-bottom:150px;
}

.lex-accordian a {
  line-height: 1.4;
  padding: 12px 20px;
}
.lex-accordian {
  width: 100%;
}
.lex-accordian > ul > li {
  cursor: pointer;
  background:var(--menu-bgcolor);
  border-bottom: 1px solid var(--menu-chapter-line-color); /* Här anges färg för avskiljande linjer på kapitelnivå*/
}
.lex-accordian > ul > li:last-child {
  border-bottom: 1px solid var(--menu-last-line-color); /* Här anges färg för avskiljande linje för sista sidan- Linje längst ner i menyn*/
}
.lex-accordian > ul > li > a {
  /*font-size: 14px; Här anges fontstorlek för infälld kapitelrubrik */
  display: block; 
  color: var(--menu-colapsed-chapter-font-color); /* Här anges textfärg för infälld kapitelrubrik */
  text-shadow: var(--menu-text-shadow);
  background: var(--menu-colapsed-chapter-bgcolor); /* Här anges färg för infälld kapitelbakgrund */

 
}
.lex-accordian > ul > li > a:hover {
  text-decoration: none;
}
.lex-accordian > ul > li.active {
  border-bottom: none;
}
.lex-accordian > ul > li.active > a {
  background:var(--menu-expanded-chapter-bgcolor); /* Här anges färg för utfälld kapitelbakgrund */
  color: var(--menu-expanded-chapter-font-color); /* Här anges textfärg för utfälld kapitelrubrik */
  text-shadow: var(--menu-text-shadow);
}
/* ANVÄNDS INTE !! ÄR TILL FÖR PIL TILL HÖGER som inte är default*/	
/* ska pil till höger användas ta bort "_bup" från "lex-accordian_bup" nedan och lägg till "_bup" på deklationen nedan som rör "before"*/				   
.lex-accordian_bup > ul > li.has-sub > a:after {
  content: "";
  position: absolute;
  top: 15px;
  right: 10px;
  border: 5px solid transparent;
  border-left: 5px solid var(--menu-arrow-chapter-color); /* Här anges färg på pil för infällt kapitel */
}
/* ANVÄNDS INTE !! ÄR TILL FÖR PIL TILL HÖGER som inte är default*/					   
.lex-accordian_bup > ul > li.has-sub.active > a:after {
  right: 14px;
  top: 18px;
  border: 5px solid transparent;
  border-top: 5px solid var(--menu-arrow-chapter-color); /*  Här anges färg på pil för utfällt kapitel */
}
/* SLUT PÅ PIL TILL HÖGER*/

 
/* HÄR ANGES CSS FÖR PIL TILL VÄNSTER */
/* ska pil till vänster användas lägg till "_bup" från "lex-accordian" nedan och lägg till "_bup" på deklationen ovan som rör "after"*/	


.lex-accordian li.has-sub > a:before, .lex-accordian dt > a:before {
  content: "";
  position: absolute;
  margin-left: 14px;
  top: 19px;
  left: 8px;
  border: 5px solid transparent;
  border-left: 5px solid var(--menu-arrow-chapter-color); /* Här anges färg på pil för infällt kapitel */
}

.lex-accordian  li.has-sub.active > a:before {
  left: 8px;
  top: 21px;
  margin-left: 12px;
  border: 5px solid transparent;
  border-top: 5px solid var(--menu-arrow-chapter-color); /* Här anges färg på pil för utfällt kapitel */
}

.lex-accordian li.has-sub.contains-displayed-page > a:before {
  
   border: 5px solid transparent;
  border-left: 5px solid var(--menu-arrow-active-chapter-color); /* Här anges färg på pil för infällt kapitel om sidan du befinner dig på finns i kapitlet*/
}

.lex-accordian  li.has-sub.active.contains-displayed-page > a:before {
  
   border: 5px solid transparent;
  border-top: 5px solid var(--menu-arrow-active-chapter-color); /* Här anges färg på pil för utfällt kapitel om sidan du befinner dig på finns i kapitlet*/
}

/*

.lex-accordian_old > ul > li.has-sub > a:before {
  content: "";
  position: absolute;
  margin-left: 14px;
  top: 15px;
  left: 8px;
  border: 5px solid transparent;
  border-left: 5px solid #000000; 
}

.lex-accordian_old > ul > li.has-sub.active > a:before {
  left: 8px;
  top: 18px;
  margin-left: 12px;
  border: 5px solid transparent;
  border-top: 5px solid #000000; 
}*/

/* Trycker in texen så att kapitelpil (infälld/utfälld) får plats till vänster om texten */
.lex-accordian  ul >  li > a > span{
  padding-left:18px;
}
/* SLUT PÅ PIL TILL VÄNSTER*/

/* Sub menu */
.lex-accordian ul ul {
  padding: 0;
  margin: 20;		 
  display: none;
}
.lex-accordian ul ul a {
  background: var(--menu-page-bgcolor); /* Här anges bakgrundsfärg för sidnamn */
  display: block;
  color: var(--menu-page-font-color); /* Här anges textfärg för sidnamn */
  /*font-size: 18px;  Här anges fontstorlek för sidnamn */
  font-family:var(--menu-page-font);  /* Här anges font för sidnamn */
  padding-left:25px; /* Här anges indrag för sidnamn, så att det blir indraget jämfört med kapitelnamnet */
  text-transform: none !important;
}
.lex-accordian ul ul li {
  border-bottom: 1px solid var(--menu-page-line-color); /* Här anges färg för avskiljande linjer på sidnivå*/
}
.lex-accordian ul ul li.odd a {
  background: var(--menu-odd-page-bgcolor);
}
.lex-accordian ul ul li:last-child {
  border: none;
}

.lex-accordian > ul > li > ul
{
	padding-left:25;
}

.lex-accordian > ul > li.in-progress >a {
 
  color: var(--menu-chapter-in-progress-font-color) /*#000000*/ ; /* Här anges textfärg för KAPITEL som är "in progress" status, dvs påbörjad */
  font-weight: normal ;/* Här anges om du vill ha annan textstorlek för sida som är "in progress" status, dvs påbörjad, tex fetstil [font-weight: bold;] */
}


.lex-accordian > ul > li > ul > li.in-progress >a {
 
  color:  var(--menu-page-in-progress-font-color) /*#000000*/ ; /* Här anges textfärg för SIDA som är "in progress" status, dvs påbörjad */
  font-weight: normal ;/* Här anges om du vill ha annan textstorlek för sida som är "in progress" status, dvs påbörjad, tex fetstil [font-weight: bold;] */
}

.lex-accordian  > ul > li.completed >a  {
 
  color: var(--menu-chapter-completed-bgcolor) ; /* Här anges textfärg för KAPITEL som är "completed" status, dvs utförd/klar */
  font-weight: normal ;/* Här anges om du vill ha annan textstorlek för sida som är "completed" status, dvs utförd/klar, tex fetstil [font-weight: bold;] */
}

.lex-accordian  > ul > li > ul > li.completed >a  {
 
  color: var(--menu-page-completed-font-color); /* Här anges textfärg för SIDA som är "completed" status, dvs utförd/klar */
  font-weight: normal ;/* Här anges om du vill ha annan textstorlek för sida som är "completed" status, dvs utförd/klar, tex fetstil [font-weight: bold;] */
}
.lex-accordian  li.has-sub > ul > li.displayed-page >a {
  background: var(--menu-active-page-bgcolor); /* Här anges bakgrundsfärg för aktuell sida */
  color: #000000; /* Här anges textfärg för aktuell sida */
	font-weight: normal ;/* Här anges om du vill ha annan textstorlek för aktuell sida, tex fetstil [font-weight: bold;] */
}
.lex-accordian .status-icon{
	height:16px;
	width:16px;
	margin-right:4px;
	vertical-align:text-bottom;
}

.lex-accordian li span.menu-icon-wrapper

{
	margin-right:4px;
}		  
.lex-accordian li span
{
	display:table-cell;
}

.lex-accordian li.section {
	
	padding-left:25px;
	
}

.lex-accordian .section ul{
	
	padding-left:20px;
	
}

.lex-accordian .section> a> .menu-text-wrapper
{
	 font-family:var(--menu-section-font);  /* Här anges font för section namn */
}


.lex-accordian li.locked-node a
{
  cursor:auto !important;
  font-style:;
}

/*.lex-accordian li.locked-node a span.text-wrapper::after {
  content: " - (Låst)";
  color: ;
  font-style: italic;
}*/

/* SLUT PÅ MENY/ACCORDION CSS*/


/* MEDIASPELAREN*/
/* FORMATTERING FÖR UNDERTEXTER*/

.mejs-captions-position, .mejs__captions-position /*Animerar upp undertexten*/
{
	-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
 

.rise-captions
{
	bottom:80px !important;

}

 .mejs__captions-text {
	line-height:1.2 !important;
	background-color:var(--subtitles-bgcolor) !important;
	color: var(--subtitles-text-color) !important;
}

/* FORMATTERING FÖR MENYN FÖR UNDERTEXTER*/


/* DENNA TAR BORT KNAPPEN FÖR FULLSKÄRMSLÄGE I SPELARKONTROLLEN PÅ VIDEOS  - ange klassen "no-fullscreen-video" på videoobjektet*/
.no-fullscreen-video .mejs__fullscreen-button
{
	visibility:hidden !important;
}

/* TAR BORT STOR PLAYKAPP PÅ VIDEOS  - ange klassen "video-no-overlay" på videoobjektet*/
.video-no-overlay .mejs__overlay-play
{
	display:none !important;
	
}

/* TAR BORT SMÅ SVARTA KANTER SOM IBLAND UPPSTÅR PÅ VIDEOS I BLA EXPLORER */
.mejs__container
{
	background-color: transparent !important;
	
}

.mejs__overlay-button
{
 background-image: url(included_files/player_icons/big_play.png) !important;
}
/* DENNA TAR BORT EN FUL PLAYKNAPP PÅ IOS-ENHETER*/
*::-webkit-media-controls-start-playback-button {
 /* display: none!important;
  -webkit-appearance: none;*/
}

.video_overlay
    {
        position:absolute;
        border:red solid 0px;
        pointer-events:none;
        height:100%;
        width:100%;
        left:0px;
        top:0px;
        z-index:inherit;
    }


/* SLUT PÅ MEDIASPELAREN CSS*/

/* DIV CSS */
/* DENNA GÖR SÅ ATT KLICK GÅR IGENOM TILL UNDERLIGGANDE OBJEKT/ELEMENT*/
.no-interaction, .allows-click-through
{
	pointer-events: none !important;
}

/* DENNA POSITIONERAR LABEL FÖR CHECKBOXEN FÖR AUTOSTART FÖR SPEAKERN */

.auto-audio-checkbox .custCB
{
	
	/*background-position:top left;*/
	padding-left:40px !important;
}


 .no-scroll 
 {
    /*position: fixed;*/
	overflow:hidden;
	touch-action: none !important;
 }
 
 body.no-scroll #pageDIV, body.no-scroll .pageDIV
 {
	 /*pointer-events:none !important;*/
	 touch-action: none !important;
 }
 
 .no-mobile-scroll /* IN use?? */
 {
	 touch-action: none;
 }
	
 
 .lex-accordian
 {
	 overflow: auto !important;
	 -webkit-overflow-scrolling:touch !important;
	 touch-action:pan-y !important;
 }
 
 

/* DENNA REGLERAR SPECIALREGLER FÖR TELEFONER I LIGGANDE LÄGE (LANDSCAPE) DÄR VISSA OBJEKT MÅSTE FÅ ANNAN STYLING */
@media only screen and (min-width : 321px)  and (max-device-width: 667px)  and (orientation : landscape) {
	
	/*body::before {
		content: "phone landscape media query (321 > 667) fired";
		font-weight: bold;
		display: block;
		text-align: center;
		background: rgba(255, 255, 0, 0.9); 
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1199;
	  }*/
}	
	.PhoneLandscape .text-block-with-image p{
		padding-left:0px !important;
		padding-right:10px !important;
	}

	.PhoneLandscape .text-block-with-image img 
	{

		margin-left:0px !important;
		margin-right:10px !important;  
	}
	
	.PhoneLandscape .popup-base-text>* {
		padding-left:0px;
		padding-right:0px; 
	}
	
	/* DENNA REGLERAR FÖRSTA RADEN I POPUPPRUTAN, DVS MINIMERAKNAPP */
	/*.popup-base-text p:first-of-type {
		padding-right:5px; 
		padding-top:0px;
		padding-left:5px; 
		padding-bottom:0px;
		height:0px;
	}*/
	
	.PhoneLandscape .lex-accordian a {
     font-size: 20px; /* Här anges fontstorlek för menyn */
    }
	
	.rise-captions
	{
		bottom:40px !important;

	}






/* DENNA REGLERAR SPECIALREGLER FÖR TELEFONER I STÅENDE LÄGE (PORTRAIT) DÄR VISSA OBJEKT MÅSTE FÅ ANNAN STYLING */
@media only screen and (max-device-width: 667px)  and (orientation : portrait) { 
	/*body::before {
		content: "Phone portrait  media query (667 > ) fired";
		font-weight: bold;
		display: block;
		text-align: center;
		background: rgba(255, 255, 0, 0.9);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1199;
	  }*/
   /* Justerar marginaler i popupper på mobiler */
   }
   .PhonePortrait .image-slide-text {
   
		bottom: 51px;
		
   }
   
   .PhonePortrait .image-slide-text p
   {
	   font-size:16pt;
   }
   .PhonePortrait #slider-dot-navigation
	{
		margin-top: 16px;
		
   }
   
  .PhonePortrait .slider-dot 
   {
		--size: 25px;
		height: var(--size);
		width: var(--size);
		margin-right: 6px;
		margin-left: 6px;
		max-width:var(--size);
   }
   
	.PhonePortrait .pop-up-2 td
	{
		padding-left:54px !important;
		padding-right:54px !important;
	}
	  		   
	
	  
	.PhonePortrait .styled-list ol li::before {
		top: 4px;
	}
	.PhonePortrait .styled-list.big-list ol li::before {
  
		top: 1px;
  
	}
	
	
	.PhonePortrait .styled-list  ul li::after {
		top: 3px;
	}
	
	.PhonePortrait .styled-list  ul li::before {
		left: -8px !important;
		top: 7px !important;
		/*width: 0.6em !important;
		height: 0.6em !important;*/
	}
	
	.PhonePortrait .styled-list.big-list ul li::before
	{
		   
		    left: -15px !important;
		top: 7px !important;
		/*	width: 0.9em !important;
		height: 0.9em !important;*/
		
	}
	.PhonePortrait .styled-list.big-list ul li::after
	{
		top: 3px;
	}
	.PhonePortrait .inverted-txtcolor-mobile span
	{
		color::var(--inverted-text-mobile) !important;
	}
	
		
	.PhonePortrait .lex-accordian a {
     font-size: var(--menu-phone-font-size); /* Här anges fontstorlek för menyn */
    }
	
	.PhonePortrait .rise-captions
	{
		bottom:40px !important;

	}
	
	.PhonePortrait #audio325043 .mejs__container.mejs__audio
	{
		width:480px !important;
	}
	
	
	
	.PhonePortrait .transparent-bg
	{
		background:tranparent !important;
	}
	
	.PhonePortrait .mobile-on-top
	{
		z-index:2000 !important;
	}
	
	.PhonePortrait #initClickBtn
	{
		margin-top: 50% !important;
	}
	
	.PhonePortrait .icon-hotspot:hover
	{
		fill:var(--icon-hotspot-selected-color) !important;
		background-image:url('included_files/hotspot-bg-selected.png');
		scale: 1;
		
	}

	
	.PhonePortrait .mobile-anchor-icon 
	{
		background-color:var(--mobile-anchor-icon-bgcolor) !important;
		z-index:250 !important;
	}
	.PhonePortrait .mobile-anchor-icon .icon-container
	{
		position:absolute;
		top: 50%!important;
		  -ms-transform: translateY(-50%)!important;
		  transform: translateY(-50%)!important;
		    -webkit-transform: translateY(-50%)!important;
  
	}
	
	
	
	/**** For mobile anchor icons (speaker and nav) ******/
	.PhonePortrait .icon-global.mobile-anchor-icon .icon-default
	{
		fill:var(--mobile-anchor-icon-color) !important;
	}
	.PhonePortrait .icon-global.mobile-anchor-icon.icon-inverted .icon-default
	{
		fill:var(--mobile-anchor-icon-inverted-color) !important;
	}

	.PhonePortrait .icon-global.mobile-anchor-icon.icon-deactivated .icon-default
	{
		fill:var(--mobile-anchor-icon-deactivated-color) !important;
	}
	
	



/* DENNA REGLERAR SPECIALREGLER FÖR STÅENDE PADDA DÄR VISSA OBJEKT MÅSTE FÅ ANNAN STYLING */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait), only screen and  (max-width: 800px) and (orientation : portrait) { 
/* iPads and tablets in portrait mode STYLES GO HERE */ 
	/*body::before {
		content: "tablet portrait media query (768 > 1024) fired";
		font-weight: bold;
		display: block;
		text-align: center;
		background: rgba(255, 255, 0, 0.9); 
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1199;
	  }*/



} 
	.TabletPortrait .inverted-txtcolor-mobile span
	{
		color:var(--inverted-text-mobile) !important;
	}
	
	.TabletPortrait #slider-dot-navigation
	{
		margin-top: 16px;
    }
	.TabletPortrait .slider-dot 
    {
		--size: 23px;
		height: var(--size);
		width: var(--size);
		/*margin-left:5px;
		margin-right:5px;*/
		max-width:var(--size);
	
		
    }
   
   .TabletPortrait .image-slide-text
   {
	   bottom:30px;
   }
	

	 
	.TabletPortrait .styled-list ol li::before {
		top: 2px;
	}
	
	.TabletPortrait .styled-list.big-list ol li::before {
  
		top: 0px;
  
	}
	
	
	.TabletPortrait .styled-list  ul li::after {
		top: -1px;
	}
	.TabletPortrait .styled-list  ul li::before {
		left: -8px;
			top: 3px;
			/*width: 0.7em;
			height: 0.7em;*/
	}
	
	.TabletPortrait .styled-list.big-list ul li
	{
		/*padding-left: 45px !important;*/
		padding-left: 32px !important;
	}
	
	.TabletPortrait .styled-list.big-list ul li::before
	{
		    
		top: 2px;
		left: -15px;
		/*width: 1.2em;
		height: 1.2em;*/
		/*background-color:red;
			    z-index: 500;*/
	}
	.TabletPortrait .styled-list.big-list ul li::after
	{
		    
		top: -3px;
		
	}
	
	.TabletPortrait .rise-captions
	{
		bottom:80px !important;

	}
	
	/*.TabletPortrait #audio325043 .mejs__container.mejs__audio
	{
		width:480px !important
	}*/
	
	/*.mobile-on-top
	{
		z-index:2000 !important;
	}*/
	
	.TabletPortrait #initClickBtn
	{
		margin-top: 50% !important;
	}
	
	.TabletPortrait .icon-hotspot:hover
	{
		fill:var(--icon-hotspot-selected-color) !important;
		background-image:url('included_files/hotspot-bg-selected.png');
		scale: 1;
		
	}

	
	.TabletPortrait .mobile-anchor-icon 
	{
		background-color: var(--mobile-anchor-icon-bgcolor) !important;
		z-index:250 !important;
	}
	.TabletPortrait .mobile-anchor-icon .icon-container
	{
		position:absolute;
		top: 50%!important;
		  -ms-transform: translateY(-50%)!important;
		  transform: translateY(-50%)!important;
		    -webkit-transform: translateY(-50%)!important;
  
	}
	
	/**** For mobile anchor icons (speaker and nav) ******/
	.TabletPortrait .icon-global.mobile-anchor-icon .icon-default
	{
		fill:var(--mobile-anchor-icon-color) !important;
	}
	.TabletPortrait .icon-global.mobile-anchor-icon.icon-inverted .icon-default
	{
		fill:var(--mobile-anchor-icon-inverted-color) !important;
	}

	.TabletPortrait .icon-global.mobile-anchor-icon.icon-deactivated .icon-default
	{
		fill:var(--mobile-anchor-icon-deactivated-color) !important;
	}



/* DENNA REGLERAR SPECIALREGLER FÖR LIGGANDE PADDA DÄR VISSA OBJEKT MÅSTE FÅ ANNAN STYLING */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape), only screen and (max-width: 1280px) and (orientation : landscape){
	/*body::before {
		content: "tablet landscape media query (768 > 1024) fired";
		font-weight: bold;
		display: block;
		text-align: center;
		background: rgba(255, 255, 0, 0.9); 
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1199;
	  }*/

}	
	.TabletLandscape .icon-hotspot:hover
	{
		fill:var(--icon-hotspot-selected-color) !important;
		background-image:url('included_files/hotspot-bg-selected.png');
		scale: 1;
		
	}
	
	.TabletLandscape .image-slide-text
	{
		    height: 55px;
			bottom: 10px;
	}
	
	.TabletLandscape #slider-dot-navigation
	{
		margin-top: 16px;
    }
	
	
	.TabletLandscape .slider-dot 
    {
		--size: 20px;
		height: var(--size);
		width: var(--size);
		/*margin-left:5px;
		margin-right:5px;*/
		max-width:var(--size);
		
    }
	.TabletLandscape .styled-list ol li::before {
		top: 0px;
	}
	
	.TabletLandscape .styled-list.big-list ol li::before {
  
		top: -1px;
  
	}
	
	.TabletLandscape .styled-list.big-list ul li::before
	{
		    
		top: -1px;
	}
	.TabletLandscape .styled-list.big-list ul li::after
	{
		    
		top: -5px;
	}
	
	




/* DESSA SER TILL ATT MENYN OCH ANDRA GLOBALA OBJEKT LIGGER ÖVERST ÄVEN DRAG AND DROP FRÅGOR */

/* Kan användas  på objet på sidnivå som man vill ska vara ontop. Tex om man ha en drag&drop som placeras över andra objekt */
.page-on-top-content
{
	z-index:2000 !important;
	
}

.course-blocker
{
	z-index:4990 !important;
}
.global-group-element-0
{
	z-index:5000 !important;
}


.global-group-element-1
{
	z-index:5010 !important;
}

.global-group-element-2, .customRadio /* Tillfällig fix för bug i lectora online. Ta bort när class kommer med på checkboxes*/
{
	z-index:5020 !important;
}

.global-group-element-3
{
	z-index:5030 !important;
}
.global-group-element-4
{
	z-index:5040 !important;
}

.global-group-element-5
{
	z-index:5050 !important;
}

.popup-yellow{
  background-color: #FFEEB2 !important;
}