﻿body
{
    padding-bottom: 80px;
    font-size: 14px;
    background-image: linear-gradient(to bottom, #dff3e9 0%, #fafafa 100%);
    overflow-y: scroll;
    min-height: calc(100vh - 40px);
}

#nav
{
    background-color: transparent;
    border-bottom-color: transparent;
    transition: background 1s ease 0s;
}

body.scroll #nav
{
    background-color: #dff3e9;
    border-bottom-color: #dff3e9;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.navbar-default, .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:focus
{
    color: #777;
}

    .navbar-default .navbar-nav > li > a:hover
    {
        background-color: #fafafa;
        color: #222;
    }

#btnHelp:hover, #btnLangToggle:hover, #login_link:hover
{
    /* background-color: #e7e7e7; */
    background-color: #fafafa;
    color: #222;
}

.panel-success > .panel-heading
{
    color: #fff;
    border-color: #3d8946;
    background: linear-gradient(#5d9e5c, #3d8946);
}

#mainfeatures
{
    margin-left: -16px;
}

    #mainfeatures h3
    {
        margin-top: 10px;
    }

.panel > .row
{
    margin-right: -16px;
    margin-left: -16px;
}

.panel
{
    border-radius: 12px;
}

.panel-heading
{
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

body.lang-sv .lang::before
{
    content: attr(data-sv);
}

body.lang-en .lang::before
{
    content: attr(data-en);
}

#commonfeatures
{
    margin-bottom: 20px;
}

#offering-row
{
    display: flex;
    flex-direction: column;
    align-items: start;
}

#prices, #offering, #currs
{
    justify-self: auto;
    display: flex;
}

#offering
{
    order: 1;
}

#prices
{
    order: 2;
    margin-top: -10px;
}

#currs
{
    order: 3;
    align-items: center;
    justify-content: space-between;
    width: 242px;
    margin-top: 5px;
    margin-bottom: 10px;
}


@media (min-width: 600px)
{
    #prices, #offering, #currs
    {
        order: initial;
        width: initial;
        display: block;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    #offering-row
    {
        display: grid;
        margin-bottom: -10px;
    }

    #offering
    {
        justify-self: start;
    }

    #prices, #currs
    {
        justify-self: end;
    }

    #currs
    {
        margin-top: -50px;
    }
    
    #prices
    {
        margin-bottom: 10px;
    }
}

@media (min-width: 992px)
{
    #offering-row
    {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    #offering
    {
        margin-left: -116px;
    }

    #prices, #offering, #currs
    {
        justify-self: auto;
    }

    #currs
    {
        margin-top: 0px;
    }
}

#commonfeatures ul
{
    display: inline-block;
}

body.sek.yr .pricetag::before
{
    content: attr(data-sek);
}

body.sek.um .pricetag::before
{
    content: attr(data-sekUM);
}

body.eur.yr .pricetag::before
{
    content: attr(data-eur);
}

body.eur.um .pricetag::before
{
    content: attr(data-eurUM);
}

body.gbp.yr .pricetag::before
{
    content: attr(data-gbp);
}

body.gbp.um .pricetag::before
{
    content: attr(data-gbpUM);
}

body.usd.yr .pricetag::before
{
    content: attr(data-usd);
}

body.usd.um .pricetag::before
{
    content: attr(data-usdUM);
}

h4.first-h4
{
    margin-bottom: 5px;
}

    h4.first-h4 ~ h4
    {
        margin-top: 0px;
        margin-bottom: 5px;
    }

.krumelur
{
    font-size: 50%;
    vertical-align: top;
    margin-left: 5px;
}

.krumelur::after
{
    content: '*)';
}

/*div.bootstrap-select > button
{
    border: none;
    background: transparent;
}*/

#bigpanel .panel-heading
{
    display: flex;
    flex-direction: row;
}

.prod-col
{
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.prod-col a.btn
{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.at-bottom
{
    margin-top: auto;
}