:root {
  --main-login-color: #144681;
  --main-account-color: #075f16;
  --main-logout-color: #454545;
  --main-LOGO-red: #d63417;
  --main-LOGO-footer-blue: #144681;
  --main-contactUs-footer-grey: #7f7f80;
}
----------------------GAMMLA CSS FRÅN LOMMA tagg-1920--------------------------------------------


body,p
{
    background-repeat: no-repeat;
    background-position: top right;
    background-color:#FFFFFF;
        
    font-family: 'Calibri', sans-serif ;
    font-size: 18px !important;
 
}


h1,h2,h3,h4
{
    
    margin-top:30px;
  margin-bottom:20px;
   
    
 }


.back-btn{
    margin: 7px;
    padding: 1px 2px 1px 2px;
    border:none;
    background-color: transparent;
   
}

.back-btn:hover{
     /*border: dotted 1px #144681;*/
    color:#144681;
}

#discover-button{
 background-color:#0065A6;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
#discover-button:hover{
 background-color:#0065A680;
 border-color:#0065A690;
 box-shadow: 0 10px 25px 0 rgba(0,0,0,0.24),0 10px 25px 0 rgba(0,0,0,0.19);

}   




.table-wrapper{
        margin: 10px 0 50px;
        box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
        border: 1px solid #999;
        
    }

.img-frame
{
    
  border:5px solid #c5d6d8 !important;
}

.puff  a:hover,.puff  a:visited,.puff  a:link,.puff  a:active{

    color:black;
  text-decoration: none;
}

.puff img {

    padding: 0;
    border: #c5d6d8 5px solid;
}

.puff h2 {
    font-size: 1.231em;
     color: #73A3AD;

    text-transform: uppercase;
}

.iconCard {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


hr.areaDivider {
    height: 0px;
    width: 936px;
    max-width: 100%;
    border: 0;
    border-top: 1px solid #c5d6d8;
    border-bottom: 1px solid #c5d6d8;
    margin: 60px auto;
}

#footer-background {
 /*   background-color: #eee;*/
    border-top: 8px solid #c5d6d8;
    max-width: none;
    overflow: hidden;
    z-index: -1;
    margin: 0 auto;
    min-height: 200px;
}

#eventDiv .month
{
    
    background-color:lightgreen;
    padding:10px;
    border-radius:5px;
    
    
}

#eventDiv .day
{
    
    background-color:#f9f9f9;
    padding:5px;
    padding-left:20px;
    border-radius:5px;
    
}

#eventDiv .dayContent
{
    
margin-left:40px;
    
}


#panorama {
    border-bottom: 5px solid #c5d6d8;

    background-image:  url();
    background-repeat: no-repeat;
    background-position: center;
    /*height: 500px;*/
 
}

#layout-panorama {
    height: 100%;
      
}


.discover-wrapper {
    
     margin:10px;
    background-color: #c5d6d8;
    width: 555px;
    height: 235px;

    float: left;
    border-bottom-right-radius: 100px;
}

.discover-wrapper .header {
    font-family: 'Antic Didone', serif;
    font-size: 50pt;
    margin-top: 20px;
   margin-left: 40px;
}


.discover-wrapper .below-header {
    text-align: center;
    font-size: 20pt;
    margin-top: -5px;
}

.discover-wrapper .text {
    font-size: 20pt;
    padding: 0 40px;
    margin-top: 15px;
    line-height: initial;
}

.discover-wrapper .coordinates {
    margin-top: 24px;
    padding: 0 40px;
}



.btn-primary {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #81a4b1;
    background-image: -moz-linear-gradient(top, #81aab1, #819ab1);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#81aab1), to(#819ab1));
    background-image: -webkit-linear-gradient(top, #81aab1, #819ab1);
    background-image: -o-linear-gradient(top, #81aab1, #819ab1);
    background-image: linear-gradient(to bottom, #81aab1, #819ab1);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff81aab1', endColorstr='#ff819ab1', GradientType=0);
    border-color: #819ab1 #819ab1 #58748e;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    margin-bottom:10px;
}


.nicefont
{
    
    
 font-family: 'Antic Didone', serif; 
    
    
}
#divDesktopMenu ul {
    float:right;
   
    margin-top:10px;
  
margin-bottom: 0;
}

#divDesktopMenu li {
    
    float:center;
    display:inline;
    list-style-type:none;
    margin-top:5px;
    margin: 5px;
       position: relative;
    font-weight:400;

}

#divDesktopMenu ul.smalMenu  li {
  
    float:left;
    display:inline;
    list-style-type:none;
    margin-top:5px;


}



#divDesktopMenu li a {
    font-size:22px;
    font-family: 'Calibri', sans-serif ;
    color:#000;
    text-decoration:none;


    cursor:pointer;

    }
    
  #divDesktopMenu ul.smalMenu li a {
    font-size:18px;
    font-family: 'Calibri', sans-serif ;
    color:#000;
    text-decoration:none;


    cursor:pointer;

    }  
  #divDesktopMenu ul.smalMenu {
   margin-top:0;

    }  
    
    
#divDesktopMenu li:hover
{
    background-color:#E0F1FF;
    color:white !IMPORTANT;

}

#divMobileMenu ul {
   
    margin-top:10px;
    width:100%;

}

#divMobileMenu li {
    padding:10px 10px 5px 10px;
   
    list-style-type:none;
    margin-top:5px;

}



#divMobileMenu li a {
    font-size:18px;
    font-family: 'Calibri', sans-serif ;
    color:#000;
    text-decoration:none;



    cursor:pointer;

    }
    
#divMobileMenu li:hover
{
    background-color:#E0F1FF;
    

}

.mainMenuSelected
{
        /*background-color:#c5d6d8;*/
    
}

/*

/*MENU STYLE*/
.navbar-nav a
{
    
    
    margin-top:30px;
}
.navbar-header
{

    height :100px !important;
}


#divNavBarMenu {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.navbar-brand {
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
}





.btn-notselected
{
    margin-right:4px;
    color: #000 !important;
    background-color: white;
    border-color: #269abc;
  
    
    
}
.btn-selected
{
    margin-right:4px;
    color: #fff !important;
    background-color: #0082C6;
    border-color: #269abc;
  
    
    
}



-------------------------------------------------------------------
.sticky {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
  
  background-color: #f8f5f0;
}


body p {
    background-color: transparent !important;
    margin: 0 0 0px !important; 
}

/*paragraferP är en class och paragrafGaps är ett id. Men dessa gör samma sak */
.paragraferP{
     margin: 0 0 20px !important;

}

 #paragrafGaps{
        margin-top:20px !important;
    }
/*paragraferP är en class och paragrafGaps är ett id. Men dessa gör samma sak */

section{
    margin-top:20px;
    margin-bottom:20px;
}

/*a {
    
    text-decoration: none;

    color:#000;
}*/

a:active, a:hover {
     text-decoration:underline;
}

#fotter-contact-a{
    color:#3b3737;
    text-decoration: underline;
}
#fotter-contact-a:hover{
    color:blue;
}

#adressLinks{
    text-decoration: none;
    color:#385494;
    cursor: pointer;
}
#adressLinks:hover{
    text-decoration: underline dotted #385494;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #385494;
    text-decoration-thickness: 0.5px;
}
#targetBLANK-a{
     text-decoration: none;
      color:#385494;
      font-weight: bold;
      cursor: pointer;
}
#targetBLANK-a:hover{
     text-decoration: underline;
     cursor: pointer;
}

a:active, a:hover {
     text-decoration:none;
}

/*Här kan du ändra knapparnas stil på när man varit inne på sidan
Tänk på att flera knappar har id: button1-content och kan då påverkas..*/
/*#button1-content:visited, #button2-content:visited, #button3-content:visited{
    color:#fff;
}*/


#cleanUL{
    list-style-type: none;
}
#cleanUL li{
    margin-bottom:5px;
    text-align: left;
}

.loginMenu {

    font-size:14px;
    padding:5px;
   /* margin:5px 0;*/
}

.loginMenu hr {
    
    width:100%;
    background-color:var(--main-LOGO-footer-blue) !IMPORTANT;
    
    
    margin: 6px 0; 
}
.loginMenu a.btn,
.loginMenu button.btn {
  font-size: 12px; 
  padding: 2px 5px; 
  margin: 2px; 
}
.loginMenu strong {
  font-weight: normal; 
}

.loginMenu hr:first-child {

  margin: 5px 0;


}

.btn-warning{
    background-color: var(--main-logout-color) !IMPORTANT;
    border-color: var(--main-logout-color) !IMPORTANT;
}

.btn-info{
    background-color: var(--main-login-color) !IMPORTANT;
    border-color: var(--main-login-color) !IMPORTANT;
}

.loginMenu > div:nth-of-type(2) >a.btn-info:first-of-type {
    background-color: var(--main-account-color) !IMPORTANT;
    border-color: var(--main-account-color) !IMPORTANT;

}
.pageTopMenu li{
    font-weight: 800;
    font-family: 'Open Sans', sans-serif;
}

/***********        Startsidan>                   **********/
h1, h2{
    font-family: 'Calibri', sans-serif !important;
    
}


h3{
    font-family: 'Calibri', sans-serif !important ;
    font-weight: 800;
}

body{
    margin:0;
    /*overflow:hidden;*/ /**/
    /*font-family: 'Raleway', sans-serif !important;*/
    /*font-family: 'Hanken Grotesk', sans-serif !important;*/
    font-family: 'Calibri', sans-serif !important;
}


.container {
  position: relative; /* Ensure container serves as the positioning context */
  overflow-x:hidden;

}

.img-container {
  /*display:inline-block;*/
  position: relative;

}

.img-responsive {
    width: 100%;
    height: auto;
}

.nav-buttons {
  position: absolute;
  top: 50%; /*vertically*/
  left: 50%;/*horizontally*/
  transform: translate(-50%, -50%);
  text-align:center;
 /* z-index: 1; */

}

.nav-button {
  /*display: inline-block;*/
  display:block;
  padding: 30px 150px;
  background-color: #144681 ;
  color: #fff;
  text-decoration: pointer;
  margin: 15px;
  /*border-radius: 5px;*/
  transition: background-color 0.3s ease;
  text-align: center;
}

.nav-buttons a {
    font-size: 35px;
    margin: 40px;
}

.nav-button:hover {
  background-color: #113a6b; /*Monochromatic till #506c76*/
  color:#fff;
  text-decoration:none;
}





/*Mindre knappar men som hamnar ovanför bilden och skapar mkt whitespcae innan texthero, vet ej varför */
/*@media (max-width: 768px) {
  .nav-button {
    padding: 15px 50px;
    font-size: 20px;
    margin: 10px;
  }

  .nav-buttons {
    text-align: center;
  }


  .nav-buttons a {
    display: block;
    font-size: 15px;
    margin: 7px;
  }

 
  .nav-buttons {
    position: relative;
    z-index: 1;

  }
}
*/

/*
@media (max-width: 768px) {
  .nav-button {
    padding: 20px 50px; 
    font-size: 20px; 
  }

  .nav-buttons.custom-layout {
    text-align: center;
    position: static; 
    transform: none; 
  }
 
  .nav-buttons.custom-layout a {
    font-size: 20px; 
    margin: 5px;
  }
}


@media (min-width: 769px) {
  .container.custom-layout { 
    display: flex;
    flex-direction: column; 
    align-items: center; 
  }

  .img-container {
    order: 2;
  }
}
*/


/* Stilar för mobila enheter (max 780px) */
@media (max-width: 780px) {
  .nav-button {
    padding: 20px 50px;
    font-size: 20px;
    margin: 10px;
  }

  .img-container {
    text-align: center; /* Centrera innehåll i img-container */
  }
  
  .nav-buttons.custom-layout {
    text-align: center;
    position: static;
    transform: none;
  }

  /* Ta bort större marginal mellan knapparna */
  .nav-buttons.custom-layout a {
    font-size: 20px;
    margin: 5px;
  }
}


/* Stilar för större skärmar (minst 781px) */
@media (min-width: 781px) {
  .container.custom-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .img-container {
    order: 2;
  }
  
  .custom-layout a{
      width:80%;
    
  }
}

@media (min-width:782px) and (max-width:1200px) {

  .nav-buttons a{
    margin-top: 5px;
    margin-bottom: 5px;      
    font-size:1em;
  }
}

@media (max-width: 780px) {
  
  .overlay {
    padding: 15px 40px !important;
  }
   .overlay-torghandel {
    padding: 15px 40px !important;
  }
   .overlay-koloni {
    padding: 15px 40px !important;
  }
 
}

/***********        <Startsidan                   **********/

/***********        >hero-text                   **********/

.heroText-container{
    margin-top:40px;
    margin-bottom:40px;
 text-align:center;
 padding: 0 20px;   
}

.heroText-container h2{
 font-weight:600;
 font-size:35px;
 font-family: 'Calibri', sans-serif !important;
}
.heroText-container p{
 font-weight:200; 
 font-family: 'Calibri', sans-serif !important;
 margin-top: 10px !important; 
}



.heroText-container2{
    margin-top:40px;
    margin-bottom:40px;
    text-align:center;
    padding: 0 40px;
    
}


/***********        <hero-text                   **********/




/***********        >hero-bild                   **********/
.full-screen-image {
width:100%;
height:100%;

position:relative;
}

.overlay{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
            background-color: rgba(25, 64, 103, 0.9); 
            padding:50px 240px; 
            /*border-radius: 10px;*/
            
}

.overlay-torghandel{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
            background-color: rgba(141,45,46, 0.9) ;
            padding:50px 240px; 
            /*border-radius: 10px;*/
            
}



.overlay h1 {
            color: white; 
            font-size: 40px; 
            text-align: center; 
            font-weight: 400;
            font-family: 'Calibri', sans-serif;
            margin:0px;
            
        }
        
.overlay-torghandel h1 {
            color: white; 
            font-size: 40px; 
            text-align: center; 
            font-weight: 400;
            font-family: 'Calibri', sans-serif;
            margin:0px;
            
        }
        
.overlay-koloni{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
            background-color: rgba(125,181,89, 0.8) ;
            padding:50px 240px; 

}
.overlay-koloni h1 {
            color: white; 
            font-size: 40px; 
            text-align: center; 
            font-weight: 600; /*Varför inte weight 400 inte funkar för denna men för dom andra vet jag ikkeeee*/
            font-family: 'Calibri', sans-serif;
            margin:0px;
            
        }



/***********        <hero-bild                   **********/


/***********        >koloni-container                   **********/


.koloni-container{
  max-width: 1200px; /* Sets the maximum width of the container */
  margin: 0 auto; /* Centers the container horizontally by setting left and right margins to 'auto' */
  padding: 20px; /* Adds some padding inside the container to create spacing between content and the container edges */
  box-sizing: border-box; /* Ensures that padding is included in the container's width */

}



/***********        <koloni-container                   **********/



/***********        >/ansokan                   **********/

/***********        </ansokan                   **********/




/***********        >Footer                   **********/
#footerSection{
    display: flex; 
    flex-wrap: wrap;  
    justify-content: left; 
    margin-top:20px; 
    margin-bottom:40px;
}
#footer-GOTO{
    color:#fff;
}

.lomma-footer{
    text-align:center;
    background-color: var(--main-LOGO-footer-blue);
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 50px;
   
}


.contactUs1 p{
     margin-bottom: -5px !important;
     font-size: 15px !important;
     
     color:var(--main-LOGO-footer-grey) !IMPORTANT;
     
}
/*.contactUs1 h6{
     font-size: 20px !important;
}*/

.contactUs1 a{
     text-decoration:underline;
}

.contactUs2 {
     padding-top:40px;
}

.contactUs2 p{
     margin-bottom: -5px !important;
     font-size: 15px !important;
     
     color:var(--main-LOGO-footer-grey) !IMPORTANT;
     
}

.contactUs2 p:last-child{
    margin-top:10px !important;
    
}

/***********        <Footer                   **********/
#unique-h1 {
  text-decoration: none !important;
}

#divHolderMain > #divQueueSelection > .row > .col-xs-12.col-sm-6 > div[style*="background-color:#46b8da;"] {
    background-color: #385494 !important; /* your desired background color */
  
}
#divHolderMain > #divQueueSelection > .row > .col-xs-12.col-sm-6 > div[style*="color:orange;"] {
    color: #FF8800 !important; /* your desired background color */
    font-size:15px;
}

.row #divQueueMainContent .queMainError {
    color: #FF8800 !important;
}

/***NAVBAR -hide the gap****/
.navbar{
    margin-bottom: 0;
}


.menylankarBig{
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    text-align:center;
}

#divMobileMenu .menylankarBig{
    display:flex;
    flex-direction: column;
    padding: 14px;
}


#divDesktopMenu li a {
    display: flex;
    
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
   
 
   padding:5px;
     color:black;
    

}

#divDesktopMenu li:active {
    background-color: #0065A610;

   
}


#divDesktopMenu li a:hover {

    color:white !important;
   
}

#divDesktopMenu li:hover {
   background-color: #144681;
    text-align:center;
    border-radius: 5px;

   color:white !important;
   
}
#menylankarBig li:hover{
   color:white !important;  
}

#divMobileMenu ul {
    margin-top: 10px;
    width: 100%;
    
}




/* MOBIL MENYLÄNKAR*/
#divMobileMenu li {
  
text-align:center;
    list-style-type: none;
    margin-top: 5px;
       border-radius: 5px;
   
   padding:10px;
}



#divMobileMenu li a {
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
     text-align:center;
   
     color:black;

  
}

#divMobileMenu li:hover {
    background-color: #144681;
    text-align:center;
    border-radius: 5px;

   color:white !important;
}

#divMobileMenu li:hover a {
     color:white !important;
}



.mainMenuSelected {
   /* background-color: #144681;*/
   border-radius: 5px;
    text-align:center;
    border: dotted 1px #144681;
  

}
.mainMenuSelected a{
   
    color: #fff !important;
      color:#144681!important;
   

}

#divMobileMenu .smalMenu{
    display:flex;
    flex-direction: column;
}