/* overwrites built-in CSS for --topbar-item-text-color which font color too dark */

/* BZI main colors used
- sidebar menu, main dark color: #560e28
- secondary color: #930b0b
- highlights around inputs, selects, etc: 930b0b70
- highlight on calendar date picker: 930b0b42
*/

* {
    box-sizing: border-box;
}

body {
    font-weight: 400;
    padding: 0;
    margin: 0;
    min-height: 100%;
    background: var(--surface-ground);
    color: var(--text-color);
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
}

.notFountBtn {
    background: #560e28 !important;
}

tbody.p-datatable-tbody tr:nth-child(even) {
    background-color: #f7f7f7;
}

tbody.p-datatable-tbody tr:nth-child(even):hover {
    background-color: rgba(88, 174, 211, 0.2) !important;
}

.detailPage {
    .p-card-body {
        width: 100%;
    }

    .p-card-title {
        background-color: #560e28;
        width: calc(100% + 36px);
        padding: 5px 10px;
        margin: 0;
        color: #fff;
        margin-left: -18px;
        margin-top: -18px;
    }

    .details-header {
        text-transform: uppercase;
        color: #999 !important;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;

        @media screen and (max-width: 992px) {
            margin-top: 1rem !important;
        }
    }

    .details-item {
        color: #222 !important;
        line-height: 1.1;
        margin: 0;
    }

    .asset-image {
        max-width: 250px;
        width: 100%;
        height: 100%;
        border: 2px solid #ccc;
        margin-top: unset;
        margin-bottom: 10px;

        @media screen and (max-width: 992px) {
            margin-top: 2rem;
        }
    }

    p,
    a {
        color: #fff;
        font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    }

    body {
        font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .p-float-label,
    .p-inputtext.p-component,
    .p-calendar.p-component.p-inputwrapper {
        width: 100% !important;
    }

    .flex.flex-column.md\:flex-row.sm\:justify-content-center.mx-0.md\:mx-1.mt-3.w-fulls {
        width: 100% !important;
    }
}

.modalContainer {
    max-width: 65vw;

    @media screen and (max-width: 992px) {
        max-width: 95vw !important;
    }

    .modalBar {
        background-color: #560e28;
        padding: 5px 10px;
        color: #fff;
    }

    .modalHeader {
        text-transform: uppercase;
        color: #999 !important;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .modalItem {
        color: #222 !important;
        line-height: 1.1;
        margin: 0;
    }

    p {
        color: #fff;
        font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    }

    p.description {
        color: #777;
        font-size: 1.25rem;
        font-weight: 100;
    }

    a {
        color: #fff;
        font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    }

    inputs {
        height: 2rem;
        width: 20rem;
        padding: 0.75rem;
    }
}

.p-dialog-header {
    padding-bottom: 0 !important;
}

ul.topbar-menu {
    width: 25rem;
    margin-right: 1rem !important;

    @media screen and (max-width: 992px) {
        width: 18.5rem;
        margin-left: 0rem;
    }
}

.layout-topbar .topbar-menu {
    display: flex;
    align-items: center;
}

.layout-topbar .topbar-menu li {
    flex-grow: 1;
    margin-left: 0 !important;
}

.p-input-icon-left {
    width: 100%;
}

.search-dropdown {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow-y: hidden;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 5px;
    padding: 0;
    list-style: none;
}

.search-dropdown li {
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-dropdown li:hover {
    background-color: #930b0b42;
}

.search-dropdown li:focus {
    background-color: #930b0b42;
}

.layout-topbar .topbar-menu li {
    margin-left: 0rem !important;
}

.input-text:focus,
.p-inputtext:focus {
    width: 100%;
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 0.2rem #930b0b70;
}

.p-inputtext:enabled {
    &:focus,
    &:hover {
        outline: 0 none;
        outline-offset: 0;
        box-shadow: none;
        border-color: #560e28;
    }
}