@font-face {
    font-family: robotoRegular;
    src: url("../font/Roboto/Roboto-Regular.ttf");
}

@font-face {
    font-family: robotoThin;
    src: url("../font/Roboto/Roboto-Thin.ttf");
}

@font-face {
    font-family: robotoBold;
    src: url("../font/Roboto/Roboto-Bold.ttf");
}

@font-face {
    font-family: robotoBlack;
    src: url("../font/Roboto/Roboto-Black.ttf");
}

:root {
    --lightColor: #fff;
    --lightBgColor: #2f3959;
    --darkColor: #222b45;
    --darkerColor: #161b31;
    --darkTextColor: #000;
}

* {
    font-family: robotoRegular;
}

html,
body {
    background-color: var(--darkerColor);
}

.topNavbar {
    background-color: var(--darkColor) !important;
    box-shadow: 0 0.5rem 1rem 0 var(--darkerColor);
    top: 0;
    position: sticky;
    z-index: 50;
}

#loginBox,
#userInfoTextContainer,
#userBookingText,
#mainMenuBox,
#roomSelectionBox,
#roomBookingBox,
#roomBookingBoxBody .card,
#settingsOverlay,
#userListOverlay,
#userListOverlayRequest,
#roomPlanningOverlay,
#userEditOverlay,
#floorEditOverlay,
#roomEditOverlay,
#deleteQuestion,
#bookListOverlay,
#timeInputOverlay,
#warningOverlayQuestion,
#qrCodeOverlay,
#roomInfoBodyContainer,
#repeatEditOverlayBox,
#roomOverviewBox,
#hwOverlay {
    background-color: var(--lightBgColor);
    border: none;
    border-radius: 0.3rem;
}

#roomBookingBoxBody .card {
    border: 1px solid var(--info);
}

.btn {
    border-radius: 0.3rem;
}

/*Datepicker:*/
.ui-icon,
.ui-widget-content .ui-icon,
.ui-widget-header .ui-icon,
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon,
.ui-state-active .ui-icon,
.ui-button:active .ui-icon,
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon,
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon,
.ui-button .ui-icon {
    background-image: url("../../img/dist/ui-icons_ffffff_256x240.png");
}

.ui-widget.ui-widget-content {
    border: 1px solid var(--info);
    padding: 0;
}

.ui-widget-content {
    border: none;
    background: transparent;
    color: var(--lightColor);
}

.ui-widget-header {
    border: none;
    background: rgba(255, 255, 255, 0.075);
    color: var(--lightColor);
    font-weight: initial;
    font-size: 1.25rem;
}