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


/* body */
body { position:relative; background:#eaeaea url('../images/background.jpg') no-repeat; background-position: center 0px; width:100%; background-size:100% auto; height:100%; padding:0; margin:0;  }
@media only screen and ( max-width: 1920px) { body { background-size: auto auto; } }
/**/

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

h1 { font-size:26px; color:var(--color-accent); margin-bottom:50px; }
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(--color-accent); transition: all 0.6s ease; }
a:hover { color:var(--color-accent); transition: all 0.2s ease; text-decoration:underline; }
/**/

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


/* header */
.section-header { position:fixed; z-index:1000; background:#0399e5; 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 { 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(--color-accent); position:relative; padding:5px; float:right; margin-top:2px; border-radius:2px; font-size:18px; color:#fff; cursor:pointer; transition:all 0.6s ease; }
.header-menu-bm .bm-menubutton:hover { background:#fff; color:var(--color-accent); transition:all 0.2s ease;}

.header-menu-bm .bm-sidebar-content { padding-top:env(safe-area-inset-top); background:#eaeaea; 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, .3); color:var(--color-accent); }
.header-menu-bm li a { position:relative; display:block; box-sizing:border-box; padding:10px 10px 10px 25px; color:rgba(0,0,0, .4); border-bottom:1px solid rgba(0,0,0, .03); font-weight:700; transition:all 0.6s ease; }
.header-menu-bm li a:hover { color:rgba(0,0,0, .8); background:rgba(0,0,0, .08); text-decoration:none; transition:all 0.2s ease; }
.header-menu-bm li.current-menu-item a { background:var(--color-accent); color:#fff; }
.header-menu-bm li.current-menu-item a:before { position:absolute; display:block; content:''; border:8px solid transparent; border-left-color:#525252; 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 #ddd; 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:#666; font-size:14px; text-align:center; text-transform: uppercase; transition:all 0.6s ease; }
.submenu li a:hover { color:var(--color-accent); transition:all 0.2s ease; text-decoration:underline;  }

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




/* 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 */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], select, textarea  { background:rgba(255,255,255,0.7); border:1px solid rgba(0,0,0, .2); border-radius:5px; color:#333; transition:all 0.8s ease; box-shadow: none; }
textarea { resize:none; }
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:rgba(255,255,255,1); border:1px solid var(--color-accent); box-shadow:none; transition:all 0.3s ease; outline: none; }
select { -webkit-appearance: menulist;  }
select > option { color:#222; }
input::placeholder, textarea::placeholder { color:rgba(0,0,0, .2);  }
input:disabled {  color:rgba(255,255,255,0.4); }

[type=checkbox] { margin:0; }
[type=checkbox]+label, label { display:inline-block; font-size:1em; margin:0; box-sizing:border-box; width:calc(100% - 20px);  }

.input_error, .input_error:focus { border:1px solid #af0303 !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:rgba(var(--color-accent-rgb), 0.1); color:var(--color-accent); border-radius:5px; border:1px solid var(--color-accent); transition:all 0.6s ease; }
.button:hover, .button:focus { background: var(--color-accent); color:#fff; 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 { color:#d00; border-color:#d00; }
.button-red:hover, .button-red:focus { background:#d00; }

.button-green, a.button-green { color:#0a0; border-color:#0a0; }
.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:#eee;  }
.t-row-alt > .trow:nth-of-type(odd) { background:#f3f3f3;  }
/**/

/* table cell */
.tcell { flex:1 1 0px; padding:10px; position:relative; }
.throw .tcell { font-weight:normal; background:#ddd; color:var(--color-accent); }
.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 #ddd; 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(55, 80, 144, 0.1);  }
.t-row-border > .trow:first-child > .tcell, .t-row-border > .throw:first-child > .tcell { border-top:none;  }

.tborder-cell .tcell { border-top:3px solid #f9f9f9; border-right:3px solid #f9f9f9;  }
.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:#ddd; 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(--color-accent); font-size:.8em; height:100%; width:100px; background:rgba(0,0,0, .06); 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:#f3f3f3; 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 */
.contentbox-border { border:1px solid #e0e0e0; border-radius:5px;  }

.contentbox-blue { background: var(--color-accent); color:#fff; border-color: var(--color-accent); }
.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:#f3f3f3; width:0; height:0; top:-20px; left:40px;  }
/**/

/* contentbox in list */
.t-contentbox { background:#e6e6e6; padding:20px; color:#5d5d5d; position:relative;  }
.t-contentbox-arrow-up:before { position:absolute; display:block; content:''; border:10px solid transparent; border-bottom-color:#e6e6e6; width:0; height:0; top:-20px; left:40px;  }
.t-contentbox-border { border:1px solid rgba(255,255,255,.9); 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:#fff; 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(--color-accent-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(2, 153, 229, .8); font-size:10px; text-align:center; color:#fff; 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: #e5e5e5;  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:#fff; padding:5px; margin:2px 4px 0 0; border:1px solid #ddd; }
.uo-ingenoppdrag { background:rgba(255,255,255, .8); color:rgba(0,0,0,.2); }
.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-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;
}
/**/