h1 {
    font-size:3rem;
}
h2 {
    font-size:2rem;
}
h3 {
    font-size:1.5rem;
}
table tbody tr {
    transition:background-color .2s;
}
table tbody tr:hover {
    background-color:#E0E0E0;
}
table th, table td {
    padding:.35rem;
}
td[data-name='action'] span {
    cursor:pointer;
    padding:0 .5rem;
}
span[data-disabled='true'] {
    opacity:.5;
}

span.tag {
    padding:.25rem .5rem;
    color:#FFFFFF;
    font-weight:bold;
    border-radius:.25rem;
    box-shadow:0 0 .75rem -.25rem #000000;
    margin:0 .5rem;
    display:inline-block;
    text-align:center;
}
span.tag:first-of-type {
    margin-left:0;
}

div#message-container {
    position:fixed;
    right:0;
    bottom:0;
    margin:2rem;
    width:25rem;
}
div#message-container > div.message {
    position:relative;
    height:0;
    width:100%;
    box-sizing: border-box;
    overflow:hidden;
    color:#FFFFFFE0;
    text-shadow:0 0 .75rem #00000080;
    font-weight:bold;
}
div#message-container > div.message:not(:first-child) {
    margin-top:1rem;
}
div#message-container > div.message::after {
    content:"";
    position:absolute;
    height:.4rem;
    width:100%;
    bottom:0;
    left:0;
    background-color:#00000030;
}

div#message-container > div.message.message-error {
    background-color:#d64d4d;
}
div#message-container > div.message.message-hint {
    background-color:#e39e54;
}
div#message-container > div.message.message-success {
    background-color:#9ed670;
}
div#message-container > div.message > div.content {
    padding:1rem 2rem;
}

div#popup-container {
    position:fixed;
    width:100vw;
    height:100vh;
    left:0;
    top:0;
    overflow:auto;
    background-color:#00000040;
    backdrop-filter: blur(4px);
    display:none;
}

div#popup-container > div#popup-box {
    position:relative;
    display:flex;
    justify-content: center;
}

div#popup-container > div#popup-box > div#popup-content {
    position:relative;
    background-color:#FFFFFF;
    width:100%;
    max-width:50vw;
    min-width:55rem;
    overflow:auto;
}

div#popup-container > div#popup-box {
    margin-top:1rem;
}

@media (max-width: 639px) {
    div#popup-container > div#popup-box > div#popup-content {
        min-width:calc(100vw - 2.5rem);
    }
}

div#popup-container > div#popup-box > div#popup-content > div#popup-close {
    position:absolute;
    right:1rem;
    top:1rem;
    font-size:2.5rem;
    transition:color .2s;
}
div#popup-container > div#popup-box > div#popup-content > div#popup-close:hover {
    cursor:pointer;
    color:#606060;
}

div#popup-container > div#popup-box > div#popup-content h2 {
    margin-bottom:1.5rem;
}

div#footer a {
    text-decoration: underline;
}

div#footer a:not(:last-child) {
    margin-right:1rem;
}

span.icon-group {background-color:#00000020; margin:0 .25rem; border-radius:.125rem; display:inline-block; width:3.5rem; overflow:hidden; white-space:nowrap;}
span.icon {margin:.75rem .25rem; font-weight:bold;}
span.icon.disabled {opacity:.5;}
span.success {color:#9ed670;}
span.error {color:#d64d4d;}

body div.tooltip {
    opacity:0;
    background-color:rgba(0, 0, 0, .875);
    color:#FFFFFF;
    padding:.5rem .75rem;
    position:absolute;
    border-radius:2px;
    z-index:999999999;
    pointer-events:none;
    max-width:25rem;
    word-break:break-word;
    font-size:1rem;
}

body div.tooltip {animation:tooltipAnimation 0s 0s forwards;}

body div.tooltip > div.tooltip-arrow {
    position:absolute;
    border-style:solid;
    border-width:.6rem .6rem 0 .6rem;
    border-color:rgba(0,0,0,.825) transparent transparent transparent;
    left:50%;
    margin-left:-.6rem;
    top:100%;
}

body div.tooltip.up > div.tooltip-arrow {
    top:initial;
    bottom:100%;
    border-width:0 .6rem .6rem .6rem;
    border-color:transparent transparent rgba(0,0,0,.75) transparent;
}

@keyframes tooltipAnimation {
    to {opacity:1;}
}

@media (max-width: 639px) {
    html {
        font-size:18px;
    }
    h1 {
        font-size:2rem;
    }
    h2 {
        font-size:1.5rem;
    }
    h3 {
        font-size:1.25rem;
    }
    table thead tr {
        display:none;
    }
    div#message-container {
        width:calc(100% - 2rem);
        margin:0;
        left:1rem;
        bottom:1rem;
    }
}

button[data-type="submit"] {
    position:relative;
}
button[data-type="submit"]:disabled {
    --tw-bg-opacity:1;
    background-color:rgba(209,213,219,var(--tw-bg-opacity));
}

button[data-type="submit"]:disabled::after {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    content:"\f1ce";
    display:flex;
    align-items: center;
    justify-content: center;
    font-family:"Font Awesome 5 Free", serif;
    animation:spin 1.5s linear infinite;
    color:#000000;
    text-shadow:0 0 1rem black;
}