:root{
    --green:#26a100;
    --purple:#8501ff;
}
emph{
    font-style:italic;
}
h3{
    margin:16px 0;
}
th>input{
    margin-bottom:0;
}
p {
    margin-bottom:8px;
}
ul>li{
    margin-bottom:0.2rem;
}
tr.success{
    background:#daffda;
}
tr.error {
    background:#ffe5e5;
}
table input[type="checkbox"] {
    cursor:pointer;
}
.top-nav img {
    width:100px;
}
.right{
    float:right;
}
.top-nav-title>a{
    margin-right:4px;
    vertical-align:middle;
}
.top-nav-title>.user{
    display:inline-block;
    position:relative;
    width:200px;
}
.top-nav-title>.user>.small{
    display:block;
    font-size:0.8em;
    color:#CCC;
}
.container,.top-nav{
    max-width:none;
}
.row{
    margin-bottom:16px;
}
table{
    margin-bottom:16px;
}
textarea{
    height:auto;
}
.slider{
    height:50px;
    position:relative;
    --var-padding:8px;
}
.slider>svg{
    height:100%;
    width:200px;
}
.slider>svg>g.max{
    position:absolute;
    transform:translate(calc(100% - var(--var-padding)), 50%);
}
.slider>svg>g.min{
    position:absolute;
    transform:translate(var(--var-padding), 50%);
}
.slider>svg .tick{
    stroke:black;
}
.slider>svg circle{
    fill:red;
    cursor:pointer;
}
.slider>svg circle.hovered,
.slider>svg circle.dragging
{
    fill:orange;
}
.button{
    margin-left:8px;
    margin-top:16px;
}
.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
    background:var(--green);
    border: 1px solid var(--green);
}
.button:hover, button:hover, input[type='button']:hover, input[type='reset']:hover, input[type='submit']:hover{
    background:var(--purple);
    border: 1px solid var(--purple);
}
.side-nav hr{
    margin:16px 0;
    border:0.1rem solid #CCC;
}
.side-nav-item>svg{
    width:16px;
    margin-right:8px;
}
.side-nav-item.active{
    font-weight:bold;
}
a.side-nav-item.active>svg,
a.side-nav-item:hover>svg{
    color:var(--purple);
}
a.side-nav-item.active,
a.side-nav-item:hover{
    color:var(--green);
}
a.side-nav-item.active>span,
a.side-nav-item:hover>span{
    color:var(--green);
}
.documents.view.content,
.documents.form.content{
    overflow-x:auto;
}
.row-markdown{
    background:#EEE;
    box-sizing:border-box;
    border:1px solid #ddd;
    overflow-x:auto;
}
.row-markdown > div{
    padding:2px;
    min-width:500px;
}
.row-markdown.row-3> div{
    width:33%;
}
.row-markdown.row-4> div{
    width:25%;
}
.view.content .markdown{
    padding:8px;
    margin:0;
}
.view.content .markdown>h3{
    margin:0;
    padding:4px 0;
    background:#ddd;
    text-align:center;
    font-weight:bold;
    font-size:16px;
    border-top-right-radius:4px;
    border-top-left-radius:4px;
}
.view.content .markdown-inner{
    padding:4px 8px;
    box-sizing:border-box;
    background:white;
    border:1px solid #ddd;
    border-bottom-right-radius:4px;
    border-bottom-left-radius:4px;
}
table a{
    display:inline-block;
}
table th.actions{
    width:100px;
}
table td.actions a{
    padding:0;
}
table td.actions a>svg{
    width:16px;
    height:16px;
    padding:4px;
}
th.rotate {
    height: 140px;
    white-space: nowrap;
}

th.rotate > div {
    transform: 
    /* Magic Numbers */
    translate(-15px, 50px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
    width: 30px;
}
th.rotate > div > span {
    padding: 5px 10px;
}