/* ----- CSS tiltænkt til rapporteringsdelen af app.trendlog.io ----- */
/*
Info
Dette CSS ark blev udviklet i forbindelse med 2. semesterprøven, for OEAMM19EDF (UCL erhversakademiog proffesionshøjskole, Multibemdiedesin, årgang 19-21, klasse A-C).
CSS er skrevet af:
	Max Festersen Hansen
	Signe Arlbjørn
	Konrad Sarna
	Michala Gjøl
*/

body {
	background-color: #F2F2F2;
}

/* --- ATOMS --- */
*{
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; /* Defination af fonte: Første prioritet Arial, så Helvetica, Helvetica Neue og til sidst en browser valgt font med uden serif. */
}

/* -- SEMANTICS AND COMMON ELEMENTS -- */
header, img, div, section, main {
	float: left;
	display: block;
}

header {
	width: 100%;
	background-color: #222;
}
/* -- TEXT --  */
* {
    font-size: 11px;
    line-height: 16px;
    color: #000000;
}

th {
	color: white;
}

@media (min-width:481px) {
    * {
        font-size: 2.287vw; /* ~11 px on 481px width */
        line-height: 3.950vw; /* ~19 px on 481px width */
    }
}

@media (min-width:768px) {
    * {
        font-size: 16px;
        line-height: 26px;
    }
}

@media (min-width:1366px) {
    * {
        line-height: 30px;
    }
}

@media (min-width: 1920px) {
    * {
        font-size: 0.729vw; /* ~14px on 1920px width */
        line-height: 1.719vw; /* ~33px on 1920px width */
    }
}

@media (min-width:3840px) {
    * {
        font-size: 0.729vw; /* ~28px on 3840px width */
        line-height: 1.745vw; /* ~67x on 3840px width */
    }
}

/* -- BUTTON -- */
button {
	cursor: pointer;
}


/* -- SELECT --*/
.select-label {
	position: relative;
	float: left;
	overflow: hidden;
	clear: both;
	cursor: pointer;
}

.select-span {
	float: left;
	min-height: 37px;
	margin-right: 12px;
	font-size: 142.85%;
	line-height: 37px;
	color: #000;
}

@media (min-width:3200px) {
	.select-span {
		font-size: 32px;
		line-height: 37px;
	}
}

.select {
	display: block;
	min-height: 37px;
	padding-left: 10px;
	padding-right: 28px;
	border-radius: 19px;
	font-size: 16px;
	color: #7C7C7C;
	font-style: italic;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-overflow: '';
	border-color: #6F6F6F;
	background-color: #fff;
	cursor: pointer;
}

.select option{
	font-style: normal;
}

@media (min-width:786px) {
	.select {
		font-size: 100%;
	}
}

.select-wrapper {
	position: relative;
}

.select-wrapper:before {
	content: "";
	position: absolute;
	top: calc(50% - 10px);
	right: 10px;
	width: 19px;
	height: 13px;
	background-image: url("../img/icons/chevron-down.svg");
	background-repeat: no-repeat;
	background-size: cover;
}

/*Styleguide nav*/
#atomicDesignNavigation{
	align-content: center;
	display: none;
}
#atomicDesignNavigation ul{
	list-style: none;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto auto auto auto auto;
}
@media (min-width:768px){
	#atomicDesignNavigation{
		display: grid;
	}
}
/* -- h1 HEADING -- */
h1 {
	float: left;
	display: block;
	font-size: 22px;
	line-height: 35px;
	font-weight: 400;
	color: #000000;
}

@media (min-width:481px) {
	h1 {
		font-size: 4.574vw; /* ~22 px on 481px width */
		line-height: 7.277vw; /* ~35 px on 481px width */
	}
}

@media (min-width:768px) {
	h1 {
		font-size: 32px;
		line-height: 52px;
	}
}

@media (min-width:1366px) {
	h1 {
		line-height: 56px;
	}
}

@media (min-width: 1920px) {
	h1 {
		font-size: 1.616vw; /* ~32px on 1920px width */
		line-height: 3.073vw; /* ~59px on 1920px width */
	}
}

@media (min-width:3840px) {
	h1 {
		font-size: 1.667vw; /* ~64px on 3840px width */
		line-height: 3.099vw; /* ~119px on 3840px width */
	}
}

/* -- h2 HEADING -- */
h2 {
	float: left;
	display: block;
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	color: #000000;
}

@media (min-width:481px) {
	h2 {
		font-size: 3.333vw; /* ~16 px on 481px width */
		line-height: 5.417vw; /* ~26 px on 481px width */
	}
}

@media (min-width:768px) {
	h2 {
		font-size: 27px;
		line-height: 44px;
	}
}

@media (min-width:1366px) {
	h2 {
		line-height: 49px;
	}
}

@media (min-width: 1920px) {
	h2 {
		font-size: 1.406vw; /* ~27px on 1920px width */
		line-height: 2.760vw; /* ~53px on 1920px width */
	}
}

@media (min-width:3840px) {
	h2 {
		font-size: 1.146vw; /* ~44px on 3840px width */
		line-height: 2.344vw; /* ~90px on 3840px width */
	}
}

/* -- h3 HEADING -- */
h3 {
	float: left;
	display: block;
	font-size: 13px;
	line-height: 22px;
	font-weight: 400;
	color: #000000;
}

@media (min-width:481px) {
	h3 {
		font-size: 2.703vw; /* ~13 px on 481px width */
		line-height: 4.574vw; /* ~22 px on 481px width */
	}
}

@media (min-width:768px) {
	h3 {
		font-size: 21px;
		line-height: 36px;
	}
}

@media (min-width:1366px) {
	h3 {
		line-height: 40px;
	}
}

@media (min-width: 1920px) {
	h3 {
		font-size: 1.061vw; /* ~21px on 1920px width */
		line-height: 2.292vw; /* ~44px on 1920px width */
	}
}

@media (min-width:3840px) {
	h3 {
		font-size: 1.094vw; /* ~42px on 3840px width */
		line-height: 2.057vw; /* ~79px on 3840px width */
	}
}

/* --- MOLECULES ---*/

/*Style til stherne prioriterings molekyle*/
.star {
	width: 26px;
}

/*Here starts CSS code for settings button (kog img)*/
.settingsicon{
	width: 25px;
}
.settingbutton{
	border: none;
	display: block;
	cursor: pointer;
	background-color: transparent;
}
/*Here starts CSS code for settings menu*/
.settingsmenu, .settingsmenu-dark {
	width: 250px;
	border-radius: 12px;
	padding-right: 12px;
	padding-left: 12px;
	padding-top: 10px;
	padding-bottom: 25px;
	border-sizing: border-box;
}

.settingsmenu-dark .settingsmenubutton:last-child,
.settingsmenu .settingsmenubutton:last-child {
	margin-bottom: 0;
}

.settingsmenu-dark .settingsmenubutton span,
.settingsmenu .settingsmenubutton span {
	font-size: 16px;
	line-height: 20px;
}

.settingsmenu{
	background-color: #D3D3D3;
}
.settingsmenu-dark{
	background-color: #222222;
}
.closesettingmenu{
	display: block;
	background-color: transparent;
	float: right;
	border: none;
	cursor: pointer;
}
.closesettingmenuicon{
	float: right;
	width: 24px;
	padding-right: 12px;
}
.closesettingmenu-dark{
	display: block;
	background-color: transparent;
	float: right;
	width: 100%;
	border: none;
	cursor: pointer;
}
.closesettingmenuicon-dark{
	float: left;
	width: 24px;
	padding-left: 12px;
}
.settingsmenu-dark .settingsmenubutton,
.settingsmenu .settingsmenubutton {
	width: 100%;
	padding: 8px 17px;
	border: solid 1px #707070;
	margin-bottom: 5px;
	box-sizing: border-box;
}

.settingsmenubutton {
	display: block;
	width: auto;
	margin: 0 auto;
	padding: 5px 17px;
	text-align: center;
	border: #000000;
	border-radius: 12px;
	cursor: pointer;
}

.settingsmenubutton:hover{
	background-color: #adadad;
}

.settingsmenubutton span{
	float: left;
	margin-right: 15px;
	color: #848484;
	font-size: 19px;
}

.settingsmenuicon{
	float: right;
	width: 20px;
}

/*Here starts CSS code for type button*/
.frame {
	float: left; /* Added float to display height right */
	background-color: black;
	width: 100%;
	/* width: 400px; *//* Did not scale with parrent */
}

.type {
	width: calc(100% - 10px); /* 100% width -10px margin */
	margin-left: 5px;
	margin-right: 5px; /* Margin added */
}

.typetext {
	float: left; /* Added float to display height right */
	color: white;
	font-size: 110%; /* Must be larger on smaller screens */
}

.typebutton {
	float: left; /* Added float to display height right */
	width: 100%;
	border-radius: 10px;
	font-size: 110%; /* Must be larger on smaller screens */
}

select.typebutton {
	height: 37px;
	color: #7C7C7C;
	font-style: italic;
	border: solid 1px #707070;
	padding:0 5px;
	box-sizing: border-box;
	cursor: pointer;
}

select.typebutton option{
	color: #000;
	font-style: normal;
	cursor: pointer;
}

.typebuttontext {
	float: left;
	font-style: italic;
	color: grey;
	margin-left: 5px;
	font-size: 110%;
}

.type-text-field{
	float: left;
	width: 100%;
	min-height: 165px;
	padding: 5px;
	border: solid 1px #707070;
	border-radius: 6px;
	resize: none;
	box-sizing: border-box;
}

.chevronicon {
	float: right;
	margin-top: 5px;
}

@media (min-width:1366){
	.typetext, .typebutton, .typebuttontext {
		font-size: 100%;
	}
}


/* save-to-select */
.save-to-select {
	display: block;
	float: left;
}
.save-to-select .select-span,
.save-to-select .select-wrapper {
	clear: both;
}
/*Here starts code for 'new report button'*/
.newreportbutton{
	border: none;
	border-radius: 12px;
	background-color: #00cd00;
	width: 150px;
	cursor: pointer;
	display: grid;
	grid-template-columns: auto auto;
	align-content: center;
	overflow: hidden;
}
.newreportspan{
	font-size: 18px;
	display: grid;
}
.plusimg{
	display: grid;
	margin: 0 0 0 auto;
}
/*Here starts CSS code for sort by by button*/
.sortbydiv{
	font-size: 19px;
	float: left;
}
.sortbybutton{
	background-color: #fff;
	border-color: #000;
	border-radius: 12px;
	width: 150px;
	cursor: pointer;
	display: block;
	float: right;
}
.sortbybutton span{
    float: left;
    color: #848484;
    font-size: 19px;
    margin-left: 7px;
}

.sort-by-select {
	float: right;
	width: 205px;
	height: 37px;
	line-height: 37px;
}

@media (min-width:786px) {
	.sort-by-select {
		font-size: 15px;
	}
}

@media (min-width:1920px) {
	.sort-by-select {
		font-size: 22px;
	}
}

/*Add and delete page button CSS*/

.adddelete-button{
    border-radius: 15px;
    cursor: pointer;
}

.plusminus-iconimg{
    width: 100%;
    display: block;

}

/*Add and delete page button end*/



/*Buttons with text and icon css*/

.text-icon{
    font-size: 20px;
}


.texticon-button{
    background-color: transparent;
    border:none;
    display: inline-block;
}

.texticon-iconimg{
    width: 100%;
    margin-bottom: -12px;
}

/*Buttons with text and icon css end*/

/*Here starts CSS code for filter by button*/
.filterbutton {
	background-color: #fff;
	border: #000000;
	border-radius: 12px;
	width: auto;
	padding: 5px 17px;
	cursor: pointer;
	display: block;
	text-align: center;
}

.filterbutton span{
    color: #000;
    margin-right: 15px;
}

/* -- DATE-RANGE --*/
.date-range {
	float: left;
	width: 100%;
	cursor: pointer;
}

.date-range-title,
.date-range-input,
.date-range-start-end-split {
	font-size: 135.71%;
	line-height: 135.71%;
	color: #FFF;
}

.date-range-title {
	float: left;
	clear: both;
}

.date-range-date-wrapper {
	float: right;
	clear: both;
}

.date-range-input {
	position: relative;
	display: block;
	float: left;
	clear: both;
	border: none;
	text-decoration: underline;
	background-color: transparent;
	cursor: pointer;
}
.date-range-input:before {
	content:"";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 65%;
	height: 1px;
	background-color: #FFF;
}

.date-range-input:placeholder {
	text-decoration: underline;
}

.date-range-start-end-split {
	display: none;
	float: left;
	margin: 0 10px;
}

@media (min-width:768px){
	.date-range-title {
		width: 30%;
		clear: left;
	}

	.date-range-date-wrapper {
		clear: right;
	}

	.date-range-input {
		width: auto;
		clear: none;
	}
}

@media (min-width:1366px){
	.date-range-start-end-split {
		display: inline-block;
	}
}

/*Here starts CSS code for quantity by button*/
.quantitydiv{
	font-size: 15px;
	float: left;
}
.quantitybutton{
	background-color: #fff;
	border-color: #000;
	border-radius: 12px;

	cursor: pointer;
	display: block;
	float: right;
}
.quantitybutton span{
    float: left;
    color: #000;
    font-size: 19px;
    margin-left: 7px;
}
/*Here starts code for prevoíous button in editor*/
.previousbutton{
	background-color: #fff;
	border: none;
	border-radius: 12px;
	width: 100px;
	cursor: pointer;
	display: block;
}
.previousbutton span{
    color: #000;
    font-size: 10px;
    margin-right: 6px;
	float: right;
}
.previousbutton img{
	margin: 6px auto;
}
/*Here starts code for next button in editor*/
.nextbutton{
	background-color: #fff;
	border: none;
	border-radius: 12px;
	width: 100px;
	cursor: pointer;
	display: block;
}
.nextbutton span{
    color: #000;
    font-size: 10px;
}
.nextbutton img{
	margin: 6px auto;
}
/*Here starts code for upload image in editor*/
.uploadimagebutton{
	min-height: 37px; /* Too small on small screens */
	background-color: #fff;
	border: none;
	border-radius: 12px;
	width: 120px;
	cursor: pointer;
	display: block;
}
.uploadimagebutton span{
	color: #000;
    font-size: 12px;
}
/*Here starts code for uplad template button*/
.upladtemplatebutton{
	min-height: 37px; /* Too small on mobile and tablet */
	background-color: #D3D3D3;
	border: none;
	border-radius: 12px;
	width: 100px;
	cursor: pointer;
	display: block;
}
.upladtemplatebutton span{
    color: #000;
    font-size: 10px;
	margin-left: 7px;
	float: left;
}
.upladtemplatebutton img{
	width:15px;
}
/*Here starts code for help button*/
.helpbutton{
	min-height: 37px; /* Too small on small screens */
	background-color: #D3D3D3;
	border: none;
	border-radius: 12px;
	width: 50px;
	cursor: pointer;
	display: block;
	float: right;
}
.helpbutton span{
    color: #000;
    font-size: 10px;
	margin-left: 7px;
	float: left;
}
.helpbutton img{
	width:10px;
	float: right;
	margin: 9px 9px 0 0;
}
/*Here starts code for text edit button*/
.texteditdiv{
    float: left;
	font-size: 20px;
}
.texteditdiv img{
	float: right;
}
.texteditbutton{
    background-color: #fff;
    border-color: #000;
    border-radius: 12px;
	width: 200px;
    cursor: pointer;
    display: block;
    float: right;
}
.texteditbutton span{
float: left;
color: #000;
font-size: 19px;
margin-left: 7px;
}

/* her starter styling for almindelige switch knapper*/
		.switch {
		  position: relative;
		  margin: auto;
		  height: 26px;
		  width: 120px;
		  background: white;
		  border-radius: 15px;
		}

		.switch-label {
		  position: relative;
		  z-index: 2;
		  float: left;
		  width: 58px;
		  line-height: 26px;
		  font-size: 11px;
		  color: black;
		  text-align: center;
		  cursor: pointer;
		}
		.switch-label:active {
		  font-weight: regular;
		}

		.switch-label-off {
		  padding-left: 2px;
		}

		.switch-label-on {
		  padding-right: 2px;
		}

		.switch-input {
		  display: none;
		}

		.switch-input:checked + .switch-label {
		  font-weight: regular;
		  color: black;
		}

		.switch-input:checked + .switch-label-on ~ .switch-selection {
		  left: 60px;
		}

		.switch-selection {
		  display: block;
		  position: absolute;
		  z-index: 1;
		  top: 2px;
		  left: 2px;
		  width: 58px;
		  height: 22px;
		  background: #00CD00;
		  border-radius: 15px;
		}
/* styling for almindelige switchknapper - slut*/

/*STYLING FOR MEGASWITCH*/
		/*style for kanppens baggrund*/
		.megaswitch {
		  position: relative;
		  height: 26px;
		  width: 240px;
		  background: white;
		  border-radius: 15px;
		}
		/*slut*/

		/*style for labels*/
		.switch-label0 {
		  position: relative;
		  z-index: 2;
		  float: left;
		  width: 58px;
		  line-height: 26px;
		  font-size: 11px;
		  color: black;
		  text-align: center;
		  cursor: pointer;
		}
		.switch-label0:active {
		  font-weight: regular;
		}

		.switch-label-off0 {
		  padding-left: 2px;
		}

		.switch-label-on0 {
		  padding-right: 2px;
		}
		/*slut*/

		/*style for labels*/
		.switch-input0 {
		  display: none;
		}
		/*slut*/

		/*styling for hvor den runde grønne knap (.switch-selector) skal rykke sig hen alt efter hvilket hvilket label der bliver "checked" */
		.switch-input0:checked + .switch-label0 {
		  font-weight: bold;
		  color: black;
		}

		.switch-input0:checked + .switch-label-on1 ~ .switch-selection0 {
		  left: 60px;
		}

		.switch-input0:checked + .switch-label-on2 ~ .switch-selection0 {
		  left: 120px;
		}

		.switch-input0:checked + .switch-label-on3 ~ .switch-selection0 {
		  left: 180px;
		}
		/*slut*/

		/*style for den runde grønne knap der switcher fra højre til venstre*/
		.switch-selection0 {
		  display: block;
		  position: absolute;
		  z-index: 1;
		  top: 2px;
		  left: 2px;
		  width: 58px;
		  height: 22px;
		  background: #00CD00;
		  border-radius: 15px;
		}
		/*slut*/
/*STYLING FOR MEGASWITCH - SLUT*/


/*Here starts CSS for search input*/
.searchInput {
    background-image: url('../img/icons/search.svg'); /* Add a search icon to input */
    background-position: 10px 11px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%;
    font-size: 16px; /* Increase font-size */
    padding: 10px 20px 5px 50px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    border-radius: 10px; /*round corners*/
	box-sizing: border-box;
}

/*Search input CSS ends*/

/*Other buttons CSS*/

.button-g{
    min-width: 75px;
    width: auto;
    border: solid 1px #00CD00;
    border-radius: 10px;
    background-color: #00CD00;
    padding: 8px 10px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}

.button-b{
    min-width: 75px;
    width: auto;
    border: solid 1px #5071A3;
    border-radius: 10px;
    background-color: #5071A3;
    padding: 8px 10px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}

.button-r{
    min-width: 75px;
    width: auto;
    color: white;
    border: solid 1px #E4342B;
    border-radius: 10px;
    background-color: #E4342B;
    padding: 8px 20px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}

.button-w{
    min-width: 75px;
    width: auto;
    color: black;
    border: solid 1px grey;
    border-radius: 10px;
    background-color: white;
    padding: 8px 20px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}



.buttont{
    border: solid 1px #5071A3;
    border-radius: 10px;
    background-color: #5071A3;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}

.Ticon{
    width: 200%;
    margin-left:-47%;
}

.buttongr{
    margin-top: 10px;
    border: solid 1px #6F6F6F;
    border-radius: 10px;
    background-color: #6F6F6F;
    padding: 8px 28px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}
/*Other buttons CSS end*/

/* --- ORGANISMS --- */
/*Here starts CSS for header in editor*/
.editorHeader{
	background-color: #BBBBBB;
	border-color: black;
	display: block;
	width: 100%;
}
/*Here starts CSS for Main in Editor*/
.mainEditor{
	display: grid;
	grid-template-columns: 55% 45%;
}
/*Here starts CSS for Editor page preview*/
.report-preview{
	width: 100%;
	background-color: #6f6f6f;
	align-content: center;
	overflow-x: auto;
	padding: 0 2vw;
	box-sizing: border-box;
}

.pagediv{
	margin: 0 auto;
}
/*CSS for the A4 page in report preview in editor*/
.page {
	/* Styles for better appearance on screens only -- are reset to defaults in print styles later */

	/* Reflect the paper width in the screen rendering (must match size from @page rule) */
	width: 21cm;
	/* Reflect the paper height in the screen rendering (must match size from @page rule) */
	min-height: 29.7cm;

	/* Reflect the actual page margin/padding on paper in the screen rendering (must match margin from @page rule) */
	padding-left: 2cm;
	padding-top: 2cm;
	padding-right: 2cm;
	padding-bottom: 2cm;
}					
.pageHorizontal {
	/* Styles for better appearance on screens only -- are reset to defaults in print styles later */

	/* Reflect the paper width in the screen rendering (must match size from @page rule) */
	width: 25.839cm;
	/* Reflect the paper height in the screen rendering (must match size from @page rule) */
	min-height: 18.27cm;

	/* Reflect the actual page margin/padding on paper in the screen rendering (must match margin from @page rule) */
	padding-left: 2cm;
	padding-top: 2cm;
	padding-right: 2cm;
	padding-bottom: 2cm;
}

.page, .pageHorizontal {
	/* Styles for better appearance on screens only -- are reset to defaults in print styles later */

	/* Divide single pages with some space and center all pages horizontally */
	margin: 1cm auto;
	/* Define a white paper background that sticks out from the darker overall background */
	background: #fff;
	/* Show a drop shadow beneath each page */
	box-shadow: 0 4px 5px rgba(75, 75, 75, 0.2);
	/* Override outline from user agent stylesheets */
	outline: 0;
}
/*Here starts CSS for editor tabs*/
.editor{
	float: right;
	width: 100%;
	height: 100%;
	background-color: #404040;
}
.editornav{
	width: 100%;
	display: grid;
	grid-template-columns: auto auto auto auto;
}
.tabsnavbubtton{
	display: grid;
	margin: 0 auto;
	width: 100%;
	height: 50px;
	text-align: center;
}
.tabsnavbubtton a{
	text-decoration: none;
	color: #fff;
	font-size: 24px;
	margin: auto;
	cursor: pointer;
}
.lightbg{
	background-color: #6F6F6F;
}
.editortabs{
	margin: 20px 10px 0;
	background-color: #505050;
	width: calc(100% - 20px); /* 100% width - 20px margin */
}
.graphsOverDiv{
	display: grid;
	grid-template-columns: auto auto;
	width: 100%;
}
.graphs1{
	width: 98%;
	display: grid;
}
.templates-overDiv{
	width: 100%; 
	display: grid; 
	grid-template-columns: auto;
}

@media (min-width:1366px){
	.templates-overDiv{
		grid-template-columns: auto auto;
	}
}

#codeEditorTab, #text, #graphs, #templates{
	width: 99%;
}
.codeEditorOverDiv{
	width: 100%;
	margin: 0 auto;
}
.codeEditor{
	margin: 0 auto;
	width: 99%;
	height: 1000px;
	background-color: #fff;
	display: block;
	float: right;
	padding: 15px;
}
.textTool{
	width: 100%;
	margin: 20px 0 200px 0;
	padding: 0 20px;
}
.textTool label{
	float: left;
	width: 100%;
	color: #fff;
	font-weight: bold;
}
.textToolImgButton{
	background-color: #303030;
	border: none;
	border-radius: 12px;
	width: 40px;
	height: 40px;
	float: left;
	cursor: pointer;
}
.textToolImgButton img{
	margin: 5px;
	width: 30px;
	float: none;
}
.textEditDiv{
	color: #fff;
	margin-right: 30px;
}
.textEditDiv label{
	margin-right: 50px;
	width: auto;
}
.codeEditorButtons{
	width: 80%;
	float: right;
	margin: 0 auto;
	display: block;
	padding: 5px;
}
.showReport{
	float: left;
	display: block;
    width: 150px;
    text-align: center;
    border: #000000;
    border-radius: 12px;
    margin: 0 5px;
    cursor: pointer;
    background-color: #D3D3D3;
}
/*Here starts CSS code for Navbar  - big screen*/
nav{
	width: 100%;
	float: left;
	background-color: #222;
	display: block;
}
nav div{
	display: block;
	float: left;
}

.navbarulleft {
	list-style: none;
	float: left;
}
.navbarulleft li{
	float: left;
}
.navbarulleft a{
	font-weight: bold;
	font-size: 14px;
	color: #ffffff;
	float: left;
	padding: 15px;
	text-decoration: none;
}

.profilediv{
	float: right;
}

.navbarulright {
	list-style: none;
	float: right;
}
.navbarulright li{
	float: left;
}

img.icon{
	display: block;
	width: 14px;
}

.brandidentity{
	width: 130px;
	padding: 0px 7.75px;
	margin-bottom: -8px;
}

nav a{
	font-weight: bold;
	font-size: 14px;
	color: #ffffff;
	float: left;
	padding: 15px;
	text-decoration: none;
}
nav a:hover{
	background: #444;
}

.selection{
	margin-top: 6px;
}

.channels{
	color: #9d9d9d;
	font-size: 14px;
	font-weight: 100;
	float: left;
	padding: 15px;
 }

.channelselect{
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.profiledropdown-a{
	width: 80%;
}
.profiledropdown{
	width: 200px;
	float: right;
}

.username{
	float: left;
	font-weight: bold;
	font-size: 14px;
	color: #ffffff;
}
.profile-icon{
	display: block;
	width: 14px;
	float: right;
	margin-right: 30px;
}
/*Here ends CSS for NAV - big screen*/
/*Burger menu button CSS*/
.burgerMenu{
	display: block;
	cursor: pointer;
	float: left;
	width: 35px;
}
.bar1, .bar2, .bar3 {
	width: 35px;
	height: 5px;
	background-color: #333;
	margin: 3px 0;
	transition: 0.4s;
}
.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-9px, 6px);
	transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
	opacity: 0;
}
.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-8px, -8px);
}
/*Here starts CSS for NAV - Small screen*/
.smallnav{
	position: absolute;
	top: 0;
	left: 0;
	float: left;
	background-color: #222;
	display: block;
	width: 100%;
	height: 100vh;
	overflow-y: auto;
	z-index: 100000;
}
/* small nav forbliver ikke synlig ved hover - det skal fixes
.smallnav:hover, .smallnav div:hover, .smallnav div ul:hover, .smallnav div ul li:hover, .smallnav div ul li a:hover, .smallnav img.icon:hover, .smallnav a:hover, .branddiv:hover + .navhidden{
	dislay: block;
}
*/
.smallnav div{
	display: block;
	float: left;
	width: 100%;
}

.smallnav div ul {
	list-style: none;
	float: left;
	width: 100%;
}

.smallnav div ul li{
	width: 100%;
}

.smallnav div ul li a{
	font-weight: bold;
}

.smallnav img.icon{
	display: block;
	width: 14px;
}

.smallnav a{
	font-weight: bold;
	color: #ffffff;
	float: left;
	padding: 15px;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
}
.smallnav a:hover{
	background: #444;
}

.selection{
	margin-top: 6px;
}

.smallnav .channels{
	color: #9d9d9d;
	font-size: 14px;
	font-weight: 100;
	padding: 15px;
 }

.smallnav .channelselect{
	display: block;
	width: calc(100% - 30px); /* 100% width - 30px margin*/
	height: 34px;
	padding: 6px 12px;
	margin: 0 15px;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.smallnav.profiledropdown-a{
	width: 80%;
}
.smallnav.profiledropdown{
	width: 200px;
}

.smallnav.username{
	float: left;
	font-weight: bold;
	font-size: 14px;
	color: #ffffff;
}

.smallnav.profile-icon{
	display: block;
	width: 14px;
	float: right;
}

.hiddenNav{
	display: none;
}

.burgerMenu:hover + .hiddenNav{
	display: block;
}
/*Here neds CSS for NAV - Small screen*/
/*Here ends CSS for NAV - Small screen*/
/*Here starts CSS for pop up delete*/
.popupdelete {
	position: absolute;
	top: calc(50% - 110px); /* Half of screen - half of element height */
	left: 0;
	background-color: #262626;
	text-align: center;
	width: 100%;
	max-width: 400px;
	height: 220px;
	border-radius: 12px;
}

@media (min-width:401px){
	/* Calculate left position, when width is over 400px */
	.popupdelete {
		left: calc(50vw - 200px); /* Half of screen - element width */
	}
}

.popupdelete span{
	color: #fff;
	margin: 50px auto;
	display: block;
}
.popupdeletebuttons{
	display: grid;
	grid-template-columns: auto auto;
	float: none;
	width: 100%;
	margin: 0 auto;
}
.cancel{
	background-color: #fff;
	text-align: center;
	border: none;
	border-radius: 12px;
	margin: 0 auto;
	width: 100px;
	height: 50px;
	cursor: pointer;
}
.delete{
	background-color: #DF5539;
	color: #fff;
	text-align: center;
	border: none;
	border-radius: 12px;
	margin: 0 auto;
	width: 100px;
	height: 50px;
	cursor: pointer;
}
/*Here ends CSS for pop up delete*/

/* Styling for SIDE TITEL OG SETTINGS BAR" FOR OVERVIEW SIDEN ORAGBISME */
.frameforsidetitelogsettingsbar {
	width: 100%;
	min-height: 150px;
	background-color: #D3D3D3;
}

/*PLACERING / POSITIONER*/
.sidetitelogsettingswrap {
	width: 100%;
	padding-top: 20px;
}

.topEditorHeader{
	width: 100%;
}
.bottomEditorHeader{
	width: 100%;
	margin-top: 18px;
}

.sidetitelcontainer, .quantitycontainer  {
  float: left;
}

.opretnyrapportcontainer {
	position: relative;
	float: right;
	height: 16px;
	width: 150px;
}

.opretnyrapportcontainer button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	clear: right;
}

@media (min-width:481px) {
	.opretnyrapportcontainer {
		height: 7.277vw;
	}
}

@media (min-width:768px) {
	.opretnyrapportcontainer {
		height: 52px;
	}
}

@media (min-width:1366px) {
	.opretnyrapportcontainer {
		height: 56px;
	}
}

@media (min-width: 1920px) {
	.opretnyrapportcontainer {
		height: 3.073vw; /* ~59px on 1920px width */
	}
}

@media (min-width:3840px) {
	.opretnyrapportcontainer {
		height: 3.099vw; /* ~119px on 3840px width */
	}
}

.quantitycontainer,
.switch-preview-list-container,
.folderoverviewcontainer,
.filtercontainer,
.sortbycontainer {
	margin-right: 1vw;
}

.quantitycontainer {
	clear: left;
}

.switch-preview-list-container {
	float: left;
}

.folderoverviewcontainer {
	float: left;
}

.folderoverviewcontainer .settingsmenubutton span,
.filtercontainer .filterbutton span,
.sortbycontainer .select-span {
	display: none;
}

.sortbycontainer .sort-by-select,
.searchcontainer .searchInput {
	max-width: 108px;
}

.filtercontainer {
	float: left;
}

.sortbycontainer {
	float: left;
}

.searchcontainer {
	float: right;
}

@media (min-width:1366px) {
	.quantitycontainer,
	.switch-preview-list-container,
	.folderoverviewcontainer,
	.filtercontainer,
	.sortbycontainer {
		margin-right: 34px;
	}
	
	.folderoverviewcontainer .settingsmenubutton span,
	.filtercontainer .filterbutton span,
	.sortbycontainer .select-span {
		display: inline-block;
	}
	
	.sortbycontainer .sort-by-select,
	.searchcontainer .searchInput {
		max-width: 100%;
	}
	
	.searchcontainer {
		float: right;
	}
}
/* Styling for SIDE TITEL OG SETTINGS BAR" FOR OVERVIEW SIDEN ORAGBISME - SLUT */

/* Styling for SIDE TITEL OG SETTINGS BAR" FOR EDITOR SIDEN ORAGBISME */
/*PLACERING / POSITIONER*/
.closecontainer, .savecontainer, .deletecontainer {
	float: right;
}

@media (min-width:481px) {
	.closecontainer, .savecontainer, .deletecontainer {
		height: 7.277vw;
	}
}

@media (min-width:768px) {
	.closecontainer, .savecontainer, .deletecontainer {
		height: 52px;
	}
}

@media (min-width:1366px) {
	.closecontainer, .savecontainer, .deletecontainer {
		height: 56px;
	}
}

@media (min-width: 1920px) {
	.closecontainer, .savecontainer, .deletecontainer {
		height: 3.073vw; /* ~59px on 1920px width */
	}
}

@media (min-width:3840px) {
	.closecontainer, .savecontainer, .deletecontainer {
		height: 3.099vw; /* ~119px on 3840px width */
	}
}

.sidetitelcontainer, .previouspagecontainer {
  float: left;
}

.previouspagecontainer,
.savecontainer,
.deletecontainer,
.switch-multiple-singular-container,
.switch-horizontal-vertical-container,
.addpageknapcontainer,
.deletepageknapcontainer,
.uploadimageknapcontainer,
.nextpagecontainer {
	margin-right: 1vw;
}

.closecontainer .text-icon, .savecontainer .text-icon, .deletecontainer .text-icon {
	transform: translateY(50%);
}

.switch-multiple-singular-container {
	float: left;
}

.switch-horizontal-vertical-container{
	float: left;
}

.addpageknapcontainer {
	float: left;
}

.deletepageknapcontainer {
	float: left;
}

.uploadimageknapcontainer {
	float: left;
}

.nextpagecontainer {
	float: left;
}

.megaswitchcontainer {
	float: right;
}

@media (min-width:1366px) {
	.previouspagecontainer,
	.savecontainer,
	.deletecontainer,
	.switch-multiple-singular-container,
	.switch-horizontal-vertical-container,
	.addpageknapcontainer,
	.deletepageknapcontainer,
	.uploadimageknapcontainer,
	.nextpagecontainer {
		margin-right: 34px;
	}
	
	.folderoverviewcontainer .settingsmenubutton span,
	.filtercontainer .filterbutton span,
	.sortbycontainer .select-span {
		display: inline-block;
	}
	
	.sortbycontainer .sort-by-select,
	.searchcontainer .searchInput {
		max-width: 100%;
	}
	
	.searchcontainer {
		float: right;
	}
}
/* Styling for SIDE TITEL OG SETTINGS BAR" FOR EDITOR SIDEN ORAGBISME - SLUT */

/* Styling for Upload pop-up ORAGBISME*/
.frameforuploadpopup {
    position: absolute;
    top: calc(50% - 110px); /* Half of screen - half of element height */
    left: 0;
	background-color: #D3D3D3;
    width: 100%;
    max-width: 425px;
	height: 100vh;
	max-height: 220px;
    border-radius: 12px;
	overflow-y: auto;
}

@media (min-width:401px){
    /* Calculate left position, when width is over 400px */
    .frameforuploadpopup {
        left: calc(50vw - 212px); /* Half of screen - element width */
    }
}

.x1 {
	float: right;
	margin-right: -110px;
}

.x2{
	float: right;
	margin-right: -170px;
}

.uploadtemplate {
	margin-top: -10px;
}

.uploadpopuptitelwrap {
	margin-top: 15px;
}

.uploadpopuptitelwrap, .uploadtemplateknap{
	margin-left: 10px;
	margin-right: 10px;
}

.uploadpopuptextknaphøjre {
	float: right;
	margin-top: 10px;
	margin-right: 10px;
}

.uploadpopuptextknapvenstre {
	float: left;
	margin-top: 10px;
	margin-left: 10px;
}
/* Styling for Upload pop-up ORAGBISME - SLUT */


/*Styling for setting pop-up organismer*/
.frameforsettingpopup {
    position: absolute;
    top: 10vh;
    left: 0;
	background-color: #222222;
	width: 100%;
	max-width: 450px;
	height: 100vh;
	max-height: 400px;
	border-radius: 5px;
	overflow-y: auto;
}

@media (min-width:401px){
    /* Calculate left position, when width is over 400px */
    .frameforsettingpopup {
        left: calc(50vw - 200px); /* Half of screen - element width */
    }
}

.settingtitel {
	color: white;
	margin-top: -10px;
	margin-left: 10px;
}

.settingpopupicon, .settingpopupxicon {
	width: 40px;
	height: 40px;
}

.settingpopupxicon {
	float: right;
	margin-right: -200px;
}

.popuptitel, .settingpopupknap{
	margin-top: 20px;
	clear: right;
}

.settingpopupknap,
.settingpopupknap,
.settingpopupknap,
.messageframe {
	width: calc(100% - 20px); /*100% width - 20px margin*/
	clear: both;
	margin-left: 10px;
	margin-right: 10px;
}

.popupcancelknap, .popupdoneknap {
	margin-top: 20px;
	margin-left: 10px;
	margin-right: 10px;
}
	
.popupcancelknap{
	clear: left;
}

.popupdoneknap {
	float: right;
}
/*Styling for setting pop-up organismer - SLUT*/

/*ekstra style til share as pop-up*/
.frameforshareaspopup {
    position: absolute;
    top: 10vh;
    left: 0;
	background-color: #222222;
	width: 100%;
	max-width: 440px;
	height: 100vh;
	max-height: 600px;
	border-radius: 5px;
	overflow-y: auto;
}

@media (min-width:441px){
    /* Calculate left position, when width is over 400px */
    .frameforshareaspopup {
        left: calc(50vw - 220px); /* Half of screen - element width */
    }
}

.textarea {
	width: 100px;
	height: 100px;
}
/*ekstra style til share as pop-up - SLUT*/

/*ekstra style til schedule as pop-up*/
.timebutton {
	width: 80px;
	border-radius: 10px;
}
/*ekstra style til schedule as pop-up - slut*/

/*ekstra style til save as as pop-up*/
.frameforsavaspopup {
    position: absolute;
    top: calc(50% - 175px); /* Half of screen - half of element height */
    left: 0;
	background-color: #222222;
	width: 100%;
	max-width:420px;
	height: 100vh;
	max-height: 350px;
	border-radius: 5px;
	overflow-y: auto;
}

@media (min-width:401px){
    /* Calculate left position, when width is over 400px */
    .frameforsavaspopup {
        left: calc(50vw - 210px); /* Half of screen - element width */
    }
}

.popupcancelknap1 {
	float: left;
	margin-top: 20px;
	margin-left: 10px;
}

.popsaveknap {
	float: right;
	margin-top: 20px;
	margin-right: 40px;
}
/*ekstra style til save pop-up - slut*/

/*ekstra style til filter pop-up*/
.daterangecontainer {
	background: grey;
	float: left;
}
.daterangetitelinfilterpopup {
	font-size: 10px;
	float: left;
	margin-left: 10px;
}
.popupcancelknapfilter{
	float: left;
	margin left: 10px;
	margin-top: 20px;
}

.clearallfilterknap {
	float: left;
	margin left: 10px;
	margin-top: 20px;
}

.popupdoneknapfilter{
	float: right;
	margin-top: 20px;
	margin right: 30px;
}
/*ekstra style til filter pop-up - slut*/

/*ekstra style for create report pop up*/
.frameforcreatenewreportpopup {
	width: 420px;
	height: 350px;
}
/*ekstra style for create report pop up - slut*/

/* -- HIGHCHARTS -- */
.highcharts-credits {
	display: none;
}

.highcharts:hover .highcharts-credits {
	display: block;
}

.highcart-preview {
	position: relative;
	width: 98%;
	margin: 10px auto 0;
}

.highcart-preview h4 {
	float: left;
	cursor: pointer;
	font-weight: 400;
	font-size: 112,5%;
	line-height: 25px;
	color: #fff;
}

@media (min-width:1920px){
	.highcart-preview h4 {
		font-size: 20px;
		color: #fff;
	}
}

.highcart-preview .star {
	float: right;
}

.aspect-one-to-one {
	position: relative;
	float:left;
	width: 100%;
	padding-top: 100%; /* 1:1 Aspect Ratio */
	margin-top: 16px;
}

.highchart-button {
	position: absolute;
	top: 0;
    left: 0;
    float: left;
    clear: both;
	width: 100%;
	height: 100%;
	padding: 15px;
	border: none;
	border-radius: 5px;
	background-color: #6F6F6F;
	border-sizing: border-box;
}

/*ekstra style til create new report pop-up*/
.frameforcreatenewreportpopup {
	background-color: #6F6F6F;
	width:450px;
	height: 400px;
	border-radius: 5px;
}

.settingpopupxiconblack {
	float: right;
	margin-right: -80px;
	width: 40px;
	height: 40px;
}
/*ekstra style til create new report pop-up  - slut*/


/* popup infobox css*/
.popupinfobox{
    position: absolute;
    top: 10vh;
    left: 0;
	background-color: #D3D3D3;
    text-align: center;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    max-height: 220px;
    border-radius: 12px;
}

@media (min-width:401px){
    /* Calculate left position, when width is over 400px */
    .popupinfobox {
        left: calc(50vw - 200px); /* Half of screen - element width */
    }
}

.popupinfobox span {
    color: black;
    font-size: 30px;
    display:inline-block;
    margin-top: 65px;
}

.popupinfobox .close-icon,
.popupinfobox .close-icon .X-icon {
	float: right;
	margin-left: 0;
}

.close-icon{
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: grid;

}

.X-icon{
    margin-left: 365px;
    margin-top: 2px;
}
/*popup infobox css slut*/


/*Preview css start*/

.preview-outbox{
    background-color: #404040;
    width: 300px;
    height: 342px;
    border-radius: 8px;
    margin: 10px auto 0;
}

.preview-outbox p{
	float: right;
	margin-top: 14px;
	margin-right: 10px;
}

.rep-name{
    color: white;
    font-size: 20px;
    display: inline-block;
    margin-top: 40px;
    margin-left: 18px;
}


.gear-icon{
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.gear-iconimg{
    width: 9%;
    margin-left: 250px;
    display: block;
    margin-top: -24px;
    margin-bottom: 12
}


.preview-inbox{
    background-color: #6F6F6F;
    width: 276px;
    height: 250px;
    border-radius: 6px;
    display: inline-block;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 12px;
    margin-top: 0px;
}

.preview-img{
    width: 90%;
    display: inline-block;
    margin-top: 29px;
    margin-bottom: 29px;
    margin-left: 14px;
    margin-right: 14px;
}


.temp-name{
    color: white;
    font-size: 20px;
    display: inline-block;
    margin-top: 10px;
    margin-left: 18px;
}

.favstar-icon{
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.favstar-iconimg{
    width: 9%;
    margin-left: 250px;
    display: block;
    margin-top: -24px;
    margin-bottom: 12
}


.graph-name{
    color: white;
    font-size: 20px;
    display: inline-block;
    margin-top: 40px;
    margin-left: 18px;
}

.graph-img{
    width: 80%;
    display: inline-block;
    margin-top: 22px;
    margin-bottom: 22px;
    margin-left: 28px;
    margin-right: 28px;
}

/*preview css slut*/


/*List view css start*/

.searchInput {
    background-image: url('../img/icons/search.svg'); 
    background-position: 10px 5px;
    background-repeat: no-repeat;
    width: 50%;
    font-size: 16px;
    padding: 10px 20px 5px 50px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 10px; 
}


/*List view*/

#reportUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}



.report-listbox{
    background-color: #6F6F6F; 
    width: 80%;
    height: 4%;
    border-radius: 6px;
    display: inline-block; 
    margin-top: 5px; 
   
}

.rep-namelist{
    color: black; 
    font-size: 18px;
    display: list-item; 
    margin-left: 15px;
    margin-top: 1px; 
   
}


/*List view css end*/


/* --- ORGANISMER SLUT --- */


/* --- TEMPLATES --- */
/* -- POSITIONING -- */
/* - WRAPPER - */
.wrapper {
	float: none;
	width: 95%;
	margin: 0 auto;
	overflow: auto;
}

@media (min-width:1366px) {
	.wrapper {
		width: 75%;
	}
}

header .wrapper {
	width: 100%;
}

@media (min-width:1920px) {
	header .wrapper{
		width: 75%;
	}
}


/* -- SECTIONS -- */
.topsection,
.mainsection {
	float: left;
	width: 100%;
}
.overviewMain{
	background-color: #D3D3D3;
	width: 100%;
}

/* --- PAGES --- */
/* -- OVERVIEW -- */
#overview,
.overview {
	width: 100%;
}

#overview .frameforsidetitelogsettingsbar .wrapper,
.overview .frameforsidetitelogsettingsbar .wrapper {
	float: none !important;
	width: 95% !important;
	margin: 0 auto !important;
	overflow: auto !important;
}

@media (min-width:1366px) {
	#overview .frameforsidetitelogsettingsbar .wrapper,
	.overview .frameforsidetitelogsettingsbar .wrapper {
		width: 75% !important;
	}
}
.pre-viewOverview{
	width: 85%;
	height: 80vh;
	background-color: #404040;
	margin: 10px auto 0;
	float: none;
	display: grid;
	grid-template-columns: auto auto auto auto;
	overflow: auto;
}
.preview-outbox .settingsmenu{
	position: absolute;
	margin-top: -35px;
}
/* -- SHOW  -- */

/* -- EDIT -- */

.placeholderimgchart{
	width: 100%;
	display: grid;
}
.graphName {
	text-align: center;
	width: 100%;
}
.graphName h3 {
	margin: 0 auto;
	float: left;
}
.graphName p{
	float: right;
}
.graphImg{
	width: 100%;
}
.hidden{
	display: none;
}

/* - WRAPPER - */
.editor .frameforsidetitelogsettingsbar .wrapper,
#editor .frameforsidetitelogsettingsbar .wrapper {
	width: 100% !important;
}

@media (min-width:1920px) {
	.editor .frameforsidetitelogsettingsbar .wrapper,
	#editor .frameforsidetitelogsettingsbar .wrapper {
		width: 75% !important;
	}
}

.editor .mainsection .wrapper,
#editor .mainsection .wrapper {
	width: calc(100% - 15px) !important;
}


/* -- FOLDER OVERVIEW -- */

/* -- STYLE GUIDE -- */
/* styling af tabeller*/
.row-one {
	background-color: #404040;
}

.row-two {
    background-color: #6F6F6F;
}

#styleguide table, #styleguide tbody {
	width: 100%;
	border-spacing: 0;
}

#styleguide table {
	float: left;
	table-layout: fixed;
}

#styleguide table tr td,
#styleguide table tr th {
	float: left;
	width: 100%;
	min-width: 1px;
	min-height: 1px;
	box-sizing: border-box;
}

#styleguide table tr th {
	cursor: pointer;
}

#styleguide table tr td {
	display: none;
}

#styleguide table tr.show td{
	display: table-cell;
}

#styleguide table tr th {
	padding-right: 10px;
	padding-top: 10px;
	padding-left: 10px;
}

#styleguide table tr td {
	position: relative;
	padding: 10px;
	border-bottom: solid 1px #000;
	vertical-align: top;
}

#styleguide table tr td:last-child {
	border-bottom: none;
}

@media (min-width:481px){
	#styleguide table tr td,
	#styleguide table tr th {
		float: none;
	}

	#styleguide table tr td {
		border-right: solid 1px #000;
		border-bottom: none;
	}

	#styleguide table tr td {
		border-right: solid 1px #000;
		border-bottom: none;
	}

	#styleguide table tr td:last-child {
		border-right: none;
	}
}
/* styling af tabeller - slut*/

/* - TABLE CONTENT - */
#styleguide table code {
	font-family: monospace; /* monospace vælger styreytemets standard font for kode. */
	/* user-select:all; does not work in chrome since version 62. Some report experience improved with wendor prefixes applied, but this changed nothing on the development setup. */
	-webkit-touch-callout: all; /* iOS Safari */
	-webkit-user-select: all;   /* Chrome/Safari/Opera */
	-khtml-user-select: all;    /* Konqueror */
	-moz-user-select: all;      /* Firefox */
	-ms-user-select: all;       /* Internet Explorer/Edge */
	user-select: all;           /* Non-prefixed version */
}

#styleguide table tr td code {
	clear: right;
	display: block;
	margin-bottom: 5px;
	margin-left: 2em;
	text-indent: -2em; /* A negative indent together with a positive margin with opisitite value, can imitate outdents. */
	color: #000;
	word-break: break-word;
}

#styleguide table tr td code:last-child {
	margin-bottom: 0;
}


#styleguide .empty {
	background-color: #555;
}
#styleguide .empty:before {
	content:"Ingen kode";
	position: absolute;
	top: 0;
	left: 0;
	float: left;
	width: 100%;
	text-align: center;
	font-style: italic;
}


#styleguide .tableExplainer {
	float: left;
	width: 100%;
	padding: 5px;
	border: solid 1px #094049; /* Darker blue */
	border-radius: 4px;
	margin-bottom: 5px;
	background-color: #128193; /* Dark blue */
	box-sizing: border-box;
}

#styleguide .tableExplainerText {
	float: left;
	color: #fff;
	clear: right;
}

#styleguide .tableExplainer img {
	float: left;
	margin-right: 0.25em;
	clear: left;
	max-width: 25px;
}

#styleguide .tableExplainerButton{
	float: left;
	clear: both;
	width: 100%;
	padding: inherit;
	border: outset 2px #052C1E;
	border-radius: inherit;
	color: #fff;
	background-color: #129365;
	box-sizing: inherit;
}

#styleguide .tableExplainerButton:hover{
	background-color: #41A883;
	box-sizing: inherit;
}

#styleguide .tableExplainerButton:active{
	border: inset 2px #052C1E;
	background-color: #41A883;
	box-sizing: inherit;
}

/* - POSITIONING - */
.example {
	position: relative;
	float: left;
	width: 100%;
	padding: 20px 0;
	border-top: solid 4px #404040;
	border-bottom: solid 3px #6F6F6F;
	margin-bottom: 10px;
	background-color: #ddd;
}

.example:before {
	content:"Eksempel:";
	display: none;
	position: absolute;
	top: -25px;
	left: 20px;
	font-size: 112,5%;
	line-height: 25px;
	font-style: italic;
}

@media (min-width:768px) {
	.example:before {
		display: inline-block;
	}
}

@media (min-width:1920px) {
	.example:before {
		top: -2vw;
		line-height: 2vw;
	}
}

#styleguide .wrapper {
	float: none;
	width: 95%;
	margin: 0 auto;
}

@media (min-width:768px){
	#styleguide .wrapper {
		width: 50%;
	}
}

/* - WRAPPER - */
.wrapper, .example .wrapper {
	float: none;
	width: 95%;
	margin: 0 auto;
	overflow: auto;
}

@media (min-width:1366px) {
	.wrapper, .example .wrapper {
		width: 75%;
	}
}

header .wrapper, #wrapper_header_example header .wrapper {
	width: 100%;
}

@media (min-width:1920px) {
	header .wrapper, #wrapper_header_example header .wrapper {
		width: 75%;
	}
}

/* styling for sektioner*/
#styleguide section,
#styleguide > section > article {
	float: left;
	width: 100%;
	height: auto;
	min-height: 1px;
}

#styleguide section {
	margin: 35px 0;
}

#styleguide #titles {
	margin-top: 0;
}

#styleguide > section > article {
	margin-top: 10px;
	margin-bottom: 20px;
}

#styleguide #edit {
	float: left;
	width: 100%;
}

#styleguide .title-area {
	width: 100%;
}

#styleguide #navbar-bar-small-screens .example {
	min-height: 100vh;
}
#styleguide .pop-up-article .example{
	min-height: 300px;
	overflow-y: auto;
}

/* styling for sektioner - slut*/

/* - LISTER - */
#styleguide section .wrapper > ul {
	float: left;
	width: 100%;
	margin-top: 5px;
	margin-bottom: 15px;
}

#styleguide section .wrapper > ul li {
	text-indent: 20px;
}


/* - STYLEGUIDE TEXT - */
#styleguide .info, #styleguide .info b, #styleguide .info a {
	clear: both;
	color: #128193;
}


/* - STYLEGUIDE TITLES - */
.styleguide-title {
	clear: both;
}


/* - STYLEGUIDE DISABLED LINKS - */
.disabled{
	color: #777;
	cursor: not-allowed;
}

/* OTHER BUTTONS */
#styleguide #other-buttons button {
	float: left;
	margin-bottom: 5px;
	clear: both;
}

#styleguide #other-buttons button:last-child {
	margin-bottom: 0;
}


/* --- ANITIONMER --- */
/* No animations added yet */