/* Add here all your CSS customizations */




.main p, .main li {
    color: black;
}

    .bg-watch-content {
        background: #000 url(img/bg-tables.jpg) no-repeat top center;
        background-size: 100% auto;
        width: 100%;
        border-radius: 20px;                                   
        padding: 60px;
        height: 350px;

        /* Flexbox för centrering */
        display: flex; /* Aktiverar Flexbox */
        flex-direction: column;
        justify-content: center; /* Horisontell centrering */
        align-items: center; /* Vertikal centrering */
        text-align: center; /* Centrerar textinnehåll */
    }




/* generellt */


   body {
            font-family: 'Source Sans 3';
            font-size: 18px;
            color-scheme: light dark;
        }

        .main p {
            color: #000;
        }
        html.dark .main p {
            color: #fff;
        }

        .dropdown-item {
            font-weight: 500 !important;
            font-size: 16px !important;
        }

        h1 {
            font-weight: 500;
            font-size: 40px;
            margin-bottom: 15px;
        }
        .h1-large {
            font-size: 65px;
            line-height: 1;
        }
        .h2-large {
            font-weight: 400;
        }
        h6 {
            font-weight: 700;
            margin-bottom: 5px;
        }

        .btn-rounded {
            font-size: 18px;
            padding-left: 30px;
            padding-right: 30px;
        }
        .btn-transparent {
            background: transparent;
            border: 1px solid black;
            padding-right: 0px;
            padding-left: 0px;
        }
        .btn-lightred {
            background: #F27059;
            color: white;
        }

        .panel {
            border-radius: 20px;
            padding: 50px;
        }
        .panel-creem-1 {
            background: #E6E0D14f;
        }
        .panel-creem-2 {
            background: #c2b89f4f;
        }
        .panel-pink-1 {
            background: #F6EAEA;
        }
        .panel-pink-2 {
            background: #FFF5F2;
        }
        .panel-pink-3 {
            background: #FFCFC9;
        }
        .panel-grey-1 {
            background: #ededed;
        }
        .panel-purple-1 {
            background: #F9F4FF;
        }
        .panel-green-1 {
            background: #F5F6EA;
        }
        .panel-green-2 {
            background: #dcdfbd;
        }
        .panel-brown-1 {
            background: #FDF4E6;
        }
        .panel-grey-1 {
            background: #F4F4F4;
        }
        .panel-red-1 {
            background: #DE6F6F;
        }
        .panel-purple-2 {
            background: #E5E7F5;
        }                
        .panel-transparent {
            border: 1px solid #C2C1C1;
        }
        .panel-black {
            background: #000;
        }

        /* */
        html.dark .panel-purple-1 { background: #373040; }
        html.dark .panel-green-1 {  background: #b3ba69; }
        html.dark .panel-brown-1 {  background: #403b35; }
        html.dark .panel-grey-1 {   background: #535353; }                
        html.dark .panel-red-1 {    background: #6c3a3a; }

        html.dark .panel-creem-1 {  background: #30363b; }
        html.dark .panel-creem-2 {  background: #404855; }

        html.dark .panel-pink-1 {    background: #6c3a3a; }
        html.dark .panel-pink-2 {    background: #ffcaba; }
        html.dark .panel-pink-3 {    background: #e79489; }

        html.dark .panel-purple-2 {  background: #3b4067; }

        .panel-equal-height {
            display: flex; /* Gör panelerna flexibla */
            flex-direction: column; /* Gör så att innehållet ligger vertikalt */
            justify-content: space-between; /* För att sprida innehållet jämnt *//
            width: 100%; /* Gör panelen 100% av kolumnens bredd */
            box-sizing: border-box; /* Inkludera padding och border i höjd och bredd */                    
            position: relative; /* Positionering för att använda padding-bottom */
            height: 0;
            padding-bottom: 80%; /* Sätter padding för att skapa en kvadrat */
        }

        .panel-equal-height-2 {
            display: flex; /* Gör panelerna flexibla */
            flex-direction: column; /* Gör så att innehållet ligger vertikalt */
            height: 100%;
            padding-bottom: 20%; /* Sätter padding för att skapa en kvadrat */
            text-align: center;
        }

        .panel-content {
            position: absolute; /* Gör innehållet positionerat absolut */
            top: 50%; /* Flytta ner till mitten */
            left: 50%; /* Flytta till mitten */
            transform: translate(-50%, -50%); /* Justera för att centrera */
        }
        .panel-news p, .panel-news h4 {
            color: white;
        }
        .panel-shade::before {
            content: ''; /* Skapa ett tomt innehåll för pseudo-elementet */
            position: absolute; /* Absolut positionering */
            top: 0; /* Positionera från toppen */
            left: 0; /* Positionera från vänster */
            right: 0; /* Täcka till höger */
            bottom: 0; /* Täcka till botten */
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.9) 80%); 
            border-radius: 20px;
            z-index: 0;
        }
        .panel-no-border {
            border: none;
        }

        .btn {
            max-width: fit-content;
        }
        .btn-light {
            color: black !important;
        }
        html.dark .btn-light {
            color: white !important;
        }
        a {
            text-decoration: none;
        }                
        .text-center {
            text-align: center;
        }
        .float-down-right {
            position: absolute;
            bottom: 40px;
            right: 40px;
        }
        
        .bg-beeline {
            background-image: url('img/beeline.png'); /* Ange sökvägen till din bild */
            background-size: cover; /* Gör så att bilden täcker hela raden */
            background-position: center; /* Centrerar bilden */
            background-repeat: no-repeat; /* Förhindrar att bilden upprepas */
            height: 370px; /* Sätt en höjd för raden (justera efter behov) */
            border-radius: 20px;   
            margin: 0;
        }


        .align-bottom {
            position: absolute;
            bottom: 20px; /* Justera texten längst ner */
        }

        .jumbotron {
            max-width: calc( 100% - 10px);
            height: auto;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-position: center center;
            min-height: 300px;
            max-height: 300px;
        }
                        .jumbotron {
            padding: 2rem 1rem;
            margin-bottom: 2rem;
            background-color: #e9ecef;
            border-radius: 20px;
        }

        .annons-info {
            position: absolute;
            top: 15px;
            left: 25px;
            background-color: white;
            color: black;
            font-size: 0.85em;
            font-weight: 600;
            padding: 2px 15px 2px 15px;
            border-radius: 50px;
            border: 1px solid #757578;
        }
        .annons-titel {
            position: relative;
            top: -10px;
            left: 20px;
            font-weight: 600;
        }
        .annons-text {
            position: relative;
            left: 20px;
        }

        html.dark .annons-titel, html.dark .annons-text, html.dark .annons-text > *,  html.dark .text-underline {
            color: white;
        }



        .badge-top {
            position: absolute;
            top: 20px;
            left: 30px;
            background: black;
            border-radius: 15px;
            padding: 0px 12px 0px 12px;
            font-weight: 500;
            font-size: 0.7em;
            color: white;
        }

        .news h4 {
            font-size: 22px;
            line-height: 1.1em;
        }
        .news h3 {
            text-transform: none;
            font-weight: 500;
        }
        .news .panel-content {
            margin-left: -20px;
        }
        .news .panel-equal-height-2 {
            height: 250px;
        }



        .text-rows-1 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box !important;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }



        .fixed-columns {
            display: flex;
            flex-wrap: nowrap;

        }
        .fixed-columns .col {
            flex: 1 0 20%;
            padding-left: 10px;
            padding-right: 10px;
        }
        .fixed-columns .col p {
            padding-top: -10px;
        }
        .counter {
            color: #4a4848;
            font-family: 'DINPro-Regular', Arial, Helvetica, sans-serif !important;
            font-size: 35px;
            color: #000;
        }
        .custom-border-right {
          position: relative;
        }
        .custom-border-right::after {
            content: '';
            position: absolute;
            right: 0;
            top: 40%;
            transform: translateY(-50%);
            width: 1px;
            height: 20px;
            background-color: #B0AEAE;
        }
       html.dark .custom-border-right::after {
        background-color: #373737;
    }


    .bg-counterplate {
        background: #ededed;
    }
    html.dark .bg-counterplate {
        background: #151718;
    }

         @font-face {
         font-family: "DINPro-Regular";
         src: url("https://db.onlinewebfonts.com/t/c9c60c88cb732119e5a9457f2d9cdc53.eot"); /* IE9*/
         src: url("https://db.onlinewebfonts.com/t/c9c60c88cb732119e5a9457f2d9cdc53.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("https://db.onlinewebfonts.com/t/c9c60c88cb732119e5a9457f2d9cdc53.woff2") format("woff2"), /* chrome firefox */
         url("https://db.onlinewebfonts.com/t/c9c60c88cb732119e5a9457f2d9cdc53.woff") format("woff"), /* chrome firefox */
         url("https://db.onlinewebfonts.com/t/c9c60c88cb732119e5a9457f2d9cdc53.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
         url("https://db.onlinewebfonts.com/t/c9c60c88cb732119e5a9457f2d9cdc53.svg#DINPro-Regular") format("svg"); /* iOS 4.1- */
     }


        .section-text {
            position: absolute;
            top: 80px;
            font-size: 0.8em;
            color: black;
        }
        .section-img {
            min-height: 90px;
            max-height: 90px;
        }

        @media (min-width: 1440px) {
            .float-down-right {
                bottom: 20px;    
            }
            .jumbotron {
                min-height: 400px !important;
            }
        }
        @media (max-width: 1440px) {
            .panel-equal-height-2 {                        
                padding-bottom: 25%; /* Sätter padding för att skapa en kvadrat */
            }                    
        }
        @media (max-width: 1200px) {
            .panel-equal-height-2 {                        
                padding-bottom: 55%; /* Sätter padding för att skapa en kvadrat */
            }
            h1 {
                line-height: 1.1em;
            }
            .hide-on-xl {
                display: none;
            }
            .align-bottom {     
                bottom: 0;
                left: 20px;
            }
        }
        @media (max-width: 991px) {
            .panel-equal-height-2 {                        
                padding-bottom: 20%; /* Sätter padding för att skapa en kvadrat */
            }
            .hide-on-xl {
                display:inherit;
            }
            .jumbotron {
                min-height: 280px !important;
            }
             .align-bottom {     
                bottom: 20px;
                left: 40px;
            }
        }     

        @media (max-width: 768px) {
            .custom-border-right::after {                    
                background-color: transparent;
            }
        }

        @media (max-width: 575px) {
             .jumbotron {
                min-height: 480px !important;
            }
             .mt-sm-1 {
                margin-bottom: 5px;
            }
        }           

         @media (max-width: 475px) {
             .h1-large {
                 font-size: 52px;
             }
             .h2-large {
                 font-size: 35px;
             }
            .panel-equal-height-2 {                        
                padding-bottom: 30%; /* Sätter padding för att skapa en kvadrat */
            }
            .float-down-right {                        
                bottom: 20px;
                right: 30px;
            }
             .mb-sm-0 {
                 margin-bottom: 0;
             }
             .btn-rounded {
                 padding-left: 20px;
                 padding-right: 20px;
             }
             .bg-beeline {
                 height: 420px;
             }
             .text-sm-nowrap {
                 white-space: nowrap !important;
             }
             .jumbotron {
                min-height: 350px !important;
            }
            
           
             
        } 


        @media (min-width: 1200px) {
            .row.text-align-vertical {
                display: flex;
                align-items: center; /* Vertikalt centrerar innehållet */
            }
        }

        .text-grey {
            color: darkgrey;
        }
        .fa-small {
            font-size: 0.85em;
        }

        .img-round-left {
            position: absolute;
            top: -50px;
            right: -50px;
            height: 70px;
            width: 70px;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid white;
            background: white;
        }




        /* spinner line configuration */
        input[type=range]::-webkit-slider-thumb {
             height: 2px;
             width:33%;
             background: black;
             cursor: pointer;
             -webkit-appearance: none;
             margin-top: 0px;
             border-radius:10px;
             outline: none;
        }

        input[type=range]:focus::-webkit-slider-thumb {
            outline: none !important);
        }

        input[type=range]::-webkit-slider-runnable-track {
            background: #f1f1f1;
            height: 2px;
        }




   
      .hidden {
            display: none;
        }

        /* scrollbar-segment */
        .tab-content {
            border-radius: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
            background-color: transparent;
            border: none;
            border-top: none;
            padding: unset;
        }
        html.dark .tab-content {
            background-color: transparent;
        }
        
        .float-down-right {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: #fff;
        }
        .float-down-right-transparent {
            background: transparent;
        }

        .shortcut-container {
            display: flex;
            flex-wrap: wrap;
            margin:10px;
        }

        .shortcuts {
            position: relative;
            padding: 15px;
            border-radius: 20px;
            border: 5px solid transparent;
            flex: 1;
            min-width: 200px;
            transition: background 0.3s ease, border 0.3s ease;
        }
        .shortcuts a {
            text-decoration: none;
        }

        .shortcuts:hover {
            background: #f9f9f9;
            border: 1px solid #f1f1f1;
            border: 5px solid transparent;
        }

        html.dark .shortcuts:hover {
            background: #333944;
        }

        .shortcuts:hover::after {
            content: "\e09f"; 
            font-family: "Font Awesome 6 Pro"; 
            font-weight: 300; 
            position: absolute;
            top: 10px; 
            right: 10px; 
            font-size: 16px; 
            color: #333; 

            animation: beat-fade 1s infinite alternate;

        }

        /* CSS-animation för att likna fa-beat-fade */
        @keyframes beat-fade {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(1.2); /* Lite större för beat-effekt */
                opacity: 0.5; /* Fading ut effekten */
            }
        }

        .owl-carousel .item {
            padding-right: 40px;
            bottom: 50%;
        }                                
        .owl-carousel .item img {
            max-height: 50px;
            object-fit:scale-down;
        }

        .text-reverse {color:black;}
        html.dark .text-reverse{color: white;}
        .fa-xs {font-size: 0.6em; font-weight: 700}
        
        
        .header-extra-info {
            position: relative;
            top: 10px;
        }
        
        
        /* Grundläggande inställningar för textklippning */
        .text-rows {
           display: -webkit-box;
           -webkit-line-clamp: 1; /* Standard: visa 1 rad */
           -webkit-box-orient: vertical;
           overflow: hidden;
           text-overflow: ellipsis;
        }

        /* 1 rad text */
        .text-rows-1 {
          -webkit-line-clamp: 1;
        }

        /* 2 rader text */
        .text-rows-2 {
          -webkit-line-clamp: 2;
        }

        /* 3 rader text */
        .text-rows-3 {
          -webkit-line-clamp: 3;
        }
        
         /* 4 rader text */
        .text-rows-4 {
          -webkit-line-clamp: 4;
        }
        










/* meny */
@media (min-width: 992px) {
    #header .header-nav.header-nav-links, #header .header-nav.header-nav{
        margin-left: -30px;
    }
}
#header .header-column .header-extra-info li {
    margin-left: 10px;
}
#header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a.active {
    background: #000;
}

#header .header-nav.header-nav-links nav > ul:not(:hover) > li > a.active {
    color: #b0a1a1;
}
#header .header-nav.header-nav-links nav > ul li:hover > a
{
    color: #575149;
}

#header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a {
    color: #000;
}
#header .header-nav-main nav > ul li a {
   line-height: 25px; 
}


/* stora knappar */
.large-black-button {
    border: 2px solid black;
    border-radius: 50px;
    padding: 7px 20px 7px 20px;
    background: black;
    color: white;
    font-weight: 400;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 5px;
}      
.large-white-button {
    border: 2px solid black;
    border-radius: 50px;
    padding: 7px 20px 7px 20px;
    background: white;
    color: black;
    font-weight: 400;    
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 5px;
}

.large-white-button-transparent {
    border: 2px solid transparent;
    padding: 7px 20px 7px 20px;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 5px;
}


.large-white-button:hover, .large-white-button:focus {
    color: #000;
    background: #ECEBEB;
    text-decoration: none;
}
.large-black-button:hover, .large-black-button:focus {
    color: #fff;
    background: #565656;
    border-color: #565656;
    text-decoration: none;
}

.large-white-button.inactive {
    background: #f7f7f7;
    border-color: #f7f7f7;
    color: #bbb;
}
.large-white-button.inactive:hover {
    filter: brightness(97%);
}

.btn-lightred:hover {
    background: #ba3923;
    color: white;
}

html.dark .btn-dark:hover, html.dark .btn-dark:focus {
    color: #fff !important;
    background: #000;
}
html.dark .btn-light:hover, html.dark .btn-light:focus {
    color: #fff !important;
    background: #000;
}


/* marginal vid flera knappar och rader */
@media (max-width: 768px) {
    a.large-white-button, a.large-black-button {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

/* om vi vill göra knappen 100% bred på liten skärm */
@media (max-width: 576px) {
 a.large-white-buttonx, a.large-black-buttonx {
        display: flex;
    }
}

/*   */

#header .header-nav-main nav > ul > li > a {
    color: #000;
}
#header .header-btn-collapse-nav {
    background: #000; 
}

a.link {
    color: black;
}

a.underline {
    text-decoration: underline;
    font-weight: 600;
}

h4 {
    font-size: 1.6em;
    font-weight: 500;
    letter-spacing: 0.1px;
}


h6 {
    font-size: 1.3em;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1.3em;
}

.image-banner {
    width: 100%;
    height: 330px;
    overflow: hidden;
    object-fit: cover;

}
.image-banner-top {
    display: flex;
    min-height: 290px;                            
}

.img-darkness-5  {
    filter: brightness(80%);
}     

.bg-brown-1 {
    background-color: #F5EEE7;
}
.bg-brown-2 {
    background-color: #EFE7DE;
}
.bg-brown-3 {
    background-color: #D9D2CC;
}



.bg-pink-1 {
    background-color: #EFDEDE;
}   
.bg-pink-2 {
    background-color: #ecd7d7;
} 
.bg-pink-3 {
    background-color: #e4c9c9;
}

.news-body-pink-2 {
    background-color: #E6C2C2;
}
.package-list {
    list-style: none;
    font-size: 0.75em;
    font-weight: 600;
    padding-left: 15px;
}
.list-item::before {
    content: "\f336"; /* FontAwesome kod för "check" ikonen */
    font-family: "Font Awesome 6 Pro"; /* ange rätt typsnittsfamilj */
    padding-right: 15px; /* lägg till lite utrymme mellan ikonen och texten */
}

.play-button {
    position: relative;
    display: inline-block;
}

.play-button::after {
    content: "\f144"; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Font Awesome 6 Pro';
    font-size: 54px;
    color: white;
    pointer-events: none; 
}

h4 p, h6 p {
    color: black;
}


/* stjärna med meddelande */

    .starburst-container .price-container {
            position: absolute;
            left: 2.5rem;
            top: 2rem;
            transform:rotate(-35deg)
        }

        .starburst-container .price-container:after, .starburst-container .price-container:before {
            position: absolute;
            top: 0;
            left: 0;
            content: ""
        }

        .starburst-container .price-container:before {
            transform:rotate(-22.5deg)
        }

        .starburst-container .price-container:after {
            transform:rotate(22.5deg)
        }

        .starburst-container .price-container, .starburst-container .price-container .price, .starburst-container .price-container:after, .starburst-container .price-container:before {
            width: 4.0em;
            height: 4.0em;
            background:#308cce;
        }

        .starburst-container .price-container .price {
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 4.0em;
            transform:rotate(45deg)
        }

        .starburst-container .price-container .price > span {
            position: relative;
            z-index: 10;
            color: #fff;
        }

        .starburst-container .price-container .price > span.big {
            font-weight: 700;
            font-size: 1.55em;
            line-height:.9em
        }

        .starburst-container .price-container .price > span.small {
            font-weight: 600;
            font-size: .775em;
            line-height:1em;
            padding: 3px;
        }

        .starburst-container_action > .button {
            position: relative;
            z-index: 2;
            margin:0
        }

        .starburst-container_text {
            display: flex;
            flex: 0 0 auto;
            flex-direction: column;
            margin-bottom:2rem
        }

        .starburst-container_text > h2 {
            margin-bottom: .25em;
            font-size: 5vw;
            line-height: 1;
            text-transform:uppercase
        }


                  

/* nyheter */
.news-body img.img-fluid {
    object-fit: cover;
    object-position: 50% 50%;
}
.news-body {
    background-color: #F7EDE3;
}
.news-body-text {
    padding: 20px;
}
.new-more {
    color:black;
    text-decoration: underline;
    font-weight: 600;
}

.max-rows-4 {
    position: relative; 
    line-height: 1.5em;
    height: 6em; /* 4 lines */
    overflow: hidden;
    padding-right: 1em; /* Space for fade effect */
}

.max-rows-4::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 0.5em; /* same as line-height */
    background: linear-gradient(to bottom, transparent, #F7EDE3 50%); /* Adjust the color to match the background of your container */
}


/* tar inte tror jag */
 .no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters > [class^="col-"] {
    padding-right: 5px;  /* Minska höger padding */
    padding-left: 5px;   /* Minska vänster padding */
}

/* logotext placering företag */
 .company-section {
    position: absolute;
    float:right;
    right: 5px;
    top: 33px;
    font-weight: 600;
    font-size: 0.8em;
    color:black;
}


/* */
.img-thumbnail .zoom {
    background: black;
}

.list li {
    color: black;
}
.list.list-ordened.list-ordened-style-3 li:before {
    background-color: #0f0f0f;
    font-size: 0.8em;
}


html .text-color-primary,
html .text-primary {
	color: #3a3838 !important;
}

/* stängknapp på popup youtube */
.mfp-close, .mfp-close-btn-in .mfp-close {
    border-radius: 50px;
    background: white;
}
.mfp-iframe-holder .mfp-close {
    right: 0px;
    text-align: center;
    padding-right: 0px;
    width: 2em;
}