* { font-family: Verdana; font-size: medium; box-sizing: border-box; }
p { margin: 0.25em auto; }

body
{
    display: flex;
    flex-flow: column;
    margin: 0;
    padding: 0;
    height: 100vh;
    color: white;
    background-color: #222;
}

header
{
    display: flex;
    align-items: center;
    background-color: #375a7f;
    cursor: default;
}
.hdr-log
{
    font-size: 1.2rem;
    padding: 0.25em 0.5rem 0.25em 0.25em;
    white-space: nowrap;
}
.hdrcrm-wrp
{
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    justify-content: end;
    align-items: center;
}
.hdrcrm-but
{
    flex: 0 0 auto;
    display: inline-block;
    background-color: #375a7f;
    color: white;
    border: none;
    text-align: center;
    vertical-align: baseline;
    cursor: pointer;
    padding: 0.2em 0.3em;
    font-size: 0.9rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    margin: 0.2em;
    text-decoration: none;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    outline: none;
}

main
{
    align-self: stretch;
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    align-items: stretch;
    color: white;
    overflow-y: auto;
    max-width: 100%;
    justify-content: center;
}

footer
{
    display: flex;
    flex-flow: column nowrap;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 0.25em;
    overflow: auto;
    color: white;
}

form
{
    display: flex;
    flex-flow: column nowrap;
    flex: 0 0 auto;
}


#overlay
{
    position: fixed; /* Sit on top of the page content  */
    display: block; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    background: rgba(0,0,0,0.5) url(/LiCRA.gif) no-repeat center center;
}

.subheading { font-size: 1.1rem; margin: 1em auto; text-decoration: underline; text-align: center;}

.main-img { object-fit: contain; margin: auto; width: 95%; height: 95%; }
.legaltext { font-size: 0.65em; text-align:center; margin:0.5em auto; color: white; flex: 1 1 auto; }
.errortext { text-align: center; color: #e74c3c; margin-top: 0.8em; margin-bottom: 0.5em; }

.flxrow { display: flex; flex-flow: column; justify-content: center; align-items: center; flex: 0 0 auto; overflow: auto; }

.main-col-fix { display: flex; margin: 0.25em 0; flex-flow: row nowrap; align-items: baseline; color: white; flex: 0 0 auto; overflow: auto; }
.main-col-var { display: flex; margin:0 auto; flex-flow: row nowrap; align-items: baseline; color: white; flex: 1 1 auto; overflow: auto; }

.btn-row { display: flex; flex-flow: row; justify-content: center; align-items: center; flex: 0 0 auto; overflow-x: auto; max-width: 100%; padding: 1em 0;}

#mwrap { align-self:stretch; width: 100%; height: 100%; display:flex; flex-flow: row wrap; flex: 1 1 100%; }
#lsec { display:flex; flex-flow: column nowrap; flex: 1 1 50%; align-items: center; justify-content: center; }
#rsec { display:flex; flex-flow: column nowrap; flex: 1 1 50%; align-items: center; justify-content: center; }

.flx-s { justify-content: flex-start; }
.flx-e { justify-content: flex-end; }

.saleline { margin: 2rem 0.5rem; text-align: center; }

.panel-table { display: grid; justify-content: center; align-items: baseline; grid-template-columns: repeat(2, auto);}
.panel-row { display: table-row; grid-template-columns: min-content auto;}
.panel-prompt { display: block; white-space: nowrap; text-align: right; font-size: 0.75rem; padding-right: 0.5em; }
.panel-entry { display: block; text-align: left; padding: 0.2em 0; }

.btn
{
    flex: 0 0 auto;
    display: inline-block;
    background-color: #375a7f;
    border: none;
    text-align: center;
    vertical-align: baseline;
    cursor: pointer;
    padding: 0.2em 0.3em;
    font-size: 0.9rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    margin: 0.2em;
    text-decoration: none;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    outline: none;
}
.btn:active { transform: translate(0.1em, 0.1em); }
.btn:hover { color: yellow; background-color: #263f59; }
.btn.used { color: darkgrey; }
.btn.used:hover { color: yellow; background-color: #263f59; }
.btn.fresh { color: white; }

.inprow { display: flex; flex-flow: column nowrap; align-items: start; flex: 1 1 auto; padding: 1em 0; align-self: center;}

.inputwrap
{
    position: relative;
}

input[type="text"], & input[type="password"]
{
    margin: 0.1rem;
    border: 0;
    padding: 0.6rem 0.3rem 0.1rem 0.3rem;
    border-radius: 0.3rem;
    & + label
    {
        position: absolute;
        left: 0.1rem;
        top: 0.1rem;
        padding: 0.6rem 0.3rem 0.1rem 0.3rem;
        z-index: 1;
        color: black;
        pointer-events: none;
        transition: all 0.2s ease-in-out;
        color: rgba(0,0,0,0.75);
    }
    &:focus ~ label, &:not(:placeholder-shown) ~ label, &:autofill ~ label
    {
        transform: translateY(-0.6rem);
        font-size: 0.5rem;
    }
}
input[type="checkbox"]
{
    margin: 0.1rem 0.3rem 0.1rem 0.1rem;
    border: 0;
    padding: 0.6rem 0.3rem 0.1rem 0.3rem;
}

/*
form input[type="text"] + label, form input[type="password"] + label
{
    position: absolute;
    left: 0.1rem;
    top: 0.1rem;
    padding: 0.6rem 0.3rem 0.1rem 0.3rem;
    z-index: 1;
    color: black;
    pointer-events: none;
    transition: all 0.2s ease-in-out;
    color: rgba(0,0,0,0.75);
}
form input[type="text"], form input[type="password"]
{
    padding: 0.6rem 0.3rem 0.1rem 0.3rem;
    border-radius: 0.3rem;
}
*/
/*
form input[type="text"]:focus ~ label, form input[type="text"]:not(:placeholder-shown) ~ label, form input[type="text"]:autofill ~ label,
form input[type="password"]:focus ~ label, form input[type="password"]:not(:placeholder-shown) ~ label, form input[type="password"]:autofill ~ label
{
    transform: translateY(-0.6rem);
    font-size: 0.5rem;
}
*/
/*
form .inputwrap input[type="checkbox"]
{
    display: none;
}

form .checkslider
{
    display: flex;
    width: 45px;
    height: 20px;
    margin: 0.1rem;
    border-radius: 25px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    background-color: white;
}
form .checkslider::before
{
    position: absolute;
    content: '';
    width: 18px;
    height: 18px;
    background: #222;
    border-radius: 50%;
    top: 1px;
    left: 1px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
form + .inputwrap + .checkslider + input[type="checkbox"]:checked
{
    background: green;
}

form + .inputwrap + .checkslider::before
{
    background: red;
    transform: translateX(25px);
}
*/

/* The switch - the box around the slider. */
.switch {  position: relative; top: 0px; display: inline-block; width: 50px; height: 20px; }
/* Hide default HTML checkbox */
.switch input { opacity: 0; width: 0; height: 0; }
/* The slider. */
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #375a7f; -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 12px; width: 16px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: #00bc8c; }
input:focus + .slider { box-shadow: 0 0 1px #e74c3c; outline: none; }
input:checked + .slider:before { -webkit-transform: translateX(24px); -ms-transform: translateX(24px); transform: translateX(24px); }

/* Rounded sliders. */
.slider.round { border-radius: 1.3em; }
.slider.round:before { border-radius: 50%; }

@media only screen and (pointer: fine)
{
    .btn-row { flex-wrap: wrap; }
}