main {
    overflow-x : hidden;
}

.pm::after {
    user-select    : none !important;
    pointer-events : none !important;
    content        : "marius [dot] gerum [at] protonmail [dot] com";
}

.text-monospace, .text-monospaced, .monospace, .monospaced {
    font-family : monospace, Consolas, sans-serif;
}

fieldset {
    border        : 1px solid rgba(0, 0, 0, 0.1);
    padding       : 16px;
    border-radius : 4px;
}

fieldset legend {
    display : inline-block;
    float   : none;
    padding : 0 16px;
    width   : auto;
}

.xhr-blocked {
    transition-duration : 250ms;
    transition-property : all;
    opacity             : 0.5;
    pointer-events      : none;
    cursor              : progress;
}

.rc {
    display   : block;
    max-width : 100%;
}

.code {
    font-family      : monospace, Consolas, sans-serif;
    background-color : rgba(0, 0, 0, 0.1);
    border           : 1px solid rgba(0, 0, 0, 0.1);
    color            : rgba(0, 0, 0, 0.72);
}

.code:hover {
    background-color : rgba(0, 0, 0, 0.2);
    color            : rgba(0, 0, 0, 0.94);
}

.info-copied {
    z-index          : 90;
    position         : absolute;
    display          : inline;
    background-color : rgba(0, 0, 0, 0.86);
    padding          : 4px 8px;
    font-size        : 12px;
    border-radius    : 8px;
    margin           : 0 4px;
    color            : #ffffff;
    font-weight      : 900;
    border           : 2px solid rgba(255, 255, 255, 0.5);
}

/* Cookie Modal */
#cookie-modal {
    display          : none;
    position         : fixed;
    z-index          : 1000;
    left             : 0;
    top              : 0;
    width            : 100%;
    height           : 100%;
    overflow         : auto;
    background-color : rgba(0, 0, 0, 0.5);
    backdrop-filter  : blur(2px);
}

#cookie-modal .modal-content {
    background-color : #fefefe;
    margin           : 10% auto;
    padding          : 0;
    width            : 90%;
    max-width        : 500px;
    animation        : modalFadeIn 0.3s;
}

@keyframes modalFadeIn {
    from {
        opacity   : 0;
        transform : translateY(-20px);
    }
    to {
        opacity   : 1;
        transform : translateY(0);
    }
}

#cookie-modal .modal-header h3 {
    margin    : 0;
    font-size : 1.2rem;
}

#cookie-modal .close {
    font-size   : 28px;
    font-weight : bold;
    cursor      : pointer;
}

#cookie-modal .close:hover {
    color : #000000;
}

#cookie-modal .modal-body {
    padding : 20px;
}

#cookie-modal .modal-footer {
    padding         : 12px 20px;
    border-top      : 1px solid #eeeeee;
    text-align      : right;
    display         : flex;
    justify-content : flex-end;
    gap             : 10px;
    flex-wrap       : wrap;
}

.cookie-setting-item {
    margin-bottom : 15px;
    padding       : 10px;
    background    : #f9f9f9;
    border-radius : 4px;
}

.cookie-setting-item:hover {
    background : #f5f5f5;
}

.cookie-setting-item label {
    display : block;
    cursor  : pointer;
}

.cookie-setting-item input[type="checkbox"] {
    margin-right : 8px;
}

form label .req::after {
    display     : inline-block;
    content     : '*';
    color       : #cc0022;
    cursor      : default;
    margin-left : 2px;
}

form label small {
    color  : rgba(0, 0, 0, 0.4);
    cursor : default;
}

.container.legal-policy {
    margin        : 0 auto;
    padding       : 1rem;
    border-radius : 5px;
}

.container.legal-policy h1 {
    padding-bottom : 16px;
}

.container.legal-policy p {
    text-align : justify;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
    margin-top    : 0.5em !important;
    margin-bottom : 0.5em !important;
}

.markdown blockquote {
    margin-top    : 1rem;
    margin-bottom : 1rem;
}

.markdown pre {
    margin-top    : 0.75rem;
    margin-bottom : 0.75rem;
}

.markdown p {
    margin-top     : 0.15rem;
    margin-bottom  : 0.15rem;
    padding-top    : 0.15rem;
    padding-bottom : 0.15rem;
}

#cookietool {
    position   : fixed;
    left       : 8px;
    bottom     : 24px;
    text-align : center;
    opacity    : 0.75;
    
    &:hover {
        opacity : 1.0;
    }
}

#cookietool a {
    display          : inline-block;
    padding          : 8px;
    text-decoration  : none;
    background-color : #eeeeee;
    border-radius    : 4px;
}

/* Consent Placeholder */
.xmgr-consent-placeholder {
    background-color : #f0f0f0;
    border           : 2px dashed #cccccc;
    border-radius    : 8px;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    text-align       : center;
    padding          : 20px;
    margin           : 10px 0;
    min-height       : 150px;
    color            : #555555;
    font-family      : sans-serif;
    width            : 100%;
}

.xmgr-consent-placeholder .placeholder-content {
    max-width : 400px;
}

.xmgr-consent-placeholder .placeholder-icon {
    font-size     : 40px;
    margin-bottom : 10px;
}

.xmgr-consent-placeholder p {
    margin    : 5px 0;
    font-size : 14px;
}

.xmgr-consent-placeholder em {
    font-style  : normal;
    font-weight : bold;
    color       : #333333;
}

.xmgr-consent-placeholder .btn {
    margin-top : 15px;
}