/* variables */
:root{
    --color-accent: #2C3A52;
    --color-accent-rgb: 44, 58, 82;

    --color-accent2: #D6A388;
    --color-accent2-rgb: 214, 163, 136;
    
}
/**/


/* html, body */
html { background-color:var(--color-accent); height:auto !important; }
body { position:relative; background:#eaeaea; background-position: center 0px; width:100%; background-size:100% auto; height:100%; min-height:100dvh; padding:0; margin:0;  }
@media only screen and ( max-width: 1920px) { body { background-size: auto auto; } }
/**/

/* text */
body, div, p, span, input, textarea { font-family:'Inter', sans-serif; font-weight: 400; color:rgba(0,0,0, 0.8); }
p { margin:0; }
body { font-size: 16px; position:relative; }

h1 { font-size:24px; font-weight: 700; color:var(--color-accent); margin-bottom:50px; }
h2 { font-size:18px; font-weight: 700; color:var(--color-accent); margin:0; }
h1, h2, h3, h4, h5 { font-family:'Inter', sans-serif;  }

a { color:var(--color-accent); transition: all 0.6s ease; text-decoration: none; }
a:hover { color:var(--color-accent); transition: all 0.2s ease; text-decoration:underline; }
/**/

/* tables */
table { border-collapse:collapse; width:100%; }
/**/

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


/* header and layout */
@media only screen and ( max-width: 61.999em) { 

    .section-header { position:fixed; z-index:1000; background:var(--color-accent); padding:10px 20px 10px 20px; width:100%; box-sizing:border-box; box-shadow:0 0 15px 5px rgba(0,0,0, .3); transition:height 0.8s ease; }
    .section-header { padding-top:calc(5px + env(safe-area-inset-top)); } /* fix stupid bus pocket on iphone x+ */
    .header-container { position:relative; border:none; }
    .logo_desktop { display:none;}
    .logo_mobile { float:left; width:170px; margin-top:5px; transition:all 0.8s ease; line-height:0; }
    .header-info { display:none; 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 { display:inline-block; background:var(--color-accent); position:relative; padding:5px 10px 5px 10px; float:right; margin-top:8px; border:0; border-radius:2px; font-size:25px; color:#fff; cursor:pointer; transition:all 0.6s ease; appearance: none; outline:0; line-height:1; }
    .header-menu-bm .bm-menubutton:before { content:'MENY '; font-size:14px; color:var(--color-accent2);position:relative; top:-4px; left:-3px;  }
    .header-menu-bm .bm-menubutton:hover { background:rgba(255,255,255,.2); transition:all 0.2s ease;}

    .header-login, .header-login:visited { display:inline-block; position:absolute; top:11px; right: 90px; padding:5px; border-radius:3px; background:rgba(255,255,255,.2); color:rgba(255,255,255,.7); text-decoration:none; }
    .header-login:hover, .header-login:focus { text-decoration:none; }

    .header-company a, .header-company a:visited { position:absolute; top:10px; right:100px; display:inline-block; box-sizing:border-box; width:32px; height:32px; border-radius:32px; padding:8px; color:rgba(255,255,255,.5); background:rgba(255,255,255,.1); text-align:center; text-decoration:none; font-size:13px; font-weight:700; }


    /* mobile menu */
    .header-menu-dt { display:none; }
    .header-menu-bm .bm-sidebar-content { padding-top:env(safe-area-inset-top); background:var(--color-accent); overflow-y: scroll; }
    .header-menu-bm ul { list-style-type:none; margin:0; padding:0; } 
    
    li.menu-item a { position:relative; display:block; box-sizing:border-box; padding:10px 10px 10px 25px; color:rgba(255,255,255, .4); border-bottom:1px solid rgba(0,0,0, .03); transition:all 0.6s ease; }
    li.menu-item a:hover { color:rgba(255,255,255, .8); background:rgba(0,0,0, .2); text-decoration:none; transition:all 0.2s ease; }
    li.menu-item a > svg { width:23px; }
    li.menu-item-subselected a { color:var(--color-accent2); }
    li.current-menu-item a, li.current-menu-item a:hover { background:var(--color-accent2); color:var(--color-accent); }
    /* li.current-menu-item a:before { position:absolute; display:block; content:''; border:8px solid transparent; border-left-color:#474747; width:0; height:0; top:13px; left:0px; } */

    li.submenu-item a { position:relative; display:block; box-sizing:border-box; padding:5px 10px 5px 45px; color:rgba(255,255,255, .4); font-size:0.9em; border-bottom:1px solid rgba(0,0,0, .03); transition:all 0.6s ease; }
    li.submenu-item a:hover { color:rgba(255,255,255, .8); background:rgba(0,0,0, .2); text-decoration:none; transition:all 0.2s ease; }
    li.current-submenu-item a, li.current-submenu-item a:hover { background:var(--color-accent2); color:var(--color-accent); }
    /* li.current-submenu-item a:before { position:absolute; display:block; content:''; border:8px solid transparent; border-left-color:#474747; width:0; height:0; top:7px; left:0px; } */

    li.menu-spacer { height:20px; border-bottom:1px solid rgba(255,255,255,0.1); }
    /**/

    #main-content { min-height:calc(100vh - 120px - env(safe-area-inset-top)); padding:calc(80px + env(safe-area-inset-top)) 0px 40px 0px; }
    .main-subcontent { padding:0 20px 0 20px; } /* content directly in body that need left/right padding on mobile, but zero padding on desktop */
    .main-fullcontent { margin:0; padding:0; } /* content directly in body that need zero padding and zero margins (100% width) */
    .main-fullcontent.main-fullcontent-top { margin-top:-20px; }
    .sticky-top { top:calc(60px + env(safe-area-inset-top)); }

}


@media only screen and ( min-width: 62em) { 

    .section-header { display:inline-block; position:absolute; z-index:1; background:var(--color-accent); min-height:100vh; height:100%; width:300px; box-sizing:border-box; }
    .header-container { position:relative; height:100%; border:none; }
    .logo_mobile { display:none; }
    .logo_desktop { padding:35px 40px 10px 40px; line-height:0; }
    .header-info { position:absolute; bottom:15px; left:15px; right:15px; background:rgba(0,0,0,.2); color:rgba(255,255,255, .7); text-align:left; padding:3px; border-radius:3px; font-size:0.8em; }
    .header-info a, .header-info a:visited, .header-info a:hover { color:rgba(255,255,255, .7); text-decoration: none; }
    
    .header-company { display:none; }
    
    .header-login { display:none; }
    /* desktop menu */
    .header-menu-bm .bm-menubutton { display:none; }
    .header-menu-dt ul { list-style-type:none; margin:0; padding:0; } 
    
    li.menu-item a { position:relative; display:block; box-sizing:border-box; padding:10px 10px 10px 25px; color:rgba(255,255,255, .4); border-bottom:1px solid rgba(0,0,0, .05); transition:all 0.6s ease; }
    li.menu-item a:hover { color:rgba(255,255,255, .8); background:rgba(0,0,0, .2); text-decoration:none; transition:all 0.2s ease; }
    li.menu-item-subselected a { color:var(--color-accent2); }
    li.menu-item a > svg { width:23px; }
    li.current-menu-item a, li.current-menu-item a:hover { background:var(--color-accent2); color:var(--color-accent); }
    li.current-menu-item a:before { position:absolute; display:block; content:''; border:8px solid transparent; border-left-color:var(--color-accent2); width:0; height:0; top:12px; right:-15px; }

    li.submenu-item a { position:relative; display:block; box-sizing:border-box; padding:5px 10px 5px 45px; color:rgba(255,255,255, .4); font-size:.9em; border-bottom:1px solid rgba(0,0,0, .05); transition:all 0.6s ease; }
    li.submenu-item a:hover { color:rgba(255,255,255, .8); background:rgba(0,0,0, .2); text-decoration:none; transition:all 0.2s ease; }
    li.current-submenu-item a, li.current-submenu-item a:hover { background:var(--color-accent2); color:var(--color-accent); }
    li.current-submenu-item a:before { position:absolute; display:block; content:''; border:8px solid transparent; border-left-color:var(--color-accent2); width:0; height:0; top:7px; right:-15px; }

    li.menu-spacer { height:20px; }
    /**/

    #main-content { min-height:calc(100vh - 130px); padding:calc(1px + env(safe-area-inset-top)) 20px 40px 320px; max-width:1920px; }
    .main-subcontent { padding:0; } /* content directly in body that need left/right padding on mobile, but zero padding on desktop */
    .main-fullcontent { margin:0px -20px 0 -20px; padding:0; } /* content directly in body that need zero padding and zero margins (100% width) */
    .main-fullcontent.main-fullcontent-top { margin-top:-1px; }
    .sticky-top { top:0; }

    .footer-credits { margin-left:300px; max-width:1920px; }

}
/**/

/* header notifications */
@media only screen and ( max-width: 61.999em) { 
    .header-notifications {  position:fixed; top:0px; z-index:1000; background-color:#ffe1c3; border-color:#ff9900; color:#aa4400; border:1px solid; width:100%; box-sizing:border-box; margin-top:73px; padding:10px; }
}
@media only screen and ( min-width: 62em) { 
    .header-notifications {  background-color:#ffe1c3; border-color:#ff9900; color:#aa4400; border:1px solid; width:calc(100% - 320px); box-sizing:border-box; margin:0 0 0 320px; padding:10px; }
}
/**/

/* menu notifications */
.menu-notifications { display:inline-block; background:red; color:#fff; padding:3px; font-size:.8em; text-align:center; border-radius:10px; min-width:15px; float:right; }
@media only screen and ( min-width: 62em) { .header-menu-notifications { display:none;  } }
@media only screen and ( max-width: 61.999em) { .header-menu-notifications {  display:block; position:absolute; top:-5px; right:-10px; } }
/**/



/* fullscreen content */
.fullscreen { margin:-20px -20px 0 -320px; }
@media only screen and ( max-width: 61.999em) { 
    .fullscreen {margin:-80px -20px 0 -20px; }
}
/**/

/* fillcontent */
/*
.fillcontent { background:green; border:1px solid red; margin:-20px -20px -40px -40px; height:100vh; box-sizing:border-box; }
@media only screen and ( max-width: 61.999em) { 
    .fillcontent { margin:-5px -20px -40px -20px; height:calc(100vh - 75px); height: -webkit-fill-available; }
}
*/
.fillcontent { position:absolute; top:0px; right:0px; bottom:0px; left:320px;  }
@media only screen and ( max-width: 61.999em) { 
    .fillcontent { top:calc(75px + env(safe-area-inset-top)); right:0; bottom:0; left:0; }
}
/**/


/* footer*/
.footer-credits { text-align:center; font-size:0.8em;  margin-top:20px; padding-bottom:20px;}
.footer-credits  img { float:left; width:30px; margin-right: 10px; }
.footer-content { width:250px; 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; }
/**/

/* *** menu company *** */
.menucompany { position:relative; color:rgba(255,255,255,.5); text-transform:uppercase; font-weight:700; text-align:center; line-height:1em; font-size:14px; padding:5px; margin:0 0 -20px 0; z-index:1; cursor:pointer; }
.menucompany-orgnr { color:rgba(255,255,255,.3); text-transform:uppercase; font-weight:500; font-size:0.7em; }
/**/


/* *********** menu categories **************** */
.menucat { position:relative; background:linear-gradient(to bottom, var(--color-accent), rgba(var(--color-accent2-rgb),.1)); height:70px; margin:0px 0 15px 0;}
.menucat ul { position:absolute; bottom:0px; left:15px; z-index:1; list-style-type: none; margin:0; padding:0; }
.menucat li { display:inline-block; padding:0; }
.menucat li a { position:relative; display:inline-block; padding:8px 20px 0 20px; height:30px; box-sizing:border-box; text-decoration:none; margin: 0 -5px; z-index:1; color:var(--color-accent2); font-size:16px; text-align:center; text-transform: uppercase; cursor:pointer; }
.menucat li a::before { content:''; position:absolute; top:0; right:0; bottom: 0; left:0; z-index:-1; border:1px solid #232F42; border-bottom:none; border-radius:5px 5px 0 0; background:#4F5467; color:#fff; transform:perspective(3px) rotateX(1deg); transform-origin:bottom; transition:all 0.8s ease; }
.menucat li a:hover::before { background:#232F42; transition:all 0.2s ease;  }
.menucat li a > span { display:none; }

.menucat li.menucat-selected a {  z-index:2; color:var(--color-accent2); font-weight:bold; }
.menucat li.menucat-selected a::before { background:var(--color-accent); transform:perspective(5px) rotateX(1deg); }
.menucat li.menucat-selected a > span { display:inline-block; color:var(--color-accent2); margin:0 0 0 5px; font-size:12px; }
/**/


/* *********** submenu (tabs) ********************** */
.submenu { position:relative; z-index:1; background:#fff; border-bottom:1px solid #ccc; margin:-20px -20px 30px -40px; padding:15px 0 0 0; }
.submenu ul { list-style-type: none; margin:0 0 0 50px; padding:0 0 0 0; }
.submenu li { display:inline-block;  }
.submenu li a { position:relative; display:inline-block; padding:15px 20px 0 20px; height:40px; box-sizing:border-box; text-decoration:none; margin: 0 -5px; z-index:1; color:#666; font-size:14px; text-align:center; text-transform: uppercase; }
.submenu li a::before { content:''; position:absolute; top:0; right:0; bottom: 0; left:0; z-index:-1; border:2px solid #ccc; border-bottom:none; border-radius:5px 5px 0 0; background:#ddd; transform:perspective(3px) rotateX(1deg); transform-origin:bottom; transition:all 0.6s ease; }
.submenu li a:hover::before { background:#eee; transition:all 0.2s ease;  }
.submenu li.current-menu-item a {  z-index:2; color:var(--color-accent); }
.submenu li.current-menu-item a::before {  bottom:-1px; background:#eaeaea; }
/**/

/* content */
#sub-content { padding:40px 0 0 0; }
/**/



/* forms */
/*
input[type=text], input[type=password], input[type=search], input[type=email], input[type=number], input[type=date], select, textarea  { 
    display:block; box-sizing:border-box; width:100%; padding:0.5rem; line-height:1.2rem;  font-size:1rem; background-color: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; 
}

input[type=text]:focus, input[type=password]:focus, input:focus[type=search], input[type=email]:focus,  input[type=number]:focus,  input[type=date]:focus, select:focus, textarea:focus  { 
    background-color:rgba(255,255,255,1); border:1px solid var(--color-accent2); box-shadow:none; transition:all 0.3s ease; outline: none; 
}
*/
input, select, textarea  { display:block; box-sizing:border-box; width:100%; padding:0.5em; line-height:1.2em;  font-size:1rem; background-color: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; }
input:focus, select:focus, textarea:focus  { background-color:rgba(255,255,255,1); border:1px solid var(--color-accent2); box-shadow:none; transition:all 0.3s ease; outline: none; }
textarea { resize:none; }
select {       
    appearance: none;
    background-color: #fff;
    /*background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBmaWxsPSJncmF5IiBkPSJNMTAsMjMyLjdsNDkwLDUzNC41bDQ5MC01MzQuNUgxMHoiIC8+DQo8L3N2Zz4=);*/
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path fill='%23aaaaaa' d='M10,232.7l490,534.5l490-534.5H10z'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 5px);
    background-size: 10px; 
}
select > option { color:#222; }
input::placeholder, textarea::placeholder { color:rgba(0,0,0, .2);  }
input:disabled, select:disabled, textarea:disabled {  color:#666; background:rgba(255,255,255,0.3); opacity:1;}

[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; font-size:14px;  }


.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 { display:inline-block; vertical-align:middle; padding:.6em 1em; font-family:'Inter', sans-serif; font-size:.8em; font-weight:500; line-height:1; text-align:center; text-transform: uppercase; cursor:pointer; position:relative; margin:0; background:#d4d5d9; color:var(--color-accent); border-radius:5px; border:1px solid var(--color-accent); transition:all 0.6s ease; }
.button[disabled], .button[disabled]:hover, .button[disabled]:hover { cursor:default; opacity:0.5; } /* disabled button */
.button i { font-size: 0.8rem; }
.button:hover, .button:focus { background: var(--color-accent); color:#fff; transition:all 0.2s ease; outline:none; text-decoration: 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:#fff; }
.button-arrow-down::after { content:''; display:inline-block; position:absolute; bottom:-5px; left:calc(50% - 5px); width:5px; height:5px; border:solid var(--color-accent2); border-width:0 5px 5px 0; transform: rotate(45deg); }

.button-red, a.button-red { background:rgba(200,0,0, 0.1); color:rgba(200,0,0,1); border-color:rgba(200,0,0,1); }
.button-red:hover, .button-red:focus { background:rgba(200,0,0,1); }

.button-green, a.button-green { background:rgba(47,155,75, 0.1); color:rgba(47,155,75,1); border-color:rgba(47,155,75,1); }
.button-green:hover, .button-green:focus { background:rgba(47,155,75,1); }

.button-accent2, a.button-accent2 { background:#E3CEC3; color:var(--color-accent2); border-radius:5px; border:1px solid var(--color-accent2); }
.button-accent2:hover, .button-accent2:focus { background: var(--color-accent2); }

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

/* tinyMCE style */
.tox-tinymce { border:1px solid rgba(0,0,0, .1) !important;  }
.tox-edit-area::before { border:none !important; }
/**/

/* breadcrumb */
.breadcrumb { margin-top:-50px; margin-bottom:30px; color:var(--color-accent2); font-size:14px; }
.breadcrumb a, .breadcrumb a:visited { color:var(--color-accent2); }
.breadcrumb svg { color:rgba(var(--color-accent-rgb), .3); }
/**/

/* 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, .error { background:transparent !important; border:none; text-align:center; font-size:14px; }
.note i, .error i { margin-right:15px;  }

.note { color:#4caf51 !important; }
.error{ color:#d00 !important; }
.error a, .error a:visited { color:#a00; }
.error a:hover { color:#800; }
/**/



/*////////////////// 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;  }
.t-darkmode > .trow:nth-of-type(even) { background:rgba(255,255,255,.2);  }
.t-darkmode > .trow:nth-of-type(odd) { background:rgba(255,255,255,.1); ;  }
.t-row-alt > .trow.trow-green:nth-of-type(even) { background-color:rgba(0, 168, 70, .11) !important; }
.t-row-alt > .trow.trow-green:nth-of-type(odd) { background-color:rgba(0, 168, 70, .08) !important; }
/**/

/* 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; }
.t-darkmode.t-border { border:1px solid rgba(255,255,255, .25); }
@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; box-sizing:border-box; }
    .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:#e6e6e6; margin:0; padding:20px; color:#5d5d5d; position:relative; box-sizing:border-box;  }
/*
@media only screen and ( max-width: 640px) { 
    .contentbox { margin-left:-20px; margin-right:20px; } 
    .contentbox-retainpadding { margin:0; } 
}
*/
.contentbox-border { border:1px solid #d5d5d5; 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:#e0e0e0; width:0; height:0; top:-20px; left:40px;  }
/**/

/* contentbox in list */
.t-contentbox { background:#EAEAEA; 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;  }
/**/

/* contentbox tabs */
.cbtabs-container { position:relative; }
.cbtabs { position:absolute; top:-30px; z-index:1; margin:0; padding:0; }
.cbtabs ul { list-style-type: none; margin:0; padding:0; }
.cbtabs li { display:inline-block; padding:0; }
.cbtabs li a { position:relative; display:inline-block; padding:10px 20px 0 20px; height:30px; box-sizing:border-box; text-decoration:none; margin: 0 -5px; z-index:1; color:#666; font-size:12px; text-align:center; text-transform: uppercase; cursor:pointer; }
.cbtabs li a::before { content:''; position:absolute; top:0; right:0; bottom: 0; left:0; z-index:-1; border:1px solid #bbb; border-bottom:none; border-radius:5px 5px 0 0; background:#ccc; color:#222; transform:perspective(3px) rotateX(1deg); transform-origin:bottom; transition:all 0.6s ease; }
.cbtabs li a:hover::before { background:#ddd; transition:all 0.2s ease;  }
.cbtabs li.current-tab-item a {  z-index:2; color:var(--color-accent); font-weight:bold; }
.cbtabs li.current-tab-item a::before {  bottom:-1px; background:#eaeaea; }

.cbtabs li.tab-item-transparent a {  color:var(--color-accent); font-weight:bold; }
.cbtabs li.tab-item-transparent a::before {  background:none; border:none; }
/**/

/* 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:120px; height:120px; 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:120px; height:120px; } }
.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; }
/**/


/* image holders (with correct aspect ratio) */
.imgholder { width:100%; padding-top:100%; position:relative; overflow:hidden; }
.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-center { object-position:center center; }
.img-noimg { width:100%; height:100%; padding:20%; box-sizing:border-box; position:absolute; top:0; background:rgba(0,0,0, .05); color:rgba(0,0,0, .03); }
/**/

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


/* 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:0; 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-accent > .icslider { background-color:var(--color-accent); }
.icswitch.icswitch-accent > .icslider:after { color:#fff; }
.icswitch.icswitch-accent > input:checked + .icslider { background-color:var(--color-accent2); }
.icswitch.icswitch-accent > input:checked + .icslider:after { color:#fff;; }

.icswitch.icswitch-short { width:40px; }
.icswitch.icswitch-short input:checked + .icslider:before {  transform: translateX(20px); }

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

input:disabled + .icslider { opacity:.5; cursor:default; }
/**/

/* custom radio buttons */
.icradio {  display:inline; -webkit-user-select: none;  -moz-user-select:none;  -ms-user-select:none;  user-select:none; }
.icradio-patch { display:inline; border:1px solid rgba(0,0,0,.1); background:rgba(0,0,0,.05); border-radius:1em; padding:2px 1em 2px 2em; position:relative;  cursor:pointer; transition:all 0.6s ease;}
.icradio input {  position:absolute;  opacity:0;  cursor:pointer; } /* Hide the browser's default radio button */
.icradio-checkmark {  position:absolute;  top:3px;  left:3px;  height:calc(1em + 2px);  width:calc(1em + 2px);  background-color:#eee;  border-radius:50%; transition:all 0.6s ease; } /* Create a custom radio dot */

.icradio-checkmark:after {  content: "";  position: absolute;  display: none; } /* Create the indicator (the dot/circle - hidden when not checked) */
.icradio .icradio-checkmark:after { top:50%; left:50%; transform: translateX(-50%) translateY(-50%); width:.9em; height:.9em; border-radius:50%; background:var(--color-accent2); } /* Style the indicator (dot/circle) */

.icradio:hover .icradio-patch { background:rgba(var(--color-accent-rgb), .1); border:1px solid var(--color-accent); color:var(--color-accent); transition:all 0.1s ease; }
.icradio:hover input ~ .icradio-patch > .icradio-checkmark {  background-color: rgba(var(--color-accent-rgb),.2); transition:all 0.1s ease; }

.icradio input:checked ~ .icradio-patch { background:var(--color-accent); color:#fff; }
.icradio input:checked ~ .icradio-patch > .icradio-checkmark {  background-color: rgba(255,255,255, 1); }
.icradio input:checked ~ .icradio-patch > .icradio-checkmark:after {  display: block; } /* Show the indicator (dot/circle) when checked */
/**/

/* grafer */
.diagram-container { position:relative; display:flex; gap:2px; align-items:flex-end; 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:relative; background:rgba(var(--color-accent-rgb), .2); 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), .2); border-radius: 5px 5px 0 0; }
.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:9px; white-space: nowrap; transition:all 1s ease;  }
.diagram-txt-top { position:absolute; left:0; top:2px; width:100%; text-align:center; font-size:9px; white-space: nowrap; transition:all 1s ease;  }
.diagram-label { position:absolute; left:0; bottom:-20px; width:100%; text-align:center; font-size:9px; 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); }
}
/**/


/* 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-heat0 { background:#9cd463; color:#fff; border-color:#9cd463;  }
.patch-heat1 { background:#2a8540; color:rgba(255,255,255,.6); border-color:#2a8540;  }
.patch-heat2 { background:#ce8828; color:rgba(255,255,255,.6); border-color:#ce8828;  }
.patch-heat3 { background:#9a291f; color:rgba(255,255,255,.6); border-color:#9a291f;  }
.patch span { color:inherit; }
/**/

/* sjekkliste - statuspatch */
.slstatus { display:inline-block; font-size:14px; text-align:center; width:100%; max-width:320px; background-color: #ccc; border:1px solid #666; color:#333; border-radius:3px; padding:0.2em 0.8em; box-sizing: border-box; }

.slstatus-ok { background:#2a8540; color:rgba(255,255,255, 0.7); border-color:#2a8540;   }
.slstatus-avvik1 { background:#ce8828; color:rgba(255,255,255, 0.7); border-color:#ce8828;  }
.slstatus-avvik2 { background:#9a291f; color:rgba(255,255,255, 0.7); border-color:#9a291f;  }
.slstatus-ir { background:#999999; color:rgba(255,255,255,.6); border-color:#999999;  }


/*
.slstatus-ok { background:#ebf8a4; color:#2a8540; border-color:#2a8540;   }
.slstatus-avvik1 { background:#ffe1c3; color:#ce8828; border-color:#ce8828;  }
.slstatus-avvik2 { background:#ffc0cb; color:#9a291f; border-color:#9a291f;  }
.slstatus-ir { background:#cccccc; color:rgba(255,255,255,.6); border-color:#9a291f;  }
*/
.patch span { color:inherit; }
/**/

/* notification circles (small dots with numbers ios style) */
.notecircle { display:inline-block; width:15px;height:15px; border-radius:15px; border:1px solid #16335b; color:#16335b; position:absolute; top:-8px; right:-8px; box-sizing:border-box; background:#c2c8d0; padding-top:2px; text-align:center; font-size:10px; }
.notecircle-red {  border:1px solid#b62e31; color:#fff; background: #b62e31; }
/**/


/* 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 */
/**/


/* stripe payment form */
.StripeElement {  box-sizing: border-box; height: 40px;  padding: 10px 12px;  border: 1px solid transparent; border-radius: 4px; background-color: white;  box-shadow: 0 1px 3px 0 #e6ebf1;  -webkit-transition: box-shadow 150ms ease;  transition: box-shadow 150ms ease; }
.StripeElement--focus { box-shadow: 0 1px 3px 0 #cfd7df; }
.StripeElement--invalid { border-color: #fa755a; }
.StripeElement--webkit-autofill {  background-color: #fefde5 !important; }
/**/

/* hide google reCaptcha badge */
.grecaptcha-badge { visibility: hidden; }
/**/

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

/* blinking element */
.blink { animation: blink-anim 0.2s linear 2; }
@keyframes blink-anim { 0% { opacity:1 } 50% { opacity:0 } 100% { opacity:1 } }
/*  */

/* feedback mod */
.fb-smiley { display:inline-block; position:relative; width:60px; height:60px; opacity:.8; font-size:56px; cursor:pointer; margin:0 5px; border-radius:60px; }
.fb-smiley > svg { position:absolute; top:2px; left:2px; }
.fb-smiley:hover { opacity:1; }

.fb-smiley-1, .fb-smiley-1:hover { color:#e63832; background:#951a1d; }
.fb-smiley-2, .fb-smiley-2:hover { color:#eb6c22; background:#9a291f; }
.fb-smiley-3, .fb-smiley-3:hover { color:#fdc011; background:#ce8828; }
.fb-smiley-4, .fb-smiley-4:hover { color:#cbdb34; background:#71973b; }
.fb-smiley-5, .fb-smiley-5:hover { color:#88c04f; background:#2a8540; }

.fb-smiley-selected { opacity:1; }
.fb-smiley-unselected { opacity:.2; }
/**/


/* text classes */
.text-xxs { font-size:10px; }
.text-xs { font-size:12px; }
.text-s { font-size:14px; }
.text-m { font-size:16px; }
.text-l { font-size:18px; }
.text-xl { font-size:24px; }
.text-xxl { font-size: 38px; }
.text-left { text-align: left;  }
.text-right { text-align: right;  }
.text-center { text-align: center;  }
.text-justify { text-align: justify;  }
.text-nowrap { white-space: nowrap; }
.text-clip { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* cant be display:inline; */
.text-bold { font-weight:700; }
.text-uppercase { text-transform:uppercase; }
.text-lowercase { text-transform:lowercase; }

.hover-accent:hover { color:var(--color-accent); transition:all 0.1s linear; }
.hover-accent2:hover { color:var(--color-accent2); transition:all 0.1s linear; }
.hover-white:hover { color:#fff; transition:all 0.1s linear; }

.text-accent { color:var(--color-accent); }
.text-accent2 { color:var(--color-accent2); }
.text-orange { color:#cc6600; }
.text-yellow { color:var(--color-accent); }
.text-green { color:#518810; }
.text-white { color:rgba(255,255,255,1);  }
.text-white-fade { color:rgba(255,255,255,0.6);  }
.text-black { color:rgba(0,0,0, 1);  }
.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;  }
.text-lightred { color:#f66;  }
/**/