html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.notfooter {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
    padding: 2rem 1.5rem;
}

footer mark {
    color: black;
    background-color: white;
}

header section.hero {
    background-color: #CCCCCC;
}

header .hero-body {
    padding: 1rem 1.5rem;
}

.step-is-hidden {
    display: none;
}

.step-is-invisible {
    visibility: hidden;
}

video {
    width: 80%;
    padding-top: 1rem;
}

.box-with-border {
    border: 1px solid black;
}

.can-toggle-password { }
.toggle-password {
    cursor: pointer;
    pointer-events: initial;
    z-index: 20;
}

.required::after {
    margin-left: 0.5em;
    content: "*";
}

.row-add, .row-delete, .row-up, .row-down {
    cursor: pointer;
}

.positioning-datapoint {
    background-color: lightsalmon;
}

#datapointsTable input[type=text] {
    width: 6em;
}

.result-size {
    width: 100%;
    height: 400px;
    min-height: 400px;
    padding: 0;
}

.result-box {
    padding: 0;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);
    color: #4a4a4a;
    display: block;
}

#result-nccode {
    overflow: auto;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

#result-nccode .nc-G0 {
    background-color: palegreen;
}

#chosenMachine {
    color: red;
}

.company-name::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    opacity: 0.5;
    content: "\f1ad";
}

.subtitle .company-name::before,
.title .company-name::before {
    font-size: 50%;
}

.admin-only::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    opacity: 0.5;
    content: "\f3ed";
    margin-left: 0.5em;
}

.subtitle .admin-only::after,
.title .admin-only::after { font-size: 50%; }

#cookie {
    position: fixed;
    left: 40%;
    bottom: 30px;
    width: 20%;
    padding: 15px;
    max-width: 300px;
    box-shadow: 0px 1px 2px 0px #999999;
    background-color: white;
    z-index: 2;
}