* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: "Funnel Display", sans-serif !important;

    font-optical-sizing: auto;

    font-weight: 400;  

    font-style: normal;

    background-color: #f5f5f5;

    color: #333;

    overflow-x: hidden;

}



.mud-typography .mud-typography-body1 {

    padding:6px;

    border-radius: 4px;

    background-color: gray;

}



.mud-menu-list {

    border-radius: 10px;

}



.mud-menu-list .mud-menu-item {

    padding-left:30px;

    padding-right:30px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.mud-menu-list .mud-menu-item .mud-menu-item-text {

    display: flex;

    align-items: center;

}



.mud-typography-h5 {

    font-weight: 700;

    margin-bottom:40px;

}



* {

    font-family: "Funnel Display",

    sans-serif !important;

}



.mud-icon-root {

    font-family: 'Material Icons' !important;

    font-weight: normal;

    font-style: normal;

    font-size: 24px;

    line-height: 1;

    letter-spacing: normal;

    text-transform: none;

    display: inline-block;

    white-space: nowrap;

    word-wrap: normal;

    direction: ltr;

    -webkit-font-smoothing: antialiased;

}



.mud-chart {

    background: white;

    border-radius: 12px;

    padding: 16px;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}



.rfq-detail-bottom {

    margin-top:20px;

    padding-top:20px;

    border-top:1px solid #ccc;

}



.rfq-detail-wrapper {

    padding:30px;

}



.rfq-detail-actions {

    padding:50px;

}



.mud-typography-h6 {

    font-weight: 700;

}



.mud-drawer-header {

    border-bottom:1px solid #cccccc;

    margin-bottom:20px;

}



.full-height {

    height: 100vh;

}



.flex-center {

    display: flex;

    align-items: center;

    justify-content: center;

}



.main-title {

    font-weight:700;

}



@media (max-width: 600px) {

    .mobile-hide {

        display: none !important;

    }

    

    .mobile-full {

        width: 100% !important;

    }

}

    .blazor-error-boundary::after {

        content: "An error has occurred."

    }



.mud-toolbar .mud-button-root {

    background:#a4a4ff;

}



.mud-typography-h6 {

    display: flex;

    align-items: center;

}



.mud-nav-item .mud-nav-link,

.mud-nav-group .mud-nav-link {

    padding-left:20px;

    padding-right:20px;

}



.dashboard-card {

    padding-top:30px !important;

}



.mud-nav-link {

    padding-left:0;

}



.mud-main-content {

    padding:30px !important;

    margin-top:50px;

}



.custom-layout {

    display: grid;

    grid-template-columns: 300px 1fr;

    grid-template-rows: auto 1fr;

    height: 100vh;

    width: 100%;

    transition: grid-template-columns 0.3s cubic-bezier(.4,0,.2,1);

}



.custom-sidebar {

    grid-column: 1;

    grid-row: 1 / span 2;

    width: 300px;

    height: 100vh;

    overflow-y: auto;

    background-color: white;

    box-shadow: 2px 0 5px rgba(0,0,0,0.1);

    z-index: 1100;

    transition: transform 0.3s cubic-bezier(.4,0,.2,1);

}



.custom-sidebar.closed {

    transform: translateX(-100%);

}



.sidebar-header {

    padding: 4px 16px;

    display: flex;

    align-items: center;

    border-bottom: 1px solid #e0e0e0;

    justify-content: flex-start;

}



.sidebar-menu-btn {

    margin-right: 12px;

    margin-left: 0;

    align-self: flex-start;

}



.sidebar-header .mud-icon-button {

    color: #000;

    margin-right: 12px;

}



.sidebar-header .mud-nav-link {

    display: flex;

    align-items: center;

}



.sidebar-logo {

    height: 32px;

}



.sidebar-menu {

    padding: 8px;

}



.custom-appbar {

    grid-column: 2;

    grid-row: 1;

    height: 64px;

    background-color: white;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    z-index: 1200;

    display: flex;

    align-items: center;

    padding: 0 16px;

    transition: width 0.3s cubic-bezier(.4,0,.2,1);

}



.appbar-left {

    display: flex;

    align-items: center;

}



.appbar-menu-btn {

    margin-right: 8px;

    margin-left: 0;

    align-self: flex-start;

    display: inline-flex !important;

}



.mud-navmenu .mud-icon-root {

    background: #f2f2f2 !important;

    border-radius: 8px;

    padding: 6px;

    width:30px;

    height:30px;

    margin-right: 8px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: background 0.2s;

}



.mud-navmenu .mud-nav-link {

    border-radius:6px;

    display:flex;

    align-items:center;

}



.mud-navmenu .mud-nav-link.active {

    background:#d0d0ff !important;  

}



.mud-navmenu .mud-nav-link.active .mud-icon-root {

    background:#4343c4 !important;

    fill:#ffffff;

}



.custom-nav-icon-bg:hover {

    background: #e0e0e0;

}



.custom-layout {

    display: grid;

    grid-template-columns: 300px 1fr;

    grid-template-rows: auto 1fr;

    height: 100vh;

    width: 100%;

    transition: grid-template-columns 0.3s cubic-bezier(.4,0,.2,1);

}



.custom-sidebar.closed ~ .custom-appbar,

.custom-sidebar.closed ~ .custom-content {

    grid-column: 1 / span 2;

    width: 100vw;

    transition: width 0.3s cubic-bezier(.4,0,.2,1);

}



.custom-sidebar.closed ~ .custom-content {

    grid-column: 1 / span 2;

}



.custom-sidebar.closed ~ .custom-layout {

    grid-template-columns: 0 1fr;

}



.custom-content {

    grid-column: 2;

    grid-row: 2;

    overflow-y: auto;

    padding: 16px;

    background-color: #f5f5f5;

    transition: width 0.3s cubic-bezier(.4,0,.2,1);

}



.custom-sidebar.closed + .custom-content {

    margin-left: 0;

}



@media (max-width: 768px) {

    .custom-sidebar {

        width: 250px;

    }

}



.mud-button-root {

    border-radius:6px !important;

}



@media (min-width: 768px) {

    .custom-appbar .appbar-menu-btn {

        display: block !important;

    }



    .custom-sidebar .sidebar-menu-btn {

        display: none !important;

    }

}



@media (max-width: 768px) {

    .custom-sidebar {

        width: 100%;

        position: fixed;

        z-index: 1300;

    }



    .custom-appbar .appbar-menu-btn {

        display: block !important;

    }

    

    .custom-layout {

        grid-template-columns: 1fr;

    }

    

    .custom-appbar {

        grid-column: 1;

    }

    

    .custom-content {

        grid-column: 1;

    }

    

    .sidebar-header .mud-icon-button {

        margin-right: 8px;

    }

}







.appbar-menu-btn {

    margin-right: 16px;

    margin-left: 0;

    align-self: flex-start;

    display: none;

}



@media (max-width: 900px) {

    .appbar-menu-btn {

        display: inline-flex;

    }

}



.mud-table-pagination .mud-button-root:disabled,

.mud-table-pagination .mud-icon-button:disabled {

    opacity: 0.5 !important;

    color: inherit !important;

}



.mud-table-pagination .mud-button-root:not(:disabled),

.mud-table-pagination .mud-icon-button:not(:disabled) {

    color: #4343C4 !important;

}



.mud-table-pagination .mud-button-root,

.mud-table-pagination .mud-icon-button {

    width: 30px !important;

    height: 30px !important;

    min-width: 30px !important;

    min-height: 30px !important;

    max-width: 30px !important;

    max-height: 30px !important;

    padding: 0 !important;

    box-sizing: border-box;

}



.mud-table-pagination-actions {

    padding-right: 14px !important;

}



.mud-grid-spacing-xs-6 > .mud-grid-item {

    padding-top: 8px !important;

}



.dashboard-card {

    border-radius: 16px;

    padding-top: 16px;

    padding-bottom: 16px;

}



.attachment-btn {

    background: #f2f2f2;

    border-radius: 8px;

    padding: 6px;

    transition: background 0.2s;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.attachment-btn:hover {

    background: #e0e0e0;

}



.send-btn {

    height: 58px;

    min-width: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.chat-input-row {

    display: flex;

    gap: 8px;

    align-items: center;

}



.rfq-chat-scroll {

    height: 400px;

    overflow-y: auto;

    border: 1px solid #e0e0e0;

    border-radius: 8px;

    padding: 16px;

    margin-bottom: 16px;

    background-color: #f9f9f9;

}

.rfq-system-row {

    display: flex;

    margin-bottom: 16px;

}

.rfq-system-avatar {

    margin-right: 8px;

}

.rfq-system-content {

    max-width: 70%;

}

.rfq-system-bubble {

    background-color: #e3f2fd;

    padding: 12px;

    border-radius: 18px;

    border-top-left-radius: 4px;

}

.rfq-user-row {

    display: flex;

    justify-content: flex-end;

    margin-bottom: 16px;

}

.rfq-user-content {

    max-width: 70%;

}

.rfq-user-bubble {

    background-color: #bbdefb;

    padding: 12px;

    border-radius: 18px;

    border-top-right-radius: 4px;

}

.rfq-user-avatar {

    margin-left: 8px;

}



.rfq-quick-actions {

    display: flex;

    gap: 8px;

    margin-top: 16px;

    flex-wrap: wrap;

}



.dashboard-icon-cell {

  display: flex;

  justify-content: flex-end;

  align-items: flex-start;

}