/*****************************************************************************
 * CSS för variationsväljare till sidmallen, golvets/trävarans egen sida.
 * Här visar vi variationerna vertikalt med cirkulära tumnagelbilder och en
 * textrubrik.
 */

.hyvlat-singel,
.golv-singel {
    --thm-size: 46px;
    --border-size: 3px;
    --gap-size: 0px;
}

.hyvlat-singel .hyvlat-variationer,
.golv-singel .golv-variationer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: var(--gap-size);
}

.hyvlat-singel .hyvlat-variationer li,
.golv-singel .golv-variationer li {
    display: flex;
    flex-direction: row;
    color: black;
    cursor: pointer;
    font-size: 1.2em;
}

.hyvlat-singel .hyvlat-variationer .variation-bild,
.golv-singel .golv-variationer .variation-bild {
    height: var(--thm-size);
    width: var(--thm-size);
    border: var(--border-size) solid white;
    border-radius: 50%;
    background-size: cover;
}

.hyvlat-singel .hyvlat-variationer .variation-ytbehandling,
.golv-singel .golv-variationer .variation-ytbehandling {
    height: var(--thm-size);
    line-height: var(--thm-size);
    padding-left: 10px;
    flex-grow: 1;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.hyvlat-singel .hyvlat-variationer .variation-ytbehandling .variation-traslag {
    font-size: 0.9rem;
    color: #666;
    margin-left: 5px;
}

.hyvlat-singel .hyvlat-variationer li:hover .variation-bild,
.hyvlat-singel .hyvlat-variationer li.active .variation-bild,
.golv-singel .golv-variationer li:hover .variation-bild,
.golv-singel .golv-variationer li.active .variation-bild {
    border-color: #ffffff80;
}

.hyvlat-singel .hyvlat-variationer li.active .variation-ytbehandling,
.golv-singel .golv-variationer li.active .variation-ytbehandling {
    border-bottom-color: var(--e-global-color-370e4f6);
}

.hyvlat-singel .hyvlat-variationer li:hover .variation-ytbehandling,
.golv-singel .golv-variationer li:hover .variation-ytbehandling {
    border-bottom-color: var(--e-global-color-secondary);
}


/*****************************************************************************
 * Listan <ul> över tillgängliga dimensioner i sidmallen för golv
 */

#golv-dimensioner {
    padding-left: 0;
    list-style-type: none;
    font-family: "ApexNew", sans-serif;
    font-size: 1.333rem;
    font-weight: 300;
}

.dimensioner-rubrik h3 > span {
    font-size: 0.9rem;
    padding-left: 0.3em;
}

/*****************************************************************************
 * Tabellen över tillgängliga dimensioner i sidmallen för hyvlat och
 * tabellen med dokumentation
 */

table#hyvlat-dimensioner,
table#hyvlat-dokumentation {
    width: 100%;
}

table#hyvlat-dimensioner tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th,
table#hyvlat-dokumentation tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
    /*background-color: transparent;*/
}

table#hyvlat-dokumentation td.transparent {
    background-color: transparent !important;
}

table#hyvlat-dimensioner tr:hover,
table#hyvlat-dokumentation tr:hover {
    background-color: #F4F4F4;
}

table#hyvlat-dimensioner td {
    border: none;
    padding: 0 30px 0 0;
    vertical-align: top;
    font-size: 1rem;
}

table#hyvlat-dokumentation td {
    border: none;
    padding: 0;
    vertical-align: middle;
    font-size: 1rem;
}

table#hyvlat-dimensioner td:last-child,
table#hyvlat-dokumentation td:last-child {
    padding-right: 5px;
}

table#hyvlat-dimensioner td:not(:first-child) {
    padding-top: 0.3rem;
}

table#hyvlat-dokumentation td:first-child {
    width: 100%;
}

table#hyvlat-dokumentation td {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

table#hyvlat-dimensioner .dimension {
    font-family: "ApexNew", sans-serif;
    font-size: 1.333rem;
    font-weight: 300;
    white-space: nowrap;
}

#hyvlat-dimensioner .nowrap {
    white-space: nowrap;
}

table#hyvlat-dokumentation .dokument-url {
    white-space: nowrap;
    padding-left: 1em;
    width: 50px;
}

table#hyvlat-dokumentation .dokument-url i.fa {
    padding-right: 5px;
}

table#hyvlat-dokumentation .dokument-url-en {
    padding-right: 5px;
}


#hyvlat-dimensioner .profilritning {
    text-align: right;
}

#hyvlat-dimensioner .profilritning i {
    margin-left: 5px;
}

#hyvlat-dimensioner .hyvlat-info {
    vertical-align: super;
    margin-left: 3px;
    color: var(--e-global-color-primary);
    position: relative;
}

#hyvlat-dimensioner .hyvlat-info:hover,
#hyvlat-dimensioner .hyvlat-info:focus {
    color: var(--e-global-color-accent);
}

#hyvlat-dimensioner [data-tooltip]:focus::after,
#hyvlat-dimensioner [data-tooltip]:hover::after {
    font-family: 'ApexNew', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--e-global-color-text);
    display: block;
    width: 200px;
    position: absolute;
    bottom: 20px;
    right: 0;
    content: attr(data-tooltip);
    background: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
    padding: .5em 1em;
    border-right: 5px solid var(--e-global-color-accent);
    white-space: normal;
}

/*****************************************************************************
 * I tabellerna för dimensioner och dokumentation på sidan hyvlade trävaror
 * anpassar vi etiketterna beroende på skärmstorleken. Vi använder
 * förkortningar på mindre skärmar.
 *
 * Vidare gör vi på mindre skärmar om tabellen med dimensioner till ett
 * vertikalt format i två eller en kolumner.
 */

table#hyvlat-dimensioner .short-label,
table#hyvlat-dokumentation .lang-short {
    display: none;
}

@media (768px <= width <= 860px) /*, (600 <= width <= 640px)*/ {
    table#hyvlat-dimensioner .short-label {
        display: inline;
    }
    table#hyvlat-dimensioner .long-label {
        display: none;
    }
}

@media (768px <= width <= 860px), (width <= 600px) {
    table#hyvlat-dokumentation .lang-short {
        display: inline;
    }
    table#hyvlat-dokumentation .lang-long {
        display: none;
    }
}

@media (max-width: 600px) {
    table#hyvlat-dimensioner tbody {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 50px;
        row-gap: 20px;
    }
    table#hyvlat-dimensioner tr {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        border-left: 5px solid var(--e-global-color-370e4f6);
        padding-left: 1em;
    }
    table#hyvlat-dimensioner tr td {
        display: flex;
        padding-top: 6px;
        min-width: 180px;
        background-color: transparent;
    }
    table#hyvlat-dimensioner tr td:first-child {
        padding-top: 0;
    }
}


/*****************************************************************************
 * Prestandadeklarationerna på produktsidorna för hyvlade trävaror
 */

/* UL-baserad obsolet lista, ersatt av tabell */

ul#hyvlat-dokumentation {
    list-style-type: none;
    padding-left: 0;
}

ul#hyvlat-dokumentation li {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 4px 0;
}

ul#hyvlat-dokumentation li:hover {
    background-color: #F4F4F4;
}

ul#hyvlat-dokumentation .dokument-titel {
    flex-grow: 1;
}

ul#hyvlat-dokumentation .dokument-url {
    white-space: nowrap;
    padding-left: 1em;
}

ul#hyvlat-dokumentation .dokument-url i.fa {
    padding-right: 5px;
}

ul#hyvlat-dokumentation .dokument-url-en {
    padding-right: 5px;
}

/*****************************************************************************
 * Variationsväljare till loop-mallen som används på översiktssidan
 * för DalaFloda golv, "fler golv"-blänkare samt för för översiktssidan för
 * Hyvlade Trävaror.
 *
 * Här visas variationerna horisontellt, och vi visar även stor bild, rubrik
 * och en zoom-funktion.
 */

.golv-loop,
.hyvlat-loop {
    /* Temporary workaround for display bug */
    /* Todo: Fix display bug */
    min-height: 380px;
}

@media (max-width: 768px) {
    .golv-loop,
    .hyvlat-loop  {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}

.golv-loop .golv-bild {
    width: 100%;
    padding-bottom: 100%;
    background-color: var(--e-global-color-06a6c17);
    background-repeat: no-repeat;
    background-size: auto 300%;
    background-position: center center;
    margin-bottom: 10px;
    transition:
        background-image 0.3s,
        background-size 0.3s;
    position: relative;
}

.hyvlat-loop .hyvlat-bild {
    width: 100%;
    padding-bottom: 100%;
    background-color: var(--e-global-color-06a6c17);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 10px;
    position: relative;
}

.golv-loop .golv-bild.zoomed {
    background-size: auto 100%;
}

.golv-loop .golv-bild .ytbehandling {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-weight: 500;
    text-transform: uppercase;
    text-shadow: 1px 1px 5px #00000040;
}

.golv-loop .golv-bild .zoom {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: white;
    opacity: 0;
    transition: opacity 0.2s;
}

.golv-loop .golv-bild:hover .zoom {
    opacity: 1;
}

.golv-loop .golv-variationer,
.hyvlat-loop .hyvlat-variationer {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    --image-size: 30px;
}

.golv-loop .variation-bild,
.hyvlat-loop .variation-bild {
    width: var(--image-size);
    height: var(--image-size);
    border-radius: 50%;
    cursor: pointer;
    background-size: cover;
}

.golv-loop .variation-bild:hover,
.golv-loop .variation-bild:focus,
.hyvlat-loop .variation-bild:hover,
.hyvlat-loop .variation-bild:focus {
    border: 3px solid #ffffff80;
}

.golv-loop .active .variation-bild,
.hyvlat-loop .active .variation-bild {
    border: 3px solid #00000020;
}

.golv-loop .variation-ytbehandling,
.hyvlat-loop .variation-ytbehandling {
    display: none;
}

.golv-loop h3 {
    margin-top: 15px;
    margin-bottom: 0;
}

.hyvlat-loop .hyvlat-namn h3 {
    font-size: 24px;
}


/*****************************************************************************
 * CSS för kalkylatorerna för materialåtgång
 */

.dalafloda-calculator {
    display: flex;
    flex-direction: row;
    column-gap: 15px;
}

.dalafloda-calculator label {
    display: flex;
    flex-direction: column;
    padding-bottom: 15px;
    text-align: center;
    justify-content: flex-end;
}

.dalafloda-calculator select,
.dalafloda-calculator input {
    display: inline-block;
    border-style: none;
    margin-top: 10px;
    font-size: 1.3rem;
    font-weight: 200;
    width: 11em;
    height: 50px;
}

.dalafloda-calculator input:not(.input),
.dalafloda-calculator select:not(.input) {
    background-color: rgba(255,255,255,0.5)
}

@media (max-width: 1024px) {
    .dalafloda-calculator label {
        width: 50%;
    }
    #parquet-calculator label {
        width: 25%;
    }
    .dalafloda-calculator select {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .dalafloda-calculator label,
    #parquet-calculator label {
        width: 50%;
    }
    .dalafloda-calculator select {
        width: 100%;
    }
    #parquet-calculator label:first-child,
    #parquet-calculator label:last-child {
        display: none;
    }
}

@media (max-width: 480px) {
    .dalafloda-calculator {
        flex-direction: column;
    }
    .dalafloda-calculator label,
    #parquet-calculator label {
        display: block;
        width: 100%;
        max-width: 240px;
    }
}

/*****************************************************************************
 * CSS för bildgalleriet för vald variation/ytbehandling
 */

#bild {
    transition: none;
    image-rendering: smooth;
}

#bild:hover::after {
    content: "\f065";
    position: absolute;
    top: 5px;
    right: 10px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    color: white;
}

#galleri {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    gap: 10px;
}

#galleri li {
    display: flex;
    width: calc((100% - 30px) / 4);
    height: 100px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

#galleri.count-2 li {
    height: 120px;
    width: calc((100% - 10px) / 2);
}

#galleri.count-3 li,
#galleri.count-6 li,
#galleri.count-9 li {
    width: calc((100% - 20px) / 3);
}

.variation-stor-bild {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}