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

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

         width: calc(100% - 100px);
         min-width: 300px;
         min-height: 50px;
         max-width: 500px;

         background: var(--font-color-dark);
         border: 0px var(--font-color-dark) solid;

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

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

         -webkit-box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.15), 0px 0px 25px 0px rgba(0, 0, 0, 0.25);
        -moz-box-shadow:    inset 0px 0px 20px 0px rgba(0, 0, 0, 0.15), 0px 0px 25px 0px rgba(0, 0, 0, 0.25);
        box-shadow:         inset 0px 0px 20px 0px rgba(0, 0, 0, 0.15), 0px 0px 25px 0px rgba(0, 0, 0, 0.25);
}

#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: #ffffff; }
#cdi_layer .cdi-info b { display: block; text-align: left; font-size: 1.3em; margin-bottom: 10px; color: #ffffff; }

#cdi_layer .cdi-info a, #cdi_layer .cdi-info a:visited { color: #ffffff; font-weight: bold; text-decoration: underline; padding: 0px 0px; background-image: none; }
#cdi_layer .cdi-info a:hover { 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 {
         display: inline-block;
         cursor: pointer;

         background: var(--main-color);

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

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

         border: 1px var(--main-color) solid;
         -webkit-border-radius: 0px;
         -moz-border-radius: 0px;
         border-radius: 0px;

         -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 { background: var(--main-color-dark); color: #FFFFFF; border: 1px var(--main-color-dark) 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.75); height: 40px; margin: 5px 0px; padding: 0px; font-size: 1.2em; color: #FFFFFF; border: 1px rgba(255,255,255,0.25) solid; opacity: 0.5; }
#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.9); border: 1px rgba(0,0,0,0.0) solid; }

#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);
         -webkit-box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
        -moz-box-shadow:    inset 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
        box-shadow:         inset 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
}
#cdi_layer .cdi-config .item { display: block; width: 100%; padding: 5px 0px; border-bottom: 2px rgba(255,255,255,0.5) dotted; color: #FFFFFF; }
#cdi_layer .cdi-config .item:last-child { border-bottom: 0px #BFBFBF dotted; }

#cdi_layer .cdi-config .item input[type="checkbox"] { display: none; }
#cdi_layer .cdi-config .item input[type="checkbox"] + label { position: relative; display: inline-flex; cursor: pointer; margin: 2px 0px 0px 0px !important; font-family: sans-serif; font-size: 24px; line-height: 1.3; }
#cdi_layer .cdi-config .item input[type="checkbox"] + label:before { width: 40px !important; height: 20px !important; border-radius: 20px; border: 2px solid #EEE; background-color: #EEE; content: ""; margin:0px 15px 0px 0px !important; padding: 0px; transition: background-color 0.5s linear; }
#cdi_layer .cdi-config .item input[type="checkbox"] + label:after { width: 20px !important; height: 20px !important; margin: -10px 0px 0px 0px !important; padding: 0px !important; border-radius: 20px; background-color: #fff; content: ""; transition: margin 0.1s linear; box-shadow: 0px 0px 5px #aaa; position: absolute; left: 2px; top: 2px; }
#cdi_layer .cdi-config .item input[type="checkbox"]:checked + label:before { background-color: var(--main-color); border-color: var(--main-color); }
#cdi_layer .cdi-config .item input[type="checkbox"]:checked + label:after { margin: 0 0 0 20px !important; }
#cdi_layer .cdi-config .item span { float: right; display: block; width: calc(100% - 70px); 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(255,255,255,0.1); }
#cdi_layer .cdi-save input {
        display: inline-block;
         cursor: pointer;

         background: var(--main-color-dark);

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

         width: 200px;
         height: 30px;
         margin: 0px 0px;
         padding: 0px;

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

}
#cdi_layer .cdi-save input:hover { background: var(--main-color); color: #FFFFFF; }

#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(255,255,255,0.5); 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: 0%; left: 0%; width: calc(100% - 40px); margin: 0px auto; font-size: 13px; }
         #cdi_layer .cdi-footer { display: block; margin-top: 5px; margin-bottom: 10px; text-align: center;  font-size: 18px; }
         #cdi_layer .cdi-button input[type="submit"] { float: left; height: 36px !important; margin: 5px 5px !important; padding: 5px 0px !important; font-size: 1.1em !important; border: 0px !important; }
         #cdi_layer .cdi-button input[type="submit"][name="ds_accept_all"] { width: calc(45% - 10px) !important; }
         #cdi_layer .cdi-button input[type="submit"][name="ds_accept_fo"] { width: calc(55% - 10px) !important; }


}