body, html {
	margin: 0;
	height: 100%;
	background-color: #f4f3f4;
	font-size: 14px;	/* 12.03.2019 - JoHo: Endret etter at jeg hadde oppgradert mange komponenter i "prosjektet" og bl.a. byttet ut 'bootstrap 3.3.6' med 'bootstrap.4.3.1',
							noe som medførte at generell font-size på body-en sto til 1 em (som kanskje er en bedre måleenhet), men endret noen steder slik at utseendel ble likest mulig tidligere utseende. */
}

h1.testmodus{
	color: red;
	font-size: 50px;
}
span.testmodus{
	color: red;
}

#header {
	min-height: 100px;
	max-width: 95vw;		/* 23.09.2022 - JoHo: Endret fra "1000px". */
	margin: 0 auto;
	background: url('../images/axlogo.png') center center no-repeat;
	text-align: center;
}

#outercontainer {
	padding: 20px 20px 20px 20px;
	background-color: white;
	box-shadow: 0 0 20px #888;
}

#ordercontainer {
	max-width: 500px;
	margin: 20px auto;
	overflow: visible;
}

@media only screen and (min-width: 800px) {
	#ordercontainer {
		max-width: 1000px; /* 08.11.2022 - JoHo: Hvis skjermstørrelsen (eller egentlig VINDU-størrelsen) er minst 800px, så øker vi maks-bredden på "kolonnen" for komponentene på dialog-siden til det dobbelte av det den har vært før, så blir det mindre nedoverskrolling! */
	}
}


#ordercontainer.hideoverflow{
	overflow: hidden;
}

#ordercontainer.medium {
	max-width: 85vw;		/* 07.07.2022 - JoHo: Endret fra "1000px". */
}

#ordercontainer.wide{
	max-width: 95vw;		/* 23.09.2022 - JoHo: Endret fra "1750px". */
}

#ordercontainer div.wide{
	max-width: 95vw;		/* 23.09.2022 - JoHo: Endret fra "1750px". */
}

#ordercontainer.thin{

	max-width: 300px;
}

@media only screen and (min-width: 450px){
	#ordercontainer .innercontainer{
		padding: 0 30px;
	}
}

#ordercontainer h1{
	text-align: center;
	margin-top: 10px;
	font-family: 'Oswald';
}

#ordercontainer h2{
	text-align: center;
	font-family: 'Oswald';
}

#ordercontainer h2.weak{
	font-weight: 300;
}

#ordercontainer p{
	text-align: center;
	font-weight: 300;
	font-family: 'Oswald';
	font-size: 16px;
	margin-top: 30px;
}

#ordercontainer .fullwidth {
	position: relative;
	margin-top: 10px;
	width: 100%;
	font-size: 20px;
}

#ordercontainer div.alert {
	margin-top: 10px;
}

#ordercontainer td > div.alert.barebone{
	margin: 0;
	padding: 5px 15px;
}

.filtergroupcollection{
	text-align: center;
}

.orderOverviewIconColumn {
	min-width: 50px;
}

table td.orderOverviewIconCell {
	padding-right: 0;
}

/*  02.11.2021 - JoHo: 
	"fa"-filene under refererer til stiler som er linket inn med 
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
   i de aktuelle filene der det (kan) brukes ikoner. Det har kommet mange nye ikon-varianter siden TRAX ble laget, men vi har ikke oppdatert disse referansene, så vi bruker fortsatt et gammel "begrenset" ikon-bibliotek.
 */
.fa.checkindicator {
	background-color: #50cc50;
	width: 19px;
	padding: 1px 2px;
	border-radius: 10px;
}

.fa.fa-file-pdf-o {
	width: 17px;
	padding: 2px;
	background-color: white;
}

.fa.fa-user {
	width: auto;
	padding: 2px;
}

.fa.fa-money {
	margin-left: 5px;
}

.fa.fa-file-pdf-o.clickable, .fa.fa-edit.clickable, .fa.fa-bell-o.clickable, .fa.fa-user.clickable {
	cursor: pointer;
}

.fa.notAvailable {
	color: darkgray;
	text-decoration-color: red;
	text-decoration-line: line-through;
}

.fa.turnedOn {
	color: lawngreen;
}

.fa.turnedOnSent {
	color: forestgreen;
}

.fa.turnedOnNotSentAndDayBeforePassed {
	color: dimgray;
	background-color: lawngreen;
}

.fa.turnedOff {
	color: darkgray;
}

.fa.turnedOffSent {
	color: darkgray;
	background-color: forestgreen;
}

.fa.turnedOffNotSentAndDayBeforePassed {
	color: dimgray;
}

.fa.turnedOffWarningsSent {
	color: darkgray;
	background-color: pink;
}

.fa.turnedOnNoWarningsSent {
	color: black;
}

.fa.turnedOnWarningsSent {
	color: red;
}

.fa.eesErrorReturned {
	background-color: coral;	/* 29.12.2021 - JoHo: Innført denne stilen for å kunne vise et "feilmeldingsvarsel". */
}

.fa.eesReceived {
	background-color: palegreen;
}

.fa.eesAutoWidth {
	width: auto;				/* 06.08.2025 - JoHo: Innført denne stilen som kan brukes i en ny sammenheng for PDF-ikonet, nemlig der det vises (i en større utgave) på "dialogwebsiden". */
}

.bold{
	font-weight: bold;
}

/* 27.03.2020 - JoHo: Lagt til for å kunne tvinge inn linjeskrift i en DIV. */
div {
	white-space: pre-wrap;
}

div.department{
	background-color: #fbfbfb;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 8px;
	margin-bottom: 20px;
}

div.department h3{
	margin-top: 0;
}

.alert.centered{
	text-align: center;
}

.alert i.fa{
	font-size: 20px;
	vertical-align: -2px;
	margin-right: 5px;
}

.alert i.fa.warning{
	font-size: 24px;
	color:#a00;
}


.deleteUserConfirmationDialogbox {
	text-align: center;
	/* 25.10.2018 - JoHo: Endret posisjoneringen for denne klassen (som hittil bare har blitt bruk for "SLETT BRUKER" under Admin-sidene).
	Den gamle posisjoneringen plasserte dialogen i forhold til sideinnholdet, og med så mange brukere i lista at man måtte skrolle siden nedover så kunne man ikke
	se dialogboksen som kom høyt oppe på siden (i en ikke-synlig del) hvis man hadde klikket for sletting av en av de nederste i lista, når posisjoneringen var angitt på denne måten (som da vil gjelde i forhold til "omsluttende element"):
		position: absolute;
		top: 250px;
	Med den nye posisjoneringen (fixed og 50%) så blir dialogboksen plassert i forhold til nettleser-VINDUET og vil alltid være synlig!! Mer eller mindre offisiell forklaring av forskjellene på absolute og fixed:
	Absolutely positioned elements are positioned with respect to a containing block, which is the nearest postioned ancestor. If there is no positioned ancestor, the viewport will be the containing block. Elements with fixed positioning are fixed with respect to the viewport—the viewport is always their containing block.

	24.05.2024 - JoHo: Gitt stilen et nytt navn, som bedre reflekterer den bruken den har hatt siden den ble laget. Byttet ut linjen
		margin-left: -250px;
	med en transform-linje som vi ønsker at automatisk skal beregne både horisontal og vertikal midtstilling, ut fra bredden som er angitt for dialogboksen (slik at vi kan slippe å angi en venstremarg som er "minus halvparten av dialogboks-bredden").
	Top og Left-angivelsene (begge 50%) vil i utgangspunktet plassere øvre venstre hjørnet av elementet (dialogboksen i dette tilfellet) "midt på skjermen", mens "transform-kommandoen" vil sørge for at det blir senter-punktet i dialogboksen
	som i stedet havner i punktet som top og left "refererer til".
	*/
	position: fixed;
	top: 50%;
	left: 50%;
	width: 500px;
	transform: translateX(-50%) translateY(-50%);
	background-color: white;
	border: 1px solid #aaa;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 0 100px #888;
	cursor: default;
}

.modalDialogBoxBackground {
	/* 24.05.2024 - JoHo: Opprettet denne stilen for å kunne lage en "sperrende bakgrunn" som ligger "under/bak" dialogboksen som stilen over (og evt. andre stiler som er laget for dialogbokser) gjelder for, men "over/foran" det andre som vises på den aktuelle siden. */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: gray;
	opacity: 50%;
	border: 0px;
	padding: 0px;
	cursor: not-allowed;
}

.popup.wide4.objectDetailsDialogBox {
	/* 24.05.2024 - JoHo: Opprettet denne stilen i forbindelse med omlegging av hvordan dialogboksen for adresse/objekt-detaljer vises, siden den nå skal kunne brukes i to sammenhenger.
	Vi ønsker nå at den skal vises som en "modal side-sentrert" dialogboks, og angir her noen overstyrende innstillinger, slik at ved å bruke denne stilen i tillegg til de gamle stilene som var angitt fra før, så oppnår vi ønsket utseende og funksjon!
	22.08.2024 - JoHo: Byttet ut disse bredde-angivelsene med en fast-bredde, slik at vi får samme bredde uavhengig av om dialogboksen vises i lese-variant eller redigeringsvariant!
	min-width: auto;
	max-width: 550px;
	*/
	position: fixed;
	top: 50%;
	left: 50%;
	width: 650px;
	transform: translateX(-50%) translateY(-50%);
	padding-left: 10px;
	cursor: default;
	z-index: 1;		/* 23.08.2024 - JoHo: Etter at jeg innførte en ny "tooltipEx"-klasse (for å kunne lage tooltip-vindu med "strukturert innhold") så begynte "plutselig" adresse-teksten fra cellen der tooltipet kunne vises å "skinne gjennom" når dialogboksen ble vist, tydeligvis fordi den teksten "plutselig" lå øverst. Sørget da for å sette en Z-index på denne dialogboksstilen, som sikrer at dialogboksen vises øverst. */
}

/* 19.06.2024 - JoHo: Når dialogboksen skal brukes i redigeringsmodus på et nettbrett så må den komprimeres en del, så jeg har lagt om layouten en god del,
men må også gjøre noen stil-endringer for å sikre litt mer kompakte elementer, og disse stilendringene ga OK resultat.
Noen av endringene trengs bare i sammenhengen der dialogboksen brukes under oversiktssiden (som inneholder en tabell) for å forhindre arving av stiler fra den tabellen (bl.a. alternerende radfarger).
*/
.popup.wide4.objectDetailsDialogBox table > tbody > tr > td {
	padding: 2px;
	vertical-align: middle;
}

.popup.wide4.objectDetailsDialogBox table {
	margin-bottom: 0px;
}

.popup.wide4.objectDetailsDialogBox table > tbody > tr {
	background-color: inherit;								/* Forhindrer arving av alternerende radfarger. */
	border-style: hidden;									/* Forhindrer arving av "skillelinjer" over og under rader. */
}

.popup.wide4.objectDetailsDialogBox table > tbody > tr > td > span {
	margin-left: 3px;
}


/* 22.08.2024 - JoHo: Opprettet denne stilen til bruk i en tabell ("lese-utgaven" av objekt-detaljer-dialogboksen) der vi ønsker at tekst-verdiene (i kolonne 2) skal ha fet skrift, mens ledetekstene i kolonne 1 skal ha normal skrift (ingen ting angitt er). */
.tableWithBoldTextInColumn2 td:nth-child(2) {
	font-weight: bold;
}
/* 22.08.2024 - JoHo: For ledetekstene i kolonne 1 (og forsåvidt også for tekstene i kolonne 2) så ønsker vi vertikal høydejustering til toppen av cellene. Vi må ha en ganske spesifikk angivelse her for å få denne stilen til å ha "høyeste prioritet". */
.popup.wide4.objectDetailsDialogBox table.tableWithBoldTextInColumn2 > tbody > tr > td {
	vertical-align: top;
}
.tableWithBoldTextInColumn2 td:nth-child(1) {	/* Setter faste bredder på de to kolonnene for at det ikke skal se "rart ut" hvis det ikke er så mye data i tabellen (som da ellers ville blitt mye smalere enn dialogboksen bredde). */
	width: 150px;
}
.tableWithBoldTextInColumn2 td:nth-child(2) {
	width: 440px;
}


.popup.wide4.objectDetailsDialogBox select.form-control, .popup.wide4.objectDetailsDialogBox input {
	margin-left: 0px;
	margin-top: 2px;
	margin-bottom: 2px;		/* 17.01.2025 - JoHo: Endret denne for å få litt mer kompakte dialogbokser. */
}


/* 28.05.2025 - JoHo: En ny stil som (kan) brukes i forbindelse med opptegning av en nedtrekksliste med ledetekst (til venstre), som settes opp via en tabell, der vi ønsker at tabellen skal utnytte all tilgjengelig bredde. */
table.stretchedTableWithLabelAndSelectList {
	width: 100%;
}
/* 28.05.2025 - JoHo: For et select-element (nedtrekksliste) med stilen "form-control" innenfor en tabell med stretchedTableWithLabelAndSelectList-stilen, så ønsker vi ingen marg under nedtrekkslisten. */
table.stretchedTableWithLabelAndSelectList select.form-control {
	margin-bottom: 0px;
}

/* 18.11.2025 - JoHo: For et input-text-element med stilen "form-control" innenfor en tabell med noBottomMarginOnInputText-stilen, så ønsker vi ingen marg under input-kontrollen. */
table.noBottomMarginOnInputText input.form-control {
	margin-bottom: 0px;
}


/* 22.08.2024 - JoHo: For å få en bedre formatering inne i et tooltipEx-vindu der vi ønsker litt tabell-struktur, så fikk jeg tips om å bruke disse stilene og en "underliggende DIV-tag" i stedet for "title-attributt".
	I tillegg lagde jeg også stiloppsett for en tabell (med rader og 2 kolonner) som har stilen "tooltipEx". */
.tooltipEx table {
	font-size: 8pt;
	text-align: left;
}

.tooltipEx table tr {
	border-style: hidden;		/* Forhindrer arving av "skillelinjer" over og under rader. */
}

.tooltipEx table td {
	padding: 0px;				/* Paddingen må "nulles" på dette nivået (TD) for å ha en effekt på avstanden mellom radene (TR). */
}

table > tbody > tr > td > div.clickable.tooltipEx {
	width: 100%;				/* For å få tooltips-teksten vil å dukke opp så fort musen beveges innenfor CELLEN (TD-en) som inneholder DIV-en med teksten tooltipet gjelder for, */
	height: 100%;				/* så setter vi opp at DIV-en skal bruke/fylle all høyde og bredde i cellen, og da må vi også sette opp negativ marg (som forstørrer området) og "motsatt" positiv padding som sørger for at tekstinnholdet kommer på riktig plass! */
	margin: -10px;
	padding: 10px;
}

.tooltipEx table td:nth-child(1) {
	padding-right: 10px;		/* Sikrer litt "luft" på høyre side av første kolonne. */
}

.tooltipEx table td:nth-child(2) {
	min-width: 250px;
}

.tooltipEx table > tbody tr:nth-of-type(odd) {
	background-color: initial;		/* Forhindrer arving av alternerende radfarger. */
}

.tooltipEx {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.tooltipEx .tooltiptext {
	visibility: hidden;
	background-color: white;
	color: black;
	border: 1px solid black;
	/*border-radius: 6px;			Ønsker IKKE avrundede hjørner, siden det ikke er det på "standard-tooltip"-vinduene. */
	padding: 5px;
	position: absolute;
	z-index: 1;
	top: 80%;				/* Toppen av tooltipboxen vil passeres 80% fra toppen av foreldre-elementet (som har litt spesielle innstillinger for padding og margin for å "fylle hele cellen"), */
	left: 20%;				/* og horisontalt er plasseringen 20% fra venstre kant. */
	margin-left: 0px;
	opacity: 0;
	transition: opacity 0.3s;
	/* Tilpasset formatert tekst */
	white-space: pre-wrap; /* For linjeskift i tooltip */
}

.tooltipEx:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

/* 02.10.2024 - JoHo: Opprettet denne stilen i forbindelse med omlegging av lista med filvedlegg som kan lastes opp, der vi nå legger til en slette-knapp på hver linje. For å få inn en knapp bak hvert filnavn så har jeg da
	innført bruk av en tabell, som vi vil at skal være "usynlig", og ikke ha noen header eller skillelinjer, men siden filnavn og sletteknappene kommer i hver sin kolonne så ønsker vi en stripete tabell (men med "tette rader").
	Stilen "btn-xxs" brukes på slette-knappene i denne tabellen.
*/
table.tableSimpleAndTight {
	margin: 0px 0px 5px 0px;
	padding: 0px;
	width: fit-content;
}

/* Sørger for å få "lave linjer/rader" */
table.tableSimpleAndTight td {
	padding: 0px 0px 0px 5px;
}



/* 21.06.2024 - JoHo: Opprettet denne stilen i forbindelse med omlegging av hvordan dialogboksen for plantegningsmeny-handlinger vises, siden den nå skal kunne brukes i to sammenhenger.
	I motsetning til objectDetailsDialogBox som det var natuelig at ble vist som en "modal side-sentrert" dialogboks i begge sammenhenger den ble brukt, så vil det for denne dialogboksen være aktuelt med
	litt ulike plasseringer avhengig av bruken. Vi har derfor en variant her som er side-sentrert, og en annen som vil være (ganske) høyrejustert på siden, siden det er der dialogboksen naturlig hører hjemme når den åpnes fra oversiktssiden.
*/
.popup.wide4.floorplanActionsDialogBoxInOrderDialogDetailsPage {
	position: fixed;
	top: 38%;
	left: 50%;
	min-width: auto;
	max-width: 550px;
	transform: translateX(-50%) translateY(-50%);
	padding-left: 20px;
	cursor: default;
}

.popup.wide4.floorplanActionsDialogBoxOInOverViewPage {
	transform: translateX(-45%) translateY(10%);
	min-width: 360px;
	padding-left: 10px;
	cursor: default;
}

.popup.wide4.floorplanActionsDialogBoxOInOverViewPage button.btn-primary {
	margin-left: 0px;
}

/* User Box */
#userBox {
	text-align: left;
	margin: 10px;
	min-width: 200px;
	background-color: #dde;
	border-radius: 5px;
	border: 1px solid #ccd;
	float: right;
	padding: 10px;
}
#userBox .name{
	font-size: 14px;
	margin-right: 10px;
	margin-bottom: 5px;
	display: inline-block;
}
#userBox .userId{
	font-size:12px;
	color: #99a;
}

#userBox .role{
	line-height: 1;
	margin-top: -5px;
	margin-bottom: 3px;
}

#userBox strong{
	margin-right: 10px;
}

#userBox button{
	margin: 0;
	position:relative;
	width: 100%;
}

.employeedetails{
	border-top: 1px solid gray;
	margin-top: 10px;
	padding-top: 10px;
}

/* Property & Group styles */
.group{
	font-family: 'Oswald';
	width: 100%;
	background-color: #f1f1f1;
	padding: 10px;
	margin: 20px 0;
	border-radius: 5px;
	border: 1px solid #ddd;
}

.group h2{
	margin: 0;
	font-size: 20px;
	margin: 5px 10px 15px 10px;
}

.group label{ 
	font-family: 'Oswald';
	font-size: 16px;
	font-weight: 400;
	margin: 5px 0 2px 2px;
}

.group input{
	font-weight: 300;
}

/* 06.03.2019 - JoHo: DENNE KODEN HAR JEG FORELØPIG IKKE FÅTT TIL Å VIRKE! */
/* 06.03.2019 - JoHo: Laget to små hjelpe-stiler for å kunne gi samme bredde til ulike gruppebokser, der den bredeste har en "fit-content"-bredde. */
/* 22.05.2019 - JoHo: Fikk i dag (langt utpå dagen) plutselig feilmeldingen «"fit-content" is not a valid value for the "width" property."», så endret (midlertidig) til "auto" for å få kompilert,
						men etter mer "testing" viste det seg at dette ikke var hovedproblemet likevel! */
.group_fit_content {
	width: fit-content;
}

.group_set_width_in_code {
	width: auto;
}

.property{
	margin: 5px;
}
.property .label{
	color: #888;
	font-size: 14px;
	font-weight: 300;
	font-style: italic;
	display: inline-block;
	width: 150px;
	text-align: left;
}

.property td.label{		/* 01.03.2019 - JoHo: Innført en ny stil, siden jeg IKKE ønsker noen fast bredde når label-stilen blir brukt for en TD (i en tabell)! */
	width: auto;
	padding-right: 1em;
}

.property .label.floater{
	float:left;
}

.property .value{
	font-size: 14px;
	color:#222;
	font-weight: 300;
}

.property .value i{
	margin-right: 10px;
}

.property pre.value{
	border: none;
	background-color: transparent;
	margin-left: 140px;
	font-family: 'Oswald';
	padding: 0;
}



.writeableproperty label{
	font-weight: 600;
	margin: 10px 0 0px 10px;	/* 05.01.2021 - JoHo: Endret første verdi fra 20px til 10 px. */
	padding-left: 0px;			/* 06.01.2021 - JoHo: Lagt inn verdien 0px her for å få overstyrt defaulten på 15px som ellers arves. Det var dette feltet som i størst grad bidro til den uønskede "opplinjeringen". */
	font-size: 16px;
}

/* 04.03.2019 - JoHo: I TD-sammenheng ønsker vi et annet utseende på labelen (tilsvarende som labelen til en "readonly"-property som vises i en tabell!! */
.writeableproperty td.label {
	color: #888;
	font-size: 14px;
	font-weight: 300;
	font-style: italic;
	text-align: left;
}

/* 04.03.2019 - JoHo: For å få teksten i en label-celle (TD) alignet med teksten inne i en select-liste på samme rad, så var det dette som måtte til!! */
tr.writeableproperty {
	vertical-align: baseline;
}

/* 04.03.2019 - JoHo: For å sette en passende størrelse på tekstboksen som brukes til Ekstra informasjon på bestillingsbekreftelses-siden, så angir vi noen minstemål for høyde og bredde. */
tr.writeableproperty > td > textarea{
	min-height: 8em;
	min-width: 30em;
}

.shortprops .writeableproperty{
	width: 30%;
	display: inline-block;
	margin-right: 5%;
}

.shortprops .writeableproperty:last-child{
	margin-right: 0;
}

/* 14.08.2024 - JoHo: Innført en ny stil for å kunne angi en textbox-bredde der vi bare vil legge inn 2-3 tegn. */
.writeableproperty .charWidth3 {
	width: 3em;
}

/* 02.07.2025 - JoHo: Innført en ny stil for å kunne angi en textbox-bredde der vi bare vil legge inn 10-11 tegn. */
.writeableproperty .charWidth10 {
	width: 8em;
}

/* 14.08.2024 - JoHo: Innført en ny stil for å høyrejustert en smal textboks med en ledetekst inne i en TD-celle. */
.rightAlignContent {
	text-align: -webkit-right;
}

/* 05.01.2021 - JoHo: Innført en ny stil der vi kan dele en linje i hhv. 30%, 5% (mellomrom) og 65%. Dette kan da brukes for feks Postummer og Poststed. */
.shortLeftLongRight .writeableproperty {
	width: 30%;
	display: inline-block;
	margin-right: 5%;
}
/* Det siste/høyre elementet (last-child) med denne stilen gir vi stor bredde, men ingen høyremarg! */
.shortLeftLongRight .writeableproperty:last-child {
	width: 65%;
	margin-right: 0;
}


/* Overview specific styles */
td.small{
	width: 100px;
}
td.normal{
	width: 200px;
}

td.clickable, div.clickable, h1.clickable {
	cursor: pointer;
}

td.nonclickable, div.nonclickable, h1.nonclickable {
	cursor: default;
}

td.boldtext span {
	font-weight: bold;
}

.underlined, td.underlined span{
	text-decoration: underline;
}

div.clickable.floorplanInfo, span.clickable.floorplanInfo {
	cursor: pointer;
	font-weight: bold;
	text-decoration: underline;
}

.popup{
	color: black;
	min-width: 200px;
	position: absolute;
	border-radius: 5px;
	background-color: #f0f0ff;
	padding: 10px 10px 0px 20px;	/* 17.01.2025 - JoHo: Endret bunn-paddingen (3. tall) fra 10 til 0px siden jeg nå generelt har bytter fra 10px margin-top til margin-bottom på komponenter i en popup-dialogboks, og dermed får penere utseende ved å "nulle ut" bunn-paddingen. */
	margin-left: -5px;
	box-shadow: 2px 2px 15px #888;
	-webkit-animation: fadeInLoad 0.5s;
	z-index: 1;						/* 10.02.2026 - Sikrer at dialogbokser kommer helt øverst (og at det ikke blir noe rot med andre elementer der vi bruker "position: relative;"). */
}

.popup.wide{
	min-width: 400px;
}

.popup.wide2{
	min-width: 425px;
}

.popup.wide3 {
	min-width: 600px;
}

.popup.wide4 {			/* 12.04.2022 - JoHo: Endret min-width til "auto" (fra 800px) for ikke å få så brede dialogbokser der det ikke trengs. */
	min-width: auto;
	padding-top: 30px;	/* 19.06.2024 - JoHo: Lagt inn denne stilen for å sikre at "første linje i dialogboksen" ikke vil kunne overlappe med "X-knappen" som plasseres oppe i høyre hjørne. */
}

.popup.fixedWidthRightAlignedInDeparmentColumn {	 /* 07.06.2023 - JoHo: Laget en ny stil som brukes for dialogboksen i Avdeling-kolonnen */
	min-width: 320px;
	margin-top: 10px;
	right: 0px;
}

#objChangeAssignmentStatusDialogBox.popup { /* 23.06.2023 - JoHo: Opprettet denne elementid-stilen for å ha bedre kontroll på denne dialogboksen. */
	min-width: 300px;
	max-width: 500px;
}

#objSelectOrderWithFinishedReportDialogBox.popup { /* 11.03.2025 - JoHo: Opprettet denne elementid-stilen for å ha bedre kontroll på denne dialogboksen. */
	min-width: 300px;
	max-width: 500px;
}

i.notAvailable {
	cursor: not-allowed;
}


.infofield span{
	display: inline-block;
	width: 100px;
}

.infofield.wider span {
	display: inline-block;
	width: 125px;
}

.infofield span.desc{
	width: 20px;
	margin-left: 5px;
}

.popup.wide4 .infofield input[type='text'], .popup.wide4 .infofield select.form-control {
	min-width: 400px; /* 12.04.2022 - JoHo: Jeg endret min-width for wide4-stilen til "auto" (fra 800px), men siden vi da KAN risikere at en dialogboks blir litt vel smal, så setter jeg en minste-bredde på kontrollene i denne stilen (og en maks-bredde). */
	max-width: 670px;
	display: inline-block;
	margin-top: 5px;
}

.infofield input[type='text'], .infofield select.form-control {
	width: 250px;
	display: inline-block;
}

.popup button, .popup input, .popup select.form-control {
	margin-bottom: 10px; /* 17.01.2025 - JoHo: Byttet fra margin-top til margin-bottom for å få mindre luft over en input-boks der en label står på oversiden. */
	margin-left: -5px;
	width: 100%;
}

.popup textarea.form-control {
	margin-bottom: 10px; /* 17.01.2025 - JoHo: Lagt til denne for å få konsistens med andre margin-endringer gjort i dag, siden et textarea-element tydeligvis IKKE ble "påvirket" på ønsket måte. */
}

.form-control.validationerror, .popup input.input-timeHHMM.validationerror {
	color: #a94442;
	background-color: #f2dede;
	border-color: #a94442;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}

select.form-control {
	margin: 0;
	padding-left: 0;	/* 17.11.2021 - JoHo: Overstyrer venstre-paddingen i en nedtrekksliste, slik at mer av valgt element blir synlig. */
	appearance: auto;	/* 14.11.2024 - JoHo: Overstyrer en "none"-innstilling som har gjort at "ned-pila" IKKE har blitt vist i dropdown-lister. Er usikker på hvor mange steder dette har vært brukt, men kan ikke se noen god grunn til at pila ikke bør være der, så "skrudd på" dette i dag i forbindelse med bruk det jeg VIL ha en synlig pil! */
}

select.form-control option {
	padding-left: 0;	/* 17.11.2021 - JoHo: Overstyrer venstre-paddingen i VALGENE i en nedtrekksliste, slik at den blir i tråd med venstre-paddingen for selve listen. */
}

input[type='text'].form-control {
	padding-left: 5px; /* 17.11.2021 - JoHo: Overstyrer venstre-paddingen for generelle input-text-felt med stilen "form-control", slik at den blir omtrent halvparten av det den hittil har vært. */
}


.popup input.input-timeHHMM, .form-control.input-timeHHMM.input[type='text'] { /* 02.11.2021 - JoHo: Opprettet for å kunne ha en "inline" text-boks for å fylle inn/redigere en HH:MM-tid. */
	margin: 0;
	padding-left: 0;
	width: 3em;
	color: black;
}

.popup input.input-timeHHMM[disabled], .form-control.input-timeHHMM[disabled] {
	cursor: not-allowed;
	background-color: lightgray;
}

.withVerticalPadding {		/* 25.03.2025 - JoHo: Opprettet for å kunne få litt mer luft rundt visning av en feilmelding. */
	padding-top: 1em;
	padding-bottom: 1em;
}

.validationerrormessage {
	color: #a94442;
	text-align: center;
}

.fatalerrormessage {
	color: red;
	text-align: left;
}

.orderExistsMessage {
	color: darkred;
	text-align: left;
}

.orderSuccessfullySaved {
	color: darkgreen;
	font-weight: bold;
}

.orderSuccessfullyCancelled {
	color: darkred;
	font-weight: bold;
}

.popup .header {
	font-weight: 600;
}

.popup .floatRight_someLeftMargin_fitWidthToContent { /* 11.05.2021 - JoHo: Innført en ny stil som brukes på noen knapper i en dialogboks. */
	float: right;
	margin-left: 20px;
	width: auto;
}

.calendarOverlaySaveOrCancelButtonGroup { /* 13.05.2022 - JoHo: Innført en ny stil som brukes rundt et par knapper i booking-kalenderen. */
	float: right;
	margin-top: 21px;
	margin-left: 15px;
	width: auto;
}

.popup .newdeadline{
	margin-top: 10px;
}

.popup .newdeadline button{
	margin-top: 5px;
}

.popup .newdeadline button.btn-default{
	font-size: 12px;
	padding: 2px;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* 12.03.2019 - JoHo: Opprettet noen nye stiler/tilpasninger etter at jeg hadde oppgradert mange komponenter i "prosjektet" og bl.a. byttet ut 'bootstrap 3.3.6' med 'bootstrap.4.3.1',
						noe som medførte endring i blåfargen som var brukt på bl.a. login-knappen og noen andre knapper.  */
a.btn-primary, div.btn-primary, button.btn {
	background-color: #337AB7;
}

a.btn-primary:hover, div.btn-primary:hover, button.btn:hover {
	background-color: #286090;
}

.btn-primary[disabled], .btn[disabled] {
	cursor: not-allowed;
	background-color: #337AB7; /* Må også sette denne fargen eksplisitt. En annen stil vil sette opacity til 65%, så fargen vil endres. */
}

button.btn-primary {
	/*padding-right: 20px;  /* 12.05.2023 - JoHo: Jeg skjønner ikke helt poenget med denne høyrepaddingen nå, så kommentert den ut (siden jeg synes at det IKKE ser bra ut på Admin-siden for megler-vedlikehold).*/
}

/* 08.01.2025 - JoHo: Opprettet stilen som brukes på en knapp man "bør være litt forsiktig" med å trykke på (siden det ikke kan angres). */
button.btn-careful {
	color: orange;
	margin: 5px;
	width: 96%;
}

button.btn-careful:hover {
	color: orange;
}

.popup.wide4 button.btn-primary { /* 12.04.2022 - JoHo: Jeg endret min-width for wide4-stilen til "auto" (fra 800px), men siden vi da KAN risikere at en dialogboks blir litt vel smal, så setter jeg en minste-bredde på primær-knappen. */
	min-width: 300px;
}



/* 08.11.2021 - JoHo:
	Etter ganske mye testing der det var et problem at jeg ikke klarte å få "klar rød farge" både når lukke-knappen hadde fokus og når musen ble holdt over den (=hover),
	så fant jeg til slutt ut at dette ikke kunne fikses på selve knappen (button.btn-closeInUpperRightCorner), men at det var en "opacity: .75;" som fantes for stilen
	".close:not(:disabled):not(.disabled):hover" som måtte overstyres, så ved å gjøre det på denne spesifikke måten for en div med close-klassen under en popup(div),
	SÅ VIRKET det omsider!!
*/
.popup div.close:not(:disabled):not(.disabled):hover {
	opacity: 1;
}

.popup .close {
	float: right;
	opacity: 1; /* Ønsker INGEN gjennomsiktighet for lukke-knappen! (Se ellers btn-closeInUpperRightCorner). */
}

button.btn-closeInUpperRightCorner {
	opacity: 1; /* Ønsker INGEN gjennomsiktighet for lukke-knappen! */
	background-color: rgb(255, 127, 127); /* Rød, halvveis mot hvit. */
	border: 3px solid rgb(255, 127, 127);
	color: dimgray;
	position: absolute; /* Denne posisjonen vil være i forhold til "forelder-taggen", og brukes sammen med de 4 neste innstillingene: */
	margin-top: 0px; /* Setter 0 for topp- og høyre-marg sammen med 0 for right og top, for å få boksen helt opp i høyre hjørne (av "forelder-taggen). */
	margin-right: 0px;
	top: 0px;
	right: 0px;
	width: auto;
	padding-bottom: 0px;
	padding-top: 0px;
	padding-left: 20px;
	padding-right: 20px;
	font-weight: bold;
}

button.btn-closeInUpperRightCorner:focus, button.btn-closeInUpperRightCorner:hover  {
	background-color: red;
	border: 3px solid red;
	color: white;
}


div.btn-default {
	background-color: #fff;
	border-color: #ccc;
}

button.btn-default {
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}

button.btn-default:hover {
	color: #333;
	background-color: #e6e6e6;
	border-color: #adadad;
}

/* Noen av stilene her er bare kopiert inn fra et debug-vindu som kjørte mot PROD-siten (der ting ikke er endret ennå), siden dette altså så ut til å mangle fra det som er inkludert i bootstrap 4.3.1. */
button.btn-danger {
	color: #fff;
	background-color: #dc3545;
	border-color: #dc3545;
}

button.btn-danger:hover {
	color: #fff;
	background-color: #c9302c;
	border-color: #ac2925;
}

.nav-tabs {
	border-bottom: 1px solid #ddd;
}

.nav-tabs > li {
	float: left;
	margin-bottom: -1px;
}

.btn-xs, .btn-group-xs > .btn {
	padding: 1px 5px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
}

.btn-xxs { /* 02.10.2024 - JoHo: Opprettet i forbindelse med innføring av sletteknapp for vedlegg. */
	padding: 2px;
	font-size: 10px;
	line-height: 1;
	border-radius: 3px;
	width: fit-content;
	vertical-align: text-bottom;
}

.btn-low { /* 24.09.2025 - JoHo: Opprettet i forbindelse med innføring av et par "Velg alle"/"Velg ingen"-knapper, som vi ikke ønsker at skal være så høye, og derfor "skrur ned" topp og bunn-paddingen. */
	padding-top: 1px;
	padding-bottom: 1px;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
	color: #555;
	cursor: default;
	background-color: #fff;
	border: 1px solid #ddd;
	border-bottom-color: transparent;
}

.nav-tabs > li > a {
	margin-right: 2px;
	line-height: 1.42857143;
	border: 1px solid transparent;
	border-radius: 4px 4px 0 0;
}

.nav > li > a {
	position: relative;
	display: block;
	padding: 10px 15px;
}

.nav-tabs > li > a:hover {
	border-color: #eee #eee #ddd;
}

.nav > li > a:hover, .nav > li > a:focus {
	text-decoration: none;
	background-color: #eee;
}

/* 20.06.2025 - JoHo: Endret på stilene her siden jeg vil ha "standard-oppførsel" som er "permanent understreking" på tekst i anchor-elementer, for å vise at det er klikkbare lenker, OG at understrekingen skal beholdes ved hover/focus. */
a {
	color: #337ab7;
	/*	text-decoration: none; */
	background-color: transparent;
}

a:hover, a:focus {
	color: #23527c;
	text-decoration: underline;
}

/* 12.03.2019 - JoHo: Slutt på endringene laget i dag (i denne blokken) */
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

table.ordertable {
	/* 22.11.2024 - JoHo: Jeg oppdaterte med nye versjoner av bl.a. "bootstrap" og andre "bibliteker" for noen uker siden (da jeg begynte med den nye "modulen" rundt bruk av "tilstandsrapport@anticimex.no").
	I dag så viste det seg "plutselig" (hvis jeg ikke har oversett noe) at bakgrunnsfargene som kan komme på (litt) gamle ordre i oversikten IKKE lenger var der.
	Med hjelp av ALHO så fant vi ut at det var en tabell-stil kalt "--bs-table-bg" som åpenbart klarte å overstyre farge-valget for tr-radene inne i tabellen (og det er jo litt rart), men ved å "nøytralisere"
	den stilen vha. "revert" som vist under så fikk virket igjen fargingen av linjene slik som før. */
	--bs-table-bg: revert;
}


table.ordertable th {
	cursor: pointer;
	background-color: white;
	white-space: nowrap;
}

table .btn-xs{
	margin-right: 5px;
}

table.ordertable th:hover{
	background-color: #f5f5f5;
	border-radius: 10px 10px 0 0;
}

table.ordertable th.nohover:hover{
	background-color: transparent;
}

.divTableWithFloatingHeader table.ordertable tr.tableFloatingHeader th{
	background-color: #f4f4f4;
	cursor: default;
}

.divTableWithFloatingHeader table.ordertable tr.tableFloatingHeader th i{
	visibility: hidden;
}

table.ordertable th:active{
	background-color: #eee;
}

table.ordertable i {
	display: inline-block;
	width: 10px;
	/*margin-left: 5px;		04.11.2021 - JoHo: Kommentert ut denne, siden det gir litt mindre luft på siden av cellene (og feks underliggende ikoner), slik at det blir plass til mer på en linje. */
	font-size: 16px;
}

table.ordertable tr.green{
	background-color:#93de75;
}
table.ordertable tr.green:hover{
	background-color:#89cc6d;
}
/* 16.04.2018 - JoHo: Innført lightgreen, i forbindelse med at vi har fått inn flere statuser, fordi rapporter nå vi ha vannmerke inntil de er godkjent. */
table.ordertable tr.lightgreen {
	background-color:#BAEA93;
}
table.ordertable tr.lightgreen:hover{
	background-color:#BAEA93;
}
table.ordertable tr.yellow{
	background-color:#eed863;
}
table.ordertable tr.yellow:hover{
	background-color:#e2cd60;
}
table.ordertable tr.red{
	background-color:#ec7c7c;
}
table.ordertable tr.red:hover{
	background-color:#d97272;
}
table.ordertable tr.orange{
	background-color:#f7dfc3;
}
table.ordertable tr.orange:hover{
	background-color:#f3d1aa;
}

/* 11.01.2023 - JoHo: Innført denne stilen etter å ha tatt i bruk "ScrollIntoView" i noen dialogboks-sammenhenger. Linjene vil da "hoppe litt opp og ned", og det er en fordel med en visuell markering av hvilken
linje dialogboksen faktisk tilhører! (Som er "kraftigere" enn den standard "skyggeleggingen" som fra før gjøres på den aktuelle linjen gjennom "hover".)
Med denne stilen som brukes ":has" så sikrer vi altså at for en tr-linje som inneholder et td-element der det finnes et underliggende div-element med "popup" som en (av) klassestil(ene), så vil denne tr-linjen få en synlig ramme!
27.05.2024 - JoHo: I forbindelse med at adresse/objekt-detaljer-dialogboksen (i første omgang) legges om fra å vises "inline" og med bruk av "ScrollIntoView", så vises den nå modalt ved at vi inne i TD-cellen har en ekstra DIV-nivå
med to underliggende DIV-er, der den første vil lage en "dekkende bakgrunn" som forhindrer klikking utenfor dialogboksen, mens den andre DIV-en tegner opp selve dialogboksen, som vises sentrert på skjermen. Siden vi da får inn 
"et ekstra div-nå" under TD-en, så har jeg innført en ekstra/alternativ "spekk" for å angi at vi vil ha fargerammen også for linjer der dialogboksen ligger "ett DIV-nivå dypere"!!
*/
table.ordertable > tbody > tr:has(td > div.popup), table.ordertable > tbody > tr:has(td > div > div.popup) {
	border: 2px solid #00fc1c;
}

table.ordertable td.error{
	background-color: #e63232;
	color: white;
	border: 1px solid #ab1818;
}

table.ordertable i.fa-calendar {
	cursor: pointer;
	width: 20px;
	color: gray;
}

table.ordertable td button.smalltext {
	font-size: 10px;
}

table.ordertable .clickablecalendardate {
	cursor: pointer;
}

table.ordertable .unclickablecalendardate {
	cursor: pointer;
}

table.ordertable i.fa-calendar:hover {
	color: black;
}

table tr td i.fa {
	/*margin-right: 5px;		04.11.2021 - JoHo: Kommentert ut denne, siden det gir litt mindre luft på siden av cellene (og feks underliggende ikoner), slik at det blir plass til mer på en linje. */
}


/* 08.01.2026 - JoHo: Opprettet en ny stil som brukes på "rapporthistorikk-tabellen" som i utgangspunktet finnes i dialogboksen for ordrenummer/ordrenotater. */
table.reportHistoryTable {
	border: 1px solid gray;
	width: 100%;
}

table.reportHistoryTable th,
table.reportHistoryTable td {
	padding-left: 3px;
	padding-right: 3px;
	/*border: 1px solid gray;*/
}

table.reportHistoryTable th {
	background-color: revert;
}



/* table legend 
	01.12.2020 - JoHo: Innført de 3 neste stilene under i forbindelse med at jeg faktisk la inn alle "legend"-blokkene i en tabell.
*/

.legendTable{
	width: 100%;
	table-layout:fixed;
}
.infoColumn{
	width: 49%;
}
.separatorColumn {
	width: 2%;
}

.legendTable td {
	vertical-align: top;
}

.legend {
	display: inline-block;
	padding: 5px;
	background-color: #f4f3f4;
	border: 1px solid #ddd;
	border-radius: 5px;
	margin-bottom: 10px;
	width: 100%; /* 49%; */
}

.legend .header{
	text-align: center;
	font-family: 'Oswald';
	font-size: 18px;
	font-weight: 300;
	color: #555;
}

.legend .description{
	vertical-align: 5px;
	margin-left: 10px;
}

.legend .colorbox{
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	margin: 0 3px;    
	border: 1px solid #aaa;
}

/* 16.04.2018 - JoHo: Innført lightgreen, i forbindelse med at vi har fått inn flere statuser, fordi rapporter nå vil ha vannmerke inntil de er godkjent. */
.legend .colorbox.green{ background-color: #93de75; }
.legend .colorbox.ligthgreen{ background-color: #BAEA93; }
.legend .colorbox.yellow{ background-color: #eed863; }
.legend .colorbox.orange{ background-color: #f7dfc3; }
.legend .colorbox.red{ background-color: #ec7c7c; }

.legend .reportstatus{
	min-height: 25px;
}

/*
.legend.aligner{
	float: right;
	clear: right;
}
*/

.floatRight {
	/*	float: right;*/
}


/* Document sign styles */

.elementcontainer{
	width: 200%;
	transition: margin 0.3s;
	margin-right: -100%;
}

.elementcontainer.agent{
	margin-left: -100%;
}

.elementcontainer .elementbox{
	width: 50%;
	float: left;
	transition: opacity 0.3s;
	min-height: 1px;

}

.elementcontainer .elementbox.faded{
	opacity: 0;
}

.elementcontainer .elementbox.noheight{
	height: 0px;
}

.recipientSelector {
	margin: 20px 0;
}

.recipientSelector .buttonbox{
	width: 50%;
	display: inline-block;
	padding: 0 5px;
}

.recipientSelector button{
	width: 100%;
}

.signEntriesTextElement{
	width: 90%;
	border-radius: 5px;
	margin: 5px;
	padding: 10px;
}
.signEntriesTextElement pre {
	border: none;
	background: none;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	word-break: normal;
	white-space: pre-wrap;	/* 17.11.2020 - JoHo: Endret fra "normal" etter tips fra ALHO. Gjør at "linjeskift respekteres" i tekst som som vises på en "kunde-dialog-side". */
}
.signEntriesTextElement.new{
	-webkit-animation: fadeInLoad 1s;
}
.signEntriesTextElement.axcustserv{
	background-color: #f5f5ff;
	border: 1px solid #e5e5ee;
}
.signEntriesTextElement.technician{
	background-color: #e9feff;
	border: 1px solid #d9edee;
}
.signEntriesTextElement.customer, .signEntriesTextElement.agent{
	background-color: #f5fff5;
	border: 1px solid #e5eee5;
	margin-left: 10%;
}
.signEntriesTextElement.accept{
	background-color: #77ee77;
	border: 1px solid #66dd66;
	margin-left: 10%;
}
.signEntriesTextElement.accept .content{
	margin-left: 10px;
}
.signEntriesTextElement.autoAccept{
	background-color:#9DFF9D;
	border: 1px solid #66dd66;
	margin-left: 10%;
}
.signEntriesTextElement.autoAccept .content{
	margin-left: 10px;
}
.signEntriesTextElement .metadata{
	font-style: italic;
}
.signEntriesTextElement .acceptedtext{
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	padding: 5px 10px;
}
.signEntriesTextElement .attachment{
	padding: 5px 10px;
	margin: 5px 0;
	border-radius: 5px;
	background-color: #e0e0ff;
	border: 1px solid #c0c0e5;
	overflow: hidden;
}

.signEntriesTextElement .attachment:hover{
	background-color: #d0d0e5;
	cursor:pointer;    
}

.signEntriesTextElement .attachment .text{
	padding: 5px 5px;
	vertical-align: -9px;
}

.signEntriesTextElement .attachment .version{
	float: right;
	font-size: 12px;
	margin-top: 6px;
	padding: 4px 10px;
	color: white;
	background-color: gray;
	border-radius: 5px;    
}

.signEntriesTextElement .attachment .pdficon {
	display: inline-block;
	width: 32px;
	height: 32px;
	background: url('../images/pdficon.png') center center no-repeat;
	float: left; /* 15.01.2019 - JoHo:  Kommentert ut fordi feilmeldingen "(CssLint) float can't be used with display: inline-block." nå plutselig kom!! */
}

.signEntriesTextElement .mailsentto, .mailsentto {
	color: gray;
	font-style: italic;
	font-size: 12px;
}

/* 13.12.2020 - JoHo:  Innført stilen i forbindelse med at jeg har sett at det er et behov for en tips-tekst i forbindelse med at en kunde lastet opp for mange bilder til at en melding kunne sendes! */
.tipsText{
	color: gray;
	font-style: italic;
	font-size: 12px;
}


/* 28.10.2022 - JoHo: Stiler innført for å få en bedre "alignment" på avkrysningsboksene som en selger for opp når en rapport skal godkjennes.
Der er tekstene så lange at de deles over to linjer og vi ønsker at linje 2 da skal få en tekstinnrykk som tilsvarer det som er på første linje der selve avkrysningsboksen er!
Etter litt googling fant jeg ut at den enkleste måten å få til OK alignment på (selv om labelen da blir vertikalt sentrert, og jeg ikke har klart å endre det).
08.11.2022 - JoHo: Lagt til en margin-left på "hovedelementet" og en bredde på 90% i forbindelse med at "godkjenningsseksjonen" med avkrysningsbokser og godkjenningsknapp der dette brukes
nå har blitt flyttet og vil stå rett under "meldingen" for den siste rapporten, og det da ser best ut denne "seksjonen" har samme bredde som meldingselementet rett over.
Også lagt til en ny klasse for en div som vil "ramme inn" avkrysningboksene og godkjenningsknappene.
*/
div .confirmCheckBoxesAndAcceptbutton {
	background-color: #f5fff5;
	border: 1px solid #e5eee5;
	width: 90%;
	border-radius: 5px;
	margin-left: 10%;
	margin-bottom: 20px;
	padding-top: 10px;
}

.confirmCheckBoxesAndAcceptbutton button {
	width: -webkit-fill-available;
	margin-left: 30px;
	margin-right: 10px;
	margin-bottom: 10px;
}

div .checkboxLeftAlignedWithMultiLineLabel {
	display: flex;
	flex-direction: row;
	margin-left: 5px;
}

div .checkboxLeftAlignedWithMultiLineLabel > label {
	margin-left: 10px;
}


/* 17.10.2022 - JoHo: Kommentert ut denne delen, etter litt omlegging av hvordan tekstene med denne stilen brukes! */
/*.metadata span{
	margin-right: 10px;
}
*/
.metadata .timestamp{
	color: #888;
}
.userinputcontrols{
	margin-top: 50px;
}
.bottommargin .userinputcontrols{
	margin-top: 0;
	margin-bottom: 30px;
}

.userinputcontrols.shortmargin{
	margin-top: 20px;
}

.userinputcontrols.shortinputs .writeableproperty, .userinputcontrols.shortinputs button{
	width:30%;
	display: inline-block;
	margin: 10px;
	vertical-align: top;
}

.userinputcontrols.shortinputs button{
	margin-top: 33px;
}

.userinputcontrols button{
	position: relative;
	margin-top: 5px;
	width: 100%; 
}

#ordercontainer button.upload{
	width:100%;
	height: 30px;
	overflow: hidden;
	font-size: 16px;
	padding: 4px;
	position: relative;
}

#ordercontainer button.upload input{
	display: block !important;
	width: 100% !important;
	height: 30px !important;
	opacity: 0 !important;
	overflow: hidden !important;
	cursor:pointer;
	position: absolute;
	top: 0;
	left: 0;
}

.center{
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

select {
	border-radius: 5px;
	padding: 5px 10px;
	font-size: 18px;
	margin: 10px;
	/* 01.11.2021 - JoHo: Jeg har i noen uker lagt merke til at innholdet i nedtrekkslister "plutselig" har blitt sentrert. Jeg har i dag kartlagt at det er denne kodelinjen som gjør det, men den kodelinjen har IKKE vært endret siden jeg 
		overtok TRAX-prosjektet for snaut 3 år siden, så antagelig er det en eller annen annen "default-verdi" som kan ha blitt endret, og "fått gjennomslag". Ved å kommentere ut denne linjen ble igjen innholdet venstre-justert, som ønsket.
	text-align: center;
	*/
}

.filtergroup{
	display: inline-block;
	padding: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	text-align: center;
	background-color: #f4f3f4;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.filtergroup button{
	margin: 2px;
}

.filtergroup select{
	margin: 2px;
	vertical-align: middle;
}

.filtergroup .header{
	font-family: 'Oswald';
	font-size: 18px;
	font-weight: 300;
	color: #555;
}

.filtergroupinline div, label {
	display: inline;
	/*padding-left: 15px;	25.09.2022 - JoHo: Kommentert ut denne etter å ha lagt om en del rundt database-filter-seksjonen. */
	text-align: left;
	vertical-align: middle;
}

.filtergroupinline .header {
	padding-left: 5px;
}

.filtergroupinline button {
	margin-left: 10px;
}

.filtergroupinline input[type='checkbox'] {
	padding: 3px;
	margin: 5px; /* 15.01.2019 - JoHo:  Kommentert ut fordi feilmeldingen "(CssLint) margin can't be used with display: inline." nå plutselig kom!! */
	padding-right: 25px;
	display: inline;
	position: relative;
}

.dbrelatedgroup {
	border-color: lightgreen;
	width: 100%;
}

.dbrelatedgroup table {
	width: 100%;
}

.dbrelatedgroup button.btn {
	background-color: #337AB7;
	border-color: #337AB7;
}

.dbrelatedgroup button.btn:hover {
	background-color: #286090;
	border-color: #286090;
}


.dateDDMMYYYY input[type='text'] {
	width: 86px; /* 15.01.2019 - JoHo:  Kommentert ut fordi feilmeldingen "(CssLint) width can't be used with display: inline." nå plutselig kom!! */
	padding: 3px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 1px;
	text-align: center;
	display: inline;
}

.dateDDMMYYYY label {
	font-weight: normal;
}

.centered {
	text-align: center;
}

/* 20.01.2026 - JoHo: Vi har et par stiler som brukes til å formatere oppdateringsnummer-tallet som kan vises hvis en ordre blir oppdatert 2 eller flere ganger. Vi må ha litt ulike tilpasninger avhengig av om teksten inngår i en H2-stil eller på en "vanlig linje". */
.updateNumberInH2 {
	font-size: 0.6em;			/* Justerer størrelsen (forminsker en del). */
	vertical-align: super;		/* Plasserer teksten opphøyd. Når nummeret kommer i en H2-stil så er det "super"-verdien som gir "mest passende plasseringer" etter et ^-tegn. */
}

.updateNumber {
	font-size: 0.8em;			/* Justerer størrelsen (forminsker litt). */
	vertical-align: text-top;	/* Plasserer teksten opphøyd. Denne varianten gir en bedre plassering enn "super" med tanke på at vi vil ha alignet tallet med et ^-tegn. */
}


.orderOverviewRowCountInfo {
	/* 20.12.2018 - JoHo: Disse variantene så IKKE ut til å virke!
	-webkit-column-span: all;
	column-span: all;
	*/
	text-align: right;
}

/* 27.11.2020 - JoHo: Stiler innført i forbindelse med en liste med avkrysningsbokser. (Se også info om cursorForCheckboxWithLabel, innført på et litt senere tidspunkt.) */
div .checkboxWithLabel {
	padding-left: 10px;
}

.checkboxWithLabel table {
	padding: 5px;
	text-align: left;
	/* 01.12.2020 - JoHo: Siden det foreløpig bare er EES-varslings-opplegget som er fullt ut implementert, så vil det inntil videre bare finne EN linje i checkboxWithLabel-tabellen, og da ØNSKER vi faktisk litt "ekstra høyde",
	på dialogboksen fordi .spinner_blue har en "fast plassering" som "krever litt høyde". Jeg har derfor MIDLERTIDIG lagt inn litt ekstra toppmarg på tabellen, og også kommentert ut den smalere paddingen på TD-ene som finnes i neste stil.
	margin-top: 15px;*/
}

.checkboxWithLabel table > tbody > tr > td {
/* 01.12.2020 - JoHo: Se kommentar over. Inntil vi har lagt tilbake de to ekstra avkysningsboksene i dialogboksen som bruker denne stilen, så "kansellerer" vi denne padding-endringen:*/
	padding: 0px; /* Trengs for å "overstyre" den "normale" relativt store celle-paddingen som er satt opp generelt, slik at vi får en tabell uten noe ekstra radhøyde. */
}

.checkboxWithLabel input[type='checkbox'] {
	margin-top: 0px;
	margin-right: 5px;
	margin-left: 5px;
	width: auto; /* Trengs for å "overstyre" en width på 100%, som ellers er satt opp for input-elementer under en popup-stil. */
}

/* 11.12.2020 - JoHo: Stiler innført i forbindelse med en avkrysningsboks vi har i dialogboksen for ordrenummer-detaljer. */
div .checkboxLeftAlignedWithLabel {
	padding-left: 0px;
}

.checkboxLeftAlignedWithLabel table {
	padding: 5px;
	text-align: left;
}

.checkboxLeftAlignedWithLabel input[type='checkbox'] {
	margin-top: 0px;
	margin-right: 5px;
	margin-left: 0px;
	width: auto; /* Trengs for å "overstyre" en width på 100%, som ellers er satt opp for input-elementer under en popup-stil. */
}

/* 06.01.2021 - JoHo: Stiler innført i forbindelse med en avkrysningsboks som nå er lagt inn på "Objekt-siden" for manuell bestilling av rapport.
						Jeg synes det er "fornuftig" med (hånd)peker-ikon over avkrysningsboks OG tilhørende tekst - som vi forutsetter at er inne i en DIV -
						og med en "not-allowed"-cursor når avkrysningsboksen og DIV-en er disablet. Stilen cursorForCheckboxWithLabel kan også brukes sammen med andre "checkboxWithLabel(...)"-stiler for å få konsistens.
*/
table.cursorForCheckboxWithLabel {
	vertical-align: middle;
}

div.cursorForCheckboxWithLabel, td.cursorForCheckboxWithLabel, .cursorForCheckboxWithLabel input[type='checkbox'], table.cursorForCheckboxWithLabel > tbody > tr > td > label {
	cursor: pointer;
	font-weight: normal;
	font-size: 1rem;
	display: inline-block;
	margin-top: 0px;
	margin-left: 0px;	/* For at HELE "området" til en label skal kunne være "klikkbart" så er det lurt at PADDING brukes til å "lage luft", for det regnes som "en del av teksten", */
	padding-left: 10px;	/* mens MARGIN blir "gjennomsiktig" og "slipper kontrollen" ned til elementet som ligger under. */
	line-height: 1.15;
}

div.cursorForCheckboxWithLabel[disabled], td.cursorForCheckboxWithLabel[disabled], .cursorForCheckboxWithLabel input[type='checkbox'][disabled], table.cursorForCheckboxWithLabel > tbody > tr > td[disabled] > label {
	cursor: not-allowed;
	font-weight: normal;
	font-size: 1rem;
	display: inline-block;
	margin-top: 0px;
	margin-left: 0px;	/* For at HELE "området" til en label skal kunne være "klikkbart" så er det lurt at PADDING brukes til å "lage luft", for det regnes som "en del av teksten", */
	padding-left: 10px;	/* mens MARGIN blir "gjennomsiktig" og "slipper kontrollen" ned til elementet som ligger under. */
	line-height: 1.15;
}

/* 26.01.2021 - JoHo: For å få en sjekkboks-label på confirmExternalOrderInfo til å ikke få for fet skrift i forhold til resten av "property"-ene som vises på samme sted. */
table.cursorForCheckboxWithLabel > tbody > tr > td.value > label { 
	font-weight: 300;
}

.newuserbox {
	max-width: 500px;
	margin: auto;
}

.navigation{
	margin: 0 auto;
	width: 432px;
}

.navigationpoint{
	margin-left: 5px;
	width: 80px;
	height: 80px;
	border-radius: 40px;
	padding: 0;
}

.navigationpoint.small{
	width: 70px;
	height: 70px;
	margin-left: 2px;
}

.navigationpoint[disabled]{
	color: #ccc;
}

.navigationpoint span{
	vertical-align: -30px;
	font-size: 9px;
}

.navigationpoint.small span{
	vertical-align: -20px;		/* 12.03.2019 - JoHo: Endret denne fra -24px til -20px.*/
	font-size: 9px;
}

/* 16.05.2022 - JoHo: Endret kalender-stilen fra å være satt opp med en "fast bredde" (i forhold til foreldre-kontrollen), til at den vil bruke (nesten) hele skjermbredden. */
/*.calendar {
	width: 300%;
	margin-left: -100%;
}
Bredden og venstre-siden spesifiseres nå med enheten "vw" (der hver enhet angir 1% av "Viewport Width"):
*/
.calendar {
	width: 98vw;
	position: relative;
	left: calc(-49vw + 50%);
}

.calendaroverlay {
	background-color: #fff;
	position: fixed;
/*	left: 50px;
	right: 50px;
*/
	width: 98vw;
	left: calc(-49vw + 50%);
	
	top: 20px;
	bottom: 20px;
	z-index: 1000;
	border-radius: 5px;
	box-shadow: 1px 2px 7px #555;
	padding: 10px 20px;
	overflow-y: scroll;
}

.calendaroverlay[disabled], .fixedcontrols[disabled] {
	cursor: not-allowed;
	background-color: dimgray;
}

.calendaroverlay .calendar {
	width: 100%;
	margin-left: 0;
	height: 100%;
	margin-top: 100px;
	/* 16.05.2022 - JoHo: Attributter innført etter calendar-endringen over: */
	position:static;
}

.calendaroverlay .writeableproperty {
	display: inline-block;
	min-width: 200px;
	margin-right: 1em;
}

.calendaroverlay button {
	margin-right: 10px;
	vertical-align: 0;
}

.fixedcontrols {
	background-color: white;
	position: fixed;
/*	left: 50px;
	right: 70px;
*/
	width: 96.6vw;
	left: calc(-48.3vw + 50%);

	padding: 5px 20px;
	top: 20px;
	border-radius: 5px 0 0 0;
	box-shadow: 0 2px 8px #aaa;
}

.calendarday {
	box-shadow: 2px 2px 10px #888;
	border-radius: 5px;
	padding: 10px;
	margin-top: 20px;
	margin-left: auto; /* 16.05.2022 - JoHo: For å få en kalenderdag sentrert og tilpasset bredden av inneholdet, så er disse tre stilene lagt til. */
	margin-right: auto;
	width: fit-content;
}

.calendarday table > thead > tr.techheader > th {
	text-align: center;
	min-width: 8em;	/* 16.05.2022 - JoHo: Setter opp en minstebredde på en tekniker-kolonne. */
	width: 24em;
}

.calendarday table > thead > tr.techheader > th:first-child {
	min-width: 3em;	/* 16.05.2022 - JoHo: Minstebredden på en tekniker-kolonne skal IKKE gjelde for klokkeslett-kolonnen som er den første TH-barne-noden til en techheader-tr!! */
	width: auto;
	text-align:center;
}

.calendarday table > tbody > tr > td:first-child {		/* 16.05.2022 - JoHo: Sikrer sentrering av klokkeslett-teksen som vises i første kolonne i en rad i bodyen til en kalender-dag-tabell. */
	text-align:center;
}


.calendarday table > tbody > tr > td{
	padding: 0;
	border-right: 1px solid grey;
}

.calendarday table > tbody > tr > td.booked{
	background-color:#77e;
	border: 1px solid #338;
	text-align: center;
	color: white;
	vertical-align: middle;
}

.calendarday table > tbody > tr > td.selected{
	background-color:#7e7;
	border: 1px solid #383;
}

.calendarday table > tbody > tr > td.notfetched{
	background-color: #eee;
}

.calendarWeekday1, .calendarWeekday2, .calendarWeekday3, .calendarWeekday4, .calendarWeekday5 {
	background-color: none;
}

.calendarWeekday6 {
	background-color: lightcoral;
}

.calendarWeekday0 {
	background-color: red;
}

.calendarHoliday {
	background-color:palevioletred;
}

/* For de to stilene som brukes til å vise en eksisterende booking eller en ny booking så ønsker vi IKKE at bakgrunnsfargen skal endres, og lister opp disse innenfor "not(...)" {*/
.calendarday table > tbody > tr > td:not(.booked,.selected):hover {
	background-color: lightgray;
	cursor: pointer;
}

.evenHourStart {
	background-color: #f8f8f8;
}


.calendarday table > tbody > tr > td:hover {
	cursor: not-allowed;
}


tbody > tr > td.divider{
	background-color: lightgray;
	padding: 2px;
}

.request{
	padding: 5px 0;
}

.request.header{
	font-weight: 600;
	padding: 10px 0 0 0;
	clear: both;
}

header.paddedtop{
	padding-top: 20px;
}

.request .techname{
	display: inline-block;
	width: 200px;
}
.request .deadline{
	display: inline-block;
	width: 150px;
}
.request .deadline.passed{
	color: red;
}
.request .response{
	display: inline-block;
	width: 150px;
}

/* Spinner styles */
.spinnerbox, .spinnerbox2 {
	position: relative;
	background-color: #337AB7;
	color: white;
	font-weight: 300;
	font-size: 18px;
	width: 50%;
	margin: 20px auto;
}

.spinner {
	position: absolute;
	right: 10px;
	top: 5px;
	width: 30px;
	height: 30px;
	background-image: url('../images/axspinner.png');
	-webkit-animation: spin 1.0s infinite linear, fadeInLoad 0.5s;
}

.centeredspinner {
	position: absolute;
	right: 50%;
	top: 50%;
	width: 30px;
	height: 30px;
	background-image: url('../images/axspinner.png');
	-webkit-animation: spin 1.0s infinite linear, fadeInLoad 0.5s;
}

/* 03.05.2022 - JoHo: Denne klassen brukes til å vise/sentrere "litt info-tekst" over et sentrert spinner-ikon, 
   men teksten ble ikke spesielt sentrert. Transform/translate-instruksjonen BURDE hatt -50% for å sentrere teksten.
   For at det skulle se bra ut (til det ene/første formålet stilen ble laget) måtte jeg angi -62%!!! */
.textabovecenteredspinner {
	position: absolute;
	left: 50%;
	top: 45%;
	transform: translateX(-62%)
}

.spinner.top{
	top: 1px;
}

.spinnerbox .spinner{
	top: 7px;
}

.spinnerbox2{
	padding: 10px 100px;
	width: 30px;
	border-radius: 5px;
	text-align: center;
}

.spinnerbox2 .spinner{
	position: relative;
	display: block;
	right: inherit;
	top: inherit;
	width: 30px;
	height: 30px;
}

div.spinnerbox {
	text-align: left;
}

/* 13.05.2022 - JoHo: På et par av knappene som er lagt/inn oppdatert i forbindelse med "oppussingen" av kalenderen (en DIV med stilen calendaroverlay) så vil vi vise en spinner mens en databaseoperasjon pågår,
og for at (mini)spinneren da skal vises på en pen måte på knappen (mellom slutten av teksten og slutten av knappen), så trengs det litt padding-right etter teksten.
*/
.buttonTextWithSpinnerOnRightSide {
	padding-right: 15px;
}

.buttonWithStrechedLengthAndSomeTopMargin {
	margin-top: 10px;
	width: 100%;
}

#ordercontainer button.btn-spinner, .calendaroverlay button.btn-spinner {
	position: relative;
	/* 07.06.2023 - JoHo: for knapper der vi skal vise en spinner (ute til høyre) så sikrer vi med litt padding at det blir plass til spinneren uten overlapp på teksten. For at det skal se pent ut så legger vi like mye padding til venstre! */
	padding-left: 30px;
	padding-right: 30px;
}

#ordercontainer button.btn-spinner .spinner, .calendaroverlay button.btn-spinner .spinner{
	width: 20px;
	height: 20px;
	background-size: 20px;
	-webkit-animation: spinsmall 1.0s infinite linear, fadeInLoad 0.5s;
}

#userBox .spinner {
	width: 20px;
	height: 20px;
	top: 0;
	right: 3px;
	background-size: cover;
	-webkit-animation: spinsmall 1.0s infinite linear, fadeInLoad 0.5s;
}

/* 28.11.2020- JoHo: Opprettet klassen for å vise et venteikon mens lagring av verdi fra en sjekkboks gjøres. Prøvde å få animasjonen til bare å kjøre i en td-celle, men den ble bare borte hvis ikke "position: absolute;" fantes! */
.spinner_blue {
	position: absolute;
	right: 5px;
	top: 30px;
	width: 30px;
	height: 30px;
	background-image: url('../images/axspinner_blue.png');
	-webkit-animation: spin 1.0s infinite linear, fadeInLoad 0.5s;
}


.statustext{
	color: green;
	font-weight: bold;
	font-size: 16px;
	padding: 10px 0;
}

@-webkit-keyframes spin{
	from { 
		-webkit-transform: rotate(0deg);
		-webkit-transform-origin: 15px 15px;
	} to { 
		-webkit-transform: rotate(360deg); 
		-webkit-transform-origin: 15px 15px;
	}
}

@-webkit-keyframes spinsmall{
	from { 
		-webkit-transform: rotate(0deg);
		-webkit-transform-origin: 10px 10px;
	} to { 
		-webkit-transform: rotate(360deg); 
		transform-origin: 10px 10px;
	}
}

@-webkit-keyframes fadeInLoad {
	from {
		opacity:0;
	}
	to {
		opacity:1;
	}
}