/*YAYGIN RENKLER BASLANGIC*/
:root {
    /*COLORS*/

    --color-dark-primary: #333132;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-green-secondary: #006838;
    --bg-light-gray: #f3f3f3;
    --bg-input-primary: #f4f4f4;
    --bg-input-secondary: #e9e9e9;
    --bg-modal-primary: #fcfcfc;
    /*FONTS*/

    --font-size-head: 30px;
    --font-size-text: 16px;
    --font-weight-bold: bold;
    --font-weight-medium: 500;
    --font-weight-normal: normal;
}

/*YAYGIN RENKLER BITIS*/

.mud-table-root {
    table-layout: fixed !important;
    width: 100% !important;
}

    .mud-table-root th,
    .mud-table-root td {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

   .custom-layout .mud-table-root .mud-table-body .mud-table-cell .mud-link {
        color: var(--mud-palette-text-primary) !important;
    }

/* BLAZOR SERVER RECONNECTION MODAL STYLES */
body #components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4) !important;
    -webkit-backdrop-filter: blur(3px);
    z-index: 101 !important;
    font-family: 'Raleway', sans-serif;
    transition: visibility 0s linear 1000ms;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 20vh;
        transition-delay: 0s;
    }

.reconnect-content {
    background-color: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    animation: fadeInScale 0.3s ease-out;
}

.position-relative{
    position: relative;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.reconnect-icon {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

    .reconnect-icon svg {
        animation: pulse 2s infinite;
    }

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.reconnect-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-green-secondary);
    margin-bottom: 1rem;
}

.reconnect-message {
    font-size: 1rem;
    color: var(--color-dark-primary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    text-align: center;
}

.reconnect-attempts {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
    font-weight: 500;
    font-family: 'Raleway', monospace;
    letter-spacing: 0.5px;
}

.reconnect-progress {
    width: 100%;
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-green-secondary), #8dc63f);
    border-radius: 2px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

    .progress-bar.active {
        animation: progressAnimation 2s ease-in-out infinite;
    }

@keyframes progressAnimation {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);
    }
}

.excel-download {
    font-size: 12px !important;
    text-transform: uppercase !important;
    margin-left: 40px !important;
}

.reconnect-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.reload-button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Raleway', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    background-color: #f5f5f5;
    color: var(--color-dark-primary);
    border: 1px solid #ddd;
}

    .reload-button:hover {
        background-color: #e8e8e8;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

/* Special states */
#components-reconnect-modal.components-reconnect-failed .reconnect-icon svg path {
    fill: #ff6b35;
}

#components-reconnect-modal.components-reconnect-rejected .reconnect-icon svg path {
    fill: #dc3545;
}

.mud-container{
    min-height: 200px;
}


.superadmin-layout .location-search-input {
    height: 35px !important;
    line-height: 35px !important;
}

.superadmin-layout .mud-select {
    width: 200px !important;
    flex-grow: unset !important;
    border-radius: 10px;
}

.superadmin-corporate-select .mud-input.mud-input-outlined .mud-input-outlined-border {
    border: none !important;
}

/* Responsive design for reconnection modal */
@media (max-width: 768px) {
    #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected {
        padding-top: 15vh;
    }

    .reconnect-content {
        padding: 1.5rem;
        margin: 1rem;
    }
    
    .reconnect-title {
        font-size: 1.25rem;
    }
    
    .reconnect-message {
        font-size: 0.9rem;
    }
    
    .reconnect-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .reload-button {
        width: 100%;
        max-width: 200px;
    }
}

@media (max-width: 720px) {

    .topbar-logo-img {
        height: 55px !important;
     width: auto !important;
    }

    .topbar-wrapper .logo.logo-dual {
        max-width: 240px;
        gap: 8px;
        padding: 0px 4px;
    }

    .topbar-wrapper .logo.logo-dual .topbar-logo-item {
        max-width: 105px;
    }

    .topbar-wrapper .logo.logo-dual .topbar-logo-item img.topbar-logo-img {
        max-height: 36px !important;
        max-width: 100px !important;
    }

    .topbar-wrapper .logo.logo-dual .topbar-logo-divider {
        height: 18px;
    }

  .gallery-items {

  }
}

/*GENEL SINIFLAR BASLANGIC*/

* {
    font-family: "DM Sans", sans-serif;
}

.mud-layout {
    padding: 20px;
}

@media (max-width: 768px) {
    .mud-layout {
        padding: 10px;
    }
}

.topbar-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    margin-bottom: 20px;
}

    .topbar-wrapper .logo {
        display: block;
        width: 240px;
        height: 55px;
      padding: 0px 10px;
      position: relative;
        z-index: 998;
    }

    .topbar-wrapper .logo.logo-dual {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        min-width: 160px;
        max-width: 360px;
        gap: 12px;
    }

    .topbar-wrapper .logo.logo-dual .topbar-logo-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        max-height: 48px;
        max-width: 150px;
        flex: 0 1 auto;
    }

    .topbar-wrapper .logo.logo-dual .topbar-logo-item img.topbar-logo-img {
        max-height: 44px !important;
        max-width: 140px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
        display: block;
    }

    .topbar-wrapper .logo.logo-dual .topbar-logo-divider {
        width: 1px;
        height: 24px;
        background-color: rgba(140, 150, 160, 0.35);
        flex-shrink: 0;
        border-radius: 1px;
    }

    .topbar-wrapper .logo img {
        display: block;
   width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .topbar-logo-img {
        height: 55px !important;
        width: auto !important;
        object-fit: contain;
    }

    .topbar-wrapper .buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

.material-icon-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: transparent;
    border: none;
    color: #31503a;
}

.material-notification-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f44336;
    animation: pulse 1.5s infinite;
}

.custom-striped-table .mud-table-cell .mud-button-text {
    padding: 6px 0 !important;
}

.custom-striped-table .mud-table-row .mud-badge-root .mud-badge {
    top: -8px !important;
}

/* Material Design Icon Buttons */
.material-icon-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: transparent;
    border: none;
    color: #31503a;
    margin: 0px 5px;
}

    .material-icon-button:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .material-icon-button:active {
        background: rgba(255, 255, 255, 0.12);
    }

    .material-icon-button.active {
        background: rgba(255, 255, 255, 0.12);
    }

.material-notification-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f44336;
    animation: pulse 1.5s infinite;
}

.middle-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.text-end {
    text-align: end !important;
}

.text-end .mud-table-sort-label {
   flex-direction: row-reverse;
   justify-content: flex-end;
}

.text-end .mud-table-sort-label .mud-button-label {
    flex: 0 1 auto;
}
 
.text-end .mud-table-sort-label sup {
     position: relative;
     top: -0.3em;
     font-size: 0.8em;
     vertical-align: baseline;
}

/* Material Design Dropdown */
.material-dropdown {
    position: absolute;
    top: 45px;
    right: 0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 360px;
    z-index: 1000;
    overflow: hidden;
    transform-origin: top right;
    animation: materialDropdownEnter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

    .material-dropdown.notifications {
        min-width: 360px;
        max-width: 400px;
    }

@keyframes materialDropdownEnter {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Updated Dropdown Header with Mark All Read Button */
.dropdown-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

    .dropdown-header h6 {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
    }

.dropdown-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.dropdown-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Material Design Tab Chips */
.notification-tabs {
    display: flex;
    gap: 4px;
    margin-top: 12px;
    width: 100%;
}

.notification-tab {
    background: transparent !important;
    color: #666 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 16px !important;
    padding: 6px 16px !important;
    height: 32px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    min-width: auto !important;
    flex: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

    .notification-tab:hover {
        background: #f5f5f5 !important;
        border-color: #d0d0d0 !important;
    }

    .notification-tab.active {
        background: #31503a !important;
        color: white !important;
        border-color: #31503a !important;
    }

        .notification-tab.active:hover {
            background: #2a4532 !important;
        }

/* Mark All Read Button in Header */
.mark-all-read-header-btn {
    font-size: 11px !important;
    padding: 4px 12px !important;
    height: 28px !important;
    border-radius: 14px !important;
    text-transform: none !important;
    font-weight: 500 !important;
    min-width: auto !important;
    white-space: nowrap;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

    .mark-all-read-header-btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

    .mark-all-read-header-btn:active {
        transform: translateY(0) !important;
    }

    .mark-all-read-header-btn .mud-icon-root {
        font-size: 14px !important;
    }

    .mark-all-read-header-btn:disabled {
        background: transparent !important;
        color: #ccc !important;
        border-color: #e0e0e0 !important;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

.dropdown-content {
    max-height: 400px;
    overflow-y: auto;
}

.dropdown-footer {
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
    display: flex;
    justify-content: center;
}

/* Mark All Read Button in Footer */
.mark-all-read-footer-btn {
    background-color: #31503a !important;
    color: white !important;
    font-size: 12px !important;
    padding: 8px 16px !important;
    height: 32px !important;
    border-radius: 16px !important;
    text-transform: none !important;
    font-weight: 500 !important;
    min-width: auto !important;
    white-space: nowrap;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

    .mark-all-read-footer-btn:hover {
        background-color: #2a4532 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    }

    .mark-all-read-footer-btn:active {
        transform: translateY(0) !important;
    }

    .mark-all-read-footer-btn .mud-icon-root {
        font-size: 16px !important;
    }

/* Notification Items */
.notification-item {
    padding: 16px 20px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .notification-item:hover {
        background: #f5f5f5;
    }

    .notification-item:last-child {
        border-bottom: none;
    }

    .notification-item.unread {
        background: #ebefe8;
        border-left: 3px solid #31503a;
    }

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #caedcf;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .notification-icon .mud-icon-root.mud-svg-icon {
        fill: #31503a;
    }

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-size: 14px;
    font-weight: 500;
    color: #1f1f1f;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.notification-message {
    font-size: 13px;
    color: #757575;
    margin: 0 0 4px 0;
    line-height: 1.4;
    overflow: hidden;
}

.notification-time {
    font-size: 12px;
    color: #9e9e9e;
}

/* Profile Menu Items */
.profile-menu-item {
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

    .profile-menu-item:hover {
        background: #f5f5f5;
    }

    .profile-menu-item .mud-icon-root {
        color: #757575;
    }

    .profile-menu-item span {
        font-size: 14px;
        color: #1f1f1f;
    }

    .profile-menu-item.logout span {
        color: #f44336;
    }

    .profile-menu-item.logout .mud-icon-root {
        color: #f44336;
    }

.profile-info {
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-name {
    font-size: 16px;
    font-weight: 500;
    color: #1f1f1f;
    margin: 0 0 4px 0;
}

.profile-title {
    font-size: 14px;
    color: #757575;
    margin: 0;
}

.menu-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 8px 0;
}

.language-selector, .theme-selector, .settings-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Language and Theme Dropdowns */
.language-dropdown, .theme-dropdown, .settings-dropdown {
    padding: 0;
}

.language-option, .theme-option, .settings-option {
    padding: 12px 30px !important;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 14px !important;
    background: white !important;
    color: #1f1f1f !important;
    border: none !important;
    margin: 0 !important;
}

    .settings-dropdown a {
        display: block;
        margin: -12px -30px;
        padding: 12px 30px;
    }

    .language-option:hover, .theme-option:hover, .settings-option:hover {
        background: #f5f5f5 !important;
    }

    .language-option.active, .theme-option.active, .settings-option.active {
        background: #d1e7dd !important;
        color: #31503a !important;
    }

.language-option {
    padding-left: 50px !important;
    position: relative;
}

.language-option svg {
    height: 20px;
    position: absolute;
    top: 12px;
    left: 20px;
}

/* Custom MudAvatar Styles */
.profile-avatar-button {
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: transparent;
    padding: 0;
    border-radius: 50%;
    margin: 0px 10px;
}

/* Override MudAvatar colors */
.profile-avatar .mud-avatar {
    background-color: #31503a !important;
    color: white !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
}

.profile-avatar-dropdown .mud-avatar {
    background-color: #31503a !important;
    color: white !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
}

.page-button-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    margin: 15px 0px;
    padding: 15px;
    border-radius: 10px;
}

    .page-button-list.without-title {
        background: none !important;
        padding: 0px !important;
    }

    .page-button-list .section-title {
        flex: auto;
        font-size: 22px;
        font-weight: bold;
    }

    .page-button-list .mud-button {
        margin: 0px 5px;
    }

    .nav-menu-item-header .mud-nav-link {
        border-radius: 50px;
        height: 50px;
    }

.mud-button{
    text-transform: unset !important;
}

.mud-list-item-icon {
    min-width: 35px !important;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.no-hover:hover {
    background-color: rgba(255, 255, 255, 0) !important;
}

.hover-pointer:hover {
    cursor: pointer;
}

.body-container {
    padding: 14px 0;
}

.text-dark-bold {
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-dark-primary) !important;
}



.row {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

.col {
    flex: 1;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mud-table-body .mud-table-row {
    background-color: rgba(0, 104, 56, 0.05);
}

.mud-table-head .mud-table-row {
    background-color: rgba(0, 104, 56, 0.2);
}
/*GENEL SINIFLAR BITIS*/

/* BUTON, FORM, LINK BASLANGIC */
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.validation-message {
    color: #e50000;
}

.invalid {
    outline: 1px solid #e50000;
}

.edit-user-btn {
    background-color: #BBE9FF !important;
}

.add-user-btn {
    background-color: yellowgreen !important;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: bold;
    height: 50px;
    width: 200px;
    font-size: 16px;
}

    .add-user-btn:hover {
        background-color: #0056b3;
    }


.mud-select .mud-select-input::before {
    border-bottom: none !important;
}

.mud-select .mud-select-input::after {
    border-bottom: none !important;
}

.mud-input::before {
    border-bottom: none !important;
}

.mud-input::after {
    border-bottom: none !important;
}

.readonly-field {
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    color: #757575;
}

    .readonly-field .mud-input-slot {
        cursor: default;
    }

    .readonly-field .mud-input {
        opacity: 0.8;
    }
/* BUTON, FORM, LINK BITIS */

/*TABLO BASLANGIC*/
.user-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 16px;
    text-align: left;
}

    .user-table td {
        padding: 12px;
        border-bottom: 1px solid #ddd;
    }

    .user-table th {
        padding: 12px;
        background-color: #E2F1E7 !important;
        font-weight: bold;
        color: black !important;
    }

    .user-table tbody tr:hover {
        background-color: #f1f1f1;
    }

    .user-table button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 6px 10px;
        border-radius: 4px;
        cursor: pointer;
    }

        .user-table button:hover {
            background-color: #0056b3;
        }

/*TABLO BITIS*/

/*MODAL BASLANGIC*/

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

    .modal-buttons button {
        padding: 8px 16px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
    }

        .modal-buttons button[type="submit"] {
            background-color: #007bff;
            color: white;
        }

        .modal-buttons button[type="button"] {
            background-color: #6c757d;
            color: white;
        }

/*MODAL BITIS*/

.page-header {
    width: 400px;
    height: 26px;
    font-size: 22px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.55;
    letter-spacing: normal;
    text-align: left;
    color: #333132;
}

.header-primary {
    font-size: 50px;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.85;
    letter-spacing: normal;
    text-align: left;
}

.header-secondary {
    font-size: 18px;
    font-weight: 400;
    color: #2e2d2c;
}

.search-field {
    border-radius: 50px;
}

    .search-field .mud-input-control-input-container {
        margin-left: 14px !important;
    }

.mud-input > input.mud-input-root,
div.mud-input-slot.mud-input-root {
    padding: 10px 7px ;
    font-size: 14px !important;
}

.proposal-input .mud-input > input.mud-input-root,
.proposal-input div.mud-input-slot.mud-input-root {
    padding: 20px 7px !important;
    font-size: 14px !important;
}

.custom-layout {
    min-height: calc(100vh - 68px);
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 20px 20px 0px 0px;
    padding: 25px 50px;
}

.header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    color: #2e2d2c;
    font-size: 22px;
}

.go-to-link-button {
    width: 208px !important;
    height: 35px !important;
    border-radius: 17.5px !important;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16) !important;
    background-color: #006838 ;
    display: flex !important;
    align-items: center !important;
}

    .go-to-link-button:hover {
        background-color: #006838 ;
    }

    .go-to-link-button .mud-button-label {
        display: flex !important;
        align-items: center !important;
        color: white !important;
        text-transform: capitalize !important;
        font-size: 16px !important;
    }

        .go-to-link-button .mud-button-label .mud-button-icon-start {
            display: flex !important;
            align-items: center !important;
            color: white !important;
            margin-left: -4px !important;
            margin-right: 0 !important;
            margin-inline-start: 0 !important;
            margin-inline-end: 0 !important;
        }

    .go-to-link-button .mud-button-icon-size-medium > *:first-child {
        font-size: 23px !important;
    }

.ecco-header {
    width: 1268px;
    height: 60px;
    margin: 26px 12px 25px -4px;
    padding: 15px 836px 19px 32px;
    border-radius: 16px;
    background-color: #fcfcfc;
}

.typo-h5 {
    font-size: 22px;
    font-weight: 800;
    color: #2e2d2c;
}

.ecco-card {
    width: 1268px;
    /*height: 580px;*/
    /*margin: 25px 12px 35px 0px;*/
    /*padding: 20px 0 112px;*/
    border-radius: 10px;
    box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
    background-color: #fff;
    margin-top: 25px;
}

.custom-mud-table {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.custom-button {
    width: 240px !important;
    height: 53px !important;
    padding: 17px 70px !important;
    border-radius: 26.5px !important;
    background-color: #2e2d2c !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    cursor: pointer;
}

    .custom-button:hover {
        background-color: #3a3938 !important;
    }


.custom-button-disabled {
    background-color: #555555 !important;
}

.custom-button:disabled {
    background-color: #555555 !important;
}

.custom-button .save-text {
    color: white;
}

/*.custom-button:hover .save-text {
    color: black !important;
}*/

.custom-button .saving-text {
    color: white;
}

.custom-button .mud-button-label {
    color: white !important;
}

.custom-form {
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin-top: 26px;
}

.ecco-card .custom-form {
    margin-top: 0 !important;
    padding: 20px !important;
}

.row-inputs {
    display: flex;
    gap: 38px;
}

.custom-header {
    font-size: 22px;
    font-weight: 800;
    color: #2e2d2c;
    margin-top: 25px;
    margin-bottom: 25px;
}

.Rectangle-1496 {
    width: fit-content;
    height: 95%;
    padding-top: 25px;
    border-radius: 10px;
    box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
    background-color: #fff;
}

.form-item {
    margin-bottom: 30px;
    padding-right: 40px !important;
}

.grid {
    padding-right: 27%;
    max-width: 1200px;
}

.custom-input .mud-input-control-input-container .mud-input .mud-input-root-outlined {
    padding: 18.5px 14px !important;
}

.custom-multiple-lines-input .mud-input-control-input-container .mud-input .mud-input-root-outlined {
    padding: 0 !important;
}

.custom-input .mud-input-control-input-container .mud-input .mud-input-outlined-border {
    border-radius: 19px;
    border: none;
}

.custom-input {
    /*max-width: 400px !important;*/
    /*width: 400px !important;*/
    height: 54px !important;
    border-radius: 16px !important;
    background-color: rgba(46, 45, 44, 0.05) ;
}

.add-page .custom-input {
    width: 400px !important;
    height: 54px !important;
    border-radius: 16px !important;
    background-color: rgba(46, 45, 44, 0.05) ;
}

.add-page .custom-multiple-lines-input {
    height: 70px !important;
}

.corporate-info-page .custom-input {
    width: 400px !important;
    height: 54px !important;
    border-radius: 16px !important;
    background-color: rgba(46, 45, 44, 0.05);
}

.custom-input-desc {
    height: 70px !important;
}

.password-change-card .custom-input {
    max-width: 400px !important;
    height: 54px !important;
    border-radius: 16px !important;
    background-color: rgba(46, 45, 44, 0.05) ;
}

.form-field {
    width: 100%;
}

.form-field-desc {
    width: 100%;
}

.custom-input .mud-input.mud-input-filled.mud-input-underline:before {
    border-bottom: none
}

.custom-picker .mud-input-control-input-container .mud-input .mud-input-outlined-border {
    border: none;
    background-color: rgba(46, 45, 44, 0.05) ;
    border-radius: 16px !important;
    border-bottom: none;
    /* height: 53px; */
    text-align: center;
}

.mud-picker-container .mud-toolbar {
    background-color: #006838 ;
}

.mud-picker-calendar .mud-day.mud-range.mud-range-start-selected {
    background-color: #006838 ;
}

.mud-picker-calendar .mud-day.mud-range.mud-range-end-selected {
    background-color: #006838 ;
}

.editForm-header {
    font-size: 18px;
    font-weight: 500;
    color: #2e2d2c;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(46, 45, 44, 0.05);
}

.select-permission-text {
    color: #C3C3C3 !important;
}

.permission-label {
    white-space: nowrap;
}

.edit-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}

.mud-card {
    width: fit-content;
}

.custom-label {
    margin-left: 14px;
    font-size: 16px;
    font-weight: 500;
}

.card-content {
    padding: 20px 30px;
}

.ecco-card .card-content {
    padding: 0 !important;
}

.grid-custom-layout .mud-grid-spacing-xs-6 {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
}

.navigation-container {
    margin-top: 25px;
    display: flex;
    align-items: center;
    gap: 50px;
}

    .navigation-container .mud-link {
        text-decoration: none !important;
        width: 120px;
        height: 35px;
        padding: 8px 0;
        border-radius: 17.5px;
        text-align: center;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .navigation-container .mud-link-active {
        text-decoration: none !important;
        width: 120px;
        height: 35px;
        padding: 8px 0;
        border-radius: 17.5px;
        text-align: center;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        color: #2e2d2c ;
        font-weight: 700 !important;
    }

        .navigation-container .mud-link-active::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 100%;
            height: 4px;
            border-radius: 2px;
        }

    .navigation-container .mud-link::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 100%;
        height: 4px;
        border-radius: 2px;
        background-color: rgba(35, 35, 35, 0.02);
    }

.edit-icon {
    padding: 6px 5px 5px 6px !important;
    box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11) !important;
    background-color: #fff !important;
}

    .edit-icon .mud-svg-icon > svg > g > path {
        fill: black !important;
    }

.custom-card-header {
    margin-bottom: 0.4rem;
    margin: 0 0 0 10px;
}

.date-filter-dialog {
    width: fit-content;
    height: fit-content;
    /*padding: unset !important;*/
}

.dialog-date-buttons .mud-button-label {
    font-size: 17px !important;
}

.custom-card {
    width: 100%; /* Full width */
    padding: 20px; /* Add padding for content */
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white background for the card */
    color: #333132; /* Text color for the card */
}

.desc {
    width: 949px;
    color: white;
    font-size: 1.2rem;
    margin: 0 auto 20px;
    line-height: 1.5;
    text-align: center;
}

    .desc span {
        font-weight: bold;
        display: block;
        margin-top: 8px;
    }

.proposal-form {
    width: 100vw;
    height: 100vh;
    background-color: #006838;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.payment-form {
    display: flex;
    width: 100vw;
    height: 100vh;
    margin: 0px;
    color: white;
    padding: 0px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color: #006838 !important;
}

    .payment-form .logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
        flex: 1;
        background: url(/images/login_arkaplan.png) no-repeat left center;
        background-size: contain;
        background-position-x: -10rem;
        font-size: 34px;
        font-weight: 500;
    }

        .payment-form .logo img {
            display: block;
            max-width: 300px;
            width: 100%;
            margin: 30px auto;
        }




.foot {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 300;
}

    .foot div {
        flex-grow: 1;
        flex-basis: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        padding: 15px 20px;
        font-size: 13px;
        font-weight: 500;
    }

    .foot .left * {
        display: inline-block;
        margin: 0px 2px;
        height: 17px;
        line-height: 17px;
        justify-content: flex-start;
    }

    .foot .right {
        justify-content: flex-end;
    }

        .foot .right ul li {
            display: inline-block;
            margin: 0px 10px;
            font-weight: 600;
        }

.footer-hr {
    display: block;
    width: 100%;
    height: 1px;
}

.emission-category-selector{
    overflow: hidden;
}

    .emission-category-selector .mud-nav-link-text {
        font-weight: 600 !important;
        font-size: 14px !important;
    }

    .emission-category-selector .mud-nav-item,
    .emission-category-selector .mud-nav-group {
        padding: 0px;
    }

    .emission-category-selector .mud-nav-item a,
    .emission-category-selector .mud-nav-group button{
        border-radius: 0px !important;
    }

        .footer {
            padding: 0px;
            color: black;
            font-size: 14px;
            height: fit-content;
            display: flex;
            flex-direction: column;
            background-color: #ebebeb;
            border-radius: 0px 0px 20px 20px !important;
        }

    .footer .footer-inside {
        padding: 48px 86px;
    }

.mud-picker-input-button .mud-input-adornment-icon-button {
    margin-left: auto;
}

.form-row-bottom-gap {
    margin-bottom: 20px !important;
}

@keyframes blink {
    1% {
        background-color: #006838; /* İlk renk */
    }

    50% {
        background-color: #8dc63f; /* Yanip sönme rengi */
    }

    100% {
        background-color: #006838; /* İlk renge geri dön */
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-main {
    font-size: 56px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 8px;
    color: #333132;
}

.header-sub {
    font-size: 56px;
    font-weight: bold;
    text-align: center;
    color: #006838;
}

.btn-buy {
    width: 120px;
    height: 39px;
    padding: 10px 20px;
    border-radius: 19.5px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    background-color: #006838;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

.btn-log-in {
    width: 120px;
    height: 39px;
    padding: 10px 20px;
    border-radius: 19.5px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    background-color: rgba(51, 49, 50, 0.12);
    color: black;
    font-size: 16px;
    font-weight: bold;
}

.demo-button {
    height: 50px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}

.group-images {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100vw;
    position: absolute;
    bottom: -50px;
    overflow: hidden;
}

    .group-images img {
        width: 20%;
        object-fit: contain;
        border-radius: 16px;
        transition: transform 0.3s ease-in-out;
    }

        .group-images img:first-child {
            margin-left: -8%;
        }

        .group-images img:last-child {
            margin-right: -8%;
        }

        .group-images img:nth-child(2) {
            margin-bottom: -140px;
        }

        .group-images img:nth-child(3) {
            margin-bottom: -280px;
        }

        .group-images img:nth-child(4) {
            margin-bottom: -140px;
        }

.dot-default {
    width: 12px;
    height: 12px;
    background-color: rgba(51, 49, 50, 0.3);
    border-radius: 50%;
    cursor: pointer;
}

.dot-green {
    width: 12px;
    height: 12px;
    background-color: #006838;
    border-radius: 50%;
    cursor: pointer;
}

.text-eccowise-nedir {
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}

.Plan-explanation {
    margin: 16px 0 38px 1px;
    font-size: 22px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.09;
    letter-spacing: normal;
    text-align: center;
    color: #006838;
}

.Plan-page {
    background-color: #f3f3f3;
    width: auto;
    min-height: 100vh;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontal centering */
    justify-content: center;
}

    .Plan-page .Plan-header {
        /*margin: 10px 0 0 0;*/ /* Avoid left margin for better centering */
        font-size: 32px;
        font-weight: bold;
        line-height: 1.31;
        text-align: center; /* Centers text within its block */
        color: #006838;
    }

.product-card-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Ensures cards wrap to the next line on smaller screens */
    gap: 20px; /* Space between cards */
    width: 100%;
}

.product-card {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    background-color: #FFF;
    padding: 1rem;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}

    .product-card:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }

    .product-card .product-card-icon {
        width: 48px;
    }

    .product-card .product-card-header {
        font-size: 20px;
        font-weight: bold;
        margin: 10px auto;
        text-align: center;
        color: #333132;
    }

    .product-card .product-card-content {
        display: flex;
        margin: 10px auto;
        font-size: 12px;
        line-height: 2;
        text-align: center;
        color: #333132;
        min-height: 250px;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .product-card .product-card-note {
        margin: 10px auto;
        font-size: 12px;
        font-weight: 300;
        text-align: center;
        color: #006838;
    }

    .product-card .product-card-button {
        width: 278px;
        height: 30px;
        margin: 8px 0 0;
        padding: 10px 18px 30px 21px;
        border-radius: 28px;
        background-color: #006838;
    }

    .product-card .card-icon {
        display: block;
        width: 80px;
        height: 80px;
        margin: 10px auto;
        text-align: center;
    }

    .product-card .mud-button-label {
        width: 100% !important;
        height: 21px !important;
        font-size: 18px !important;
        font-weight: bold !important;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: center;
        color: #fff;
        text-transform: capitalize;
    }

.buy-button {
    background-color: #006838 !important;
    width: 278px !important;
    height: 50px !important;
    border-radius: 28px !important;
}

.rectangle-11792 {
    width: 629px;
    height: 559.3px;
    margin: 200px 0 0 150px;
    align-items: center;
}

.rectangle-11793 {
    width: 629px;
    height: 559.3px;
    margin: 200px -30px 0 200px;
    align-items: center;
}

.hakkmzda {
    width: 532px;
    height: 37px;
    margin: 0 102px 22px 170px;
    font-size: 32px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.31;
    letter-spacing: normal;
    text-align: center;
    color: #006838;
}

.bizkimiz-content-header {
    width: 532px;
    height: 37px;
    margin: 0 160px 22px 170px;
    font-size: 32px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.31;
    letter-spacing: normal;
    text-align: center;
    color: #006838;
}

.hakkmzda-content {
    width: 532px;
    height: 381px;
    margin: 22px 102px 0 0;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    color: #006838;
}

.bizkimiz-image {
    object-fit: cover;
    height: 100%;
    max-width: 50%;
    padding: 0;
    justify-content: center;
    align-items: stretch;
    display: flex;
    flex: 1;
    width: 50%; /* Set width to half of the parent */
    height: 100%; /* Make it full height of the parent */
    margin: 0; /* Remove margin */
    float: left; /* Align to the left side */
}

.header-proposal {
    margin: 40px auto;
}

.custom-checkbox {
    margin-top: 0.4rem;
}

.button-container {
    text-align: center;
    /* margin-top: 0.2rem; */
}

.slogan-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.slogan-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 40;
    gap: 16px;
    margin-top: 80px;
    margin-left: 5px;
}

.slogan-gallery-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 91vh;
    position: relative;
    overflow: hidden;
}

.gallery-items {
    display: flex;
    flex-direction: row;
    gap: 60px;
    width: 100%;
}

.giris-page-first-div {
    display: flex;
    background-color: #FFF;
    box-shadow: 0px 0px 10px #EEE;
    border-bottom: 1px solid #ededed;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
    padding: 20px 25px;
}

    .giris-page-first-div .logo {
        max-width: 50%;
    }

        .giris-page-first-div .logo img {
            max-width: 180px;
            max-height: 100%;
        }

    .giris-page-first-div .buy-giris-button-div {
        display: block;
        margin: 0px;
        max-width: 50%;
    }

    .giris-page-first-div .buy-giris-button-div {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: flex-end;
        align-items: center;
    }

        .giris-page-first-div .buy-giris-button-div button {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            margin: 0px 5px;
        }

.eccowise-nedir {
    z-index: 9999;
    background-color: #006838;
    color: white;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.eccowise-nedir-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 17px;
    margin-bottom: 0px;
    background-color: #006838;
}

.eccowise-nedir-image {
    display: flex;
    width: 100%;
    height: calc(100% - 64px);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.eccowise-nedir-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    height: 100%;
}

.eccowise-nedir-content-header {
    font-size: 32px;
    margin: 0;
    text-align: center;
}

.text-eccowise-nedir {
    width: 80%;
    max-width: 532px;
    overflow: hidden;
    text-align: center;
}

.index-main {
    overflow: hidden;
}

.hakkmzda-main {
    z-index: 9999;
    background-color: #f3f3f3;
    color: white;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding-top: 10px;
}

.hakkmzda-main-sub {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 56px;
}

.slogan-content {
    font-size: 22px;
    text-align: center;
}

.bizkimiz {
    z-index: 9999;
    background-color: rgba(0, 104, 56, 0.2);
    color: white;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.bizkimiz-main {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.bizkimiz-content-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.bizkimiz-content {
    width: 470px;
    height: 381px;
    margin: 22px 0 0 30px;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    color: #006838;
}

.add-user-form .role-input-group .mud-overlay {
    position: absolute !important;
    z-index: 99999;
    left: 0;
    top: 0;
}

    .add-user-form .role-input-group .mud-overlay .mud-overlay-content {
        position: absolute !important;
        z-index: 100000;
        background: white;
        margin-top: -1px;
        transform: none !important;
        transition-duration: 251ms;
        transition-delay: 0ms;
        max-width: 800px;
        left: 300px;
        top: 568px;
        opacity: 1;
        transition: opacity;
        width: 100%;
        overflow-y: auto;
        outline: 0;
        box-shadow: var(--mud-elevation-8);
        padding: 16px;
        border-radius: 8px;
    }

.user-edit-dialog .mud-overlay .mud-overlay-content {
    position: absolute !important;
    z-index: 100000;
    background: white;
    margin-top: -1px;
    transform: none !important;
    transition-duration: 251ms;
    transition-delay: 0ms;
    max-width: 800px;
    left: 58px;
    top: 288px;
    opacity: 1;
    transition: opacity;
    width: 100%;
    overflow-y: auto;
    outline: 0;
    box-shadow: var(--mud-elevation-8);
    padding: 16px;
    border-radius: 8px;
}

.sa-user-edit-dialog .mud-overlay .mud-overlay-content {
    position: absolute !important;
    z-index: 100000;
    background: white;
    margin-top: -1px;
    transform: none !important;
    transition-duration: 251ms;
    transition-delay: 0ms;
    max-width: 800px;
    left: 32px;
    top: 438px;
    opacity: 1;
    transition: opacity;
    width: 100%;
    overflow-y: auto;
    outline: 0;
    box-shadow: var(--mud-elevation-8);
    padding: 16px;
    border-radius: 8px;
}

.corporate-edit-dialog .mud-overlay .mud-overlay-content {
    position: absolute !important;
    z-index: 100000;
    background: white;
    margin-top: -1px;
    transform: none !important;
    transition-duration: 251ms;
    transition-delay: 0ms;
    max-width: 800px;
    left: 30px;
    top: 480px;
    opacity: 1;
    transition: opacity;
    width: 100%;
    overflow-y: auto;
    outline: 0;
    box-shadow: var(--mud-elevation-8);
    padding: 16px;
    border-radius: 8px;
}

/* GLOBAL MODAL DESIGN */
.mud-dialog-container {
    background: rgba(255, 255, 255, 0.4);
    z-index: 999 !important;
}

.mud-dialog {
    border-radius: 10px !important;
    background: #FFF !important;
}

        .mud-dialog .mud-dialog-title h6 {
            display: block;
            margin: 20px auto;
        }

.mud-dialog .mud-dialog-title {
        border-bottom: 1px solid rgba(46, 45, 44, 0.2) !important;
        font-size: 18px;
        padding: 16px 24px !important;
        margin-bottom: 6px !important;
}

.mud-dialog-title {
    color: #000;
    font-weight: 900;
    text-align: center;
    font-size: 22px;
}

.mud-dialog-content {
    color: #000;
    font-size: 14px;
    text-align: justify;
}

.mud-button-close {
    background: #EEE !important;
    margin: 0px !important;
    top: 4px !important;
    right: 4px !important;
}

.mud-dialog .mud-dialog-title .mud-button-close {
    right: 4px !important;
    padding: 6px !important;
}

/*.mud-dialog .mud-button {
    border-radius: 20px;
    padding: 10px 30px;
    background: #333;
    border: 1px solid transparent;
    color: #FFFFFF !important;
}

    .mud-dialog .mud-button:hover {
        background: #FFF !important;
        border-color: #333 !important;
        border-radius: 20px;
        padding: 10px 30px;
        color: #333 !important;
    }*/
.mud-dialog .mud-dialog-actions {
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-content: center !important;
    margin-top: 20px;
}
.dialog-close-icon {
    position: absolute !important;
    top: 4px !important;
    background-color: rgba(46, 45, 44, 0.05) !important;
    right: 4px !important;
    padding: 6px !important;
}

.mud-dialog-width-sm {
    padding: 0px !important;
}

.mud-dialog-width-md {
    max-width: 960px;
    padding: 0px !important;
}

.mud-dialog-width-lg {
    padding: 0px !important;
}

.mud-badge.mud-badge-top.right {
    inset: auto auto calc(100% - 6px) calc(100% - 4px) !important;
}

.custom-mud-table .mud-table-cell {
    height: 52px !important;
}
/* GLOBAL MODAL DESIGN */

/* DATEPICKER MODAL */
.date-filter-dialog .dialog-date-buttons button {
    background-color: unset !important;
    padding: 15px 30px;
    color: grey !important;
    border: unset !important;
}

.date-filter-dialog .mud-toolbar button {
    background-color: unset !important;
    padding: 3px 5px;
    border: unset !important;
}

.date-filter-dialog .dialog-date-buttons button:hover {
    border: unset !important;
    bordor-color: unset !important;
    background: unset !important;
    color: unset !important;
    padding: 15px 30px;
}

.date-filter-dialog .mud-toolbar button:hover {
    border: unset !important;
    border-color: unset !important;
    background: unset !important;
    color: unset !important;
    padding: 3px 5px;
}

.mud-picker-datepicker-toolbar .mud-button-date {
    font-size: 1.7rem !important;
}
/* DATEPICKER MODAL */
.numeric-field .mud-input-numeric-spin .mud-button {
    background: rgba(0, 0, 0, 0) !important;
    color: rgba(66, 66, 66, 1) !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 16px !important;
}

    .numeric-field .mud-input-numeric-spin .mud-button:hover {
        background: #E6E6E6 !important;
        color: rgba(66, 66, 66, 1) !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 16px !important;
    }

.custom-form .custom-input .mud-input-numeric-spin .mud-button {
    border-radius: 16px !important;
}

    .custom-form .custom-input .mud-input-numeric-spin .mud-button:hover {
        border-radius: 16px !important;
    }

.edit-dialog .permissions {
    border-radius: 16px !important;
    background-color: rgba(46, 45, 44, 0.05) ;
    padding: 5px 15px !important;
    border: none !important;
}

    .edit-dialog .permissions:hover {
        border-radius: 16px !important;
        background-color: rgba(46, 45, 44, 0.05) !important;
        padding: 5px 15px !important;
        border: none !important;
    }

.mud-table-cell {
    position: relative;
    padding: 10px !important;
}

.mud-table-cell span:has(.new-item-pulse) {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.new-item-pulse {
    position: relative;
    flex-shrink: 0;
    order: -1; /* Metinden önce göster */
    height: 8px;
    width: 8px;
    background-color: #8cc63f;
    border-radius: 50%;
    animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(140, 198, 63, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(140, 198, 63, 0);
    }
}


/******************************************************************/
/* Responsive Adjustments */
/* Responsive Design */
/******************************************************************/


@media (max-width: 1700px) {
    .gallery-items {
        margin-right: -24px;
    }
}

@media (max-width: 1668px) {
    .charts {
        flex-direction: column !important;
        margin-bottom: 22px !important;
    }

        .charts .chart-container {
            width: 1200px !important;
        }
}

@media (max-width: 1600px) {
    .gallery-items {
        margin-right: -6px;
    }
}

@media (max-width: 1568px) {
    .ecco-card {
        /*todo*/
    }
}

@media (max-width: 1500px) {
    .group-images {
        bottom: -20px;
    }

    .gallery-items {
        margin-right: 0;
        margin-left: -6px;
    }
}

@media (max-width: 1470px) {
    .responsive-toolbar {
        padding: 10px 0 !important;
    }
}

@media (max-width: 1400px) {
    .group-images {
        bottom: -2px;
    }

    .gallery-items {
        margin-right: 0;
        margin-left: -24px;
    }
}

@media (max-width: 1368px) {
    .charts .chart-container {
        width: 900px !important;
    }
}

@media (max-width: 1300px) {
    .gallery-items {
        margin-left: -30px;
    }
}

@media (max-width: 1215px){
    .sticky-toolbar {
        .table-actions {
             margin-left: 10px !important;         
        }
        .custom-white-button .mud-button-label {
            font-size: 12px !important;
        }
        .mud-button-label {
            font-size: 12px !important;
        }
    }

    .responsive-toolbar {
        padding: 10px 0 !important;
    }
}

@media (max-width: 1200px) {

    .custom-layout .mud-main-content .custom-card {
        padding: 0 !important;
    }

    .mud-main-content .card-content .custom-form .custom-input {
        width: 270px !important;
    }

    .gallery-items {
        margin-left: -40px;
    }

    .add-user-form .role-input-group .mud-overlay .mud-overlay-content {
        left: 200px !important;
    }
}

@media (max-width: 1120px) {
    .charts .chart-container {
        width: 760px !important;
    }
}

@media (max-width: 1100px) {
    .gallery-items {
        margin-left: -50px;
    }
}

@media (max-width: 1024px) {

    .charts .chart-container {
        width: 620px !important;
    }

    .donut-chart-container {
        height: 320px !important;
    }

    .gallery-items {
        gap: 40px !important;
    }

    .add-user-form .role-input-group .mud-overlay .mud-overlay-content {
        width: 620px !important;
    }
}

@media (max-width: 900px) {

    .navigation-container {
        flex-wrap: wrap;
    }

    .navigation-container {
        gap: 12px !important;
    }

    .mud-xs-table .mud-table-cell {
        font-size: 10px !important;
    }

    .responsive-toolbar {
        flex-direction: column;
    }

    .sticky-toolbar {
        width: 100%;

        .custom-white-button 
        {
           margin-bottom: 4px !important;
        }
    }

    .mud-toolbar {
        display: block !important;
        position: relative !important;
        align-items: center !important;
        height: auto !important;
    }

    .mud-button-label {
        font-size: 10px;
    }

    .custom-white-button .mud-button-label {
        font-size: 10px !important;
    }

    .edit-dialog .custom-input {
        width: 300px !important;
    }

    .user-edit-dialog .mud-overlay .mud-overlay-content {
        left: 10px !important;
        max-width: 700px !important;
    }

    .sa-user-edit-dialog .mud-overlay .mud-overlay-content {
        left: 10px !important;
        max-width: 700px !important;
    }

    .corporate-edit-dialog .mud-overlay .mud-overlay-content {
        max-width: 600px !important;
    }

    .navigation-container {
        flex-wrap: wrap;
    }
}

@media (max-width: 820px) {
    .charts .chart-container {
        width: 520px !important;
    }

    .donut-chart-container {
        display: none !important;
    }
}

@media (max-width: 820px) {

    .row-inputs {
        flex-direction: column !important;
        width: 270px !important;
    }

    .header-primary {
        font-size: 18px !important;
    }

    .custom-layout {
        width: 600px !important;
        padding: 5px 10px;
    }

    .custom-card .card-content .custom-form {
        align-items: center !important;
    }

    .row-inputs .mud-select {
        width: 270px !important;
    }

    .location-edit-dialog .custom-form .row-inputs {
        gap: 4px !important;
    }

    .location-edit-dialog .custom-form {
        gap: 1px !important;
        padding: 0 !important;
    }

    .location-edit-dialog .mud-dialog-content {
        margin: 0 !important;
    }

    .add-user-form .role-input-group .mud-overlay .mud-overlay-content {
        left: 20px !important;
        top: 906px !important;
    }

    .permissions-panel {
        width: 390px !important;
        padding: 16px !important;
        left: -20px !important;
    }

    .user-edit-dialog .mud-overlay .mud-overlay-content {
        max-width: 380px !important;
        top: 630px !important;
    }
    .sa-user-edit-dialog .mud-overlay .mud-overlay-content {
        max-width: 380px !important;
        top: 776px !important;
    }

    .corporate-edit-dialog .mud-overlay .mud-overlay-content {
        max-width: 420px !important;
        left: 6px !important;
        top: 672px !important;
    }

    .row-inputs {
        flex-direction: column !important;
        /*align-items: center !important;*/
        width: 270px !important;
    }

    .header-primary {
        font-size: 18px !important;
    }

    .custom-layout {
        width: 600px !important;
    }

    .custom-card .card-content .custom-form {
        align-items: center !important;
    }

    .row-inputs .mud-select {
        width: 270px !important;
    }

    .edit-dialog .permissions-panel {
        width: 400px !important;
        left: -20px !important;
    }

    .location-edit-dialog .custom-form .row-inputs {
        gap: 4px !important;
    }

    .location-edit-dialog .custom-form {
        gap: 1px !important;
        padding: 0 !important;
    }

    .location-edit-dialog .mud-dialog-content {
        margin: 0 !important;
    }
}

@media (max-width: 784px) {
    .footer {
        padding: 24px 43px !important;
    }

    .footer-links {
        flex-direction: column !important;
        gap: 20px !important;
    }

        .footer-links > div {
            flex-direction: row !important;
        }
}

@media (max-width: 768px) {
    .mud-main-content .mud-container .custom-layout .header-container {
        flex-direction: column !important;
        margin: 20px 0px;
    }

    .product-card {
        margin: 0 0 0 12px;
        height: 550px;
    }

    .Plan-explanation {
        font-size: 16px;
    }

    .bizkimiz-content {
        margin: 0 0 0 50px;
        font-size: 15px;
        width: 375px
    }

    .bizkimiz-content-main {
        margin: 400px 0 0 -250px;
    }

    .bizkimiz-image img {
        height: 400px;
        width: 450px;
        margin: 0 -225px 0 0;
    }

    .custom-form {
        max-width: 400px !important; /* Allow form to stretch for smaller screens */
        padding: 10px;
    }

    .input-mud {
        width: 100%; /* Ensure full width on smaller screens */
    }

    .desc {
        max-width: 400px !important; /* Allow form to stretch for smaller screens */
        font-size: 12px; /* Further reduce font size */
    }

    .header-proposal {
        margin-bottom: 0.4rem;
        margin: 0 0 0 10px;
    }

    .slogan-group {
        margin-top: 40px;
        margin-bottom: 80px;
        /*display: block !important;*/
        margin-left: -10px;
    }

    .slogan-header {
        margin-bottom: 10px;
        width: 380px;
        margin-left: 10px;
    }

    .Plan-page {
        padding: 20px;
    }

    .Plan-header {
        font-size: 24px;
        text-align: center;
    }

    .Plan-explanation {
        font-size: 16px;
        text-align: center;
    }

    .proposal-form {
        padding: 15px;
    }

    .desc {
        font-size: 15px;
        width: 365px;
        margin: 40px 0 20px 10px
    }

    .custom-card {
        padding: 15px;
    }

    .custom-button {
        font-size: 14px;
        padding: 8px;
    }

    .header-sub {
        display: block;
        font-size: 46px;
    }

    .slogan-gallery-page {
        max-height: 700px;
    }

    .group-images {
        justify-content: normal;
        bottom: 0;
    }

    .gallery-items {
        margin-left: 0;
        max-height: 500px;
        max-width: 500px;
        margin-left: 0 !important;
    }

    .group-images img {
        border-radius: 16px;
    }

        .group-images img:nth-child(1) {
            margin-bottom: -10px;
            margin-right: -25px;
            margin-left: -65px;
            width: 100px;
        }

        .group-images img:nth-child(2) {
            margin-bottom: -80px;
            margin-right: -25px;
            width: 100px;
        }

        .group-images img:nth-child(3) {
            margin-bottom: -140px;
            margin-right: -25px;
            width: 100px;
        }

        .group-images img:nth-child(4) {
            margin-bottom: -80px;
            margin-right: -25px;
            width: 100px;
        }

        .group-images img:nth-child(5) {
            margin-bottom: -10px;
            margin-right: -60px;
            width: 100px;
        }

    /* .buy-giris-button-div {
        display: block;
        gap: 10px;
        align-items:end;
        margin-left:80px;
        margin-top:30px;
    }

    .btn-buy {
       margin-bottom:10px;
       margin-top:25px;
    }

   .giris-page-first-div {
      margin-top:-30px;
    }*/

    .btn-log-in,
    .btn-buy,
    .btn-ai {
        font-size: 12px;
        height: auto;
        width: auto;
        display: block !important;
        margin: 5px !important;
    }

    .eccowise-nedir-image {
        display: block;
        margin-top: -100px;
    }

    .rectangle-11792 {
        margin-bottom: 45px;
        margin-top: 180px;
        margin-left: 185px;
    }

        .rectangle-11792 img {
            width: 300px !important;
            height: fit-content;
            margin: 0 0 200px -130px;
        }

    .eccowise-nedir-content {
        align-items: center;
        width: 475px;
        margin-top: -220px;
        margin-left: -25px;
    }

    .eccowise-nedir-content-header {
        display: block;
        width: 400px;
        align-items: center;
        margin-top: -660px;
        font-size: 24px;
        margin-bottom: -180px;
        height: 425px;
    }

    .text-eccowise-nedir {
        text-indent: 16px;
        margin-top: -190px;
        margin-bottom: 16px;
        margin-left: 10px;
        margin-right: 15px;
        overflow: visible; /* Ensure content is not clipped */
        font-size: 16px;
        width: 360px;
    }


    .header-main {
        font-size: 40px !important;
    }

    .hakkmzda-main {
        z-index: 9999;
        background-color: #f3f3f3;
        color: white;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        padding-top: 10px;
    }

    .hakkmzda-main-sub {
        display: block;
        align-items: center;
        justify-content: center;
    }

    .hakkmzda {
        margin: 0 0 22px 60px;
    }

    .bizkimiz-content-header {
        margin: 50px 0 0 50px;
    }

    .hakkmzda-content {
        width: 380px;
        margin: 22px 20px 0 -40px;
        font-size: 16px;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: normal;
        text-align: center;
        color: #006838;
    }

    .rectangle-11793 img {
        width: 350px;
        margin: -110px -230px 0 -220px;
        align-items: center;
    }

    .slogan-content {
        font-size: 20px;
        text-align: center;
    }
}

@media (max-width: 599px) {
    .page-button-list {
        flex-direction: column;
    }

    .page-button-list .mud-button {
        margin: 5px 5px !important;
    }

    .material-dropdown.notifications {
        position: absolute;
        left: -105px;
    }

    .material-dropdown.profiledropdown {
        position: absolute;
        left: -165px;
    }

    .navigation-container {
        align-items: center;
        gap: 20px;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
    }

    .topbar {
        height: 210px !important;
        padding: 4px !important;
    }

    .topbar-wrapper {
        flex-direction: column !important;
        margin: 0px !important;
        height: 210px;
    }

    .mud-main-content {
        min-height: unset !important;
    }

    .mud-main-content-wrapper {
        background: #FFF !important;
        border-radius: 20px 20px 0px 0px !important;
        top: 30px;
    }

    .custom-layout .mud-main-content .mud-paper {
        width: 100% !important;
    }

    .charts .chart-container {
        padding: 8px !important;
        max-width: 400px !important;
    }

    .custom-layout {
        width: 100% !important;
        min-height: unset !important;
    }

    .charts {
        max-width: 100% !important;
    }

    .form-change-pw {
        width: 400px !important;
    }

    .change-pw-wrapper {
        width: 400px !important;
    }

    .date-filter-dialog {
        width: 400px;
        height: fit-content;
    }

    .gallery-items {
        margin: 0 0 0 0 !important;
        gap: 60px !important;
    }

    .group-images img:nth-child(1) {
        margin-bottom: -10px;
        margin-right: -50px;
        width: 140px;
    }

    .group-images img:nth-child(2) {
        margin-bottom: -80px;
        margin-right: -50px;
        width: 140px;
    }

    .group-images img:nth-child(3) {
        margin-bottom: -140px;
        margin-right: -50px;
        width: 140px;
    }

    .group-images img:nth-child(4) {
        margin-bottom: -80px;
        margin-right: -50px;
        width: 140px;
    }

    .group-images img:nth-child(5) {
        margin-bottom: -10px;
        margin-right: -50px;
        width: 140px;
    }

    .add-report .form-item {
        margin-bottom: 0 !important;
    }

    .add-user-form .role-input-group .mud-overlay .mud-overlay-content {
        left: 10px !important;
        top: 1000px !important;
        width: 400px !important;
    }
}

@media (max-width: 500px) {
    .gallery-items {
        margin: 0 0 0 0 !important;
        gap: 60px !important;
    }

    .group-images img:nth-child(1) {
        margin-bottom: -10px;
        margin-right: -50px;
        width: 100px;
    }

    .group-images img:nth-child(2) {
        margin-bottom: -80px;
        margin-right: -50px;
        width: 100px;
    }

    .group-images img:nth-child(3) {
        margin-bottom: -140px;
        margin-right: -50px;
        width: 100px;
    }

    .group-images img:nth-child(4) {
        margin-bottom: -80px;
        margin-right: -50px;
        width: 100px;
    }

    .group-images img:nth-child(5) {
        margin-bottom: -10px;
        margin-right: -50px;
        width: 100px;
    }
}

.skdm-step-content .mud-select div.mud-input-slot.mud-input-root {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    line-height: 1.4375em;
    min-height: 1.4375em;
}

.gri2-page {
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
    container-name: gri-workspace;
    container-type: inline-size;
    background: #eef2f7;
    color: #0d1421;
    padding: clamp(12px, 2vw, 24px);
    box-sizing: border-box;
}

.gri2-page,
.gri2-page * {
    box-sizing: border-box;
}

.gri2-entry {
    background: #ffffff;
    border: 1px solid #e4e9ef;
    border-radius: 16px;
    padding: 30px 34px;
    box-shadow: 0 8px 28px rgba(13,20,33,.08);
}

.gri2-entry h1,
.gri2-section-title h1,
.gri2-panel h2,
.gri2-panel h3 {
    letter-spacing: 0;
}

.gri2-entry h1 {
    font-size: 30px;
    margin-bottom: 6px;
}

.gri2-entry p,
.gri2-section-title p {
    color: #5a6a80;
}

.gri2-entry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.gri2-entry-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 16px;
    border: 1px solid #dce3ea;
    border-radius: 8px;
    background: #f8fafb;
    color: #0d1421;
    text-decoration: none;
    font-weight: 800;
}

.gri2-entry-card span:first-child,
.gri2-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #00eda2, #008efa);
    color: #111111;
    font-weight: 800;
}

.gri2-entry-card span:first-child {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.gri2-shell {
    --gri-sidebar-width: clamp(156px, 20vw, 220px);
    container-name: gri-workspace;
    container-type: inline-size;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: calc(100dvh - 72px);
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: #eef2f7;
    padding: clamp(10px, 1.5vw, 18px) clamp(12px, 2vw, 24px) clamp(14px, 2vw, 28px);
    box-sizing: border-box;
}

.gri2-shell,
.gri2-shell * {
    box-sizing: border-box;
}

.gri2-topbar {
    flex: 0 0 54px;
    min-height: 54px;
    display: grid;
    grid-template-columns: clamp(156px, 20vw, 220px) minmax(0, 1fr) auto !important;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e4e9ef;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

.gri2-logo {
    grid-column: 1;
    padding: 0 18px;
    border-right: 1px solid #e4e9ef;
}

.gri2-logo img {
    display: block;
    width: auto;
    max-width: 112px;
    max-height: 28px;
}

.gri2-crumbs,
.gri2-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.gri2-crumbs {
    grid-column: 2;
    padding: 0 18px;
    color: #94a3b8;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
}

.gri2-crumbs a {
    color: #5a6a80;
    text-decoration: none;
}

.gri2-crumbs span:last-child {
    color: #0d1421;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gri2-top-actions {
    grid-column: 3;
    padding: 0 14px;
}

.gri2-top-actions small {
    color: #00a875;
    font-weight: 700;
}

.gri2-year {
    border: 1px solid #e4e9ef;
    border-radius: 8px;
    background: #f1f5f9;
    padding: 5px 12px;
    color: #5a6a80;
    font-size: 12px;
    font-weight: 800;
}

.gri2-avatar {
    width: 32px;
    height: 32px;
    font-size: 11px;
}

.gri2-avatar-loading {
    background: rgba(148,163,184,.28);
    position: relative;
    overflow: hidden;
}

.gri2-app-body {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: clamp(156px, 20vw, 220px) minmax(0, 1fr) !important;
    grid-auto-flow: column;
    min-height: calc(100dvh - 160px);
    background: #ffffff;
    border: 1px solid #e4e9ef;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    overflow: visible;
    box-shadow: 0 8px 28px rgba(13,20,33,.08);
}

.gri2-sidebar {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow: visible;
    background: #2c3a52;
    color: #9db4cc;
    padding: 14px 12px;
}

.gri2-sidebar::-webkit-scrollbar,
.gri2-main::-webkit-scrollbar,
.gri2-table-scroll::-webkit-scrollbar,
.gri2-selection-table-wrap::-webkit-scrollbar,
.gri-assignment-table-wrap::-webkit-scrollbar,
.gri-table-editor::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.gri2-sidebar::-webkit-scrollbar-thumb,
.gri2-main::-webkit-scrollbar-thumb,
.gri2-table-scroll::-webkit-scrollbar-thumb,
.gri2-selection-table-wrap::-webkit-scrollbar-thumb,
.gri-assignment-table-wrap::-webkit-scrollbar-thumb,
.gri-table-editor::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(100,116,139,.4);
}

.gri2-sidebar section {
    display: grid;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.11);
}

.gri2-sidebar section:first-child {
    min-height: 0;
    overflow: hidden;
}

.gri2-side-label {
    color: #6380a0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 0 6px 3px;
}

.gri2-side-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    border: 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: transparent;
    color: #9db4cc;
    text-decoration: none;
    font-size: 12px;
    text-align: left;
}

.gri2-side-link span {
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.25;
}

.gri2-side-link.active {
    background: rgba(0,237,162,.14);
    color: #e2fff7;
    font-weight: 800;
    box-shadow: inset 3px 0 0 #00eda2;
}

.gri2-side-link.muted {
    opacity: .75;
}

.gri2-side-link b {
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(0,237,162,.14);
    color: #00eda2;
    padding: 2px 7px;
    font-size: 10px;
}

.gri2-standard-scroll {
    display: grid;
    gap: 4px;
    max-height: min(34vh, 260px);
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

.gri2-side-skeleton,
.gri2-skeleton-table div {
    position: relative;
    overflow: hidden;
    background: #e6edf5;
}

.gri2-side-skeleton {
    height: 34px;
    border-radius: 6px;
    opacity: .28;
}

.gri2-side-skeleton.short {
    width: 78%;
}

.gri2-side-skeleton::after,
.gri2-skeleton-table div::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    animation: gri2-loading-shimmer 1.2s infinite;
}

@keyframes gri2-loading-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.gri2-side-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.11);
}

.gri2-side-user strong {
    display: block;
    max-width: 142px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c8dcf0;
    font-size: 12px;
}

.gri2-side-user small {
    display: block;
    max-width: 142px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #6380a0;
    font-size: 10px;
}

.gri2-side-user-loading {
    display: grid;
    gap: 6px;
    width: 142px;
}

.gri2-side-user-loading span {
    display: block;
    height: 11px;
    border-radius: 999px;
    background: rgba(230,237,245,.28);
    position: relative;
    overflow: hidden;
}

.gri2-side-user-loading span:last-child {
    width: 58%;
}

.gri2-avatar-loading::after,
.gri2-side-user-loading span::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    animation: gri2-loading-shimmer 1.2s infinite;
}

.gri2-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 100%;
    background: #f8fafb;
    overflow: visible;
}

.gri2-content {
    width: 100%;
    max-width: 100%;
    padding: clamp(14px, 2vw, 22px);
}

.gri2-section-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.gri2-section-title > *,
.gri2-form-header > *,
.gri2-review-banner > *,
.gri2-report-banner > * {
    min-width: 0;
}

.gri2-section-title h1,
.gri2-section-title h2,
.gri2-section-title h3,
.gri2-form-header h1,
.gri2-review-banner h1,
.gri2-report-banner strong,
.gri2-card p {
    overflow-wrap: anywhere;
}

.gri2-section-title h1 {
    margin: 0;
    font-size: 22px;
}

.gri2-tabs,
.gri2-toolbar,
.gri2-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gri2-tabs {
    padding: 12px 22px;
    background: #ffffff;
    border-bottom: 1px solid #e4e9ef;
}

.gri2-tabs button {
    border: 0;
    background: transparent;
    color: #7890a8;
    font-weight: 800;
    font-size: 12px;
    padding: 8px 4px;
    border-bottom: 2px solid transparent;
}

.gri2-tabs button.active {
    color: #008efa;
    border-bottom-color: #008efa;
}

.gri2-toolbar {
    margin-bottom: 14px;
}

.gri2-toolbar > * {
    flex: 1 1 260px;
    min-width: 0;
}

.gri2-panel {
    background: #ffffff;
    border: 1px solid #dce3ea;
    border-radius: 10px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.gri2-panel-pad {
    padding: 16px;
}

.gri2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.gri2-table-scroll,
.gri-assignment-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gri2-table th {
    padding: 10px 12px;
    text-align: left;
    color: #94a3b8;
    background: #f8fafb;
    border-bottom: 1px solid #e4e9ef;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

.gri2-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #eef2f7;
    color: #5a6a80;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.gri2-table tr:hover td,
.gri2-row-active td {
    background: #f1fbf8;
}

.gri2-skeleton-table {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.gri2-skeleton-table div {
    height: 38px;
    border-radius: 7px;
    background: #eef3f8;
}

.gri2-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    color: #5a6a80;
    font-size: 12px;
    background: #ffffff;
}

.gri2-code {
    display: inline-flex;
    border-radius: 5px;
    background: #e6fdf6;
    color: #00a875;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 800;
}

.gri2-status,
.gri2-review-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 800;
}

.gri2-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.gri2-status.approved {
    background: #e6fdf5;
    color: #00a875;
}

.gri2-status.approved::before {
    background: #00c98b;
}

.gri2-status.draft {
    background: #e6f4ff;
    color: #008efa;
}

.gri2-status.draft::before {
    background: #008efa;
}

.gri2-status.not-started {
    background: #f1f5f9;
    color: #5a6a80;
}

.gri2-status.not-started::before {
    background: #94a3b8;
}

.gri2-review-state {
    margin-left: 6px;
    background: #fffbeb;
    color: #f59e0b;
}

.gri2-progress {
    display: flex;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e4e9ef;
}

.gri2-progress span.approved {
    background: #00c98b;
}

.gri2-progress span.draft {
    background: #008efa;
}

.gri2-progress span.not-started {
    background: #e4e9ef;
}

.gri2-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.gri2-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.gri2-card {
    background: #ffffff;
    border: 1px solid #dce3ea;
    border-radius: 10px;
    padding: 16px;
    min-width: 0;
    max-width: 100%;
}

.gri2-card h3 {
    margin: 0 0 12px;
    font-size: 15px;
}

.gri2-disclosure-selection {
    display: grid;
    gap: 0;
}

.gri2-selection-table-wrap {
    height: 420px;
    max-height: 42vh;
    min-height: 260px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #e4e9ef;
    border-radius: 8px;
}

.gri2-selection-table-wrap-compact {
    height: auto;
    max-height: 260px;
    min-height: 0;
}

.gri2-selection-table {
    table-layout: fixed;
}

.gri2-selection-table th:nth-child(2),
.gri2-selection-table td:nth-child(2) {
    width: 110px;
}

.gri2-selection-table th:nth-child(4),
.gri2-selection-table td:nth-child(4) {
    width: 130px;
}

.gri2-selection-table th:nth-child(5),
.gri2-selection-table td:nth-child(5) {
    width: 90px;
}

.gri2-selection-table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.gri2-selection-table td:first-child,
.gri2-selection-table th:first-child {
    width: 82px;
}

.gri2-selection-summary {
    padding: 12px 2px 0;
    color: #5a6a80;
    font-size: 12px;
    font-weight: 700;
}

.gri2-metric {
    display: grid;
    gap: 5px;
}

.gri2-metric strong {
    font-size: 28px;
}

.gri2-metric span {
    color: #5a6a80;
    font-size: 12px;
}

.gri2-form-header,
.gri2-review-banner,
.gri2-report-banner {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    background: #ffffff;
    border-bottom: 1px solid #e4e9ef;
    padding: 16px 22px;
    align-items: flex-start;
}

.gri2-report-banner {
    align-items: center;
    background: #0d1b2a;
    color: #ffffff;
    border-radius: 10px;
    border-bottom: 0;
    margin-bottom: 14px;
}

.gri2-form-stack {
    display: grid;
    gap: 12px;
}

.gri2-field-card {
    background: #ffffff;
    border: 1px solid #dce3ea;
    border-radius: 10px;
    padding: 14px;
}

.gri2-field-card.highlight {
    border-color: rgba(0,201,139,.35);
}

.gri2-evidence-list,
.gri2-comments {
    display: grid;
    gap: 10px;
}

.gri2-evidence-list button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: 1px solid #dce3ea;
    border-radius: 8px;
    background: #f8fafb;
    padding: 9px 11px;
    color: #0d1421;
}

.gri2-comments article {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
}

.gri2-comments article > div {
    border: 1px solid #dce3ea;
    border-radius: 8px;
    background: #ffffff;
    padding: 10px 12px;
}

.gri2-comments header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 12px;
}

.gri2-comments p {
    margin: 0;
    color: #5a6a80;
    font-size: 12px;
    line-height: 1.55;
}

.gri2-comment-box {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.gri2-stepper {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
}

.gri2-stepper span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
}

.gri2-stepper b {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f5f9;
}

.gri2-stepper .active {
    color: #008efa;
}

.gri2-stepper .active b,
.gri2-stepper .done b {
    background: linear-gradient(135deg, #00eda2, #008efa);
    color: #111111;
}

.gri2-upload {
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafb;
    padding: 18px;
    text-align: center;
    overflow-wrap: anywhere;
}

.gri2-upload input[type="file"] {
    max-width: 100%;
}

.gri2-inline-brand {
    width: auto;
    max-width: 112px;
    max-height: 24px;
    vertical-align: middle;
}

.gri2-question-set-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
    align-items: center;
    gap: 18px;
}

.gri2-question-set-upload {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    text-align: left;
}

.gri2-question-set-upload span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gri2-readiness-grid {
    display: grid;
    grid-template-columns: minmax(150px, .65fr) minmax(240px, 1.2fr) minmax(190px, .8fr);
    align-items: center;
    gap: 24px;
}

.gri2-gauge {
    display: grid;
    width: 150px;
    height: 150px;
    place-items: center;
    justify-self: center;
    border-radius: 50%;
    background: conic-gradient(#00a875 var(--gri2-readiness), #e4e9ef 0);
}

.gri2-gauge > div {
    display: grid;
    width: 112px;
    height: 112px;
    place-content: center;
    border-radius: 50%;
    background: #ffffff;
    text-align: center;
}

.gri2-gauge strong {
    color: #0d1421;
    font-size: 30px;
}

.gri2-gauge span,
.gri2-readiness-counts span,
.gri2-yoy small {
    color: #7890a8;
    font-size: 11px;
}

.gri2-readiness-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.gri2-readiness-counts > div {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #e4e9ef;
    border-radius: 9px;
    background: #f8fafb;
}

.gri2-readiness-counts strong {
    color: #0d1421;
    font-size: 22px;
}

.gri2-readiness-counts .gri2-progress {
    grid-column: 1 / -1;
}

.gri2-target {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #e6fdf6;
    color: #008b64;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 800;
}

.gri2-yoy {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.gri2-yoy-bars {
    display: grid;
    grid-template-columns: repeat(2, 36px);
    align-items: end;
    justify-content: center;
    gap: 18px;
    height: 96px;
    padding-top: 6px;
    border-bottom: 1px solid #dce3ea;
}

.gri2-yoy-bars span {
    min-height: 4px;
    max-height: 100%;
    border-radius: 6px 6px 0 0;
    background: #94a3b8;
}

.gri2-yoy-bars span.current {
    background: linear-gradient(180deg, #00eda2, #008efa);
}

.gri2-yoy-labels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    text-align: center;
}

.gri2-yoy em {
    color: #00a875;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    text-align: center;
}

.gri-assignment-workspace,
.gri-materiality-workspace {
    display: grid;
    gap: 16px;
}

.gri-assignment-filters {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) repeat(2, minmax(180px, .8fr));
    gap: 12px;
}

.gri-assignment-editor {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr)) auto;
    align-items: end;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e4e9ef;
    border-radius: 10px;
    background: #f8fafb;
}

.gri-assignment-editor > div {
    min-width: 0;
}

.gri-assignment-table-wrap {
    border: 1px solid #e4e9ef;
    border-radius: 9px;
}

.gri-assignment-table-wrap .gri2-table,
.gri-materiality-table {
    min-width: 900px;
}

.gri-assignment-table-wrap td strong,
.gri-assignment-table-wrap td small,
.gri-materiality-table td strong,
.gri-materiality-table td small {
    display: block;
}

.gri-assignment-table-wrap td small,
.gri-materiality-table td small {
    margin-top: 3px;
    color: #7890a8;
}

.gri-assignment-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #64748b;
    font-size: 12px;
}

.gri-assignment-page-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gri-assignment-empty {
    margin: 0;
    padding: 22px;
    border: 1px dashed #cbd5e1;
    border-radius: 9px;
    color: #64748b;
    text-align: center;
}

.gri-field {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.gri-field-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.gri-field-header > div,
.gri-field-label {
    min-width: 0;
}

.gri-field-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #0d1421;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.gri-required {
    color: #e11d48;
}

.gri-field-key {
    border-radius: 5px;
    background: #e6fdf6;
    color: #008b64;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 800;
}

.gri-condition-description {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
}

.gri-guidance,
.gri-example-answer {
    border-radius: 8px;
    padding: 11px 12px;
    color: #475569;
    font-size: 12px;
    line-height: 1.55;
}

.gri-guidance {
    background: #f4f7fb;
}

.gri-guidance p {
    margin: 0 0 7px;
}

.gri-guidance p:last-child {
    margin-bottom: 0;
}

.gri-example-answer {
    border-left: 3px solid #18bde4;
    background: #edfaff;
}

.gri-table-editor {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gri-table-editor table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 12px;
}

.gri-table-editor th,
.gri-table-editor td {
    padding: 9px 10px;
    border-bottom: 1px solid #e4e9ef;
    text-align: left;
    vertical-align: top;
}

.gri-table-editor th {
    background: #f8fafb;
    color: #64748b;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gri-table-empty {
    color: #94a3b8;
    text-align: center !important;
}

.gri-table-action-cell {
    white-space: nowrap;
}

.gri-file-field,
.gri-file-upload-row {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.gri-file-upload-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.gri-file-upload-row span {
    grid-column: 1 / -1;
    overflow-wrap: anywhere;
}

.gri2-review-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    align-items: start;
}

.gri-sector-workspace {
    display: grid;
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.gri-sector-selector {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.gri-sector-option {
    display: grid;
    gap: 5px;
    width: 100%;
    min-width: 0;
    padding: 12px;
    border: 1px solid #dce3ea;
    border-radius: 9px;
    background: #ffffff;
    color: #334155;
    text-align: left;
    cursor: pointer;
}

.gri-sector-option:hover,
.gri-sector-option.selected {
    border-color: #00a875;
    background: #f1fbf8;
    box-shadow: inset 3px 0 0 #00c98b;
}

.gri-sector-option-code,
.gri-sector-eyebrow {
    color: #008efa;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gri-sector-option-state {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: 10px;
}

.gri-sector-option-state > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
}

.gri-sector-option-state.active > span {
    background: #00c98b;
}

.gri-sector-workspace > :not(.gri-sector-selector) {
    min-width: 0;
}

.gri-sector-activation-fields {
    display: grid;
    grid-template-columns: minmax(180px, .5fr) minmax(260px, 1.5fr);
    gap: 12px;
}

.gri-sector-topics {
    display: grid;
    gap: 12px;
    grid-column: 2;
}

.gri-sector-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.gri-sector-topic-card,
.gri-sector-addons {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.gri-sector-topic-routes .mud-button-root {
    max-width: 100%;
}

@container gri-workspace (max-width: 1040px) {
    .gri2-topbar {
        grid-template-columns: clamp(156px, 20vw, 220px) minmax(0, 1fr) auto !important;
    }

    .gri2-logo {
        padding-right: 12px;
        padding-left: 12px;
    }

    .gri2-app-body {
        grid-template-columns: clamp(156px, 20vw, 220px) minmax(0, 1fr) !important;
    }

    .gri2-panel > .gri2-table,
    .gri2-table-scroll > .gri2-table {
        min-width: 780px;
    }

    .gri2-entry-grid,
    .gri2-grid-2,
    .gri2-grid-3,
    .gri2-review-layout,
    .gri2-question-set-tools,
    .gri-sector-topic-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .gri2-readiness-grid {
        grid-template-columns: minmax(140px, .65fr) minmax(260px, 1.35fr);
    }

    .gri2-yoy {
        grid-column: 1 / -1;
    }

    .gri-assignment-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gri-assignment-filters > :first-child {
        grid-column: 1 / -1;
    }

    .gri-assignment-editor {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gri-sector-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .gri-sector-selector {
        display: flex;
        gap: 10px;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .gri-sector-option {
        flex: 0 0 min(240px, 78vw);
    }

    .gri-sector-topics {
        grid-column: 1;
    }
}

@container gri-workspace (max-width: 720px) {
    .gri2-app-body {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .gri2-sidebar,
    .gri2-main {
        width: 100%;
        min-height: 0;
    }

    .gri2-sidebar {
        max-height: none;
    }

    .gri2-topbar {
        grid-template-columns: clamp(156px, 20vw, 220px) minmax(0, 1fr) auto !important;
        border-radius: 11px 11px 0 0;
    }

    .gri2-logo {
        border-right: 0;
    }

    .gri2-logo img {
        max-width: min(100px, calc(var(--gri-sidebar-width) - 28px));
    }

    .gri2-crumbs {
        padding-right: 8px;
        padding-left: 10px;
    }

    .gri2-top-actions {
        justify-self: end;
        gap: 6px;
        padding: 0 8px;
    }

    .gri2-sidebar {
        gap: 10px;
        padding: 12px 8px;
    }

    .gri2-side-link {
        gap: 6px;
        padding: 8px 7px;
        font-size: 11px;
    }

    .gri2-side-label {
        padding-right: 4px;
        padding-left: 4px;
        font-size: 9px;
    }

    .gri2-top-actions small {
        display: none;
    }

    .gri2-year {
        padding: 5px 8px;
        font-size: 10px;
    }

    .gri2-content,
    .gri2-form-header,
    .gri2-review-banner,
    .gri2-report-banner,
    .gri2-tabs {
        padding-right: 12px;
        padding-left: 12px;
    }

    .gri2-tabs {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
    }

    .gri2-tabs button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .gri2-section-title,
    .gri2-form-header,
    .gri2-review-banner,
    .gri2-report-banner,
    .gri2-table-footer,
    .gri-assignment-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .gri2-section-title h1,
    .gri2-form-header h1,
    .gri2-review-banner h1 {
        font-size: 20px;
        line-height: 1.25;
    }

    .gri2-actions {
        width: 100%;
    }

    .gri2-actions > .mud-button-root {
        flex: 1 1 auto;
    }

    .gri2-card,
    .gri2-field-card {
        padding: 12px;
    }

    .gri2-readiness-grid,
    .gri2-readiness-counts,
    .gri-assignment-filters,
    .gri-assignment-editor,
    .gri-sector-activation-fields,
    .gri-file-upload-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .gri2-readiness-counts .gri2-progress,
    .gri-assignment-filters > :first-child,
    .gri-file-upload-row span {
        grid-column: 1;
    }

    .gri2-gauge {
        width: 132px;
        height: 132px;
    }

    .gri2-gauge > div {
        width: 98px;
        height: 98px;
    }

    .gri2-question-set-upload {
        align-items: stretch;
        flex-direction: column;
    }

    .gri2-stepper {
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .gri2-stepper span {
        flex: 0 0 auto;
    }

    .gri2-selection-table-wrap {
        min-height: 220px;
        max-height: 50dvh;
    }

    .gri2-selection-table,
    .gri2-panel > .gri2-table,
    .gri2-table-scroll > .gri2-table {
        min-width: 680px;
    }

    .gri-field-header {
        gap: 8px;
    }

    .gri-table-editor table {
        min-width: 580px;
    }
}

@media (max-width: 900px) {
    .gri2-shell,
    .gri2-page {
        padding: 8px;
    }

    .gri2-entry {
        padding: 18px 14px;
        border-radius: 12px;
    }
}

@media (max-width: 520px) {
    .gri2-shell {
        --gri-sidebar-width: 132px;
    }

    .gri2-topbar {
        grid-template-columns: 132px minmax(0, 1fr) auto !important;
    }

    .gri2-app-body {
        grid-template-columns: 132px minmax(0, 1fr) !important;
    }

    .gri2-top-actions {
        padding-right: 6px;
        padding-left: 4px;
    }

    .gri2-year {
        padding-right: 7px;
        padding-left: 7px;
        font-size: 10px;
    }

    .gri2-avatar {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    .gri2-sidebar {
        padding-right: 6px;
        padding-left: 6px;
    }

    .gri2-side-link {
        padding-right: 6px;
        padding-left: 6px;
        font-size: 10px;
    }

    .gri2-side-link b {
        padding-right: 5px;
        padding-left: 5px;
        font-size: 9px;
    }

    .gri2-side-user {
        gap: 6px;
    }

    .gri2-side-user strong,
    .gri2-side-user small {
        max-width: 70px;
    }
}
.gri-table-field-guidance {
    display: block;
    margin-top: -8px;
    color: #64748b;
    line-height: 1.45;
}

.gri-table-row-dialog-content {
    max-height: min(78vh, 860px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.gri-table-row-dialog {
    width: min(960px, calc(100vw - 32px));
    max-width: calc(100vw - 32px) !important;
    margin: 16px;
}

.gri-table-row-dialog .mud-dialog-content {
    padding: 0;
}

.gri-table-row-dialog-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 70%);
    text-align: left;
}

.gri-table-row-dialog-header h2 {
    margin: 3px 0 5px;
    color: #0f172a;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

.gri-table-row-dialog-header p {
    max-width: 680px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.gri-table-row-dialog-mode {
    color: var(--mud-palette-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gri-table-row-dialog-close {
    flex: 0 0 auto;
    margin-top: -4px;
}

.gri-table-row-dialog-form {
    padding: 22px 24px 10px;
}

.gri-table-row-dialog-validation {
    position: sticky;
    top: 118px;
    z-index: 2;
    background: #fffbeb;
}

.gri-table-row-dialog-validation .mud-alert-message {
    display: grid;
    gap: 2px;
    text-align: left;
}

.gri-table-row-dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    width: 100%;
    justify-content: flex-end !important;
    gap: 8px;
    margin-top: 0;
    padding: 14px 24px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

@media (max-width: 600px) {
    .gri-table-row-dialog {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px);
        margin: 8px;
        border-radius: 12px !important;
    }

    .gri-table-row-dialog-content {
        max-height: calc(100dvh - 88px);
    }

    .gri-table-row-dialog-header,
    .gri-table-row-dialog-form {
        padding-right: 16px;
        padding-left: 16px;
    }

    .gri-table-row-dialog-header {
        gap: 10px;
        padding-top: 16px;
        padding-bottom: 14px;
    }

    .gri-table-row-dialog-header h2 {
        font-size: 17px;
    }

    .gri-table-row-dialog-header p {
        font-size: 12px;
    }

    .gri-table-row-dialog-validation {
        top: 102px;
    }

    .gri-table-row-dialog-actions {
        padding-right: 16px;
        padding-left: 16px;
    }

    .gri-table-row-dialog-actions > .mud-button-root {
        flex: 1 1 0;
    }
}