/*
	Gå til denne siden for å redigere CSS:

	https://www.hvl.no/canvas/css-blokker/

	NB: Krever HVL-pålogging!
	Utvikler: Terje Rudi, for HVL, 2020
*/


/* code-tagg: */
code {
color: green; font-size: larger;background: lightgrey;padding: .3em .6rem;border-radius: .4rem;
}

/* dl-tagg: */
dl {font-family:  'Lato',Arial,Helvetica,sans-serif;}
dt {font-weight: bold; font-size: larger; color: #004357;}
dd {margin-left: 4rem;}

/* Skyggede bokser (FHS-stil v/Rosenberg): */
.strongcyan,.verysoftlimegreen,.softcyan,.brightorange,.softred,.darkcyan,.verydarkcyan,.verydarkpink{
	width: 75%;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	vertical-align: top;
	color: #fff;
	font-size: 1.25em; margin: .75em 0;
	box-shadow: 4px 4px 3px 0px rgba(170,170,170,1);
}
.strongcyan a:link{	
	color: #004347;
}

.verysoftlimegreen a:link{
	color:#39553a;
}

.softcyan a:link {
	color: #264f55;
}

.brightorange a:link{
		color: #5a281f;
}
.softred a:link,{
	color:#004347;
}

.darkcyan a:link,.verydarkcyan a:link,.verydarkpink a:link{
	color: #eaeff1;
}

.strongcyan{
	background-color: #00afba;
	border-left: solid 10px #9ee1e5;
}
.verysoftlimegreen{
	background-color: #96de99;
	border-left: solid 10px #d7f2d8;
}
.softcyan{
	background-color: #64d0df;
	border-left: solid 10px #c4edf3;
}

.brightorange{
	background-color: #f9de45;
	border-left: solid 10px #fdf2b8;
}
.softred{
	background-color: #eb6851 ;
	border-left: solid 10px #f7c5bd;
}
.darkcyan{
	background-color: #008a8f;
	border-left: solid 10px #9ed2d4;
}
.verydarkcyan{
	background-color: #004357;
	border-left: solid 10px #9eb7bf;
	color: #eaeff1;
}
.verydarkpink{
	background-color: #6d2439;
	border-left: solid 10px #c7acb4;
	color: #eaeff1;
}

.strongcyan_box{
	margin: 50px 5% 50px 5%; 
	padding-left: 10px;
	background-color: #ffffff;
	border: 1px solid #grey;
	box-shadow: 20px 20px 0px 0px rgba(0,175,186,1);
}

.verysoftlimegreen_box {
	margin: 50px 5% 50px 5%; 
	padding-left: 10px;
	background-color: #ffffff;
	border: 1px solid #grey;
	box-shadow: 20px 20px 0px 0px rgba(150,222,153,1);
}

.softcyan_box{
	margin: 50px 5% 50px 5%; 
	padding-left: 10px;
	background-color: #ffffff;
	border: 1px solid #grey;
	box-shadow: 20px 20px 0px 0px rgba(100,208,223,1);
}
.brightorange_box{
	margin: 50px 5% 50px 5%; 
	padding-left: 10px;
	background-color: #ffffff;
	border: 1px solid #grey;
	box-shadow: 20px 20px 0px 0px rgba(249,222,69,1);
}

.softred_box{
	margin: 50px 5% 50px 5%; 
	padding-left: 10px;
	background-color: #ffffff;
	border: 1px solid #grey;
	box-shadow: 20px 20px 0px 0px rgba(235,104,81,1);
}

div.verydarkcyan_box{
	margin: 50px 5% 50px 5%; 
	padding-left: 10px;
	background-color: #ffffff;
	border: 1px solid #grey;
	box-shadow: 20px 20px 0px 0px rgba(0,138,143,1);
}

div.darkcyan_box{
	margin: 50px 5% 50px 5%; 
	padding-left: 10px;
	background-color: #ffffff;
	border: 1px solid #grey;
	box-shadow: 20px 20px 0px 0px rgba(0,67,87,1);
}

div.verydarkpink_box{
	margin: 50px 5% 50px 5%; 
	padding-left: 10px;
	background-color: #ffffff;
		border: 1px solid #grey;
	box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.75);
}

/* Detalj-bokser med eller uten ikon: */
/* HVL-stiler for rammebokser (details-tagg) med effekter og ikoner (prod. av Terje Rudi) */

.boks {margin: 1rem 0;border-radius: .2rem;/*border: solid 2px rgba(128,128,128,.1) !important;*/padding: .5rem 1.2rem;background: rgba(220,220,220,.1);width: clamp(20rem,calc(100% - 2rem),48rem);}
.boks summary {cursor: pointer;font-family: Lato Extended,Arial,sans-serif;margin: .55rem 0;font-size: 1.2rem;color: #004357;font-weight: 700;}
.boks.ikon {
	width: clamp(20rem,calc(100% - 5rem),48rem);
	padding-left: 3.4rem;
	background-image: url(https://v.hvl.no/symbols/info.php.svg);
	background-size: 2rem;
	background-repeat: no-repeat;
	background-position: .7rem .7rem;
}
.boks.ikonDialog {background-image: url(https://v.hvl.no/symbols/dialog.php.svg);}
.boks.ikonInfo {} /* default blir satt inn */
.boks.ikonLes {background-image: url(https://v.hvl.no/symbols/les.php.svg);}
.boks.ikonMaal {background-image: url(https://v.hvl.no/symbols/maal.php.svg);}
.boks.ikonSitat {background-image: url(https://v.hvl.no/symbols/sitat.php.svg);}
.boks.ikonSpoersmaal {background-image: url(https://v.hvl.no/symbols/spoersmaal.php.svg);}
.boks.ikonParagraf {background-image: url(https://v.hvl.no/symbols/paragraf.php.svg);}
.boks.ikonTid {background-image: url(https://v.hvl.no/symbols/tid.php.svg);}
.boks.ikonTips {background-image: url(https://v.hvl.no/symbols/tips.php.svg);}
.boks.ikonVerktoey {background-image: url(https://v.hvl.no/symbols/verktoey.php.svg);}
.boks.ikonViktig  {background-image: url(https://v.hvl.no/symbols/viktig.php.svg);}
.boks.ikonHodeskalle  {background-image: url(https://v.hvl.no/symbols/hodeskalle.php.svg);}
.varsel {border: solid 1px #f5d0d0 !important;background: #FFFAFA;}
.tips {border: solid 1px #cfe9dc !important;background: #f7fdf7;}
.skugge {box-shadow: .2rem .2rem .8rem rgba(0,0,0,.2)}

/* HVL-stiler for rammebokser med effekter og ikoner ender her */

/* Animasjonseffekter (UI-respons): */
.tiltIn {
  display: inline-block;
  animation: tiltIn 500ms;
}
.wiggle {
  display: inline-block;
  animation: wiggle 2s linear infinite;
}
@keyframes tiltIn {
  0% {
    transform: rotateX(-90deg);
    }
  100% {
    transform: rotate(0);
  }
}


@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
    box-shadow: rgba(0, 0, 0, 0.4) 0.1rem 0.1rem 0.6rem;
  }
  15% {
    transform: rotateZ(-15deg);
    box-shadow: rgba(0, 0, 0, 0.4) 0.1rem 0.1rem 0rem;
  }
  20% {
    transform: rotateZ(10deg);
     box-shadow: none;
  }
  25% {
    transform: rotateZ(-10deg);
     box-shadow: rgba(0, 0, 0, 0.4) 0.1rem 0.1rem 0;
  }
  30% {
    transform: rotateZ(6deg);
    box-shadow: none;
  }
  35% {
    transform: rotateZ(-4deg);
    box-shadow: rgba(0, 0, 0, 0.4) 0.1rem 0.1rem 0rem;
  }
  40%, 100% {
    transform: rotateZ(0);
    box-shadow: rgba(0, 0, 0, 0.4) 0.1rem 0.1rem 0.6rem;
  }
}

/* Forstørrelse av element: */
.storre {
transform-origin: left;
transform: scale(1.4);
}

/* Chat-robot Mime: */
/* Chat-robot Mime */
.boost-trigger-button {
  background-color: #00AFBA;
  border-radius: 3px;
  border: 0;
  box-shadow: 0px 8px 20px rgba(206, 206, 206, 0.8);
  color: #fff;
  cursor: pointer;
  font-family: inherit, sans-serif;
  font-size: 16px;
  font-weight: bold;
  outline: 0;
  position: fixed;
  bottom: 12px;
  right: 12px;
  padding: 6px 8px 8px 8px;
  transition: all 200ms;
  z-index:12;
}

div#boostbuttondiv{
	position: fixed;
	bottom: 8px;
	right: 8px;
	padding: 6px 8px 8px 8px;
	transition: all 200ms;
	z-index:13;
	width: 60px;
	height: 61px;
}
div#boostbuttondiv img{
	width: 100%;
	height: 100%;
	max-width: 60px;
	max-height: 61px;
}

.boost-trigger-button:hover {
  background-color: rgb(0, 127, 135);
  box-shadow: 0px 8px 20px rgba(206, 206, 206, 0.8);
  transform: scale(1.025);
}

.boost-trigger-button::after {
    background: url(https://hvl.no/Static/internett/images/sprite.svg?v=1612266025276) no-repeat;
    background-size: 2852px 2924px;
    background-position: -538px -629px;
    width: 35.5px;
    height: 35.5px;
    content: '';
    display: block;
    position: absolute;
    right: 10px;
    top: 4px;
}

/* dfn-tagg med definisjon: */
/* Stil til orda som er definert */
dfn[data-definisjon] {
    cursor: pointer;
    /*background-color: #a7e8fe;*/
    border-bottom: 1px dashed #0000ff;
}
/* Stil til hurtigboksen */
.hurtigboks {
    position: absolute;
    display: flex;
    border: none;
    padding: 0.5rem;
    margin-right: 1rem;
    max-width: 38rem;
    background-color: #fff;
    box-shadow: rgba(0,0,0,.35) 0px 5px 15px;
    font-size: .9rem;
    cursor: default;
    z-index: 10000; /* Høyt nok for å være over andre elementer */
    outline: none; /* Fjerner standardkantlinje for fokus */
}
/* Legger til synlig fokus for hurtigboksen */
.hurtigboks:focus {
    outline: 2px solid #4A90E2; /* En distinkt kantlinje for å markere fokuset */
}
/* Stil til kryssen i hurtigboksen */
.hurtigboks-lukk {
    position: absolute;
    background-color: inherit;
    border: none;
    top: 0;
    right: .5rem;
    font-size: 1rem;
    padding: 0;
    cursor: pointer;
}