:root {
  --main-color: #00437a; /*#ffa500*/
  --main-color-rgb: 0, 0, 0;
  --gray-color: #EEE;
}






.poppins
{
    font-family: 'Poppins', sans-serif !important;
}
.login-colorgraph
{
   background: #ffa500 !important;
}

.btn-info
{
      background: #ffa500 !important;
      color:#000;
      border-color:#ffa500 !important;
}
.btn-warning
{
      background: #ffa500 !important;
      color:#000;
      border-color:#ffa500 !important;
}




/* För lilla inforutan om bastu och grillkåta*/
.styled-table-ft {
    border: solid 1px #DDEEEE;
    border-spacing: 0;
    font-size: 16px;
}

.styled-table-ft thead th {
    background-color: #DDEFEF;
    border: solid 1px black;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}

.styled-table-ft tbody td {
    /*
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
    */
}

.t-tbody-tr1 {
    background-color: #0a4579;
    border: solid 1px black;
    color: white;
    font-weight: 700;
    padding: 10px;
    text-align: left;
    /*  text-shadow: 0.5px 0.5px 0.5px #385494;  */
}

.t-tbody-tr2 {

    border: solid 1px black;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

  .custom-container-ft {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
  
    }

.colorborder
{
    
    
    border:1px solid #ffa500;
}
.logobadge
{

font-weight:bold;
padding:10px;border:2px solid #ffa500;margin:10px;padding:10px;margin-top:20px;border-radius:4px;text-align:center;
background: #ffa500;
}


.linedevider
{
	padding-bottom: 90px;
}

.divider
{
	position: relative;
	margin-top: 90px;
	height: 1px;
}

.mainButton
{
    
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
         background-color:var(--gray-color);
    
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    text-decoration-line: none;
 
    text-decoration-style: initial;
    text-decoration-color: initial;
}
.mainButton:hover
{
    
        padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
         background-color:var(--main-color);
    
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    text-decoration-line: none;

    text-decoration-style: initial;
    text-decoration-color: initial;
}
.mainButton .selected
{
    
    
         background-color:var(--main-color);
    color:white;
    
    
}


.infobox
{
    margin:20px 0px;
    padding:20px;
      background-color:var(--gray-color);
    border:1px solid var(--main-color);
    border-radius:10px;

    
}

.div-transparent:before
{
	content: "";
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	width: 90%;
	height: 1px;
	background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);
}


.div-dot:after
{
	content: "";
	position: absolute;
	z-index: 1;
	top: -9px;
	left: calc(50% - 9px);
	width: 18px;
	height: 18px;
	background-color: var(--main-color);
	border: 1px solid rgb(48,49,51);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px white,
					0 0 0 4px white;
}



 
@media screen and (min-width: 1200px) {
   #logo .logoBigtext {
     font-size: 52px;
  }
}


.logolink,.logolink:link,.logolink:visited,.logolink:hover,.logolink:active
{
    
        text-decoration:none;
    
}

.logouppertext
{
    
     font-family: 'Poppins', sans-serif;
    text-decoration:none;
    color:#0088CC;
    font-size:  38px;
    font-weight:400;
     margin-top:30px;
    
}

.logotext
{
    
     font-family: 'Poppins', sans-serif;
  
    font-size: 52px;
     font-weight:900;

    margin-top:-20px;
    color:black;
      
}

#divDesktopHeader  
{


padding-bottom:10px;


}
#divDesktopHeader  .menubuttons 
{
    padding-bottom:0px;
    margin-top:10px;
    text-align:center;
}




 .menubuttons a,   .menubuttons a:visited,  .menubuttons a:link
{

    
    
    font-weight:bold;
    text-decoration:none;
    color:black;
    display:inline-block;
    padding:10px;
    font-size:16px;
    border-radius: 5px;
    border:2px solid var(--main-color);
    margin-top:10px;
    margin-left:8px;
    background-color:#EEE;

}


.menubuttons a:hover
{
    
        
 background-color:var(--main-color);
 color:white;

}


 .menubuttons a.selected, .menubuttons a:link.selected, .menubuttons a:visited.selected
{
    
    
 background-color:var(--main-color);
 color:white;
 
}







 .actionButton,   .actionButton :visited,  .actionButton:link
{

    text-decoration:none;
    color:white;
    display:block;
    padding:10px;
    font-size:18px;
    border-radius: 5px;
    border:1px solid gray;
    margin-top:10px;
    margin-left:8px;
   background-color:#56aedd;
   text-align:center;
}


.actionButton:hover
{
    
        
    background-color:#CCC;


}

















#divDesktopHeader  .menubuttonsmini
{
   
    text-align:center;
}




#divDesktopHeader  .menubuttonsmini a, #divDesktopHeader  .menubuttonsmini a:visited,#divDesktopHeader  .menubuttonsmini a:link
{

    text-decoration:none;
    color:white;
    display:inline-block;
    padding:10px;
    font-size:14px;
    margin-top:10px;
    margin-left:8px;

}



#divDesktopHeader  .menubuttonsmini a:hover
{

 background-color:#EEE;
border-radius:5px;
 padding-bottom:3px;
 padding-top:3px;
    
}


#divDesktopHeader  .menubuttonsmini a.selected
{

 color:var(--main-color);
 background-color:#000;
 border-radius:5px;
 padding-bottom:3px;
 padding-top:3px;
 color:white;
 
}












#divMobileHeader  .menubuttonsmini
{
   

}




#divMobileHeader  .menubuttonsmini a, #divMobileHeader  .menubuttonsmini a:visited,#divMobileHeader  .menubuttonsmini a:link
{

    text-decoration:none;
    color:#000;
    display:block;
    padding:5px;
    font-size:14px;
    margin-top:10px;
    margin-left:8px;
    text-align:center;
}



#divMobileHeader  .menubuttonsmini a:hover
{

 background-color:#EEE;
}


#divMobileHeader  .menubuttonsmini a.selected
{

 color:white;
 background-color:#000;
 border-radius:5px;
 padding-bottom:3px;
 padding-top:3px;
 
}














#divMobileHeader  
{
padding-bottom:10px;


}



#divMobileHeader .logouppertext
{
    
  font-size: 32px;
 font-size: 7vw;
   margin-top:10px;
   margin-left:0px;
}

#divMobileHeader .logotext
{
    
 
  
    font-size: 42px;
    font-size: 8vw;
  margin-top:-10px;
  margin-left:0px;
}

























#divMobileMenuContent  .menubuttons 
{
    margin-top:20px;
}

#divMobileMenuContent  .menubuttons a, #divMobileMenuContent  .menubuttons a:visited,#divMobileMenuContent  .menubuttons a:link .selected
{

    
    
    text-align:center;
    text-decoration:none;
    color:black;
    display:block;
    padding:10px;
    font-size:18px;
    border-radius: 5px;
    border:1px solid gray;
    margin-top:10px;
    margin-left:0px;

}


#divMobileMenuContent  .menubuttons a:hover
{
    
        
 background-color:#CCC;


}


#divMobileMenuContent  .menubuttons .selected
{
    
    
 background-color:var(--main-color);
 color:white;
 
}











































        
        
          .burger {
            position: relative;
            display: block;
            width: 52px;
            height: 8px;
            margin: 0 auto;
            background-color: #00437a ;
            transform: skew(5deg);
            transition: all .275s;
        }

            .burger:after,
            .burger:before {
                content: '';
                display: block;
                height: 100%;
                background-color: #00437a;
                transition: all .275s;
            }

            .burger:after {
                transform: translateY(-24px) translateX(-4px) skew(-20deg);
            }

            .burger:before {
                transform: translateY(-32px) skew(-10deg);
            }

        /* Toggle State part */
        .is-open .burger {
            transform: skew(5deg) translateY(-16px) rotate(-45deg);
        }

            .is-open .burger:before {
                transform: translateY(0px) skew(-10deg) rotate(75deg);
            }

            .is-open .burger:after {
                transform: translateY(-24px) translateX(10px) skew(-20deg);
                opacity: 0;
            }

        /* MENU Text part */

        .burger-text {
            display: block;
            font-size: .675rem;
            letter-spacing: .05em;
            margin-top: .5em;
            text-transform: uppercase;
            font-weight: 700;
            text-align: center;
            color: #5A3B5D;
            font-size: 20px;
            color: var(--main-color, #00437a) ;;
        }
        
        
        
        
        
        
        
        
        


        /* Burger Style: @see: https://codepen.io/CreativeJuiz/full/oMZNXy */
        .open-main-nav-mobile {

            padding-top: 20px;
            
   
            background: none;
            border: 0;
            cursor: pointer;
          
        }

        .open-main-nav-mobile:focus {
            outline: none;
        }

        .burger-mobile {
            position: relative;
            display: block;
            width: 26px;
            height: 4px;
            margin: 0 auto;
            background: var(--main-color, #00437a) ;;
            transform: skew(5deg);
            transition: all .275s;
        }

            .burger-mobile:after,
            .burger-mobile:before {
                content: '';
                display: block;
                height: 100%;
                background: var(--main-color, #00437a) ;;
                transition: all .275s;
            }

            .burger-mobile:after {
                transform: translateY(-12px) translateX(-2px) skew(-20deg);
            }

            .burger-mobile:before {
                transform: translateY(-16px) skew(-10deg);
            }

        /* Toggle State part */
        .is-open .burger-mobile {
            transform: skew(5deg) translateY(-8px) rotate(-45deg);
        }

            .is-open .burger-mobile:before {
                transform: translateY(0px) skew(-10deg) rotate(75deg);
            }

            .is-open .burger-mobile:after {
                transform: translateY(-12px) translateX(5px) skew(-20deg);
                opacity: 0;
            }

        /* MENU Text part */

        .burger-text-mobile {
            display: block;
            font-size: .675rem;
            letter-spacing: .05em;
            margin-top: .5em;
            text-transform: uppercase;
            font-weight: 700;
            text-align: center;
            color: #5A3B5D;
            font-size: 16px;
            color: #000;
           
        }