@import "ipad.css";

/* ---------------------------------------------------------------------------
-------------- min-width: 411px ----------------------------------------------
--------------------------------------------------------------------------- */

@media only screen and (min-width: 411px) {
	#cssHelper:after {content: "CSS: Window min-width: 411px";}
	
	.btnAvboka, .btnBoka { max-width:66px; }
	.iconColumn {width:7%;}
	.docTable p {letter-spacing: -1px;}
}


/* ------------------------------------------------------------------------------
-------------- min-width: 568px -------------------------------------------------
------------------------------------------------------------------------------ */

@media only screen and (min-width: 568px) {
 	#cssHelper:after { content: "CSS: Window min-width: 568px"; }
 
	.albumstn_36 {width:49%;margin-left:1%;float:left;clear:none;min-height:125px;}
	
	.clHuvudfunktion {width:49%; margin-left:1%; float:left;}
	.clHuvudfunktion:only-child {float:none;}
	.clHuvudfunktion:last-child {clear:right;}
	
	#idH1PHText {
	/*
	font-size:25px;
	*/}
	
}

/* ------------------------------------------------------------------------------
-------------- min-width: 768px -------------------------------------------------
------------------------------------------------------------------------------ */

@media only screen and (min-width: 768px) {
	#cssHelper:after {content: "CSS: Window min-width: 768px";}
	
	/* --- LAYOUT --- */
	
	#divMenubuttonContainer {display:none;}
	
	
	#divWhiteBgContainer {
	
	width:100%; 
	margin-top:0px;
	
	/* v38 */
	top:0px;
	position:relative;
	/* v38 */
	}
	
	#divContainer {width:100%; max-width:758px; min-height:100%;}
	#divMainColumn, #divMainColumnExtended {margin-top: 0px}
	#divMainContainer {margin-top:8px; min-height: 50vh;}
	#divMainColumn, #divMainColumnExtended, #divRightColumn {float:none; clear:none; padding:0px;}
	#divPageheaderTyp1 {height:90px;}
	#divPageheaderTyp1 H1 { position:relative; top:50%; left:50%; transform:translate(-50%, -50%); font-size:30px; }
	#divPageheaderTyp1, #divPageheaderTyp2 {margin-top:0px;display:block;}
	#idH1PHText {/*font-size:30px;*/}
	#divMobileMenu {display:none !Important;}
	#divPageheaderTyp2 {top: 0px;} /* v37 */
	#divMenu {float:left !Important; width: 200px !Important;display:table !Important;position:relative !Important; top:0px; box-shadow:none;}
	#menu2Grid > li {width:200px !Important;}
	ul.ulMenu li {margin: 1px 0px 1px 0px;}
	#divMenuBackground {display:none !Important;}
	#divUnderMeny	{width:225px;}
	#divMainColumn {
		
		
				float:right;
		width:-moz-calc(100% - 225px); 
		width:-webkit-calc(100% - 225px); 
		width: -o-calc(100% - 225px); 
		width:calc(100% - 225px); 
		margin:0px 0px 5px 25px;
		
	}
	#divMainColumnExtended {

		
		float:right;
		width:-moz-calc(100% - 225px); 
		width:-webkit-calc(100% - 225px); 
		width: -o-calc(100% - 225px); 
		width:calc(100% - 225px); 
		margin:0px 0px 5px 25px;
		
		overflow:auto;
	}
	#divRightColumn {float:right;clear:right; width:-moz-calc(100% - 225px); width:-webkit-calc(100% - 225px); width: -o-calc(100% - 225px); width:calc(100% - 225px); margin:10px 0px 5px 20px;}
	
	.rightColumnElements {min-height:80px;padding:0px 10px 0px 5px; width:50%; display:inline-block; float:left;margin-bottom:14px;margin-top:1px;}


	/* END LAYOUT */

	tr.oddEven {height:5px;}
	
	.rcWelcome{float:left;clear:none;margin-right:10px;width:45%;}

	.clAnslagstavlaLeft { float:left; width:67%; padding:10px;}
	.clAnslagstavlaRight {float:right;width:30%;clear:none; padding:10px;}
	
	#divGVContainer {display:grid; grid-template-columns: repeat(6, 1fr); grid-gap: 10px;}
	
	.clGenvag {min-height:80px;padding:25px 5px 15px 5px;}
	
	.clGenvag33 {grid-column-start: span 2;}
	.clGenvag50 {grid-column-start: span 3;}
	.clGenvag100 {grid-column-start: span 6;}
	
	.clGenvag i, .clGenvag svg  {clear:both;font-size:2em;}
	
	
	.clGVText {display: block; margin-top:5px;}
	#divMobilesearchCotainer {display:none !Important;}	
	#divBoka {width:80%;}
	.btnAvboka, .btnBoka { max-width:72px; font-size:70%;}

	
	#divNLTContainer {grid-template-columns: repeat(2, 1fr);}
	.clNLTGenvag {min-height:80px;padding:25px 5px 15px 5px;}
	.clNLTGenvag i, .clNLTGenvag svg  {clear:both;font-size:1em;}	
	
	
	.bankidknapp, #inputPnr {width:33%;}	
	.clBankIDknappMobile {display: none;}
	.clBankIDknappDesktop {display: block;}


	#idH1PHText {/*font-size:35px;*/}
	#divAdminListSC {display:block;position:fixed;z-index:30;width:540px;height:41px;top:5px;font-family:Verdana;}
	#divAdminListSCminimized {display:none; position:fixed;z-index:30;height:41px;top:5px;width:30px;cursor:pointer;}
	
	.divStyrelse1 img {height:120px !Important;}

	#btn56laddaupp {float:right;}
	
	.divUndersidorKnapp {width:49%; margin-right:1%; min-height:0px;}


	
	.imageIcon {height: 18px !Important;}
	
	.TwoColumnContainer {grid-template-columns: minmax(25%, 75%) minmax(25%, 75%);}
	.formTable div:nth-of-type(odd) {text-align:right; margin-right:3px;}
	.formTable div:nth-of-type(even) {text-align:left;}
	.fa-layers {vertical-align:top !Important;}
	
	#menu5top {display:block;}
	#menu5button {display:block;}
	
	.docTable p {letter-spacing: unset;}
	
	.iconColumn {width:6%;}
	
	#divModalAlert {max-width:60%;}
	
	@media (orientation: portrait) {
 	 #phImage {position: initial; width: 100% !Important; left: 0px;}
	}
	
	.clShowFrom768 {display: block !Important;}
	
	#DemoIcon {top:5px;}
	
	/* Styrelsechatten */
.sc61left {padding-right:5px;float:left;text-align:right;width:25%}
.sc61right {float:left;width:75%;padding-left:5px;border-left:1px solid gray;min-height:50px;}
	
	
	
}

/* ------------------------------------------------------------------------------
-------------- min-width: 1024px ------------------------------------------------
------------------------------------------------------------------------------ */

@media only screen and (min-width: 1024px) {

html{scroll-padding-top: 0px;}

	#cssHelper:after {content: "CSS: Window min-width: 1024px";}
	#divWhiteBgContainer {width:990px;display:table;margin:0px auto 0px auto;min-height:100vh;}

	#divContainer {width:960px; max-width:none;}
	#idH1PHText {/*font-size:45px;*/}
	ul.ulMenu li, clHuvudfunktion {min-height:35px;}
	ul.ulMenu li a {padding: 5px 0px 4px 7px;}
	#menu2Grid li a:not(#idR1Search) { min-height: 35px;	padding:5px 0px 4px 7px; }
	.tblMiniCalendar td {height:23px;}
	#divMainColumn, #divMainColumnExtended {float:left; width:510px; margin:0px 0px 25px 25px; display:inline;min-height:370px;}
	#divMainColumnExtended {width:735px;}
	.divTwoColumns {width:48%;float:left;padding-right:2%;}
	#divRightColumn {float: right; width:200px; overflow:hidden; margin:0px 0px 22px 0px; padding:0px;}
	.rightColumnElements {width:100%; display:inline-block; margin:1px 0px 14px 0px; padding:0px; min-height: unset;}
	.pRightColumnParagraph {min-height:0px;}
	#divLogotype {width:100%;text-align:center;}
	#divPfCssM {display:block;}
	#divPfCssS {display:none !Important;}
	#divRightColumnWelcome {margin-top:0px;padding:4px 8px 8px 8px;border:1px solid #E1E1B0;text-align:left;cursor:pointer;width:100%;border-radius: 6px;}
	input[type="button"].buttonGreen, input[type="button"].buttonBlack, input[type="button"].buttonBlue, input[type="button"].buttonRed, input[type="submit"], input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="tel"], input[type="file"], input[type="time"], input[type="number"], input[type="url"], textarea, select, button.buttonGreen, button.buttonBlack, button.buttonBlue, button.buttonRed {height:30px;}
	input[type="button"].buttonGreen, input[type="button"].buttonBlack, input[type="button"].buttonBlue, input[type="button"].buttonRed, input[type="submit"], button.buttonGreen, button.buttonBlack, button.buttonBlue, button.buttonRed {/*padding: 3px 0.8em;*/}
	tr.oddEven {height:35px;}
	.divStyrelse1 {margin:0px 1% 20px 0px; width:49%;}
	.divStyrelse1 img {height:100px !Important;}
	#divLogotype img {max-width:100% !Important;}
	#one1 {float:left;width:25%;}
	#three3 {float:right;width:75%;}
	.clHideTdForMobile {display:table-cell;}
	#content #one {width:none;clear:initial;min-height:300px;}
	#content #two {display:initial;min-height:300px;}
	#content #three {width:none;clear:initial;min-height:300px;with:initial;}
	.wrapper { display: flex; }
	.box { width: unset;}
	.handler { display: block;}
	#one {width:28%;}
	#three {width:70%;}
	.clShowForMobile {display:none !Important;}
	.docTable tr {height: 30px !Important;}
	
	
	.btnAvboka, .btnBoka { max-width:65px; }
	
	#divBottomSaveBar {padding:8px 0px 0px 0px;}
	#idDocumentList td {padding-top:5px;}
	

	.clFolderUnselected {white-space:nowrap;}
	ul.ul_one_column_for_mobile_two_for_desktop { columns: 2; -webkit-columns: 2; -moz-columns: 2;}
	
	.Standardtable tr:nth-of-type(even), .Standardtable tr:nth-of-type(odd) {height:unset;}

	.clShowForMobile {display: none !Important;}
	.clShowForDesktop {display: block !Important;}
	
}	


	/* ---------------------------------------------------------------------------------
   -------------- min-width: 1366px ------------------------------------------------
   ------------------------------------------------------------------------------ */

	@media only screen and (min-width: 1366px) {
		
		#cssHelper:after {content: "CSS: Window min-width: 1366px";}
		#divWhiteBgContainer {width:1150px;}
		#divContainer {width:1120px;}
		#divMainContainer {margin-top:8px;}
		#divMenu, #divRightColumn, #menu2Grid > li {width:240px !Important;}
		#frmLogin {width:233px;}
		#divMainColumn {width:590px;}
		#divMainColumnExtended {width:855px;}
		#idH1PHText {/*font-size:60px;*/}
		/* MENU 1-3 */
		ul.ulMenu li, clHuvudfunktion {min-height: 40px;}
		ul.ulMenu li a {font-size:18px;padding-top:9px; width:233px;}
		/* MENU 4, MENU 5*/
		#menu4Grid a, #menu5top div {font-size:18px;}
		/* MENU 2 */
		#menu2Grid a {font-size:18px;}
		#menu2Grid li a:not(#idR1Search) { min-height: 40px;	padding:6px 0px 4px 7px; }	
		/* MENU 5 */
		#menu5top {min-height:45px;}
		
		.mg2sp1 {}
		.mg2sp1l {}
		.mg2sp1c {}
		.mg2sp1lc {max-width:81%;} 
		#divMainColumn p, #divMainColumn li, #divMainColumn td, #divMainColumnExtended p, #divMainColumnExtended li, #divMainColumnExtended td, #divMainColumn th, #divRightColumn p, #tinymce p, #tinymce li, #tinymce th, #tinymce td, #divModal p, #divModal td, #divDLSelector p, #divModal li {font-size:18px; margin-bottom:10px;}
		#divPagefooter p, #divBoka p {font-size:18px;}
		H1, input[type="text"].textfieldH1, #divPageheaderTyp1 H1 {font-size:34px;} 
		H2, input[type="text"].textfieldH2 {font-size:28px;}
		H3, input[type="text"].textfieldH3 {font-size:24px;}
		H4, input[type="text"].textfieldH4 {font-size:18px;}
		input[type="text"]{height:auto;}
		input[type="button"].buttonGreen, input[type="button"].buttonBlack, input[type="button"].buttonBlue, input[type="button"].buttonRed, input[type="submit"], input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="tel"], input[type="file"], input[type="time"], input[type="number"], input[type="url"], textarea, select, button.buttonGreen, button.buttonBlack, button.buttonBlue, button.buttonRed {font-size:18px; height:32px;}
		.mceNoEditor {font-size:18px;}
		.clAnslagstavlaLeft { float:left; width:65%; }
		.clAnslagstavlaRight {float:right;width:33%;}
		.fa-unlock-alt:not(button i), .fa-lock {margin:5px 4px 0px 4px !Important;}
		#divMenu i.fa, #divMobileMenu i.fa {margin:5px 0px 0px 0px;}
		.divStyrelse1 img {height:120px !Important;}
		.btnAvboka, .btnBoka { max-width:76px; }
		#divModalAlert {max-width:50%;}
		.fa-layers-text {top:69%;}
		
		.tdForIcon {width:30px !Important;}
		.tdForDate {width:135px !Important;}
		.tdForDateTime {width:195px !Important;}
		
		.iconColumn {width:5%;}
		
	}

	/* ------------------------------------------------------------------------------
	-------------- min-width: 1900px ------------------------------------------------
	------------------------------------------------------------------------------ */

	@media only screen and (min-width: 1920px) {
		
		#cssHelper:after {content: "CSS: Window min-width: 1920px";}
		#divMenu, #divRightColumn, #menu2Grid > li {width:280px !Important;}
		#divMainColumn {width:714px;}
		#divMainColumnExtended {width:1024px;}
		#divWhiteBgContainer {width:1364px;}	
		#divContainer {width:1334px;}
		#idH1PHText {/*font-size:70px;*/}
		/* MENU 1-3 */		
		#frmLogin {width:273px;}
		ul.ulMenu li, clHuvudfunktion {min-height: 44px;}
		ul.ulMenu li a {font-size: 19px;padding-top:10px; width:273px;}
		/* MENU 2 */
		#menu2Grid a {font-size:19px;}
		#menu2Grid li a:not(#idR1Search) { min-height: 44px;	padding:7px 0px 4px 7px !Important; }
		.mg2sp1 {max-width:98%;}
		.mg2sp1l {max-width:92%;}
		.mg2sp1c {max-width:92%;}
		.mg2sp1lc {max-width:83%;}
		/* MENU 4, MENU 5*/
		#menu4Grid a, #menu5top div {font-size:19px;}
		#divMainColumn p, #divMainColumn li, #divMainColumn td, #divMainColumnExtended p, #divMainColumnExtended li, #divMainColumnExtended td, #divMainColumn th, #divRightColumn p, #tinymce p, #tinymce li, #tinymce th, #tinymce td, #divModal p, #divModal td, #divDLSelector p, #divModal li {font-size:19px; margin-bottom:10px;}
		#divPagefooter p, #divBoka p {font-size:19px;}
		H1, input[type="text"].textfieldH1, #divPageheaderTyp1 H1 {font-size: 40px;} 
		H2, input[type="text"].textfieldH2 {font-size: 30px;}
		H3, input[type="text"].textfieldH3 {font-size: 26px;}
		H4, input[type="text"].textfieldH4 {font-size: 19px;}
		.H4RightColumnHeader {font-size: 21px;}
		input[type="button"].buttonGreen, input[type="button"].buttonBlack, input[type="button"].buttonBlue, input[type="button"].buttonRed, input[type="submit"], input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="tel"], input[type="file"], input[type="time"], input[type="number"], input[type="url"], textarea, select, button.buttonGreen, button.buttonBlack, button.buttonBlue, button.buttonRed {font-size: 19px;}
		.mceNoEditor {font-size:19px;}
		.clAnslagstavlaLeft { float:left; width:63%; }
		.clAnslagstavlaRight {float:right;width:35%;}
		.btnAvboka, .btnBoka { max-width:88px; }
		.fa-layers-text {top:72%;}

		.tdForDate {width:145px !Important;}
		.tdForDateTime {width:200px !Important;}
		
		.iconColumn {width:4.5%;}
		
	}

	/* ------------------------------------------------------------------------------
	-------------- min-width: 2560px ------------------------------------------------
	------------------------------------------------------------------------------ */

	@media only screen and (min-width: 2560px){
		#cssHelper:after {content: "CSS: Window min-width: 2560px";}	
	}	
	
@media only screen and (min-width: 568px) {
	#menu4Grid li { width: calc(100% / 3); min-width:unset;}
	}
@media only screen and (min-width: 768px) { 
	#idR1Search { float:right;width:auto;margin-right:6px;text-align:right;display:block; text-align:center; }
	
		#menu4Grid { max-width:calc(100vw - 22px); }
		#menu4Grid li { width: calc( (100vw - 22px) / 3 ); }
		
	#menu4Grid, #menu4Grid2  { display: inline-flex; max-width: 100%;  
		width: unset; 
	
	}
	/* #menu4Grid li { width: calc(100% / 3); min-width:180px;} */
	#menu2Grid { display: block;}	
	}

@media only screen and (min-width: 1024px) {
	
	#menu4Grid li { width: calc( (100vw - 22px) / 5); min-width:unset;}
	
	}

@media only screen and (min-width: 1280px) {
	
	#menu4Grid li { width: calc( (100vw - 22px) / 6); }
	#menu4Grid li a { line-height:42px; }
	
	}

@media only screen and (min-width: 1600px) {
	}
	
@media only screen and (min-width: 1920px) {
	
	#menu4Grid li { width: calc( (100vw - 22px) / 7); }
	
	}

@media only screen and (min-width: 2240px) { /* Desktop */
	
	#menu4Grid li { width: calc( (100vw - 22px) / 8); }

	
	}

@media only screen and (min-width: 2560px) {
	
	#menu4Grid li { width: calc( (100vw - 25px) / 9 ); }

	
	}

@media only screen and (device-width: 667px) and (device-height :375px) and (orientation : landscape) { /* Liggande iPhone 6/7/8 */
	
	#menu4Grid { max-width:unset; }
	#menu4Grid li { width: calc( 100% / 4); min-width:unset;}
	
	}	

@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation : portrait) { /* Stående iPad */
	
	#menu4Grid {  max-width:unset; }
	#menu4Grid li { width: calc( 768px / 4); /* background-color: purple; */ }
	
	}

@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation : landscape) { /* Liggande iPad */
	
	#menu4Grid { max-width:unset; }
	#menu4Grid li { width: calc( 1024px / 5); /* background-color: red; */ }
	
	}

@media only screen and (device-height: 768px) and (device-width: 1024px) and (orientation : landscape) { /* Liggande Android */
	
	#menu4Grid { max-width:unset; }
	#menu4Grid li { width: calc( 1024px / 5); /* background-color: red; */ }
	
	}


@media only screen and (device-width:832px) and (device-height:1112px) and (orientation : portrait) { /* Stående iPad Pro 10.5" */
	
	#menu4Grid { max-width:unset; }
	#menu4Grid li { width: calc( 1024px / 5); /* background-color: blue; */ }
	
	}

@media only screen and (device-width: 834px) and (device-height: 1112px) and (orientation : landscape) { /* Liggande iPad Pro 10.5" */
	
	#menu4Grid { max-width:unset; }
	#menu4Grid li { width: calc( 1366px / 6); /* background-color: orange; */ }
	
	}

@media only screen and (device-width:1024px) and (device-height:1366px) and (orientation : portrait) { /* Stående iPad Pro 12.9" */
	
	#menu4Grid { max-width:unset; }
	#menu4Grid li { width: calc( 1024px / 5); /* background-color: blue; */ }
	
	}

@media only screen and (device-width: 1024px) and (device-height: 1366px) and (orientation : landscape) { /* Liggande iPad Pro 12.9" */
	
	#menu4Grid { max-width:unset; }
	#menu4Grid li { width: calc( 1366px / 6); /* background-color: orange; */ }
	
	}

@media only screen and (device-width: 800px) and (device-height: 1280px) and (orientation : portrait) { /* Stående Galaxy Tab */
	
	#menu4Grid { max-width:unset; }
	#menu4Grid li { width: calc( 800px / 4); /* background-color: turquoise; */ }
	
	}
	
@media only screen and (device-width: 1280px) and (device-height: 800px) and (orientation : landscape) { /* Liggande Galaxy Tab */
	
	#menu4Grid { max-width:unset; }
	#menu4Grid li { width: calc( 1280px / 6); /* background-color: green; */ }
	
	}