/* define icon font */

/*@font-face {
    font-family: "Web Icons";
    src: url("http://mp-app.kd.jabmedia.de/content/theme/forge/theme/global/fonts/web-icons/web-icons.woff2?v=0.2.3") format('woff');
}*/


.konfig-container .btn-primary:hover {
    background-color: red;
    border-color: red;
}

.konfig-container .btn-primary {
    background-color: #c3272f;
    border-color: #c3272f;

    background-image: none;
}

.penzl-header {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 24px;
    padding: 12px 0;
    line-height: 1;
    text-transform: uppercase;

    border-bottom: 1px solid #fff;
}

.label-select .title {
    margin-left: 8px;
    font-size: 15px;
    letter-spacing: 0px;

}

.product-menu {
    list-style-type: decimal;
    margin: 0;
    padding: 0;
    display: flex;
}

.product-menu li {
    margin-right: 37px;
    display: list-item;
    list-style-position: inside;
    cursor: pointer;
    font-size: 20px;
}

.active-slide {
    border-bottom: 2px solid #c3272f;
}

.slide-active {
    border: 1px solid #c3272f;

    background-color: #c3272f !important;
}

.product-menu li:hover {
    border-bottom: 2px solid #c3272f;
}

.penzl-bottom-holder .slick-slide {
    border: 1px solid #c3272f;
    margin-right: 3px;
    cursor: pointer;
}

.konfig-container .slider img {
    border: 0px solid transparent;
}

.penzl-bottom-holder .slider h3 {
    position: relative;
    padding: 10px;
    margin: 0 0;
    font-size: 12px;
    line-height: 15px;
    background-color: #000000;
}

.penzl-bottom-holder {
    position: fixed;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    width: 100%;
    padding: 12px;
    z-index: 9;
}

.main-img {
    max-height: 70vh;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}


/* main-slider-holder */

.main-slider-holder {

    margin-bottom: 150px;
    width: 70%; 
    margin-left: auto;
    margin-right: auto;
}

body .slick-slide {
    display: inline-block !important;
    vertical-align: middle;
    float:none;
}

/* Slider Arrows & Dots */

.slick-prev::before, .slick-next::before {
    font: normal normal normal 32px/1 FontAwesome !important;
}

.slick-next::before {
    content: "\f061" !important;
    color: red !important;
}

.slick-prev::before {
    content: "\f060" !important;
    color: red !important;
}


.slick-dots li button::before {
    content: "\f192" !important;
    color: red !important;
    font: normal normal normal 22px/1 FontAwesome !important;
}


/* Mobile Settings for bottm holder */

@media only screen and (max-width: 680px) {
    .product-menu li {
        margin-right: 10px;
        font-size: 15px;
    }
}



.pearls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 22px;
}

.pearl {
    position: relative;
    padding: 0;
    margin: 0;
    text-align: center;
}

.pearl:before, .pearl:after {
    position: absolute;
    top: 18px;
    z-index: 0;
    width: 50%;
    height: 4px;
    content: "";
    background-color: #f3f7f9;
}

.pearl:before {
    left: 0;
}

.pearl:after {
    right: 0;
}

.pearl:first-child:before, .pearl:last-child:after {
    display: none !important;
}

.pearl-number, .pearl-icon {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 32px;
    color: #fff;
    text-align: center;
    background: #ccd5db;
    border-radius: 50%;
    border: 2px solid #ccd5db;
}

.pearl-number {
    font-size: 18px;
}

.pearl-icon {
    font-size: 18px;
}

.pearl-title {
    margin-top: .5em;
    display: block;
    font-size: 16px;
    color: #cc0000;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pearl.current:before, .pearl.current:after, .pearl.active:before, .pearl.active:after {
    background-color: #c3272f;
}

.pearl.current .pearl-number, .pearl.current .pearl-icon, .pearl.active .pearl-number, .pearl.active .pearl-icon {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}

.pearl.disabled {
    pointer-events: none;
    cursor: auto;
}

.pearl.disabled:before, .pearl.disabled:after {
    background-color: #f3f7f9;
}

.pearl.disabled .pearl-number, .pearl.disabled .pearl-icon {
    color: #fff;
    background-color: #ccd5db;
    border-color: #ccd5db;
}

.pearl.error:before {
    background-color: #c3272f;
}

.pearl.error:after {
    background-color: #f3f7f9;
}

.pearl.error .pearl-number, .pearl.error .pearl-icon {
    color: #f96868;
    background-color: #fff;
    border-color: #f96868;
}

.pearl.done:before, .pearl.done:after {
    background-color: #c3272f;
}

.pearl.done .pearl-number, .pearl.done .pearl-icon {
    color: #fff;
    background-color: #c3272f;
    border-color: #c3272f;
}

.pearls-lg .pearl:before, .pearls-lg .pearl:after {
    top: 20px;
}

.pearls-lg .pearl-title {
    font-size: 18px;
}

.pearls-lg .pearl-number, .pearls-lg .pearl-icon {
    width: 40px;
    height: 40px;
    line-height: 36px;
}

.pearls-lg .pearl-icon {
    font-size: 20px;
}

.pearls-lg .pearl-number {
    font-size: 20px;
}

.pearls-sm .pearl:before, .pearls-sm .pearl:after {
    top: 16px;
}

.pearls-sm .pearl-title {
    font-size: 14px;
}

.pearls-sm .pearl-number, .pearls-sm .pearl-icon {
    width: 32px;
    height: 32px;
    line-height: 28px;
}

.pearls-sm .pearl-number {
    font-size: 16px;
}

.pearls-sm .pearl-icon {
    font-size: 14px;
}

.pearls-xs .pearl:before, .pearls-xs .pearl:after {
    top: 12px;
    height: 2px;
}

.pearls-xs .pearl-title {
    font-size: 12px;
}

.pearls-xs .pearl-number, .pearls-xs .pearl-icon {
    width: 24px;
    height: 24px;
    line-height: 20px;
}

.pearls-xs .pearl-number {
    font-size: 12px;
}

.pearl.current .pearl-number, .pearl.current .pearl-icon, .pearl.active .pearl-number, .pearl.active .pearl-icon {
    color: #c3272f;
    border-color: #c3272f;
}



.pearls-xs .pearl-icon {
    font-size: 12px;
}

.pearl.active .pearl-icon {
    background-color: black;
}


/* Mobile Settings for pearls */
@media only screen and (max-width: 680px) {
    .pearl-number, .pearl-icon {
        width: 21px;
        height: 21px;
        line-height: 19px;
    }
    .pearl-icon {
        font-size: 11px;
    }
    
    .pearl-title {
        font-size: 12px;
    }

    .pearl {
        padding: 3px;
    }
}



.img-fluid {
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.img-responsive {
    max-width: 100%;
    height: auto;
}

/* Tooltip text */
.ttip .tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 12px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.ttip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 27%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.ttip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}


.next-step-blocked {
    pointer-events: none;
}

/* radio input style */

/* Als erstes verstecken wir die Standard Form-Elemente */
/*input[type="checkbox"],
input[type="radio"] {
    display: none;
} */

.penzl-radio {
    display: none;
}

/*
Dem Label gebe ich ein Display Block,
damit dieser über die komplette Breite klickbar ist.
*/
label {
    display: block;
    position: relative;
    padding-left: 25px;
    font-size: 15px;
}

/* Der span ist unsere neue Checkbox und den stylen wir wie folgt */
label span.radio-select {
    background: #fff;
    width: 16px;
    height: 16px;
    display: inline-block;
    border: 1px solid #eaeaea;

    /*
    Die Positionierung kann je nach Einsatzgebiet abweichen.
    Ich möchte hier sichergehen das die Checkbox oder Radiobutton immer ob am Textanfang steht,
    falls wir einen mehrzeiligen Text haben, wie es z.B. bei "AGB´s akzeptieren" üblich ist.
    Die könnt ihr aber auch anders lösen.
    */
    position: absolute;
    top: 3px;
    left: 0;

    /* Ein Transition Effekt für den Hover - Checked Status. Dadurch wirkt es etwas animiert. */
    transition: all .2s linear;
}

/* Den Radiobutton runden wir komplett ab */
input[type="radio"] + span.radio-select {
    border-radius: 50%;
}

/* Hover-Effekt */
label:hover span.radio-select {
    border: 1px solid #bbb;
}

/*
Mit dem "+" Selektor können wir das direkt nachfolgende Element
ansprechen, indem Fall unsere Label mit darin enthalten span.
*/
input[type="checkbox"]:checked + span.radio-select,
input[type="radio"]:checked + span.radio-select{
    border: 8px solid #c3272f;
}


.extra-check {
    width: auto !important;
   /* right: 3px; */
    position: absolute;
    padding: 6px;
    background-color: #c3272f;
}

.slick-next {
    right: -60px !important;
}

.slick-prev {
    left: -60px !important;
}


.mercant-submit label {
    padding-top: 11px;
}


@media (max-width: 767px) {
    .pearl-title {
        font-size: .8rem;
    }

    .example-cover {
        width: 130px;
    }

    .config-bottom-nav {
        margin-top: 10px;
    }
}

.address-zipcode {
    width: 49%;
    float: right;
}

.address-town {
    width: 49%;
    float: left;
}