/*
 * EPO Extra Product Options styling.
*/

/*
Konfigurator-Text-Keine-H1
13.10.2021 Philipp
*/
#konfigurator .konfigurator-produktseite p,
#configurator .konfigurator-produktseite p{
    color: #00aaff;
    font-size: 32px;
    font-family: univia-pro, sans-serif;
    font-weight: 600;
    font-style: normal;
}

/*Abstand Konfigurator zur Lieferzeitangabe*/
.tc-extra-product-options{
    margin-top: 1.5em;
}

/*Gesamtpreisgröße*/
.price.amount.final{
    font-size: 22px !important;
}

/*Preis der einzelnen Konfigurationsmöglichkeiten nicht "bold"*/
.tm-extra-product-options .price.tc-price .amount{
    font-weight: 300 !important;
}

/*Hintergrund für zB:RJ45  Network Connector*/
.tm-extra-product-options .tm-epo-element-label{
    padding: 8px;
    background: #F0F0F0;
    font-family: 'univia-pro', sans-serif;
}

/*31.08.2021 Philipp
Farbe Radio & Checkbox Grau, kleiner*/
.tm-extra-product-options .tm-epo-field.tmcp-checkbox,
.tm-extra-product-options .tm-epo-field.tmcp-radio{
    width: 25px;
    filter: grayscale(1);
}

/*31.08.2021 Philipp
Required Sternchen in racknex blau und mehr abstand rechts*/
.tm-epo-required{
    margin-right: .3em;
    color: #0af;
}

/*30.08.2021 Philipp
Tooltip in racknex blau*/
.tc-tooltip{
    color: #0af;
}

/*
27.08.2021 Philipp
Ausen Border margin auf 0 Konfigurator*/
.tm-collapse{
    padding: 15px;
}

/*
15.09.2021 Philipp
Arrow bei Dropdown Konfigurator D+M*/
.tm-arrow{
    font-size: 20px;
    height: 2em;
    width: 2em;
    right: 0;
}

@media only screen and (max-width: 767px){

    .tm-arrow{
        font-size: 16px;
        height: 1.5em;
        width: 1.5em;
    }

}

/*Lightbox Wrap Position Rechts unten
21.09.2021 Philipp*/
.tc-lightbox-wrap{
    right: 4px;
    bottom: 1px;
    align-content: center;
    background: #fff;
    border: none;
}

/*Lightbox Styling
21.09.2021 Philipp*/
.tc-lightbox-button{
    background: transparent;
    color: #00aaff !important;
    font-size: 0.8em !important;
    opacity: 0.5;
    left: 4px;
}

/*Lightbox Styling FIX
06.10.2021 Philipp*/
.tcfa,
.tcfas{
    font-weight: 900 !important;
}

/*Columns der Konfiguratoren zentriert
21.09.2021 Philipp*/
.tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap label,
.tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio li.tmcp-field-wrap label{
    margin-left: 0;
}

/*Text start anfang Produktbild
21.09.2021 Philipp*/
.radio-image-label-inline,
.checkbox-image-label-inline{
    display: inline;
    margin: 0;
}

/* 
Philipp 27.11.2021
Konfigurator im neuem Style (länger) Mobile
*/
@media only screen and (max-width: 960px){

    .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap .tm-label,
    .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio li.tmcp-field-wrap .tm-label,
    .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-variations li.tmcp-field-wrap .tm-label,
    .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-product li.tmcp-field-wrap.tc-epo-element-product-radio .tm-label{
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1.3em !important;
        display: flex !important;
    }
        
    .tc-extra-product-options .tmcp-field-wrap label,
    .tm-epo-variation-section .tmhexcolorimage-li-nowh label,
    .tm-epo-variation-section .tmhexcolorimage-li label{
        padding: 0;
        display: block !important;
        float: none;
        max-width: 100%;
        width: auto;
        overflow-wrap: break-word;
    }
    
    .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap .tm-label,
    .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio li.tmcp-field-wrap .tm-label,
    .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-variations li.tmcp-field-wrap .tm-label,
    .tm-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-product li.tmcp-field-wrap.tc-epo-element-product-radio .tm-label{
        padding: 0 0 0 0em !important;
        margin: 0px !important;
        line-height: 1.3 !important;
        display: inline-block !important; /* inline */
        vertical-align: text-top !important;
    
    }

}

/*04.04.2022 Philipp
TM Extra Product options img fix after V6.0*/
.tm-extra-product-options ul.tmcp-elements li.tmcp-field-wrap.tc-mode-startimages .checkbox-image,
.tm-extra-product-options ul.tmcp-elements li.tmcp-field-wrap.tc-mode-endimages .checkbox-image,
.tm-extra-product-options ul.tmcp-elements li.tmcp-field-wrap.tc-mode-startimages .radio-image,
.tm-extra-product-options ul.tmcp-elements li.tmcp-field-wrap.tc-mode-endimages .radio-image{
    max-height: 100% !important;
}

.tc-extra-product-options input.use_images,
.tm-extra-product-options input.use_images{
    display: inline-block !important;
}

.tm-extra-product-options ul.tmcp-ul-wrap.tc-images-container li.tmcp-field-wrap{
    justify-content: flex-start;
}

.tm-extra-product-options .tm-collapse .tm-section-label,
.tm-collapse .tc-epo-label.tm-section-label{
    background-color: #eee
}

.tm-extra-product-options .tm-collapse .tm-section-label:hover,
.tm-collapse .tc-epo-label.tm-section-label:hover{
    background-color: #9df;
    color: #fff;
}

/*
18.05.2022 Philipp
Image fix nach Update 6.0.3
*/
.tm-extra-product-options ul.tmcp-elements li.tmcp-field-wrap.tc-mode-startimages .tc-label-wrap{
    align-items: flex-start;
    flex-direction: column;
    margin-top: 5px;
}

.tm-extra-product-options ul.tmcp-elements li.tmcp-field-wrap.tc-mode-startimages .tm-epo-field-label{
    flex-direction: column;
    align-items: flex-start;
}

/*
17.01.2023 Philipp
Heading, Price fix nach Update 6.2
*/
.tm-extra-product-options .tm-collapse .tm-section-label,
.tm-extra-product-options .tm-collapse .tc-epo-label.tm-section-label{
    padding: 8px;
}

.tc-extra-product-options .tmcp-field-wrap .price.tc-price .amount{
    font-size: 15px !important;
}

.tc-price-wrap{
    align-self: normal;
    display: block;
}

/*
20.03.2023 Philipp
padding von  Dividertyp "Padding" angepasst
*/
.tm-extra-product-options .tm_padding{
    display: none;
}

.tm-extra-product-options ul.tmcp-ul-wrap.tm-element-ul-radio li.tmcp-field-wrap{
    padding: calc(0.1 * var(--tcgap));
}

#top #main select.tmcp-select {
    width: 100%;
    background-color: #fff;
}

/*
11.04.2023 Preis fix image bulletpoint
*/
.tm-extra-product-options ul.tmcp-ul-wrap.tc-images-container li.tmcp-field-wrap.tc-mode-startimages{
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

/*
07.12.2023 Image fix after 6.4 Update
*/
img.tc-image.radio-image.tc-image-inline.tc-left.tc-lightbox-image.tcinit,
picture.tc-image.radio-image.tc-image-inline.tc-left.tc-lightbox-image.tcinit,
img.tc-image.checkbox-image.tc-image-inline.tc-left.tc-lightbox-image.tcinit,
picture.tc-image.checkbox-image.tc-image-inline.tc-left.tc-lightbox-image.tcinit{
    width: 100%;
    height: auto;
    display: block;
}

.fullwidth-ul .tc-label-inner .tc-price-wrap{
    justify-self: auto;
}

.radio-image-label-inline span.tc-label-inner.tcwidth.tcwidth-100,
.checkbox-image-label-inline span.tc-label-inner.tcwidth.tcwidth-100{
    display: inline-block;
}

span.tc-label-text{
    display: inline;
}

.radio-image-label-inline .tc-label-text ~ i.tm-tooltip,
.checkbox-image-label-inline .tc-label-text ~ i.tm-tooltip{
    margin-left: 4px;
}

@media only screen and (max-width: 1550px) {

    span.tc-label-inner.tcwidth.tcwidth-100,
    .fullwidth-ul .tc-label-inner:not(.tc-mode-text .tc-label-inner){
        display: inline-block;
    }

    .tc-label-text ~ i.tm-tooltip{
        margin-left: 4px;
    }

}

.tm-extra-product-options ul.tmcp-elements li.tmcp-field-wrap.tc-mode-startcolor .tc-epo-style-wrapper,
.tm-extra-product-options ul.tmcp-elements li.tmcp-field-wrap.tc-mode-startcolor .tc-input-wrap,
.tm-extra-product-options ul.tmcp-elements li.tmcp-field-wrap.tc-mode-endcolor .tc-epo-style-wrapper,
.tm-extra-product-options ul.tmcp-elements li.tmcp-field-wrap.tc-mode-endcolor .tc-input-wrap,
.tm-extra-product-options ul.tmcp-elements li.tmcp-field-wrap.tc-mode-startimages .tc-epo-style-wrapper,
.tm-extra-product-options ul.tmcp-elements li.tmcp-field-wrap.tc-mode-startimages .tc-input-wrap,
.tm-extra-product-options ul.tmcp-elements li.tmcp-field-wrap.tc-mode-endimages .tc-epo-style-wrapper,
.tm-extra-product-options ul.tmcp-elements li.tmcp-field-wrap.tc-mode-endimages .tc-input-wrap{
    display: block;
}

/*Fix after Update 6.4.2 */
.tm-collapse-wrap{
    padding: calc(var(--tcgap)) 0;
}

.tm-extra-product-options .tmcp-field-wrap.tc-active.shadow.tc-mode-text,
.tm-extra-product-options .tmcp-field-wrap.tc-active.shadow .tc-label-wrap .tc-image{
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.2);
    box-shadow: 0 0 15px rgba(0,0,0,.2);
}

/*Fix after Update 6.5 */
#top span.price.tc-price span.woocommerce-Price-currencySymbol{
    font-size: 15px;
    font-weight: 300;
}

#top span.price.tc-price small{
    font-weight: 300;
}

#top .tc-element-inner-wrap{
    padding-top: 15px;
}