#cookiebar * { box-sizing: border-box; }


.flex-between { display: flex; justify-content: space-between; flex-wrap: wrap; }
.flex-valign-center { align-items: center; }
.flex-columns { display: flex; flex-direction: column; }

.overlay {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed; top: 0; left:0;
    z-index: 40000; outline:0;
}
.overlay.hidden { display: none !important; }


.cookie-banner { padding: 15px; max-width: calc(100% - 20px); margin: 0 auto; background-color: #ffffff; font-size: 14px; -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    position:relative;
    max-height:calc(100% - 20px);

}
.cookie-banner .bg-dark { color: #ffffff; }
.box_title { margin-top: 0; font-size: 18px; line-height: 23px; font-weight: normal; color: #222222; }

.cookie-banner-group-wrap { clear: both; display: flex; margin: 10px 0; padding:0; }
.cookie-banner-group-wrap li { display:block; padding:0; margin:0; }
.cookie-banner-group-wrap label { font-weight:400; }
.cookie-banner-group-wrap label input[type="checkbox"] { display:inline-block; }


.consens-opacity {
    opacity: 0;
    max-height: 0px;
    transition: opacity 1s;
}

.cookie-actions { margin-top: 20px; }

.cookie-banner .btn {
    padding: 8px 15px;
    flex: 1 1 100%;
    display: block;
    font-size: 16px; text-align: center; color: #666;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid #efefef;
    background-color: #efefef;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    /* --- */
    color:#fff;
    background-color:#555;
    border: 1px solid #555;
    font-weight:bold;
    margin-bottom:5px;
}
.cookie-banner .btn-submit {
    color: #fff;
    font-weight: bold;
    border: 1px solid #f87100;
    background-color: #ff8600;
    background: -moz-linear-gradient(90deg, #f87100 0%, #ff8600 100%) #f87100;
    background: -webkit-gradient(linear, left bottom, left top, from(#f87100), to(#ff8600)) #f87100;
    -moz-box-shadow: 0 1px 2px #c7c5c4;
    -webkit-box-shadow: 0 1px 2px #c7c5c4;
    box-shadow: 0 1px 2px #c7c5c4;
}

.cookie-banner .btn-submit:hover {
    background: #fe9034 !important;
}


/*2021-12*/
.cookie-banner #cookiebar_submit-essential.btn-default:hover {
    background: #333333 !important;
}


/*2021-12  EXTERNAL ===================================== */
#consens-allowallexternalonce.btn.btn-default{
    color: #fff;
    font-weight: bold;
    border: 1px solid #555;
    background-color: #555;
    background: -moz-linear-gradient(90deg, #555 0%, #555 100%) #555;
    background: -webkit-gradient(linear, left bottom, left top, from(#555), to(#555)) #555;
    -moz-box-shadow: 0 1px 2px #c7c5c4;
    -webkit-box-shadow: 0 1px 2px #c7c5c4;
    box-shadow: 0 1px 2px #c7c5c4;
    margin-bottom:10px;
}
#consens-allowallexternalonce.btn.btn-default:hover {
    background: #333333 !important;
}

#consens-allowallexternalcontent.btn.btn-primary{
    color: #fff;
    font-weight: bold;
    border: 1px solid #f87100;
    background-color: #ff8600;
    background: -moz-linear-gradient(90deg, #f87100 0%, #ff8600 100%) #f87100;
    background: -webkit-gradient(linear, left bottom, left top, from(#f87100), to(#ff8600)) #f87100;
    -moz-box-shadow: 0 1px 2px #c7c5c4;
    -webkit-box-shadow: 0 1px 2px #c7c5c4;
    box-shadow: 0 1px 2px #c7c5c4;
    margin-bottom:10px;
}
#consens-allowallexternalcontent.btn.btn-primary:hover {
    background: #fe9034 !important;
}


#cookiebar-external .redirects{
    margin-top:25px;
}
#cookiebar-external .redirects a{
    margin-right:25px;
}
/* ======================================================= */




.cookie-options { margin-top: 20px; }

.cookie-banner .redirects {
    display: flex;
}


.cookie-banner .link {
    text-decoration: none;
    color: #000000;
    color: #f87100;
}

.cookie-banner .link.privacy {
    margin-right: 19px;
}

/* Details Table */
table.cookie-details {
    width: 100%;
    background: rgba(0,0,0,.04);
    margin: 5px 0;
}

.cookie-details th,
.cookie-details td {
    padding: 2px;
    vertical-align: top;
    line-height: 1.2;
    font-size:13px;
    color: #666;
}

.cookie-details th {
    color: #999; font-weight:400;
    width: 15%
}




.cookie-banner .js-position-left {
    justify-content: flex-start;
}
.cookie-banner .js-position-center {
    justify-content: space-evenly;
}
.cookie-banner .js-position-right {
    justify-content: flex-end;
}
.cookie-banner .js-position-border {
    justify-content: space-between;
}


.consens-visible {
    opacity: 1;
    max-height:2000px;
}

#consens-external-close {
    cursor: pointer;
    width: 20px;
    height: 20px;
    float: right;
}


.consens-list {
    width: 100%; padding:0;
    overflow: hidden;
    list-style: none;
    font-size: 14px; color:#666;
}

.consens-list > li {
    margin-top: 20px; padding:0; background:#fff;
    list-style: none;
    margin-left: 0;
}

.consens-group-header { background: #efefef; color:#333; padding:5px 10px; font-weight:bold; font-size: 16px; margin-bottom: 10px; }
.consens-group-description { text-align: justify; }





/* Listing Plugin  */
.cookie-listing .checkbox.dsgvo_cookie-switch { margin-top: 20px; }
.cookie-listing .dsgvo_cookie-switch label { font-size:14px; }
.cookie-listing .dsgvo_cookie-switch input[type="checkbox"] { display:inline-block; margin-right: 5px; }

table.cookie-details-listing {
    width: 100%;
    margin: 15px 0; }
.cookie-details-listing th,
.cookie-details-listing td {
    padding: 4px 2px;
    vertical-align: top;
    line-height: 1.2;
    font-size:12px;
    color: #666;
    width:10%; }
.cookie-details-listing th {
    color: #999; font-weight:400; border-bottom: 1px solid #efefef;
}
.cookie-details-listing th.purpose { width:50%; }


input[type="checkbox"].sbcustom:disabled + span {
    color: inherit !important;
}



/* Iframe replacement */
.consens-replaced-iframe {
    width: 100%;
    height: 100px;
    border: 0;
    border: 2px dashed #eceef0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.embed-responsive { position:relative; }

.embed-responsive .consens-replaced-iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.consens-replaced-iframe button {
    display: inline-block;
    border: 2px solid #333;
    color: #fff;
    min-width: 170px;
    margin: 1rem auto;
    line-height: 1.125;
    font-size: 16px;
    text-align: center;
    padding: 7px 12px 5px 12px;
    background: #333;
    max-width: 230px;
    line-height:150%;
}
.consens-replaced-iframe button:hover{
    cursor:pointer;
}

.consens-replaced-iframe[data-src*=http] button:before { content: "Externen Inhalt aus der Celler Abfall-APP "; }
.consens-replaced-iframe button + a {
    display: inline-block;
    color: #333;
    font-size: 14px;
}

.consens-replaced-iframe[data-src*=youtube] { background-color: #666; border: none; }
.consens-replaced-iframe[data-src*=youtube] button:before { content: "Youtube-Video "; }
.consens-replaced-iframe[data-src*=youtube]  button + a { color: #fff; }

.consens-replaced-iframe[data-src*=maps] { background-color: #efefef; border: none; }
.consens-replaced-iframe[data-src*=maps] button:before { content: "Google Karte "; }


.sg-cookie-optin-box-cookie-detail-list-item a:before,
a.sg-cookie-optin-box-open-more-link:before,
.consens-replaced-iframe a:before {
    display: inline-block;
    margin-right: .375rem;
    content: "»";
}





#cookiebar-external .cookie-consent{
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    max-width: 800px;
    width: 90%;
}
#consens-allowallexternalonce {padding-right: 20px;}





/* Custom Checkboxes/Radios pure CSS */
/* http://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/ */
.checkbox.dsgvo_cookie-switch { position: relative; display: block; margin-top: 20px; margin-bottom: 10px; }

.checkbox.dsgvo_cookie-switch label { min-height: 20px; line-height: 22px; margin-bottom: 0; padding-left: 0; cursor: pointer; }

input.sbcustom[type="checkbox"] { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

input.sbcustom[type="checkbox"] + span { display: inline-block; margin-right: 10px; font-weight: 400; padding-left: 30px; line-height: 22px; }

input.sbcustom[type="checkbox"] + span:before { content: ' '; display: inline-block; position: absolute; width: 20px; height: 20px; color: #666; line-height: 20px; margin-left: -30px; font-size: 16px; font-weight:bold; border: 1px solid #ccc; transition: 0.5s ease all; background: #fff; text-align: center; }

input.sbcustom[type="checkbox"]:hover + span:before { content: "✓"; color: #f87100; border:1px solid #f87100; }

input.sbcustom[type="checkbox"]:checked + span:before { content: "✓"; color: #f87100; border:1px solid #f87100; }

input.sbcustom[type="checkbox"]:focus + span { color: #000; }

input.sbcustom[type="checkbox"]:disabled + span { color: inherit !important; cursor: default;  }
input.sbcustom[type="checkbox"]:disabled + span:before { color: #666 !important; border: 1px solid #ccc !important; }




input.sbcustom-small[type="checkbox"] + span { margin-right: 15px; padding-left: 28px; line-height: 22px; }
input.sbcustom-small[type="checkbox"] + span:before { width: 18px; height: 18px; line-height: 18px; margin-left: -28px; }



@media all and (min-width: 522px) {
    .cookie-banner {
        padding: 30px;
    }
}

@media all and (min-width: 768px) {
    .cookie-banner {
        max-width: 60vw;
    }
}

@media all and (min-width: 992px) {
    .cookie-banner {
        max-width: 960px;
        padding: 40px;
    }

    .cookie-banner .btn {
        flex: 0 1 45%;

        padding: 14px 5px;
    }

    .cookie-banner .btn-submit {
        font-size: 16px;
    }
}