.wera-data { height: 80%; }

.wera-data .wera-content { width:  50vw; margin: 0 auto; background: #e5e5e5; }

.wera-data .wera-content .wera-header{ background: #ee1b25;padding: 30px; }
.wera-data .wera-content .wera-header h3 { font-family: "Hind", Sans-serif; font-weight: 500; font-size: 30px; color: #ffffff; text-transform: uppercase;}
.wera-data .wera-content .wera-header .wera-close {float: right;}
.wera-data .wera-content .wera-header .wera-close:hover { cursor: pointer;}

.wera-data .wera-table input { border-radius: 50px;
    background: #e5e5e5; border-color: #e5e5e5;}


.wera-data .wera-table .search_container {position: relative;}

.wera-data .wera-table .search_container .search-btn{
    font-family: "Font Awesome 5 Free";
    font-size: 25px;
    font-weight: 600;
    color: #fff;
    position: absolute;
    top: -4px;
    right: -17px;
    background: black;
    padding: 5px;
    border-radius: 25px;
    width: 45px;
}
.wera-data .wera-table .search_container .search-btn:before { content:"\f002";  margin-left: 6px;}


.wera-data .wera-content .wera-table.wera-table-header { margin: 0; padding: 0px 60px; border: none; background: #393f46; }
.wera-data .wera-content .wera-table.wera-table-header td { border-color: #393f46; color: #cc212b; vertical-align: middle; font-weight: 700; font-size: 16px;}

.wera-data .wera-content .wera-table.wera-table-body { margin: 0px 60px; border: none; padding-bottom: 0px; padding-top: 0px;  height: 41.5vh; overflow-y: scroll; padding-right: 30px; }
.wera-data .wera-content .wera-table table {}
.wera-data .wera-content .wera-table thead{}
.wera-data .wera-content .wera-table thead tr{}
.wera-data .wera-content .wera-table thead tr td{}

.wera-data .wera-content .wera-table .th-image{width: 5%}
.wera-data .wera-content .wera-table .th-part{width: 19%}
.wera-data .wera-content .wera-table .th-ean{ width: 19%}
.wera-data .wera-content .wera-table .th-pack {width: 10%}
.wera-data .wera-content .wera-table .th-desc{ width: 12%;}
.wera-data .wera-content .wera-table .th-cta{}

.wera-data .wera-content .wera-table tr:hover {position: relative;}
.wera-data .wera-content .wera-table .tb-image img {max-height: 75px;}
.wera-data .wera-content .wera-table .tb-image img:hover {position: absolute;
    background: #ffffff;
    max-height: 175px;
    background: #ffffff;
    left: 0;
    max-width: 200px;
}

.wera-data .wera-content .wera-table .tb-image{width: 5%;padding: 15px 0;}
.wera-data .wera-content .wera-table .tb-part{width: 20%;}
.wera-data .wera-content .wera-table .tb-ean{width: 20%;}
.wera-data .wera-content .wera-table .tb-pack{width: 10%;}
.wera-data .wera-content .wera-table .tb-desc{width: 27%;}
.wera-data .wera-content .wera-table .tb-cta{width: 16%; text-align: right;}


.wera-data .wera-content .wera-table tbody{}
.wera-data .wera-content .wera-table tbody tr{}
.wera-data .wera-content .wera-table tbody tr td{ background: #e5e5e5;  border: none; border-bottom: 3px solid #f2f2f2; font-weight: 500;}
.wera-data .wera-content .wera-table tbody tr td a {color: #ee1b25; font-weight: 700; text-decoration: underline; font-size: 14px;}


.wera-data .wera-content .wera-footer{ background: #e5e5e5; height: 50px; }

.wera-iframe .mfp-iframe-holder .mfp-content{ max-width: 90vw; height: 85vh; width: 90vw; }

.wera-iframe .mfp-content .wera-close { font-family: "Hind", Sans-serif; font-weight: 500; font-size: 30px; color: #ffffff; text-transform: uppercase; position: absolute; top: -3%; right: 0; }
.wera-iframe .mfp-content .wera-close:hover { cursor: pointer;}


/**  LOADER  **/
.loader-loaded #spinner-back, .loader-loaded #spinner-front {    visibility: visible; opacity: 1;}
.loader-loaded .mfp-content {visibility: hidden; opacity: 0;}

.wera-data .wera-content .wera-table .tb-desc .mobile { display: none;}

@media screen and (max-width: 1600px) {
    .wera-data .wera-content { width:  75vw;}

}

@media screen and (max-width: 1300px) {
    .wera-data .wera-content { width:  80vw;}

}


@media screen and (max-width: 1100px) {
    .wera-data .wera-content { width:  95vw;}

}

@media screen and (min-width: 601px) and (max-width: 800px) {
    .wera-data .wera-content .wera-table.wera-table-header {
        padding: 0 20px;
    }

    .wera-data .wera-content .wera-table.wera-table-body {
        margin: 0px 20px;
    }

    .wera-data .wera-content .wera-table .tb-pack {
        width: 15%;
    }
}

@media screen and (min-width: 601px) and (max-width: 767px) {
    .wera-data .wera-content .wera-table .th-part, .wera-data .wera-content .wera-table .tb-part{ display: none; }
    .wera-data .wera-content .wera-table .th-ean { width: 26%}
}




@media screen and (max-width: 770px) {
    .wera-data .wera-content .wera-table td { font-size: 70%;}
    .wera-data .wera-content .wera-table .tb-image {
        width: 20%;
    }

    .wera-data .wera-content .wera-table .tb-part{display: none;}
    .wera-data .wera-content .wera-table.wera-table-header .th-part { display: none;}
    .wera-data .wera-content .wera-table .tb-cta a{ font-size: 11px;}

    .wera-data .wera-content .wera-table .tb-cta { padding-left: 0;}

    .wera-data .wera-content .wera-table .tb-cta { padding-left: 15px;}
    .wera-data .wera-content .wera-table.wera-table-header {padding: 0 20px;}
    .wera-data .wera-content .wera-table.wera-table-body { margin: 0px 20px;}

    .wera-data .wera-content .wera-table .th-ean,.wera-data .wera-content .wera-table.wera-table-header .th-part,
    .wera-data .wera-content .wera-table .th-pack, .wera-data .wera-content .wera-table .th-desc { display: none;}

    .wera-data .wera-content .wera-table .tb-part, .wera-data .wera-content .wera-table .tb-ean,
    .wera-data .wera-content .wera-table .tb-pack { display:  none;}

    .wera-data .wera-content .wera-table .tb-desc { width: 70%;}
    .wera-data .wera-content .wera-table .tb-cta { width: 30%;}

    .wera-data .wera-content .wera-table .tb-desc .mobile { display: block;}
    .wera-data .wera-content .wera-table .tb-desc .desktop { display: none;}
    .wera-data .wera-content .wera-table .tb-cta { vertical-align: middle;}
    .wera-data .wera-content .wera-table .tb-cta a{ font-size: 12px;}
    .wera-data .wera-content .wera-table .tb-desc .mobile .mb-name {
        font-weight: 700;
        margin-right: 5px;
    }

    .wera-data .wera-content .wera-table .tb-desc .mobile .mb-name:after{content: ":"}

}

@media screen and (max-width: 500px) {
    .wera-data .wera-content .wera-table .tb-image {
        width: 40%;
    }

    .wera-data .wera-content .wera-table .tb-desc { width: 40%; }
}

#spinner-back, #spinner-front {
    position: fixed;
    width: 100vw;
    transition: all 1s;
    visibility: hidden;
    opacity: 0;
}
#spinner-back {
    z-index: 998;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
}
#spinner-front {
    z-index: 999999;
    color: #fff;
    text-align: center;
    margin-top: 50vh;
    transform: translateY(-50%);
}
#spinner-back.show, #spinner-front.show {
    visibility: visible;
    opacity: 1;
}
@keyframes ldio-w9snq1ez6kq {
    0% { transform: translate(-50%,-50%) rotate(0deg); }
    100% { transform: translate(-50%,-50%) rotate(360deg); }
}
.ldio-w9snq1ez6kq div {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 10px solid #ed1b24;
    border-top-color: transparent;
    border-radius: 50%;
}
.ldio-w9snq1ez6kq div {
    animation: ldio-w9snq1ez6kq 1s linear infinite;
    top: 50px;
    left: 50px
}
.loadingio-spinner-rolling-lclrf9sqnl8 {
    width: 65px;
    height: 65px;
    display: inline-block;
    overflow: hidden;
    background: none;
}
.ldio-w9snq1ez6kq {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(0.65);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
}
.ldio-w9snq1ez6kq div { box-sizing: content-box; }


/** Scrollbar  **/

/* ===== Scrollbar CSS ===== */
/* Firefox */
.wera-table.wera-table-body, .wera-content-iframe iframe {
    scrollbar-width: auto;
    scrollbar-color: #393f46 #ffffff;
}

/* Chrome, Edge, and Safari */
.wera-table.wera-table-body::-webkit-scrollbar,.elementor-template-canvas::-webkit-scrollbar  {
    width: 6px;
}

.wera-table.wera-table-body::-webkit-scrollbar-track, .elementor-template-canvas::-webkit-scrollbar-track   {
    background: #ffffff;
}

.wera-table.wera-table-body::-webkit-scrollbar-thumb, .elementor-template-canvas::-webkit-scrollbar-thumb  {
    background-color: #393f46;
    border-radius: 0px;
    border: 1px solid #8f9296;
}