/* Modal Display Fixes */

/* Smooth fade-in animation for modal */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Ensure modal overlay covers entire viewport */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999 !important; /* Ensure it's on top */
    /* Prevent flicker with will-change and transform */
    will-change: opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Smooth fade-in to reduce perceived flicker */
    animation: modalFadeIn 0.2s ease-out;
}

/* Fix modal positioning and size */
.modal {
    position: relative !important;
    margin: auto;
    max-height: 90vh !important;
    max-width: 95vw !important;
    overflow: visible !important;
}

/* Production modal specific fixes */
.modal-production {
    width: 95vw !important;
    max-width: 1200px !important;
    height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Backoffice modal specific fixes */
.modal-backoffice {
    width: 90vw !important;
    max-width: 1400px !important;
    height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Fix modal content scrolling */
.modal-content {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px;
}

/* Ensure modal header is always visible and properly formatted */
.modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 20px 24px !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    background: white !important;
    z-index: 100 !important;
    border-bottom: 1px solid #e5e7eb !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Header sections layout for production modal */
.modal-production .header-info-section {
    flex: 0 0 auto !important;
    min-width: 200px !important;
}

.modal-production .header-customer-section {
    flex: 1 1 auto !important;
    text-align: center !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Customer name styling */
.modal-production .customer-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

/* Company name styling */
.modal-production .customer-company {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
}

/* Phone and city styling - centered */
.modal-production .customer-phone,
.modal-production .customer-city {
    font-size: 13px !important;
    color: #6b7280 !important;
    text-align: center !important;
    width: 100% !important;
}

.modal-production .header-actions-section {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Dynamic buttons container */
#production-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    min-height: 36px !important;
}

/* Ensure buttons in header are visible */
#production-actions button,
#production-actions .btn-production {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix close button positioning */
.modal-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 101 !important;
    cursor: pointer;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: #f3f4f6;
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-production,
    .modal-backoffice {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
    }
    
    .modal-overlay {
        padding: 0 !important;
    }
}

/* Fix for production actions */
.production-actions {
    display: flex !important;
    gap: 10px;
    flex-wrap: wrap;
    padding: 15px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

/* Fix modal content width issues */
.modal-production .modal-content {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.modal-production .modal-body {
    width: 100% !important;
    min-width: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Fix activity section width */
.activity-section {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure activity timeline is visible and full width */
.activity-timeline {
    width: 100% !important;
    /* Remove max-height and overflow to use modal's scroll */
    padding: 4px 8px;  /* Further reduced padding */
    box-sizing: border-box !important;
}

#order-activity-list {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Fix timeline items */
.timeline-container,
.activity-item {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix flex container issues */
.modal-production .row,
.modal-production .col-md-6,
.modal-production .col-md-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
}

/* Ensure sections take full width */
.completed-steps-section,
.process-steps-section {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix any display flex issues */
.modal-production .modal-body > div {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure minimum width for empty content */
.activity-timeline:empty::after {
    content: "No activity to display";
    display: block;
    padding: 20px;
    text-align: center;
    color: #94a3b8;
    font-style: italic;
}

/* Fix order info section */
.order-info-section {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

.info-group {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Modal footer fixes */
.modal-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 24px !important;
    border-top: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 100 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.modal-production .footer-stats {
    flex: 0 0 auto !important;
    font-size: 14px !important;
    color: #64748b !important;
}

.modal-production .footer-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Dynamic button styles */
.btn-production {
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 5px solid transparent !important;  /* Always 5px border, just transparent */
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 42px !important;
}

/* Green border when all items are selected */
.btn-production.all-items-selected {
    border-color: #10b981 !important;  /* Just change color, not width */
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

/* Ensure button text and icons inherit color */
.btn-production .btn-text {
    color: inherit !important;
    font-size: 16px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Hide icons in production buttons for now */
.btn-production .btn-icon,
.btn-production svg,
.btn-production i {
    display: none !important;
}

/* Hover effect for dynamic buttons */
.btn-production:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.btn-production:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.btn-production.btn-primary {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
}

.btn-production.btn-primary:hover {
    background: #2563eb !important;
    border-color: #2563eb !important;
}

.btn-production.btn-secondary {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-color: #d1d5db !important;
}

.btn-production.btn-secondary:hover {
    background: #e5e7eb !important;
    border-color: #9ca3af !important;
}

/* Fix z-index stacking issues and prevent background scrolling */
body.modal-open {
    overflow: hidden !important;
    /* Don't use position:fixed as it causes jump to top */
}

/* Also prevent scrolling on html element */
html.modal-open {
    overflow: hidden !important;
    scroll-behavior: auto !important;
}

/* Ensure dropdowns and selects in modal work */
.modal select,
.modal .dropdown {
    position: relative !important;
    z-index: 10001 !important;
}

/* Fix close button styles */
.btn-close-modal {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    min-height: 32px !important;
}

.btn-close-modal:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #ef4444 !important;
}

/* Compact Timeline Styles */
.timeline-container.compact {
    padding: 0 !important;
    position: relative !important;
}

.timeline-container.compact .timeline-item {
    display: flex !important;
    gap: 8px !important;  /* Reduced gap */
    padding: 4px 0 !important;  /* Further reduced from 6px */
    border-bottom: 1px solid #f3f4f6 !important;  /* Lighter border */
    position: relative !important;
}

.timeline-container.compact .timeline-item:last-child {
    border-bottom: none !important;
}

/* Timeline marker/icon */
.timeline-container.compact .timeline-marker {
    width: 24px !important;  /* Further reduced from 28px */
    height: 24px !important;  /* Further reduced from 28px */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.timeline-container.compact .timeline-marker svg,
.timeline-container.compact .timeline-marker i {
    width: 14px !important;
    height: 14px !important;
    font-size: 12px !important;
}

/* Different colors for different event types */
.timeline-item.event-created .timeline-marker {
    background: #10b981 !important;
    color: white !important;
}

.timeline-item.event-status .timeline-marker {
    background: #3b82f6 !important;
    color: white !important;
}

.timeline-item.event-step .timeline-marker {
    background: #8b5cf6 !important;
    color: white !important;
}

.timeline-item.event-shipping .timeline-marker {
    background: #10b981 !important;
    color: white !important;
}

.timeline-item.event-shipping .timeline-content {
    border-left-color: #10b981 !important;
}

.timeline-item.event-location .timeline-marker {
    background: #6366f1 !important;
    color: white !important;
}

.timeline-item.event-location .timeline-content {
    border-left-color: #6366f1 !important;
}

.timeline-item.event-default .timeline-marker {
    background: #6b7280 !important;
    color: white !important;
}

/* Timeline content */
.timeline-container.compact .timeline-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.timeline-container.compact .timeline-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-bottom: 0 !important;  /* Remove bottom margin */
    gap: 8px !important;
}

.timeline-container.compact .timeline-title {
    font-size: 12px !important;  /* Further reduced from 13px */
    font-weight: 500 !important;  /* Slightly less bold */
    color: #111827 !important;
    flex: 1 !important;
    line-height: 1.2 !important;
}

.timeline-container.compact .timeline-date {
    font-size: 10px !important;  /* Further reduced from 11px */
    color: #9ca3af !important;  /* Lighter color */
    white-space: nowrap !important;
    margin-left: 4px !important;
}

.timeline-container.compact .timeline-description {
    font-size: 11px !important;  /* Further reduced from 12px */
    color: #6b7280 !important;  /* Lighter color */
    margin-bottom: 0 !important;  /* Remove bottom margin */
    line-height: 1.3 !important;
}

.timeline-container.compact .timeline-status-badge {
    display: inline-block !important;
    padding: 0px 4px !important;  /* Further reduced padding */
    border-radius: 10px !important;
    font-size: 9px !important;  /* Further reduced from 10px */
    font-weight: 500 !important;
    background: #eff6ff !important;
    color: #1e40af !important;
    margin-bottom: 0 !important;  /* Remove bottom margin */
    line-height: 1.4 !important;
}

.timeline-container.compact .timeline-meta {
    font-size: 10px !important;  /* Further reduced from 11px */
    color: #9ca3af !important;
    line-height: 1.2 !important;
}

.timeline-container.compact .timeline-user {
    font-style: italic !important;
}

/* Empty timeline message */
.empty-timeline {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #6b7280 !important;
    font-style: italic !important;
}

/* Loading state for timeline */
.activity-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
    gap: 12px !important;
}

.loading-spinner {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #e5e7eb !important;
    border-top-color: #3b82f6 !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Confirmation Modal Styles */
.confirmation-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100000 !important;
}

.confirmation-modal {
    background: white !important;
    border-radius: 12px !important;
    max-width: 400px !important;
    width: 90% !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.confirmation-header {
    padding: 20px 24px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.confirmation-header h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

.confirmation-body {
    padding: 20px 24px !important;
}

.confirmation-body p {
    margin: 0 !important;
    font-size: 14px !important;
    color: #4b5563 !important;
    line-height: 1.5 !important;
}

.confirmation-footer {
    padding: 16px 24px !important;
    border-top: 1px solid #e5e7eb !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

.confirmation-footer .btn {
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    border: 1px solid transparent !important;
}

.confirmation-footer .btn-secondary {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-color: #d1d5db !important;
}

.confirmation-footer .btn-secondary:hover {
    background: #e5e7eb !important;
}

.confirmation-footer .btn-primary {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
}

.confirmation-footer .btn-primary:hover {
    background: #2563eb !important;
}

/* Item Corner Icons Styles */
.item-corner-icons {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 10 !important;
}

.corner-icon {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.note-icon {
    background: #FCD34D !important;
    border: 1px solid #F59E0B !important;
}

.motor-icon {
    background: #DC2626 !important;
    border: 1px solid #B91C1C !important;
}

.corner-icon svg {
    width: 14px !important;
    height: 14px !important;
}

/* Group Pills Styles */
.item-group-pills {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 10 !important;
}

.group-pill {
    background: rgba(59, 130, 246, 0.9) !important;
    color: white !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.sync-band-pill {
    background: rgba(168, 85, 247, 0.9) !important;
}

.merge-cassette-pill {
    background: rgba(34, 197, 94, 0.9) !important;
}

/* Item Group Container */
.item-group {
    border: 2px dashed #e5e7eb !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
    background: #f8fafc !important;
    position: relative !important;
}

.group-pills {
    position: absolute !important;
    top: -8px !important;
    left: 16px !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 15 !important;
}

.grouped-items {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.grouped-items .order-item {
    flex: 1 1 300px !important;
    max-width: none !important;
}

/* Item Note Display */
.item-note-display {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin-top: 8px !important;
    font-size: 12px !important;
    color: #92400e !important;
    line-height: 1.4 !important;
}

.item-note-display::before {
    content: "📝 " !important;
    font-size: 14px !important;
}

/* Enhanced item image container for better icon positioning */
.item-image-large {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .grouped-items {
        flex-direction: column !important;
    }
    
    .grouped-items .order-item {
        flex: 1 1 auto !important;
    }
    
    .item-corner-icons {
        top: 4px !important;
        right: 4px !important;
    }
    
    .item-group-pills {
        top: 4px !important;
        left: 4px !important;
    }
    
    .corner-icon {
        width: 18px !important;
        height: 18px !important;
    }
    
    .corner-icon svg {
        width: 12px !important;
        height: 12px !important;
    }
}

/* Dashboard Modal Specific Styles */
.modal-dashboard {
    max-width: 900px;
    width: 90%;
}

.modal-dashboard .header-info-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 8px 8px 0 0;
}

.modal-dashboard .order-source.pollytex {
    background-color: #61245B;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.modal-dashboard .order-source.gordijnstunt {
    background-color: #EC8B5D;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.modal-dashboard .header-meta {
    display: flex;
    gap: 15px;
    margin-top: 5px;
    font-size: 14px;
    opacity: 0.9;
}

.modal-dashboard .order-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.modal-dashboard .order-date::before {
    content: "📅";
    font-size: 12px;
}

/* Edit Order Button (works in all modals) */
.btn-edit-order {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: #e0e7ff;
    color: #4338ca;
    border: 1px solid #a5b4fc;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.btn-edit-order:hover {
    background-color: #c7d2fe;
    border-color: #818cf8;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(67, 56, 202, 0.2);
}

.btn-edit-order:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-edit-order svg {
    width: 16px;
    height: 16px;
}

/* Production modal specific button styles */
.modal-production .btn-edit-order {
    background-color: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}

.modal-production .btn-edit-order:hover {
    background-color: #bfdbfe;
    border-color: #60a5fa;
}

/* Save and Cancel buttons for edit mode */
.btn-save-edits {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: #10b981;
    color: white;
    border: 1px solid #059669;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.btn-save-edits:hover {
    background-color: #059669;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.btn-cancel-edits {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: #ef4444;
    color: white;
    border: 1px solid #dc2626;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.btn-cancel-edits:hover {
    background-color: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* Edit mode styles */
.modal-production.edit-mode {
    border: 2px solid #3b82f6;
}

.modal-production.edit-mode .modal-header {
    background-color: #eff6ff;
}

/* Editable input styles */
.meta-input {
    padding: 4px 8px !important;
    border: 2px solid #3b82f6 !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    background: white !important;
    color: #1f2937 !important;
    width: 80px !important;
    transition: all 0.2s !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    cursor: text !important;
    position: relative !important;
    z-index: 1000 !important;
}

.meta-input:focus {
    outline: none !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
    background: #f0f9ff !important;
}

.meta-input.meta-width,
.meta-input.meta-height {
    width: 60px !important;
    margin: 0 2px !important;
}

/* Highlight editable items in edit mode */
.modal-production.edit-mode .order-item {
    border: 2px dashed #3b82f6;
    background: #f0f9ff;
}

.modal-production.edit-mode .order-item:hover {
    border-color: #2563eb;
    background: #eff6ff;
}

/* Specific fix for logistics page Add Order modal to prevent auto-opening */
#addOrderModal.modal-overlay {
    display: none !important;
}

/* Only show when explicitly set via JavaScript */
#addOrderModal.modal-overlay[style*="display: flex !important"] {
    display: flex !important;
}

/* Ensure driver modal works properly */
#driverModal.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
}

#driverModal.modal-overlay[style*="display: flex"] {
    display: flex !important;
}

/* Ensure modal content is visible */
#driverModal .modal {
    display: block !important;
    position: relative !important;
    background: white !important;
    border-radius: 8px !important;
    max-width: 500px !important;
    width: 90% !important;
    max-height: 90vh !important;
    overflow: auto !important;
}