/****************************************************************************
 * Structure
 ****************************************************************************/
.cookiebar_wrapper{
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 2000;
}

.cookiebar_wrapper .cookiebar_container{
    position: absolute; left: 1.9375rem; right: 1.9375rem; top: 50%;
    padding: .9375rem  0; background-color: #FFFFFF; width: auto;;
    color: #0A0A0A; border-radius: .9375rem; max-width: 30rem;
    text-align: center; margin: 0 auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); 
}

.cookiebar_wrapper .cookiebar{
    height: 100%; max-height: 30rem;
    overflow-x: hidden; overflow-y: auto;
}
.cookiebar_wrapper .cookiebar_inner{
    height: 100%; padding: 0 1.875rem;
}

/****************************************************************************
 * Text
 ****************************************************************************/
.cookiebar_wrapper .cookiebar h2{
    font-size: 1.5rem; margin: 0 0 1rem; font-weight: 300;
}

.cookiebar_wrapper .cookiebar .cookiebar_description{
    text-align: center; font-weight: 300; font-size: .75rem;
}


/****************************************************************************
 * Buttons
 ****************************************************************************/
.cookiebar_wrapper .cookiebar .button{
    display: block; width: auto;
}

.cookiebar_wrapper .cookiebar .button.toggle_options{
    padding: 0; border: none; font-size: 1rem;
    color: inherit; background: transparent;
    margin: 0 auto .5rem; 
}
.cookiebar_wrapper .cookiebar .button.toggle_options .show_options{ display: block; }
.cookiebar_wrapper .cookiebar .button.toggle_options .hide_options{ display: none; }
.cookiebar_wrapper .cookiebar .button.toggle_options.active .show_options{ display: none; }
.cookiebar_wrapper .cookiebar .button.toggle_options.active .hide_options{ display: block; }

.cookiebar_wrapper .cookiebar .button.save{
    padding: 0; border: none; font-size: 1rem;
    color: inherit; background: transparent;
    margin: 0 auto .5rem; display: none;
}
.cookiebar_wrapper .cookiebar .toggle_options.active  ~ .button.save{
    display: inline-block;
}


/****************************************************************************
 * Options
 ****************************************************************************/
.cookiebar_wrapper .cookiebar_options{
    margin: 0 auto; max-height: 0; overflow: hidden;
}
.cookiebar_wrapper .toggle_options.active ~ .cookiebar_options{
    margin: 0 auto 1rem; max-height: none; ;
}
.cookiebar_wrapper .cookiebar_option{
    position: relative; text-align: left;
    width: 100%; font-size: .75rem; margin-bottom: 1rem;
}
.cookiebar_wrapper .cookiebar_option_inner{
    position: relative;
}
.cookiebar_wrapper .cookiebar_option input{
    margin: 0; width: 1.5rem; height: 1.5rem; z-index: 10;
    position: absolute; right: 0; top: .25rem;
    visibility: visible; opacity: 0;
    cursor: pointer; 
}
.cookiebar_wrapper .cookiebar_option p{
    margin-bottom: .5rem;
}
.cookiebar_wrapper .cookiebar_option label{
    font-weight: 300; line-height: 2rem; font-size: 1rem;
    position: relative; margin: 0; display: block;
    padding-right: 2.9375rem; z-index: 0;
}

.cookiebar_wrapper .cookiebar_option > label{
    font-weight: 700; margin-bottom: .5rem;
}

.cookiebar_wrapper .cookiebar_option label:before,
.cookiebar_wrapper .cookiebar_option label:after{
    position: absolute; right:0; top: .25rem; z-index: 10;
    width: 1.5rem; height: 1.5rem; content: ''; font-weight: 900;
    font-family: 'FontAwesome', 'Font Awesome 5 Free'; vertical-align: middle;
    pointer-events:none;  text-align: center;
    line-height: 1.5rem; font-size: 1rem;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    font-size: .875rem;
}
.cookiebar_wrapper .cookiebar_option label:before{
    border: 2px solid currentColor;
    background-color: #FFFFFF;
    border-radius: 2px;
}
.cookiebar_wrapper .cookiebar_option label:after{
    opacity: 0; visibility: hidden; content: '\f00c';
}

.cookiebar_wrapper .cookiebar_option input:checked + label:before{
    border-color: #F7F7F7; background-color: #F7F7F7;
}
.cookiebar_wrapper .cookiebar_option input:checked + label:after{
    opacity: 1; visibility: visible;
}




/****************************************************************************
 * Menu
 ****************************************************************************/
.cookiebar_wrapper .cookiebar .menu{
    text-align: center; justify-content:center;
    margin: 0 auto; padding: .5rem 0 0;
}
.cookiebar_wrapper .cookiebar .menu li{
    padding: .5rem; width: auto; flex: 0 1 auto; display: inline-block;
}
.cookiebar_wrapper .cookiebar .menu li a{
    padding: 0;
}


@media screen and (min-width:40em){
    
    .cookiebar_wrapper .cookiebar_container{
        -webkit-transform: translateY(-50%) translateX(-50%);
        -moz-transform: translateY(-50%) translateX(-50%);
        -ms-transform: translateY(-50%) translateX(-50%);
        -o-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        left: 50%; right: auto;
    }
}