div.cookies-panel{
    position: fixed;
    bottom: 20px;
    left: 20px;

    width: 33.33%;
    min-width: 460px;
    max-width: 550px;
    max-height: 90%;
    padding: 20px;

    background-color: #ffffff;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 20px -5px #000000;

    color: #4A4A4A;
    font-family: 'Open Sans', sans-serif;

    display: flex;
    flex-direction: column;

    transition: opacity .3s;
    opacity: 0;

    z-index: 1001;
}
    @media screen and (max-width: 500px) {
        div.cookies-panel{ min-width: auto; width: auto; left: 20px; right: 20px; }
    }

    div.cookies-panel.active{ opacity: 1; }

    body#admin-page div.cookies-panel{
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;

        margin: 20px auto;
        opacity: 1 !important;
    }

    div.cookies-panel img.cancel{
        display: block;
        position: absolute;
        right: 5px;
        top: 5px;

        width: 30px;
        height: 30px;

        filter: invert(84%) sepia(0%) saturate(1%) hue-rotate(45deg) brightness(100%) contrast(99%);
    }

    div.cookies-panel *{ box-sizing: border-box; flex: 1; }

    div.cookies-panel a{ color: #4A4A4A; }

    div.cookies-panel div.body{
        flex: 2;
        overflow-y: auto;
        margin: 20px 0;
    }

    div.cookies-panel div.section{
        margin: 0 0 10px 0;
    }

    div.cookies-panel div.details{
        margin: 0 0 20px 0;
        padding: 10px;
        background-color: #ececec;

        display: none;
    }
        div.cookies-panel div.details.active{ display: block; }

        div.cookies-panel div.details div.item{
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #d4d4d4;

            position: relative;
        }

        div.cookies-panel div.details div.item div.category{ position: absolute; right: 0; top: 0; }

        div.cookies-panel div.details div.item div.more{ display: none; margin-top: 10px; padding: 5px; background-color: #ffffff; }
            div.cookies-panel div.details div.item div.more.active{ display: block; }

    div.cookies-panel button{
        width: 100%;
        margin-top: 10px;
        padding: 10px 0;

        background-color: #d4d4d4;
        border: 1px solid #d4d4d4;
        border-radius: 5px;

        font-size: 16px;
        color: #4A4A4A;
    }
        div.cookies-panel button.transparent{
            background-color: initial;
            border-color: transparent;

            text-decoration: underline;
        }

    div.cookies-panel div.title{
        font-size: 18px;
        line-height: 30px;
    }
        div.cookies-panel div.title img{
            float: left;
            height: 30px;
            margin-right: 10px;
        }

    div.cookies-panel div.description{
        padding: 10px 0;
        font-size: 14px;
    }

    div.cookies-panel div.group{
        width: 100%;

        margin-bottom: 10px;
    }
        div.cookies-panel div.group div.value{ width: 100%; }
            div.cookies-panel div.group div.value label{ width: 100%; height: 30px; }

            div.cookies-panel div.group div.name{ margin-top: 10px; }
            div.cookies-panel div.group div.value input{
                width: 100%;
                padding: 10px;
                
                border: 1px solid #d4d4d4;
                border-radius: 5px;

                font-size: 16px;
                color: #4A4A4A;
            }

            div.cookies-panel div.group div.value span{
                display: inline-block;
                line-height: 24px;

                font-size: 18px;
            }

            div.cookies-panel div.group div.value span.checkbox{
                float: left;
                width: 22px;
                height: 22px;
                padding: 1px; margin: 0 10px 0 0;

                border: 1px solid #cccccc;
            }
                div.cookies-panel div.group div.value span.checkbox img{
                    display: none;
                    margin: 0; padding: 0;
                    width: 100%; height: 100%;

                    filter: invert(24%) sepia(10%) saturate(10%) hue-rotate(358deg) brightness(95%) contrast(79%);
                }
                div.cookies-panel div.group div.value span.checkbox.selected{ border-color: #4A4A4A; }
                div.cookies-panel div.group div.value span.checkbox.selected img{ display: block; }

                div.cookies-panel div.group div.value span.checkbox.disabled{ border-color: #cccccc; color: #cccccc; }
                div.cookies-panel div.group div.value span.checkbox.disabled img{
                    filter: invert(96%) sepia(0%) saturate(500%) hue-rotate(152deg) brightness(93%) contrast(77%);
                }

    @media screen and (min-width: 1024px) {
        div.cookies-panel img.cancel,
        div.cookies-panel div.group div.value label,
        div.cookies-panel button{ transition: opacity .1s;}

        div.cookies-panel img.cancel:hover,
        div.cookies-panel div.group div.value label:hover,
        div.cookies-panel button:hover{ opacity: .5; cursor: pointer; }
    }