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;
    justify-content: 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;
    margin: 0;
    position: static;
    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;
}

.build-browser-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.build-browser-filter-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.build-browser-table {
    font-size: 0.92rem;
}

.build-browser-table th,
.build-browser-table td {
    vertical-align: middle;
}

.build-version-display {
    white-space: pre-line;
}

/* Members area: title with the shared-session line beside it, above the rule, on every Members page */
.members-title-row {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
}

.members-session-line {
    align-items: center;
    display: flex;
    gap: .5rem;
    margin-bottom: .6rem;
}

.members-session-line [type=submit] {
    display: inline-block;
    margin: 0;
}

.members-pill {
    font-size: .9rem;
    font-weight: 500;
}

.members-dash .card {
    min-height: 10rem;
}

.members-dash .card-text {
    color: #6c757d;
    min-height: 2.5rem;
}

/* Create User panel (Members) */
.role-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.role-group .btn { min-width: 10rem; text-align: left; }
.role-group .btn-check:checked + .btn .fa-square { display: none; }
.role-group .btn-check:not(:checked) + .btn .fa-square-check { display: none; }
.role-group .btn i { width: 1.1rem; margin-right: .35rem; }
.step-list { list-style: none; padding-left: 0; margin: .5rem 0 0; }
.step-list li { padding: .15rem 0; }
.step-list i { width: 1.3rem; }
/* Create User: Link to existing TimeTrack account (plan decision 14). Present only while TimeTrack has members with no Self Service account. */
.tt-info { cursor: help; color: #6c757d; margin-left: .25rem; }
.tt-combo { position: relative; max-width: 36rem; }
.tt-combo .form-control { padding-right: 2.25rem; }
.tt-clear { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #6c757d; font-size: 1.4rem; line-height: 1; padding: 0 .25rem; }
.tt-clear:hover { color: #212529; }
.tt-menu { width: 100%; max-height: 16rem; overflow-y: auto; margin-top: .125rem; }
.tt-menu .dropdown-item { white-space: normal; }
.tt-menu .dropdown-item .small { display: block; }

/* Enrolment page (new user) */
.qr-box { border: 1px solid #dee2e6; padding: .5rem; background: #fff; display: inline-block; }
.qr-box svg { display: block; }
.key-box, .code-box { font-family: Consolas, "Courier New", monospace; background: #f5f5f5; border: 1px solid #dee2e6; border-radius: .25rem; padding: .5rem .75rem; }
.code-box { columns: 2; max-width: 20rem; }
.code-box div { padding: .1rem 0; letter-spacing: .05em; }
.once-warning { border: 1px solid #ffc107; background: #fff8e1; border-radius: .25rem; padding: .75rem 1rem; }

/* Login as (view only) */
.members-pill.impersonating { background: #ffc107 !important; color: #212529; border: 1px solid #e0a800; }
.members-pill-menu { cursor: pointer; }
.impersonation-banner { background: #fff3cd; border: 1px solid #ffc107; border-left: 6px solid #e0a800; border-radius: .25rem; padding: .6rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.impersonation-banner .grow { flex: 1 1 auto; }