/* --------------------------------------------------------------------- */
/* css cookie hinweis mobile - version 1.03 - 21.01.2022 */
/* copyright art of vision - multimedia 2020 */
/* --------------------------------------------------------------------- */


#coo_box{

opacity:0;

/*
opacity:1;
*/

transition:all 0.5s;

width:100%;

}


#coo_note{

display:block;

position:fixed;
bottom:0;
left:0;
right:0;

padding:30px 15px 30px 15px;

background:rgba(12,119,189,0.9) none repeat scroll 0% 0%;

text-align:justify;

/*
font-size:13px;
line-height:18px;
*/

/*
font-size:16px;
line-height:22px;
*/
color:#fff;

transition:all 1.0s;

}


#coo_note a{
color:#fff;
font-weight:bold;
}

#coo_note a:hover{
text-decoration:underline;
}



#coo_note input[type="button"]{
border:1px solid #fff;
width:220px;
font-weight:bold;
/*
padding:0 20px 0 20px;
*/
color:#186ebb;
background:#fff;
height:28px;
border-radius:5px;

font-size:14px;
line-height:14px;

}

#coo_note input[type="button"]:hover{

color:#fff;
background:#0161a0;

}

#coo_note input[type="button"]:active{

color:#186ebb !important;
background:#fff !important;

}


#coo_but_user{

color:#fff !important;
background:0 !important;

}


#coo_but_user:hover{

color:#fff !important;
background:#0161a0 !important;

}



.coo_form_checkbox{
margin:18px 0 0 0;
display:flex;
flex-direction:row;
}


.coo_form_checkbox div{
max-width:300px;
flex:50%;
}



.coo_form_button{
margin:27px 0 0 0;
display:flex;
flex-direction:row;

}

.coo_form_button div{
max-width:240px;
flex:50%;
}


/* --------------------------------------------------------------- */


/* chkbox container */
#coo_note .chk_con{
/*
display: block;
*/
position:relative;

/*
padding-left:35px;
margin-bottom:12px;
padding-right:35px;
font-size: 22px;
*/

/*
cursor:pointer;
*/
padding:0 35px 0 35px;

-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}


/* Hide the browser's default checkbox */
#coo_note .chk_con input{
position:absolute;
opacity:0;

cursor:pointer;

height:0;
width:0;
}


/* Create a custom checkbox */
#coo_note .checkmark{

position:absolute;
top:0;
left:0;
height:20px;
width:20px;

border-radius:5px;
/*
height: 25px;
width: 25px;
background-color: #eee;
background-color: #2196F3;
*/

border:1px solid #fff;
background:#0161a0;
}


/* On mouse-over, add a grey background color */
#coo_note .chk_con:hover input ~ .checkmark{
/*
background-color: #ccc;
background:#2196f3 !important;
background:#ccc !important;
*/
background:#0161a0 !important;


}

/* When the checkbox is checked, add a blue background */
#coo_note .chk_con input:checked ~ .checkmark{
/*
background-color:#2196F3;
*/
background:#47a7e6;

}

#coo_note .chk_con input:disabled ~ .checkmark{
/*
background-color:#2196F3;
*/
background:#0161a0;
}

/* Show the checkmark when disabled */
#coo_note .chk_con input:disabled ~ .checkmark:after{
display:block;
}


/* Create the checkmark/indicator (hidden when not checked) */
#coo_note .checkmark:after{
content:"";
position:absolute;
display:none;
}

/* Show the checkmark when checked */
#coo_note .chk_con input:checked ~ .checkmark:after{
display:block;
}

/* Style the checkmark/indicator */
#coo_note .chk_con .checkmark:after{

/*
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border:solid white;
border-width: 0 3px 3px 0;
*/

left:6px;
top:2px;
width:5px;
height:9px;

border:1px solid #fff;
border-width:0 3px 3px 0;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);

}

#coo_chk_analyse + span{
background:0 !important;
}





/* --------------------------------------------------------------- */

@media(max-width:560px){

/*
.coo_form_checkbox,.coo_form_button{
flex-direction:column;
}
*/

.coo_form_checkbox{
flex-direction:column;
}

.coo_form_button{
margin:10px 0 0 0;
}

.coo_form_button div{
margin:20px 0 0 0;
}


.coo_form_button div{
max-width:200px !important;
}

#coo_note input[type="button"]{
width:180px;
}



.coo_form_checkbox{
margin:20px 0 0 0;
}

.chk_con{
margin:0 0 20px 0 !important;
}

.chk_con:last-child{
margin:0 0 0 0 !important;
}

}



@media(max-width:420px){

/*
.coo_form_button div{
max-width:160px !important;
}

#coo_note input[type="button"]{
width:150px;
}
*/

.coo_form_button div{
max-width:170px !important;
}

#coo_note input[type="button"]{

/*
font-size:14px;
line-height:14px;
*/

width:160px !important;

}

}


/*
@media(max-width:359px){
*/
@media(max-width:369px){

.coo_form_button{
flex-direction:column;
}

}