body,p,h1,h2,h3,h4,h5 {font-family: "Times New Roman", Times, serif;}
body {font-size: 16px; margin: 0px;padding: 0px;background-color: #FFFFFF; color: #000000;} /*231204 added background-color & color*/

.txt-small{font-size:12px}
.txt-medium{font-size:16px}
.txt-large{font-size:18px}
.txt-xlarge{font-size:24px}
.txt-large-to-xlarge{font-size:19px} /*Changes from large to xlarge depening on screen size*/
.txt-xxlarge{font-size:36px}
.txt-italic{font-style:italic}

.centertxt{ /*231204 add*/
        text-align: center; 
        }
             
.darktxt{
 	color: #000000;/*231204 add*/
	}
.lighttxt{
 	color: #FFFFFF;/*231204 add*/
	}
        
.lightbgcol{
 	background-color: #FFFFFF;/*231204 add*/
	}        
.darkbgcol{
 	background-color: #202020;/*231204 add*/
	} 
        
.centerlarge_darkbgcol_using_gradient{
    background-color: #202020; /*250718 add. On larger screen we use gradient  */      
    }    
        
        
a[href^="tel:"]{ /*231204 chrome on iphone auto detects telephone number even if we use for format-detection as telephone=no, but this solves the problem*/
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    }        
        

.pl-grnd-FlexContainer1Grnd{          
        display: flex;
        flex-wrap: wrap;     
        justify-content: space-between;       
	}
    
.pl-grnd-FlexInner1Grnd{ /* Class used when showing 1 grnd*/
        width: 100%;
        max-width: 800px;
        }
        
.pl-grnd-FlexInner1Grnd:nth-child(2){ /* On small screens we have a line beween the grnd packages*/
        margin-top: auto;
        margin-bottom: auto;
        }          

.pl-grnd-FlexContainerManyGrnd{          
        display: flex;
        flex-wrap: wrap;     

	}
        
.pl-grnd-FlexInnerManyGrnd{ /* Class used when showing many grnd*/
        max-width: 500px;        			      
        }                      
        
        
        
        
.pl-grnd{
	padding: 10px;
	padding-top: 3px; 
	}
        
.pl-bgcol{ 
        background-color: #F8F8F8;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px; 
	}     
        
.pl-bgcolheader{ 
        background-color: #000000;
        color: white;
	padding: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        
        background: linear-gradient(90deg, #000000 33%, rgba(255,255,255,0.6) 50%, #000000 66%) #000000;       
        background-size: 300% 100%;
        animation: shine 3s 1;         
        }

@keyframes shine {
  0% {
    background-position: right;    
  }
  /*100% {
    background-position: left; it's the default value, no need to define it
  }*/
}       
     	
        

ul.pl-bullet{
	list-style-type: none;     
	padding-left: 5px;
  	margin-top: 5px;      
	}      
        
ul.pl-bullet li{ /*250528*/
	background-image: url("checkbox_light.jpg"); 
	background-repeat: no-repeat;	
	background-position: center left;	
	padding: 4px 4px 4px 35px;
	}          
            

.pl-info-FlexContainer{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        }     
        
.pl-info-FlexInner{
        padding-left: 0px; 
        padding-right: 0px /* Changed on larger screens*/ 
        }
        
  
.pl-info-kontaktbox{       
  	background-color: #202020;
        background-image: linear-gradient(to right,#FFFFFF 0%, #202020 50%, #FFFFFF 100%);         
    /*    -webkit-border-radius: 20px;
	border-radius: 20px; */	
	color: white;
        padding: 10px;
        text-align: center;
        margin-top: 25px;
        margin-bottom: 15px;        
        width: 100%;                            /*changed on larger screens */
   /*     box-shadow: 0 0 8px 4px #C0C0C0;      added on larger screens  */
        
        }           
        


        
.pl-FlexContainer{
	min-width: 300px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end; /*Edge doens not use end, so we use flex-end also*/        
        align-items: end;  
        justify-content: center; /*Older edge does not support space evenly, so we set center first so will that be used instead*/ 
        justify-content: space-evenly;        
	}
.pl-FlexInner{
        width: 100%;
	min-width: 200px;        
        }        
		
.pl-table{
	width: 100%;
	}
	
.pl-descr{
	font-weight: bold;
	padding-top: 10px;
	}

.pl-shortinfo{
/*	font-style: italic;*/
	}

 .pl-image-cell{
        text-align: center;
	}
.pl-image-image{
        max-height: 150px;
	}	
	
.pl-price{	
	width: 33%;
	text-align: center;
	border-bottom-style: dotted;	/*added 210403*/
	border-width: 1px;  				/*added 210403*/
	border-color: #C0C0C0;				/*added 230214*/
	padding-bottom: 10px;	
	color: #CE3838;	/*added 2022-08-09*/
	}
	

.pl-moreinfo{
	width: 33%;	
	border-bottom-style: dotted;	/*added 210403*/
	border-width: 1px;				/*added 210403*/
	border-color: #C0C0C0;				/*added 230214*/	
	padding-bottom: 10px;	
	}	
	
.pl-artnr{
	width: 33%;	
	text-align: left;
	border-bottom-style: dotted;	/*added 210403*/
	border-width: 1px;				/*added 210403*/
	border-color: #C0C0C0;				/*added 230214*/	
	padding-bottom: 10px;
	}	
	
	
	
.pl-headertxt{
	min-width: 300px;
	width: 100%;
	text-align: center;
	font-weight: bold;
/*	background-color: #202020;		
	color: white;	*/        
        background-color: #B6AFBD;
        background-image: linear-gradient(to right,#FFFFFF 0%, #B6AFBD 50%, #FFFFFF 100%);                         
        color: #301D55;
	}

	
	


textarea{
	width: 100%;
	}

div#tagg_layer{
	position: absolute; 
	width: 310px; 
	height: 10px; 
	z-index: 1; 
	visibility:hidden;
	}	


div#finger_layer{
	position: absolute; 
	width: 310px; 
	height: 10px; 
	z-index: 1; 
	visibility:hidden;
	}
	
	
	
div.InPopDiv{
	float: left; 
	background-color:white; 
	padding:3px; 
	border:1px solid black;	
        text-align: center;	
	}	

.index-headertxt{
	font-weight: bold;
        background-color: #B6AFBD;
        background-image: linear-gradient(to right,#FFFFFF 0%, #B6AFBD 50%, #FFFFFF 100%);                         
        color: #301D55;
        margin-bottom: 5px;
	}          
        
.IndexFlexContainerTop{ /*231204 add*/
        display: flex;
        flex-wrap: wrap;
        align-items: center;
	}
          
        
.ArgumentBox{
	padding: 5px;
	padding-top: 0px;
 	padding-left: 0px; /*231204 add*/       
	padding-bottom: 0px;	
	display: inline-block;
	}	

        
        
ul.Argument {
	list-style-type: none;
	padding-left: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
	}
	
ul.Argument li{
	background-image: url("checkbox.jpg");
	background-repeat: no-repeat;	
	background-position: center left;	
	padding: 7px 7px 7px 36px;
	}
	
.IndexFlowTxt{/*231204 add*/        
/*        background-color: #202020;*/
        color: #FFFFFF;
        padding: 10px;
        margin-top: 15px;
        margin-bottom: 15px;  

        border-left: 10px solid #f39c12;            
        }	
        
	
.index-footerbtns{ /* Added 210401 */
	display: inline-block; 
	padding-right: 40px; 
	padding-bottom: 10px;    
	}	
	
.MoreInfoFlexContainerTop{ /*231204 add*/
        display: flex;
        flex-wrap: wrap;    
        }        
	
.flow-info{
	width: 100%;
  	padding-bottom: 10px;  /*231204 add*/	      
	}
        
	
.flowimg{
	max-width: 350px; /*231204 add*/
        margin-left: auto; /*231204 add*/
        margin-right: auto; /*231204 add*/
	padding-top: 10px; /*231204 add*/	 
	}        
    
        
.moreinfo-effekt{/*231204 changed*/        
        margin-top: 15px;
        margin-bottom: 15px;
        padding: 10px; 
        
        margin-left: 0px;
        border-left: 10px solid #f39c12;       
        }        
    
        
        
        
        
.MoreInfoFlexContainerFooter{ /*250721 add*/
        display: flex;
        flex-wrap: wrap;
        justify-content: center;        
        align-items: center;
        }
        
.MoreInfoFlexInnerFooter{ /*250721 add*/
        padding: 10px;
        }              
        
        
.moreinfo-dwlpdf{/*231204 changed*/        
        margin-top: auto;
        margin-bottom: auto; 
        min-width: 40px;
        max-width: 40px;        
        }          
	
	

	
	
	
/*
.moreinfo-footerbtn{ 
	display: inline-block; 
	padding-right: 40px; 
	padding-bottom: 10px;
 	padding-top: 10px;        
	}
*/			
	
	
.moreinfo-linkbtn{ /*added 2022-08-09*/
   -webkit-border-radius: 15px;
	border-radius: 15px;
	padding: 3px;	
	padding-left: 7px;
	padding-right: 7px;	
	box-shadow: 3px 2px #505050;
	background-color: #4EB720;
	color: white;
	text-decoration: none;
	white-space: nowrap;
	margin-right: 7px;
	margin-top: 7px;
	display: inline-block; /* A elements are inline and margin is not respected, so we change to inline-block*/
	}
.moreinfo-linkbtn:hover{ /*added 2022-08-09*/
	background-color: #9DF078;
	color: black;
	}

.tidrapp-exportbox{ /*231204 changed*/ 
	padding: 10px;
	padding-top: 3px;     
	} 
        
.enkelreg-headertxt{
	text-align: center;
	font-weight: bold;
/*	background-color: #202020;		
	color: white;	*/        
        background-color: #B6AFBD;
        background-image: linear-gradient(to right,#FFFFFF 0%, #B6AFBD 50%, #FFFFFF 100%);                         
       /* color: #4A2C82;*/
        color: #301D55;
	}        
        
        
.enkelreg-termimg{ /*added 230211*/
        max-width: 450px; 
        margin-left: auto;
        margin-right: auto;        
        }  
        
.enkelreg-appimg{ /*added 230211*/
	max-width: 400px;
        margin-left: auto;
        margin-right: auto;
	}
        
.enkelregFlexContainer{ /*231204 add*/
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;        
	}        
.enkelregFlexInner{ /*231204 add*/
	width: 100%;
	}          
      
ul.green-bullet { /* To make bullet green instead of black */
	list-style: none;
	}
        
.LoneExportFlexContainer{ /*231204 add*/
        display: flex;
        flex-wrap: nowrap;           
        justify-content: center;    
        align-items: center;     
	}             
.loneexport-moneyimg{ /*added 230211*/
	opacity: 0.5; 
   	max-width: 50%;      
	} 	

.onlinereg-appimg{ /*added 230211*/
 	max-width: 450px;
        margin-left: auto;
        margin-right: auto;
	}
        
.nyheter-FlexContainer{ /*250717 add*/
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;        
        align-items: center;
        }            
.nyheter-FlexInnerImg{ /*250717 add*/
        max-width: 400px;
        }         

ul.green-bullet li::before { /* To make bullet green instead of black */
	content: "\2022";
	color: #4EB720;
	font-weight: bold;
	display: inline-block; 
	width: 1em;
	margin-left: -1em;
	}        
 
.prislistebtn{ 
        -webkit-border-radius: 15px;
	border-radius: 15px;
	padding-top: 2px;   
	padding-bottom: 4px;		
	padding-left: 8px;
	padding-right: 8px;	
	box-shadow: 3px 2px #505050;
	background-color: #4EB720;
	color: white;
	text-decoration: none;
	white-space: nowrap;
	margin-left: 1px;
  	display: inline-block; /* A elements are inline and margin is not respected, so we change to inline-block*/      
        } 
        
.prislistebtn:hover{ /*added 2022-08-09*/
	background-color: #9DF078;
	color: black;
	}        
        

.lesmerbtn{ /*added 2022-08-09*/
   -webkit-border-radius: 15px;
	border-radius: 15px;
	padding-top: 0px;
	padding-bottom: 2px;		
	padding-left: 7px;
	padding-right: 7px;	
	box-shadow: 3px 2px #505050;
	background-color: #4EB720;
	color: white;
	text-decoration: none;
	white-space: nowrap;
	margin-left: 1px;
	}
.lesmerbtn:hover{ /*added 2022-08-09*/
	background-color: #9DF078;
	color: black;
	}		
	
.tillbakabtn{ /*added 2022-08-09*/
   -webkit-border-radius: 15px;
	border-radius: 15px;
	padding: 8px;	
	padding-left: 7px;
	padding-right: 7px;	
	box-shadow: 3px 2px #505050;
	background-color: #4EB720;
	color: white;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	}
.tillbakabtn:hover{ /*added 2022-08-09*/
	background-color: #9DF078;
	color: black;
	}

.kontaktbtn{ /*added 2025-08-24*/
        margin-top: 15px;
        margin-bottom: 5px;
        
        -webkit-border-radius: 15px;
	border-radius: 15px;   
	padding-top: 2px;   
	padding-bottom: 4px;		
	padding-left: 8px;
	padding-right: 8px;	
	box-shadow: 3px 2px #505050;
	background-color: #000000;
	color: white;
	text-decoration: none;
	white-space: nowrap;
	margin-left: 1px;
  	display: inline-block; /* A elements are inline and margin is not respected, so we change to inline-block*/
        transition: color 0.3s ease, box-shadow 0.3s ease;  
        box-shadow: 0 0 8px 4px #0ff;
        } 
        
.kontaktbtn:hover{ /*added 2025-08-24*/
        color: #0ff;
	}         
        
        
input[type=submit] {
	-webkit-appearance: none; /* Needed for Safari */
	-webkit-border-radius: 15px;
	border-radius: 15px;
	padding: 8px;	
	padding-left: 7px;
	padding-right: 7px;	
	box-shadow: 3px 2px #505050;
	background-color: #4EB720;
	color: white;
	text-decoration: none;
	white-space: nowrap;
	border:0 none;
	cursor:pointer;
	}
input[type=submit]:hover{ /*added 2022-08-09*/
	background-color: #9DF078;
	color: black;
	}

		
	
	
.pdfimgonbtn{ /*added 2022-08-09*/
	vertical-align: middle;
	padding-left: 3px;
	padding-right: 3px;	
	}		

	


.arrow{ /*added 2022-08-09 arrows for html link buttons*/
	border: solid white;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	}

.right {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	}

.left {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	}
	
.slidecursor { /*added 2022-08-09 for slideshow on tidrapport page*/
	cursor: auto; /*default cursor over tidrapport images on small screens*/
	}	
        
.ownSlideShowContainer{ /*231204 add*/
        max-width: 100%;        
        } 	



img {
	max-width: 100%;
	height: auto;
	}


  
.ShowOnLarge {
	display: none;
	}
	
.ShowOnSmall {
	display: block;
	}

.BackgroundLoggo {
	background-image: url("loggo_transp.gif");
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center left;
	padding: 14px 24px;
   color: white;
   text-align: right;
    font-weight: bold;    
	}           
    



div.nav {
	min-width: 320px;  /* Changed 210330, before we had only width: 100% instead */	
	width: 100%;
	height: auto;
	}


div.nav,ul.nav {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: auto;    
/*  background-color: #4F4F6E; */
    background-color: #000000;     
}


ul.nav li a {
	display: block;
	float: left;  /* Changed 210330, we know place menu in top also for smaller screens, before we hade float: none here */
	color: white;
	text-align: center;
	padding: 7px 8px; /* Changed 210331, was before padding: 7px 16px, now we have less padding on smaller screens */
	text-decoration: none;
	font-weight: bold;  
}

ul.nav li:first-child > a { /* Add 210331, we set smaller padding to the left of first menu item, as index page has hidden item last it harder to do this on padding right on last item */
	padding-left: 5px; 
}



ul.nav li a.active {
    background-color: #C8C8CE;
    color: black;
}

ul.nav li a:hover:not(.active) {
/*  background-color: #202020; */
    background-color: #808080;      
    color: white;
}

.navbgcol{
 	background-color: #000000;/*231204 add*/
	}  


.fulltxt{ /* 210330 Added, we show different menu text on small and larger screens */
	display: none;
	}
	
.txtsizescrndep{ /* Added 210330 show larger text on larger screens */
	font-size: 15px;
	}
        
.txtsizescrndep2{ /* Added 240524 show larger text on larger screens */
	font-size: 13px;
	}        
	


div.content {
    margin-left: 0;
    padding: 1px 5px; /* 210331 changed from padding: 1px 16px; , downbelow we set larger padding on larger screens */   
    
}


.perliginfo-table{ /* added 220809 info (i) on personalliggare page... */
	width: 100%;
	}
.perliginfo-image{ /* added 220809 info (i) on personalliggare page... */
	background-image: url('info_i.jpg');
	width: 20%; /* changed depending on screen size */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	}	
	


@media screen and (min-width: 497px){ /* 210331 changed to 497 from 495 due to price list need 2 more pixels to fit*/
	ul.nav li a {
/*		float: left; Made comment 210330, not needed any more, float left also for smaller screens now */
		padding: 7px 16px;	/*Added 210330, we have more padding in menu on larger screens */
		}
		
	ul.nav li:first-child > a { /* Add 210331 we restore larger padding for larger screens */
		padding-left: 16px; 
		}
		
		
	.fulltxt{ /* Added 210330 show longer menu text on larger screens */
		display: block;
		}
	.shorttxt{ /* Added 210330 show shorter menu text on smaller screens */
		display: none;
		}
	.txtsizescrndep{ /* Added 210330 show larger text on larger screens */
		font-size: 17px;
		}
  
 	.txtsizescrndep2{ 
		font-size: 14px;
		} 
        .txt-large-to-xlarge{
            font-size:24px; /*Changes from large to xlarge depening on screen size*/ 
            }  
            
        .index-headertxt{ /* We only have gradient background on small screens where we have smaller text on index header to avoid linebreak */
                background: none #FFFFFF;
                color: black;
                margin-bottom: 0.67em; /*reset to default margin on larger screens*/
                }             
                
                
        div.content{ /* Added 231204 show larger text on larger screens */
                font-size: 18px;
                }               
                
        div.normaltxtsize{ /* Added 231204 show larger text on larger screens. Used when txt is placed outsize content */
                font-size: 18px;
                }                  
	div.content { /* 210331 we set padding smaller above now on small screens and then we reset it to what we had befoe here for larger screens*/ 
                padding: 1px 18px;    
		}
                    

	.perliginfo-image{ /* added 220809 info (i) on personalliggare page... */
		width: 10%; /* changed depending on screen size */
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		}	

 	.BackgroundLoggo { /*231204 add, more padding top and bottom to get larger loggo*/
                padding: 18px 24px;
                }  	
                
        .flow-info{
            width: 33%;
            }
        .flowtxt{
            padding-left: 5px; 
            padding-right: 5px;    
            }
            
        .moreinfo-effekt{/*231204 changed*/  
            margin-top: 20px;
            }            
            
        .moreinfo-dwlpdf{/*231204 changed*/        
            margin-right: 30px;        
            }   
    
        .ownSlideShowContainer{ /*231204 add*/
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            }              
                
	ul.pl-bullet{
		padding-left: 15px;
		}
                
                
    	.contact-footertxtcontainer{
		max-width: 465px; /*added 210418, it did not look so good with wide text under contact fields */
		}
                
               
        .pl-info-shadow{ 
            box-shadow: 5px 5px #808080;                  
            }  
               
               
        .pl-FlexInner{
            max-width: 33%;
            }
        .pl-image-cell{
            text-align: left;
            }   		
	

}


@media screen and (min-width: 993px){
 
	body{
		height: 100%;
		overflow-y: scroll; /*always add scroll, otherwise side moves when scroll is added*/
                }

	html{
		height: 100%;
		margin: 0;
		padding: 0;
                }
	
        div.centerlarge {
                max-width: 1400px;	/*If you change from 1400px to other value, search and also change from 1400 and 1500 in div.bg-gradient-largescr */  	  	
                margin-left: auto;
                margin-right: auto;
                height: 100%;	
                }	
                
        @media screen and (min-width: 1500px){  
            div.bg-gradient-largescr{                 
                background-image: linear-gradient(to right,#FFFFFF 0%, #202020 calc((100% - 1400px)/2),#202020 calc(((100% - 1400px)/2) + 1400px),#FFFFFF 100%);                
                }
            }
                
                
			
         
        .ShowOnLarge {
               display: block;
               }

               
	.ShowOnSmall {
		display: none;
		}     
  
	.slidecursor { /* added 220809 on tidrapport page for slideshow... */
		cursor: zoom-in;
		}                    
                
        .perliginfo-table{ 
              width: 80%;
              }                   
                
	.IndexFlexContainerTop{ /*231204 add*/
            flex-wrap: nowrap;
            flex-direction: row-reverse;
            justify-content: flex-end;
            }
            
        .IndexTopRightImgOnLargeScr{ /*231204 add*/
             max-width: 60%;
             }         
            
            
        .IndexFlowTxt{/*231204 add*/
         /*   text-align: center;*/
            margin-top: 30px;
            margin-bottom: 30px; 
            
            margin-left: 20%;
            margin-right: 20%;              
            }                
                
        .moreinfo-effekt{/*231204 add*/              
           /* border-left: none;*/
            margin-left: 25%;
            margin-right: 25%;             
            } 
            
        .tidrapp-exportbox{/*231204 add*/
            padding-left: 15%;
            padding-right: 15%;            
            }      	

        .enkelregFlexInner{ /*231204 add*/
               width: 45%;
               }             
		
	.contact-footertxtcontainer{
		max-width: 515px; /*added 210418, it did not look so good with wide text under contact fields */
		}
                
        .pl-grnd-FlexInner1Grnd:nth-child(1){ /* Class used when showing one grnd and text next to image on larger screen*/
            width: 60%;
            
            }
        .pl-grnd-FlexInner1Grnd:nth-child(2){ /* Class used when showing one grnd and text next to image on larger screen*/
            width: 39.5%;
            }            
            
         .pl-grnd-FlexInnerManyGrnd{
            max-width: 40%;        
            } 
            
        .pl-grnd-FlexInnerManyGrnd:nth-child(2){ 
                padding-left: 20px;
                }              
            
        .pl-info-FlexContainer{
               flex-wrap: nowrap;      
               }                    
        .pl-info-FlexInner{
            padding-right: 20px; 
            }

        .pl-info-kontaktbox{    
            margin-top: auto;
            width: auto;                           
            box-shadow: 0 0 8px 4px #C0C0C0;
            background-image: none;
            }             
            
    
        .pl-RightPaddingLargeScr{
            padding-right: 50px;           
            }              
            
                
/*        .pl-bgcol{
                background-color: #EEEEEE;
                -webkit-border-radius: 10px;
                border-radius: 10px;
                box-shadow: 5px 5px #808080;                
                }                  
*/	


        .nyheter-FlexContainer{
            flex-wrap: nowrap;
            padding: 15px;
            }
            
        .nyheter-FlexInnerTxt{
            width: 70%;
            }
        .nyheter-FlexInnerImg{
            width: 30%;
            }              
            


}