/* =============================================
// 🎨 GLOBAL THEME VARIABLES (Based on main.min.css and navigation.php)
// ============================================= */
:root{
    /* RG Layout Variables */
    --rg-sidebar-width: 240px;
    --rg-accent: #007bff;     /* Primary Blue (Used for RG-specific links/buttons) */
    --rg-bg: #f7f7f7;         /* Light Grey Background (From RG sidebar CSS) */
    --rg-border-color: #e6eef8; /* Sidebar border color */
    --rg-content-padding: 8px; /* was 28px The "frame" margin around main content */
    /* 💥 UPDATED FROM NAVIGATION.PHP 💥 */
    --rg-nav-hover-bg: #f4f4f4; 
    --rg-nav-active-bg: #f4f4f4;

    /* Legacy Brand Colors (From main.min.css - Used for buttons/links/H2) */
    --legacy-link-color: #f26329;    /* Main link orange */
    --legacy-link-hover: #87ae00;    /* Hover green */
    --legacy-blue-h2: #5daae0;       /* H2 Blue */
    --legacy-button-orange: #fc7500; /* Primary Button Orange */
    --legacy-text-color: #293a4a;    /* Body text/H1 black/blue */
    --legacy-body-bg: #ececec;       /* Original body background */
}

/* =============================================
   GLOBAL VIP Uncomment for PROD only - Ensure page background stays white for full scroll height
	#ffffff or #f8f9fa or #f5f7fb (warmer) was #f8f9fa;
   ============================================= */
.rg-main-content {
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* ============================= */
/* BUTTON SYSTEM */
/* ============================= */

	/* Primary */
	.rg-button-primary {
		background:#007bff;
		color:#ffffff;
		padding:6px 12px;
		border:none;
		border-radius:6px;
		font-weight:600;
		cursor:pointer;
		box-shadow:0 2px 4px rgba(0,0,0,0.15);
		text-decoration:none;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		transition: transform 0.15s ease,
					box-shadow 0.15s ease,
					background 0.15s ease;
	}

	/* Prevent browser anchor styling */
	.rg-button-primary:visited,
	.rg-button-primary:active,
	.rg-button-primary:focus {
		color:#ffffff;
		text-decoration:none;
	}

	.rg-button-primary:hover {
		background:#0056b3;
		transform:translateY(-2px);
		box-shadow:0 4px 8px rgba(0,0,0,0.2);
		color:#ffffff !important;
	}

	/* Secondary */
	.rg-button-secondary {
		background:#7e8593;
		color:#fff;
		padding:6px 12px;
		border-radius:6px;
		font-weight:600;border:none;cursor:pointer
	}
	.rg-button-secondary:hover,
	.rg-button-secondary:focus,
	.rg-button-secondary:active {
		background:#6b7280;
		color:#ffffff !important;
		transform:translateY(-2px);
		text-decoration:none;
	}

	/* =========================
	   Cancel Button (Neutral)
	   ========================= */
	.rg-button-cancel,
	.rg-button-cancel:visited,
	.rg-button-cancel:active,
	.rg-button-cancel:focus {
		background: #64748b;       /* neutral gray */
		color: #ffffff;
		padding: 6px 12px;
		border: none;
		border-radius: 6px;
		font-weight: 600;
		cursor: pointer;
		box-shadow: 0 2px 4px rgba(0,0,0,0.15);
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition:
			transform 0.15s ease,
			box-shadow 0.15s ease,
			background 0.15s ease;
	}

	.rg-button-cancel:hover {
		background: #475569;       /* darker gray */
		color: #ffffff !important;
		transform: translateY(-2px);
		box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	}

/*
	.rg-button-cancel {
		background: #f3f4f6;
		color: #374151;
		border: 1px solid #d1d5db;
		padding: 6px 12px;
		border-radius: 6px;
		font-weight: 600;
		cursor: pointer;
	}
	.rg-button-cancel:hover {
		background: #e5e7eb;
		border-color: #9ca3af;
	}
*/
	/* Amber */
	.rg-button-amber {
		background:#D19D00;
		color:#ffffff !important;
		padding:8px 16px;
		border:none;
		border-radius:6px;
		font-weight:600;
		cursor:pointer;
		text-decoration:none;
		display:inline-block;
		transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	}

	.rg-button-amber:hover {
		background:#FFBF00;
		transform:translateY(-2px);
		text-decoration:none;
		box-shadow: 0 3px 6px rgba(0,0,0,0.15);
	}

	/* Danger */
	.rg-button-danger {
		background:#fbd5d5;
		color:#991b1b !important;
		border:none;
		padding:6px 12px;
		border-radius:6px;
		font-weight:600;
		cursor:pointer;
		transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	}

	.rg-button-danger:hover {
		background:#f8b4b4;
		transform: translateY(-2px);
		box-shadow: 0 3px 6px rgba(0,0,0,0.15);
	}

	/* Subtle hover highlight for RFQ tables */
	/* Used in RFP Send and Respond */
	.rfq-table tbody tr:hover {
		background-color: #f0f6ff; /* soft blue */
	}



/* =============================================
// ✏️ TYPOGRAPHY & BASE STYLES (From main.min.css)
// ============================================= */

/* Custom Fonts - MUST be linked in your B2B assets folder */
@font-face {
    font-family: 'aller';
    src: url('../font/aller/Aller.eot');
    src: url('../font/aller/Aller.eot?#iefix') format('embedded-opentype'),
          url('../font/aller/Aller.woff') format('woff'),
          url('../font/aller/Aller.ttf') format('truetype'),
          url('../font/aller/Aller.svg#Aller') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'aller-light';
    src: url('../font/aller-light/aller_lt-webfont.eot');
    src: url('../font/aller-light/aller_lt-webfont.eot?#iefix') format('embedded-opentype'),
          url('../font/aller-light/aller_lt-webfont.woff') format('woff'),
          url('../font/aller-light/aller_lt-webfont.ttf') format('truetype'),
          url('../font/aller-light/aller_lt-webfont.svg#aller_lt-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body {
    font-family: aller, Century Gothic, Verdana, Arial, helvetica, Calibri; 
    color: var(--legacy-text-color); 
    font-size: 13px; 
    line-height: 16px; 
    font-weight: normal; 
    background-color: var(--legacy-body-bg); /* Original background */
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0;
}

/* Global Links */
a, a:visited {
    text-decoration: none; 
    color: var(--legacy-link-color); 
    font-size: 13px; 
    font-family: aller, Century Gothic, Verdana, Arial, helvetica, Calibri; 
    outline: none;
}
a:hover, a:visited:hover {
    text-decoration: none; 
    color: var(--legacy-link-hover); /* Hover green */
    outline: none;
}

/* Headings */
h1 {
    color: #000; 
    font-size: 28px; 
    font-family: aller, Century Gothic, Verdana, Arial, helvetica, Calibri; 
    margin: 0; 
    padding: 0 0 10px 0;
}
h2 {
    color: var(--legacy-blue-h2); 
    font-size: 22px; 
    font-family: aller, Century Gothic, Verdana, Arial, helvetica, Calibri; 
    margin: 0; 
    padding: 0 0 10px 0;
}
/* Font Modifiers */
.bold {font-weight: bold;}
.italic {font-style: italic;}
.white {color: white;}

/* =============================================
// 📐 UTILITY & SPACING (From main.min.css)
// ============================================= */
.clear {clear: both;}
.contentpad {padding: 0 158px;}
.contentpad2 {padding: 0 138px 0 158px;}
.contentpadtop {padding: 12px 158px;}
.menupad {padding: 0 158px;}
.textpad {padding: 40px;}
.textpad2 {padding: 10px;}
.butpad {padding-right: 20px;  padding-bottom: 20px;}
.butpad2 {padding: 18px 15px 18px 15px; height: 97px;}

/* Backgrounds & Borders */
.whitebg {background-color: #fff; max-height: auto; overflow: hidden;}
.greyborder {border: 1px solid #e1e1e1; max-height: auto; overflow: hidden;}
.orangebg {background-color: #fc7500; max-height: auto; overflow: hidden; height: 5px;}
.greybg {background-color: #efeff1; max-height: auto; overflow: hidden;}
.greenbg {background-color: #87ae00; max-height: auto; overflow: hidden;}
.bluebg {background-color: #5daae0; max-height: auto; overflow: hidden;}

/* Button Font (Used by the old system buttons) */
.butfont, .butfont:visited{color: white; font-size: 24px; line-height: 28px; outline: none; text-decoration: none;}
.butfont:hover, .butfont:visited:hover {color: var(--legacy-text-color);}

/* Primary Button (Standard Bootstrap replacement) */
.btn-primary {
    color: #fff;
    background-color: var(--legacy-button-orange); /* #fc7500 */
    border: none;
    font-size: 13px;
    padding: 9px;
    border-radius: 0px; /* Overrides Bootstrap default */
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    color: #fff;
    background-color: var(--legacy-link-hover); /* #87ae00 (Green hover) */
    border: none;
}

/* Responsive Padding Overrides (Crucial for fluid layout) */
@media (max-width: 1520px) {
    .contentpad, .contentpadtop, .menupad {padding-right: 140px; padding-left: 140px;}
    .contentpad2 {padding: 0 130px 0 140px;}
    .butfont {font-size: 22px; line-height: 26px;}
    h1 {font-size: 25px;}
}
@media (max-width: 1200px) {
    .contentpad, .contentpadtop, .menupad {padding-right: 130px; padding-left: 130px;}
    .contentpad2 {padding: 0 120px 0 130px;}
    .butfont {font-size: 19px; line-height: 21px;}
    h1 {font-size: 23px;}
    .textpad {padding: 25px;}
}
@media (max-width: 992px) {
    .contentpad, .contentpadtop, .menupad {padding-right: 90px; padding-left: 90px;}
    .contentpad2 {padding: 0 80px 0 90px;}
    .butfont {font-size: 16px; line-height: 20px;}
    h1 {font-size: 19px;}
    h2 {font-size: 16px;}
    .textpad {padding: 20px;}
}
@media (max-width: 768px) {
    .contentpad, .contentpadtop, .menupad {padding-right: 40px; padding-left: 40px;}
    .contentpad2 {padding: 0 30px 0 40px;}
    .textpad {padding: 20px;}
}

/* =============================================
// 🖥️ RG SIDEBAR & LAYOUT (Specific Overrides)
// ============================================= */

/* Base body background is overridden to RG's lighter grey */
body {
    background: var(--rg-bg); /* #f7f7f7 */
}

/* The fixed sidebar layout (from navigation.php inline style) */
.rg-sidebar, .rg-sidebar * { box-sizing: border-box; }
.rg-sidebar { 
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--rg-sidebar-width);
    background: #fff; border-right: 1px solid var(--rg-border-color); padding: 18px 12px;
    z-index: 10000; overflow-y: auto; 
}
.rg-sidebar-inner { display:flex; flex-direction:column; height:100%; }
.rg-sidebar-logo { max-width:180px; display:block; margin:6px auto 12px; }

/* Menu */
.rg-sidebar-nav ul { list-style:none; padding:0; margin:0; }
.rg-sidebar-nav li { margin:6px 0; }
.rg-sidebar-nav a { display:block; padding:10px 12px; color:#333; text-decoration:none; border-radius:6px; font-weight:500; }
.rg-sidebar-nav a:hover { background:var(--rg-nav-hover-bg); color:var(--rg-accent); }
.rg-active > a { background:var(--rg-nav-active-bg); color:var(--rg-accent); font-weight:700; }

/* Admin menu */
.rg-has-children > .rg-parent { cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.rg-submenu { list-style:none; margin:6px 0 0 6px; padding:6px 0 6px 6px; display:none; }
.rg-has-children.rg-open > .rg-submenu { display:block; }
.admin-sub a { padding-left:28px !important; font-size:14px; opacity:0.9; }
.admin-sub a:hover { padding-left:30px !important; }
.owner-item a { font-weight: bold !important; }

/* Footer */
.rg-sidebar-footer { margin-top:auto; padding-top:14px; font-size:0.9rem; color:#666; text-align:center; }
.rg-sidebar-footer .copytext { margin-top:5px; font-size:0.8rem; color:#999; }
/* Ensure RG Footer links adopt the RG blue/font size */
.rg-sidebar-footer a { color: var(--rg-accent); font-size:0.85rem; text-decoration: none; display: block; }
.rg-sidebar-footer div:nth-last-child(2) a { font-size:0.95rem; }


/* Main Content Shift and Frame */
.rg-main-content { 
    margin-left: var(--rg-sidebar-width); 
    padding: var(--rg-content-padding); /* 28px padding creates the frame */
}

/* =============================================
// ⭐ INDEX PAGE COMPONENTS (Specific Styles)
// ============================================= */

/* Download Button Styling (Uses RG accent color) */
.pdf-download-btn, .template-download-btn {
    display:inline-block;
    margin:10px 10px 10px 0;
    padding:10px 18px;
    background-color: var(--rg-accent); /* #007bff */
    color:#fff;
    text-decoration:none;
    border-radius:4px;
    font-weight:500;
    cursor:pointer;
    transition: all 0.25s ease-in-out;
    box-shadow:0 2px 4px rgba(0,0,0,0.15);
    -webkit-text-fill-color:#fff;
    -webkit-user-select:none;
    user-select: none;
}
.pdf-download-btn:hover, .template-download-btn:hover {
    -webkit-text-fill-color:#fff;
    background-color:#0056b3 !important; /* Darker blue on hover */
    color:#ffffff !important;
    transform:translateY(-2px);
    box-shadow:0 4px 8px rgba(0,0,0,0.25);
}

.button-group {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:15px;
    margin-top:15px;
}

/* Info Banner */
.msg-info {
    background:#dbeafe; /* Light blue background */
    padding:12px 16px;
    border-radius:6px;
    color:#1e3a8a; /* Dark blue text */
    margin:20px 0;
    font-size:13px;
    line-height:1.5;
    box-shadow:0 2px 5px rgba(0,0,0,0.05);
}
.msg-info a {
    color:#1e3a8a;
    font-weight:bold;
    text-decoration:none;
}


/* =============================================
//   INSIDE ANALYTICS CONTENT COMPONENTS
// ============================================= */

.ia-page-content{
    padding:20px;
}

.ia-section{
    margin-top:25px;
    margin-bottom:25px;
}

.ia-section:first-child{
    margin-top:0;
}

.ia-hero{
    margin:20px 0 30px;
}

.ia-intro{
    max-width:900px;
    line-height:1.7;
}


/* =============================================
// 📱 MOBILE LAYOUT
// ============================================= */

.rg-topbar-mobile { display:none; position:fixed; top:0; left:0; right:0; height:56px; background:#fff;
    border-bottom:1px solid #eee; z-index:10001; }
.rg-topbar-mobile-inner { display:flex; align-items:center; padding:8px 12px; }
#rgToggleSidebar { border:0; background:transparent; font-size:22px; cursor:pointer; }
.rg-mobile-logo { max-height:36px; }

@media (max-width: 900px) {
    .rg-sidebar { transform: translateX(-110%); transition: transform .22s ease; }
    .rg-sidebar.rg-visible { transform: translateX(0); }
    .rg-topbar-mobile { display:block; }
    .rg-main-content { margin-left: 0; padding-top:70px; }
} 

/* =================================================================
// ⚠️ CRITICAL INLINE STYLES OVERRIDES (Moved from navigation.php)
// These styles override the default .rg-sidebar-nav rules above.
// ================================================================= */

/* 1. Global Link Reset for Sidebar */
.rg-sidebar a {
    text-decoration: none !important;
    color: inherit; 
}
.rg-sidebar a:hover {
    /* 💥 ADDED: Ensure no underline on hover 💥 */
    text-decoration: none !important; 
}

/* 2. Anchor Color Fix (Text color) */
.rg-sidebar-nav a,
.rg-sidebar-nav a:hover,
.rg-active a,
.rg-sidebar-nav .rg-has-children.rg-open .rg-parent {
    color: var(--rg-accent) !important; /* #007bff */
    /* 💥 ADDED: Ensure no underline on hover/active links 💥 */
    text-decoration: none !important;
}

/* 3. Background Overrides & HOVER FONT WEIGHT FIX */
/* 🆕 Hover Background FIX: Apply background to the <li> element */
.rg-sidebar-nav li:hover {
    background-color: var(--rg-nav-hover-bg) !important; /* #f4f4f4 */
    /* Important: Remove any border/shadow on the LI container */
    border: none !important; 
}

/* 🆕 Hover Link Fix: Apply background to the <a> element AND MAKE TEXT BOLD */
.rg-sidebar-nav li:hover > a {
    background-color: var(--rg-nav-hover-bg) !important; /* #f4f4f4 */
    border-radius: 6px !important; 
    background: var(--rg-nav-hover-bg) !important; /* #f4f4f4 */
    
    /* ⭐⭐⭐ NEW RULE: Make the text bold on hover ⭐⭐⭐ */
    font-weight: bold !important;
    /* 💥 ADDED: Ensure no underline on hover 💥 */
    text-decoration: none !important; 
}

/* 🆕 Active/Selected Background FIX: Apply background to the active list item */
.rg-sidebar-nav li.rg-active {
    background-color: var(--rg-nav-active-bg) !important; /* #f4f4f4 */
}

/* 🆕 Active Link Element Fix: Ensure the <a> tag inside the active <li> adopts the full color */
.rg-sidebar-nav li.rg-active > a {
    background-color: var(--rg-nav-active-bg) !important; /* #f4f4f4 */
    border: none !important;
    box-shadow: none !important;
    background: var(--rg-nav-active-bg) !important; /* #f4f4f4 */
    
    /* Active links should also be bold if hover is bold */
    font-weight: bold !important;
    /* 💥 ADDED: Ensure no underline on active 💥 */
    text-decoration: none !important; 
}

/* 4. Footer Link Styling (Existing) */
.rg-sidebar-footer a:hover {
    text-decoration: none !important;
}
.rg-sidebar-footer .rg-policy-link {
    /* 💥 ADJUSTED: Increased font size from 12px to 13px (base size) 💥 */
    font-size: 11px !important;
    color: #007bff !important;
    display: block;
    padding: 3px 0;
    line-height: 1.2;
}
.rg-sidebar-footer .rg-email-link {
    /* 💥 ADJUSTED: Increased font size from 13px to 14px 💥 */
    font-size: 11px !important; 
    color: #007bff !important;
}
.rg-sidebar-footer .rg-copyright {
    /* 💥 ADJUSTED: Increased font size from 11px to 12px 💥 */
    font-size: 11px !important;
    color: #888;
}

/* =============================================
// 🧹 LEGACY B2B UTILITY CLASSES (From b2b.css)
// Retained for any legacy content elements.
// ============================================= */

/* Legacy Content Wrapper (Similar to rg-card but kept as a utility) */
.whitebox {
    background: #fff;
    padding: 25px;
    border-radius: 6px;
    border: 1px solid #ddd;
}

/* =============================================
   B2B STANDARD CONTENT PANEL (OPT-IN) #ffffff
   ============================================= */
.rg-panel {
    background-color: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    overflow: hidden;
}

/* =============================================
   GLOBAL APPLICATION BACKGROUND #ffffff
   ============================================= */
body {
    background-color: #ffffff;
}

/* =========================
   Global Overlay Flash
========================= */

#flashMessage {
    display: none;
    position: fixed;
    top: 80px; /* consistent top position */
    left: 50%;
    transform: translateX(-50%);
    min-width: 320px;
    max-width: 600px;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    z-index: 20000;
    animation: flashFadeIn 0.2s ease-out;
}

.flash-success {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #14532d;
}

.flash-error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #7f1d1d;
}

.flash-warning {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
}

.flash-info {
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    color: #075985;
}

@keyframes flashFadeIn {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}


/* =============================================
   INSIDE ANALYTICS WEBSITE COMPONENTS
   ============================================= */

.ia-page-content {
    padding: 20px;
}


/* ==========================================================
   Inside Analytics Reporting Platform
   Public Website Components
   ========================================================== */


/* ----------------------------------------------------------
   Hero Banner
   ---------------------------------------------------------- */

.hero-banner {
    margin: 20px 0 25px 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #d9d9d9;
    background: #ffffff;
}

.hero-banner img {
    display: block;
    width: 100%;
    height: auto;
}


/* ----------------------------------------------------------
   Section Introduction
   ---------------------------------------------------------- */

.section-intro {
    color: #666;
    margin-top: 8px;
    margin-bottom: 15px;
    line-height: 1.6;
}


/* ----------------------------------------------------------
   Report Toolbar - margin: 15px 0 20px 0;
   ---------------------------------------------------------- */

.report-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px;
    margin: 15px 0 20px 0;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    background: #fafafa;
}

.report-toolbar-left {
    flex: 1;
    min-width: 260px;
}

.report-toolbar-right {
    white-space: nowrap;
}

/* ----------------------------------------------------------
   Report Selector - max-width: 420px;
   ---------------------------------------------------------- */
.report-select {
    width: 100%;
    max-width: 300px;
    padding: 8px 10px;
    font-size: 15px;
}

/* ----------------------------------------------------------
   Standard Buttons
   ---------------------------------------------------------- */

.btn-report {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #bcbcbc;
    background: #f5f5f5;
    color: #333;
    transition: background 0.2s ease;
}

.btn-report:hover {
    background: #ececec;
    text-decoration: none;
    color: #000;
}

/* ----------------------------------------------------------
   Embedded PDF Viewer
   ---------------------------------------------------------- */

.pdf-viewer {
    width: 100%;
    height: 900px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

/* ----------------------------------------------------------
   Report Gallery
   ---------------------------------------------------------- */

.report-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 20px;
}

.report-gallery-item {
    flex: 1 1 220px;
    max-width: 250px;
}

.report-gallery img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid #d6d6d6;
    transition: transform .18s ease;
}

.report-gallery img:hover {
    transform: scale(1.02);
}

/* ----------------------------------------------------------
   Image Popup
   ---------------------------------------------------------- */

.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.88);
}

.image-modal-content {
    display: block;
    margin: 40px auto;
    max-width: 92%;
    max-height: 82vh;
}

.image-modal-close {
    position: absolute;
    right: 25px;
    top: 18px;
    color: #fff;
    font-size: 34px;
    cursor: pointer;
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media (max-width: 768px) {
    .report-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .report-toolbar-right {
        width: 100%;
    }

    .btn-report {
        width: 100%;
        text-align: center;
    }

    .pdf-viewer {
        height: 650px;
    }
}

.pdf-container {
    padding: 10px 12px 12px 12px;
}