:root {
    --baseIconSize: 1.25rem !important;
    --baseToolbarIconSize: 1.5rem !important;
}

/*#region New Layouts*/
.page {
    height: 100%;
    width: 100%;
}

.pageUnauthorized {
    height: 100%;
    width: 100%;
}

.pageheader {
    width: 100vw;
    height: 3.25rem;
    min-height: 3.25rem;
    padding: 0.625rem;
    background: var(--bs-appBackground,--bs-body-bg);
    position: sticky;
    top: 0;
    z-index: 800;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.headerBaseButton {
    color: var(--bs-body-color) !important;
}

.headerBaseButton:hover {
    background-color: var(--bs-btn-hover,--bs-border-color);
}
/*#endregion*/

/*#region Default Icon Rules */

.baseIcon {
    opacity: 0.7;
    background-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100% 100%;
    background-color: currentColor;
    width: var(--baseIconSize);
    height: var(--baseIconSize);
}

.defaultToolbarIcon {
    width: var(--baseToolbarIconSize) !important;
    height: var(--baseToolbarIconSize) !important;
    opacity: 1 !important;
}

.hamburger-icon {
    mask-image: url("../images/headericons/navigation.svg");
}

.sun-icon {
    mask-image: url("../images/headericons/weather-sunny.svg");
    width: calc(1.3*var(--baseIconSize));
    height: calc(1.3*var(--baseIconSize));
    margin-top: -3px;
}

.moon-icon {
    mask-image: url("../images/headericons/darkmode.svg");
    width: calc(1.3*var(--baseIconSize));
    height: calc(1.3*var(--baseIconSize));
    margin-top: -3px;
}

.help-icon {
    mask-image: url("../images/headericons/helpicon.svg");
    width: calc(1.3*var(--baseIconSize));
    height: calc(1.3*var(--baseIconSize));
    margin-top: -3px;
}

.profile-icon {
    mask-image: url("../images/headericons/accountcircle.svg");
    width: calc(1.9*var(--baseIconSize));
    height: calc(1.9*var(--baseIconSize));
    margin-top: -5px;
}

.changeSizes-icon {
    mask-image: url("../images/headericons/sizechange.svg");
    width: calc(1.3*var(--baseIconSize));
    height: calc(1.3*var(--baseIconSize));
    margin-top: -5px;
}

.toolbar-icon-export {
    mask-image: url("../images/headericons/export.svg");
}

.toolbar-icon-refresh {
    mask-image: url("../images/headericons/refresh.svg");
}


/*#endregion*/
/*#region Logos */
.logo-image-login {
    display: table-cell;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    flex: 1;
    height: 60px;
    -webkit-mask-size: 180px 60px;
    -webkit-mask-image: url(../images/megaLogoNew.png);
}

.theme-icon2 {
    display: inline-block;
    width: 1.2rem !important;
    height: 1.2rem !important;
    background-color: currentColor;
    mask-image: url("../images/theme.svg");
    -webkit-mask-image: url("../images/theme.svg");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    margin-left:4px !important;
}

/*#endregion*/

/*#region For basic screens */
.actionButton {
    width: 100%;
    border-radius: 3rem !important;
    margin-top: 0.5rem;
    font-size: 15px;
}
/*#endregion*/

/*#region Useful extra css rules for components */
.mandatoryCaption::after {
    content: " *";
    color: red;
}

/*#endregion*/