@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

/* --------------------------------------------------------------------------
   Company Color Styles
   -------------------------------------------------------------------------- */
   :root {
        --primary: #FCF3E3; /*old lace*/
        --footer: #413827; /*darb dark brown footer*/
        --secondary-1: #F3C873; /*jasmine -beage*/
        --secondary-2: #B5B54C; /*Old gold - grön*/
        --dark-hover: #53472E;
        --extra-1: #;
        --extra-2: #;
        
        
        
   }

   
/* --------------------------------------------------------------------------
   Company Color Styles
   -------------------------------------------------------------------------- */ 
   
    body {
        font-family: "Figtree", sans-serif !important;
        
    }
   
   
   
   /* --------------------------------------------------------------------------
   OTHER Styles
   -------------------------------------------------------------------------- */ 
   


.Pcontainer

{
    
    position: relative;
  text-align: center;
  color: #423b2a;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight:500;
  font-size:4vw;
}

.center

{
    
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

.listInfoColumn h3
{
    
    font-weight:500;

    
}
.oShortDesc h3
{
    
    font-weight:700;

    
}
.oShortDesc 
{
    
color:black;
    
}
.oShortDesc ul
{
  
  padding-left: 0;
  margin-left: 0;

}
.hLogo, .hLogo a
{
    
    
    font-size:35px;
    font-weight: 500;
    color:black;
  
}



                
.payLogoText
{
    
    margin-top:15px;
    color:white;
    padding:10px;
    border:2px solid #F7F7F7;
    border-radius:3px;
    text-align:center;
}
           
.colorLoginBox
{
    
        color:#F7F7F7 !important;
    
    
}

p
{
    
margin-top:5px !important;
margin-bottom:5px !important;


font-family: 'Open Sans', sans-serif !important;

}

h1
{
    
margin-top:20px !important;
margin-bottom:30px !important;
border-bottom:1px solid #EEE !important;


}


h2
{
    
margin-top:40px;
margin-bottom:20px !important;
border-bottom:1px solid #EEE !important;
}


h2.noTopMargin
{
    
    margin-top:10px !important;
    
    
    
    
}





.rotate
{
    color:#b4b633;
    transform: rotate(-0deg);
    font-size:27px;
    padding:5px;
    
    
}


#divDesktopMenu ul {
    float:right;
    margin-top:10px;
    width:100%;
    padding:0;
}



#divDesktopMenu li {
    padding: 5px 10px 5px 10px;
    float:left;
    display:inline;
    list-style-type:none;
    margin-top:5px;

     color:#000000;
}

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

}



#divDesktopMenu li a {
    font-size:18px;

   
    text-decoration:none;

   color:#000000;
    cursor:pointer;

    }

    #divDesktopMenu li.mainMenuSelected a {

     color:#423b2a !important;


    cursor:pointer;

    }
    
    
    
    
  #divDesktopMenu ul.smalMenu li a {
    font-size:14px;



    }  
    
       
  #divDesktopMenu ul.smalMenu li a:hover {
    font-size:14px;

      color:#fff;
    text-decoration:none;


    cursor:pointer;

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

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

}

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



#divMobileMenu li a {
    font-size:18px;
 
 color:#000000;
    text-decoration:none;



    cursor:pointer;

    }
    

    
    
    
#divMobileMenu li a:Hover {
    font-size:18px;
 
    color:#423b2a;
    text-decoration:none;



    cursor:pointer;

    }

     


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

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

   
   
   /* --------------------------------------------------------------------------
   old Styles
   -------------------------------------------------------------------------- */ 
   

      /* --------------------------------------------------------------------------
   Added Styles
   -------------------------------------------------------------------------- */ 
 .navbar-default{
     background-color: var(--primary) !important;
 }  
 #navMenuItemsRight ul {
    padding: 5px 10px;
}

#navMenuItemsRight li a,
#navMenuItemsLeft li a{
    display: block;  /* Säkerställer att hela ytan är klickbar, undviker glitching/hopp */
    padding: 5px 10px; /* Definierad padding från början */
    border-radius: 20px;
    transition: background-color 0.3s ease-in-out; /* Mjuk övergång */
}

/*#navMenuItemsRight li a:hover {
    background-color: red !important;
}*/

#navMenuItemsRight li:nth-of-type(1) a:hover,
#navMenuItemsRight a:active{
    background-color: var(--secondary-1) !important;
}

#navMenuItemsRight li:nth-of-type(2) a:hover,
#navMenuItemsRight a:active{
    background-color: var(--secondary-2) !important;
}

#navMenuItemsRight li:nth-of-type(3) a:hover,
#navMenuItemsRight a:active{
    background-color: var(--footer) !important;
    color:var(--primary)  !important;
}

#navMenuItemsLeft li:nth-of-type(3) a:hover,
#navMenuItemsLeft a:active{
    background-color: var(--secondary-1) !important;
}

#navMenuItemsLeft li:nth-of-type(2) a:hover,
#navMenuItemsLeft a:active{
    background-color: var(--secondary-2) !important;
}

#navMenuItemsLeft li:nth-of-type(1) a:hover,
#navMenuItemsLeft li:nth-of-type(1) a:active{
    background-color: var(--footer) !important;
    color:var(--primary) !important;
}

.navbar-default .navbar-toggle{
    border-color:var(--footer) !important;
}
.navbar-default .navbar-toggle{
    background-color:var(--secondary-2);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
    background-color:var(--secondary-2);
}
.navbar-default .navbar-toggle:active{
    background-color:var(--secondary-1);
}



#divMobileMenu li:nth-of-type(1):hover,
#divMobileMenu li:nth-of-type(1):active {
    background-color: var(--secondary-1) !important;
    color: var(--footer) !important;
    border-radius: 5px;
}
#divMobileMenu li:nth-of-type(2):hover,
#divMobileMenu li:nth-of-type(2):active  {
    background-color: var(--secondary-2) !important;
    color: var(--footer) !important;
    border-radius: 5px;
}

#divMobileMenu li:nth-of-type(3):hover,
#divMobileMenu li:nth-of-type(3):active  {
    background-color: var(--footer) !important;
    color: var(--primary) !important;
    border-radius: 5px;
}

#divMobileMenu li:nth-of-type(3):hover a{
    color:var(--primary) !important;
}
#divMobileMenu li:nth-of-type(3):active a{
    color:var(--primary) !important;
}


#navMenuItemsRight li:nth-of-type(1).mainMenuSelected a,
#navMenuItemsLeft li:nth-of-type(3).mainMenuSelected a {
    background-color: var(--secondary-1) !important;
    cursor: pointer;
}
#navMenuItemsRight li:nth-of-type(2).mainMenuSelected a,
#navMenuItemsLeft li:nth-of-type(2).mainMenuSelected a {
    background-color: var(--secondary-2) !important;
    cursor: pointer;
}
#navMenuItemsRight li:nth-of-type(3).mainMenuSelected a,
#navMenuItemsLeft li:nth-of-type(1).mainMenuSelected a{
    background-color: var(--footer) !important;
    color:var(--primary) !important;
    cursor: pointer;
}



.img-responsive{
    border-radius: 10px !important;
   
}
 
      /* --------------------------------------------------------------------------
   Added Styles
   -------------------------------------------------------------------------- */ 
   
   
   /* --------------------------------------------------------------------------
   LOGIN Styles
   -------------------------------------------------------------------------- */  
.loginMenu hr {
    background-color: var(--footer) !important;

}
.loginMenu div:has(strong) {
    color: #413827;
}
.loginMenu strong {
    color: #413827 !important;
}

/* Ändra färgen på knappen "Admin" */
.loginMenu .btn-info:nth-child(1) {
    background-color: var(--footer) !important;
    border-color: var(--footer) !important;
        color:white;
}
.loginMenu .btn-info:nth-child(1):hover {
    background-color: var(--secondary-2) !important;
    border-color: var(--secondary-2) !important;
        color:white;
}

/* Ändra färgen på knappen "Mitt konto" */
.loginMenu .btn-info:nth-child(2) {
    background-color: var(--footer) !important;
    border-color: var(--footer) !important;
        color:white;
}
.loginMenu .btn-info:nth-child(2):hover {
    background-color: var(--secondary-2) !important;
    border-color: var(--secondary-2) !important;
        color:white;
}

/* Ändra färgen på knappen "Logga ut" */
.loginMenu .btn-warning {
    background-color: var(--footer) !important;
    border-color: var(--footer) !important;
        color:white;
}
.loginMenu .btn-warning:hover {
    background-color: var(--secondary-2) !important;
    border-color: var(--secondary-2) !important;
        color:white;
}

/* --------------------------------------------------------------------------
   LOGIN Styles
   -------------------------------------------------------------------------- */