:root {
    /*--primary-color : #0072c6;*/
}

main {
    overflow-x : hidden;
}

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

.xm-addr {
    user-select    : none;
    pointer-events : none;
    opacity        : 0.75;
    font-size      : 11px;
}

.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;
}

.requesting {
    transition-delay : 200ms;
    transition       : all 200ms ease;
    opacity          : 0.4;
    pointer-events   : none;
}

input {
    box-shadow : none;
}

[disabled], .disabled {
    transition-duration : 1000ms;
    transition-property : all;
    opacity             : 0.5;
    pointer-events      : none;
}

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

.rc {
    display   : block;
    /*margin: 16px 0;*/
    /*padding: 16px;*/
    /*border: 2px dashed rgba(0, 0, 0, 0.1);*/
    /*background-color : #ffffff;*/
    /*color            : #444444;*/
    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);
}


.gpwinput {
    color : rgba(0, 0, 0, 0.5);
}

.gpwinput:focus, .gpwinput:hover {
    color : rgba(0, 0, 0, 0.9);
}


.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);
}

.char-block {
    display : inline-block;
    border  : 4px solid transparent;
}

.char {
    /*display: inline-block;*/
    /*border: 1px solid rgba(0, 0, 0, 0.2);*/
    /*min-height: 64px;*/
    /*padding: 16px;*/
    background-color : rgba(0, 0, 0, 0.05);
    position         : relative;
    border           : 1px solid rgba(0, 0, 0, 0.025);
    border-radius    : 4px;
    padding          : 4px;
}

.char:hover {
    /*background-color : rgba(0, 0, 0, 0.1);*/
    /*background-color : #ffffff;*/
    border     : 1px solid rgba(0, 0, 0, 0.1);
    box-shadow : 0 3px 8px -3px rgba(0, 0, 0, 0.25);
}

.char .codepoint {
    top     : 0;
    left    : 0;
    opacity : 0.5;
}

.char:hover .codepoint {
    opacity : 1.0;
}

.char .symbol {
    display          : inline-block;
    font-size        : 24px;
    border           : 1px solid rgba(0, 0, 0, 0.1);
    background-color : #ffffff;
    border-radius    : 4px;
    padding          : 2px;
    min-width        : 16px;
    margin           : 4px 0;
    line-height      : 28px;
    text-decoration  : none;
}

.char .name {
    text-align  : center;
    height      : 50px;
    font-weight : 100;
}

.char .ucode {
    font-weight : 100;
}

.char:hover .ucode {
    background-color : #0072c6;
    color            : #ffffff;
}

.char .options {
    transition : all 100ms ease;
    font-size  : 11px;
    opacity    : 0.72;
    z-index    : 5;
}

.char:hover .options {
    transition : all 100ms ease;
    opacity    : 1.0;
}

.char .options a {
    display         : inline-block;
    margin          : 0 4px;
    font-size       : 11px;
    text-decoration : none;
}

.unicode-sections a {
    display : inline-block;
    margin  : 0 4px;
}

.unicode-plane-block {
    /*border-radius : 4px;*/
}

.link-unicode-block {
    color     : rgba(0, 0, 0, 0.5);
    display   : inline-block;
    padding   : 1px 4px;
    font-size : 12px;
    margin    : 0 1px;
}

.link-unicode-block:hover {
    color           : #000000;
    text-decoration : underline;
}

.link-unicode-block.active {
    background-color : #000000;
    color            : #ffffff;
    text-decoration  : none;
}

form {
    /*padding : 16px 0;*/
}

.hxd {
    background-color : rgba(0, 0, 0, 0.05);
    padding          : 4px;
    border-radius    : 3px;
    color            : rgba(0, 0, 0, 0.9);
}

.hxd-pagination a {

}

.ihxd-container {
    background-color : rgba(0, 0, 0, 0.05);
    padding          : 8px;
}

.ihxd-byte-hex {
    color : rgba(0, 0, 0, 0.9);
}

.ihxd-ebyte {
    display    : inline-block;
    margin     : 1px 2px;
    font-size  : 13px;
    width      : 24px;
    box-shadow : none;
    padding    : 4px;
    border     : 1px solid rgba(0, 0, 0, 0.25);
    text-align : center;
}

.ihxd-ebyte.ihxd-modified {
    background-color : #00ad45;
    /*color: #ffffff !important;*/
}

.ihxd-ebyte.ihxd-modified:hover {
    background-color : #0072c6;
    /*color: #ffffff !important;*/
}

.ihxd-invalid {
    background-color : #cc0022 !important;
    /*color: #ffffff;*/
}

.ihxd-byte-hex:nth-child(even) {
    color : rgba(0, 0, 0, 0.5);
}

.ihxd-byte-chr {
    color : rgba(0, 0, 0, 0.8);
}

.ihxd-line {
    line-height : normal;
}

.ihxd-chr-line-boundaries {
    cursor         : default;
    pointer-events : none;
    display        : inline-block;
    color          : rgba(0, 0, 0, 0.5);
    margin         : 0 2px;
}

.ihxd-sbyte.hovering {
    opacity          : 1.0;
    /*background-color: rgba(0, 0, 0, 0.2);*/
    outline          : 1px solid rgba(0, 0, 0, 0.5);
    outline-offset   : 1px;
    z-index          : 32;
    background-color : #ffffff;
}

.cc {
    transition       : all 100ms ease;
    box-sizing       : border-box;
    position         : fixed;
    bottom           : 8px;
    right            : 8px;
    width            : auto;
    z-index          : 999;
    background-color : rgba(0, 0, 0, 0.1);
    background-color : rgba(222, 255, 255, 0.9);
    padding          : 6px 12px;
    font-size        : 12px;
    border           : 1px solid rgba(0, 0, 0, 0.25);
    opacity          : 0.84;
    margin           : 0 auto;
    box-shadow       : 0 0 16px -4px rgba(0, 0, 0, 0.2);
    color            : rgba(0, 0, 0, 0.75);
    align-items      : center;
    border-radius    : 4px;
    transform        : scale(0.96);
}

.cc .btn {
    /*background-color : rgba(0, 0, 0, 0.2);*/
    /*color            : rgba(0, 0, 0, 0.8);*/
}

.cc:hover {
    transition : all 100ms ease;
    opacity    : 1.0;
    box-shadow : 0 0 16px -4px rgba(0, 0, 0, 0.4);
    /*background-color : rgba(222, 255, 222, 0.96);*/
    transform  : scale(1.0);
}

.cc a {
    display   : inline-block;
    /*padding      : 4px 8px;*/
    font-size : 12px;
    /*margin-left  : 4px;*/
    /*margin-right : 4px;*/
    /*margin-left : 6px;*/
}

.hover-full-opacity:hover {
    opacity : 0.5;
}

.hover-half-opacity:hover {
    opacity : 0.5;
}

.hover-text-black:hover {
    color : #000000 !important;
}

.hover-text-primary:hover {
    color : var(--color-primary) !important;
}

form label.d-block {
    padding : 4px 0;
    margin  : 4px 0;
}

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;
    /*background-color : #f8f8f8;*/
    padding       : 1rem;
    border-radius : 5px;
}

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

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

/* Status page */

.statuspage {
    display         : flex;
    justify-content : center;
    align-items     : center;
    flex-direction  : column;
    height          : 100vh;
    text-align      : center;
    color           : #ffffff;
}

.statuspage > div {
    padding : 5px;
}

.statuscode {
    font-size : 6vh;
}

.statustext {
    font-size : 4vh;
}

nav a {
    display         : inline-block;
    margin-left     : 4px;
    padding         : 8px;
    text-decoration : none;
    color           : var(--text-color);
}

.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;
}


/*.hxd-file .hxd-pagination, .hxd-file .hxd-advanced {*/
/*    pointer-events: none !important;*/
/*    opacity: 0.5 !important;*/
/*}*/

/* Media queries */

@media screen and (max-width : 600px) {
    .char .symbol {
        font-size : 16px;
        min-width : 40px;
    }
    
    .char-block {
        border-width : 4px;
        min-width    : 25%;
    }
    
    .char .options a {
        display : block;
        margin  : 4px 0;
        padding : 8px 0;
    }
}