/****************************************************************************
 * Structure
 ****************************************************************************/
.cookiebar_wrapper{
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 2000;
    opacity: 0; visibility: hidden;
    pointer-events:none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.cookiebar_wrapper *{
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;    
}

.cookiebar_wrapper.active{
    opacity: 1; visibility: visible;
    pointer-events:all;
}

.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; position: relative;
}

.cookiebar_wrapper .cookiebar_inner .close{
    position: absolute; top: 0; right: 1rem; cursor: pointer;
    width: 1.5rem; height: 1.5rem; display: block; opacity: .5;
}
.cookiebar_wrapper .cookiebar_inner .close:before,
.cookiebar_wrapper .cookiebar_inner .close:after{
    width: 1rem; height: 2px; background-color: currentColor;
    content: ''; display: block; position: absolute; left: 50%; top: 50%;
    -webkit-transform: translate(-50%,-50%) rotate(45deg);
    -wms-transform: translate(-50%,-50%) rotate(45deg);
    -ms-transform: translate(-50%,-50%) rotate(45deg);
    -o-transform: translate(-50%,-50%) rotate(45deg);
    transform: translate(-50%,-50%) rotate(45deg);
}
.cookiebar_wrapper .cookiebar_inner .close:after{
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    -wms-transform: translate(-50%,-50%) rotate(-45deg);
    -ms-transform: translate(-50%,-50%) rotate(-45deg);
    -o-transform: translate(-50%,-50%) rotate(-45deg);
    transform: translate(-50%,-50%) rotate(-45deg);
}


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

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


/****************************************************************************
 * Buttons
 ****************************************************************************/
.cookiebar_wrapper .button-group .button{ 
    font-size: .875rem;
    margin: .25rem;
    text-transform: none;
}

.cookiebar_wrapper .button.show_options{ display: block; }
.cookiebar_wrapper .button.hide_options{ display: none; }
.cookiebar_wrapper .button.accept_all{ display: block; }
.cookiebar_wrapper .button.save{ display: none; }

.cookiebar_wrapper.options_visible .button.show_options{ display: none; }
.cookiebar_wrapper.options_visible .button.accept_none{ display: none; }
.cookiebar_wrapper.options_visible .button.hide_options{ display: block; }
.cookiebar_wrapper.options_visible .button.accept_all{ display: none; }
.cookiebar_wrapper.options_visible .button.save{ display: block; }



/****************************************************************************
 * Options
 ****************************************************************************/
.cookiebar_wrapper .cookiebar_options{
    margin: 0 auto; max-height: 0; overflow: hidden;
    padding: 0;
}
.cookiebar_wrapper.options_visible .cookiebar_options{
    margin: 0 auto 1rem; max-height: none;
    padding: 1rem 0 0;
}
.cookiebar_wrapper .cookiebar_option{
    position: relative; text-align: left;
    width: 100%; font-size: .875rem; margin-bottom: 1.5rem;
}
.cookiebar_wrapper .cookiebar_option:last-child{
    margin-bottom: 0;
}
.cookiebar_wrapper .cookiebar_option_inner{
    position: relative;
}
.cookiebar_wrapper .cookiebar_option_inner:after{
    position: absolute; left: 0; right: 0; bottom: 0;
    border-bottom: 1px dotted currentColor; opacity: 0;
    content: ''; display: block;
    -webkit-transition: .25s ease;
    -moz-transition: .25s ease;
    -ms-transition: .25s ease;
    -o-transition: .25s ease;
    transition: .25s ease;
}
.cookiebar_wrapper .cookiebar_option_inner:focus:after,
.cookiebar_wrapper .cookiebar_option_inner:hover:after{
    opacity: .5;
}

.cookiebar_wrapper .cookiebar_option p{
    margin-bottom: .5rem;
}

.cookiebar_wrapper .cookiebar_option input{
    margin: 0; width: 1.25rem; height: 1.25rem; z-index: 10;
    position: absolute; right: .125rem; top: .25rem;
    visibility: visible; opacity: 0;
    cursor: pointer; 
}

.cookiebar_wrapper .cookiebar_option label{
    font-weight: 300; line-height: 1; font-size: .875rem;
    position: relative; margin: 0; display: block;
    padding: 0.5rem 2.9375rem .5rem 0; z-index: 0; 
}

.cookiebar_wrapper .cookiebar_option > label{
    font-weight: 700; margin-bottom: .5rem;
    border-bottom: 1px dotted currentColor;
}

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

.cookiebar_wrapper .cookiebar_option input + label:after{
    opacity: 0; visibility: hidden; content: '\f00c';
}

.cookiebar_wrapper .cookiebar_option input:checked + label:before{
    opacity: .5;
}
.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;
    font-size: .875rem;
}
.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; min-width: 25rem;
    }
}