:root {
    --max-width: 1146px
}

@font-face {
    font-family: noto;
    src: url("/jakarta.faces.resource/NotoSans-Regular.ttf.xhtml?ln=fonts") format("truetype");
}

@font-face {
    font-family: noto-light;
    src: url("/jakarta.faces.resource/NotoSans-Light.ttf.xhtml?ln=fonts") format("truetype");
}

@font-face {
    font-family: noto-bangla;
    src: url("/jakarta.faces.resource/Noto_Sans_Bengali-Regular.ttf.xhtml?ln=fonts") format("truetype");
}

@font-face {
    font-family: noto-bangla-light;
    src: url("/jakarta.faces.resource/Noto_Sans_Bengali-Light.ttf.xhtml?ln=fonts") format("truetype");
}

body {
    font-family: noto, noto-bangla, sans-serif !important;
    background-color: var(--surface-b);
    color: var(--text-color);
    padding: 0;
    margin: 0;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body .ui-widget {
    font-family: noto, noto-bangla, sans-serif !important;
}

.max-w-1146 {
    max-width: var(--max-width) !important;
}

.app-card {
    background-color: white;
    border: 1px solid var(--surface-300);
    border-radius: 1rem;
    padding: 1.5rem;
    align-self: center;
}

a {
    text-decoration: none;
}

.status {
    display: flex;
    align-items: center;
}

.status::before {
    content: '\2022';
    font-size: 2.5rem;
    margin-right: 0.5rem;
}

.status.active::before {
    color: var(--green-500);
}

.status.inactive::before {
    color: var(--red-500);
}

#login-back {
    background-image: url("/jakarta.faces.resource/login-back.png.xhtml?ln=images");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    aspect-ratio: 3 / 2 auto;
}

#floating-action-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 5rem;
    z-index: 6;
    background-color: white;
    border-top: 1px solid var(--surface-300);
    width: calc(100% - 20rem);
}

@media (max-width: 768px) {
    #floating-action-bar {
        width: 100%;
    }
}

#floating-action-bar .ui-toolbar {
    border-width: 0 !important;
    border-radius: 0 !important;
    background-color: white;
}

#floating-action-bar .ui-toolbar .ui-toolbar-group-left {
    gap: 1rem;
}

#floating-action-bar .ui-toolbar .ui-toolbar-group-right {
    margin-right: 1rem;
}

#floating-action-bar .ui-toolbar .ui-toolbar-group-left {
    margin-left: 1rem;
}

.gradient-blue {
    background: linear-gradient(90deg, #2196f3 10%, #2196f300 100%);
}

.gradient-yellow {
    background: linear-gradient(90deg, #FBC022 10%, #FBC02200 100%);
}

.gradient-green {
    background: linear-gradient(90deg, #4CAF50 10%, #4CAF5000 100%);
}

.gradient-grey {
    background: linear-gradient(90deg, #757575 10%, #75757500 100%);
}

.gradient-orange {
    background: linear-gradient(90deg, #f57C00 10%, #f57C0000 100%);
}


#page-content-wrapper {
    margin-left: 20rem;
}


@media (max-width: 768px) {
    #page-content-wrapper {
        margin-left: 0;
    }
}