#cc-window {
    background-color: var(--windowBg, #ddd);
    box-sizing: border-box;
    padding: var(--windowPadding, 2rem);
    z-index: 99999;
    border: var(--windowBorder, 0);
    overflow: auto;
}

#cc-window.cc-content-right {
    text-align: right;
}

#cc-window.cc-content-left {
    text-align: left;
}

#cc-window.cc-content-center {
    text-align: center;
}

/* Position */

#cc-window.cc-pos-top,
#cc-window.cc-pos-top-left,
#cc-window.cc-pos-top-right,
#cc-window.cc-pos-bottom,
#cc-window.cc-pos-bottom-left,
#cc-window.cc-pos-bottom-right,
#cc-btn-dismiss {
    position: fixed;
}

#cc-window.cc-pos-top {
    top: 0;
    left: 0;
    width: 100%;
}

#cc-window.cc-pos-top-left,
#cc-window.cc-pos-top-right,
#cc-window.cc-pos-bottom-left,
#cc-window.cc-pos-bottom-right {
    border-radius: var(--windowRadius, 8px);
    width: var(--windowWidth, 40%);
    min-width: 400px;
}

#cc-window.cc-pos-top-left,
#cc-window.cc-pos-top-right,
#cc-btn-dismiss.cc-pos-top-right,
#cc-btn-dismiss.cc-pos-top-left {
    top: var(--windowMarginTop, 1rem);
}

#cc-window.cc-pos-top-left,
#cc-btn-dismiss.cc-pos-top-left {
    left: var(--windowMarginLeft, 1rem);
}

#cc-window.cc-pos-top-right,
#cc-btn-dismiss.cc-pos-top-right {
    right: var(--windowMarginRight, 1rem);
}

#cc-window.cc-pos-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
}

#cc-window.cc-pos-bottom-left,
#cc-window.cc-pos-bottom-right,
#cc-btn-dismiss.cc-pos-bottom-left,
#cc-btn-dismiss.cc-pos-bottom-right {
    bottom: var(--windowMarginBottom, 1rem);;
}

#cc-window.cc-pos-bottom-left,
#cc-btn-dismiss.cc-pos-bottom-left {
    left: var(--windowMarginLeft, 1rem);
}

#cc-window.cc-pos-bottom-right,
#cc-btn-dismiss.cc-pos-bottom-right {
    right: var(--windowMarginRight, 1rem);
}

/* Content */

#cc-window .cc-window-title {
    font-size: var(--titleFontSize, 30px);
    font-weight: var(--titleFontWeight, bold);
    color: var(--titleTextColor, #333);
    padding: var(--titlePadding, 0 0 2rem 0);
}

#cc-window .cc-window-message,
#cc-window .cc-window-message p {
    font-size: var(--messageFontSize, 16px);
    color: var(--messageTextColor, #333);
    line-height: var(--messageLineHeight, 1.2rem);
    padding: var(--messagePadding, 0 0 .5rem 0);
}
#cc-window .cc-window-message p {
    padding: 0 0 .5rem 0;
}

#cc-window .cc-window-message a,
#cc-window .cc-window-message a:hover,
#cc-window .cc-window-message a:visited {
    color: var(--messageLinkColor, blue);
    text-decoration: var(--messageLinkDecoration, underline);
}

/* Settings */

#cc-window-settings .cc-window-settings-cookie {
    display: flex;
    border-bottom: 1px solid var(--settingsSeparatorColor, #333);
}

#cc-window-settings .cc-window-settings-cookie .cc-window-settings-cookie-desc {
    flex-grow: 2;
    padding: 1rem;
}

#cc-window-settings .cc-window-settings-cookie .cc-window-settings-cookie-desc * {
    font-size: var(--settingsFontSize, 14px);
    padding: 0;
}

#cc-window-settings .cc-window-settings-cookie .cc-window-settings-cookie-value {
    padding: 1rem;
}

#cc-window-settings .cc-window-settings-cookie input[type="checkbox"] {
    width: var(--settingsCheckBoxSize, 30px);
    height: var(--settingsCheckBoxSize, 30px);
}

/* Buttons */

#cc-window .cc-window-buttons button,
.cc-modal-window .cc-window-settings-buttons button {
    display: initial !important;
    font-size: var(--btnFontSize, 16px);
    font-weight: var(--btnFontWeight, 600);
    margin: var(--btnMargin, 32px 4px 0 4px);
    padding: var(--btnPadding, 18px 32px);
    border: 0;
    border-radius: var(--btnRadius, 8px);
    cursor: pointer;
    outline: none;
}

#cc-window .cc-window-buttons button.cc-btn-accept {
    background-color: var(--btnAcceptBg, #4caf50);
    color: var(--btnAcceptTextColor, #ffffff);
    border: var(--btnAcceptBorder, 0);
}

#cc-window .cc-window-buttons button.cc-btn-accept:hover {
    background-color: var(--btnAcceptBgHover, #2e7d32);
}

#cc-window .cc-window-buttons button.cc-btn-reject {
    background-color: var(--btnRejectBg, #f44336);
    color: var(--btnRejectTextColor, #ffffff);
    border: var(--btnRejectBorder, 0);
}

#cc-window .cc-window-buttons button.cc-btn-reject:hover {
    background-color: var(--btnRejectBgHover, #c62828);
}

#cc-window .cc-window-buttons button.cc-btn-info {
    background-color: var(--btnInfoBg, #9E9E9E);
    color: var(--btnInfoTextColor, #ffffff);
    border: var(--btnInfoBorder, 0);
}

#cc-window .cc-window-buttons button.cc-btn-info:hover {
    background-color: var(--btnInfoBgHover, #424242);
}

#cc-window .cc-window-buttons button.cc-btn-settings {
    background-color: var(--btnSettingsBg, #9E9E9E);
    color: var(--btnSettingsTextColor, #ffffff);
    border: var(--btnSettingsBorder, 0);
}

#cc-window .cc-window-buttons button.cc-btn-settings:hover {
    background-color: var(--btnSettingsBgHover, #424242);
}

.cc-window-settings-buttons button.cc-btn-settings-select {
    background-color: var(--btnSettingsSelectBg, #9E9E9E);
    color: var(--btnSettingsSelectTextColor, #ffffff);
    border: var(--btnSettingsSelectBorder, 0);
}

.cc-window-settings-buttons button.cc-btn-settings-select:hover {
    background-color: var(--btnSettingsSelectBgHover, #424242);
}

.cc-window-settings-buttons button.cc-btn-settings-accept {
    background-color: var(--btnSettingsAcceptBg, #4caf50);
    color: var(--btnSettingsAcceptTextColor, #ffffff);
    border: var(--btnSettingsAcceptBorder, 0);
}

.cc-window-settings-buttons button.cc-btn-settings-accept:hover {
    background-color: var(--btnSettingsAcceptBgHover, #2e7d32);
}

#cc-btn-dismiss {
    background-color: var(--btnDismissBg, #795548);
    color: var(--btnDismissTextColor, #ffffff);
    border: var(--btnDismissBorder, 0);
    font-size: var(--btnDismissFontSize, 16px);
    font-weight: var(--btnDismissFontWeight, 600);
    margin: 2rem .3rem 0 .3rem;
    padding: var(--btnDismissPadding, 18px 32px);
    border-radius: var(--btnDismissRadius, 8px);
    cursor: pointer;
    outline: none;
    z-index: 99999;
}

#cc-btn-dismiss:hover {
    background-color: var(--btnDismissBgHover, #4E342E);
}

/* Modal https://www.w3schools.com/howto/howto_css_modals.asp */

/* The Modal (background) */
.cc-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.cc-modal-window {
    background-color: var(--popupBg, #fefefe);
    color: var(--popupTextColor, #333);
    margin: 15% auto; /* 15% from the top and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    border-radius: var(--popupRadius, 8px);
}

.cc-modal-window h2 {
    color: var(--popupTextColor, #333);
}

/* The Close Button */
.cc-modal-close {
    color: var(--btnCloseColor, #aaa);
    margin: .5rem .5rem;
    text-align: right;
    font-size: 2rem;
    font-weight: bold;
}

.cc-modal-close:hover,
.cc-modal-close:focus {
    color: var(--btnCloseColorHover, #000);
    text-decoration: none;
    cursor: pointer;
}

.cc-modal-content {
    margin: 1rem 2rem;
}

@media screen and (max-width: 768px) {
    #cc-window.cc-pos-top-left,
    #cc-window.cc-pos-top-right,
    #cc-window.cc-pos-bottom-left,
    #cc-window.cc-pos-bottom-right {
        width: 100%;
        min-width: 100%;
        left: 0;
        right: 0;
    }
    #cc-window.cc-pos-top-left,
    #cc-window.cc-pos-top-right {
        top: 0;
    }
    #cc-window.cc-pos-bottom-left,
    #cc-window.cc-pos-bottom-right {
        bottom: 0;
    }
    .cc-modal-window {
        margin: 10px auto;
        width: 96%;
    }
}