/* Gäller alla element*/
* {
    padding: 0px;
    margin: 0px;
}


/* ----------------------------------------- */
/* Responsive font sizes with media queries */
/* STYR UPP FONTERS STORLEK, ALLT BASERAS RESELATIVT TILL DESSA TEXT-STORLEKAR HÄR , SOM SÄTTER UTGÅNGS STORLEKEN SOM SEN rem BYGGER PÅ
    1rem=20px, om inte skärmen är mindre än 1580px, då =18px, och mindre än 980px i bredd =16px */
/* ----------------------------------------- */

/*SKICKAR MED FONT TILL DEN SOM INTE HAR DEN INSTALLERAD*/
@font-face {
    font-family: myFontRl;
    src: url("/FONT/segoeui.woff2") format("woff2");
}
@font-face {
    font-family: myFontRl;
    src: url("/FONT/segoeui.woff2") format("woff2");
    font-weight: normal;
}
@font-face {
    font-family: myFontRl;
    src: url("/FONT/segoeuib.woff2") format("woff2");
    font-weight: bold;
}
@font-face {
    font-family: myFontRl;
    src: url("/FONT/segoeuii.woff2") format("woff2");
    font-style: italic;
}
@font-face {
    font-family: myFontRl;
    src: url("/FONT/segoeuiz.woff2") format("woff2");
    font-style: italic;
    font-weight: bold;
}
/*DET FINNS FLER FONT-STILAR I MAPPEN /FONT - men jag deklarerar inte fler, tror inte det behövs mer än Normal, Bold, Italic och Bold/Italic */


html {
    font-size: 21px;
    font-family: myFontRl, "proxima-nova", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, 'sans-serif';
    color: #343131; /*Inte riktigt svart text*/

    /*font-family: myFontRl, "proxima-nova", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, 'sans-serif';*/
    /*font-family: "Segoe UI", "proxima-nova", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, 'sans-serif';*/
    /*font-family: "proxima-nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, 'sans-serif';*/
    /* font-family: "proxima-nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, 'sans-serif' !important; */
    /*font-family: Arial, 'sans-serif' !important;*/    
}


body {
    width: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #ebebeb; /* BAKGRUNDSFÄRGEN PÅ OMRÅDET UTANFÖR SJÄLVA INNEHÅLLET */
    line-height: 1.5; /*SÄTTER RADAVSTÅNDET, 1.6 rek MEN JAG KÖR MED 1.5 */
}

.inner-div {
    max-width: 1120px;  /*Maxbredd på inner-div vid upplösning 1600 och uppåt, för brett blir inte bra*/
}

.unbehaved-element {
    font-size: 2em;
}

/*------------------------*/
/* UPP TILL 1480px BREDD: */
/*------------------------*/
@media (max-width: 1480px) {
    html {
        font-size: 18px;
    }
    .unbehaved-element {
        font-size: 1.9em; /* Fine tune unbehaved elements */
    }
    .inner-div {
        max-width: 800px;  /*Under bredd 1480 blir inner-div 800. Så den inte blir för bred vid denna upplösning*/
    }
}

/*------------------------*/
/* UPP TILL 1020px BREDD: */
/*------------------------*/

@media (max-width: 1020px) {
    html {
        font-size: 16px;
    }
    .inner-div {
        max-width: 800px; /*Under bredd 1000 blir inner-div 800px. Så den inte blir för bred vid denna upplösning*/
    }
}


        

/*Sätter rutan som bara ska synas vid utskrift till osynlig*/
#printrutan {
    display: none;
    visibility: hidden;
}

/* --------------------------------------------------*/
/* Den div som innehåller allt, yttersta yttre linjen*/
/* --------------------------------------------------*/
.outer-div {
    padding: 0px;
    margin: 0px;    
}

/*Den första "inre" div som blir själva fönstret som centeras, som sen innehåller allt - men den är ingen ram runt, den har ingen egen höjd */
.inner-div {
    width: 100%;
    display: block;
    margin: 0px auto;   /* Centrerar fönstret */
    padding: 0px;
    border: 0px solid red;
}

.yttre_div {
    padding: 0 2.5% 5px 2.5%; /* Skapar marginalen mellan kanten på innehållet och innehållet som följer */
    margin: 0; 
    width: 100%;
    box-sizing: border-box;
    background-color: white;
    display: block;
    float: left;
    clear: left;
    position: relative;
    box-shadow: 0px 5px 10px lightgrey; /* [vinkel vertikalt], [vinkel lodrätt], [spridning] - SKUGGA PÅ HUVUDFÖNSTRET */
    border: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.15);
}
 
/* ---------------------------------------------*/
/* Div-kolumner, En-block, två-block osv */
/* ---------------------------------------------*/

.En_kolumn {
    box-sizing: border-box;
    width: 100%;
    padding: 1.5% 0;    /* Skapar marginalen mellan kanten på innehållet och innehållet som följer */
    margin: 0px 0px 5px 0px;
    background-color: white;
    display: block;
    float: left;
    clear: left;
    position: relative;
    border: none;
}


.inre_div_rubrik {
    box-sizing: border-box;
    padding: 10px 0; /* 5px 0px 5px 10px;  top höger botten vänster */
    margin: 0px auto;    
    border-style: solid;
    border-width: 1px 0px;
    border-color: #d7dee5;
    position: relative;
    width: 100%;
    visibility: visible;
    display: block;
    float: none;
    clear: none;
    overflow: hidden;
    height: auto;
}

.inre_div_text {
    box-sizing: border-box;
    padding: 0px; 
    margin: 0px auto;
    /*border-top: 1px solid #d7dee5;*/
    border: none;
    position: relative;
    width: 100%;
    visibility: visible;
    display: block;
    float: none;
    clear: none;
    overflow: hidden;
    background-color: white;
    height: auto;
}


/*Bör bytas ut mot inre_div_text på de ställen där det går */
    .div_utan_bakgrund {
        padding: 0px; /* 5px 5px 5px 5px; */
        margin: 10px auto;
        position: relative;
        width: 98%;
        height: auto;
        visibility: visible;
        display: block;
        float: none;
        clear: left;
        overflow: hidden;
        border-style: none;
        background-color: inherit ;
    }




/*----------------------------*/
/* Dubbla responsiva spalter: */
/*----------------------------*/
.gruppering_dubbla_spalter {
    box-sizing: border-box;
    float: none;
    clear: left;
    margin: 0 0 10px 0;
    padding: 0px;
    border: none;
}

/*Fix som löser en html-"bugg" - Clear floats after the columns - */
.gruppering_dubbla_spalter:after {
    content: "";
    display: table;
    clear: both;
}

.inre_div_SPALT1 {
    /* får INTE innehålla någon Margin */
    box-sizing: border-box;
    position: relative;
    float: left;
    width: 48.5%; /*För att få ett lagom avstång mellan spalt1 och 2*/
    border: 1px solid #d7dee5;
    padding: 2%;
    display: block;
    background-color: inherit;
}

.inre_div_SPALT2 {
    /* får INTE innehålla någon Margin */
    box-sizing: border-box;
    float: right;
    width: 48.5%; /*För att få ett lagom avstång mellan spalt1 och 2*/
    border: 1px solid #d7dee5;
    padding: 2%;
    display: block;
    background-color: inherit;
}

.inside_spalt {
    position: relative;
    padding: 2% 3%;
    box-sizing: border-box;
    margin-bottom: 20px;
    display: block;
    width: 100%;
    border: none;
}

/*RADERAS NÄR GAMLA PACKLISTAN BORTA*/
.responsive_column {
    float: left;
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
}

/* Clear floats after the columns */
.responsive_row:after {
    content: "";
    display: table;
    clear: both;
}




/* NÄR SKÄRMEN MAN TITTAR PÅ HAR EN MAX-BREDD PÅ x antal PIXLAR, SÅ GÖR DENNA KOD ATT SPALTERNA inre_div_SPALT1 + inre_div_SPALT2 STÄLLS OVANPÅ VARANDRA */
@media screen and (max-width: 700px) {
    .gruppering_dubbla_spalter {
        margin-bottom: 0px;
    }
    .inre_div_SPALT1, .inre_div_SPALT2 {
        float: none;
        width: auto;
        padding: 15px;
    }
    .inre_div_SPALT1 {
        margin-bottom: 15px; 
    }
    .inre_div_SPALT2 {
        margin-bottom: 15px;  
    }
    #spalt2_annons {    /*DÖLJER ANNONS I SPALT 2*/
        display:none;
    }

    #image_packlist {   /*DÖLJER EN BILD PÅ NYA PACKLISTAN, behöver inte visas på mobiler*/
        display:none;
    }

    #rlPilUpp { /*ÄNDRAR STORLEK OCH PLATS PÅ PILEN UPP I MOBIL-LÄGET*/
        right: 8px;
        bottom: 1px;
        width: 40px;
        height: 40px;
    }
    .responsive_column {
        width: 100%; /*min nya responsive 2 column layout, blir över varandra istället för bredvid varandra*/
    }
}

        


        /* ---------------------------------------------------------------------------------------------------- */
        /* BYGGER UPP REKLAM-RUTAN SOM SYNS ALLRA HÖGST UPP TILL HÖGER PÅ SKÄRMEN, UTANFÖR LAYOUTEN SÅ ATT SÄGA, döljs enligt nedan... */
        .div_reklam_upper_right
        {
            display: none;
            position: fixed;
            right: 5px;
            top: 25px;
            visibility: hidden;
            padding: 0px;
            margin: 0px;
            width: 140px;
            height: 620px;
            border: none;
            background-color: none;
            text-align: right;
        }

        /* TAR FRAM REKLAM-RUTAN ALLRA HÖGST UPP TILL HÖGER PÅ SKÄRMEN, UTANFÖR LAYOUTEN SÅ ATT SÄGA, FÖR DE MED X antal pixlar OCH MER i UPPLÖSNING, PÅ WEBBLÄSAREN! */
        @media screen and (min-width: 1120px)        
        {
            .div_reklam_upper_right
            {
                display: block;
                visibility: visible;
            }
        }

        /* slut VISA SIG VID X antal px OCH MER*/
        /* ---------------------------------------------------------------------------------------------------- */



        /* --------------------------------------------------------------------------------------------------- */
        /* BYGGER UPP SPECIAL-MENYN SOM ÄR FIXERAD TILL VÄNSTER TOP, kommer fram enligt nedan */
        .special_div
        {
            display: none;
            visibility: hidden;
            padding: 0px;
            margin: 0px;
            width: 50px;
            height: 250px;
            position: fixed;
            left: 0px;
            top: 20px;
            border: none;
            background-color: none;
        }

        /* DE SMÅ RUT-BLOCKEN I DEN FIXERADE MENYN */
        .fixerat_meny_block
        {
            display: none; 
            visibility: hidden;
            width: 100%; 
            height: 50px;              
            padding: 0px; 
            margin: 0px;            
            background-color: none;
        }

        .den_fixerade_menyn
        {
            background-color: none;            
        }

        /* TAR FRAM DEN FIXERADE MENYN FÖR DE MED 1000px OCH MER i UPPLÖSNING */
        @media screen and (min-width: 1000px) 
        {
            .special_div, .fixerat_meny_block
            {
                display: block;
                visibility: visible;
            }
        }

        /* slut VISA SIG VID 1000px OCH MER*/
        /* --------------------------------------------------------------------------------------------------- */

/* PIL KLICKA-UPP-TILL-ÖVERKANT PÅ SIDAN*/
.rlPilUppClass {
    display: none; /* osynlig till javascript ändrar detta */
    visibility: hidden; /* osynlig till javascript ändrar detta */
    padding: 10px;
    margin: 0px;
    position: fixed;
    right: 1.5%;
    bottom: 3%;
    width: 80px;
    height: 80px;
    border: none;
    background-color: none;
    z-index: 10000;
}


.fast_div_240px { /*används i _elkontakter.asp t.ex, blir Tre-i-bredd vid max upplösning 800 px*/
    box-sizing: border-box;
    text-align: center;
    float: left;
    clear: none;
    display: block;
    width: 31%;
    min-width: 240px;
    border: 1px dotted gray;
    margin: 5px 0px 5px 10px;
    padding: 5px;
    height: 350px;
    overflow: hidden;
}


.div_swipe_vertical { /* När man har en tabell eller liknande som är bredare än fönstret, så blir det en vertical scroll, se /omrakningstabeller/*/ 
    box-sizing: border-box;
    white-space: nowrap; /*Så den inte bryter ner Diven vid mellanslag i texten*/
    height: auto;
    width: 100%;
    overflow-x: scroll; /*Visar en Scrollbar på X*/
    overflow-y: hidden; /*Döljer Y-scrollbaren*/
    padding-bottom: 10px;
    padding-left: 10px;
    margin: 5px auto;
    border: 1px gray dashed;
    background-color: white; /*#f3f8fb;*/
}


/* ---------------------------------------------*/
/*TEXT-UTSEENDEN*/
/* ---------------------------------------------*/
h1 { /*Största rubriken*/
    font-weight: bold;
    font-size: 1.6rem;        
    margin: 3% 2% 2% 0%;
    padding: 0px;
}
h2 { 
    font-weight: bold;
    font-size: 1.2rem;        
    margin: 2% 2% 2% 0%;
    padding: 0px;
}
h3 { /* Samma som p fast rubrik */
    font-weight: bold;
    font-size: 1rem;
    margin: 1.5% 2% 2% 0%;
    padding: 0px;
}
h4 {
    font-weight: normal;
    font-size: 0.9rem;        
    margin: 1.5% 2% 1.5% 0%;
    padding: 0px;
}

h5 {
    font-weight: normal;
    font-size: 0.7rem;        
    margin: 1.2% 1.8% 1.2% 0%;
    padding: 0px;
}

h6 {  /* Den minsta rubriken */
    font-weight: normal;
    font-size: 0.5rem;        
    margin: 1% 1.2% 1% 0%;
    padding: 0px;
}

p {
    font-weight: normal;
    font-size: 1rem;
    margin: 1.5% 2% 2% 0%;
    padding: 0;
    display: block;
}

.text4 {    /* SAMMA SOM H4 - fast inte rubrik */
    font-weight: normal;
    font-size: 0.9rem;
    margin: 1.5% 2% 1.5% 0%;
    padding: 0px;
}

.text5 { /* SAMMA SOM H5 - fast inte rubrik */
    font-weight: normal;
    font-size: 0.7rem;
    margin: 1.2% 1.8% 1.2% 0%;
    padding: 0px;
}

.text6 { /* En lite mindre text, samma strl som h6 */
    font-weight: normal;
    font-size: 0.5rem;
    margin: 1.0% 1.2% 1.0% 1.2%;
    padding: 0px;
}

.a_blue {     /* ANVÄND CLASS="a_blue" FÖR EN LJUSBLÅ LÄNK-FÄRG*/
    font-weight: bold;
    text-decoration: none;
    color: #2ba6d4;
    padding: 0px;
    margin: 0px;
}


a {
    font-weight: bold;
    text-decoration: none;
    color: black;
    padding: 0px;  
    margin: 0px;     
}




/* GAMLA SPAN-KLASSER för text-format, som jag styrt upp så de motsvarar de nya */
.vanlig_rubrik_10 /* Ska vara samma som H1 */ {
    font-weight: bold;
    font-size: 1.6rem; /*  3vmin 2.5vw 1.6rem  5.9vw */
    margin: 3% 0% 3% 0%;
    padding: 0px;
    display: block;
    float: left;
    clear: both;
}

    .vanlig_fet_8 	/* Ska vara samma som H2 */
    {
        font-weight: bold;
        font-size: 1.2rem ; /* 2vmin 1.5vw  1.25rem  3.0vh */;        
        margin: 2% 0% 2% 0%;
        padding: 0px;

        display: block;
        float: left;
        clear: both;
    }

    .vanlig_8 	/* Ska vara samma som H3*/
    {       
        font-weight: normal;
        font-size: 1rem; /*2vmin*/        
        margin: 1.5% 0% 1.5% 0%;
        padding: 0px;

        display: block;
        float: left;
        clear: both;
    }

  /*Tabelltexter :*/

   .tabell_rubrik_8  /* Ska vara samma som H2 */
    {
       font-weight: bold; 
       font-size: 1.1rem; /* 2.2vmin 2.0vw 3.0vh;*/        
        margin: 2% 0% 2% 0%;
        padding: 0px;
    }

    .tabell_text_fet 	/* Ska vara samma som H3 fast BOLD */
    {
        font-weight: bold;
        font-size: 1rem; /* 2vmin; */        
        margin: 2% 0% 2% 0%;
        padding: 0px;
    }

    .tabell_text 	/* Ska vara samma som H3*/
    {       
        font-weight: normal;
        font-size: 1rem; /* 2vmin; */                
        margin: 0% 0% 0% 0%;  /*top höger botten vänster*/
        padding: 0px; 
    }


    /* ---------------------------------------------*/
    /* ---- FÄRG-SÄTTNINGAR AV OLIKA SLAG --------  */
    /* ---------------------------------------------*/

    .make_div_a_link {  /* GÖR EN HEL DIV TILL LINK ex <a target="_blank" href="https://www.erv.se"><span class="make_div_a_link"></span></a> */
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
        display: block;
    }
    .make_div_a_link:hover {
        background-color: gray;
        opacity: 0.3;
    }

        .rlBgrStyleElements /* Bakgrundfärg på element, som tex knapp till toppen av sidan */ {
            background-color: #ffcc00; /*Den gul-oranga färgen*/
        }

     /* Ändrar bakgrundfärgen när hovrar över med musen över ett a (bara ett enkelt a) */
     
    a:hover
    {   
        background-color: lightgray; /* #efecba;  */
        border: none;
        /*border: 1px solid red;*/
    }

    a img:hover
    {   
        background-color: inherit;
        border: none;
    }
    
    /* Ändrar bakgrundfärgen när hovrar över med musen, gäller ett nestat div som heter "En-Kolumn" inne i ett a som heter "Change_Background_On_Hover" */
    a.Change_Background_On_Hover div.En_kolumn:hover
    {
        background-color: lightgray; /* #efecba;  */
        border: none;
        /* border: 1px solid blue; För test*/
    }



    

    /* --------------------------------------------------*/
    /* STILAR TILL OLIKA ELEMENT, SOM KNAPPAR; SELECT MM */
    /* --------------------------------------------------*/

/* Är en class för att stila till Element så de får ett enhetligt utseende*/
.rlElementStil {
    margin: 0% 2% 0% 0%;        
    padding: 10px; /*var 1% tidigare*/
    font-size: 1.2rem;
    white-space: pre-line;
}

/*Punkt-lista*/
ul {   
    padding: 0px 10px 10px 10px;
    margin: 0px 0px 0px 1.8%;
    list-style-type: disc;
    list-style-position: outside;
    display: block;
}

/* Marginal i lista */
li {    
    margin-bottom: 2%;
}

/*Numrerad lista*/
ol {
    padding: 10px; 
    margin: 0px 0px 10px 2%; 
    list-style-type: decimal;
    list-style-position: outside; 
    display: block;
    font-weight: bold;
}

/*Sätter marginal mellan den olika numrena i listan*/
ol>li {
    margin: 10px;  
}

   
    /* ---------------------------------------------*/
    /* För att bilder ska bli responsiva */
    /* ---------------------------------------------*/
    img, img.scale-with-grid
    {
        outline: 0;
        max-width: 100%;
        height: auto;
        border-style: none;
    }

    .div_utan_bakgrund img  /*Lägger en marginal på Gamla Bilder i div_utan_bakgrund + FLYTER VÄNSTER SOM BLOCK*/
    {
        margin: 5px;
        display: block;
        float: left;
        clear: both;
        border-style: none;
    }

/*DEN YTTRE HÅLLAREN FÖR ANNONS 300x250 px */
#reklam_300x250 {
    margin: 0px;
    padding: 0px;
    border: none;
}

/*SÄTTER BRED OCH HÖJD PÅ REKLAMEN SOM ÄR 300x250 PÅ TRADEDOUBLER - vet inte om denna behövs längre */
#reklam_300x250 * img {
    margin: 0px;
    padding: 0px;
    border: none;
    width:300px;
    height:250px;
}

/*DEN SOM HÅLLER SJÄLVA ANNONSEN PÅ 300x250 px*/
#inre_reklam_300_250 {
    width: 300px;
    height: 250px;
    margin: 0 auto; /*centrerar*/
    padding: 0px;
    background-image: url('images/img_reklam_filter.gif');  /*Denns bakgrund syns när man har ett reklam-filter aktiverat*/
    background-repeat: no-repeat;
}

/* Ligger längst till HÖGER, MEN text kan ligga på insidan till VÄNSTER*/
.Bild_Flyt_Hoger  {
    float: right;
    clear: right;
    padding-left: 10%;
    margin-top: 2%;
    margin-right: 2%;
    margin-bottom: inherit;
    margin-left: inherit;
}

/* Ligger längst till vänster, samt RENSAR så INGET ligger bredvid till höger*/
.Bild_Flyt_Vanster {
    float: none;
    clear: both;
    padding: 0px;
    margin-top: 2%;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: auto;
}    







/* ------------------------------------------------------------------------------------------------------------------------------*/
/* NYA css FÖR inkl_TOP MED MENY, SÖK OCH DROPDOWN osv */
/* ------------------------------------------------------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------*/
/* MENY + NAVIGERINGS RADER:*/
/*-----------------------------------------------------------------------------------*/
/*Topp-raderna som håller topnav1 + 2, vid max upplösning*/
#top_line_one {
    width: 100%;
    height: 54px; /*Lite högre än nr2 pga linjen*/
    padding: 0px;
    margin: 0px;
}
#top_line_two {
    width: 100%;
    height: 53px;
    padding: 0px;
    margin: 0px;
}

/*Sätter gul linje i nederkant Navigering 1*/
#top_line_one {
    border-bottom: 1px solid #ffcc00;
}

/*Navigering rad 1 */
.topnav1 {
    height: 54px; /*Lite högre än nr2 pga linjen*/
    width: 100%;
    max-width: 1130px;
    margin: 0 auto; /*centrerar dom*/
    padding: 0px;
    overflow: hidden;
    background-color: #333;
}
/*Navigering rad 2*/
.topnav2 {
    height: 53px; 
    width: 100%;
    max-width: 1130px;
    margin: 0 auto; /*centrerar dom*/
    padding: 0px;
    overflow: hidden;
    background-color: #333;
}

/*Länkarna i Navigering 2: */
.topnav2 a {
    font-size: 17px; /*0.8em;*/
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 12px 16px 17px 16px;
    text-decoration: none;
}
.topnav2 a:hover {
    background-color: #ddd;
    color: black;
}
/*Sätter en accentfärg på den som man sätter som class=active_top_menu*/
a.active_top_menu {
    background-color: #ffcc00;
    color: black;
}
/* slut länkar Navigering 2*/


/*SÖK TEXT-RUTAN:*/
#top_search_textbox {
    display: block;
    float: right;
}

#top_search_ikon {
    display: none;
    float: right;
    height: 35px;
    width: 35px;
}

.topnav1 .search-container {
    float: right;
}

.topnav1 input[type=text] {
    padding: 6px;
    margin-top: 10px;
    font-size: 17px;
    border: none;
}

.topnav1 .search-container button {
    float: right;
    padding: 6px;
    margin-top: 10px;
    margin-right: 8px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
}

.topnav1 .search-container button:hover {
    background: #ccc;
}

#top_text_input_searchbox_full:focus { /* TAR BORT FOCUS-FÄRGEN SOM BLIR RUNT SÖKRUTAN NÄR I FOKUS */
    outline: none;
}

#top_text_input_searchbox:focus { /* TAR BORT FOCUS-FÄRGEN SOM BLIR RUNT SÖKRUTAN NÄR I FOKUS - den lilla som man klickar fram via ikonen */
    outline: none;
}

/*slut SÖK TEXT-RUTAN:*/


/*IMAGES*/
#image_top_login {
    height: 30px;
    width: 30px;
    padding: 0;
    margin: 0;
}

#reseledaren_loggon {
    height: 42px;
    width: auto;
    padding: 7px 15px 10px 5px;
}
/*Hållaren för login-ikonen*/
#container_login_ikon {
    display: none;
}
/*Hamburger-bilden*/
.img_hambuger_ikon {
    width: 50px;
    height: 39px;
    cursor: pointer;
    border: none;
    padding: 0px 0px; /*Gör en linje runt hamburgaren vid hover+focus*/
    margin: 6px 0 0 0;
}
/*Diven som håller både hamburgaren och dropdown-diven*/
.dropdown {
    float: right;
    overflow: hidden;
    border: 0px solid green;
}
    /*Hover och focus hamburger menyn*/
    .dropdown:hover .img_hambuger_ikon, .img_hambuger_ikon:focus {
        background-color: #ccc;
    }
/*Krysset som kommer fram när man öppnar sök-rutan vis små skärmar*/
#img_search_top_kryss {
    display: none;
    height: 28px;
    width: 28px;
}


/*Sök-boxen vid små skärmar*/
.open-search-box {
    width: 260px;
    display: none;
    position: absolute;
    background-color: #ffcc00;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    z-index: 301;
    margin-left: -250px;
    margin-top: 17px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/*Själva drop-down-menyn: */
.dropdown-content {
    width: 300px;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    z-index: 300;
    margin-left: -256px;
    margin-top: 7px;
}
    /*Länkarna i dropdown-menyn*/
    .dropdown-content a {
        font-size: 21px;
        padding: 16px 16px;
        float: none;
        color: black;
        padding: 14px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
        /*Hover över Länkarna i dropdown-menyn*/
        .dropdown-content a:hover {
            background-color: #ddd;
        }
/*Togglas på dropdown-diven så den syns eller inte syns*/
.show {
    display: block;
}
/* slut MENY + NAVIGERINGS RADER:*/
/*-----------------------------------------------------------------------------------*/




/*-----------------------------------------------------------------------------------*/
/*NEDRÄKNAREN + INLOGG*/
/*-----------------------------------------------------------------------------------*/
#div_countdown_yttre {
    width: 100%;
    position: static;
    display: block;
    float: none;
    clear: both;
    text-align: center;
    padding: 0px;
    margin: 0px auto;
    border: 0px solid red;
}

#div_countdown_centered {
    width: 280px;
    height: 84px;
    padding: 0px;
    margin: 0px auto;
    border: 0px solid yellow;
}
/*Bredden på diven med inlogg + nedräkning, ska vara samma som själva kroppen hela tiden*/
#div_inloggad_and_countdown {
    width: 1120px;
    display: block;
    position: relative; /*Måste vara relative om absolute ska funka i nästa div*/
    padding: 0px;
    margin: 0 auto; /*Centrerar diven med auto*/
    box-sizing: border-box;
}
/*Textutseendet för dag och tid i nedräknaren*/
.text_countdown_time_and_day {
    font-family: arial;
    font-style: italic;
    font-size: 33px;
    color: white;
}
/*Hållaren för dagen*/
.div_countdown_day {
    margin-top: 10px;
    margin-left: 12px;
    width: 30%;
    display: block;
    float: left;
    clear: none;
    text-align: center;
    border: 0px solid yellow;
}
/*Hållaren för tiden*/
.div_countdown_time {
    margin-top: 10px;
    width: 62%;
    display: block;
    float: left;
    clear: none;
    text-align: center;
    border: 0px solid red;
}
/*slut nedräknaren + inlogg*/
/*------------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------*/
/*RESPONSIVE*/
/*-----------------------------------------------------------------------------------*/
/*Under bredd 1480:*/
/*-----------------*/
@media screen and (max-width: 1480px) {

    /*Bredden på diven med inlogg + nedräkning, ska vara samma som själva kroppen*/
    #div_inloggad_and_countdown {
        width: 800px;
    }

    /*Minskar texten aningen och paddingen i horizontella menyn*/
    .topnav2 a {
        font-size: 15px; /*0.8em;*/
        padding: 12px 16px 17px 16px;
    }
    /*Sätter bredden på bägge navigeringarna*/
    .topnav1, .topnav2 {
        max-width: 800px;
    }

    /*Ändrar höjden lite på Navigering 1*/
    #top_line_one, #myTopnav1 {
        height: 50px;
    }
    /*Ändrar höjden lite på Navigering 2*/
    #top_line_two, #myTopnav2 {
        height: 50px;
    }

    /*Minskar storleken lite på loggon*/
    #reseledaren_loggon {
        height: 36px;
        width: auto;
        padding: 8px 15px 10px 5px;
    }

    /*Minskar sökrutan lite*/
    .topnav1 .search-container button {
        padding: 6px;
        margin-top: 11px;
        margin-right: 8px;
        font-size: 14px;
    }
    .topnav1 input[type=text] {
        padding: 6px;
        margin-top: 11px;
        font-size: 14px;
    }

    
    /*Minskar och flyttar hamburger lite*/
    .img_hambuger_ikon {
        width: 45px;
        height: 35px;
        margin: 7px 0 0 0;
    }

    /*Minskar dropdown-innehållet lite*/
    .dropdown-content a {
        font-size: 18px;
        padding: 14px 16px;
    }
    /*Minskar bredden och position på dropdownmenyn lite*/
    .dropdown-content {
        width: 260px;
        margin-left: -216px;
    }

    /*Elkontakter:*/
    .fast_div_240px {
        width: 48%;
        height: 300px;
    }
}

/*Under 1000px:*/
/*--------------*/
@media screen and (max-width: 1000px) {

    /*Minskar texten aningen i vertivala menyn*/
    .topnav2 a {
        font-size: 13px; /*0.8em;*/
        padding: 12px 16px 17px 16px;
    }

    /*Ändrar höjden lite på Navigering 1*/
    #top_line_one, #myTopnav1 {
        height: 46px;
    }
    /*Ändrar höjden lite på Navigering 2*/
    #top_line_two, #myTopnav2 {
        height: 45px;
    }

    /*Minskar storleken lite på loggon*/
    #reseledaren_loggon {
        height: 35px;
        width: auto;
        padding: 6px 15px 10px 5px;
    }

    /*Minskar sökrutan lite*/
    .topnav1 .search-container button {
        padding: 6px;
        margin-top: 10px;
        margin-right: 8px;
        font-size: 12px;
    }

    .topnav1 input[type=text] {
        padding: 6px;
        margin-top: 10px;
        font-size: 12px;
    }

    /*Minskar och flyttar hamburger lite*/
    .img_hambuger_ikon {
        width: 40px;
        height: 31px;
        margin: 7px 0 0 0;
    }
    /*Minskar dropdown-innehållet lite*/
    .dropdown-content a {
        font-size: 16px;
        padding: 12px 16px;
    }
    /*Minskar bredden på dropdownmenyn lite*/
    .dropdown-content {
        width: 210px;
        margin-left: -176px;
    }
    /*Elkontakter:*/
    .fast_div_240px {
        width: 48%;
        height: 280px;
    }

/*Under 820px*/
@media screen and (max-width: 820px) {

    /*Bredden på diven med inlogg + nedräkning, ska vara samma som själva kroppen*/
    #div_inloggad_and_countdown {
        width: 100%;
    }

    .fast_div_240px {
        width: 96%;
        height: 300px;
    }
}

/*Om skärmen blir ÖVER 600 så döljer jag sök-pop-up-rutan, annars blir den konstig om den är öppen och man ändrar upplösningen samtidigt*/
@media screen and (min-width: 600px) {
    .open-search-box {
        display: none;
    }
}

/*Under 600px:*/
@media screen and (max-width: 600px) {

    /*Ändrar höjden lite på Navigering 1*/
    #top_line_one, #myTopnav1 {
        height: 45px;
    }
    /*Ändrar höjden lite på Navigering 2*/
    #top_line_two, #myTopnav2 {
        height: 44px;
    }

    /*Ändrar storleken lite på loggon*/
    #reseledaren_loggon {
        height: 32px;
        width: auto;
        padding: 8px 15px 10px 5px;
    }
    /*Flyttar upp verticala menyn text lite*/
    .topnav2 a {
        padding: 11px 16px 17px 16px;
    }

    /*Döljer text-sökrutan:*/
    #top_search_textbox {
        display: none;
    }
    /*Tar fram sök-ikonen*/
    #top_search_ikon {
        height: 28px;
        width: 28px;
        display: block;
        margin-top: 9px;
        margin-right: 10px;
        padding: 0px;
    }
    /*Sökrutan som syns vid toggle på sökikonen*/
    .topnav1 input[type=text] {
        padding: 6px;
        margin-top: 7px;
        margin-bottom: 7px;
        font-size: 14px;
        width: 200px;
    }

    .topnav1 .search-container button {
        padding: 6px;
        margin-top: 7px;
        margin-right: 6px;
        margin-bottom: 7px;
        font-size: 14px;
    }

    #container_login_ikon {
        display: block;
    }

    #container_login_text {
        display: none;
    }

    /*Minskar hamburger lite*/
    .img_hambuger_ikon {
        width: 37px;
        height: 29px;
        margin: 7px 0 0 0;
    }

    /*Sätter an maxbredd på resmålsnamnet i nedräknaren*/
    #p_resmal {
        max-width: 220px;
    }
}


/* ------------------------------------------------------------------------------------------------------------------------------*/
/* NYA css FÖR inkl_TOP MED MENY, SÖK OCH DROPDOWN osv */
/* ------------------------------------------------------------------------------------------------------------------------------*/