/* variables */
:root{
    --color-accent: #0399e5;
    --color-accent-rgb: 3, 153, 229;

    /* gull: lys -> mid -> dyp gir metall-effekten. --gold-mid er «den gule» for flate flater */
    --gold-light: #f7e3b0;
    --gold-mid: #e2bd78;
    --gold-deep: #b1803a;
    --gold-ink: #241a0a;            /* tekstfarge som skal ligge OPPÅ gull */
    --gold-rgb: 226, 189, 120;      /* til rgba() -tints */

    --gold-gradient: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-mid) 45%, var(--gold-deep) 72%, var(--gold-mid) 100%);
    --gold-gradient-hover: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-light) 35%, var(--gold-mid) 75%, var(--gold-light) 100%);

    --bg-overlay: rgba(20,20,20, 0.8);   /* slør over bakgrunnsbildet */
}
/**/


/* gold classes (legges på der gull ønskes - endrer ingenting av seg selv) */

/* flat gull: tekst, ikoner, små detaljer */
.text-gold { color:var(--gold-mid); }
.text-gold-light { color:var(--gold-light); }
.text-gold-deep { color:var(--gold-deep); }

/* gradient-gull tekst: kun til store ting (store overskrifter, store tall).
   inline-block gjør at gradienten følger tekstbredden, ikke hele linjen. */
.text-gold-gradient { display:inline-block; background-image:var(--gold-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* gradient-gull flate: knapper, stolper. inset-skyggen gir metall-kanten */
.bg-gold { background:var(--gold-mid); background-image:var(--gold-gradient); color:var(--gold-ink); box-shadow:inset 0 1px 0 rgba(255,255,255, .45); transition:all 0.6s ease; }
.bg-gold:hover, .bg-gold:focus { background-image:var(--gold-gradient-hover); color:var(--gold-ink); transition:all 0.2s ease; }

/* kanter og svake flater */
.border-gold { border:1px solid rgba(var(--gold-rgb), .5); }
.bg-gold-fade { background:rgba(var(--gold-rgb), .15); }
/**/


/* body */
/* mørk slør over bildet demper kontrasten. øk/senk alpha i --bg-overlay for mer/mindre bilde */
body { position:relative; background:linear-gradient(var(--bg-overlay), var(--bg-overlay)), #333 url('../images/bg.jpg') no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; width:100%; min-height:100vh; padding:0; margin:0;  }
/**/

/* text */
body, div, p, span { font-family:'Quicksand', sans-serif; font-weight: 500; color:rgba(255,255,255, 0.7); }
body { font-size: 16px;  }

h1 { font-size:26px; margin-bottom:50px; display:inline-block; background-image:var(--gold-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
h2 { font-size:18px; margin-bottom:20px;  }
h1, h2, h3, h4, h5 { font-family:'Quicksand', sans-serif; font-weight: 500; }

a, a:visited { color:var(--gold-mid); transition: all 0.6s ease; }
a:hover { color:var(--gold-light); transition: all 0.2s ease; text-decoration:underline; }
/**/

/* misc */
.cursor-pointer { cursor:pointer; }
/**/


/* header */
/* mørkt glass som contentbox, med tynn gullkant i bunn.
   glasset ligger i :before - backdrop-filter direkte på headeren gjør den til containing block for burgermenyens position:fixed sidebar */
.section-header { position:fixed; z-index:1000; border-bottom:1px solid rgba(var(--gold-rgb), .35); padding:20px 20px 20px 20px; width:100%; box-sizing:border-box; box-shadow:0 0 15px 5px rgba(0,0,0, .3); transition:all 0.8s ease; }
.section-header:before { content:''; position:absolute; inset:0; z-index:-1; background:rgba(15,15,15, .75); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); }
.section-header { padding-top:calc(10px + env(safe-area-inset-top)); } /* fix stupid bus pocket on iphone x */
.header-container { position:relative; border:none; }
.logo { float:left; width:100px; margin-top:2px; transition:all 0.8s ease; }
.header-info { position:relative; color:rgba(255,255,255, .7); text-align:right; float:right; margin-right:30px; margin-top:7px; font-size:0.8em; transition:all 0.8s ease; }
.header-info a, .header-info a:visited { color:rgba(255,255,255, .7); }
.header-menu-bm .bm-menubutton { background:var(--gold-mid); background-image:var(--gold-gradient); box-shadow:inset 0 1px 0 rgba(255,255,255, .45); border:1px solid var(--gold-deep); position:relative; padding:5px; float:right; margin-top:2px; border-radius:5px; font-size:18px; color:var(--gold-ink); cursor:pointer; transition:all 0.6s ease; }
.header-menu-bm .bm-menubutton:hover { background-image:var(--gold-gradient-hover); color:var(--gold-ink); transition:all 0.2s ease; }

.header-menu-bm .bm-sidebar-content { padding-top:env(safe-area-inset-top); background:#1a1a1a; border-left:1px solid rgba(var(--gold-rgb), .25); overflow-y: scroll; }
.header-menu-bm ul { list-style-type:none; margin:0; } 
.header-menu-bm li.menu-heading { display:block; box-sizing:border-box; padding:10px 10px 10px 15px; background:rgba(255,255,255, .04); color:var(--gold-mid); }
.header-menu-bm li a { position:relative; display:block; box-sizing:border-box; padding:10px 10px 10px 25px; color:rgba(255,255,255, .55); border-bottom:1px solid rgba(255,255,255, .05); font-weight:700; transition:all 0.6s ease; }
.header-menu-bm li a:hover { color:var(--gold-light); background:rgba(255,255,255, .05); text-decoration:none; transition:all 0.2s ease; }
.header-menu-bm li.current-menu-item a { background:rgba(var(--gold-rgb), .15); color:var(--gold-mid); }
.header-menu-bm li.current-menu-item a:before { position:absolute; display:block; content:''; border:8px solid transparent; border-left-color:var(--gold-mid); width:0; height:0; top:15px; left:0px; }

.header-menu-bm li.menu-spacer { height:20px; border-bottom:1px solid rgba(255,255,255,0.1); }
@media only screen and ( min-width: 640px) { 
    .logo { width:140px; margin-top:13px; } 
    .section-header { height:90px; }
    .header-info { margin-top:25px; margin-right:70px; }
    .header-menu-bm .bm-menubutton { margin-top:20px; }
}
/**/


/* ********** submenu **************** */
.submenu { overflow:hidden; margin:-20px 0 20px 0; }
.submenu ul { position:relative; list-style-type: none; margin-left:0; }
.submenu li { position:relative; float:left; margin-right:20px; padding:0; line-height:1em; }
.submenu li:after { position:absolute; display:inline-block; content:' '; width:10px; height:20px; border-right:1px solid rgba(255,255,255, .15); right:-10px; top:5px; }
.submenu li:last-child:after { border-right:none;}

.submenu li a { display:inline-block; padding:5px 0px; box-sizing:border-box; text-decoration:none; color:rgba(255,255,255, .55); font-size:14px; text-align:center; text-transform: uppercase; transition:all 0.6s ease; }
.submenu li a:hover { color:var(--gold-light); transition:all 0.2s ease; text-decoration:none; }

.submenu li.current-menu-item a { color:var(--gold-mid); }
/* ************************************** */




/* content */
#main-content { min-height:300px; padding:120px 20px 40px 20px; }
#main-content { padding-top:calc(120px + env(safe-area-inset-top)); }
#sub-content { padding:40px 0 0 0; }
/**/



/* forms */
/* mørke, halvgjennomsiktige felt som ligger på contentbox-glasset. color-scheme gjør at datovelger, rullefelt og option-lister også blir mørke */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], select, textarea { color-scheme:dark; background-color:rgba(0,0,0, .3); border:1px solid rgba(255,255,255, .15); border-radius:5px; color:rgba(255,255,255, .9); transition:all 0.8s ease; box-shadow:none; }
input[type=text]:hover, input[type=password]:hover, input[type=email]:hover, input[type=number]:hover, input[type=date]:hover, select:hover, textarea:hover { border-color:rgba(255,255,255, .3); transition:all 0.2s ease; }
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, input[type=date]:focus, select:focus, textarea:focus { background-color:rgba(0,0,0, .45); border:1px solid var(--gold-mid); box-shadow:0 0 0 3px rgba(var(--gold-rgb), .15); color:#fff; transition:all 0.3s ease; outline:none; }
input:disabled, select:disabled, textarea:disabled { background-color:rgba(255,255,255, .04); border-color:rgba(255,255,255, .08); color:rgba(255,255,255, .35); cursor:not-allowed; }
input::placeholder, textarea::placeholder { color:rgba(255,255,255, .3); }
textarea { resize:none; }

/* egen pil i lys farge - native menulist ignorerer mørk bakgrunn i Safari */
select { -webkit-appearance:none; appearance:none; padding-right:2em; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e2bd78' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75em center; background-size:12px 8px; background-origin:border-box; }
select > option { background:#222; color:rgba(255,255,255, .9); }

/* nettleserens autofyll farger ellers feltet lyst - skyggen maler over */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color:rgba(255,255,255, .9); -webkit-box-shadow:0 0 0 1000px #2a2a2a inset; caret-color:#fff; transition:background-color 9999s ease; }

[type=checkbox] { margin:0; accent-color:var(--gold-mid); }
[type=checkbox]+label, label { display:inline-block; font-size:1em; margin:0; box-sizing:border-box; width:calc(100% - 20px); color:rgba(255,255,255, .7); }

.input_error, .input_error:focus { border:1px solid #e0443e !important; }
.input_label { padding-top:7px;  }


.switch { display:inline-block; margin-bottom:0; }
input:checked~.switch-paddle { background:linear-gradient(254deg, #1dc4e9, #049df5);  }
.switch-label { position:relative; top:-9px; display:inline-block; line-height:28px; padding-left:10px; }


.button, .button[disabled], .button[disabled]:hover, .button[disabled]:hover, a.button { position:relative; margin:0; background:var(--gold-mid); background-image:var(--gold-gradient); color:var(--gold-ink); border-radius:5px; border:1px solid var(--gold-deep); box-shadow:inset 0 1px 0 rgba(255,255,255, .45); transition:all 0.6s ease; }
.button:hover, .button:focus { background-image:var(--gold-gradient-hover); color:var(--gold-ink); transition:all 0.2s ease; outline:none; }
.button-shadow { box-shadow:0 0 5px 5px rgba(0,0,0,0.2); }

.button-on, a.button-on { background:var(--color-accent); color:#000; }
.button-arrow-down::after { content:''; display:inline-block; position:absolute; bottom:-10px; left:calc(50% - 10px); width:20px; height:20px; border:solid var(--color-accent); border-width:0 3px 3px 0; transform: rotate(45deg); }

.button-red, a.button-red { background:rgba(221,0,0, .12); color:#d00; border-color:#d00; box-shadow:none; } /* egen bakgrunn, ellers slår gull-gradienten fra .button gjennom */
.button-red:hover, .button-red:focus { background:#d00; }

.button-green, a.button-green { background:rgba(0,170,0, .12); color:#0a0; border-color:#0a0; box-shadow:none; }
.button-green:hover, .button-green:focus { background:#0a0; }

.button-small, a.button-small { padding:0.4em 0.8em; font-size:0.8em;  }
/**/


/* datepicker */
.dp_wrapper { display:block; position:relative; }
.dp_icon_bg { position:absolute;top:1px; right:1px; width:35px; height:37px; box-sizing:border-box; background:#eee; border-left:1px solid #ccc; border-radius:0 5px 5px 0; text-align:center; padding-top:8px; cursor:pointer; }
.dp_icon_svg { fill:#666; transition:fill 0.6s ease; height:21px; }
.dp_icon_bg:hover > .dp_icon_svg { fill:var(--color-accent); transition:fill 0.1s ease;  }
/**/


/* notifications */
.note { background-color:transparent !important; border:none; color:#4caf51 !important; text-align:center;   }
.error{ background:transparent !important;  border:none;  color:#d00 !important; text-align:center; }
.error a, .error a:visited { color:#a00; }
.error a:hover { color:#800; }
.note i, .error i { margin-right:15px;  }
/**/



/*////////////////// responsive tables ////////////////////////////////*/

/* container */
.t-container { display:block; position:relative; overflow:hidden;}
@media only screen and ( max-width: 640px) { .t-container { margin-left:-20px; margin-right:-20px; } } /* remove body padding on table lists on small screens */
/**/

/* row */
.trow, .throw { display:flex; flex-flow: row wrap; position:relative; transition:0.6s all ease; }
/**/

/* alternate row background color */
.t-row-alt > .trow:nth-of-type(even) { background:rgba(255,255,255, .06); }
.t-row-alt > .trow:nth-of-type(odd) { background:rgba(255,255,255, .03); }
/**/

/* table cell */
.tcell { flex:1 1 0px; padding:10px; position:relative; }
.throw .tcell { font-weight:normal; background:rgba(0,0,0, .35); color:var(--gold-mid); }
.trow > .tcell:first-child, .throw > .tcell:first-child { padding-left:20px; }
.trow > .tcell:last-child, .throw > .tcell:last-child { padding-right:20px; }
/* */

/* borders */
.t-border { border:1px solid rgba(255,255,255, .12); border-radius:5px; }
@media only screen and ( max-width: 640px) { .t-border { border-radius:0px; } } /* remove body padding on table lists on small screens */

.t-row-border > .throw > .tcell, .t-row-border > .trow > .tcell { border-top:1px solid rgba(255,255,255, .07); }
.t-row-border > .trow:first-child > .tcell, .t-row-border > .throw:first-child > .tcell { border-top:none;  }

.tborder-cell .tcell { border-top:3px solid rgba(0,0,0, .25); border-right:3px solid rgba(0,0,0, .25); }
.tborder-cell .tcell:last-child { border-right:none;  }
.tborder-cell > .trow:first-child > .tcell:last-child { border-top:none;  }
/**/

/* hover effect */
.t-hover > .trow:hover { background-color:rgba(var(--gold-rgb), .12); cursor:pointer; transition:0.2s all ease; }
/**/

/* mobile table break */
@media only screen and (max-width: 550px){
    
    .t-break .throw { display:none; }
    .t-break .trow { margin-top:5px; }
    .t-break .trow, .t-break .tcell { display:block; }
    .t-break .tcell { text-align:left; }

    .t-break-label .tcell::before { position:absolute; top:0; left:0; display:block; content: attr(data-label); color:var(--gold-mid); font-size:.8em; height:100%; width:100px; background:rgba(0,0,0, .25); text-align:left; padding:10px; }
    .t-break-label .tcell { padding-left:110px !important; }
} 
/**/


/*////////////////////////////////////////////////////////////////*/


/* box */
.box-square { position:relative; padding-top:100%; }
.box-3-4 { position:relative; padding-top:125%; }
.box-content { position:absolute; top:0; left:0; width:100%; min-height:100%; box-sizing: border-box; }
/**/

/* tint hover (accent color over entire element on hover) */
.tint-hover { cursor:pointer; }
.tint-hover img { filter:grayscale(100%);  }
.tint-hover:after{ content:''; display:block; position:absolute;  top:0; bottom:0;  left:0;  right:0; opacity:0; transition:all 0.6s linear; }
.tint-hover:hover:after{  background:var(--color-accent); opacity:0.2; transition:all 0.2s linear; }
/**/

/* contentbox */
.contentbox { background:rgba(20,20,20, .45); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); box-shadow:0 4px 20px rgba(0,0,0, .15); padding:20px; color:#5d5d5d; position:relative;  }
@media only screen and ( max-width: 640px) { .contentbox { margin-left:-20px; margin-right:-20px; } } /* remove body padding on small screens */
/* kanten tegnes som en 1px gradient-ring i :after (maskert), derfor gjennomsiktig border her */
.contentbox-border { border:1px solid transparent; border-radius:5px;  }
.contentbox-border:after { content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
    background:linear-gradient(140deg, rgba(255,255,255, .55) 0%, rgba(255,255,255, .12) 35%, rgba(255,255,255, .04) 55%, rgba(255,255,255, .30) 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; }

.contentbox-blue { background:rgba(40,40,40, .45); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); box-shadow:0 4px 20px rgba(0,0,0, .15); padding:20px; color:#5d5d5d; position:relative; }
.contentbox-blue input, .contentbox-blue select, .contentbox-blue textarea { border:none; }
.contentbox-white { background: #fff; color:#555; }

.contentbox-arrow-up:before { position:absolute; display:block; content:''; border:10px solid transparent; border-bottom-color:rgba(0,0,0, .45); width:0; height:0; top:-20px; left:40px;  }
/**/

/* contentbox in list */
.t-contentbox { background:rgba(255,255,255, .05); padding:20px; color:rgba(255,255,255, .7); position:relative; }
.t-contentbox-arrow-up:before { position:absolute; display:block; content:''; border:10px solid transparent; border-bottom-color:rgba(0,0,0, .3); width:0; height:0; top:-20px; left:40px; } /* samme farge som .t-contentbox */
.t-contentbox-border { border:1px solid rgba(255,255,255, .12); border-radius:5px; }
/**/

/* toggle content */
.toggle-content { display:none; flex:none; width:100%; box-sizing:border-box; }
/**/

/* misc content elements */
.divider { border-top:1px solid rgba(0,0,0, .1); margin-top:30px; height:30px; }
/**/

/* image thumbnails and viewer */
.imagethumb-container { text-align:left; }
.imagethumb { position:relative; float:left; width:180px; height:180px; background-size:cover; background-repeat:no-repeat; background-position:center center; border:1px solid #111; margin:0 10px 10px 0; cursor:pointer; }
@media only screen and ( max-width: 640px) { .imagethumb { width:135px; height:135px; } }
.imageupload { border:1px solid transparent; }

.img-square { border:1px solid #111; width:100%; padding-top:100%; background-size:cover; background-repeat:no-repeat; background-position:center center; } /* square container 100% size */

.ow-imageview-container { position:relative; z-index:2; width: calc(100vw - 92px); max-width:1110px; }
/**/

/* ax loader */
.axloader { text-align:center; margin-top:40px; }
.axloader img { width:50px; }
.axloader-tmp { display:none; width:50px; margin-top:-15px; }
/**/

/* open window */
.ow-window { display:none; background:#111; border:1px solid #333; padding:35px; box-sizing:border-box; box-shadow:0px 0px 10px 7px rgba(0,0,0,0.3); color:#000; max-width:1200px;  }
@media only screen and ( max-width: 640px) { 
    .ow-window { padding:35px 10px 10px 10px; } 
}
.ow-content::-webkit-scrollbar { display:none; } 
.ow-closebutton { position:absolute; top:2px; right:3px; padding:0; margin:0; font-size:16px; color:#666; cursor:pointer; transition: all 0.2s ease; }
.ow-closebutton:hover { color:var(--color-accent); transition: all 0.2s ease; }
/**/

/* custom checkbox switch */
.icswitch {  position: relative;  display: inline-block;  width: 50px;  height: 20px; }
.icswitch input {   opacity: 0;  width: 0;  height: 0; }
.icslider {  position: absolute; cursor: pointer; color:#fff;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #c00; box-shadow:inset 0px 0px 3px 1px rgba(0,0,0, .3);  -webkit-transition: .4s;  transition: .4s; border-radius: 34px;  }
.icslider:before { content: "";  position:absolute; left:0px; bottom:0px; z-index:1; box-sizing: border-box; box-shadow:0 0 5px #000; border-radius: 50%; height:20px;  width:20px;   background-color: white;  -webkit-transition: .4s;  transition: .4s;  }
.icslider:after { content: attr(data-labeloff); display:inline-block; width:calc(100% - 20px); float:right; position:realtive; z-index:0; color:#fff; line-height: 20px; font-size: 12px; text-align:center; }
input:checked + .icslider {  background-color: #87c540; }
input:checked + .icslider:before {  transform: translateX(30px); }
input:checked + .icslider:after { content:attr(data-labelon); float:left; }

.icswitch.icswitch-long { width:90px; }
.icswitch.icswitch-long input:checked + .icslider:before {  transform: translateX(70px); }
/**/

/* patch (colored pathes) */
.patch { display:inline-block; background-color: #ccc; border:1px solid #666; color:#333; border-radius:3px; padding:0.2em 0.8em; box-sizing: border-box; }
.patch-accent { background-color:rgba(var(--color-accent-rgb), .2); border-color:var(--color-accent); color:var(--color-accent); }
.patch-accent2 { background-color:rgba(var(--color-accent2-rgb), .2); border-color:var(--color-accent2); color:var(--color-accent2); }
.patch-green { background-color:#ebf8a4; border-color:#a2d246; color:#508811; }
.patch-orange { background-color:#ffe1c3; border-color:#ff9900; color:#aa4400; }
.patch-red { background-color:#ffc0cb; border-color:#800000; color:#800000; }

.patch span { color:inherit; }
/**/

/* grafer */
.diagram-container { position:relative; height:400px;border-bottom:1px solid rgba(0,0,0, .2); }
@media only screen and ( max-width: 640px) { .diagram-container { height:300px; } }
.diagram-itembg { display:block; content:' '; position:absolute;bottom:0; width:100%; max-width:40px; height:100%; background:rgba(0,0,0,.2); border-radius: 5px 5px 0 0;  }
.diagram-item { position:absolute;bottom:0; width:8%; max-width:40px; background:rgba(var(--gold-rgb), .3); border-radius: 5px 5px 0 0; transform-origin:100% 100%; animation:1s ease-out 0s 1 diagram-height; cursor:pointer; }
.diagram-subitem { position:absolute;bottom:0; width:100%; background:rgba(var(--color-accent-rgb), .3); }
.diagram-txt { position:absolute; left:calc(50% - 10px); bottom:0; color:#333; font-size:.8em; transform:rotate(-90deg); transform-origin:0 0; white-space: nowrap; transition:all 1s ease;  }
.diagram-txt-horizontal { position:absolute; left:0; bottom:0; width:100%; text-align:center; font-size:10px; white-space: nowrap; transition:all 1s ease;  }
.diagram-txt-top { position:absolute; left:0; top:-20px; width:100%; text-align:center; font-size:.8em; white-space: nowrap; transition:all 1s ease;  }
.diagram-label { position:absolute; left:0; bottom:-20px; width:100%; text-align:center; font-size:.8em; white-space: nowrap; transition:all 1s ease;  }
.diagram-comparison { position:absolute; left:0px; width:8%; max-width:40px; height:15px; border-radius:5px; background:rgba(var(--gold-rgb), .8); font-size:10px; text-align:center; color:#000; animation:1s ease-out 0s 1 diagram-height; }
@keyframes diagram-height {
    0% { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}
/**/

/* animations */
@keyframes ani-width {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}
/**/


/* circular graph */
.chart-pieopen { position:relative; display:inline-block; } /* container */
.chart-pieopen svg {  display: block;  max-width: 100%; } /* svg element */
.chart-pieopen svg path:nth-child(1) {  fill: none;  stroke: #555;  stroke-width: 3.8; } /* full circle */
.chart-pieopen svg path:nth-child(2)  {  fill: none;  stroke-width: 2.8; stroke:var(--color-accent); stroke-linecap: round;  animation: chart-pieopen-ani 1s ease-out forwards; } /* filled circle */

@keyframes chart-pieopen-ani {
  0% { stroke-dasharray: 0 100; }
}

.chart-pie-label { position:absolute; top:50%; transform: translateY(-50%); left:0; right:0; text-align:center;} /* label inside circle */
/**/

/* ukesoversikt */
.uo-oppdrag-wrapper { box-sizing:border-box; float:left; }
.uo-oppdrag { box-sizing:border-box; border-radius:3px; background:rgba(255,255,255, .05); padding:5px; margin:2px 4px 0 0; border:1px solid #444; }
.uo-ingenoppdrag { background:rgba(255,255,255, 0.03); color:rgba(255,255,255,0.4); }
.uo-fravar { background:rgba(200, 0, 0, .4); color:rgba(255,255,255,.8); }
.uo-antall-biler { display:inline-block; float:right;  background:#eee; color:#666; text-align:center; width:20px; height:20px; border-radius:20px; margin-right:4px; padding-top:1px; }
.uo-antall-biler-green { background-color:#d4ebd6;  }
.uo-antall-biler-blue { background-color:rgba(var(--color-accent-rgb), .2);  }
/**/

/* image holders (with correct aspect ratio) */
.imgholder { width:100%; padding-top:100%; position:relative; }
.img-21 { padding-top:50%; }
.img-169 { padding-top:56.25%; }
.img-43 { padding-top:75%; }
.img-11 { padding-top:100%; }
.imgholder img { width:100%; height:100%; object-fit:cover; position:absolute; top:0; }

.img-noimg { width:100%; height:100%; position:absolute; top:0; background:rgba(0,0,0, .05); color:rgba(0,0,0, .03); text-align:center; font-size:150px; line-height:1em; padding:0; }
.img-noimg svg { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); }
/**/

/* footer*/
.footer-credits { text-align:center; font-size:0.8em;  margin-top:80px; padding-bottom:60px; }
.footer-credits  img { float:left; width:30px; margin-right: 10px; }
.footer-content { width:210px; margin:0 auto; }
.footer-content div { color:rgba(0,0,0, .2);}
.footer-content div a, .footer-content div a:visited { color:rgba(0,0,0, .5); transition:all 0.6s ease; }
.footer-content div a:hover { color:var(--color-accent);  transition:all 0.2s ease; }
/**/

/* background classes */
.bg-accent { background:var(--color-accent); }
/**/


/* text classes */
.text-xxs { font-size:10px; }
.text-xs { font-size:12px; }
.text-s { font-size:14px; }
.text-l { font-size:18px; }
.text-xl { font-size:24px; }
.text-xxl { font-size: 38px; }
.text-right { text-align: right;  }
.text-center { text-align: center;  }
.text-justify { text-align: justify;  }
.text-nowrap { white-space: nowrap; }
.text-bold { font-weight:bold; }

.text-yellow { color:var(--color-accent); }
.text-green { color:#00a846; }
.text-white { color:rgba(255,255,255,1);  }
.text-white-fade { color:rgba(255,255,255,0.6);  }
.text-white-superfade { color:rgba(255,255,255,0.3);  }
.text-black-fade { color:rgba(0,0,0, .4);  }
.text-black-superfade { color:rgba(0,0,0, .2);  }
.text-blue { color:var(--color-accent);  }
.text-lightblue { color:#b5d8ef; }
.text-red { color:#a00;  }
/**/

/* Tilgjengelig allikevel i kjøreplan */
.allikevel-icon-red {
    float: right;
    margin: 3px 7px 0 0;
    color:#d00;
    border-color:#d00;
    cursor: pointer;
}
.allikevel-icon-red:hover {
    /* background:#d00; */
    color: #d00;}

.allikevel-icon-green {
    float: right;
    margin: 3px 7px 0 0;
    color:#fff;
    border-color:#fff;
    cursor: pointer;
}
.allikevel-icon-green:hover {
    /* background:#0a0; */
    color: #fff;
}
/**/