html { font-size: 14px; }

@media (min-width: 768px) {
    html { font-size: 16px; }
}

html {
    min-height: 100%;
    position: relative;
}

body { margin-bottom: 60px; }

.form-group { margin-bottom: 10px }

.success-message { color: blue; }

.error-message { color: red; }

.center-content { justify-content: center; }

.loading:hover path { fill: red; }

.validation-errors { padding-left: 20px; }

.validation-errors li { color: red; }

.divider {
    border: 1px solid #e3e2e2;
    margin-top: 40px;
    margin-bottom: 40px;
}

.password-box {
    border: solid 1px #0d6efd;
    padding: 10px;
    text-align: center;
    font-size: large;
    background-color: #f5f5f5;
    height: 50px;
    margin-bottom: 10px;
}

[type=submit]{
    cursor: pointer;
    margin: 0 auto;
    display: block;
}

div.wait-overlay {
    align-items: center;
    background-color: black;
    display: flex;
    height: 100vh;
    left: 0;
    opacity: 0.3;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000000;
}

div.wait-spinner {
    -moz-animation-duration: 2000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: spin;
    -moz-animation-timing-function: linear;
    -ms-animation-duration: 2000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-name: spin;
    -ms-animation-timing-function: linear;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: spin;
    -webkit-animation-timing-function: linear;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-name: spin;
    animation-timing-function: linear;
    height: 100px;
    left: 50%;
    margin: auto;
    position: absolute;
    width: 100px;
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }

    to { -ms-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }

    to { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }

    to { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }
}

.item-loading { padding: 0 0 10px; }

.item-loading .line {
    background-color: #4b9cdb;
    border-radius: 15px;
    display: inline-block;
    height: 15px;
    width: 15px;
}

.item-loading .line:nth-last-child(1) { animation: item-loading-amimation 0.6s 0.1s linear infinite; }

.item-loading .line:nth-last-child(2) { animation: item-loading-amimation 0.6s 0.2s linear infinite; }

.item-loading .line:nth-last-child(3) { animation: item-loading-amimation 0.6s 0.3s linear infinite; }


@keyframes item-loading-amimation {

0 { transform: translate(0, 0); }

50% { transform: translate(0, 15px); }

100% { transform: translate(0, 0); }

}

.status-running { color: lawngreen; }

.status-stopped { color: red; }

.machine-action-menu {
    list-style: none;
    padding-left: 10px;
}

.machine-action-menu li { margin-bottom: 10px; }

.machine-action-menu li input { margin-right: 10px; }

.machine-action-menu li textarea { vertical-align: top; }

.machine-history {
    max-height: 200px;
    min-width: 460px;
    overflow: auto;
}

.status-cancelled { text-decoration: line-through; }

.status-scheduled { color: blue; }

.status-done { color: grey }

.last-refreshed {
    margin-right: 10px;
    text-align: right;
}