/* Publish Profiles */
body {
    overflow-x: hidden;
    overflow-y: hidden;
}

body.dev main {
    border-top: 4px solid blue;
}

body.staging main {
    border-top: 4px solid red;
}

lmnhq-panel[name] {
    overflow: hidden;
}

lmnhq-panel[name="ausactive"] p:last-of-type,
lmnhq-panel[name="register"] p:last-of-type {
    margin-top: 0;
    margin-bottom: var(--padding-panel);
    text-align: left;
}

lmnhq-panel[name="ausactive"] p:first-of-type {
    margin-bottom: var(--padding-panel);
}

lmnhq-panel[name="ausactive"] .third > img {
    margin: 0;
}

/* step2 */

body.step2 {
    overflow-y: auto !important;
    padding: 1rem 0;
    height: unset;
}

body.step2 h2 {
    margin-top: 0;
}

body.step2 [name="user-type"] h2 {
    text-align: center;
}

body.step2 [name="user-type"] p {
    text-align: center;
}

body.step2 lmnhq-panel[name="user-type"] form {
    opacity: 0.8;
    flex-basis: 100%;
}

body.step2 lmnhq-panel[name="user-type"]>form:hover {
    cursor: pointer;
    opacity: 1;
}

body.step2 lmnhq-panel[name="user-type"] form:first-of-type {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

body.step2 lmnhq-panel[name="user-type"] form:last-of-type {
    border-left: 1px solid var(--color-input-border);
}

body.step2 lmnhq-panel form>div {
    margin-top: 0;
}

body.step2 lmnhq-panel form>p>span {
    display: inline;
}

body.step2 label span.optional {
    float: right;
    opacity: 0.5;
}

/* Timetabled Class */

.role-facility [name*="timetabled-class"] h2:before {
    content: unset;
}

.detail-block__avatar.no-bg-img+.detail-block__half .detail-block__section:nth-child(2) {
    display: none;
}

.cards .card .fcs-avatar.no-bg-img:before,
.detail-block__avatar.no-bg-img:before {
    content: "";
    background-size: 5rem;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.3;
}

.cards .card .fcs-avatar.no-bg-img:before,
lmnhq-menu-button ul li span.no-bg-img:not(:only-of-type):first-of-type {
    background-size: var(--height-line-small);
    opacity: 0.3;
}

/* FullCalendar */
a.fc-unallocated {
    opacity: 0.4;
}

/* timetabled-class */

section.cards>div.half {
    flex-basis: calc((100% - (var(--padding-panel) * 3)) / 2);
    height: 5rem;
    background-color: var(--color-background-white);
    box-shadow: 1px 1px 1px 0 var(--color-box-shadow);
    border-radius: var(--container-border-radius);
    margin-top: var(--padding-panel);
    border: 1px solid var(--color-button-background-disabled);
    padding: var(--padding-panel) 0;
    opacity: 0.9;
}

section.cards>div.trainer,
section.cards>div.facility {
    height: 8rem;
}

section.cards>div span,
section.cards>div span span {
    display: inline;
}

section.cards>div>div>span:first-of-type {
    font-weight: var(--font-weight-bold);
}

section.cards>div.half:not(.timetabled-class):hover {
    opacity: 1;
    cursor: pointer;
}

/* add-class */
.cards .card .fcs-avatar.no-bg-img {
    background-color: var(--color-cancel);
}

/* qualification */
[name="qualification"] [data-bind="preview"] {
    margin: var(--padding-panel);
}

[name="qualification"] [data-bind="preview"] embed {
    min-height: 50rem;
}

/* add-trainer-facility-class-requirement */
span[name="for"] {
    font-weight: var(--font-weight-bold);
}

span[name="for"] .color {
    margin-right: calc(var(--padding-panel) / 2);
    width: var(--height-line);
    height: var(--height-line);
    display: block;
    float: left;
    border-radius: 50%;
}

.fc-daygrid-day-number {
    font-size: 0.8em;
    line-height: 0.8em;
}

.no-before::before {
    content: unset;
}

.no-before>[data-bind$="vatar"] {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
}

form.embedded {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

form.embedded.half>* {
    flex-basis: calc(50% - var(--padding-panel));
    width: calc(50% - var(--padding-panel));
}

form.embedded.half>.full {
    flex-basis: 100%;
}

[name="invite-trainers"] p {
    margin: var(--padding-panel);
    width: 100%;
}

lmnhq-paginated-table[name="notifications"] lmnhq-paginated-row.status---1 {
    opacity: 0.3;
    cursor: unset !important;
}

lmnhq-paginated-table[name="notifications"] lmnhq-paginated-row.status---1:hover {
    background-color: unset !important;
}

.daySelector {
    flex-basis: calc(100% - (var(--padding-panel) * 2));
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.daySelector input {
    display: none !important;
}

.daySelector input[type=checkbox]+label {
    margin-top: 0;
    flex-basis: calc((100% - (6 * var(--padding-panel))) / 7);
    color: var(--color-ok-text);
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    background: var(--color-cancel);
}

.daySelector input[type=checkbox]+label:hover {
    background: var(--color-cancel-hover);
}

.daySelector input[type=checkbox]:checked+label {
    background: var(--color-ok);
}

.daySelector label:first-of-type {
    flex-basis: 100%;
}

section.build {
    margin-top: var(--padding-panel);
    border-top: 1px solid var(--color-input-border);
    border-bottom: none;
    width: 100%;
}

lmnhq-dialog > img {
    width: 100%;
}

lmnhq-panel[name="qualification"],
lmnhq-panel[name="profileTab"],
lmnhq-panel[name="add-class"],
lmnhq-panel[group="profile"] {
    overflow-y: auto;
}

lmnhq-menu-button > ul > li > span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

lmnhq-menu-button > ul > li > ul > li > span{
    display: block;
    float: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Profile */
[name=devicesContainer] {
    flex-basis: 100%;
    margin: 0 var(--padding-panel);
}

[name=devicesContainer] > .device-item {
    display: flex;
    justify-content: space-between;
    line-height: 3rem;
    border-bottom: 1px solid var(--color-input-border);
}

[name=devicesContainer] > .device-item .third {
    overflow: hidden;
    text-overflow: ellipsis;
    flex-basis: calc((100% - (var(--padding-panel) * 2)) / 3)
}

[name=devicesContainer] > .device-item > div > form {
    display: block;
    margin-top: calc((3rem - var(--height-line)) / 2);
}

[name=devicesContainer] > .device-item  button {
    width: unset;
    display: block;
    position: relative;
    margin: 0;
    height: var(--height-line);
    line-height: var(--height-line);
    background-color: var(--color-ok);
    border-width: 0;
    border-radius: var(--container-border-radius);
    color: var(--color-ok-text);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    min-width: var(--height-line);
    padding: 0 var(--padding-input-x);
    cursor: pointer;
    font-style: normal;
    float: right;
    margin-left: var(--padding-panel);
}

/* editTimetabledClass */

lmnhq-panel[name="edit-timetabled-class"]:not(.past-class) form > div span.past-class,
lmnhq-panel[name="edit-timetabled-class"].past-class form > div select,
lmnhq-panel[name="edit-timetabled-class"].past-class form > div input:not([name="attendance"]), 
lmnhq-panel[name="edit-timetabled-class"].past-class form > div lmnhq-menu-button {
    display: none;
}

lmnhq-panel[name="edit-timetabled-class"]:not(.past-class) form > div select,
lmnhq-panel[name="edit-timetabled-class"]:not(.past-class) form > div input,
lmnhq-panel[name="edit-timetabled-class"]:not(.past-class) form > div lmnhq-menu-button {
    display: inline-block;
}

lmnhq-panel[name="edit-timetabled-class"] form > div span.past-class {
    font-weight: var(--font-weight-bold);
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

lmnhq-panel[name="edit-timetabled-class"] form > div span[data-bind="trainer.name"].past-class {
    width: auto;
}

lmnhq-dialog[name="galleryDialog"] .focalPoint {
    display: block;
    background-color: red;
    border-radius: 5px;
    width: 10px;
    height: 10px;
    position: absolute;
    margin: 0 !important;
}

/* User Switcher */
.user-switcher-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #000;
    color: #fff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--padding-panel) / 2) var(--padding-panel);
}

.user-switcher-info {
    display: flex;
    align-items: center;
    gap: 20px;
    line-height: var(--height-input-field);
}

.user-switcher-impersonating {
    margin-left: calc(var(--padding-panel) / 2);
    color: #ffcc00;
}

.user-switcher-controls {
    display: flex;
    align-items: center;
    gap: calc(var(--padding-panel) / 2);
}

.user-switcher-controls lmnhq-menu-button {
    min-width: 250px;
}

.user-switcher-switch-btn {
    background-color: var(--color-ok);
    color: var(--color-ok-text);
    border-width: 0;
    border-radius: var(--container-border-radius);
    cursor: pointer;
    height: var(--height-input-field);
    padding: 0 calc(var(--padding-panel) / 2);
}

.user-switcher-exit-btn {
    background-color: var(--color-delete);
    color: var(--color-ok-text);
    border-width: 0;
    border-radius: var(--container-border-radius);
    cursor: pointer;
    height: var(--height-input-field);
    padding: 0 calc(var(--padding-panel) / 2);
}