/*
#################################
##  Cookie / Datenschutz Info
#################################
*/

#cdi_layer {
         z-index: 10001;
         bottom: 50px;
         right: 50px;
         position: fixed;

         width: 320px;
         min-height: 50px;

         background: var(--highlight-color);
         border: 0px #001e76 solid;

         font-family: var(--font-family);
         color: #000000;
         font-size: 16px;
         font-weight: normal;
         text-align: left;

         -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;

         -webkit-box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.0), 0px 0px 25px 0px rgba(0, 0, 0, 0.25);
        -moz-box-shadow:    inset 0px 0px 20px 0px rgba(0, 0, 0, 0.0), 0px 0px 25px 0px rgba(0, 0, 0, 0.25);
        box-shadow:         inset 0px 0px 20px 0px rgba(0, 0, 0, 0.0), 0px 0px 25px 0px rgba(0, 0, 0, 0.25);
}
#cdi_layer:after {
        top: 100%;
        left: calc(85% - 24px);
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(0, 0, 0, 0);
        border-top-color: var(--highlight-color);
        border-width: 24px;
        margin-left: -24px;
}

#cdi_layer .cdi-clear { clear:both; line-height:0.0em; height: 0px; display: block; }
#cdi_layer .cdi-info { float: none; width: calc(100% - 40px); margin: 15px 20px 10px 20px; text-align: justify; color: #000000; font-size: 0.9em; }
#cdi_layer .cdi-info b { display: block; text-align: left; font-size: 1.3em; margin-bottom: 10px; color: #000000; }

#cdi_layer .cdi-info a, #cdi_layer .cdi-info a:visited { color: #000000; font-weight: bold; text-decoration: underline; padding: 0px 0px; background-image: none; }
#cdi_layer .cdi-info a:hover { color: rgba(255,255,255,1.0); color: var(--main-color) }

#cdi_layer .cdi-button { float: none; display: block; width: calc(100% - 40px); margin: 15px 20px 10px 20px; text-align: center; }
#cdi_layer .cdi-button input, #cdi_layer .cdi-save input {
         display: inline-block;
         cursor: pointer;

         background: #000000;

         font-size: 1.0em;
         color: #FFFFFF;
         font-weight: bold;
         text-shadow: rgba(0,0,0,0.0) 1px 1px 0px;
         text-decoration: none;
         text-align: center;

         width: 200px;
         height: 40px;
         margin: 5px 0px;
         padding: 0px;

         border: 2px transparent solid;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;

         -webkit-box-shadow: inset 0px 2px 1px 0px rgba(255, 255, 255, 0.0);
         -moz-box-shadow:    inset 0px 2px 1px 0px rgba(255, 255, 255, 0.0);
         box-shadow:         inset 0px 2px 1px 0px rgba(255, 255, 255, 0.0);
}

#cdi_layer .cdi-button input:hover, #cdi_layer .cdi-save input:hover { background: #FFFFFF !important; color: #000000; border: 2px transparent solid; }
#cdi_layer .cdi-button input[type="submit"] { float: none; }
#cdi_layer .cdi-button input[type="button"],
#cdi_layer .cdi-button input[type="submit"][name="ds_accept_fo"],
#cdi_layer .cdi-save input[type="button"] { background: rgba(0,0,0,0.0); height: 40px; margin: 5px 0px; padding: 0px; font-size: 1.0em; color: #000000; border: 2px #000000 solid; opacity: 1.0; }
#cdi_layer .cdi-button input[type="button"]:hover,
#cdi_layer .cdi-button input[type="submit"][name="ds_accept_fo"]:hover,
#cdi_layer .cdi-save input[type="button"]:hover { opacity: 0.8; background: rgba(0,0,0,0.8); border: 2px rgba(0,0,0,0.0) solid; color: #000000; }

#cdi_layer .cdi-config {
        display: none;
         width: calc(100% - 30px);
         padding: 15px 15px 10px 15px;
         text-align: left;
         background: rgba(0,0,0,0.02);
         background: #FFFFFF;
         -webkit-box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.20);
        -moz-box-shadow:    inset 0px 0px 20px 0px rgba(0, 0, 0, 0.20);
        box-shadow:         inset 0px 0px 20px 0px rgba(0, 0, 0, 0.20);
}
#cdi_layer .cdi-config .item { display: block; width: 100%; padding: 5px 0px; border-bottom: 2px rgba(0,0,0,0.5) dotted; color: #000000; }
#cdi_layer .cdi-config .item:last-child { border-bottom: 0px #BFBFBF dotted; }
#cdi_layer .cdi-config .item input[type="checkbox"] + label { width: 40px; height: 20px; margin-right: 15px; }
#cdi_layer .cdi-config .item input[type="checkbox"] + label::before { width: 16px; height: 16px; margin: 2px 15px 0px 3px; }
#cdi_layer .cdi-config .item input[type="checkbox"]:checked+label::before { margin: 2px 0px 0px 20px; }
#cdi_layer .cdi-config .item span { float: right; display: block; width: calc(100% - 60px); font-size: 0.9em; opacity: 0.5; }
#cdi_layer .cdi-config .item span b { display: block; }
#cdi_layer .cdi-config .item span.active { opacity: 1.0; }
#cdi_layer .cdi-config .item span.active b { color: var(--main-color);  }

#cdi_layer .cdi-save { display: none; width: 100%; padding: 10px 0px; text-align: center; background: rgba(0,0,0,0.0); }

#cdi_layer .cdi-footer { display: block; margin-top: 15px; margin-bottom: 15px; text-align: center; }
#cdi_layer .cdi-footer a, #cdi_layer .cdi-footer a:visited { padding: 0px 0px; font-size: 0.8em; color: rgba(0,0,0,1.0); font-weight: normal; text-decoration: none; }
#cdi_layer .cdi-footer a:hover { color: rgba(255,255,255,1.0); }

/*#cdi_layer a, #cdi_layer .cdi-info, #cdi_layer .cdi-button input, #cdi_layer .cdi-footer, #cdi_layer .cdi-config span { font-family: "Roboto Condensed", Arial !important; }   */


/*
#############################
         Media-Querys
#############################
*/

@media (max-width: 1280px) {
         #cdi_layer { font-size: 14px; }
         #cdi_layer .cdi-config .item span { width: calc(100% - 60px); }
         #cdi_layer .cdi-info, #cdi_layer .cdi-button { float: none; width: calc(100% - 40px); margin: 10px 20px; }
         #cdi_layer .cdi-button { text-align: center; }
         #cdi_layer .cdi-button input[type="submit"][name="ds_accept_fo"], #cdi_layer .cdi-save input[type="button"] { height: 40px; margin: 5px 5px; }
}

@media (max-width: 640px) {
         #cdi_layer { right: 10%; left: 10%; width: calc(80% - 20px); margin: 0px auto; }
}