@import 'colors';
@import 'palette'; /* algorithmic palette to visually link related info */
@import 'fonts';
@import 'code';

@keyframes blink {

    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes attentionflash {

    0% {
        background: $color_highlight;
        box-shadow: 0 0.1rem 0 $color_highlight, 0 0 1rem $color_highlight;
    }

    49% {
        background: $color_highlight;
        box-shadow: 0 0.1rem 0 $color_highlight, 0 0 1rem $color_highlight;
    }

    50% {
        background: opacify(darken(desaturate($color_highlight, 50%), 20%), 20%);
        box-shadow: 0 0.1rem 0 opacify($color_highlight, -100%), 0 0 1rem opacify($color_highlight, -100%);
        text-shadow: 0 0 1rem $color_highlight;
    }

    99% {
        background: opacify(darken(desaturate($color_highlight, 50%), 20%), 20%);
        box-shadow: 0 0.1rem 0 opacify($color_highlight, -100%), 0 0 1rem opacify($color_highlight, -100%);
        text-shadow: 0 0 1rem $color_highlight;
    }
    100% {
        background: $color_highlight;
        box-shadow: 0 0.1rem 0 $color_highlight, 0 0 1rem $color_highlight;
    }

}

@keyframes dangerflash {

    0% {
        color: $color_font_dark;
        background: $color_danger;
        box-shadow: 0 0.1rem 0 $color_danger, 0 0 1rem $color_danger;
    }

    49% {
        color: $color_font_dark;
        background: $color_danger;
        box-shadow: 0 0.1rem 0 $color_danger, 0 0 1rem $color_danger;
    }

    50% {
        color: desaturate($color_danger, 20%);
        background: opacify(darken(desaturate($color_danger, 50%), 20%), 20%);
        box-shadow: 0 0.1rem 0 opacify($color_danger, -100%), 0 0 1rem opacify($color_danger, -100%);
        text-shadow: 0 0 1rem $color_danger;
    }

    99% {
        color: desaturate($color_danger, 20%);
        background: opacify(darken(desaturate($color_danger, 50%), 20%), 20%);
        box-shadow: 0 0.1rem 0 opacify($color_danger, -100%), 0 0 1rem opacify($color_danger, -100%);
        text-shadow: 0 0 1rem $color_danger;
    }
    100% {
        color: $color_font_dark;
        background: $color_danger;
        box-shadow: 0 0.1rem 0 $color_danger, 0 0 1rem $color_danger;
    }
}

@keyframes marquee {

    0% {
        transform: translateX(0%);
    }

    25% {
        transform: translateX(-100%);
    }

    75% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0%);
    }
}

@media (min-width: 56rem) {

    #logo-link {
        display: flex !important;
    }

    body > header {
        border-bottom: none !important;

        .sticky { 
            width: 13rem;
            top: 11.5rem !important; /* 7.5rem logo height + 2rem space at top and bottom */
            margin-bottom: 4rem; /* needed at least in firefox, to avoid vertical cutoff. should be the same as vertical padding for logo */
        }
    }

    main {
        padding-left: 1rem;
        max-width: 40rem;

        &:nth-child(3) { /* means dashbar is rendered */
            margin-top: 3rem;
        }
    }
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    overflow-y: scroll; /* always show vertical scrollbar, viewport dependant widths stay the same */
    background-image: url('/theme/bg.svg'), linear-gradient(45deg, lighten(opacify($color_background_dark, 100%), 15%), mix($color_highlight, $color_background_dark, 25%));
    /*background-image: url('/theme/pooscape-probablyold.svg'), linear-gradient(to bottom, opacify($color_background_dark, 0.2), darken(opacify($color_highlight, 0.2), 40%) 100%);*/
    /*background-image: url('/theme/test.png');*/
    background-color: #333;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /*color: rgba(255, 255, 255, 0.9);*/
    color: $color_font_light;
    font-family: 'Clear Sans', sans;
    overflow-wrap: break-word;
    hyphens: auto;

    &#burncpu:target {
        background-image: url('/theme/bg.svg#burncpu'), linear-gradient(45deg, lighten(opacify($color_background_dark, 100%), 15%), mix($color_highlight, $color_background_dark, 25%));
    }
}

body {

    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0;
    max-width: 55rem;
    min-height: 100vh;

    section.dashbar {

        position: fixed;
        z-index: 9001;
        left: 0;
        top: 0;
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        display: inherit;
        background: $color_background_light;
        color: $color_font_dark;
        font-family: 'Orbitron', sans;
        font-weight: 100;
        font-size: 1rem;

        & > * {
            margin-left: 0.25rem;
        }

        nav {
            ul {
                li {
                    display: inline-block;
                    border-right: 1px solid $color_background_dark;

                    a {
                        display: block;
                        padding: 0 0.25rem;
                        font-size: 1rem;
                    }
                }
            }
        }

        a {

            color: $color_font_dark;
            text-shadow: 0 0 5rem $color_font_dark;
            transition: color 0.3s ease-out, text-shadow 0.3s ease-out;

            &.trace {
                color: $color_font_dark !important;
                text-shadow: 0 0 0.25rem lighten($color_highlight, 30%);
            }

            &:hover,
            &:focus,
            &.active {
                color: $color_font_dark !important;
                text-shadow: 0 0 0.25rem opacify($color_highlight, 100%);
            }
        }

    }

    & > header {

        position: sticky;
        top: 0;
        flex-basis: 15rem;
        flex-shrink: 1;
        flex-grow: 15;
        display: flex;
        flex-direction: column;
        align-self: stretch;
        align-items: center;
        justify-content: space-around;
        max-height: 100vh;
        box-sizing: border-box;
        padding: 1rem;
        z-index: 200;
        background-color: $color_background_dark;
        /*border-left: 0.25rem solid;
        border-right: 0.25rem solid;
        border-bottom: 0.25rem solid;
        border-color: $color_border;*/
        
        /*-webkit-clip-path: polygon(0 0, 0 calc(100% - 3rem), 50% 100%, 100% calc(100% - 3rem), 100% 0);*/

        overflow: hidden;

        &:nth-child(2) { /* means dashbar is rendered */
            margin-top: 3rem;
        }

        & > .sticky {
            overflow-y: auto;
            overflow-x: hidden;
            position: sticky;
            top: 0;
            margin-top: -50%;
            flex-shrink: 1;
        }

        nav.menu.main {

            padding: 1rem 0;

            ul {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: flex-start;

                li {
                    flex-shrink: 1;
                    min-width: 7.5rem;
                    margin-right: 0.5rem;
                    margin-top: 0.5rem;
                    font-size: 1.2rem;
                    line-height: 1;


                    a {
                        width: 100%;

                        &::after {
                            content: "█";
                            margin-left: 0.25rem;
                            /*font-size: 75%;
                            vertical-align: 10%;*/
                            text-shadow: $color_highlight 0 0 1rem;
                            opacity: 0;
                        }

                        &:hover,
                        &:focus {
                        
                            &::after {
                                animation: blink 0.5s ease-in-out infinite;
                            }
                        }
                    }
                }
            }
        }

        #logo-link {

            flex-basis: 7.5rem;
            flex-grow: 1;
            flex-shrink: 0;
            align-self: center;
            justify-self: flex-end;
            position: sticky;
            bottom: calc(100% - 9.5rem);
            max-height: 7.5rem;
            display: none;

            &:hover,
            &:focus {
                outline: none;
            }

            #logo {
                height: 7.5rem;
                pointer-events: none;
            }
        }
    }
}


main {

    /* Flex of main children */
    display: flex;
    flex-direction: column;
    /* "parent" flex */
    flex-basis: 40rem;
    flex-shrink: 1;
    flex-grow: 40;

    box-sizing: border-box;
    
    a {
        text-decoration: underline;
    }


    & > header {

        position: sticky;
        top: 0;
        padding: 2rem 1rem;
        background: $color_background_light;
        color: $color_font_dark;
        z-index: 110;

        h1 {
            margin: 0;
            transform: rotate(-5deg);
            text-align: center;
            text-shadow: 0 0 0.5rem $color_font_dark;
            color: $color_font_light;
            line-height: 120%;
            position: relative;
            margin-bottom: 1rem;
            /*line-height: 0.8;*/
            max-width: calc(100vw - 2rem);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        nav.menu {
            display: block;
            top: 0;
            z-index: 120;
            font-size: 1.8rem;

            &:last-child {
                margin-bottom: -2rem;
            }

            ul li a {
                padding: 0.25rem;
            }

            &.breadcrumb {

                margin: 0;
                margin-top: -2rem;
                margin-bottom: 3rem;

                font-size: 1.1rem;
                letter-spacing: 0.1rem;

                ul {
                    li {
                        &:after {
                            content: '/';
                            position: relative;
                            top: -0.6rem;
                        }

                        &:last-child:after {
                            content: '';
                        }
                        a {

                            padding-top: 0.5rem;
                            margin-right: 0.25rem;
                            color: $color_font_dark;
                            background-image: linear-gradient(to top, rgba(0,0,0, 1.0), rgba(0,0,0, 1.0) 100%);
                            background-size: 100% 0;
                            background-repeat: no-repeat;
                            background-position: top;
                            transition: background 0.3s, color 0.3s;
                            max-width: 8ex;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;

                            &:hover,
                            &:focus,
                            &.active {
                                /*background-image: none;*/
                                outline: none;
                                background-size: 100% 100%;
                                color: $color_highlight;
                            }
                        }
                    }
                }
            }


            &.actions {

                margin-top: 2rem;

                ul {
                    li {
                        a {
                            color: $color_font_dark;
                            
                            background-image: linear-gradient(to bottom, rgba(0,0,0, 1.0), rgba(0,0,0, 1.0) 100%);
                            background-size: 100% 0;
                            background-repeat: no-repeat;
                            background-position: bottom;
                            transition: background 0.3s, color 0.3s;

                            &.trace {
                                color: $color_font_dark;
                                text-shadow: 0 0 0.25rem $color_highlight;
                            }

                            &:hover,
                            &:focus,
                            &.active,
                            &.trace:hover,
                            &.trace:focus {
                                background-size: 100% 100%;
                                color: $color_highlight;
                            }
                        }
                    }
                }
            }

            &.related {
                background: #000;
                font-size: 1.4rem;

                a {
                    transition: color 0.3s;
                    background-image: none;

                }
            }
        }
    }

    #content {

        display: flex; /* Why did this need to be flexed again ? */
        flex-basis: 100%;
        flex-direction: column;

        *:target {
            padding-top: 15rem; /* offset :target'ed items to avoid having them under the sticky header */
            display: block;
        }

        & > * {
            flex-grow: 1;
            display: block;
            position: relative;
            box-sizing: border-box;
            width: 100%;
            /*background: $color_background_dark;*/
            /*border: 0.25rem solid;
            border-top: none;
            border-bottom: none;
            border-color: $color_border;*/
        }

        & > .comments,
        & article.content-type-tag.mode-full > .content > .description {
                margin-top: 0.5rem;
                background: $color_background_dark;
                padding: 1rem;
        }

        & > .comments {
            header,
            div.content,
            section.controls {
                background: transparent;
            }

            section.controls {
                padding: 0 1rem;
            }
        }
    }

    & > footer {

        margin: 0.25rem 0;
        padding: 0.5rem;
        background: $color_background_dark;

        &, a {
            color: opacify($color_font_light, -0.3);
        }

        div.footer-wrapper {

            text-align: right;
            font-size: 80%;
        }
    }
}

nav.menu {

    font-family: 'Orbitron', sans;

    ul {
        margin: 0;
        padding: 0;

        li {
            display: inline;
            list-style: none;
            font-size: 1rem;
            font-weight: 100;

            a {
                outline: none;
                text-decoration: none;
                display: inline-block;
                position:relative;

                &.trace {
                    color: lighten($color_highlight, 30%);
                }

                &:hover,
                &:focus,
                &.trace:hover,
                &.trace:focus {
                    color: $color_highlight;
                }
            }
        }
    }

    &.pagination {

        margin-top: 0.5rem;
        text-align: center;

        a {
            display: inline-block;
            background: $color_background_light;
            width: 2rem;
            height: 2rem;
            line-height: 2.3rem; /* +0.3rem based on fiddling around in ff inspector */
            font-weight: 800; /* proper bold for Orbitron */
            border-radius: 1rem;
            padding: 0;
            margin: 0;
            color: $color_font_dark;
            text-decoration: none !important;
            transition: background 0.3s;

            &:hover,
            &:focus,
            &.active {
                color: $color_font_dark; /* needed because links by default turn to $color_highlight */
                background: $color_highlight;
            }
        }
    }

    &.related-add,
    &.certtoken-add {

        margin: 1rem 0;

        a {
            padding: 8px;
            padding-bottom: 0;
            padding-left: 40px;
            line-height: 30px;
            height: 32px;
            background: url('/theme/icons/plus.svg') no-repeat;
            background-color: $color_background_dark;
            background-size: 32px 32px;
            background-position: 4px 4px;
            font-weight: 400;

            transition: background 0.3s linear, color 0.3s linear;

            &:hover,
            &:focus,
            &.active {
                background-image: url('/theme/icons/plus.svg#active');
                background-color: $color_highlight;
                color: $color_font_dark;
            }
        }
    }
}

ul {
    list-style: square;

    &.listing {
        margin: 0;
        /*margin-top: 1rem; DELETEME */
        padding-left: 0;
        list-style: none;

        & > li {
            margin-top: 1rem;

            /*&:first-child {
                margin-top: 0;
            }*/

            & > div.comment {
                /* comments have transparent bg by default, avoid breaking the design when showing them outside of an article */
                background: $color_background_dark;
                padding: 1rem;
            }
        }
    }
}

strong {
    font-weight: bold;
}

a {

    color: $color_font_light;
    text-decoration: none;
    transition: color 0.3s;

    &:hover,
    &:focus,
    &.active,
    &.trace {
        color: $color_highlight;
    }
}

table {

    table-layout: fixed;
    width: 100%;

    thead {
        tr:first-of-type {
            background: $color_background_light;
            color: $color_font_dark;
        }
    }

    tbody {
        word-break: break-all; /* make absolutely positively sure table content will not overflow on the x-axis */
    }

    tr:nth-of-type(2n){
        background: opacify($color_background_light, -0.4);
        color: $color_font_dark;
    }

    tr.active {
        background: opacify(lighten($color_highlight, 10%), -0.4);
        color: $color_font_dark;
    }

    &.notifications {
        td:last-child {
            width: 5rem;

            div.checkbox {
                text-align: center;
            }
        }
    }
}

div.tree {
            
    
    details {

        transition: max-height 0.3s, background 0.3s;

        summary {
            &:focus {
                outline: none;
                text-decoration: underline;
            }
        }

        &[open] {

            background: rgba(255,255,255, 0.03);


            ul.branch {
                max-height: 100%;
            }
        }

        ul.branch {

            max-height: 0;
            padding-left: 2.2rem;
            margin: 0;
            margin-top: 1rem;


            li.leaf {

                position: relative;

                &::before {
                    content: "";
                    position: absolute;
                    width: 2rem;
                    height: 0;
                    margin-left: -2rem;
                    margin-top: 1rem;
                    border-top: 2px solid $color_highlight;
                }

                &::after {
                    content: "";
                    position: absolute;
                    height: 100%;
                    margin-left: -2rem;
                    top: -1rem;
                    border-left: 2px solid $color_highlight;
                }

                &:last-child {
                    &::after {
                        height: 2rem;
                    }
                }
            }
        }
    }

    ul {
    
        li {
            list-style: none;
        }
    }
}

article,
form {

    & > header,
    & > div.content,
    & > footer {
        padding: 1rem;
    }

    & > header {

        background: $color_background_light;
        padding: 0.5rem 1rem;

        h2 {

            max-width: calc(100vw - 2rem); 
            margin: 0;
            line-height: 1.2;
            text-align: center;
            color: $color_font_light;
            text-shadow: 0 0 0.25em $color_background_dark, 0 0 0.5em $color_background_dark;

            a {
                display: block;
                color: $color_font_light;
                text-decoration: none;
                transition: color 0.3s linear, text-shadow 0.3s;

                &:hover,
                &:focus {
                    color: $color_font_light;
                    text-shadow: 0 0 0.25em $color_highlight, 0 0 0.5em $color_background_dark;
                }
            }
        }
    }

    & > div.content {
        background: $color_background_dark;

        h2, h3, h4, h5, h6 {
            text-align: center;
        }
    }
}

article {

    line-height: 1.5;
    font-weight: 300;
    font-size: 1.1rem;
    text-align: justify;

    p:first-child {
        margin-top: 0;
    }

    &.mode-inline {
        & > .content {
            background: transparent;
            padding: 0;
        }
    }

    img,
    video,
    object {
        display: block;
        max-width: 100%;
        margin: 0 auto;
        opacity: 0.8;
        transition: opacity 0.3s ease-in;

        &:hover,
        &:focus {
            opacity: 1;
        }
    }

    nav {
        font-weight: normal;
    }
    
    & > header {    
        /*margin-bottom: 0.5rem; DELETEME */
    }

    & > footer {

        padding: 0.25rem 1rem;
        background: $color_background_light;
        color: $color_font_dark;

        &::after {
            content: "Don't mind me, I'm just clearing shit up.";
            display: block;
            visibility: hidden;
            height: 0;
            clear: both;
        }

        nav.menu.actions,
        span.author {

            display: inline-block;

            a {

                display: inline-block;
                font-family: 'Orbitron';
                font-size: 1rem;
                color: $color_font_dark !important; /* needed because otherwise some a.trace:hover will override this */
                text-decoration: none;
                transition: color 0.3s, text-shadow 0.3s;
                font-weight: normal;

                &:hover,
                &:focus,
                &.active {
                    text-shadow: 0 0 0.25rem opacify($color_highlight, 1);
                }
            }
        }

        nav.menu.actions {
            float: right;
            clear: both;
        }

        .date {
            display: block;
            float: right;
            clear: both;
            font-family: 'Orbitron';
            font-size: 0.9rem;
        }

    }

    &.content-type-listing,
    &.content-type-tag.mode-full {
    
        & > div.content {
            background: transparent;
            padding: 0;
        }

        & > footer {
            background: transparent !important;
        }
    }

    &.content-type-container {
        article > .content {
            /* nested containers shouldn't stack background color on top of each other */
            background: transparent;
        }
    }

    &.content-type-tag.mode-full {
        & > header {

            margin: 0.5rem 0;
            background: $color_background_dark;

            h2 {
                color: $color_font_light;
            }
        }
    }

    &.content-type-search.mode-full {

        & > header {
            background: $color_background_dark;
            padding: 0; /* padding already in form */

            form > footer {
                background: transparent;
            }
        }

        & > div.content {

            background: transparent;
            padding: 0;

        }

        & > footer {
            background: transparent !important;
        }
    }

    &.content-type-file {

        .content {
            a {

                display: block;
                padding-left: 4rem;
                background: url('/theme/icons/download.svg') no-repeat;
                background-size: contain;
                line-height: 4rem;

                &:hover,
                &:focus {
                    background-image: url('/theme/icons/download.svg#active');
                }
            }

            .file-size {

                display: block;
                font-size: 0.8em;
                pointer-events: none; /* keeps file-size from subtracting from the linked area */
                margin-top: -1.25em; /* 1/0.8 */
                margin-left: 4rem;
                color: opacify($color_font_light, -20%);
            }
        }
    }

    .content-type-image.mode-teaser,
    .content-type-video.mode-teaser,
    .content-type-audio.mode-teaser {

        .content {
            padding: 0;

            img {
                display: block;
                width: 100%;
            }
        }
    }

}

audio,
video {
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Orbitron', sans;
  font-style: italic;
  margin: 0;
  margin-top: 2em;
  margin-bottom: 0.5em;
  padding: 0;
  line-height: 1;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.2rem;
    font-weight: normal;
}

p {
    margin-top: 0;
    margin-bottom: 1em;

    &:first-letter {
        font-size: 1.2em;
    }

    article.mode-full > .content > &:first-of-type {

        &:first-letter {
            height: 20rem;
            width: 2rem;
            float: left;
            font-family: 'Orbitron';
            font-size: 2rem;
            font-weight: 100;
            padding: 1rem;
            margin-right: 0.5rem;
            /*border-radius: 0 2rem 2rem 2rem; */
            background-clip: text;
            line-height: 2rem;
            background: $color_background_light;
            color: $color_font_dark;
        }
    }
}

input.toggle {

    display: none;

    & + label.toggle {

        display: block;
        width: 1rem;
        height: 1rem;
        cursor: pointer;

    }
}


div.comment {

    border-left: 0.25rem solid $color_background_light;
    padding: 0.25rem;
    
    div.replies {
        padding-left: 0.75rem;

        & form {
            overflow: hidden;
            display: block;
            width: 0;
            max-height: 0;
            transition: max-height 0.3s, width 0.3s;

            textarea {
                max-height: 6rem;
            }
        }

        input.toggle {

            display: none;

            & + label.toggle {
                background: url('/theme/icons/reply.svg');
                padding: 0;
            }

            &:hover + label.toggle,
            &:checked + label.toggle {

                background: url('/theme/icons/reply.svg#active');
            }

            &:checked + label.toggle + form {

                width: 100%;
                max-height: 100vh;
            }
        }
    }
}

form#ChallengeForm {

    img.captcha {
        width: auto;
    }
}

pre,
code {
    
    max-width: calc(100vw - 2rem); /* 1rem padding on each side has to be subtracted */
    overflow-x: auto;
    font-size: 0.8rem;
    font-weight: normal;
    white-space: pre-wrap; /* avoids horizontal scroll if lines are too long */
}


.text-center {
    
    display: block;
    text-align: center;
}

.modal {

    display: block;
    position: fixed;
    width: 0;
    height: 0;
    z-index: -10;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.3s linear, width 0.3s linear, height 0.3s linear;

    &:target {

        z-index: 1000;
        width: 100vw;
        height: 100vh;
        opacity: 1;
        padding-top: 0 !important;

        a.modal-background {

            display: block;
            position: absolute;
            width: 100%;
            height: 100%;

            background: $color_background_dark;
        }

        a.modal-link {

            display: block;
            margin: 10rem;

            img {

                position: relative; /* make sure parent z-index is applied */
                max-width: calc(100vw - 20rem);
                max-height: calc(100vh - 20rem);
                width: 100%;
                object-fit: contain;
                background: $color_background_dark;
            }
        }
    }
}

#search {


        input {
                display: inline-block;
                font-weight: bold;
                width: 50%;

                &:focus {
                    width: 70%;
                }
        }
        button {
                display: inline;
                width: 30%;
        }

}

ul.tag-list {

    margin: 0.5rem 0;
    padding-left: 0;
    display: block; /* mainly to make it "bigger" in order to make the title attribute trigger on more space */

    li {
        margin-top: 0;
        list-style: none;
        display: inline-block;

        a {
            background: $color_background_light;
            color: $color_font_dark;
            font-size: 80%;
            text-decoration: none !important;
            padding: 0.25rem;
            transition: background 0.3s, color 0.3s, padding 0.3s ease-in-out;

            &:hover,
            &:focus {
                background: $color_highlight;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }
        }
    }
}

span.help {

    color: transparentize($color_font_light, 20%);
    float: right;

    &::after {
        content: '?';
        display: inline-block;
        width: 1rem;
        height: 1rem;
        background: $color_highlight;
        border-radius: 0.5rem;
        font-weight: bold;
        font-size: 0.8rem;
        text-align: center;
        line-height: 1rem;
        margin-left: 0.25rem;
    }

}

span.debug-hint {

    display: inline-block !important;
    position: absolute !important;
    transform: translateX(-1rem);
    z-index: 65535 !important;
    width: 1rem !important;
    height: 1rem !important;
    max-width: 1rem !important;
    max-height: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1rem !important;
    background: opacify($color_danger, -20%) !important;
    color: $color_font_dark !important;
    font-family: 'Clear Sans', sans !important;
    font-size: 0.8rem !important;
    font-weight: bold !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: 0.5rem !important;
    cursor: help;
}

object svg.plot {
    background: red !important;
    
}

@import 'form';
@import 'custom';
