body div,
body nav {
    opacity: unset;
}

.loadingText {
    display: none;
}

.onlyContent {
    display: contents;
}

.eigthHundred {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.thousand {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#loginBox,
#userInfoTextContainer,
#roomSelectionBox,
#roomBookingBox,
#userBookingText {
    margin-top: 1rem;
    display: none;
}

.userInfoTextContainer {
    height: 500px;
}

#mainMenuBox {
    display: none;
}

.ui-datepicker-inline {
    margin-left: auto;
    margin-right: auto;
}

.bookingButton {
    margin: 0.5rem;
}

.mainMenuButton {
    margin-bottom: 0.5rem;
}

#alertContainer {
    position: fixed;
    width: 100%;
    z-index: 9002;
    height: 100%;
    pointer-events: none;
}

.alert {
    max-height: 50%;
    overflow: auto;
    pointer-events: auto;
}

#spinnerOverlayContainer {
    background-color: #00000050;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9001;
    cursor: wait;
    display: none;
}

#spinnerOverlay {
    margin-top: 15rem;
}

#spinerOverlayInner {
    display: none;
}

#warningOverlayContainer {
    z-index: 600;
}

.smallIcon {
    position: absolute;
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
    margin-right: 0.5rem;
    margin-left: -2rem;
    background-repeat: no-repeat;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    transition: color 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out,
        -webkit-box-shadow 0.15s ease-in-out;
}

.headlineWithSmallIcon {
    display: inline-block;
}

.smallIconHeadline {
    margin-left: 0.25rem;
    display: inline-block;
    position: unset;
    vertical-align: sub;
}

.iconRightSide {
    right: 0;
}

.smallIconInButtonBox {
    margin-left: 0;
    left: 0.5rem;
}

.loginIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/log-in.svg");
    mask-image: url("../img/Feather/log-in.svg");
}

.logoutIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/log-out.svg");
    mask-image: url("../img/Feather/log-out.svg");
}

.planIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/calendar.svg");
    mask-image: url("../img/Feather/calendar.svg");
}

.stackIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/layers.svg");
    mask-image: url("../img/Feather/layers.svg");
}

.squareIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/trello.svg");
    mask-image: url("../img/Feather/trello.svg");
}

.shareIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/share-2.svg");
    mask-image: url("../img/Feather/share-2.svg");
}

.shareIcon:hover {
    background-color: var(--info);
    cursor: pointer;
}

.backIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/arrow-left-circle.svg");
    mask-image: url("../img/Feather/arrow-left-circle.svg");
}

.saveIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/save.svg");
    mask-image: url("../img/Feather/save.svg");
}

.okIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/thumbs-up.svg");
    mask-image: url("../img/Feather/thumbs-up.svg");
}

.addIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/plus-square.svg");
    mask-image: url("../img/Feather/plus-square.svg");
}

.addIcon:hover {
    background-color: var(--info);
    cursor: pointer;
}

.checkIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/check.svg");
    mask-image: url("../img/Feather/check.svg");
}

.xIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/x.svg");
    mask-image: url("../img/Feather/x.svg");
}

.listIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/list.svg");
    mask-image: url("../img/Feather/list.svg");
}

.listIconButton:hover {
    background-color: var(--info);
    cursor: pointer;
}

.infoIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/info.svg");
    mask-image: url("../img/Feather/info.svg");
}

.prevIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/chevron-left.svg");
    mask-image: url("../img/Feather/chevron-left.svg");
}

.nextIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/chevron-right.svg");
    mask-image: url("../img/Feather/chevron-right.svg");
}

.hwIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/cpu.svg");
    mask-image: url("../img/Feather/cpu.svg");
}

.hwIconButton:hover {
    background-color: var(--info);
    cursor: pointer;
}

.buttonIconBar {
    margin: 0.5rem;
    z-index: 1;
    height: 1.5rem;
    float: right;
    text-align: right;
    position: absolute;
    right: 0;
}

.buttonIconBar>div {
    position: unset;
    margin-left: unset;
    margin-right: unset;
}

.roomPlanningOverlayTableButtonBox>div,
.hwOverlayDeviceListTableButtonBox>div {
    position: unset;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.editIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/edit-2.svg");
    mask-image: url("../img/Feather/edit-2.svg");
    cursor: pointer;
}

.editIcon:hover {
    background-color: var(--info);
}

.deleteIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/trash-2.svg");
    mask-image: url("../img/Feather/trash-2.svg");
    cursor: pointer;
}

.deleteIcon:hover {
    background-color: var(--info);
}

.qrIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/TablerIcons/qrCode.svg");
    mask-image: url("../img/TablerIcons/qrCode.svg");
    cursor: pointer;
}

.qrIcon:hover {
    background-color: var(--info);
}

.settingsIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/settings.svg");
    mask-image: url("../img/Feather/settings.svg");
    cursor: pointer;
}

.settingsIcon:hover {
    background-color: var(--info);
}

.roomPlanningIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/sliders.svg");
    mask-image: url("../img/Feather/sliders.svg");
    cursor: pointer;
}

.roomPlanningIcon:hover {
    background-color: var(--info);
}

.adminSettingsIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/database.svg");
    mask-image: url("../img/Feather/database.svg");
    cursor: pointer;
}

.adminSettingsIcon:hover {
    background-color: var(--info);
}

.xSquareIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/x-square.svg");
    mask-image: url("../img/Feather/x-square.svg");
    cursor: pointer;
}

.xSquareIcon:hover {
    background-color: var(--green);
}

.checkSquareIcon {
    background-color: #fff;
    -webkit-mask-image: url("../img/Feather/check-square.svg");
    mask-image: url("../img/Feather/check-square.svg");
    cursor: pointer;
}

.checkSquareIcon:hover {
    background-color: var(--red);
}

.infoButtonIcon {
    background-color: var(--info);
}

.primaryIcon {
    background-color: var(--primary);
}

.dangerIcon {
    background-color: var(--danger);
}


.whiteButtonIcon {
    background-color: #fff;
}

.smallIconButton:hover>.infoButtonIcon,
.smallIconButton:hover>.primaryIcon,
.smallIconButton:hover>.dangerIcon {
    background-color: #fff;
}

.smallIconButton {
    padding-left: 2.5rem;
}

.overlayContainer {
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 500;
}

.overlayBox {
    margin-top: 4rem;
}

.settingsMainBox>label {
    font-size: 1rem;
}

.roomBookingListButton {
    cursor: pointer;
    background-color: transparent;
    font-size: 1rem;
    line-height: 1.5rem;
}

.roomBookingListButton:hover {
    background-color: var(--info);
}

.timeRoomBookingListBody>.roomBookingListButton:first-child:hover {
    background-color: var(--success);
}

.roomBookingListButton>.smallIcon {
    background-color: var(--info);
}

.timeRoomBookingListBody>.roomBookingListButton:first-child>.smallIcon {
    background-color: var(--success);
}

.roomBookingListButton:hover>.smallIcon,
.timeRoomBookingListBody>.roomBookingListButton:first-child:hover>.smallIcon {
    background-color: #fff;
}

#userListOverlayMainBox>div {
    background-color: transparent;
    font-size: 1rem;
    line-height: 1.5rem;
    cursor: default;
}

#userListOverlayMainBox>div:hover {
    background-color: var(--info);
}

.ui-state-highlight>span {
    background: #df691a none !important;
    color: white !important;
}

#startUserListRequest,
#confirmUserListRequest,
#denyUserListRequest {
    display: none;
}

.adminUserListOverlayOutputList {
    height: 30rem;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: white;
    color: black;
    font-family: monospace;
    font-size: 1rem;
    text-align: left;
}

.dayTimeSlotSelection {
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-auto-flow: row;
    overflow-y: auto;
    height: 80%;
}

.slotBookingSlotBox {
    margin-top: unset;
    margin-left: 2rem;
    width: 440px;
}

#TextFooter {
    position: fixed;
    right: 0;
    bottom: 0;
}

#TextFooter>div {
    font-family: monospace;
    font-size: 12px;
    display: inline-block;
    margin-right: 0.25rem;
}

#roomPlanningOverlay {
    height: calc(100% - 5rem);
    overflow: hidden;
}

#roomPlanningOverlay>.card-body {
    height: 28%;
    border-bottom: 1px solid white;
}

.roomPlanningTableBox {
    max-height: 20rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.overlayLabelInputGrid {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-flow: row;
    width: 70%;
}

.overlayLabelInputGrid label {
    text-align: right;
    padding-right: 0.5rem;
}

.overlayLabelInputGrid input {
    text-align: left;
}

#roomEdit_bookType2_Input {
    display: contents;
}

#userListTableBody_users .smallIcon {
    margin-left: 0;
    position: unset;
    margin-right: 0;
}

#monthRoomBookingOverviewContainer {
    width: 100%;
    margin-top: 1rem;
}

.freetimeBookingBoxlistBarCanvas {
    width: 100%;
    background-color: transparent;
    margin-top: 0.5rem;
}

#timeInputOverlayBody {
    display: grid;
    grid-template-columns: 30% auto;
    grid-auto-flow: row;
}

#hoveringTooltip {
    z-index: 600;
    color: var(--white);
    border: 1px solid var(--white);
    border-radius: 0.25rem;
    height: calc (1.4rem * 3);
    line-height: 1.4rem;
    text-align: center;
    overflow: hidden;
    width: 10rem;
    top: 0;
    left: 0;
    position: absolute;
    display: none;
    pointer-events: none;

}

#hoveringTooltip>span {
    display: block;
}

#hoveringTooltip>span:first-child {
    font-weight: 900;
}

#qrCodeOverlayBody>canvas {
    height: 350px;
    width: 350px;
}

#loginButtonBox>a,
#loginButton {
    margin-bottom: 1rem;
}

#userInfoBookedRooms {
    overflow: auto;
    max-height: 30rem;
}

.bookListGrid {
    display: grid;
    grid-template-columns: auto auto 30% 20%;
    grid-auto-flow: row;
}

.bookListGrid>.bookListGridTransparentBox {
    display: contents;
}

.bookListGrid>.bookListGridTransparentBox:nth-child(2n)>div {
    background-color: #3a466d;
}

.bookListGrid>.bookListGridTransparentBox:first-child>div {
    font-weight: bold;
}

#roomOverviewBox {
    max-height: 90%;
    overflow: hidden;
}

#roomOverviewBox>.card-body {
    overflow-y: auto;

}

#roomOverviewBox>.card-body>#roomOverviewBoxBody>div {
    width: 100%;
    display: block;
}

.noTextButton {
    padding-left: 1.5rem;
}

.noTextButton>.smallIcon {
    margin-left: -1rem;
}

#hwOverlayDeviceList>tr {
    cursor: default;
}