:root {
    --litetext: rgb(20,20,20,100%) !important;
    --liteback: rgb(235,235,235,100%) !important;
    --darkback: rgb(20,20,20,100%) !important;
    --darktext: rgb(235,235,235,100%) !important;
    --active: blue;
    --altered: greenyellow;
    --animate-duration: 1500ms;
    --animate-delay: 50ms;
    --backColor: gainsboro;
    --background: white;
    --border-color: lightblue;
    --borders: 1px solid var(--border-color);
    --borderRadius: 8px;
    --buttonface: buttonface;
    --boxShadow: 2px 2px 2px silver, 4px 4px 4px var(--shadow);
    --disabled: grey;
    --eachday: blue;
    --errorColor: red;
    --errorBackColor: white;
    --font: 16px "Times New Roman", Verdana, Ariel, sans-serif;
    --header: lightblue;
    --headColor: lightblue;
    --highColor: green;
    --hover: lightgray;
    --lowColor: red;
    --onnow: rgb(0,255,0,40%);
    --required: red;
    --shadow: gray;
    --textcolor: black;
    --textShadow: .5px .5px 2px rgb(35 35 35);
    --xLarge: larger;
    --fresh: green;
    --stale: orange;
    --rotten: red;
}
@keyframes onAutoFillStart {
    from {
    }
    to {
    }
}
@keyframes onAutoFillCancel {
    from {
    }
    to {
    }
}
#swal2-input {
    width: 86% !important;
}
div[aria-labelledby="swal2-title"] {
    display: revert !important;
}
.regclosed {
    color: red;
    border: var(--borders);
}
.ofs {
    display: inline-block;
    position: absolute;
    top: 0px;
    left: -1000px;
    max-width: 1px;
    max-height: 1px;
}
a[href="index.php"] {
    position: absolute;
    right: 10px;
    top: 45px;
    transform:translateX(-50%);
}
#logo {
    padding: 0px;
    float: inline-start;
    width: 87px;
    height: 40px;
}
input:-webkit-autofill {
    animation-name: onAutoFillStart;
    transition: background-color 50000s ease-in-out 0s;
}
input:not(:-webkit-autofill) {
    animation-name: onAutoFillCancel;
}
* {
    box-sizing: border-box;
}
html, body {
    margin: 0px;
    padding: 0px;
    font: var(--font);
}
header {
    margin: 5px 3px 0px 3px;
    border: var(--borders);
}
a {
    font-size: large;
    text-shadow: .25px .25px .25px var(--border-color);
}
button {
    cursor: pointer;
}
    button :disabled, button[disabled] {
        color: var(--disabled);
        background-color: var(--buttonface);
    }
figure {
    margin: 0px;
    padding: 0px;
}
footer {
    position: sticky;
    bottom: 0px;
    left: 0px;
    border: var(--borders);
    padding: 0px;
    margin: 0px;
    max-height: 4lh;
    overflow: auto;
}
h1, h2 {
    margin: 5px;
}
    h1, h2 a {
        font-size: x-large;
    }
i {
    float: left;
}
iframe {
    color: inherit;
    background-color: inherit;
}
.form-container {
    border: var(--borders);
    display: grid;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgb(0, 0, 0,10%);
    margin-top: 30px;
}
    .form-container input {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        grid-column: span 1;
        text-align: left;
    }
.lite-mode {
    background-color: var(--liteback);
    color: var(--litetext);
}
.dark-mode {
    background-color: var(--darkback);
    color: var(--darktext);
}
.ASC::after {
    content: "\2191 ";
    margin-left: 2px;
    border: var(--borders);
    border-radius: 3px;
}
.DESC::after {
    content: "\2193";
    margin-left: 2px;
    border: var(--borders);
    border-radius: 3px;
}
.merge-icon {
    margin-right: 5px;
    height: 1em !important;
    width: 1em !important;
    box-shadow: none !important;
    cursor: none;
    display: inline;
}
.nowImg {
    border-radius: 10px;
    height: 42px;
    width: 142px;
    margin-top: 3px;
}
.blink {
    border: var(--borders);
    animation: blinkingText .75s infinite;
    border-radius: var(--borderRadius);
}
@keyframes blinkingText {
    0% {
        color: var(--textcolor);
    }
    49% {
        color: yellow;
    }
    60% {
        color: transparent;
    }
    99% {
        color: transparent;
    }
    100% {
        color: var(--textcolor);
    }
}
.blink {
    border: var(--borders);
    animation: blinker 1s linear infinite;
    border-radius: var(--borderRadius);
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
.center {
    text-align: center;
}
.chnerrs {
    width: 224px;
    height: auto;
}
.container {
    text-align: center;
}
.crypto1span {
    display: flex;
    grid-column: span 1;
    text-align: right
}
.crypto2span {
    padding: 0px;
    margin: 0px;
    grid-column: span 2;
}
.crazy-web-btn {
    box-shadow: var(--boxShadow);
    border-radius: var(--borderRadius);
    margin-top: 3px;
}
.donate {
    margin-left: -300px;
}
.edit {
    border: var(--borders);
}
.entry-content {
    /*opacity: 0.5;*/
}
.err {
    border-radius: var(--borderRadius);
    border-width: 1px;
    border-style: solid;
    border-color: var(--errorColor);
    color: var(--errorColor);
    background-color: var(--errorBackColor);
}
    .err:after {
        content: "\00a0"
    }
.errborder {
    border: 2px solid var(--errorColor);
    box-shadow: 1px 1px 3px var(--errorColor);
}
.expcoll {
    height: 1em;
    cursor: pointer;
    position: absolute;
    right: 3px;
}
    .expcoll p {
        position: relative;
        display: inline;
        right: -3px;
        top: -1px;
        font-weight: bold;
    }
    .expcoll img {
        height: 1.2em;
        width: 1.2em;
        border-radius: 50%;
        margin: 1px 3px 0px 1px;
        padding: 1px;
        box-shadow: 1px 2px 2px var(--shadow);
    }
.fakes {
    display: inline;
    border-radius: var(--borderRadius);
    border-width: 1px;
    border-style: solid;
    border-color: var(--highColor);
    margin-left: 5px;
    padding: 0px 5px 0px 5px;
}
.footer {
    padding: 0px;
    margin: 0px;
    display:none;
}
.footer-b {
    display: inline;
    position: relative;
    left: 10px;
    bottom: 0px;
    margin-top: 15px;
    float: inline-start;
}
.footer-c {
    padding-top: 4px;
    margin-left: 26%;
    float: inline-start;
}
.forLbl {
    margin: 5px;
}
.framecont {
    padding: 0px;
    margin: 0px;
    height: 90vh;
}
.green {
    color:green;
}
.login, .register, .forgot, .un-register {
    border: var(--borders);
    font-size: var(--xLarge);
    display: inline-block;
    box-shadow: var(--boxShadow);
    border-radius: var(--borderRadius);
    margin-top: 30px;
    padding: 10px;
    width:stretch;
}
.hidden {
    visibility: hidden;
}
.ModalBack {
    position: fixed;
    opacity: 0.4;
    top: 0px;
    left: 0px;
    min-width: 100%;
    height: 600vh;
}
.nomargin {
    margin:0px;
}
.nowrap {
    white-space: nowrap;
}
.orange {
    color: orange;
}
.pad-top {
    margin-top: 5px;
    padding: 5px;
}
.qr {
    box-shadow: var(--boxShadow);
    border: var(--borders);
    border-radius: var(--borderRadius);
}
.red{
    color:red;
}
.right {
    text-align:right;
}
.site-content {
    padding: 10px;
}
.topnav {
    background-color: var(--header);
    color: var(--textcolor);
    overflow: hidden;
    text-align: center;
}
    .topnav a {
        float: none;
        display: inline-block;
        color: var(--textcolor);
        text-align: center;
        padding: 10px 8px;
        text-decoration: none;
        font-size: 17px;
    }
        .topnav a:hover {
            background-color: var(--hover);
            color: var(--textcolor);
        }
        /* Add an active class to highlight the current page */
        .topnav a.active {
            background-color: var(--active);
            color: white;
        }
.trash {
    background-image: url("/img/trash.svg") !important;
    background-repeat: no-repeat !important;
    background-position: left;
    padding-left: 30px;
}
.underline {
    text-decoration:underline;
}
.xx-large {
    font-size:xx-large;
}
.disp-none {
    display: none !important;
}
.eml {
    width: 180px;
    height: 65px;
}
.olHead {
    border: var(--borders);
    box-shadow: -2px -2px inset var(--shadow);
    color: black;
    background-color: var(--headColor);
    display: flex;
    justify-content: left;
}
    .olHead span {
        padding: 0px 4px 0px 4px;
        border: var(--borders);
        margin: 1px;
        cursor: pointer;
        height: 1.1lh !important;
    }
    .olHead > label > .onnow {
        display: inline !important;
    }
.table {
    /* border: var(--borders);
    border-radius: var(--borderRadius);*/
}
.table-row {
    display: flex;
    width: 100%;
}
.tr {
    /*border: var(--borders);*/
}
.td {
    display: inline-block;
    margin: 2px;
}
    .td input[type="submit"] {
        font-size: var(--xLarge);
    }
#adminview {
    padding: 10px;
}
#content {
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
    height: -webkit-fill-available;
    height: -moz-available;
    height: fill-available;
    height: 100%;
    /*background-image: url(/images/flag-collage.png) no-repeat center;*/
    background-size: contain;
}
#litedark {
    position: fixed;
    cursor: pointer;
    bottom: 10px;
    right: 10px;
    width: 35px;
}
#lockBack {
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 1000%;
}
    #lockBack span {
        position: absolute;
        left: 49vw;
        top: 30%;
        transform: translate(-50%,-50%);
        opacity: 1;
        background-color: var(--background);
        color: var(--textcolor);
        text-align: center;
        font-size: 50px;
        font-weight: bold;
        border: var(--borders);
        border-radius: var(--borderRadius);
        padding: 0px 10px;
        box-shadow: var(--boxShadow);
        max-width: 95vw;
        width: max-content;
    }
#lockdiv {
    overflow: hidden;
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 1000%;
    display: block;
    background-color: var(--background);
    opacity: 0.2;
}
#migrateDiv {
    text-align: left;
    display: inline-block;
}
#msgbx {
    font-size: 50px;
    position: fixed;
    padding: 10px;
    box-shadow: var(--boxShadow);
    max-width: 94vw;
    width: max-content;
    left: 49vw;
    top: 30%;
    transform: translate(-50%, -50%);
    border: var(--borders);
    border-radius: var(--borderRadius);
}
#newsdiv {
    border: var(--borders);
    margin: 10px 2px;
    width: fit-content;
    display: inline-block;
}
    #newsdiv img {
        height: 18px;
        width: 18px;
        margin-top: 3px;
        cursor: pointer;
        box-shadow: silver 1px 1px 1px, rgb(0, 0, 0,70%) 2px 2px 2px;
        border: var(--borders);
        border-radius: 5px;
    }
    #newsdiv .bold {
        font-weight: bold;
    }
    #newsdiv .red {
        color: red;
        text-shadow: .15px .15px .15px var(--border-color);
    }
    #newsdiv .news.news-row {
        display: flex;
        padding: 1px 5px 1px 5px;
    }
    #newsdiv dtcol {
        width: 5em;
        text-align: left;
        float: left;
        padding: 3px;
        border-top: 1px solid var(--border-color);
        margin-top: -2px;
    }
    #newsdiv nws {
        float: left;
        padding: 2px 5px 0px 5px;
        text-align: left;
        border-left: 3px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }
    #newsdiv input[type="text"] {
        width: 50em;
    }
#primary {
    text-align: center;
}
#tutorial {
    display: inline-block;
    text-align: justify;
    list-style-type: decimal;
    margin: 1px 1px;
    padding-inline-start: 20px;
}
    #tutorial > li {
        padding: 3px 0px;
        opacity: 0.75;
    }
#username, #password, #email, #pwrepeat {
    float: right;
    font-size: large;
    width: 15rem;
    margin: 2px;
}
@media screen and (orientation: portrait), screen and (max-width: 401px) {
    .footer-b {
        display:none;
    }
    .donate {
        margin-left: revert;
    }
    body {
        width: 99vw;
    }
    #newsdiv {
        width: 98vw;
    }
        #newsdiv input[type="text"] {
            max-width: 25em;
        }
}
form > div > div > .td {
    border-radius: var(--borderRadius);
    padding: 3px;
}
    form > div > div > .td > label {
        display: none;
    }
    form > div > div > .td > input[type="text"]:focus, form > div > div > .td > input[type="email"]:focus, form > div > div > .td > input[type="new-password"]:focus, form > div > div > .td > input[type="password"]:focus {
        outline: 0;
    }
        form > div > div > .td > input[type="text"]:focus + label, form > div > div > .td > input[type="email"]:focus + label, form > div > div > .td > input[type="new-password"]:focus + label, form > div > div > .td > input[type="password"]:focus + label {
            opacity: 0;
        }
    form > div > div > .td > input[type="text"]:valid + label, form > div > div > .td > input[type="email"]:valid + label, form > div > div > .td > input[type="new-password"]:valid + label, form > div > div > .td > input[type="password"]:valid + label {
        opacity: 0;
    }
    form > div > div > .td > input[type="text"]:valid ~ .requirements, form > div > div > .td > input[type="email"]:valid ~ .requirements, form > div > div > .td > input[type="new-password"]:valid ~ .requirements, form > div > div > .td > input[type="password"]:valid ~ .requirements {
        display: content;
    }
    form > div > div > .td > input[type="text"]:invalid:not(:focus):not(:placeholder-shown), form > div > div > .td > input[type="email"]:invalid:not(:focus):not(:placeholder-shown), form > div > div > .td > input[type="new-password"]:invalid:not(:focus):not(:placeholder-shown), form > div > div > .td > input[type="password"]:invalid:not(:focus):not(:placeholder-shown) {
    }
        form > div > div > .td > input[type="text"]:invalid:not(:focus):not(:placeholder-shown) + label, form > div > div > .td > input[type="email"]:invalid:not(:focus):not(:placeholder-shown) + label, form > div > div > .td > input[type="new-password"]:invalid:not(:focus):not(:placeholder-shown) + label, form > div > div > .td > input[type="password"]:invalid:not(:focus):not(:placeholder-shown) + label {
            opacity: 0;
        }
    form > div > div > .td > input[type="text"]:invalid:focus:not(:placeholder-shown) ~ .requirements, form > div > div > .td > input[type="email"]:invalid:focus:not(:placeholder-shown) ~ .requirements, form > div > div > .td > input[type="new-password"]:invalid:focus:not(:placeholder-shown) ~ .requirements, form > div > div > .td > input[type="password"]:invalid:focus:not(:placeholder-shown) ~ .requirements {
        max-height: 200px;
        padding: 0 30px 20px 50px;
        display: contents;
    }
    form > div > div > .td .requirements {
        padding: 0 30px 0 50px;
        color: #999;
        max-height: 0;
        transition: 0.28s;
        overflow: hidden;
        color: red;
        font-style: italic;
        display: none;
    }