/* ======= GRUNDLÄGGANDE LAYOUT ======= */


/* Desktop-layout (=768px) */
    @media (min-width: 768px) {
      .left-column {
        flex: 0 0 18%;
        max-width: 18%;
        display: flex;
        flex-direction: column;
        order: 1;
      }

      .content {
        flex: 0 0 64%;
        max-width: 64%;
        order: 2;
      }

      .right-column {
        flex: 0 0 18%;
        max-width: 18%;
        order: 3;
      }
    }

    /* Mobil: stapla kolumnerna i rätt ordning */
    @media (max-width: 767.98px) {
      .left-column {
        display: contents;
      }

      .sidebar-right       { order: 3; }
      .content             { order: 2; }
      .sidebar-left        { order: 1; }
      .sidebar-left-bottom { order: 4; }
    }

    /* Gemensamma stilar */
    .sidebar-left,
    .sidebar-left-bottom,
    .content,
    .sidebar-right {
      width: 100%;
    }

    /* Visuell hjälp 
    .sidebar-left         { background: #f8d7da; padding: 1rem; }
    .sidebar-left-bottom  { background: #f5c6cb; padding: 1rem; }
    .content              { background: #d4edda; padding: 1rem; }
    .sidebar-right        { background: #d1ecf1; padding: 1rem; }
*/

    /* Undvik gutters */
    .no-gutters {
      --bs-gutter-x: 0;
    }
	
	
/* Nollställning av marginal/padding på hela sidan */
body {
  margin: 0px;
  padding: 0px;
  font-size: 16px;
  font-family: Arial;
}

/* Wrapper med maxbredd för innehåll och centrering */
.wrapper {
  max-width: 1400px;
  margin: 0px auto;
  padding: 0px;
}

/* Banner/header med mörk bakgrund och centrerad vit text */
header {

}

.banner {
	text-align: center;
	padding: 0;
	margin: 0;
	height: 100px;
	background: linear-gradient(to bottom, rgba(144,173,233,0.8), rgba(220,220,220,0.0));
	overflow: hidden; /* Hindra att innehållet sticker ut */
}

.banner-img {
	max-height: 100%; /* Begränsa till headerns höjd */
	width: auto; /* Håll proportionerna */
	display: block; /* Ta bort extra utrymme under bilden (img är inline by default) */
	margin: 0 auto; /* Centrera bilden */
	max-width: 100%; /* Hindra att den blir bredare än headern */
}

/*.card {
	border-radius: 0.5rem;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	border: none;
	padding: 1rem;
	max-width: 300px;
}*/

/*------------------------------- Kundvagn ----------------------------*/

	.cart-amount-input {
		width: 20px !important; /* Tvingar bredden */
		height: 30px;
		font-size: 14px;
		padding-top: 0.1rem;
		padding-bottom: 0.1rem;
		/*background-color: #5375e4;*/
	}

/*------------------------------- Chat badge ----------------------------*/

/* Badgen positioneras i övre högra hörnet */
	.chat-badge {
	position: absolute;
	top: 0;
	right: 0;

	min-width: 200px;    /* Minsta bredd */
	width: auto;         /* Expanderar vid behov */
	max-width: 100%;     /* Skydd mot att spilla utanför */
	
	background-color: #5375e4;
	color: white;
	font-weight: bold;
	text-align: center;

	padding: 0rem 1rem; /* Inre marginal så texten får plats */
	border-bottom-left-radius: 25px;

	box-shadow: 0 2px 5px rgba(0,0,0,0.3);

	white-space: normal;      /* Tillåt radbrytning */
	display: inline-block;    /* Behåller auto-bredd */
	}

/*------------------------------- Reklam till höger ----------------------------*/
/* namndelen på reklamrutorna */
.reklamheader{
	border: 5px solid #000;
	text-align: center;
	background: url('tile_back.gif');
	background-size: contain;
	/*transform: scaleY(-1); */      /* Flippa upp-och-ner */
	/*background-repeat: no-repeat;*/
}

.reklam-bild{
	min-height: 70px; /* eller vilken höjd du vill */
	object-fit: contain;
}

.dark-overlay {
	background-color: rgba(0, 0, 0, 0.3);  /* Svart med 40% opacitet */
	color: white;                          /* Tydlig kontrast */
	padding: 0.5rem 1rem;
	font-weight: 600;
}

/*------------------------------- Bakgrunden till alla rutorna ----------------------------*/
.gradient-top { /*90ADE9 - */
	/*background: linear-gradient(to bottom, rgba(144,173,233,0.8), rgba(0,0,0,0));*/
	background: linear-gradient(to bottom, rgba(144,173,233,0.8), rgba(220,220,220,0.0));
	/*background-size: contain;*/
	color: white;
	/*padding: 0.5rem 1rem;*/
}


/*------------------------------- Content ----------------------------*/
.content{
	padding: 0px 0px 0px 0px;
	font-family: Arial;
	font-size: 16px;
}

/*------------------------------- HAMBURGARE (SIDOBAR) ----------------------------*/
.hamburger {
	background-color: #0d6efd; /* Bootstrap blå (bg-primary) */
	color: white;
	padding: 0.5rem 0.5rem;
}

.hamburger .navbar-toggler {
	border-color: rgba(255, 255, 255, 0.5);
}

.hamburger .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.hamburger .navbar-brand {
	color: white;
}

/*------------------------------- VÄNSTERMENY (SIDOBAR) ----------------------------*/
/* Bakgrundsfärg och textfärg för sidomenyn */

/**/
.sidebar {
  background-color: #0d6efd; /*rgba(71, 127, 238, 1);*/
  color: white;
  padding: 0px;
  margin: 0px;
}

/* Standardlänkar i sidomenyn */
.sidebar a {
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Hover-effekt på länkar i menyn */
.sidebar a:hover {
  background-color: white;
  color: black;
  border-radius: 4px;
  /*box-shadow: 0 0 5px rgba(0,0,0,0.2);*/
}

/* Länkar i menyn */
.nav-link {
  /*background-color: green;*/
  padding: 0px; 	/* skapar plats inuti ett element */
  margin: 5px;		/* skapar plats utanför ett element */
}

/* Aktiv länk-markering */
.nav-link.active,
.nav-link[aria-current="page"] {
  background-color: white;
  color: black;
  font-weight: bold;
}


/* ======= UNDERMENYER (SUBMENUS) ======= */

/* Undermenyer är dolda från start med smidig max-height-animation */
.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background-color: #0056b3;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Tar bort punktlistor i ul-innehåll */
.submenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Indrag för undermenylänkar */
.submenu li a {
  padding-left: 1rem;
}

/* När en undermeny är öppen (mobil), expandera med max-height */
.submenu.open {
  max-height: 500px; /* justeras dynamiskt i JS */
}


/* ======= PILEFFEKT & VISUELLT STÖD ======= */

/* Rotera pil när meny är öppen (mobil eller hover) */
.show-submenu > .toggle .arrow,
.nav-item.dropdown:hover > .toggle .arrow {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}


/* ======= HOVERBASERAD MENY FÖR DESKTOP (=768px) ======= */
@media (min-width: 768px) {
  

  /* Undermenyer visas till höger om menyrad på desktop */
  .nav-item.dropdown .submenu {
    position: absolute;
    top: 0;
    left: 100%;
    background-color: #0056b3;
	
    /* Mjuk fade + dold initialt */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /*max-height: none !important;  Viktigt: ta bort mobilens max-height-begränsning */
    z-index: 1000;
	
    max-height: 600px;            /* BEGRÄNSA HÖJD */
    overflow-y: auto;             /* AKTIVERA SCROLL */
	
	/* Anpassa bredden till innehåll */
	width: max-content;        /* låter bredden växa efter texten */
	min-width: 200px;          /* säkerhetsmarginal så korta menyer inte blir för smala */
	max-width: 100vw;          /* förhindra att den sticker utanför skärmen */

	white-space: nowrap;       /* förhindrar radbrytning */
	
  }

  /* Visa undermeny på hover (desktop) */
  .nav-item.dropdown:hover .submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
 
 /* Visas uppåt istället */
.nav-item.dropdown .submenu.open-up {
  top: auto;
  bottom: 0; /* istället för bottom: 100% */
  transform: translateY(0rem); /* flytta upp exakt lika mycket som menyhöjden */
}

/* Öppnas mitt på meny (t.ex. horisontellt bredvid istället) */
.submenu.open-mid {
  top: 50%;
  transform: translateY(-50%);
}

  /* Hover-effekt för desktopmeny */
  .sidebar .nav-link:hover {
    background-color: white;
    color: black;
    border-radius: 4px;
    /*box-shadow: 0 0 5px rgba(0,0,0,0.2);*/
  }
}

.submenu::-webkit-scrollbar {
  width: 8px;
}

.submenu::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.4);
  border-radius: 4px;
}


/* ======= Content delen ======= */
.pageposition{
	
}



/* Egna klasser */



h1
{
}

/*
h1
{
	vertical-align : top;
	font-size: 22px;
	font-family: Arial;
	height: 22px;
	margin: 0px;
	color: #003399;
	padding: 0px 0px 0px 0px;
	border-bottom: 0px #000000 solid;
	background: #FFFFFF;
}
table.maintable {
	width: 1000px;
	text-align: left;
	border: 0px;
}

/* <td> */
/*
.header_menu{
	height: 30px;
	font-size: 12px;
	font-family: Arial;
	border-top: solid 1px #000000;
	border-bottom: solid 1px #0099FF;
	text-align: left;
	vertical-align: middle;
	font-weight: bold;
	color: #003399;
	background: url('tile_sub.gif');
	padding-right: 10px;
	padding-left: 10px;
}

.header_menu_right{
	height: 30px;
	font-size: 12px;
	font-family: Arial;
	border-top: solid 1px #000000;
	border-bottom: solid 1px #0099FF;
	text-align: right;
	vertical-align: middle;
	font-weight: bold;
	color: #003399;
	background: url('tile_sub.gif');
	padding-right: 10px;
	padding-left: 10px;
}
*/

/* BOX */

/*
.box{
	border: 1px #000000 solid;
	width: 170px;
	padding: 1px;
}

.topface{
	font-size: 12px;
	font-family: Arial;
	height: 17px;
	margin: 0px;
	color: #003399;
	padding: 3px 0px 3px 15px;
	border-bottom: 1px #000000 solid;
	background-image: url('menu_top.jpg');
}

.box h2 {
	font-size: 12px;
	font-family: Arial;
	height: 17px;
	margin: 0px;
	color: #003399;
	padding: 3px 0px 3px 20px;
	border-bottom: 1px #000000 solid;
	background-image: url('menu_top.jpg');
}

.box p{
	font-size: 12px;
	margin: 2px 2px 2px 2px;
	font-family: Arial;
}

table.menu {
	width: 140px;
	padding: 0px 0px 0px 0px;
	border: 0px;
}


ul.menu
{
	list-style-type: none;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	font-size : 12px;
}

ul.menu
{
	vertical-align:middle;
}

ul.menu li
{
	margin-right: 2px;
	margin-left: 2px;
	border-bottom: solid 0px #EEEEEE;
	vertical-align:middle;
}*/

/*
.hr{
	vertical-align : middle;
	height : 1px;
	margin-bottom: 3px;
	margin-top: 3px;
	border-bottom: solid 1px #aaaaaa;
}

.tom{
	vertical-align : middle;
	height : 1px;
	margin-bottom: 5px;
	margin-top: 5px;
}


li:hover
{
	font-weight: bold;
	border-bottom: solid 1px #6D8CB8;
	vertical-align:middle;
}

li.m_selected
{
	font-weight: bold;
	border-right: solid 1px #6D8CB8;
	vertical-align:middle;
}

.boximg_collapse{
	float: right;
}

.boxcontent_open{
	display: block;
	padding: 2px;
}

.boxcontent_collapsed{
	display: none;
	padding: 2px;
}

input.cmd {
	font-family: Arial;
	font-size: 12px;
	background: #F0F0F0;
	border: solid 1px #000000;
}

*/
/*-- kollat-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*
.box_large h2{
	font-size: 12px;
	font-family: Arial;
	height: 17px;
	margin: 0px;
	color: #003399;
	padding: 3px 0px 3px 20px;
	border-bottom: 1px #000000 solid;
	background-image: url('menu_top.jpg');
}

.box_large p
{
	font-size: 12px;
	margin: 2px 2px 2px 2px;
	font-family: Arial;
}


.productListing-heading {
  font-family: Arial;
  font-size: 12px;
  background: #F0F0F0;
  color: #000000;
  font-weight: bold;
  padding: 1px;
}*/

/* Layout */
/*
.catdisplay{
	padding: 5px 5px 5px 5px;
	font-family: Arial;
	font-size: 12px;
	text-align: center;
	vertical-align: top;
}


.menu_top, .table_top {
	background: #F0F0F0;
	height: 14px;
	font-size: 12px;
	font-family: Arial;
	border-top: solid 1px #C2C2C2;
	border-bottom: solid 1px #C2C2C2;
}

.menu_content, .table_content{
  background: #f8f8f9;
  font-family: Arial;
  font-size: 12px;
  border-left: solid 1px #C2C2C2;
  border-right: solid 1px #C2C2C2;
  border-bottom: solid 1px #C2C2C2;
  padding: 2px 2px 2px 2px;
}

select, input, textarea {
	font-family: Arial;
	font-size: 12px;
}

.pageheader {
  font-weight: bold;
  color: #003399;
  font-size : 20px;
}

img{
	border: 0px;
}

table.productListing {
	border: 1px;
	border-style: solid;
	border-color: #C2C2C2;
	vertical-align : middle;
}

td.productListing-data {
	font-family: Arial;
	font-size: 12px;
	vertical-align : middle;
  padding: 1px;
}

tr.productListing-odd{
	background: #ffffff;
	vertical-align : middle;
}

tr.productListing-even{
  background: #fafafa;
	vertical-align : middle;
}

td.center{
  font-family: Arial;
  font-size: 12px;
  text-align: center;
}

input.required{
	background: #ED7284;
}

table.error{
	border: solid 1px #FF0000;
	background: #ED7284;
}

table.search, table.contact{
	width: 600px;
	border: solid 1px #000000;
}

td.searchoption{
	padding: 5px 5px 5px 5px;
	font-family: Arial;
	font-size: 12px;
	text-align: left;
	vertical-align: top;
}

option.standard{
	font-weight: bold;
	font-family: Arial;
	background: #EAEAEA;
}

option.main{
	font-family: Arial;
	background: #EAEAEA;
}


.topface_kampanj
{
	font-size: 12px;
	font-family: Arial;
	height: 17px;
	margin: 0px;
	color: #ff0000;
	padding: 3px 0px 3px 15px;
	border-bottom: 1px #000000 solid;
	background-image: url('menu_top.jpg');
}

.topface_cust
{
	font-size: 12px;
	font-family: Arial;
	height: 17px;
	margin: 0px;
	color: #ff0000;
	padding: 3px 0px 3px 15px;
	border-bottom: 1px #000000 solid;
	background-image: url('menu_top.jpg');
}

.topface p
{
	font-weight: bold;
	display: inline;
}

.topface_kampanj p
{
	font-weight: bold;
	display: inline;
}

.topface_cust p
{
	font-weight: bold;
	display: inline;
}

.box_large{
	border: 1px #000000 solid;
	width: 98%;
	padding: 1px;
}

.box_kampanj p
{
	font-size: 12px;
	margin: 2px 2px 2px 2px;
	font-family: Arial;
}

.box_kampanj
{
	border: 1px #000000 solid;
	width: 160px;
	padding: 1px;
}

.box_kampanj h2
{
	font-size: 12px;
	font-family: Arial;
	height: 17px;
	margin: 0px;
	color: #ff0000;
	padding: 3px 0px 3px 15px;
	border-bottom: 1px #000000 solid;
	background-image: url('menu_top.jpg');
}

.kampanj_text
{
	margin-top : 5px;
}


.box_cust p
{
	font-size: 12px;
	margin: 2px 2px 2px 2px;
	font-family: Arial;
}

.box_cust
{
	border: 1px #000000 solid;
	width: 160px;
	padding: 1px;
}

.box_cust h2
{
	font-size: 12px;
	font-family: Arial;
	height: 17px;
	margin: 0px;
	color: #ff0000;
	padding: 3px 0px 3px 15px;
	border-bottom: 1px #000000 solid;
	background-image: url('menu_top.jpg');
}

.cust_text
{
	margin-top : 5px;
}

p.searchresults{
	border-bottom: solid 1px #000000;
	margin-left: -1px;
	padding-left: 4px;
	margin-right: -1px;
}

.copyright
{
	text-align: center;
	font-size: 10px;
}

td.new_products
{
	text-align: center;
	width: 150px;
}

td.new_products b
{
	font-size: 13px;
	font-weight: bold;
}

.offline
{
	text-align: center;
	font-weight: bold;
	font-size: 15px;
}

input.cart_input
{
	font-size: 10px;
	width: 20px;
	margin: 0px;
	padding: 0px;
}

div.center
{
	text-align: center;
}

.home_toprow
{
	border-bottom: solid 0px #000000;
	padding: 2px;
}

.home_spacer
{
	width: 3px;
	border-bottom: solid 1px #000000;
	background: url('home_spacer.gif');
}

.item_title
{
	font-weight: bold;
	font-size: 14px;
}

#position a
{

}

#newsdate
{
	text-align: right;
	font-size: 9px;
}


table {
  background: #ffffff;
  color: #000000;
  margin: 0px;
  font-size: 12px;
  font-family: Arial;
}

td {
	vertical-align: top;
}
*/

a { 
  color: #000000; 
  text-decoration: none; 
}

a:hover { 
  color: #003399;
  /*text-decoration: underline; */
}

a.cat_selected{
	font-weight: bold;
}